/* ═══════════════════════════════════════════════════════════════════════════
   TOEIC — hệ component dùng chung cho toàn khu /toeic
   Namespace .tc-*  ·  0 mã màu cứng: mọi giá trị qua token nên tự lật dark mode.

   Bảng màu đã chốt (ánh xạ từ brief sang token có sẵn, KHÔNG đổi design system):
     navy / tiêu đề  → var(--color-ink)
     hành động       → var(--color-primary)    (teal, thay cho "xanh dương")
     hoàn thành      → var(--color-secondary)  (emerald)
     đang học        → var(--color-warning)    (amber)
     chưa mở / xám   → var(--color-locked)

   Trang đặt --color-tone ở phần tử gốc để đổi tông theo kỹ năng:
     <main class="tc-shell" style="--color-tone: var(--color-primary)">
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-shell { max-width: 1060px; margin: var(--space-8) auto var(--space-16); padding: 0 var(--space-4);
    --color-tone: var(--color-primary); }
.tc-shell * { box-sizing: border-box; }

/* ── Nút Quay lại — cách điều hướng ngược DUY NHẤT của khu TOEIC ─────────── */
.tc-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    margin-bottom: var(--space-5); padding: 7px 14px 7px 11px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold);
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.tc-back:hover { border-color: var(--color-tone); color: var(--color-tone); }
.tc-back i { font-size: 11px; }

/* ── Thanh ngữ cảnh lộ trình (mở bài từ /lo-trinh-cua-toi) ──────────────────
   Bản .tc-rm--fix: DÍNH đỉnh màn hình + trải hết bề ngang, thoát khổ đọc 980px của
   bài. Đường về lộ trình và nút "Đánh dấu hoàn thành" phải với tới được ở mọi đoạn
   bài — bài dài 8 màn hình mà thanh trôi mất từ màn đầu thì phải cuộn ngược lên đầu.
   🚨 Sticky chỉ sống khi body { overflow: visible } — xem toeic_rm_bar(). */
.tc-rm { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-primary-soft); border-radius: var(--radius-lg);
    background: var(--color-soft); }
.tc-rm__in { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    width: 100%; }

.tc-rm--fix { display: block; position: sticky; z-index: 30;
    /* mốc dính = dưới menu cố định; trang ẩn menu (toeic_chrome_off) đặt --tc-rm-top:0 */
    top: var(--tc-rm-top, var(--nav-h, 0px));
    /* full-bleed: kéo hai mép ra sát viền cửa sổ dù nằm trong cột 980px.
       🚨 Trừ --sb-inset — bề ngang thanh bên đang chiếm (templates/sidebar.php).
       Trang CÒN menu trái thì khổ nội dung căn giữa phần SAU sidebar chứ không giữa
       màn hình, nên `calc(50% - 50vw)` thuần viewport đẩy thanh lệch trái nửa bề ngang
       sidebar: trên màn 1280px ruột thanh bắt đầu ở x≈50px, tức LỌT dưới sidebar 220px
       và nút "Về lộ trình" bị cắt, không bấm được. Trang gọi toeic_chrome_off() và mọi
       trang không có sidebar đều thấy biến = 0 → công thức thu về bản full-bleed cũ. */
    width: calc(100vw - var(--sb-inset, 0px));
    margin-left:  calc(50% - 50vw + var(--sb-inset, 0px) / 2);
    margin-right: calc(50% - 50vw + var(--sb-inset, 0px) / 2);
    /* Sidebar thu/mở có transition 220px↔68px — thanh phải trượt theo, không giật. */
    transition: width var(--sb-dur, .22s) cubic-bezier(.4,0,.2,1),
                margin-left var(--sb-dur, .22s) cubic-bezier(.4,0,.2,1);
    margin-top: 0; margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-5);
    border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0;
    /* PHẢI đục: nội dung bài chui xuống dưới thanh khi cuộn */
    background: var(--color-surface); box-shadow: var(--shadow-sm); }
.tc-rm--fix .tc-rm__in { max-width: var(--tc-rm-max, 1180px); margin: 0 auto; }
.tc-rm__back { flex: none; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    padding: 7px 14px 7px 11px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text); font-size: var(--fs-small); font-weight: var(--fw-semibold);
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.tc-rm__back:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tc-rm__back i { font-size: 11px; }
.tc-rm__b { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.tc-rm__eyebrow { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em;
    font-weight: var(--fw-extrabold); color: var(--color-primary); }
.tc-rm__title { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-ink);
    line-height: var(--lh-normal); }
.tc-rm__done { flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-primary);
    background: var(--color-primary); color: var(--color-on-dark);
    font-size: var(--fs-small); font-weight: var(--fw-semibold); font-family: inherit;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tc-rm__done:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.tc-rm__done:disabled { opacity: .65; cursor: default; }
.tc-rm__done.is-done { background: var(--color-surface); color: var(--color-secondary);
    border-color: var(--color-secondary); }
@media (max-width: 640px) {
    .tc-rm { gap: var(--space-3); }
    .tc-rm__b { order: -1; width: 100%; flex: 1 0 100%; }
    .tc-rm__done { flex: 1; justify-content: center; }

    /* 🚨 Bản DÍNH phải gọn: xếp ba khối thành ba dòng thì thanh cao 159px, chiếm 1/5
       màn hình điện thoại suốt buổi đọc. Ép về MỘT dòng — tên lộ trình nhường chỗ
       (đã có ở trang lộ trình), giữ tên mục + đường về + nút hoàn thành. */
    .tc-rm--fix { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
    .tc-rm--fix .tc-rm__in { flex-wrap: nowrap; gap: var(--space-2); }
    .tc-rm--fix .tc-rm__b { order: 0; width: auto; flex: 1 1 auto; min-width: 0; }
    .tc-rm--fix .tc-rm__eyebrow { display: none; }
    .tc-rm--fix .tc-rm__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tc-rm--fix .tc-rm__back { flex: none; padding: 7px 11px; }
    .tc-rm--fix .tc-rm__back span { display: none; }
    .tc-rm--fix .tc-rm__done { flex: none; padding: 7px 12px; font-size: var(--fs-micro); }
}

/* ── Đầu trang — tối đa 3 cấp tiêu đề/trang (brief §9) ───────────────────── */
.tc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5);
    flex-wrap: wrap; margin-bottom: var(--space-6); }
.tc-head__b { flex: 1; min-width: 260px; }
.tc-head__eyebrow { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em;
    font-weight: var(--fw-extrabold); color: var(--color-tone); margin-bottom: 4px; }
.tc-head h1 { margin: 0; font-size: var(--fs-h2-desktop); font-weight: var(--fw-extrabold);
    letter-spacing: -.02em; color: var(--color-ink); }
.tc-head__sub { margin: var(--space-2) 0 0; font-size: var(--fs-body); color: var(--color-muted);
    line-height: var(--lh-body); max-width: 52ch; text-wrap: pretty; }
.tc-head__act { flex: none; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 640px) {
    .tc-head h1 { font-size: var(--fs-h2-mobile); }
    .tc-head__sub { font-size: var(--fs-small); }
    .tc-head__act { width: 100%; }
    .tc-head__act .btn { flex: 1; }
}

/* ── Nhãn dải ────────────────────────────────────────────────────────────── */
.tc-lbl { display: flex; align-items: baseline; gap: 8px; margin: var(--space-8) 0 var(--space-3);
    font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .09em;
    font-weight: var(--fw-extrabold); color: var(--color-mute2); }
.tc-lbl span { text-transform: none; letter-spacing: 0; font-weight: var(--fw-semibold); color: var(--color-muted); }

/* ── Tabs — cuộn ngang trên mobile, không bao giờ xuống dòng ─────────────── */
.tc-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-6);
    padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; }
.tc-tabs::-webkit-scrollbar { display: none; }
.tc-tab { flex: 1 1 0; min-width: 152px; scroll-snap-align: start; display: flex; align-items: center;
    justify-content: center; gap: 9px; text-decoration: none; white-space: nowrap;
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg);
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-secondary-text); font-size: var(--fs-small); font-weight: var(--fw-semibold);
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
                background var(--dur-base) var(--ease); }
.tc-tab:hover { border-color: var(--color-tone); color: var(--color-tone); }
.tc-tab i { font-size: 13px; }
.tc-tab.is-on { background: color-mix(in srgb, var(--color-tone) 11%, var(--color-surface));
    border-color: var(--color-tone); color: var(--color-tone); font-weight: var(--fw-extrabold); }

/* ── Badge mức độ — Cơ bản / Trung bình / Nâng cao ───────────────────────── */
.tc-lvl { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.tc-lvl--1 { background: var(--pill-success-bg); color: var(--pill-success-fg); }
.tc-lvl--2 { background: var(--pill-warning-bg); color: var(--pill-warning-fg); }
.tc-lvl--3 { background: var(--pill-neutral-bg); color: var(--pill-neutral-fg); }

/* ── Badge trạng thái — chưa làm / đang học / hoàn thành ─────────────────── */
.tc-st { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.tc-st--todo { background: var(--pill-neutral-bg); color: var(--pill-neutral-fg); }
.tc-st--doing { background: var(--pill-warning-bg); color: var(--pill-warning-fg); }
.tc-st--done { background: var(--pill-success-bg); color: var(--pill-success-fg); }

/* ── Chip thông tin trung tính ───────────────────────────────────────────── */
.tc-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--color-surface); border: 1px solid var(--color-border);
    color: var(--color-secondary-text); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.tc-chip i { font-size: 10px; color: var(--color-mute2); }

/* ── Lưới thẻ ────────────────────────────────────────────────────────────── */
.tc-grid { display: grid; gap: var(--space-4); }
.tc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tc-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .tc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .tc-grid--2, .tc-grid--3 { grid-template-columns: 1fr; } }

