/* ─────────────────────────────────────────────────────────────────────
 * hsk-hub.css — TAB "HSK" của học viên (13/09/2026)
 *   /hsk            public/hsk-hub.php      trang tổng
 *   /hsk/ngu-phap   public/hsk-grammar.php  ngữ pháp theo bài
 *   /hsk/doc-hieu   public/hsk-reading.php  đọc hiểu theo bài
 *
 * Chỉ dùng token của design system (docs/design-system.md): không hex, không font riêng.
 * Card / icon tile / badge / alert / button / page-header lấy từ ui-components.css;
 * file này chỉ lo bố cục (namespace .hh-*).
 * Hero mô phỏng banner .rmhub__hero của /lo-trinh-cua-toi (đã duyệt) để 2 tab đọc như một hệ.
 * ⚠ LUẬT B: không line-clamp / ellipsis trên .hh-gp (tên + cấu trúc ngữ pháp là nội dung lý thuyết).
 * ───────────────────────────────────────────────────────────────────── */

/* Màu CHỮ đỏ / navy / đất nung (28/10/2026 — nền tối cho Ngữ pháp · Hội thoại · Thi thử): --color-primary/-secondary/-accent
   KHÔNG lật ⇒ ở nền tối chữ đỏ/navy chỉ ~2,3:1. Nền tối đổi sang bản -deep (lật sáng). Nền đặc (nút đỏ) vẫn dùng token gốc. */
:root {
    --hh-fg-pri: var(--color-primary);
    --hh-fg-sec: var(--color-secondary);
    --hh-fg-acc: var(--color-accent);
    --hh-fg-bad: var(--color-incorrect);
    --hh-on-deep: var(--color-on-dark);   /* chữ trên nền --color-*-deep: nền này lật SÁNG ở nền tối ⇒ chữ phải lật tối */
}
html[data-user-theme="dark"] {
    --hh-fg-pri: var(--color-primary-deep);
    --hh-fg-sec: var(--color-secondary-deep);
    --hh-fg-acc: var(--color-accent-deep);
    --hh-fg-bad: color-mix(in srgb, var(--color-incorrect) 55%, var(--color-on-dark));
    --hh-on-deep: var(--color-inverse-surface);
}
@media (prefers-color-scheme: dark) {
    html[data-user-theme="system"] {
        --hh-fg-pri: var(--color-primary-deep);
        --hh-fg-sec: var(--color-secondary-deep);
        --hh-fg-acc: var(--color-accent-deep);
        --hh-fg-bad: color-mix(in srgb, var(--color-incorrect) 55%, var(--color-on-dark));
        --hh-on-deep: var(--color-inverse-surface);
    }
}
/* Ô icon dùng chung (ui-components.css) cũng tô chữ bằng token gốc — trong các trang này đi theo token trên; rê chuột vẫn chữ trắng trên nền đặc */
:is(.hh, .gd-page) .ui-icon-tile--primary   { color: var(--hh-fg-pri); }
:is(.hh, .gd-page) .ui-icon-tile--secondary { color: var(--hh-fg-sec); }
:is(.hh, .gd-page) .ui-icon-tile--accent    { color: var(--hh-fg-acc); }
:is(.hh, .gd-page) :where(a, button, .ui-card-hover, .ui-icon-tile-fillon):hover :is(.ui-icon-tile--primary, .ui-icon-tile--secondary, .ui-icon-tile--accent) { color: var(--color-on-dark); }
:is(.hh, .gd-page) .eyebrow { color: var(--hh-fg-pri); }
/* --lv-brand-fg (learn-shell.css, công thức NAVS) với đỏ TTKK ở nền tối chỉ ~3:1 — reading-library.css (.rl3-*) dùng nó cho chữ */
html[data-user-theme="dark"] :is(.hh, .gd-page) { --lv-brand-fg: var(--color-primary-deep); }
@media (prefers-color-scheme: dark) {
    html[data-user-theme="system"] :is(.hh, .gd-page) { --lv-brand-fg: var(--color-primary-deep); }
}

.hh {
    max-width: var(--page-w);
    margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-16);
}
@media (max-width: 640px) {
    .hh { padding: var(--space-4) var(--space-4) var(--space-12); }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hh-hero {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-8);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-primary);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-md);
}
.hh-hero__body { flex: 1; min-width: 0; }
.hh-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-micro);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-on-dark) 82%, transparent);
}
.hh-hero__title {
    margin: var(--space-1) 0;
    font-size: var(--fs-h2-desktop);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-on-dark);
}
.hh-hero__sub {
    max-width: 62ch;
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: color-mix(in srgb, var(--color-on-dark) 88%, transparent);
}
.hh-hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hh-hero__stats span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    background: color-mix(in srgb, var(--color-on-dark) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-on-dark) 24%, transparent);
}
.hh-hero__stats b { font-weight: var(--fw-extrabold); }
.hh-hero__cta { flex-shrink: 0; }
/* Nút trong hero dùng biến thể CHUẨN (.btn-outline = nền trắng) — không tự tô màu nút theo trang (design system §10/§17).
   Chỉ bù vòng focus: --shadow-focus cùng tông đỏ với nền hero nên sẽ vô hình → viền sáng cho người dùng bàn phím. */
.hh-hero .btn:focus-visible {
    outline: 3px solid var(--color-on-dark);
    outline-offset: 3px;
}
/* Bootstrap (.btn:hover / :focus-visible / :active) đặt nền = --bs-btn-hover-bg — biến này để trống nên nền
   thành TRONG SUỐT. .btn-outline chỉ đổi viền + chữ sang đỏ, trên nền trắng không lộ; nhưng trên hero đỏ thì
   chữ đỏ nằm trên nền đỏ = nút biến mất khi rê chuột. Riêng :focus-visible Bootstrap còn đổi CHỮ sang trắng
   (--bs-btn-hover-color) = chữ trắng trên nền trắng. Giữ nền trắng + chữ/viền đỏ (y như hover) ở mọi trạng thái. */
.hh-hero .btn-outline:hover:not(:disabled),
.hh-hero .btn-outline:focus-visible,
.hh-hero .btn-outline:active {
    background: var(--color-surface);
    color: var(--hh-fg-pri);
    border-color: var(--color-primary);
}@media (max-width: 640px) {
    .hh-hero { flex-wrap: wrap; padding: var(--space-5); }
    .hh-hero__title { font-size: var(--fs-h2-mobile); }
    .hh-hero__cta, .hh-hero .hh-hero__btn { width: 100%; justify-content: center; }
}

