/* VietFund v4 — extracted CSS */

:root{
  --bg:#07090f; --surface:#0c1018; --panel:#111722; --raised:#16202e; --base:#111722;
  --line:#1d2c44; --line2:#26384e; --ghost:#344a68;
  --t1:#ffffff; --t2:#f4f7ff; --t3:#e0e8ff; --t4:#b4c4e0; --t5:#8a9ec0; --t6:#5e7296;
  --up:#00f090; --down:#ff3d5a; --ceil:#a882e8; --floor:#18c0ff;
  --acc:#18c0ff; --acc2:#7c3aed; --warn:#f59e0b;
  --up-bg:rgba(0,240,144,.12); --down-bg:rgba(255,61,90,.12); --acc-bg:rgba(24,192,255,.14); --warn-bg:rgba(245,158,11,.12);
  --mono:ui-monospace,'Cascadia Code','Source Code Pro','Consolas',monospace; --sans:system-ui,-apple-system,'Segoe UI',sans-serif;
  --sb:env(safe-area-inset-bottom,0px); --st:env(safe-area-inset-top,0px);
  --sidebar:230px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--t3);font-family:var(--sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overscroll-behavior:none;height:100%}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
input,select,textarea{font-family:var(--mono);background:var(--panel);border:1px solid var(--line2);color:var(--t2);border-radius:4px;padding:8px 10px;font-size:12px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 2px rgba(24,192,255,.15)}
select option{background:var(--panel)}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--ghost);border-radius:2px}

#app{display:flex;height:100dvh;overflow:hidden}

#sidebar{width:var(--sidebar);flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding-top:var(--st);z-index:200;transition:transform .22s;overflow-y:auto}
.logo{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line)}
.logo-mark{width:30px;height:30px;border-radius:6px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;font-weight:700;color:#000;box-shadow:0 0 20px rgba(24,192,255,.5)}
.logo-name{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--t1);letter-spacing:.5px}
.logo-sub{font-family:var(--mono);font-size:8px;color:var(--acc);letter-spacing:2px;text-transform:uppercase;margin-top:1px}

.navg{padding:12px 10px 4px}
.navg-l{font-family:var(--mono);font-size:7.5px;color:var(--t5);letter-spacing:2.5px;text-transform:uppercase;padding:0 8px;margin-bottom:4px}
.nav{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:4px;cursor:pointer;margin-bottom:1px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--t4);position:relative}
.nav:hover{background:var(--raised);color:var(--t2)}
.nav.on{background:var(--acc-bg);color:var(--acc);border:1px solid rgba(24,192,255,.25)}
.nav.on::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:2px;height:16px;background:var(--acc)}
.nav-ic{font-size:13px;width:18px;text-align:center;flex-shrink:0;opacity:.85}
.nav-bdg{margin-left:auto;font-family:var(--mono);font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(24,192,255,.15);color:var(--acc);border:1px solid rgba(24,192,255,.25)}

.sb-mkt{margin:8px 10px 4px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:5px}
.mkt-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.mkt-n{font-family:var(--mono);font-size:9.5px;color:var(--t4);font-weight:500}
.mkt-v{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--t1)}
.mkt-c{font-family:var(--mono);font-size:9.5px;font-weight:600}

.sb-foot{margin-top:auto;padding:10px 14px;border-top:1px solid var(--line)}
.sync{display:flex;align-items:center;gap:6px}
.sync-led{width:5px;height:5px;border-radius:50%;background:var(--up)}
.sync-led.busy{animation:p 1.2s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.3}}
.sync-t{font-family:var(--mono);font-size:9.5px;color:var(--t4);font-weight:500}

#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:clip}

.tape{height:28px;background:#080c16;border-bottom:1px solid var(--line);display:flex;align-items:center;overflow:hidden;flex-shrink:0}
.tape-i{display:flex;align-items:center;gap:6px;padding:0 16px;border-right:1px solid var(--line);white-space:nowrap;height:100%;flex-shrink:0}
.tape-n{font-family:var(--mono);font-size:9.5px;color:var(--t4);font-weight:500}
.tape-v{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--t1)}
.tape-c{font-family:var(--mono);font-size:10px;font-weight:600}
.tape-d{margin-left:auto;padding:0 14px;font-family:var(--mono);font-size:9.5px;color:var(--t5)}

