/* ============================================================
   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:16px 14px;gap:8px}.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-lg)}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 ---------- */

/* min-width thấp -> cột lý do TỰ CO để bảng vừa khung (trước để 340 nên bảng
   sàn 1145px > khung ~1076px -> tràn phải, nút Mua bị cắt). Cột lý do là cột co
   giãn: nó tự nới tới khoảng trống còn lại (~270-310px trên desktop), các cột số
   giữ nguyên; nhờ vậy bảng luôn = bề rộng khung. */
.col-reason{white-space:normal;min-width:200px;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-pct = mũi tên + %. Mặc định (bảng desktop): xếp dọc mũi tên trên, % dưới */
.trend-pct{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
/* Nhãn mốc thời gian "20 phiên": mờ + nhỏ hơn để user hiểu % là qua 20 phiên
   (~1 tháng), không phải thay đổi trong 1 phiên (vốn bị chặn ±7%/ngày ở HOSE) */
.trend-icon .trend-win{color:var(--muted);font-size:calc(var(--fs-2xs) * .92);letter-spacing:.2px;text-transform:uppercase;white-space:nowrap}
.sc-row1 .trend-icon .trend-win{text-transform:none}
.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'}
/* Thẻ mã (mobile): "20 phiên" LÊN TRÊN, mũi tên + % gộp 1 dòng dưới -> ô hẹp lại,
   chừa chỗ cho nút Mua khỏi bị đẩy lệch. column-reverse vì DOM là [.trend-pct, .trend-win]. */
.sc-row1 .trend-icon{margin-left:auto;flex-direction:column-reverse;gap:1px;align-items:flex-end;font-size:var(--fs-md)}
.sc-row1 .trend-pct{flex-direction:row;gap:5px;align-items:center}
/* Thẻ "Gần đạt" (mobile) cũng đưa "20 phiên" lên trên số %; đồng bộ chữ thường */
.watch-item .trend-icon{flex-direction:column-reverse}
.watch-item .trend-pct{flex-direction:row;gap:5px;align-items:center}
.watch-item .trend-icon .trend-win{text-transform:none}
.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}
/* Modal đổi mật khẩu dùng chung class .local-login (btn width:100%) trong flexbox
   -> nút "Lưu" và "Hủy" lệch cỡ. Ép 2 nút bằng nhau, bỏ margin-top lạc. */
#password-modal .modal-actions{gap:10px;margin-top:10px}
#password-modal .modal-actions .btn{flex:1 1 0;width:auto;min-width:0;margin:0}

@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}
/* Form trong hộp admin: bỏ khung gạch đứt riêng (hộp ngoài đã đóng khung) -> hết
   cảnh "khung trong khung"; giữ .admin-create-title làm nhãn nhóm nhỏ. */
.admin-acc-body .admin-create{border:0;background:none;padding:0;margin:12px 0 0}
.admin-acc-body .admin-create.admin-compact{padding:0;margin-top:2px}
/* (.admin-health-head định nghĩa 1 lần ở khối dưới - bỏ bản trùng ở đây) */

