/* ==========================================================================
   STOCK RADAR V2 - lớp trình bày mới (handoff 07/08).
   KHÔNG dùng chung một dòng CSS nào với V1: V1 vẫn chạy nguyên ở "/".
   Token màu/typography/bo góc/spacing lấy đúng bảng trong README handoff.
   ========================================================================== */
:root{
  --bg:#0a0e14; --bg2:#0b0f16; --card:#10161f; --sunk:#0d131b; --radar-bg:#0a0f16;
  --line:#1b2432; --line2:#161e29; --line3:#22303f; --line-acc:#1e4a4a;
  --acc:#22d3c5; --acc2:#5ac9bf; --acc3:#b9f4ee;
  --acc-bg:rgba(34,211,197,.12);
  --up:#22c55e; --down:#ef4444; --down2:#f87171; --down-line:#5c2626;
  --warn:#f59e0b; --warn-line:#4a3a1c; --warn-tx:#e6c79a;
  --rsi:#8b5cf6; --info:#38bdf8;
  --tx:#e8edf4; --tx2:#b9c4d1; --tx3:#8b98a8; --tx4:#7b8896; --tx5:#66707e; --tx6:#5a6470;
  /* Barlow Condensed tự host (static/v2/fonts.css, 3 weight x 3 subset).
     JetBrains Mono (đã self-host sẵn) đứng thay IBM Plex Mono, cùng vai trò. */
  --disp:'Barlow Condensed','Arial Narrow',sans-serif-condensed,sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(120% 80% at 50% 0,#101d2a 0,var(--bg) 55%) fixed,var(--bg);
  color:var(--tx);font:400 13px/1.5 var(--mono);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.hidden{display:none !important}
.app{max-width:460px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg2);position:relative}
@media(min-width:520px){.app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* ---------------- HEADER ---------------- */
.hdr{position:sticky;top:0;z-index:3;background:var(--bg2);
  padding:0 18px;border-bottom:1px solid var(--line2)}
.statusbar{display:flex;justify-content:space-between;font:500 11px var(--mono);
  color:#8b978f;padding:8px 0 4px}
.userbar{display:flex;align-items:center;gap:10px;padding:6px 0 10px}
.ub-avatar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-acc);background:var(--acc-bg);color:var(--acc);
  font:600 13px var(--disp);letter-spacing:.06em}
.ub-id{flex:1;min-width:0}
.ub-name{font:600 13px var(--disp);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-plan{font:400 9px var(--mono);color:var(--tx4);letter-spacing:.04em;margin-top:1px}
.ub-btn{flex:none;position:relative;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:9px;color:var(--tx3)}
.ub-btn svg{width:17px;height:17px}
.ub-btn.on{color:var(--acc);border-color:var(--line-acc);background:var(--acc-bg)}
.ub-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.scrbar{display:flex;align-items:center;gap:8px;padding:6px 0 12px}
.scr-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;
  animation:blip 1.6s ease-in-out infinite}
.scr-name{flex:1;font:600 15px var(--disp);letter-spacing:.16em;text-transform:uppercase}
.scr-badge{flex:none;border:1px solid var(--line-acc);border-radius:6px;padding:3px 8px;
  color:var(--acc);font:500 10px var(--mono);white-space:nowrap}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.scr-dot{animation:none}}

