/* ═══════════════════════════════════════════════════════════════════════════
   luong-tu.css — Sản phẩm "50+ Lượng từ trong tiếng Trung" (Khám phá, miễn phí)
   Dùng cho: public/luong-tu.php · luong-tu-ly-thuyet.php · luong-tu-luyen-tap.php

   PHẦN A chép nguyên tinh thần lớp .cv-* của trang lý thuyết bài học
   (public/learn-chapter.php) để trang lý thuyết lượng từ trông GIỐNG HỆT trang
   /learn/{sach}/{bai}/theory — yêu cầu chủ dự án 24/08/2026.
   ⚠ learn-chapter.php để CSS trong <style> nội trang; đổi giao diện lý thuyết ở đó
     thì sửa cả file này cho khỏi lệch. Không đụng vào learn-chapter.php (file nóng,
     2 dev cùng deploy — xem .claude/rules/deploy.md).
   Chỉ dùng token, không hex hardcode (docs/design-system.md).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Khung trang lý thuyết (theo .cv-* của learn-chapter.php) ─────────── */
.cv-wrap { max-width: 960px; margin: 0 auto; padding: var(--space-4) var(--space-3) var(--space-10); }

/* Thanh trên cùng .rm-focus-bar — CHÉP từ trang lý thuyết bài học (public/learn-chapter.php):
   dính trên, trải hết bề ngang, nút quay lại đỏ đặc + tên bài 2 dòng.
   Khác bản gốc đúng 1 điểm: KHÔNG có nút phụ bên phải (chủ dự án chốt 24/08/2026). */
.rm-focus-bar { position: sticky; top: var(--tt-trialbar-h, 0px); z-index: 50;
    display: flex; align-items: center; gap: 16px; padding: 12px 20px;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.rm-focus-bar__back { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
    background: var(--color-primary); color: var(--color-on-dark); border-radius: 10px;
    font-weight: var(--fw-bold); font-size: 13.5px; text-decoration: none;
    white-space: nowrap; transition: background .15s; }
.rm-focus-bar__back:hover { background: var(--color-primary-hover); color: var(--color-on-dark); }
/* Tên bài dài thì XUỐNG DÒNG — không cắt bằng ellipsis (luật nội dung P0) */
.rm-focus-bar__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-focus-bar__lesson { color: var(--color-ink); font-size: var(--fs-body); font-weight: var(--fw-bold);
    line-height: var(--lh-tight); overflow-wrap: anywhere; }
.rm-focus-bar__ctx { color: var(--color-muted); font-size: var(--fs-small); font-weight: var(--fw-medium);
    line-height: var(--lh-tight); overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .rm-focus-bar { gap: var(--space-2); padding: var(--space-2) var(--space-3); flex-wrap: wrap; }
}

/* Mục lý thuyết thường */
.cv-section { background: var(--color-surface); border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
    border: 1px solid var(--color-border); }
.cv-section__title { font-size: 1.15rem; font-weight: var(--fw-bold); color: var(--color-text);
    margin-bottom: var(--space-3); display: flex; gap: var(--space-2); align-items: center; }

/* Nội dung markdown (md_lite) */
.cv-md { line-height: 1.7; }
.cv-md > *:first-child { margin-top: 0; }
.cv-md p { margin: 0 0 var(--space-3); }
.cv-md ul { margin: 0 0 var(--space-3) var(--space-4); padding: 0; }
.cv-md li { margin-bottom: 4px; }
.cv-md ul li::marker { color: var(--color-primary); }
.cv-md strong { color: var(--color-ink); font-weight: var(--fw-bold); }
.cv-md em { font-style: italic; color: var(--color-accent-deep); font-weight: var(--fw-semibold); }
.cv-md del { color: var(--color-muted); }
.cv-md code { font-family: var(--font-mono); font-size: .92em; background: var(--color-soft);
    padding: 1px 6px; border-radius: 6px; }
.cv-md .cv-zh { color: var(--color-primary); font-weight: var(--fw-semibold); }
.cv-md h3 { font-size: 1.14rem; font-weight: var(--fw-extrabold); color: var(--color-primary-deep);
    margin: var(--space-4) 0 var(--space-2); padding-left: 11px;
    border-left: 4px solid var(--color-primary); line-height: 1.35; }
.cv-md h4 { font-size: 1.02rem; font-weight: var(--fw-bold); color: var(--color-accent-deep);
    margin: var(--space-3) 0 var(--space-2); }
.cv-md blockquote { margin: 0 0 var(--space-3); padding: 11px 15px;
    border-left: 4px solid var(--color-accent); background: var(--color-accent-soft);
    border-radius: 0 10px 10px 0; color: var(--color-ink); }
.cv-md blockquote .cv-zh { color: var(--color-accent-deep); }
/* Bảng viết bằng markdown trong nội dung phải nhìn Y HỆT bảng .dt của trang bài học —
   cùng viền, cùng nền header, cùng cỡ chữ. Hai kiểu bảng khác nhau trên một trang là lộ ngay. */
.cv-md .md-table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); -webkit-overflow-scrolling: touch; }
.cv-md .md-table { border-collapse: collapse; width: 100%; background: var(--color-surface);
    font-size: .94rem; line-height: 1.55; }
