/* StemTutor — landing/marketing site.
 *
 * ── Bản dựng lại 2026-09-13 ───────────────────────────────────────────────
 *
 * Trước bản này, file dùng bảng màu **wireframe** của `.pen` (xám trung tính,
 * `--c-accent` bị ghim bằng `#ededed` kèm ghi chú "CÒN MỞ") và font hệ thống
 * kèm ghi chú "font cuối cùng CÒN MỞ". Cả hai ghi chú đó đã sai từ 2026-08-09:
 * [design-bible §0](../specs/design-spec/design-bible.md) khoá hướng production
 * **A+C** — accent `#B45309`, Source Serif 4 cho display/title, Inter cho
 * UI/body — và [design-dna.md v2](../specs/design-spec/design-dna.md) (2026-09-03)
 * thêm `c-primary`/`c-primary-edge` cùng hình khối "chunky" của `DNA-07`.
 * Trang chủ vẫn xám trong khi kênh học `web-learn/` đã ấm là **hai sản phẩm
 * khác nhau dán vào nhau**, nên bản này kéo cả hai về cùng một bảng.
 *
 * Nguồn của từng con số, theo thứ tự ưu tiên:
 *   1. `design-bible.md` §2–§5 — giá trị production đang dùng thật trong `.pen`;
 *   2. `design-dna.md` §3 (token thêm), §4 (hình học chunky), §7 (web);
 *   3. không có mục 3. Số nào không có nguồn thì không được có ở đây.
 *
 * Tham chiếu bố cục (Mobbin, tra 2026-09-13 — chỉ để chọn **hình thức**, mọi
 * giá trị vẫn lấy từ hai tài liệu trên):
 *   · hero hai cột, chữ trái + hình sản phẩm phải — https://mobbin.com/sites/sections/c05626d4-008e-4977-abf1-052cb7cfed46 (Kajabi)
 *   · bốn bước đánh số, thẻ hàng ngang    — https://mobbin.com/sites/sections/28c16d19-1b1c-4c38-b06e-660c77901cbc (Clay)
 *   · số thứ tự cỡ lớn, gạch chia mảnh    — https://mobbin.com/sites/sections/629aae31-4a94-46df-a97f-3180a6ae22e0 (Trawelt)
 *   · CTA chunky một màu                  — https://mobbin.com/sites/sections/72044780-06d4-47f4-b8d9-4b085a486318 (Duolingo)
 *
 * Khác biệt có chủ đích so với app: khung 390pt là ràng buộc **mobile** của app
 * (design-bible §1), không áp cho web. Web dùng cùng token nhưng bố cục thật sự
 * responsive.
 *
 * ⚠️ Bảng token dưới đây phải **giống hệt** khối đầu `web-learn/app.css`. Hai
 * file, một bảng — `design-dna.md` §7: "Web không có bảng màu riêng." Sửa một
 * chỗ mà quên chỗ kia là dựng lại đúng cái lệch bản này vừa xoá.
 */

