/* =====================================================================
   moats.css — HỆ THIẾT KẾ dùng chung moats.vn (Agent F sở hữu từ pha 3)
   Mọi trang link file này TRƯỚC css riêng. Tên class cũ giữ nguyên.

   TOKEN (:root) — màu: --ink --ink2 --muted --line --line-2 --bg --card
     --card-2 --mint --ok --okbg --oktext --warn --warnbg --orange --bad
     --badbg --neu --neubg --link --border-input
     Bảng giá VN: --up --down --ref --ceil --floor (+ bản chữ đậm đủ tương
     phản: --up-t --down-t --ref-t --ceil-t --floor-t; nền nhạt: --up-bg …)
     Dữ liệu chuỗi: --c1..--c7 (#2563EB #12A37F #F59E0B #8B5CF6 #EF4444 #06B6D4 #64748B)
     Khoảng cách 4/8: --s1 4px --s2 8px --s3 12px --s4 16px --s5 20px --s6 24px --s8 32px
     Chữ: --fs-xs 12 --fs-sm 13 --fs-md 14 --fs 15 --fs-lg 18 · --font
     Khác: --radius 12 --radius-sm 8 --shadow-sm --shadow --shadow-lg --wrap 1240
   LAYOUT : .wrap · .stack (gap 20) · .stack--sm (gap 12) · .grid-2 · .grid-3 · .grid-4
            .grid-auto · .row (flex, gap 8, canh giữa) · .spacer (đẩy phải)
   CHỮ    : .lbl · .num · .muted · .small · .tiny · .strong · .sr-only · .empty
            .up .down .flat(=.ref) .ceil .floor (màu bảng giá VN) · .chg (số % có nền)
   THẺ    : .card · .card--soft · .card--flush (không padding, cho bảng) · .card-head
            .card-sub · .section-head (h2 + a "Xem tất cả →")
   SỐ LIỆU: .metric > .metric__lbl + .metric__val + .metric__sub
            .metrics (lưới các .metric có vạch ngăn) · .big-num
   PILL   : .pill + .ok|.warn|.bad|.neu|.up|.down|.ref|.info · .chip (nút lọc tròn,
            [aria-pressed=true]) · .badge (nhãn nhỏ vuông) · .badge-demo
   NÚT    : .btn · .btn--dark · .btn--mint · .btn--ghost · .btn--sm · .seg
   FORM   : .input · .select (cao 40, viền, focus xanh)
   BẢNG   : .tbl (số căn phải, tabular-nums) + .tbl--zebra · .tbl--compact
            .tbl--sticky (đầu bảng dính khi cuộn trong .scroll-x/.tbl-box)
            .tbl-box (hộp cuộn có viền, max-height 560) · th[aria-sort] mũi tên
   TAB    : .tabs (button|a [aria-selected=true]) · .tabs--pill (tab dạng viên)
   BIỂU ĐỒ: .chart (khung biểu đồ, cao 300) · .chart--sm 200 · .chart--lg 400
            .spark (ô sparkline 100x32) · .mc-err (lỗi tải biểu đồ) · .legend-dot
   KHÁC   : .note · .note--info · .empty · .skeleton · .divider · .kv · .ac
   HEADER : dính trên cùng (sticky). Màn ≤ 960px: menu gập bằng ô checkbox
            (#nav-cb + label.nav-toggle — chạy không cần JS).
   TAPE   : .tape > .tape__track > .tape__item (dải chỉ số dưới header; cuộn ngang
            được; thêm .tape--run để chạy chữ — khi đó lặp nội dung 2 lần)
   FOOTER : .site-footer > .wrap > .site-footer__grid (4 cột) + .site-footer__bottom
            (footer cũ chỉ có câu miễn trừ vẫn hiển thị đúng)
   PRO    : .pro-tag · .pro-note · .skel* · .pro-locked · .pro-gate (giữ từ pha 2)
   DARK   : BẬT khi <html data-theme="dark">, hoặc <html data-theme="auto"> + máy
            đang ở chế độ tối. Không có data-theme = luôn sáng (vì nhiều css riêng
            còn mã màu cứng #fff). Trang nào đã dùng toàn biến màu thì thêm
            data-theme="auto". charts.js theo đúng quy tắc này.

   HTML header/footer chuẩn PHA 3 (dán y nguyên, chỉ đổi aria-current):
   <header class="site-header"><div class="wrap site-header__in">
     <a class="brand" href="/" aria-label="Moats — trang chủ"><svg viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="14" fill="#1C2738"/><path d="M14 46V22l9 8 9-12 9 12 9-8v24" fill="none" stroke="#12A37F" stroke-width="6" stroke-linejoin="round"/></svg>Moats</a>
     <input type="checkbox" id="nav-cb" class="nav-cb" aria-hidden="true" tabindex="-1">
     <label for="nav-cb" class="nav-toggle" aria-label="Mở menu"><span></span></label>
     <nav class="site-nav" aria-label="Chính"><a href="/thi-truong/">Thị trường</a><a href="/co-phieu/FPT">Cổ phiếu</a><a href="/loc/">Bộ lọc</a><a href="/nganh/">Ngành</a><a href="/tin-tuc/">Tin tức</a><a href="/cong-cu/">Công cụ</a><a href="/phuong-phap/">Phương pháp</a><a href="/theo-doi/">Theo dõi</a></nav>
     <form class="site-search" action="/co-phieu/" method="get" role="search"><label class="sr-only" for="q">Tìm mã cổ phiếu</label><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg><input id="q" name="m" type="search" placeholder="Tìm mã: FPT, MWG, VCB…" autocomplete="off" autocapitalize="characters" spellcheck="false"></form>
   </div></header>
   <!-- tuỳ chọn: dải chỉ số ngay dưới header (H/G/C tự điền số từ data/market.json) -->
   <div class="tape" aria-label="Chỉ số thị trường"><div class="tape__track">
     <a class="tape__item" href="/thi-truong/"><b>VN-Index</b> <span class="num">1.712,4</span> <span class="num up">+0,84%</span></a>
   </div></div>

   <footer class="site-footer"><div class="wrap">
     <div class="site-footer__grid">
       <div><a class="brand brand--foot" href="/">Moats</a><p>Số liệu cổ phiếu Việt Nam trình bày khách quan, dễ đọc — để tự học và tự đánh giá doanh nghiệp.</p></div>
       <div><h4>Thị trường</h4><a href="/thi-truong/">Tổng quan</a><a href="/nganh/">Ngành</a><a href="/tin-tuc/">Tin tức</a></div>
       <div><h4>Công cụ</h4><a href="/loc/">Bộ lọc cổ phiếu</a><a href="/so-sanh/">So sánh</a><a href="/cong-cu/">Tính lãi kép</a><a href="/theo-doi/">Danh sách theo dõi</a></div>
       <div><h4>Học</h4><a href="/phuong-phap/">Phương pháp 4M</a><a href="/pro/">Moats Pro</a></div>
     </div>
     <div class="site-footer__bottom">Moats là công cụ học tập theo phương pháp của khoá học, không phải khuyến nghị mua bán chứng khoán. Dữ liệu tổng hợp từ nguồn công khai, có thể chậm hoặc sai sót.</div>
   </div></footer>
   (Ô tìm chạy cả khi không có JS: /co-phieu/?m=fpt. Gợi ý mã: nạp /assets/stock.js.)
   ===================================================================== */