.cv-md .md-table th, .cv-md .md-table td { border: 1px solid var(--color-border);
    padding: 10px 12px; text-align: left; vertical-align: middle; }
.cv-md .md-table th { background: var(--color-soft); font-weight: var(--fw-bold);
    color: var(--color-ink); white-space: nowrap; text-align: center; }
/* Cột đầu của bảng nội dung thường là chữ Hán / cụm mẫu → to và đậm như cột đầu bảng .dt */
.cv-md .md-table td:first-child { text-align: center; font-weight: var(--fw-bold);
    color: var(--color-ink); font-size: 1.06rem; white-space: nowrap; }
.cv-md .md-table td:first-child .cv-zh { color: var(--color-ink); font-size: 1.2rem; }

/* ── B. Trang sản phẩm /luong-tu ─────────────────────────────────────────── */
.lt-page { max-width: 960px; margin: 0 auto; padding: var(--space-4) var(--space-3) var(--space-10); }
.lt-back { display: inline-flex; align-items: center; gap: 6px; margin: var(--space-3) 0;
    font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-muted);
    text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.lt-back:hover { color: var(--color-primary); }

/* Banner sản phẩm — chữ 量 chìm làm nền, giống ngôn ngữ bìa thẻ .fc-card */
.lt-hero { position: relative; overflow: hidden; border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    background: linear-gradient(140deg, var(--color-primary),
        color-mix(in srgb, var(--color-primary) 55%, var(--color-inverse-surface)));
    color: var(--color-on-dark); margin-bottom: var(--space-5); }
/* Chữ 量 làm nền. ⚠ 260px + right:-2% làm chữ bị cắt cụt thành mấy thanh chữ nhật ở mép phải
   (nhìn rõ trên desktop) — hạ cỡ và kéo vào trong để thấy trọn nét. */
.lt-hero::after { content: "量"; position: absolute; right: var(--space-5); top: 50%; transform: translateY(-50%);
    font-family: var(--font-cjk); font-size: 150px; line-height: 1; font-weight: var(--fw-extrabold);
    color: color-mix(in srgb, var(--color-on-dark) 12%, transparent); pointer-events: none; }
.lt-hero > * { position: relative; z-index: 1; }
/* Banner chỉ còn tiêu đề + đoạn dẫn (chủ dự án chốt 24/08/2026: bỏ huy hiệu + dải số liệu).
   ⚠ --fs-h1 KHÔNG tồn tại trong design-tokens.css (chỉ có --fs-h1-desktop/-mobile) → khai báo
   hỏng, tiêu đề rơi về cỡ kế thừa nên chỉ nhỉnh hơn đoạn dẫn. */
.lt-hero__title { margin: 0 0 var(--space-3); font-size: var(--fs-h1-desktop);
    line-height: var(--lh-tight); color: var(--color-on-dark); }
