/* ============================================================
   DESIGN TOKEN — nguồn duy nhất cho cỡ chữ / khoảng cách / bo góc.
   Trước đây có 23 cỡ chữ rời rạc (9.5, 11, 11.5, 12.5, 13.5, 14.5...)
   nên mỗi lần thêm UI lại lệch nhau vài px. Giờ mọi thứ bám 1 thang.
   QUY TẮC: code mới BẮT BUỘC dùng var(), không viết px trần.
   ============================================================ */
:root{
  /* Cỡ chữ — thang 9 bậc. --fs-label chỉ dùng cho nhãn đi kèm icon. */
  --fs-label:11px;   /* nhãn bottom-nav (có icon phía trên) */
  --fs-2xs:12px;     /* chú thích, badge, ô dữ liệu phụ */
  --fs-xs:13px;      /* text phụ, nút nhỏ */
  --fs-sm:14px;      /* CỠ NỀN của app */
  --fs-md:15px;      /* text nhấn, nút chính */
  --fs-lg:17px;      /* tiêu đề nhỏ, số liệu */
  --fs-xl:20px;      /* số liệu lớn, h3 */
  --fs-2xl:23px;     /* h2 */
  --fs-3xl:27px;     /* h1 */

  /* Khoảng cách — lưới 4pt */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Bo góc */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:18px; --radius-pill:999px;

  /* Vùng chạm tối thiểu (Apple HIG 44 / Material 48) */
  --tap-min:44px;
}