/* ---------- token: sáng ---------- */
:root{
  --ink:#0E1726; --ink2:#1C2738; --muted:#5B6576; --line:#E3E7EC; --line-2:#EEF1F4; --bg:#F3F5F7; --card:#FFFFFF; --card-2:#F8FAFB;
  --mint:#12A37F; --ok:#0B7A5E; --okbg:#E3F4EE; --oktext:#075A45;
  --warn:#7A3B00; --warnbg:#FCEFD9; --orange:#E08A2E;
  --bad:#8F1C13; --badbg:#FBE4E2; --neu:#3A4453; --neubg:#EEF1F4;
  --info:#1D4ED8; --infobg:#E6EEFF;
  --link:#0B5F8A; --link-hover:#08425F; --border-input:#CBD2DA;
  --on-dark:#FFFFFF; --on-dark-2:#C9D2DE; --on-dark-3:#9AA9BD;
  --up:#0B9E6B; --down:#E5484D; --ref:#D9A400; --ceil:#A855F7; --floor:#06B6D4;
  --up-t:#067A52; --down-t:#C5262C; --ref-t:#8A6500; --ceil-t:#8B2FD9; --floor-t:#0B7189;
  --up-bg:#E2F5EC; --down-bg:#FDE8E8; --ref-bg:#FBF3D9; --ceil-bg:#F3E8FF; --floor-bg:#E0F7FB;
  --c1:#2563EB; --c2:#12A37F; --c3:#F59E0B; --c4:#8B5CF6; --c5:#EF4444; --c6:#06B6D4; --c7:#64748B;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs:15px; --fs-lg:18px;
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --radius:12px; --radius-sm:8px; --wrap:1240px;
  --shadow-sm:0 1px 2px rgba(14,23,38,.05);
  --shadow:0 1px 2px rgba(14,23,38,.04),0 4px 14px rgba(14,23,38,.05);
  --shadow-lg:0 16px 40px rgba(14,23,38,.18);
  --hdr:#0E1726; --hdr-2:#1A2434; --hdr-line:rgba(255,255,255,.08);
  --zebra:#F8FAFB; --hover:#F1F5F9;
  color-scheme:light;
}