/* ── Chọn cấp ────────────────────────────────────────────────────────── */
.hh-levelbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.hh-levelbar__label {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--color-muted);
}
.hh-levels { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hh-level {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 96px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hh-level:hover { border-color: var(--color-primary); color: var(--hh-fg-pri); }
.hh-level:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hh-level__name {
    font-size: var(--fs-body);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
}
.hh-level__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-muted);
}
.hh-level__tag.is-owned { color: var(--hh-fg-sec); }
.hh-level__tag.is-soon  { color: var(--color-warning-deep); }
.hh-level.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-sm);
}
.hh-level.is-active .hh-level__tag { color: color-mix(in srgb, var(--color-on-dark) 85%, transparent); }
@media (max-width: 640px) {
    .hh-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .hh-level { min-width: 0; padding: var(--space-2); }
}

/* Dải báo quyền (dùng .ui-alert chuẩn) */
.hh-note { align-items: center; margin-bottom: var(--space-5); }
.hh-note__body { flex: 1; min-width: 0; line-height: var(--lh-normal); }
.hh-note .btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .hh-note { flex-wrap: wrap; }
    .hh-note .btn { width: 100%; justify-content: center; }
}

/* ── Tiêu đề khu ─────────────────────────────────────────────────────── */
.hh-sec { margin-top: var(--space-8); }
.hh-sec__title {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
}
.hh-sec__sub {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-small);
    color: var(--color-muted);
}

/* ── Thẻ kỹ năng ─────────────────────────────────────────────────────── */
.hh-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 760px) {
    .hh-grid { grid-template-columns: 1fr; }
}
.hh-skill {
    position: relative;               /* mốc cho link phủ kín thẻ (.hh-skill__cta::after) */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
}
.hh-skill__head { display: flex; align-items: center; gap: var(--space-3); }
.hh-skill__titles { min-width: 0; }
.hh-skill__title {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
}
.hh-skill__meta {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-micro);
    color: var(--color-muted);
}
.hh-skill__desc {
    flex: 1;
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    color: var(--color-text);
}
/* Chip nổi trên link phủ kín thẻ để bấm riêng được */
.hh-skill__chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.hh-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hh-chip:hover { border-color: var(--color-primary); color: var(--hh-fg-pri); }
.hh-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.hh-skill__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
}
.hh-skill__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--hh-fg-pri);
    text-decoration: none;
    white-space: nowrap;
}
.hh-skill__cta::after {             /* cả thẻ bấm được, không lồng <a> trong <a> */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
}
.hh-skill__cta i { font-size: var(--fs-micro); transition: transform var(--dur-fast) var(--ease); }
.hh-skill:hover .hh-skill__cta i { transform: translateX(3px); }
.hh-skill__cta:focus-visible { outline: none; }
.hh-skill__cta:focus-visible::after { box-shadow: var(--shadow-focus); }
.hh-skill.is-soon { background: var(--color-bg); }
.hh-skill.is-soon .hh-skill__title { color: var(--color-muted); }

/* Trạng thái cuối thẻ */
.hh-status {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.hh-status__txt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-muted);
}
.hh-status__txt::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-locked);
}
.hh-status.is-progress .hh-status__txt { color: var(--color-text); }
.hh-status.is-progress .hh-status__txt::before { background: var(--color-primary); }
.hh-status.is-done .hh-status__txt { color: var(--color-correct-deep); }
.hh-status.is-done .hh-status__txt::before { background: var(--color-correct); }
.hh-status.is-open .hh-status__txt { color: var(--hh-fg-sec); }
.hh-status.is-open .hh-status__txt::before { background: var(--color-secondary); }
.hh-status.is-locked .hh-status__txt { color: var(--color-locked-deep); }
.hh-status.is-locked .hh-status__txt::before { display: none; }
.hh-bar {
    display: block;
    width: 100%;
    max-width: 240px;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-line);
}
.hh-bar > span {
    display: block;
    width: var(--p, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}
.hh-status.is-done .hh-bar > span { background: var(--color-correct); }

/* ── Công cụ đi kèm ──────────────────────────────────────────────────── */
.hh-group { margin-bottom: var(--space-5); }
.hh-group__label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-3);
}
.hh-group__label b {
    font-size: var(--fs-micro);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--hh-fg-pri);
}
.hh-group__label span { font-size: var(--fs-micro); color: var(--color-muted); }
.hh-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}
.hh-tool {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
}
.hh-tool:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hh-tool__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hh-tool__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--color-ink);
}
.hh-tool__desc {
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    color: var(--color-muted);
}

/* ── Trang con: ngữ pháp / đọc hiểu ──────────────────────────────────── */
.hh-back { margin-bottom: var(--space-3); }
.hh-head { margin-bottom: var(--space-5); }
.hh-chapters { display: flex; flex-direction: column; gap: var(--space-4); }
.hh-chap { padding: var(--space-5); scroll-margin-top: var(--space-20); }
.hh-chap__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.hh-chap__titles { min-width: 0; }
.hh-chap__num {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--hh-fg-pri);
}
.hh-chap.is-locked .hh-chap__num { color: var(--color-locked-deep); }
.hh-chap__title {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
}
.hh-chap__zh {
    margin-top: var(--space-1);
    font-size: var(--fs-small);
    color: var(--color-muted);
}
.hh-chap__badges {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}
@media (max-width: 640px) {
    .hh-chap__head { flex-direction: column; }
    .hh-chap__badges { justify-content: flex-start; }
}

/* Danh sách điểm ngữ pháp — in NGUYÊN VĂN (Luật B) */
.hh-gp {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    counter-reset: hh-gp;
}
.hh-gp__item {
    position: relative;
    counter-increment: hh-gp;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-12);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.hh-gp__item::before {
    content: counter(hh-gp);
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
}
.hh-chap.is-locked .hh-gp__item::before { background: var(--color-locked-soft); color: var(--color-locked-deep); }
.hh-gp__zh {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    color: var(--color-ink);
    overflow-wrap: anywhere;
}
.hh-gp__vi {
    margin-top: var(--space-1);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.hh-gp__pat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
}
.hh-gp__pat b {
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--hh-fg-sec);
}
.hh-gp__pat span { color: var(--color-ink); overflow-wrap: anywhere; }

