/* QuietMacro landing — PLAN_OPS §6.
   CSS thuần, không framework, không font ngoài (quy ước repo: không thêm dep; và font
   ngoài = thêm 1 round-trip chặn render cho thứ hệ thống đã có sẵn).

   TÔNG: công cụ phân tích NGHIÊM TÚC cho người trả $29 — không phải site "kèo làm
   giàu" (§5.4.1). Nguyên tắc: cho DỮ LIỆU hình dạng (thanh tin cậy, tiến độ track
   record), đừng trang trí quanh chữ. Ẩn dụ "sonar" (vòng quét từ tâm) là bản sắc DUY
   NHẤT — dùng CÓ KỶ LUẬT ở 3 chỗ: nền hero · badge live · favicon. Không rải thêm.
   🎨 Luật màu + bảng contrast đầy đủ: web/DESIGN.md (nguồn sự thật). */

:root {
  --bg: #080a0f;
  --bg-alt: #0d1017;
  --surface: #131822;
  --surface-2: #1a2130;
  --line: #232b3b;
  --line-soft: #1a2130;
  --ink: #eef1f7;
  --ink-dim: #9aa5ba;
  --ink-faint: #8792a6;      /* ≥4.5:1 trên cả 3 nền — xem ghi chú contrast bên dưới */
  --accent: #4ea1ff;
  --accent-dim: rgba(78,161,255,.14);
  --up: #35c88a;
  --down: #ff6b6b;
  --flat: #8b95a8;
  --warn: #e0a44a;
  --radius: 12px;
  --radius-sm: 8px;
  --wrap: 1000px;
}
/* CONTRAST: bảng ĐẦY ĐỦ + luật màu ở web/DESIGN.md — ĐỌC TRƯỚC KHI ĐỔI MÀU.
   Tóm: --ink-faint #8792a6 = 6.31/6.06/5.66/5.13 trên bg/bg-alt/surface/surface-2 (đều
   đạt AA). Bản cũ #6b7689 chỉ 3.75 trên surface = TRƯỢT, mà nó là màu của DISCLAIMER
   PHÁP LÝ. Đừng làm nhạt hơn cho "đẹp", và đổi màu thì ĐO LẠI, đừng ướm mắt.
   (Số ở đây từng lệch DESIGN.md vì đo trên nền CŨ — 1 nguồn sự thật: DESIGN.md.) */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Số liệu dùng tabular + slashed zero: cột số nhảy loạn khi poll đổi giá trị là
   cảm giác "rẻ tiền" rõ nhất ở sản phẩm tài chính. */
.pips, .stat-num, .tp-count, .amount, .card-meta, time { font-variant-numeric: tabular-nums slashed-zero; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 640; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -0.025em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-color: rgba(78,161,255,.35); text-underline-offset: 3px; }

.fine { color: var(--ink-faint); font-size: .82rem; line-height: 1.65; }
.empty { color: var(--ink-faint); font-style: italic; }
.sub { color: var(--ink-dim); margin: 0; font-size: 1.02rem; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav { border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: rgba(8,10,15,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 10; }
/* min-height chứ KHÔNG height cố định: chữ CTA tiếng Việt dài, màn hẹp là nút xuống
   2 dòng rồi TRÀN ra ngoài nav và ĐÈ LÊN logo (đã dính ở 360px 2026-07-17). Đo tự động
   không bắt được vì không có tràn NGANG — phải nhìn mới thấy. */
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 62px; gap: 12px; padding: 8px 0; }
.nav .btn { white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 650; letter-spacing: -0.02em; font-size: 1.02rem; }
.brand-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(78,161,255,.14), 0 0 0 9px rgba(78,161,255,.06); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* ── Icon ────────────────────────────────────────────────────────────────── */
/* Sprite <symbol> khai 1 lần trong HTML -> <use> dùng lại: 0 request, 0 thư viện.
   currentColor: icon tự ăn màu chữ của nút -> khỏi bảo trì màu riêng. */
.sprite { display: none; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }
/* Chữ CHỈ cho screen reader. Dùng khi thông tin được mã hoá bằng HÌNH + MÀU (icon hướng
   trên tab): không có cái này thì người đọc màn hình mất trắng phần đó. `display:none`
   KHÔNG thay thế được — nó bị đọc lướt qua luôn. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.btn {
  display: inline-flex; align-items: center; gap: 9px;   /* inline-flex: icon canh giữa
     theo chữ, không lệch baseline như inline-block */
  padding: 11px 20px; border-radius: var(--radius-sm); text-decoration: none;
  font-size: .92rem; font-weight: 620; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, #63acff, var(--accent));
  color: #04101d; box-shadow: 0 8px 22px -8px rgba(78,161,255,.75);
}
.btn-primary:hover { box-shadow: 0 12px 28px -8px rgba(78,161,255,.85); }
/* Máy bay giấy hơi nhích lên khi hover — gợi ý "gửi đi", đủ nhẹ để không thành trò. */
.btn-primary:hover .ico { transform: translateX(2px); }
.ico { transition: transform .14s ease; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.03); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(78,161,255,.08); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
button.btn { font: inherit; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; background: var(--surface-2); color: var(--ink-dim); border-color: var(--line); }
.btn:disabled:hover .ico { transform: none; }


:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .btn, .ico { transition: none; } }

/* ── Hero — chỗ DUY NHẤT dùng ẩn dụ sonar ────────────────────────────────── */
.hero { position: relative; padding: 84px 0 68px; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
/* Vòng quét sonar: repeating-radial-gradient thuần CSS — không ảnh, không JS, không
   thêm 1 request nào. Neo ở MÉP PHẢI (chữ nằm trái) nên nó không bao giờ đè chữ.
   ⚠️ Đủ đậm để THẤY: bản đầu để .045 -> vô hình trên nền tối, tức là vẽ cho có.
   Vẫn là KẾT CẤU nền, không phải hình minh họa — đọc chữ vẫn là việc chính. */
.hero::before {
  content: ""; position: absolute; pointer-events: none;
  top: 50%; right: -140px; transform: translateY(-50%);
  width: 780px; height: 780px; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(78,161,255,.22) 0 3px, transparent 3px),
    repeating-radial-gradient(circle, rgba(78,161,255,.13) 0 1px, transparent 1px 62px);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
}
/* Màn nhỏ: giấu hẳn — vòng tràn sau chữ là nhiễu, không phải bản sắc. */
@media (max-width: 900px) { .hero::before { display: none; } }
.hero .wrap { position: relative; }
.hero h1 { max-width: 17ch; }
.hero .lede { font-size: 1.1rem; color: var(--ink-dim); max-width: 58ch; margin-top: 18px; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.hero-note { color: var(--ink-faint); font-size: .84rem; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding: 68px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }
.section-head { margin-bottom: 28px; max-width: 62ch; }

/* ── Live bar ────────────────────────────────────────────────────────────── */
.live-bar { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-faint); font-size: .8rem; margin-bottom: 20px; padding: 7px 14px 7px 12px; border: 1px solid rgba(53,200,138,.28); border-radius: 999px; background: linear-gradient(180deg, rgba(53,200,138,.07), transparent), var(--surface); }
/* nowrap: thêm nhãn "(giờ VN)" đẩy dòng xuống 2 hàng và bẻ "cách đây 27 | phút" — chữ
   mồ côi. Cho cụm tuổi xuống dòng NGUYÊN KHỐI. Cùng lý do với .tz. */
.live-bar .age { opacity: .75; white-space: nowrap; }
.live-bar .tz { white-space: nowrap; }
.live-sep { width: 1px; height: 12px; background: var(--line); flex: none; }
/* nowrap: "ĐANG QUÉT" bị bẻ đôi thành 2 dòng ở 360px -> viên thuốc méo (đã dính
   2026-07-17). Nhãn trạng thái KHÔNG bao giờ được xuống dòng. */
.live-label { font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--up); white-space: nowrap; }

/* VÒNG QUÉT SONAR — 2 vòng lan ra LỆCH PHA, đúng ẩn dụ tên sản phẩm (không phải chấm
   nhấp nháy chung chung). Nói với mắt: "hệ đang quét LIÊN TỤC".
   ⚠️ Nó chỉ TRUNG THỰC nhờ cổng stale: quá ngưỡng -> .is-stale tắt vòng quét + JS đổi
   nhãn sang "TẠM DỪNG". Trang là file TĨNH trên CDN, Mac có thể ngủ 2 ngày -> KHÔNG
   được khoe liveness vô điều kiện. Bỏ cổng đó là badge này thành LỜI NÓI DỐI. */