/* ---------- token: tối ---------- */
:root[data-theme="dark"]{
  --ink:#E6EBF2; --ink2:#C9D2DE; --muted:#93A0B4; --line:#253042; --line-2:#1E2836; --bg:#0B111A; --card:#121A26; --card-2:#162030;
  --okbg:#0F2E25; --oktext:#5FD3A9; --ok:#1DB98C; --warn:#F2B66B; --warnbg:#33240F; --bad:#FF8F87; --badbg:#3A1715;
  --neu:#C3CCD8; --neubg:#1C2635; --info:#8FB4FF; --infobg:#16244A;
  --link:#6CB8E6; --link-hover:#A5D6F5; --border-input:#2E3A4D;
  --up-t:#2FCB8F; --down-t:#FF6B70; --ref-t:#F2C94C; --ceil-t:#C99BFF; --floor-t:#4FD8EE;
  --up-bg:#0F2E22; --down-bg:#3A1618; --ref-bg:#30280C; --ceil-bg:#2A1A42; --floor-bg:#0C2C33;
  --shadow-sm:none; --shadow:0 1px 0 rgba(255,255,255,.02); --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  --hdr:#070C13; --hdr-2:#141D2B; --zebra:#141D2A; --hover:#182232;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --ink:#E6EBF2; --ink2:#C9D2DE; --muted:#93A0B4; --line:#253042; --line-2:#1E2836; --bg:#0B111A; --card:#121A26; --card-2:#162030;
    --okbg:#0F2E25; --oktext:#5FD3A9; --ok:#1DB98C; --warn:#F2B66B; --warnbg:#33240F; --bad:#FF8F87; --badbg:#3A1715;
    --neu:#C3CCD8; --neubg:#1C2635; --info:#8FB4FF; --infobg:#16244A;
    --link:#6CB8E6; --link-hover:#A5D6F5; --border-input:#2E3A4D;
    --up-t:#2FCB8F; --down-t:#FF6B70; --ref-t:#F2C94C; --ceil-t:#C99BFF; --floor-t:#4FD8EE;
    --up-bg:#0F2E22; --down-bg:#3A1618; --ref-bg:#30280C; --ceil-bg:#2A1A42; --floor-bg:#0C2C33;
    --shadow-sm:none; --shadow:0 1px 0 rgba(255,255,255,.02); --shadow-lg:0 16px 40px rgba(0,0,0,.5);
    --hdr:#070C13; --hdr-2:#141D2B; --zebra:#141D2A; --hover:#182232;
    color-scheme:dark;
  }
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:"cv11"}
img,svg{max-width:100%}
img{display:block;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--link);text-underline-offset:2px} a:hover{color:var(--link-hover)}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.02em}
h2{font-size:19px;font-weight:700}
h3{font-size:16px;font-weight:700}
h4{font-size:14px;font-weight:700}
p{margin:0}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
::selection{background:rgba(18,163,127,.22)}

