/* Terminal — dày đặc có chủ đích.
   Bố cục lấy từ dòng terminal tài chính: lưới 12 cột, panel viền mảnh, tiêu đề
   nhỏ viết hoa, chữ đơn cách toàn bộ để mọi con số thẳng cột. Chỗ nào cũng phải
   đọc được từ khoảng cách một tầm tay, nên cỡ chữ nhỏ nhất vẫn là 9px chứ không
   nhỏ hơn.

   Hai màu mang nghĩa: xanh lên, đỏ xuống. Vàng hổ phách dành riêng cho MÔ HÌNH
   — để trên màn hình luôn phân biệt được con số thị trường nói với con số mình
   tự tính ra. */

:root {
  --bg: #f4f4f1;
  --pane: #ffffff;
  --ink: #14140f;
  --dim: #6f6d66;
  --faint: #a3a19a;
  --line: #dedcd5;
  --line2: #eceae4;
  --up: #12a150;
  --down: #e11d48;
  --amber: #c2410c;
  --blue: #2563eb;
  --violet: #7c3aed;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg: #0c0d0b;
  --pane: #141613;
  --ink: #e9e7e0;
  --dim: #8c8a83;
  --faint: #5b5952;
  --line: #262824;
  --line2: #1d1f1c;
  --up: #34d17e;
  --down: #ff5c72;
  --amber: #e0784f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 11px/1.35 var(--mono);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 26px;
}

b { font-weight: 600; }
canvas { display: block; width: 100%; }

/* ── thanh trên ─────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: 22px;
  padding: 8px 14px; background: var(--pane);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; gap: 9px; align-items: center; }
.logo {
  width: 26px; height: 26px; border-radius: 6px; background: var(--blue);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.wordmark { font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.wordmark .x { color: var(--amber); }
.tagline { font-size: 8.5px; color: var(--dim); letter-spacing: .1em; margin-top: 1px; }

.nav { display: flex; align-items: center; gap: 7px; }
.nav i { color: var(--faint); }
.tab {
  background: none; border: 0; font: inherit; color: var(--dim);
  letter-spacing: .16em; cursor: pointer; padding: 2px 1px;
}
.tab.on { color: var(--ink); border-bottom: 1.5px solid var(--amber); }

.chips { display: flex; gap: 6px; align-items: center; }
.chip {
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px;
  font-size: 9px; letter-spacing: .08em; color: var(--dim); white-space: nowrap;
}
.chip.mini { font-size: 8px; padding: 1px 4px; }
.chip.red { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.chip.green { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.chip.amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
#themeChip, #fitChip { cursor: pointer; user-select: none; }

.clockbox { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.lat { text-align: right; font-size: 8px; color: var(--dim); }
.lat b { display: block; font-size: 11px; color: var(--up); }
.clock { font-size: 20px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.utc { font-size: 8px; color: var(--faint); text-align: right; line-height: 1.5; }

/* ── dải xếp hạng + băng chạy ──────────────────────────────────────── */
.rank {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 14px; background: var(--pane);
  border-bottom: 1px solid var(--line); font-size: 9.5px; letter-spacing: .06em;
}
.rank .trophy { filter: saturate(.7); }
.rank .spacer { flex: 1; }