/* Danh sách đoạn đọc hiểu */
.hh-rd {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-2);
}
.hh-rd li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--fs-small);
    color: var(--color-text);
}
.hh-rd li i { color: var(--hh-fg-acc); }
.hh-chap.is-locked .hh-rd li i { color: var(--color-locked); }
.hh-rd li span {
    margin-left: auto;
    font-size: var(--fs-micro);
    color: var(--color-muted);
    white-space: nowrap;
}

.hh-chap__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
}
.hh-chap__lock {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-small);
    color: var(--color-locked-deep);
}

/* ── Ngữ pháp theo CHỦ ĐỀ (/hsk/ngu-phap, mặc định từ 13/09/2026) ── */
/* Lưới THẺ chủ đề — trang chính chỉ có thẻ, bấm thẻ mới ra các điểm ngữ pháp (chủ dự án chốt 13/09/2026) */
.hh-tgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.hh-tcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    color: inherit;
    text-decoration: none;
}
.hh-tcard:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hh-tcard__head { display: flex; align-items: center; gap: var(--space-3); }
.hh-tcard__titles { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.hh-tcard__title {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
}
.hh-tcard__zh { font-size: var(--fs-small); color: var(--color-muted); }
.hh-tcard__desc {
    flex: 1;
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    color: var(--color-text);
}
.hh-tcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
}
.hh-tcard__n { font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-muted); }
.hh-tcard__go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--hh-fg-pri);
    white-space: nowrap;
}
.hh-tcard__go i { font-size: var(--fs-micro); transition: transform var(--dur-fast) var(--ease); }
.hh-tcard:hover .hh-tcard__go i { transform: translateX(3px); }
.hh-topic__tile { font-weight: var(--fw-bold); }

/* Trang MỘT chủ đề (/hsk/ngu-phap/{chủ-đề}) */
.hh-thead { display: flex; align-items: center; gap: var(--space-4); }
.hh-tlist { padding: var(--space-5); }
.hh-tnav { justify-content: space-between; margin-top: var(--space-5); }
.hh-gp__foot { margin-top: var(--space-2); }
.hh-gp__bai {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    max-width: 100%;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--hh-fg-pri);
    text-decoration: none;
    overflow-wrap: anywhere;
}
a.hh-gp__bai:hover { border-color: var(--color-primary); }
a.hh-gp__bai:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hh-gp__bai.is-locked { border-color: transparent; background: var(--color-locked-soft); color: var(--color-locked-deep); }
.hh-gp__item.is-locked::before { background: var(--color-locked-soft); color: var(--color-locked-deep); }
@media (max-width: 640px) {
    .hh-thead { align-items: flex-start; }
    /* Nút "chủ đề tiếp" (CTA chính) nằm trên, rộng hết hàng cho dễ bấm */
    .hh-tnav { flex-direction: column-reverse; align-items: stretch; }
    .hh-tnav .btn { justify-content: center; }
}

/* ── Trang chủ đề: mỗi điểm ngữ pháp bấm được → trang riêng của điểm đó ── */
.hh-gp__item--link { transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.hh-gp__item--link:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg)); }
.hh-gp__item--link:focus-within { box-shadow: var(--shadow-focus); }
/* Danh sách chỉ còn tên Trung + Việt (chủ dự án 13/09/2026) — tên bên trái, "Xem chi tiết" bên phải cùng hàng */
.hh-gp__row { display: flex; align-items: center; gap: var(--space-3); }
.hh-gp__names { flex: 1; min-width: 0; }
.hh-gp__item.is-locked .hh-gp__go .fa-lock { color: var(--color-locked-deep); }
@media (max-width: 640px) {
    .hh-gp__row { flex-wrap: wrap; }
    .hh-gp__names { flex-basis: 100%; }
    .hh-gp__row .hh-gp__go { margin-left: auto; }
}
.hh-gp__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--hh-fg-pri);
    text-decoration: none;
    white-space: nowrap;
}
.hh-gp__go::after {              /* cả khối điểm ngữ pháp bấm được */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
}
.hh-gp__go:focus-visible { outline: none; }
.hh-gp__go i { font-size: var(--fs-micro); transition: transform var(--dur-fast) var(--ease); }
.hh-gp__item--link:hover .hh-gp__go i { transform: translateX(3px); }

/* ── Trang MỘT điểm ngữ pháp (/hsk/ngu-phap/{chủ-đề}/{id}) — v4 GIỐNG trang ngữ pháp NAVS (13/09/2026)
   Chủ dự án chê v1 "xấu, xơ xài", v2 "vẫn xấu, chưa tối ưu", v3 editorial "quá xấu" rồi CHỌN mẫu
   navsenglish.com/foundation/grammar/{slug} (.gd-*): hero dải màu + icon + chip + tóm tắt, mục lục dính bên trái,
   thẻ Công thức / Lý thuyết / Ví dụ (lưới 2 cột) / Lưu ý quan trọng, khối Tự kiểm tra, nút điểm trước/sau.
   CSS chép theo NAVS, đổi px sang token; màu tự theo token TTKK (đỏ trầm / navy / đất nung).
   ⚠ LUẬT B: không line-clamp / ellipsis / max-height lên nội dung lý thuyết. */

/* Hero */
.gd-hero {
    padding: var(--space-6) 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)) 0%,
        color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)) 100%);
}
.gd-hero__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-4); }
.gd-bc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--fs-small); color: var(--color-muted); }
.gd-bc a { font-weight: var(--fw-semibold); color: var(--hh-fg-pri); text-decoration: none; }
.gd-bc a:hover { text-decoration: underline; }
.gd-bc__sep { opacity: .5; }
.gd-bc__cat { font-weight: var(--fw-semibold); color: var(--color-text); }
.gd-hero__head { display: flex; align-items: flex-start; gap: var(--space-5); margin-bottom: var(--space-4); }
.gd-hero__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--space-16);
    height: var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-on-dark);
    font-size: var(--fs-h2-desktop);
    font-weight: var(--fw-bold);
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.gd-hero__body { flex: 1; min-width: 0; }
.gd-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.gd-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    overflow-wrap: anywhere;
}
.gd-chip i { font-size: var(--fs-micro); }
.gd-chip--level { border-color: transparent; background: var(--color-primary); color: var(--color-on-dark); letter-spacing: var(--tracking-wide); }
.gd-chip--accent { border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-deep); }
.gd-chip--lock { border-color: transparent; background: var(--color-locked-soft); color: var(--color-locked-deep); }
.gd-title { margin: 0; font-size: var(--fs-h2-desktop); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--color-ink); overflow-wrap: anywhere; }
.gd-title .zh { letter-spacing: var(--tracking-normal); }
.hgp-title__op { font-weight: var(--fw-regular); color: var(--color-mute2); }
.gd-subtitle { margin: var(--space-1) 0 0; font-size: var(--fs-body); font-style: italic; color: var(--color-muted); overflow-wrap: anywhere; }
.gd-desc { margin: var(--space-2) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-secondary-text); overflow-wrap: anywhere; }
.gd-summary { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-3); border-top: 1px dashed var(--color-line); }
.gd-summary__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); }
.gd-summary__item i { color: var(--hh-fg-pri); }
.gd-summary__item strong { font-weight: var(--fw-extrabold); color: var(--color-ink); }

