/* ============================================================================
   Bảng màu lấy từ bảng giá HOSE: tím trần, xanh tăng, vàng tham chiếu,
   đỏ giảm, xanh lơ sàn. Vàng dùng làm màu nhấn giao diện vì nó vốn mang
   nghĩa trung tính, không tranh ý nghĩa với xanh/đỏ.
   ========================================================================= */
:root{
  --bg:#0D1420; --panel:#141D2B; --panel-2:#1A2534; --raise:#202C3E;
  --line:#243349; --line-soft:#1C2739;
  --text:#E4EAF3; --dim:#8494AC; --faint:#5D6E88;

  --amber:#F2C037; --amber-dim:#8A6E22;
  --up:#16C784; --down:#EA3943; --ref:#F2C037;
  --ceil:#C44BE8; --floor:#35C3E0;

  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:3px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:400 14px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-bottom:48px;
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
h2{font:600 14px/1.3 var(--sans); margin:0 0 4px; letter-spacing:.01em}
h3{font:600 12px/1.3 var(--sans); margin:0; color:var(--dim)}
a{color:var(--amber)}
code{font-family:var(--mono); font-size:12px; color:var(--amber)}

/* ---------------------------------------------------------------- topbar */
.topbar{
  display:flex; align-items:center; gap:28px;
  padding:0 20px; height:56px;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:10px; min-width:150px}
.mark{
  width:16px; height:16px; border-radius:2px;
  background:linear-gradient(135deg,var(--up) 0 50%,var(--down) 50% 100%);
}
.brand-name{font-weight:600; letter-spacing:-.01em}

.session{display:flex; align-items:center; gap:9px; color:var(--dim); font-size:13px}
.session .num{color:var(--text); font-size:13px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--faint); flex:none}
.dot.live{background:var(--up); box-shadow:0 0 0 3px rgba(22,199,132,.16)}
.dot.closed{background:var(--faint)}
@media (prefers-reduced-motion:no-preference){
  .dot.live.beat{animation:beat 2.4s ease-in-out infinite}
  @keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
}

.nav-figure{display:flex; align-items:baseline; gap:8px; margin-left:auto}
.nav-label{color:var(--faint); font-size:12px}
.nav-value{font-size:17px; font-weight:500}
.nav-pct{font-size:13px}

.engine{display:flex; align-items:center; gap:10px}
.engine-state{font-size:12px; color:var(--dim); min-width:70px; text-align:right}