/* ── Hàng danh sách — bộ luyện tập / đề thi ──────────────────────────────── */
.tc-list { display: flex; flex-direction: column; gap: var(--space-2); }
.tc-row { display: flex; align-items: center; gap: var(--space-4); text-decoration: none;
    color: var(--color-text); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.tc-row:hover { border-color: var(--color-tone); box-shadow: var(--shadow-sm); }
.tc-row__n { flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--radius-md); font-size: var(--fs-small); font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums; color: var(--color-tone);
    background: color-mix(in srgb, var(--color-tone) 12%, var(--color-surface)); }
.tc-row__b { flex: 1; min-width: 0; }
.tc-row__b h3 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-ink); }
.tc-row__b p { margin: 3px 0 0; font-size: var(--fs-micro); color: var(--color-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-row__meta { flex: none; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tc-row__go { flex: none; color: var(--color-tone); font-weight: var(--fw-extrabold);
    font-size: var(--fs-small); white-space: nowrap; }
/* Mobile: đổi hàng ngang → khối 2 dòng, không dồn nút cùng hàng (brief §10) */
@media (max-width: 640px) {
    .tc-row { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); }
    .tc-row__b { flex: 1 1 100%; order: 1; }
    .tc-row__n { order: 0; }
    .tc-row__meta { order: 2; flex: 1 1 auto; }
    .tc-row__go { order: 3; margin-left: auto; }
}

/* ── Empty state — mọi danh sách rỗng PHẢI có ────────────────────────────── */
.tc-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--color-surface); border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-10) var(--space-6); }
.tc-empty__ico { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: var(--space-4);
    border-radius: 50%; background: var(--color-soft); color: var(--color-mute2); font-size: 22px; }
.tc-empty__t { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--color-ink); }
.tc-empty__h { margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--color-muted);
    line-height: var(--lh-body); max-width: 46ch; }
.tc-empty .btn { margin-top: var(--space-5); }

/* ── Trạng thái "Đang xây dựng" — trang Speaking / Writing ───────────────── */
.tc-soon { display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: var(--space-16) var(--space-6); box-shadow: var(--shadow-sm); }
.tc-soon__ico { width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: var(--space-5);
    border-radius: 50%; background: var(--color-soft); color: var(--color-locked); font-size: 34px; }
.tc-soon__tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-4);
    padding: 4px 13px; border-radius: var(--radius-pill);
    background: var(--color-locked-soft); color: var(--color-locked-deep);
    font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.tc-soon h1 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--color-ink); }
.tc-soon p { margin: var(--space-3) 0 0; font-size: var(--fs-body); color: var(--color-muted);
    line-height: var(--lh-body); max-width: 48ch; }
.tc-soon .btn { margin-top: var(--space-6); }
@media (max-width: 640px) {
    .tc-soon { padding: var(--space-12) var(--space-5); }
    .tc-soon h1 { font-size: var(--fs-h4); }
    .tc-soon p { font-size: var(--fs-small); }
}

/* ── Bộ lọc đơn giản — Tất cả · Chưa làm · Đã làm ────────────────────────── */
.tc-filter { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    margin-bottom: var(--space-4); }
.tc-fchip { text-decoration: none; padding: 5px 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-secondary-text); font-size: var(--fs-small); font-weight: var(--fw-semibold);
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.tc-fchip:hover { border-color: var(--color-tone); color: var(--color-tone); }
.tc-fchip.is-on { background: color-mix(in srgb, var(--color-tone) 12%, var(--color-surface));
    border-color: var(--color-tone); color: var(--color-tone); }

/* ── Thẻ Part — dùng CHUNG cho Listening và Reading ──────────────────────── */
.tc-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 780px) { .tc-parts { grid-template-columns: 1fr; } }
.tc-part { display: flex; flex-direction: column; text-decoration: none; color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.tc-part:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
/* Số Part NẰM NGANG với tiêu đề — giống thẻ ở hub, không xếp chồng. */
.tc-part__top { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.tc-part__n { flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary);
    font-size: var(--fs-body); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.tc-part__name { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold);
    letter-spacing: -.01em; color: var(--color-ink); }
.tc-part__lead { margin: var(--space-3) 0 var(--space-5); font-size: var(--fs-small);
    color: var(--color-muted); line-height: var(--lh-body); text-wrap: pretty; }
.tc-part__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.tc-part__meta { font-size: var(--fs-micro); color: var(--color-mute2); font-weight: var(--fw-medium); }
.tc-part__go { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    color: var(--color-primary); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.tc-part__go i { font-size: 11px; transition: transform var(--dur-base) var(--ease); }
.tc-part:hover .tc-part__go i { transform: translateX(3px); }

/* ── Mẹo làm bài — một dòng, không phải hộp cảnh báo ─────────────────────── */
/* ── Dải KPI dùng chung (Tiến trình, Chi tiết đề…) — một khuôn cho cả khu ── */
.tc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 720px) { .tc-kpis { grid-template-columns: repeat(2, 1fr); } }
.tc-kpi { background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.tc-kpi small { display: block; font-size: var(--fs-micro); font-weight: var(--fw-bold);
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-mute2); }
.tc-kpi b { display: block; margin-top: 4px; font-size: var(--fs-h4); font-weight: var(--fw-extrabold);
    color: var(--color-ink); font-variant-numeric: tabular-nums; }
.tc-kpi b em { font-style: normal; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-mute2); }
.tc-kpi--up b { color: var(--color-secondary); }
.tc-kpi--down b { color: var(--color-warning); }

.tc-tip { display: flex; align-items: flex-start; gap: 10px; margin: 0;
    padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
    background: var(--color-soft); font-size: var(--fs-small);
    color: var(--color-muted); line-height: var(--lh-body); }
.tc-tip i { flex: none; margin-top: 3px; color: var(--color-primary); font-size: 12px; }

/* ── Khung học nhanh Part 1 ─────────────────────────────────────────────── */
/* ── Tiêu đề mục trong trang Part ────────────────────────────────────────── */
.tc-sec { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-10) 0 var(--space-4); }
.tc-sec h2 { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--color-ink); }
.tc-sec span { font-size: var(--fs-small); color: var(--color-mute2); }
.tc-sec:first-of-type { margin-top: var(--space-8); }

/* ── Bài lý thuyết — trình bày như một lộ trình có trục, không phải bảng ──── */
.tc-lessons { position: relative; display: grid; gap: 2px; padding: var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* Thanh tiến độ — chỉ hiện với người đã đăng nhập, vì khách không có số thật */
.tc-prog { display: flex; align-items: center; gap: var(--space-3);
    margin: 0 var(--space-2) var(--space-2); padding: var(--space-2) var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-line); }
.tc-prog__n { flex: none; order: -1; font-size: var(--fs-micro); font-weight: var(--fw-semibold);
    color: var(--color-muted); font-variant-numeric: tabular-nums; }
.tc-prog__bar { flex: none; width: 180px; max-width: 45%; margin-left: auto;
    height: 6px; border-radius: var(--radius-pill);
    background: var(--color-line); overflow: hidden; }
.tc-prog__bar i { display: block; height: 100%; border-radius: var(--radius-pill);
    background: var(--color-secondary); transition: width var(--dur-slow) var(--ease); }

.tc-lesson { position: relative; display: grid; grid-template-columns: 30px 1fr auto;
    align-items: start; gap: var(--space-4); text-decoration: none; color: var(--color-text);
    padding: var(--space-4); border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease); }
.tc-lesson:hover { background: var(--color-soft); }

/* Trục nối các mốc: kẻ từ đáy mốc này xuống mốc kế tiếp, chừa đúng khoảng 2px giữa hai dòng.
   Dùng --color-border chứ không --color-line: trên nền teal nhạt của dòng "tiếp theo"
   thì --color-line nhạt đến mức mất hẳn, trục đứt một khúc ngay chỗ quan trọng nhất. */
.tc-lesson:not(:last-child)::before { content: ''; position: absolute; z-index: 0;
    left: calc(var(--space-4) + 15px); top: calc(var(--space-4) + 32px); bottom: -2px;
    width: 1px; background: var(--color-border); }
.tc-lesson.is-next:not(:last-child)::before { background: var(--color-primary); }

.tc-lesson__mark { position: relative; z-index: 1; grid-row: 1 / span 1;
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-mute2);
    font-size: var(--fs-micro); font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums; }
.tc-lesson__mark i { font-size: 11px; }
.tc-lesson.is-done .tc-lesson__mark { background: var(--color-secondary);
    border-color: var(--color-secondary); color: var(--color-on-dark); }