/* ---------------- LAYOUT CHUNG ---------------- */
.content{flex:1;padding:16px 18px 124px}
.screen{animation:rise .24s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.screen,.ov{animation:none !important}}
.blk{margin-bottom:20px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.sec-t{font:600 13px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.sec-link{font:400 10px var(--mono);color:var(--acc);letter-spacing:.04em}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.card-sm{background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.muted{color:var(--tx4)}
.up{color:var(--acc)}
.dn{color:var(--down2)}
.wn{color:var(--warn)}
.mono{font-family:var(--mono)}
.risk{border:1px solid #2b2024;background:rgba(239,68,68,.06);border-radius:12px;
  padding:11px 13px;color:#d59a92;font:400 10px/1.65 var(--mono)}
.empty{color:var(--tx4);font:400 11px/1.7 var(--mono);text-align:center;padding:22px 8px}
.btn{display:block;width:100%;text-align:center;border-radius:12px;padding:13px;
  font:600 13px var(--disp);letter-spacing:.12em;text-transform:uppercase;transition:background .18s,color .18s}
.btn-acc{background:var(--acc);color:#04201d}
.btn-ghost{border:1px solid var(--line3);color:var(--tx2)}
.btn-warn{border:1px solid var(--warn-line);color:var(--warn)}
.btn-dn{border:1px solid var(--down-line);color:var(--down2)}
.btn:disabled{opacity:.45}
.chip{display:inline-block;border:1px solid var(--line3);border-radius:7px;padding:5px 10px;
  font:500 10px var(--mono);color:var(--tx3);white-space:nowrap}
.chip.on{border-color:var(--line-acc);background:var(--acc-bg);color:var(--acc)}

/* ---------------- BOTTOM NAV ---------------- */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:100%;max-width:460px;
  z-index:5;display:flex;gap:2px;margin:0;padding:8px 6px;
  border:1px solid var(--line3);border-radius:30px;background:var(--sunk)}
@media(min-width:520px){.nav{width:calc(460px - 24px)}}
@media(max-width:519px){.nav{left:12px;right:12px;transform:none;width:auto}}
.nv{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px;border-radius:16px;color:var(--tx4);
  font:400 9px var(--mono);letter-spacing:.02em;transition:background .18s,color .18s}
.nv svg{width:22px;height:22px}
.nv span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nv.on{background:var(--acc-bg);border:1px solid var(--line-acc);color:var(--acc);padding:6px 1px}

/* ================= 1. TỔNG QUAN ================= */
.hero-date{font:500 10px var(--mono);letter-spacing:.16em;color:var(--tx4);text-transform:uppercase}
.hero-h{font:700 40px/0.98 var(--disp);letter-spacing:.02em;color:var(--acc);
  text-transform:uppercase;margin:10px 0 12px}
.hero-p{font:400 11px/1.7 var(--mono);color:var(--tx2);margin:0 0 14px}
.health-row{display:flex;justify-content:space-between;font:500 9.5px var(--mono);
  letter-spacing:.14em;color:var(--tx4);text-transform:uppercase;margin-bottom:6px}
.health-bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:16px}
.health-bar i{display:block;height:100%;background:linear-gradient(90deg,#0e7c74,var(--acc))}
.kpi3{display:flex;border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:14px 0;margin-bottom:20px}
.kpi{flex:1;text-align:center;padding:0 6px}
.kpi+.kpi{border-left:1px solid var(--line)}
.kpi b{display:block;font:600 24px var(--disp);line-height:1.1}
.kpi small{display:block;font:400 9.5px var(--mono);color:var(--tx4);margin-top:4px;letter-spacing:.06em}
#radar-wrap{position:relative}
#radar-cv{display:block;width:100%;height:300px;background:var(--radar-bg);
  border:1px solid var(--line);border-radius:14px}
.radar-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;
  font:400 9.5px var(--mono);color:var(--tx4)}
.radar-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.radar-note{margin:8px 0 0;font:400 9.5px/1.6 var(--mono);color:var(--tx5)}
.top-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.top-r1{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.top-sym{font:600 32px var(--disp);letter-spacing:.04em;line-height:1}
.top-co{font:400 10px var(--mono);color:var(--tx4);margin-top:4px}
.top-score{text-align:right;flex:none}
.top-score b{display:block;font:600 32px var(--disp);color:var(--acc);line-height:1}
.top-score small{font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--tx4)}
.top-why{margin:12px 0 0;font:400 10.5px/1.6 var(--mono);color:var(--tx2)}
.plan-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pc{border-radius:7px;padding:5px 9px;font:500 9.5px var(--mono);white-space:nowrap}
.pc-g{border:1px solid var(--line3);color:var(--tx3)}
.pc-t{border:1px solid var(--line-acc);color:var(--acc);background:var(--acc-bg)}
.pc-s{border:1px solid var(--down-line);color:var(--down2);background:rgba(239,68,68,.06)}
.rank-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line2);cursor:pointer}
.rank-sym{flex:none;width:46px;font:600 17px var(--disp);letter-spacing:.04em}
.rank-desc{flex:1;min-width:0;font:400 9.5px/1.5 var(--mono);color:var(--tx4)}
.rank-score{flex:none;font:600 18px var(--disp);color:var(--acc)}
.pulse-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line2)}
.pulse-row:first-child{border-top:0}
.pulse-t{flex:none;width:42px;font:600 12px var(--disp);color:var(--tx3)}
.pulse-d{flex:none;width:7px;height:7px;border-radius:50%;margin-top:5px}
.pulse-x{flex:1;min-width:0;font:400 9.5px/1.55 var(--mono);color:var(--tx3)}
.pulse-v{flex:none;font:500 10px var(--mono)}
.mkt-idx{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.mkt-idx b{font:600 22px var(--disp)}
.breadth{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line)}
.breadth i{display:block;height:100%}
.breadth-lb{display:flex;justify-content:space-between;margin-top:7px;
  font:400 9px var(--mono);color:var(--tx4)}