:root{--bg:#09111f;--panel:#101c2d;--line:#263752;--text:#ecf3ff;--muted:#91a3be;--accent:#69e6b2;--red:#ff7786;--amber:#ffca6a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 85% 0,#163d54,transparent 30%),var(--bg);color:var(--text);font:var(--fs-sm) Manrope,sans-serif}.topbar{max-width:1220px;margin:auto;padding:30px 26px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{margin:0 0 6px;color:var(--accent);font:500 var(--fs-2xs) 'JetBrains Mono';letter-spacing:.1em}h1,h2,h3{margin:0}h1{font-size:var(--fs-3xl)}h2{font-size:var(--fs-2xl)}h3{font-size:var(--fs-sm);margin:24px 0 10px}.status,.data-notice{color:var(--muted);font:var(--fs-2xs) 'JetBrains Mono'}.data-notice{padding:12px 15px;background:#11263a;border:1px solid #294a62;border-radius:var(--radius-md)}main{max-width:1220px;margin:auto;padding:0 26px 50px;display:grid;gap:18px}.panel{background:rgba(16,28,45,.93);border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px}.today{border-color:#2c615e}.section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.intro{color:var(--muted);line-height:1.65;margin:14px 0}.btn{border:0;border-radius:var(--radius-md);padding:10px 15px;font:700 var(--fs-xs) Manrope;cursor:pointer}.primary{background:var(--accent);color:#062017}.secondary{background:#20334e;color:var(--text);border:1px solid #38506f}.btn:disabled{opacity:.5}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-md)}table{width:100%;border-collapse:collapse;white-space:nowrap}th{color:var(--muted);font:var(--fs-2xs) 'JetBrains Mono';text-align:left;padding:11px;border-bottom:1px solid var(--line)}td{padding:12px 11px;border-bottom:1px solid #1c2c45;font-family:'JetBrains Mono'}tr:last-child td{border:0}.symbol-cell{font-family:Manrope;font-weight:800}.empty-state{color:var(--muted)}.hidden{display:none}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:18px 0}.metrics div{border:1px solid var(--line);background:#0c1829;border-radius:var(--radius-md);padding:13px}.metrics small{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-bottom:6px}.metrics strong{font:500 var(--fs-lg) 'JetBrains Mono'}.pnl-pos{color:var(--accent)}.pnl-neg{color:var(--red)}.config-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:16px 0}.config label{color:var(--muted);font-size:var(--fs-2xs)}.config input,.optimizer select{display:block;width:100%;margin-top:6px;padding:10px;border-radius:var(--radius-md);border:1px solid var(--line);background:#0b1727;color:var(--text);font:var(--fs-sm) 'JetBrains Mono'}.optimizer{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}.optimizer p{color:var(--muted);margin:5px 0}.optimizer>div:last-child{display:flex;gap:8px;align-items:end}.optimizer select{margin:0;min-width:190px}.optimization-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.stat{padding:12px;background:#0c1829;border:1px solid var(--line);border-radius:var(--radius-md)}.stat-label{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-bottom:5px}.stat-value{font:var(--fs-md) 'JetBrains Mono'}@media(max-width:760px){.topbar{padding:20px 16px}.topbar .btn{font-size:var(--fs-2xs);padding:9px}main{padding:0 16px 30px}.panel{padding:17px;border-radius:var(--radius-lg)}h1{font-size:var(--fs-xl)}h2{font-size:var(--fs-xl)}.metrics{grid-template-columns:repeat(2,1fr)}.config-grid{grid-template-columns:1fr}.optimizer{display:block}.optimizer>div:last-child{margin-top:12px}.optimizer select{min-width:0}.optimization-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Bổ sung: badge trạng thái, xu hướng, lý do, modal, time machine ---------- */

.col-reason{white-space:normal;min-width:340px;max-width:600px;line-height:1.55;color:var(--muted)}
.col-reason-short{white-space:normal;min-width:170px;max-width:220px;line-height:1.5;color:var(--muted);font-size:var(--fs-2xs)}
.panel{min-width:0}
main{overflow-x:hidden}

.badge{display:inline-block;padding:3px 9px;border-radius:var(--radius-xl);font:600 var(--fs-2xs) Manrope}
.badge-green{background:rgba(105,230,178,.15);color:var(--accent)}
.badge-red{background:rgba(255,119,134,.15);color:var(--red)}
.badge-amber{background:rgba(255,202,106,.15);color:var(--amber)}
.badge-muted{background:rgba(145,163,190,.15);color:var(--muted)}

/* Xu hướng: icon + % gọn 1 cột hẹp; chi tiết nằm trong tooltip (title) */
.trend-icon{display:inline-flex;flex-direction:column;align-items:center;gap:1px;font-size:var(--fs-lg);line-height:1;cursor:help}
.trend-icon small{font:var(--fs-2xs) 'JetBrains Mono'}
.trend-flat{color:var(--muted)}

.hint{color:var(--muted);font-size:var(--fs-2xs);margin-top:3px}

.btn.btn-sm{padding:7px 11px;font-size:var(--fs-2xs)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{background:#16253a}

button.icon-btn{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:var(--fs-sm);padding:4px 8px}
button.icon-btn:hover{color:var(--red)}

.alert-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.alert-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#0c1829;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--radius-md);padding:10px 14px}

.bt-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bt-controls select,.bt-controls input[type=date]{font:var(--fs-sm) 'JetBrains Mono';background:#0b1727;border:1px solid var(--line);color:var(--text);padding:9px 10px;border-radius:var(--radius-md)}

/* ---------- Điều hướng nhanh giữa các phần ---------- */
.quicknav{position:sticky;top:0;z-index:60;display:flex;gap:6px;overflow-x:auto;max-width:1220px;margin:0 auto;padding:10px 26px;background:#0c1526;border-bottom:1px solid var(--line)}
.quicknav a{flex:none;color:var(--muted);text-decoration:none;font:600 var(--fs-2xs) 'JetBrains Mono';padding:6px 11px;border-radius:var(--radius-md);white-space:nowrap;transition:background .15s ease,color .15s ease}
.quicknav a:hover{background:#16253a;color:var(--text)}
.panel,.data-notice{scroll-margin-top:64px}
@media(max-width:760px){.quicknav{padding:8px 16px}}

/* ---------- Biểu đồ cột ngang (backtest từng mã độc lập) ---------- */
.bar-chart{display:flex;flex-direction:column;gap:7px;margin:14px 0 20px}
.bar-row{display:grid;grid-template-columns:26px 100px 1fr 70px;align-items:center;gap:8px}
.bar-label{font:600 var(--fs-2xs) 'JetBrains Mono';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:16px;background:#0b1727;border-radius:var(--radius-sm);overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:var(--radius-sm);transition:width .25s ease}
.bar-fill.bar-pos{background:var(--accent)}
.bar-fill.bar-neg{background:var(--red)}
.bar-value{font:600 var(--fs-2xs) 'JetBrains Mono';text-align:right}

/* Hàng bấm được (biểu đồ + bảng theo mã) -> mở chi tiết từng lệnh */
.bar-clickable{cursor:pointer;border-radius:var(--radius-sm)}
.bar-row.bar-clickable{padding:2px 4px;margin:-2px -4px}
.bar-row.bar-clickable:hover{background:#16253a}
tr.bar-clickable:hover td{background:#16253a}

@media(max-width:760px){
  .bar-row{grid-template-columns:24px 72px 1fr 58px;gap:5px}
  .bar-label{font-size:var(--fs-2xs)}
}

/* ---------- Đăng nhập ---------- */
.login-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 85% 0,#163d54,transparent 40%),var(--bg)}
.login-overlay.hidden{display:none}
.login-box{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);padding:38px 34px;width:min(400px,92vw);text-align:center}
.login-box h2{font-size:var(--fs-2xl)}
.login-note{color:var(--muted);font-size:var(--fs-xs);line-height:1.6;margin:0}
.login-hint{color:var(--muted);font-size:var(--fs-2xs);line-height:1.6;margin:0}
.login-hint code{background:#0b1727;padding:2px 6px;border-radius:var(--radius-sm);font-family:'JetBrains Mono'}
#dev-login-btn{width:280px}

.login-divider{display:flex;align-items:center;gap:10px;width:100%;color:var(--muted);font-size:var(--fs-2xs)}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--line)}

.local-login{display:flex;flex-direction:column;gap:10px;width:280px}
.local-login input{font:var(--fs-sm) 'JetBrains Mono';background:#0b1727;border:1px solid var(--line);color:var(--text);padding:11px 12px;border-radius:var(--radius-md);width:100%}
.local-login input:focus{outline:none;border-color:var(--accent)}
.local-login .btn{width:100%}

/* ---------- User box trên topbar ---------- */
.user-box.hidden{display:none}
.user-avatar{width:26px;height:26px;border-radius:50%}
.user-avatar.hidden{display:none}
#user-name{font:600 var(--fs-2xs) Manrope;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){#user-name{display:none}}

/* ---------- Panel quản trị ---------- */
.admin-check{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-2xs);cursor:pointer}
.admin-check input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
#admin-users-table .segmented{padding:2px}
#admin-users-table .seg-btn{padding:5px 11px;font-size:var(--fs-2xs)}
/* ---------- Menu tài khoản (dropdown thay cho dãy nút trên topbar) ---------- */
.user-box{position:relative}
.user-menu-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#16253a;border:1px solid var(--line);border-radius:22px;
  padding:6px 12px;color:var(--text);font:600 var(--fs-2xs) Manrope;
}
.user-menu-btn:hover{background:#1c2e46}
.user-fallback-icon{font-size:var(--fs-md)}
.user-caret{color:var(--muted);font-size:var(--fs-label)}
.user-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:200;min-width:190px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:2px;
}
.user-menu.hidden{display:none}
.user-menu-head{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px 9px;border-bottom:1px solid var(--line);margin-bottom:4px;
}
.user-menu-head strong{font:700 var(--fs-xs) Manrope}
.user-menu-head .hint{margin:0;font-family:'JetBrains Mono'}
.user-menu-item{
  background:transparent;border:0;border-radius:var(--radius-md);cursor:pointer;
  color:var(--text);font:600 var(--fs-xs) Manrope;text-align:left;padding:10px 12px;
}
.user-menu-item:hover{background:#16253a}

/* ---------- Thanh thông báo dữ liệu 1 dòng + chi tiết mở rộng ---------- */
.data-notice{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dn-toggle{
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  font-size:var(--fs-sm);padding:0 4px;line-height:1;
}
.dn-toggle:hover{color:var(--text)}
.dn-detail{flex-basis:100%;color:var(--muted)}

/* ---------- Panel 00 thu gọn: thanh tóm tắt + nút Sửa ---------- */
.scope-summary-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.scope-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.scope-summary .chip{cursor:default}

/* ---------- Intro thu gọn (details) ---------- */
details.intro-more{margin:12px 0}
details.intro-more summary{
  color:var(--muted);font-size:var(--fs-2xs);cursor:pointer;list-style:none;
  display:inline-block;padding:2px 0;
}
details.intro-more summary::-webkit-details-marker{display:none}
details.intro-more summary:hover{color:var(--text)}
details.intro-more[open] summary{color:var(--accent)}
details.intro-more p{color:var(--muted);line-height:1.65;margin:8px 0 0;font-size:var(--fs-xs)}

/* ---------- Kỳ hạn ngay trong panel Backtest ---------- */
.bt-period-inline{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-2xs)}
.bt-period-inline select{font:var(--fs-xs) 'JetBrains Mono';background:#0b1727;border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:var(--radius-md)}

/* ---------- Hint tiền viết tắt dưới ô nhập ---------- */
.money-hint{display:block;color:var(--accent);font:var(--fs-2xs) 'JetBrains Mono';margin-top:4px;min-height:14px}

.admin-del-btn{color:var(--red, #e5484d)}
.admin-del-btn:hover{border-color:var(--red, #e5484d)}
.admin-actions-cell{white-space:nowrap}
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 10px;flex-wrap:wrap}
.admin-toolbar .hint{margin:0}
#admin-search{
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:#0b1727;color:var(--text);font-size:var(--fs-xs);min-width:220px;
}
#pw-old.hidden{display:none}
.admin-create{
  margin:14px 0;padding:14px 16px;border:1px dashed var(--line);
  border-radius:var(--radius-lg);background:color-mix(in srgb, var(--panel) 70%, transparent);
}
.admin-create-title{display:block;font:700 var(--fs-xs) Manrope;margin-bottom:10px}
.admin-create-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin-create-row input[type=text],.admin-create-row input[type=password]{
  flex:1 1 160px;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:var(--fs-xs);
}
.admin-create-row select{
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--bg);color:var(--text);font-size:var(--fs-xs);
}
.admin-create .hint{margin:10px 0 0}
.admin-compact{padding:10px 14px}
.admin-compact .admin-create-row{gap:8px}
.admin-compact details.intro-more{margin:6px 0 0}

/* ---------- FAB: nút Tính toán lại nổi góc dưới ---------- */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:150;
  border:0;border-radius:var(--radius-xl);padding:13px 20px;cursor:pointer;
  background:var(--accent);color:#062017;font:700 var(--fs-xs) Manrope;
  box-shadow:0 8px 24px rgba(105,230,178,.35);
  animation:fab-in .3s ease;
}
.fab:disabled{background:#20334e;color:var(--muted);box-shadow:none;cursor:wait}
.fab.hidden{display:none}
@keyframes fab-in{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}

/* ---------- Badge kết quả cũ (backtest/tối ưu) ---------- */
.stale-badge{
  margin:12px 0 0;padding:10px 14px;border-radius:var(--radius-md);font-size:var(--fs-2xs);line-height:1.55;
  background:rgba(255,202,106,.1);border:1px solid rgba(255,202,106,.4);color:var(--amber);
}

/* ---------- Thẻ tín hiệu / danh mục cho mobile ---------- */
.mobile-cards{display:none}
.sig-card{background:#0c1829;border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:10px}
.sc-row1{display:flex;align-items:center;gap:10px}
.sc-sym{font:800 var(--fs-lg) Manrope}
.sc-price{font:500 var(--fs-md) 'JetBrains Mono'}
.sc-row1 .trend-icon{margin-left:auto;flex-direction:row;gap:5px;align-items:center;font-size:var(--fs-md)}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px}
.sc-chips span{background:#16253a;border:1px solid var(--line);border-radius:var(--radius-lg);padding:4px 10px;font:var(--fs-2xs) 'JetBrains Mono';color:var(--muted)}
.sc-reason{color:var(--muted);font-size:var(--fs-xs);line-height:1.6;white-space:normal}
.sc-reason.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sc-more{align-self:flex-start;background:none;border:0;color:var(--accent);font:600 var(--fs-2xs) Manrope;cursor:pointer;padding:0}
.sc-suggest{font:var(--fs-2xs) 'JetBrains Mono';color:var(--text)}
.sc-outcome{font-size:var(--fs-2xs);line-height:1.6;white-space:normal;border-top:1px solid var(--line);padding-top:10px}
.sc-actions{display:flex;gap:8px}
.sc-actions .btn{flex:1;padding:11px 10px}
.sc-badge-row{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}

/* ---------- Chip nhãn ngắn cho mobile ---------- */
.chip-short{display:none}

/* ---------- Sao favourite (thêm/bỏ Danh sách tôi chọn) ---------- */
.star-btn{background:none;border:0;cursor:pointer;font-size:var(--fs-lg);line-height:1;padding:2px 6px;color:#3a4f75;transition:color .15s ease,text-shadow .15s ease}
.star-btn:hover{color:#6d87b5}
.star-btn.star-on{color:var(--amber);text-shadow:0 0 9px rgba(255,202,106,.55)}

/* ---------- Toast ---------- */
#toast-host{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:300;width:min(420px,92vw);pointer-events:none}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:12px 16px;font-size:var(--fs-xs);line-height:1.5;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}
.toast.show{opacity:1;transform:translateY(0)}
.toast-error{border-left-color:var(--red)}
.toast-success{border-left-color:var(--accent)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(3,8,16,.65);display:flex;align-items:center;justify-content:center;z-index:100}
.modal.hidden{display:none}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;width:340px;display:flex;flex-direction:column;gap:12px}
.modal-box.modal-wide{width:min(760px,92vw);max-height:80vh;overflow-y:auto}
.modal-box h3{font-size:var(--fs-lg)}
.modal-box label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-2xs);color:var(--muted)}
.modal-box input{font:var(--fs-sm) 'JetBrains Mono';background:#0b1727;border:1px solid var(--line);color:var(--text);padding:9px 10px;border-radius:var(--radius-md)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

@media(max-width:760px){
  .col-reason{min-width:200px;max-width:260px}
  .modal-box.modal-wide{width:94vw}
}

/* ---------- Sửa responsive/mobile ---------- */

/* Modal luôn vừa màn hình hẹp, kể cả khi chưa vào media query 760px */
.modal-box{width:min(340px,92vw)}
.modal{padding:16px}

/* Topbar không đè chữ lên nút khi màn hình hẹp */
.topbar{flex-wrap:wrap}

/* Cột đầu (Mã) dính lại khi cuộn ngang bảng dài -- luôn biết đang xem mã nào */
.table-wrap{position:relative}
table th:first-child,table td:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
table thead th:first-child{z-index:2;background:var(--panel)}
tr:hover td:first-child{background:#132132}

/* Gợi ý trực quan là bảng cuộn được ngang (viền mờ dần bên phải) */
.table-wrap{background:linear-gradient(to right,var(--panel) 0,var(--panel) 100%) left/30px 100% no-repeat,
  radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.35),transparent) right/14px 100% no-repeat local}

/* Optimizer: select+nút không tràn trên mobile */
.optimizer>div:last-child{flex-wrap:wrap}

@media(max-width:760px){
  .modal-box{padding:20px}
  /* Vùng chạm rộng hơn cho nút nhỏ trong bảng trên mobile */
  .btn.btn-sm{padding:9px 13px;font-size:var(--fs-2xs)}
  button.icon-btn{padding:8px 10px;font-size:var(--fs-lg)}

  /* Bảng quan trọng (tín hiệu mua/danh mục/time machine) chuyển sang thẻ
     xếp dọc trên mobile thay vì cuộn ngang -- tránh hàng cao bất thường
     khi ô "lý do" nhiều dòng đẩy các cột khác ra ngoài tầm nhìn. */
  .stack-mobile table,.stack-mobile thead,.stack-mobile tbody,.stack-mobile tr,.stack-mobile th,.stack-mobile td{display:block}
  .stack-mobile{overflow:visible;background:none}
  .stack-mobile thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .stack-mobile tbody tr{border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:12px;background:#0c1829}
  .stack-mobile td{border:none;padding:7px 0 7px 42%;position:relative;min-height:20px;white-space:normal}
  .stack-mobile td:first-child{position:relative;background:none;padding-left:0;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
  .stack-mobile td:not(:first-child)::before{content:attr(data-label);position:absolute;left:0;top:7px;width:38%;color:var(--muted);font-size:var(--fs-2xs);font-family:'JetBrains Mono';white-space:normal}
  .stack-mobile td:empty{display:none}
}

/* ---------- Cấu hình: 3 nhóm có tiêu đề riêng ---------- */
.config-group{background:#0c1829;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;margin:14px 0}
.cg-head h3{margin:0;font-size:var(--fs-sm)}
.cg-head p{margin:5px 0 0;color:var(--muted);font-size:var(--fs-2xs);line-height:1.55}
.cg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:14px}
.cg-grid label{color:var(--muted);font-size:var(--fs-2xs)}
.cg-grid input{display:block;width:100%;margin-top:6px;padding:10px;border-radius:var(--radius-md);border:1px solid var(--line);background:#0b1727;color:var(--text);font:var(--fs-sm) 'JetBrains Mono'}
@media(max-width:1020px){.cg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.cg-grid{grid-template-columns:1fr}.config-group{padding:14px}}

/* ---------- Cấu hình: sub-tab "Của bạn / Quản trị" (chỉ admin) ---------- */
.config-subnav{display:flex;gap:8px;background:#0c1829;border:1px solid var(--line);border-radius:var(--radius-lg);padding:6px;margin-bottom:-4px}
.config-subnav.hidden{display:none}
.csub-btn{flex:1;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:var(--radius-md);padding:11px 14px;font:700 var(--fs-xs) Manrope;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px}
.csub-btn:hover{color:var(--text)}
.csub-btn.active{background:rgba(105,230,178,.12);border-color:var(--accent);color:var(--text)}
.csub-btn.csub-admin.active{background:rgba(255,202,106,.14);border-color:var(--amber)}

/* ---------- Khu Quản trị: banner ranh giới + nhóm gập ---------- */
.admin-band{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:rgba(255,202,106,.08);border:1px solid rgba(255,202,106,.35);border-radius:var(--radius-lg);padding:12px 16px;margin-bottom:16px}
.admin-band-badge{font:800 var(--fs-2xs) 'JetBrains Mono';letter-spacing:.08em;color:var(--amber);white-space:nowrap}
.admin-band-note{margin:0;color:var(--muted);font-size:var(--fs-2xs);line-height:1.55;flex:1;min-width:220px}
.admin-band-note strong{color:var(--text)}
.admin-acc{padding:0}
.admin-acc>summary{list-style:none;cursor:pointer;padding:15px 18px;font:700 var(--fs-sm) Manrope;display:flex;align-items:center;gap:9px;min-height:44px}
.admin-acc>summary::-webkit-details-marker{display:none}
.admin-acc>summary::after{content:'▾';margin-left:auto;color:var(--muted);transition:transform .15s}
.admin-acc[open]>summary::after{transform:rotate(180deg)}
.admin-acc[open]>summary{border-bottom:1px solid var(--line)}
.admin-acc-body{padding:16px 18px}
.admin-health-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

/* ---------- Thẻ chiến lược tối ưu ---------- */
.optimizer-head{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.optimizer-head p{color:var(--muted);margin:6px 0 0;line-height:1.6;max-width:640px}
.optimizer-head .btn{flex:none}
.strategy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.strategy-card{display:flex;flex-direction:column;gap:12px;background:#0c1829;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;transition:border-color .15s ease,box-shadow .15s ease}
.strategy-card.sc-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sc-head{display:flex;gap:10px;align-items:flex-start}
.sc-icon{font-size:var(--fs-2xl);line-height:1.2}
.sc-head h4{margin:0;font-size:var(--fs-sm)}
.sc-head p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-2xs);line-height:1.55}
.sc-params{display:flex;flex-wrap:wrap;gap:6px}
.sc-metrics{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.sc-metric{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-2xs)}
.sc-metric span{color:var(--muted)}
.sc-metric strong{font:500 var(--fs-2xs) 'JetBrains Mono'}
.strategy-card .sc-use{width:100%}
@media(max-width:1020px){.strategy-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.strategy-grid{grid-template-columns:1fr}.optimizer-head{flex-direction:column}}

/* ---------- Topbar: 2 nút cạnh nhau ---------- */
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Phạm vi tính toán (panel riêng, ảnh hưởng mọi phần) ---------- */
.scope-panel{border-color:#3a5a8a;background:linear-gradient(135deg,rgba(22,50,84,.55),rgba(16,28,45,.93))}
.scope-panel .section-title{align-items:center}
.scope-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 6px}
.scope-label{color:var(--muted);font:var(--fs-2xs) 'JetBrains Mono'}
.scope-row select{font:var(--fs-sm) 'JetBrains Mono';background:#0b1727;border:1px solid var(--line);color:var(--text);padding:9px 10px;border-radius:var(--radius-md)}
.segmented{display:inline-flex;background:#0b1727;border:1px solid var(--line);border-radius:var(--radius-md);padding:3px;gap:2px}
.seg-btn{border:0;background:transparent;color:var(--muted);font:600 var(--fs-2xs) Manrope;padding:7px 13px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s ease,color .15s ease}
.seg-btn.active{background:var(--accent);color:#062017}
.scope-manager{margin:12px 0 8px;padding:14px;background:#0c1829;border:1px dashed var(--line);border-radius:var(--radius-md)}
.scope-add-row{display:flex;gap:8px;flex-wrap:wrap}
.scope-add-row textarea{flex:1;min-width:200px;resize:vertical;font:var(--fs-xs) 'JetBrains Mono';background:#0b1727;border:1px solid var(--line);color:var(--text);padding:9px 10px;border-radius:var(--radius-md)}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip-item{display:inline-flex;align-items:center;gap:6px;background:#16253a;border:1px solid var(--line);border-radius:var(--radius-xl);padding:5px 6px 5px 12px;font:600 var(--fs-2xs) 'JetBrains Mono'}
.chip-item button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--fs-xs);padding:3px 6px;border-radius:50%}
.chip-item button:hover{color:var(--red);background:rgba(255,119,134,.12)}

/* ---------- Chọn Hôm nay / ngày quá khứ ---------- */
.date-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.chip{border:1px solid var(--line);background:#0b1727;color:var(--muted);font:600 var(--fs-2xs) Manrope;padding:9px 15px;border-radius:var(--radius-xl);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.chip:hover{color:var(--text)}
.chip.chip-active{background:var(--accent);color:#062017;border-color:var(--accent)}
.date-selected{color:var(--muted);font:var(--fs-2xs) 'JetBrains Mono'}

/* ---------- Lịch chọn ngày (tự viết) ---------- */
.cal-box{width:min(320px,92vw)}
.cal-header{display:flex;align-items:center;justify-content:space-between}
.cal-header span{font:700 var(--fs-sm) Manrope}
.cal-nav-btn{border:1px solid var(--line);background:#0b1727;color:var(--text);width:32px;height:32px;border-radius:var(--radius-md);font-size:var(--fs-lg);cursor:pointer}
.cal-nav-btn:hover{background:#16253a}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.cal-weekdays span{text-align:center;color:var(--muted);font:600 var(--fs-label) 'JetBrains Mono'}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:4px}
.cal-day{aspect-ratio:1;border:0;background:#0b1727;color:var(--text);border-radius:var(--radius-md);font:var(--fs-xs) 'JetBrains Mono';cursor:pointer}
.cal-day:hover:not(:disabled){background:#20334e}
.cal-day:disabled{color:#33455f;background:transparent;cursor:not-allowed}
.cal-day.cal-today{border:1px solid var(--accent)}
.cal-day.cal-selected{background:var(--accent);color:#062017;font-weight:700}

/* ---------- Bottom nav kiểu app di động (chỉ hiện trên mobile) ---------- */
.bottom-nav{display:none}

@media(max-width:760px){
  .quicknav{display:none}
  body{padding-bottom:74px}
  /* Bottom nav kiểu "pill" nổi (đen, icon SVG, mục active sáng lime) */
  .bottom-nav{
    display:flex;position:fixed;left:12px;right:12px;z-index:80;
    bottom:calc(10px + env(safe-area-inset-bottom));
    background:#0e1210;border:1px solid #23281f;border-radius:var(--radius-pill);
    padding:7px 8px;box-shadow:0 12px 32px rgba(0,0,0,.45);
  }
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#98a29a;text-decoration:none;font:600 var(--fs-label) Manrope;padding:4px 0;border-radius:var(--radius-pill)}
  .bottom-nav a:active{background:#1b211c}
  .bn-icon{width:34px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);transition:background .15s ease}
  .bn-icon svg{width:19px;height:19px}
  .bottom-nav a.bn-active{color:#e8f5cf}
  .bottom-nav a.bn-active .bn-icon{background:#cdf147;color:#131807}
  .scope-row{flex-direction:column;align-items:flex-start}
  .date-row{gap:8px}
  .chip{padding:8px 12px;font-size:var(--fs-2xs)}
}

/* ---------- Mobile overrides (đặt CUỐI file để thắng cascade) ---------- */
@media(max-width:760px){
  /* Bảng tín hiệu + danh mục dùng thẻ thiết kế riêng thay cho bảng xếp chồng */
  .has-cards{display:none !important}
  .mobile-cards{display:flex;flex-direction:column;gap:12px}
  .mobile-cards.hidden{display:none !important}

  /* Toast + FAB nằm trên bottom-nav, không che tab */
  #toast-host{bottom:calc(140px + env(safe-area-inset-bottom))}
  .fab{right:14px;bottom:calc(84px + env(safe-area-inset-bottom))}

  /* Chip lịch: nhãn ngắn */
  .chip-full{display:none}
  .chip-short{display:inline}

  /* Bảng user trong Quản trị -> thẻ xếp dọc (bỏ cuộn ngang) */
  #admin-users-table thead{display:none}
  #admin-users-table, #admin-users-table tbody,
  #admin-users-table tr, #admin-users-table td{display:block;width:100%}
  #admin-users-table tr{border-bottom:1px solid var(--line);padding:8px 0}
  #admin-users-table tr:last-child{border-bottom:0}
  #admin-users-table td{
    border:0;padding:5px 12px;display:flex;justify-content:space-between;
    align-items:center;gap:10px;white-space:normal;
  }
  #admin-users-table td[data-label]::before{
    content:attr(data-label);color:var(--muted);font:var(--fs-2xs) 'JetBrains Mono';flex:none;
  }
  #admin-users-table td:first-child{display:none} /* cột ID */
  #admin-users-table .admin-actions-cell{justify-content:flex-end}

  /* Panel 00 thu gọn: nút Sửa không co giãn */
  .scope-summary-row .btn{flex:none}

  /* Menu tài khoản trên mobile: neo CỐ ĐỊNH theo màn hình (không theo nút)
     để không bao giờ tràn mép trái/phải dù topbar xếp kiểu gì */
  .user-menu{position:fixed;left:auto;right:12px;top:64px;
    width:calc(100vw - 24px);max-width:340px;max-height:calc(100vh - 90px);overflow:auto}
}

/* ================================================================
   NÚT CHUYỂN NGÔN NGỮ + MỨC CHI TIẾT + THEME SÁNG
   (đặt cuối cùng để thắng cascade)
   ================================================================ */

.lang-toggle{
  border:1px solid var(--line);background:transparent;color:var(--text);
  font:800 var(--fs-2xs) 'JetBrains Mono';letter-spacing:.06em;cursor:pointer;
  border-radius:var(--radius-md);padding:8px 11px;
}
.lang-toggle:hover{border-color:var(--accent);color:var(--accent)}

.ui-pref-rows{display:flex;flex-direction:column;gap:12px}
.ui-pref-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- Kiểu hiển thị "Cơ bản": ẩn chi tiết kỹ thuật ---------- */
[data-density="simple"] .detail-col,
[data-density="simple"] .sc-chips,
[data-density="simple"] #watching-wrap,
[data-density="simple"] #bt-exit-reasons,
[data-density="simple"] #bt-chart-hint,
[data-density="simple"] .metric-extra{display:none !important}

/* Lý do 2 phiên bản: chi tiết (mặc định) / ngắn gọn <20 chữ (Cơ bản) */
.reason-casual{display:none}
[data-density="simple"] .reason-full{display:none}
[data-density="simple"] .reason-casual{display:inline;color:var(--text);font-family:Manrope;font-size:var(--fs-xs)}
[data-density="simple"] .sc-more{display:none}
[data-density="simple"] .sc-actions [data-bt]{display:none}
[data-density="simple"] .col-reason{min-width:200px}
[data-density="simple"] .trend-icon{font-size:var(--fs-2xl);cursor:pointer}

/* ---------- THEME SÁNG (phong cách fintech: nền sage, thẻ trắng, lime) ---------- */
:root[data-theme="light"]{
  --bg:#dde2c6;--panel:#ffffff;--line:#e3e6d3;--text:#15180f;--muted:#6e7663;
  --accent:#4d7c0f;--red:#d0454f;--amber:#a16207;
  --lime:#cdf147;--lime-text:#141807;--surface:#f5f7ea;--surface2:#eef1dd;
}
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] .panel{background:var(--panel);border-color:var(--line);box-shadow:0 6px 24px rgba(60,70,30,.08)}
[data-theme="light"] .quicknav{background:rgba(221,226,198,.92);border-bottom-color:#c9cfab;backdrop-filter:blur(6px)}
[data-theme="light"] .quicknav a:hover{background:#fff;color:var(--text)}
[data-theme="light"] .data-notice{background:var(--panel);border-color:var(--line);color:var(--muted)}
[data-theme="light"] .status,[data-theme="light"] .hint{color:var(--muted)}

[data-theme="light"] .btn.primary,[data-theme="light"] .primary{background:var(--lime);color:var(--lime-text)}
[data-theme="light"] .btn.secondary,[data-theme="light"] .secondary{background:var(--surface2);color:var(--text);border:1px solid #d8dcc0}
[data-theme="light"] .btn.ghost{border-color:#d8dcc0;color:var(--text)}
[data-theme="light"] .btn.ghost:hover{background:var(--surface)}
[data-theme="light"] .fab{background:var(--lime);color:var(--lime-text);box-shadow:0 10px 26px rgba(90,110,30,.35)}

[data-theme="light"] .segmented{background:var(--surface2);border:1px solid #d8dcc0}
[data-theme="light"] .seg-btn{color:var(--muted)}
[data-theme="light"] .seg-btn.active{background:var(--lime);color:var(--lime-text)}
[data-theme="light"] .chip{background:var(--surface2);border:1px solid #d8dcc0;color:var(--text)}
[data-theme="light"] .chip-active,[data-theme="light"] .chip.chip-active{background:var(--lime);border-color:var(--lime);color:var(--lime-text)}
[data-theme="light"] .chip-item{background:var(--surface2);border-color:#d8dcc0;color:var(--text)}

[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{
  background:#fff !important;color:var(--text) !important;border-color:#d8dcc0 !important;
}
[data-theme="light"] .metrics div,[data-theme="light"] .stat{background:var(--surface);border-color:var(--line)}
[data-theme="light"] td{border-bottom-color:#eef0e2}
[data-theme="light"] tr.bar-clickable:hover td,[data-theme="light"] .bar-row.bar-clickable:hover{background:var(--surface)}
[data-theme="light"] .bar-track{background:var(--surface2)}
[data-theme="light"] .bar-fill.bar-pos{background:#84cc16}
[data-theme="light"] .alert-item{background:var(--surface);border-color:var(--line)}
[data-theme="light"] .config-group{background:var(--surface);border-color:var(--line)}
[data-theme="light"] .v4v-chart{background:var(--surface)}
[data-theme="light"] .config-subnav{background:var(--surface2);border-color:#d8dcc0}
[data-theme="light"] .csub-btn.active{background:#fff;border-color:var(--lime);color:var(--text)}
[data-theme="light"] .admin-band{background:#fdf4d7;border-color:#e5d59a}
[data-theme="light"] .admin-band-badge{color:#8a6d1a}
[data-theme="light"] .cg-head p{color:var(--muted)}
[data-theme="light"] .strategy-card{background:var(--surface);border-color:var(--line)}
[data-theme="light"] .stale-badge{background:#fdf4d7;border-color:#e5d59a;color:#8a6d1a}

[data-theme="light"] .modal{background:rgba(50,55,35,.45)}
[data-theme="light"] .modal-box{background:var(--panel);border-color:var(--line);color:var(--text)}
[data-theme="light"] .login-overlay{background:var(--bg)}
[data-theme="light"] .login-box{background:var(--panel);border-color:var(--line)}
[data-theme="light"] .user-menu-btn{background:#fff;border-color:#d8dcc0}
[data-theme="light"] .user-menu-btn:hover{background:var(--surface)}
[data-theme="light"] .user-menu{background:#fff;border-color:var(--line);box-shadow:0 12px 30px rgba(60,70,30,.18)}
[data-theme="light"] .user-menu-item:hover{background:var(--surface)}
[data-theme="light"] .admin-create{background:var(--surface)}
[data-theme="light"] .toast{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:0 10px 26px rgba(60,70,30,.2)}
[data-theme="light"] .sig-card,[data-theme="light"] .mobile-cards>div{background:var(--surface);border-color:var(--line)}
[data-theme="light"] .sc-chips span{background:#fff;border-color:#d8dcc0;color:var(--muted)}
[data-theme="light"] .cal-box .cal-grid button{background:var(--surface);color:var(--text);border-color:var(--line)}
[data-theme="light"] .badge-muted{background:#e7ebd6;color:#6e7663}
[data-theme="light"] .badge-green{background:#e3f5c0;color:#3f6212}
[data-theme="light"] .badge-red{background:#fbe0e2;color:#b0343d}
[data-theme="light"] .badge-amber{background:#fdf0cf;color:#8a6d1a}
[data-theme="light"] .trend-flat{color:var(--muted)}

/* Bottom-nav pill giữ tông đen ở cả 2 theme (điểm nhấn như bản mẫu) */
[data-theme="light"] .bottom-nav{box-shadow:0 12px 32px rgba(60,70,30,.3)}

/* ---------- 05 · Playbook từng mã ---------- */
.pb-metrics{grid-template-columns:repeat(4,1fr)}
.pb-compare{
  display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin:16px 0;
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;background:#0c1829;
}
[data-theme="light"] .pb-compare{background:var(--surface)}
.pb-cmp-col{display:flex;flex-direction:column;gap:4px;flex:1;min-width:180px}
.pb-cmp-col small{color:var(--muted);font-size:var(--fs-2xs)}
.pb-cmp-col strong{font:600 var(--fs-2xl) 'JetBrains Mono'}
.pb-cmp-vs{align-self:center;color:var(--muted);font:600 var(--fs-2xs) Manrope}
.pb-cmp-verdict{flex-basis:100%;margin:4px 0 0;font:600 var(--fs-xs) Manrope;line-height:1.5}
.pb-chip{margin-top:6px;color:var(--accent);font-size:var(--fs-xs);line-height:1.65;font-weight:600}
@media(max-width:760px){.pb-metrics{grid-template-columns:repeat(2,1fr)}.pb-compare{flex-direction:column}.pb-cmp-vs{align-self:flex-start}}

/* In báo cáo: in panel kiểm chứng của ENGINE ĐANG CHỌN (V3 -> Playbook,
   V4 -> panel-v4-verify). :not(.engine-hidden) để rule hiện theo id không
   đè lên .engine-hidden{display:none !important} của engine còn lại. */
@media print{
  .topbar,.quicknav,.data-notice,.bottom-nav,.fab,#toast-host,
  main>.panel:not(#panel-playbook):not(#panel-v4-verify){display:none !important}
  body{background:#fff;color:#000}
  #panel-playbook:not(.engine-hidden),
  #panel-v4-verify:not(.engine-hidden){display:block !important;border:0;background:#fff;color:#000}
  #panel-playbook .btn,#panel-playbook .segmented,#panel-playbook details,
  #panel-v4-verify .btn,#panel-v4-verify details{display:none}
  #panel-playbook .table-wrap{overflow:visible;border-color:#ccc}
  #panel-v4-verify .v4v-chart,#panel-v4-verify .metrics div{background:#fff;border-color:#ccc}
}

/* ================================================================
   CHẾ ĐỘ TRANG (tab): mỗi lúc chỉ hiện MỘT panel — hết cuộn dài.
   Thanh "Phạm vi tính toán" là ngữ cảnh chung nên luôn hiện.
   ================================================================ */
main>.panel{display:none}
main>.panel.scope-panel{display:block}
main>.panel.view-active{display:block}

/* Thanh tab desktop: to, rõ trạng thái đang chọn */
.quicknav a{font:700 var(--fs-xs) Manrope;padding:9px 16px}
.quicknav a.tab-active{background:var(--accent);color:#08130c}
[data-theme="light"] .quicknav a.tab-active{background:var(--lime);color:var(--lime-text)}

/* ---------- Gói 6 mục: welcome, tra cứu, sổ lệnh, badge, chart ---------- */
.welcome-card{
  border:1px solid var(--accent);border-radius:var(--radius-lg);padding:16px 18px;margin:14px 0;
  background:rgba(105,230,178,.06);
}
[data-theme="light"] .welcome-card{background:#f3fadd;border-color:#a3c944}
.wc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.welcome-card ol{margin:0;padding-left:20px;color:var(--muted);line-height:1.8;font-size:var(--fs-xs)}

.chip-tm{border-color:var(--accent)}

.lookup-row{display:flex;gap:8px;margin:14px 0 6px}
.lookup-row input{
  flex:1;max-width:340px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-md);background:#0b1727;color:var(--text);font:var(--fs-xs) 'JetBrains Mono';
}
#lookup-card{margin:8px 0 4px}
#lookup-card .sig-card{max-width:720px}

.pos-metrics,.jn-metrics{grid-template-columns:repeat(4,1fr);margin-top:18px}
@media(max-width:760px){.pos-metrics,.jn-metrics{grid-template-columns:repeat(2,1fr)}}

.tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;margin-left:6px;border-radius:var(--radius-md);
  background:var(--red);color:#fff;font:700 var(--fs-label) Manrope;vertical-align:middle;
}
.bottom-nav a{position:relative}
.bottom-nav .tab-badge{position:absolute;top:0;right:6px;margin:0}

.mini-chart{margin:10px 0 4px}
.chart-box{position:relative}
.chart-svg{width:100%;height:auto;display:block;background:#0b1727;border:1px solid var(--line);border-radius:var(--radius-md)}
[data-theme="light"] .chart-svg{background:#fbfcf4}
.chart-lbl{font:var(--fs-label) 'JetBrains Mono';fill:var(--muted)}
.ch-grid{stroke:var(--line);stroke-width:0.6;opacity:0.6}
.ch-cross.hidden{display:none}
.chart-tip{
  position:absolute;top:8px;pointer-events:none;z-index:5;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:7px 10px;font:var(--fs-2xs) 'JetBrains Mono';line-height:1.6;color:var(--muted);
  box-shadow:0 6px 18px rgba(0,0,0,.35);min-width:150px;
}
.chart-tip strong{color:var(--text)}
[data-theme="light"] .chart-tip{box-shadow:0 6px 18px rgba(60,70,30,.2)}
.chart-tip.hidden{display:none}
.chart-range{margin-top:4px}

/* Hộp giải thích nút Áp dụng playbook */
.pb-apply-box{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;margin:14px 0;
  background:#0c1829;
}
[data-theme="light"] .pb-apply-box{background:var(--surface)}
.pb-apply-box .hint{margin-top:10px;line-height:1.6;font-size:var(--fs-2xs)}

/* ---------- Mã bấm được (mở tra cứu chi tiết + chart) ---------- */
.sym-link{cursor:pointer;border-bottom:1px dotted var(--muted)}
.sym-link:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- "Gần đạt điều kiện" dạng thẻ nén trên mobile ---------- */
#watching-cards{gap:8px}
.watch-item{
  border:1px solid var(--line);border-radius:var(--radius-md);padding:9px 12px;background:#0c1829;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;cursor:pointer;
}
.watch-item:active{border-color:var(--accent)}
.watch-item .wi-sym{font-weight:800;font-size:var(--fs-md)}
.watch-item .wi-price{font-family:'JetBrains Mono'}
.watch-item .wi-open{margin-left:auto;color:var(--muted);font-size:var(--fs-xl);line-height:1}
.watch-item .wi-sub{width:100%;color:var(--muted);font:var(--fs-2xs) 'JetBrains Mono';white-space:normal}

/* ---------- Banner chiến lược (luôn hiện trên mọi trang) ---------- */
.strat-banner{
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  padding:12px 16px;border:1px solid #2c615e;border-radius:var(--radius-lg);
  background:rgba(16,28,45,.93);color:var(--text);text-decoration:none;
  font:var(--fs-xs) Manrope;cursor:pointer;
}
.strat-banner:hover{border-color:var(--accent)}
.strat-banner .sb-item{font-weight:700}
.strat-banner .sb-muted{color:var(--muted);font-weight:500}
.strat-banner .sb-go{margin-left:auto;color:var(--accent);font-weight:800;white-space:nowrap}
[data-theme="light"] .strat-banner{background:var(--surface)}

/* ---------- Thẻ khẩu vị đầu tư ---------- */
.appetite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.appetite-card{
  text-align:left;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;
  background:#0c1829;color:var(--text);cursor:pointer;display:flex;flex-direction:column;gap:8px;
  font:var(--fs-sm) Manrope;transition:border-color .15s, transform .1s;
}
.appetite-card:hover{border-color:var(--accent)}
.appetite-card:disabled{opacity:.6;cursor:wait}
.appetite-card strong{font-size:var(--fs-lg)}
.appetite-card .ap-desc{color:var(--muted);font-size:var(--fs-2xs);line-height:1.55}
.appetite-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.appetite-card.active strong::after{content:" ✓";color:var(--accent)}
[data-theme="light"] .appetite-card{background:var(--surface)}
@media(max-width:760px){.appetite-grid{grid-template-columns:1fr}}

/* ---------- Hộp "Nâng cao" thu gọn ---------- */
.adv-box{margin-top:20px;border:1px dashed var(--line);border-radius:var(--radius-lg);padding:4px 16px 14px}
.adv-box>summary{cursor:pointer;padding:12px 0;font-weight:800;color:var(--muted)}
.adv-box[open]>summary{color:var(--text)}

/* ---------- Tuỳ chọn giao diện trong menu avatar ---------- */
.user-menu-prefs{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.user-menu-prefs .ui-pref-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.user-menu-prefs .seg-btn{padding:6px 9px;font-size:var(--fs-2xs)}

/* Cảnh báo kết quả backtest cũ (phạm vi/kỳ hạn đã đổi so với lúc chạy) */
.bt-stale-note{border:1px solid #6b5b2a;background:rgba(255,202,106,.08);color:var(--amber);
  border-radius:var(--radius-md);padding:10px 14px;margin:12px 0;font:var(--fs-2xs) 'JetBrains Mono'}
.bt-stale-note.hidden{display:none}

/* Playbook: câu dẫn chính dễ hiểu trên khối so sánh */
.pb-lead{font-size:var(--fs-md);line-height:1.6;margin:4px 0 2px}
.pb-compare details.intro-more{grid-column:1 / -1;margin-top:4px}
.pb-compare .pb-lead,.pb-compare>.hint{flex-basis:100%;margin:0}
.pb-compare details.intro-more{flex-basis:100%}

/* ---------- Dải tổng quan thị trường (VN-Index + độ rộng) ---------- */
.market-strip{
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius-md);background:#0c1829;
  padding:10px 14px;margin:12px 0 4px;font:var(--fs-2xs) 'JetBrains Mono';
}
.market-strip .ms-val{font-weight:700}
.market-strip .ms-muted{color:var(--muted)}
.market-strip .ms-note{color:var(--muted);font-family:Manrope;flex-basis:100%;font-size:var(--fs-2xs)}
.ms-spark{width:72px;height:20px;flex:none}
[data-theme="light"] .market-strip{background:var(--surface)}
@media(min-width:761px){.market-strip .ms-note{flex-basis:auto;margin-left:auto;text-align:right}}

/* ---------- Trang Yêu thích: nhóm theo mức sẵn sàng MUA ---------- */
.wl-h{margin:22px 0 10px}
#wl-groups .mobile-cards{display:flex;flex-direction:column;gap:8px}
#wl-groups .watch-item{cursor:pointer}
#wl-groups .wl-buy-item{border-color:#2c615e;background:rgba(105,230,178,.05)}
#wl-groups .watch-item .pb-chip{width:100%;margin:2px 0 0}
#wl-groups .star-btn{font-size:var(--fs-lg)}

/* Playbook v3: cột khẩu vị đang áp + 3 dòng chỉ số 1/2/3 năm + nút Mua watchlist */
.pb-active-col{background:rgba(105,230,178,.06);box-shadow:inset 2px 0 0 var(--accent)}
.pb-stat3{display:flex;flex-direction:column;gap:2px;margin-top:6px;font:var(--fs-2xs) 'JetBrains Mono';color:var(--muted)}
.wl-actions{width:100%;margin-top:4px}
.wl-buy-btn{min-width:90px}

/* Disclaimer cuối trang */
.app-disclaimer{color:var(--muted);font-size:var(--fs-2xs);line-height:1.6;margin:20px 0 0;
  padding:12px 4px;border-top:1px solid var(--line)}

/* Chip "Cách chơi riêng / Kế hoạch bán" phải DỄ ĐỌC -- đè mọi rule .hint
   phía trên (đặt cuối file, kèm !important vì chip luôn mang class hint) */
.pb-chip, .hint.pb-chip{
  font-size:var(--fs-xs) !important;
  line-height:1.65 !important;
  font-weight:600;
  color:var(--accent);
}

/* Tổng quan quét trên trang Chiến lược */
.ss-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.ss-box{border:1px solid var(--line);background:#0c1829;border-radius:var(--radius-md);padding:12px}
.ss-box small{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-bottom:4px}
.ss-box strong{font:600 var(--fs-xl) 'JetBrains Mono'}
.ss-box .hint{display:block;margin-top:6px;line-height:1.5}
.ss-box.ss-ok{border-color:#2c615e;background:rgba(105,230,178,.05)}
[data-theme="light"] .ss-box{background:var(--surface)}
@media(max-width:1020px){.ss-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.ss-grid{grid-template-columns:1fr 1fr}.ss-box .hint{font-size:var(--fs-label)}}

/* ==================== TRANG TÌM KIẾM + HỒ SƠ CỔ PHIẾU ==================== */
/* Ô tìm kiếm lớn, nổi bật */
.sr-search{margin-top:14px}
/* max-width:340px của .lookup-row là cho ô tra cứu nhỏ đời cũ -- ở trang Tìm
   kiếm ô nhập phải trải hết bề ngang (mobile: bằng đúng nút Tra cứu bên dưới) */
.sr-search input{font-size:var(--fs-lg);padding:14px 16px;border-radius:var(--radius-lg);max-width:none}
.sr-search .btn{font-size:var(--fs-md);padding:14px 22px;border-radius:var(--radius-lg);white-space:nowrap}

/* Chips gợi ý "Đáng chú ý hôm nay" */
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sr-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:#0c1829;color:var(--text);border-radius:var(--radius-pill);padding:7px 13px;
  font:inherit;font-size:var(--fs-xs);cursor:pointer;transition:transform .12s,border-color .12s}
.sr-chip:hover{transform:translateY(-1px);border-color:var(--accent)}
.sr-chip b{font-family:'JetBrains Mono';font-size:var(--fs-sm)}
.sr-chip span{color:var(--muted);font-family:'JetBrains Mono';font-size:var(--fs-2xs)}
.sr-chip em{font-style:normal;font-size:var(--fs-2xs);color:var(--muted)}
.sr-chip-buy{border-color:#2c615e;background:rgba(105,230,178,.07)}
.sr-chip-buy em{color:var(--accent)}

/* Hero hồ sơ: viền màu theo kết luận */
.sp-hero{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 18px;margin-top:16px;background:#0c1829}
.sp-hero.sp-buy{border-left-color:var(--accent);background:rgba(105,230,178,.05)}
.sp-hero.sp-wait{border-left-color:#e8b45a;background:rgba(232,180,90,.05)}
.sp-hero.sp-no{border-left-color:var(--red);background:rgba(240,101,101,.04)}
.sp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-sym{font:600 var(--fs-3xl) 'JetBrains Mono';letter-spacing:1px}
.sp-price{font:500 var(--fs-2xl) 'JetBrains Mono';color:var(--muted)}
.sp-spacer{flex:1}
.sp-hero h3{margin:16px 0 8px;font-size:var(--fs-sm)}

/* Checklist mua */
.ck-list{display:flex;flex-direction:column;gap:6px}
.ck-row{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;border-radius:var(--radius-md);
  font-size:var(--fs-xs);line-height:1.5;border-left:3px solid transparent;background:rgba(255,255,255,.02)}
.ck-ok{border-left-color:var(--accent);background:rgba(105,230,178,.06)}
.ck-no{border-left-color:var(--red);background:rgba(240,101,101,.06)}
.ck-warn{border-left-color:#e8b45a;background:rgba(232,180,90,.07)}
.ck-icon{flex:0 0 auto;font-size:var(--fs-sm);line-height:1.5}

/* Kết luận */
.ck-verdict{margin-top:12px;padding:12px 14px;border-radius:var(--radius-md);font-weight:700;font-size:var(--fs-sm);line-height:1.5}
.ck-v-buy{background:rgba(105,230,178,.14);color:var(--accent);border:1px solid #2c615e}
.ck-v-wait{background:rgba(232,180,90,.12);color:#e8b45a;border:1px solid rgba(232,180,90,.4);font-weight:600}
.ck-v-no{background:rgba(240,101,101,.1);color:var(--red);border:1px solid rgba(240,101,101,.35);font-weight:600}

/* Kế hoạch tiền: 3 ô lớn */
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.mp-tile{border:1px solid var(--line);border-radius:var(--radius-lg);padding:13px 14px;background:#0c1829;
  display:flex;flex-direction:column;gap:4px}
.mp-tile small{color:var(--muted);font-size:var(--fs-2xs)}
.mp-tile strong{font:600 var(--fs-2xl) 'JetBrains Mono'}
.mp-tile span{font-size:var(--fs-2xs)}
.mp-tp{border-color:#2c615e;background:rgba(105,230,178,.05)}
.mp-sl{border-color:rgba(240,101,101,.4);background:rgba(240,101,101,.04)}

/* 3 chiến lược theo khẩu vị */
.sp-strat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.sp-strat{border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 12px;background:#0c1829}
.sp-strat small{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-bottom:7px;text-transform:uppercase;letter-spacing:.4px}
.sp-strat.sp-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.sp-strat.sp-active small{color:var(--accent)}

/* Lịch sử với mã này */
.sp-record{display:flex;flex-direction:column;gap:6px;margin-top:8px}

#panel-search h3{margin:22px 0 8px;font-size:var(--fs-sm)}
[data-theme="light"] .sr-chip,[data-theme="light"] .sp-hero,[data-theme="light"] .mp-tile,[data-theme="light"] .sp-strat{background:var(--surface)}

@media(max-width:760px){
  .mp-grid,.sp-strat3{grid-template-columns:1fr}
  .sp-sym{font-size:var(--fs-2xl)}.sp-price{font-size:var(--fs-xl)}
  .sp-head .btn.primary{padding:9px 16px}
  .sr-search{flex-direction:column}
  .sr-search input,.sr-search .btn{width:100%}
}

/* ==================== THANH NGỮ CẢNH GỘP (dữ liệu + chiến lược = 1 hộp) ==================== */
.context-bar{
  display:flex;flex-wrap:wrap;align-items:center;
  border:1px solid #294a62;border-radius:var(--radius-lg);background:#11263a;overflow:hidden;
}
.context-bar .data-notice{flex:1 1 400px;margin:0;padding:10px 14px;background:transparent;border:0;border-radius:0}
.context-bar .strat-banner{flex:1 1 300px;margin:0;padding:10px 14px;background:transparent;border:0;border-radius:0;
  border-left:1px solid #294a62;align-self:stretch}
.context-bar .strat-banner:hover{background:rgba(105,230,178,.05)}
[data-theme="light"] .context-bar{background:var(--panel);border-color:var(--line)}
@media(max-width:760px){
  .context-bar .data-notice,.context-bar .strat-banner{flex-basis:100%;padding:8px 12px;font-size:var(--fs-2xs)}
  .context-bar .strat-banner{border-left:0;border-top:1px solid #294a62}
}

/* ==================== NÚT ✓ MUA NGANG HÀNG MÃ (trang Hôm nay) ==================== */
.sc-row1 .btn.primary{flex:0 0 auto;padding:8px 14px;margin-left:8px}
.watch-item .wi-buy{margin-left:auto;flex:0 0 auto;padding:7px 13px}
.watch-item .wi-open{margin-left:6px}

/* ==================== NAV DESKTOP THIẾT KẾ LẠI (pill hiện đại) ==================== */
.quicknav{
  gap:6px;padding:12px 26px;
  background:rgba(9,17,31,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(38,55,82,.7);
}
.quicknav a{
  font:600 var(--fs-xs) Manrope;padding:9px 18px;border-radius:var(--radius-pill);
  color:var(--muted);border:1px solid transparent;letter-spacing:.01em;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
.quicknav a:hover{background:#16253a;color:var(--text);border-color:var(--line);transform:translateY(-1px)}
.quicknav a.tab-active{
  background:linear-gradient(180deg,var(--accent),#4fd39c);color:#062017;font-weight:800;
  box-shadow:0 4px 16px rgba(105,230,178,.28);transform:none;
}

/* ==================== FORM QUẢN TRỊ: input số cùng tông, hết chồng lệch ==================== */
.admin-create-row input[type=number]{
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--bg);color:var(--text);font:var(--fs-xs) 'JetBrains Mono';
}
.admin-compact .admin-create-row{row-gap:10px;margin-bottom:8px}
.admin-compact .admin-create-row:last-of-type{margin-bottom:0}
.admin-create-row .admin-create-title{flex:0 0 auto;min-width:190px}

/* ==================== THANH NGỮ CẢNH: mobile chỉ hiện ở trang Cấu hình ==================== */
@media(max-width:760px){
  body:not([data-view="config"]) .context-bar{display:none}
}

/* ==================== MOBILE: BỚT LỚP VIỀN LỒNG NHAU ==================== */
/* Panel ngoài thành nền phẳng, KHÔNG viền -> thẻ con (mã, VN-Index, khẩu vị,
   hồ sơ...) là lớp viền duy nhất; nội dung rộng thêm ~34px mỗi bên */
@media(max-width:760px){
  .panel{background:transparent;border:0;border-radius:0;padding:6px 0 12px;box-shadow:none}
  main{gap:6px}
  /* các khối con vốn dựa vào padding của panel -> tự thở bằng lề riêng */
  .section-title,.intro{padding:0 2px}
  /* welcome card viền xanh dày -> nhẹ lại */
  .welcome-card{border-width:1px}
  /* bảng trong panel phẳng vẫn giữ khung riêng của nó (table-wrap) */
}

/* Mobile: hộp nhóm cấu hình (config-group) cũng phẳng -- thẻ khẩu vị /
   ô tổng hợp bên trong tự mang viền, khỏi viền bọc ngoài */
@media(max-width:760px){
  .config-group{background:transparent;border:0;border-radius:0;padding:2px 0;margin:10px 0}
}

/* Thông điệp zen khi không có tín hiệu mua -- ngay dưới "Hôm nay cần làm gì?" */
.zen-msg{
  margin:12px 0 2px;padding:13px 16px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(105,230,178,.08),rgba(110,168,254,.06));
  border:1px solid rgba(105,230,178,.25);
  font-size:var(--fs-sm);line-height:1.65;color:var(--text);
}
@media(max-width:760px){.zen-msg{font-size:var(--fs-xs);padding:11px 13px}}

/* ==================== ANIMATION GÓI 1 (rủi ro thấp) ==================== */
/* Chỉ transform/opacity/background -- mượt trên mobile; tôn trọng cài đặt
   "giảm chuyển động" của hệ điều hành */

/* 1. Skeleton shimmer trong lúc chờ dữ liệu */
.skel{
  border-radius:var(--radius-md);margin-bottom:8px;
  background:linear-gradient(90deg,#101c2d 25%,#1c2f4a 50%,#101c2d 75%);
  background-size:200% 100%;animation:skelWave 1.1s linear infinite;
}
@keyframes skelWave{to{background-position:-200% 0}}
.skel-stack{margin-top:12px}

/* 2. Thẻ trượt vào so le (tối đa 8 thẻ đầu, còn lại vào cùng lượt) */
@media (prefers-reduced-motion: no-preference){
  .mobile-cards>*,#watching-cards>*,#wl-groups .watch-item,.sr-chips>*{
    animation:cardIn .3s ease backwards;
  }
  .mobile-cards>*:nth-child(1),#watching-cards>*:nth-child(1){animation-delay:0ms}
  .mobile-cards>*:nth-child(2),#watching-cards>*:nth-child(2){animation-delay:40ms}
  .mobile-cards>*:nth-child(3),#watching-cards>*:nth-child(3){animation-delay:80ms}
  .mobile-cards>*:nth-child(4),#watching-cards>*:nth-child(4){animation-delay:120ms}
  .mobile-cards>*:nth-child(5),#watching-cards>*:nth-child(5){animation-delay:160ms}
  .mobile-cards>*:nth-child(6),#watching-cards>*:nth-child(6){animation-delay:200ms}
  .mobile-cards>*:nth-child(7),#watching-cards>*:nth-child(7){animation-delay:240ms}
  .mobile-cards>*:nth-child(n+8),#watching-cards>*:nth-child(n+8){animation-delay:280ms}
  .zen-msg{animation:cardIn .45s ease backwards}
}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 3. Giá nháy xanh/đỏ khi đổi giữa 2 lần quét (như bảng điện) */
.px-up{animation:pxUp 1.4s ease-out;border-radius:var(--radius-sm)}
.px-down{animation:pxDown 1.4s ease-out;border-radius:var(--radius-sm)}
@keyframes pxUp{0%{background:rgba(105,230,178,.45)}100%{background:transparent}}
@keyframes pxDown{0%{background:rgba(255,119,134,.45)}100%{background:transparent}}

/* 4. Ngôi sao pop khi bấm yêu thích */
.star-btn{transition:transform .15s ease}
.star-btn:active{transform:scale(1.2)}
.star-pop{animation:starPop .32s ease}
@keyframes starPop{45%{transform:scale(1.5) rotate(10deg)}}

/* 5. Chấm LIVE phập phồng khi đang trong phiên */
.live-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#ff5563;vertical-align:baseline;
  animation:livePulse 1.6s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(255,85,99,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,85,99,0)}
  100%{box-shadow:0 0 0 0 rgba(255,85,99,0)}
}

/* Tắt toàn bộ khi user chọn "giảm chuyển động" */
@media (prefers-reduced-motion: reduce){
  .skel,.px-up,.px-down,.star-pop,.live-dot,.zen-msg{animation:none !important}
  .star-btn{transition:none}
}

/* Thẻ mã bấm được cả thẻ -> phản hồi khi chạm + con trỏ nhất quán */
.sig-card{cursor:pointer}
.sig-card:active,.watch-item:active{border-color:var(--accent)}
/* các phần tử có hành vi riêng bên trong thẻ giữ con trỏ của chúng */
.sig-card button,.watch-item button,.sig-card a,.watch-item a{cursor:pointer}
.sc-reason,.wi-sub{cursor:auto}

/* ==================== CỠ CHỮ LỚN (nút "A" trên thanh trên cùng) ==================== */
/* Nút chuyển: hai chữ A to/nhỏ, cái đang dùng sáng lên */
.font-toggle{display:inline-flex;align-items:baseline;gap:3px;line-height:1}
.font-toggle .ft-a-sm{font-size:var(--fs-2xs)}
.font-toggle .ft-a-lg{font-size:var(--fs-lg);font-weight:800}
.font-toggle.active{background:var(--accent);color:#062017;border-color:var(--accent)}
[data-font="lg"] .font-toggle .ft-a-sm{opacity:.5}
.font-toggle:not(.active) .ft-a-lg{opacity:.55}

/* Phóng to nội dung: zoom giữ nguyên tỉ lệ chữ/khoảng cách/biểu đồ, không vỡ
   layout như đổi từng font-size. <main> không chứa phần tử position:fixed nên
   bottom-nav / modal / toast phải chỉnh riêng bên dưới. */
[data-font="lg"] main{zoom:1.15}
[data-font="lg"] .topbar h1{font-size:var(--fs-3xl)}
[data-font="lg"] .quicknav a{font-size:var(--fs-md);padding:10px 20px}
[data-font="lg"] .modal-box{zoom:1.12}
[data-font="lg"] .toast{font-size:var(--fs-md)}
[data-font="lg"] .user-menu{zoom:1.1}
[data-font="lg"] .bottom-nav .bn-label{font-size:var(--fs-2xs)}
[data-font="lg"] .bottom-nav .bn-icon svg{width:23px;height:23px}

@media(max-width:760px){
  /* mobile: đẩy mạnh hơn chút vì màn hình nhỏ, chữ gốc đã sát ngưỡng đọc */
  [data-font="lg"] main{zoom:1.2}
  [data-font="lg"] .topbar h1{font-size:var(--fs-2xl)}
}

/* Băng "⏳ đang chạy backtest…" (thay cho cảnh báo kết quả cũ -- app tự chạy) */
.bt-run-note{
  display:flex;align-items:center;gap:9px;
  border-color:#2c615e !important;background:rgba(105,230,178,.08) !important;
  color:var(--accent) !important;
}
.bt-spin{
  width:13px;height:13px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(105,230,178,.3);border-top-color:var(--accent);
  animation:btSpin .7s linear infinite;
}
@keyframes btSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.bt-spin{animation:none}}

/* ============================================================
   ACCESSIBILITY (WCAG 2.2 AA)
   ============================================================ */

/* --- 1. Focus ring: WCAG 2.4.7 (AA). Trước đây KHÔNG có -> người dùng bàn
   phím không biết đang đứng ở đâu. :focus-visible = chỉ hiện khi điều hướng
   bằng bàn phím, chuột bấm không bị viền xấu. --- */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
/* nút nền xanh: viền xanh trên nền xanh sẽ chìm -> đổi sang trắng */
.btn.primary:focus-visible,.chip-active:focus-visible,
.bn-active:focus-visible,.tab-active:focus-visible,.font-toggle.active:focus-visible{
  outline-color:#fff;
}
/* Bỏ qua nội dung lặp: hiện ra khi tab lần đầu (chuẩn WCAG 2.4.1) */
.skip-link{
  position:absolute;left:var(--sp-3);top:-60px;z-index:500;
  background:var(--accent);color:#062017;font:800 var(--fs-sm) Manrope;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  transition:top .15s ease;
}
.skip-link:focus{top:var(--sp-3)}

/* --- 2. Vùng chạm >= 44x44 (Apple HIG / WCAG 2.5.5).
   Kỹ thuật: pseudo-element phủ vùng chạm -> KÍCH THƯỚC NHÌN THẤY giữ nguyên
   (thẻ vẫn nén, nhiều mã trên 1 màn), nhưng ngón tay bấm không trượt. --- */
@media (pointer: coarse){
  .star-btn,.dn-toggle,.sc-more,.icon-btn{position:relative}
  .star-btn::after,.dn-toggle::after,.sc-more::after,.icon-btn::after{
    content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    height:var(--tap-min);width:var(--tap-min);
  }
  /* Sao nằm sát tên mã -> vùng chạm rộng 40px (không phải 44) để không "ăn"
     sang chữ bên cạnh; vẫn vượt xa mức tối thiểu 24px của WCAG 2.5.8 */
  .star-btn::after{width:40px}
  /* Mọi nút hành động: cao >= 44 thật, không chỉ vùng ẩn */
  .btn,.btn.btn-sm{min-height:var(--tap-min)}
  .lang-toggle,.user-menu-btn,.font-toggle{min-height:var(--tap-min);min-width:var(--tap-min)}
  .chip{min-height:var(--tap-min)}
  .quicknav a{min-height:var(--tap-min);display:flex;align-items:center}
  .user-menu-item{min-height:var(--tap-min)}
}
/* Chuột: giữ mức tối thiểu 24x24 của WCAG 2.5.8 (AA) */
.star-btn{min-width:24px;min-height:24px}


/* ==================== MÀN ĐĂNG NHẬP (tối giản, chuyên nghiệp) ====================
   Nguyên tắc: 1 slogan + 1 dòng giải thích + 3 gạch đầu dòng NGẮN + form.
   Ít chữ để mắt đi thẳng tới ô nhập, không phải "đọc trang bán hàng". */
.login-box{
  width:min(400px,92vw);text-align:left;align-items:stretch;
  gap:0;padding:var(--sp-8) var(--sp-6);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* Logo chữ + dấu hiệu: tạo cảm giác "sản phẩm", không phải form trần */
.login-brand{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.login-mark{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:var(--radius-md);background:rgba(105,230,178,.12);
  border:1px solid #2c615e;color:var(--accent);
}
.login-mark svg{width:18px;height:18px}
.login-brand-name{font:800 var(--fs-xs) Manrope;letter-spacing:.02em;color:var(--muted)}

.login-slogan{
  font-size:var(--fs-2xl);line-height:1.25;letter-spacing:-.01em;
  margin:0 0 var(--sp-3);
}
.login-note{
  margin:0 0 var(--sp-5);color:var(--muted);
  font-size:var(--fs-xs);line-height:1.6;
}

/* 3 điểm giá trị: mỗi dòng 1 ý ngắn, dấu ✓ xanh — không mô tả dài dòng */
.login-props{
  list-style:none;margin:0 0 var(--sp-6);padding:0;
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.login-props li{
  position:relative;padding-left:24px;
  color:var(--text);font-size:var(--fs-xs);line-height:1.5;
}
.login-props li::before{
  content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:800;
}

.local-login{width:100%;display:flex;flex-direction:column;gap:var(--sp-2)}
.local-login input{
  width:100%;padding:13px var(--sp-4);
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--bg);color:var(--text);font:var(--fs-sm) Manrope;
}
.local-login input::placeholder{color:var(--muted)}
.local-login .btn{width:100%;font-size:var(--fs-sm);padding:13px}
.local-login .btn.primary{margin-top:var(--sp-2)}

.login-disc{
  margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-2xs);line-height:1.5;text-align:center;
}
.login-hint{display:none}   /* gộp vào nút "Tạo tài khoản mới" -- bỏ đoạn giải thích */

@media(max-width:760px){
  .login-box{padding:var(--sp-6) var(--sp-5);max-height:92vh;overflow-y:auto}
  .login-slogan{font-size:var(--fs-xl)}
}

/* Tên tác giả: nhỏ, khiêm tốn -- ở chân màn đăng nhập và chân app */
.login-author,.app-author{
  margin:var(--sp-3) 0 0;text-align:center;
  color:var(--muted);font-size:var(--fs-2xs);opacity:.75;
}
.login-author strong,.app-author strong{color:var(--accent);font-weight:700;letter-spacing:.01em}
.app-author{margin-bottom:var(--sp-5)}

/* ============================================================
   iOS SAFARI: KHÔNG ĐỂ TỰ PHÓNG TO KHI CHẠM Ô NHẬP
   Safari trên iPhone/iPad tự zoom trang khi ô nhập có cỡ chữ < 16px,
   và KHÔNG tự thu lại -> user phải pinch out mỗi lần đăng nhập.
   Cách chữa đúng: cho mọi ô nhập >= 16px trên thiết bị cảm ứng.
   (KHÔNG dùng maximum-scale=1 / user-scalable=no trong thẻ viewport —
    cách đó chặn luôn pinch-zoom của người dùng = vi phạm WCAG 1.4.4.)
   Cần !important vì các luật cũ dùng font shorthand có độ ưu tiên cao hơn.
   ============================================================ */
@media (pointer: coarse){
  input,select,textarea,
  .local-login input,.config input,.cg-grid input,.modal-box input,
  .admin-create-row input,.bt-controls select,.bt-controls input[type=date],
  .bt-period-inline select,.scope-row select,.optimizer select,.lookup-row input{
    font-size:16px !important;
  }
}

/* ============ ENGINE V3/V4 SELECTOR + rổ V4 (bảng màu app: mint/hồng) ============ */
.engine-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:14px}
@media(max-width:560px){.engine-grid{grid-template-columns:1fr}}
.engine-card{display:flex;flex-direction:column;gap:8px;text-align:left;padding:16px;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:#0c1829;cursor:pointer;transition:.15s}
.engine-card:hover{border-color:var(--accent)}
.engine-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:#0e2033}
.engine-card strong{font-size:var(--fs-md);color:var(--text)}
.engine-card .eng-desc{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.engine-card .eng-pro,.engine-card .eng-con{font-size:var(--fs-2xs);line-height:1.55}
.engine-card .eng-pro{color:var(--accent)}
.engine-card .eng-con{color:var(--amber)}
#engine-disclaimer{margin-top:10px;line-height:1.6}
#appetite-group.dimmed{opacity:.45;pointer-events:none}
.engine-hidden{display:none !important}

.v4-head h3{margin:0 0 4px;color:var(--text)}
.v4-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.v4-stat{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:#0c1829;text-align:center}
.v4-stat small{display:block;font-size:var(--fs-label,11px);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.v4-stat strong{display:block;font-size:var(--fs-lg);font-family:'JetBrains Mono';margin:3px 0;color:var(--text)}
.v4-stat strong.neg{color:var(--red)}
.v4-stat .hint{font-size:var(--fs-label,11px)}
.v4-warn{font-size:var(--fs-xs);line-height:1.55;padding:10px 13px;margin-bottom:14px;
  border-left:3px solid var(--amber);background:rgba(255,202,106,.07);border-radius:var(--radius-sm);color:var(--muted)}
.v4-list{display:flex;flex-direction:column;gap:8px}
.v4-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:6px 12px;align-items:center;padding:10px 13px}
.v4-row .v4-sym{font-weight:800;font-size:var(--fs-md);color:var(--text)}
.v4-row .v4-sec{font-size:var(--fs-2xs);color:var(--muted)}
.v4-row .v4-px,.v4-row .v4-stop{font-size:var(--fs-2xs);font-family:'JetBrains Mono';white-space:nowrap;color:var(--muted)}
.v4-row .v4-stop{color:var(--red)}
@media(max-width:560px){.v4-row{grid-template-columns:auto 1fr;gap:2px 10px}.v4-row .v4-px,.v4-row .v4-stop{grid-column:2;text-align:right}}

/* ---------- CHI TIẾT MÃ MỞ TẠI CHỖ (flow chung V3/V4) ---------- */
.inline-detail{border:1px solid var(--accent);border-radius:var(--radius-lg);background:#0c1829;
  padding:16px 18px;margin:6px 0 12px;animation:inl-in .18s ease-out}
@keyframes inl-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.inline-detail-row>td{padding:0 !important;border-bottom:0 !important;background:transparent}
.inline-detail-row .inline-detail{margin:4px 0 10px}
.inl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.inl-sym{font-size:var(--fs-xl);font-weight:800}
.inl-px{font:600 var(--fs-lg) 'JetBrains Mono'}
.inl-reason{margin:0 0 10px;line-height:1.6}
.inl-sellplan{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);
  background:rgba(105,230,178,.05);padding:10px 13px;margin:0 0 12px;font-size:var(--fs-xs);line-height:1.65}
.inl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin:0 0 12px}
.inl-card{border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 13px;background:rgba(16,28,45,.6)}
.inl-card>b{display:block;margin-bottom:7px;font-size:var(--fs-xs)}
.inl-facts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-2xs);color:var(--muted)}
.inl-chgs{display:flex;gap:16px;margin-bottom:6px}
.inl-chgs small{display:block;color:var(--muted);font-size:var(--fs-label,11px)}
.inl-chgs strong{font:600 var(--fs-sm) 'JetBrains Mono'}
.inl-52bar{position:relative;height:6px;background:var(--line);border-radius:99px;margin:6px 0}
.inl-52bar div{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.inl-bt{margin-top:4px}
.inl-bt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.inl-bt-sum{margin:0 0 8px;color:var(--muted);font-size:var(--fs-xs)}
.inl-trade{display:flex;gap:14px;align-items:center;padding:7px 0;border-top:1px solid #1c2c45;font-size:var(--fs-2xs)}
.inl-trade .num{font-family:'JetBrains Mono';color:var(--muted);white-space:nowrap}
.inl-trade b{margin-left:auto;font-family:'JetBrains Mono'}
.extra-hidden{display:none !important}
.extra-picks-btn{width:100%;margin:10px 0}
[data-theme="light"] .inline-detail{background:var(--surface)}
[data-theme="light"] .inl-card{background:#fff}

/* ---------- V4 đề xuất hằng ngày (cùng khung flow với V3) ---------- */
.v4-pick-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
.v4-picks{display:flex;flex-direction:column;gap:10px}
.v4-pick{cursor:pointer}
.v4-pick:hover{border-color:var(--accent)}
.v4-proof{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-md);
  background:#0c1829;padding:12px 15px;margin:14px 0;font-size:var(--fs-xs);line-height:1.7;color:var(--muted)}
.v4-proof strong{color:var(--text)}
.v4-proof a{color:var(--accent);font-weight:700}
.v4-sell-now{border:1px solid rgba(255,119,134,.5);border-radius:var(--radius-lg);
  background:rgba(255,119,134,.06);padding:6px 16px 14px;margin:10px 0}
.v4v-trades{max-height:420px;overflow:auto;margin-top:10px}
/* bảng bằng chứng tham số ("vì sao 1 quý / -35% / 30 mã") */
.pw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.pw-grid table{margin:8px 0 6px;font-size:var(--fs-2xs)}
.pw-grid th,.pw-grid td{padding:6px 9px}
.pw-grid b{font-size:var(--fs-xs)}
.pw-chosen td{background:rgba(105,230,178,.08);font-weight:700}
[data-theme="light"] .pw-chosen td{background:#eef6d8}
.v4v-trades .num{font-family:'JetBrains Mono';white-space:nowrap}
[data-theme="light"] .v4-proof{background:var(--surface)}

/* ---------- HERO V4 theo trạng thái hành trình (kiểu robo-advisor) ---------- */
.v4-hero{border:1px solid var(--line);border-radius:var(--radius-xl);padding:22px 24px;margin:6px 0 14px;
  background:linear-gradient(135deg,rgba(105,230,178,.07),rgba(16,28,45,.4) 55%)}
.v4-hero-ok{border-color:rgba(105,230,178,.45)}
.v4-hero-act{border-color:rgba(255,202,106,.55);background:linear-gradient(135deg,rgba(255,202,106,.08),rgba(16,28,45,.4) 55%)}
.v4h-eyebrow{margin:0 0 8px;font:600 var(--fs-2xs) 'JetBrains Mono';letter-spacing:.1em;color:var(--accent)}
.v4-hero-act .v4h-eyebrow{color:var(--amber)}
.v4h-title{margin:0 0 8px;font-size:var(--fs-2xl);line-height:1.25}
.v4h-sub{margin:0 0 14px;color:var(--muted);line-height:1.6;max-width:70ch}
.v4h-sub a{color:var(--accent)}
.v4h-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}
.v4h-stats>div{background:#0c1829;border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px}
.v4h-stats small{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-bottom:4px}
.v4h-stats strong{font:600 var(--fs-xl) 'JetBrains Mono'}
.v4h-stats .hint{display:block;margin-top:2px}
.v4h-links{margin:10px 0 0;font-size:var(--fs-xs)}
.v4h-links a{color:var(--accent);font-weight:700;text-decoration:none}
.v4-todo{margin:4px 0 6px}
/* wizard 3 bước */
.v4-step{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.v4-step-n{flex:0 0 30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font:800 var(--fs-sm) 'JetBrains Mono';background:#20334e;color:var(--text)}
.v4-step-now .v4-step-n{background:var(--accent);color:#062017}
.v4-step-done .v4-step-n{background:rgba(105,230,178,.18);color:var(--accent)}
.v4-step-body{flex:1;min-width:0}
.v4-step-body>strong{display:block;margin-bottom:8px;font-size:var(--fs-md)}
.v4-step-locked{opacity:.45}
.v4-step-locked .v4-step-body button,.v4-step-locked .v4-step-body a{pointer-events:none}
.v4-cap-row{display:flex;flex-wrap:wrap;gap:8px}
.v4-cap-row input{flex:1;min-width:170px;max-width:260px;padding:11px 12px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:#0b1727;color:var(--text);font:var(--fs-md) 'JetBrains Mono'}
.v4-plan-line{margin:0 0 10px;color:var(--muted)}
.v4-plan-line strong{color:var(--text)}
.v4-plan-actions{display:flex;flex-wrap:wrap;gap:8px}
.v4-cta{font-size:var(--fs-md);padding:13px 22px}
.v4-basket-details{border:1px solid var(--line);border-radius:var(--radius-lg);background:#0c1829;margin:12px 0;padding:0 16px}
.v4-basket-details>summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none;min-height:44px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v4-basket-details>summary::-webkit-details-marker{display:none}
.v4-basket-details>summary::after{content:'▾';margin-left:auto;color:var(--muted)}
.v4-basket-details[open]>summary::after{transform:rotate(180deg)}
.v4-basket-details .v4-list{margin-bottom:14px}
/* khối thị trường gập */
.market-wrap{margin:14px 0;padding:0}
.market-wrap>.mkt-h3{margin:0 0 10px;font-weight:700;font-size:var(--fs-sm)}
.market-wrap .hidden{display:none}
.market-wrap>div{margin-bottom:14px}
.market-wrap>div:last-child{margin-bottom:0}

/* TOP BIẾN ĐỘNG + TIN NÓNG (John 18/07) - đọc nhanh mỗi ngày */
.movers-wrap,.news-wrap{margin:16px 0}
.movers-wrap>.mkt-h3,.news-wrap>.mkt-h3{margin:0 0 10px;font-weight:700;font-size:var(--fs-sm)}
.movers-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mv-col{min-width:0;border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 10px;background:rgba(12,24,41,.4)}
[data-theme="light"] .mv-col{background:var(--surface)}
.mv-col-h{font-weight:700;font-size:var(--fs-xs);margin-bottom:6px}
.mv-row{display:flex;align-items:center;gap:6px;width:100%;min-width:0;padding:6px 2px;min-height:36px;
  background:none;border:0;border-top:1px solid var(--line);cursor:pointer;color:inherit;font:inherit;text-align:left}
.mv-row:first-of-type{border-top:0}
.mv-sym{font-weight:700;font-size:var(--fs-sm);flex-shrink:0}
.mv-px{flex:1 1 auto;min-width:0;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-chg{flex-shrink:0;margin-left:auto;font-weight:700;font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.mv-empty{color:var(--muted);font-size:var(--fs-xs);padding:6px 4px;margin:0}
.news-list{display:flex;flex-direction:column;gap:2px}
.news-item{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:9px;
  padding:11px 2px;min-height:44px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.news-item:first-child{border-top:0}
.news-item:active{opacity:.6}
.news-src{font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;
  border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.news-title{font-size:var(--fs-sm);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-time{font-size:11px;color:var(--muted);white-space:nowrap}
@media(max-width:400px){.news-time{display:none}}
@media(max-width:640px){
  .v4-hero{padding:17px 15px}
  .v4h-title{font-size:var(--fs-xl)}
  .v4h-stats{grid-template-columns:1fr 1fr}
}
[data-theme="light"] .v4-hero{background:linear-gradient(135deg,rgba(132,204,22,.10),var(--panel) 55%)}
[data-theme="light"] .v4h-stats>div,[data-theme="light"] .v4-basket-details{background:var(--surface)}
[data-theme="light"] .v4-cap-row input{background:#fff}
[data-theme="light"] .v4-step-n{background:var(--surface2);color:var(--text)}
[data-theme="light"] .v4-step-now .v4-step-n{background:var(--lime);color:var(--lime-text)}

/* ---------- Rổ V4 trên trang Hôm nay: giám sát + hành động ---------- */
.v4-head{position:relative;padding-right:240px} /* chừa chỗ cho 2 nút góc phải */
.v4-actions{position:absolute;top:0;right:0;display:flex;gap:6px}
.v4-stop-banner{border:1px solid rgba(255,119,134,.5);background:rgba(255,119,134,.10);color:var(--text);
  border-radius:var(--radius-md);padding:11px 14px;margin:12px 0;font-size:var(--fs-xs);line-height:1.55}
.v4-cycle{color:var(--muted);font:var(--fs-2xs) 'JetBrains Mono';margin:10px 0 4px}
.v4-cycle strong{color:var(--text)}
.v4-diff{font-size:var(--fs-xs);font-family:'JetBrains Mono';padding:8px 12px;margin:6px 0;
  border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--radius-sm);background:#0c1829}
.v4-capital{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;margin:12px 0;
  border:1px solid var(--line);border-radius:var(--radius-md);background:#0c1829}
.v4-capital label{font-weight:700;font-size:var(--fs-xs);white-space:nowrap}
.v4-capital input{width:150px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:#0b1727;color:var(--text);font:var(--fs-xs) 'JetBrains Mono'}
.v4-capital .hint{flex:1;min-width:200px}
.v4-row{grid-template-columns:auto 1fr auto auto auto;cursor:pointer}
.v4-row:hover{border-color:var(--accent)}
.v4-row .v4-qty{font-size:var(--fs-2xs);font-family:'JetBrains Mono';white-space:nowrap;color:var(--text);text-align:right}
.v4-row .v4-open{color:var(--muted);font-weight:400}
.v4-row-stopped{border-color:rgba(255,119,134,.55);background:rgba(255,119,134,.05)}
.v4-flag{font-size:var(--fs-label,11px);font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}
.v4-flag.red{color:var(--red);background:rgba(255,119,134,.13)}
.v4-flag.amber{color:var(--amber);background:rgba(255,202,106,.13)}
.v4-asof-note{font-size:var(--fs-2xs);color:var(--muted);border:1px dashed var(--line);
  border-radius:var(--radius-sm);padding:9px 12px;margin:10px 0}
.v4-asof-note a{color:var(--accent)}
@media(max-width:560px){
  .v4-head{padding-right:0}
  .v4-actions{position:static;margin:8px 0 0}
  .v4-row{grid-template-columns:auto 1fr}
  .v4-row .v4-px,.v4-row .v4-stop,.v4-row .v4-qty{grid-column:2;text-align:right}
}
[data-theme="light"] .v4-diff,[data-theme="light"] .v4-capital{background:var(--surface)}
[data-theme="light"] .v4-capital input{background:#fff;color:var(--text)}

/* ---------- Kiểm chứng V4: metrics + biểu đồ cột từng kỳ ---------- */
.v4v-metrics{grid-template-columns:repeat(4,1fr)}
.v4v-sub{display:block;margin-top:3px;font:var(--fs-label,11px) 'JetBrains Mono';color:var(--muted)}
.v4v-chart{display:flex;align-items:stretch;gap:6px;height:130px;padding:8px 12px;margin:10px 0 6px;
  border:1px solid var(--line);border-radius:var(--radius-md);background:#0c1829}
.v4v-col{flex:1;display:flex;flex-direction:column;min-width:8px}
.v4v-half{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.v4v-half:last-child{justify-content:flex-start;border-top:1px solid var(--line)}
.v4v-bar{display:block;width:70%;max-width:26px;min-height:2px;max-height:100%;border-radius:3px 3px 0 0}
.v4v-bar.pos{background:var(--accent)}
.v4v-bar.neg{background:var(--red);border-radius:0 0 3px 3px}
.v4v-chart-labeled{height:150px;padding-bottom:22px;position:relative}
/* bottom âm: nhãn nằm trong dải padding-bottom 22px dành riêng, không đè cột */
.v4v-x{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font:9.5px 'JetBrains Mono';color:var(--muted);white-space:nowrap}
.v4v-col{position:relative}
.v4v-ledger{border:1px solid var(--line);border-radius:var(--radius-md);background:#0c1829;margin:10px 0}
.v4v-ledger-row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-2xs)}
.v4v-ledger-row:last-child{border-bottom:0}
.v4v-ledger-row .num{font-family:'JetBrains Mono';color:var(--muted)}
[data-theme="light"] .v4v-ledger{background:var(--surface)}
/* Thẻ engine: pill "Đang dùng" từ data-current (JS đặt theo ngôn ngữ) */
.engine-card{position:relative}
.engine-card.active::after{content:attr(data-current);position:absolute;top:10px;right:12px;
  font:700 10.5px 'JetBrains Mono';letter-spacing:.04em;color:var(--accent);
  background:rgba(105,230,178,.13);padding:3px 9px;border-radius:999px}
.engine-card.active strong{display:block;padding-right:98px} /* tiêu đề không chui dưới pill */
[data-theme="light"] .engine-card.active::after{color:#3f6212;background:#eef6d8}
/* Chọn engine lần đầu trong welcome card */
.wc-pick-q{margin:14px 0 8px}
.wc-pick-row{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:760px){.v4v-metrics{grid-template-columns:repeat(2,1fr)}.v4v-chart{height:100px;gap:3px}.v4v-chart-labeled{height:120px}.v4v-x{font-size:8px}}

/* ============ SỨC KHOẺ HỆ THỐNG (admin) ============ */
.admin-health-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.admin-health-head h3{margin:0;color:var(--text)}
.health-cards{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:14px}
.health-card{padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:#0c1829;display:flex;flex-direction:column;gap:3px}
.health-card.warn{border-color:rgba(255,202,106,.4)}
.health-card small{font-size:var(--fs-label,11px);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.health-card strong{font-size:var(--fs-lg);font-family:'JetBrains Mono';color:var(--text)}
.health-card .health-sub{font-size:var(--fs-2xs);color:var(--muted);font-family:'JetBrains Mono'}
.health-pill{font-size:var(--fs-label,11px);font-weight:700;margin-top:3px;width:fit-content;padding:1px 8px;border-radius:999px}
.health-pill.ok{color:var(--accent);background:rgba(105,230,178,.12)}
.health-pill.bad{color:var(--red);background:rgba(255,119,134,.12)}
.health-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-2xs);color:var(--muted);font-family:'JetBrains Mono';margin-bottom:8px}
.health-db td{padding:5px 9px;font-size:var(--fs-2xs);color:var(--muted)}
.health-db .num{font-family:'JetBrains Mono';text-align:right;color:var(--text)}
.health-missing td{color:var(--red)}

/* ============ NHỊP THỊ TRƯỜNG (trang Hôm nay) ============ */
#market-pulse{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.pulse-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#0c1829}
.pulse-muted{color:var(--muted)}
.pulse-mood{display:flex;align-items:center;gap:14px}
.pulse-mood.up{border-color:rgba(105,230,178,.3)} .pulse-mood.down{border-color:rgba(255,119,134,.28)}
.pulse-face{font-size:32px;line-height:1;flex-shrink:0;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05)}
.pulse-mood.up .pulse-face{background:rgba(105,230,178,.12)} .pulse-mood.down .pulse-face{background:rgba(255,119,134,.12)}
.pulse-mood-body{flex:1;min-width:0}
.pulse-hi{font-size:var(--fs-2xs);color:var(--muted)}
.pulse-mood-line{font-size:var(--fs-md);font-weight:700;color:var(--text)}
.pulse-idx{font-size:var(--fs-xs);color:var(--muted);margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pulse-idx strong{color:var(--text);font-family:'JetBrains Mono'}
.pulse-streak{margin-left:auto;font-size:var(--fs-2xs);white-space:nowrap;color:var(--amber)}
.pulse-spark{width:80px;height:26px;flex-shrink:0;align-self:center;opacity:.85}
.pulse-breadth-top{display:flex;justify-content:space-between;font-size:var(--fs-2xs);margin-bottom:7px}
.pulse-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;opacity:.9}
.pulse-h3{font-size:var(--fs-xs);font-weight:700;color:var(--text);margin-bottom:10px}
.pulse-heat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pulse-cell{border:1px solid var(--line);border-radius:9px;padding:8px 6px;font-size:10.5px;text-align:center;line-height:1.3;overflow:hidden}
.pulse-cell .pc-name{color:var(--text);opacity:.82;display:block}
.pulse-cell b{display:block;font-weight:700;font-size:11.5px;margin-top:2px;font-family:'JetBrains Mono'}
@media(max-width:560px){.pulse-heat{grid-template-columns:repeat(3,1fr)}}
.pulse-clock{display:flex;align-items:center;gap:12px}
.pulse-clock-ico{font-size:20px;flex-shrink:0;opacity:.7}
.pulse-clock-body{flex:1}
.pulse-segs{display:flex;gap:4px;margin-bottom:7px}
.pulse-seg{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.08)}
.pulse-seg.done{background:var(--accent);opacity:.7}
.pulse-seg.now{background:var(--amber)}
.pulse-clock-label{font-size:var(--fs-2xs);color:var(--muted)}

/* ===== Trang Khuyến nghị 2 mục + màn hình Tích Sản (bỏ chọn engine, 17/07/2026) ===== */
/* Thẻ engine giờ là THÔNG TIN thuần - bỏ mọi dấu hiệu bấm được */
.engine-card-info{cursor:default}
.engine-card-info:hover{border-color:var(--line)}

/* Mục 2: thẻ vào Tích Sản trên trang Khuyến nghị */
.ts-card{display:block;border:1px solid var(--line);border-left:4px solid var(--violet,#9f7aea);
  border-radius:var(--radius-lg);padding:14px 16px;margin:18px 0 6px;background:rgba(159,122,234,.06);
  text-decoration:none;color:var(--text);transition:border-color .15s ease,transform .15s ease}
.ts-card:hover{border-color:var(--violet,#9f7aea);transform:translateY(-1px)}
.ts-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ts-card-head h3{margin:0;font-size:var(--fs-md)}
.ts-go{font:700 var(--fs-xs) Manrope;color:var(--accent);white-space:nowrap}
.ts-line{margin:8px 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.ts-line strong{color:var(--text)}
.ts-alert{margin:8px 0 0;color:var(--red);font-size:var(--fs-xs);font-weight:600}
.ts-proof{margin:8px 0 0;font-size:var(--fs-2xs)}
[data-theme="light"] .ts-card{background:rgba(124,58,237,.05)}

/* Màn hình Tích Sản */
.ts-back{display:inline-block;font:600 var(--fs-xs) Manrope;color:var(--muted);text-decoration:none;margin-bottom:10px}
.ts-back:hover{color:var(--accent)}
.ts-open-hint{margin-top:4px}
#panel-tichsan .v4-list{margin-top:8px}

/* Switch trang Kiểm chứng - selector phải thắng main>.panel.view-active{display:block} */
.verify-switch-wrap{display:none;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px 12px}
main>.panel.verify-switch-wrap.view-active{display:flex}
.verify-switch .seg-btn{padding:9px 16px;font-size:var(--fs-xs)}
@media(pointer:coarse){
  .ts-back{display:inline-flex;align-items:center;min-height:44px}
  .verify-switch .seg-btn{min-height:44px}
}

/* Hồ sơ mã: dải tóm tắt khuyến nghị 2 chiến lược */
.sp-2eng{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:12px}
@media(max-width:640px){.sp-2eng{grid-template-columns:1fr}}
.sp-eng-card{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);
  border-radius:var(--radius-md);padding:10px 12px;background:rgba(255,255,255,.02)}
.sp-eng-card small{font:700 var(--fs-2xs) Manrope;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}
.sp-eng-card span{font-size:var(--fs-xs);line-height:1.55}
.sp-eng-ok{border-left:3px solid var(--accent)}
.sp-eng-wait{border-left:3px solid #e8b45a}
.sp-eng-no{border-left:3px solid var(--red)}
.sp-eng-warn{border-left:3px solid var(--muted)}
[data-theme="light"] .sp-eng-card{background:var(--surface)}
.sp-sec-h{margin-top:26px;padding-top:14px;border-top:1px solid var(--line)}
.sp-bt{border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;margin-top:20px}

/* ===== Đợt 17/07/2026 (2): tab Khuyến nghị + Cổ tức + nav "Thêm" + Giới thiệu/Hướng dẫn ===== */
/* Tab chiến lược đầu trang Khuyến nghị */
.kn-switch-row{margin:2px 0 14px}
.kn-switch .seg-btn{padding:11px 20px;font-size:var(--fs-sm);position:relative}
.kn-switch-hint{margin:8px 0 0}
.kn-dot{position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red)}
body[data-view="tichsan"] #fab-recompute{display:none !important}
.ts-sub{margin-bottom:14px}
.ts-sub .seg-btn{padding:9px 15px;font-size:var(--fs-xs)}
@media(pointer:coarse){.kn-switch .seg-btn,.ts-sub .seg-btn{min-height:44px}}

/* Danh mục Ưu tiên cổ tức - danh sách DÒNG gọn, chi tiết gập khi bấm (John 17/07) */
.dv-meta-box{margin:0 0 14px}
.dv-list{display:flex;flex-direction:column;gap:8px}
.dv-card{border:1px solid var(--line);border-radius:var(--radius-md);
  background:rgba(105,230,178,.03);overflow:hidden}
[data-theme="light"] .dv-card{background:var(--surface)}
.dv-row{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;min-height:48px}
.dv-row::-webkit-details-marker{display:none}
.dv-card[open] .dv-row{border-bottom:1px solid var(--line)}
.dv-rank{flex:0 0 22px;height:22px;border-radius:50%;background:var(--line);color:var(--muted);
  font:700 var(--fs-2xs) Manrope;display:flex;align-items:center;justify-content:center}
.dv-card[open] .dv-rank,.dv-row:hover .dv-rank{background:var(--accent);color:#062017}
.dv-sym{font:700 var(--fs-md) Manrope;color:var(--text)}
.dv-name{color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-yield{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.dv-yield b{font-size:var(--fs-lg);color:var(--accent)}
.dv-detail{padding:12px 14px}
.dv-reason{margin:0 0 10px;line-height:1.6}
.dv-years{margin:6px 0}
.dv-years table{width:100%;font-size:var(--fs-xs)}
.dv-years th{white-space:nowrap;text-align:left}
.dv-warn-line{color:var(--amber);margin:8px 0}
.dv-full{margin-top:6px}
@media(max-width:560px){.dv-name{max-width:38vw}}

/* Bottom-nav nút "Thêm": button nhưng ăn mặc y hệt các link tab */
.bottom-nav button#bn-more{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;cursor:pointer;color:#98a29a;
  font:600 var(--fs-label) Manrope;padding:4px 0;border-radius:var(--radius-pill)}
.bottom-nav button#bn-more:active{background:#1b211c}
.bottom-nav button#bn-more.bn-active{color:#e8f5cf}
.bottom-nav button#bn-more.bn-active .bn-icon{background:#cdf147;color:#131807}

/* Sheet "Thêm" */
.more-sheet{position:fixed;inset:0;z-index:120}
.more-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.more-panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface,#0e1c2e);
  border-radius:18px 18px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:4px;box-shadow:0 -12px 40px rgba(0,0,0,.4);
  animation:sheetUp .18s ease}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.more-panel{animation:none}}
.more-grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 8px}
.more-item{display:flex;align-items:center;gap:14px;padding:13px 10px;border-radius:var(--radius-md);
  text-decoration:none;color:var(--text);min-height:52px}
.more-item:hover{background:rgba(255,255,255,.05)}
[data-theme="light"] .more-item:hover{background:rgba(0,0,0,.05)}
.more-item .mi-ico{font-size:22px;width:30px;text-align:center}
.more-item strong{display:block;font-size:var(--fs-sm)}
.more-item small{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-top:2px}
@media(min-width:761px){.more-panel{max-width:420px;left:auto;right:24px;bottom:24px;border-radius:18px}}

/* Trang Giới thiệu */
.ab-ways{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:10px}
.ab-way{border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px}
.ab-way p{margin:7px 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.65}
.ab-list{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:9px;
  color:var(--muted);font-size:var(--fs-xs);line-height:1.65}
.ab-list strong{color:var(--text)}
.ab-disclaimer{border-left:4px solid var(--amber)}

/* Trang Hướng dẫn */
.guide-steps{display:flex;flex-direction:column;gap:22px;margin-top:6px}
.guide-step{display:grid;grid-template-columns:34px 1fr;gap:6px 12px;align-items:start}
.gd-num{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#062017;
  font:700 var(--fs-sm) Manrope;display:flex;align-items:center;justify-content:center}
.gd-text h3{margin:3px 0 6px;font-size:var(--fs-md)}
.gd-text p{margin:0;color:var(--muted);font-size:var(--fs-xs);line-height:1.7}
.gd-shot{grid-column:2;margin:8px 0 0}
.gd-shot img{max-width:min(340px,100%);border:1px solid var(--line);border-radius:14px;display:block}
@media(max-width:560px){.guide-step{grid-template-columns:28px 1fr}.gd-shot img{max-width:100%}}

/* Hồ sơ: dòng cổ tức dưới dải trạng thái */
.sp-dv-line{margin:10px 0 0;font-size:var(--fs-xs);color:var(--muted);border:1px dashed var(--line);
  border-radius:var(--radius-md);padding:8px 12px}

/* ===== Đợt 17/07/2026 (3): hồ sơ chia nhóm + tách Vị thế ===== */
.sp-group{border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;margin-top:16px}
.sp-group-h{margin:0 0 10px;font-size:var(--fs-md)}
.sp-group .sp-sec-h{margin-top:0;padding-top:0;border-top:0}

/* Dòng tóm tắt thị trường luôn hiện ở đầu trang Khuyến nghị */
/* ===== TRANG CHỦ: ra-đa quét + tóm tắt tín hiệu (John 18/07) ===== */
.home-title h2{font-size:var(--fs-xl)}
.radar-hero{display:block;text-decoration:none;color:inherit;margin:8px 0 14px}
.radar-wrap{position:relative;width:min(84vw,400px);aspect-ratio:1;margin:0 auto;border-radius:50%;
  box-shadow:0 0 0 1px rgba(105,230,178,.18), 0 18px 55px rgba(0,0,0,.55), inset 0 0 60px rgba(105,230,178,.05)}
.radar-wrap canvas{display:block;width:100%;height:100%;border-radius:50%}
.radar-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.rc-num{font:800 clamp(38px,11vw,60px)/1 Manrope;color:#50e68c;text-shadow:0 0 26px rgba(80,230,140,.55)}
.rc-lbl{font-size:var(--fs-2xs);color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-top:3px}
.rc-near{font-size:var(--fs-xs);color:#ff8a3d;margin-top:7px;min-height:1em;font-weight:700}
.radar-legend{display:flex;gap:20px;justify-content:center;margin-top:12px;font-size:var(--fs-xs);color:var(--muted)}
.radar-legend .rl{display:inline-flex;align-items:center;gap:7px}
.radar-legend .rl i{width:9px;height:9px;border-radius:50%;display:inline-block}
.radar-legend .rl-buy i{background:#50e68c;box-shadow:0 0 9px #50e68c;animation:rlblink 1.4s ease-in-out infinite}
.radar-legend .rl-near i{background:#ff8a3d;box-shadow:0 0 6px #ff8a3d}
@keyframes rlblink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.radar-legend .rl-buy i{animation:none}}

.home-buy{margin:16px 0 10px}
.home-chips{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.home-chips::-webkit-scrollbar{height:5px}
.home-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:74px;
  padding:10px 12px;border:1px solid var(--line);border-left:3px solid #ffd23f;border-radius:var(--radius-md);
  text-decoration:none;background:rgba(255,210,63,.06);transition:transform .15s ease,border-color .15s ease}
.home-chip:hover{transform:translateY(-2px);border-color:#ffd23f}
.home-chip .hc-sym{font:700 var(--fs-md) Manrope;color:var(--text)}
.home-chip .hc-px{font-size:var(--fs-sm);color:var(--text)}
.home-chip .hc-rsi{font-size:var(--fs-2xs);color:var(--muted)}
.home-see-all{font:700 var(--fs-xs) Manrope;color:var(--accent);text-decoration:none;white-space:nowrap}
.home-cta{display:block;text-align:center;margin:10px 0 4px}
[data-theme="light"] .home-chip{background:rgba(230,170,0,.08)}
@media(min-width:761px){.radar-wrap{width:360px}}