/* Lật Lịch (vùng 6 Phố Đồng Hồ): tháp đồng hồ, tờ lịch lớn, dải giờ trong ngày. Mọi lớp bắt đầu bằng ll2- */

.ll2-san {
  --ll2-dh: min(470px, calc((100vh - 240px) / 1.25), 40vw);
  --ll2-do: #e2463f;
  --ll2-do-dam: #a92f28;
  --ll2-kem: #fffaf0;
  --ll2-vang: #ffd166;
  --ll2-xanh-dh: #3d7be0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.ll2-canh { position: absolute; inset: 0; }
.ll2-hoi { color: #fff; font-size: 23px; font-weight: 800; line-height: 1.3; text-shadow: 0 2px 6px rgba(20, 10, 50, .55); }
.ll2-hoi small { font-size: 18px; opacity: .9; }
.ll2-nhac-nho { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.3; text-shadow: 0 2px 5px rgba(20, 10, 50, .55); }

/* ---------- Khủng long của vùng (Dực Long) ---------- */
.ll2-duc { position: absolute; z-index: 2; width: 118px; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(20, 10, 60, .35)); top: -6px; right: 0; }
.ll2-san[data-canh="dong_ho"] .ll2-duc { right: auto; left: 0; }
.ll2-san[data-canh="buoi"] .ll2-duc { top: -10px; }
@media (prefers-reduced-motion: no-preference) {
  .ll2-duc { animation: ll2Bay 3.2s ease-in-out infinite; }
  .ll2-duc.mung { animation: ll2Mung .9s cubic-bezier(.2, 1.4, .4, 1) 2; }
  @keyframes ll2Bay { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
  @keyframes ll2Mung { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-34px) scale(1.12) rotate(-8deg); } 100% { transform: translateY(0) scale(1); } }
}