/* ---------------------------------------------------------------- buttons */
.btn{
  font:500 13px var(--sans); color:var(--text);
  background:var(--raise); border:1px solid var(--line);
  padding:7px 13px; border-radius:var(--r); cursor:pointer;
}
.btn:hover{background:#27364B; border-color:#33455F}
.btn:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.btn-primary{background:var(--amber); color:#1A1400; border-color:var(--amber); font-weight:600}
.btn-primary:hover{background:#FFD152; border-color:#FFD152}
.btn-ghost{background:transparent}
.btn-danger{background:transparent; color:var(--down); border-color:#4A2530; padding:4px 9px; font-size:12px}
.btn-danger:hover{background:#2A1620; border-color:var(--down)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---------------------------------------------------------------- tabs */
.tabs{
  display:flex; gap:2px; padding:0 14px;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:56px; z-index:29; overflow-x:auto;
}
.tab{
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--dim); font:500 13px var(--sans);
  padding:11px 14px; cursor:pointer; white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--text); border-bottom-color:var(--amber)}
.tab:focus-visible{outline:2px solid var(--amber); outline-offset:-2px}
.pill{
  display:inline-block; min-width:17px; padding:0 5px; margin-left:5px;
  background:var(--down); color:#fff; border-radius:9px;
  font:600 11px/17px var(--mono); text-align:center;
}
.pill:empty{display:none}

main{padding:16px 20px}
.panel{display:none}
.panel.is-active{display:block}

/* ---------------------------------------------------------------- board */
/* Tab Bảng giá chiếm trọn chiều cao còn lại; CHỈ bảng cuộn (không cuộn cả trang)
   -> header cột luôn dính. Trừ topbar(56) + tab(41) + lề main(32). */
#tab-board.is-active{
  display:flex; flex-direction:column;
  height:calc(100vh - 129px);
}
#tab-board .table-wrap{flex:1 1 0; min-height:260px; max-height:none}
#tab-board .log-strip{flex:none}

.board-legend{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  color:var(--dim); font-size:12px; padding:0 2px 10px;
}
.board-legend span{display:flex; align-items:center; gap:5px}
.sw{width:9px; height:9px; border-radius:2px; display:inline-block}
.sw.ceil{background:var(--ceil)} .sw.up{background:var(--up)}
.sw.ref{background:var(--ref)} .sw.down{background:var(--down)} .sw.floor{background:var(--floor)}
.legend-note{margin-left:auto; color:var(--faint)}

/* Nút thu gọn "Thị trường & dòng tiền" */
.pill-toggle{
  font:500 12px var(--sans); color:var(--dim); cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:4px 12px;
}
.pill-toggle:hover{color:var(--text); border-color:var(--amber-dim)}
.pill-toggle.on{color:var(--amber); border-color:var(--amber-dim)}
/* Khi thu gọn: ẩn banner + dòng tiền -> bảng giá chiếm trọn chiều cao */
#tab-board.mkt-hidden #phaseBanner,
#tab-board.mkt-hidden #regimeBanner,
#tab-board.mkt-hidden #marketFlows{display:none !important}

/* Nhật ký thu gọn: mặc định chỉ còn tiêu đề dạng NÚT (bấm để mở), không chiếm chỗ */
.log-strip h3{cursor:pointer; user-select:none; display:flex; align-items:center; gap:7px}
.log-strip h3:hover{color:var(--text)}
.log-caret{font-size:10px; color:var(--faint); transition:transform .15s ease}
#tab-board.log-collapsed .log-strip{margin-top:8px}
#tab-board.log-collapsed .log-strip h3{border-bottom:0}
#tab-board.log-collapsed .log-strip ul{display:none}
#tab-board.log-collapsed .log-caret{transform:rotate(-90deg)}

/* Ô tìm nhanh theo mã (Bảng giá / Cảnh báo) */
.tbl-search{
  font:500 13px var(--sans); color:var(--text);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r); padding:6px 11px; min-width:200px;
}
.tbl-search::placeholder{color:var(--faint)}
.tbl-search:focus{outline:none; border-color:var(--amber)}
.board-legend .tbl-search{margin-right:6px}
.alert-toolbar{margin-bottom:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.alert-toolbar #alertSearch{flex:1; min-width:160px}
.alert-model-lb{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); white-space:nowrap}
.alert-model-lb select{width:auto; min-width:190px; cursor:pointer}

.table-wrap{
  overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  /* Giới hạn chiều cao -> bảng tự cuộn bên trong, header dính lại khi cuộn.
     Trừ topbar (56) + thanh tab (~41) + lề/chú thích phía trên. */
  max-height:calc(100vh - 150px);
}
.table-wrap.short{max-height:420px}

table{border-collapse:collapse; width:100%}
thead th{
  position:sticky; top:0; z-index:2;
  background:var(--panel-2); color:var(--dim);
  font:500 11px var(--sans); text-align:right;
  padding:8px 10px; white-space:nowrap;
  /* box-shadow thay border-bottom: đường kẻ không biến mất khi header dính (border-collapse) */
  box-shadow:inset 0 -1px 0 var(--line);
}
thead th.l{text-align:left}
thead th.sep{border-left:1px solid var(--line)}
tbody td{
  padding:0 10px; height:33px; text-align:right;
  border-bottom:1px solid var(--line-soft); white-space:nowrap; font-size:13px;
}
tbody td.l{text-align:left}
tbody tr:hover td{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
td.empty,.empty{color:var(--faint); text-align:center; padding:34px 10px; font-size:13px}
.empty.tall{padding:70px 10px}

.board td.sym{font-weight:600; font-family:var(--mono); text-align:left; letter-spacing:.02em}
.board td.px{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500}
.board td.dim{color:var(--faint); font-family:var(--mono); font-size:12px}
.board td.sig{color:var(--dim); font-size:12px; max-width:250px; overflow:hidden; text-overflow:ellipsis}
.board td.score{border-left:1px solid var(--line); font-family:var(--mono); font-weight:600}

.up{color:var(--up)} .down{color:var(--down)} .ref{color:var(--ref)}
.ceil{color:var(--ceil)} .floor{color:var(--floor)}
.held{box-shadow:inset 3px 0 0 var(--amber)}
.score-hot{color:var(--up)} .score-warm{color:var(--ref)} .score-cold{color:var(--faint)}

@media (prefers-reduced-motion:no-preference){
  td.flash{animation:flash .7s ease-out}
  @keyframes flash{from{background:rgba(242,192,55,.16)} to{background:transparent}}
}

/* ---------------------------------------------------------------- log */
.log-strip{margin-top:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.log-strip h3{padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:7px; font-size:13px}
.log-strip h3:hover{color:var(--amber)}
.log-caret{display:inline-block; transition:transform .15s; color:var(--faint); font-size:11px}
#tab-board.log-collapsed .log-strip h3{border-bottom:0}
#tab-board.log-collapsed .log-caret{transform:rotate(-90deg)}
#tab-board.log-collapsed .log-strip ul{display:none}
.log-strip ul{list-style:none; margin:0; padding:6px 0; max-height:120px; overflow:auto}
.log-strip li{
  display:flex; gap:11px; padding:3px 12px;
  font:400 12px/1.5 var(--mono); color:var(--dim);
}
.log-strip li time{color:var(--faint); flex:none}
li.ok span{color:var(--up)} li.warn span{color:var(--ref)} li.error span{color:var(--down)}

/* ---------------------------------------------------------------- alerts */
.alert-list{display:flex; flex-direction:column; gap:9px; max-width:940px}
.alert{
  border:1px solid var(--line); border-left:3px solid var(--faint);
  border-radius:var(--r); background:var(--panel); padding:12px 15px;
}
.alert.MUA{border-left-color:var(--up)}
.alert.BAN{border-left-color:var(--down)}
.alert.CAT_LO{border-left-color:var(--down); background:#1C1620}
.alert.CHOT_LAI{border-left-color:var(--up)}
.alert.TRAILING{border-left-color:var(--amber)}
.alert.TIN_HIEU{border-left-color:#4c8bf5; background:#141A24}
.alert.TIN_HIEU .alert-kind{color:#7FB0FF}
.alert.THEO_DOI{border-left-color:#c084fc; background:#181423}
.alert.THEO_DOI .alert-kind{color:#c9a2fc}
.alert.institutional{border-left-color:#d4a017}
.tag.inst{background:rgba(212,160,23,.15); color:#e0b84a; border:1px solid rgba(212,160,23,.4)}
.alert-warn{margin-top:8px; font-size:12px; color:var(--ref, #e0b84a)}

.alert-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.alert-kind{font-weight:600; font-size:13px; letter-spacing:.02em}
.alert-sym{font:600 16px var(--mono); letter-spacing:.02em}
.alert-price{font:500 14px var(--mono); color:var(--dim)}
.alert-time{margin-left:auto; color:var(--faint); font:400 12px var(--mono)}
.tag{
  font-size:11px; padding:1px 7px; border-radius:2px;
  background:var(--raise); color:var(--dim); border:1px solid var(--line);
}
.tag.pending{color:var(--ref); border-color:var(--amber-dim)}

.levels{display:flex; gap:26px; flex-wrap:wrap; margin-top:10px}
.level{display:flex; flex-direction:column; gap:1px}
.level b{font:500 14px var(--mono)}
.level span{font-size:11px; color:var(--faint)}
.alert-why{margin-top:9px; font-size:12px; color:var(--dim)}
.alert-note{margin-top:3px; font-size:12px; color:var(--dim)}
.alert-detail{margin-top:8px; font-size:12px}
.alert-detail>summary{cursor:pointer; color:var(--dim); user-select:none}
.alert-detail>summary:hover{color:var(--text)}
.alert-detail ul{list-style:none; margin:7px 0 0; padding:0; display:flex; flex-direction:column; gap:3px}
.alert-detail li{display:flex; justify-content:space-between; gap:12px; padding:3px 8px;
  border-radius:6px; background:rgba(127,127,127,.06)}
.alert-detail li.ok{border-left:2px solid var(--up)}
.alert-detail li.warn{border-left:2px solid var(--down)}
.alert-detail .d-lb{color:var(--dim)}
.alert-detail li.ok .d-vl{color:var(--up)}
.alert-detail li.warn .d-vl{color:var(--down)}

/* ---------------------------------------------------------------- layout */
.grid-2{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:1080px){.grid-2{grid-template-columns:1fr}}
.block{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px}
.block .data{border:0; margin-top:9px}
.mt{margin-top:20px}
.hint{color:var(--faint); font-size:12px; margin:3px 0 11px; max-width:62ch}
.warn{color:var(--ref); font-size:12px; margin:9px 0; max-width:62ch}
.count{color:var(--faint); font-weight:400; font-family:var(--mono); font-size:12px}

/* Giao dịch giấy: dải tài sản ròng / đã giải ngân trên bảng đang giữ */
.pp-used{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline; margin:2px 0 10px}
.pp-u{display:flex; flex-direction:column; gap:2px}
.pp-u span{font-size:11px; color:var(--faint)}
.pp-u b{font-size:15px}
.pp-usebar{flex:1 1 100%; height:6px; border-radius:4px; background:var(--panel-2); overflow:hidden; margin-top:2px}
.pp-usebar i{display:block; height:100%; background:var(--amber); border-radius:4px}

/* Sửa nhanh vị thế trong Danh mục */
#holdBody tr.hold-row{cursor:pointer}
#holdBody tr.hold-row:hover td{background:var(--panel-2)}
#holdBody tr.editing td{background:rgba(242,192,55,.06)}
.he-in{width:100%; min-width:64px; padding:5px 7px; text-align:right; font:500 13px var(--mono);
  color:var(--text); background:var(--panel-2); border:1px solid var(--amber); border-radius:4px}
.he-in:focus{outline:none}
.he-actions{display:flex; gap:6px; white-space:nowrap}
.he-actions .btn{padding:4px 10px; font-size:12px}
.disclaimer{color:var(--faint); font-size:12px; max-width:78ch; margin:22px 0 0}

.form{display:flex; flex-direction:column; gap:10px; margin-bottom:12px}
.form-2{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim)}
label.check{flex-direction:row; align-items:center; gap:7px; color:var(--text); font-size:13px}
input,select{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); font:400 13px var(--mono); padding:7px 9px; width:100%;
}
input[type=checkbox]{width:auto}
input:focus,select:focus{outline:none; border-color:var(--amber)}
select{font-family:var(--sans)}
::placeholder{color:#4B5B73}

.add-row{display:flex; gap:8px; margin-top:11px}
.add-row input{flex:1}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  display:flex; align-items:center; gap:7px;
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r);
  padding:5px 9px; font:500 13px var(--mono); cursor:pointer; letter-spacing:.02em;
}
.chip:hover{border-color:var(--down); color:var(--down)}
.chip::after{content:"×"; color:var(--faint); font-size:15px; line-height:1}
.chip:hover::after{color:var(--down)}

/* ---------------------------------------------------------------- strategies */
.strat-list{display:flex; flex-direction:column; gap:1px; max-height:640px; overflow:auto}
.strat{
  display:grid; grid-template-columns:30px 1fr 74px 64px; gap:11px;
  align-items:center; padding:9px 4px; border-bottom:1px solid var(--line-soft);
}
.strat:last-child{border-bottom:0}
.strat-name{font:500 13px var(--mono); letter-spacing:.01em}
.strat-desc{font-size:11px; color:var(--faint); margin-top:1px; max-width:46ch}
.strat-kind{font-size:11px; color:var(--dim); text-align:right}
.strat input[type=number]{padding:4px 6px; font-size:12px}
.switch{position:relative; width:30px; height:17px; flex:none}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.switch i{
  position:absolute; inset:0; background:var(--raise); border:1px solid var(--line);
  border-radius:9px; transition:background .15s,border-color .15s; pointer-events:none;
}
.switch i::after{
  content:""; position:absolute; left:2px; top:2px; width:11px; height:11px;
  border-radius:50%; background:var(--faint); transition:transform .15s,background .15s;
}
.switch input:checked+i{background:rgba(22,199,132,.2); border-color:var(--up)}
.switch input:checked+i::after{transform:translateX(13px); background:var(--up)}
.switch input:focus-visible+i{outline:2px solid var(--amber); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.switch i,.switch i::after{transition:none}}

/* ---------------------------------------------------------------- backtest */
.bt-controls{
  display:flex; gap:13px; align-items:flex-end; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px 24px; margin-bottom:16px;
}
.bt-controls label{min-width:132px; position:relative}
.bt-controls label.grow{flex:1 1 240px; min-width:240px}
.bt-controls label.grow input{width:100%}
/* gợi ý "= X tỷ" nổi ngay dưới ô, không đẩy các ô khác lệch hàng */
.bt-controls .money-hint{position:absolute; top:100%; left:0; margin:3px 0 0}
.bt-status{font-size:12px; color:var(--dim)}

.headline{
  display:flex; gap:38px; align-items:flex-start; flex-wrap:wrap;
  padding:20px 22px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); margin-bottom:16px;
}
.headline-main{display:flex; flex-direction:column; gap:2px; min-width:210px}
.headline-label{font-size:12px; color:var(--faint)}
.headline-value{font:600 40px/1.05 var(--mono); letter-spacing:-.025em}
.headline-sub{font-size:13px; color:var(--dim)}
.headline-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:16px 26px; flex:1;
}
.kpi{display:flex; flex-direction:column; gap:1px}
.kpi b{font:500 17px var(--mono)}
.kpi span{font-size:11px; color:var(--faint)}

.chart-block{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.chart-head .hint{margin:0}
#btChart svg{display:block; width:100%; height:auto}
.axis-line{stroke:var(--line); stroke-width:1}
.axis-text{fill:var(--faint); font:400 10px var(--mono)}
.eq-line{fill:none; stroke:var(--up); stroke-width:1.6}
.eq-area{fill:url(#eqFill)}
.dd-area{fill:rgba(234,57,67,.3)}
.base-line{stroke:var(--faint); stroke-width:1; stroke-dasharray:3 3}

/* Du phong Monte Carlo */
#tab-forecast{max-width:1180px}
.fc-lead{color:var(--dim); font-size:13px; line-height:1.6; margin:0 0 16px; max-width:78ch}
.fc-grid{display:flex; flex-direction:column; gap:18px}
.fc-grid .card{min-width:0}                       /* cho phep co lai, tranh bang rong lam meo */
.fc-grid .fc-port{order:1}                         /* danh muc len tren (chinh) */
.fc-grid .fc-single{order:2}
/* Tieu de card dep hon */
.fc-hd{margin-bottom:16px}
.fc-hd h2{display:flex; align-items:center; gap:9px; margin:0}
.fc-hd-tag{font:600 10.5px var(--sans); letter-spacing:.03em; text-transform:uppercase;
  color:var(--amber); background:rgba(242,192,55,.12); padding:2px 8px; border-radius:20px}
.fc-hd-sub{margin:6px 0 0; font-size:12.5px; color:var(--dim); line-height:1.55; max-width:86ch}
.fc-hd-sub b{color:var(--text); font-weight:600}
.ps-wrap{overflow-x:auto; margin-top:2px}          /* bang nhieu cot -> cuon ngang trong khung */
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 18px 16px}
.card>h2{display:flex; align-items:center; gap:8px; font-size:15px; margin-bottom:14px}
.card>h2::before{content:""; width:3px; height:15px; border-radius:2px; background:var(--amber)}
.fc-controls{display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end; margin-bottom:16px}
.fc-controls label{display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--dim); font-weight:500}
.fc-controls input,.fc-controls select{width:100%; padding:8px 10px; border-radius:8px; font:500 13px var(--mono);
  border:1px solid var(--line); background:var(--panel-2); color:var(--text)}
.fc-controls input:focus,.fc-controls select:focus{outline:none; border-color:var(--amber)}
.fc-controls .fc-f{flex:1 1 90px; min-width:82px}
.fc-controls .fc-f.wide{flex:1 1 130px}
.fc-controls .fc-f.chk{flex:0 0 auto; flex-direction:row; align-items:center; gap:6px; color:var(--text); font-size:13px}
.fc-controls .fc-f.chk input{width:auto}
.fc-fund{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line)}
.fc-fy-row{display:flex; flex-wrap:wrap; gap:6px 14px; margin:4px 0; font-size:12px; color:var(--dim); font-family:var(--mono)}
.fc-fy b{color:var(--text)}
/* Thanh điều khiển tab Đầu tư dài hạn */
.lt-controls{align-items:flex-end; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:13px 15px 24px}      /* chừa đáy cho dòng "= X tỷ" */
.lt-controls .fc-f{position:relative}
.lt-controls input,.lt-controls select{height:38px; box-sizing:border-box}
.lt-controls .fc-f.chk{height:38px; padding-bottom:9px}   /* thẳng đáy với ô nhập */
.lt-controls .fc-f.chk input{accent-color:var(--amber); width:15px; height:15px}
.lt-controls .btn{align-self:flex-end; height:38px}
/* "= 1 tỷ" đặt tuyệt đối dưới ô -> KHÔNG đội chiều cao cột (các ô thẳng đáy nhau) */
#ltPoolHint.fc-hint{position:absolute; top:100%; left:2px; margin-top:3px; white-space:nowrap}
/* Trạng thái/lỗi xuống DÒNG RIÊNG, tự xuống hàng, không đẩy tràn ngang */
.lt-controls .lt-status{flex:1 0 100%; margin:2px 0 0; align-self:flex-start; white-space:normal}

/* Leader theo sóng ngành */
.ld-market{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:12px 15px; margin-bottom:14px}
.ld-mkt-row{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center}
.ld-mkt-phase{font-size:15px}
.ld-mkt-expo{display:flex; flex-direction:column; gap:3px; min-width:220px; margin-left:auto}
.ld-mkt-expo span{font-size:11px; color:var(--faint)}
.ld-mkt-expo b{font-size:16px}
.ld-expobar{height:6px; border-radius:4px; background:var(--panel-2); overflow:hidden}
.ld-expobar i{display:block; height:100%; background:var(--amber)}
.ld-sector{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); margin-bottom:12px; overflow:hidden}
.ld-sector.is-weak{opacity:.55}
.ld-sec-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.ld-sec-name{font-weight:600; font-size:14px}
.ld-sec-meta{margin-left:auto; color:var(--dim); font-size:12px}
.ld-sector .table-wrap{border:0; border-radius:0; max-height:none}
.ld-stock{cursor:pointer}

.lt-buys{text-align:left; white-space:nowrap}
.lt-buy{display:inline-flex; gap:4px; align-items:baseline; margin-right:10px; font-family:var(--mono); font-size:12px; color:var(--up)}
.lt-buy b{color:var(--text)}
.fc-controls .btn{flex:0 0 auto; padding:9px 18px}
.fc-summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:4px 0 14px}
.fc-card{padding:11px 13px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line);
  border-top:2px solid var(--line)}
.fc-card b{display:block; font-size:18px; line-height:1.25; font-family:var(--mono); font-weight:600}
.fc-card b.up{color:var(--up)} .fc-card b.down{color:var(--down)}
.fc-card span{font-size:11px; color:var(--dim)}
.fc-chart{width:100%; border-radius:8px; background:var(--panel-2); border:1px solid var(--line); padding:8px 4px 2px}
.fc-chart svg{display:block; width:100%; height:230px}
.fc-chart:empty{display:none}
/* Ro ma (basket) */
.fc-basket{margin-bottom:14px}
.fc-basket-add{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.fc-basket-add input{flex:1 1 160px; min-width:140px; padding:8px 10px; border-radius:8px;
  font:500 13px var(--mono); border:1px solid var(--line); background:var(--panel-2); color:var(--text)}
.fc-basket-add input:focus{outline:none; border-color:var(--amber)}
.fc-basket-add .btn{padding:7px 12px; font-size:12px}
.fc-chips{display:flex; flex-wrap:wrap; gap:6px; min-height:10px}
.fc-chips-empty{color:var(--faint); font-size:12px}
.fc-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:14px;
  background:var(--panel-2); border:1px solid var(--line); font:600 12px var(--mono)}
.fc-chip i{cursor:pointer; color:var(--faint); font-style:normal; font-size:14px; line-height:1}
.fc-chip i:hover{color:var(--down)}
.fc-derived{margin:2px 0 12px; padding:10px 12px; border-radius:8px;
  background:rgba(76,139,245,.08); border:1px solid rgba(76,139,245,.25)}
.fc-derived:empty{display:none}
.fc-derived-head{font-size:12.5px; color:var(--text)}
.fc-derived-syms{display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:6px}
.fc-derived-syms .ps{font-size:11px; color:var(--dim)}
.fc-derived-syms .ps b{color:var(--text)}
.fan-mid{fill:none; stroke:#4c8bf5; stroke-width:2}
.fan-edge{fill:none; stroke:#4c8bf5; stroke-width:1; stroke-opacity:.5; stroke-dasharray:4 3}

/* Dinh gia (screener + chi tiet) */
.val-controls{display:flex; align-items:center; gap:14px; margin:6px 0 12px}
.sector-val-block{margin:0 0 18px}
.sv-title{margin:0 0 8px; font:600 13px var(--sans); color:var(--text)}
.sv-title .hint{font-weight:400; color:var(--faint)}
#secValTable td.sym{font-weight:500}
.val-onlyfav{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--dim); cursor:pointer}
.val-layout{display:grid; grid-template-columns:1fr 340px; gap:14px; align-items:start}
@media (max-width:1100px){ .val-layout{grid-template-columns:1fr} }
#screenTable td.star{cursor:pointer; text-align:center; color:var(--faint); font-size:15px; width:30px}
#screenTable td.star.on{color:var(--amber)}
#screenTable td.sym{font-weight:600; font-family:var(--mono)}
.scr-row{cursor:pointer}
.val-detail{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:14px; position:sticky; top:110px}
.vd-title{font-size:16px; color:var(--text); display:flex; align-items:center; gap:8px; margin-bottom:10px}
.vd-title .tag{font-size:12px; padding:2px 8px; border-radius:10px; border:1px solid currentColor}
.vd-fair{display:flex; gap:10px; margin-bottom:8px}
.vd-fair>div{flex:1; text-align:center; padding:8px; border-radius:8px; background:var(--surface-2,rgba(127,127,127,.06))}
.vd-fair span{display:block; font-size:11px; color:var(--dim)}
.vd-fair b{font-size:16px}
.vd-fair-main{background:rgba(242,192,55,.10)!important; border:1px solid var(--amber-dim)}
.vd-fair-main b{font-size:20px!important}
.vd-fair-main em{display:block; font-style:normal; font-size:10px; color:var(--faint); margin-top:2px}
.vd-methods-fair{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 8px}
.vmf-title{font-size:11px; color:var(--dim); width:100%}
.vmf{display:flex; flex-direction:column; align-items:center; min-width:56px; padding:5px 8px;
  border-radius:7px; background:var(--panel-2); border:1px solid var(--line)}
.vmf b{font-family:var(--mono); font-size:13px}
.vmf span{font-size:10px; color:var(--dim)}
.vmf-sc{font:600 10px var(--mono); font-style:normal; margin-top:2px; padding:1px 5px; border-radius:8px;
  background:var(--bg)}
.vmf-sc.up{color:var(--up)} .vmf-sc.ref{color:var(--ref)} .vmf-sc.down{color:var(--down)}
.vd-fair-score{background:var(--panel-2)}
.vd-fair-score b{font-size:20px!important}
.vd-fair-score b.up{color:var(--up)} .vd-fair-score b.ref{color:var(--ref)} .vd-fair-score b.down{color:var(--down)}
.vd-fair-score em{display:block; font-style:normal; font-size:10px; color:var(--faint); margin-top:2px}
.vd-metrics{display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; margin:10px 0}
.vm{display:flex; justify-content:space-between; font-size:12px; padding:2px 0; border-bottom:1px solid var(--line-soft)}
.vm span{color:var(--dim)}
.vd-sub{font:600 12px var(--sans); color:var(--dim); margin:12px 0 6px}
.ybars{display:flex; flex-direction:column; gap:4px}
.yb{display:flex; align-items:center; gap:8px; font-size:12px}
.yb-l{width:38px; color:var(--dim); font-family:var(--mono)}
.yb-bar{flex:1; height:12px; background:var(--surface-2,rgba(127,127,127,.08)); border-radius:3px; overflow:hidden}
.yb-bar i{display:block; height:100%; border-radius:3px}
.yb-v{width:60px; text-align:right; font-family:var(--mono)}

.monthly{display:flex; flex-wrap:wrap; gap:3px; margin-top:9px}
.mo{
  width:52px; padding:5px 3px; border-radius:2px; text-align:center;
  font:500 11px var(--mono); background:var(--raise);
}
.mo b{display:block; font-size:12px; font-weight:600}
.mo span{color:var(--faint); font-size:10px; font-weight:400}

.totals{display:flex; gap:24px; margin-top:13px; padding-top:11px; border-top:1px solid var(--line)}
.totals div{display:flex; flex-direction:column; gap:1px}
.totals b{font:500 15px var(--mono)}
.totals span{font-size:11px; color:var(--faint)}

.data.compact td{height:28px; font-size:12px}
.data.compact select{padding:3px 6px; font-size:12px}

.result{margin-top:10px; font:400 12px/1.6 var(--mono); color:var(--dim); white-space:pre-wrap}
.result.ok{color:var(--up)} .result.bad{color:var(--down)}

/* ---------------------------------------------------------------- toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(14px);
  background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:var(--r); padding:10px 17px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:50;
  max-width:min(520px,90vw);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.bad{border-left-color:var(--down)}
.toast.good{border-left-color:var(--up)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

@media (max-width:820px){
  .topbar{height:auto; flex-wrap:wrap; gap:12px; padding:10px 14px}
  .nav-figure{margin-left:0}
  .tabs{top:0; position:static}
  main{padding:12px}
  .headline-value{font-size:31px}
}

/* Doi chieu benchmark trong tab Kiem dinh */
.bench {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2, rgba(127, 127, 127, .08));
  border: 1px solid var(--border, rgba(127, 127, 127, .18));
  font-size: 13px;
  line-height: 1.6;
}
.bench-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent, #f5a623);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Banner regime thi truong (che do dau tu dai han) */
.regime-banner {
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.regime-banner.ok  { background: rgba(38, 166, 91, .12);  border-color: rgba(38, 166, 91, .4); }
.regime-banner.bad { background: rgba(224, 64, 64, .12);  border-color: rgba(224, 64, 64, .45); }

/* Nut chon che do chay */
.mode-block { margin-bottom: 16px; }
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mode-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border, rgba(127, 127, 127, .2));
  background: var(--surface-2, rgba(127, 127, 127, .05));
}
.mode-card input { margin-top: 3px; }
.mode-card:has(input:checked) {
  border-color: var(--accent, #f5a623);
  background: rgba(245, 166, 35, .1);
}
.mode-card b { display: block; margin-bottom: 3px; }
.mode-card span { font-size: 12px; color: var(--muted, #999); line-height: 1.45; }

/* Danh muc theo nganh */
.sectors { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.sector { padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(127,127,127,.06)); }
.sector > b { font-size: 13px; }
.chip.static { cursor: default; }

/* Sub-tab trong khoi Danh sach theo doi */
.subtabs { display: flex; gap: 4px; margin: 6px 0 10px; border-bottom: 1px solid var(--border, rgba(127,127,127,.18)); }
.subtab { background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 12px;
  font-size: 13px; color: var(--muted, #999); cursor: pointer; }
.subtab:hover { color: var(--text, #eee); }
.subtab.is-active { color: var(--text, #eee); border-bottom-color: var(--accent, #4c8bf5); font-weight: 600; }
.subpane { display: none; }
.subpane.is-active { display: block; }
.subpane.sectors.is-active { display: flex; }
.sector .chip.rm { cursor: pointer; }
.sector .chip.rm:hover { border-color: var(--down); color: var(--down); }

/* Bang danh sach ma co cot nganh */
.sym-table { width: 100%; }
.sym-table td, .sym-table th { padding: 4px 8px; }
.sym-table .r { text-align: right; }
.sym-table .x {
  border: none; background: transparent; cursor: pointer; color: var(--muted, #999);
  font-size: 13px; padding: 2px 6px; border-radius: 4px;
}
.sym-table .x:hover { background: rgba(224,64,64,.15); color: #e04040; }

/* Gợi ý quy đổi tiền cạnh ô nhập vốn */
.money-hint { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--accent, #f5a623); font-weight: 600; }

/* Banner nhận diện pha thị trường */
.phase-banner {
  margin-bottom: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.phase-banner .btn { margin-left: auto; padding: 4px 12px; }
.phase-banner.uptrend  { background: rgba(38,166,91,.12);  border-color: rgba(38,166,91,.4); }
.phase-banner.downtrend{ background: rgba(224,64,64,.12);  border-color: rgba(224,64,64,.45); }
.phase-banner.sideway  { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.4); }

.phase-note{flex-basis:100%; margin-top:2px; font-size:12px; color:var(--dim)}

/* ---- Luồng tiền thị trường (chỉ số + khối ngoại + tự doanh) ---- */
.mkt-flows{margin-bottom:8px; padding:8px 14px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel-2); font-size:12.5px}
.mf-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.mf-indices{padding-bottom:7px; margin-bottom:7px; border-bottom:1px solid var(--line-soft); font-size:13px}
/* Khối ngoại + Tự doanh xếp 2 cột cho gọn chiều cao */
.mf-flows-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 24px}
.mf-flows-grid .mf-flow + .mf-flow{border-top:0; border-left:1px solid var(--line-soft); padding-left:24px}
@media(max-width:920px){
  .mf-flows-grid{grid-template-columns:1fr}
  .mf-flows-grid .mf-flow + .mf-flow{border-left:0; padding-left:0; border-top:1px solid var(--line-soft)}
}
.mf-idx{display:inline-flex; align-items:center; gap:7px}
.mf-idx-name{color:var(--dim); font-weight:600}
.mf-idx b{font-family:var(--mono); font-size:15px}
.mf-idx-chg{font-size:12px}
.mf-sep{width:1px; height:16px; background:var(--line); margin:0 10px}
.mf-flow{padding:5px 0}
.mf-flow + .mf-flow{border-top:1px solid var(--line-soft)}
.mf-flow-hd{display:flex; flex-wrap:wrap; align-items:center; gap:7px; line-height:1.7}
.mf-date{color:var(--faint); font-size:11px; font-family:var(--mono)}
.mf-verdict{font-size:11px; font-weight:600}
.mf-bs{color:var(--dim); font-size:11.5px}
.mf-tops{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:3px}
.mf-toplb{color:var(--faint); font-size:11px}
.mf-toplb2{margin-left:10px}
.mf-chip{font-family:var(--mono); font-size:11.5px; padding:1px 7px; border-radius:20px; border:1px solid var(--line)}
.mf-chip.up{color:var(--up); background:rgba(22,199,132,.09); border-color:rgba(22,199,132,.3)}
.mf-chip.down{color:var(--down); background:rgba(234,57,67,.09); border-color:rgba(234,57,67,.3)}
.mf-note{margin-top:6px; font-size:11px; color:var(--faint)}

/* Cảnh báo MUA cho mã đã mua -> tag + làm mờ */
.tag.done { background: rgba(22,199,132,.18); color: var(--up); border: 1px solid rgba(22,199,132,.4); }
.alert.bought { opacity: .5; }
.alert.bought:hover { opacity: 1; }

/* ---------------------------------------------------------------- chart mẫu hình */
.sym-link{cursor:pointer; text-decoration:underline dotted var(--faint); text-underline-offset:2px}
.sym-link:hover{color:var(--amber)}
.chart-modal{position:fixed; inset:0; z-index:60; background:rgba(6,10,18,.78);
  display:flex; align-items:center; justify-content:center; padding:20px}
.chart-modal[hidden]{display:none}
.chart-dialog{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  width:97vw; height:95vh; display:flex; flex-direction:column; overflow:hidden}
.chart-tools{display:flex; gap:14px; align-items:center; margin-left:auto; margin-right:12px}
.ctool-grp{display:flex; gap:2px; background:var(--panel-2); border:1px solid var(--line); border-radius:7px; padding:2px}
.ctool{background:none; border:0; color:var(--dim); font:500 12px var(--sans); padding:5px 10px; border-radius:5px; cursor:pointer}
.ctool:hover{color:var(--text)}
.ctool.is-active{background:var(--amber); color:#1A1400; font-weight:600}
.chart-head{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line)}
.chart-head #chartTitle{font:600 15px var(--sans)}
.chart-verdict{margin-right:auto}
.chart-body{flex:1; display:grid; grid-template-columns:1fr 320px; gap:0; min-height:0; overflow:hidden}
@media (max-width:900px){.chart-body{grid-template-columns:1fr}}
.chart-canvas{padding:8px; overflow:hidden; min-width:0; min-height:0; display:block; cursor:grab; box-sizing:border-box}
.chart-canvas.grabbing{cursor:grabbing}
/* fit-to-view: SVG co giãn vừa khung (letterbox theo preserveAspectRatio meet) → mọi panel
   (giá + Volume + RSI + MACD) luôn thấy toàn cục; vùng nến vẫn zoom/pan bằng lăn chuột/kéo. */
.cchart{width:100%; height:100%; display:block; background:var(--bg); border-radius:6px}
.chart-patterns{border-left:1px solid var(--line); padding:12px 14px; overflow:auto; background:var(--panel-2)}
.cp-legend{display:flex; flex-wrap:wrap; gap:8px 12px; font-size:11px; color:var(--dim); margin-bottom:10px}
.cp-legend i{display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:4px; vertical-align:middle}
.cp-h{font:600 12px var(--sans); color:var(--dim); margin:12px 0 6px}
.cp-item{border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin-bottom:7px; cursor:pointer; background:var(--panel)}
.cp-item:hover{border-color:var(--faint)}
.cp-item.on{border-color:var(--amber); box-shadow:inset 3px 0 0 var(--amber)}
.cp-item.primary{border-color:var(--amber); background:rgba(242,192,55,.06); box-shadow:inset 3px 0 0 var(--amber)}
.cp-focus{font-size:10.5px; font-weight:700; color:var(--amber); margin:2px 0 4px; letter-spacing:.3px}
.cp-conf{font-size:10px; font-weight:700; padding:1px 7px; border-radius:8px; border:1px solid var(--line); white-space:nowrap}
.cp-conf.up{color:var(--up); border-color:#1E5A44; background:rgba(22,199,132,.08)}
.cp-conf.ref{color:var(--ref); border-color:var(--amber-dim); background:rgba(242,192,55,.07)}
.cp-conf.down{color:var(--down); border-color:#4A2530; background:rgba(234,57,67,.08)}
.cp-more{margin:4px 0 2px} .cp-more>summary{cursor:pointer; font-size:11px; color:var(--dim); padding:4px 0}
.cp-more>summary:hover{color:var(--amber)}
.cp-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.cp-top b{font-size:13px}
.cp-meta{font-size:11px; color:var(--dim); margin-top:3px}
.cp-note{font-size:11px; color:var(--faint); margin-top:3px}
.cp-events{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.cp-events li{font-size:11px; padding:3px 8px; border-radius:6px; background:var(--panel)}
.cp-events li.up{color:var(--up)} .cp-events li.down{color:var(--down)}
.tag.pending{background:rgba(242,192,55,.15); color:var(--ref); border:1px solid rgba(242,192,55,.35)}

.cp-filter{display:flex; gap:4px; margin-bottom:8px}
.cpf{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--dim);
  font:500 11px var(--sans); padding:5px; border-radius:6px; cursor:pointer}
.cpf:hover{color:var(--text)}
.cpf.on{background:var(--amber); color:#1A1400; border-color:var(--amber); font-weight:600}

/* Badge mẫu hình trên bảng giá + tag cảnh báo mẫu hình */
.pat-badge{display:inline-block; font-size:11px; padding:1px 6px; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line); white-space:nowrap}
.pat-badge.up{color:var(--up); border-color:rgba(22,199,132,.4)}
.pat-badge.down{color:var(--down); border-color:rgba(234,57,67,.4)}
.pat-badge.both{color:var(--ref); border-color:rgba(242,192,55,.4)}
.tag.pat{background:rgba(76,139,245,.15); color:#4c8bf5; border:1px solid rgba(76,139,245,.4)}
.alert.pattern{border-left-color:#4c8bf5}

.tag.star{background:rgba(242,192,55,.2); color:var(--amber); border:1px solid rgba(242,192,55,.5)}
.alert.confluence{border-left-color:var(--amber); box-shadow:inset 0 0 0 1px rgba(242,192,55,.25)}

.tag.hold-sell{background:rgba(234,57,67,.18); color:var(--down); border:1px solid rgba(234,57,67,.5); font-weight:600}
.alert.held-sell{border-left-color:var(--down); box-shadow:inset 0 0 0 1px rgba(234,57,67,.3)}

.cp-target{font-size:12px; margin-top:3px; font-weight:600}
.cp-target.up{color:var(--up)} .cp-target.down{color:var(--down)} .cp-target.both{color:var(--ref)}

/* Cột khuyến nghị tổng hợp trên bảng giá */
.board td.rec-cell{font-family:var(--sans); vertical-align:middle; min-width:172px; padding-top:5px; padding-bottom:5px; line-height:1.35}
.rec{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 7px; border-radius:9px; white-space:nowrap}
.rec i{font-style:normal; font-family:var(--mono); opacity:.8; font-size:10px}
.chart-live{font-size:12px; color:var(--up); font-weight:600; margin-left:8px}
.rec.strong_buy{background:rgba(22,199,132,.22); color:var(--up)}
.rec.buy{background:rgba(22,199,132,.12); color:var(--up)}
.rec.neutral{background:rgba(132,148,172,.15); color:var(--dim)}
.rec.watch{background:rgba(192,132,252,.15); color:#c084fc}
.rec.sell{background:rgba(234,57,67,.12); color:var(--down)}
.rec.strong_sell{background:rgba(234,57,67,.24); color:var(--down)}

/* Trọng tài v4 trên cột Khuyến nghị + độ tin cậy mẫu hình (minh bạch để trust) */
.rec-v4{display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:3px; font-size:10px}
.v4-hard,.v4-rr{padding:1px 6px; border-radius:7px; border:1px solid var(--line); font-weight:600; white-space:nowrap}
.v4-hard.up{color:var(--up); border-color:#1E5A44} .v4-hard.down{color:var(--down); border-color:#4A2530}
.v4-hard.ref{color:var(--ref); border-color:var(--amber-dim)}
.v4-rr.up{color:var(--up)} .v4-rr.ref{color:var(--ref)} .v4-rr.down{color:var(--down)}
.v4-why{color:var(--dim); cursor:help; text-decoration:underline dotted; text-underline-offset:2px}
.v4-why:hover{color:var(--amber)}
.pat-conf{font-size:10px; padding:0 4px; border-radius:6px; font-weight:700}
.pat-conf.up{color:var(--up)} .pat-conf.ref{color:var(--ref)} .pat-conf.down{color:var(--down)}

/* Panel khuyến nghị trong chart */
.rec-panel{border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-bottom:12px}
.rec-hd{padding:12px; text-align:center}
.rec-hd.rec-strong_buy{background:rgba(22,199,132,.20)} .rec-hd.rec-buy{background:rgba(22,199,132,.10)}
.rec-hd.rec-neutral{background:rgba(132,148,172,.12)}
.rec-hd.rec-watch{background:rgba(192,132,252,.12)}
.rec-hd.rec-sell{background:rgba(234,57,67,.10)} .rec-hd.rec-strong_sell{background:rgba(234,57,67,.20)}
.rec-act{font:700 20px var(--sans)}
.rec-strong_buy .rec-act,.rec-buy .rec-act{color:var(--up)}
.rec-sell .rec-act,.rec-strong_sell .rec-act{color:var(--down)}
.rec-neutral .rec-act{color:var(--dim)}
.rec-watch .rec-act{color:#c084fc}
.rec-badge{font:600 10px var(--sans); padding:1px 6px; border-radius:3px; vertical-align:middle;
  background:rgba(212,160,23,.15); color:#e0b84a; border:1px solid rgba(212,160,23,.4)}
.rec-warn{padding:6px 12px; font-size:11px; color:#e0b84a; background:rgba(212,160,23,.06);
  border-top:1px solid var(--line)}
.rec-sub{font-size:11px; color:var(--dim); margin-top:2px}
.rec-gauge{position:relative; height:6px; border-radius:3px; margin-top:8px;
  background:linear-gradient(90deg,var(--down),var(--dim) 50%,var(--up))}
.rec-gauge i{position:absolute; top:-3px; width:3px; height:12px; background:var(--text); border-radius:2px; transform:translateX(-50%)}
.rec-comps{list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:6px}
.rec-comps li{font-size:11px; padding:5px 8px; border-radius:6px; background:var(--panel-2); border-left:3px solid var(--line)}
.rec-comps li.up{border-left-color:var(--up)} .rec-comps li.down{border-left-color:var(--down)} .rec-comps li.dim{border-left-color:var(--faint)}
.rec-comps b{color:var(--text)} .rc-sc{font-family:var(--mono); color:var(--dim)} .rc-dt{color:var(--dim)}
.rec-comps li.up .rc-ic{color:var(--up)} .rec-comps li.down .rc-ic{color:var(--down)}

/* Kế hoạch giá trong cột khuyến nghị + panel chart */
.rec-plan{font-size:10px; color:var(--dim); margin-top:3px; line-height:1.3; white-space:nowrap}
.rec-plan span{color:var(--faint)}
.rec-plan.down{color:var(--down)}
.rec-plan-box{display:flex; gap:8px; padding:8px 10px; border-top:1px solid var(--line)}
.rec-plan-box>div{flex:1; text-align:center}
.rec-plan-box span{display:block; font-size:10px; color:var(--dim)}
.rec-plan-box b{font-size:14px; font-family:var(--mono)}

.rec-plan.wait{color:var(--ref); font-size:10px; margin-top:3px}
.rec-tranches{font-size:10px; color:#4c8bf5; margin-top:2px; line-height:1.3; white-space:nowrap}
.rec-tranches span{color:var(--faint)}
.rec-tranches b{color:#4c8bf5}
/* Giải ngân 3 đợt hiển thị trong bảng tab Dự phóng dài hạn */
.fc-tranches{font-size:10px; color:#4c8bf5; margin-top:3px; line-height:1.35}
.fc-tranches b{color:#4c8bf5; font-family:var(--mono)}
/* Hộp giải ngân 3 đợt trong panel biểu đồ */
.tranche-box{padding:8px 10px; border-top:1px solid var(--line); background:rgba(76,139,245,.05)}
.tranche-hd{font-size:11px; color:#4c8bf5; font-weight:700; margin-bottom:5px}
.tranche-hd em{color:var(--dim); font-weight:500}
.tranche-row{display:flex; justify-content:space-between; font-size:12px; padding:2px 0}
.tranche-row span{color:var(--dim)}
.tranche-row b{font-family:var(--mono)}
.tranche-row.avg{border-top:1px dashed var(--line); margin-top:4px; padding-top:5px; font-weight:700}
.tranche-row em{color:var(--dim); font-style:normal; font-size:11px}
.tranche-box.lt{background:rgba(166,107,240,.06)}
.tranche-box.lt .tranche-hd{color:#A66BF0}
.tr-badge{display:inline-block; margin-left:6px; padding:1px 6px; border-radius:9px; font-size:10px; font-weight:700; vertical-align:middle}
.tr-badge.part{background:rgba(242,192,55,.16); color:#F2C037}
.tr-badge.full{background:rgba(22,199,132,.14); color:var(--up)}

/* Bảng dự kiến từng mã trong Dự kiến tài sản */
.ps-h{font:600 13px var(--sans); color:var(--text); margin:18px 0 8px; display:flex; align-items:center; gap:7px}
.ps-h::before{content:""; width:3px; height:14px; background:var(--amber); border-radius:2px}
.ps-table{width:100%; border-collapse:collapse; font-size:12px; min-width:720px}
.ps-table th{text-align:right; color:var(--dim); font:600 11px var(--sans); padding:8px 10px;
  border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; background:var(--panel)}
.ps-table th.l{text-align:left}
.ps-table td{text-align:right; padding:7px 10px; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); white-space:nowrap}
.ps-table td.l{text-align:left; font-family:var(--mono)}
.ps-table tbody tr:hover{background:var(--panel-2)}
.ps-table td.sym{font-weight:700}
.ps-table td em{font-style:normal; color:var(--faint); font-size:11px}

.fc-drip{flex-direction:row!important; align-items:center; gap:6px; white-space:nowrap; color:var(--text)!important}
.fc-drip input{width:auto!important}

/* ================================================================== TỔNG QUAN (AI Terminal) */
#tab-overview{max-width:1320px}
.ov-topline{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap}
.ov-title h1{font:600 20px/1.15 var(--sans); margin:0; letter-spacing:-.02em}
.ov-title h1::before{content:""; display:inline-block; width:8px; height:18px; margin-right:9px; vertical-align:-2px;
  background:linear-gradient(180deg,var(--amber),var(--up)); border-radius:2px}
.ov-sub{display:block; color:var(--dim); font-size:12.5px; margin-top:3px; margin-left:17px}
.ov-updated{color:var(--faint); font-size:12px; font-family:var(--mono)}

.ov-status{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:11px; margin-bottom:13px}
.ov-card{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:6px; padding:12px 13px; display:flex; flex-direction:column; gap:3px; min-height:78px; position:relative}
.ov-card[data-goto]{cursor:pointer; transition:border-color .12s, transform .12s}
.ov-card[data-goto]:hover{border-color:#34486690; transform:translateY(-1px)}
.ov-card .ov-k{font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em}
.ov-card .ov-v{font:500 25px/1.05 var(--mono); letter-spacing:-.02em; color:var(--text)}
.ov-card .ov-v small{font-size:12px; color:var(--faint); font-weight:400}
.ov-card .ov-v.ov-word{font:700 21px/1.1 var(--sans); letter-spacing:.01em}
.ov-card .ov-d{font-size:11.5px}
.ov-card .ov-v.up,.ov-card .ov-d.up,.ov-word.up{color:var(--up)}
.ov-card .ov-v.down,.ov-card .ov-d.down,.ov-word.down{color:var(--down)}
.ov-card .ov-v.ref,.ov-word.ref{color:var(--ref)}
.ov-card .ov-v.dim{color:var(--dim)}
.ov-bar{height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin:3px 0 1px}
.ov-bar i{display:block; height:100%; background:var(--dim)}
.ov-bar i.up{background:var(--up)} .ov-bar i.down{background:var(--down)} .ov-bar i.ref{background:var(--ref)}
.ov-card.skeleton{background:var(--panel); animation:ovpulse 1.3s ease-in-out infinite}
@keyframes ovpulse{0%,100%{opacity:.5}50%{opacity:.85}}

.ov-summary{display:flex; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--amber); border-radius:6px; padding:12px 15px; margin-bottom:15px}
.ov-sum-tag{font-size:12px; font-weight:600; color:var(--amber); white-space:nowrap; padding-top:1px}
.ov-sum-body{flex:1}
.ov-sum-txt{margin:0 0 6px; font-size:13.5px; line-height:1.55; color:var(--text)}
.ov-sum-act{margin:0; font-size:13px; line-height:1.5; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.ov-act-lb{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:4px; background:var(--raise)}
.ov-sum-act.up{color:var(--up)} .ov-sum-act.up .ov-act-lb{color:var(--up); background:rgba(22,199,132,.14)}
.ov-sum-act.down{color:var(--down)} .ov-sum-act.down .ov-act-lb{color:var(--down); background:rgba(234,57,67,.14)}
.ov-sum-act.ref{color:var(--ref)} .ov-sum-act.ref .ov-act-lb{color:var(--ref); background:rgba(242,192,55,.14)}

.ov-grid{display:grid; grid-template-columns:1fr 344px; gap:15px; align-items:start}
.ov-block{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:13px 15px}
.ov-side{display:flex; flex-direction:column; gap:15px}
.ov-block-hd{display:flex; align-items:baseline; gap:9px; margin-bottom:11px; flex-wrap:wrap}
.ov-block-hd h2{font:600 14px var(--sans)}
.ov-count{color:var(--faint); font-size:12px; font-family:var(--mono)}
.ov-block-sub{color:var(--faint); font-size:11.5px; flex:1 1 100%}

.ov-opp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px}
.ov-opp{background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:5px; padding:10px 11px; cursor:pointer; transition:border-color .12s, transform .12s}
.ov-opp:hover{transform:translateY(-1px); border-color:#34486690}
.ov-opp.strong_buy,.ov-opp.buy{border-left-color:var(--up)}
.ov-opp.watch{border-left-color:var(--ref)}
.ov-opp-hd{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.ov-opp-sym{font:700 15px var(--sans); letter-spacing:-.01em}
.ov-opp-px{display:flex; align-items:baseline; gap:9px; font-size:12px; margin-bottom:6px}
.ov-opp-px b{font-size:15px}
.ov-opp-px .dim{margin-left:auto; font-size:11px; color:var(--faint)}
.ov-opp-why{font-size:11.5px; color:var(--dim); line-height:1.4; margin-bottom:6px; min-height:16px}
.ov-opp .rec-plan{font-size:11px}

.ov-port-top{display:flex; gap:16px; margin-bottom:11px}
.ov-port-top>div{display:flex; flex-direction:column}
.ov-port-top b{font:500 18px var(--mono)}
.ov-port-top span{font-size:11px; color:var(--faint)}
.ov-alloc{margin-bottom:11px}
.ov-alloc-bar,.risk-bar{height:8px; border-radius:4px; background:var(--down); overflow:hidden; margin-bottom:5px}
.ov-alloc-bar i.inv,.risk-bar i.inv{display:block; height:100%; background:var(--up)}
.ov-alloc .dim{font-size:11.5px}
.ov-holds{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.ov-holds li{display:grid; grid-template-columns:52px 1fr 34px 46px; align-items:center; gap:8px; font-size:12px}
.ov-h-sym{font-weight:600}
.ov-h-bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.ov-h-bar i{display:block; height:100%; background:var(--amber)}
.ov-holds li .num{text-align:right}

.ov-idxrow{display:flex; flex-wrap:wrap; gap:5px 14px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line-soft)}
.ov-idx{font-size:11.5px} .ov-idx b{font-size:12.5px}
.ov-flowgrid{display:flex; flex-direction:column; gap:7px; margin-bottom:9px}
.ov-flow{display:flex; align-items:baseline; gap:9px; font-size:12.5px}
.ov-flow>span:first-child{min-width:96px; color:var(--dim)}
.ov-flow b{font-size:13px}
.ov-breadth{font-size:12px}
.ov-flows .empty{padding:16px 6px}

/* ================================================================== CẢNH BÁO — GOM NHÓM */
.alert-list.grouped{display:block; max-width:none}
/* 3 dải ngang (MUA · THEO DÕI · BÁN) xếp dọc, full-width; thẻ dàn ngang tự xuống dòng.
   Không giới hạn chiều cao -> danh sách dài, cuộn cả trang (không còn mini-scroll trong cột). */
.alert-cols{display:flex; flex-direction:column; gap:16px}
.alert-col{background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.alert-col-hd{display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line);
  background:var(--panel-2); flex-wrap:wrap; position:sticky; top:0; z-index:2}
.alert-col-lb{font:700 12px var(--sans); letter-spacing:.03em; text-transform:uppercase}
.alert-col-n{font-family:var(--mono); font-size:12px; padding:1px 8px; border-radius:9px; background:var(--raise); color:var(--dim)}
.alert-col-hint{flex:1 1 100%; font-size:10.5px; color:var(--faint)}
.alert-col-hd.buy{border-top:2px solid var(--up)} .alert-col-hd.buy .alert-col-lb{color:var(--up)}
.alert-col-hd.buy .alert-col-n{background:rgba(22,199,132,.16); color:var(--up)}
.alert-col-hd.watch{border-top:2px solid var(--ref)} .alert-col-hd.watch .alert-col-lb{color:var(--ref)}
.alert-col-hd.watch .alert-col-n{background:rgba(242,192,55,.16); color:var(--ref)}
.alert-col-hd.sell{border-top:2px solid var(--down)} .alert-col-hd.sell .alert-col-lb{color:var(--down)}
.alert-col-hd.sell .alert-col-n{background:rgba(234,57,67,.16); color:var(--down)}
.alert-col-body{padding:10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:10px; align-items:start}
.alert-col-body .alert{margin:0}
.alert-col-body > .empty.small{grid-column:1/-1}
.empty.small{padding:18px 8px; font-size:12px}
@media (max-width:720px){ .alert-col-body{grid-template-columns:1fr} }

/* ================================================================== DANH MỤC — RỦI RO */
.hold-risk{margin-top:16px; border-top:1px solid var(--line-soft); padding-top:13px}
.risk-hd{font:600 12px var(--sans); text-transform:uppercase; letter-spacing:.04em; color:var(--dim); margin-bottom:9px}
.risk-alloc{margin-bottom:12px}
.risk-leg{display:flex; gap:16px; font-size:11.5px; color:var(--dim)}
.risk-leg i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:0}
.risk-leg .sw-inv{background:var(--up)} .risk-leg .sw-cash{background:var(--down)}
.risk-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:9px}
.risk-tile{background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:9px 11px; display:flex; flex-direction:column; gap:2px}
.risk-lb{font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
.risk-tile b{font:500 15px var(--mono)}
.risk-sub{font-size:10.5px; color:var(--faint)}

@media (max-width:960px){ .ov-grid{grid-template-columns:1fr} }

/* ================================================================== ĐIỀU HƯỚNG CẤP 2 (tab con) */
.l2bar{
  display:flex; gap:2px; padding:0 16px; align-items:center;
  background:var(--panel-2); border-bottom:1px solid var(--line);
  position:sticky; top:95px; z-index:28; overflow-x:auto; min-height:38px;
}
.l2bar[hidden]{display:none}
.l2tab{
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--faint); font:500 12.5px var(--sans);
  padding:9px 13px; cursor:pointer; white-space:nowrap;
}
.l2tab:hover{color:var(--text)}
.l2tab.is-active{color:var(--amber); border-bottom-color:var(--amber)}
.l2tab:focus-visible{outline:2px solid var(--amber); outline-offset:-2px}

/* ================================================================== KIỂM ĐỊNH — khối Chế độ & tham số (gộp từ tab Chiến lược cũ) */
.bt-config{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:0 14px; margin-bottom:14px;
}
.bt-config>summary{
  cursor:pointer; list-style:none; padding:11px 2px; font:600 13px var(--sans);
  color:var(--text); display:flex; align-items:center; gap:8px; user-select:none;
}
.bt-config>summary::-webkit-details-marker{display:none}
.bt-config>summary::after{content:"▾"; margin-left:auto; color:var(--dim); transition:transform .15s}
.bt-config[open]>summary::after{transform:rotate(180deg)}
.bt-config>summary:hover{color:var(--amber)}
.bt-config>.mode-block, .bt-config>.grid-2{margin-bottom:14px}
.bt-config>.mode-block{border:0; padding:0; background:none}

/* Cột Sàn niêm yết (read-only) trong danh sách Mã theo dõi */
.sym-table td.san{font-family:var(--mono); font-size:12px; color:var(--dim)}

/* ============================================================ ĐẦU TƯ DÀI HẠN (Long-Term Engine) */
.lt-hd{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin:2px 0 12px}
.lt-hd-sub{display:block; color:var(--dim); font-size:12.5px; line-height:1.5; margin-top:6px; max-width:900px}
.fc-hint{color:var(--dim); font-size:11px; margin-left:6px}
.lt-controls{align-items:flex-end; flex-wrap:wrap}
.lt-controls select, .lt-controls input{background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:7px; padding:6px 8px; font:inherit}
.lt-split{display:flex; gap:14px; align-items:flex-start}
.lt-scan-wrap{flex:1; min-width:0}
#ltTable td.lt-act{font-size:11.5px; max-width:220px; white-space:normal; line-height:1.35}
#ltTable tr.scr-row{cursor:pointer}
#ltTable tr.scr-row.sel{background:rgba(242,192,55,.08); box-shadow:inset 3px 0 0 var(--amber)}
.lt-zone{padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; border:1px solid var(--line)}
.lt-zone.up{color:var(--up); border-color:#1E5A44} .lt-zone.ref{color:var(--ref); border-color:var(--amber-dim)} .lt-zone.down{color:var(--down); border-color:#4A2530}

/* panel chi tiết A + B */
.lt-detail{width:430px; flex:0 0 430px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; max-height:78vh; overflow:auto; position:sticky; top:100px}
.lt-d-load{color:var(--dim); padding:20px; text-align:center}
.lt-d-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.lt-d-sym{font-size:20px; font-weight:700; letter-spacing:.5px}
.lt-d-verdict{margin-left:auto; font-weight:700; font-size:13px; padding:3px 10px; border-radius:8px; background:var(--panel-2)}
.lt-d-close{background:none; border:0; color:var(--dim); font-size:16px; cursor:pointer; padding:2px 6px}
.lt-d-close:hover{color:var(--text)}
.lt-prereq{font-size:12px; padding:7px 10px; border-radius:8px; margin-bottom:10px}
.lt-prereq.ok{background:rgba(22,199,132,.10); color:var(--up); border:1px solid #1E5A44}
.lt-prereq.bad{background:rgba(234,57,67,.10); color:var(--down); border:1px solid #4A2530}
.lt-part{font-size:11px; font-weight:700; letter-spacing:1px; color:var(--amber); margin:14px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--line)}
.lt-vc{font-size:12.5px; line-height:1.55; color:var(--text); background:var(--panel-2); padding:9px 11px; border-radius:8px; border-left:3px solid var(--amber)}
.lt-dims{display:flex; flex-direction:column; gap:9px; margin-top:10px}
.lt-dim-top{display:flex; justify-content:space-between; font-size:12px; margin-bottom:3px}
.lt-bar{height:6px; background:var(--panel-2); border-radius:4px; overflow:hidden}
.lt-bar i{display:block; height:100%; border-radius:4px}
.lt-bar i.up{background:var(--up)} .lt-bar i.ref{background:var(--ref)} .lt-bar i.down{background:var(--down)}
.lt-dim-det{font-size:11px; color:var(--dim); margin-top:3px; line-height:1.4}
.lt-b-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px}
.lt-b-tile{background:var(--panel-2); border-radius:8px; padding:8px 10px}
.lt-b-tile span{display:block; font-size:11px; color:var(--dim)} .lt-b-tile b{font-size:15px}
.lt-zones-line{font-size:12px; color:var(--dim); margin-bottom:10px}
.lt-zones-line b{color:var(--text)}
.lt-thesis{border-radius:9px; padding:9px 11px; margin-bottom:10px; font-size:12px; border:1px solid var(--line)}
.lt-thesis.th-green{background:rgba(22,199,132,.09); border-color:#1E5A44}
.lt-thesis.th-yellow{background:rgba(242,192,55,.09); border-color:var(--amber-dim)}
.lt-thesis.th-red{background:rgba(234,57,67,.10); border-color:#4A2530}
.lt-th-reasons{color:var(--dim); margin:4px 0; line-height:1.5}
.lt-th-act{font-weight:600}
.lt-mini{width:100%; border-collapse:collapse; margin:8px 0; font-size:11.5px}
.lt-mini th{text-align:right; color:var(--dim); font-weight:500; padding:4px 6px; border-bottom:1px solid var(--line)}
.lt-mini th.l, .lt-mini td.l{text-align:left}
.lt-mini td{text-align:right; padding:4px 6px; border-bottom:1px solid var(--line-soft)}
.lt-actnow{font-size:12.5px; font-weight:600; padding:8px 10px; border-radius:8px; background:var(--panel-2); margin:8px 0}
.lt-actnow.up{color:var(--up)} .lt-actnow.ref{color:var(--ref)} .lt-actnow.down{color:var(--down)}
.tr-anchor{display:inline-block; padding:1px 6px; border-radius:8px; font-size:10px; font-weight:700}
.tr-anchor.val{background:var(--panel-2); color:var(--dim)}
.tr-anchor.sup{background:rgba(88,166,255,.14); color:#58A6FF}
.lt-tr-confirm{font-size:11.5px; color:var(--dim); margin:-2px 0 10px; padding:5px 8px; border-radius:7px; background:var(--panel-2); line-height:1.45}
.lt-tr-confirm.warn{background:rgba(242,192,55,.10); color:#F2C037; border:1px solid var(--amber-dim)}
.lt-noentry{font-size:12.5px; color:var(--dim); line-height:1.55; background:var(--panel-2); padding:10px; border-radius:8px}
.lt-d-buttons{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.lt-inbook{color:var(--up); font-size:12px; align-self:center}

/* sổ đã giải ngân */
.ltb-totals{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:12px}
.ltb-tile{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 12px}
.ltb-tile span{display:block; font-size:11px; color:var(--dim)} .ltb-tile b{font-size:16px}
.ltb-alerts{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.ltb-alert{font-size:12.5px; padding:8px 11px; border-radius:8px; border:1px solid var(--line); background:var(--panel)}
.ltb-alert.k-ADD{border-color:#1E5A44; background:rgba(22,199,132,.08)}
.ltb-alert.k-STOP{border-color:#4A2530; background:rgba(234,57,67,.09)}
.ltb-alert.k-WAIT{border-color:var(--amber-dim); background:rgba(242,192,55,.07)}
.ltb-alert.k-TARGET{border-color:var(--amber-dim); background:rgba(242,192,55,.08)}
.ltb-positions{display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:12px}
.ltb-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px}
.ltb-c-head{display:flex; align-items:center; gap:9px; margin-bottom:7px}
.ltb-c-sym{font-size:17px; font-weight:700}
.lt-thbadge{font-size:10px; font-weight:700; padding:2px 8px; border-radius:9px; border:1px solid var(--line)}
.lt-thbadge.th-green{color:var(--up); border-color:#1E5A44} .lt-thbadge.th-yellow{color:var(--ref); border-color:var(--amber-dim)} .lt-thbadge.th-red{color:var(--down); border-color:#4A2530}
.ltb-c-verdict{margin-left:auto; font-size:12px; font-weight:700}
.ltb-vc{font-size:11.5px; line-height:1.5; margin-bottom:8px}
.ltb-c-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:9px}
.ltb-t{background:var(--panel-2); border-radius:7px; padding:6px 9px}
.ltb-t span{display:block; font-size:10.5px; color:var(--dim)} .ltb-t b{font-size:13.5px}
.ltb-plan{font-size:12px; margin-bottom:7px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.lt-trchip{font-size:11px; padding:2px 8px; border-radius:9px; border:1px solid var(--line); color:var(--dim)}
.lt-trchip.done{color:var(--up); border-color:#1E5A44; background:rgba(22,199,132,.08)}
.lt-trchip.next{color:var(--amber); border-color:var(--amber-dim)}
.lt-reco{font-size:11px; margin-left:auto; color:var(--dim)}
.lt-reco.on{color:var(--up); font-weight:600}
.ltb-next{font-size:12px; color:var(--text); background:rgba(22,199,132,.07); border:1px solid #1E5A44; border-radius:8px; padding:7px 10px; margin-bottom:7px}
.ltb-targets{font-size:12px; color:var(--dim); margin-bottom:8px}
.lt-tg b{font-weight:700}
.ltb-deploys{margin:4px 0 8px}
.lt-undo{background:none; border:0; color:var(--faint); cursor:pointer; font-size:12px}
.lt-undo:hover{color:var(--down)}
.ltb-c-buttons{display:flex; gap:7px; flex-wrap:wrap; margin-top:4px}
.btn-ghost{background:transparent; color:var(--dim); border-color:var(--line)}
.btn-ghost:hover{color:var(--down); border-color:var(--down)}
@media(max-width:980px){ .lt-split{flex-direction:column} .lt-detail{width:100%; flex:none; position:static; max-height:none} }

/* ============================================================ KIỂM ĐỊNH MODEL (backtest) */
.lt-bt{margin-top:18px; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden}
.lt-bt>summary{cursor:pointer; padding:12px 16px; font-weight:600; font-size:14px; list-style:none; user-select:none; background:var(--panel-2)}
.lt-bt>summary::-webkit-details-marker{display:none}
.lt-bt>summary:hover{color:var(--amber)}
.lt-bt[open]>summary{border-bottom:1px solid var(--line)}
.lt-bt-note{font-size:12px; color:var(--dim); line-height:1.55; margin:12px 16px}
.lt-bt-note b{color:var(--text)}
.lt-bt-caveat{display:block; margin-top:5px; color:var(--faint); font-style:italic}
.lt-bt-controls{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:0 16px 14px}
.lt-bt-controls .fc-f{flex:1; min-width:180px}
.lt-bt-controls input{background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:7px; padding:6px 9px; font:inherit; width:100%}
#ltbtResult{padding:0 16px 16px}
.ltbt-top{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:12px}
.ltbt-kpi{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:11px 13px}
.ltbt-kpi span{display:block; font-size:11px; color:var(--dim)}
.ltbt-kpi b{font-size:22px; display:block; line-height:1.2}
.ltbt-kpi i{font-size:10.5px; color:var(--faint); font-style:normal}
.ltbt-verdict{font-size:13px; font-weight:600; padding:10px 13px; border-radius:9px; margin-bottom:14px; border:1px solid var(--line)}
.ltbt-verdict.up{color:var(--up); background:rgba(22,199,132,.09); border-color:#1E5A44}
.ltbt-verdict.ref{color:var(--ref); background:rgba(242,192,55,.08); border-color:var(--amber-dim)}
.ltbt-verdict.down{color:var(--down); background:rgba(234,57,67,.09); border-color:#4A2530}
.ltbt-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:14px; margin-bottom:14px}
.ltbt-card{background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:12px 14px}
.ltbt-card h4{margin:0 0 10px; font-size:12.5px; color:var(--amber); font-weight:600}
.ltbt-table{margin:0}
.ltbt-desc{font-size:10.5px; color:var(--faint); font-weight:400; margin-top:1px}
.ltbt-table tr.ltbt-hot td{background:rgba(242,192,55,.06)}
.ltbt-table tr.ltbt-bench td{color:var(--dim)}
.ltbt-bands{display:flex; flex-direction:column; gap:9px}
.ltbt-band{display:flex; align-items:center; gap:9px; font-size:12px}
.ltbt-band-lbl{width:70px; flex:0 0 70px; color:var(--dim)}
.ltbt-band-lbl i{display:block; font-size:10px; color:var(--faint); font-style:normal}
.ltbt-band-track{flex:1; height:14px; background:var(--bg); border-radius:4px; overflow:hidden; display:flex; align-items:center}
.ltbt-band-track i{display:block; height:100%; border-radius:4px}
.ltbt-band-track i.up{background:var(--up)} .ltbt-band-track i.down{background:var(--down)}
.ltbt-band-val{width:64px; flex:0 0 64px; text-align:right; font-weight:600}
@media(max-width:900px){ .ltbt-grid{grid-template-columns:1fr} }

/* ============================================================ DANH MỤC GIẢI NGÂN ĐỀ XUẤT (tối đa 5) */
.lt-portfolio{margin:14px 0; padding:14px 16px; background:linear-gradient(135deg,rgba(242,192,55,.06),rgba(20,29,43,.2));
  border:1px solid var(--amber-dim); border-radius:12px}
.ltpf-hd{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.ltpf-hd h3{margin:0; font-size:15px; font-weight:600}
.ltpf-count{color:var(--amber); font-weight:700; font-size:13px; margin-left:4px}
.ltpf-sub{color:var(--dim); font-size:11.5px}
.ltpf-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.ltpf-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 12px; cursor:pointer; transition:border-color .15s,transform .1s}
.ltpf-card:hover{border-color:var(--amber); transform:translateY(-1px)}
.ltpf-slot{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--amber); margin-bottom:4px}
.ltpf-sym{font-size:18px; font-weight:700; display:flex; align-items:baseline; justify-content:space-between}
.ltpf-sc{font-size:12px; color:var(--dim); font-weight:600}
.ltpf-line{display:flex; align-items:center; gap:6px; font-size:12px; margin-top:5px; color:var(--dim)}
.ltpf-line span:first-child{min-width:74px} .ltpf-line b{color:var(--text)}
.ltpf-line .lt-zone{margin-left:auto}
.ltpf-watch{margin-top:10px; font-size:12px; color:var(--dim); padding:7px 10px; background:var(--panel-2); border-radius:8px; border-left:3px solid var(--amber-dim)}
.ltpf-watch b{color:var(--text)}
#ltTable tr.in-pf .sym{color:var(--amber)}
.pf-dot{color:var(--amber); font-size:9px; vertical-align:middle}
.ltpf-card.relaxed{border-style:dashed}
.ltpf-tag{font-size:9px; font-weight:600; color:var(--dim); text-transform:none; letter-spacing:0}

/* ĐỊNH GIÁ CHUYÊN NGHIỆP (Bear/Base/Bull) trong panel dài hạn */
.lt-sectype{font-size:10px; font-weight:600; color:var(--dim); background:var(--panel-2); padding:1px 7px; border-radius:9px; margin-left:6px; text-transform:none; letter-spacing:0}
.lt-scen{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:6px; margin-bottom:9px}
.lt-scen-cell{text-align:center; padding:8px 6px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line)}
.lt-scen-cell span{display:block; font-size:10px; color:var(--dim)}
.lt-scen-cell b{font-size:16px}
.lt-scen-cell.bear{border-color:#4A2530} .lt-scen-cell.bear b{color:var(--down)}
.lt-scen-cell.base{border-color:var(--amber-dim); background:rgba(242,192,55,.06)} .lt-scen-cell.base b{color:var(--amber)}
.lt-scen-cell.bull{border-color:#1E5A44} .lt-scen-cell.bull b{color:var(--up)}
.lt-vmethods{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.lt-vm{font-size:11px; color:var(--dim); background:var(--panel-2); padding:3px 8px; border-radius:8px}
.lt-vm b{color:var(--text)}
.lt-ass{font-size:11px; color:var(--faint); line-height:1.5; margin-top:6px}

/* Tab Định giá: block chuyên nghiệp + thu gọn phương pháp cũ */
.vd-pro{margin:10px 0}
.vd-pro .lt-part:first-child{margin-top:4px}
.vd-methods-more{margin:8px 0; border:1px solid var(--line); border-radius:8px; background:var(--panel)}
.vd-methods-more>summary{cursor:pointer; padding:8px 12px; font-size:12px; color:var(--dim); list-style:none}
.vd-methods-more>summary::-webkit-details-marker{display:none}
.vd-methods-more>summary:hover{color:var(--amber)}
.vd-methods-more[open]>summary{border-bottom:1px solid var(--line); margin-bottom:8px}
.vd-methods-more>div,.vd-methods-more>p{padding:0 12px}
.ltpf-wait{margin-top:6px; font-size:11px; color:var(--down); background:rgba(234,57,67,.08); border-radius:6px; padding:4px 7px}
.lt-reco.wait{color:var(--down); font-weight:600}

/* NHẬN ĐỊNH KỸ THUẬT ĐA KHUNG (dùng chung Dài hạn + Ngắn hạn) */
.ta-box{margin:6px 0}
.ta-empty{font-size:12px; color:var(--dim); padding:8px; text-align:center}
.ta-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.ta-sig{font-weight:700; font-size:12px; padding:2px 10px; border-radius:9px; border:1px solid var(--line)}
.ta-sig.up{color:var(--up); border-color:#1E5A44; background:rgba(22,199,132,.08)}
.ta-sig.down{color:var(--down); border-color:#4A2530; background:rgba(234,57,67,.08)}
.ta-sig.ref{color:var(--ref); border-color:var(--amber-dim); background:rgba(242,192,55,.07)}
.ta-dom{font-size:12px; background:var(--panel-2); border-left:3px solid var(--amber); border-radius:6px; padding:6px 9px; margin-bottom:6px}
.ta-table{margin:4px 0}
.ta-table td.up,.ta-table td .up{color:var(--up)} .ta-table td.down{color:var(--down)} .ta-table td.ref{color:var(--ref)}
.ta-note{font-size:12px; line-height:1.55; color:var(--text); background:var(--panel-2); padding:9px 11px; border-radius:8px; border-left:3px solid var(--amber); margin-top:6px}
.chart-ta-wrap{border:1px solid var(--line); border-radius:8px; margin-bottom:10px; background:var(--panel-2)}
.chart-ta-wrap>summary{cursor:pointer; padding:7px 11px; font-size:12.5px; font-weight:600; list-style:none}
.chart-ta-wrap>summary::-webkit-details-marker{display:none}
.chart-ta-wrap>summary:hover{color:var(--amber)}
.chart-ta-wrap[open]>summary{border-bottom:1px solid var(--line)}
.chart-ta-wrap .ta-box{padding:0 11px 10px}

/* ---- CHART ENGINE v4.0 ---- */
.ta-v4head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.ta-act{font-weight:800; font-size:13px; letter-spacing:.4px; padding:4px 13px; border-radius:9px; border:1px solid var(--line)}
.ta-act.up{color:#fff; background:var(--up); border-color:var(--up)}
.ta-act.down{color:#fff; background:var(--down); border-color:var(--down)}
.ta-act.ref{color:var(--ref); background:rgba(242,192,55,.10); border-color:var(--amber-dim)}
.ta-hard{font-size:11px; font-weight:600; padding:3px 9px; border-radius:8px; border:1px solid var(--line)}
.ta-hard.up{color:var(--up); border-color:#1E5A44} .ta-hard.down{color:var(--down); border-color:#4A2530}
.ta-hard.ref{color:var(--ref); border-color:var(--amber-dim)}
.ta-scores{font-size:11.5px; color:var(--dim); margin-left:auto} .ta-scores b{color:var(--text)}
.ta-signal{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:7px}
.ta-srow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.ta-srow>div{display:flex; flex-direction:column; gap:2px} .ta-srow span{font-size:10.5px; color:var(--dim)}
.ta-srow b{font-size:13px} .ta-srow b.up{color:var(--up)} .ta-srow b.down{color:var(--down)} .ta-srow b.ref{color:var(--ref)}
.ta-targets{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.ta-t{flex:1; min-width:88px; background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:5px 8px; display:flex; flex-direction:column}
.ta-t span{font-size:10px; color:var(--amber); font-weight:700} .ta-t b{font-size:14px; color:var(--up)}
.ta-t i{font-size:10.5px; color:var(--up); font-style:normal} .ta-t em{font-size:9.5px; color:var(--dim); font-style:normal}
.ta-ctx{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:7px}
.ta-ctx>div{background:var(--panel-2); border:1px solid var(--line); border-radius:7px; padding:5px 9px; display:flex; flex-direction:column; gap:2px}
.ta-ctx span{font-size:10.5px; color:var(--dim)} .ta-ctx b{font-size:12.5px}
.ta-reg{font-size:10px; font-style:normal; padding:1px 6px; border-radius:6px; align-self:flex-start; border:1px solid var(--line)}
.ta-reg.up{color:var(--up)} .ta-reg.down{color:var(--down)} .ta-reg.ref{color:var(--ref)}
.ta-rswrap{gap:4px !important} .ta-rswrap span{margin-bottom:2px}
.ta-rs{display:inline-block; font-size:10px; padding:1px 6px; border-radius:6px; border:1px solid var(--line); margin-right:3px}
.ta-rs.up{color:var(--up); border-color:#1E5A44} .ta-rs.down{color:var(--down); border-color:#4A2530} .ta-rs.ref{color:var(--ref); border-color:var(--amber-dim)}
.ta-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:7px; margin-bottom:7px}
.ta-grid>div{background:var(--panel-2); border:1px solid var(--line); border-radius:7px; padding:5px 9px; display:flex; flex-direction:column; gap:1px}
.ta-grid span{font-size:10.5px; color:var(--dim)} .ta-grid b{font-size:12px}
.ta-grid b.up{color:var(--up)} .ta-grid b.down{color:var(--down)} .ta-grid b.ref{color:var(--ref)}
.ta-more{margin:4px 0} .ta-more>summary{cursor:pointer; font-size:11.5px; color:var(--dim); padding:4px 0}
.ta-more>summary:hover{color:var(--amber)}
.ta-bars{display:flex; flex-direction:column; gap:4px; margin:6px 0}
.ta-bar{display:flex; align-items:center; gap:8px; font-size:11px}
.ta-bl{width:120px; color:var(--dim); flex-shrink:0}
.ta-bt{flex:1; height:8px; background:var(--panel); border-radius:5px; overflow:hidden}
.ta-bt>i{display:block; height:100%; border-radius:5px}
.ta-bt>i.up{background:var(--up)} .ta-bt>i.down{background:var(--down)} .ta-bt>i.ref{background:var(--amber)}
.ta-bar>b{width:26px; text-align:right; color:var(--text)}

/* ------ Nhãn rổ VN30 (dùng chung mọi bảng cổ phiếu) ------ */
.vn30-col{ text-align:center; white-space:nowrap }
.vn30-tag{
  display:inline-block; padding:1px 5px; border-radius:var(--r);
  font:600 10px/1.4 var(--mono); letter-spacing:.3px;
  color:var(--amber); background:rgba(242,192,55,.14);
  border:1px solid var(--amber-dim);
}
.vn30-no{ color:var(--faint) }
/* Chip có dấu VN30 (view Theo ngành, rổ Dự phóng) */
.chip.is-vn30, .fc-chip.is-vn30{
  border-color:var(--amber-dim);
  box-shadow:inset 0 0 0 1px rgba(242,192,55,.25);
}
.chip.is-vn30::before, .fc-chip.is-vn30::before{
  content:"★"; color:var(--amber); margin-right:3px; font-size:10px;
}

/* Dấu 🎯 shortlist (top mã chất lượng) trên bảng giá */
.sl-dot{ margin-right:2px; font-size:11px; filter:saturate(1.1) }
.bt-sl{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-size:13px; color:var(--dim) }
.bt-sl input[type=number]{ background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:var(--r); padding:2px 4px }

/* ============================================ ĐĂNG NHẬP + TÀI KHOẢN + NGƯỜI DÙNG */
.login-gate{
  position:fixed; inset:0; z-index:2000;
  background:radial-gradient(1200px 600px at 50% -10%, #16223a 0%, var(--bg) 60%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
/* Cho thuoc tinh [hidden] thang rule display o tren (class selector von de len UA [hidden]) */
.login-gate[hidden]{display:none}
.usermenu[hidden]{display:none}
.login-box{
  width:min(360px,92vw); background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:26px 24px 24px; box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:12px;
}
.login-brand{display:flex; align-items:center; gap:9px; font:600 15px var(--sans); color:var(--text)}
.login-brand .mark{width:16px; height:16px; border-radius:4px;
  background:linear-gradient(135deg,var(--up) 0 50%,var(--down) 50% 100%)}
.login-box h2{font-size:19px; margin:2px 0 6px}
.login-box label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--dim)}
.login-box input{
  font:500 14px var(--sans); color:var(--text); background:var(--panel-2);
  border:1px solid var(--line); border-radius:7px; padding:9px 11px;
}
.login-box input:focus{outline:none; border-color:var(--amber)}
.login-box .btn-primary{margin-top:4px; padding:10px; font-size:14px; justify-content:center}
.login-err{color:var(--down); font-size:13px; background:#2A1620; border:1px solid #4A2530;
  border-radius:7px; padding:8px 10px}

/* Cụm user trên thanh tiêu đề */
.usermenu{display:flex; align-items:center; gap:8px; margin-left:8px; padding-left:12px;
  border-left:1px solid var(--line)}
.um-name{font:600 13px var(--sans); color:var(--text)}
.um-role{font-size:11px; color:var(--faint); background:var(--panel-2);
  border:1px solid var(--line); border-radius:20px; padding:2px 8px}

/* Panel Tài khoản */
.acct-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; max-width:820px}
.card>h3{display:flex; align-items:center; gap:8px; font-size:15px; margin-bottom:12px}
.card>h3::before{content:""; width:3px; height:15px; border-radius:2px; background:var(--amber)}

/* Panel Người dùng */
.user-form{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.user-form input,.user-form select{
  font:500 13px var(--sans); color:var(--text); background:var(--panel-2);
  border:1px solid var(--line); border-radius:7px; padding:8px 10px;
}
.user-form input{width:150px}
.user-form input:focus,.user-form select:focus{outline:none; border-color:var(--amber)}
.user-actions{display:flex; gap:6px; flex-wrap:wrap}
.user-actions .btn{padding:4px 9px; font-size:12px}
.user-actions .danger{color:var(--down); border-color:#4A2530}
.user-actions .danger:hover{background:#2A1620; border-color:var(--down)}

/* ================================================= GIAO DỊCH THẬT (live) */
.lv-warn{background:#2A1A10; border:1px solid #6B4A1F; color:#F2C48A; border-radius:var(--r);
  padding:12px 14px; margin-bottom:14px; font-size:13px; line-height:1.5}
.lv-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.lv-between{justify-content:space-between}
.lv-actions{margin-top:12px}
.lv-session{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:12px}
.lv-stat{background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--r); padding:8px 10px}
.lv-stat span{display:block; font-size:11px; color:var(--dim); margin-bottom:3px}
.lv-stat b{font-size:15px}
.lv-in{background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px;
  padding:7px 9px; font-family:var(--sans); font-size:13px}
.lv-in:focus{outline:none; border-color:var(--amber)}
.lv-msg{margin-top:10px; font-size:13px; padding:8px 10px; border-radius:8px}
.lv-msg.ok{background:#122A18; border:1px solid #2C5A38; color:var(--up)}
.lv-msg.bad{background:#2A1218; border:1px solid #5A2C38; color:var(--down)}
.lv-order,.lv-cfg{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px}
.lv-order select,.lv-order .lv-in{min-width:110px}
.lv-cfg{flex-direction:column; align-items:stretch; max-width:560px}
.lv-cfg label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim)}
.lv-cfg input,.lv-cfg select{background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:7px 9px; font-size:13px}
.lv-cfg input:focus,.lv-cfg select:focus{outline:none; border-color:var(--amber)}
.lv-cell-act{display:flex; gap:6px; flex-wrap:wrap}
.lv-cell-act .btn{padding:4px 9px; font-size:12px}
.lv-switch{display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer}
.lv-switch input{width:16px; height:16px; accent-color:var(--amber)}
.btn-danger{color:var(--down); border-color:#5A2C38}
.btn-danger:hover{background:#2A1620; border-color:var(--down)}

/* ======================================================= QUA CÁC ĐÁY (P/B) */
#tab-bottoms{max-width:1240px}
.bb-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 14px}
.bb-presets{display:flex; gap:6px; flex-wrap:wrap}
.bb-chip{background:var(--panel-2); border:1px solid var(--line); color:var(--dim);
  padding:5px 12px; border-radius:16px; font-size:12px; cursor:pointer; transition:.15s}
.bb-chip:hover{border-color:var(--amber); color:var(--text)}
.bb-chip.on{background:rgba(242,192,55,.14); border-color:var(--amber-dim); color:var(--amber)}
.bb-input{background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:6px 10px; border-radius:8px; font-size:13px; min-width:220px}
.bb-input:focus{outline:none; border-color:var(--amber)}

.bb-legend{grid-column:1/-1; display:flex; gap:16px; flex-wrap:wrap; margin-bottom:2px; font-size:12px; color:var(--dim)}
.bb-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px}

.bb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:12px}
.bb-card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 12px 8px; cursor:pointer; transition:.15s; display:flex; flex-direction:column}
.bb-card:hover{border-color:var(--amber-dim); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.25)}
.bb-card.err{cursor:default; opacity:.7}
.bb-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px}
.bb-head>b{font-size:18px; letter-spacing:.3px}
.bb-cur{font-size:11px; color:var(--dim)}
.bb-cur b{color:var(--text); font-size:13px}
.bb-svg{width:100%; height:auto; display:block}
.bb-val{fill:var(--text); font:700 11px var(--mono,monospace)}
.bb-val.low{fill:var(--amber)}
.bb-lbl{fill:var(--faint); font:400 9.5px var(--mono,monospace)}
.bb-na{fill:var(--faint); font:400 13px var(--mono,monospace)}
.bb-base{stroke:var(--line); stroke-width:1}
.bb-foot{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:10.5px; color:var(--dim); margin-top:2px; min-height:16px}
.bb-vs{padding:1px 7px; border-radius:10px; font-weight:600}
.bb-vs.lo{background:rgba(22,199,132,.14); color:var(--up)}
.bb-vs.mid{background:rgba(242,192,55,.14); color:var(--amber)}
.bb-vs.hi{background:rgba(234,57,67,.14); color:var(--down)}
.bb-low{color:var(--faint)}
.bb-more{text-align:center; font-size:10px; color:var(--faint); margin-top:6px; padding-top:5px; border-top:1px solid var(--line-soft)}

.bb-ctitle{margin:20px 0 8px; font-size:15px}
.bb-ctable td.bb-td-low{color:var(--amber); font-weight:700; background:rgba(242,192,55,.07)}
.bb-ctable .bb-row{cursor:pointer}
.bb-ctable .bb-row:hover td{background:rgba(255,255,255,.03)}

.bb-detail{margin-top:18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px}
.bb-dhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.bb-dsym{font-size:22px; font-weight:700; letter-spacing:.5px}
.bb-close{padding:4px 12px; font-size:12px}
.bb-dverdict{padding:9px 13px; border-radius:9px; font-size:13px; margin-bottom:12px; background:var(--panel-2); border-left:3px solid var(--ref)}
.bb-dverdict.up{border-left-color:var(--up)} .bb-dverdict.down{border-left-color:var(--down)}
.bb-line{width:100%; height:auto; display:block; background:var(--panel-2); border-radius:8px; margin-bottom:4px}
.bb-close{} /* path */
.bb-line .bb-close{fill:none; stroke:var(--text); stroke-width:1.6}
.bb-ma50{fill:none; stroke:#4c8bf5; stroke-width:1; opacity:.55}
.bb-ma200{fill:none; stroke:#A66BF0; stroke-width:1; opacity:.45}
.bb-break{stroke:var(--down); stroke-width:1.2; stroke-dasharray:4 3; opacity:.8}
.bb-dot-lbl{font:700 10px var(--mono,monospace)}
.bb-txts{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px; margin-top:12px}
.bb-txt{background:var(--panel-2); border-left:3px solid var(--line); border-radius:0 8px 8px 0; padding:9px 12px}
.bb-txt-h{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.bb-txt-h>b{font-size:13px}
.bb-pb{font-weight:700; font-size:12px}
.bb-txt p{margin:0; font-size:12.5px; line-height:1.6; color:var(--text)}

/* đảo chiều tăng trên tab Qua các đáy */
.bb-rev{margin-top:6px; padding-top:6px; border-top:1px dashed var(--line-soft); font-size:12px; color:var(--up)}
.bb-rev.muted{color:var(--faint)}
.bb-rev b{color:var(--up)}
.bb-rev-sig{display:block; color:var(--dim); font-size:11.5px; margin-top:2px}
.bb-rev-arrow{stroke:#16C784; stroke-width:1.2; stroke-dasharray:3 3; opacity:.65}
.bb-rev-mk{fill:#16C784; stroke:#0D1420; stroke-width:1}
.bb-rev-lbl{fill:#16C784; font:700 10px var(--mono,monospace)}

/* điểm vào lệnh (tab Qua các đáy) */
.bb-act{display:inline-block; padding:2px 9px; border-radius:11px; font-size:11px; font-weight:700; white-space:nowrap}
.bb-act.go{background:rgba(22,199,132,.16); color:var(--up)}
.bb-act.wait{background:rgba(242,192,55,.15); color:var(--amber)}
.bb-act.red{background:rgba(234,57,67,.15); color:var(--down)}
.bb-act.na{background:var(--panel-2); color:var(--faint)}
.bb-act.lg{font-size:14px; padding:4px 13px}
.bb-actline{margin-top:6px; text-align:center}
.bb-vz{display:inline-block; padding:2px 9px; border-radius:11px; font-size:11px; font-weight:600; background:var(--panel-2); color:var(--dim)}
.bb-vz.deep,.bb-vz.cheap{background:rgba(22,199,132,.14); color:var(--up)}
.bb-vz.rich{background:rgba(234,57,67,.14); color:var(--down)}

.bb-entry{margin:6px 0 14px; padding:13px 15px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); border-left:4px solid var(--amber)}
.bb-entry.go{border-left-color:var(--up)} .bb-entry.red{border-left-color:var(--down)} .bb-entry.wait{border-left-color:var(--amber)}
.bb-entry-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px}
.bb-entry-sig{font-size:11.5px; color:var(--dim); margin-left:auto}
.bb-entry-note{margin:0 0 10px; font-size:12.5px; line-height:1.6; color:var(--text)}
.bb-entry-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; margin-bottom:10px}
.bb-entry-grid>div{background:var(--panel); border-radius:7px; padding:6px 9px; text-align:center}
.bb-entry-grid span{display:block; font-size:10px; color:var(--faint); margin-bottom:2px}
.bb-entry-grid b{font-size:13px; font-family:var(--mono,monospace)}
.bb-checks-h{font-size:11.5px; color:var(--dim); margin-bottom:5px}
.bb-checks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:3px 14px}
.bb-checks li{font-size:12px; padding:1px 0}
.bb-checks li.ok{color:var(--up)} .bb-checks li.no{color:var(--faint)}

.bb-revcost{margin-top:9px; padding:8px 11px; border-radius:7px; background:rgba(242,192,55,.08);
  border:1px dashed var(--amber-dim); font-size:12px; line-height:1.55; color:var(--text)}
.bb-revcost b{color:var(--amber)}

/* thang giá vào theo định giá (neo P/B thấp nhất) */
.bb-lad-line{stroke-width:1.1; stroke-dasharray:5 4; opacity:.85}
.bb-lad-lbl{font:700 9.5px var(--mono,monospace); paint-order:stroke; stroke:#0D1420; stroke-width:2.4px}
.bb-ladder-wrap{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line-soft)}
.bb-ladder-h{font-size:12px; line-height:1.55; color:var(--dim); margin-bottom:7px}
.bb-ladder-h b{color:var(--text)}
.bb-ladder{width:100%; border-collapse:collapse; font-size:12.5px}
.bb-ladder th{text-align:left; color:var(--faint); font-weight:500; font-size:11px; padding:2px 8px; border-bottom:1px solid var(--line)}
.bb-ladder td{padding:4px 8px; border-bottom:1px solid var(--line-soft)}
.bb-ladder td.num{text-align:right; font-family:var(--mono,monospace)}
.bb-ladder .lad-go td:first-child{border-left:3px solid var(--up); padding-left:6px}
.bb-ladder .lad-mid td:first-child{border-left:3px solid var(--amber); padding-left:6px}
.bb-ladder .lad-warn td:first-child{border-left:3px solid #E8622A; padding-left:6px}
.bb-ladder .lad-deep td:first-child{border-left:3px solid var(--faint); padding-left:6px; color:var(--dim)}
.bb-ladder tr.hit{background:rgba(22,199,132,.08)}
.lad-hit{color:var(--up); font-size:10px; font-weight:700; margin-left:4px}

.bb-ladder-warn{background:rgba(234,57,67,.07); border:1px dashed var(--down); border-radius:7px; padding:9px 11px; margin-top:10px}
.bb-ladder-warn .bb-ladder-h{margin-bottom:5px}
.bb-ladder-ref{font-size:11.5px; color:var(--dim); line-height:1.55}

/* ======================================================= SO SÁNH NGÀNH */
#tab-compare{max-width:1240px}
.cmp-rank-hd{font-size:15px; font-weight:600; margin:6px 0 10px}
.cmp-rank{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-bottom:16px}
.cmp-rank-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 12px; cursor:pointer; transition:.15s}
.cmp-rank-card:hover{border-color:var(--amber-dim); transform:translateY(-2px)}
.cmp-rank-top{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.cmp-rank-top b{font-size:17px}
.cmp-medal{font-size:16px}
.cmp-comp{margin-left:auto; font-weight:700; font-size:15px; padding:1px 9px; border-radius:10px; background:var(--panel-2)}
.cmp-comp.go{color:var(--up)} .cmp-comp.mid{color:var(--amber)} .cmp-comp.low{color:var(--down)}
.cmp-rank-pro,.cmp-rank-con{display:flex; flex-wrap:wrap; gap:4px; margin-top:3px}
.cmp-pro{font-size:10.5px; color:var(--up); background:rgba(22,199,132,.1); padding:1px 6px; border-radius:8px}
.cmp-con{font-size:10.5px; color:var(--down); background:rgba(234,57,67,.1); padding:1px 6px; border-radius:8px}

.cmp-table td, .cmp-table th{text-align:center; padding:5px 8px}
.cmp-table td.l, .cmp-table th.l{text-align:left}
.cmp-table th.cmp-row-click{cursor:pointer; color:var(--text)}
.cmp-table th.cmp-row-click:hover{color:var(--amber)}
.cmp-rk{font-size:10px; color:var(--faint)}
.cmp-comp-row td{background:rgba(242,192,55,.05)}
.cmp-comp-row b{font-size:15px}
.cmp-sep td{background:var(--panel-2); color:var(--dim); font-size:11px; text-align:left; font-weight:600}
.cmp-bar{display:inline-flex; align-items:center; gap:6px; width:100%; max-width:110px}
.cmp-bar i{display:inline-block; height:7px; border-radius:4px; background:var(--up)}
.cmp-bar i.mid{background:var(--amber)} .cmp-bar i.low{background:var(--down)}
.cmp-bar b{font-size:11px; font-family:var(--mono,monospace); min-width:20px; text-align:right}
.cmp-na{color:var(--faint)}
.go{color:var(--up)} .mid{color:var(--amber)} .low{color:var(--down)}

.cmp-vd{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:10px 0 14px}
.cmp-vd-col h4{margin:0 0 5px; font-size:13px}
.cmp-vd-col ul{margin:0; padding-left:2px; list-style:none}
.cmp-vd-col li{font-size:12.5px; padding:2px 0; line-height:1.5}
.cmp-note{background:var(--panel-2); border-radius:9px; padding:12px 14px; border-left:3px solid var(--amber)}
.cmp-note.empty-note{color:var(--dim); border-left-color:var(--faint); font-size:13px}
.cmp-note-h{font-weight:600; margin-bottom:6px; font-size:13px}
.cmp-note p{margin:0 0 7px; font-size:12.5px; line-height:1.6}
.cmp-note b{color:var(--text)}