.live-pip { position: relative; width: 9px; height: 9px; flex: none; }
.live-pip i { position: absolute; inset: 0; border-radius: 50%; }
.live-pip i:first-child { background: var(--up); box-shadow: 0 0 8px rgba(53,200,138,.9); }
.live-pip i:nth-child(2), .live-pip i:nth-child(3) {
  border: 1.5px solid var(--up); animation: sonar 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
.live-pip i:nth-child(3) { animation-delay: 1.4s; }
@keyframes sonar {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(3.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-pip i:nth-child(2), .live-pip i:nth-child(3) { animation: none; opacity: .3; }
  .btn:hover { transform: none; }
}

/* Nhận định quá cũ -> TẮT vòng quét + đổi màu cảnh báo. */
.live-bar.is-stale { color: var(--warn); border-color: rgba(224,164,74,.4); background: linear-gradient(180deg, rgba(224,164,74,.08), transparent), var(--surface); }
.live-bar.is-stale .live-label { color: var(--warn); }
.live-bar.is-stale .live-pip i:first-child { background: var(--warn); box-shadow: none; }
.live-bar.is-stale .live-pip i:nth-child(2), .live-bar.is-stale .live-pip i:nth-child(3) { display: none; }
.stale-note { display: none; }
.live-bar.is-stale ~ .stale-note {
  display: block; color: var(--warn); font-size: .84rem;
  background: rgba(224,164,74,.07); border: 1px solid rgba(224,164,74,.3);
  border-radius: var(--radius-sm); padding: 11px 14px; margin: 0 0 20px;
}

/* ── Macro cards (LITE) — thẻ dữ liệu, không phải hộp chữ ─────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; overflow: hidden;
}
/* Vạch màu theo hướng: liếc là bắt được cả hàng, khỏi đọc chữ. */
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--flat); }
.card:has(.bias-bullish)::before { background: var(--up); }
.card:has(.bias-bearish)::before { background: var(--down); }
.card-asset { font-size: .78rem; color: var(--ink-dim); font-weight: 600; letter-spacing: .02em; margin-bottom: 12px; }
.bias { font-size: 1.3rem; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.02em; }
.bias-bullish { color: var(--up); }
.bias-bearish { color: var(--down); }
.bias-neutral { color: var(--flat); }
.card-meta { font-size: .8rem; color: var(--ink-dim); margin: 10px 0 3px; min-height: 1.3em; }
.card-tag { font-size: .74rem; color: var(--ink-faint); margin: 0; min-height: 1.2em; }
.card.is-stale { opacity: .45; }

/* Thanh độ tin cậy — thay cho chữ "Tin cậy 5/10". */
.pips { display: flex; gap: 3px; }
/* [hidden] của trình duyệt là UA stylesheet -> `.pips{display:flex}` (author) LUÔN
   thắng, bất kể specificity. Không có dòng này thì `pipsEl.hidden = true` trong app.js
   VÔ TÁC DỤNG: confidence hỏng -> server bỏ field -> JS ẩn hụt -> vạch CŨ đứng nguyên
   cạnh bias MỚI = thẻ tự mâu thuẫn, im lặng. (Agent chứng minh trên Chrome 2026-07-17.) */
.pips[hidden] { display: none; }
.pip { width: 100%; height: 4px; border-radius: 2px; background: var(--surface-2); }
.pip.on { background: var(--ink-dim); }
.card:has(.bias-bullish) .pip.on { background: var(--up); }
.card:has(.bias-bearish) .pip.on { background: var(--down); }