@media (max-width: 768px) { .lt-hero__title { font-size: var(--fs-h1-mobile); } }
.lt-hero__lead { margin: 0; max-width: 56ch; line-height: var(--lh-body);
    color: color-mix(in srgb, var(--color-on-dark) 88%, transparent); }

/* 2 thẻ bên trong: Lý thuyết · Luyện tập */
.lt-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 760px) { .lt-two { grid-template-columns: 1fr; } }
.lt-big { display: flex; flex-direction: column; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease);
    --lt-tone: var(--color-primary); --lt-tone-deep: var(--color-primary-deep);
    --lt-tone-soft: var(--color-primary-soft); }
.lt-big--practice { --lt-tone: var(--color-secondary); --lt-tone-deep: var(--color-secondary-deep);
    --lt-tone-soft: var(--color-secondary-soft); }
.lt-big:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--lt-tone); }
/* Thẻ là <a> nhưng trước đây không có vòng focus — đi bằng bàn phím không biết đang ở đâu. */
.lt-big:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.lt-big__cover { position: relative; height: 140px; display: flex; align-items: center; justify-content: center;
    gap: var(--space-4); overflow: hidden;
    background: linear-gradient(140deg, var(--lt-tone),
        color-mix(in srgb, var(--lt-tone) 55%, var(--color-inverse-surface))); }
.lt-big__cover::after { content: ""; position: absolute; right: -16%; bottom: -52%; width: 72%;
    aspect-ratio: 1; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-on-dark) 10%, transparent); pointer-events: none; }
/* Số bước khổ lớn — thứ tự 1 → 2 phải đọc được ngay, không núp trong cái nhãn nhỏ ở góc */
.lt-big__num { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
    line-height: 1; color: var(--color-on-dark); }
.lt-big__num small { font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase;
    letter-spacing: var(--tracking-wide); margin-bottom: 2px;
    color: color-mix(in srgb, var(--color-on-dark) 72%, transparent); }
.lt-big__num b { font-size: 44px; font-weight: var(--fw-extrabold); line-height: .9; }
.lt-big__sep { position: relative; z-index: 1; flex: 0 0 1px; width: 1px; height: 56px;
    background: color-mix(in srgb, var(--color-on-dark) 28%, transparent); }
.lt-big__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.lt-big__title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); font-weight: var(--fw-extrabold);
    color: var(--color-ink); }
.lt-big__desc { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--color-muted);
    line-height: var(--lh-body); }
.lt-big__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.lt-big__list li { display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: var(--fs-body); color: var(--color-text); }
.lt-big__list b { color: var(--color-ink); font-weight: var(--fw-bold); }
/* Dấu ✓ thành huy hiệu tròn cho ra hàng lối, thay vì icon trần lửng lơ */
.lt-big__list i { display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: var(--radius-pill); font-size: 9px; margin-top: 2px;
    flex-shrink: 0; background: var(--lt-tone-soft); color: var(--lt-tone-deep); }
.lt-big__cta { margin-top: auto; }

/* ── Hoạ tiết công thức trên bìa 2 thẻ: 两 [张] 纸 · 一 [?] 茶 ──────────────────
 * Cùng ngôn ngữ hình với bìa thẻ ở Khám phá (folder-card.css). Chép lại chứ không tách file
 * riêng: hai trang không bao giờ nạp chung CSS nên không đụng cascade, mà tránh đẻ thêm file
 * dễ quên khi deploy (dự án không dùng git).
 */
.mwf { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, auto);
    justify-items: center; align-items: center; gap: 6px var(--space-2); pointer-events: none; }
.mwf__t { width: var(--mwf-t); height: var(--mwf-t);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-cjk); font-size: var(--mwf-fs); font-weight: var(--fw-bold); line-height: 1;
    color: var(--color-on-dark);
    background: color-mix(in srgb, var(--color-on-dark) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-on-dark) 30%, transparent);
    border-radius: var(--radius-md);
    transition: transform var(--dur-base) var(--ease); }
.mwf__t--key { width: var(--mwf-key); height: var(--mwf-key); font-size: var(--mwf-key-fs);
    color: var(--lt-tone-deep); background: var(--color-surface);
    border-color: transparent; box-shadow: var(--shadow-sm); }