.tc-lesson.is-next .tc-lesson__mark { background: var(--color-primary-soft);
    border-color: var(--color-primary); color: var(--color-primary); }

/* Bài tiếp theo: viền nhấn bên trái để mắt biết bắt đầu từ đâu */
.tc-lesson.is-next { background: var(--color-primary-soft); }
.tc-lesson.is-next::after { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: var(--radius-pill); background: var(--color-primary); }

.tc-lesson__b { min-width: 0; }
.tc-lesson__code { display: block; font-size: var(--fs-micro); font-weight: var(--fw-bold);
    letter-spacing: .06em; color: var(--color-primary); }
.tc-lesson__t { display: block; margin-top: 2px; font-size: var(--fs-body);
    font-weight: var(--fw-semibold); color: var(--color-ink); line-height: var(--lh-tight); }
.tc-lesson__d { display: block; margin-top: 5px; font-size: var(--fs-small);
    color: var(--color-muted); line-height: var(--lh-body);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tc-lesson__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.tc-tagx { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
    border-radius: var(--radius-pill); background: var(--color-soft);
    font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--color-mute2);
    font-variant-numeric: tabular-nums; }
.tc-tagx i { font-size: 10px; }
.tc-lesson:hover .tc-tagx, .tc-lesson.is-next .tc-tagx { background: var(--color-surface); }

.tc-lesson__go { align-self: center; display: flex; align-items: center;
    font-size: 13px; color: var(--color-mute2); }
.tc-lesson:hover .tc-lesson__go { color: var(--color-primary); }
.tc-lesson__cta { padding: 5px 13px; border-radius: var(--radius-pill);
    background: var(--color-primary); color: var(--color-on-dark);
    font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap; }

/* Ảnh đại diện chỉ dùng ở các bài đã có art direction riêng. Tách thành modifier
   để phần lớn thẻ lộ trình vẫn giữ nhịp dọc rất gọn, còn bài có bìa vẫn nổi bật. */
.tc-lesson.has-cover { grid-template-columns: 30px minmax(196px, 280px) minmax(0, 1fr) auto; }
.tc-lesson.has-cover .tc-lesson__cover { grid-column: 2; grid-row: 1; display: block;
    align-self: stretch; min-height: 132px; overflow: hidden; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-soft); box-shadow: var(--shadow-sm); }
.tc-lesson.has-cover .tc-lesson__cover img { display: block; width: 100%; height: 100%;
    object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.tc-lesson.has-cover .tc-lesson__b { grid-column: 3; }
.tc-lesson.has-cover .tc-lesson__go { grid-column: 4; }
.tc-lesson.has-cover:hover .tc-lesson__cover img { transform: scale(1.025); }

/* Part 3 dùng một card ngang có visual riêng: gọn như các bài trong lộ trình nhưng
   vẫn khác Part 2 nhờ ảnh cover, tên bài tiếng Anh và cỡ chữ nhỉnh hơn card thường. */
.tc-lesson.is-conversation-feature { grid-template-columns: 30px minmax(280px, 400px) minmax(0, 1fr) auto; }
.tc-lesson.is-conversation-feature .tc-lesson__cover { position: relative; grid-column: 2; grid-row: 1; min-height: 0;
    height: clamp(178px, 16vw, 236px); border-radius: var(--radius-md); }
.tc-lesson.is-conversation-feature .tc-lesson__cover img { object-position: center; }
.tc-lesson.is-conversation-feature .tc-lesson__cover-copy { position: absolute; z-index: 1; left: clamp(14px, 1.5vw, 22px);
    bottom: clamp(15px, 2vw, 26px); display: grid; gap: 5px; width: 52%; text-shadow: 0 2px 12px rgba(3, 27, 35, .45); }
/* Chữ nằm ĐÈ LÊN ẢNH bìa (có text-shadow ở .tc-lesson__cover-copy), không đứng trên nền
   theme → phải giữ nguyên màu ở cả sáng lẫn tối, lật theo token là mất tương phản. */
.tc-lesson.is-conversation-feature .tc-lesson__cover-kicker { color: #F7C83E; /* theme-allow */
    font-size: clamp(8px, .72vw, 11px); font-weight: var(--fw-bold); letter-spacing: .12em; line-height: 1.2; }
/* KHÔNG nowrap: tiêu đề dài nhất 21 ký tự ở màn ≤320px sẽ tràn cắt ngang ảnh bìa —
   cho phép xuống dòng, line-height chặt giữ dáng chữ display. */
.tc-lesson.is-conversation-feature .tc-lesson__cover-title { color: #fff; /* theme-allow */ font-size: clamp(15px, 1.55vw, 22px);
    font-weight: var(--fw-extrabold); letter-spacing: -.04em; line-height: .95; overflow-wrap: break-word; }
.tc-lesson.is-conversation-feature .tc-lesson__b { grid-column: 3; grid-row: 1; align-self: center; }
.tc-lesson.is-conversation-feature .tc-lesson__go { grid-column: 4; grid-row: 1; }
.tc-lesson.is-conversation-feature .tc-lesson__t { font-size: clamp(19px, 1.7vw, 23px); }

@media (max-width: 560px) {
    .tc-lessons { padding: var(--space-2); }
    .tc-lesson { grid-template-columns: 26px 1fr; gap: var(--space-3); padding: var(--space-3); }
    .tc-lesson:not(:last-child)::before { left: calc(var(--space-3) + 13px); top: calc(var(--space-3) + 28px); }
    .tc-lesson__mark { width: 26px; height: 26px; }
    /* Mũi tên bỏ hẳn: hết chỗ đặt cạnh nội dung, mà tụt xuống dòng riêng thì thành
       một dấu ">" lửng lơ. Cả dòng vẫn bấm được. Chỉ nút của bài tiếp theo được giữ. */
    .tc-lesson__go { display: none; }
    .tc-lesson.is-next .tc-lesson__go { display: flex; grid-column: 2;
        align-self: start; margin-top: var(--space-2); }
    .tc-lesson__d { -webkit-line-clamp: 3; }

    .tc-lesson.has-cover { grid-template-columns: 26px minmax(0, 1fr); }
    .tc-lesson.has-cover .tc-lesson__cover { grid-column: 2; grid-row: 1; min-height: 0;
        aspect-ratio: 16 / 9; }
    .tc-lesson.has-cover .tc-lesson__b { grid-column: 2; grid-row: 2; }
    .tc-lesson.has-cover .tc-lesson__go { grid-column: 2; grid-row: 3; }

    .tc-lesson.is-conversation-feature .tc-lesson__cover { grid-column: 2; grid-row: 1; height: auto; }
    .tc-lesson.is-conversation-feature .tc-lesson__cover::after { content: ''; position: absolute; z-index: 0;
        inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(3, 27, 35, .58)); }
    .tc-lesson.is-conversation-feature .tc-lesson__cover-copy { left: var(--space-3); bottom: var(--space-3);
        width: calc(100% - var(--space-6)); gap: 4px; }
    .tc-lesson.is-conversation-feature .tc-lesson__cover-kicker { font-size: 10px; /* 8px dưới ngưỡng đọc được */ }
    .tc-lesson.is-conversation-feature .tc-lesson__cover-title { font-size: clamp(16px, 6.8vw, 21px); }
    .tc-lesson.is-conversation-feature .tc-lesson__b { grid-column: 2; grid-row: 2; }
    .tc-lesson.is-conversation-feature .tc-lesson__go { grid-column: 2; grid-row: 3; }
    .tc-lesson.is-conversation-feature .tc-lesson__t { font-size: 20px; }
}

/* ── Hộp xác nhận trước khi vào đề ───────────────────────────────────────── */
.tc-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none;
    align-items: center; justify-content: center; padding: var(--space-4);
    background: color-mix(in srgb, var(--color-ink) 55%, transparent); }
.tc-modal.is-open { display: flex; }
.tc-modal__box { width: 100%; max-width: 420px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-xl);
    padding: var(--space-6); box-shadow: var(--shadow-lg); }
.tc-modal__box h2 { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--color-ink); }
.tc-modal__spec { list-style: none; margin: var(--space-5) 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-3); }
.tc-modal__spec li { display: flex; align-items: center; gap: 10px;
    font-size: var(--fs-small); color: var(--color-muted); }
.tc-modal__spec i { flex: none; width: 16px; text-align: center; color: var(--color-primary); font-size: 12px; }
.tc-modal__spec b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.tc-modal__act { display: flex; gap: var(--space-2); }
.tc-modal__act .btn { flex: 1; }

/* ── Thẻ khoá / sắp ra mắt — phải nhìn RÕ là chưa dùng được (brief §13) ──── */
.tc-locked { position: relative; background: var(--color-soft); border-style: dashed; }
.tc-locked, .tc-locked * { color: var(--color-muted); }
.tc-locked h3, .tc-locked .tc-row__b h3 { color: var(--color-secondary-text); }
.tc-locked:hover { border-color: var(--color-border); box-shadow: none; transform: none; }