.tbar{height:52px;padding:8px 20px;padding-top:calc(var(--st) + 8px);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.tbar-l{display:flex;align-items:center;gap:10px}
.tbar-menu{display:none;width:30px;height:30px;border-radius:4px;border:1px solid var(--line);background:var(--panel);align-items:center;justify-content:center;font-size:13px;color:var(--t4)}
.crumb{display:flex;align-items:center;gap:6px}
.crumb-i{font-family:var(--mono);font-size:11.5px;color:var(--t4)}
.crumb-i.on{color:var(--t1);font-weight:700}
.crumb-s{color:var(--t5);font-size:10px}
.tbar-r{display:flex;align-items:center;gap:8px}
.btn{font-family:var(--mono);font-size:10px;font-weight:600;padding:6px 12px;border-radius:4px;letter-spacing:.4px;white-space:nowrap;transition:.12s}
.btn-g{border:1px solid var(--line);color:var(--t4);background:var(--panel)}
.btn-g:hover{border-color:var(--acc);color:var(--acc)}
.btn-p{background:var(--acc);color:#000;font-weight:700;text-transform:uppercase}
.btn-d{background:rgba(255,64,96,.12);color:var(--down);border:1px solid rgba(255,64,96,.3)}

#content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.scr{display:none}.scr.on{display:block}
.pad{padding:18px 20px 80px}

#bnav{display:flex!important;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);padding:4px 0 env(safe-area-inset-bottom,0px);z-index:999;flex-shrink:0}
.bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;font-family:var(--mono);font-size:8px;color:var(--t5);cursor:pointer;text-transform:uppercase;font-weight:600}
.bn.on{color:var(--acc)}
.bn-ic{font-size:16px}

/* Mobile/Tablet sidebar override */
@media(max-width:1024px){
  #sidebar{position:fixed;top:0;left:0;height:100dvh;transform:translateX(-100%)}
  #sidebar.open{transform:translateX(0);box-shadow:5px 0 20px rgba(0,0,0,.5)}
  #main{width:100%!important}
  .tbar-menu{display:flex!important}
}
@media(min-width:1025px){
  #sidebar{display:flex!important}
}

/* Hero */
.hero{background:var(--surface);border:1px solid var(--line2);border-top:3px solid var(--acc);border-radius:6px;padding:22px 24px;margin-bottom:18px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(24,192,255,.10),transparent 70%);pointer-events:none}
.h-l{font-family:var(--mono);font-size:9.5px;color:var(--t4);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px;font-weight:700}
.h-v{font-family:var(--mono);font-size:36px;font-weight:700;color:var(--t1);line-height:1;letter-spacing:-.5px;text-shadow:0 0 40px rgba(255,255,255,.08)}
.h-s{font-family:var(--mono);font-size:13px;margin-top:6px;color:var(--t3)}