/* Ô trống của Bước 2: nét đứt = "điền vào đây" */
.mwf__t--blank { position: relative; background: color-mix(in srgb, var(--color-on-dark) 8%, transparent);
    border: 2px dashed color-mix(in srgb, var(--color-on-dark) 55%, transparent); box-shadow: none; }
.mwf__q, .mwf__a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    transition: opacity var(--dur-base) var(--ease); }
.mwf__q { font-family: var(--font-sans); font-weight: var(--fw-extrabold);
    color: color-mix(in srgb, var(--color-on-dark) 80%, transparent); }
.mwf__a { opacity: 0; font-family: var(--font-cjk); font-weight: var(--fw-bold); color: var(--color-on-dark); }
@media (hover: hover) {
    .lt-big:hover .mwf__q { opacity: 0; }
    .lt-big:hover .mwf__a { opacity: 1; }
}
.mwf__cap { font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1;
    color: color-mix(in srgb, var(--color-on-dark) 85%, transparent); }
.mwf__cap--wide { grid-column: 1 / -1; }
.mwf--lg { --mwf-t: 48px; --mwf-key: 56px; --mwf-fs: 26px; --mwf-key-fs: 30px; }
.lt-big:hover .mwf__t--key { transform: translateY(-2px) scale(1.06); }

/* Modal chọn số câu luyện tập (khung dùng .ui-modal của ui-components.css) */
.lt-modal__lead { margin: 0 0 var(--space-4); color: var(--color-muted); font-size: var(--fs-small); }
.lt-modal__lead b { color: var(--color-ink); }
.lt-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.lt-count {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: var(--space-3) var(--space-2);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    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);
}
.lt-count b { font-size: var(--fs-h4); line-height: 1; font-weight: var(--fw-extrabold); }
.lt-count span { font-size: var(--fs-micro); color: var(--color-muted); }
.lt-count:hover, .lt-count:focus-visible {
    border-color: var(--color-primary); background: var(--color-primary);
    color: var(--color-on-dark); outline: none;
}
.lt-count:hover span, .lt-count:focus-visible span { color: color-mix(in srgb, var(--color-on-dark) 80%, transparent); }
/* Bước 2 — chọn kiểu làm bài. Hai lựa chọn NGANG HÀNG nhau, không cái nào là "phụ":
   trước đây trắc nghiệm chỉ là một dòng chữ nhỏ nên gần như không ai thấy. */
.lt-modes2 { display: grid; gap: var(--space-2); }
.lt-mode2 {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    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);
}
.lt-mode2 > i {
    width: 34px; height: 34px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft); color: var(--color-primary); font-size: 14px;
}
.lt-mode2 b { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); }
.lt-mode2 span span { display: block; font-size: var(--fs-micro); color: var(--color-muted); margin-top: 2px; }
.lt-mode2:hover, .lt-mode2:focus-visible {
    border-color: var(--color-primary); background: var(--color-primary-soft); outline: none;
}
.lt-modal__back {
    display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4);
    padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit;
    font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-muted);
}
.lt-modal__back:hover { color: var(--color-primary); }

/* ── C. Lưới tra cứu lượng từ ────────────────────────────────────────────── */
.lt-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
    margin-bottom: var(--space-4); }
.lt-search { position: relative; flex: 1; min-width: 220px; }
.lt-search > i { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
    color: var(--color-mute2); font-size: 13px; pointer-events: none; }
.lt-search input { width: 100%; padding-left: calc(var(--space-3) * 2 + 12px); }
.lt-countpill { padding: 4px 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); font-variant-numeric: tabular-nums; }

/* Bảng .dt — CHÉP từ public/learn-chapter.php (bảng nét/bộ thủ của trang bài học) để bảng
   lượng từ nhìn y hệt. Viền đủ 4 cạnh, header nền xám đậm chữ, cột đầu in đậm căn giữa. */