/* --------------------------------------------------------------------------
 * Token
 * ------------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  /* 11 token màu production — design-bible §2. Đổi giá trị, KHÔNG đổi vai trò. */
  --c-ink: #171717;         /* chữ chính, icon */
  --c-muted: #66645F;       /* chữ phụ, caption */
  --c-surface: #ffffff;     /* nền thẻ */
  --c-fill: #F5F3EF;        /* nền chip thuật ngữ, khối mời hành động */
  --c-bg: #FCFBF8;          /* nền giấy ấm của trang; cũng là chữ trên nền đậm */
  --c-border: #D9D9D6;      /* viền thẻ, đường chia */
  --c-danger: #D02D27;      /* chỉ lỗi hệ thống và hành động phá huỷ */
  --c-board: #EDEDED;       /* nền khối minh hoạ */
  --c-ai: #F1F4FA;          /* bề mặt nội dung do AI sinh ra */
  --c-accent: #B45309;      /* tiến trình, chuỗi ngày, dấu hoàn thành */
  --c-accent-fill: #FBF1E4; /* nền nhạt cho khối tiến trình/hoàn thành */

  /* 5 token thêm của DNA v2 — design-dna §3.1. `c-primary` trùng giá trị với
   * `c-accent` nhưng KHÁC vai trò: accent nói về *tiến bộ*, primary là *nền của
   * hành động*. Giữ hai tên để lúc màu thương hiệu tách đôi thì không phải đi
   * tìm xem chỗ nào là nút, chỗ nào là tiến độ. */
  --c-primary: #B45309;
  --c-primary-edge: #7C3A06;  /* cạnh đáy 4pt của nút chính — nguồn "trọng lượng" */
  --c-ink-edge: #0000001f;    /* cạnh đáy của nút phụ nền `c-surface` */
  --c-locked: #E5E3DE;        /* nút tắt / mốc chưa tới: phẳng, không cạnh đáy */
  --c-locked-edge: #CFCCC6;

  /* Chữ — design-bible §0 và §3, ĐÃ KHOÁ.
   *
   * Không `@font-face`, không Google Fonts: `_headers` đặt
   * `default-src 'none'` và site không có tài nguyên ngoài nào. Nạp font từ tên
   * miền khác là sửa CSP, thêm một điểm hỏng, và làm trang nhảy chữ trên mạng
   * chậm — đúng nhóm người dùng ta nhắm tới. Máy nào có Source Serif 4 hoặc
   * Inter thì dùng; máy không có rơi xuống serif/sans của hệ điều hành, vẫn
   * đúng *loại* chữ. `web-learn/app.css` chọn y hệt. */
  --font-display: ui-serif, "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans: system-ui, -apple-system, "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Thang chữ — design-bible §3. Không có bậc nào dưới 12px. */
  --t-display: 24px;
  --t-title-l: 20px;
  --t-title: 18px;
  --t-heading: 16px;
  --t-label: 14px;
  --t-body: 14px;
  --t-body-s: 13px;
  --t-eyebrow: 12px;
  --t-caption: 12px;

  /* Thang khoảng cách 2pt — design-bible §4, KHÔNG phải thang 8pt. */
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-16: 16px;
  --s-28: 28px;
  --s-40: 40px;
  --s-64: 64px;  /* nhịp giữa hai mục lớn của trang dài — xem §"Layout" */

  /* Bo góc — design-bible §4 + design-dna §4.1 (giá trị `16` cho nút). */
  --r-pill: 999px;
  --r-card: 14px;
  --r-row: 10px;
  --r-button: 16px;
  --r-input: 8px;
  --r-chip: 6px;

  /* Kích thước control — design-bible §5, design-dna §4.1. */
  --h-button: 52px;            /* thân nút; cạnh đáy 4pt nằm ngoài chiều cao này */
  --h-button-secondary: 44px;
  --edge: 4px;                 /* cạnh đáy — `DNA-07` */
  --touch-min: 44px;

  --measure: 42rem;  /* độ dài dòng đọc được; bible là mobile-only nên không có */
  --page: 72rem;     /* bề ngang tối đa của các mục nhiều cột */
  --shadow: 0 1px 3px rgba(23, 23, 23, .06);
}