/* KPI */
.kpi{background:var(--panel);border:1px solid var(--line2);border-radius:5px;padding:10px 12px;min-width:0}
.kpi-l{font-family:var(--mono);font-size:9.5px;color:var(--t4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;font-weight:700}
.kpi-v{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--t1);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-s{font-family:var(--mono);font-size:11px;color:var(--t4);margin-top:5px}

/* Stat */
.stat{background:var(--panel);border:1px solid var(--line2);border-radius:5px;padding:15px 18px;position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%}
.s-up::before{background:var(--up)}.s-up{border-color:rgba(0,240,144,.30)}
.s-dn::before{background:var(--down)}.s-dn{border-color:rgba(255,61,90,.30)}
.s-ac::before{background:var(--acc)}.s-ac{border-color:rgba(24,192,255,.30)}
.s-wr::before{background:var(--warn)}.s-wr{border-color:rgba(255,176,32,.30)}
.s-pp::before{background:var(--acc2)}.s-pp{border-color:rgba(168,130,232,.30)}
.s-tl::before{background:var(--teal)}.s-tl{border-color:rgba(0,223,192,.30)}
.s-l{font-family:var(--mono);font-size:9.5px;color:var(--t4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px;font-weight:700}
.s-v{font-family:var(--mono);font-size:22px;font-weight:700;color:#ffffff;line-height:1}
.s-s{font-family:var(--mono);font-size:11px;color:var(--t4);margin-top:6px}

/* Section */
.sec{display:flex;align-items:center;gap:10px;margin:20px 0 12px}
.sec-r{flex:1;height:1px;background:var(--line2)}
.sec-l{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--t4);white-space:nowrap}
.sec-b{font-family:var(--mono);font-size:8.5px;padding:2px 8px;border-radius:3px;background:var(--panel);border:1px solid var(--line2);color:var(--t3);white-space:nowrap}

/* Table */
.tw{background:var(--panel);border:1px solid var(--line2);border-radius:5px;overflow:hidden;margin-bottom:14px}
.ts{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dt{width:100%;border-collapse:collapse;min-width:600px}
.dt thead tr{background:var(--raised);border-bottom:1px solid var(--line2)}
.dt th{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);padding:11px 13px;text-align:right;white-space:nowrap}
.dt th:first-child{text-align:left}
.dt td{font-family:var(--mono);font-size:13px;color:var(--t2);padding:10px 13px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.dt td:first-child{text-align:left;color:var(--t2);font-weight:600}
.dt tbody tr:last-child td{border-bottom:none}
.dt tbody tr{cursor:pointer;transition:background .08s}
.dt tbody tr:hover td{background:var(--raised);color:var(--t1)}
.dt tfoot td{background:var(--raised);border-top:1px solid var(--line2);font-weight:700;color:var(--t1);font-size:13px}
.up{color:var(--up) !important}.dn{color:var(--down) !important}.wn{color:var(--warn) !important}
.ac{color:var(--acc) !important;font-weight:700}

/* List */
.lc{background:var(--panel);border:1px solid var(--line2);border-radius:5px;overflow:hidden;margin-bottom:14px}
.lr{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.lr:last-child{border-bottom:none}
.lr:hover{background:var(--raised)}
.lr-av{width:42px;height:42px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;flex-shrink:0}
.lr-b{flex:1;min-width:0}
.lr-t{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--t1)}
.lr-m{font-size:11.5px;color:var(--t4);margin-top:3px}
.lr-r{text-align:right;flex-shrink:0}
.lr-v{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--t1)}
.lr-c{font-family:var(--mono);font-size:11.5px;margin-top:3px;font-weight:600}

/* Tag */
.tg{display:inline-flex;align-items:center;font-family:var(--mono);font-size:8.5px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:.5px}
.tg-up{background:rgba(0,240,144,.15);color:var(--up);border:1px solid rgba(0,240,144,.35)}
.tg-dn{background:rgba(255,61,90,.15);color:var(--down);border:1px solid rgba(255,61,90,.35)}
.tg-ac{background:var(--acc-bg);color:var(--acc);border:1px solid rgba(24,192,255,.35)}
.tg-wr{background:rgba(255,176,32,.12);color:var(--warn);border:1px solid rgba(255,176,32,.35)}
.tg-pp{background:rgba(168,130,232,.12);color:var(--acc2);border:1px solid rgba(168,130,232,.35)}
.tg-nu{background:var(--raised);color:var(--t3);border:1px solid var(--line2)}

/* Form */
.fp{background:var(--panel);border:1px solid var(--line2);border-radius:5px;padding:16px 18px;margin-bottom:14px}
.ft{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acc);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.fg{margin-bottom:12px}
.fl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--t4);margin-bottom:5px;display:block}
.g2{display:flex;flex-direction:column;gap:10px}
.g3{display:flex;flex-direction:column;gap:10px}
.g4{display:flex;flex-direction:column;gap:10px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* Chips */
.chips{display:flex;gap:5px;overflow-x:auto;margin-bottom:14px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-family:var(--mono);font-size:10px;font-weight:600;padding:5px 12px;border-radius:3px;border:1px solid var(--line2);background:var(--panel);color:var(--t4);cursor:pointer;letter-spacing:.3px}
.chip.on{background:var(--acc-bg);color:var(--acc);border-color:rgba(24,192,255,.35);color:#ffffff}

/* Info */
.ib{border-radius:4px;padding:11px 13px;margin-bottom:12px;border-left:3px solid}
.ib-i{background:rgba(24,192,255,.06);border-color:var(--acc)}
.ib-w{background:rgba(245,166,35,.06);border-color:var(--warn)}
.ib-e{background:rgba(255,64,96,.06);border-color:var(--down)}
.ib-u{background:rgba(0,232,130,.06);border-color:var(--up)}
.ib-l{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
.ib-i .ib-l{color:var(--acc)}.ib-w .ib-l{color:var(--warn)}.ib-e .ib-l{color:var(--down)}.ib-u .ib-l{color:var(--up)}
.ib-b{font-size:12.5px;color:var(--t2);line-height:1.75}

/* Misc */
.kv{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:none}
.kv-k{font-family:var(--mono);font-size:11px;color:var(--t4);font-weight:500}
.kv-v{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--t1)}
.div{height:1px;background:var(--line);margin:14px 0}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--raised);border:1px solid var(--line2);border-radius:4px;padding:9px 18px;font-family:var(--mono);font-size:11px;color:var(--t1);z-index:9999;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.toast.on{opacity:1}
.empty{text-align:center;padding:48px 24px}
.em-i{font-size:32px;margin-bottom:10px;opacity:.5}
.em-t{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--t2);margin-bottom:6px}
.em-s{font-size:12px;color:var(--t4);margin-bottom:18px}

/* Universe */
.ug{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:7px;margin-bottom:14px}
.uc{background:var(--panel);border:1px solid var(--line2);border-radius:5px;padding:11px 12px;cursor:pointer;position:relative}
.uc:hover{border-color:var(--acc);background:var(--acc-bg)}
.uc.on{border-color:var(--acc);background:var(--acc-bg)}
.uc-bdg{position:absolute;top:5px;right:5px;font-family:var(--mono);font-size:7.5px;font-weight:700;padding:1px 4px;border-radius:2px}
.uc-t{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--t1)}
.uc-s{font-family:var(--mono);font-size:9px;color:var(--t5);margin-top:2px;font-weight:500}
.uc-p{font-family:var(--mono);font-size:13px;color:var(--acc);margin-top:6px;font-weight:700}
.uc-c{font-family:var(--mono);font-size:10px;margin-top:2px;font-weight:600}

/* Allocation */
.ab{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:1px;margin-bottom:10px}
.ab-s{transition:flex .4s}
.al{display:flex;flex-wrap:wrap;gap:8px}
.al-i{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;color:var(--t4)}
.al-d{width:8px;height:8px;border-radius:2px}

