/* Trò chơi ôn tập (/cong-cu/tro-choi). Tệp nạp ở mọi trang → mọi lớp có tiền tố tc-. Sân chơi (.tc-san) là màn chiếu nền xanh đậm, chữ to. */
.chinh:has(> .tc) { max-width: 1200px; }
.tc-an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tc-ve { margin: 0 0 4px; font-size: .875rem; }
.tc-ve a { text-decoration: none; font-weight: 600; }
.tc-ve a::before { content: "‹ "; }
.tc-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.tc-dau h1 { margin: 0; }
.tc-dau .phu { margin: 2px 0 0; max-width: 46rem; }
.tc-dau__phai { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tc-chon { min-width: 240px; }

/* Danh mục */
.tc-ds { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 16px; }
.tc-o { display: flex; gap: 14px; align-items: flex-start; margin: 0; text-decoration: none; color: var(--chu); transition: border-color .15s, box-shadow .15s; }
.tc-o:hover { border-color: var(--c-vien); box-shadow: var(--bong); }
.tc-o .bt { flex: none; color: var(--c); background: var(--c-nhat); border-radius: 12px; padding: 8px; box-sizing: content-box; }
.tc-o h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--c-dam); }
.tc-o p { margin: 0; color: var(--phu); font-size: .9375rem; }
.tc-ghi a { font-weight: 700; }