/* ---------- 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}
@media(max-width:760px){.topbar-actions{gap:6px}}

/* ---------- 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, mặt kính mờ (glass) kiểu Apple */
  .bottom-nav{
    display:flex;position:fixed;left:12px;right:12px;z-index:80;
    bottom:calc(10px + env(safe-area-inset-bottom));
    background:rgba(16,20,17,.62);
    -webkit-backdrop-filter:blur(22px) saturate(1.7);
    backdrop-filter:blur(22px) saturate(1.7);
    border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-pill);
    padding:7px 8px;
    box-shadow:0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
    /* Giữ thanh DÁN CHẶT đáy khi cuộn trên iOS Safari: đẩy lên một lớp GPU
       riêng (translateZ) để trình duyệt vẽ lại liên tục, thay vì để thanh
       "trôi" theo trang lúc cuộn rồi mới nhảy về chỗ cũ khi dừng. */
    transform:translateZ(0);will-change:transform;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
  }
  /* Trình duyệt không hỗ trợ backdrop-filter -> nền đục hơn cho dễ đọc */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .bottom-nav{background:#0e1210}
  }
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#98a29a;text-decoration:none;font:600 var(--fs-label) Manrope;padding:6px 2px;border-radius:14px;
    transition:transform .14s ease, background .22s ease, color .22s ease;-webkit-tap-highlight-color:transparent}
  .bottom-nav a:active{transform:scale(.9)}
  .bn-icon{width:34px;height:22px;display:flex;align-items:center;justify-content:center;transition:transform .22s ease}
  .bn-icon svg{width:19px;height:19px}
  /* Tab ĐANG CHỌN: sáng CẢ nút (icon + chữ) - nền lime nhạt bo tròn, icon+chữ lime,
     icon nhích lên + phóng nhẹ khi chuyển tab (hiệu ứng mượt). */
  .bottom-nav a.bn-active{color:#cdf147;background:rgba(205,241,71,.16);box-shadow:inset 0 0 0 1px rgba(205,241,71,.25)}
  .bottom-nav a.bn-active .bn-icon{color:#cdf147;transform:translateY(-1px) scale(1.06)}
  .bottom-nav a.bn-active .bn-icon svg{filter:drop-shadow(0 0 4px rgba(205,241,71,.55))}
  .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 ---------- */

/* 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}

/* ---------- THEME SÁNG (phong cách fintech: nền sage, thẻ trắng, lime) ---------- */





/* Bottom-nav pill giữ tông đen ở cả 2 theme (điểm nhấn như bản mẫu) */

/* ---------- 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;
}
.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}

/* ---------- 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);
}
.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,.bottom-nav button#bn-more{position:relative}
.bottom-nav .tab-badge{position:absolute;top:0;right:6px;margin:0}
.bottom-nav button#bn-more .tab-badge{right:14px}

.mini-chart{margin:10px 0 4px;max-width:720px}   /* chart giữ cỡ hợp lý (~720px) thay vì kéo full width -> cao nghều */
.chart-box{position:relative}
.chart-svg{width:100%;height:auto;display:block;background:#0b1727;border:1px solid var(--line);border-radius:var(--radius-md)}
.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)}
.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;
}
.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 cũ (.strat-banner) đã gộp vào .context-bar 1 dòng duy
   nhất - xem khối ".context-bar" bên dưới. */

/* ---------- 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)}
@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}
@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)}
@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)}
.sr-chip-near{border-color:#6b4a2c;background:rgba(255,138,61,.07)}
.sr-chip-near em{color:#ff8a3d}
.sr-grp-lbl{font-size:var(--fs-2xs);color:var(--muted);font-weight:700;margin:12px 0 2px;letter-spacing:.2px}
.sr-grp-lbl:first-child{margin-top:2px}
.sr-chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* 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)}

@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: 1 DÒNG DUY NHẤT ====================
   John 22/07 (test trên iPhone thật): ra-đa còn nhỏ -> gộp data-notice +
   strategy-banner thành ĐÚNG 1 DÒNG (trước đó là 2 dòng xếp chồng ~101px,
   giờ 1 dòng ~36px). Toàn bộ chi tiết (giờ cập nhật/số mã/chu kỳ làm mới/
   trạng thái chiến lược) dồn vào #cb-detail, ẩn sau nút (i) dùng chung. */
.context-bar{
  display:flex;align-items:center;gap:6px 8px;flex-wrap:nowrap;overflow:hidden;
  padding:9px 14px;border:1px solid #294a62;border-radius:var(--radius-lg);
  background:#11263a;font:var(--fs-xs) 'JetBrains Mono';color:var(--muted);
}
.context-bar .cb-main{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.context-bar #sb-main{font-weight:700;color:var(--text);flex:0 1 auto}
.context-bar .cb-sep{flex:0 0 auto;color:var(--muted)}
.context-bar .cb-go{flex:0 0 auto;margin-left:auto;padding-left:6px;
  color:var(--accent);font-weight:800;white-space:nowrap;text-decoration:none}
.context-bar .cb-go:hover{text-decoration:underline}
/* Chi tiết mở rộng: xuống hàng riêng full-width, ẩn tới khi bấm (i). Dùng
   :not(.hidden) để display:flex ở đây KHÔNG thắng .hidden{display:none} theo
   specificity (2 class > 1 class là bug thật đã gặp - :not() giữ .hidden thắng
   khi có mặt vì lúc đó .dn-detail:not(.hidden) không khớp). */
.context-bar .dn-detail{flex-basis:100%;color:var(--muted);margin-top:4px;white-space:normal}
.context-bar .dn-detail:not(.hidden){display:flex;flex-direction:column;gap:3px}
@media(max-width:760px){
  .context-bar{padding:8px 12px;font-size:var(--fs-2xs);gap:5px 6px}
}

/* ==================== 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 (độ tươi dữ liệu + khẩu vị) HIỆN trên mọi trang, kể cả mobile
   -- trước đây bị ẩn khỏi mobile trừ trang Cấu hình nên user mobile không biết
   dữ liệu đã cập nhật tới đâu / có đang trong phiên hay không. Trang Radar mobile
   có bù trừ chiều cao riêng (xem #panel-today.radar-page.view-active bên dưới).
*/

/* ==================== 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.
     h1 hạ từ --fs-2xl xuống --fs-xl (John 22/07: base mobile cũng vừa giảm
     --fs-xl->--fs-lg để topbar vừa 1 dòng - giữ tỉ lệ phóng to tương ứng). */
  [data-font="lg"] main{zoom:1.2}
  [data-font="lg"] .topbar h1{font-size:var(--fs-xl)}
}