/* ══════════ Luyện theo mức độ — thẻ mức + player mỗi câu một trang ══════════
   Lưới LỆCH Ô: mức nên làm tiếp là thẻ dẫn nền brand đậm chiếm 2 cột, 4 mức còn lại
   là thẻ gọn — 5 mức lấp kín 2 hàng, không chừa lỗ như lưới 3 cột đều.
   Tông của mức chỉ sống ở ô icon + viền hover + thanh tiến độ; TIÊU ĐỀ để màu mực,
   nếu không 5 thẻ 5 màu chữ là loạn. KHÔNG xanh dương / đỏ / tím — xem UI_RULES.md. */
.tl-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-grid--lead > .tl-card--lead { grid-column: span 2; }
@media (max-width: 1080px) { .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .tl-grid { grid-template-columns: 1fr; }
    .tl-grid--lead > .tl-card--lead { grid-column: auto; }
}

.tl-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    /* quầng tint ở góc phải trên — thẻ trắng phẳng trơn đọc là chưa làm xong */
    background: radial-gradient(120% 100% at 100% 0, var(--tl-soft) 0%, transparent 58%),
                var(--color-surface);
    color: var(--color-text); text-decoration: none; overflow: hidden;
    transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.tl-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--tl-tone); }
.tl-card:hover { border-color: var(--tl-tone); box-shadow: var(--shadow-md); }
/* 🚨 GHIM màu chữ khi hover: app.css có `a:hover { color: var(--color-primary-hover) }`
   toàn site, mà thẻ mức là thẻ <a> — không ghim thì chip "Nên làm tiếp" và số % trong
   vòng (hai chỗ ăn màu kế thừa) đổi sang teal đậm, chìm nghỉm vào nền thẻ dẫn. */
.tl-card:hover, .tl-card:focus { color: var(--color-text); }
.tl--1 { --tl-tone: var(--color-secondary); --tl-soft: var(--color-secondary-soft); }
.tl--2 { --tl-tone: var(--color-primary);   --tl-soft: var(--color-primary-soft); }
.tl--3 { --tl-tone: var(--color-accent);    --tl-soft: var(--color-accent-soft); }
.tl--4 { --tl-tone: var(--color-warning);   --tl-soft: var(--color-warning-soft); }
.tl--5 { --tl-tone: var(--color-warning-deep); --tl-soft: var(--color-warning-soft); }

.tl-card__h { display: flex; align-items: center; gap: var(--space-3); }
.tl-card__h > div { min-width: 0; flex: 1; }
.tl-card__ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: var(--radius-md); background: var(--tl-soft); color: var(--tl-tone); font-size: 17px; }
.tl-card__lv { display: block; font-size: var(--fs-micro); font-weight: var(--fw-semibold);
    letter-spacing: .09em; text-transform: uppercase; color: var(--color-muted); }
.tl-card__h h3 { margin: 1px 0 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--color-ink); }
.tl-card__go { flex: none; font-size: 13px; color: var(--color-mute2);
    transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.tl-card:hover .tl-card__go { color: var(--tl-tone); transform: translateX(3px); }
.tl-card__meta { margin: 0; font-size: var(--fs-micro); color: var(--color-muted); line-height: var(--lh-body); }
.tl-card__meta span { color: var(--color-mute2); }
.tl-card__meta span::before { content: '· '; }

/* Thanh tiến độ chia đôi: xanh = đã đúng, hổ phách = đã sai, phần xám = chưa làm.
   margin-top:auto — thẻ nằm cùng hàng với thẻ dẫn bị kéo cao gấp đôi, khối đáy phải
   tụt xuống chân thẻ thì hàng mới thẳng, không lơ lửng giữa vùng trống. */
.tl-bar, .tl-card__idle { margin-top: auto; }
.tl-bar { display: flex; height: 8px; border-radius: var(--radius-pill);
    background: var(--color-line); overflow: hidden; }
.tl-bar__ok { background: var(--color-secondary); }
.tl-bar__no { background: var(--color-warning); }
/* Part 5 có 473 câu/mức: làm 1 câu ra 0,2% — không .is-on thì thanh trông y như chưa làm. */
.tl-bar .is-on { min-width: 5px; }

.tl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.tl-stat { display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: var(--space-2) 4px; border-radius: var(--radius-sm);
    background: var(--color-soft); color: var(--color-muted);
    font-size: var(--fs-micro); font-weight: var(--fw-medium); white-space: nowrap; }
.tl-stat b { font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; }
.tl-stat--ok { background: var(--pill-success-bg); color: var(--pill-success-fg); }
.tl-stat--no { background: var(--pill-warning-bg); color: var(--pill-warning-fg); }

/* Mức chưa đụng: một dòng nói mức này khó tới đâu, thay cho ba con số 0. */
.tl-card__idle { display: flex; align-items: center; gap: 7px;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    background: var(--color-soft); color: var(--color-muted); font-size: var(--fs-micro); }
.tl-card__idle i { color: var(--tl-tone); }

/* ── Thẻ dẫn: khối brand đậm, luôn tông teal dù mức nào được kéo lên ────── */
.tl-card--lead { gap: var(--space-4); padding: var(--space-5); border-color: transparent;
    color: var(--color-on-dark);
    /* rgba trắng = lớp sáng trên nền brand ĐẬM, đúng ở cả hai giao diện — theme-allow */
    background: radial-gradient(80% 120% at 100% 0, rgba(255, 255, 255, .18) 0%, transparent 60%),
                linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 130%); }
.tl-card--lead::after { display: none; }
.tl-card--lead:hover, .tl-card--lead:focus { color: var(--color-on-dark); }
.tl-card--lead:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.tl-lead__tag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    padding: 5px var(--space-3); border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .16); /* theme-allow */
    font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: .04em; }
.tl-lead__row { display: flex; align-items: center; gap: var(--space-6); }
.tl-lead__b { flex: 1; min-width: 0; }
.tl-card--lead .tl-card__lv { color: rgba(255, 255, 255, .72); /* theme-allow */ }
.tl-card--lead h3 { margin: 2px 0 0; font-size: var(--fs-h3); font-weight: var(--fw-extrabold);
    color: var(--color-on-dark); }
.tl-card--lead p { margin: var(--space-2) 0 0; font-size: var(--fs-small);
    color: rgba(255, 255, 255, .8); /* theme-allow */ }
.tl-lead__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-3);
    padding: 0 var(--btn-px-md); height: var(--btn-h-md); border-radius: var(--radius-pill);
    background: var(--color-on-dark); color: var(--color-primary-deep);
    font-size: var(--fs-small); font-weight: var(--fw-bold); }
.tl-card--lead:hover .tl-lead__cta i { transform: translateX(3px); }
.tl-lead__cta i { transition: transform var(--dur-base) var(--ease); }

/* Vòng tiến độ — thẻ dẫn rộng gấp đôi nên thanh ngang ở đây trông như đường kẻ. */
.tl-ring { position: relative; flex: none; width: 100px; height: 100px; display: grid;
    place-items: center; border-radius: 50%;
    background: conic-gradient(var(--color-on-dark) calc(var(--tl-p) * 1%),
                               rgba(255, 255, 255, .22) 0); /* theme-allow */ }
/* longhand top/right/bottom/left: Safari cũ bỏ qua `inset` → đĩa trong tràn kín vòng */
.tl-ring::before { content: ''; position: absolute; top: 9px; right: 9px; bottom: 9px; left: 9px;
    border-radius: 50%; background: var(--color-primary-deep); }
.tl-ring b, .tl-ring small { position: relative; z-index: 1; grid-area: 1 / 1; }
.tl-ring b { font-size: var(--fs-h4); font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums; transform: translateY(-9px); }
.tl-ring small { font-size: var(--fs-micro); color: rgba(255, 255, 255, .72); /* theme-allow */
    transform: translateY(13px); }

.tl-stats--lead { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tl-stats--lead .tl-stat { padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .88); /* theme-allow */ }

@media (max-width: 560px) {
    .tl-card--lead { padding: var(--space-5); }
    .tl-lead__row { gap: var(--space-4); }
    .tl-ring { width: 92px; height: 92px; }
    .tl-ring b { font-size: var(--fs-body); transform: translateY(-7px); }
    .tl-ring small { transform: translateY(11px); }
}

/* ── Player: mỗi câu MỘT trang ─────────────────────────────────────────── */
.tp2-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3);
    justify-content: space-between; padding: var(--space-3) var(--space-5);
    background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.tp2-bar__t { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tp2-bar__t b { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp2-tally { display: flex; gap: var(--space-2); }

.tp2-wrap { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-5);
    max-width: 1180px; margin: var(--space-5) auto var(--space-12); padding: 0 18px; align-items: start; }
@media (max-width: 900px) { .tp2-wrap { grid-template-columns: 1fr; } }

.tp2-page { display: none; }
.tp2-page.is-on { display: block; animation: tp2-in var(--dur-base) var(--ease); }
@keyframes tp2-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .tp2-page.is-on { animation: none; } }
.tp2-card { background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm); }
.tp2-ctx { margin-bottom: var(--space-4); }
.tp2-ctx img { display: block; width: 100%; max-width: 520px; margin-inline: auto;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tp2-ctx audio { width: 100%; margin-top: var(--space-3); }
.tp2-ctx .na { margin-top: var(--space-4); border-radius: var(--radius-lg); }
.tp2-passage { max-height: 340px; overflow-y: auto; padding: var(--space-4) var(--space-5);
    background: var(--color-soft); border-radius: var(--radius-md); white-space: pre-line;
    font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text); }