/* ================= 2. CƠ HỘI ================= */
.deck-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.deck-count{font:600 12px var(--disp);letter-spacing:.14em;color:var(--tx3);text-transform:uppercase}
.deck-dots{display:flex;gap:5px}
.deck-dots i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:width .2s}
.deck-dots i.on{width:18px;background:var(--acc)}
/* CHIỀU CAO THEO NỘI DUNG, không ép cứng: ép 502px thì thẻ nào có checklist
   dài (6 dòng + tên công ty xuống 2 dòng) sẽ đẩy hàng nút TRÀN RA NGOÀI thẻ,
   viền dưới cắt ngang qua nút (John báo 07/08). Thẻ TRƯỚC nằm trong luồng nên
   nó quyết định chiều cao deck; thẻ SAU tuyệt đối, phủ đúng bằng deck. */
.deck{position:relative;touch-action:pan-y}
.opp{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:13px 14px;display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s}
/* Thẻ SAU chỉ để lộ mép card (hiệu ứng chồng bài). PHẢI giấu nội dung của nó:
   nó lệch xuống 14px nên chữ/nút của nó thò ra dưới thẻ trước, đọc thành bóng
   đôi ngay trên hàng nút (John báo 07/08). */
.opp.behind{position:absolute;inset:0;transform:scale(.96) translateY(14px);
  opacity:.5;pointer-events:none}
.opp.behind>*{visibility:hidden}
.opp.dragging{transition:none}
.opp-flag{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.flag{border-radius:6px;padding:4px 9px;font:500 9.5px var(--mono);letter-spacing:.1em}
.flag-hot{background:rgba(239,68,68,.14);color:var(--down2)}
.flag-w{background:rgba(34,211,197,.07);color:var(--acc)}
.opp-time{font:400 9px var(--mono);color:var(--tx5)}
.opp-id{display:flex;align-items:flex-start;gap:12px}
.opp-idl{flex:1;min-width:0}
.opp-sym{font:600 34px var(--disp);letter-spacing:.04em;line-height:1}
.opp-co{font:400 9.5px var(--mono);color:var(--tx4);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-sc{flex:none;text-align:right;padding-left:12px}
.opp-sc b{display:block;font:600 34px var(--disp);line-height:1}
.opp-sc small{font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--tx4)}
.opp-win{flex:none;text-align:right;padding-left:12px;border-left:1px solid var(--line)}
.opp-win b{display:block;font:600 22px var(--disp);line-height:1.1}
.opp-win small{font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--tx4)}
.opp-rsi{margin-top:12px}
.opp-rsi-r{display:flex;align-items:baseline;gap:8px}
.opp-rsi-r b{font:600 22px var(--disp)}
.opp-rsi-r small{font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--tx4)}
.opp-rsi-r i{margin-left:auto;font-style:normal;font:400 9.5px var(--mono);color:var(--tx4)}
.opp-rsi-bar{height:4px;border-radius:2px;background:var(--line);margin-top:7px;overflow:hidden}
.opp-rsi-bar i{display:block;height:100%;background:var(--acc)}
.opp-grid{display:flex;margin-top:12px;border-top:1px solid var(--line2);padding-top:11px}
.og{flex:1;text-align:center;padding:0 4px}
.og+.og{border-left:1px solid var(--line2)}
.og small{display:block;font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--tx4)}
.og b{display:block;font:600 18px var(--disp);margin-top:4px}
.og i{display:block;font-style:normal;font:400 9px var(--mono);color:var(--tx4);margin-top:2px}
.why-h{display:flex;align-items:baseline;justify-content:space-between;margin:14px 0 7px}
.why-h span{font:600 10.5px var(--disp);letter-spacing:.14em;color:var(--tx3);text-transform:uppercase}
.why-h b{font:500 9.5px var(--mono);color:var(--acc)}
.ck{border-left:3px solid var(--line3);border-radius:0 7px 7px 0;padding:5px 9px;margin-bottom:4px;
  font:400 9px/1.4 var(--mono);color:var(--tx2);background:rgba(255,255,255,.015)}