/* ── Track record ────────────────────────────────────────────────────────── */
.track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-align: center; }
.stat-hero { border-color: rgba(78,161,255,.45); background: linear-gradient(180deg, var(--accent-dim), transparent 70%), var(--surface); }
.stat-num { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.stat-label { display: block; font-size: .78rem; color: var(--ink-dim); margin-top: 5px; }

/* Cổng §8.5-D: mẫu chưa đủ -> KHÔNG hiện %, hiện TIẾN ĐỘ. Chữ không thì đọc như lời
   bào chữa; thanh chạy dần lên là lời hứa kiểm chứng được. */
.track-pending { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.track-progress { margin-bottom: 14px; }
.tp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.tp-title { font-weight: 640; letter-spacing: -0.01em; }
.tp-count { color: var(--ink-faint); font-size: .9rem; }
.tp-count b { color: var(--accent); font-size: 1.35rem; font-weight: 700; }
.tp-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tp-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #7cc0ff); }
.track-pending > p:last-child { margin: 0; color: var(--ink-dim); font-size: .9rem; }

/* ── Timeline — phễu nén ─────────────────────────────────────────────────────
   TIMELINE chứ không phải lưới thẻ: 4 hộp cạnh nhau đọc như 4 tính năng NGANG HÀNG,
   trong khi thực tế là một dòng chảy — tầng trên chỉ ăn thứ tầng dưới lọc còn lại.
   Xương sống gradient ink-faint -> accent = nhiễu -> tín hiệu (ẩn dụ tên sản phẩm,
   dùng có kỷ luật — DESIGN §2.2). Marker đè lên xương sống nhờ nền đặc. */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; max-width: 720px; }
.steps li { counter-increment: s; position: relative; padding: 0 0 22px 44px; }
.steps li:last-child { padding-bottom: 0; }
/* Xương sống vẽ theo TỪNG ĐOẠN NỐI (li không phải cuối), KHÔNG phải 1 vạch chạy suốt
   .steps: vạch suốt thì đuôi thò xuống dưới marker cuối, xuyên qua đoạn văn rồi cụt
   giữa không trung — đọc như vẽ lỡ tay. Đoạn nối tự dừng ở node cuối.
   Chỗ gradient "reset" giữa 2 đoạn nằm ĐÚNG dưới marker (nền đặc) nên không lộ mối. */
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: -2px; width: 2px;
  background: linear-gradient(var(--ink-faint), var(--accent)); opacity: .45;
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px; z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--accent);
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: .95rem; margin: 0 0 5px; }
.steps p { font-size: .85rem; color: var(--ink-dim); margin: 0; }

/* Nhãn múi giờ: nhỏ, mờ — nó là chú thích cho con số, không phải con số. */
.tz { color: var(--ink-faint); font-size: .76rem; font-weight: 400; }

/* ── Dòng nhận định: mục LITE (các bản mới nhất) ──────────────────────────────
   KHÔNG dùng <details> như mục full: nội dung chỉ 1 dòng, nhét vào accordion là bắt
   khách bấm để xem 4 cái nhãn. Hiện thẳng, và luôn kèm CỔNG nói rõ thứ đang bị giữ. */
.lite-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; }
.lr-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .88rem; font-weight: 600; color: var(--ink-dim); }
/* Tuổi = thứ khách ĐỌC ĐỂ HIỂU ("cách đây 2 giờ"), mốc tuyệt đối chỉ để đối chiếu
   -> tuổi đậm hơn, mốc mờ đi. Đảo lại là bắt người ta tự trừ giờ. */