/* Văn bản đề dạng HTML (bảng biểu · ẢNH chụp văn bản) — 554/1.385 đoạn trong kho là
   HTML, 30 đoạn là <img>. Dùng chung cho player (.tp-ctx__text), trang luyện
   (.tp2-passage) và trang xem lại (.rv-ctx). Xem toeic_passage_html(). */
.tp-ctx__text, .tp2-passage, .rv-ctx { white-space: normal; }
.tp-ctx__text img, .tp2-passage img, .rv-ctx img { display: block; max-width: 100%; height: auto;
    margin: var(--space-3) auto; border-radius: var(--radius-md); }
.tp-ctx__text table, .tp2-passage table, .rv-ctx table { width: 100%; border-collapse: collapse;
    margin: var(--space-3) 0; font-size: var(--fs-small); }
.tp-ctx__text th, .tp-ctx__text td, .tp2-passage th, .tp2-passage td, .rv-ctx th, .rv-ctx td {
    border: 1px solid var(--color-border); padding: 6px 10px; text-align: left; vertical-align: top; }
.tp-ctx__text th, .tp2-passage th, .rv-ctx th { background: var(--color-soft); font-weight: var(--fw-semibold); }
.tp-ctx__text p, .tp2-passage p, .rv-ctx p { margin: 0 0 var(--space-3); }
.tp-ctx__text p:last-child, .tp2-passage p:last-child, .rv-ctx p:last-child { margin-bottom: 0; }
.tp2-q { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-4); }
.tp2-q__n { flex: none; min-width: 34px; height: 34px; padding: 0 9px; display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-on-dark); box-shadow: var(--shadow-sm);
    font-size: var(--fs-small); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.tp2-q__t { flex: 1; min-width: 0; align-self: center; font-size: var(--fs-body);
    font-weight: var(--fw-semibold); line-height: var(--lh-body); color: var(--color-ink); }
.tp2-flag { flex: none; width: 34px; height: 34px; border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-mute2);
    cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease); }
.tp2-flag:hover { border-color: var(--color-accent); color: var(--color-accent); }
.tp2-flag.is-on { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }

/* Phương án — hàng cao tối thiểu 52px, chữ cái trong huy hiệu tròn thay cho nút radio
   trần của trình duyệt. Radio vẫn ở đó cho form/phím tắt, chỉ ẨN về thị giác. */
.tp2-opts { display: flex; flex-direction: column; gap: 10px; }
.tp2-opt { position: relative; display: flex; align-items: center; gap: var(--space-3); cursor: pointer;
    min-height: 52px; padding: var(--space-2) var(--space-4); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg); background: var(--color-surface);
    font-size: var(--fs-body); color: var(--color-text);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.tp2-opt:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-primary-soft) 30%, var(--color-surface)); }
.tp2-opt:active { transform: translateY(1px); box-shadow: none; }
.tp2-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tp2-opt b { flex: none; width: 32px; height: 32px; display: grid; place-items: center;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-soft); color: var(--color-secondary-text);
    font-size: var(--fs-small); font-weight: var(--fw-bold);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease); }
.tp2-opt:hover b { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.tp2-opt:has(input:checked) { border-color: var(--color-primary); }
.tp2-opt:has(input:checked) b { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-dark); }
.tp2-opt span { flex: 1; min-width: 0; }
/* Dấu ✓/✕ vẽ bằng icon font có sẵn của trang — hiện sau khi chấm. */
.tp2-opt::after { flex: none; width: 22px; text-align: center;
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--fs-small); }
.tp2-opt.is-correct { background: var(--pill-success-bg); border-color: var(--color-secondary);
    color: var(--pill-success-fg); animation: tp2-pop var(--dur-slow) var(--ease); }
.tp2-opt.is-correct b { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-on-dark); }
.tp2-opt.is-correct::after { content: '\f00c'; color: var(--color-secondary); }
/* Chọn SAI thì đáp án đúng chỉ VIỀN emerald, không tô đặc — phân biệt "lựa chọn của
   bạn" (tô nền) với "đáp án cần biết" (chỉ viền), hai thứ không được trông như nhau. */
.tp2-opt.is-correct:not(:has(input:checked)) { background: var(--color-surface); animation: none; }
.tp2-opt.is-correct:not(:has(input:checked)) b { background: var(--color-surface);
    border-color: var(--color-secondary); color: var(--color-secondary); }
.tp2-opt.is-wrong { background: var(--pill-warning-bg); border-color: var(--color-warning); color: var(--pill-warning-fg); }
.tp2-opt.is-wrong b { background: var(--color-warning); border-color: var(--color-warning); color: var(--color-on-dark); }
.tp2-opt.is-wrong::after { content: '\f00d'; color: var(--color-warning); }
@keyframes tp2-pop { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
/* Đã chấm: phương án không liên quan mờ đi để hai màu đúng/sai nổi hẳn. */
.tp2-item.is-done .tp2-opt:not(.is-correct):not(.is-wrong) { opacity: .55; }
.tp2-item.is-done .tp2-opt:not(.is-correct):not(.is-wrong) b { background: var(--color-soft);
    border-color: var(--color-border); color: var(--color-secondary-text); }
.tp2-page.is-done .tp2-opt { pointer-events: none; }

/* ══════════ Danh sách đề thi (/toeic/de-thi) ═══════════════════════════════════
   Thẻ trắng, TÔNG chỉ sống ở chip loại đề — kho có 4 loại nhưng tô cả thẻ 4 màu thì
   một trang 24 đề thành cầu vồng. Đề đã làm thì đổi mép trái sang emerald.
   🚨 KHÔNG có ô "lượt làm": toàn hệ mới 8 lượt hoàn thành, in ra là bịa. */
.td-search { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); }
.td-search > i { flex: none; margin-left: 6px; color: var(--color-mute2); font-size: 13px; }
.td-search input[type="search"] { flex: 1; min-width: 140px; padding: 8px 0; border: 0;
    background: 0; color: var(--color-text); font: var(--fs-small)/1.4 var(--font-sans); }
.td-search input[type="search"]:focus { outline: 0; }
.td-search__x { flex: none; padding: 0 var(--space-2); color: var(--color-muted);
    font-size: var(--fs-micro); text-decoration: none; }
.td-search__x:hover { color: var(--color-warning); }
.td-count { margin: 0 0 var(--space-4); font-size: var(--fs-micro); color: var(--color-muted); }

.td-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .td-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .td-grid { grid-template-columns: 1fr; } }

.td-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5); border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-line); border-radius: var(--radius-lg);
    background: radial-gradient(120% 100% at 100% 0, var(--td-soft, transparent) 0%, transparent 55%),
                var(--color-surface);
    transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.td-card:hover { border-color: var(--td-tone, var(--color-primary)); box-shadow: var(--shadow-md); }
.td-card--full           { --td-tone: var(--color-primary);   --td-soft: var(--color-primary-soft); }
.td-card--mini_listening { --td-tone: var(--color-secondary); --td-soft: var(--color-secondary-soft); }
.td-card--mini_reading   { --td-tone: var(--color-accent);    --td-soft: var(--color-accent-soft); }
.td-card--part_set       { --td-tone: var(--color-accent);    --td-soft: var(--color-accent-soft); }
.td-card.is-done { border-left-color: var(--color-secondary); }

.td-card__top { display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); flex-wrap: wrap; }
.td-type { display: inline-flex; align-items: center; gap: 7px; padding: 4px var(--space-3);
    border-radius: var(--radius-pill); background: var(--td-soft, var(--color-soft));
    color: var(--td-tone, var(--color-muted));
    font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.td-type i { font-size: 11px; }

.td-card__t { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold);
    line-height: var(--lh-normal); }
.td-card__t a { color: var(--color-ink); text-decoration: none;
    /* tên đề dài ngắn khác nhau — kẹp 2 dòng cho mọi thẻ cùng chiều cao đầu */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-card__t a:hover { color: var(--td-tone, var(--color-primary)); }

.td-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0;
    font-size: var(--fs-micro); color: var(--color-muted); }
.td-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.td-card__meta i { font-size: 11px; color: var(--color-mute2); }

.td-card__st { display: flex; align-items: center; gap: 7px; margin: 0 0 auto;
    font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-mute2); }
.td-card__st i { font-size: 13px; }
.td-card__st.is-done { color: var(--color-secondary-deep); }
.td-card__st.is-done i { color: var(--color-secondary); }
.td-card__st small { font-weight: var(--fw-regular); color: var(--color-muted); }
.td-card__st small::before { content: '· '; }

.td-card__act { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
    padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.td-card__act .btn { justify-content: center; gap: 7px; }

.td-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4);
    margin-top: var(--space-6); font-size: var(--fs-small); color: var(--color-muted); }
.td-pager .btn.is-off { opacity: .4; pointer-events: none; }

/* ── Hộp "Chọn chế độ" ───────────────────────────────────────────────────────
   🚨 PHẢI ghi đè max-width: .tc-modal__box khoá 420px (khuôn hộp xác nhận cũ, một
   cột chữ) — ba thẻ phạm vi nhét vào đó thì chữ vỡ dòng và chip xếp dọc. */