.tickerwrap {
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 1px solid var(--line); background: var(--pane); overflow: hidden;
}
.livetag {
  background: var(--down); color: #fff; font-size: 8.5px; letter-spacing: .14em;
  padding: 3px 7px; display: grid; place-items: center;
}
.ticker { flex: 1; overflow: hidden; }
.track {
  display: flex; gap: 26px; white-space: nowrap; padding: 3px 14px;
  font-size: 9.5px; animation: slide 48s linear infinite;
}
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ── lưới panel ─────────────────────────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 7px; padding: 7px;
}
.pane {
  background: var(--pane); border: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.ph {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; border-bottom: 1px solid var(--line2);
  font-size: 10px; letter-spacing: .1em;
}
.ph .sub { color: var(--dim); font-size: 8.5px; letter-spacing: .1em; }
.ph .right { margin-left: auto; display: flex; gap: 5px; }
.ph .right i { font-style: normal; }
.body { padding: 7px 9px 9px; flex: 1; min-width: 0; }

/* ── sổ agent ──────────────────────────────────────────────────────── */
.pnlwrap { display: flex; gap: 14px; }
.pnlleft { flex: 1; min-width: 0; }
.who { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot.green { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 18%, transparent); }
.addr { font-size: 8.5px; color: var(--dim); letter-spacing: .06em; margin: 3px 0 4px; }
.pnl {
  font-size: 46px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
  color: var(--amber); font-variant-numeric: tabular-nums;
}
.pnlrow { display: flex; align-items: center; gap: 9px; margin: 3px 0 9px; }
.pill {
  border: 1px solid color-mix(in srgb, var(--down) 35%, transparent);
  color: var(--down); padding: 2px 7px; border-radius: 3px; font-size: 10px;
}
.pill.up { border-color: color-mix(in srgb, var(--up) 35%, transparent); color: var(--up); }
.muted { color: var(--dim); font-size: 9px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.stats span { display: block; font-size: 8px; color: var(--dim); letter-spacing: .12em; }
.stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.green { color: var(--up); } .amber { color: var(--amber); } .red { color: var(--down); }

.eqhead { font-size: 8px; color: var(--dim); letter-spacing: .12em; margin-bottom: 2px; }
.riskrow {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9.5px; margin-top: 7px;
}
.riskrow b { font-size: 13px; }
.riskbar { height: 4px; background: var(--line2); margin-top: 4px; }
.riskbar i { display: block; height: 100%; width: 0; background: var(--up); transition: width .4s ease-out; }

/* ── biểu đồ nến + sổ L2 ───────────────────────────────────────────── */
.chartwrap { display: flex; gap: 8px; }
.chartwrap canvas { flex: 1; min-width: 0; }
.l2 { width: 118px; font-size: 9px; }
.l2 .l2h { color: var(--faint); font-size: 8px; letter-spacing: .1em; display: flex; justify-content: space-between; }
.l2 .row { display: flex; justify-content: space-between; padding: 1px 0; font-variant-numeric: tabular-nums; }
.l2 .row.ask { color: var(--down); }
.l2 .row.bid { color: var(--up); }
.l2 .spread {
  display: flex; justify-content: space-between; color: var(--dim);
  border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
  margin: 2px 0; padding: 2px 0; font-size: 8.5px;
}

/* ── lưới kèo ──────────────────────────────────────────────────────── */
.rgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.cell {
  border: 1px solid var(--line); padding: 3px 5px; min-height: 42px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.cell .lab { font-size: 7.5px; color: var(--dim); letter-spacing: .06em; }
.cell .val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cell .tl { font-size: 7.5px; color: var(--faint); }
.cell.up { background: color-mix(in srgb, var(--up) 9%, transparent); border-color: color-mix(in srgb, var(--up) 32%, transparent); }
.cell.up .val { color: var(--up); }
.cell.down { background: color-mix(in srgb, var(--down) 9%, transparent); border-color: color-mix(in srgb, var(--down) 32%, transparent); }
.cell.down .val { color: var(--down); }
.cell.unknown .val { color: var(--faint); }
.cell.unknown { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--line2) 6px 7px); }

/* ── order book city ───────────────────────────────────────────────── */
.citywrap { display: flex; gap: 8px; }
.citywrap canvas { flex: 1; min-width: 0; }
.cityside { width: 132px; font-size: 9px; }
.cityside .r { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.cityside .r span { width: 26px; color: var(--dim); }
.cityside .bar { flex: 1; height: 6px; background: var(--line2); }
.cityside .bar i { display: block; height: 100%; }
.cityside .amt { width: 42px; text-align: right; font-size: 8px; color: var(--dim); }

/* ── analog ────────────────────────────────────────────────────────── */
.analogwrap { display: flex; gap: 8px; }
.analogwrap canvas { flex: 1; min-width: 0; }
.analogside { width: 118px; }
.mrow {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--line); padding: 3px 6px; margin-bottom: 3px;
}
.mrow span { font-size: 8px; color: var(--dim); letter-spacing: .1em; }
.mrow b { font-size: 14px; }
.mrow.up { border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.mrow.up b { color: var(--up); }
.mrow.down { border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.mrow.down b { color: var(--down); }
.mnote { font-size: 8.5px; color: var(--dim); margin-top: 5px; }

/* ── dải agent + thanh trạng thái ──────────────────────────────────── */
.agentline {
  background: var(--pane); border: 1px solid var(--line);
  padding: 4px 10px; font-size: 10px; display: flex; gap: 7px; align-items: center;
}
.agentline .caret { color: var(--amber); }

.statusbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; gap: 16px; align-items: center;
  padding: 4px 14px; background: var(--pane);
  border-top: 1px solid var(--line);
  font-size: 8.5px; letter-spacing: .08em; color: var(--dim);
}
.statusbar .on { color: var(--down); }
.statusbar .grow { flex: 1; }
.statusbar .warn { color: var(--faint); }

@media (max-width: 1200px) {
  .pane { grid-column: span 12 !important; }
  .rgrid { grid-template-columns: repeat(4, 1fr); }
}

/* Ô hiện giá MÔ HÌNH thay vì giá thị trường. Hổ phách là quy ước xuyên suốt
   terminal: con số này do mình tính ra, không phải do ai đó đặt lệnh. */
.cell.model { background: color-mix(in srgb, var(--amber) 8%, transparent);
  border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.cell.model .val { color: var(--amber); }

/* ── PHÁN QUYẾT ───────────────────────────────────────────────────────────
   Panel đầu tiên và duy nhất trả lời "vậy giờ tôi nên làm gì". Mười panel còn
   lại là bằng chứng; panel này là kết luận, nên nó phải to hơn và đứng trước. */
.verdictpane { border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.vwrap { display: flex; gap: 18px; align-items: flex-start; }
.vleft { width: 300px; flex: none; }
.vverdict { font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.vverdict.enter { color: var(--up); }
.vverdict.exit, .vverdict.no { color: var(--down); }
.vverdict.watch { color: var(--amber); }
.vverdict.hold { color: var(--blue); }
.vwhy { font-size: 10px; color: var(--dim); margin-top: 3px; }
.vconf { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 8px; letter-spacing: .12em; color: var(--dim); }
.vconf b { font-size: 12px; color: var(--ink); }
.cbar { flex: 1; height: 4px; background: var(--line2); }
.cbar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .4s ease-out; }
.vgap { font-size: 9.5px; color: var(--dim); margin-top: 6px; }

/* Mỗi tín hiệu: giá trị, nguồn, tuổi số liệu, và tỉ lệ đúng trong phiên. */
.vsignals { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; min-width: 0; }
.sig { border: 1px solid var(--line); padding: 6px 8px; min-width: 0; }
.sig .sh { display: flex; align-items: baseline; gap: 6px; }
.sig .sname { font-size: 9.5px; letter-spacing: .08em; }
.sig .sp { margin-left: auto; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sig .sp.up { color: var(--up); } .sig .sp.down { color: var(--down); }
.sig .sd { font-size: 8.5px; color: var(--dim); margin-top: 3px; line-height: 1.4; }
.sig .meta { display: flex; gap: 8px; font-size: 8px; color: var(--faint); margin-top: 5px; flex-wrap: wrap; }
.sig .meta b { color: var(--dim); font-weight: 400; }
.sig .hit { color: var(--up); } .sig .miss { color: var(--down); }

/* Dấu ? nhỏ ở đầu panel — di chuột vào là hiện chú giải. */
.ph .q {
  display: inline-grid; place-items: center; width: 12px; height: 12px;
  border: 1px solid var(--line); border-radius: 50%;
  font-size: 8px; color: var(--faint); cursor: help; flex: none;
}
.ph[title]:hover .q { color: var(--amber); border-color: var(--amber); }

@media (max-width: 1200px) { .vwrap { flex-direction: column; } .vleft { width: 100% } }
/* Mỗi ô nói rõ số của nó đến từ đâu — thị trường hay mô hình. */
.cell .src { font-size: 7px; color: var(--faint); letter-spacing: .04em; }
.cell.model .src { color: color-mix(in srgb, var(--amber) 70%, var(--faint)); }

/* ── PHIẾU LỆNH ───────────────────────────────────────────────────────────
   Ba khối: con số, luật hành động, rủi ro. Đây là lớp biến một phán quyết
   thành một hành động có thể làm theo — giá nào thì có lời, đặt bao nhiêu,
   và điều kiện nào thì đổi ý. */
.ticketpane { border-color: color-mix(in srgb, var(--blue) 28%, transparent); }
.twrap { display: grid; grid-template-columns: 1.35fr 1fr .8fr; gap: 14px; }

.tnums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; align-content: start; }
.tn { border: 1px solid var(--line); padding: 4px 7px; min-width: 0; }
.tn .tl { display: block; font-size: 7.5px; letter-spacing: .12em; color: var(--dim); }
.tn b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; margin: 1px 0; }
.tn i { font-style: normal; font-size: 7.5px; color: var(--faint); line-height: 1.3; display: block; }
.tn.hi { border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.tn.hi b { color: var(--blue); }
.tn.up b { color: var(--up); }
.tn.down b { color: var(--down); }
.tn.unk b { color: var(--faint); }
.tnote { font-size: 9px; color: var(--faint); }

.trules { display: flex; flex-direction: column; gap: 3px; }
.trule { border-left: 2px solid var(--amber); padding: 2px 8px; }
.trule .rk { font-size: 7.5px; letter-spacing: .14em; color: var(--amber); display: block; }
.trule b { font-size: 10.5px; display: block; }
.trule i { font-style: normal; font-size: 7.5px; color: var(--faint); }

.trisk { border-left: 1px solid var(--line); padding-left: 12px; }
.rhead { font-size: 7.5px; letter-spacing: .14em; color: var(--faint); margin-bottom: 5px; }
.rrow { margin-bottom: 6px; }
.rrow span { font-size: 8px; color: var(--dim); display: block; }
.rrow b { font-size: 14px; font-variant-numeric: tabular-nums; }
.rrow i { font-style: normal; font-size: 7px; color: var(--faint); display: block; }
.rverdict { margin-top: 7px; padding: 3px 7px; font-size: 10px; letter-spacing: .06em; border: 1px solid var(--line); }
.rverdict.bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }

@media (max-width: 1200px) {
  .twrap { grid-template-columns: 1fr; }
  .trisk { border-left: 0; padding-left: 0; }
}

/* ── VỊ THẾ HIỆN TẠI vs ĐỀ XUẤT ───────────────────────────────────────────
   Hai thứ khác nhau và phải nhìn ra ngay là khác nhau. Bản trước để phiếu lệnh
   đề xuất DOWN trong khi sổ agent đang mở UP, không phân biệt — người xem không
   biết đâu là vị thế đang giữ, đâu là lệnh sắp vào. */
.posbar {
  display: flex; gap: 0; border-bottom: 1px solid var(--line2);
  font-size: 9.5px;
}
.posbar > div { padding: 5px 10px; display: flex; align-items: center; gap: 8px; }
.posbar .now { border-right: 1px solid var(--line2); min-width: 300px; }
.posbar .k { font-size: 7.5px; letter-spacing: .14em; color: var(--dim); }
.posbar b { font-variant-numeric: tabular-nums; }
.posbar .up { color: var(--up); } .posbar .down { color: var(--down); }
.posbar .none { color: var(--faint); }
.posbar .waitwhy { color: var(--amber); }
.assump { font-size: 7px; color: var(--faint); margin-top: 6px; line-height: 1.45; }

/* Keo DANG NHAM - cai ma phan quyet o tren dang noi ve. Khong danh dau thi
   luoi 24 o va o phan quyet trong nhu hai thu roi nhau. */
.cell.target { outline: 1.5px solid var(--fg); outline-offset: -1.5px; }
.cell.target .lab { color: var(--fg); font-weight: 700; }

/* ── che do GON ─────────────────────────────────────────────────────────────
   An panel phan tich, giu nguyen chuoi ra quyet dinh. An chu khong xoa: du lieu
   van chay, doi lai la thay ngay, khong phai cho vong quet moi. */
body.gon [data-pro] { display: none; }
body.gon .pane { grid-column: span 12 !important; }
body.gon .pane.verdictpane, body.gon .pane.ticketpane { grid-column: span 12 !important; }
#modeBtn { cursor: pointer; border: 1px solid var(--line); background: transparent;
  color: var(--dim); font: inherit; font-size: 8.5px; letter-spacing: .1em; padding: 2px 7px; }
#modeBtn:hover { color: var(--fg); border-color: var(--fg); }

/* Canh bao panel loi — do, nhung khong nhay nhap. No la thong tin, khong phai bao dong. */
.panelerr:not(:empty) { color: var(--down); font-weight: 700; }