/* Lưới: mục lục + nội dung */
.gd-wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-12); }
.gd-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.gd-grid--solo { grid-template-columns: minmax(0, 1fr); }
.gd-main { min-width: 0; }

.gd-toc { position: sticky; top: calc(var(--nav-h) + var(--tt-trialbar-h, 0px) + var(--space-4)); }
.gd-toc__inner { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.gd-toc__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--fs-micro); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-muted); }
.gd-toc__title i { color: var(--hh-fg-pri); }
.gd-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: gdtoc; }
.gd-toc__list li { margin-bottom: var(--space-1); counter-increment: gdtoc; }
.gd-toc__list a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gd-toc__list a:hover { background: var(--color-soft); color: var(--hh-fg-pri); }
.gd-toc__list a.is-active { background: var(--color-primary-soft); color: var(--hh-fg-pri); font-weight: var(--fw-semibold); }
.gd-toc__list li:not(.gd-toc__tail) a::before { content: counter(gdtoc) "."; margin-right: var(--space-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--color-muted); }
.gd-toc__list i { color: var(--hh-fg-pri); }
.gd-toc__sep { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-line); }

/* Thẻ */
.gd-card {
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--nav-h) + var(--tt-trialbar-h, 0px) + var(--space-4));
}
.gd-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.gd-card__headtext { flex: 1; min-width: 0; }
.gd-card__ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-md); font-size: var(--fs-body); }
.gd-card__ico--primary { background: var(--color-primary-soft); color: var(--hh-fg-pri); }
.gd-card__ico--secondary { background: color-mix(in srgb, var(--color-secondary) 16%, transparent); color: var(--hh-fg-sec); }
.gd-card__ico--warn { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning-deep); }
.gd-card__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); color: var(--color-ink); }
.gd-card__count { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--hh-fg-pri); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: var(--lh-normal); }
.gd-card--examples .gd-card__count { background: color-mix(in srgb, var(--color-secondary) 16%, transparent); color: var(--hh-fg-sec); }
.gd-card--mistakes .gd-card__count { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning-deep); }
.gd-card__sub { margin: var(--space-1) 0 0; font-size: var(--fs-small); color: var(--color-muted); }

/* Khối minh hoạ đầu bài lý thuyết (thay hình SVG của NAVS) — từ infographic_json */
.gd-illus { margin: 0 0 var(--space-6); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); border-radius: var(--radius-md); background: var(--color-surface); }
.gd-illus__head { padding: var(--space-3) var(--space-4); background: var(--color-primary); color: var(--color-on-dark); font-size: var(--fs-body); font-weight: var(--fw-extrabold); line-height: var(--lh-normal); text-align: center; overflow-wrap: anywhere; }
.gd-illus__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--color-line); }
.gd-illus__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; padding: var(--space-5) var(--space-3); background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); text-align: center; }
.gd-illus__label { padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-secondary); color: var(--color-on-dark); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: var(--lh-normal); }
.gd-illus__formula { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--hh-fg-sec); overflow-wrap: anywhere; }
.gd-illus__zh { margin-top: var(--space-2); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-normal); color: var(--color-ink); overflow-wrap: anywhere; }
.gd-illus__zh .hgp-kw { font-weight: var(--fw-extrabold); color: var(--hh-fg-pri); }
.gd-illus__py { font-size: var(--fs-small); color: var(--color-accent-deep); overflow-wrap: anywhere; }
.gd-illus__vi { font-size: var(--fs-small); font-style: italic; color: var(--color-muted); overflow-wrap: anywhere; }

/* Công thức — dòng "phương trình" trong khung navy nhạt (markup từ hh_gd_formula_html) */
.gd-formula { padding: var(--space-5); border-left: 3px solid var(--color-secondary); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-secondary-soft) 70%, var(--color-surface)); }
.hgp-eq__form + .hgp-eq__form { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--color-secondary) 14%, transparent); }
.hgp-eq__or { margin: var(--space-3) 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--color-muted); }
.hgp-eq__or + .hgp-eq__form { margin-top: 0; padding-top: 0; border-top: 0; }
.hgp-eq__label { margin: 0 0 var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: var(--lh-normal); color: var(--hh-fg-sec); overflow-wrap: anywhere; }
.hgp-eq__row { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: var(--space-3); margin: 0; font-size: var(--fs-h2-mobile); line-height: var(--lh-normal); }
.hgp-eq__pair { display: inline-flex; align-items: flex-start; min-width: 0; max-width: 100%; }
.hgp-eq__tok { display: inline-flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.hgp-eq__txt { overflow-wrap: anywhere; }
.hgp-eq__tok--kw .hgp-eq__txt { font-weight: var(--fw-semibold); color: var(--hh-fg-sec); }
.hgp-eq__k { font-weight: var(--fw-extrabold); color: var(--hh-fg-pri); }
.hgp-eq__tok--kw.is-opt .hgp-eq__k { font-weight: var(--fw-semibold); }
.hgp-eq__tok--slot .hgp-eq__txt { padding: 0 var(--space-1); border-bottom: 2px solid color-mix(in srgb, var(--color-secondary) 35%, transparent); font-weight: var(--fw-semibold); color: var(--hh-fg-sec); }
.hgp-eq__p { font-weight: var(--fw-regular); color: var(--color-mute2); }
.hgp-eq__join { padding: 0 var(--space-3); font-weight: var(--fw-regular); color: var(--color-mute2); }
.hgp-eq__join--comma { padding: 0 var(--space-2) 0 0; }
.hgp-eq__ann { margin-top: var(--space-1); font-size: var(--fs-micro); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: color-mix(in srgb, var(--hh-fg-sec) 80%, var(--color-surface)); white-space: nowrap; }
.hgp-eq__ann--opt { color: var(--color-accent-deep); }
.hgp-eq__note { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px dashed color-mix(in srgb, var(--color-secondary) 25%, transparent); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-secondary-text); overflow-wrap: anywhere; }
.hgp-eq__raw { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-body); color: var(--color-ink); overflow-wrap: anywhere; }
.hgp-eq__raw .zh { color: var(--hh-fg-pri); }

