/* Trang admin ẩn /admin/backtest/derivatives (28/10/2026): phái sinh kiểu XNO. Giao diện tối mặc định, có nút chuyển sáng. */
/* Trang Phái sinh chính thức /derivatives (29/10/2026): bố cục kiểu XNO, màu nền + font chữ của Finalyze (styles.css + theme-dark.css nạp trước;
   Finalyze chỉ còn giao diện tối). Màu tín hiệu tăng / giảm / tham chiếu / trần / sàn giữ như bản thử. */
:root,:root[data-theme="dark"]{
  --bg:#070d12;--panel:#111f27;--panel2:#152731;--line:#1d3a45;--grid:#16303a;--text:#e8f4f5;--muted:#92b6bd;
  --up:#67f1c0;--down:#ff135b;--ref:#f1c617;--ceil:#c084fc;--floor:#22d3ee;--accent:#05f0dd;--info:#60a5fa;--orange:#f1c617;--btn:#152731;--btn-on:#017884;--btn-on-text:#fff;
  --shadow:0 3px 14px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#app-screen,.lock-page{font-size:13px;line-height:1.45}
[hidden]{display:none!important}
#app-screen a{color:var(--accent)}
#app-screen button,#app-screen select,#app-screen input{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:'Space Grotesk',Manrope,sans-serif}
.denied{text-align:center;padding:80px 20px;color:var(--muted)}
#app-screen{max-width:1900px;margin:0 auto;padding:14px 14px 60px}
/* Finalyze styles.css dat san kieu cho table/th/td va lop .up/.down (nen mau): tra ve mac dinh trong trang nay (:where = do uu tien thap,
   cac quy tac rieng cua trang van thang). */
:where(#app-screen) table{width:auto;white-space:normal}
:where(#app-screen) th,:where(#app-screen) td{padding:1px;border-bottom:0;font-size:inherit;letter-spacing:normal;color:inherit;text-align:inherit}
#app-screen .up:not(.tag),#app-screen .down:not(.tag){background:none}
.up,.c-up{color:var(--up)}.down,.c-down{color:var(--down)}.c-ref{color:var(--ref)}.c-ceil{color:var(--ceil)}.c-floor{color:var(--floor)}.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

.btn{border:1px solid var(--line);background:var(--btn);border-radius:8px;height:28px;padding:0 11px;cursor:pointer;font-weight:700;font-size:12px;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.on{background:var(--btn-on);color:var(--btn-on-text);border-color:var(--btn-on)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{height:24px;padding:0 8px;font-size:11px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}

/* ----- hero ----- */
/* khung đầu kiểu XNO: cao 160 px, trái 300 px, phải biểu đồ basis có tiêu đề phủ trên */
.hero{display:grid;grid-template-columns:300px minmax(0,1fr);height:160px;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.hero .card{border:0;border-radius:0;box-shadow:none;margin:0}
.hero-info{display:flex;flex-direction:column;justify-content:space-between;padding:12px 16px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,var(--accent) 6%)}
.hz-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.min0{min-width:0}
.hz-l{font-size:11px;color:var(--muted);line-height:16px}
.hz-sym{margin-top:2px;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hz-r{text-align:right;flex:none}
.hz-s{font-size:10px;color:var(--muted);line-height:16px}
.hz-basis{font-size:18px;font-weight:500;line-height:20px;font-variant-numeric:tabular-nums}
.hz-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:8px}
.hz-grid>div{min-width:0;padding:0 8px;border-left:1px solid var(--line)}.hz-grid>div:first-child{padding-left:0;border-left:0}
.hz-v{font-size:13px;font-weight:500;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hz-empty{display:grid;place-items:center;height:100%;font-size:12px;color:var(--muted)}
.hero-chart{position:relative;padding:0;background:color-mix(in srgb,var(--panel) 97%,var(--accent) 3%)}
.hz-title{position:absolute;left:0;right:0;top:0;height:36px;display:flex;align-items:baseline;gap:8px;padding:10px 16px 0;z-index:1;pointer-events:none}
.hz-title h2{font-size:12px;font-weight:500;margin:0;font-family:inherit}
.hz-title span{font-size:11px;color:var(--muted)}
#term-chart{position:absolute!important;inset:0}

/* ----- bảng giá ----- */
.board-card{padding:0;margin-bottom:12px}
.board-scroll{overflow-x:auto}
table.board{border-collapse:collapse;width:100%;min-width:1120px;font-size:12px}
table.board th,table.board td{padding:5px 7px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--grid);font-variant-numeric:tabular-nums}
table.board thead th{background:var(--panel2);color:var(--muted);font-weight:700;font-size:11px;position:sticky;top:0;border-bottom:1px solid var(--line)}
table.board th.grp{text-align:center;border-left:1px solid var(--line);color:var(--text)}
table.board th:first-child,table.board td:first-child{text-align:left}
table.board td.gl,table.board th.gl{border-left:1px solid var(--line)}
table.board tbody tr:hover td{background:var(--panel2)}
table.board td .bsub{display:block;font-size:10.5px;color:var(--muted)}
table.board td.sym b{font-size:12.5px}
.tg{border:0;background:transparent;color:var(--accent);cursor:pointer;font-weight:800;padding:0 4px;font-size:13px;line-height:1}
.tg:hover{color:var(--text)}
.board-note{padding:7px 12px;font-size:11px;color:var(--muted)}

/* ----- thanh chế độ ----- */
.modes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.modes .mode{border:0;background:transparent;padding:7px 14px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;color:var(--muted)}
.modes .mode.on{background:var(--panel);color:var(--text);box-shadow:0 0 0 1px var(--line) inset}
.modes .mode:disabled{opacity:.5;cursor:not-allowed}
.modes .sp{flex:1}
/* hợp đồng + khoảng ngày chung cho mọi panel (30/10/2026) */
.gbar{display:flex;align-items:center;gap:10px;margin-left:10px;flex-wrap:wrap;min-width:0}
.gbar .fld{display:flex;align-items:center;gap:8px;min-width:0}
.gbar .fld>span{font-size:12px;color:var(--muted);white-space:nowrap}
.gbar select{height:28px;min-width:190px;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:0 10px;font-size:12px;font-weight:600}
.gbar .rng{display:flex;align-items:center;gap:6px;height:28px;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:0 10px}
.gbar .rng input[type=date]{border:0;background:transparent;height:24px;padding:0;max-width:130px;font-size:12px;font-weight:600}
.gbar .btn.sm{height:28px}
.live-note{font-size:11.5px;color:var(--muted)}
.live-note i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin-right:5px}
.live-note.on i{background:var(--up);box-shadow:0 0 0 3px rgba(37,207,123,.2)}
.live-note.rt i{animation:rt-pulse 1.6s ease-in-out infinite}
@keyframes rt-pulse{50%{box-shadow:0 0 0 6px rgba(37,207,123,0)}}
/* Ô bảng giá đổi giá trị: nháy xanh (tăng) / đỏ (giảm) rồi tắt dần - như realtime-value-flash của XNO */
@keyframes fl-up{0%{background:color-mix(in srgb,var(--up) 34%,transparent)}100%{background:transparent}}
@keyframes fl-down{0%{background:color-mix(in srgb,var(--down) 34%,transparent)}100%{background:transparent}}
table.board td.fl-up{animation:fl-up .9s ease-out both}
table.board td.fl-down{animation:fl-down .9s ease-out both}
/* ----- không gian panel: bố cục cố định, không đóng / thêm panel (user 30/10/2026) ----- */
/* cột 3 (Độ sâu/Khớp lệnh/Độ rộng) hẹp dần theo user 30/10: 1.25:1:1 -> -15% -> thêm -20% -> thêm -15%; phần dư chia cho cột 1-2 theo tỷ lệ cũ */
.ws{display:grid;grid-template-columns:minmax(0,1.485fr) minmax(0,1.187fr) minmax(0,.578fr);gap:10px;align-items:start}
.col{display:flex;flex-direction:column;gap:10px;min-width:0}
.grp{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:0}
/* các tab của 1 cửa sổ luôn 1 hàng (user 30/10): cột hẹp thì tab không chọn co lại, cắt chữ "…" (rê chuột xem tên đủ) */
.gtabs{border-radius:11px 11px 0 0;display:flex;gap:1px;background:var(--panel2);border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow:hidden}
.tab{display:flex;align-items:center;padding:7px 10px;cursor:pointer;font-weight:700;font-size:12px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;flex:0 1 auto;min-width:0}
.tab.on{flex-shrink:0}
.tab .t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.grp{container-type:inline-size}
/* cửa sổ không dải tab (Đối đầu Dòng lệnh, 30/10): bỏ nền + viền + đệm bao ngoài -> 4 ô (Nến giá, Xung lực, Delta, Quỹ đạo)
   đứng độc lập, mép ngoài trùng mép cột */
.grp.notabs{background:transparent;border:0;border-radius:0}
.grp.notabs .pn-content{padding:0}
.grp.notabs .of-wrap{margin-top:0}
@container (max-width:300px){.tab{font-size:11px;padding:7px 7px}}
@container (max-width:250px){.gtabs{gap:0}.tab{font-size:10px;padding:7px 4px}.tab .info{width:13px;height:13px;font-size:10px;margin-left:3px}}
.tab.on{color:var(--text);border-bottom-color:var(--accent);background:var(--panel)}
.macro-ph{background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:70px 20px;text-align:center;color:var(--muted)}
.macro-ph h3{color:var(--text);margin-bottom:6px}

.pn{position:relative;min-width:0}
/* cửa sổ ghép (Biểu đồ giá & Diễn biến): các panel xếp trên dưới, mỗi panel có tiêu đề ở đầu thanh chọn */
.pn-title{display:none}
.stk .pn-title{display:block;align-self:center;font-size:13px;font-weight:700;color:var(--text)}
.stk>.pn+.pn{border-top:1px solid var(--line)}
.stk .lw-chart{height:400px}
.pn-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--grid)}
.pn-bar select,.pn-bar input[type=date]{height:26px;border:1px solid var(--line);background:var(--panel2);border-radius:7px;padding:0 6px;font-size:12px;font-weight:600;max-width:190px}
.pn-bar .grow{flex:1}
.pn-bar .gear-wrap{position:relative}
.pop{position:absolute;right:0;top:30px;z-index:25;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:230px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pop label{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;cursor:pointer}
/* đầu panel kiểu XNO: nhãn nhỏ phía trên ô chọn, khoảng ngày là 1 ô liền, nút cài đặt chỉ là biểu tượng */
.pn-bar{align-items:flex-end;gap:10px;padding:10px 12px}
.pn-bar .fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.pn-bar .fld>span{font-size:12px;color:var(--muted);line-height:16px}
.pn-bar .fld select{max-width:280px;min-width:190px;border-radius:999px;padding:0 10px;height:28px}
.pn-bar .fld input[type=date]{border-radius:999px;height:28px;padding:0 10px}
.pn-bar .rng{display:flex;align-items:center;gap:6px;height:28px;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:0 10px}
.pn-bar .rng input[type=date]{border:0;background:transparent;height:24px;padding:0;max-width:130px}
.btn.icon{width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:16px;background:transparent;border-color:transparent;color:var(--muted)}
.btn.icon:hover{background:var(--panel2);color:var(--text)}
.pop-t{font-size:13px;font-weight:600;padding:2px 0 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pop-g{font-size:11px;color:var(--muted);text-transform:none;padding:6px 0 2px}
.pn-stage{position:relative;min-height:160px}
.pn-content{container-type:inline-size;padding:8px 10px 10px}
.pn-msg{padding:34px 16px;text-align:center;color:var(--muted);font-size:12.5px}
.pn-msg .err{color:var(--down);font-weight:700;margin-bottom:8px}
.pn-msg .btn{margin-top:6px}
.sk{padding:14px}
.sk i{display:block;height:14px;border-radius:6px;margin-bottom:11px;background:linear-gradient(90deg,var(--panel2) 25%,var(--line) 50%,var(--panel2) 75%);background-size:200% 100%;animation:shim 1.2s infinite}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
.note{font-size:11px;color:var(--muted);margin:2px 0 6px}
.note.warn{color:var(--orange)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;margin-bottom:8px}
.cards div{background:var(--panel2);border-radius:8px;padding:6px 9px}
.cards span{display:block;font-size:10.5px;color:var(--muted)}
.cards b{font-size:14px;font-variant-numeric:tabular-nums}
/* Market Breadth: 5 ô Tăng | TC | Giảm | Trần | Sàn luôn 1 hàng kể cả cột hẹp */
.cards.bcards{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.bcards div{padding:5px 4px;text-align:center;min-width:0}
.chart{width:100%}
.sub-h{font-size:11.5px;font-weight:700;margin:8px 0 2px;color:var(--muted)}

/* depth */
.big-px{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.big-px b{font:700 26px 'Space Grotesk',sans-serif}
table.dp{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
table.dp th{color:var(--muted);font-size:10.5px;font-weight:700;padding:4px 6px;text-align:right}
table.dp td{padding:4px 6px;text-align:right;position:relative}
table.dp td.bid,table.dp td.ask{width:30%}
table.dp td i{position:absolute;top:2px;bottom:2px;opacity:.22}
table.dp td.bid i{right:0;background:var(--up)}
table.dp td.ask i{left:0;background:var(--down)}
table.dp td b{position:relative;font-weight:600}
table.dp td.pb{text-align:center;font-weight:700}
.ratio{display:flex;height:20px;border-radius:6px;overflow:hidden;margin-top:10px;font-size:11px;font-weight:700}
.ratio div{display:flex;align-items:center;padding:0 8px;color:#fff;min-width:0;white-space:nowrap}
.ratio .a{background:var(--up)}.ratio .b{background:var(--down);justify-content:flex-end}
/* ticks */
.tickwrap{max-height:520px;overflow-y:auto}
table.tk{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
table.tk th{position:sticky;top:0;background:var(--panel2);color:var(--muted);font-size:10.5px;padding:5px 7px;text-align:right}
table.tk td{padding:3.5px 7px;text-align:right;border-bottom:1px solid var(--grid)}
table.tk th:first-child,table.tk td:first-child{text-align:left}
.more{display:block;margin:8px auto 0}
/* vp */
.vpbox{border:1px solid var(--grid);border-radius:12px}
/* màu theo tham chiếu như XNO */
.t-up{color:var(--up)}.t-down{color:var(--down)}.t-ref{color:var(--ref)}.t-ceil{color:var(--ceil)}.t-floor{color:var(--floor)}.t-fg{color:var(--text)}
.fl-up,.fl-down{border-radius:4px}
.fl-up{animation:fl-up .9s ease-out both}.fl-down{animation:fl-down .9s ease-out both}
/* Độ sâu thị trường kiểu XNO */
.dp-wrap{container-type:inline-size;font-variant-numeric:tabular-nums}
.dp-head{padding:8px 0 10px}
/* 7 mục đầu panel gộp 1 bảng gọn (30/10): 2 cột, mỗi dòng "nhãn ......... số"; cột trái Mở cửa / Cao / Thấp, cột phải KL / GT / NN */
.dp-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:repeat(6,auto);grid-auto-flow:column;gap:2px 14px;
  background:var(--panel2);border-radius:8px;padding:6px 10px}
.dp-stats .dp-c{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
@container (max-width:300px){.dp-c .u{display:none}}   /* hẹp: bỏ chữ "HĐ" và năm của ngày đáo hạn */
@container (max-width:250px){.dp-stats{grid-template-columns:auto auto;justify-content:space-between;gap:2px 8px;padding:6px 7px}.dp-stats .dp-c{gap:3px}.dp-c .l{font-size:10.5px}.dp-c .v{font-size:11.5px}}
.dp-c .l{font-size:11px;color:var(--muted);line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-c .v{font-size:12.5px;font-weight:600;line-height:20px;white-space:nowrap}
.dp-book{border-top:1px solid var(--line);padding:12px 4px}
.dp-hdr{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:clamp(11px,2.2cqi,17px);font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--line)}
.dp-row{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.dp-row:last-of-type{border-bottom:0}
.dp-q{position:relative;display:flex;align-items:center;height:clamp(34px,5.8cqi,48px);padding:0 8px;overflow:hidden}
.dp-q.bid{justify-content:flex-end}.dp-q.ask{justify-content:flex-start}
.dp-q .qbar{position:absolute;top:4px;bottom:4px;border-radius:2px}
.dp-q.bid .qbar{right:0;background:color-mix(in srgb,var(--up) 18%,transparent)}
.dp-q.ask .qbar{left:0;background:color-mix(in srgb,var(--down) 24%,transparent)}
.dp-q .v{position:relative;font-size:clamp(13px,2.5cqi,20px);font-weight:500}
.dp-q.bid .v{color:var(--up)}.dp-q.ask .v{color:var(--down)}
.dp-p{display:flex;align-items:center;justify-content:center;height:clamp(34px,5.8cqi,48px);font-size:clamp(13px,2.5cqi,20px)}
.dp-ratio{margin-top:12px}
.dp-ratio .track{display:flex;height:10px;border-radius:999px;overflow:hidden}
.dp-ratio .track .bid{background:var(--up)}.dp-ratio .track .ask{flex:1;background:var(--down)}
.dp-ratio .txt{margin-top:6px;display:flex;justify-content:space-between;gap:12px;font-size:clamp(11px,2cqi,15px);color:var(--muted)}
.dp-ratio .txt strong{font-weight:500}
/* Khớp lệnh kiểu XNO */
table.tk th{font-size:11px;font-weight:600;color:var(--text);padding:10px 8px}
table.tk td{font-size:12px;line-height:16px;padding:10px 8px;font-weight:500;font-variant-numeric:tabular-nums}
table.tk .r{text-align:right}table.tk .c{text-align:center}
table.tk .sd{display:inline-flex;height:20px;min-width:28px;align-items:center;justify-content:center;border-radius:2px;padding:0 6px;font-size:12px;background:var(--panel2);color:var(--muted)}
table.tk .sd.b{background:color-mix(in srgb,var(--up) 16%,transparent);color:var(--up)}
table.tk .sd.s{background:color-mix(in srgb,var(--down) 16%,transparent);color:var(--down)}
.tk-empty{text-align:center;color:var(--muted);padding:24px}
.fgn-wrap{position:relative;container-type:inline-size}
.fgn-legend em{font-style:normal}.fgn-legend .ls{display:none}
/* cửa sổ hẹp (Khối ngoại ròng ở cột 3 từ 30/10): chú giải tên ngắn; chiều cao biểu đồ đặt ở JS (bằng Market Breadth) */
@container (max-width:360px){.fgn-legend{gap:10px}.fgn-legend .lf{display:none}.fgn-legend .ls{display:inline}}
.fgn-legend{position:absolute;left:0;right:0;bottom:8px;height:28px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:10px;color:var(--muted);pointer-events:none}
.fgn-legend span{display:inline-flex;align-items:center;gap:6px}
.fgn-legend i{display:inline-block;width:12px;height:6px;border-radius:2px}
.fgn-legend i.ln{width:16px;height:2px;border-radius:999px}
/* Đối đầu Dòng lệnh kiểu XNO: khung 760 px, 3 ô nền (35% / 30% / 33%) + dải tiêu đề 32 px, biểu đồ phủ lên trên */
.of-wrap{position:relative;min-height:760px;height:760px;margin-top:6px}
.of-box{position:absolute;left:0;right:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden;pointer-events:none}
.of-h{height:32px;display:flex;align-items:center;gap:4px;padding:0 12px;font-size:11px;border-bottom:1px solid var(--line);background:var(--panel2)}
.of-h b{font-weight:600}
.of-h .of-i{pointer-events:auto;cursor:help;color:var(--muted);font-size:11px;width:16px;height:16px;display:grid;place-items:center;border-radius:4px}
.of-h .grow{flex:1}
/* dải tiêu đề nổi trên biểu đồ phủ (z-index 1) để ⓘ và ô "Hiển thị đóng mở vị thế" bấm được */
.of-h{position:relative;z-index:2}
.of-h .info,.of-tg{pointer-events:auto}
.of-tg{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap}
.of-tg input{margin:0;accent-color:var(--accent);cursor:pointer}
.pn-bar.empty{display:none}
/* ⓘ của panel đứng riêng nằm trên tab đang chọn: bỏ ⓘ ở thanh panel (cửa sổ ghép .stk vẫn giữ ⓘ trên thanh từng phần) */
.gbody:not(.stk) .pn-tip{display:none}
.gbody:not(.stk) .pn-bar.tip-only{display:none}
.tab .info{flex:none;margin-left:5px;width:16px;height:16px;font-size:11px}
/* cửa sổ ghép: ⓘ của từng phần đứng ngay sau tên phần (Biểu đồ giá ⓘ, Diễn biến trong phiên ⓘ) */
.stk .pn-title{order:-2}
.stk .pn-bar .seg{display:none}            /* khung nến Biểu đồ giá chọn ở dải đầu cửa sổ (.cmb-bar) */
.stk .pn-tip{order:-1;align-self:center;margin-left:-6px}
.of-chart{position:absolute!important;inset:0;z-index:1}   /* !important: ECharts có thể gắn style position:relative vào khung (xem Panel.resize) */
.of-traj{position:relative;height:300px;margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.of-traj.wide{position:absolute;right:0;top:67%;bottom:0;width:49.5%;height:auto;margin:0;z-index:2}
.of-traj-chart{position:absolute!important;left:0;right:0;top:32px;bottom:0}
/* Quỹ đạo hẹp (nửa dải dưới ở cột 1 hẹp): tiêu đề 1 dòng, bỏ chú thích "5 phút giao dịch gần nhất" (đã có trong ⓘ) */
.of-traj{container-type:inline-size}
.of-traj .of-h b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@container (max-width:380px){.of-traj .of-h .muted{display:none}}
/* flux */
.fx{display:flex;flex-direction:column;gap:8px}
/* Fsignal: 5 ô giá bên trái, khung nến + ⓘ bên phải, chung 1 hàng; hẹp thì khung nến + ⓘ xuống dòng dưới, vẫn canh phải */
.pn-bar.fx-bar{align-items:center}
.pn-bar .tf-sel{height:30px;border-radius:999px;padding:0 10px;min-width:92px;margin-left:auto}
.cards.fx-head{display:flex;flex:1 1 400px;gap:6px;margin:0;min-width:0;order:-1}
.fx-head div{flex:1 1 auto;min-width:0;padding:5px 7px}
.pn-bar.fx-bar{container-type:inline-size}
@container (max-width:420px){.fx-head{flex-wrap:wrap}.fx-head div{flex:1 1 28%}}   /* điện thoại: 6 ô thành 2 hàng x 3 */
.cards.vpcards{grid-template-columns:repeat(3,minmax(0,1fr))}                     /* Volume Profile: POC / VAH / VAL 1 hàng */
@container (max-width:620px){.fx-head{gap:4px}.fx-head div{padding:4px 5px}.fx-head b{font-size:12px}.fx-head span{font-size:10px}.pn-bar .tf-sel{min-width:78px;padding:0 6px}}
.fx-head span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-head b{white-space:nowrap;font-size:13px}
.fx-head .fx-px em{font-style:normal;font-weight:600;font-size:.92em;margin-left:8px}   /* thay đổi cạnh giá, chung 1 ô (30/10) */
/* cỡ ô theo nội dung (30/10): ô giá + thay đổi rộng nhất, Tổng KL vừa, TC / Trần / Sàn bằng nhau; phần dư chia đều */
.fx-head div{flex:1 1 0;min-width:max-content}
.fx-head .fx-px{flex-grow:2.2}
.fx-head div:nth-child(2){flex-grow:1.2}
@container (max-width:420px){.fx-head .fx-px{flex:1 1 100%}.fx-head div:not(.fx-px){flex:1 1 20%}}   /* điện thoại: ô giá 1 hàng, 4 ô còn lại 1 hàng */
.fx-side{border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0;background:var(--panel)}
.fx-list{max-height:448px;overflow-y:auto;margin-top:6px;padding-left:14px;position:relative}   /* 330 + 118 px của ô "Tín hiệu gần nhất" đã ẩn */
/* 2 cột Tăng | Giảm song song (30/10, thay tab Tất cả / Tăng / Giảm): mỗi cột cuộn riêng, cao bằng danh sách cũ + chỗ dải tab */
.fx-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.fx-col{min-width:0}
.fx-col-h{font-size:12px;font-weight:700;padding:6px 4px;border-bottom:1px solid var(--line)}
.fx-cols .fx-list{max-height:450px}
.fx-day{display:flex;align-items:center;gap:6px;margin:10px 0 6px}
.fx-date{font-size:11px;font-weight:500;padding:1px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.fx-count{font-size:10px;color:var(--muted);min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:var(--panel2)}
.fx-row{position:relative;display:block;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:10px;padding:6px 8px;margin-bottom:6px;cursor:pointer;font-size:12px;color:var(--text)}
.fx-row:hover,.fx-row[aria-pressed=true]{background:var(--panel2);border-color:var(--line)}
.fx-row .fx-dot{position:absolute;left:-12px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.fx-row::before{content:"";position:absolute;left:-9px;top:22px;bottom:-12px;width:1px;background:var(--line)}
.fx-row[data-direction=up] .fx-dot{background:var(--up)}.fx-row[data-direction=down] .fx-dot{background:var(--down)}.fx-row[data-direction=end] .fx-dot{background:#f1c617}
.fx-row[data-state=forming]{border-style:dashed;border-color:var(--line)}
.fx-row .top{display:flex;justify-content:space-between;gap:8px;font-weight:500}
.fx-row[data-direction=up] .dir{color:var(--up)}.fx-row[data-direction=down] .dir{color:var(--down)}.fx-row[data-direction=end] .dir{color:#f1c617}
/* Ép mua / Ép bán: màu theo phe, chấm rỗng + chữ mảnh (30/10) */
.fx-row[data-warn="1"] .fx-dot{background:var(--panel)!important;border:1.5px solid var(--down);box-sizing:border-box}   /* cùng cỡ 8 px với chấm đặc */
.fx-row[data-warn="1"][data-direction=up] .fx-dot{border-color:var(--up)}
.fx-row[data-warn="1"] .dir{font-weight:400}
.fx-row time{color:var(--muted);font-variant-numeric:tabular-nums}
.fx-row .bot{display:flex;align-items:center;gap:8px;margin-top:3px;color:var(--muted);font-size:11px}
.fx-row .bot strong{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.fx-row .go{opacity:0;transition:opacity .15s}.fx-row:hover .go{opacity:1}
.fx-l-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fx-badge{font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.fx-badge.q{color:var(--muted)}
.fx-badge[data-state=forming]{color:#f1c617}.fx-badge[data-state=confirmed]{color:var(--up)}
.fx-l-dir{display:flex;align-items:center;gap:12px;margin:10px 0 6px}
.fx-l-dir .ic{font-size:26px;line-height:1}
.fx-l-dir[data-direction=up]{color:var(--up)}.fx-l-dir[data-direction=down]{color:var(--down)}.fx-l-dir[data-direction=end]{color:#f1c617}
.fx-l-dir strong{font-size:15px}
.fx-l-px{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--muted)}
.fx-l-px strong{font-size:16px;font-variant-numeric:tabular-nums}
.fx-tabs{display:flex;border-bottom:1px solid var(--line);margin:10px 0 2px}
.fx-tabs button{flex:1;border:0;background:transparent;color:var(--muted);height:30px;font-size:12px;cursor:pointer;border-bottom:2px solid transparent}
.fx-tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.fx-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;cursor:pointer;font-size:12px}
.fx-item:hover{background:var(--panel2)}
.fx-item .t{color:var(--muted);width:40px}
.fx-item .tag{font-weight:800;font-size:11px;padding:1px 7px;border-radius:5px}
.tag.up{background:rgba(37,207,123,.15)}.tag.down{background:rgba(240,71,90,.15)}.tag.warn{background:rgba(255,159,67,.18);color:var(--orange)}
.fx-item .p{margin-left:auto;font-variant-numeric:tabular-nums}
.fx-latest{background:var(--panel2);border-radius:12px;padding:10px 12px;border:1px solid var(--line)}
.fx-latest .st{font-size:10.5px;color:var(--muted)}
.fx-latest b{font-size:16px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:var(--btn);padding:0 9px;height:24px;font-weight:700;font-size:11.5px;cursor:pointer}
.seg button.on{background:var(--btn-on);color:var(--btn-on-text)}
@container (min-width:720px){
  .fx{flex-direction:row;align-items:flex-start}
  .fx-main{flex:1;min-width:0}
  .fx-side{width:280px;flex:none}
}

/* basis + bảng giá cạnh nhau 25 : 75 (màn rộng); basis xếp dọc: thông tin trên, biểu đồ kỳ hạn cao bằng bảng giá */
.top-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}
.top-row .hero,.top-row .board-card{margin-bottom:0}
@media(min-width:1181px){
  .top-row{grid-template-columns:minmax(0,25fr) minmax(0,75fr);align-items:stretch}
  .top-row .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(170px,1fr);height:auto}
  .top-row .hero-info{border-right:0;border-bottom:1px solid var(--line);gap:10px}
  .top-row table.board{min-width:0;font-size:11.5px}
  .top-row table.board th,.top-row table.board td{padding:5px 3px}
  .top-row table.board tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--panel);box-shadow:1px 0 0 var(--line)}
  .top-row table.board thead tr:first-child th:first-child{position:sticky;left:0;z-index:3;background:var(--panel2);box-shadow:1px 0 0 var(--line)}
}
@media(min-width:1181px) and (max-width:1499px){.top-row table.board{font-size:11px}}
@media(max-width:1180px){
  table.board th,table.board td{padding:5px 5px}
  .ws{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr);height:auto}.hero-info{border-right:0;border-bottom:1px solid var(--line);min-height:150px}.hero-chart{height:160px}
}
@media(max-width:560px){
  #app-screen{padding:10px 8px 40px}
  .hero-info .basis{font-size:28px}
}
/* ----- điện thoại (≤ 640 px, 29/10/2026) ----- */
@media(max-width:640px){
  .hero-info{min-height:0;padding:10px 12px;gap:8px}
  .hz-title{padding:8px 12px 0;height:28px}.hz-title span:not(.info){display:none}
  .hero-chart{height:150px}
  /* bảng giá: cột mã hợp đồng dính bên trái khi cuộn ngang */
  table.board tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--panel);box-shadow:1px 0 0 var(--line)}
  table.board thead tr:first-child th:first-child{position:sticky;left:0;z-index:3;background:var(--panel2);box-shadow:1px 0 0 var(--line)}
  table.board th,table.board td{padding:5px 6px}
  .board-note{font-size:10.5px}
  /* thanh chế độ: 1 hàng cuộn ngang cho 3 chế độ, hàng dưới là trạng thái + nút */
  .modes{gap:6px}
  .modes .mode{padding:6px 10px;font-size:12.5px}
  .modes .sp{flex-basis:100%;height:0}
  .gbar{flex:1 1 100%;margin-left:0;gap:8px}
  .gbar .fld{flex:1 1 100%}.gbar .fld>span{flex:0 0 74px}
  .gbar select{flex:1;min-width:0}
  .gbar .rng{flex:1;min-width:0}.gbar .rng input[type=date]{max-width:none;flex:1;min-width:0}
  .gbar .btn.sm{margin-left:82px}
  .modes .live-note{flex:1 1 100%;order:5;font-size:11px}
  .menu{right:0;min-width:200px;max-width:calc(100vw - 24px)}
  /* đầu panel: ô chọn co theo bề ngang, ngày + nút nằm cùng hàng khi đủ chỗ */
  .pn-bar{gap:8px;padding:8px 10px}
  .pn-bar .fld{flex:1 1 150px}
  .pn-bar .fld:has(>input[type=date]){flex:0 1 128px;min-width:118px}
  .pn-bar .fld:has(>select[title="Khung thời gian"]){flex:0 0 72px}
  .pn-bar .grow{display:none}.pn-bar .gear-wrap{margin-left:auto}
  .pn-bar .fld select{min-width:0;width:100%;max-width:none}
  .pn-bar .fld input[type=date]{width:100%}
  .pn-bar .rng{width:100%}.pn-bar .rng input[type=date]{max-width:none;flex:1;min-width:0}
  .pn-content{padding:8px 8px 10px}
  .tab{padding:8px 10px;font-size:12px}
  .seg button{height:28px;padding:0 10px}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards b{font-size:13px}
  /* Đối đầu Dòng lệnh: khung thấp hơn */
  .of-wrap{min-height:640px;height:640px}
  .of-h{height:30px;padding:0 10px}
  .of-traj{height:280px}
  .lw-chart{height:380px}
  .tickwrap{max-height:440px}
  table.tk th,table.tk td{padding:8px 6px}
  .fx-list,.fx-cols .fx-list{max-height:380px}
  .lock-page{margin:24px auto 48px}
  .lock-card h1{font-size:24px}
}

/* ----- màn khoá (không đủ gói) ----- */
.lock-page{max-width:760px;margin:56px auto 80px;padding:0 16px}
.lock-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 28px 24px;box-shadow:var(--shadow)}
.lock-card h1{font-size:30px;margin:0 0 6px}.lock-card h1 em{font-style:normal;color:var(--accent)}
.lock-card .lk-msg{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-size:15px;font-weight:700}
.lock-card .lk-msg span{font-size:20px}
.lock-card p{color:var(--muted);margin:6px 0}
.lock-card ul{margin:12px 0 18px;padding-left:18px;color:var(--text);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.lock-card .lk-act{display:flex;gap:10px;flex-wrap:wrap}
.lock-card .lk-act button{height:38px;padding:0 18px;border-radius:10px;border:1px solid var(--line);background:var(--btn);color:var(--text);font:700 13px Manrope,sans-serif;cursor:pointer}
.lock-card .lk-act button.pri{background:var(--btn-on);border-color:var(--btn-on);color:#fff}
@media(max-width:600px){.lock-card ul{grid-template-columns:1fr}.lock-card{padding:20px}}

/* ----- panel Biểu đồ giá (Lightweight Charts, nến VN30F1M 5/10/15 phút) ----- */
.lw-chart{position:relative;height:460px;width:100%}
.px-badge{position:absolute;right:4px;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;pointer-events:none;
  border-radius:4px;padding:2px 7px 3px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:top .25s linear;font-variant-numeric:tabular-nums}
.px-badge.pu{background:#02bfc8}.px-badge.pd{background:#df5b61}
.px-badge b{font-size:13px;line-height:1.3}.px-badge small{font-size:10.5px;font-weight:600;line-height:1.3;opacity:.92}

/* ----- bỏ dòng mô tả chữ (29/10/2026, user): giải thích chuyển vào biểu tượng ⓘ; dòng cảnh báo (.note.warn) vẫn hiện ----- */
.pn-content .note:not(.warn){display:none}
#board-note,#live-note{display:none}

/* ----- biểu tượng ⓘ + khung chú giải (kiểu XNO) ----- */
.info{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--muted);font-size:12px;line-height:1;cursor:help;
  user-select:none;flex:none;pointer-events:auto;position:relative;z-index:5}
.info:hover,.info:focus-visible{color:var(--text);background:var(--panel2);outline:none}
.hz-title .info{margin-left:2px;align-self:center}
.of-h .info{margin-left:2px}
.pn-tip{display:flex;align-items:center;align-self:center}
.tipbox{position:fixed;z-index:1000;background:#0b161c;border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 12px 32px rgba(0,0,0,.45);
  color:var(--text);font:12.5px/1.55 Manrope,system-ui,sans-serif;pointer-events:auto;overflow-y:auto}
.tipbox p{margin:0 0 8px}.tipbox p:last-child{margin-bottom:0}
.tipbox>b:first-child{display:block;font-size:13px;margin-bottom:6px}
.tipbox .tip-m{color:var(--muted);font-size:11.5px}
.tipbox ul{list-style:none;margin:0 0 8px;padding:0}
.tipbox .tip-lg li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-weight:600}
.tipbox .tip-lg li:first-child{border-top:0}
.tipbox .tip-sym{font-style:normal;width:14px;text-align:center;font-size:12px;flex:none}
.tipbox .tip-def li{padding:4px 0 4px 12px;position:relative}
.tipbox .tip-def li::before{content:"";position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;background:var(--muted)}

/* ===== Cột 2 không bảng nền chung (user 30/10): dải tab + khối trên + khối dưới là các ô độc lập ===== */
.grp.split{background:transparent;border:0;border-radius:0}
.grp.split>.gtabs{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:8px}
.grp.split .pn-content{padding:0}
/* Fsignal: khối trên = hàng ô giá + biểu đồ; khối dưới = lịch sử tín hiệu (.fx-side đã là ô riêng) */
.grp.split .pn-bar.fx-bar{background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.grp.split .fx-main{background:var(--panel);border:1px solid var(--line);border-top:1px solid var(--grid);border-radius:0 0 12px 12px;padding:6px 8px 8px}
/* Biểu đồ giá & Diễn biến: khối trên = dải ô giá + Biểu đồ giá; khối dưới = Diễn biến trong phiên */
.grp.split .stk>.cmb-bar{background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.grp.split .stk>.pn{background:var(--panel);border:1px solid var(--line)}
.grp.split .stk>.cmb-bar+.pn{border-top:1px solid var(--grid);border-radius:0 0 12px 12px}
.grp.split .stk>.pn+.pn{border-radius:12px;margin-top:8px;border-top:1px solid var(--line)}
.grp.split .stk>.pn .pn-content{padding:6px 8px 8px}

/* Hộp trạng thái riêng từng ô Đối đầu Dòng lệnh (30/10): nổi trên biểu đồ + dải tiêu đề, không nhận chuột */
.of-tip{position:absolute;z-index:5;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  font-size:11px;line-height:1.55;box-shadow:0 8px 24px rgba(0,0,0,.35);min-width:190px;max-width:300px;font-variant-numeric:tabular-nums}
.of-tip-h{font-weight:600;margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.of-tip-r{display:flex;justify-content:space-between;gap:16px}.of-tip-r span{color:var(--muted)}
.of-tip-sep{margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.of-tip{transition:left .12s ease-out}   /* đi theo cột con trỏ mượt (30/10) */