/* Dark theme.
 *
 * design-bible KHÔNG có bảng màu tối — 70 màn đều là wireframe sáng. Bản dưới
 * đây **giữ nguyên vai trò** của từng token và chỉ hoán nền/chữ, đúng quy tắc 1
 * của design-bible §2; giá trị dẫn xuất, không phải quyết định thiết kế.
 *
 * `c-primary` GIỮ NGUYÊN `#B45309` trong nền tối: chữ `#FCFBF8` trên nền đó đạt
 * 4.9:1, và một nút đổi màu theo theme thì không còn là "một màu hành động duy
 * nhất" nữa (`DNA-02`). Thứ phải đổi là accent dùng làm **chữ** — `#B45309`
 * trên nền tối chỉ được 2.6:1, nên chữ accent chuyển sang `#E9A25C`. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-ink: #FCFBF8;
    --c-muted: #A8A29A;
    --c-surface: #1C1A16;
    --c-fill: #24211C;
    --c-bg: #14120F;
    --c-border: #343029;
    --c-danger: #FF7A73;
    --c-board: #24211C;
    --c-ai: #1A2429;
    --c-accent: #E9A25C;
    --c-accent-fill: #2A2016;
    --c-primary: #B45309;
    --c-primary-edge: #7C3A06;
    --c-ink-edge: #00000040;
    --c-locked: #2A2720;
    --c-locked-edge: #201D18;
    --shadow: 0 1px 3px rgba(0, 0, 0, .35);
  }
}

/* MỞ RỘNG RIÊNG CHO WEB — design-bible KHÔNG có breakpoint này.
 *
 * design-bible §3 là thang chữ của một khung cố định 390pt (§1), nên nó không
 * có, và không cần có, bậc cho màn hình rộng. Web thì có: 14px vừa đủ khi cầm
 * điện thoại cách mắt 30cm, nhưng mỏng cho một trang điều khoản dài đọc trên
 * laptop cách mắt 60cm.
 *
 * Ràng buộc tự đặt để phần mở rộng này không trôi thành một thang thứ hai:
 *   · chỉ **chữ đọc** đổi (body, body-s, caption) và **display**; tiêu đề mục
 *     giữ nguyên;
 *   · giá trị mới phải là một bậc CÓ SẴN trong thang §3, không bịa số mới —
 *     16, 14, 13 là bậc của bible, và `36` là bậc lớn nhất của bible (dùng cho
 *     con số tổng kết ở `F3-14`). Hero co giãn giữa hai bậc CÓ THẬT là 24 và
 *     36, không dừng ở một giá trị nào ngoài thang;
 *   · đổi vai trò của biến thì không, chỉ đổi giá trị theo bề rộng. */
@media (min-width: 48em) {
  :root {
    --t-body: 16px;
    --t-body-s: 14px;
    --t-caption: 13px;
    --t-title: 20px;
  }
}

/* --------------------------------------------------------------------------
 * Nền tảng
 * ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5; /* design-bible §3: lineHeight chỉ đặt cho chữ nhiều dòng */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  /* Địa chỉ email và mã lời mời dài hơn màn 320px — thà xuống dòng còn hơn đẩy
     cả trang trượt ngang. */
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Thuật ngữ tiếng Anh giữ nguyên trong câu tiếng Việt. Dùng đúng hình dạng
 * "Term chip" của design-bible §6.2: nền `c-fill`, bo 6. Không dùng font
 * monospace — trong app đây là chữ thường, không phải code. */
code {
  background: var(--c-fill);
  border-radius: var(--r-chip);
  padding: 0 var(--s-4);
  font-family: inherit;
}

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 20px; /* design-bible §1: padding ngang vùng nội dung */
}

/* Mục nhiều cột (hero, bốn bước, khoá học) cần rộng hơn một cột chữ đọc. Cùng
 * padding ngang để mép trái của mọi mục thẳng hàng ở khổ hẹp. */
.wrap--wide {
  max-width: var(--page);
}

/* Vùng chạm/bấm tối thiểu và ổ focus thấy được — bắt buộc cho thao tác bàn phím. */
a,
button {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Bỏ qua điều hướng — chỉ hiện khi tab tới. */
.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 20px;
  top: 8px;
  z-index: 10;
  background: var(--c-ink);
  color: var(--c-bg);
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-input);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Chữ
 *
 * Tiêu đề dùng `--font-display` (Source Serif 4), thân dùng `--font-sans`.
 * design-dna §3.3: font là chỗ bản sắc học thuật sống rõ nhất, và là thứ phân
 * biệt "sản phẩm học thật" với "trò chơi".
 * ------------------------------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--font-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 var(--s-12);
}

h2 {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--s-28) 0 var(--s-10);
}

h3 {
  font-size: var(--t-heading);
  font-weight: 600;
  margin: var(--s-16) 0 var(--s-8);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--s-12);
}