/* Lý thuyết */
.gd-theory { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text); overflow-wrap: anywhere; }
.gd-theory p { margin: 0 0 var(--space-4); }
.gd-theory > :first-child { margin-top: 0; }
.gd-theory > :last-child { margin-bottom: 0; }
/* "## " → h3 = mục lớn (gạch chân đỏ, như .md-h2 NAVS) · "### " → h4 = mục con (vạch đỏ bên trái, như .md-h3) */
.gd-theory h3,
.gd-theory--plain h4 {
    position: relative;
    margin: var(--space-8) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary-soft);
    font-size: var(--fs-h4);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-normal);
    color: var(--color-ink);
    scroll-margin-top: calc(var(--nav-h) + var(--tt-trialbar-h, 0px) + var(--space-4));
}
.gd-theory h3::before,
.gd-theory--plain h4::before { content: ""; position: absolute; left: 0; bottom: -2px; width: var(--space-10); height: 2px; background: var(--color-primary); }
.gd-theory:not(.gd-theory--plain) h4,
.gd-theory h5 { position: relative; margin: var(--space-5) 0 var(--space-2); padding-left: var(--space-4); font-size: var(--fs-body); font-weight: var(--fw-extrabold); line-height: var(--lh-normal); color: var(--hh-fg-pri); }
.gd-theory:not(.gd-theory--plain) h4::before,
.gd-theory h5::before { content: ""; position: absolute; left: 0; top: var(--space-1); bottom: var(--space-1); width: var(--space-1); border-radius: var(--radius-sm); background: var(--color-primary); }
.gd-theory > h3:first-child,
.gd-theory > h4:first-child { margin-top: 0; }
.gd-theory ul { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-6); }
.gd-theory li { margin-bottom: var(--space-2); line-height: var(--lh-body); }
.gd-theory li::marker { color: var(--hh-fg-pri); }
.gd-theory strong { font-weight: var(--fw-extrabold); color: var(--hh-fg-pri); }
.gd-theory em { font-style: italic; color: var(--color-text); }
.gd-theory del { color: var(--color-muted); }
.gd-theory code { padding: 0 var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-soft); color: var(--color-accent-deep); font-family: var(--font-mono); font-size: var(--fs-small); }
.gd-theory .cv-zh { font-weight: var(--fw-semibold); color: var(--hh-fg-pri); }
.gd-theory blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-primary-soft); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-ink); }
.gd-theory .md-table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.gd-theory .md-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-body); }
.gd-theory .md-table th,
.gd-theory .md-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.gd-theory .md-table th { background: var(--color-primary-soft); font-size: var(--fs-micro); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary-deep); }
.gd-theory .md-table tr:last-child td { border-bottom: 0; }
.gd-theory .hh-gd-note--tip { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-primary-soft); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); }
.gd-theory .hh-gd-note--tip p,
.gd-theory .hh-gd-note--tip ul { margin: 0; }

/* Ví dụ */
.gd-ex-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
.gd-tool {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--btn-h-md);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--hh-fg-pri);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gd-tool:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-dark); transform: translateY(-1px); }
.gd-tool[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-dark); }
.gd-tool:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.gd-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.gd-ex {
    display: flex;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    border-left: 3px solid var(--color-secondary);
    border-radius: var(--radius-md);
    background: var(--color-soft);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.gd-ex:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gd-ex.is-playing { border-left-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); box-shadow: var(--shadow-md); }
.gd-ex__play {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--btn-h-md);
    height: var(--btn-h-md);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-secondary);
    color: var(--color-on-dark);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gd-ex__play:hover { background: var(--color-secondary-hover); transform: scale(1.06); }
.gd-ex__play[aria-pressed="true"] { background: var(--color-primary); }
.gd-ex__play:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gd-ex__body { flex: 1; min-width: 0; }
.gd-ex__zh { margin-bottom: var(--space-1); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--color-ink); overflow-wrap: anywhere; }
.gd-ex__zh .hgp-kw { font-weight: var(--fw-extrabold); color: var(--hh-fg-pri); }
.gd-ex__py { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-accent-deep); overflow-wrap: anywhere; }
.gd-ex__vi { margin-top: var(--space-1); font-size: var(--fs-small); font-style: italic; line-height: var(--lh-normal); color: var(--color-muted); overflow-wrap: anywhere; }
.gd-ex__why { display: flex; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-soft); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text); overflow-wrap: anywhere; }
.gd-ex__why i { flex-shrink: 0; margin-top: var(--space-1); font-size: var(--fs-micro); color: var(--hh-fg-pri); }
.gd-ex__why .zh { font-weight: var(--fw-bold); color: var(--color-primary-deep); }
.gd-ex__reveal {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--btn-h-sm);
    padding: 0 var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-muted);
    font: inherit;
    font-size: var(--fs-micro);
    font-style: normal;
    font-weight: var(--fw-semibold);
    cursor: pointer;
}
.gd-ex__reveal:hover { border-color: var(--color-primary); color: var(--hh-fg-pri); }
[data-hide-py="1"] .gd-ex__py:not(.is-revealed) .gd-ex__ans,
[data-hide-vi="1"] .gd-ex__vi:not(.is-revealed) .gd-ex__ans { display: none; }
[data-hide-py="1"] .gd-ex__py:not(.is-revealed) .gd-ex__reveal,
[data-hide-vi="1"] .gd-ex__vi:not(.is-revealed) .gd-ex__reveal { display: inline-flex; }