/* Tab, bảng soạn */
.tc-tab { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.tc-tab [role="tab"] { flex: none; min-height: 46px; padding: 8px 20px; border-radius: 999px; border: 1px solid var(--vien); background: var(--the);
  color: var(--chu); font: inherit; font-weight: 700; cursor: pointer; }
.tc-tab [role="tab"]:hover { border-color: var(--c-vien); color: var(--c-dam); }
.tc-tab [role="tab"][aria-selected="true"] { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.tc-p { padding: clamp(16px, 2.2vw, 28px); }
.tc-tom h2 { margin: 0 0 4px; }
.tc-nut-to { min-height: 56px; padding: 12px 34px; font-size: 1.15rem; }
.tc-goi-y { margin: 10px 0 0; }
.tc-doi-cd { border: 1px solid var(--vien); border-radius: var(--r-nho); padding: 10px 14px 14px; margin: 12px 0 16px; }
.tc-doi-cd legend { font-weight: 700; padding: 0 6px; }
.tc-doi-ds { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tc-doi-ds input, .tc-so-em input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--vien); border-radius: var(--r-nho); font: inherit; }
.tc-so-em { max-width: 220px; margin-bottom: 14px; }
.tc-cd { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tc-kiem ul { margin: 6px 0 0; padding-left: 20px; }
.tc-kiem .bao { margin: 14px 0 0; }
.tc-nut-soan { margin-top: 16px; }
.tc-nhan-o { font-weight: 600; font-size: .9375rem; }
.tc-hinh-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tc-hinh { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--vien); border-radius: var(--r-nho); background: #fff; }
.tc-hinh__anh { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; background: #eef1ee; }
.tc-hinh__chu { display: grid; gap: 6px; }
.tc-hinh__chu input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--vien); border-radius: var(--r-nho); font: inherit; }
.tc-hinh__nut { display: flex; flex-direction: column; gap: 6px; }
.tc-hinh__nut label { cursor: pointer; }
.tc-nhanh { margin: 4px 0; }
.tc-nhanh summary { cursor: pointer; font-weight: 600; color: var(--c-dam); min-height: 36px; }
.tc-nhanh .field { margin: 8px 0; }
@media (max-width: 640px) {
  .tc-chon { min-width: 0; flex: 1 1 200px; }
  .tc-hinh { grid-template-columns: 72px 1fr; }
  .tc-hinh__anh { width: 72px; height: 54px; }
  .tc-hinh__nut { grid-column: 1 / -1; flex-direction: row; }
}

/* ── Sân chơi (màn chiếu) ─────────────────────────────────────────── */
html.tc-khoa-cuon, html.tc-khoa-cuon body { overflow: hidden; }
.tc-san { position: fixed; inset: 0; z-index: 200; background: radial-gradient(ellipse at 50% 0%, #174a8c 0%, #093166 45%, #031d42 100%); color: #fff;
  overflow: auto; -webkit-overflow-scrolling: touch; }
.tc-san[hidden] { display: none; }
.tc-san:fullscreen { background: radial-gradient(ellipse at 50% 0%, #174a8c 0%, #093166 45%, #031d42 100%); }
.tc-san::backdrop { background: #031d42; }
.tc-phao { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.tc-khung { min-height: 100%; display: flex; flex-direction: column; }
.tc-thanh { display: flex; align-items: center; gap: 12px; padding: 10px clamp(12px, 2vw, 28px); border-bottom: 1px solid rgba(255,255,255,.12); }
.tc-thanh__ten { font-size: clamp(1rem, 1.4vw, 1.3rem); color: var(--nhan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.tc-thanh__giua { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.tc-thanh__nut { display: flex; gap: 4px; flex: none; }
.tc-than { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(10px, 2.2vh, 32px) clamp(12px, 3vw, 48px); position: relative; }
.tc-chan { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px clamp(12px, 2vw, 28px) 14px; border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); }
.tc-hang { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.tc-nho { font-size: .9375rem; color: #c9d6ea; margin: 0 0 12px; }
.tc-tp-so { font-weight: 700; font-size: clamp(.95rem, 1.3vw, 1.2rem); color: #dbe6f6; white-space: nowrap; }

/* Nút trong sân chơi */
.tc-nut { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border-radius: 999px; font: inherit;
  font-weight: 700; font-size: clamp(1rem, 1.2vw, 1.15rem); cursor: pointer; border: 2px solid rgba(255,255,255,.4); background: rgba(255,255,255,.06); color: #fff; }
.tc-nut:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: #fff; }
.tc-nut:disabled { opacity: .4; cursor: not-allowed; }
.tc-nut:focus-visible { outline: 3px solid var(--nhan); outline-offset: 2px; }
.tc-nut[hidden] { display: none; }
.tc-nut--chinh { background: var(--nhan); border-color: var(--nhan); color: #031d42; }
.tc-nut--chinh:hover:not(:disabled) { background: #ffd27a; border-color: #ffd27a; color: #031d42; }
.tc-nut--dung { border-color: #6fd08c; color: #d9f7e2; }
.tc-nut--dung:hover:not(:disabled) { background: #1f7a3a; border-color: #6fd08c; }
.tc-nut--sai { border-color: #f19a90; color: #ffe1dd; }
.tc-nut--sai:hover:not(:disabled) { background: #9b2a1f; border-color: #f19a90; }
.tc-nut--nho { min-height: 40px; min-width: 40px; padding: 4px 12px; font-size: 1.1rem; }
.tc-nut--bt { width: 46px; height: 46px; min-height: 0; padding: 0; border-color: transparent; background: transparent; }
.tc-nut--bt:hover:not(:disabled) { border-color: transparent; }
.tc-nut.tc-nut--bt { padding: 0; }
.tc-nut--bt svg { flex: none; }

/* Đồng hồ tròn */
.tc-gio { --p: 1; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--nhan) calc(var(--p) * 360deg), rgba(255,255,255,.15) 0); transition: background .3s; }
.tc-gio__so { width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center; background: #06285a; font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tc-gio--gap { background: conic-gradient(#ff6b5b calc(var(--p) * 360deg), rgba(255,255,255,.15) 0); }
.tc-gio--gap .tc-gio__so { color: #ffb4aa; }
.tc-gio.tc-gio--to { width: clamp(120px, 14vw, 180px); height: clamp(120px, 14vw, 180px); margin: 0 auto 14px; }
.tc-gio.tc-gio--to .tc-gio__so { font-size: clamp(2.4rem, 5vw, 4rem); }

/* Bảng điểm đội */
.tc-doi { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 14px; background: rgba(255,255,255,.07); border: 2px solid transparent; }
.tc-doi--luot { border-color: var(--nhan); background: rgba(240,190,88,.14); }
.tc-doi__ten { border: 0; background: transparent; min-height: 40px; padding: 4px 10px; font-size: clamp(.95rem, 1.2vw, 1.15rem); }
.tc-doi__diem { min-width: 3ch; text-align: center; font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--nhan); font-variant-numeric: tabular-nums; }
.tc-doi__nut { display: flex; gap: 4px; }
.tc-doi--nhay .tc-doi__diem { animation: tc-nhay .5s ease; }
@keyframes tc-nhay { 40% { transform: scale(1.45); } }

/* Kết quả */
.tc-ket { text-align: center; max-width: 760px; margin: 0 auto; }
.tc-ket__nho { font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: #dbe6f6; margin: 0 0 8px; }
.tc-ket .tc-hang { margin-top: 18px; }
.tc-ket__to { font-size: clamp(2.2rem, 6vw, 4.8rem); color: var(--nhan); margin: 0 0 20px; line-height: 1.15; }
.tc-ket__ds { list-style: none; counter-reset: h; padding: 0; margin: 0 auto 22px; max-width: 520px; text-align: left; }
.tc-ket__ds li { counter-increment: h; display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 12px; font-size: clamp(1.05rem, 1.6vw, 1.4rem); }
.tc-ket__ds li::before { content: counter(h) "."; font-weight: 800; color: var(--nhan); min-width: 2ch; }
.tc-ket__ds li span { flex: 1; }
.tc-ket__ds li:nth-child(odd) { background: rgba(255,255,255,.07); }

/* ── Ai là triệu phú ── */
.tc-tp { display: grid; grid-template-columns: 1fr minmax(200px, 250px); gap: clamp(14px, 2.4vw, 36px); align-items: center; }
.tc-tp__trai { display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 22px); }
.tc-tp-hoi { background: linear-gradient(180deg, #0f3d7a, #072a58); border: 2px solid #5b86c4; border-radius: 22px; padding: clamp(18px, 2.4vw, 32px);
  font-size: clamp(1.3rem, 2.5vw, 2.3rem); font-weight: 700; line-height: 1.35; text-align: center; min-height: 3.5em; display: grid; place-items: center; }
.tc-tp-pa { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }
.tc-tp-o { justify-content: flex-start; gap: 12px; min-height: clamp(60px, 7vw, 86px); border-radius: 18px; padding: 10px 20px; text-align: left;
  font-size: clamp(1.1rem, 1.9vw, 1.7rem); background: #072a58; border-color: #5b86c4; }
.tc-tp-o__chu { color: var(--nhan); font-weight: 900; flex: none; }
.tc-tp-o--chon, .tc-tp-o--chot { background: #b8791a !important; border-color: var(--nhan) !important; color: #fff; }
.tc-tp-o--chot { animation: tc-chop .5s ease-in-out 3; }
.tc-tp-o--dung { background: #1f7a3a !important; border-color: #6fd08c !important; color: #fff; opacity: 1 !important; animation: tc-chop .35s ease-in-out 4; }
.tc-tp-o--sai { background: #9b2a1f !important; border-color: #f19a90 !important; opacity: 1 !important; }
.tc-tp-o--bo { visibility: hidden; }
.tc-tp-o:disabled { opacity: 1; cursor: default; }
@keyframes tc-chop { 50% { filter: brightness(1.35); } }
.tc-tp-tro__nut { border-color: var(--nhan); color: var(--nhan); }
.tc-tp-tro__nut:disabled { text-decoration: line-through; }
.tc-tp-thang { list-style: none; margin: 0; padding: 10px; border-radius: 18px; background: rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 2px; }
.tc-tp-bac { display: flex; justify-content: space-between; gap: 10px; padding: 3px 12px; border-radius: 8px; color: #c9d6ea; font-variant-numeric: tabular-nums; font-size: clamp(.85rem, 1.1vw, 1.05rem); }
.tc-tp-bac span { min-width: 2ch; }
.tc-tp-bac--moc { color: #fff; font-weight: 700; }
.tc-tp-bac--qua { color: var(--nhan); }
.tc-tp-bac--hien { background: var(--nhan); color: #031d42; font-weight: 800; }
.tc-tp-lop, .tc-od-lop { position: absolute; inset: 0; z-index: 3; background: rgba(3,29,66,.97); display: grid; place-items: center; padding: 16px; }
.tc-tp-lop[hidden], .tc-od-lop[hidden] { display: none; }
.tc-tp-lop__hop { width: min(720px, 100%); background: #0b336b; border: 2px solid #5b86c4; border-radius: 22px; padding: clamp(18px, 2.4vw, 32px); text-align: center; }
.tc-tp-lop__hop h2 { color: var(--nhan); font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.tc-tp-kg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.tc-tp-kg__o { display: flex; align-items: center; gap: 6px; justify-content: center; font-weight: 800; font-size: 1.2rem; }
.tc-tp-kg__o input { width: 4.2em; min-height: 46px; padding: 6px; border-radius: 10px; border: 1px solid #5b86c4; font: inherit; text-align: center; }
.tc-tp-cot { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 3vw, 40px); height: 220px; margin-top: 16px; }
.tc-tp-cot:empty { display: none; }
.tc-tp-cot__o { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; width: 60px; font-weight: 800; }
.tc-tp-cot__than { width: 100%; background: linear-gradient(180deg, var(--nhan), #b8791a); border-radius: 8px 8px 0 0; min-height: 2px; transition: height .8s ease; }

/* ── Ô điểm chủ đề ── */
.tc-od { --cot: 5; display: grid; grid-template-columns: repeat(var(--cot), minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); }
.tc-od-cd { display: grid; place-items: center; text-align: center; min-height: 3.2em; padding: 6px; border-radius: 12px; background: rgba(0,0,0,.25);
  font-weight: 800; font-size: clamp(.95rem, 1.6vw, 1.4rem); color: var(--nhan); line-height: 1.2; }
.tc-od-o { min-height: clamp(48px, 9vh, 100px); border-radius: 14px; font-size: clamp(1.4rem, 3vw, 2.8rem); font-weight: 900; color: var(--nhan);
  background: linear-gradient(180deg, #1552a0, #0a3977); border-color: #3f73b8; }
.tc-od-o--xong { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.tc-od-o--rong { border-radius: 14px; background: rgba(255,255,255,.03); }
.tc-od-kt { font-size: .9375rem; }
.tc-od-hop { width: min(980px, 100%); text-align: center; }
.tc-od-hop__cd { color: var(--nhan); font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.6rem); margin: 0 0 12px; }
.tc-od-hop__hoi { font-size: clamp(1.6rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1.3; margin: 0 0 18px; }
.tc-od-hop__dap { font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 800; color: #9ff0b7; margin: 0 0 16px; }
.tc-od-hop .tc-gio { margin: 0 auto 14px; }
.tc-od-cham { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0; }
.tc-od-cham__dong { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 2px solid transparent; }
.tc-od-cham__dong--luot { border-color: var(--nhan); }
.tc-od-cham__dong--xong { opacity: .55; }
.tc-od-cham__dong > span { font-weight: 700; }

/* ── Lật thẻ ── */
.tc-lt { --cot: 4; display: grid; grid-template-columns: repeat(var(--cot), minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); width: min(1200px, 100%); margin: 0 auto; }
.tc-lt-the { position: relative; padding: 0; border: 0; background: none; min-height: clamp(84px, 15vh, 150px); perspective: 900px; border-radius: 16px; }
.tc-lt-the:hover:not(:disabled) { background: none; }
.tc-lt-the:disabled { opacity: 1; cursor: default; }
.tc-lt-mat { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .45s ease; text-align: center; line-height: 1.2; word-break: break-word; }
.tc-lt-mat--sau { background: linear-gradient(135deg, #1552a0, #0a3977); border: 2px solid #3f73b8; color: var(--nhan); font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 900; }
.tc-lt-mat--truoc { transform: rotateY(180deg); background: #fff; color: #093166; border: 3px solid var(--nhan); font-size: clamp(1.1rem, 2.2vw, 2rem); font-weight: 800; }
.tc-lt-mat--v1 { background: #fdf3de; }
.tc-lt-mat--dai { font-size: clamp(.95rem, 1.5vw, 1.35rem); }
.tc-lt-the--mo .tc-lt-mat--sau { transform: rotateY(-180deg); }
.tc-lt-the--mo .tc-lt-mat--truoc { transform: rotateY(0); }
.tc-lt-the--xong .tc-lt-mat--truoc { background: #e8f5ec; border-color: #6fd08c; color: #184d27; }
.tc-lt-the--sai .tc-lt-mat--truoc { border-color: #f19a90; }

/* ── Sắp xếp ── */
.tc-sx { width: min(1100px, 100%); margin: 0 auto; text-align: center; }
.tc-sx-yc { font-size: clamp(1.2rem, 2.2vw, 2rem); font-weight: 800; color: var(--nhan); margin: 0 0 18px; }
.tc-sx-ds { list-style: none; margin: 0 0 16px; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.2); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 90px; }
.tc-sx-ds--thu-tu { flex-direction: column; align-items: stretch; max-width: 820px; margin-left: auto; margin-right: auto; counter-reset: sx; }
.tc-sx-the { padding: 12px 22px; border-radius: 14px; background: #fff; color: #093166; font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 2.1rem); cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; border: 3px solid transparent; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.tc-sx-ds--thu-tu .tc-sx-the { counter-increment: sx; text-align: left; font-size: clamp(1.05rem, 1.9vw, 1.6rem); }
.tc-sx-ds--thu-tu .tc-sx-the::before { content: counter(sx) ". "; color: var(--nhan-dam); }
.tc-sx-the:focus-visible { outline: 3px solid var(--nhan); outline-offset: 3px; }
.tc-sx-the--ma { opacity: .35; }
.tc-sx-the--dung { border-color: #2f9a50; background: #e8f5ec; }
.tc-sx-the--sai { border-color: #d0463a; background: #fdecea; }
.tc-sx-cuoi { align-self: flex-end; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 900; color: #fff; padding: 0 4px; }
.tc-sx-bao { min-height: 1.6em; font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 700; margin: 0 0 12px; }
.tc-sx-hd { margin-top: 14px; }

/* ── Đuổi hình bắt chữ ── */
.tc-dh { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(14px, 2.4vw, 36px); align-items: center; }
.tc-dh-khung { position: relative; width: 100%; max-height: 72vh; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #000; margin: 0 auto; }
.tc-dh-anh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tc-dh-che { --n: 4; position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); }
.tc-dh-o { min-height: 0; border-radius: 0; border: 1px solid #0a3977; background: linear-gradient(135deg, #1552a0, #0d4088); color: var(--nhan);
  font-size: clamp(1rem, 2.2vw, 2rem); font-weight: 900; padding: 0; transition: opacity .45s ease, transform .45s ease; }
.tc-dh-o:hover:not(:disabled) { background: #1d62b8; border-color: #0a3977; }
.tc-dh-o.tc-dh-o--mo { opacity: 0; transform: scale(.85); pointer-events: none; }
.tc-dh-phai { text-align: center; display: flex; flex-direction: column; gap: 14px; }
.tc-dh-dem { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: #dbe6f6; font-weight: 700; }
.tc-dh-chu { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.tc-dh-tu { display: flex; gap: 5px; }
.tc-dh-ki { width: clamp(34px, 3.4vw, 52px); height: clamp(42px, 4.2vw, 62px); display: grid; place-items: center; border-radius: 8px; background: #fff; color: #093166;
  font-weight: 900; font-size: clamp(1.3rem, 2.4vw, 2.1rem); border-bottom: 4px solid var(--nhan); }
.tc-dh-ki--dau { background: transparent; color: #fff; border: 0; width: auto; }
.tc-dh-ki--hien { animation: tc-nhay .4s ease; }
.tc-dh-goi { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: var(--nhan); }
.tc-dh-goi[hidden] { display: none; }

/* ── Loại trực tiếp ── */
.tc-ltt { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: clamp(14px, 2.4vw, 40px); align-items: center; }
.tc-ltt__trai { display: flex; flex-direction: column; gap: 18px; }
.tc-ltt-hoi { margin: 0; font-size: clamp(1.5rem, 3.2vw, 3rem); font-weight: 800; line-height: 1.3; }
.tc-ltt-pa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tc-ltt-pa[hidden] { display: none; }
.tc-ltt-pa__o { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 16px; background: #072a58; border: 2px solid #5b86c4; font-size: clamp(1.1rem, 2vw, 1.8rem); font-weight: 700; }
.tc-ltt-pa__o b { color: var(--nhan); }
.tc-ltt-pa__o--dung { background: #1f7a3a; border-color: #6fd08c; }
.tc-ltt-dap { margin: 0; font-size: clamp(1.4rem, 2.8vw, 2.4rem); font-weight: 800; color: #9ff0b7; }
.tc-ltt-dap[hidden] { display: none; }
.tc-ltt__trai .tc-hang { justify-content: flex-start; }
.tc-ltt__phai { text-align: center; }
.tc-ltt-con { background: rgba(0,0,0,.22); border-radius: 18px; padding: 14px; }
.tc-ltt-con__nhan { display: block; font-weight: 700; color: #dbe6f6; }
.tc-ltt-con__so { width: 100%; max-width: 220px; background: transparent; border: 0; color: var(--nhan); font: inherit; font-weight: 900; font-size: clamp(3rem, 7vw, 6rem);
  text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.tc-ltt-con__so::-webkit-inner-spin-button, .tc-ltt-con__so::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tc-ltt-con .tc-hang { margin: 6px 0 10px; }
.tc-ltt-con .tc-nho { margin: 0; }

/* ── Màn hẹp ── */
@media (max-width: 900px) {
  .tc-tp, .tc-dh, .tc-ltt { grid-template-columns: 1fr; }
  .tc-tp-thang { display: none; }
  .tc-ltt__trai .tc-hang { justify-content: center; }
  .tc-ltt-hoi { text-align: center; }
}
@media (max-width: 640px) {
  .tc-thanh { gap: 6px; padding: 6px 8px; flex-wrap: wrap; }
  .tc-thanh__ten { flex: 1 1 0; }
  .tc-thanh__giua { order: 3; flex-basis: 100%; }
  .tc-gio { width: 52px; height: 52px; }
  .tc-gio__so { font-size: 1.2rem; }
  .tc-tp-pa, .tc-ltt-pa { grid-template-columns: 1fr; }
  .tc-od { gap: 4px; }
  .tc-od-cd { font-size: .75rem; min-height: 3.6em; padding: 3px; border-radius: 8px; }
  .tc-od-o { border-radius: 8px; font-size: 1.05rem; padding: 0; min-height: 52px; }
  .tc-lt { --cot: 4 !important; gap: 6px; }
  .tc-lt-the { min-height: 76px; }
  .tc-lt-mat--truoc { font-size: .95rem; }
  .tc-lt-mat--dai { font-size: .8rem; }
  .tc-nut { min-height: 44px; padding: 8px 16px; }
  .tc-doi { padding: 4px; gap: 4px; }
  .tc-chan { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
  .tc-doi { justify-content: space-between; }
  .tc-doi__ten { padding: 2px 4px; min-height: 36px; font-size: .875rem; }
  .tc-doi__diem { font-size: 1.2rem; }
  .tc-doi .tc-nut--nho { min-width: 34px; min-height: 34px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-lt-mat, .tc-dh-o, .tc-tp-cot__than { transition: none; }
  .tc-tp-o--chot, .tc-tp-o--dung, .tc-doi--nhay .tc-doi__diem, .tc-dh-ki--hien { animation: none; }
}