.ck-ok{border-left-color:var(--acc);background:rgba(34,211,197,.05)}
.ck-no{border-left-color:var(--down);background:rgba(239,68,68,.05);color:var(--tx3)}
.ck-wn{border-left-color:var(--warn);background:rgba(245,158,11,.05);color:var(--warn-tx)}
.ck-more{font:400 9px var(--mono);color:var(--tx5);margin-top:6px}
.opp-acts{display:flex;gap:7px;margin-top:auto;padding-top:11px}
.opp-acts .btn{padding:11px 6px;font-size:11px;letter-spacing:.1em}
.deck-hint{margin:10px 0 0;text-align:center;font:400 9.5px var(--mono);color:var(--tx5)}

/* ================= 3. RADAR (timeline) ================= */
.filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
.tl-row{display:grid;grid-template-columns:52px 16px 1fr;cursor:pointer}
.tl-when{text-align:right;padding:14px 9px 0 0}
.tl-when b{display:block;font:600 14px var(--disp)}
.tl-when small{display:block;font:400 9px var(--mono);color:var(--tx5);margin-top:2px}
.tl-line{position:relative;display:flex;justify-content:center}
.tl-line::before{content:'';position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.tl-row:first-child .tl-line::before{top:20px}
.tl-row:last-child .tl-line::before{bottom:auto;height:20px}
.tl-dot{position:relative;margin-top:15px;width:9px;height:9px;border-radius:50%;
  background:var(--tx5);border:2px solid var(--bg2);flex:none}
.tl-card{background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:12px 13px;margin:8px 0 8px 10px;min-width:0;animation:rise .24s ease}
.tl-r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-sym{font:600 19px var(--disp);letter-spacing:.04em}
.tl-badge{border:1px solid var(--line3);border-radius:6px;padding:2px 7px;
  font:500 8.5px var(--mono);letter-spacing:.1em;color:var(--tx4);white-space:nowrap}
.tl-desc{margin:7px 0 0;font:400 9.5px/1.6 var(--mono);color:var(--tx4)}
.tl-val{margin-top:7px;font:500 10.5px var(--mono)}
.ev-blue .tl-dot{background:var(--info)} .ev-blue .tl-badge{color:#7fcdf7;border-color:#1d3c52}
.ev-blue .tl-val{color:#7fcdf7}
.ev-green .tl-dot{background:var(--acc)} .ev-green .tl-badge{color:var(--acc);border-color:var(--line-acc)}
.ev-green .tl-val{color:var(--acc)}
.ev-amber .tl-dot{background:var(--warn)} .ev-amber .tl-badge{color:var(--warn);border-color:var(--warn-line)}
.ev-amber .tl-val{color:var(--warn)}
.ev-red .tl-dot{background:var(--down)} .ev-red .tl-badge{color:var(--down2);border-color:var(--down-line)}
.ev-red .tl-val{color:var(--down2)}
.tl-foot{margin-top:14px;text-align:center;font:400 9.5px var(--mono);color:var(--tx5)}

/* ================= 4. THEO DÕI ================= */
.wsum{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}
.wsum b{display:block;font:700 26px/1.15 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--acc)}
.wsum p{margin:8px 0 0;font:400 10px/1.65 var(--mono);color:var(--tx4)}
.wrow{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;
  margin-bottom:10px;cursor:pointer}
.wrow-1{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.wrow-sym{font:600 24px var(--disp);letter-spacing:.04em;line-height:1}
.wrow-co{font:400 9.5px var(--mono);color:var(--tx4);margin-top:5px}
.wrow-rsi{flex:none;text-align:right}
.wrow-rsi b{display:block;font:600 26px var(--disp);line-height:1}
.wrow-rsi small{font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--tx4)}
.wbar{position:relative;height:8px;border-radius:4px;background:var(--line);margin:14px 0 6px}
.wbar .zone{position:absolute;left:0;top:0;bottom:0;border-radius:4px 0 0 4px;background:rgba(34,211,197,.22)}
.wbar .knob{position:absolute;top:50%;width:12px;height:18px;border-radius:4px;
  transform:translate(-50%,-50%);background:var(--acc)}
.wbar .knob.mid{background:var(--warn)} .wbar .knob.hi{background:var(--down)}
.wscale{display:flex;justify-content:space-between;font:400 8.5px var(--mono);color:var(--tx5)}
.wfoot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--line2);font:400 9.5px var(--mono)}
.wfoot b{font:500 12px var(--mono);white-space:nowrap}
.wnote{margin-top:14px;font:400 9.5px/1.7 var(--mono);color:var(--tx5)}