.tc-modal__box.tm-box { width: min(880px, 100%); max-width: min(880px, 100%);
    max-height: calc(100vh - var(--space-10)); overflow: auto; }
.tm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.tm-head h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--color-ink); }
.tm-head p { margin: 4px 0 0; font-size: var(--fs-small); color: var(--color-muted); }

.tm-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: var(--space-5) 0 var(--space-2);
    padding: 4px; border-radius: var(--radius-pill); background: var(--color-soft); }
.tm-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    padding: 9px var(--space-4); border: 0; border-radius: var(--radius-pill); background: 0;
    color: var(--color-muted); font: var(--fw-semibold) var(--fs-small)/1 var(--font-sans); }
.tm-tab.is-on { background: var(--color-surface); color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm); }
.tm-note { margin: 0 0 var(--space-4); font-size: var(--fs-micro); color: var(--color-muted); }

.tm-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .tm-grid { grid-template-columns: 1fr; } }
.tm-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: radial-gradient(120% 100% at 100% 0, var(--tm-soft, transparent) 0%, transparent 60%),
                var(--color-surface); }
.tm-card--full { --tm-tone: var(--color-primary);   --tm-soft: var(--color-primary-soft); }
.tm-card--l    { --tm-tone: var(--color-secondary); --tm-soft: var(--color-secondary-soft); }
.tm-card--r    { --tm-tone: var(--color-accent);    --tm-soft: var(--color-accent-soft); }
.tm-card__ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-md);
    background: var(--tm-soft); color: var(--tm-tone); font-size: 15px; }
.tm-card b { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-ink); }
.tm-card__d { font-size: var(--fs-micro); color: var(--color-muted); }
.tm-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 var(--space-2); }
.tm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--space-3);
    border-radius: var(--radius-pill); background: var(--color-soft); color: var(--color-muted);
    font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.tm-chip i { font-size: 10px; }
.tm-card .btn { margin-top: auto; justify-content: center; gap: 7px; }

.tm-parts { margin-top: var(--space-4); padding: var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.tm-parts[hidden] { display: none; }
.tm-parts__h { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.tm-parts__h > div { flex: 1; min-width: 0; }
.tm-parts__h b { display: block; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-ink); }
.tm-parts__h span { font-size: var(--fs-micro); color: var(--color-muted); }
.tm-parts__ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent); }
.tm-parts__g { margin: var(--space-3) 0 6px; font-size: var(--fs-micro); font-weight: var(--fw-bold);
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-mute2); }
.tm-parts #tmPartList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--space-3); }
.tm-parts__g { grid-column: 1 / -1; }
@media (max-width: 560px) { .tm-parts #tmPartList { grid-template-columns: 1fr; } }
.tm-part { display: flex; align-items: center; gap: var(--space-3); cursor: pointer;
    padding: 9px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: var(--fs-small); transition: border-color var(--dur-fast) var(--ease); }
.tm-part:hover { border-color: var(--color-primary); }
.tm-part input { position: absolute; opacity: 0; width: 0; height: 0; }
/* 🚨 Ô tick RIÊNG, không mượn .tf-voc__tick: class đó nằm trong <style> của
   toeic_focus_head(), mà trang danh sách đề KHÔNG gọi hàm đó — mượn thì dấu tích
   hiện trần trụi cả khi chưa chọn. */
.tm-tick { flex: none; width: 20px; height: 20px; display: grid; place-items: center;
    border: 1.5px solid var(--color-border); border-radius: 6px; background: var(--color-surface);
    color: var(--color-on-dark); font-size: 10px;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tm-tick i { opacity: 0; transform: scale(.6); transition: all var(--dur-fast) var(--ease); }
.tm-part input:checked + .tm-tick { background: var(--color-primary); border-color: var(--color-primary); }
.tm-part input:checked + .tm-tick i { opacity: 1; transform: scale(1); }
.tm-part input:focus-visible + .tm-tick { box-shadow: var(--shadow-focus); }
.tm-part b { flex: 1; font-weight: var(--fw-semibold); color: var(--color-ink); }
.tm-part span { font-size: var(--fs-micro); color: var(--color-muted); }
.tm-part:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }

.tm-foot { display: flex; justify-content: flex-end; margin-top: var(--space-4);
    padding-top: var(--space-3); border-top: 1px solid var(--color-line); }

/* Ô trống của Part 5/6 — xem toeic_q_text(). Rộng CỐ ĐỊNH nên câu nào cũng như câu
   nào, không còn cảnh gạch dưới lúc 3 lúc 10 ký tự. em: co giãn theo cỡ chữ của câu. */
.tp2-blank { display: inline-block; width: 4.2em; height: .95em; margin: 0 3px;
    border-bottom: 2px solid var(--color-mute2); vertical-align: -1px; }

/* ── Khối lời giải ────────────────────────────────────────────────────────────
   Thẻ TRẮNG có viền + mép nhấn theo phán quyết, dải đầu tô nhạt tràn hết mép.
   🚨 Cỡ chữ = --fs-body chứ KHÔNG --fs-small: đây là phần người học đọc lâu nhất
   trong cả buổi (Part 1 có bài giải năm khối), 13px đọc mỏi mắt và trông rẻ tiền. */
.tp2-expl { display: none; margin-top: var(--space-4); overflow: hidden;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary); border-radius: var(--radius-md);
    font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); }
.tp2-expl.is-on { display: block; animation: tp2-in var(--dur-base) var(--ease); }
.tp2-expl > *:not(.tp2-expl__head) { margin-left: var(--space-5); margin-right: var(--space-5); }
.tp2-expl > *:last-child { margin-bottom: var(--space-5); }
.tp2-expl b { color: var(--color-ink); }
.tp2-expl ul, .tp2-expl ol { margin: var(--space-2) 0; padding-left: var(--space-5); }
.tp2-expl li { margin-bottom: var(--space-2); }
.tp2-expl p { margin: var(--space-3) 0; }
/* Mép nhấn của khối lời giải ăn theo phán quyết: đúng emerald, sai amber. */
.tp2-expl:has(.tp2-verdict.is-ok) { border-left-color: var(--color-secondary); }
.tp2-expl:has(.tp2-verdict.is-no) { border-left-color: var(--color-warning); }

.tp2-expl__head { display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-line); background: var(--color-soft); }
.tp2-expl:has(.tp2-verdict.is-ok) .tp2-expl__head { background: var(--pill-success-bg); }
.tp2-expl:has(.tp2-verdict.is-no) .tp2-expl__head { background: var(--pill-warning-bg); }
.tp2-verdict { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0;
    font-size: var(--fs-body); font-weight: var(--fw-extrabold); }
.tp2-verdict i { width: 24px; height: 24px; display: grid; place-items: center;
    border-radius: var(--radius-pill); color: var(--color-on-dark); font-size: 11px; }
.tp2-verdict.is-ok { color: var(--color-secondary-deep); }
.tp2-verdict.is-ok i { background: var(--color-secondary); }
.tp2-verdict.is-no { color: var(--color-warning-deep); }
.tp2-verdict.is-no i { background: var(--color-warning); }

/* Đáp án đúng = huy hiệu chữ cái, không phải một dòng chữ đậm lẫn trong bài. */
.tp2-ans { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3);
    font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-muted); }
.tp2-ans b { width: 30px; height: 30px; display: grid; place-items: center; flex: none;
    border-radius: var(--radius-pill); background: var(--color-secondary);
    color: var(--color-on-dark); font-size: var(--fs-small); font-weight: var(--fw-extrabold); }
.tp2-giai { margin-bottom: var(--space-3); }
.tp2-giai > b:first-child { display: inline-block; margin-top: var(--space-1); }
/* Tiêu đề mục trong lời giải (Lời thoại…) — thay cặp <br><br><b> nối đuôi nhau. */
.tp2-sec { display: flex; align-items: center; gap: 8px; margin: var(--space-4) 0 var(--space-2);
    padding-top: var(--space-3); border-top: 1px solid var(--color-line);
    font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink); }
.tp2-sec i { font-size: 12px; color: var(--color-muted); }
/* Ghi chú lời thoại do máy nghe lại — phải đọc được nhưng không tranh chỗ với bài. */
.tp2-asr { display: inline-block; margin-top: var(--space-2); color: var(--color-muted); font-size: var(--fs-micro); }

.tp2-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-top: var(--space-4); }

/* ── Bảng điều hướng câu hỏi ───────────────────────────────────────────── */
.tp2-side { position: sticky; top: 72px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4); box-shadow: var(--shadow-sm); }
@media (max-width: 900px) { .tp2-side { position: static; } }
.tp2-side h2 { margin: 0 0 var(--space-3); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-ink); }
.tp2-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4); font-size: var(--fs-micro); color: var(--color-muted); }
.tp2-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tp2-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--color-border); }
.tp2-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
    max-height: 360px; overflow-y: auto; }
.tp2-cell { aspect-ratio: 1; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-muted); cursor: pointer;
    font-size: var(--fs-micro); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.tp2-cell.is-ok { background: var(--pill-success-bg); border-color: var(--color-secondary); color: var(--pill-success-fg); }