/* 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{
  position:relative;   /* neo nút đóng (guest mode) ở góc phải trên */
  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);
}
/* Guest mode: nút đóng overlay + dòng lý do đăng nhập theo ngữ cảnh */
.login-close{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--muted);
  font-size:19px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--radius-md)}
.login-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
.login-reason{margin:0 0 var(--sp-4);color:var(--accent);font-size:var(--fs-xs);font-weight:700;
  background:rgba(105,230,178,.08);border:1px solid rgba(105,230,178,.3);
  border-radius:var(--radius-md);padding:9px 13px;line-height:1.5}
/* Nút Đăng nhập/Đăng ký ở topbar cho khách */
.login-cta{white-space:nowrap}

/* 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)}
/* Gợi ý + nút "Tạo tài khoản mới" NỔI BẬT (mục tiêu: câu user đăng ký) -
   trước đây là ghost mờ tịt, khó thấy. Giờ viền lime + chữ lime rõ ràng. */
.login-newq{margin:var(--sp-3) 0 calc(var(--sp-1) * -1);text-align:center;
  color:var(--muted);font-size:var(--fs-xs);font-weight:600}
#local-register-btn{border:1.5px solid var(--accent);color:var(--accent);
  background:transparent;font-weight:800}
#local-register-btn:hover{background:rgba(105,230,178,.12);color:var(--accent)}

.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;
  /* Panel này nằm trong <td> của bảng tín hiệu (table{white-space:nowrap}) -> nếu
     KHÔNG reset, chữ lý do không xuống dòng, ô phình rộng quá màn hình (tràn ngang,
     chart bị kéo to đùng). normal -> chữ tự xuống dòng, ô vừa bề ngang bảng. */
  white-space:normal}
@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}

/* ---------- V4 đề xuất hằng ngày (cùng khung flow với V3) ---------- */
.v4-kpi{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:9px 12px;margin-bottom:12px}
.bti-caveat{border-left:3px solid #6b4a2c;background:rgba(255,138,61,.06);padding:8px 11px;border-radius:6px;margin:8px 0 4px;line-height:1.5}
.pos-action-banner{font-size:var(--fs-sm);font-weight:600;color:var(--amber, #ffb454);
  border:1px solid #6b4a2c;background:rgba(255,138,61,.08);border-radius:var(--radius-md);padding:10px 13px;margin:0 0 12px}
.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}
.v4v-trades .num{font-family:'JetBrains Mono';white-space:nowrap}

/* ---------- 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-date{grid-column:1/-1;font-size:var(--fs-2xs);color:var(--muted);font-weight:600;margin:-2px 0 0}
.market-attention{font-size:var(--fs-sm);font-weight:600;color:var(--text);
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:11px 14px;margin:0 0 14px}
.mv-col{min-width:0;border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 10px;background:rgba(12,24,41,.4)}
.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}
@media(pointer:coarse){.mv-row{min-height:44px}}
.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}
}

/* ---------- 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}
}

/* ---------- 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}
/* Nửa DƯỚI (cột âm): neo vào đường 0 (đỉnh nửa dưới) + kẻ đường 0. Dùng
   nth-child(2) chứ KHÔNG :last-child - last-child thật là <span.v4v-x> nhãn quý,
   nên :last-child không khớp nửa nào -> cột âm rơi về flex-end (dính đáy chart). */
.v4v-half:nth-child(2){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)}
/* 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 */
/* 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)}

/* 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)}
.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}
.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:3px;
  background:none;border:0;cursor:pointer;color:#98a29a;
  font:600 var(--fs-label) Manrope;padding:6px 2px;border-radius:14px;
  transition:transform .14s ease, background .22s ease, color .22s ease;-webkit-tap-highlight-color:transparent}
.bottom-nav button#bn-more:active{transform:scale(.9)}
.bottom-nav button#bn-more.bn-active{color:#cdf147;background:rgba(205,241,71,.16);box-shadow:inset 0 0 0 1px rgba(205,241,71,.25)}
.bottom-nav button#bn-more.bn-active .bn-icon{color:#cdf147;transform:translateY(-1px) scale(1.06)}
.bottom-nav button#bn-more.bn-active .bn-icon svg{filter:drop-shadow(0 0 4px rgba(205,241,71,.55))}

/* 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)}
.more-item .mi-ico{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--accent);border:1px solid var(--line);border-radius:11px;background:rgba(105,230,178,.06)}
.more-item .mi-ico svg{width:21px;height:21px;display:block}
.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 = KHUNG canh giữa; kích thước ô vuông thật do JS (radarResize) đặt
   trực tiếp lên <canvas> (= min bề rộng/cao của khung) nên luôn tròn & vừa slot,
   không còn tự đặt kích thước cứng gây tràn/đè legend trên mobile. */
.radar-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto}
.radar-wrap canvas{display:block;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)}
/* Chữ tâm ra-đa giờ vẽ TRÊN canvas (để blip mã mua đè lên, không bị "+N gần đạt"
   che). Ẩn lớp HTML cũ đi (giữ trong DOM cho tương thích, aria-hidden sẵn). */