/* Lưu ý quan trọng (các đoạn ⚠ của giải thích) — mẫu "Lỗi thường gặp" */
.gd-mistakes { display: flex; flex-direction: column; gap: var(--space-3); }
.gd-mk { display: flex; gap: var(--space-4); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-warning) 4%, var(--color-surface)); }
.gd-mk__num { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-sm); background: var(--color-warning-deep); color: var(--hh-on-deep); font-size: var(--fs-micro); font-weight: var(--fw-extrabold); }
.gd-mk__body { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); overflow-wrap: anywhere; font-variant-emoji: text; }
.gd-mk__body p { margin: 0 0 var(--space-2); font-weight: var(--fw-semibold); color: var(--color-ink); }
.gd-mk__body ul { margin: 0; padding-left: var(--space-5); }
.gd-mk__body li { margin-bottom: var(--space-1); }
.gd-mk__body li::marker { color: var(--color-warning-deep); }
.gd-mk__body .cv-zh { font-weight: var(--fw-semibold); color: var(--hh-fg-pri); }
.gd-mk__body > :last-child { margin-bottom: 0; }
.gd-mk__rows { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gd-mk__row { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-body); line-height: var(--lh-normal); }
.gd-mk__tag { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: var(--space-1); min-width: var(--space-16); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-wide); white-space: nowrap; }
.gd-mk__tag--wrong { background: color-mix(in srgb, var(--color-warning) 22%, transparent); color: var(--color-warning-deep); }
.gd-mk__tag--right { background: color-mix(in srgb, var(--color-secondary) 16%, transparent); color: var(--hh-fg-sec); }
.gd-mk__text { flex: 1; min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }
.gd-mk__row--wrong .gd-mk__text { text-decoration: line-through; opacity: .75; }
.gd-mk__row--right .gd-mk__text { font-weight: var(--fw-semibold); color: var(--color-ink); }
.gd-mk__py { display: block; font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--color-accent-deep); }
.gd-mk__note { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px dashed var(--color-line); font-size: var(--fs-small); font-style: italic; line-height: var(--lh-normal); color: var(--color-muted); overflow-wrap: anywhere; }
.gd-mk__note i { margin-right: var(--space-1); color: var(--hh-fg-pri); }
.gd-mk__note .zh { font-style: normal; font-weight: var(--fw-semibold); color: var(--hh-fg-pri); }

/* Luyện sắp xếp câu (khối thanh → mở bài tập ngay tại chỗ) */
.gd-practice {
    margin: var(--space-5) 0 var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--color-secondary) 40%, var(--color-border));
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface)) 0%,
        color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)) 100%);
}
.gd-practice__intro { display: flex; align-items: center; gap: var(--space-4); }
.gd-practice__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-md); background: var(--color-secondary); color: var(--color-on-dark); font-size: var(--fs-h3); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--color-secondary) 50%, transparent); }
.gd-practice__body { flex: 1; min-width: 0; }
.gd-practice__title { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-extrabold); line-height: var(--lh-normal); color: var(--color-ink); }
.gd-practice__sub { margin-top: var(--space-1); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-muted); }
.gd-practice__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--btn-h-md);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-secondary);
    color: var(--color-on-dark);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-extrabold);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gd-practice__btn:hover { background: var(--color-secondary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.gd-practice__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.gd-quiz__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); font-size: var(--fs-small); color: var(--color-secondary-text); }
.gd-quiz__count b, .gd-quiz__score b { font-weight: var(--fw-extrabold); color: var(--color-ink); }
.gd-quiz__score i { color: var(--color-correct); }
.gd-quiz__exit { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--btn-h-sm); margin-left: auto; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-muted); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.gd-quiz__exit:hover { background: var(--color-surface); color: var(--color-ink); }
.gd-quiz__exit:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gd-quiz__prompt { margin: 0 0 var(--space-4); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--color-ink); overflow-wrap: anywhere; }
.gd-quiz__label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-micro); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--hh-fg-sec); }
.gd-quiz__answer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: calc(var(--btn-h-lg) + var(--space-5));
    padding: var(--space-3);
    border: 2px dashed color-mix(in srgb, var(--color-secondary) 35%, var(--color-border));
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.gd-quiz__answer.is-correct { border-style: solid; border-color: var(--color-correct); background: var(--color-correct-soft); }
.gd-quiz__answer.is-wrong { border-style: solid; border-color: var(--color-incorrect); background: var(--color-incorrect-soft); }
.gd-quiz__placeholder { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-muted); }
.gd-quiz__bank { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: var(--btn-h-lg); margin: var(--space-4) 0; }
.gd-tile {
    min-height: var(--btn-h-lg);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-bottom-width: 3px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gd-tile:hover:not(:disabled) { border-color: var(--color-primary); color: var(--hh-fg-pri); transform: translateY(-1px); }
.gd-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gd-tile:disabled { cursor: default; }
.gd-quiz__answer .gd-tile { border-color: color-mix(in srgb, var(--color-secondary) 40%, var(--color-border)); color: var(--hh-fg-sec); }
.gd-quiz__feedback { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); }
.gd-quiz__verdict { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-extrabold); }
.gd-quiz__verdict.is-correct { color: var(--color-correct-deep); }
.gd-quiz__verdict.is-wrong { color: var(--hh-fg-bad); }
.gd-quiz__sol { display: flex; align-items: flex-start; gap: var(--space-3); }
.gd-quiz__play { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--btn-h-md); height: var(--btn-h-md); padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-secondary); color: var(--color-on-dark); font-size: var(--fs-small); cursor: pointer; }
.gd-quiz__play:hover { background: var(--color-secondary-hover); }
.gd-quiz__play:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gd-quiz__solbody { min-width: 0; }
.gd-quiz__zh { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-normal); color: var(--color-ink); overflow-wrap: anywhere; }
.gd-quiz__py { font-size: var(--fs-small); color: var(--color-accent-deep); overflow-wrap: anywhere; }
.gd-quiz__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.gd-quiz__actions--center { justify-content: center; }
.gd-quiz__result { padding: var(--space-4) 0; text-align: center; }
.gd-quiz__result-icon { display: flex; align-items: center; justify-content: center; width: var(--space-16); height: var(--space-16); margin: 0 auto var(--space-3); border-radius: var(--radius-pill); background: var(--color-warning-soft); color: var(--color-warning); font-size: var(--fs-h2-desktop); }
.gd-quiz__result-title { margin: 0 0 var(--space-1); font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--color-ink); }
.gd-quiz__result-title b { color: var(--hh-fg-pri); }
.gd-quiz__result-sub { margin: 0 0 var(--space-4); font-size: var(--fs-body); color: var(--color-secondary-text); }

