/* ═══════════════════════════════════════════════════════════════════
   Lãi suất 24h — art direction "quant-private-banking"
   (docs/ART-DIRECTION-2.md, chốt 10/08/2026 — thay hướng "so-tiet-kiem")

   Ẩn dụ sản phẩm: BÀN DỮ LIỆU của một private bank định lượng. Nền porcelain
   sáng; MỘT sân khấu dữ liệu tối (midnight navy) chiếm 20–30% trang — nơi câu
   trả lời đứng; cobalt là accent duy nhất của thương hiệu; emerald chỉ cho
   "đã đối chiếu" và biến động tích cực; amber/đỏ chỉ cho caveat và cảnh báo.

   Vì sao KHÔNG phải "tờ biểu công văn" nữa: chủ dự án bác 10/08/2026 — hướng
   cũ chủ động chống high-tech (bo góc 0, không bóng, không mặt tối) nên sản
   phẩm đọc như báo cáo hành chính. Vì sao vẫn KHÔNG phải terminal crypto:
   không neon, không ticker, không particle, không đếm số tự chạy — chuyển
   động chỉ được phép khi nó GIẢI THÍCH một thay đổi.

   Nguyên tắc dữ liệu giữ nguyên từ hướng cũ (chúng là sản phẩm, không phải
   trang trí): số khảo sát luôn mang caveat; ô trống là "—" không phải 0;
   chart chỉ dài bằng số ngày thật; trục cắt phải in mốc; cắt thì khai số cắt.
   ═══════════════════════════════════════════════════════════════════ */

@import url("/fonts.css");

/* ── 1. Token ─────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --bg: #F5F6F8;            /* porcelain — nền trang */
  --surface: #FFFFFF;       /* thẻ, bảng */
  --surface-2: #FAFBFC;     /* nền phụ trong thẻ */
  --head: #F1F3F6;          /* nền hàng tiêu đề bảng */

  /* Sân khấu dữ liệu tối — midnight navy. CHỈ MỘT vùng lớn mỗi trang. */
  --stage: #0A1F3D;
  --stage-2: #10294D;
  --stage-line: #24406B;
  --on-stage: #E8EEFA;      /* 14,4:1 trên stage */
  --on-stage-2: #9DB1D6;    /*  7,7:1 trên stage — ngưỡng chữ phụ trên nền tối */

  --ink: #0F1729;           /* 16:1 trên surface */
  --ink-2: #42506B;         /*  7,6:1 trên surface */
  --muted: #5D6B84;         /*  5,2:1 trên surface · 4,8:1 trên bg · 4,75:1
                                trên head — đạt AA ở MỌI nền sáng của hệ.
                                Bản đầu #64748B chỉ 4,26:1 trên bg: axe đếm 86
                                nút trượt. KHÔNG dùng trên cobalt-soft. */

  --rule: #E4E7EC;
  --rule-strong: #C9D0DA;

  /* Cobalt — accent thương hiệu duy nhất. */
  --cobalt: #1F4FD8;        /* 6,6:1 trên surface */
  --cobalt-strong: #173FB0;
  --cobalt-soft: #E7EDFC;
  --cobalt-bright: #6E97FF; /* 6,0:1 trên stage — accent cho nền tối */

  /* Emerald — CHỈ "đã đối chiếu" và biến động tích cực. */
  --emerald: #0B7A57;       /* 5,3:1 trên surface */
  --emerald-soft: #E3F5EE;
  --emerald-bright: #46C69C;/* 7,9:1 trên stage */

  /* Amber/đỏ — CHỈ caveat, điều kiện, cảnh báo. Không bao giờ trang trí. */
  --amber: #B45309;         /* 5,0:1 trên surface */
  --amber-soft: #FCF1E3;
  --warn: #B3261E;
  --warn-soft: #FBEFEE;

  --r-lg: 18px; --r: 14px; --r-sm: 10px;
  --shadow-1: 0 1px 2px rgba(15, 23, 41, .05);
  --shadow-2: 0 12px 32px -12px rgba(15, 23, 41, .14);

  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 34rem;

  /* ── Alias tên biến của hướng cũ ──────────────────────────────────
     Template cũ còn tham chiếu var(--seal), var(--flag), var(--paper)… Trỏ
     chúng vào token mới để không trang nào vỡ trong lúc chuyển hệ; gỡ dần
     khi từng template được viết lại. */
  --paper: var(--bg);
  --seal: var(--cobalt);
  --seal-soft: var(--cobalt-soft);
  --seal-line: #B9C9F2;
  --flag: var(--warn);
  --flag-soft: var(--warn-soft);
  --wash-2: #F3F6FD;

  /* ── Chuyển động ────────────────────────────────────────────────────
     Kho này đặt token cho màu, khoảng cách, bo góc, bóng — riêng chuyển động
     thì 20 khai báo gõ tay 120/140/150ms và HAI cách viết cùng một đường
     cong (`.22,.7,.25,1` và `.22, .7, .25, 1`). Hệ quả đo được: tài liệu
     ART-DIRECTION mục 4 ghi "nền hàng hover 90ms · mở gập 120ms" trong khi
     mã chạy 120ms và 260ms — không ai sai, chỉ là không có một chỗ để đúng.

     `--ease-vao` là đường cong ease-out MẠNH: ease-out có sẵn của CSS quá
     yếu cho chuyển động cố ý (AUDIT.md mục 2). Màu dùng `ease` chứ không
     `linear` — đổi màu tuyến tính đọc ra máy móc. */
  --t-cham: 260ms;    /* mở khối gập lớn */
  --t-vua: 150ms;     /* xoay mũi tên, chuyển vị nhỏ */
  --t-nhanh: 120ms;   /* tooltip, đổi panel, nền hàng */
  --t-mau: 140ms;     /* đổi màu nền / chữ / viền */
  /* Nhấp nháy "ô này vừa đổi giá" — 500ms, CỐ Ý vượt trần 300ms của chuyển
     động giao diện. Trần đó dành cho vào/ra, thứ người dùng đang chờ. Đây là
     ngược lại: một dấu vết phải kịp lọt vào mắt người KHÔNG nhìn đúng chỗ đó,
     rồi tự biến mất. Ngắn hơn thì thành nháy giật; dài hơn thì thành trang trí. */
  --t-nhay: 500ms;
  --ease-vao: cubic-bezier(.23, 1, .32, 1);
  --ease-mo: cubic-bezier(.22, .7, .25, 1);

  /* Ký hiệu mũi tên / dấu tick vẽ bằng ĐÚNG hình học Lucide 0.462 (mask, tô
     bằng currentColor) chứ không phải glyph Unicode ▾ ↕ ✓. Lý do: một bộ
     icon duy nhất trên toàn giao diện — nét, bo đầu và tỉ lệ khớp với 15 icon
     inline; glyph Unicode đổi hình theo font hệ điều hành.
     High Contrast không dựng được mask → rơi về glyph, xem mục forced-colors. */
  --ic-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  --ic-sort: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');
  --ic-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>');
  --ic-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>');
  --ic-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

/* Một ô icon dựng bằng mask — dùng chung cho mọi ::after ký hiệu. */
.ic-mask {
  content: ""; display: inline-block; flex: none;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

/* ── 2. Nền ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: var(--s5); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* 1.7: dấu tiếng Việt chồng hai tầng (ế, ộ, ữ) — dòng chật là dấu dòng trên
     chạm chữ dòng dưới. */
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  user-select: none;
}
/* Đệm một khoảng trắng cứng hai đầu: position:absolute nuốt khoảng trắng
   quanh text ẩn, trình đọc màn hình đọc dính liền với chữ đứng cạnh
   (govuk-frontend helpers/_visually-hidden.scss). */
.sr-only::before, .sr-only::after { content: "\00a0"; }
.skip {
  position: absolute; left: -9999px; top: var(--s2); z-index: 100;
  background: var(--cobalt); color: #fff; padding: var(--s3) var(--s5);
  font-weight: 600; text-decoration: none; border-radius: var(--r-sm);
}
.skip:focus { left: var(--s3); }