.tp2-cell.is-no { background: var(--pill-warning-bg); border-color: var(--color-warning); color: var(--pill-warning-fg); }
.tp2-cell.is-flag { border-color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent-soft); }
.tp2-cell.is-now { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }
.tp2-lg--ok { background: var(--pill-success-bg); border-color: var(--color-secondary); }
.tp2-lg--no { background: var(--pill-warning-bg); border-color: var(--color-warning); }
.tp2-lg--now { background: var(--color-primary); border-color: var(--color-primary); }
.tp2-lg--flag { background: var(--color-accent-soft); border-color: var(--color-accent); }

/* Chia đôi màn (ngữ cảnh | phương án): nguồn sự thật là toeic_focus_head() trong
   _toeic_ui.php — nạp SAU file này và định nghĩa trọn .tp2-split/.tp2-split__doc
   (kể cả collapse 900px). Đừng thêm bản .tp2-split ở đây nữa: bản cũ từng nằm đây
   bị ghi đè toàn phần, chỉ gây nhầm nguồn khi đọc CSS. */
.tp2-qs { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tp2-item.is-done .tp2-opt { pointer-events: none; }

/* ── Dẫn chứng đáp án ─────────────────────────────────────────────────────
   Chỉ đúng chỗ trong lời thoại/đoạn văn chứa câu trả lời. Dùng ở review ·
   result · part. Nguồn: en_toeic_evidence. */
.tc-evi{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);
    background:var(--color-soft);border-left:3px solid var(--color-accent);
    border-radius:var(--radius-md)}
.tc-evi__lbl{display:block;font-size:var(--fs-micro);font-weight:var(--fw-bold);
    text-transform:uppercase;letter-spacing:.04em;color:var(--color-accent);
    margin-bottom:var(--space-2)}
.tc-evi__lbl em{font-style:normal;font-weight:var(--fw-regular);color:var(--color-muted);
    text-transform:none;letter-spacing:0}
.tc-evi q{display:block;font-size:var(--fs-body);line-height:var(--lh-body);
    color:var(--color-ink);quotes:none}
.tc-mis.added{color:var(--color-secondary)}

/* ── Thẻ chủ điểm ─────────────────────────────────────────────────────────
   Một thẻ = một bài + bộ luyện 8 câu của nó. Ba bộ đếm dùng ba màu brand:
   đúng = secondary (emerald) · sai = warning (amber) · chưa làm = locked (gray).
   KHÔNG dùng đỏ cho "sai" — trái bảng màu P0 của dự án. */
.tc-tpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
    gap:var(--space-4);margin:var(--space-4) 0}
.tc-tp{display:flex;flex-direction:column;gap:var(--space-2);
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);
    transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.tc-tp:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}
.tc-tp.is-read{border-left:3px solid var(--color-secondary)}
.tc-tp__h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.tc-tp__code{font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--color-primary);
    background:var(--color-primary-soft);padding:2px 8px;border-radius:var(--radius-sm)}
.tc-tp__read{font-size:var(--fs-micro);color:var(--color-secondary);font-weight:var(--fw-semibold)}
.tc-tp__read i{margin-right:4px}
/* 🚨 min-height đủ HAI DÒNG để thanh tiến độ và ba bộ đếm thẳng hàng ngang giữa các
   thẻ. Tiêu đề bài dài ngắn khác nhau ("Part 5 — Toàn cảnh" một dòng, "Thì động từ
   — chọn theo dấu hiệu thời gian" hai dòng); không đặt sàn thì mỗi thẻ một cao độ và
   lưới trông như vỡ. Dùng min-height chứ KHÔNG height: tiêu đề ba dòng vẫn nở được. */
.tc-tp__t{margin:0;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--color-ink);
    line-height:var(--lh-normal);min-height:calc(2 * var(--lh-normal) * 1em)}
.tc-tp__bar{height:6px;border-radius:var(--radius-pill);background:var(--color-soft);overflow:hidden}
.tc-tp__bar>span{display:block;height:100%;background:var(--color-primary);border-radius:var(--radius-pill);
    transition:width var(--dur-slow) var(--ease)}
.tc-tp__n{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-small);
    font-weight:var(--fw-semibold)}
.tc-tp__n i{margin-right:4px}
.tc-tp__n .is-ok{color:var(--color-secondary)}
.tc-tp__n .is-no{color:var(--color-warning)}
.tc-tp__n .is-todo{color:var(--color-locked)}
.tc-tp__n em{margin-left:auto;font-style:normal;color:var(--color-muted);font-weight:var(--fw-regular)}
.tc-tp__a{display:flex;gap:var(--space-2);margin-top:auto;padding-top:var(--space-2);flex-wrap:wrap}
.tc-tp__a .btn{flex:1 1 auto}

/* Ô luyện nhanh — lối vào rẻ nhất, đặt trên lưới thẻ. */
.tc-quick{display:flex;align-items:center;gap:var(--space-4);text-decoration:none;
    background:var(--color-surface);border:1px dashed var(--color-border);
    border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin:var(--space-4) 0;
    transition:border-color var(--dur-fast) var(--ease)}
.tc-quick:hover{border-color:var(--color-accent);border-style:solid}
.tc-quick__i{flex:none;display:grid;place-items:center;width:42px;height:42px;
    border-radius:var(--radius-md);background:var(--color-accent-soft);color:var(--color-accent)}
.tc-quick__b{min-width:0;flex:1}
.tc-quick__b b{display:block;color:var(--color-ink);font-size:var(--fs-body)}
.tc-quick__b span{display:block;color:var(--color-muted);font-size:var(--fs-small)}
.tc-quick__go{flex:none;color:var(--color-accent)}

/* ── Luyện theo dạng câu hỏi ───────────────────────────────────────────────
   Thẻ NHỎ và DÀY, không phải thẻ lớn như "theo mức độ": một Part có tới 8-9 dạng,
   dùng khuôn thẻ lớn thì phải cuộn hai màn hình mới thấy hết, mất luôn tác dụng
   "liếc một cái biết mình yếu dạng nào". */
.tq-grid{display:grid;gap:var(--space-3);
    grid-template-columns:repeat(auto-fill,minmax(258px,1fr));margin-bottom:var(--space-6)}
.tq-card{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);
    transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.tq-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.tq-card__ic{flex:none;display:grid;place-items:center;width:36px;height:36px;
    border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary)}
.tq-card__b{min-width:0;flex:1}
.tq-card__b b{display:block;color:var(--color-ink);font-size:var(--fs-small);
    font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.tq-card__b span{display:block;color:var(--color-muted);font-size:var(--fs-micro);margin-top:2px}
.tq-card__go{flex:none;color:var(--color-mute2);font-size:var(--fs-small)}
.tq-card__pct{flex:none;text-align:right;color:var(--color-muted);
    font-size:var(--fs-small);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.tq-card__pct small{display:block;font-size:var(--fs-micro);font-weight:var(--fw-regular)}
.tq-card__pct.is-weak{color:var(--color-warning)}

/* ── Chọn chế độ làm đề ───────────────────────────────────────────────────
   Hai ý định trên cùng một đề: đo trình độ (Thi thử) vs học từ chỗ sai (Luyện tập).
   Bày thành hai ô ngang hàng, KHÔNG giấu vào cài đặt hay dropdown. */
.tc-pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-4) 0}
@media(max-width:560px){.tc-pick{grid-template-columns:1fr}}
.tc-pick__o{display:block;text-decoration:none;padding:var(--space-4);border-radius:var(--radius-lg);
    border:1px solid var(--color-border);background:var(--color-surface);
    transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.tc-pick__o:hover{border-color:var(--color-primary);transform:translateY(-1px)}
.tc-pick__i{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);
    background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-2)}
.tc-pick__o:last-child .tc-pick__i{background:var(--color-accent-soft);color:var(--color-accent)}
.tc-pick__o b{display:block;color:var(--color-ink);font-size:var(--fs-body);margin-bottom:2px}
.tc-pick__o>span:last-child{display:block;color:var(--color-muted);font-size:var(--fs-small);
    line-height:var(--lh-body)}

/* Lối đi gần nhất trên trang "đang xây dựng" — biến ngõ cụt thành bước tiếp theo. */
.tc-soon__alt{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
    margin:var(--space-5) 0 var(--space-4);padding:var(--space-4);max-width:440px;
    background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.tc-soon__alt>span{color:var(--color-muted);font-size:var(--fs-small);line-height:var(--lh-body);text-align:center}

/* Phím tắt trang luyện tập — phải HIỆN mới có người dùng. */
.tp2-pos{font-variant-numeric:tabular-nums;color:var(--color-muted)}
.tp2-keys{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 0;
    font-size:var(--fs-micro);color:var(--color-muted)}
/* Màn nhỏ = không có bàn phím — gợi ý phím tắt chỉ tổ chật chỗ. */
@media (max-width: 900px){.tp2-keys{display:none}}
.tp2-keys>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tp2-keys kbd{display:inline-block;min-width:20px;padding:1px 6px;
    font:var(--fw-semibold) var(--fs-micro)/1.5 var(--font-mono);text-align:center;
    color:var(--color-ink);background:var(--color-soft);
    border:1px solid var(--color-line);border-bottom-width:2px;border-radius:var(--radius-sm)}
/* Chỉ dẫn của Part (Part 1/2) — đứng đầu cột trái, giọng đề thi: chữ đậm, không hộp. */
.tp2-direct{flex:none;margin:0 0 var(--space-4);font-size:var(--fs-body);
    font-weight:var(--fw-semibold);line-height:var(--lh-body);color:var(--color-ink)}
/* Ô câu hỏi khi chỉ dẫn đã chuyển sang trái: còn số câu + cờ, cờ đẩy về mép phải. */
.tp2-q--bare{margin-bottom:var(--space-3)}
.tp2-q--bare .tp2-flag{margin-left:auto}

/* % người học chọn phương án này — lộ sau khi trả lời. */
.tp2-opt .tp2-pct{flex:none;min-width:34px;text-align:right;font-style:normal;
    font-size:var(--fs-micro);color:var(--color-muted);font-variant-numeric:tabular-nums}
/* Dòng meta của câu: độ khó · số lượt làm. */
.tp2-qmeta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);
    margin:0 0 var(--space-2);font-size:var(--fs-micro);color:var(--color-muted)}