/* ---------- helpers ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--muted)}
.small{font-size:var(--fs-md)}
.tiny{font-size:var(--fs-xs)}
.strong{font-weight:700}
.lbl{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.empty{color:var(--muted);font-style:italic}
.divider{height:1px;background:var(--line);border:0;margin:var(--s4) 0}

/* màu bảng giá VN */
.up{color:var(--up-t)} .down{color:var(--down-t)} .flat,.ref{color:var(--ref-t)}
.ceil{color:var(--ceil-t)} .floor{color:var(--floor-t)}
.chg{display:inline-block;min-width:64px;padding:2px 8px;border-radius:6px;font-weight:600;font-size:var(--fs-sm);text-align:right;font-variant-numeric:tabular-nums}
.chg.up{background:var(--up-bg)} .chg.down{background:var(--down-bg)} .chg.flat,.chg.ref{background:var(--ref-bg)}
.chg.ceil{background:var(--ceil-bg)} .chg.floor{background:var(--floor-bg)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
.stack{display:flex;flex-direction:column;gap:20px}
.stack--sm{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.spacer{margin-left:auto}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.grid-2>*,.grid-3>*,.grid-4>*,.grid-auto>*{min-width:0}

/* ---------- card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-width:0;box-shadow:var(--shadow)}
.card--soft{background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:14px;box-shadow:none}
.card--flush{padding:0;overflow:hidden}
.card--flush > .card-head{padding:16px 20px 12px}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px}
.card-head h2,.card-head h3{font-size:16px}
.card-sub{margin-top:4px;color:var(--muted);font-size:var(--fs-md)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 12px}
.section-head h2{font-size:20px}
.section-head a{font-size:var(--fs-md);font-weight:600;text-decoration:none}
.section-head a:hover{text-decoration:underline}

/* ---------- số liệu ---------- */
.metric{display:flex;flex-direction:column;gap:2px;min-width:0}
.metric__lbl{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric__val{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.25}
.metric__sub{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.metrics > .metric{padding:12px 16px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.big-num{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}

/* ---------- pill / chip / badge ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;line-height:1.35}
.pill.ok{background:var(--okbg);color:var(--oktext)}
.pill.warn{background:var(--warnbg);color:var(--warn)}
.pill.bad{background:var(--badbg);color:var(--bad)}
.pill.neu{background:var(--neubg);color:var(--neu)}
.pill.info{background:var(--infobg);color:var(--info)}
.pill.up{background:var(--up-bg)} .pill.down{background:var(--down-bg)} .pill.ref,.pill.flat{background:var(--ref-bg)}
.badge-demo{background:var(--warnbg);color:var(--warn)}
.badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.03em;background:var(--neubg);color:var(--neu);line-height:1.6;vertical-align:middle}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--neu);font-size:var(--fs-md);font-weight:500;white-space:nowrap;text-decoration:none}
.chip:hover{border-color:var(--border-input);color:var(--ink)}
.chip[aria-pressed="true"],.chip[aria-current="page"],.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--card)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--radius-sm);border:1px solid var(--border-input);background:var(--card);color:var(--ink);font-weight:600;font-size:var(--fs);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--muted);color:var(--ink)}
.btn--dark{background:var(--ink);border-color:var(--ink);color:var(--card)}
.btn--dark:hover{background:var(--ink2);border-color:var(--ink2);color:var(--card)}
.btn--mint{background:var(--ok);border-color:var(--ok);color:#fff}
.btn--mint:hover{background:var(--oktext);border-color:var(--oktext);color:#fff}
.btn--ghost{background:transparent;border-color:transparent;color:var(--link)}
.btn--ghost:hover{background:var(--hover);border-color:transparent}
.btn--sm{min-height:32px;padding:0 12px;font-size:var(--fs-md)}
.btn[aria-pressed="true"]{background:var(--okbg);border-color:var(--ok);color:var(--oktext)}
.seg{display:inline-flex;gap:2px;background:var(--neubg);border-radius:var(--radius-sm);padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none;border:0;border-radius:6px;padding:4px 12px;min-height:30px;font-size:var(--fs-sm);font-weight:500;background:transparent;color:var(--neu)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(14,23,38,.10)}

/* ---------- form ---------- */
.input,.select{height:40px;padding:0 12px;border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font-size:var(--fs);min-width:0}
.select{padding-right:32px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B97A8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.input:focus,.select:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(18,163,127,.18)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:10px 0 10px 12px;text-align:right;vertical-align:middle}
.tbl th:first-child,.tbl td:first-child{padding-left:0;text-align:left}
.tbl thead th{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.01em;padding-top:8px;padding-bottom:8px;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl tbody tr{border-top:1px solid var(--line-2)}
.tbl thead + tbody tr:first-child{border-top:0}
.tbl tbody th{font-weight:600}
.tbl tbody tr:hover{background:var(--hover)}
.tbl a{text-decoration:none;font-weight:600}
.tbl a:hover{text-decoration:underline}
.tbl--zebra tbody tr:nth-child(even){background:var(--zebra)}
.tbl--zebra tbody tr:hover{background:var(--hover)}
.tbl--compact th,.tbl--compact td{padding-top:6px;padding-bottom:6px}
.card--flush .tbl th:first-child,.card--flush .tbl td:first-child,.tbl-box .tbl th:first-child,.tbl-box .tbl td:first-child{padding-left:16px}
.card--flush .tbl th:last-child,.card--flush .tbl td:last-child,.tbl-box .tbl th:last-child,.tbl-box .tbl td:last-child{padding-right:16px}
.tbl--sticky thead th{position:sticky;top:0;z-index:2;background:var(--card);box-shadow:inset 0 -1px 0 var(--line)}
.tbl th[aria-sort]{cursor:pointer;user-select:none}
.tbl th[aria-sort]:hover{color:var(--ink)}
.tbl th[aria-sort="ascending"]::after{content:" ▲";font-size:9px}
.tbl th[aria-sort="descending"]::after{content:" ▼";font-size:9px}
.tbl-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:auto;max-height:560px;-webkit-overflow-scrolling:touch}

/* ---------- note ---------- */
.note{background:var(--warnbg);color:var(--warn);border-radius:10px;padding:12px 16px;font-size:var(--fs-md)}
.note--info{background:var(--infobg);color:var(--info)}

/* ---------- header (dính) ---------- */
.site-header{background:var(--hdr);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--hdr-line);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.site-header__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;min-height:60px;padding-top:8px;padding-bottom:8px;position:relative}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em;color:#fff;text-decoration:none;flex:none}
.brand:hover{color:#fff}
.brand svg{width:30px;height:30px;flex:none}
.site-nav{display:flex;flex-wrap:wrap;gap:2px 2px;font-size:var(--fs-md);font-weight:500}
.site-nav a{color:var(--on-dark-2);text-decoration:none;padding:7px 10px;border-radius:7px;white-space:nowrap}
.site-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.site-nav a[aria-current="page"]{color:#fff;font-weight:600;background:rgba(18,163,127,.16);box-shadow:inset 0 -2px 0 var(--mint)}
.site-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--hdr-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);padding:0 12px;height:38px;flex:0 1 300px;min-width:180px;color:#8B97A8;position:relative}
.site-search:focus-within{border-color:var(--mint);box-shadow:0 0 0 3px rgba(18,163,127,.22);outline:0}
.site-search input{background:transparent;border:0;outline:none;color:#fff;font-size:var(--fs-md);width:100%;min-width:0}
.site-search input::placeholder{color:var(--on-dark-3)}
.site-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
.nav-cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav-toggle{display:none}

/* ---------- ticker tape ---------- */
.tape{background:var(--hdr-2);color:var(--on-dark-2);font-size:var(--fs-sm);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hdr-line);white-space:nowrap}
.tape::-webkit-scrollbar{display:none}
.tape__track{display:inline-flex;gap:28px;padding:7px 24px;min-width:100%}
.tape__item{display:inline-flex;align-items:baseline;gap:8px;color:var(--on-dark-2);text-decoration:none;font-variant-numeric:tabular-nums}
.tape__item b{color:#fff;font-weight:600}
a.tape__item:hover b{text-decoration:underline}
.tape .up{color:#3DDC97} .tape .down{color:#FF7A7F} .tape .flat,.tape .ref{color:#F2C94C} .tape .ceil{color:#D3A6FF} .tape .floor{color:#5EE3F5}
.tape--run .tape__track{animation:moats-tape 60s linear infinite;padding-right:0}
.tape--run:hover .tape__track{animation-play-state:paused}
@keyframes moats-tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape--run .tape__track{animation:none}}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 40px;color:var(--muted);font-size:var(--fs-md);line-height:1.6;background:var(--card)}
.site-footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:24px 32px;padding-bottom:20px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.site-footer__grid h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin-bottom:8px}
.site-footer__grid a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}
.site-footer__grid a:hover{color:var(--ink)}
.site-footer__grid p{max-width:320px;margin-top:8px}
.brand--foot{color:var(--ink)!important;font-size:18px;padding:0!important}
.site-footer__bottom{font-size:var(--fs-sm)}

/* ---------- tab ---------- */
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{flex:none;border:0;background:transparent;padding:11px 14px;font-size:var(--fs);font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;border-radius:0;transition:color .15s}
.tabs button:hover,.tabs a:hover{color:var(--ink)}
.tabs [aria-selected="true"],.tabs [aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--mint)}
.tabs--pill{border-bottom:0;gap:6px}
.tabs--pill button,.tabs--pill a{padding:6px 14px;border-radius:999px;font-size:var(--fs-md);box-shadow:none;background:var(--neubg);color:var(--neu)}
.tabs--pill [aria-selected="true"],.tabs--pill [aria-current="page"]{background:var(--ink);color:var(--card);box-shadow:none}

/* ---------- biểu đồ ---------- */
.chart{position:relative;width:100%;height:300px;min-width:0}
.chart--sm{height:200px} .chart--lg{height:400px}
.spark{width:100px;height:32px;display:inline-block;vertical-align:middle}
.mc-chart{min-width:0}
.mc-err{display:flex;align-items:center;justify-content:center;height:100%;min-height:80px;color:var(--muted);font-size:var(--fs-sm);background:var(--card-2);border-radius:8px}
.legend-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.skeleton{background:linear-gradient(90deg,var(--line-2),var(--line),var(--line-2));background-size:200% 100%;animation:moats-sk 1.4s ease infinite;border-radius:8px}
@keyframes moats-sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- pha 2: dùng chung ---------- */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:0 24px;margin:0}
.kv > div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-md);min-width:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;list-style:none;margin:0;padding:6px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);max-height:min(420px,70vh);overflow-y:auto;min-width:300px}
.ac li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:var(--fs-md)}
.ac li b{min-width:44px}
.ac li .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--neu)}
.ac li .e{font-size:12px;color:var(--muted)}
.ac li[aria-selected="true"],.ac li:hover{background:var(--neubg)}
.ac .ac-empty{color:var(--muted);cursor:default}