/* ---------- Thẻ lựa chọn ---------- */
.ll2-the-hang { display: flex; gap: 14px; }
.ll2-the-hang.doc { flex-direction: column; }
.ll2-the-hang.ngang { flex-wrap: wrap; justify-content: center; }
.ll2-the-hang.so { flex-wrap: wrap; justify-content: flex-start; }
.ll2-the {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 22px 10px 14px;
  border: 3px solid #e6e0f5; border-radius: 22px; background: #fff; color: var(--ink); text-align: left;
  box-shadow: 0 6px 0 #d9d2ee, 0 10px 20px rgba(20, 10, 60, .2); transition: transform .12s, background .2s, border-color .2s, opacity .3s;
}
.ll2-the b { font-size: clamp(24px, 2.6vw, 31px); font-weight: 800; line-height: 1.15; }
.ll2-the:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #d9d2ee; }
.ll2-the-so { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 18px; font-weight: 800; color: var(--tim); background: var(--tim-nhat); }
.ll2-the.co-hinh { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px 12px; text-align: center; }
.ll2-the.co-hinh .ll2-the-so { position: absolute; left: 8px; top: 8px; }
.ll2-the-hinh svg { display: block; width: 136px; height: auto; }
.ll2-the-hang.dt .ll2-the-hinh svg { width: 150px; }
.ll2-the-hang.so .ll2-the { min-width: 104px; justify-content: center; padding: 10px 18px; }
.ll2-the-hang.so .ll2-the b { font-size: 34px; }
.ll2-the-hang.so .ll2-the-so { display: none; }
.ll2-the-hang.dai .ll2-the b { font-size: clamp(19px, 2vw, 23px); }
.ll2-the.sai { border-color: var(--do); background: var(--do-nhat); }
.ll2-the.dung { border-color: var(--xanh); background: var(--xanh-nhat); box-shadow: 0 0 0 6px rgba(6, 214, 160, .45), 0 8px 18px rgba(0, 0, 0, .2); }
.ll2-the.gach { background: #ebe8f1; border-color: #ddd8e8; color: #9a94b0; box-shadow: none; }
.ll2-the.gach .ll2-the-hinh { opacity: .4; }
.ll2-the.gach::after { content: "✕"; position: absolute; right: -10px; top: -10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--do); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ll2-rung { animation: rung .45s; }

/* ---------- Cảnh 1: tháp đồng hồ ---------- */
.ll2-dh-canh { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.ll2-thap { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 0 10px; }
.ll2-thap-mai { position: relative; width: calc(var(--ll2-dh) + 110px); height: calc(var(--ll2-dh) * .21); margin-bottom: -6px; filter: drop-shadow(0 6px 6px rgba(20, 10, 60, .25)); }
.ll2-thap-mai::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #ff7a63, #d23d33 60%, #a92f28); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ll2-thap-mai::after { content: ""; position: absolute; left: 50%; top: -12px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f2b705 60%, #b37d00); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.ll2-chuong { position: absolute; left: 50%; bottom: 8px; width: 30px; height: 28px; margin-left: -15px; border-radius: 50% 50% 38% 38% / 62% 62% 38% 38%; background: radial-gradient(circle at 35% 30%, #fff1a8, #f2b705 55%, #a86f00); box-shadow: 0 3px 5px rgba(0, 0, 0, .3); transform-origin: 50% 0; }
.ll2-chuong::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #8a5a00; }
.ll2-thap-than {
  position: relative; padding: 16px 20px 20px; border-radius: 26px 26px 10px 10px;
  background: repeating-linear-gradient(0deg, rgba(160, 110, 50, .12) 0 2px, transparent 2px 26px), linear-gradient(#f9e8cb, #ebcfa0);
  box-shadow: inset 0 -6px 0 rgba(150, 100, 40, .25), 0 12px 26px rgba(20, 10, 60, .35);
}
.ll2-dh { position: relative; width: var(--ll2-dh); aspect-ratio: 1; border-radius: 50%; padding: 8px; background: radial-gradient(circle at 35% 30%, #ffeab0, #e3ad3f 70%, #b88420); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 6px 14px rgba(0, 0, 0, .25); transition: box-shadow .3s, opacity .3s; }
.ll2-dh svg { display: block; width: 100%; height: auto; }
.ll2-dh.quay { cursor: grab; }
.ll2-dh.mo svg { opacity: .45; }
.ll2-dh.dung { box-shadow: 0 0 0 9px rgba(6, 214, 160, .7), 0 6px 14px rgba(0, 0, 0, .25); }
.ll2-dh-svg.chon-phut .dh-kim-phut path, .ll2-dh-svg.chon-gio .dh-kim-gio path:first-child { stroke: #ffd166; stroke-width: 6px; paint-order: stroke; stroke-linejoin: round; }
.ll2-muc { fill: rgba(255, 209, 102, .6); stroke: #ff8a1f; stroke-width: 3.5px; }
.ll2-thap-chan { width: calc(var(--ll2-dh) + 110px); height: 30px; margin-top: -2px; border-radius: 14px 14px 8px 8px; background: linear-gradient(#cf9f63, #9c6b33); box-shadow: 0 8px 16px rgba(20, 10, 60, .35); }
@media (prefers-reduced-motion: no-preference) {
  .ll2-chuong.rung-chuong { animation: ll2Chuong .9s ease-in-out; }
  @keyframes ll2Chuong { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(22deg); } 45% { transform: rotate(-18deg); } 70% { transform: rotate(10deg); } }
  .ll2-muc { animation: ll2Nhip 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes ll2Nhip { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
}

.ll2-ben { display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 500px; min-width: 0; padding-right: 6px; }
.ll2-muc-tieu { background: #fff; border-radius: 24px; padding: 12px 22px 14px; box-shadow: 0 6px 0 #d9d2ee, 0 10px 22px rgba(20, 10, 60, .25); display: flex; flex-direction: column; }
.ll2-muc-tieu small { font-size: 18px; font-weight: 800; color: var(--ink-2); }
.ll2-muc-tieu b { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1; color: var(--ll2-do-dam); }
.ll2-chon-kim { display: flex; gap: 12px; }
.ll2-kim-nut { flex: 1; min-height: 68px; border: 3px solid rgba(255, 255, 255, .7); border-radius: 20px; background: rgba(255, 255, 255, .88); color: var(--ink); font-size: 21px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 6px 8px; }
.ll2-kim-nut small { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.ll2-kim-nut.chon { background: #fff; border-color: var(--ll2-vang); box-shadow: 0 0 0 4px rgba(255, 209, 102, .6); }
.ll2-kim-mau { display: block; height: 10px; border-radius: 6px; margin-bottom: 4px; }
.ll2-kim-mau.gio { width: 30px; height: 12px; background: #22326e; }
.ll2-kim-mau.phut { width: 50px; height: 7px; background: #e63946; }
.ll2-xong { align-self: flex-start; min-width: 190px; }

/* ---------- Cảnh 2: tờ lịch ---------- */
.ll2-lich-canh { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
.ll2-lich { --ll2-o: clamp(44px, calc((100vh - 360px) / 6.6), 64px); position: relative; width: min(700px, 58vw); padding-top: 20px; }
.ll2-lich-vong { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-around; z-index: 3; pointer-events: none; padding: 0 70px; }
.ll2-lich-vong i { width: 20px; height: 38px; border-radius: 10px; background: linear-gradient(#fff, #e6ddc9); border: 4px solid #7a2a1c; box-shadow: 0 3px 5px rgba(0, 0, 0, .3); }
.ll2-trang { position: relative; background: var(--ll2-kem); border-radius: 24px; box-shadow: 0 6px 0 #e3d2ad, 0 16px 30px rgba(20, 10, 60, .35); overflow: hidden; }
.ll2-trang-td { background: linear-gradient(#ff6b5e, #d83a32); color: #fff; text-align: center; padding: 18px 12px 8px; display: flex; flex-direction: column; line-height: 1.05; }
.ll2-trang-td b { font-size: 34px; letter-spacing: .04em; }
.ll2-trang-td small { font-size: 17px; font-weight: 700; opacity: .92; }
.ll2-luoi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, var(--ll2-o)); gap: 3px; padding: 8px 10px 12px; }
.ll2-thu { grid-row: 1; min-height: 54px; border: 0; border-radius: 14px; background: #f1ecfb; color: #3b2f63; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding: 4px 2px; position: relative; transition: background .2s, transform .12s; }
.ll2-thu small { font-size: 14px; font-weight: 700; }
.ll2-thu b { font-size: 20px; font-weight: 800; }
.ll2-thu.cn { color: #d83a32; background: #fdecea; }
.ll2-thu:active:not(:disabled) { transform: scale(.94); }
.ll2-ngay { position: relative; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font-size: clamp(22px, 2.4vw, 27px); font-weight: 800; display: grid; place-items: center; padding: 0; transition: background .2s, transform .12s; }
.ll2-ngay span { position: relative; z-index: 1; }
.ll2-ngay.cn, .ll2-ngay.le { color: #d83a32; }
.ll2-ngay:active { transform: scale(.92); }
.ll2-ngay.cot-sang, .ll2-thu.cot-sang { background: rgba(61, 123, 224, .16); }
.ll2-thu.cot-sang { background: #cfe0ff; }
.ll2-ngay.xem::before, .ll2-ngay.goc::before, .ll2-ngay.dem::before, .ll2-ngay.dung::before, .ll2-ngay.sai::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(46px, 92%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.ll2-ngay.xem::before { background: #ffe9a8; border: 3px solid #ffb703; }
.ll2-ngay.goc::before { background: #ffe08a; border: 3px solid #ff8a1f; }
.ll2-ngay.goc em { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 2; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: #ff8a1f; border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.ll2-ngay.dem::before { background: #cfe0ff; border: 3px solid var(--ll2-xanh-dh); }
.ll2-ngay.dem::after { content: "✓"; position: absolute; right: 2px; top: -2px; z-index: 2; font-size: 16px; color: var(--ll2-xanh-dh); }
.ll2-ngay.dung::before { background: var(--xanh); border: 3px solid #07a47c; }
.ll2-ngay.dung { color: #053d33; }
.ll2-ngay.sai::before { background: var(--do-nhat); border: 3px solid var(--do); }
.ll2-ngay.hoi span { color: #fff; }
.ll2-ngay.hoi::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(44px, 90%); height: 38px; transform: translate(-50%, -50%); border-radius: 11px; background: #ff8a1f; }
.ll2-ngay.hoi.dung span { color: #053d33; }
.ll2-ngay.hoi.dung::before { background: var(--xanh); border-radius: 50%; }
.ll2-thu.sai { background: var(--do-nhat); box-shadow: inset 0 0 0 3px var(--do); }
.ll2-thu.dung { background: var(--xanh); color: #053d33; box-shadow: 0 0 0 4px rgba(6, 214, 160, .45); }
.ll2-thu.gach { opacity: .4; }
.ll2-thu.gach::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--do); font-size: 30px; font-weight: 800; }

.ll2-trang-cu { position: absolute; left: 0; right: 0; top: 20px; bottom: 0; z-index: 2; cursor: pointer; transform-origin: 50% 0; }
.ll2-trang-cu::after { content: ""; position: absolute; right: 0; bottom: 0; width: 72px; height: 72px; background: linear-gradient(135deg, transparent 50%, #efe0bf 50%, #fff 72%); border-top-left-radius: 18px; box-shadow: -4px -4px 10px rgba(0, 0, 0, .12); }
.ll2-trang-cu.lat-di { pointer-events: none; animation: ll2LatTrang .6s cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes ll2LatTrang { 0% { transform: perspective(900px) rotateX(0); opacity: 1; } 100% { transform: perspective(900px) rotateX(-100deg) translateY(-30px); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .ll2-trang-cu:not(.lat-di) { animation: ll2GoiLat 1.8s ease-in-out infinite; }
  @keyframes ll2GoiLat { 0%, 70%, 100% { transform: perspective(900px) rotateX(0); } 80% { transform: perspective(900px) rotateX(-7deg); } 90% { transform: perspective(900px) rotateX(-2deg); } }
}
.ll2-bia { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle at 50% 40%, #6f8cff, #3d4fb8 70%); color: #fff; text-align: center; }
.ll2-bia img { width: 46%; max-width: 250px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); }
.ll2-bia b { font-size: 34px; }
.ll2-bia small { font-size: 20px; font-weight: 700; opacity: .9; }
.ll2-lat { position: absolute; z-index: 4; right: 14px; bottom: -22px; min-height: 58px; padding: 8px 26px 8px 22px; border: 0; border-radius: 999px; background: var(--cam); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 6px 0 var(--cam-dam), 0 10px 18px rgba(0, 0, 0, .25); }
.ll2-lat::before { content: "▲ "; }
.ll2-lat:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--cam-dam); }

.ll2-hom-nay { align-self: flex-start; background: #fff; border-radius: 22px; padding: 10px 22px 12px; box-shadow: 0 6px 0 #ffd79a, 0 10px 20px rgba(20, 10, 60, .25); display: flex; flex-direction: column; border: 3px solid #ffb703; }
.ll2-hom-nay small { font-size: 16px; font-weight: 800; color: #b36b00; text-transform: uppercase; letter-spacing: .08em; }
.ll2-hom-nay b { font-size: 30px; line-height: 1.1; }
.ll2-dem { align-self: flex-start; background: rgba(255, 255, 255, .92); border-radius: 18px; padding: 8px 18px; font-size: 21px; font-weight: 800; color: var(--ink-2); }
.ll2-dem b { font-size: 32px; color: var(--ll2-xanh-dh); }
.ll2-ben.cho-lat .ll2-the-hang, .ll2-ben.cho-lat .ll2-dem { opacity: .45; }

/* ---------- Cảnh 3: dải giờ trong ngày ---------- */
.ll2-buoi-canh { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; }
.ll2-tren { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ll2-dai { position: relative; flex: none; padding: 34px 2px 0; }
.ll2-dai-bang { display: flex; height: 104px; border-radius: 26px; overflow: hidden; box-shadow: 0 6px 0 rgba(20, 10, 60, .25), 0 12px 24px rgba(20, 10, 60, .3); }
.ll2-vung { flex-basis: 0; min-width: 0; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; color: #3b2400; position: relative; transition: filter .2s, box-shadow .2s, opacity .3s; }
.ll2-vung svg { width: 38px; height: 38px; }
.ll2-vung b { font-size: 22px; font-weight: 800; line-height: 1; }
.ll2-vung-sang { background: linear-gradient(90deg, #a9dcff, #ffe7a3); }
.ll2-vung-trua { background: linear-gradient(90deg, #ffe066, #ffd23f); }
.ll2-vung-trua b { font-size: 17px; }
.ll2-vung-trua svg { width: 30px; height: 30px; }
.ll2-vung-chieu { background: linear-gradient(90deg, #ffc07a, #ff8e6e); }
.ll2-vung-toi { background: linear-gradient(90deg, #7a6ae0, #4b43a8); color: #fff; }
.ll2-vung-dem { background: linear-gradient(90deg, #2a3470, #1a2150); color: #fff; }
.ll2-vung + .ll2-vung { box-shadow: inset 2px 0 0 rgba(255, 255, 255, .55); }
.ll2-vung.nhan { box-shadow: inset 0 0 0 6px var(--ll2-vang); filter: brightness(1.08); }
.ll2-vung.dung { box-shadow: inset 0 0 0 7px var(--xanh); }
.ll2-vung.sai { box-shadow: inset 0 0 0 7px var(--do); }
.ll2-vung.gach { opacity: .35; }
.ll2-vung.gach::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--do); font-size: 44px; font-weight: 800; }
.ll2-dai-so { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); margin-top: 6px; }
.ll2-dai-so i { font-style: normal; text-align: center; color: #fff; font-size: 17px; font-weight: 800; text-shadow: 0 1px 0 #221a3b, 0 0 4px rgba(20, 10, 50, .8); }
.ll2-ghim-lop { position: absolute; left: 2px; right: 2px; top: 34px; height: 104px; pointer-events: none; }
.ll2-ghim { position: absolute; top: -6px; bottom: -6px; width: 5px; margin-left: -2.5px; border-radius: 3px; background: #ff6b35; box-shadow: 0 0 0 2px #fff; font-style: normal; }
.ll2-ghim b { position: absolute; left: 50%; top: -32px; transform: translateX(-50%); white-space: nowrap; font-size: 18px; font-weight: 800; color: #fff; background: #ff6b35; border-radius: 99px; padding: 1px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ll2-ghim.dung { background: #06a77d; }
.ll2-ghim.dung b { background: #06a77d; }
@media (prefers-reduced-motion: no-preference) { .ll2-ghim { animation: ll2Ghim .45s cubic-bezier(.2, 1.5, .4, 1) both; } @keyframes ll2Ghim { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } } }

.ll2-keo-hang { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; }
.ll2-mui-xuong { display: block; width: 44px; height: 44px; margin: 14px auto 0; border-radius: 50%; background: rgba(255, 255, 255, .22); position: relative; }
.ll2-mui-xuong::after { content: ""; position: absolute; left: 50%; top: 42%; width: 14px; height: 14px; border-right: 5px solid #fff; border-bottom: 5px solid #fff; transform: translate(-50%, -50%) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .ll2-mui-xuong { animation: ll2Nay 1.2s ease-in-out infinite; } @keyframes ll2Nay { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } }
.ll2-the-gio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px 12px; border: 3px solid #e6e0f5; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 6px 0 #d9d2ee, 0 12px 24px rgba(20, 10, 60, .3); cursor: grab; touch-action: none; }
.ll2-the-gio svg { display: block; width: 170px; height: auto; }
.ll2-the-gio b { font-size: 30px; font-weight: 800; }
.ll2-the-gio.chon, .ll2-viec.chon { border-color: var(--ll2-vang); box-shadow: 0 0 0 6px rgba(255, 209, 102, .7), 0 12px 24px rgba(20, 10, 60, .3); }
.ll2-the-gio.dang-keo, .ll2-viec.dang-keo { opacity: .3; }
@media (prefers-reduced-motion: no-preference) { .ll2-the-gio.ve { animation: ll2Ve .5s cubic-bezier(.2, 1.5, .4, 1); } @keyframes ll2Ve { from { transform: translateY(40px) scale(.9); } to { transform: none; } } }

.ll2-xep { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.ll2-khay { display: flex; gap: 16px; justify-content: center; min-height: 150px; padding: 8px 18px; border-radius: 26px; background: rgba(255, 255, 255, .16); border: 2px dashed rgba(255, 255, 255, .5); }
.ll2-khay:empty { visibility: hidden; }
.ll2-viec { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 188px; min-height: 132px; padding: 8px 10px; border: 3px solid #e6e0f5; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 5px 0 #d9d2ee, 0 10px 18px rgba(20, 10, 60, .25); cursor: grab; touch-action: none; line-height: 1.15; }
.ll2-viec-bieu { font-size: 40px; line-height: 1.1; }
.ll2-viec b { font-size: 22px; font-weight: 800; }
.ll2-viec small { font-size: 18px; font-weight: 700; color: var(--ink-2); }
.ll2-o-hang { display: flex; align-items: center; gap: 10px; }
.ll2-o { position: relative; width: 206px; min-height: 160px; padding: 24px 6px 6px; border: 3px dashed rgba(255, 255, 255, .85); border-radius: 24px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; }
.ll2-o em { position: absolute; left: 0; right: 0; top: 3px; text-align: center; font-style: normal; font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(20, 10, 50, .7); }
.ll2-o.co { border-style: solid; background: rgba(255, 255, 255, .28); }
.ll2-o.nhan { border-color: var(--ll2-vang); box-shadow: 0 0 0 5px rgba(255, 209, 102, .6); }
.ll2-o .ll2-viec { width: 180px; }
.ll2-mui { font-style: normal; font-size: 34px; font-weight: 800; color: #fff; text-shadow: 0 2px 5px rgba(20, 10, 50, .6); }
.ll2-xep .ll2-xong { align-self: center; min-width: 200px; min-height: 60px; }

.ll2-chon-hang { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; width: 100%; }
.ll2-cho-the { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 24px; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 #d9d2ee, 0 12px 24px rgba(20, 10, 60, .3); }
.ll2-cho-the svg { display: block; max-width: 100%; height: auto; }
.ll2-cho-the > svg:first-child:not(.dt-svg):not(.dh-svg):not(.viec-svg) { width: 56px; height: 56px; }
.ll2-cho-the b { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; color: var(--ink); line-height: 1.1; }
.ll2-cho-the small { font-size: 20px; font-weight: 800; color: var(--ink-2); }
.ll2-cho-the .dt-svg { width: 200px; }
.ll2-cho-the.dh .dh-svg { width: 210px; }
.ll2-cho-the.viec { padding: 10px; background: transparent; box-shadow: none; }
.ll2-cho-the.viec .viec-svg { width: min(470px, 46vw); }

/* ---------- Bóng khi kéo ---------- */
.ll2-keo-bong { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; will-change: transform; }
.ll2-keo-bong > * { transform: rotate(-3deg) scale(1.05); box-shadow: 0 18px 30px rgba(20, 10, 60, .45) !important; opacity: .96; }

/* ---------- Bài học 30 giây ---------- */
.ll2-bh { display: flex; justify-content: center; align-items: center; max-width: 100%; }
.ll2-bh svg { max-width: 100%; height: auto; }
.ll2-bh.dai svg { width: min(660px, 84vw); }
.ll2-bh-thang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(620px, 100%); }
.ll2-bh-o { display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: 16px; line-height: 1.15; }
.ll2-bh-o b { font-size: 20px; }
.ll2-bh-o small { font-size: 16px; font-weight: 800; }
.ll2-bh-o.n31 { background: #ffe1dc; color: #a92f28; }
.ll2-bh-o.n30 { background: #dcebff; color: #1d4f9c; }
.ll2-bh-o.n28 { background: #fff1c2; color: #7a5a10; }

/* ---------- Màn hình hẹp, xoay dọc ---------- */
@media (max-width: 1100px) and (orientation: landscape) {
  .ll2-the-hinh svg { width: 118px; }
  .ll2-viec { width: 170px; }
  .ll2-o { width: 186px; }
  .ll2-o .ll2-viec { width: 164px; }
}
@media (orientation: portrait), (max-width: 760px) {
  .ll2-san { --ll2-dh: min(300px, 64vw); }
  .ll2-dh-canh { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px; align-content: start; justify-items: center; }
  .ll2-thap { height: auto; }
  .ll2-thap-mai { height: calc(var(--ll2-dh) * .14); }
  .ll2-ben { width: 100%; max-width: 620px; gap: 12px; }
  .ll2-the { min-height: 64px; }
  .ll2-the-hang.doc .ll2-the b { font-size: 26px; }
  .ll2-lich-canh { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 26px; align-content: start; justify-items: center; }
  .ll2-lich { width: min(600px, 96vw); --ll2-o: 50px; }
  .ll2-ben .ll2-the-hang.so { justify-content: center; }
  .ll2-duc { width: 92px; }
  .ll2-san[data-canh="lich"] .ll2-duc { top: auto; bottom: 0; }
  .ll2-vung b { font-size: 17px; }
  .ll2-vung svg { width: 30px; height: 30px; }
  .ll2-vung-trua b { font-size: 13px; }
  .ll2-dai-so i { font-size: 13px; }
  .ll2-khay { gap: 8px; padding: 8px; flex-wrap: wrap; }
  .ll2-viec { width: 150px; min-height: 120px; }
  .ll2-viec b { font-size: 19px; }
  .ll2-viec small { font-size: 15px; }
  .ll2-o-hang { flex-wrap: wrap; justify-content: center; }
  .ll2-o { width: 164px; min-height: 144px; }
  .ll2-o .ll2-viec { width: 150px; }
  .ll2-mui { font-size: 26px; }
}
@media (max-height: 640px) and (orientation: landscape) {
  .ll2-dai-bang { height: 84px; }
  .ll2-ghim-lop { height: 84px; }
  .ll2-the { min-height: 62px; }
  .ll2-viec { min-height: 112px; }
  .ll2-o { min-height: 130px; }
  .ll2-khay { min-height: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  .ll2-trang-cu.lat-di { animation-duration: .01s; }
  .ll2-rung { animation-duration: .01s; }
}