.tp2-qmeta span+span::before{content:'·';margin-right:var(--space-3);color:var(--color-mute2)}
/* Lời thoại tách câu bấm được — câu chứa đáp án (khớp dẫn chứng) tô emerald. */
.tp2-tr{display:block;margin-top:4px;line-height:var(--lh-loose)}
.tp2-tr__s{display:inline;padding:1px 3px;margin:0;border:0;background:none;cursor:pointer;
    font:inherit;color:inherit;text-align:left;border-radius:var(--radius-sm);
    transition:background var(--dur-fast) var(--ease)}
.tp2-tr__s:hover{background:var(--color-accent-soft);color:var(--color-ink)}
.tp2-tr__s.is-ev{background:var(--pill-success-bg);box-shadow:inset 0 -2px 0 var(--color-secondary)}
/* Phương án đọc lên ở Part 1/2 — mỗi phương án MỘT dòng, nhãn A–D thành ô vuông. */
.tp2-tr__s--opt{display:flex;align-items:baseline;gap:var(--space-3);width:100%;
    padding:6px var(--space-3);margin-top:4px;border-radius:var(--radius-sm)}
.tp2-tr__k{flex:none;width:22px;height:22px;display:grid;place-items:center;
    border-radius:var(--radius-sm);background:var(--color-soft);color:var(--color-muted);
    font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.tp2-tr__s--opt.is-ev .tp2-tr__k{background:var(--color-secondary);color:var(--color-on-dark)}
.tp2-tr__sp{color:var(--color-primary-hover);font-weight:var(--fw-bold)}
.tp2-trhint{display:block;margin-top:4px;font-size:var(--fs-micro);color:var(--color-mute2)}
.tp2-trhint i{margin-right:4px}
/* Link về bài lý thuyết chứa dạng câu này. */
.tp2-lesson{display:inline-flex;align-items:center;gap:7px;margin-top:var(--space-3);
    padding:7px 12px;border:1px dashed var(--color-accent);border-radius:var(--radius-md);
    color:var(--color-accent);font-size:var(--fs-small);font-weight:var(--fw-semibold);
    text-decoration:none;transition:background var(--dur-fast) var(--ease)}
.tp2-lesson:hover{background:var(--color-accent-soft);border-style:solid}

/* Ô "Luyện lại câu sai" ở hub — cùng khuôn .tc-quick, icon amber + huy hiệu đến hạn. */
.tc-quick--mis .tc-quick__i{background:var(--pill-warning-bg);color:var(--color-warning)}
.tc-quick__due{flex:none;min-width:24px;height:24px;padding:0 7px;display:grid;place-items:center;
    background:var(--color-warning);color:var(--color-on-dark);border-radius:var(--radius-pill);
    font-size:var(--fs-micro);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}

/* Hộp trả lời của AI trong trang luyện tập. */
.tp2-aibox{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);
    background:var(--color-accent-soft);border-radius:var(--radius-md);
    font-size:var(--fs-small);line-height:var(--lh-body)}
.tp2-aibox>div{margin-bottom:5px}
.tp2-aibox>div:last-child{margin-bottom:0}
.tc-acts{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}

/* Trục "dạng bài" dùng lại khuôn .tq-card nhưng ĐỔI MÀU ô icon — hai lưới thẻ nhỏ
   giống hệt nhau nằm cạnh nhau thì người học không phân biệt được mình đang ở trục
   nào sau khi cuộn qua tiêu đề. */
.tq-card__ic--alt{background:var(--color-accent-soft);color:var(--color-accent)}

/* Đồng hồ của lượt luyện có giới hạn thời gian. Ba trạng thái, không nhấp nháy: chớp
   tắt liên tục ở góc màn hình là thứ người học phải liếc suốt buổi làm bài. */
.tp2-clock{font-variant-numeric:tabular-nums}
.tp2-clock.is-low{border-color:var(--color-warning);color:var(--color-warning)}
.tp2-clock.is-low i{color:var(--color-warning)}
.tp2-clock.is-out{border-color:var(--color-locked);color:var(--color-locked)}
.tp2-item.is-locked{opacity:.55}
.tp2-item.is-locked .tp2-opt{cursor:not-allowed}

/* Hộp ghi chú riêng và hộp báo lỗi trong trang luyện. Cùng một khuôn để hai thứ
   trông giống nhau thì hành xử cũng giống nhau — mở bằng nút, đóng bằng chính nút đó. */
.tp2-notebox,.tp2-repbox{display:flex;flex-direction:column;gap:var(--space-2);
    margin-top:var(--space-3);padding:var(--space-3) var(--space-4);
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-md)}
.tp2-noteact{display:flex;align-items:center;gap:var(--space-3);justify-content:flex-end}
.tp2-notemsg,.tp2-repmsg{flex:1;font-size:var(--fs-micro);color:var(--color-muted)}
.tp2-notemsg.is-bad,.tp2-repmsg.is-bad{color:var(--color-warning)}

/* ── Trần bản miễn phí ────────────────────────────────────────────────────────
   Thẻ bài học bị khoá + khối lời giải chỉ còn cái bóng. Bóng là mấy vạch xám giả
   dòng chữ — KHÔNG phải chữ thật bị blur, vì chữ thật không bao giờ xuống client. */
.tc-lesson.is-locked { opacity: .72; }
.tc-lesson.is-locked:hover { opacity: 1; background: var(--color-soft); }
.tc-lesson.is-locked .tc-lesson__mark { background: var(--color-soft); color: var(--color-mute2); }
.tc-lesson.is-locked .tc-lesson__t { color: var(--color-muted); }
.tc-lesson__cta--lock { background: var(--color-soft); color: var(--color-muted); }

.tc-tip--lock i { color: var(--color-locked); }

.tp2-giai--locked { position: relative; overflow: hidden; padding: var(--space-4);
    border: 1px dashed var(--color-border); border-radius: var(--radius-md);
    background: var(--color-soft); }
.tp2-giai__ghost { display: grid; gap: 9px; filter: blur(3px); opacity: .55; user-select: none; }
.tp2-giai__ghost span { display: block; height: 10px; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-mute2), var(--color-line)); }
.tp2-giai__ghost span:nth-child(1) { width: 92%; }
.tp2-giai__ghost span:nth-child(2) { width: 78%; }
.tp2-giai__ghost span:nth-child(3) { width: 86%; }
.tp2-giai__ghost span:nth-child(4) { width: 64%; }
.tp2-giai__ghost span:nth-child(5) { width: 80%; }
.tp2-giai__lock { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; text-align: center;
    padding: var(--space-3); background: color-mix(in srgb, var(--color-surface) 82%, transparent); }
.tp2-giai__lock i { color: var(--color-locked); font-size: 16px; }
.tp2-giai__lock b { font-size: var(--fs-small); color: var(--color-ink); }
.tp2-giai__lock span { max-width: 40ch; font-size: var(--fs-micro); color: var(--color-muted); line-height: var(--lh-body); }
.tp2-giai__lock .btn { margin-top: 4px; }

/* Bộ từ / hàng danh sách bị khoá theo trần miễn phí */
.tc-row.is-locked { opacity: .74; }
.tc-row.is-locked:hover { opacity: 1; }
.tc-row.is-locked h3 { color: var(--color-muted); }
.tc-st--lock { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
    border-radius: var(--radius-pill); background: var(--color-soft); color: var(--color-muted);
    font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.td-card.is-locked { opacity: .78; }
.td-card.is-locked:hover { opacity: 1; }
.lp-lock { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
    color: var(--color-primary); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.mk-sol__giai--lock { display: flex; align-items: center; gap: 8px; padding: var(--space-3);
    border: 1px dashed var(--color-border); border-radius: var(--radius-md);
    background: var(--color-soft); color: var(--color-muted); font-size: var(--fs-small); }
.mk-sol__giai--lock i { color: var(--color-locked); }
.mk-sol__giai--lock a { color: var(--color-primary); font-weight: var(--fw-semibold); }
.rv-expl--lock { display: flex; align-items: center; gap: 8px; color: var(--color-muted);
    background: var(--color-soft); border: 1px dashed var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--fs-small); }
.rv-expl--lock i { color: var(--color-locked); }
.rv-expl--lock a { color: var(--color-primary); font-weight: var(--fw-semibold); }