.radar-center{display:none;position:absolute;inset:0;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}}


/* ===== RADAR PAGE: CHỈ ra-đa + hoạt hình, KHÔNG cuộn (John 18/07) ===== */
/* Trang Radar là màn hình splash tối giản -> ẩn footer miễn trừ chung (vẫn hiện
   ở MỌI trang khác + màn đăng nhập) để radar vừa đúng 1 màn, khỏi cuộn.
   (Footer dùng CLASS .app-disclaimer/.app-author, không phải id.) */
body[data-view="today"] .app-disclaimer,
body[data-view="today"] .app-author{display:none}
/* ==================================================================
   TRANG RADAR MOBILE: BỎ HẲN KHOÁ CHIỀU CAO THEO VIEWPORT (John 22/07 -
   lần thứ 4): calc(dvh-Npx) rồi flex-fill 100dvh đều lần lượt gãy trên
   browser giả lập / Safari thật / Chrome-iOS thật - mỗi trình duyệt tính
   dvh và vùng chrome động khác nhau, không có 1 công thức đúng cho tất cả.
   Bằng chứng cuối: Chrome trên iPhone hiện THU NHỎ CẢ TRANG (không tràn lề
   ngang) - dấu hiệu kinh điển của việc trang có nội dung cao hơn dvh thật
   khiến trình duyệt tự "zoom to fit". Giải pháp BỀN VỮNG: bỏ hẳn viewport-
   lock, cho trang Radar CUỘN BÌNH THƯỜNG như mọi trang khác (đã ổn định
   qua toàn bộ các lần test trước - Lướt Sóng/Thị trường chưa từng gãy).
   Ra-đa dùng aspect-ratio theo CHIỀU RỘNG (luôn có sẵn, không phải đoán
   chiều cao khả dụng) -> to, ổn định, không cần biết viewport cao bao nhiêu. */
#panel-today.radar-page.view-active{
  display:flex;flex-direction:column;align-items:center;
}
@media(max-width:760px){
  #panel-today.radar-page .radar-hero{
    flex:0 0 auto;overflow:visible;
  }
  /* Vuông theo CHIỀU RỘNG (aspect-ratio, KHÔNG đặt width riêng ở đây - base
     rule .radar-wrap{width:100%} bên dưới áp dụng, tự bị chặn bởi padding
     panel/main nên không cần cap cứng). JS radarResize() đo rect.width=
     rect.height (aspect-ratio ép bằng nhau) nên Math.min(w,h,cap) tự chọn
     đúng - không cần biết panel cao bao nhiêu nữa. */
  #panel-today.radar-page .radar-wrap{flex:0 0 auto;aspect-ratio:1/1;margin:0 auto}
}
/* Ẩn khỏi mắt nhưng vẫn đọc được bằng screen reader / bot (SEO): h2 tiêu đề radar */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* "ĐANG ONLINE" trên trang Radar: chấm xanh nhấp nháy + số người đang cùng dùng */
.radar-presence{display:inline-flex;align-items:center;gap:7px;margin:4px 0 0;font:600 var(--fs-xs) Manrope;color:var(--text)}
.radar-presence .rp-live{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.55);animation:rpPulse 2.2s infinite}
@keyframes rpPulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
@media(prefers-reduced-motion:reduce){.radar-presence .rp-live{animation:none}}
/* Luôn chừa 1 chút giữa tiêu đề và ra-đa (kẻo ra-đa chạm chữ khi màn thấp) */
#panel-today.radar-page .home-title{margin-bottom:6px}
/* Bỏ "Radar scanning" (eyebrow) + "Cập nhật HH:MM" (#scan-status) khỏi đầu trang
   Radar để tiết kiệm không gian cho ra-đa - cả 2 đều thông tin phụ, đã có ở chỗ
   khác (data-notice) hoặc không cần thiết. Giữ nguyên trong DOM (JS vẫn ghi text
   bình thường, không lỗi) chỉ ẩn bằng CSS. */