/* Điểm trước / sau */
/* Chủ dự án 15/09: các nút dàn hết bề ngang, chia đều nhau, rộng bằng khối Luyện sắp xếp câu phía trên */
.gd-next { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--space-3); margin-top: var(--space-5); }
.gd-next__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-width: 0;
    min-height: var(--btn-h-lg);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gd-next__btn:hover { border-color: var(--color-primary); color: var(--hh-fg-pri); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.gd-next__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gd-next__txt { display: flex; flex-direction: column; min-width: 0; text-align: center; }
.gd-next__lbl { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--color-muted); }
.gd-next__name { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink); }
.gd-next__btn--next { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.gd-next__btn--next .gd-next__lbl { color: var(--hh-fg-pri); }
/* 15/09 chủ dự án chê "mờ nhạt" → nút ĐẬM: "Điểm tiếp theo" nền đỏ đặc chữ trắng; các nút còn lại nền navy nhạt, viền navy, chữ navy đậm */
.gd-next .gd-next__btn {
    border: 2px solid color-mix(in srgb, var(--color-secondary) 35%, var(--color-border));
    background: var(--color-secondary-soft);
    color: var(--hh-fg-sec);
    min-height: var(--btn-h-md);
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    box-shadow: var(--shadow-sm);
}
.gd-next .gd-next__btn i { font-size: var(--fs-small); }
.gd-next .gd-next__btn:hover { border-color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface)); color: var(--hh-fg-sec); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.gd-next .gd-next__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gd-next .gd-next__lbl { font-size: var(--fs-micro); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: color-mix(in srgb, var(--color-secondary) 75%, var(--color-surface)); }
.gd-next .gd-next__name { font-size: var(--fs-small); font-weight: var(--fw-extrabold); line-height: var(--lh-normal); color: var(--hh-fg-sec); }
.gd-next .gd-next__btn--next { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-dark); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--color-primary) 60%, transparent); }
.gd-next .gd-next__btn--next:hover { border-color: var(--color-primary-hover); background: var(--color-primary-hover); color: var(--color-on-dark); }
.gd-next .gd-next__btn--next .gd-next__lbl { color: color-mix(in srgb, var(--color-on-dark) 85%, transparent); }
.gd-next .gd-next__btn--next .gd-next__name { color: var(--color-on-dark); }

/* Chưa mở khoá */
.gd-lock { padding: var(--space-6) var(--space-5); text-align: center; }
.gd-lock__icon { display: flex; align-items: center; justify-content: center; width: calc(var(--space-12) + var(--space-2)); height: calc(var(--space-12) + var(--space-2)); margin: 0 auto var(--space-3); border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--hh-fg-pri); font-size: var(--fs-h3); }
.gd-lock__title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--color-ink); }
.gd-lock__desc { max-width: 560px; margin: 0 auto var(--space-4); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); overflow-wrap: anywhere; }
.gd-lock__desc strong { color: var(--color-ink); }
.gd-lock__list { display: inline-flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; text-align: left; font-size: var(--fs-small); color: var(--color-secondary-text); }
.gd-lock__list i { width: var(--space-5); margin-right: var(--space-2); text-align: center; color: var(--hh-fg-pri); }
.gd-lock__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.gd-lock__ctas .ui-alert { margin: 0; text-align: left; }

/* Nút trước/sau của trang CHỦ ĐỀ mang tên chủ đề → cho xuống dòng, cao theo nội dung */
.hh-tnav .btn {
    max-width: 100%;
    height: auto;
    min-height: var(--btn-h-md);
    padding-block: var(--space-2);
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
    .gd-grid { grid-template-columns: minmax(0, 1fr); }
    .gd-toc { display: none; }
}
@media (max-width: 720px) {
    .gd-hero { padding: var(--space-5) 0 var(--space-4); }
    .gd-hero__head { flex-direction: column; gap: var(--space-3); }
    .gd-hero__icon { width: calc(var(--space-12) + var(--space-2)); height: calc(var(--space-12) + var(--space-2)); font-size: var(--fs-h3); }
    .gd-title { font-size: var(--fs-h2-mobile); }
    .gd-card { padding: var(--space-4); }
    .gd-card__title { font-size: var(--fs-body); }
    .gd-ex-tools { width: 100%; margin-left: 0; }
    .gd-tool { flex: 1 1 auto; justify-content: center; padding: 0 var(--space-3); }
    .gd-examples { grid-template-columns: minmax(0, 1fr); }
    .gd-formula { padding: var(--space-4); }
    .hgp-eq__row { font-size: var(--fs-h3); }
    .hgp-eq__join { padding: 0 var(--space-2); }
    .gd-theory { font-size: var(--fs-body); }
    .gd-mk { flex-direction: column; gap: var(--space-2); }
    .gd-mk__num { align-self: flex-start; width: auto; height: var(--space-6); padding: 0 var(--space-3); }
    .gd-practice__intro { flex-direction: column; text-align: center; }
    .gd-practice__btn { width: 100%; justify-content: center; }
    .gd-tile { padding: 0 var(--space-3); }
    .gd-quiz__actions .btn { flex: 1 1 auto; justify-content: center; }
    .gd-next { grid-auto-flow: row; }
    .gd-next__btn--next { order: -1; }
}

/* ── Trang con: từ vựng theo chủ đề (/hsk/tu-vung) ──────────────────────────────
   Thiết kế lại 15/09/2026 — chủ dự án chê "chữ Việt quá đậm, dòng nhìn quá trống", GIỮ cấu trúc danh sách
   (danh sách dọc, một bộ một dòng). Theme ép body dùng font hệ thống: 700 = Segoe UI Bold trên Windows
   → chữ ở đây dừng ở semibold. Dòng thêm ô số thứ tự + thanh "đã thuộc" kéo dài (.hh-status dùng chung với /hsk). */

/* Thẻ tiến độ cả cấp + nút vào bộ nên học tiếp */
.hh-vsum {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-8);
}
.hh-vsum__body {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.hh-vsum__line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
}
.hh-vsum__num {
    font-size: var(--fs-h2-desktop);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}
.hh-vsum__of { font-size: var(--fs-small); color: var(--color-muted); }
.hh-vsum__bar { max-width: none; }            /* .hh-bar gốc giới hạn 240px cho thẻ ở /hsk */
.hh-vsum__meta { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
.hh-vsum__meta b { font-weight: var(--fw-semibold); color: var(--color-text); }
.hh-vsum__cta { flex-shrink: 0; font-weight: var(--fw-semibold); }

/* Danh sách bộ */
.hh-vsec__title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
}
.hh-vlist {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hh-vset {
    display: grid;
    grid-template-columns: var(--space-10) minmax(0, 1fr) minmax(0, 0.8fr) auto;
    grid-template-areas: "num main prog go";
    align-items: center;
    column-gap: var(--space-6);
    row-gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    color: inherit;
    text-decoration: none;
}
.hh-vset:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.hh-vset__num {
    grid-area: num;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    background: var(--color-soft);
    color: var(--color-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}
.hh-vset.is-progress .hh-vset__num { background: var(--color-primary-soft); color: var(--color-primary-deep); }
.hh-vset.is-done .hh-vset__num     { background: var(--color-correct-soft); color: var(--color-correct-deep); }

.hh-vset__main {
    grid-area: main;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.hh-vset__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
    overflow-wrap: anywhere;
}
.hh-vset__meta { font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--color-muted); }

/* Tiến độ thuộc từ của bộ: thanh kéo dài lấp khoảng giữa dòng.
   ⛔ Không hiện từ vựng (chữ Hán mẫu) trên dòng — chủ dự án đã bác 15/09/2026. */
.hh-vset__prog { grid-area: prog; min-width: 0; display: flex; }
.hh-vset__prog .hh-bar { max-width: none; }      /* .hh-bar gốc tối đa 240px cho thẻ ở /hsk */
.hh-vset__go {
    grid-area: go;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: var(--space-20);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--hh-fg-pri);
    white-space: nowrap;
}
.hh-vset__go i { font-size: var(--fs-micro); transition: transform var(--dur-fast) var(--ease); }
.hh-vset:hover .hh-vset__go i { transform: translateX(3px); }