ul,
ol {
  padding-inline-start: 1.25em;
}

li + li {
  margin-top: var(--s-6);
}

.lede {
  font-size: var(--t-title-l);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-muted);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-accent);
  margin: 0 0 var(--s-6);
}

.caption {
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
 * Header / footer
 * ------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--c-border); /* design-bible §2: viền luôn 1pt */
  background: var(--c-bg);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-16);
  padding-block: var(--s-6);
  max-width: var(--page);
}

.brand {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  margin-right: auto;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-16);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-label);
  font-weight: 500;
}

.nav li {
  margin: 0;
}

.nav a {
  display: inline-block;
  /* Vùng chạm ≥44px theo chiều dọc mà không đổi hình — design-bible §5. */
  padding-block: calc((var(--touch-min) - 1.5em) / 2);
  color: var(--c-muted);
  text-decoration: none;
}

.nav a:hover {
  color: var(--c-ink);
  text-decoration: underline;
}

.nav a[aria-current="page"] {
  color: var(--c-ink);
}

main {
  padding-block: var(--s-28) var(--s-64);
}

.site-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  padding-block: var(--s-28);
}

.site-footer .wrap {
  max-width: var(--page);
}

.site-footer .nav {
  font-weight: 400;
}

/* --------------------------------------------------------------------------
 * Nhịp dọc
 *
 * Trang chủ là một chuỗi mục lớn; các trang pháp lý là một dòng chữ dài. Một
 * lớp `.section` cho mục lớn, để không phải đi chỉnh `margin-top` từng cái.
 * ------------------------------------------------------------------------ */

.section {
  margin-block: var(--s-64);
}

.section > h2 {
  margin-top: 0;
}

/* Tiêu đề mục có gạch mảnh phía trên — nhịp editorial, cùng họ với thẻ bước. */
.section__head {
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-16);
  margin-bottom: var(--s-16);
}

.section__head h2 {
  margin: 0 0 var(--s-6);
}

.section__head .caption,
.section__head p {
  margin: 0;
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
 * Nút — `DNA-07`, hình khối có trọng lượng
 *
 * Cạnh đáy dựng bằng `box-shadow` chứ không bằng `border-bottom`: border ăn vào
 * chiều cao và làm chữ lệch lên 2px so với nút phụ. Khi nhấn, khối lún xuống
 * đúng bằng cạnh đáy và cạnh biến mất — tổng chiều cao không đổi, nên hàng nút
 * không nhảy (design-dna §4.1).
 * ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h-button);
  padding: 0 var(--s-28);
  border: 0;
  border-radius: var(--r-button);
  background: var(--c-primary);
  color: #FCFBF8;   /* KHÔNG dùng `--c-bg`: ở theme tối nó là màu nền, không phải
                       màu chữ trên nút, và nút thì giữ nguyên nền ở cả hai theme */
  box-shadow: 0 var(--edge) 0 var(--c-primary-edge);
  font-family: var(--font-display);
  font-size: var(--t-heading);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(var(--edge));
  box-shadow: 0 0 0 var(--c-primary-edge);
}

.btn:focus-visible {
  outline-color: var(--c-ink);
}

/* Nút phụ — design-dna §4.1: nền `c-surface`, viền 1pt, chữ `c-primary`,
 * cạnh đáy `c-ink-edge`. */
.btn--secondary {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-accent);
  box-shadow: 0 var(--edge) 0 var(--c-ink-edge);
}

.btn--secondary:active {
  box-shadow: 0 0 0 var(--c-ink-edge);
}

/* Nút tắt trông PHẲNG — đó là tín hiệu chính, không phải độ mờ. */
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--c-locked);
  color: var(--c-muted);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-bottom: var(--s-16);
}