#panel-today.radar-page .home-title .eyebrow,
#panel-today.radar-page #scan-status{display:none}
/* Máy màn hình thấp (SE/8...): KHÔNG cần rule riêng nữa - flex:1 (khối
   @media(max-width:760px) ở trên) tự lấp đúng phần còn lại dù màn cao hay
   thấp, trình duyệt tính chứ không phải đoán số như trước. */
#panel-today.radar-page .home-title{flex:0 0 auto;width:100%}
#panel-today.radar-page .home-title h2{font-size:var(--fs-lg)}
/* ra-đa CHIẾM khoảng giữa; legend là em kề NGAY DƯỚI (không lồng, không đè).
   Base (mọi kích thước): layout cột dọc. flex:1 lấp-theo-chiều-cao CHỈ còn
   dùng ở DESKTOP (panel desktop vẫn có chiều cao cố định, xem @media dưới) -
   mobile dùng aspect-ratio ở khối @media(max-width:760px) phía trên rồi
   (không phải đoán/lấp chiều cao nữa, xem lý do trong comment ở đó). */
#panel-today.radar-page .radar-hero{width:100%;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
#panel-today.radar-page .radar-wrap{width:100%;margin:0}
@media(min-width:761px){
  #panel-today.radar-page .radar-hero{flex:1 1 auto;min-height:0;overflow:hidden}
  #panel-today.radar-page .radar-wrap{flex:1 1 auto;min-height:0}
}
#panel-today.radar-page .radar-legend{flex:0 0 auto;margin-top:2px}
#panel-today.radar-page #home-empty{flex:0 0 auto;margin:8px 0 0}
/* cách rõ khỏi hàng chú thích (Khuyến nghị mua / Gần đạt) - trước đây sát nhau.
   6px (không phải 14px) trên mobile để nhường chỗ cho dòng Độ rộng HOSE mới
   trong thẻ mà không ăn vào ra-đa (John 22/07) - desktop vẫn đủ chỗ, không đổi. */