a { color: var(--cobalt); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
/* Trên sân khấu tối, cobalt chỉ ~2,5:1 — outline focus gần như tàng hình,
   trượt WCAG 1.4.11. Một màu focus cho mọi nền là sai (govuk _links.scss). */
.stage :focus-visible { outline-color: var(--cobalt-bright); }
/* Đích của skip link: nhận focus chương trình nhưng người dùng không tương
   tác với chính nó — không vẽ outline (govuk skip-link, w3c/wcag#1001). */
#main:focus { outline: none; }

/* Mọi con số dữ liệu: tabular để cột thẳng hàng. Số lớn dùng Be Vietnam Pro
   800, KHÔNG dùng mono — mono chỉ còn cho timestamp và mã nguồn. */
.num, td .rate, .kv b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Icon Lucide inline — cỡ đi theo chữ, stroke 2px thống nhất. */
.li { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.tag .li { width: 12px; height: 12px; }
.head-time .li, .control .li { width: 13px; height: 13px; vertical-align: -2px; }
.delta-chip .li { width: 13px; height: 13px; }
.section-head .li { width: 20px; height: 20px; color: var(--cobalt); vertical-align: -3px; }
a .li { width: 12px; height: 12px; opacity: .7; }
.bottomnav a svg.li { width: 21px; height: 21px; stroke-width: 1.75; }

/* ── 3. Đầu trang ─────────────────────────────────────────────────── */
.site-head {
  background: var(--surface); border-bottom: 1px solid var(--rule);
  position: relative; z-index: 5;
}
.head-top {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 60px; flex-wrap: wrap;
}
.logo {
  font-weight: 800; font-size: 20px; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.logo b { color: var(--cobalt); font-weight: 800; }
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-mark {
  width: 26px; height: 26px; flex: none;
  background: var(--stage); border-radius: 7px; padding: 4px;
}
.logo-mark path {
  fill: none; stroke: var(--cobalt-bright); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Motif "rate pulse" — đường nhịp mờ ngăn các vùng lớn. Trang trí CÓ danh
   tính, không phải trang trí chung chung: cùng path với logo. */
.pulse-line { display: block; width: 120px; height: 16px; margin-top: var(--s5); opacity: .5; }
.pulse-line path { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage .pulse-line path { stroke: var(--cobalt-bright); }
.site-head nav { display: flex; gap: var(--s1); flex-wrap: wrap; }
.site-head nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  transition: background-color var(--t-mau) ease, color var(--t-mau) ease;
}
.site-head nav a:hover { color: var(--cobalt); background: var(--cobalt-soft); }
.site-head nav a[aria-current="page"] { color: var(--cobalt); font-weight: 650; }
.site-head nav span { color: var(--muted); font-size: 14.5px; padding: var(--s2) var(--s3); cursor: default; }
.site-head nav span::after {
  content: "sắp có"; font: 600 10px var(--mono); letter-spacing: .06em;
  text-transform: uppercase; margin-left: 6px; color: var(--muted);
  border: 1px solid var(--rule-strong); padding: 1px 5px; border-radius: 999px;
}
.head-time { font: 500 11.5px var(--mono); color: var(--muted); white-space: nowrap; }

/* ── 4. Sân khấu dữ liệu (hero cockpit) ───────────────────────────── */
/* MỘT tấm tối mỗi trang, bo lớn, nằm trong khung trang — không full-bleed.
   Lưới kẻ rất mờ tạo chất "định lượng"; KHÔNG texture nào khác. */
.stage {
  position: relative; margin-top: var(--s5);
  background:
    /* Lưới phải nói "đây là mặt đo", không phải "đây là hình nền". 2% là
       ngưỡng còn thấy được khi nghiêng màn hình mà không cạnh tranh với số. */
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 44px 100%,
    linear-gradient(160deg, var(--stage) 0%, #0C2447 55%, var(--stage-2) 100%);
  border-radius: var(--r-lg); color: var(--on-stage);
  padding: clamp(24px, 3.4vw, 44px);
  box-shadow: var(--shadow-2);
}
.stage a { color: var(--cobalt-bright); }
.stage-grid {
  display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
/* Kết quả đứng TRƯỚC trong DOM (mobile đọc từ trên xuống gặp câu trả lời
   trước); CHỈ desktop hoán vị bằng order — chữ trái, số phải. Đặt order
   không media query là mobile cũng bị hoán vị ngược lại — đúng lỗi đã đo
   được: ck_truoc_loc = false. */
@media (min-width: 901px) {
  .stage-lede { order: 1; }
  .stage-ans { order: 2; }
}
/* Motif pulse mờ chạy sát đáy sân khấu — nhận diện, không trang trí rời. */
.stage { overflow: hidden; }
.stage-pulse {
  position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 26px;
  margin: 0; opacity: .16; pointer-events: none;
}
/* Bộ điều khiển gập: desktop luôn mở và giấu nút gập; mobile là disclosure. */
.ctl-fold { border: 0; }
.ctl-fold > summary { list-style: none; cursor: pointer; display: none;
  font: 600 13px var(--sans); color: var(--cobalt-bright);
  padding: var(--s2) 0; }
.ctl-fold > summary::-webkit-details-marker { display: none; }
.ctl-fold > summary::after {
  content: ""; display: inline-block; width: 15px; height: 15px;
  margin-left: 4px; vertical-align: -3px; background: currentColor;
  -webkit-mask: var(--ic-chevron) center / contain no-repeat;
  mask: var(--ic-chevron) center / contain no-repeat;
  transition: transform var(--t-vua) var(--ease-vao);
}
.ctl-fold[open] > summary::after { transform: rotate(180deg); }

/* Sân khấu gọn cho trang kỳ hạn / ngân hàng / công cụ — CÙNG một component. */
.stage-slim { padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3.4vw, 44px); }
.stage-slim h1 { font-size: clamp(24px, 3vw, 34px); }
.stage-slim .stage-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; }
.ck-slim { padding: var(--s4) var(--s5); }
.ck-slim .ck-num { font-size: clamp(32px, 3.4vw, 44px); }
.stage .kicker {
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-stage-2); margin: 0 0 var(--s3);
}
.stage h1 {
  margin: 0 0 var(--s2); color: #fff;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12;
  font-weight: 800; letter-spacing: -.03em; text-wrap: balance;
}
.stage .sub { margin: 0 0 var(--s5); color: var(--on-stage-2); font-size: 15.5px; }

/* Bộ điều khiển trên nền tối */
.stage .control > span:first-of-type {
  font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-stage-2);
}
.stage .amount input {
  font: 800 26px/1.2 var(--sans); font-variant-numeric: tabular-nums;
  border: 0; border-bottom: 2px solid var(--cobalt-bright);
  background: transparent; color: #fff; padding: 2px 0; width: 13ch;
  letter-spacing: -.01em;
}
.stage .amount input::placeholder { font: 400 15px var(--sans); color: var(--on-stage-2); }
.stage .amount input:focus {
  outline: 2px solid var(--cobalt-bright); outline-offset: 3px;
  border-bottom-color: #fff;
}
.stage .amount > span { color: var(--on-stage-2); font-weight: 600; }
.stage .so-chu { color: var(--on-stage-2); }
.stage .chips a, .stage .chips button {
  background: rgba(255,255,255,.06); border-color: var(--stage-line);
  color: var(--on-stage);
}
.stage .chips a:hover, .stage .chips button:hover {
  background: rgba(255,255,255,.14); color: #fff;
}
.stage .chips [aria-current="page"], .stage .chips [aria-pressed="true"] {
  background: var(--cobalt-bright); border-color: var(--cobalt-bright);
  color: var(--stage); font-weight: 700;
}
.stage .loc-ghi { color: var(--on-stage-2); }
.stage .controls { border: 0; padding-block: 0; }

/* Thẻ kết quả — câu trả lời của trang */
.ck {
  background: rgba(255,255,255,.05); border: 1px solid var(--stage-line);
  border-radius: var(--r); padding: var(--s5);
}
.ck-k {
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-stage-2); margin: 0 0 var(--s3);
}
.ck-who { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.ck-who .mono-box { border-color: var(--stage-line); color: var(--on-stage-2); background: transparent; }
.ck-who a { color: #fff; font-weight: 650; font-size: 17px; text-decoration-color: var(--stage-line); }
.ck-num {
  font: 800 clamp(44px, 4.6vw, 60px)/1 var(--sans); letter-spacing: -.03em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.ck-num i { font: 600 14px var(--mono); font-style: normal; letter-spacing: 0; color: var(--on-stage-2); margin-left: 6px; }
.ck-lai { display: block; margin-top: var(--s3); color: var(--emerald-bright); font-weight: 650; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.ck-delta { display: block; margin-top: 2px; color: var(--on-stage-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ck-note { display: block; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--stage-line); color: var(--on-stage-2); font-size: 12px; }

/* Top 5 trong sân khấu — thanh cobalt-bright trên nền tối */
.ck-bars { margin-top: var(--s4); display: grid; gap: 7px; }
.ck-bar { display: grid; grid-template-columns: 92px 1fr 52px; gap: var(--s3); align-items: center; font-size: 13px; }
.ck-bar .t { color: var(--on-stage-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-bar .b { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ck-bar .b i { display: block; height: 100%; border-radius: 999px; background: var(--cobalt-bright); }
.ck-bar:first-child .b i { background: linear-gradient(90deg, var(--cobalt-bright), #A7C1FF); }
.ck-bar .v { color: #fff; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }

/* Caveat khảo sát trên sân khấu */
.ck.kshat { margin-top: var(--s4); }
.ck.kshat .ck-num { font-size: clamp(30px, 3vw, 38px); }
.ck-warn { display: block; margin-top: var(--s2); padding-left: var(--s2); border-left: 2px solid #EFC08A; color: #EFC08A; font-size: 12.5px; }

/* ── 4b. Market Index strip ───────────────────────────────────────── */
/* BỐN chỉ số trong MỘT dải ≤96px — không phải bốn card. Mobile cuộn ngang
   snap, fade mép phải làm chỉ báo còn nội dung. */
/* Số ô thay đổi theo dữ liệu (ô "đang chào" đã rời sang thẻ trả lời, ô "biến
   động" chỉ có khi hôm nay có ô đổi giá) — cột tự chia đều theo số ô thật, chứ
   `repeat(4, 1fr)` cứng thì ba ô để lại một cột trống toác bên phải. */
.mindex {
  margin: var(--s4) 0 0; display: grid;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow-1);
  max-height: 96px; overflow: hidden;
}
.mi-seg { padding: var(--s3) var(--s5); border-left: 1px solid var(--rule); min-width: 0; }
.mi-seg:first-child { border-left: 0; }
[data-tip] { cursor: help; }
.mi-seg .li { width: 12px; height: 12px; opacity: .55; vertical-align: -1.5px; }
.mi-seg dt {
  font: 600 9.5px/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.mi-seg dd { margin: 2px 0 0; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.mi-num {
  font: 800 24px/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mi-num i { font: 600 11px var(--mono); font-style: normal; color: var(--muted); letter-spacing: 0; margin-left: 3px; }
.mi-num.up { color: var(--emerald); }
.mi-num.down { color: var(--warn); }
.mi-sub { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
/* Luật cũ `.mi-seg.chua-xac-nhan` đã gỡ 11/08 cùng ô "Thị trường đang chào":
   dải chỉ số nay chỉ mang lớp niêm yết, còn mức được chào có nguyên một tab ở
   thẻ trả lời. Giữ lại CSS của một khối không còn được dựng là để dành một cái
   bẫy cho người sửa sau. */
.mi-spark polyline { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Biến thể trong band tối (concept A "Command Band"): strip là đường ray đáy
   sân khấu — nền trong suốt, kẻ trên mảnh, chữ on-stage. */
.stage .mindex {
  background: transparent; border: 0; border-top: 1px solid var(--stage-line);
  border-radius: 0; box-shadow: none; margin-top: var(--s5);
  position: relative; z-index: 1;
}
.stage .mi-seg { border-left-color: var(--stage-line); }
.stage [data-tip] { cursor: help; }
.mi-seg .li { width: 12px; height: 12px; opacity: .55; vertical-align: -1.5px; }
.mi-seg dt { color: var(--on-stage-2); }
.stage .mi-num { color: #fff; }
.stage .mi-num i { color: var(--on-stage-2); }
.stage .mi-num.up { color: var(--emerald-bright); }
.stage .mi-num.down { color: #F2A69E; }
.stage .mi-sub { color: var(--on-stage-2); }
.stage .mi-sub.caveat { color: #EFC08A; }
.stage .mi-spark polyline { stroke: var(--cobalt-bright); }

@media (max-width: 900px) {
  /* Lưới 2×2, KHÔNG cuộn ngang.
     Bản trước là carousel snap có vệt mờ ở mép 88% làm chỉ báo "còn nữa". Đo
     ở 390px: khung 342px mà nội dung 848px, mỗi ô 212px — ô thứ hai bị cắt mất
     58px. Vệt mờ không đọc thành "cuộn được", nó đọc thành "chữ bị cắt", và
     người dùng không có lý do gì để thử vuốt một dãy số.
     2×2 thì bốn chỉ số cùng hiện, không cắt chữ nào. */
  .mindex {
    display: grid; grid-template-columns: 1fr 1fr;
    /* Trả dòng chảy về HÀNG: bản desktop dùng auto-flow column để tự chia đều
       theo số ô, giữ nguyên ở đây thì mỗi ô lại chiếm một cột riêng và lưới
       2×2 vỡ thành một hàng ba cột chật. */
    grid-auto-flow: row;
    max-height: none; overflow: visible;
  }
  .mi-seg { padding-block: var(--s3); min-width: 0; }
  /* Đường kẻ theo lưới: cột phải có kẻ trái, hàng dưới có kẻ trên. */
  .mi-seg:nth-child(odd) { border-left: 0; }
  .mi-seg:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .stage .mi-seg:nth-child(n + 3) { border-top-color: var(--stage-line); }
  .mi-num { font-size: 21px; }
  /* Chữ dài (“Trung vị thị trường”, “Biến động mới nhất”) phải xuống dòng
     thay vì đẩy ô rộng ra. */
  .mi-seg dt { white-space: normal; overflow-wrap: anywhere; }
}

/* ── 5. Market pulse ──────────────────────────────────────────────── */
.pulse {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--s5);
}
.pulse-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: var(--s4) var(--s5);
  box-shadow: var(--shadow-1);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s2);
}
.pulse-card dt {
  grid-column: 1 / -1;
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.pulse-card dd { margin: 0; }
.pulse-num {
  font: 800 32px/1.05 var(--sans); letter-spacing: -.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.pulse-num i { font: 600 12px var(--mono); font-style: normal; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.pulse-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-2); }
.pulse-sub.caveat { color: var(--amber); }
/* min-width: 0 cho cả ô — sparkline 120px trong thẻ hẹp (tablet, 2 cột) phải
   co lại chứ không đẩy thẻ tràn ngang. */
.pulse-card dd { min-width: 0; }
.pulse-spark { justify-self: end; align-self: center; max-width: 100%; }
.pulse-spark svg { max-width: 100%; height: auto; display: block; }
.pulse-spark polyline { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pulse-spark .dot { fill: var(--cobalt); }

/* ── 5b. Dot plot chung: khảo sát cạnh chính thức ─────────────────── */
/* Bảng chênh hai lớp — thay sơ đồ hai chấm (gỡ 12/08). Bốn cột bề rộng cố
   định; hàng tiêu đề dùng đúng khuôn lưới của hàng dữ liệu nên không có cách
   nào lệch. */
.chenh-list { margin: 0; padding: 0; list-style: none; }
.chenh-list li {
  display: grid; align-items: center; gap: var(--s2) var(--s4);
  grid-template-columns: minmax(0, 1fr) 116px 132px 92px;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
}
.chenh-list li:last-child { border-bottom: 0; }
.chenh-head {
  font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding-bottom: var(--s2) !important;
}
.chenh-head span:not(:first-child) { text-align: right; }
.chenh-who { min-width: 0; }
.chenh-ny, .chenh-ks { text-align: right; font-variant-numeric: tabular-nums; }
.chenh-ny { color: var(--ink-2); font-size: 15px; }
.chenh-ks b { font-weight: 800; font-size: 19px; color: var(--ink); }
.chenh-ny i, .chenh-ks i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 3px; }
.chenh-so { text-align: right; }
.chenh-so .na, .chenh-ny .na { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .chenh-list li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .chenh-head { display: none; }
  .chenh-so { grid-column: 3; }
}

.rank10 { margin: 0; padding: 0; list-style: none; counter-reset: r10; }
.rank10 li {
  counter-increment: r10;
  display: grid; align-items: center; gap: var(--s2) var(--s4);
  /* Cột tên có BỀ RỘNG CỐ ĐỊNH, không `auto`. Sparkline chỉ xuất hiện ở
     những hàng có đủ chuỗi 2 ngày, nên để `auto` thì mỗi hàng rộng một kiểu và
     thanh xếp hạng bắt đầu ở những vị trí khác nhau — mà thanh đó chỉ có nghĩa
     khi mọi hàng cùng một gốc. Đo 12/08: ba trong năm hàng có sparkline, ba
     thanh lệch nhau tới 130px. */
  grid-template-columns: 28px minmax(0, 268px) minmax(120px, 1fr) 96px 132px;
  /* MỌI cột đều có tên, kể cả cột số thứ tự. `.rank-ks` đặt lại vùng cho dòng
     thứ hai; nếu bảng vùng chỉ kê bốn tên trong khi lưới có năm rãnh thì tên
     bị lệch đi một rãnh và `.r10-who` rơi vào rãnh 28px — chữ tên ngân hàng
     xuống hàng từng từ một. Kê đủ năm tên là chốt lại phép ánh xạ đó. */
  grid-template-areas: "stt who bar rate lai";
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-mau) ease;
}
.rank10 li:hover { background: var(--surface-2); }
.rank10 li:last-child { border-bottom: 0; }
.rank10 li::before {
  content: counter(r10); font: 700 13px var(--mono);
  color: var(--muted); text-align: right;
}
.rank10 li:nth-child(-n+3)::before { color: var(--cobalt); }
.r10-who { display: flex; align-items: center; gap: var(--s3); min-width: 0;
           justify-content: space-between; }
.r10-who .bank-name { white-space: nowrap; }
.r10-bar { height: 10px; border-radius: 999px; background: var(--cobalt-soft); overflow: hidden; }
.r10-bar i { display: block; height: 100%; border-radius: 999px; background: var(--cobalt); }
.rank10 li:first-child .r10-bar i { background: linear-gradient(90deg, var(--cobalt), var(--cobalt-bright)); }
.r10-rate {
  text-align: right; font: 800 21px/1.1 var(--sans);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.r10-rate .fnote { font-size: 9.5px; }
.r10-lai { text-align: right; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.r10-lai b { display: block; font-weight: 650; color: var(--ink); font-size: 13.5px; }
.r10-meta { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden;
}
.card-head {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--rule);
}
.card-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.card-head .sub { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.card-foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--rule); font-size: 13px; }
.btn-ghost {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--rule-strong); color: var(--cobalt);
  font-weight: 600; font-size: 13.5px; text-decoration: none; background: var(--surface);
  cursor: pointer; transition: border-color var(--t-nhanh) ease, background-color var(--t-nhanh) ease;
}
.btn-ghost:hover { border-color: var(--cobalt); background: var(--cobalt-soft); }

/* ── 7. Khảo sát thị trường — dải thẻ ─────────────────────────────── */
.survey { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sv-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--amber); border-radius: var(--r-sm);
  padding: var(--s4); box-shadow: var(--shadow-1);
}
.sv-num { font: 800 26px/1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-who { display: block; margin-top: 2px; font-weight: 650; font-size: 14.5px; }
.sv-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }

/* ── 8. Biến động — line chart ────────────────────────────────────── */
.chart { width: 100%; height: auto; display: block; }
.chart .band { fill: var(--cobalt-soft); opacity: .55; }
.chart .line { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .dot { fill: var(--surface); stroke: var(--cobalt); stroke-width: 2; }
.chart-meta { display: flex; gap: var(--s4) var(--s5); flex-wrap: wrap; font-size: 12px; color: var(--muted); padding-top: var(--s3); }
.chart-note { font-size: 12.5px; color: var(--ink-2); }
.delta-list { margin: 0; padding: 0; list-style: none; }
.delta-list li {
  /* Năm cột, mỗi cột một loại thông tin, mọi dòng thẳng nhau. `align-items`
     là `center` chứ không `baseline`: ô đầu chứa logo 40px, canh theo đường
     chân chữ sẽ đẩy logo tụt xuống dưới đáy dòng. */
  display: grid; align-items: center; gap: var(--s2) var(--s4);
  /* Khoảng trống dồn vào cột KỲ HẠN, không vào cột tên: thẻ ±0,5 là thuộc
     tính của ngân hàng nên phải đứng sát tên, còn mức chào phải đứng sát mép
     phải cạnh ngày. Để `1fr` ở cột tên thì thẻ bị đẩy ra giữa dòng, cách tên
     nó mô tả nửa màn hình. */
  grid-template-columns: minmax(0, 300px) 84px minmax(120px, 1fr) 132px 88px;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.delta-list li:last-child { border-bottom: 0; }
.delta-who { min-width: 0; }
.delta-chip { justify-self: start; }
.delta-ky { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.delta-ky i, .delta-chao i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }
.delta-chao { text-align: right; font-variant-numeric: tabular-nums; }
.delta-chao b { font-weight: 700; font-size: 15px; color: var(--cobalt); }
.delta-chao .na { font-size: 12.5px; color: var(--muted); }
.delta-list .delta-when { text-align: right; }
@media (max-width: 760px) {
  /* Điện thoại: tên và ngày lên dòng trên, ba ô số xuống dòng dưới — vẫn là
     lưới, vẫn thẳng cột, không rơi về văn xuôi. */
  .delta-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .delta-chip, .delta-ky, .delta-chao { grid-row: 2; text-align: left; }
  .delta-chao { grid-column: 2; text-align: right; }
}
.delta-chip {
  font: 650 12.5px var(--sans); padding: 2px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.delta-chip.up { color: var(--emerald); background: var(--emerald-soft); }
.delta-chip.down { color: var(--warn); background: var(--warn-soft); }
.delta-when { font: 500 11px var(--mono); color: var(--muted); }

/* ── 8b. Hình phụ trợ: barcode, gapvis, dev, slope, ck-truc ───────── */
.ck-truc { display: block; margin-top: var(--s2); font: 500 10.5px var(--mono); color: var(--on-stage-2); }

/* Barcode phân bố: mỗi ngân hàng một vạch 1px, chỗ trùng mức tự đậm lên;
   vạch trung vị cobalt đậm hơn. */
.barcode { position: relative; display: block; height: 14px; margin-top: var(--s2); }
.barcode::before { content: ""; position: absolute; inset: 6.5px 0 auto; height: 1px; background: var(--rule); }
.barcode i { position: absolute; top: 0; width: 1px; height: 14px; background: var(--ink); opacity: .4; }
.barcode b { position: absolute; top: -2px; width: 2.5px; height: 18px; background: var(--cobalt); }

/* Hai chấm khảo sát–chính thức: chấm mực = chính thức, chấm amber = khảo sát,
   đoạn nối là KHOẢNG — không in con số chênh. */
.gapvis { position: relative; display: block; height: 16px; margin-top: var(--s3); }
.gapvis::before { content: ""; position: absolute; inset: 7.5px 0 auto; height: 1px; background: var(--rule); }
.gapvis u { position: absolute; top: 7px; height: 2px; background: repeating-linear-gradient(90deg, var(--rule-strong) 0 4px, transparent 4px 8px); }
.gapvis i { position: absolute; top: 4px; width: 8px; height: 8px; border-radius: 999px; transform: translateX(-4px); }
.gapvis i.w { background: var(--ink); }
.gapvis i.k { background: var(--amber); }

/* Thanh lệch quanh trung vị (Diverging bar) — vạch giữa là trung vị. */
.dev { position: relative; display: block; height: 6px; margin-top: var(--s2); background: var(--head); border-radius: 999px; overflow: hidden; }
.dev::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--rule-strong); z-index: 1; }
.dev i { position: absolute; top: 0; bottom: 0; }
.dev i.up { left: 50%; background: var(--cobalt); border-radius: 0 999px 999px 0; }
.dev i.down { right: 50%; background: var(--muted); border-radius: 999px 0 0 999px; }


/* Panel tooltip do Floating UI định vị — flip/shift nên không bao giờ bị cắt
   ở mép nhìn như bản CSS. */
.tip-panel {
  position: absolute; top: 0; left: 0; z-index: 40; max-width: 280px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  padding: 8px 11px; box-shadow: var(--shadow-2);
  font: 400 12.5px/1.5 var(--sans); opacity: 0;
  /* Tooltip ĐI RA TỪ chỗ nó giải thích, không hiện ra từ hư không.
     Bản trước chỉ mờ dần opacity — đúng thứ AUDIT.md mục 3 gọi là "pure-fade
     entrance with no initial transform": panel không nói được nó thuộc về ô
     nào, và ở bảng 38 dòng thì mỗi ô đều có một tooltip giống hệt.
     4px là đủ để mắt bắt được hướng mà không thành một cú trượt. */
  transform: translateY(-4px);
  transition: opacity var(--t-nhanh) ease, transform var(--t-nhanh) var(--ease-vao);
}
.tip-panel[data-cho="top"] { transform: translateY(4px); }
.tip-panel[data-cho="left"] { transform: translateX(4px); }
.tip-panel[data-cho="right"] { transform: translateX(-4px); }
.tip-panel[data-hien] { opacity: 1; transform: none; }
/* Người tắt chuyển động vẫn cần tooltip HIỆN RA — chỉ bỏ phần dịch chuyển,
   giữ phần mờ dần (mục 6: giảm chứ không phải về không). Luật `transition:
   none !important` ở khối reduced-motion đã lo phần thời lượng; chỗ này chỉ
   bảo đảm không có trạng thái nào kẹt ở vị trí lệch 4px. */
@media (prefers-reduced-motion: reduce) {
  .tip-panel { transform: none; }
}
/* Chart đã được Plot thay bản tương tác: nhãn điểm tĩnh máy chủ vẽ đè lên
   tooltip của Plot — ẩn phần meta tĩnh đi, dữ liệu vẫn trong HTML nguồn. */
[data-plot-xong] .chart-meta { display: none; }

/* ── 9. Section ───────────────────────────────────────────────────── */
.section { padding-block: var(--s7) 0; }
.section:last-of-type { padding-bottom: var(--s7); }
.section-head { margin-bottom: var(--s5); display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.section-head h2 {
  margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 750; letter-spacing: -.025em;
}
.section-head h2 i {
  font: 700 11px/1 var(--mono); font-style: normal; color: var(--cobalt);
  letter-spacing: .04em; border: 1px solid var(--seal-line);
  padding: 5px 7px; border-radius: 7px; vertical-align: 3px; margin-right: var(--s2);
}
.section-head p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: var(--measure); }

/* ── 10. Bảng ─────────────────────────────────────────────────────── */
/* Bảng nằm TRONG thẻ trắng; chỉ kẻ ngang; một đường dọc duy nhất đóng khung
   cột "Cao nhất". Bảng tính vẽ ô vì mọi ô ngang giá trị nhau — biểu của bàn
   dữ liệu chỉ kẻ để mắt trượt theo dòng. */
.tablewrap { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-1); padding: var(--s4) var(--s5); }
.table-note { padding: 0 0 var(--s3); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.tfoot { margin: var(--s3) 0 0; font: 500 11.5px/1.6 var(--mono); color: var(--muted); }
.scroller { overflow-x: auto; overscroll-behavior-x: contain; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; padding: var(--s3) 0; font-size: 13px; color: var(--muted); }
thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); text-align: right; padding: var(--s2) var(--s3);
  white-space: nowrap; border-bottom: 1.5px solid var(--ink);
}
thead th small {
  display: block; font: 400 9.5px var(--mono); letter-spacing: .04em;
  text-transform: none; color: var(--muted); margin-top: 2px;
}
thead th:first-child { text-align: left; }
thead th.on, td.on { background: var(--cobalt-soft); }
thead th.on { box-shadow: inset 0 -2px 0 var(--cobalt); }
td { padding: var(--s3); text-align: right; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
td:first-child { text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr td, tbody tr .stick { transition: background-color var(--t-nhanh) ease; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:hover td.on { background: #D8E2F9; }

.stick { position: sticky; left: 0; background: var(--surface); z-index: 1;
         padding: var(--s3); text-align: left; font-weight: 400; }
tbody tr:hover .stick { background: var(--surface-2); }

.bank { display: flex; align-items: flex-start; gap: var(--s2); }
.bank-id { min-width: 0; }
/* Loại hình và sparkline nằm CÙNG một dòng. Sparkline rộng 64px, mà dòng này
   thừa hưởng bề rộng co giãn của ô tên, nên không ghim thì nó rớt xuống dòng
   dưới và đứng mồ côi bên dưới chữ "Cổ phần" — thấy rõ ở hàng SHB. */
.gop .bank-meta { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; }
/* Monogram trung tính — mã ngân hàng, một màu mực, KHÔNG logo, KHÔNG màu
   riêng từng bank (docs/logo-ngan-hang-va-ban-quyen.md; test khoá). */
.mono-box {
  flex: none; display: inline-grid; place-items: center;
  min-width: 30px; height: 20px; padding-inline: 3px;
  border: 1px solid var(--rule-strong); border-radius: 6px; color: var(--ink-2);
  font: 600 9.5px/1 var(--mono); letter-spacing: .06em; background: var(--surface);
}
.bank-meta .mono-box { height: 18px; min-width: 30px; margin-right: var(--s2); vertical-align: middle; }
.bank-name { font-weight: 650; font-size: 15px; color: var(--ink); }
.bank-name a { color: inherit; text-decoration: none; }
.bank-name a:hover { color: var(--cobalt); text-decoration: underline; }
.bank-meta { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

.rate { font-weight: 600; font-size: 16px; color: var(--ink); }

/* Dấu "đk": DẤU THỊ GIÁC, không phải control. Nó chỉ báo ô này còn điều kiện;
   nguyên văn nằm trong biên nhận của hàng (một <details> mỗi hàng). Trước đây
   mỗi dấu là một <button> có tooltip — 246 nút trên /so-sanh/, tức 246 lần bấm
   Tab. Bỏ tooltip CSS luôn: hai đường dẫn tới cùng một nội dung, đường kém hơn
   phải biến mất. */
.fnote {
  font: 600 9.5px var(--mono); color: var(--warn); vertical-align: super;
  margin-left: 1px; cursor: help; padding: 0 1px;
}
.rate.na { color: var(--muted); font-weight: 400; }
td.on .rate.na { color: var(--ink-2); }
.rate.top { box-shadow: inset 0 -3px 0 var(--cobalt); font-weight: 700; }
.cellnote { display: block; font: 400 11px/1.5 var(--mono); color: var(--muted); margin-top: 2px; }
td.on .cellnote { color: var(--ink-2); }

/* Dải chú giải */
.legend {
  margin: 0 0 var(--s3); padding-bottom: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  border-bottom: 1px solid var(--rule);
}
.legend > div { display: flex; align-items: baseline; gap: var(--s2); }
.legend dt {
  font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.legend dd { margin: 0; font-size: 13px; color: var(--ink); white-space: nowrap; }

/* ── 11. Bảng gộp ─────────────────────────────────────────────────── */
.gop table { table-layout: auto; }
.gop thead th, .gop td { text-align: left; }
/* Ba cột SỐ canh phải, tiêu đề canh phải theo. Người đọc quét dọc một cột để
   so độ lớn; canh trái thì "10,50" và "9,00" lệch nhau đúng một chữ số và mắt
   phải đọc từng con số thay vì nhìn hình. Cột chữ (ngân hàng, nguồn, áp dụng)
   giữ canh trái. */
.gop thead th.c-cao, .gop thead th[data-xep="web"], .gop thead th.c-bao,
.gop td.c-cao, .gop td.c-web, .gop td.c-bao { text-align: right; }
.gop thead th.c-cao button, .gop thead th[data-xep="web"] button,
.gop thead th.c-bao button { justify-content: flex-end; width: 100%; }
.gop td.c-cao .cellnote, .gop td.c-web .cellnote, .gop td.c-bao .cellnote,
.gop thead th.c-cao small, .gop thead th[data-xep="web"] small,
.gop thead th.c-bao small { text-align: right; }
.gop td, .gop th { vertical-align: top; }
.gop td, .gop .stick { padding-block: var(--s4); }
.gop .c-no, .gop thead .c-no {
  width: 40px; text-align: right; padding-right: 0;
  font: 600 12px/1.35 var(--mono); color: var(--muted);
}
.gop .stick { min-width: 150px; }
.gop .group-sep td {
  background: var(--head); border-block: 1px solid var(--rule-strong);
  padding: var(--s3) var(--s4); font-size: 13px; color: var(--ink-2); box-shadow: none;
}
.gop .group-sep td b { color: var(--ink); font-weight: 650; }
.gcard-sep {
  background: var(--head); border-block: 1px solid var(--rule-strong);
  padding: var(--s3); font-size: 13px; color: var(--ink-2); list-style: none;
}
.gop thead th[data-xep] { padding: 0; }
.gop thead th[data-xep] button {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; cursor: pointer; width: 100%;
  text-align: inherit; padding: var(--s2) var(--s3) 0;
  display: flex; align-items: center; gap: 4px;
}
.gop thead th[data-xep] small { padding: 0 var(--s3) var(--s2); }
.gop thead th[data-xep] button:hover { color: var(--cobalt); }
/* Mũi tên nằm trong span aria-hidden BÊN TRONG nút — vẽ bằng ::after của
   chính nút thì nó lọt vào accessible name và trình đọc màn hình đọc
   "Ngân hàng ↕" (APG sortable-table). */
.gop thead th[data-xep] .sico::after {
  content: ""; display: inline-block; width: 12px; height: 12px;
  vertical-align: -2px; background: currentColor; opacity: .45;
  -webkit-mask: var(--ic-sort) center / contain no-repeat;
  mask: var(--ic-sort) center / contain no-repeat;
}
.gop thead th[aria-sort="descending"] .sico::after {
  opacity: 1; -webkit-mask-image: var(--ic-down); mask-image: var(--ic-down);
}
.gop thead th[aria-sort="ascending"] .sico::after {
  opacity: 1; -webkit-mask-image: var(--ic-up); mask-image: var(--ic-up);
}
.gop thead th[aria-sort]:not([aria-sort="none"]) button { color: var(--cobalt); }

.gop .c-cao { box-shadow: inset 1px 0 0 var(--seal-line), inset -1px 0 0 var(--seal-line); }
.gop thead .c-cao { box-shadow: inset 1px 0 0 var(--seal-line), inset -1px 0 0 var(--seal-line), inset 0 -1.5px 0 var(--cobalt); }
.gop thead th:nth-child(2) { width: 18%; }
.gop thead th:nth-child(3) { width: 15%; }
.gop thead th:nth-child(4) { width: 17%; }
.gop thead th:nth-child(5) { width: 14%; }
.gop thead th:nth-child(6) { width: 19%; }
.gop thead th:nth-child(7) { width: 17%; }
.gop .c-nhan .tag { white-space: nowrap; }
.gop .c-ad { font-size: 13.5px; color: var(--ink-2); }
.muc {
  display: block; font: 800 26px/1.1 var(--sans); letter-spacing: -.025em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.muc.lead { color: var(--cobalt); }
.muc.sm { font-size: 19px; }
.gop .rate.sub { font: 650 15px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gop tr.r-top .c-no { color: var(--cobalt); font-weight: 700; font-size: 13px; }
/* Ngân hàng vừa điều chỉnh biểu: một vạch mực ở mép trái + một nhãn có số.
   KHÔNG dùng màu nền cả hàng — hàng đổi giá không phải hàng cảnh báo, và tô
   nền là mượn ngôn ngữ của lỗi. */
.gop tr.r-doi .stick { box-shadow: inset 3px 0 0 var(--cobalt); }
.r-doi-chip {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 3px;
  font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--cobalt); background: var(--cobalt-soft);
  padding: 1px 6px 1px 4px; border-radius: 999px; cursor: help;
}
.r-doi-chip .li { width: 11px; height: 11px; }
/* Nháy MỘT lần khi hàng vào tầm mắt — Motion đặt biến này rồi gỡ ra. */
@keyframes doi-nhay { 0% { background: var(--cobalt-soft); } 100% { background: transparent; } }
.gop tr.r-doi[data-nhay] td, .gop tr.r-doi[data-nhay] .stick { animation: doi-nhay var(--t-nhay) var(--ease-vao); }
/* Thân cột đang xếp — mắt phải biết bảng đang xếp theo cột nào (uswds
   usa-table data-sort-active). Chú thích trên nền wash dùng --ink-2, không
   --muted (trượt AA trên nền này). */
.gop td[data-sort-active] { background: var(--wash-2); }
.gop td[data-sort-active] .cellnote { color: var(--ink-2); }
.gop tbody tr:hover td, .gop tbody tr:hover .stick { background: var(--surface-2); }

.gop-cards { display: none; list-style: none; margin: 0; padding: 0; }
/* Trạng thái đóng ≤92px: hai dòng. Dòng 1 tên + mức, dòng 2 loại hình + nhãn
   nguồn, rồi một dòng mở chi tiết. Mức lãi đứng CÙNG dòng với tên chứ không
   xuống dòng riêng — đó là chỗ tiết kiệm được 60px mỗi thẻ. */
.gcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 var(--s3); align-items: baseline;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
}
/* Nhãn nguồn ở thẻ đóng: một dòng, không xuống dòng. Nhãn dài nhất
   ("Khảo sát thị trường") là chỗ quyết định chiều cao của cả 38 thẻ. */
.gcard .nhan .tag { font-size: 10.5px; padding: 1px 6px; white-space: nowrap; }
.gcard .pos { grid-row: 1; align-self: baseline; }
.gcard .who { grid-row: 1; grid-column: 2; }
.gcard .cao { grid-row: 1; grid-column: 3; text-align: right; }
.gcard.r-top { border-left-color: var(--cobalt); }
.gcard.r-top .pos { color: var(--cobalt); font-weight: 700; }
.gcard .pos { font: 600 13px var(--mono); color: var(--muted); }
.gcard .who { min-width: 0; }
.gcard .apdung, .gcard .src { grid-column: 1 / -1; }
.gcard .nhan { grid-column: 2 / -1; }
.gcard .cao { margin-top: 0; }
.gcard .cao .muc { font-size: 22px; }
.gcard .who .bank-meta { font-size: 11.5px; }
/* Trạng thái ĐÓNG chỉ giữ: ai · bao nhiêu · nguồn nào. Mọi chú thích phụ
   ("còn N mức khác", "chưa có niêm yết đối chiếu", khu vực/số nguồn/giờ đọc)
   chỉ hiện khi thẻ mở — chúng là bằng chứng, không phải câu trả lời. */
.gcard .cao .cellnote, .gcard .nhan .cellnote { display: none; }
.gcard:has(.gc-more[open]) .cao .cellnote,
.gcard:has(.gc-more[open]) .nhan .cellnote { display: inline; }
.gcard .nhan { margin-top: 2px; }
.gcard .apdung { font-size: 13px; color: var(--ink-2); }
.gcard .nhan .cellnote { margin-left: var(--s1); }
.gcard .nhan .cellnote::before { content: "· "; }
.gcard .src { margin-top: var(--s2); font: 500 12.5px/1.7 var(--mono); color: var(--ink-2); }
.gcard .src b { font-weight: 600; color: var(--muted); }
.gcard .mono-box { display: none; }

/* Bộ lọc */
.loc { align-items: flex-end; }
.loc-ghi { flex-basis: 100%; margin: 0; min-height: 1.4em; font: 500 12.5px/1.4 var(--mono); color: var(--ink-2); }
.loc .amount input { font-size: 19px; width: 13ch; }
.loc .amount input::placeholder { font: 400 14px var(--sans); color: var(--muted); }
.amount input[aria-invalid="true"] { border-bottom-color: var(--warn); }
.loc-ghi.err { color: var(--warn); font-weight: 600; }
.stage .loc-ghi.err { color: #F2A69E; }
.so-chu {
  display: block; min-height: 1.5em; margin-top: var(--s2);
  font: 500 12px/1.5 var(--mono); color: var(--ink-2); text-transform: none; letter-spacing: 0;
}

/* ── 12. Kỳ hạn khác ──────────────────────────────────────────────── */
.terms { margin: 0; padding: 0; list-style: none; }
.terms li {
  display: grid; align-items: baseline; gap: var(--s2) var(--s5);
  grid-template-columns: 84px 124px max-content max-content 1fr;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-mau) ease;
}
.terms li:hover { background: var(--surface-2); }
.terms li:last-child { border-bottom: 0; }
.terms .t-di { justify-self: end; }
.t-ky { font: 800 21px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.t-ky i { font: 500 11px var(--mono); font-style: normal; color: var(--muted); margin-left: 5px; }
.t-muc { font: 800 21px/1 var(--sans); letter-spacing: -.03em; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.t-ai { font-size: 15px; font-weight: 650; }
.t-di a { font: 500 13px var(--sans); white-space: nowrap; }
@media (max-width: 760px) {
  .terms li { grid-template-columns: 78px 1fr; }
  .t-ai, .t-nhan, .t-di { grid-column: 2 / -1; }
  .t-nhan, .t-di { margin-top: 2px; }
}

/* ── 13. Khối gập ─────────────────────────────────────────────────── */
.fold { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.fold > summary {
  cursor: pointer; list-style: none; display: flex; gap: var(--s3);
  align-items: baseline; padding: var(--s3) var(--s5); background: var(--head);
  border-bottom: 1px solid var(--rule);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; width: 17px; height: 17px; flex: none; margin-left: auto;
  align-self: center; background: var(--cobalt);
  -webkit-mask: var(--ic-chevron) center / contain no-repeat;
  mask: var(--ic-chevron) center / contain no-repeat;
  transition: transform var(--t-vua) var(--ease-vao);
}
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary:hover .fold-k { text-decoration: underline; }
.fold-k { font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.fold-n { font-size: 13.5px; color: var(--muted); }
.fold > *:not(summary) { margin: var(--s4) var(--s5); }
.fold .tablewrap { border: 0; box-shadow: none; padding: 0; }
.fold .sub-block { border-top: 3px double var(--rule-strong); padding-top: var(--s4); }

/* ── 14. Biên nhận, nhãn ──────────────────────────────────────────── */
.receipt { border: 0; padding: 0; margin: 0; }
.receipt summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  /* 12,5px sans, không phải 11,5px mono. Đây là nút MỞ NGUỒN — thứ chứng minh
     mọi con số trên trang, và là chỗ dự án khác biệt nhất. Ở 11,5px mono nó
     đọc như chú thích kỹ thuật ai cũng lướt qua. */
  gap: 5px; font: 500 12.5px var(--sans); color: var(--muted);
}
.receipt summary::-webkit-details-marker { display: none; }
.receipt summary:hover { color: var(--cobalt); }
.receipt[open] summary { color: var(--cobalt); }
.mark { width: 9px; height: 9px; flex: none; border: 1.5px solid var(--muted); border-radius: 3px; }
.mark.done { background: var(--emerald); border-color: var(--emerald);
  display: inline-grid; place-items: center; }
/* Dấu tick thật, không chỉ màu: High Contrast xoá nền thì trạng thái vẫn còn
   (mục forced-colors trả nó về glyph vì mask không dựng được ở chế độ đó). */
.mark.done::after {
  content: ""; width: 7px; height: 7px; background: #fff;
  -webkit-mask: var(--ic-check) center / contain no-repeat;
  mask: var(--ic-check) center / contain no-repeat;
}
.receipt-body {
  margin-top: var(--s2); padding: var(--s3); background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--r-sm); font-size: 13px; text-align: left;
}
.receipt-body dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px var(--s3); }
.receipt-body dt { font: 500 11px var(--mono); color: var(--muted); white-space: nowrap; }
.receipt-body dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

.tag {
  display: inline-block; font: 600 11px var(--sans); letter-spacing: .01em;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--rule-strong); color: var(--ink-2); background: var(--surface);
}
.tag-seal { color: var(--cobalt); background: var(--cobalt-soft); border-color: var(--seal-line); }
.tag-flag { color: var(--warn); background: var(--warn-soft); border-color: currentColor; }
.tag-ok { color: var(--emerald); background: var(--emerald-soft); border-color: #9AD8C2; }

/* ── 15. Ba sự thật (trang kỳ hạn) ────────────────────────────────── */
.facts {
  margin: var(--s6) 0 0; display: grid; gap: var(--s4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fact {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow-1); padding: var(--s4) var(--s5);
}
.fact dt {
  font: 600 10.5px/1.5 var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.fact dd { margin: var(--s2) 0 0; }
.fact-n {
  display: block; color: var(--cobalt);
  font: 800 clamp(30px, 3.4vw, 40px)/1.05 var(--sans);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.fact-n i { font: 600 12.5px var(--mono); font-style: normal; letter-spacing: 0; color: var(--ink-2); margin-left: 6px; }
.fact-who { display: block; margin-top: var(--s2); font-size: 15px; font-weight: 650; color: var(--ink); }
.fact-who a { color: inherit; text-decoration-color: var(--seal-line); }
.fact-sub { display: block; margin-top: 3px; font: 500 11.5px/1.5 var(--mono); color: var(--muted); }
.fact-warn {
  display: block; margin-top: var(--s3); padding-left: var(--s2);
  border-left: 2px solid var(--amber); font-size: 12.5px; color: var(--amber);
}
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

/* ── 16. Nguồn và phương pháp (drawer) ────────────────────────────── */
.method { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.method > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: var(--s3); padding: var(--s3) var(--s5);
}
.method > summary::-webkit-details-marker { display: none; }
.method > summary::after {
  content: ""; width: 17px; height: 17px; flex: none; margin-left: auto;
  align-self: center; background: var(--cobalt);
  -webkit-mask: var(--ic-chevron) center / contain no-repeat;
  mask: var(--ic-chevron) center / contain no-repeat;
  transition: transform var(--t-vua) var(--ease-vao);
}
.method[open] > summary::after { transform: rotate(180deg); }
.method-k { font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.method-n { font-size: 13px; color: var(--muted); }
.method-body { padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--rule); }

.declare { border: 0; }
.declare-head {
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-bottom: var(--s3);
}
.declare dl { margin: 0; }
.declare div {
  display: grid; grid-template-columns: 128px 1fr; gap: var(--s4);
  padding: var(--s3) 0; border-top: 1px solid var(--rule);
}
.declare dt {
  font: 600 10.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.declare dd { margin: 0; font-size: 14px; color: var(--ink-2); }
.declare dd b { color: var(--ink); font-weight: 650; }
.declare .missing dd { color: var(--warn); }

/* ── 17. Văn bản, nhận định, quảng cáo ────────────────────────────── */
.prose { max-width: var(--measure); }
/* Canh đều hai bên cho văn xuôi dài — và CHỈ cho văn xuôi dài.
   Tiếng Việt không ngắt từ được (không có từ điển hyphenation cho vi trong
   trình duyệt), nên canh đều trên cột hẹp sẽ giãn khoảng trắng thành những
   "dòng sông" trắng chạy dọc đoạn. Điều kiện an toàn: cột đủ rộng (~70 ký tự
   mỗi dòng ở --measure) và màn hình từ 768px. Dưới ngưỡng đó giữ canh trái.
   `text-wrap: pretty` để trình duyệt tránh dòng cuối trơ một từ. */
@media (min-width: 768px) {
  .prose > p, .method-body > p, .seo-body > p, .reading > p:not(.rd-k) {
    text-align: justify; text-justify: inter-word;
    hyphens: none; text-wrap: pretty;
  }
  /* Câu ngắn thì canh đều chỉ làm nó trông vỡ — một dòng rưỡi không có đủ
     khoảng trắng để phân phối. */
  .prose > p:first-child:last-child { text-align: left; }
}
/* Ô chú thích, ghi chú nguồn, caption: luôn canh trái. Chúng là nhãn, không
   phải văn xuôi — canh đều làm chúng trông như đoạn văn bị cắt. */
.cellnote, .fold-n, .method-n, .sp-s, .kicker, .scope-note { text-align: left; }

/* ── Bài phân tích: bố cục toà soạn ───────────────────────────────────
   Cột chữ 62–70 ký tự + đường bằng chứng 280px. Đường bằng chứng KHÔNG phải
   trang trí: mỗi phần chỉ đứng được nếu nguồn của nó nằm ngay cạnh, đọc được
   mà không phải rời chỗ đang đọc. */
.article { padding-block: var(--s6) var(--s8); }
.art-main { max-width: 68ch; }
.art-sec { margin: var(--s7) 0 0; }
.art-sec h2 {
  display: flex; align-items: baseline; gap: var(--s3);
  font-size: 24px; font-weight: 750; letter-spacing: -.024em;
  margin: 0 0 var(--s4); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.art-sec h2 i {
  font: 600 11px var(--mono); font-style: normal; letter-spacing: .08em;
  color: var(--cobalt); background: var(--cobalt-soft);
  padding: 3px 7px; border-radius: 6px; flex: none;
}

/* Dữ kiện: danh sách, mỗi dòng một con số, đọc lướt được. */
.dukien { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.dukien li {
  position: relative; padding: var(--s2) 0 var(--s2) var(--s5);
  border-bottom: 1px solid var(--rule); font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}
.dukien li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 10px; height: 2px; background: var(--cobalt);
}
.dukien li:last-child { border-bottom: 0; }

/* Diễn giải: văn xuôi, có nhãn — người đọc phải biết chỗ nào là suy luận. */
.reading { margin: var(--s4) 0; }
.rd-k {
  font: 650 13px var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--muted); margin: 0 0 var(--s2);
}
.reading p + p { margin-top: var(--s3); }
.reading > p:not(.rd-k) { color: var(--ink-2); }

/* Giới hạn: khung riêng, màu caveat. Không phải cảnh báo lỗi — là chỗ bài
   tự nói ra nó chưa biết gì. */
.limits {
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  background: var(--amber-soft); border-radius: var(--r-sm);
  border-left: 3px solid var(--amber); font-size: 14px; color: var(--ink-2);
}
.lim-k {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s2);
  font: 700 13px var(--sans); color: var(--amber);
}
.lim-k .li { width: 13px; height: 13px; }
.limits p + p { margin-top: var(--s2); }

/* Bốn con số của bản — hộp tóm tắt, tối đa 4 dòng. */
.keyfind {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.kf-h {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s3);
  font: 700 13.5px var(--sans); color: var(--cobalt);
}
.kf-h .li { width: 14px; height: 14px; }
.keyfind ul { margin: 0; padding: 0; list-style: none; }
.keyfind li {
  padding: var(--s2) 0; border-top: 1px solid var(--rule);
  font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Byline: hàng dữ kiện xuất bản. Mono cho nhãn, sans cho giá trị. */
.byline {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  padding: var(--s3) 0; border-block: 1px solid var(--rule);
  font-size: 13.5px; color: var(--ink-2);
}
.byline i {
  display: block; font: 600 10px var(--mono); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.rail { margin: var(--s4) 0 0; }
.rail-k {
  font: 650 12.5px var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--muted); margin: 0 0 var(--s2);
}
.rail-item {
  padding: var(--s2) 0 var(--s2) var(--s3); margin-bottom: var(--s2);
  border-left: 2px solid var(--rule);
}
.ri-t { margin: 0; font-size: 13px; font-weight: 650; color: var(--ink); }
.ri-n { margin: 0; font: 700 15px var(--sans); font-variant-numeric: tabular-nums; color: var(--cobalt); }
.ri-s { margin: 0; font-size: 11.5px; color: var(--muted); }
.ri-s .li { width: 11px; height: 11px; vertical-align: -1px; }

@media (min-width: 1060px) {
  /* Hai cột: chữ và bằng chứng. Rail nằm NGANG phần của nó, không dồn cuối
     bài — nguồn phải ở cạnh câu mà nó chống đỡ. */
  .art-main { max-width: none; display: grid; column-gap: var(--s7);
              grid-template-columns: minmax(0, 68ch) 280px; }
  /* `.tu-dong` phải được KHAI cột. Không khai thì lưới tự đặt nó vào cột 2
     (cột bằng chứng, rộng 280px) — hộp chú thích byline bị bóp thành một cột
     hẹp nổi lơ lửng bên phải, và nó đẩy khối "bốn con số" xuống, chừa lại một
     khoảng trống 100px giữa hai khối liền nhau. Đo 12/08 trên trang thật. */
  .byline, .keyfind, .tu-dong, .art-main > .lede, .scope-note { grid-column: 1; }
  .art-sec {
    grid-column: 1 / -1; display: grid; column-gap: var(--s7);
    grid-template-columns: minmax(0, 68ch) 280px;
  }
  .art-sec > h2 { grid-column: 1 / -1; }
  .art-sec > .dukien, .art-sec > .reading, .art-sec > .limits { grid-column: 1; }
  .art-sec > .rail { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; }
}
.prose h2 { margin: var(--s6) 0 var(--s3); font-size: 21px; font-weight: 750; letter-spacing: -.024em; }
.prose h3 { margin: var(--s5) 0 var(--s2); font-size: 17px; font-weight: 650; }
.prose p, .prose li { color: var(--ink-2); }
.prose b { color: var(--ink); }
.prose ul { padding-left: var(--s5); }
.prose li { margin: var(--s2) 0; }

.notes { margin: var(--s6) 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.notes::before {
  content: "Nhận định"; display: block; padding: var(--s3) 0;
  font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.notes li {
  padding: var(--s3) 0 var(--s3) var(--s6); border-bottom: 1px solid var(--rule);
  font-size: 15px; color: var(--ink-2); position: relative;
}
.notes li::before {
  content: counter(list-item, decimal-leading-zero);
  position: absolute; left: 0; top: var(--s3);
  font: 600 12px var(--mono); color: var(--cobalt);
}

/* Vị trí đối tác — một thẻ thuộc hệ, KHÔNG placeholder nét đứt. */
.sponsor {
  margin-block: var(--s7); display: flex; align-items: center; gap: var(--s5);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow-1);
  padding: var(--s4) var(--s5); flex-wrap: wrap;
}
.sp-k {
  font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cobalt); border: 1px solid var(--seal-line); border-radius: 999px;
  padding: 3px 10px; background: var(--cobalt-soft);
}
.sp-body { flex: 1; min-width: 220px; }
.sp-t { margin: 0; font-weight: 650; font-size: 15px; }
.sp-s { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); max-width: 60ch; }

.ad { margin-block: var(--s7); padding: var(--s3) 0; }
.ad::before {
  content: "Được tài trợ"; display: block; font: 600 10.5px var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s2);
}
.ad .slot {
  min-height: 90px; display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: 13px; background: var(--surface);
  border: 1px dashed var(--rule-strong); border-radius: var(--r); padding: var(--s4);
}

/* ── 18. Bộ điều khiển chung ──────────────────────────────────────── */
.controls {
  display: flex; gap: var(--s5); flex-wrap: wrap; align-items: flex-end;
  padding-block: var(--s4); border-block: 1px solid var(--rule);
}
.control { display: grid; gap: var(--s2); }
.control > span:first-of-type {
  font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; text-transform: none; }
.chips a, .chips button {
  font: 500 14px var(--sans); padding: 7px 14px; background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 999px; cursor: pointer;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-mau) ease, color var(--t-mau) ease, border-color var(--t-mau) ease;
}
.chips a:hover, .chips button:hover { background: var(--cobalt-soft); color: var(--cobalt); border-color: var(--seal-line); }
.chips [aria-current="page"], .chips [aria-pressed="true"] {
  background: var(--cobalt); border-color: var(--cobalt); color: #fff; font-weight: 600;
}
.amount { display: flex; align-items: baseline; gap: var(--s2); }
.amount input {
  font: 800 22px var(--sans); font-variant-numeric: tabular-nums;
  border: 0; border-bottom: 2px solid var(--ink); background: transparent;
  padding: 2px 0; width: 15ch; color: var(--ink);
}
.amount input:focus {
  outline: 2px solid var(--cobalt); outline-offset: 3px;
  border-bottom-color: var(--cobalt);
}
.amount span { font-weight: 600; color: var(--ink-2); }

/* ── 19. Thang đo trang kỳ hạn ────────────────────────────────────── */
.scale-axis { position: relative; height: 30px; border-bottom: 1px solid var(--rule-strong); margin-bottom: var(--s2); overflow: hidden; }
.scale-axis span { position: absolute; bottom: 3px; transform: translateX(-50%); font: 500 10.5px var(--mono); color: var(--muted); }
.scale-axis span::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 1px; height: 4px; background: var(--rule-strong); }
.scale-axis .median { color: var(--cobalt); font-weight: 600; }
.scale-axis .median::after { background: var(--cobalt); height: 7px; bottom: -7px; }
.scale { position: relative; height: 22px; }
.scale::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--rule); }
.scale i { position: absolute; top: 2px; width: 3px; height: 18px; background: var(--ink); transform: translateX(-1px); border-radius: 2px; }
.scale i.lead { background: var(--cobalt); width: 4px; }
/* Khoảng tới mức dẫn đầu — dot plot của FT là chấm + KHOẢNG, không chỉ chấm
   (visual-vocabulary: Dot plot). Gạch đứt cobalt nhạt, KHÔNG đỏ: khoảng cách
   là dữ liệu, không phải cảnh báo. left/width đã render sẵn từ máy chủ. */
.scale u {
  position: absolute; top: 9.5px; height: 3px; text-decoration: none;
  background: repeating-linear-gradient(90deg, var(--seal-line) 0 4px, transparent 4px 8px);
}

/* ── 20. CTA, chân trang, bottom nav ──────────────────────────────── */
.cta h2 { margin: 0 0 var(--s2); font-size: clamp(21px, 2.4vw, 28px); font-weight: 750; letter-spacing: -.028em; }
.cta p { margin: 0 0 var(--s5); color: var(--ink-2); max-width: var(--measure); }
.btn {
  display: inline-block; background: var(--cobalt); color: #fff;
  padding: var(--s3) var(--s6); font-weight: 600; text-decoration: none;
  border-radius: 999px; transition: background-color var(--t-nhanh) ease;
}
.btn:hover { background: var(--cobalt-strong); color: #fff; }

.site-foot { border-top: 1px solid var(--rule); background: var(--surface); margin-top: var(--s8); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s6); padding-block: var(--s6); }
.foot-grid p { margin: var(--s2) 0 0; color: var(--muted); font-size: 14px; max-width: 40ch; }
.foot-col h3 { margin: 0 0 var(--s3); font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.foot-col nav { display: grid; gap: var(--s2); }
.foot-col a { color: var(--ink-2); font-size: 14.5px; text-decoration: none; }
.foot-col a:hover { color: var(--cobalt); text-decoration: underline; }
.legal { border-top: 1px solid var(--rule); padding-block: var(--s4) var(--s6); }
.legal p { margin: 0; font-size: 13px; color: var(--muted); max-width: 80ch; }
.legal .stamp { margin-top: var(--s2); font: 500 12px var(--mono); }

/* Bottom nav — chỉ điện thoại. 4 tab, icon stroke, tab đang chọn cobalt. */
.bottomnav {
  display: none; position: fixed; inset: auto 0 0 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--rule);
  padding: 6px max(env(safe-area-inset-left), 8px)
           max(env(safe-area-inset-bottom), 6px) max(env(safe-area-inset-right), 8px);
  box-shadow: 0 -8px 24px -16px rgba(15, 23, 41, .25);
}
.bottomnav a {
  flex: 1; display: grid; justify-items: center; gap: 2px;
  padding: 5px 2px; color: var(--muted); text-decoration: none;
  font: 500 10px/1.2 var(--sans); border-radius: var(--r-sm);
}
.bottomnav a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }
.bottomnav a[aria-current="page"] { color: var(--cobalt); font-weight: 650; }

/* ── 21. Chuyển động ──────────────────────────────────────────────── */
/* Danh sách đóng — chuyển động chỉ khi GIẢI THÍCH một thay đổi:
   1. Mở biên nhận/khối gập (120ms). 2. FLIP khi xếp lại hàng (app.js, 260ms).
   3. Mờ chồng khi đổi kỳ hạn (view transition). 4. Nền hàng khi trỏ (90ms).
   5. Số ở thẻ kết quả đổi giá trị: nhấp nháy MỘT lần rồi tắt.
   KHÔNG ticker, particle, đếm số, hover-lift, skeleton. */
.receipt-body { animation: mo var(--t-nhanh) var(--ease-vao); }
/* Accordion 260ms trong dải 240–320ms của quy chuẩn chuyển động. */
.fold[open] > *:not(summary), .method[open] .method-body, .ctl-fold[open] .controls { animation: mo var(--t-cham) var(--ease-mo); }
@keyframes mo { from { opacity: 0; transform: translateY(-3px); } }

@keyframes so-doi { 0% { background: rgba(110, 151, 255, .28); } 100% { background: transparent; } }
.so-vua-doi { animation: so-doi var(--t-nhay) var(--ease-vao); border-radius: 6px; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .18s; animation-timing-function: var(--ease-mo);
}

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

/* ── 21b. Lớp kế thừa — trang kỳ hạn/ngân hàng/công cụ ────────────── */
/* Các template chưa viết lại theo hướng mới vẫn dùng lede-block/kicker/
   scope-note. Giữ chúng sống trong hệ token mới; gỡ khi từng trang được
   chuyển sang sân khấu. */
.lede-block { padding-block: var(--s6) var(--s5); }
.lede-block h1, main > .wrap > h1 {
  margin: 0 0 var(--s3);
  font-size: clamp(28px, 3.8vw, 44px); line-height: 1.12;
  font-weight: 800; letter-spacing: -.03em; text-wrap: balance; max-width: 22ch;
}
.kicker {
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 var(--s3);
}
.lede { margin: 0; max-width: var(--measure); font-size: clamp(16px, 1.5vw, 18px); color: var(--ink-2); }
.lede b { color: var(--ink); font-weight: 600; }
.scope-note {
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  background: var(--amber-soft); border-left: 3px solid var(--amber);
  border-radius: var(--r-sm);
  max-width: var(--measure); font-size: 14px; color: var(--ink-2);
}
.scope-note b { color: var(--amber); font-weight: 650; }
@media (min-width: 901px) {
  .lede-block:has(> .scope-note) {
    display: grid; column-gap: var(--s8); align-items: start;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }
  .lede-block:has(> .scope-note) > .kicker { grid-area: 1 / 1 / 2 / -1; }
  .lede-block:has(> .scope-note) > h1 { grid-area: 2 / 1 / 3 / 2; max-width: 15ch; }
  .lede-block:has(> .scope-note) > .lede { grid-area: 3 / 1 / 4 / 2; }
  .lede-block:has(> .scope-note) > .scope-note { grid-area: 2 / 2 / 4 / 3; margin-top: 6px; align-self: start; }
  .lede-block:has(> .scope-note) > .facts { grid-area: 4 / 1 / 5 / -1; }

  /* Trang nhận định: tiêu đề đã nằm trong sân khấu dữ liệu phía trên, khối
     này chỉ còn lede và MỘT ô phạm vi. Quy tắc riêng vì lưới chung ở trên gán
     hàng cứng theo bố cục có kicker + h1. */
  .nd-lede { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .nd-lede > .lede { grid-area: 1 / 1 / 2 / 2; }
  .nd-lede > .scope-note { grid-area: 1 / 2 / 2 / 3; margin: 0; }
}

/* ── 22. Màn hình nhỏ ─────────────────────────────────────────────── */
.ranklist { display: none; }
/* Trừ khi nó là nội dung DUY NHẤT của mục — xem chú thích ở so-sanh.html.
   Desktop có chỗ rộng hơn nên hàng dãn ra thành ba cột thật thay vì xếp dọc. */
.ranklist-luon { display: block; }
@media (min-width: 901px) {
  /* Ô nào vào chỗ nấy, khai bằng VÙNG chứ không để lưới tự rải. Hàng có bảy
     phần tử; một lưới bốn cột không khai vùng sẽ đẩy ba phần tử thừa xuống các
     hàng ngầm ở những cột khác nhau tuỳ hàng đó có `cond` hay không — nên mười
     hàng lệch mười kiểu. */
  .ranklist-luon .rankrow {
    grid-template-columns: 34px minmax(0, 1fr) 92px 186px 196px;
    grid-template-areas:
      "pos who  rate lai    behind"
      "pos cond cond cond   cond"
      "pos ev   ev   ev     ev";
    align-items: center; gap: var(--s2) var(--s4);
  }
  .ranklist-luon .rankrow .pos { grid-area: pos; align-self: start; padding-top: 10px; }
  .ranklist-luon .rankrow .who { grid-area: who; }
  .ranklist-luon .rankrow .rate { grid-area: rate; text-align: right; }
  .ranklist-luon .rankrow .lai { grid-area: lai; text-align: right; }
  .ranklist-luon .rankrow .behind { grid-area: behind; text-align: right; }
  .ranklist-luon .rankrow .cond { grid-area: cond; }
  .ranklist-luon .rankrow .ev { grid-area: ev; }
}
.rankrow {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2) var(--s3);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.rankrow .pos { font: 600 13px var(--mono); color: var(--ink-2); }
.rankrow .rate { font-size: 21px; }
.rankrow .who { min-width: 0; }
.rankrow .cond { grid-column: 2 / -1; font-size: 13px; color: var(--warn); }
.rankrow .ev { grid-column: 2 / -1; }
/* 13,5px sans cho CHỮ, mono chỉ cho SỐ. Cả cụm để mono 12,5px thì "kém 0,1
   điểm · 1 triệu đồng mỗi tỷ" đọc như dòng log — mono giãn chữ cái nên ở cỡ
   nhỏ nó vừa dài hơn vừa khó đọc hơn sans cùng cỡ. */
.rankrow .behind, .rankrow .lai {
  grid-column: 2 / -1; font: 500 13.5px var(--sans); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rankrow .lai b { font-weight: 700; color: var(--ink); }
.rankrow .bank-meta, .rankrow .receipt summary { color: var(--ink-2); }

@media (min-width: 901px) {
  .gop .scroller { overflow-x: visible; }
}
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .declare div { grid-template-columns: 1fr; gap: var(--s1); }
  .matrix { display: none; }
  .ranklist { display: block; }
  .gop { display: none; }
  .gop-cards { display: block; }
  .stage-grid { grid-template-columns: 1fr; }
  /* Phải nhắc lại với ĐỦ độ cụ thể: `.stage-slim .stage-grid` ở phần trên là
     hai lớp, luật một lớp ở đây không thắng được dù nằm sau. Hậu quả đo ở
     390px: hero trang kỳ hạn vẫn hai cột 186px + 124px, nhãn "Chính thức cao
     nhất · 6 tháng" vỡ ba dòng, "35.500.000 đ tiền lãi / 1 tỷ" vỡ ba dòng bỏ
     lại chữ "tỷ" mồ côi. Hai khối cùng đòi được đọc trước thì không khối nào
     được đọc. */
  .stage-slim .stage-grid { grid-template-columns: 1fr; gap: var(--s4); }
  /* Khối kết quả thành DẢI NGANG: logo, mức, tiền lãi trên một hàng đọc được
     thay vì một cột hẹp bẻ chữ. */
  .stage-slim .stage-ans { display: flex; flex-wrap: wrap; align-items: baseline;
                           gap: var(--s2) var(--s4); }
  .stage-slim .stage-ans > * { min-width: 0; }
  .rank10 li { grid-template-columns: 24px auto 1fr 84px; }
  .r10-lai { display: none; }
}
/* Kích thước chạm — USWDS đặt 48px để vượt mốc WCAG 44px
   (uswds-core/src/styles/variables/size-touch-target.scss). Áp theo THIẾT BỊ
   (pointer: coarse) chứ không theo bề rộng: tablet ngang 1024px vẫn là ngón
   tay. Không áp cho .fnote (dấu "đk" trong dòng chữ — phóng nó là vỡ dòng);
   thay vào đó nới vùng chạm bằng ::before phủ quanh nút. */
@media (pointer: coarse) {
  .chips a, .chips button { min-height: 44px; padding-block: 10px; }
  .fold > summary, .method > summary { min-height: 48px; align-items: center; }
  .receipt summary { min-height: 44px; align-items: center; display: inline-flex; }
  .bottomnav a { min-height: 48px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; padding-bottom: 76px; }
  .bottomnav { display: flex; }
  .foot-grid { grid-template-columns: 1fr; }
  .head-top { min-height: 52px; }
  /* KHÔNG nav cuộn ngang — điều hướng cấp một nằm ở bottom nav. */
  .site-head nav { display: none; }
  .head-time { display: none; }
  .stage { margin-inline: calc(var(--gutter) * -1 + 8px); border-radius: var(--r); padding: var(--s5) var(--s4); }
  .controls { gap: var(--s4); }
  .control { width: 100%; }
  .chips { width: 100%; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chips a, .chips button { flex: none; scroll-snap-align: start; }
  .ck-num { font-size: 44px; }
  .ctl-fold > summary { display: block; }
  .stage .ck { padding: var(--s4); }
  /* Fade mép phải cho dãy chip cuộn — chỉ báo còn nội dung phía sau. */
  .chips-cuon {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
            mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .fold > *:not(summary) { margin-inline: var(--s3); }
  .gcard { padding-inline: 0; padding-left: var(--s3); }
  .rank10 li { padding-inline: var(--s2); }
  .btn { display: block; text-align: center; }
}
/* Windows High Contrast xoá màu nền: chip đang chọn, thanh xếp hạng và vạch
   thang đo biến mất nếu chỉ truyền trạng thái bằng nền (govuk warning-text
   _mixin.scss; uswds usa-button). */
@media (forced-colors: active) {
  .r10-bar i, .ck-bar .b i, .scale i, .dev i, .barcode i {
    forced-color-adjust: none; background: CanvasText;
  }
  .chips [aria-pressed="true"], .chips [aria-current="page"] {
    outline: 2px solid; outline-offset: -3px;
  }
  .delta-chip { border: 1px solid ButtonText; }
  /* mask-image không dựng ở High Contrast (nền bị ép về Canvas) → icon biến
     mất. Trả về glyph Unicode: xấu hơn nhưng còn nhìn thấy. */
  .ctl-fold > summary::after, .fold > summary::after, .method > summary::after,
  .gop thead th[data-xep] .sico::after, .mark.done::after {
    -webkit-mask: none; mask: none; background: none;
    width: auto; height: auto; color: CanvasText;
  }
  .ctl-fold > summary::after, .fold > summary::after,
  .method > summary::after { content: "▾"; }
  .gop thead th[data-xep] .sico::after { content: "↕"; }
  .gop thead th[aria-sort="descending"] .sico::after { content: "↓"; }
  .gop thead th[aria-sort="ascending"] .sico::after { content: "↑"; }
  .mark.done::after { content: "✓"; font-size: 8px; line-height: 1; }
}

@media print {
  .ad, .site-head nav, .controls, .receipt, .bottomnav { display: none; }
  body { background: #fff; font-size: 11pt; }
  .stage { background: #fff; color: #000; box-shadow: none; border: 1px solid #999; }
}

/* ── Theme Tabulator theo token — không dùng giao diện mặc định ───── */
#matrix-grid .tabulator {
  font-family: var(--sans); font-size: 14px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
}
#matrix-grid .tabulator .tabulator-header {
  background: var(--surface); border-bottom: 1.5px solid var(--ink);
  font: 600 10.5px var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
#matrix-grid .tabulator .tabulator-col { background: var(--surface); border-right: 0; }
#matrix-grid .tabulator .tabulator-col .tabulator-col-content { padding: 8px 10px; }
#matrix-grid .tabulator .tabulator-header-filter input {
  font: 400 13px var(--sans); border: 1px solid var(--rule-strong);
  border-radius: 7px; padding: 3px 8px; width: 100%;
}
#matrix-grid .tabulator-row {
  border-bottom: 1px solid var(--rule); background: var(--surface);
  transition: background-color var(--t-nhanh) ease;
}
#matrix-grid .tabulator-row:hover { background: var(--surface-2); }
#matrix-grid .tabulator-row .tabulator-cell {
  padding: 10px; border-right: 0; font-variant-numeric: tabular-nums;
}
#matrix-grid .tabulator-row .tabulator-cell.tabulator-frozen {
  border-right: 1px solid var(--rule-strong); background: inherit;
}
#matrix-grid .tabulator-col.tabulator-frozen { border-right: 1px solid var(--rule-strong); }
#matrix-grid .t-kind { display: block; font-size: 11.5px; color: var(--muted); }
#matrix-grid a { color: var(--ink); font-weight: 650; text-decoration: none; }
#matrix-grid a:hover { color: var(--cobalt); text-decoration: underline; }
#matrix-grid .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content,
#matrix-grid .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content { color: var(--cobalt); }

/* ── Thẻ công cụ và thẻ bài phân tích trên trang chủ ─────────────────
   Hai khối cuối của trang chủ là LỐI ĐI, không phải dữ liệu. Chúng phải trông
   khác các khối bảng biểu phía trên, nếu không người đọc cuộn qua mà không
   nhận ra trang còn gì nữa. */
.toolcard, .artcard { padding: var(--s5) var(--s6); }
.tc-t, .ac-k {
  display: flex; align-items: center; gap: 7px; margin: 0 0 var(--s2);
  font: 650 11px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cobalt);
}
.tc-t { font-size: 17px; letter-spacing: -.01em; text-transform: none;
        font-family: var(--sans); font-weight: 700; color: var(--ink); }
.tc-t .li, .ac-k .li { width: 16px; height: 16px; color: var(--cobalt); }
.tc-s { margin: 0 0 var(--s4); color: var(--ink-2); font-size: 14.5px; max-width: 62ch; }

.artcard { display: block; text-decoration: none; color: inherit;
           border-left: 3px solid var(--cobalt); }
.artcard:hover { background: var(--surface-2); }
.ac-t {
  margin: 0 0 var(--s2); font: 750 21px/1.3 var(--sans);
  letter-spacing: -.024em; color: var(--ink); max-width: 30ch;
}
.ac-s { margin: 0 0 var(--s3); color: var(--ink-2); font-size: 14.5px; max-width: 62ch; }
.ac-key { margin: 0 0 var(--s3); padding: 0; list-style: none; }
.ac-key li {
  padding: var(--s2) 0; border-top: 1px solid var(--rule);
  font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.ac-go { font: 600 13.5px var(--sans); color: var(--cobalt); }

/* Logo ngân hàng khi ĐÃ có file (mặc định là monogram — xem logo/README.md).
   Khung cố định để 38 logo tỉ lệ khác nhau không làm cột trái nhấp nhô, và
   nền trắng để logo nền trong suốt không chìm vào nền xám. */
.bank-logo {
  /* 40px chứ không phải 28px (chốt 12/08, nới thêm lần hai theo phản hồi chủ
     dự án cùng ngày). Ở 28px, biểu tượng đứng cạnh chữ 15px đọc thành một chấm
     màu — không nhận ra được ngân hàng. Đệm hạ từ 3px xuống 2px: viền và đệm
     ăn mất 8px mỗi chiều, nên một ô 36px chỉ còn 28px là hình thật; nới ô lên
     40px và bóp đệm lại cho biểu tượng thật sự to hơn, không phải cái khung to
     hơn. Mọi tệp logo từ 12/08 là BIỂU TƯỢNG đã cắt riêng, không còn là lockup
     có sẵn chữ, nên phóng to mới có nghĩa. */
  width: 40px; height: 40px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px;
  padding: 2px; margin-right: var(--s2);
}
/* Tên ngân hàng mang màu thương hiệu; `--mau-bank` do template gắn theo hàng,
   không có thì rơi về màu mực chung. */
.bank-name { color: var(--mau-bank, var(--ink)); }
.bank-name a { color: inherit; }
.stage .bank-logo, .ck .bank-logo { border-color: var(--stage-line); }
/* Câu tuyên bố độc lập: đậm hơn phần miễn trừ vì nó là định vị, không phải
   chú thích pháp lý. */
.legal .doc-lap { color: var(--ink-2); font-weight: 500; margin-bottom: var(--s3); }
.legal .doc-lap b { color: var(--ink); }
/* Hai mốc thời gian trên header: mốc số đổi đậm hơn mốc đọc lại. */
/* Hai mốc thời gian trên header. Quy tắc này nằm SAU media query ẩn header
   time trên mobile, nên tuyệt đối không được khai `display` — khai là nó bật
   lại phần đã cố ý ẩn và đẩy header tràn ngang ở 390px. */
@media (min-width: 861px) {
  .head-time { display: inline-flex; align-items: baseline; gap: var(--s3); }
}
.head-time .ht-check { color: var(--muted); }
/* Nhãn "bản dựng tự động": in khi chưa gán biên tập viên. Không phải cảnh báo
   — là một khai báo, nên dùng nền trung tính chứ không dùng amber. */
.tu-dong {
  display: flex; align-items: center; gap: 7px; margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3); background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2);
}
.tu-dong .li { width: 14px; height: 14px; flex: none; color: var(--muted); }

/* ── Thẻ ngân hàng trên điện thoại: trạng thái đóng ≤92px ────────────
   Ba thứ ở trạng thái đóng: ai · bao nhiêu · nguồn nào. Điều kiện, mức web,
   mức báo và giờ đọc nằm sau một disclosure. Trước đây thẻ mở sẵn cao trung
   bình 198px và 38 ngân hàng là 7.500px chỉ riêng danh sách. */
.gc-more { grid-column: 1 / -1; margin-top: 0; }
.gc-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 5px; font: 600 11.5px var(--sans); color: var(--cobalt);
  padding: 4px 0; min-height: 28px;
}
.gc-more > summary::-webkit-details-marker { display: none; }
.gc-more > summary::after {
  content: ""; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--ic-chevron) center / contain no-repeat;
  mask: var(--ic-chevron) center / contain no-repeat;
  transition: transform var(--t-vua) var(--ease-vao);
}
.gc-more[open] > summary::after { transform: rotate(180deg); }
.gc-body { display: grid; gap: var(--s2); padding-bottom: var(--s2); }

/* ── Ngăn kéo bằng chứng từng hàng ───────────────────────────────────
   Thay đường đi qua tooltip (review Codex §6.2). Một nút mỗi hàng, một ngăn
   kéo mỗi hàng, mở được bằng chuột · chạm · bàn phím. Render MỞ ở máy chủ và
   để JS đóng lại: không có JS thì bằng chứng vẫn tới được. */
.c-mo { width: 40px; padding-left: 0 !important; }
.mo-ngan {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  background: none; border: 1px solid var(--rule); border-radius: 8px;
  color: var(--muted); cursor: pointer;
  transition: background-color var(--t-mau) ease, color var(--t-mau) ease, border-color var(--t-mau) ease;
}
.mo-ngan:hover { color: var(--cobalt); border-color: var(--seal-line); background: var(--cobalt-soft); }
.mo-ngan .li { width: 15px; height: 15px; transition: transform var(--t-vua) var(--ease-vao); }
.mo-ngan[aria-expanded="true"] .li { transform: rotate(180deg); }

.hang-mo > td { padding: 0 !important; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.hang-mo[hidden] { display: none; }
.ngan {
  display: grid; gap: var(--s4) var(--s6); padding: var(--s4) var(--s5);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  border-left: 3px solid var(--cobalt);
}
.ngan-k {
  margin: 0 0 var(--s2); font: 650 12px var(--sans); color: var(--muted);
}
.ngan-dl { margin: 0; display: grid; gap: 2px; }
.ngan-dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s3); }
.ngan-dl dt {
  font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding-top: 2px;
}
.ngan-dl dd { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ngan-dl .li { width: 12px; height: 12px; vertical-align: -1px; }
.ngan-bac ul { margin: 0; padding: 0; list-style: none; }
.ngan-bac li { font-size: 13px; color: var(--ink-2); padding: 2px 0; }
.ngan-bac b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ngan-dk { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); }
.ngan-dk p { margin: 0 0 var(--s2); }
.ngan-canh { color: var(--warn); }
.ngan-di { grid-column: 1 / -1; margin: 0; font-size: 13.5px; }

@media (max-width: 900px) {
  .ngan { grid-template-columns: 1fr; }
  .ngan-dl > div { grid-template-columns: 1fr; gap: 0; }
}
.ngan-ht { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ngan-ht b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ngan-ht .li { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }

/* ── Khoảng lãi phải nằm MỘT DÒNG ────────────────────────────────────
   Đo ở 1280px: 27 trong 68 ô khoảng lãi vỡ hai dòng ("5,50–9,50",
   "8,46–9,50"). Một khoảng bị bẻ đôi đọc thành hai con số rời, và cột số
   mất thẳng hàng nên mắt không quét dọc được nữa — đúng thứ một bảng so
   sánh tồn tại để làm.
   `nowrap` một mình chưa đủ vì cột vẫn co được; cần cả bề rộng tối thiểu
   đủ chứa "00,00–00,00". Dùng ch để bám theo cỡ chữ thật. */
.rate, .muc, td .rate, .gop .rate {
  white-space: nowrap;
}
.gop td .rate, .gop th .rate, table .rate, table .muc {
  min-width: 11ch;
}
/* Số lãi suất luôn dùng chữ số đều bề ngang để cột thẳng hàng. */
.rate, .muc, .mi-num, .ck-num { font-variant-numeric: tabular-nums; }

/* ── Thẻ mức được chào trong hero (ngôn ngữ Tremor) ──────────────────
   Thẻ SÁNG trên nền navy. Bản trước là card tối trên nền tối cùng cường độ
   nên hero đọc thành một khối phẳng — "có màu nhưng không có nhịp".
   Nhãn nhỏ viết hoa → số lớn → huy hiệu chênh lệch, đúng mẫu KPI của Tremor. */
.mq {
  background: #fff; color: var(--ink); border-radius: var(--r);
  padding: var(--s4) var(--s5); box-shadow: 0 12px 32px rgba(4,16,38,.28);
}
/* Thẻ này SÁNG nhưng nằm trong `.stage`, mà `.stage a` đặt màu cobalt-bright —
   màu dành cho chữ trên nền navy. Trên nền trắng nó chỉ đạt ~2,4:1: axe bắt
   `color-contrast` mức serious ở tên ngân hàng của 11 trang. Trả link trong
   thẻ về cobalt đậm (6,6:1 trên nền sáng). */
.stage .mq a { color: var(--cobalt); }
.stage .mq a:hover { color: var(--cobalt-strong); }
.mq-k { margin: 0; font: 600 11px/1.3 var(--mono); letter-spacing: .1em;
        text-transform: uppercase; color: var(--muted); }
.mq-who { margin: var(--s2) 0 0; display: flex; align-items: center; gap: var(--s2);
          font-size: 17px; font-weight: 650; }
.mq-num { margin: var(--s1) 0 0; display: flex; align-items: baseline; flex-wrap: wrap;
          gap: var(--s2); font-size: clamp(38px, 5vw, 52px); font-weight: 800;
          letter-spacing: -.03em; color: var(--amber-ink, #9A5B00);
          font-variant-numeric: tabular-nums; }
.mq-num i { font: 600 15px/1 inherit; font-style: normal; color: var(--muted); }
/* Mức được chào là một DẢI, không phải một con số — hạ một cấp cỡ chữ để cả
   cụm "7,90–9,43 %/năm" còn nằm trên một dòng. */
.mq-num.dai { font-size: clamp(28px, 3.4vw, 38px); }
/* Huy hiệu chênh lệch — pill nhỏ, không phải một dòng chữ nữa. */
.delta { font: 700 12px/1 var(--mono); padding: 4px 8px; border-radius: 999px;
         letter-spacing: .02em; white-space: nowrap; }
.delta.up { background: #E7F6EE; color: #0A6B3D; }
/* Điều kiện: lưới nhãn–giá trị, đọc quét được, không phải câu văn. */
.mq-dk { margin: var(--s3) 0 0; display: grid; grid-template-columns: auto 1fr;
         gap: 3px var(--s3); font-size: 13px; }
.mq-dk dt { color: var(--muted); }
.mq-dk dd { margin: 0; font-weight: 600; }
.mq-ny { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule);
         font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mq-ny b { color: var(--cobalt); font-size: 17px; font-weight: 800; }
.mq-ny i { font-style: normal; font-size: 11px; }
.mq-cav { margin: var(--s2) 0 0; font-size: 12px; line-height: 1.45;
          color: #9A5B00; display: flex; gap: 6px; align-items: flex-start; }
.mq-cav svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* ── Thẻ trả lời hai tab ────────────────────────────────────────────
   Hai LỚP NGUỒN, hai tab — không trộn vào một thẻ. Tab đứng đầu thẻ như một
   segmented control: nhãn ngắn, gạch chân cobalt cho tab đang mở. Trạng thái
   phải đọc được KHÔNG CẦN màu (gạch chân + đậm chữ), vì "đang chọn" mà chỉ
   khác mỗi sắc độ là thứ người mù màu không thấy. */
/* Tab hai lớp ở TRANG CÔNG CỤ: cùng hình thức với thẻ trả lời hai lớp, nhưng
   đứng một mình trên đầu vùng điều khiển nên cần đường kẻ dưới và câu nói rõ
   lớp đang chọn — người dùng vừa đổi nghĩa của cả bảng bên dưới. */
.lop2 { margin-bottom: var(--s5); }
.lop2-tabs { border-bottom: 1px solid var(--rule); }
.lop2-noi { margin: var(--s3) 0 0; color: var(--muted); font-size: 14px; max-width: 62ch; }

.ck2-tabs {
  display: flex; gap: var(--s4); margin: 0 0 var(--s4);
  border-bottom: 1px solid var(--rule);
}
.ck2-tabs [role="tab"] {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 0 0 var(--s3); margin-bottom: -1px;
  font: 600 13px/1.2 var(--sans); color: var(--muted);
  border-bottom: 2px solid transparent;
}
.ck2-tabs [role="tab"]:hover { color: var(--ink-2); }
.ck2-tabs [role="tab"][aria-selected="true"] {
  color: var(--ink); font-weight: 700; border-bottom-color: var(--cobalt);
}
.ck2 [role="tabpanel"]:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
/* Đổi tab là đổi NỘI DUNG trong cùng một khung thẻ — không phải mở một thứ
   mới. Bản đầu bật/tắt `hidden` nên hai lớp số tráo nhau trong đúng một khung
   hình: mắt không kịp thấy cái gì vừa thay cái gì, và ở một thẻ mà cả hai tab
   đều in "%/năm" cỡ lớn thì rất dễ tưởng con số vừa tự đổi.
   Mờ vào 120ms + nhích 4px: đủ để nói "đây là một lớp khác", không đủ để phải
   chờ. Gạch chân của tab tự trượt theo vì nó là border-color có transition.

   `[data-vua]` chứ không phải `:not([hidden])`: cờ đó do JS gắn khi NGƯỜI DÙNG
   bấm tab. Bám vào `:not([hidden])` thì panel mặc định tự chạy một lượt ngay
   lúc tải trang — đúng thứ ranh giới của dự án cấm: chuyển động là phản hồi
   cho một hành động, không phải màn chào. */
.ck2 [role="tabpanel"][data-vua] {
  animation: ck2-vao var(--t-nhanh) var(--ease-vao);
}
@keyframes ck2-vao { from { opacity: 0; transform: translateY(4px); } }
/* Số của lớp niêm yết mang màu cobalt — cùng quy ước với `.mq-ny b`: cobalt là
   "đã đối chiếu được với trang ngân hàng". Lớp được chào giữ màu mực. */
.mq-num.ny { color: var(--cobalt); }
.mq-kenh { font: 500 12px var(--sans); color: var(--muted); }
/* Tiền lãi: to hơn chữ thường một cấp, tabular để đổi số không giật cột.
   KHÔNG dùng emerald — token dành riêng cho "đã đối chiếu" và biến động tăng;
   tiền lãi không phải cả hai. */
.mq-lai { margin: var(--s3) 0 0; font-size: 13px; color: var(--muted); }
.mq-lai b { font-size: 19px; font-weight: 800; color: var(--ink);
            font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mq-delta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted);
            font-variant-numeric: tabular-nums; }
.mq-delta b { color: var(--ink-2); font-weight: 700; }
/* Điều kiện của phép tính, đứng NGAY DƯỚI con số nó nói về — không phải chú
   thích cuối thẻ. Amber vì đây đúng là caveat (ART-DIRECTION-2 mục 2). */
.ck-if { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: #9A5B00; }

@media (max-width: 640px) {
  .ck2-tabs { gap: var(--s3); }
  .ck2-tabs [role="tab"] { font-size: 12.5px; }
}

/* Logo cạnh H1 trên trang của một ngân hàng — canh theo đường chân chữ. */
.h1-logo { display: inline-flex; vertical-align: -.12em; margin-right: .4em; }
.h1-logo img, .h1-logo .mono-box { width: .9em; height: .9em; border-radius: .18em; }

/* ── Sửa theo ảnh chủ dự án 11/08 và finding của improve-ui ──────────
   1. Logo canh giữa THEO DÒNG CHỮ, không nhảy lên cao hơn tên. */
.bank-name { display: inline-flex; align-items: center; gap: .45em; }
.bank-name img.bank-logo, .bank-name .mono-box { flex: none; vertical-align: middle; }

/* 2. FINDING 1 — `ART-DIRECTION-2.md:31` ràng buộc `--amber` CHỈ dùng cho
      caveat, điều kiện, cảnh báo. Con số 9,50% là SỐ CHÍNH của trang, không
      phải caveat; để nó amber làm hỏng chính hệ thống tín hiệu — khi amber vừa
      là "số chính" vừa là "cảnh báo" thì người đọc mất căn cứ phân biệt.
      Trả số chính về mực, giữ amber cho đúng dòng caveat bên dưới. */
.mq-num { color: var(--ink); }

/* 3. FINDING 2 — `ART-DIRECTION-2.md:30` ràng buộc `--emerald` CHỈ cho
      "đã đối chiếu" và biến động tích cực. "+2,4 điểm" là KHOẢNG CHÊNH giữa
      hai lớp nguồn, không phải biến động, và #0A6B3D là mã tự chế không nằm
      trong bảng token. Dùng nền cobalt nhạt — đúng accent thương hiệu. */
.delta.up { background: var(--cobalt-soft, #EAF0FE); color: var(--cobalt-strong, #173FB0); }

/* Ô lãi suất trong bảng tính lãi: số và dòng điều kiện xếp DỌC, cùng canh
   phải. Bản trước để hai thứ trôi tự do trong một ô nên dòng "đk: …" lệch ra
   giữa hai cột — thấy rõ trong ảnh chủ dự án gửi 11/08. */
td.calc-rate { text-align: right; }
td.calc-rate .num { font-size: 14px; color: var(--muted); display: block; }
td.calc-rate .cellnote { display: block; margin-top: 2px; text-align: right;
                         max-width: 22ch; margin-left: auto; }

/* ── Trang lịch sử: lưới biểu đồ theo kỳ hạn ─────────────────────────
   Bốn biểu đồ nhỏ đọc theo cặp thì so được với nhau; xếp một cột dọc thì
   người đọc phải nhớ hình trước để so với hình sau. */
.lich-su-luoi {
  display: grid; gap: var(--s4);
  /* HAI cột cố định, không `auto-fit`. Có bốn kỳ hạn: `auto-fit` ở khung 1280
     xếp thành ba cột và bỏ hình thứ tư đứng một mình chiếm 1/3 hàng dưới —
     một ô mồ côi rộng bằng hai ô trống. Hai cột cho 2×2 kín, và mỗi hình rộng
     hơn nên đường 4 ngày đọc được rõ hơn. */
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) { .lich-su-luoi { grid-template-columns: 1fr; } }

/* ── Ô tìm ngân hàng và thanh mức tối thiểu ──────────────────────────
   Cùng khuôn `.control` với ô số tiền, nên không sinh ra một ngôn ngữ thứ hai
   cho cùng một cụm điều khiển. */
.amount-range { display: flex; align-items: center; gap: var(--s3); }
.amount-range input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--cobalt); }
.amount-range output { font: 600 13px var(--mono); color: var(--ink-2); white-space: nowrap; }
.stage .amount-range output { color: var(--on-stage-2); }
/* Nút nhỏ dùng chung — KHÔNG mượn `.mo-ngan`: lớp đó nghĩa là "nút mở ngăn
   kéo bằng chứng của một hàng", và có một test đếm đúng một nút mỗi hàng để
   giữ luật "một điểm dừng bàn phím mỗi hàng". Mượn lớp là phá cái đếm đó. */
.nut-nho {
  background: none; border: 1px solid var(--rule); border-radius: 8px;
  padding: 3px 10px; font: 600 12.5px var(--sans); color: var(--muted);
  cursor: pointer; transition: background-color var(--t-mau) ease,
    color var(--t-mau) ease, border-color var(--t-mau) ease;
}
.nut-nho:hover { color: var(--cobalt); border-color: var(--seal-line); background: var(--cobalt-soft); }
.stage .nut-nho { color: var(--on-stage-2); border-color: var(--stage-line); }
.stage .nut-nho:hover { color: #fff; background: rgba(255,255,255,.08); }

.loc-dem {
  grid-column: 1 / -1; margin: var(--s2) 0 0; display: flex; gap: var(--s3);
  align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2);
}
/* Bản dán lặp đã gỡ. Khối `.nut-nho` ngay bên trên bị chép lại nguyên văn ở
   đây, và cụm `.stage` mở đầu khối bị chú thích nuốt vào — CSS bỏ chú thích
   nên bộ chọn thành `.stage .nut-nho`, còn dòng cuối khối MẤT tiền tố và trở
   thành `.loc-dem` trần, tô `--on-stage-2` (#9DB1D6 — token của nền tối) lên
   MỌI `.loc-dem`. Ở `/so-sanh/` khối lọc nằm ngoài sân khấu, trên nền
   porcelain: 2,0:1, trượt WCAG 1.4.3.

   Vì sao cổng axe 56 trang không bắt: `<span id="loc-dem">` rỗng trong HTML
   máy chủ, JS chỉ ghi số dòng bị lọc vào sau khi người dùng gõ — axe không
   chấm tương phản của nút văn bản rỗng. */
.stage .loc-dem { color: var(--on-stage-2); }
/* Hàng bị lọc ẩn bằng thuộc tính `hidden`; bảng cần display đúng kiểu ô. */
tr[hidden], li[hidden] { display: none; }

/* Top 5 lớp khảo sát: thêm một dòng mốc đối chiếu dưới mỗi hàng. */
.rank-ks li { grid-template-areas: "stt who bar rate lai" "ny ny ny ny ny"; }
.r10-ny {
  /* Bắt đầu từ cột TÊN, canh bằng vùng lưới chứ không bằng `padding-left` gõ
     tay theo bề rộng logo — logo đổi cỡ là con số đệm đó sai ngay. */
  grid-area: ny; grid-column: who / -1;
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
}
.r10-ny b { color: var(--cobalt); font-weight: 700; }

/* ── Sparkline 7 ngày cạnh tên ngân hàng ─────────────────────────────
   Hướng đọc được KHÔNG CHỈ bằng màu: mũi tên nhỏ đi kèm, và nhãn đầy đủ nằm
   trong aria-label. Chuỗi phẳng dùng màu mực nhạt — đứng yên không phải tin
   xấu cũng không phải tin tốt. */
.spark { display: inline-flex; align-items: center; gap: 3px; vertical-align: -5px; }
.spark svg { display: block; overflow: visible; }
.spark polyline {
  fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke: var(--muted);
}
.spark i { font: 700 9px/1 var(--sans); font-style: normal; color: var(--muted); }
.spark.up polyline, .spark.up i { stroke: var(--emerald); color: var(--emerald); }
.spark.down polyline, .spark.down i { stroke: var(--warn); color: var(--warn); }
.stage .spark.up polyline, .stage .spark.up i { stroke: var(--emerald-bright); color: var(--emerald-bright); }
@media (max-width: 700px) { .spark svg { width: 48px; } }

/* ── Hai hình biến động đứng cạnh nhau ───────────────────────────────
   Lớp khảo sát và lớp niêm yết, mỗi lớp một thang riêng nên KHÔNG dùng chung
   trục — hai hình chỉ chia nhau chiều ngang, không chia nhau ý nghĩa. Màu
   đường theo đúng quy ước hai lớp của toàn trang: amber là mức được chào,
   cobalt là mức niêm yết. */
.hai-hinh { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .hai-hinh { grid-template-columns: 1fr; } }
.chart-chao .line { stroke: var(--amber); }
.chart-chao .dot { fill: var(--amber); }
.chart-chao .band { fill: var(--amber-soft); }

/* Vạch soi cùng ngày giữa hai hình biến động. Mảnh và nhạt — nó là công cụ
   ĐỐI CHIẾU, không phải một lớp dữ liệu; đậm hơn đường số liệu là sai vai. */
.vach-soi { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; pointer-events: none; }

/* ── Hero trang chủ: hai thẻ kỳ hạn song song ────────────────────────
   6 và 12 tháng đứng cạnh nhau, cùng khuôn, cùng cỡ chữ — chỉ khi hai thẻ
   giống hệt nhau về hình thức thì mắt mới so được HAI CON SỐ thay vì so hai
   bố cục. Thẻ nằm trong band tối nên dùng token `--on-stage-*`. */
.stage-2ky .stage-ans { order: 2; }
.ky-doi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.ky-the {
  background: rgba(255,255,255,.04); border: 1px solid var(--stage-line);
  border-radius: var(--r); padding: var(--s4) var(--s4) var(--s3);
  display: flex; flex-direction: column; gap: 2px;
}
.ky-k {
  margin: 0 0 var(--s2); font: 600 11px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-stage-2);
}
.ky-who { margin: 0; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.ky-who a, .ky-who b { color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
.ky-who a:hover { text-decoration: underline; }
.ky-num {
  margin: var(--s2) 0 0; color: #fff;
  font: 800 clamp(30px, 3.6vw, 42px)/1 var(--sans);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ky-num i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--on-stage-2); margin-left: 4px; }
.ky-lai { margin: var(--s2) 0 0; color: var(--on-stage-2); font-size: 13px; }
.ky-lai b { color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.ky-ny { margin: var(--s2) 0 0; color: var(--on-stage-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ky-ny b { color: var(--cobalt-bright); font-weight: 700; }
.ky-di { margin: var(--s3) 0 0; font-size: 12.5px; }
.ky-di a { color: var(--cobalt-bright); text-decoration: none; }
.ky-di a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .stage-2ky .stage-ans { order: 0; }
  .ky-doi { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .ky-the { padding: var(--s3); }
}
@media (max-width: 460px) { .ky-doi { grid-template-columns: 1fr; } }

/* Đường cong kỳ hạn trong hero — hình dựng từ chính số của trang, không phải
   hoạ tiết. Hai kỳ hạn có thẻ ở trên được đánh dấu chấm to kèm số, để mắt nối
   được thẻ với vị trí của nó trên đường. */
.hero-cong { margin: var(--s4) 0 0; }
.hero-cong figcaption {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline;
  font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-stage-2); margin-bottom: var(--s3);
}
.hero-cong figcaption span { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
.hero-cong svg { display: block; width: 100%; height: 116px; overflow: visible; }
.hc-line { fill: none; stroke: var(--cobalt-bright); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hc-dot { fill: #0B1830; stroke: var(--cobalt-bright); stroke-width: 2; }
.hc-dot.on { fill: #fff; stroke: #fff; }
.hc-lb { fill: #fff; font: 800 13px var(--sans); }
.hc-t { fill: var(--on-stage-2); font: 500 10px var(--mono); }
@media (max-width: 900px) { .hero-cong svg { height: 92px; } }

/* Hai đường cong chồng nhau — hình chữ ký của sản phẩm. Amber là lớp thị
   trường (cùng quy ước màu với toàn trang), cobalt là lớp niêm yết; vùng tô
   giữa hai đường là KHOẢNG CÁCH, thứ duy nhất hình này tồn tại để nói. */
.hai-cong { padding: var(--s5); }
.hc-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  margin-bottom: var(--s4); font-size: 13px;
}
.hc-leg { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.hc-leg i { width: 14px; height: 3px; border-radius: 2px; }
.hc-leg.ks i { background: var(--amber); }
.hc-leg.ny i { background: var(--cobalt); }
.hc-truc { margin-left: auto; color: var(--muted); font-size: 12px; }
.hai-cong svg { display: block; width: 100%; height: auto; overflow: visible; }
.hc2-band { fill: var(--amber-soft); opacity: .85; }
.hc2-ks { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hc2-ny { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hc2-dks { fill: #fff; stroke: var(--amber); stroke-width: 2; }
.hc2-dny { fill: #fff; stroke: var(--cobalt); stroke-width: 2; }
.hc2-t { fill: var(--muted); font: 500 10px var(--mono); }
@media (max-width: 700px) { .hc-truc { margin-left: 0; width: 100%; } }

/* ── Nhịp thị giác giữa các khối ─────────────────────────────────────
   Trước 12/08 mọi khối là "tiêu đề + thẻ trắng trên nền xám" — năm khối
   giống hệt nhau, nên mắt không có mốc nào để bám và cả trang đọc thành một
   dải đều. Khối chẵn lùi xuống một dải nền chìm, tràn hết bề ngang: nó không
   thêm chữ nào, chỉ cho mắt biết "đây là một chuyện khác".

   `--bg-chim` đủ nhạt để chữ vẫn đạt tương phản AA và thẻ trắng bên trong vẫn
   nổi lên — đây là nền, không phải một lớp thông tin. */
.sec-chim {
  position: relative; padding-top: var(--s6); padding-bottom: var(--s6);
}
.sec-chim::before {
  content: ""; position: absolute; inset: 0 50%; z-index: -1;
  width: 100vw; margin-left: -50vw;
  background: var(--head); border-block: 1px solid var(--rule);
}

/* Ví dụ tiền lãi ở khối giới thiệu công cụ — bốn dòng số, cùng khuôn lưới nên
   con số thẳng cột và so được bằng mắt. */
.vd-list { margin: 0 0 var(--s4); padding: 0; list-style: none; }
.vd-list li {
  display: grid; align-items: baseline; gap: var(--s2) var(--s3);
  grid-template-columns: 132px 18px minmax(0, 1fr) auto;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
}
.vd-list li:first-child { padding-top: 0; }
.vd-list li:last-child { border-bottom: 0; }
.vd-dk { font-weight: 650; font-variant-numeric: tabular-nums; }
.vd-mui { color: var(--muted); }
.vd-lai { font-variant-numeric: tabular-nums; }
.vd-lai b { font-weight: 800; font-size: 19px; color: var(--cobalt); }
.vd-ai { color: var(--muted); font-size: 12.5px; text-align: right; }
@media (max-width: 640px) {
  .vd-list li { grid-template-columns: 1fr auto; }
  .vd-mui { display: none; }
  .vd-ai { grid-column: 1 / -1; text-align: left; }
}

/* Bốn con số của bản nhận định — lưới số lớn, không phải bốn dòng văn xuôi. */
.kf-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); }
.kf-o { background: var(--surface); padding: var(--s4); }
.kf-so { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.kf-so b {
  font: 800 clamp(26px, 3vw, 34px)/1 var(--sans); letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.kf-so i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.kf-chu { margin: var(--s2) 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 560px) { .kf-luoi { grid-template-columns: 1fr; } }

/* Thẻ bài phân tích ở trang chủ: chữ bên trái, hai con số bên phải. */
.artcard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); }
.ac-so { display: grid; gap: var(--s3); align-content: center;
         border-left: 1px solid var(--rule); padding-left: var(--s5); }
/* Số và ĐƠN VỊ trên cùng một đường chân chữ. `display:block` ở số đẩy đơn vị
   xuống dòng riêng, và "%/năm" đứng một mình dưới "6,10" đọc như một dòng dữ
   liệu thứ hai chứ không như đơn vị của con số ngay trên. */
.ac-so > div { display: block; }
.ac-so b {
  font: 800 30px/1 var(--sans); letter-spacing: -.03em;
  color: var(--cobalt); font-variant-numeric: tabular-nums;
}
.ac-so i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.ac-so span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 800px) {
  .artcard { grid-template-columns: 1fr; }
  .ac-so { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--s4); }
}

/* Ba lớp nguồn ở trang phương pháp — ba dải cạnh nhau, đậm dần từ trái sang
   phải theo đúng thứ bậc tin cậy. Màu đi theo quy ước hai lớp của toàn trang:
   cobalt cho niêm yết, amber cho thị trường, mực cho nguồn báo ở giữa. */
.lop3 { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s4);
        grid-template-columns: repeat(3, 1fr); }
.lop3 li {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: var(--s4) var(--s5) var(--s5);
}
.l3-k { margin: 0; display: flex; align-items: center; gap: var(--s2);
        font-weight: 750; font-size: 17px; letter-spacing: -.02em; }
.l3-k i {
  font: 600 11px var(--mono); font-style: normal; letter-spacing: .08em;
  color: var(--cobalt); background: var(--cobalt-soft); padding: 3px 7px; border-radius: 6px;
}
.l3-so { margin: var(--s3) 0 0; color: var(--muted); font-size: 13px; }
.l3-so b { font: 800 26px/1 var(--sans); color: var(--ink); letter-spacing: -.03em;
           font-variant-numeric: tabular-nums; margin-right: 5px; }
.l3-thanh { margin: var(--s3) 0 0; height: 6px; border-radius: 999px; background: var(--surface-2);
            border: 1px solid var(--rule); overflow: hidden; }
.l3-thanh span { display: block; height: 100%; background: var(--cobalt); }
.lop3 li:nth-child(2) .l3-thanh span { background: var(--ink-2); }
.lop3 li:nth-child(3) .l3-thanh span { background: var(--amber); }
.lop3 li:nth-child(3) .l3-k i { color: var(--amber); background: var(--amber-soft); }
.l3-tin { margin: var(--s3) 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.l3-nguon { margin: var(--s2) 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 860px) { .lop3 { grid-template-columns: 1fr; } }

/* Lối đi tiếp ở trang 404 — danh sách link, không phải một trang chủ thu nhỏ. */
.err-loi { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.err-loi li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
.err-loi li:last-child { border-bottom: 0; }
.err-loi a { font-weight: 650; color: var(--ink); text-decoration: none; }
.err-loi a:hover { color: var(--cobalt); text-decoration: underline; }