/* --------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.hero {
  display: grid;
  gap: var(--s-40);
  align-items: center;
  padding-block: var(--s-16) var(--s-28);
}

@media (min-width: 60em) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--s-64);
    padding-block: var(--s-40) var(--s-40);
  }
}

.hero__copy {
  max-width: 34rem;
}

.hero h1 {
  /* Co giãn giữa hai bậc CÓ THẬT của design-bible §3: 24 (display) và 36 (bậc
     lớn nhất, dùng cho con số tổng kết). Không có giá trị nào ngoài thang. */
  font-size: clamp(var(--t-display), 4.4vw, 36px);
  margin-bottom: var(--s-16);
}

.hero .lede {
  margin-bottom: var(--s-28);
}

/* Hình minh hoạ hero — sơ đồ học thuật đơn sắc, `DNA-05`.
 * Không ảnh stock, không nhân vật 3D, không gradient. SVG nội tuyến trong
 * `index.html` để không phải nới `img-src` của CSP. */
.hero__art {
  /* Chặn bề rộng: dưới 60em hero xếp một cột, và nếu để hình giãn hết cột thì
     chữ trong SVG (15px trong hệ toạ độ 420) phóng theo tỉ lệ và thành ~30px —
     to hơn cả tiêu đề. 480px là cỡ hình vẽ ra để đọc ở đúng tỉ lệ đó. */
  max-width: 480px;
  margin-inline: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-16);
  overflow: hidden;
}

.hero__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero__art figcaption {
  margin-top: var(--s-10);
  font-size: var(--t-caption);
  color: var(--c-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
 * Khối nội dung
 * ------------------------------------------------------------------------ */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card); /* bán kính chủ đạo — design-bible §4 */
  padding: var(--s-16);
  margin-bottom: var(--s-12);
  box-shadow: var(--shadow);
}

.card > :last-child {
  margin-bottom: 0;
}

/* Khối mời hành động — nền `c-fill` theo đúng vai trò token. */
.callout {
  background: var(--c-fill);
  border-radius: var(--r-card);
  padding: var(--s-16);
  margin-bottom: var(--s-12);
}

.callout > :last-child {
  margin-bottom: 0;
}

/* Khối trạng thái phát hành: cùng hình dạng `.callout` nhưng có một vạch accent
 * bên trái, vì đây là thứ người đọc PHẢI thấy trước khi tải app. Không dùng
 * `c-danger` — nói rõ phạm vi không phải là báo lỗi. */
.callout--status {
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--c-accent-fill);
}

/* Cảnh báo bản nháp pháp lý. Dùng viền `c-danger` chứ không phải nền đỏ: đây là
 * cảnh báo cho người vận hành site, không phải lỗi của người đọc. */
.notice {
  border: 1px solid var(--c-danger);
  border-radius: var(--r-card);
  padding: var(--s-16);
  margin-bottom: var(--s-16);
  font-size: var(--t-body-s);
}

.notice > :last-child {
  margin-bottom: 0;
}

/* Chỗ trống chờ quyết định nghiệp vụ/pháp lý. Cố tình xấu và dễ grep. */
.todo {
  background: var(--c-fill);
  border-radius: var(--r-chip);
  padding: 0 var(--s-4);
  font-weight: 600;
}

.grid {
  display: grid;
  gap: var(--s-12);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: var(--s-12);
}

/* --------------------------------------------------------------------------
 * Bốn bước của vòng học — thẻ đánh số
 *
 * Hình thức lấy từ Clay + Trawelt (xem đầu file): số thứ tự cỡ lớn, gạch mảnh
 * phía trên, chữ trái. Đây là mục nói về thứ TỰ, nên số phải đọc được trước
 * tiêu đề.
 * ------------------------------------------------------------------------ */

.steps {
  display: grid;
  gap: var(--s-12);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.step {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--s-16);
  box-shadow: var(--shadow);
}

.step__n {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;      /* bậc lớn nhất của design-bible §3 */
  font-weight: 600;
  line-height: 1;
  color: var(--c-accent);
  margin-bottom: var(--s-8);
}

.step h3 {
  margin: 0 0 var(--s-6);
  font-size: var(--t-title);
}

