/* ═══════════════════════════════════════════════════════════════════
   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;

  /* 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 140ms linear, color 140ms linear;
}
.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 150ms ease-out;
}
.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. */
.mindex {
  margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(4, 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, .dp-legend .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; }
.mi-sub.caveat { color: var(--amber); }
/* Ô "khảo sát cao nhất": mức CHƯA XÁC NHẬN không được cạnh tranh thị giác với
   mức chính thức ở hero. Nhỏ hơn một cấp + viền đứt — phân biệt bằng hình
   dạng chứ không chỉ bằng màu (người mù màu vẫn đọc ra). */
.mi-seg.chua-xac-nhan { border-left-style: dashed; }
.mi-seg.chua-xac-nhan .mi-num { font-size: 22px; color: var(--amber); }
.mi-seg.chua-xac-nhan dt { color: var(--amber); }
.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, .dp-legend .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;
    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 ─────────────────── */
.dotplot { padding: var(--s4) var(--s5); }
.dp-head { display: flex; gap: var(--s5); flex-wrap: wrap; align-items: baseline;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.dp-legend { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.dp-legend i { width: 9px; height: 9px; border-radius: 999px; }
.dp-legend i.w { background: var(--ink); }
.dp-legend i.k { background: var(--amber); }
.dp-cav { color: var(--amber); font-size: 11.5px; }
.dp-truc { margin-left: auto; font: 500 11px var(--mono); color: var(--muted); }
.dp-axis { position: relative; height: 22px; margin: 0 0 2px; }
.dp-axis span {
  position: absolute; bottom: 2px; transform: translateX(-50%);
  font: 500 10.5px var(--mono); color: var(--muted);
}
.dp-row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr) 250px;
  gap: var(--s4); align-items: center;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
}
.dp-row:last-child { border-bottom: 0; }
.dp-who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.dp-who a { font-weight: 650; color: var(--ink); text-decoration: none; }
.dp-who a:hover { color: var(--cobalt); text-decoration: underline; }
.dp-track { position: relative; height: 20px; }
.dp-track::before { content: ""; position: absolute; inset: 9.5px 0 auto; height: 1px; background: var(--rule); }
.dp-track em { position: absolute; top: 5px; width: 1px; height: 10px; background: var(--rule); }
.dp-track u { position: absolute; top: 9px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--rule-strong) 0 4px, transparent 4px 8px); }
.dp-track i { position: absolute; top: 5px; width: 10px; height: 10px;
  border-radius: 999px; transform: translateX(-5px); }
.dp-track i.w { background: var(--ink); }
.dp-track i.k { background: var(--amber); }
.dp-vals { font-size: 12.5px; color: var(--ink-2); display: grid; gap: 1px; }
.dp-vals b { font-variant-numeric: tabular-nums; color: var(--ink); }
.dp-meta { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) {
  .dp-row { grid-template-columns: 1fr; gap: var(--s2); }
  .dp-axis { display: none; }
  .dp-truc { margin-left: 0; }
}

/* ── 6. Top 10 — thanh xếp hạng ───────────────────────────────────── */
.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);
  grid-template-columns: 28px auto minmax(120px, 1fr) 96px 132px;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule);
  transition: background-color 140ms linear;
}
.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; }
.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 120ms linear, background-color 120ms linear;
}
.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 {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3);
  align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.delta-list li:last-child { border-bottom: 0; }
.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; }

/* Slope hai điểm — cùng ngữ nghĩa màu với delta-chip. */
.slope line { stroke-width: 2; stroke-linecap: round; }
.slope.up line, .slope.up circle { stroke: var(--emerald); fill: var(--emerald-soft); }
.slope.down line, .slope.down circle { stroke: var(--warn); fill: var(--warn-soft); }
.delta-list li { grid-template-columns: auto auto 1fr auto; align-items: center; }

/* 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;
}
.tip-panel[data-hien] { opacity: 1; transition: opacity 120ms linear; }
/* 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 120ms linear; }
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; }
/* 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 .5s ease-out; }
/* 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 140ms linear;
}
.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 150ms ease-out;
}
.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;
  gap: 5px; font: 500 11.5px var(--mono); 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 150ms ease-out;
}
.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; }
  .byline, .keyfind, .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 140ms linear, color 140ms linear, border-color 140ms linear;
}
.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 120ms linear;
}
.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 .12s ease-out; }
/* 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 .26s cubic-bezier(.22,.7,.25,1); }
@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 .5s ease-out; border-radius: 6px; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .18s; animation-timing-function: cubic-bezier(.22, .7, .25, 1);
}

@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; }
.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; }
.rankrow .behind { grid-column: 2 / -1; font: 500 12.5px var(--mono); color: var(--ink-2); }
.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; }
  .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 120ms linear;
}
#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 {
  width: 28px; height: 28px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--rule); border-radius: 7px;
  padding: 2px; margin-right: var(--s2);
}
.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 150ms ease-out;
}
.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 140ms linear, color 140ms linear, border-color 140ms linear;
}
.mo-ngan:hover { color: var(--cobalt); border-color: var(--seal-line); background: var(--cobalt-soft); }
.mo-ngan .li { width: 15px; height: 15px; transition: transform 150ms ease-out; }
.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); }