/* Detail */
.cd{background:var(--panel);border:1px solid var(--line);border-top:1px solid var(--acc);border-radius:5px;padding:16px 18px;margin-bottom:14px}

/* Gauge */
.gt{width:100%;height:6px;background:linear-gradient(90deg,var(--up),var(--warn),var(--down));border-radius:3px;position:relative;margin:8px 0 4px}
.gn{position:absolute;top:-7px;width:20px;height:20px;border-radius:50%;background:var(--t1);border:3px solid var(--panel);box-shadow:0 0 8px rgba(0,0,0,.6);transform:translateX(-50%);transition:left .4s}
.gk{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px}

/* PBar */
.pb{height:3px;background:var(--raised);border-radius:2px;overflow:hidden;margin-top:5px}
.pbf{background:var(--acc);border-radius:2px;height:100%}

@keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fu{animation:fu .22s ease both}

/* ── Tăng độ nổi bật số liệu tài chính ─────────────────────────── */
/* Số tỷ đồng, % lợi nhuận trong stat cards */
.s-v.up{color:var(--up)}
.s-v.dn{color:var(--down)}
/* Header section titles */
.h-l,.s-l,.kpi-l{text-shadow:none}
/* Nav badge nổi bật hơn */
.nav-bdg{font-size:9px;padding:2px 6px;font-weight:800}
/* Hover row sáng hơn */
.lr:hover .lr-t{color:var(--acc)}
.lr:hover .lr-v{color:var(--t1)}
/* Input focus border sáng hơn */
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(24,192,255,.20)}
/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--ghost);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--t5)}
/* Allocation label */
.al-i{font-size:10px;color:var(--t4)}
#alert-bar{display:none;flex-shrink:0;background:#0c0e18;border-bottom:1px solid var(--line);padding:0 16px;gap:8px;align-items:center;flex-wrap:wrap;min-height:32px;font-family:var(--mono);font-size:10px}
.al-item{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:3px;cursor:pointer;border:1px solid;white-space:nowrap;transition:.12s}
.al-item:hover{filter:brightness(1.2)}
.al-fs{background:rgba(255,64,96,.12);color:#ff4060;border-color:rgba(255,64,96,.3)}
.al-cm{background:rgba(245,166,35,.1);color:#f5a623;border-color:rgba(245,166,35,.3)}
.al-mg{background:rgba(168,85,247,.1);color:#a855f7;border-color:rgba(168,85,247,.3)}
#al-dismiss{margin-left:auto;color:var(--t5);cursor:pointer;padding:4px 8px;font-size:11px}
#al-dismiss:hover{color:var(--t2)}
/* Toast */
.toast{background:var(--raised);border:1px solid var(--line2);color:var(--t1);font-size:12px;padding:10px 20px}

/* ══════════════════════════════════════════════════
   CLIENT MANAGEMENT v5 — Health Score, Cards, Alerts
   ══════════════════════════════════════════════════ */

/* View toggle */
.view-toggle{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:2px}
.vt-btn{padding:4px 10px;border-radius:3px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.5px;cursor:pointer;color:var(--t5);background:none;border:none;transition:.12s}
.vt-btn.on{background:var(--acc);color:#000}

/* Tier badges */
.tier{display:inline-block;font-family:var(--mono);font-size:7px;font-weight:700;padding:1px 5px;border-radius:2px;letter-spacing:1px;vertical-align:middle;margin-left:4px}
.tier-whale{background:rgba(123,94,167,.25);color:#b590e8;border:1px solid rgba(123,94,167,.4)}
.tier-premium{background:rgba(24,192,255,.15);color:var(--acc);border:1px solid rgba(24,192,255,.3)}
.tier-standard{background:var(--panel);color:var(--t5);border:1px solid var(--line)}

/* Health score ring */
.hs-wrap{position:relative;width:40px;height:40px;flex-shrink:0}
.hs-ring{transform:rotate(-90deg)}
.hs-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:700}

/* Alert banner */
.alert-bar{margin-bottom:12px;border-radius:5px;overflow:hidden}
.alert-item{display:flex;align-items:center;gap:8px;padding:7px 12px;background:rgba(255,64,96,.06);border-left:2px solid var(--down);font-size:10px;border-bottom:1px solid rgba(255,64,96,.1)}
.alert-item.warn{background:rgba(245,166,35,.06);border-left-color:var(--warn)}
.alert-item:last-child{border-bottom:none}
.alert-acc{font-family:var(--mono);font-size:9px;color:var(--t4);margin-left:auto;flex-shrink:0;cursor:pointer;padding:2px 6px;border-radius:3px;border:1px solid var(--line)}
.alert-acc:hover{border-color:var(--acc);color:var(--acc)}

/* Card grid */
.cl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:14px}
.cl-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.cl-card:hover{border-color:var(--acc);background:var(--raised)}
.cl-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.cl-card.profit::before{background:var(--up)}
.cl-card.loss::before{background:var(--down)}
.cl-card.flat::before{background:var(--line)}
.cc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.cc-avatar{width:34px;height:34px;border-radius:5px;background:var(--acc-bg);border:1px solid rgba(24,192,255,.2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--acc);flex-shrink:0}
.cc-info{flex:1;min-width:0}
.cc-name{font-weight:700;color:var(--t1);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-id{font-family:var(--mono);font-size:8px;color:var(--t5);margin-top:1px}
.cc-nav{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--t1);letter-spacing:-.3px}
.cc-pl{font-family:var(--mono);font-size:10px;font-weight:600;margin-top:2px}
.cc-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.cc-stat{display:flex;flex-direction:column;gap:1px}
.cc-sl{font-size:8px;color:var(--t5)}
.cc-sv{font-family:var(--mono);font-size:9px;color:var(--t3);font-weight:600}
.cc-margin-bar{height:3px;border-radius:2px;background:var(--line);margin-top:6px;overflow:hidden}
.cc-margin-fill{height:100%;border-radius:2px;background:var(--up);transition:.3s}

/* Sort indicator on table header */
.dt th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:16px}
.dt th.sortable::after{content:'↕';position:absolute;right:4px;opacity:.4;font-size:9px}
.dt th.sort-asc::after{content:'↑';opacity:1;color:var(--acc)}
.dt th.sort-desc::after{content:'↓';opacity:1;color:var(--acc)}

/* Export button */
.btn-export{font-family:var(--mono);font-size:9px;padding:5px 10px;border:1px solid var(--line);border-radius:3px;color:var(--t4);background:var(--panel);cursor:pointer;letter-spacing:.4px;white-space:nowrap}
.btn-export:hover{border-color:var(--teal);color:var(--teal)}


/* ═══════════════ FEATURE PACK v2 ════════════════ */
/* --- Multi-period returns --- */
.mp-bar{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
.mp-item{flex:1;min-width:55px;background:var(--raised);border-radius:6px;padding:6px 8px;text-align:center;border:1px solid var(--line)}
.mp-label{font-family:var(--mono);font-size:7px;color:var(--t5);letter-spacing:1px;text-transform:uppercase;display:block}
.mp-val{font-family:var(--mono);font-size:12px;font-weight:700;display:block;margin-top:2px}

/* --- Sparkline --- */
.spark-row{display:flex;align-items:center;gap:6px;margin:5px 0}
.spark-lbl{font-family:var(--mono);font-size:8px;color:var(--t5)}

/* --- Drawdown badge --- */
.dd-badge{display:inline-flex;align-items:center;gap:3px;border-radius:10px;padding:2px 8px;font-family:var(--mono);font-size:10px;font-weight:700}
.dd-ok{background:rgba(0,232,130,.1);border:1px solid rgba(0,232,130,.25);color:var(--up)}
.dd-warn{background:rgba(255,64,96,.1);border:1px solid rgba(255,64,96,.25);color:var(--down)}

/* --- Concentration risk --- */
.conc-wrap{margin:8px 0}
.conc-row{display:flex;align-items:center;gap:6px;margin:3px 0;font-size:10px}
.conc-bar-bg{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.conc-bar-fill{height:100%;border-radius:2px;transition:width .4s}
.conc-pct{font-family:var(--mono);font-size:9px;color:var(--t4);min-width:30px;text-align:right}

/* --- Rebalancing signals --- */
.rebal-row{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid var(--line);font-size:10px}
.rebal-row:last-child{border:none}
.rebal-pill{font-family:var(--mono);font-size:8px;font-weight:700;padding:2px 6px;border-radius:8px;white-space:nowrap}
.r-sell{background:rgba(255,64,96,.15);color:var(--down)}
.r-buy{background:rgba(0,232,130,.12);color:var(--up)}

/* --- Heatmap --- */
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;padding:6px 0}
.hm-cell{border-radius:8px;padding:10px 8px;cursor:pointer;transition:transform .15s,filter .15s;border:1px solid rgba(255,255,255,.05)}
.hm-cell:hover{transform:scale(1.05);filter:brightness(1.2)}
.hm-name{font-size:9px;color:rgba(255,255,255,.75);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
.hm-nav{font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;margin-bottom:2px}
.hm-ret{font-family:var(--mono);font-size:13px;font-weight:700}

/* --- Treemap --- */
.treemap-wrap{position:relative;width:100%;height:240px;border-radius:8px;overflow:hidden;background:var(--panel);border:1px solid var(--line);margin-bottom:6px}
#treemap-canvas{display:block;width:100%;height:100%}
.treemap-legend{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.tm-leg-item{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--t4);font-family:var(--mono)}
.tm-leg-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}

/* --- Fee Accrual --- */
.fee-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--raised);border-radius:8px;padding:10px 12px;border:1px solid var(--line);margin-bottom:12px}
.fee-item .fee-lbl{font-family:var(--mono);font-size:7px;color:var(--t5);text-transform:uppercase;letter-spacing:1px}
.fee-item .fee-val{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--acc);margin-top:2px}
.fee-item .fee-sub{font-family:var(--mono);font-size:9px;color:var(--t4);margin-top:1px}