/* Máy tính bảng: bớt khoảng cách giữa các cột */
@media (max-width: 991.98px) {
    .hh-vset { column-gap: var(--space-4); }
}
/* Điện thoại: hàng 1 = số + tên bộ + Học; hàng 2 = trạng thái + thanh tiến độ */
@media (max-width: 640px) {
    .hh-vsum { gap: var(--space-4); padding: var(--space-4); margin-bottom: var(--space-6); }
    .hh-vsum__num { font-size: var(--fs-h2-mobile); }
    .hh-vsum__cta { width: 100%; }
    .hh-vset {
        grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
        grid-template-areas:
            "num main go"
            ".   prog prog";
        column-gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
    .hh-vset__num { align-self: start; }
    .hh-vset__go { min-width: 0; }
    /* chữ trạng thái + thanh tiến độ chung một hàng cho dòng đỡ cao */
    .hh-vset__prog .hh-status { flex-direction: row; align-items: center; gap: var(--space-3); }
    .hh-vset__prog .hh-status__txt { flex-shrink: 0; }
    .hh-vset__prog .hh-bar { flex: 1; }
}

/* ── Luyện nghe HSK (/hsk/luyen-nghe) — thêm 15/09/2026 (sếp: KHÔNG chuyển sang Shadowing; theo chủ đề; nghe + chép chính tả)
   Trang danh sách dùng lại .hh-vsum + .hh-vlist/.hh-vset của /hsk/tu-vung (đã duyệt). Trang bài dùng lại .gd-tool,
   .gd-practice, .gd-next của trang điểm ngữ pháp (đã duyệt). Dưới đây chỉ phần riêng: tiêu đề chủ đề + danh sách câu nghe.
   ⚠ LUẬT B: không line-clamp / ellipsis lên lời thoại; ẩn pinyin/nghĩa chỉ khi học viên bấm. */
.hl-topic { margin-top: var(--space-6); scroll-margin-top: calc(var(--nav-h) + var(--tt-trialbar-h, 0px) + var(--space-4)); }
.hl-topic__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.hl-topic__title { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--color-ink); }
.hl-topic__meta { margin: var(--space-1) 0 0; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-muted); }

.hl-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hl-player { margin-bottom: var(--space-5); padding: var(--space-5); }
.hl-player__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}
.hl-player__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--color-ink); }
.hl-player__title i { color: var(--hh-fg-pri); }
.hl-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hl-lines { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hl-line {
    display: grid;
    grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hl-line.is-b { background: color-mix(in srgb, var(--color-secondary-soft) 55%, var(--color-surface)); }
.hl-line.is-playing { border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
.hl-line__av {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--hh-fg-pri);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}
.hl-line.is-b .hl-line__av { background: var(--color-secondary-soft); color: var(--hh-fg-sec); }
.hl-line__body { min-width: 0; }
.hl-line__name { font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-muted); }
.hl-line__zh { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-normal); color: var(--color-ink); overflow-wrap: anywhere; }
.hl-line__py { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-accent-deep); overflow-wrap: anywhere; }
.hl-line__vi { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-secondary-text); overflow-wrap: anywhere; }
.hl-line__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-h-md);
    height: var(--btn-h-md);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--hh-fg-sec);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hl-line__play:hover,
.hl-line__play[aria-pressed="true"] { background: var(--color-secondary); color: var(--color-on-dark); }
.hl-line__play:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hl-lines[data-hide-py="1"] .hl-line__py,
.hl-lines[data-hide-vi="1"] .hl-line__vi { display: none; }
.hl-dict { margin-top: 0; }
@media (max-width: 640px) {
    .hl-player { padding: var(--space-4); }
    .hl-line { grid-template-columns: var(--space-8) minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-3); }
    .hl-line__av { width: var(--space-8); height: var(--space-8); }
    .hl-tools .gd-tool { flex: 1 1 auto; justify-content: center; }
}

/* ═══ /hsk khung NAVS v3 (24/10/2026, đợt H1): dải chọn cấp trên dải màu + ô "Luyện thêm" chưa mở ═══ */
.hb-lv { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hb-lv__i {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 84px; padding: 7px 12px;
    border-radius: 12px; border: 1px solid var(--lv-line-d); background: var(--lv-glass); color: var(--lv-on-2);
    text-decoration: none; transition: background var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease);
}
.hb-lv__i b { font-size: 14px; font-weight: 700; color: var(--lv-on); }
.hb-lv__i small { font-size: 11.5px; color: var(--lv-on-3); }
.hb-lv__i:hover { background: var(--lv-glass-2); color: var(--lv-on); text-decoration: none; }
.hb-lv__i.is-on { background: var(--lv-on); border-color: var(--lv-on); }
.hb-lv__i.is-on b { color: var(--lv-deep-ink);   /* nền trắng cố định ⇒ chữ không lật (lv-ink sáng lên ở nền tối) */ }
.hb-lv__i.is-on small { color: color-mix(in srgb, var(--lv-deep-ink) 72%, var(--lv-on)); }
.hb-lv__i:focus-visible { outline: 2px solid var(--lv-on); outline-offset: 2px; }
.hb--hsk .hb-body > .hh-note { margin-top: 14px; }
.hb-tool.is-off { opacity: .62; cursor: default; }
.hb-tool b .lv-chip { margin-left: 4px; font-style: normal; vertical-align: 1px; }
@media (max-width: 640px) {
    .hb-lv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hb-lv__i { min-width: 0; }
}