.step p {
  margin: 0;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
 * Khối "vì sao" — một đoạn cần đọc chậm, không phải một thẻ
 * ------------------------------------------------------------------------ */

.prose {
  max-width: var(--measure);
}

.prose p {
  margin-bottom: var(--s-16);
}

.pull {
  font-family: var(--font-display);
  font-size: var(--t-title-l);
  line-height: 1.45;
  color: var(--c-ink);
  border-left: 3px solid var(--c-primary);
  padding-left: var(--s-16);
  margin: 0 0 var(--s-16);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
 * Danh sách quy tắc dành cho phụ huynh
 *
 * design-dna §9: bề mặt phụ huynh KHÔNG nhận DNA mới — không nhân vật, không ăn
 * mừng, không bộ đếm. Nó vẫn dùng chung token và chữ, nhưng giữ hình thức danh
 * sách trung tính, đọc nhanh.
 * ------------------------------------------------------------------------ */

.rules {
  list-style: none;
  margin: 0 0 var(--s-12);
  padding: 0;
}

.rules li {
  margin: 0;
  padding: var(--s-12) 0;
  border-top: 1px solid var(--c-border);
}

.rules li:first-child {
  border-top: 0;
  padding-top: 0;
}

.rules b {
  display: block;
  margin-bottom: var(--s-4);
}

.rules span {
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
 * Mã lời mời (chỉ dùng ở loi-moi.html)
 * ------------------------------------------------------------------------ */

.code {
  width: 100%;
  min-height: var(--h-button-secondary);
  padding: var(--s-8) var(--s-12);
  background: var(--c-fill);
  border: 1px solid var(--c-border);
  border-radius: var(--r-input);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--t-body);
  letter-spacing: 0.02em;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * Khối "Khoá học đang dạy" — nội dung do `khoa-hoc.js` dựng từ danh mục thật.
 *
 * Không có token màu hay thang chữ nào mới ở đây: khối này dùng lại `.card`,
 * `.eyebrow` và `.caption` đã có. Thêm một giá trị rời ở đây là thêm một số
 * nằm ngoài `design-bible.md`.
 * ------------------------------------------------------------------------ */

#khoa-hoc .card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#khoa-hoc .card li + li {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-border);
}

#khoa-hoc .card .caption {
  display: block;
}

#khoa-hoc .card h3 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
 * Nét vẽ của minh hoạ hero
 *
 * Quy tắc nằm ở đây chứ không ở thuộc tính `fill=` trong SVG vì hai lý do:
 * `_headers` chặn `style=` nội tuyến (CSP `style-src 'self'`), và `var()` trong
 * thuộc tính trình bày của SVG không chạy đồng đều giữa các trình duyệt. Class
 * + stylesheet ngoài là đường duy nhất vừa đúng CSP vừa đổi theo theme tối.
 *
 * Bảng màu: đơn sắc `c-ink`/`c-muted`/`c-border`, đúng một điểm `c-primary`
 * (design-dna §6 — bảng màu của minh hoạ là đơn sắc cộng một điểm nhấn).
 * ------------------------------------------------------------------------ */

.art-label,
.art-ai-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  fill: var(--c-muted);
}

.art-body {
  font-family: var(--font-sans);
  font-size: 15px;
  fill: var(--c-ink);
}

.art-chip {
  fill: var(--c-accent-fill);
  stroke: var(--c-accent);
  stroke-width: 1;
}

.art-chip-text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--c-accent);
}

.art-note {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--c-muted);
}

