/* base.css - trader247 web: base layer ported from the user's other app (AI Agent Trading/chart/desk.html inline
   <style>, lines 113-139, 160-163, 242-270, 307-318, 330, 342-352, 355-397, 399-426, 431-434, 457-458, 483-488).
   Load order: base.css -> desk.css -> t247.css. desk.css overrides these tokens and rules (.desk.b2a). */

:root {
  --bg: #0b0e13; --panel: #10141b; --panel-2: #161b24; --line: #1d232c; --grid: #131922;
  --ink: #d7dde5; --ink-2: #9aa5b8; --ink-3: #6b7689;
  --up: #26a69a; --down: #ef5350; --up-soft: rgba(38, 166, 154, 0.35); --down-soft: rgba(239, 83, 80, 0.35);
  --warn: #e3b341; --sim: #f0883e; --stop: #f85149; --accent: #e0a63a; --accent-ink: #14100a;
  --entry: #6fb0ff; --sell: #fb923c; --on-color: #ffffff;
  --rsi: #eef2f7; --ema9: #c99a1e; --wma45: #ef4f57; --trend: #eef2f7; --ab: #26a69a; --res: #b48cf0; --blocked: #7c889c;
  /* dải trạng thái 1 / 2 / 3 và màu sóng từng khung (bản tối) */
  --tr1: #7d3634; --tr2: #7d6622; --tr3: #1f5e53;
  --w-D: #2c5190; --w-3D: #1f5e53; --w-W: #7d5c14; --w-2W: #713059; --w-3W: #4b3b86; --w-M: #5c4c3e;
  --font-ui: "Segoe UI", system-ui, Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "IBM Plex Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; overflow: hidden; }
body.mo-phong { box-shadow: inset 0 0 0 3px var(--sim); }
.n, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--entry); }
code { font-family: var(--font-mono); font-size: 11.5px; background: var(--panel-2); padding: 0 4px; border-radius: 3px; }
small, .small { font-size: 11px; color: var(--ink-3); }
.chua { color: var(--ink-3); }
.chua small { display: block; }
.win { color: var(--up); } .loss { color: var(--down); } .warn { color: var(--warn); } .stop { color: var(--stop); } .sim { color: var(--sim); }
b { font-weight: 600; }
.band { padding: 5px 10px; border-radius: 4px; font-weight: 700; letter-spacing: 0.04em; }
.band.sim { background: repeating-linear-gradient(135deg, #3a2410 0 10px, #4a2d12 10px 20px); color: var(--sim); border: 1px solid var(--sim); font-size: 15px; }
.band.stop { background: #3a1413; color: var(--stop); border: 1px solid var(--stop); font-size: 14px; }
.band.warn { background: #3a2e10; color: var(--warn); border: 1px solid var(--warn); }
.sp { flex: 1 1 auto; }
#clock { font-weight: 600; }

/* biểu đồ */
.tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 26px; }
.pill, .btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); border-radius: 4px; padding: 2px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.pill[aria-pressed="true"], .btn[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn:disabled, .pill:disabled { opacity: 0.4; cursor: default; }
.btn:focus-visible, .pill:focus-visible { outline: 2px solid var(--entry); outline-offset: 1px; }
.chart { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; min-height: 0; }
/* ô giá 64 % / ô RSI 36 % phần còn lại của cột giữa (sau hàng nút khung, dòng rê chuột); tay kéo #keoGiaRsi (JS cuối tệp) ghi đè flex-grow
   trong [0,45; 0,8] và nhớ localStorage. RSI ngay sát dưới ô giá: khoảng cách = gap 4 + tay kéo 7 − lề âm 6 + gap 4 = 9 px */
#priceBox { flex: 640 1 0; } #rsiBox { flex: 360 1 0; }
#price, #rsi { height: 100%; }
#keoGiaRsi { flex: 0 0 7px; margin: -3px 0; position: relative; z-index: 6; cursor: row-resize; border-radius: 3px; touch-action: none; }
/* vạch tay kéo phải THẤY được khi không rê chuột (phản biện 20/10: vạch màu --line trên nền --panel gần như vô hình với người không lập trình):
   nghỉ = cam mờ 45 % cao 4 px rộng 56 px; rê chuột / đang kéo = cam đậm + dòng chữ nhỏ "kéo để đổi tỉ lệ" bên phải vạch (title cũng ghi) */
#keoGiaRsi::after { content: ''; position: absolute; left: 50%; top: 1px; width: 56px; height: 4px; margin-left: -28px; border-radius: 2px; background: rgba(224, 166, 58, 0.45); }
#keoGiaRsi:hover, #keoGiaRsi.keo { background: rgba(224, 166, 58, 0.22); }
#keoGiaRsi:hover::after, #keoGiaRsi.keo::after { background: var(--accent); }
#keoGiaRsi::before { content: '⇕ kéo để đổi tỉ lệ giá / RSI · bấm đúp: về 64 / 36'; position: absolute; left: calc(50% + 36px); top: -6px; font-size: 10.5px; line-height: 18px;
                     color: var(--accent); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
#keoGiaRsi:hover::before, #keoGiaRsi.keo::before { opacity: 1; }
.chart .lbl { position: absolute; left: 8px; top: 6px; z-index: 5; font-size: 11px; color: var(--ink-2); pointer-events: none; display: flex; flex-wrap: wrap; gap: 2px 10px; max-width: calc(100% - 100px); }
.chart .lbl b { color: var(--ink); }
#priceBox.dang-chay .nc { color: var(--warn); border: 1px dashed var(--warn); padding: 0 6px; border-radius: 3px; flex-basis: 100%; width: fit-content; }
#hover { min-height: 16px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hover b { color: var(--ink); }
/* bảng */
table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
th, td { padding: 2px 5px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink-3); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; }
td.r, th.r { text-align: right; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--panel-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; font-size: 12px; }
.kv span:nth-child(odd) { color: var(--ink-3); }
.nhan { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--line); }
.nhan.DUNG_LUAT_THANG { color: var(--up); border-color: var(--up); } .nhan.DUNG_LUAT_THUA { color: var(--ink-2); }
.nhan.SAI_THUC_HIEN { color: var(--warn); border-color: var(--warn); } .nhan.NGOAI_LUAT { color: var(--stop); border-color: var(--stop); }
.nhan.LECH_MO_HINH { color: var(--res); border-color: var(--res); } .nhan.THIEU_SL { color: var(--stop); } .nhan.DANG_MO { color: var(--entry); border-color: var(--entry); }
.toast { position: fixed; right: 14px; bottom: 14px; background: var(--ink); color: var(--panel); padding: 6px 12px; border-radius: 4px; z-index: 50; font-weight: 600; }
input, select { font: inherit; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; width: 100%; min-width: 0; }
input.n { font-family: var(--font-mono); }
input:read-only { color: var(--ink-2); background: var(--panel-2); }
.out { margin-top: 4px; font-size: 12px; display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; }
.out span:nth-child(odd) { color: var(--ink-3); }
.out .big { font-size: 20px; font-weight: 700; color: var(--accent); }
#F1 { display: flex; flex-direction: column; } #von { flex: 1 1 0; min-height: 0; }
dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; width: min(560px, 94vw); }
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.frm { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font-size: 12.5px; }
.frm label { color: var(--ink-2); }
/* ===== ĐỒNG BỘ HIỂN THỊ VỚI MT5 (20/10/2026 19:37) ===== */
:root { --mt5-entry: #aeb8c8; --mt5-sl: #f0524f; --mt5-tp: #22c55e; --mt5-buy: #3d8bfd; --mt5-sell: #f0524f; --mt5-bid: #8a94a6; --mt5-ask: #f0524f; }
/* Toolbox: khung ô (#TB) không đệm, tab ở DƯỚI như MT5; mỗi tab là một lớp phủ kín ô, cuộn bên trong */
#TB { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#TB .tbPanes { flex: 1 1 0; min-height: 0; position: relative; }
#TB .tbPane { position: absolute; inset: 0; overflow: auto; padding: 3px 8px; border: 0; border-radius: 0; background: transparent; }
#TB .tbBar, .tbBar { display: flex; align-items: stretch; flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--panel-2); min-height: 22px; overflow: hidden; }
.tbTab { border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; padding: 2px 11px; cursor: pointer; white-space: nowrap; }
.tbTab[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: inset 0 2px 0 var(--accent); }
.tbTab:focus-visible { outline: 2px solid var(--entry); outline-offset: -2px; }
.tbSep { align-self: center; padding: 0 6px 0 10px; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.tbNote { margin-left: auto; align-self: center; padding: 0 8px; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* bảng kiểu MT5: chữ thường (không viết hoa tiêu đề), số căn phải, một dòng */
table.mt5 { font-size: 12px; }
table.mt5 th { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-2); font-weight: 500; white-space: nowrap; position: sticky; top: 0; background: var(--panel); z-index: 1; }
table.mt5 td { white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: middle; }
table.mt5 td.r, table.mt5 th.r { text-align: right; }
table.mt5 .them { font-size: 10.5px; color: var(--ink-3); }
table.mt5 tr.tong td { background: var(--panel-2); font-weight: 600; color: var(--ink); }
table.mt5 tr.cho td { color: var(--ink-2); }
table.mt5 tr.click.hot td { background: #2a2410; }
.uoc { font-style: italic; }
/* lớp phủ ô giá: chữ đường vị thế / lệnh chờ / SL / TP bên TRÁI như MT5 (không bắt chuột — kéo biểu đồ vẫn được); mũi tên lịch sử deal (SVG) */
/* z-index 6: trên dòng chữ khung / nến đang chạy (.lbl, z 5) — đường lệnh sát đỉnh ô vẫn đọc được chữ (nền mờ) */
#mt5Lay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.mt5Lbl { position: absolute; left: 6px; transform: translateY(-100%); font: 11px/14px var(--font-ui); white-space: nowrap; padding: 0 3px; background: rgba(16, 20, 27, 0.78); border-radius: 2px; }
.mt5Lbl .sim { color: var(--sim); margin-left: 4px; font-size: 10px; }
.mt5Lbl.hot { background: rgba(224, 166, 58, 0.25); border-radius: 2px; }
/* né vùng đã chiếm (sửa sau phản biện 20/10): chữ nằm DƯỚI đường khi phía trên vướng tiêu đề; không chỗ nào trống → cuối dòng sát trục giá, nền đặc */
.mt5Lbl.duoi { transform: translateY(1px); }
.mt5Lbl.de { background: rgba(16, 20, 27, 0.97); outline: 1px solid currentColor; outline-offset: -1px; }
/* đoạn đường MT5 vẽ lại NỔI trên dòng tiêu đề / dải "nến đang chạy" (canvas của biểu đồ nằm dưới chữ của các dòng đó) */
.mt5Doan { position: absolute; height: 0; border-top: 1px dashed; pointer-events: none; }
/* nhãn giá ở trục phải KIỂU MT5 ("82653.32", đủ chữ số của mã) — lớp phủ đè lên thang giá; trục giá còn lại giữ quy ước của bàn (92.000) */
.mt5Gia { position: absolute; transform: translateY(-50%); font: 600 11px/15px var(--font-mono); padding: 0 3px; border-radius: 2px; color: #0b0e13; white-space: nowrap; text-align: left; overflow: hidden; }
#mt5Ls { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; overflow: hidden; }
#mt5Ls .muiTen { pointer-events: auto; cursor: default; }
/* chú giải + hai nút ẩn / hiện ở góc dưới trái ô giá (trên trục thời gian) */
.mt5Leg { position: absolute; left: 6px; bottom: 32px; z-index: 5; display: flex; gap: 4px; align-items: center; font-size: 11px; }
.mt5Leg .leg { border: 1px solid var(--line); background: rgba(16, 20, 27, 0.85); color: var(--ink-2); border-radius: 3px; padding: 0 6px; font: inherit; font-size: 11px; line-height: 17px; cursor: pointer; }
.mt5Leg .leg[aria-pressed="false"] { opacity: 0.55; text-decoration: line-through; }
.mt5Leg .legNote { color: var(--ink-3); background: rgba(16, 20, 27, 0.85); padding: 0 5px; border-radius: 3px; line-height: 17px; white-space: nowrap; }
.leg .may { color: var(--entry); } .leg .that { color: var(--mt5-sell); }
/* LỆNH MÁY THEO KHUNG + ĐƯỜNG (20/10/2026 tối, khối JS cuối script chính): màu bốn loại đường của lệnh SELL (bốn loại của lệnh BUY dùng --trend / --res / --ab
   như trang xem lệnh research/trap_review_template.html) + dải chú giải #duongBar ngay dưới hàng nút khung: một dòng ở ≥ ~1700 px, hẹp hơn thì xuống tối đa
   hai dòng (đủ cả 8 loại, không cắt, không cuộn ẩn); chiều cao chỉ đổi theo bề rộng màn, không đổi khi chọn lệnh (dòng "đang chọn" nằm ở #lenhGhi › #cChon) */
:root { --dg-tang: #fb923c; --dg-htdai: #f87171; --dg-ht: #60a5fa; --dg-abs: #f472b6; }
#duongBar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; flex: 0 0 auto; min-height: 19px; max-height: 40px; overflow: hidden;
            font-size: 11px; color: var(--ink-3); }
#duongBar .dg { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
                border-radius: 9px; padding: 0 6px; font: inherit; font-size: 11px; line-height: 15px; cursor: pointer; white-space: nowrap; }
#duongBar .dg:focus-visible { outline: 2px solid var(--entry); outline-offset: 1px; }
#duongBar .dg[aria-pressed="false"] { opacity: 0.4; }
#duongBar .dg[aria-pressed="false"] .ten { text-decoration: line-through; }
#duongBar .dg i { display: inline-block; width: 16px; height: 0; border-top-width: 2px; border-top-style: solid; }
#duongBar .dg .n { color: var(--ink-3); }
#duongBar .tde { flex: 0 0 auto; color: var(--ink-2); white-space: nowrap; }
/* #lenhGhi: ô cuối hàng nút dưới hàng khung (sau .sp) — rộng gốc 0 + flex-grow lớn: lấy chỗ còn lại, KHÔNG bao giờ làm hàng xuống thêm dòng; chữ dài cắt "…"
   (đủ chữ ở ô rê chuột), nút luôn còn. Thứ tự co: ghi chú (b) / (c) co trước, nhãn lệnh đang chọn co sau cùng */
#lenhGhi { flex: 1000 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 11px; }
#lenhGhi[hidden], #lenhGhi > [hidden] { display: none; }
#lenhGhi .tx { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#lenhGhi button { flex: none; font: inherit; font-size: 11px; cursor: pointer; }
#cChon { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 26px; color: var(--accent); background: rgba(16, 20, 27, 0.88); border: 1px solid var(--accent); border-radius: 3px; padding: 0 0 0 6px; }
#cChon button { border: 0; background: transparent; color: var(--accent); padding: 0 5px; }
#cChon button:hover { color: var(--ink); }
#lenhGhi .gh { display: inline-flex; align-items: center; gap: 4px; flex: 0 100 auto; min-width: 0; color: var(--warn); }
#lenhGhi .gh.mo { color: var(--ink-2); flex-shrink: 1000; }   /* thiếu chỗ: dòng "đang mở ở khung khác" nhường trước, cảnh báo lệnh bị ẩn giữ đủ chữ */
#lenhGhi .gh button { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); border-radius: 3px; padding: 0 5px; line-height: 15px; }
#lenhGhi .gh button:hover { color: var(--ink); border-color: var(--ink-3); }
#tgTatCa small { color: inherit; opacity: 0.75; margin-left: 3px; }
.desk:not(.co-sim) #sim { display: none !important; }
.desk.co-sim { grid-template-rows: 40px auto minmax(0, 1fr) var(--sim-h, 300px); }
.desk.co-sim footer#F { display: none; }
.desk.co-sim #sim { grid-row: 4; grid-column: 1 / -1; position: relative; min-height: 0; min-width: 0; height: var(--sim-h, 300px); overflow: hidden; }
.desk.sim-toan > :not(#sim) { visibility: hidden; }
.desk.co-sim.sim-toan #sim { position: fixed; inset: 0; z-index: 40; height: auto; }
/* < 1280 px: một cột, trang cuộn như cũ; hàng Simulator cao theo nấc (không kẹp) */
@media (max-width: 1279px) {
  .desk.co-sim { grid-template-rows: auto; }
  .desk.co-sim #sim { grid-row: auto; }
  .desk.co-sim #R > #F3 { max-height: 360px; }
}