.dt-wrap { overflow-x: auto; margin: 0 0 var(--space-4); -webkit-overflow-scrolling: touch; }
.dt-wrap:last-child { margin-bottom: 0; }
.dt { width: 100%; border-collapse: collapse; background: var(--color-surface);
    font-size: .94rem; line-height: 1.55; }
.dt th, .dt td { border: 1px solid var(--color-border); padding: 10px 12px; vertical-align: middle; }
.dt thead th { text-align: center; font-weight: var(--fw-bold); color: var(--color-ink);
    background: var(--color-soft); white-space: nowrap; }
.dt tbody td { color: var(--color-text); }
.dt tbody td.dt-c0 { text-align: center; font-weight: var(--fw-bold); color: var(--color-ink); }
.dt td.dt-zh { text-align: center; font-weight: var(--fw-bold); color: var(--color-ink); font-size: 1.25rem; }
.dt td.dt-al-left,   .dt th.dt-al-left   { text-align: left; }
.dt td.dt-al-center, .dt th.dt-al-center { text-align: center; }
.dt td.dt-al-right,  .dt th.dt-al-right  { text-align: right; }
/* Ảnh minh hoạ nằm giữa bài (figure.dt-lead) — như khối data_table của trang bài học */
.dt-lead { margin: var(--space-3) 0 var(--space-4); text-align: center; }
.dt-lead img { max-width: min(100%, var(--dt-lead-w, 620px)); height: auto; border-radius: var(--radius-sm); }
.dt-lead figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); }
.cv-dt-sec .cv-md + .dt-lead { margin-top: 0; }

/* Chữ Hán ở cột đầu bấm được để nghe — nút trần, nhìn như chữ trong bảng */
.lt-hzbtn { border: 0; background: none; padding: 0; cursor: pointer;
    font-family: var(--font-cjk); font-size: 1.45rem; line-height: 1.2;
    font-weight: var(--fw-bold); color: var(--color-ink);
    transition: color var(--dur-fast) var(--ease); }
.lt-hzbtn:hover { color: var(--color-primary); }

/* Ví dụ trong ô bảng */
.lt-ex { margin: 0 0 var(--space-2); }
.lt-ex:last-child { margin-bottom: 0; }
.lt-ex__zh { font-family: var(--font-cjk); font-size: 1.06rem; color: var(--color-ink); }
.lt-ex__zh b { color: var(--color-primary); }
.lt-ex__spk { width: 20px; height: 20px; padding: 0; margin: 0 var(--space-2) 0 6px;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-mute2); cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lt-ex__spk:hover { color: var(--color-primary); border-color: var(--color-primary); }
.lt-ex__spk i { font-size: 9px; }
.lt-ex__meta { font-size: var(--fs-small); color: var(--color-muted); }
.lt-noresult { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-muted); }
.lt-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-muted); }
.lt-empty i { display: block; font-size: 30px; color: var(--color-mute2); margin-bottom: var(--space-3); }

/* ── D. Dải kêu gọi cuối trang ───────────────────────────────────────────── */
/* (Dải kêu gọi cuối trang lý thuyết đã BỎ theo yêu cầu chủ dự án 24/08/2026 —
   lối sang luyện tập nằm ở trang sản phẩm /luong-tu.) */

@media (max-width: 620px) {
    .lt-hero { padding: var(--space-6) var(--space-4); }
    .lt-hero::after { font-size: 150px; right: var(--space-4); }
    .lt-big__cover { height: 120px; gap: var(--space-3); }
    .lt-big__num b { font-size: 36px; }
    .lt-big__sep { height: 44px; }
    .lt-big__body { padding: var(--space-4); }
    .mwf--lg { --mwf-t: 40px; --mwf-key: 46px; --mwf-fs: 22px; --mwf-key-fs: 26px; row-gap: 4px; }
    .mwf__cap { font-size: var(--fs-micro); }
    .cv-intro { grid-template-columns: 1fr; padding: var(--space-4); }
    .cv-section { padding: var(--space-4); }
    /* Bảng .dt tự cuộn ngang trong .dt-wrap nên máy hẹp vẫn đọc được, không cần đổi bố cục */
    .dt th, .dt td { padding: 8px 10px; }
}