.art-dash {
  stroke: var(--c-border);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.art-dot { fill: var(--c-border); }

.art-ghost {
  fill: none;
  stroke: var(--c-border);
  stroke-width: 1;
}

/* Vị trí hiện tại của vật — điểm `c-primary` DUY NHẤT của cả hình. */
.art-now { fill: var(--c-primary); }

.art-arrow,
.art-ground {
  stroke: var(--c-ink);
  stroke-width: 1.5;
}

.art-head { fill: var(--c-ink); }

.art-axis {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  fill: var(--c-ink);
}

/* Công thức dùng serif — design-bible §0: "serif toán học cho công thức". */
.art-formula {
  font-family: var(--font-display);
  font-size: 20px;
  fill: var(--c-ink);
}

.art-ai { fill: var(--c-ai); }

.art-ai-bar { fill: var(--c-accent); }

.art-ai-text {
  font-family: var(--font-sans);
  font-size: 13.5px;
  fill: var(--c-ink);
}

/* --------------------------------------------------------------------------
 * Khoá học: mở ra xem danh sách chủ đề
 *
 * `<details>` chứ không phải nút + JS: đóng/mở là việc trình duyệt làm sẵn,
 * đúng cho bàn phím và trình đọc màn hình, và không cần một biến trạng thái
 * nào. `khoa-hoc.js` chỉ nạp nội dung lần đầu mở.
 * ------------------------------------------------------------------------ */

.course-item {
  border-top: 1px solid var(--c-border);
}

#khoa-hoc .card .course-item:first-of-type {
  border-top: 0;
}

.course-item > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  /* Vùng bấm ≥44px — design-bible §5. */
  min-height: var(--touch-min);
  padding: var(--s-10) var(--s-28) var(--s-10) 0;
  position: relative;
  cursor: pointer;
  list-style: none; /* bỏ tam giác mặc định (Firefox) */
}

.course-item > summary::-webkit-details-marker {
  display: none;   /* bỏ tam giác mặc định (Safari/Chrome) */
}

/* Dấu cộng/trừ tự vẽ: một ký tự, đổi theo `[open]`. Không dùng icon vì bộ icon
 * của sản phẩm là lucide và đang khoá — xem design-bible §0. */
.course-item > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--t-title);
  line-height: 1;
  color: var(--c-accent);
}

.course-item[open] > summary::after {
  content: "−";
}

.course-item[open] > summary {
  color: var(--c-ink);
}

.course-item__units {
  padding: 0 0 var(--s-12);
}

.units {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--c-border);
}

.units li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  margin: 0;
  padding: var(--s-6) 0 var(--s-6) var(--s-12);
  font-size: var(--t-body-s);
}

/* --------------------------------------------------------------------------
 * Nút nhỏ trên thanh đầu trang
 *
 * Vẫn có cạnh đáy: một nút nhỏ vẫn là một nút (`DNA-07`). Chỉ thu chiều cao và
 * cỡ chữ, không đổi hình.
 * ------------------------------------------------------------------------ */

.btn--small {
  min-height: 40px;
  padding: 0 var(--s-16);
  font-family: var(--font-sans);
  font-size: var(--t-label);
  border-radius: var(--r-input);
}

/* Nội dung bên trong một khoá đã mở — phần công khai của đề xuất
 * `20260913-bai-hoc-du-phan-nhu-khan`. Markup của các khối này đến từ màn "chi
 * tiết khoá" cũ trong app (`hoc/catalog.js`); màn đó bỏ cùng ADR-15 nên nội
 * dung về đây. Không có token hay bậc chữ mới nào: tất cả dùng lại thang có sẵn. */

.course-item__desc {
  margin: 0 0 var(--s-10);
  color: var(--c-muted);
}

.course-item__h {
  margin: var(--s-12) 0 var(--s-6);
  font-family: var(--font-display);
  font-size: var(--t-heading);
  font-weight: 600;
}

.outcomes {
  margin: 0 0 var(--s-12);
  padding-inline-start: 1.1em;
  font-size: var(--t-body-s);
  color: var(--c-muted);
}

.outcomes li {
  margin-top: var(--s-4);
}

/* Ba dữ kiện khô: dành cho ai · dài bao lâu · bám chuẩn nào. Dạng bảng hai cột
 * để mắt quét theo cột trái, không phải đọc thành câu. */
.facts {
  display: grid;
  gap: var(--s-4) var(--s-12);
  margin: 0 0 var(--s-12);
  font-size: var(--t-body-s);
}

.facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
}

.facts dt {
  min-width: 6.5rem;
  color: var(--c-muted);
}

.facts dd {
  margin: 0;
}

.unit__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--t-caption);
  color: var(--c-muted);
}