.lr-head time { font-weight: 500; color: var(--ink-faint); }
.lr-head .age, .arc summary .age { color: var(--ink); font-weight: 600; }
.arc summary time { font-weight: 500; color: var(--ink-faint); }
.age { white-space: nowrap; }
.lr-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 9px; }
.lr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; }
.lr-chip b { font-weight: 600; color: var(--ink); }
.lr-bias { font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
/* Cổng: mờ hơn dữ liệu (nó là chú thích, không phải nội dung), nhưng vẫn đạt AA. */
.lr-lock, .lite-gate { display: flex; align-items: baseline; gap: 8px; color: var(--ink-faint); font-size: .8rem; margin: 0; line-height: 1.6; }
.lr-lock .ico, .lite-gate .ico { flex: none; position: relative; top: 1px; }
.lite-gate { margin-top: 16px; flex-wrap: wrap; }
.lg-cta { font-weight: 600; white-space: nowrap; }

/* ── Archive (SEO) ───────────────────────────────────────────────────────── */
.arc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.arc summary { cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: .88rem; color: var(--ink-dim); list-style: none; display: flex; align-items: center; gap: 10px; }
.arc summary::-webkit-details-marker { display: none; }
.arc summary::before { content: "+"; color: var(--accent); font-weight: 700; width: 12px; }
.arc[open] summary::before { content: "−"; }
.arc[open] summary { color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.arc-body { padding: 4px 18px 20px; }

/* ── Tab trong archive ───────────────────────────────────────────────────────
   PROGRESSIVE ENHANCEMENT: KHÔNG ẩn panel cho tới khi app.js gắn `data-js`.
   -> Không JS / crawler vẫn thấy TOÀN BỘ nội dung (không đánh đổi SEO lấy gọn).
   Đừng đổi thành `.panel{display:none}` mặc định — đó là bán SEO lấy thẩm mỹ. */
/* Dải tab cuộn ngang: ở 360px chỉ có ~286px cho 6 tab -> BẮT BUỘC vuốt ngang.
   ⚠️ Ẩn thanh cuộn (đẹp) mà không có gì thay thế = khách KHÔNG BIẾT còn tab phía sau:
   nội dung với tới được nhưng vô hình, y như bị mất. Nên `.tablist-wrap` có 2 dải mờ
   ở mép, app.js bật/tắt theo scrollLeft — mờ ở mép nào = "còn nữa ở phía đó".
   Nền dải mờ PHẢI khớp nền .arc (--surface), lệch là lộ vệt. */
.tablist-wrap { position: relative; }
.tablist-wrap::before, .tablist-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 7px; width: 26px; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.tablist-wrap::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.tablist-wrap::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.tablist-wrap.can-left::before { opacity: 1; }
.tablist-wrap.can-right::after { opacity: 1; }
.tablist { display: flex; gap: 4px; overflow-x: auto; margin: 14px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); scrollbar-width: none; scroll-behavior: smooth; }
.tablist::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .tablist { scroll-behavior: auto; } }
/* 🔴 `position: relative` KHÔNG phải để trang trí — nó là hộp chứa của `.sr-only` bên
   trong. Thiếu nó, hộp chứa gần nhất là `.tablist-wrap` (nằm NGOÀI vùng cuộn) -> theo
   spec, `overflow` chỉ cắt hậu duệ nào có hộp chứa NẰM TRONG vùng cuộn, nên .sr-only
   THOÁT khỏi .tablist và đứng ở toạ độ tĩnh của nó (x≈382 tại 360px) -> đẩy CẢ TRANG
   trượt ngang 23px. `clip: rect(0 0 0 0)` chỉ giấu phần VẼ, hộp layout vẫn còn. */
.tab {
  position: relative;
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--ink-faint); font: inherit; font-size: .8rem;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .12s, background .12s;
}
/* Icon hướng GIỮ màu bias riêng, không ăn theo `color` của tab active (.bias-* thắng vì
   gán thẳng lên icon, còn màu tab chỉ là kế thừa) -> tab active vẫn đọc đúng tăng/giảm. */
.tab-bias { width: 10px; height: 10px; flex: none; fill: currentColor; }
.tab:hover { color: var(--ink); background: rgba(255,255,255,.04); }
/* Vùng chạm ≥44px trên cảm ứng (36px là hụt) — tab nằm trong dải cuộn ngang nên
   bấm trượt là rất khó chịu. */
@media (pointer: coarse) { .tab { min-height: 44px; padding: 9px 14px; } }
.tabs[data-js] .tab.is-active { color: var(--accent); background: var(--accent-dim); border-color: rgba(78,161,255,.35); }
.tabs[data-js] .panel { display: none; }
.tabs[data-js] .panel.is-active { display: block; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .tabs[data-js] .panel.is-active { animation: none; } }
/* Không JS: các panel nối nhau -> cần vạch ngăn để đọc được */
.tabs:not([data-js]) .panel + .panel { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 14px; }
.panel { padding-top: 12px; }
.arc-head { margin: 0 0 6px; font-weight: 650; }

/* Clamp ~10 dòng + "Xem thêm". Class `is-clamped` do app.js gắn SAU khi đo -> nội dung
   ngắn không bị thêm nút vô nghĩa, và không-JS/crawler thấy đủ (không ẩn ở server).
   mask-image: mờ dần ở đáy -> mắt hiểu "còn nữa" mà không cần vạch cắt cứng. */
.panel.is-clamped .panel-inner {
  max-height: 220px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}
.more {
  margin-top: 10px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--accent);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.more:hover { border-color: var(--accent); background: var(--accent-dim); }