/* --- Trade Allocator Modal --- */
.alloc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(5px);z-index:300;display:none;align-items:center;justify-content:center}
.alloc-overlay.open{display:flex}
.alloc-modal{background:var(--base);border:1px solid var(--line);border-radius:14px;padding:18px 16px;width:min(480px,94vw);max-height:88vh;overflow-y:auto}
.alloc-modal h3{margin:0 0 12px;font-family:var(--mono);font-size:13px;color:var(--acc)}
.alloc-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.alloc-inputs input,.alloc-inputs select{background:var(--raised);border:1px solid var(--line);color:var(--t1);border-radius:6px;padding:7px 9px;font-family:var(--mono);font-size:11px;width:100%;box-sizing:border-box}
.alloc-tbl{width:100%;border-collapse:collapse;font-size:10px;margin-top:8px}
.alloc-tbl th{background:var(--raised);color:var(--t5);padding:5px 7px;text-align:right;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.8px}
.alloc-tbl th:first-child{text-align:left}
.alloc-tbl td{padding:6px 7px;border-top:1px solid var(--line);text-align:right;font-family:var(--mono)}
.alloc-tbl td:first-child{text-align:left}
.alloc-tbl tr.total-row{background:var(--raised);font-weight:700}

/* --- AI Chat Widget --- */
.ai-fab{position:fixed;right:16px;bottom:80px;width:52px;height:52px;border-radius:26px;background:linear-gradient(135deg,#7c3aed,#18c0ff);border:none;cursor:pointer;box-shadow:0 4px 24px rgba(124,58,237,.6);z-index:300;display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .2s,box-shadow .2s}
.ai-fab:hover{transform:scale(1.12);box-shadow:0 6px 32px rgba(124,58,237,.8)}
.ai-fab.active{transform:scale(0.92)}

/* ── Panel gốc (ẩn) ── */
.ai-panel{position:fixed;background:var(--base);border:1px solid var(--line);z-index:1001;display:none;flex-direction:column;overflow:hidden;transition:all .25s cubic-bezier(.4,0,.2,1);min-width:280px;min-height:300px}
.ai-panel.open{display:flex}

/* ── Desktop ≥1025px: popup bottom-right, chiều cao rõ ràng ── */
@media(min-width:1025px){
  .ai-panel{right:16px;bottom:140px;width:380px;height:62vh;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
}

/* ── Tablet ngang: panel 1/3 phải, full cao ── */
@media(min-width:601px) and (max-width:1024px) and (orientation:landscape){
  .ai-panel.open{top:0;right:0;bottom:0;left:auto;width:34vw;min-width:300px;height:100vh;border-radius:0;border-left:1px solid var(--line);border-top:none;border-right:none;border-bottom:none;box-shadow:-4px 0 32px rgba(0,0,0,.4)}
  .ai-msg{font-size:12px;line-height:1.6}
  .ai-chip{font-size:10px;padding:5px 10px}
  .ai-inp{font-size:13px}
}

/* ── Tablet dọc: 1/4 phải góc dưới ── */
@media(min-width:601px) and (max-width:1024px) and (orientation:portrait){
  .ai-panel.open{bottom:0;right:0;top:auto;left:auto;width:28vw;min-width:280px;height:56vh;border-radius:14px 0 0 0;border-left:1px solid var(--line);border-top:1px solid var(--line);border-right:none;border-bottom:none;box-shadow:-4px -4px 28px rgba(0,0,0,.4)}
  .ai-msg{font-size:11px;line-height:1.55}
  .ai-chip{font-size:9px;padding:4px 9px}
  .ai-inp{font-size:12px}
}

/* ── Mobile ≤600px: full màn hình ── */
@media(max-width:600px){
  .ai-fab{right:14px;bottom:72px;width:54px;height:54px;font-size:24px}
  .ai-panel.open{top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;border-radius:0;border:none;box-shadow:none}
  .ai-msg{font-size:13px;line-height:1.65;padding:9px 12px}
  .ai-msg.u{max-width:85%}
  .ai-chip{font-size:11px;padding:6px 12px;border-radius:12px}
  .ai-inp{font-size:15px;padding:10px 16px;border-radius:22px}
  .ai-send{width:38px;height:38px;font-size:17px}
  .ai-ph{padding:14px 16px;font-size:12px}
  .ai-ir{padding:10px 12px;gap:8px}
}

/* ── Phóng to (⛶): 70% giữa màn hình (trên tablet/desktop) ── */
@media(min-width:601px){
  .ai-panel.ai-full{position:fixed!important;top:10vh!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important;width:72vw!important;max-width:980px!important;height:80vh!important;border-radius:16px!important;border:1px solid var(--line)!important;box-shadow:0 24px 80px rgba(0,0,0,.85)!important}
}
@media(max-width:600px){
  .ai-panel.ai-full{top:0!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100vw!important;height:100vh!important;border-radius:0!important;border:none!important}
}
#ai-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:none;backdrop-filter:blur(2px)}

/* ── Elements bên trong ── */
.ai-ph{flex-shrink:0;padding:12px 14px;background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(24,192,255,.12));border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;cursor:grab;user-select:none;-webkit-user-select:none}
.ai-ph:active{cursor:grabbing}
.ai-resize-handle{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:se-resize;z-index:2;opacity:.4;transition:opacity .2s}
.ai-resize-handle:hover{opacity:1}
.ai-resize-handle::before{content:'';position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);border-radius:0 0 2px 0}
/* QUAN TRỌNG: min-height:0 cho phép flex:1 co lại đúng cách */
.ai-msgs{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.ai-msg{padding:8px 11px;border-radius:10px;font-size:12px;line-height:1.6;max-width:88%}
.ai-msg.u{background:rgba(124,58,237,.22);color:var(--t1);align-self:flex-end}
.ai-msg.b{background:var(--raised);color:var(--t2);align-self:flex-start;border:1px solid var(--line)}
.ai-msg.b b{color:var(--acc)}
.ai-chips{flex-shrink:0;display:flex;gap:5px;flex-wrap:wrap;padding:7px 10px;border-top:1px solid var(--line)}
.ai-chip{background:var(--raised);border:1px solid var(--line);color:var(--t4);border-radius:10px;padding:4px 9px;font-size:10px;cursor:pointer;font-family:var(--mono);transition:.15s;white-space:nowrap}
.ai-chip:hover{border-color:var(--acc);color:var(--acc)}
.ai-ir{flex-shrink:0;display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--base)}
.ai-inp{flex:1;background:var(--raised);border:1px solid var(--line);color:var(--t1);border-radius:20px;padding:8px 14px;font-size:12px;outline:none;transition:border-color .2s}
.ai-inp:focus{border-color:var(--acc)}
.ai-send{flex-shrink:0;background:linear-gradient(135deg,#7c3aed,#18c0ff);border:none;color:#fff;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 8px rgba(124,58,237,.4)}

/* --- Print report --- */
.print-btn{background:none;border:1px solid var(--line);color:var(--t4);border-radius:4px;padding:4px 10px;font-family:var(--mono);font-size:9px;cursor:pointer;letter-spacing:.4px}
.print-btn:hover{border-color:var(--acc);color:var(--acc)}
@media print{
  .nav-bar,.side-bar,.tape,.tbar,.scr:not(#scr-detail),.ai-fab,.ai-panel,.alloc-overlay,#alert-bar,.btn-row,button.print-btn{display:none!important}
  #scr-detail{display:block!important;position:static!important;overflow:visible!important;padding:10px}
  body,#main,#content{background:#fff;color:#000;overflow:visible}
  .kpi,.stat,.cd{border:1px solid #ddd!important;background:#fafafa!important}
  .sec-l{color:#000}
  canvas{display:block}
}

/* --- Animated number --- */
@keyframes numIn{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:none}}
.anim-num{animation:numIn .5s ease}



#vf-login{font-family:ui-monospace,'Cascadia Code','Source Code Pro','Consolas',monospace}
#vf-lp{flex:1.1;position:relative;overflow:hidden;background:#030810;min-width:0}
#vf-rp{width:380px;flex-shrink:0;background:#0c1018;border-left:1px solid #1d2c44;display:flex;align-items:center;justify-content:center;padding:32px 28px;position:relative;z-index:2}
@media(max-width:900px){#vf-lp{display:none}#vf-rp{width:100%;border-left:none}}
#vf-canvas{position:absolute;inset:0;width:100%;height:100%}
#vf-ticker{position:absolute;top:0;left:0;right:0;height:28px;background:rgba(3,8,16,.85);border-bottom:1px solid #1d2c44;display:flex;align-items:center;overflow:hidden;opacity:0;animation:vfFadeIn .5s .2s forwards}
.vf-tick-inner{display:flex;gap:0;white-space:nowrap;animation:vfTickerScroll 22s linear infinite}
.vf-ti{display:inline-flex;align-items:center;gap:6px;padding:0 18px;border-right:1px solid #1d2c44;font-size:9.5px;font-weight:600;letter-spacing:.3px;height:28px}
.vf-ti .tn{color:#8a9ec0}.vf-ti .tv{color:#fff}.vf-ti .tc-up{color:#00f090}.vf-ti .tc-dn{color:#ff3d5a}
@keyframes vfTickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.vf-kpi-wrap{position:absolute;bottom:32px;left:28px;display:flex;flex-direction:column;gap:9px}
.vf-kpi{background:rgba(3,8,16,.78);border:1px solid #1d2c44;border-radius:5px;padding:10px 14px;opacity:0;transform:translateX(-18px);display:flex;align-items:center;gap:12px;backdrop-filter:blur(6px)}
.vf-kpi.in{animation:vfKpiIn .55s cubic-bezier(.22,1,.36,1) forwards}
@keyframes vfKpiIn{to{opacity:1;transform:translateX(0)}}
.vf-kpi-l{font-size:8.5px;color:#5e7296;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.vf-kpi-v{font-size:16px;font-weight:700;color:#fff;line-height:1;margin-top:2px}
.vf-kpi-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
#vf-gauge-wrap{position:absolute;top:50px;right:24px;opacity:0;animation:vfFadeIn .6s 2.6s forwards}
#vf-gauge{display:block}
.vf-gauge-lbl{text-align:center;font-size:8px;color:#5e7296;letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.vf-brand{position:absolute;bottom:16px;right:20px;font-size:8px;color:#344a68;letter-spacing:2px;text-transform:uppercase}
@keyframes vfFadeIn{to{opacity:1}}
/* RIGHT PANEL */
.vf-logo{text-align:center;margin-bottom:30px;opacity:0;animation:vfFadeIn .5s .1s forwards}
.vf-logo-mark{width:52px;height:52px;border-radius:10px;background:#18c0ff;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#000;box-shadow:0 0 30px rgba(24,192,255,.45),0 0 60px rgba(24,192,255,.15);margin-bottom:14px;animation:vfLogoGlow 3s ease-in-out infinite}
@keyframes vfLogoGlow{0%,100%{box-shadow:0 0 30px rgba(24,192,255,.45),0 0 60px rgba(24,192,255,.15)}50%{box-shadow:0 0 40px rgba(24,192,255,.7),0 0 80px rgba(24,192,255,.25)}}
.vf-logo-name{font-size:18px;font-weight:700;color:#fff;letter-spacing:.3px}
.vf-logo-sub{font-size:9px;color:#18c0ff;letter-spacing:3px;text-transform:uppercase;margin-top:4px}
.vf-form-box{background:#111722;border:1px solid #1d2c44;border-top:2px solid #18c0ff;border-radius:8px;padding:28px 24px;opacity:0;animation:vfSlideUp .5s .25s cubic-bezier(.22,1,.36,1) forwards}
@keyframes vfSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.vf-fl{font-size:9px;color:#b4c4e0;letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:6px;font-weight:700}
.vf-finp{width:100%;background:#0c1018;border:1px solid #1d2c44;color:#fff;border-radius:4px;padding:10px 12px;font-family:inherit;font-size:12px;outline:none;transition:.15s}
.vf-finp:focus{border-color:#18c0ff;box-shadow:0 0 0 2px rgba(24,192,255,.15)}
.vf-foot{text-align:center;margin-top:16px;font-size:9px;color:#344a68;opacity:0;animation:vfFadeIn .5s .5s forwards}

/* ── Broker Notebook (Notes) ─────────────────────────── */
.notes-tab-btn{padding:5px 12px;border-radius:3px;font-family:var(--mono,monospace);font-size:9px;font-weight:700;letter-spacing:.5px;cursor:pointer;background:var(--panel,#111722);border:1px solid var(--line,#1e2a3a);color:var(--t4,#8899aa)}
.notes-tab-btn:hover,.notes-tab-btn.on{background:var(--acc,#00f090);color:#000;border-color:var(--acc,#00f090)}
#notes-panel{padding:12px;min-height:200px;display:none}
#notes-panel.on{display:block}
.note-card{background:var(--raised,#16202e);border:1px solid var(--line,#1e2a3a);border-radius:6px;padding:11px 13px;margin-bottom:9px;position:relative}
.note-card.call{border-left:3px solid #3b82f6}
.note-card.reminder{border-left:3px solid #f59e0b}
.note-card.note{border-left:3px solid var(--t5,#5566aa)}
.note-type-badge{font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:3px;text-transform:uppercase}
.note-type-badge.call{background:rgba(59,130,246,.15);color:#3b82f6}
.note-type-badge.reminder{background:rgba(245,158,11,.15);color:#f59e0b}
.note-type-badge.note{background:rgba(85,102,170,.15);color:var(--t5,#5566aa)}
.note-text{font-size:12px;color:var(--t2,#ccd6f6);margin:6px 0 0;line-height:1.5}
.note-date{font-size:10px;color:var(--t5,#5566aa);margin-top:4px}
.note-del{position:absolute;top:8px;right:8px;background:none;border:1px solid rgba(255,64,96,.3);color:var(--down,#ff4060);width:20px;height:20px;border-radius:3px;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center}
.note-del:hover{background:rgba(255,64,96,.12)}
.note-add-form{background:var(--panel,#111722);border:1px solid var(--line,#1e2a3a);border-radius:6px;padding:12px;margin-bottom:12px}
.note-add-form textarea{width:100%;background:var(--raised,#16202e);border:1px solid var(--line,#1e2a3a);color:var(--t1,#e8eaf0);border-radius:4px;padding:8px;font-size:12px;resize:vertical;min-height:60px;font-family:var(--mono,monospace)}
.note-add-row{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.note-add-row select,.note-add-row input{background:var(--raised,#16202e);border:1px solid var(--line,#1e2a3a);color:var(--t2,#ccd6f6);border-radius:4px;padding:5px 8px;font-size:11px}
.note-save-btn{background:var(--acc,#00f090);color:#000;font-weight:700;border:none;border-radius:4px;padding:5px 14px;cursor:pointer;font-size:11px}