/* ================= 5. TÌM KIẾM ================= */
.sbox{display:flex;align-items:center;gap:9px;border:1px solid var(--line-acc);border-radius:12px;
  background:var(--sunk);padding:11px 13px;margin-bottom:16px}
.sbox svg{width:16px;height:16px;color:var(--acc);flex:none}
.sbox input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--tx);
  font:400 12px var(--mono)}
.sbox input::placeholder{color:var(--tx5)}
.sbox button{flex:none;color:var(--tx4);font-size:14px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.sug{display:flex;align-items:center;gap:12px;border:1px solid var(--line-acc);border-radius:13px;
  background:linear-gradient(160deg,rgba(34,211,197,.08),rgba(34,211,197,0));
  padding:13px 14px;margin-bottom:8px;cursor:pointer}
.sug-n{border:1px solid var(--line);background:var(--card)}
.sug-sym{flex:none;font:600 21px var(--disp);letter-spacing:.04em}
.sug-x{flex:1;min-width:0;font:400 9.5px/1.5 var(--mono);color:var(--tx4)}
.sug-v{flex:none;text-align:right;font:600 19px var(--disp);color:var(--acc)}
.sug-n .sug-v{color:var(--warn);font-size:12px;font-family:var(--mono);font-weight:500}
.prog{height:3px;border-radius:2px;background:var(--line);margin-top:7px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--warn)}
.res{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line2);cursor:pointer}
.res b{flex:none;width:52px;font:600 18px var(--disp)}
.res span{flex:1;min-width:0;font:400 9.5px var(--mono);color:var(--tx4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res i{flex:none;font-style:normal;text-align:right;font:500 11px var(--mono)}

/* ================= 6. TÔI ================= */
.me3{display:flex;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 0;margin-bottom:8px}
.me3 .kpi b{font-size:22px}
.jn{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line2)}
.jn:first-child{border-top:0}
.jn-sym{flex:none;width:48px;font:600 17px var(--disp)}
.jn-x{flex:1;min-width:0;font:400 9px/1.5 var(--mono);color:var(--tx5)}
.jn-v{flex:none;text-align:right;font:500 11px var(--mono)}

/* ================= OVERLAY ================= */
.ov{position:fixed;left:50%;transform:translateX(-50%);top:0;bottom:0;width:100%;max-width:460px;
  z-index:6;background:var(--bg2);overflow-y:auto;overscroll-behavior:contain;
  padding:14px 18px 40px;animation:rise .24s ease}
#ov-cfg{z-index:7} #ov-admin{z-index:8}
.ov-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.ov-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:9px;color:var(--tx2);font-size:16px}
.ov-pill{border:1px solid var(--line-acc);border-radius:6px;padding:4px 9px;color:var(--acc);
  font:500 9.5px var(--mono);letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.ov-pill i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:blip 1.6s infinite}
