/* ============ Vimo24h — hệ "Niên giám sống" (celadon + giấy) ============ */
:root{
  --bg:#ECEDE6; --panel:#F6F5EF; --panel-2:#EEEFE8;
  --ink:#17231E; --dim:#586159; --faint:#8A8F84;
  --line:#D6D7CC; --line-soft:#E4E4DB;
  --brand:#1E6B56; --brand2:#155040; --tint:#E7EDE9; --tint2:#DBE5DE;
  --saffron:#A9711B; --green:#2E7D5B; --red:#AF3F2D; --amber:#A9711B;
  --narr-ink:#1C4A3C;
  --err-bg:#F6ECE8; --err-bd:#E4C4BC;
  --cav-bg:#F5EFE1; --cav-bd:#E4D2A6; --cav-ink:#6E5316;
  --like-bg:#F6ECEC; --like-bd:#E2C2BA; --like-ink:#AF3F2D;
  --chart-grid:#E1E2D8; --chart-text:#8A8F84;
  --shadow:0 1px 2px rgba(23,35,30,.05),0 6px 22px -12px rgba(23,35,30,.14);
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Roboto Mono",monospace;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101815; --panel:#17211D; --panel-2:#1E2A25;
  --ink:#EAE8DF; --dim:#9BA49C; --faint:#6E786F;
  --line:#28332D; --line-soft:#212B26;
  --brand:#56B695; --brand2:#74C8AB; --tint:rgba(86,182,149,.12); --tint2:rgba(86,182,149,.2);
  --saffron:#DEA94E; --green:#59BC93; --red:#DA6C5C; --amber:#DEA94E;
  --narr-ink:#BFE6D6;
  --err-bg:rgba(218,108,92,.1); --err-bd:rgba(218,108,92,.35);
  --cav-bg:rgba(222,169,78,.1); --cav-bd:rgba(222,169,78,.3); --cav-ink:#E6C889;
  --like-bg:rgba(218,108,92,.12); --like-bd:rgba(218,108,92,.35); --like-ink:#DA6C5C;
  --chart-grid:#26312B; --chart-text:#6E786F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --bg:#101815; --panel:#17211D; --panel-2:#1E2A25;
  --ink:#EAE8DF; --dim:#9BA49C; --faint:#6E786F;
  --line:#28332D; --line-soft:#212B26;
  --brand:#56B695; --brand2:#74C8AB; --tint:rgba(86,182,149,.12); --tint2:rgba(86,182,149,.2);
  --saffron:#DEA94E; --green:#59BC93; --red:#DA6C5C; --amber:#DEA94E;
  --narr-ink:#BFE6D6;
  --err-bg:rgba(218,108,92,.1); --err-bd:rgba(218,108,92,.35);
  --cav-bg:rgba(222,169,78,.1); --cav-bd:rgba(222,169,78,.3); --cav-ink:#E6C889;
  --like-bg:rgba(218,108,92,.12); --like-bd:rgba(218,108,92,.35); --like-ink:#DA6C5C;
  --chart-grid:#26312B; --chart-text:#6E786F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.55}
a{color:inherit}
/* số liệu → font mono kiểu bản tin */
.bignum,.kpi .v,.barh .vv,td.num,.metric .v{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- masthead sáng ---------- */
.top{background:color-mix(in srgb,var(--bg) 90%,transparent);color:var(--ink);padding:0 22px;height:62px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.brand{font-size:19px;font-weight:800;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:-.02em}
.brand .mk{width:28px;height:28px;flex:0 0 28px;display:inline-block}
.brand b{font-weight:800}.brand b i{font-style:normal;color:var(--brand)}
.brand span:not(.mk){font-size:22px}
.tagline{color:var(--dim);font-size:13.5px}
.mast-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.asof{font-size:12px;color:var(--dim);font-family:var(--mono);display:flex;align-items:center;gap:7px}
.asof .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--tint)}
.ttoggle{background:var(--panel);border:1px solid var(--line);color:var(--dim);width:33px;height:33px;border-radius:8px;cursor:pointer;font-size:15px;display:grid;place-items:center;transition:.15s}
.ttoggle:hover{color:var(--brand);border-color:var(--brand)}
@media(max-width:680px){.tagline{display:none}}

.layout{display:flex;max-width:1640px;margin:0 auto;gap:0;align-items:flex-start}
.sidebar{width:280px;flex:0 0 280px;padding:16px 10px 40px;position:sticky;top:62px;max-height:calc(100vh - 62px);overflow-y:auto}
.main{flex:1;min-width:0;padding:22px 24px 40px}

/* ---- Sidebar ---- */
.gcat{margin-bottom:6px}
.gh{font-weight:700;font-size:12px;color:var(--faint);padding:7px 12px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em}
.gh.mini{margin:14px 0 2px;font-size:11px}
.khampha{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:6px 4px 8px;margin-bottom:12px}
.ds{display:block;padding:8px 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:14px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds:hover{background:var(--tint)}
.ds.on{background:var(--brand);color:#fff;font-weight:600}
.ds.nav{color:var(--brand);font-weight:600;display:flex;align-items:flex-start;gap:9px;padding-left:10px;white-space:normal;line-height:1.35}
.ds.nav .ic{width:20px;text-align:center;flex:0 0 20px}
.ds.nav.on{color:#fff}
.grp{border-radius:10px}
.grp>summary{list-style:none;cursor:pointer;user-select:none;justify-content:flex-start;border-radius:9px;transition:background .12s}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary::after{content:'▸';margin-left:auto;font-size:11px;color:var(--faint);transition:transform .15s}
.grp[open]>summary::after{transform:rotate(90deg)}
.grp>summary:hover{background:var(--tint);color:var(--brand)}
.grp .cnt{background:var(--panel-2);color:var(--dim);font-size:11px;font-weight:700;border-radius:20px;padding:1px 8px;margin-left:6px;font-family:var(--mono)}
.grp[open]>summary .cnt{background:var(--tint2);color:var(--brand)}
.glist{padding:2px 0 8px}
.glist .ds{padding-left:30px;font-size:13.5px}
.grp.sub{margin-left:8px}
.grp.sub>summary.gh{font-size:12.5px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink);padding:6px 12px 6px 18px}
.grp.sub>summary.gh::after{font-size:10px}
.grp.sub .glist .ds{padding-left:38px}
.grp.econ>summary.gh{font-size:14.5px;text-transform:none;letter-spacing:0;font-weight:700;color:var(--ink);padding:8px 12px}

/* ---- main ---- */
.hero{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:18px}
.hero h1{margin:0 0 6px;font-size:27px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.hero p{margin:0;color:var(--dim);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:var(--shadow);cursor:pointer;transition:.14s}
.kpi:hover{border-color:var(--brand);transform:translateY(-1px)}
.kpi .n{color:var(--dim);font-size:13px}
.kpi .v{font-size:22px;font-weight:700;margin:3px 0}
.kpi .c{font-size:12px;font-family:var(--mono)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px}
.card h2{margin:0 0 2px;font-size:21px;font-weight:800;letter-spacing:-.01em}
.meta{color:var(--dim);font-size:13px;margin-bottom:10px}
.meta b{color:var(--ink)}
.bignum{font-size:34px;font-weight:800}
.narr{background:var(--tint);border-left:3px solid var(--brand);border-radius:8px;padding:11px 15px;margin:12px 0;font-size:15px;color:var(--narr-ink)}
.green{color:var(--green)}.red{color:var(--red)}.amber{color:var(--amber)}.dim{color:var(--dim)}
.rangebar{display:flex;gap:6px;margin:10px 0}
.rangebar button{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 12px;font:600 13px 'Be Vietnam Pro';color:var(--dim);cursor:pointer}
.rangebar button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.src{color:var(--dim);font-size:12.5px;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.loading{color:var(--dim);padding:30px}
.err{background:var(--err-bg);border:1px solid var(--err-bd);color:var(--red);padding:14px 16px;border-radius:12px}
.foot{max-width:1640px;margin:0 auto;padding:22px 24px 40px;color:var(--dim);font-size:13px;border-top:1px solid var(--line)}
.foot b{color:var(--ink)}
/* chart */
.chart{margin-top:6px;overflow-x:auto}
.chart svg{display:block;min-width:520px}
.chart svg line{stroke:var(--chart-grid)}
.chart svg text{fill:var(--chart-text)}
.legend{color:var(--dim)}
.barh .lb{color:var(--ink)}.barh .track{background:var(--panel-2)}.barh .vv{color:var(--ink)}
@media(max-width:820px){.layout{flex-direction:column}.sidebar{width:100%;flex:auto;position:static;max-height:none}}
select{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:500 14px 'Be Vietnam Pro';color:var(--ink);min-width:180px}
.__lineblock{margin-bottom:8px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:600}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.hooklead{font-size:18px;font-weight:600;color:var(--brand2);margin:2px 0 8px;font-style:italic}
.gaugewrap{text-align:center}
.gaugewrap svg{max-width:100%}
.barh{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.barh .row{display:grid;grid-template-columns:210px 1fr 76px;align-items:center;gap:10px;font-size:13.5px}
.barh .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barh .track{height:18px;border-radius:6px;overflow:hidden}
.barh .fill{display:block;height:100%;border-radius:6px}
.barh .vv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
@media(max-width:640px){.barh .row{grid-template-columns:130px 1fr 60px;font-size:12px}}
.caveat{background:var(--cav-bg);border:1px solid var(--cav-bd);border-left:3px solid var(--saffron);border-radius:8px;padding:10px 14px;margin:12px 0;font-size:14.5px;color:var(--cav-ink)}
.caveat b{color:var(--cav-ink)}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.metric .k{color:var(--dim);font-size:13px}
.metric .v{font-size:22px;font-weight:700;margin:2px 0}
.metric .rule{color:var(--dim);font-size:11.5px}

/* ===== Nền kinh tế ===== */
.econgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:6px}
.econcard{display:block;padding:18px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--panel);transition:.15s;box-shadow:var(--shadow)}
.econcard:hover{border-color:var(--brand);transform:translateY(-2px)}
.econcard .flag{font-size:34px;line-height:1}
.econcard .en{font-weight:800;font-size:18px;margin:4px 0;letter-spacing:-.01em}
.econcard .econlinks{margin-top:9px;font-size:12px;color:var(--brand);font-weight:600}
/* Tổng quan scrollspy */
.story{display:flex;gap:22px;align-items:flex-start}
.story-main{flex:1;min-width:0}
.story-toc{flex:0 0 196px;position:sticky;top:76px;font-size:13.5px;padding-left:2px}
.story-toc .toc-h{text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--faint);font-weight:700;margin-bottom:8px;padding-left:12px}
.story-toc a{display:block;padding:6px 12px;border-radius:8px;color:var(--dim);text-decoration:none;border-left:2px solid var(--line);line-height:1.3}
.story-toc a:hover{color:var(--ink);background:var(--tint)}
.story-toc a.on{color:var(--brand);font-weight:700;border-left-color:var(--brand);background:var(--tint)}
.story-sec{scroll-margin-top:78px}
.secchart{margin-top:10px}
@media(max-width:900px){.story{flex-direction:column}.story-toc{display:none}}

/* ===== Xưởng biểu đồ ===== */
.blab{display:block;font-weight:700;font-size:12px;color:var(--faint);margin:14px 0 5px;text-transform:uppercase;letter-spacing:.06em}
.binput{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font:500 14.5px 'Be Vietnam Pro';color:var(--ink);background:var(--panel)}
.binput:focus{outline:none;border-color:var(--brand)}
.blist{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;margin-top:6px;padding:4px;background:var(--panel)}
.bitem{display:block;padding:7px 10px;border-radius:7px;font-size:14px;cursor:pointer}
.bitem:hover{background:var(--tint)}
.bitem.on{background:var(--tint);font-weight:600}
.bitem input{margin-right:7px}
.btypes{display:flex;gap:16px;flex-wrap:wrap;font-size:14.5px}
.btypes label{cursor:pointer}
.brow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.bbtn{background:var(--brand);color:#fff;border:0;border-radius:9px;padding:9px 20px;font:700 14.5px 'Be Vietnam Pro';cursor:pointer;transition:.14s}
.bbtn:hover{background:var(--brand2)}
.bbtn.ghost{background:var(--panel-2);color:var(--brand)}
.bbtn[disabled]{opacity:.45;cursor:not-allowed}

/* ===== tài khoản + modal ===== */
.acct{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:12px;box-shadow:var(--shadow)}
.acct-em{font-size:12.5px;color:var(--dim);padding:5px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.acct-out{color:var(--red)!important;font-size:13px}
.loginbtn{width:100%;background:var(--brand);color:#fff;border:0;border-radius:9px;padding:10px;font:700 14px 'Be Vietnam Pro';cursor:pointer}
.loginbtn:hover{background:var(--brand2)}
.modal-bg{position:fixed;inset:0;background:rgba(15,20,17,.6);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:400px;width:100%;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal h2{margin:0 0 6px;font-size:21px}
.modal-x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:18px;cursor:pointer;color:var(--dim)}

/* Cờ SVG */
.flg{width:22px;height:14.7px;border-radius:2px;vertical-align:-3px;display:inline-block;box-shadow:0 0 0 1px rgba(23,35,30,.18)}
.gh.econ .flg,.hero h1 .flg,.bitem .flg{margin-right:3px}
.flag{line-height:0}
.flag .flg{width:52px;height:34.7px;vertical-align:0;border-radius:4px;box-shadow:0 0 0 1px rgba(23,35,30,.14),var(--shadow)}
.iflg{width:19px;height:12.7px;vertical-align:-2px;border-radius:2px;box-shadow:0 0 0 1px rgba(23,35,30,.18);margin-right:3px}
.hero h1 .flg{width:30px;height:20px;vertical-align:-4px}

/* ===== cộng đồng ===== */
.commgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.commcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--panel);box-shadow:var(--shadow);transition:.15s}
.commcard:hover{border-color:var(--brand);transform:translateY(-2px)}
.commprev{height:120px;background:var(--panel-2);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.commprev .chart{width:100%;margin:0}
.prevempty{color:var(--faint);font-size:20px}
.commbody{padding:11px 14px;flex:1;display:flex;flex-direction:column}
.commstats{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;font-size:11.5px;color:var(--dim);font-family:var(--mono)}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0}
.likebtn.liked{color:var(--like-ink);border-color:var(--like-bd);background:var(--like-bg)}
.chart.spark{overflow:hidden}
.chart.spark svg{min-width:0!important;height:120px}
.sorttabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sorttab{background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font:600 13px 'Be Vietnam Pro';color:var(--dim);cursor:pointer}
.sorttab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.histbox{margin-top:4px}
.histlist{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;display:flex;flex-direction:column;gap:10px}
.histrow{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.histchg{font-size:13px;margin-top:3px}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Home concept "dải Nhịp đập" + chọn giao diện ===== */
.homeswitch{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:16px}
.homeswitch button{background:var(--panel);border:0;padding:7px 16px;font:600 13px 'Be Vietnam Pro';color:var(--dim);cursor:pointer}
.homeswitch button.on{background:var(--brand);color:#fff}
.homeswitch button+button{border-left:1px solid var(--line)}
.seclabel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:22px 0 12px}
.ledger{display:grid;grid-template-columns:minmax(240px,290px) 1fr;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:18px}
.gaugecell{padding:20px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.gaugecell .verdict{font-size:12.5px;color:var(--dim);line-height:1.4}.gaugecell .verdict b{color:var(--amber)}
.stats{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:17px 20px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);min-width:0}
.stat:nth-child(3n){border-right:0}.stat:nth-last-child(-n+3){border-bottom:0}
.stat .k{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v{font-size:25px;font-weight:700;margin-top:4px;font-family:var(--mono);letter-spacing:-.02em}
.stat .v small{font-size:13px;color:var(--dim);font-family:'Be Vietnam Pro'}
.stat .chg{font-size:12px;margin-top:3px;font-weight:600;font-family:var(--mono)}
.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:4px;text-transform:uppercase}
.chip.hot{background:var(--cav-bg);color:var(--saffron)}
.chip.ok{background:var(--tint);color:var(--green)}
@media(max-width:720px){.ledger{grid-template-columns:1fr}.gaugecell{border-right:0;border-bottom:1px solid var(--line)}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3n){border-right:1px solid var(--line-soft)}.stat:nth-child(2n){border-right:0}}
.hubs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hub{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:.15s;box-shadow:var(--shadow)}
.hub:hover{border-color:var(--brand);transform:translateY(-2px)}
.hub-top{display:flex;align-items:center;gap:9px}.hub-top .nm{font-weight:700;font-size:15px}
.hub .big{font-size:23px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.hub .big span{font-size:12px;font-weight:600;color:var(--dim);font-family:'Be Vietnam Pro'}
.hub .read{font-size:12.5px;color:var(--dim);line-height:1.4}
.hub .hfoot{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);border-top:1px solid var(--line-soft);padding-top:8px;margin-top:auto}
.hub .hfoot .go{color:var(--brand);font-weight:600}
@media(max-width:860px){.hubs{grid-template-columns:repeat(2,1fr)}}@media(max-width:440px){.hubs{grid-template-columns:1fr}}
.storyband{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 28px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;box-shadow:var(--shadow);margin:16px 0}
.storyband .lead{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.storyband h3{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0 0 10px;line-height:1.22;text-wrap:balance}
.storyband p{margin:0;color:var(--dim);font-size:14px;line-height:1.6}.storyband p b{color:var(--ink)}
.domino{border-left:2px solid var(--saffron);padding-left:16px;display:flex;flex-direction:column;gap:9px}
.domino .step{font-size:13px;display:flex;gap:10px}.domino .step .n{font-family:var(--mono);font-size:11px;color:var(--saffron);font-weight:700}
.domino .step b{color:var(--ink)}
@media(max-width:760px){.storyband{grid-template-columns:1fr;gap:18px;padding:22px}}

/* ===== Cẩm Nang / Từ điển / CTT / Soi cổ phiếu (port) ===== */
.q{display:flex;gap:10px;margin-bottom:6px}
.q input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 15px;color:var(--ink);font:500 16px 'Be Vietnam Pro'}
.q input:focus{outline:none;border-color:var(--brand)}
.q button{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:0 22px;font:700 15px 'Be Vietnam Pro';cursor:pointer}
.gauge{font-size:34px;font-weight:800;line-height:1;font-family:var(--mono)}
.gauge.green{color:var(--green)}.gauge.amber{color:var(--saffron)}.gauge.red{color:var(--red)}.gauge.gray{color:var(--dim)}
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-weight:700;font-size:13px}
.pill.green{background:var(--tint);color:var(--green)}.pill.amber{background:var(--cav-bg);color:var(--saffron)}.pill.red{background:var(--like-bg);color:var(--red)}.pill.gray{background:var(--panel-2);color:var(--dim)}
.crytabs{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}
.crytab{background:var(--panel-2);border:1px solid var(--line-soft);color:var(--ink);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.crytab:hover{background:var(--brand);color:#fff;border-color:transparent}
table.clickable tbody tr:hover{background:var(--tint)}
table.clickable tbody tr td:last-child{color:var(--brand);opacity:0;transition:.15s}
table.clickable tbody tr:hover td:last-child{opacity:1}
.lgloss{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px}
.lgloss .lg-h{font-weight:700;font-size:15px;margin-bottom:2px}
.lgloss .lg-cat{font-size:11px;color:var(--saffron);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.lgloss p{margin:6px 0;font-size:13.5px;line-height:1.55;color:var(--narr-ink)}
.lgloss .lg-last{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--dim)}
.metric{border-left:4px solid var(--line)}
.metric.green{border-left-color:var(--green)}.metric.amber{border-left-color:var(--saffron)}.metric.red{border-left-color:var(--red)}
.metric .v.green{color:var(--green)}.metric .v.amber{color:var(--saffron)}.metric .v.red{color:var(--red)}
.ic{cursor:help;color:var(--faint);font-size:12px}
.sig{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chipv{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:5px 9px;font-size:12.5px}
.chipv b{color:var(--dim)}
.chipv.buy{border-color:var(--green);background:var(--tint)}.chipv.buy b{color:var(--green)}
.chipv.sell{border-color:var(--red);background:var(--like-bg)}.chipv.sell b{color:var(--red)}
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:8px}
.gitem{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.gt{font-weight:700;color:var(--brand);font-size:15px;margin-bottom:4px}
.gs{color:var(--ink);font-size:14px;margin-bottom:6px;line-height:1.45}
.gk{color:var(--dim);font-size:12.5px;border-top:1px solid var(--line);padding-top:6px}
.arts{display:flex;flex-direction:column;gap:10px}
.artc{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:.15s}
.artc:hover{border-color:var(--brand);transform:translateY(-1px)}
.ae{font-size:28px;line-height:1}
.atag{color:var(--saffron);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.at{color:var(--ink);font-size:17px;font-weight:700;margin:2px 0}
.as{color:var(--dim);font-size:13.5px}
.article .back{color:var(--dim);text-decoration:none;font-size:14px}
.atitle{font-size:25px;font-weight:800;margin:8px 0 4px;letter-spacing:-.01em}
.asum{color:var(--dim);font-size:16px;margin-bottom:14px;font-style:italic}
.abody{max-width:760px}
.abody h3{color:var(--brand);font-size:18px;margin:20px 0 6px}
.abody p{color:var(--ink);font-size:15px;line-height:1.7;margin:8px 0}
.abody ul{margin:6px 0;padding-left:22px}.abody li{font-size:15px;line-height:1.6;margin:4px 0}
.abody blockquote{border-left:3px solid var(--saffron);background:var(--cav-bg);margin:14px 0;padding:10px 16px;border-radius:8px;color:var(--cav-ink)}

/* ===================== NAV Phương án B (top mega-menu + mobile drawer) ===================== */
.top{gap:12px}
.brand{flex:0 0 auto}
.mast-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.topnav{display:flex;align-items:center;gap:2px;min-width:0}
.navmain{display:flex;gap:2px}
.navutil{display:flex;gap:2px;margin-left:14px}
.navacct{display:flex;align-items:center;gap:8px;margin-left:14px}
.pillar{position:relative}
.ptrigger{background:none;border:0;font:700 14.5px 'Be Vietnam Pro';color:var(--ink);padding:9px 12px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;line-height:1}
.pillar.main>.ptrigger{color:var(--brand)}
.pillar.util>.ptrigger{color:var(--saffron);font-size:13.5px;font-weight:600}
.ptrigger:hover,.pillar.on>.ptrigger{background:var(--tint)}
.pcaret{font-size:9px;opacity:.55}
.mega{position:absolute;top:calc(100% + 6px);left:0;min-width:236px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.16);padding:9px;display:none;z-index:40}
.pillar.util .mega{left:auto;right:0}
.pillar:hover>.mega,.pillar:focus-within>.mega{display:block}
.pillar:hover>.mega.wide,.pillar:focus-within>.mega.wide{display:grid;grid-template-columns:repeat(3,minmax(184px,1fr));gap:2px 16px;min-width:626px}
.mcol{min-width:0}
.mct{font:700 11px 'Be Vietnam Pro';text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:8px 10px 4px}
.mi{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14px;white-space:nowrap}
.mi:hover{background:var(--tint);color:var(--brand)}
.mi .mic{width:20px;text-align:center;flex:0 0 20px}
.mi.soon{color:var(--faint)}
.soon-tag{margin-left:auto;font-size:10px;background:var(--tint2);color:var(--dim);padding:1px 7px;border-radius:6px;font-weight:600}
.mrow{display:flex;align-items:center;gap:7px;padding:7px 10px;font-size:13px;flex-wrap:wrap}
.mrow .fl{font-weight:600;color:var(--ink)}
.mrow .mdot{color:var(--faint)}
.mrow a{color:var(--brand);text-decoration:none;font-size:12.5px;font-weight:600}
.mrow a:hover{text-decoration:underline}
.coinrow{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px}
.coin{border:1px solid var(--line);border-radius:8px;padding:5px 10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:13px}
.coin:hover{border-color:var(--brand);color:var(--brand);background:var(--tint)}
.navacct .loginbtn{padding:7px 13px;font-size:13.5px;border:1px solid var(--brand);background:var(--tint);color:var(--brand);border-radius:9px;cursor:pointer;font-weight:600}
.navacct .acctchip{font-size:13px;color:var(--dim)}
.navacct .acctchip a{color:var(--brand);text-decoration:none;font-weight:600}
.navacct .acctout{font-size:12.5px;color:var(--dim);text-decoration:none}
.navacct .acctout:hover{color:var(--red)}
.navtoggle{display:none;background:var(--panel);border:1px solid var(--line);color:var(--ink);width:38px;height:38px;border-radius:9px;font-size:18px;cursor:pointer;place-items:center}
.navscrim{position:fixed;top:62px;left:0;right:0;bottom:0;background:rgba(0,0,0,.42);z-index:28;border:0}

/* sidebar → contextual (chỉ hiện trang Vĩ mô) */
.sidebar{display:none}
body.has-sidebar .sidebar{display:block}
.sbhead{font-size:15px;padding:6px 10px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:6px;display:flex;align-items:center;gap:8px}

/* ===== Mobile: hamburger + drawer ===== */
@media(max-width:860px){
  .top{z-index:35}
  .navtoggle{display:grid}
  .asof{display:none}
  .topnav{position:fixed;top:62px;left:0;bottom:0;width:min(86vw,340px);background:var(--panel);border-right:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 12px 28px;overflow-y:auto;transform:translateX(-102%);transition:transform .22s ease;z-index:30}
  body.nav-open .topnav{transform:none;box-shadow:8px 0 40px rgba(0,0,0,.28)}
  .navmain,.navutil{flex-direction:column;gap:0;margin:0}
  .navacct{flex-direction:column;align-items:stretch;gap:8px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-soft)}
  .pillar{position:static}
  .ptrigger{width:100%;justify-content:space-between;padding:13px 10px;font-size:16px;border-bottom:1px solid var(--line-soft);border-radius:0}
  .pillar.util>.ptrigger{font-size:15px}
  .mega,.pillar:hover>.mega,.pillar:focus-within>.mega{position:static;display:none;box-shadow:none;border:0;border-radius:0;min-width:0;padding:2px 0 8px 6px;margin:0;background:none}
  .pillar.open>.mega,.pillar.open>.mega.wide{display:block!important;grid-template-columns:1fr!important;min-width:0!important}
  .pcaret{transition:transform .2s}
  .pillar.open .pcaret{transform:rotate(180deg)}
  .mi{padding:11px 10px;font-size:15px}
  .mct{padding-top:12px}
  .coinrow{padding:6px 4px}
  .layout{flex-direction:column}
  body.has-sidebar .sidebar{width:100%;flex:auto;position:static;max-height:none;padding:12px 14px 20px}
  .main{padding:18px 16px 34px}
}
@media(max-width:400px){ .main{padding:16px 12px 30px} }