@media (pointer: coarse) { .more { min-height: 44px; padding: 8px 16px; } }
/* Tiêu đề DÀI trong panel. Bắt buộc: nhãn tab đã rút ngắn cho vừa 360px, và không-JS/
   crawler thấy 6 panel xếp chồng KHÔNG tab -> thiếu nó là 4 khối tài sản không tên. */
.panel-title { font-size: .9rem; margin: 0 0 9px; color: var(--ink); }
.arc dl { margin: 0; font-size: .86rem; }
.arc dt { color: var(--ink-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 10px; font-weight: 600; }
/* overflow-wrap: chuỗi mức giá do AI sinh ("4013.2/4050/4085.5") không có điểm ngắt
   -> tràn ngang -> CẢ TRANG trượt ngang trên máy 360px. */
.arc dd { margin: 3px 0 0; color: var(--ink-dim); overflow-wrap: anywhere; }
.arc-body p { overflow-wrap: anywhere; color: var(--ink-dim); font-size: .86rem; }
.arc-watch { margin: 4px 0 0; padding-left: 18px; color: var(--ink-dim); font-size: .84rem; }
.arc-watch li { margin-bottom: 4px; overflow-wrap: anywhere; }

/* ── Premium / price ─────────────────────────────────────────────────────── */
.features { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 10px; }
.features li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 16px 46px; font-size: .92rem; color: var(--ink-dim); position: relative; }
.features li::before { content: ""; position: absolute; left: 19px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.price { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 30px; text-align: center; }
.price-main { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.amount { font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; }
.per { color: var(--ink-dim); }
.price-year { color: var(--ink-dim); font-size: .88rem; margin: 8px 0 22px; }
.price .fine { margin: 20px auto 0; max-width: 52ch; }

/* ── Disclaimer — cố tình nhạt nhưng KHÔNG mờ tới mức khó đọc (§5.4.1) ────── */
.disclaimer { border-top: 1px solid var(--line-soft); padding: 44px 0; }
.disclaimer h2 { font-size: .9rem; color: var(--ink-dim); letter-spacing: 0; }
.disclaimer p { color: var(--ink-faint); font-size: .82rem; max-width: 80ch; line-height: 1.75; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* Đệm đáy 40px = ĐỐI XỨNG với đệm trên. Bản trước để 72px vì tôi tin "iOS có thanh địa
   chỉ nổi đè ~44px cuối" — TIỀN ĐỀ SAI, chưa hề kiểm: chỉ đúng khi meta viewport có
   `viewport-fit=cover`, mà template KHÔNG có -> trình duyệt đã tự trừ thanh dưới ra khỏi
   viewport, và `env(safe-area-inset-bottom)` luôn = 0. Tức 72px là đệm cho một mối lo
   không tồn tại. Giữ `env(...)` vì nó MIỄN PHÍ và tự đúng nếu sau này thêm viewport-fit
   (hoặc chạy dạng PWA standalone). */
.footer {
  border-top: 1px solid var(--line-soft); background: var(--bg-alt);
  padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px));
}
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.footer-tagline { color: var(--ink-faint); font-size: .82rem; margin: 4px 0 0; font-weight: 400; letter-spacing: 0; }
.footer-note { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.footer-note p { margin: 0 0 6px; }
.footer-note p:last-child { margin: 0; }

@media (max-width: 640px) {
  .hero { padding: 56px 0 46px; }
  .section { padding: 48px 0; }
  .price { padding: 28px 20px; }
  .wrap { padding: 0 18px; }

  /* MOBILE GỌN — 1 cột thì 4 thẻ = ~720px cuộn cho 4 con số, chiếm cả màn hình mà
     chẳng nói thêm gì. 2 cột: liếc là SO SÁNH được 4 asset cùng lúc — đó mới là việc
     của mục này (DESIGN.md §2.1 "cho dữ liệu hình dạng"). Nén cỡ chữ/đệm theo. */
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 14px 12px; }
  .card-asset { font-size: .7rem; margin-bottom: 8px; }
  .bias { font-size: 1.05rem; margin-bottom: 9px; }
  .pip { height: 3px; }
  .card-meta { font-size: .72rem; margin: 8px 0 2px; }
  .card-tag { font-size: .68rem; }

  /* Timeline nén lại (KHÔNG chia 2 cột — 2 cột cắt đứt xương sống và làm thứ tự đọc
     mơ hồ; đây là dòng chảy tuần tự, không phải lưới thẻ). */
  .steps li:not(:last-child)::after { left: 11px; top: 26px; }
  .steps li { padding: 0 0 16px 36px; }
  .steps li::before { width: 24px; height: 24px; font-size: .68rem; }
  .steps h3 { font-size: .88rem; }
  .steps p { font-size: .8rem; }

  /* Premium: 4 hộp tính năng dày -> mỏng lại, vẫn 1 cột (câu dài, 2 cột là vỡ chữ). */
  .features { gap: 8px; margin-bottom: 24px; }
  .features li { padding: 12px 14px 12px 38px; font-size: .85rem; }
  .features li::before { left: 15px; top: 18px; }
  .amount { font-size: 2.4rem; }

  /* Nút CTA footer: chữ dài -> ở 360px nó xuống 2 dòng và lệch. Cho full-width +
     canh giữa để việc xuống dòng (nếu có) trông CÓ CHỦ Ý. */
  .footer-top { gap: 16px; }
  .footer-top .btn { width: 100%; justify-content: center; }
}
/* Máy rất hẹp: 2 cột thẻ bắt đầu vỡ chữ -> trả về 1 cột. (`.steps` KHÔNG có ở đây:
   nó là timeline 1 cột sẵn, để lại là luật chết.) */
@media (max-width: 340px) {
  .cards { grid-template-columns: 1fr; }
}
/* Màn hẹp: BỎ hẳn CTA trên nav — chữ tiếng Việt dài, nhồi vào là đè logo, mà CTA của
   hero nằm ngay dưới (thấy không cần cuộn) nên không mất gì. */
@media (max-width: 520px) {
  .nav .btn { display: none; }
  /* Badge live: 360px thì nhãn + mốc giờ không đủ 1 dòng -> cho xuống dòng CÓ CHỦ Ý
     (nhãn vẫn nowrap) và bỏ hình viên thuốc — pill 2 dòng trông méo. */
  .live-bar { flex-wrap: wrap; row-gap: 3px; border-radius: var(--radius-sm); }
  .live-sep { display: none; }
}

/* ── Permalink theo ngày: /analysis + /analysis/<YYYY-MM-DD> ─────────────────
   Trang này tồn tại vì SEO -> nội dung đổ THẲNG, không tab, không accordion, không phụ
   thuộc app.js (DESIGN §pre-render). Dùng lại token sẵn có; KHÔNG thêm màu mới —
   primary vẫn là --accent xanh dương, còn xanh lá/đỏ giữ nguyên nghĩa tăng/giảm. */

.crumb { font-size: .85rem; color: var(--ink-faint); margin-bottom: 1rem; }
.crumb a { color: var(--ink-dim); }

/* Mỗi mục = MỘT LẦN nhận định đổi. Vạch trái để mắt bám được mạch thời gian khi cuộn
   qua ~10 mục dài. */
.day-item {
  border-left: 2px solid var(--line);
  padding: .25rem 0 .25rem 1.1rem;
  margin: 0 0 2.25rem;
}
.day-item h3 { margin-top: 1.1rem; font-size: 1rem; color: var(--ink-dim); }
.day-item dl { margin: .35rem 0 0; }
.day-item dt { font-size: .8rem; color: var(--ink-faint); margin-top: .5rem; }
.day-item dd { margin: .15rem 0 0; }

/* Mốc giờ: tabular-nums để cột giờ không nhảy giữa các mục (đã có ở `time` chung). */
.day-time {
  font-size: 1.05rem; font-weight: 640;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0;
}

.daynav { display: flex; gap: .5rem; flex-wrap: wrap; margin: 2rem 0 1rem; }

.day-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.day-link {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line-soft);
}
.day-link a { font-weight: 600; font-variant-numeric: tabular-nums; }

.day-cta {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.archive-more { margin-top: 1.75rem; }

/* "giữ tới HH:MM" — KHÔNG dùng .age: app.js sở hữu class đó và ghi đè nó
   thành "cách đây N giờ" (refreshAges). Xem _render_day_body. */
.day-held { font-size: .8rem; color: var(--ink-faint); font-weight: 400; }