#panel-today.radar-page .radar-index{flex:0 0 auto;margin-top:6px}
@media(min-width:761px){#panel-today.radar-page .radar-index{margin-top:14px}}
@media(min-width:761px){
  #panel-today.radar-page.view-active{height:calc(100vh - 240px);height:calc(100dvh - 240px)}
}
/* Màn hình THẤP (SE ~568) + trạng thái 0 tín hiệu: thu nhỏ phần cố định để ra-đa
   vẫn vừa khoảng trống. */
@media(max-height:680px){
  #panel-today.radar-page .home-title h2{font-size:var(--fs-md)}
  #panel-today.radar-page #home-empty{font-size:var(--fs-2xs);margin:4px 0 0}
  .radar-index .ri-chart{height:38px}
}
/* Cỡ chữ lớn (accessibility): main bị zoom -> hằng số chiều cao lệch. Bỏ khoá
   chiều cao để trang tự giãn (cuộn nhẹ nếu cần) thay vì cắt/đè nội dung. */
:root[data-font="lg"] #panel-today.radar-page.view-active{height:auto;min-height:0;overflow:visible}

/* Thẻ VN-Index + chart 1 tuần dưới ra-đa: thông tin cơ bản nhất, bấm mở Thị trường */
.radar-index{display:block;width:100%;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:11px 14px;
  background:rgba(12,24,41,.4);transition:border-color .15s ease}
.radar-index:hover{border-color:var(--accent)}
.radar-index .ri-top{display:flex;align-items:baseline;gap:9px}
.radar-index .ri-name{font-weight:700;font-size:var(--fs-xs);color:var(--muted);letter-spacing:.4px}
.radar-index .ri-val{font:800 var(--fs-lg)/1 Manrope;color:var(--text);font-variant-numeric:tabular-nums}
.radar-index .ri-chg{margin-left:auto;font-weight:800;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
/* nhãn kỳ "tuần" cạnh % lớn: mờ + nhẹ để đọc là chú thích, không tranh với số */
.radar-index .ri-chg .ri-per{font-weight:600;font-size:calc(var(--fs-2xs) * .95);color:var(--muted);letter-spacing:.2px}
.radar-index .ri-chart{display:block;width:100%;height:50px;margin:6px 0 3px}
.radar-index .ri-chart.ri-intra{height:auto;margin:4px 0 2px}   /* chart trong ngày cao theo tỷ lệ (có mốc giờ + điểm) */
.radar-index .ri-chart .ri-axl{font-size:7.5px;fill:var(--muted);font-family:'JetBrains Mono',monospace}
.radar-index .ri-chart .ri-lastv{font-size:9px;font-weight:700;font-family:'JetBrains Mono',monospace}
.radar-index .ri-foot{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--muted);font-weight:600}
.radar-index .ri-foot .pnl-pos,.radar-index .ri-foot .pnl-neg{font-variant-numeric:tabular-nums}
/* Độ rộng HOSE - CHỈ mobile (desktop đã có trong .ri-stats, khỏi lặp). Tận
   dụng khoảng trống dưới thẻ VN-Index trước bottom-nav (John 22/07). */
.radar-index .ri-breadth{display:flex;justify-content:space-between;align-items:center;
  margin-top:4px;padding-top:4px;border-top:1px solid var(--line);
  font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.radar-index .ri-breadth .rs-k{color:var(--muted);font-size:var(--fs-2xs);letter-spacing:.3px}
.radar-index .ri-breadth .pnl-pos,.radar-index .ri-breadth .pnl-neg{font-weight:800}
@media(min-width:1040px){.radar-index .ri-breadth{display:none}}

/* Ô thống kê chi tiết VN-Index: ẨN mặc định (mobile), HIỆN trên desktop */
.ri-stats{display:none}
.ri-stats .rs{display:flex;flex-direction:column;gap:2px;min-width:0}
.ri-stats .rs-k{font-size:var(--fs-2xs);color:var(--muted);letter-spacing:.3px;white-space:nowrap}
.ri-stats .rs-v{font:700 var(--fs-sm)/1.15 'JetBrains Mono',monospace;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.ri-stats .rs-v.pnl-pos,.ri-stats .rs-v.pnl-neg{font-weight:800}

/* ---- DESKTOP: canh chỉnh lại trang Radar + VN-Index nhiều thông tin hơn ---- */
@media(min-width:761px){
  /* Dải 761-1039 vẫn 1 CỘT không-cuộn: chỉ thu gọn + canh giữa thẻ VN-Index để
     chart khỏi phình (nhãn cao/thấp đè nhau). CHƯA mở ô thống kê ở đây - thêm
     nội dung dọc sẽ ép ra-đa nhỏ lại (trang Radar khoá chiều cao, không cuộn). */
  #panel-today.radar-page .radar-index{max-width:520px;margin-left:auto;margin-right:auto;padding:14px 18px}
}
@media(min-width:1040px){
  /* Đủ rộng -> Ra-đa BÊN TRÁI, VN-Index (giàu thông tin) BÊN PHẢI: lấp đầy bề
     ngang, cân đối; thẻ index nằm CẠNH ra-đa nên thêm ô thống kê không ép ra-đa. */
  #panel-today.radar-page.view-active{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(380px,440px);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"title title" "radar index";
    column-gap:40px;row-gap:8px;align-items:stretch;
    max-width:1180px;margin-left:auto;margin-right:auto;width:100%}
  #panel-today.radar-page .home-title{grid-area:title}
  #panel-today.radar-page .radar-hero{grid-area:radar;height:100%}
  #panel-today.radar-page .radar-index{grid-area:index;align-self:center;
    margin:0;max-width:none;padding:18px 20px}
  .radar-index .ri-val{font-size:var(--fs-xl)}
  /* Ô thống kê chi tiết CHỈ hiện ở bố cục 2 cột */
  .ri-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;
    margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
}