/* Radar Catalyst — design tokens (radar-VNE-v8) */
:root{
  --bg:#0e0e10; --panel:#19191c; --panel2:#1f1f23; --line:#2b2b30;
  --ink:#ece8e1; --mut:#9c968c; --faint:#6e6a64;
  --gold:#f4c20d; --green:#34c47c; --orange:#f08a3e; --red:#e5544b;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,"Segoe UI",Inter,Roboto,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;}
a{color:inherit;}

/* NAV */
.nav{display:flex; align-items:center; gap:26px; padding:13px 26px; border-bottom:1px solid var(--line); background:#141416; position:sticky; top:0; z-index:10;}
.logo{font-weight:800; font-size:15px; letter-spacing:.5px; display:flex; align-items:center; gap:8px; text-decoration:none;}
.logo .m{width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg,var(--gold),var(--orange));}
.logo b{color:var(--gold);}
.nav a.link{color:var(--mut); font-size:13px; text-decoration:none;} .nav a.link:hover{color:var(--ink);}
.nav .spacer{flex:1;}
.nav .login{background:var(--gold); color:#1a1a1a; font-weight:700; font-size:12.5px; padding:7px 14px; border-radius:7px; border:none; cursor:pointer;}

.wrap{max-width:1120px; margin:0 auto; padding:0 26px;}

/* HOME hero */
.hero{padding:34px 0 10px; border-bottom:1px solid var(--line);}
.hero h1{font-size:26px; font-weight:780; letter-spacing:.2px;}
.hero p{font-size:14px; color:var(--mut); margin-top:8px; line-height:1.6; max-width:640px;}
.hero .badge{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:11.5px; color:var(--faint); background:var(--panel); border:1px solid var(--line); padding:5px 12px; border-radius:20px;}
.hero .badge .v{width:6px;height:6px;border-radius:50%;background:var(--green);}

/* filter bar */
.filterbar{display:flex; align-items:center; gap:12px; padding:18px 0;}
.filterbar label{font-size:12.5px; color:var(--mut);}
.filterbar select{background:var(--panel2); border:1px solid var(--line); color:var(--ink); font-size:13px; padding:8px 12px; border-radius:7px; cursor:pointer;}
.filterbar .count{margin-left:auto; font-size:12px; color:var(--faint);}

/* stock list */
.list{display:flex; flex-direction:column; gap:12px; padding-bottom:48px;}
.scard{display:grid; grid-template-columns:54px 1fr auto; gap:16px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  text-decoration:none; transition:border-color .15s, background .15s;}
.scard:hover{border-color:#3a3a40; background:var(--panel2);}
.scard .tick{width:54px; height:54px; border-radius:11px; background:var(--panel2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:var(--gold);}
.scard .cname{font-size:15px; font-weight:700;}
.scard .csub{font-size:12px; color:var(--mut); margin-top:3px;}
.scard .sigs{display:flex; gap:7px; margin-top:9px; flex-wrap:wrap;}
.scard .cright{text-align:right;}
.scard .price{font-size:17px; font-weight:750; font-variant-numeric:tabular-nums;}
.scard .chg{font-size:12.5px; font-weight:600;}
.scard .arr{font-size:12px; color:var(--faint); margin-top:6px;}

/* signal pills */
.pill{font-size:11px; font-weight:650; padding:4px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:5px;}
.pill .d{width:7px;height:7px;border-radius:50%;}
.pill.xanh{background:rgba(52,196,124,.13); color:var(--green);} .pill.xanh .d{background:var(--green);}
.pill.vang{background:rgba(244,194,13,.13); color:var(--gold);} .pill.vang .d{background:var(--gold);}
.pill.do{background:rgba(229,84,75,.13); color:var(--red);} .pill.do .d{background:var(--red);}
.pill.legal{background:var(--panel2); color:var(--faint); border:1px solid var(--line);}

.neg{color:var(--red);} .pos{color:var(--green);}
.loading{padding:40px 0; text-align:center; color:var(--faint); font-size:13px;}

/* ===== STOCK DETAIL ===== */
.chead{display:flex; justify-content:space-between; align-items:flex-start; padding:22px 0 18px; border-bottom:1px solid var(--line); gap:20px;}
.cleft{display:flex; gap:16px;}
.clogo{width:54px; height:54px; border-radius:11px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:var(--gold);}
.cname2{font-size:23px; font-weight:750;}
.csub2{font-size:13px; color:var(--mut); margin-top:3px;}
.ccap{font-size:13px; color:var(--mut); margin-top:7px;} .ccap b{color:var(--ink);}
.cright2{text-align:right;}
.price2{font-size:22px; font-weight:750;} .price2 .chg{font-size:13px; font-weight:600; margin-left:8px;}
.ctrust{margin-top:11px; font-size:11.5px; color:var(--faint); display:flex; gap:7px; align-items:center; justify-content:flex-end;}
.ctrust .v{width:5px; height:5px; border-radius:50%; background:var(--green);}
.back{font-size:12.5px; color:var(--mut); text-decoration:none; display:inline-block; padding:16px 0 0;}
.back:hover{color:var(--ink);}

.sect{margin-top:30px; padding-top:24px; border-top:1px solid var(--line);}
.sect .st{font-size:18px; font-weight:750; margin-bottom:4px;}
.sect .sq{font-size:13px; color:var(--mut); margin-bottom:16px;}
.check{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); background:var(--panel); border:1px solid var(--line); padding:5px 11px; border-radius:20px; margin-bottom:16px;}
.check b{color:var(--gold);}

/* signal card */
.sigcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px;}
.sigcard.do{border-color:rgba(229,84,75,.4);}
.sigcard.vang{border-color:rgba(244,194,13,.35);}
.sigcard .head{display:flex; align-items:center; gap:10px;}
.sigcard .hl{font-size:14.5px; font-weight:700; line-height:1.5;}
.sigcard .det{font-size:13px; color:var(--mut); margin-top:8px; line-height:1.55;}
.sigcard .inp{font-size:11.5px; color:var(--faint); margin-top:10px; font-variant-numeric:tabular-nums;}

/* financial table */
.ftab{width:100%; border-collapse:collapse; margin-top:6px;}
.ftab th{font-size:11.5px; color:var(--mut); font-weight:600; text-align:right; padding:8px 10px; border-bottom:1px solid var(--line);}
.ftab th:first-child{text-align:left;}
.ftab td{padding:10px; border-bottom:1px solid var(--line); font-size:13px; text-align:right; font-variant-numeric:tabular-nums;}
.ftab td:first-child{text-align:left; color:var(--mut);}
.ftab tr:hover td{background:var(--panel);}

/* key grid */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.cell{background:var(--panel); padding:14px 16px;}
.cell .k{font-size:11.5px; color:var(--mut);} .cell .val{font-size:16px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums;}
.cell .val.neg{color:var(--red);} .cell .val.dim{color:var(--faint);}

/* sources box */
.srcbox{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:4px 16px;}
.srow{display:flex; justify-content:space-between; gap:14px; padding:11px 0; font-size:12.5px; border-bottom:1px solid var(--line);}
.srow:last-child{border-bottom:none;} .srow .k{color:var(--mut);} .srow .val{color:var(--ink); font-weight:600; text-align:right;}
.illus{font-size:11px; color:var(--faint); font-style:italic; margin-top:10px; line-height:1.5;}
.foot{border-top:1px solid var(--line); padding:22px 0 40px; font-size:11.5px; color:var(--faint); text-align:center; line-height:1.6; margin-top:30px;}

/* ===== SURVEY MODAL ===== */
.modal-bg{position:fixed; inset:0; background:rgba(5,5,7,.72); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:16px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:26px;}
.modal h2{font-size:19px; font-weight:760;}
.modal .lead{font-size:13px; color:var(--mut); margin-top:7px; line-height:1.55;}
.modal .prog{height:4px; background:var(--panel2); border-radius:3px; margin:18px 0 4px; overflow:hidden;}
.modal .prog .bar{height:100%; background:linear-gradient(90deg,var(--gold),var(--orange)); transition:width .25s;}
.modal .step{font-size:11.5px; color:var(--faint); margin-bottom:14px;}
.modal .q{font-size:15.5px; font-weight:700; line-height:1.4;}
.modal .qh{font-size:12.5px; color:var(--mut); margin-top:6px; line-height:1.5;}
.modal .opts{display:flex; flex-direction:column; gap:9px; margin-top:16px;}
.opt{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:13px 15px; font-size:13.5px; cursor:pointer; transition:border-color .12s, background .12s; text-align:left; color:var(--ink);}
.opt:hover{border-color:#3a3a40;}
.opt.sel{border-color:var(--gold); background:rgba(244,194,13,.08);}
.opt .ot{font-weight:650;} .opt .od{font-size:11.5px; color:var(--mut); margin-top:3px;}
.modal .nav-btns{display:flex; gap:10px; margin-top:20px; align-items:center;}
.btn{font-size:13px; font-weight:680; padding:10px 18px; border-radius:8px; cursor:pointer; border:none;}
.btn.y{background:var(--gold); color:#1a1a1a;} .btn.y:disabled{opacity:.4; cursor:not-allowed;}
.btn.o{background:transparent; border:1px solid var(--line); color:var(--ink);}
.modal .skip{margin-left:auto; font-size:12px; color:var(--faint); background:none; border:none; cursor:pointer;}
.modal .skip:hover{color:var(--mut);}
.modal .done{text-align:center; padding:14px 0;}
.modal .done .ic{font-size:34px;} .modal .done h3{font-size:17px; font-weight:740; margin-top:8px;}
.modal .done p{font-size:13px; color:var(--mut); margin-top:7px; line-height:1.55;}

@media(max-width:880px){
  .nav a.link{display:none;}
  .chead{flex-direction:column;} .cright2{text-align:left;} .ctrust{justify-content:flex-start;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .scard{grid-template-columns:46px 1fr; gap:12px;} .scard .cright{grid-column:1/-1; text-align:left; display:flex; gap:14px; align-items:center; border-top:1px dashed var(--line); padding-top:10px; margin-top:2px;}
  .scard .tick{width:46px;height:46px;}
  .ftab{font-size:12px;} .ftab th,.ftab td{padding:8px 6px;}
}