/* ---------- pha 2: Pro ---------- */
.pro-tag{display:inline-flex;align-items:center;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;background:#FFF1D6;color:#6B3A00;border:1px solid #F2D49B}
.pro-tag--dark{background:rgba(255,210,122,.16);color:#FFD27A;border-color:rgba(255,210,122,.45)}
.pro-note{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--muted)}
.pro-note .pro-tag{margin-left:0}
.skel{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--line),var(--line-2),var(--line));margin:10px 0}
.skel-dark .skel{background:linear-gradient(90deg,#2A3648,#344257,#2A3648)}
.skel-pill{width:220px;max-width:70%;height:30px;border-radius:999px}
.skel-bar{height:16px;border-radius:8px;width:100%}
.skel-body{padding-top:6px}
.pro-locked{position:relative;isolation:isolate}
.pro-locked > :not(.pro-gate){filter:blur(3px);opacity:.55;pointer-events:none;user-select:none}
.pro-gate{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;align-items:flex-start;padding:40px 16px}
.pro-gate__box{position:sticky;top:80px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:22px;max-width:400px;width:100%;text-align:center}
.pro-gate__box h3{font-size:18px;margin:6px 0 6px}
.pro-gate__box p{font-size:var(--fs-md);color:var(--muted);margin:0 0 14px}
.pro-gate__box .btn{width:100%}
.pro-gate__box small{display:block;margin-top:10px;font-size:12.5px;color:var(--muted)}

/* ---------- màn vừa: header gập menu ---------- */
@media (max-width:1100px){
  .site-nav a{padding:7px 8px}
  .site-search{flex-basis:220px}
}
@media (max-width:960px){
  .site-header__in{gap:8px 12px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;order:3;width:40px;height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.12);cursor:pointer;flex:none}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;border-radius:2px;background:#fff;position:relative;transition:transform .2s,background .2s}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
  .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
  .nav-cb:checked ~ .nav-toggle span{background:transparent}
  .nav-cb:checked ~ .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
  .nav-cb:checked ~ .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
  .nav-cb:focus-visible ~ .nav-toggle{outline:2px solid var(--mint)}
  .site-search{order:2;flex:1 1 160px;margin-left:auto}
  .site-nav{order:4;width:100%}
  .nav-cb ~ .site-nav{display:none;flex-direction:column;gap:0;padding:4px 0 8px;border-top:1px solid var(--hdr-line)}
  .nav-cb:checked ~ .site-nav{display:flex}
  .nav-cb ~ .site-nav a{padding:11px 4px;border-radius:0;border-bottom:1px solid var(--hdr-line);font-size:var(--fs)}
  .nav-cb ~ .site-nav a[aria-current="page"]{background:transparent;box-shadow:inset 3px 0 0 var(--mint);padding-left:12px}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .site-footer__grid > :first-child{grid-column:1/-1}
}
@media (max-width:719px){
  .wrap{padding-left:16px;padding-right:16px}
  .card{padding:16px}
  .card--flush{padding:0}
  .card--flush > .card-head{padding:14px 16px 10px}
  .site-header__in{min-height:56px}
  .site-nav{gap:0 4px;font-size:var(--fs-md)}
  .site-nav a{padding:6px 6px}
  .site-search{height:38px;position:static;min-width:0}
  .ac{left:16px;right:16px;top:54px;min-width:0}
  .tabs button,.tabs a{padding:11px 11px;font-size:var(--fs-md)}
  .tape__track{padding:6px 16px;gap:20px}
  .tbl{font-size:13.5px}
  .metric__val{font-size:18px}
  .metrics > .metric{padding:10px 12px}
  .chart{height:260px}
  .chart--lg{height:320px}
  .site-footer{margin-top:28px}
}
@media (max-width:420px){
  .brand{font-size:17px}
  .brand svg{width:28px;height:28px}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:16px}
}
@media print{
  .site-header,.tape,.nav-toggle,.site-search{display:none!important}
  body{background:#fff}
  .card{box-shadow:none}
}