.sd-id{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.sd-rank{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line-acc);background:var(--acc-bg);color:var(--acc);font:600 13px var(--disp)}
.sd-sym{font:600 38px var(--disp);letter-spacing:.04em;line-height:1}
.sd-co{font:400 9.5px/1.5 var(--mono);color:var(--tx4);margin-top:5px}
.sd-px{flex:none;text-align:right;margin-left:auto}
.sd-px b{display:block;font:600 24px var(--disp)}
.sd-px small{font:500 10px var(--mono)}
.sd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#18211d;
  border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:16px}
.sd-cell{background:var(--card);padding:12px 10px;min-width:0}
.sd-cell small{display:block;font:400 8.5px var(--mono);letter-spacing:.1em;color:var(--tx4)}
.sd-cell b{display:block;font:600 19px var(--disp);margin-top:4px}
.sd-cell i{display:block;font-style:normal;font:400 8.5px var(--mono);color:var(--tx5);margin-top:2px}
.sd-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px}
.sd-tab{flex:none;border:1px solid var(--line);border-radius:8px;padding:7px 11px;
  font:500 9.5px var(--mono);letter-spacing:.1em;color:var(--tx4);white-space:nowrap}
.sd-tab.on{border-color:var(--line-acc);background:var(--acc-bg);color:var(--acc)}
.verdict{font:700 26px/1.15 var(--disp);letter-spacing:.02em;text-transform:uppercase}
.gauge{display:block;margin:0 auto}
.gauge-lb{text-align:center;font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--tx4);margin-top:-6px}
.sr-bar{position:relative;height:6px;border-radius:3px;margin:26px 0 30px;
  background:linear-gradient(90deg,var(--down),#7a4a4a,var(--line3),#2f7a70,var(--acc))}
.sr-pt{position:absolute;top:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.sr-pt i{display:block;width:9px;height:9px;border-radius:50%;background:var(--tx);margin:0 auto;
  border:2px solid var(--bg2)}
.sr-pt b{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;font:600 12px var(--disp)}
.sr-pt small{position:absolute;left:50%;transform:translateX(-50%);top:14px;
  font:400 8px var(--mono);color:var(--tx5)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line2);font:400 10.5px var(--mono);align-items:baseline}
.kv:last-child{border-bottom:0}
.kv span{color:var(--tx4)}
.kv b{font-weight:500;white-space:nowrap}
.mini-chart svg{width:100%;height:auto;display:block}
.cfg-card{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px;margin-bottom:8px;
  cursor:pointer}
.cfg-card.on{border-color:var(--line-acc);background:linear-gradient(160deg,rgba(34,211,197,.08),rgba(34,211,197,0))}
.cfg-r1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cfg-r1 b{font:600 16px var(--disp);letter-spacing:.08em;text-transform:uppercase}
.cfg-badge{border:1px solid var(--line3);border-radius:5px;padding:3px 8px;
  font:500 8.5px var(--mono);letter-spacing:.1em;color:var(--tx4)}
.cfg-card.on .cfg-badge{border-color:var(--line-acc);color:var(--acc);background:var(--acc-bg)}
.cfg-d{margin:7px 0 9px;font:400 9.5px/1.6 var(--mono);color:var(--tx4)}
.adm-banner{border:1px solid var(--warn-line);background:rgba(245,158,11,.07);border-radius:12px;
  padding:12px 13px;color:var(--warn-tx);font:400 9.5px/1.65 var(--mono);margin-bottom:16px}
.acc{border:1px solid var(--line);border-radius:13px;margin-bottom:9px;overflow:hidden}
.acc.on{border-color:var(--line-acc)}
.acc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;
  width:100%;font:600 12px var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.acc.on .acc-h{color:var(--acc)}
.acc-b{padding:0 14px 14px}
.usr{border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:8px;background:var(--sunk)}
.usr-1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.usr-1 b{font:600 15px var(--disp);letter-spacing:.04em}
.fld{display:block;margin-bottom:9px}
.fld span{display:block;font:400 9px var(--mono);color:var(--tx4);margin-bottom:5px;letter-spacing:.06em}
.fld input{width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:9px;
  padding:10px 11px;color:var(--tx);font:400 11px var(--mono);outline:none}
.fld input:focus{border-color:var(--line-acc)}

/* Bottom sheet nhanh */
.sheet{position:fixed;inset:0;z-index:9;display:flex;align-items:flex-end;justify-content:center}
.sheet-bd{position:absolute;inset:0;background:rgba(4,8,12,.65)}
.sheet-panel{position:relative;width:100%;max-width:460px;background:var(--card);
  border:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px;animation:rise .22s ease}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:20;
  background:var(--card);border:1px solid var(--line-acc);border-radius:10px;padding:10px 15px;
  font:400 11px var(--mono);color:var(--tx);max-width:min(400px,88vw)}

/* Dải cảnh báo chế độ dữ liệu mẫu (?mock=1) - cố ý CHÓI để không thể nhầm */
.mockbar{position:fixed;top:0;left:0;right:0;z-index:30;height:24px;display:flex;
  align-items:center;justify-content:center;gap:10px;background:#7f1d1d;color:#ffe4e4;
  font:600 10px var(--mono);letter-spacing:.08em;white-space:nowrap}
.mockbar a{color:#ffd9d9}
body:has(.mockbar) .app{padding-top:24px}
body:has(.mockbar) .hdr{top:24px}

/* Hai nhãn cùng lúc trên thẻ cơ hội + nút ⓘ mở bảng chú giải */
.flags{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.opp-time{flex:none;font:400 9px var(--mono);color:var(--tx5);text-align:right}

/* Bảng chú giải (bottom sheet) */
.gloss{max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gloss-h{margin:14px 0 8px;font:600 11px var(--disp);letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc)}
.gloss-h:first-child{margin-top:0}
.gloss-r{border-left:2px solid var(--line3);padding:0 0 0 10px;margin-bottom:10px}
.gloss-r b{display:block;font:500 10.5px var(--mono);color:var(--tx)}
.gloss-r p{margin:4px 0 0;font:400 9.5px/1.6 var(--mono);color:var(--tx4)}

/* Gập "Tiêu chí quét đang áp dụng" trong Cấu hình */
.adv{margin-top:12px;border-top:1px solid var(--line2);padding-top:12px}
.adv summary{cursor:pointer;list-style:none;font:600 11px var(--disp);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3)}
.adv summary::-webkit-details-marker{display:none}
.adv summary::after{content:' ▾';color:var(--tx5)}
.adv[open] summary::after{content:' ▴'}

/* Nút quay về giao diện V1 trên header V2 */
.ver-back{text-decoration:none;font:600 11px var(--disp);letter-spacing:.1em;
  color:var(--tx3);width:auto;min-width:34px;padding:0 9px}
.ver-back:hover{color:var(--acc);border-color:var(--line-acc)}

/* Thẻ VN-Index trong Bối cảnh thị trường (V2) - số bên trái, đường trong ngày
   bên phải, giống bố cục của V1 nhưng theo token màu/typo của V2. */
.ix-head{display:flex;align-items:center;gap:10px}
.ix-name{font:600 11px var(--disp);letter-spacing:.14em;color:var(--tx4)}
.ix-val{font:600 26px var(--disp);line-height:1.1;margin-top:2px}
.ix-chg{font:500 11px var(--mono);margin-top:2px}
.ix-chartwrap{flex:1;min-width:0}
.ix-chart{width:100%;height:auto;display:block}
.ix-ax{fill:var(--tx5);font:8.5px var(--mono)}
.ix-tag{fill:#04201d;font:600 9px var(--mono)}
.ix-stats{display:flex;margin:12px 0 10px;padding-top:10px;border-top:1px solid var(--line2)}
.ix-s{flex:1;min-width:0;padding-right:10px}
.ix-s+.ix-s{border-left:1px solid var(--line2);padding-left:10px;padding-right:0}
.ix-s small{display:block;font:400 8.5px var(--mono);letter-spacing:.1em;color:var(--tx5)}
.ix-s b{display:block;font:500 12px var(--mono);margin-top:3px}

/* Thông tin thị trường chi tiết ở cuối tab Tổng quan (V2) */
.mk4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mk4-c{border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:10px 6px;text-align:center;min-width:0}
.mk4-c small{display:block;font:500 8px var(--mono);letter-spacing:.08em;color:var(--tx5)}
.mk4-c b{display:block;font:600 18px var(--disp);line-height:1.2;margin-top:3px}
.mk4-c i{display:block;font-style:normal;font:400 8px var(--mono);color:var(--tx5);
  margin-top:2px;line-height:1.3}
.mkb{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line)}
.mkb i{display:block;height:100%}
.mkb-cols{display:flex;margin-top:10px}
.mkb-c{flex:1;min-width:0;text-align:center;padding:0 2px}
.mkb-c b{display:block;font:600 17px var(--disp);line-height:1.2}
.mkb-c small{display:block;font:400 8.5px var(--mono);color:var(--tx3);line-height:1.3}
.mkb-c i{font-style:normal;font:400 8px var(--mono);color:var(--tx5)}
.mk3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.mk3-c{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:11px 10px;min-width:0}
.mk3-c small{display:block;font:400 8.5px var(--mono);color:var(--tx5);line-height:1.35}
.mk3-c small em{font-style:normal;display:block;opacity:.85}
.mk3-c b{display:block;font:600 20px var(--disp);margin-top:4px}

/* Nút bỏ theo dõi trên từng thẻ ở tab Theo dõi */
/* NGÔI SAO THEO DÕI (dùng chung): đang theo dõi -> TÔ VÀNG; chưa theo dõi ->
   rỗng ruột, viền teal. Cùng một hình ở mọi màn để nhìn là biết trạng thái. */
.star{display:block;fill:none;stroke:var(--acc);transition:fill .18s,stroke .18s}
.star-on{fill:#f5c542;stroke:#f5c542}
.wl-star{display:inline-flex;padding:2px 5px 0 0;vertical-align:-4px;
  transition:transform .12s}
.wl-star:active{transform:scale(.85)}
.wl-star:hover .star{fill:none;stroke:var(--down2)}
.star-btn2{padding:0}
.star-btn2:hover .star-on{fill:none;stroke:var(--down2)}
.btn-star{display:flex;align-items:center;justify-content:center;gap:6px}
.btn-star .star{stroke:currentColor}
.btn-star .star-on{fill:#f5c542;stroke:#f5c542}

/* Khu vực quản trị V2 - quản lý người dùng đầy đủ */
.usr-meta{margin:7px 0 0;font:400 9px var(--mono);color:var(--tx5);line-height:1.5}
.usr-acts{display:flex;gap:7px;margin-top:10px}
.btn-xs{padding:8px 10px;font-size:10px;letter-spacing:.08em;width:auto;flex:1}
.adm-usrhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.usr-q{flex:1;min-width:0;background:var(--sunk);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;color:var(--tx);font:400 10.5px var(--mono);outline:none}
.usr-q:focus{border-color:var(--line-acc)}
.sw2{display:flex;align-items:center;gap:9px;margin:2px 0 10px;
  font:400 10.5px var(--mono);color:var(--tx2);cursor:pointer}
.sw2 input{width:17px;height:17px;accent-color:var(--acc)}
.acc-b .fld input{font-size:11px}

/* Dòng thời gian radar: mô tả bộ lọc + thẻ tình trạng ở tab KẾT QUẢ */
.rf-desc{margin:0 0 14px;font:400 9.5px/1.6 var(--mono);color:var(--tx5)}
.rf-sum{border:1px solid var(--line-acc);border-radius:16px;padding:15px 16px;margin-bottom:16px;
  background:linear-gradient(160deg,rgba(34,211,197,.08),rgba(34,211,197,0))}
.rf-sum>small{display:block;font:500 8.5px var(--mono);letter-spacing:.14em;color:var(--tx4)}
.rf-sum-r{display:flex;margin-top:10px}
.rf-sum-r>div{flex:1;min-width:0}
.rf-sum-r>div+div{border-left:1px solid var(--line);padding-left:12px}
.rf-sum-r b{display:block;font:600 30px var(--disp);line-height:1}
.rf-sum-r span{display:block;font:400 9px var(--mono);color:var(--tx4);margin-top:4px}
.rf-sum p{margin:11px 0 12px;font:400 9.5px/1.6 var(--mono);color:var(--tx4)}