:root{
  /* === SURFACES (toi -> sang) === */
  --bg:#0b0f17; --bg-0:#0b0f17; --bg2:#131a24; --bg-1:#131a24; --card:#131a24;
  --card-bg:#131a24; --panel:#131a24; --panel-alt:#151d28; --bg3:#1b2430; --bg-2:#1b2430;
  --card2:#1b2430; --panel2:#1b2430; --bg4:#232e3c; --bg-3:#232e3c;
  /* === BORDERS === */
  --border:rgba(255,255,255,0.07); --border-hi:rgba(45,212,191,0.40);
  --border2:rgba(45,212,191,0.40); --line:rgba(255,255,255,0.06);
  /* === TEXT === */
  --text:#e6edf3; --txt:#e6edf3; --tx:#e6edf3; --tx-2:#8b98a9; --text2:#8b98a9;
  --dim:#8b98a9; --mut:#8b98a9; --muted:#8b98a9; --text3:#596577; --tx-3:#596577;
  /* === ACCENT (teal) === */
  --blue:#2dd4bf; --blu:#2dd4bf; --accent:#2dd4bf; --teal:#2dd4bf; --grad-main:#2dd4bf;
  --blue-hi:#14b8a6; --accent2:#14b8a6; --blue-bg:rgba(45,212,191,0.12);
  --cyan:#38bdf8; --purple:#38bdf8;
  /* === SEMANTIC === */
  --green:#26d9a3; --grn:#26d9a3; --green-hi:#2dd4bf; --green2:#26d9a3;
  --green-bg:rgba(38,217,163,0.14); --green-dark:#10322a; --lime:#7bd88a;
  --red:#f0616d; --red2:#f0616d; --red-hi:#ff7a84; --red-bg:rgba(240,97,109,0.14);
  --acc:#f5c04e; --gold:#f5c04e; --amber:#f5c04e; --amb:#f5c04e; --yellow:#f5c04e;
  --yel:#f5c04e; --yellow2:#cfa23e; --yellow-bg:rgba(245,192,78,0.14);
  --orange:#f5a04e; --orange-bg:rgba(245,160,78,0.14); --tg:#229ED9;
  --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'IBM Plex Sans',system-ui,sans-serif;
}
/* === Component ho breadth (chi anh huong trang dung cac class nay) === */
.topbar{background:rgba(11,15,23,0.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.logo{color:var(--blue)}
.logo-mark{background:var(--blue);color:#06231f}
.nav a{color:var(--text2);border-radius:7px}
.nav a:hover{color:var(--text);background:var(--bg3)}
.nav a.active{color:#06231f;background:var(--blue);font-weight:600}
.symbar button{background:var(--blue);color:#06231f;border-radius:9px}
.symbar button:hover{background:var(--blue-hi)}
.hero{background:linear-gradient(135deg,rgba(45,212,191,0.10),rgba(56,189,248,0.05));border:1px solid var(--border);border-radius:14px}
.hero::before{background:radial-gradient(420px 300px at 92% -40%,rgba(45,212,191,.14),transparent 60%)}
.sec-num{background:var(--blue);color:#06231f;border-radius:8px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:14px}
.card:hover{border-color:var(--border-hi)}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:14px}
.stat:hover{border-color:var(--border-hi)}
.spinner{border:3px solid var(--border);border-top-color:var(--blue)}
.fchip{background:var(--bg3);border:1px solid var(--border);color:var(--text2)}
.fchip:hover{color:var(--text);border-color:var(--border-hi)}
.fchip.on{background:var(--blue);color:#06231f;border-color:transparent}
#vpaNavV2 .vpa-dd::-webkit-scrollbar-thumb{background:#2a3645}