/* ═══════════════════════════════════════════════════════════════════════════
   TERMINAL — hệ giao diện của trang chủ (dashboard-new.html)
   ═══════════════════════════════════════════════════════════════════════════

   Ba khối phẳng ngăn nhau bằng kẻ 1px, thanh đầu khối cùng cao 38px. Thay cho
   bố cục cũ: khung có đệm bọc một thẻ bo góc bọc một khối chia dọc, cộng một
   khối "Tín hiệu & Kế hoạch" chiếm 35% chiều cao ở đáy.

   Quy ước đặt tên: mọi lớp bắt đầu bằng `t-`, biến bắt đầu bằng `--t-`. Nhờ vậy
   tệp này KHÔNG giẫm lên các lớp tiện ích của Tailwind hay các tệp style khác
   của trang, và grep `t-` ra đúng thứ thuộc về bố cục terminal.

   Màu khai một lần dưới dạng biến, nhánh tối chỉ gán lại giá trị — không nhân
   đôi luật. Bản cũ viết cặp `class="text-slate-900 dark:text-white"` ở từng thẻ,
   nên đổi một sắc độ là phải sửa hàng chục chỗ.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bảng màu: một bộ biến cho cả sáng lẫn tối ───────────────────────── */
:root {
  --t-panel:   var(--ui-surface);
  --t-head:    var(--ui-canvas);
  --t-line:    var(--ui-border);
  --t-line-2:  var(--ui-divider);
  --t-text:    var(--ui-text);
  --t-dim:     var(--ui-secondary);
  --t-mute:    var(--ui-muted);
  --t-accent:  var(--ui-accent);
  --t-up:      var(--ui-up);
  --t-down:    var(--ui-down);
  /* Hổ phách: dùng cho thứ KHÔNG phải lãi/lỗ đã thành hình, mà là phần đang treo —
     hiện chỉ có quãng từ ngưỡng thoát lên giá hiện tại. Tô nó xanh như lãi là nói
     rằng phần ấy đã nắm chắc, trong khi nó đúng là phần sẽ trả lại nếu ngưỡng chạm. */
  --t-warn:    var(--ui-warning);
  --t-hover:   var(--ui-hover);
  /* Dải nền sổ lệnh. Tách khỏi --t-up/--t-down vì đây là NỀN, phải nhạt tới mức
     con số nằm trên vẫn đọc được — pha thẳng từ màu chữ sẽ ra dải chói. */
  --t-depth-bid: rgba(22, 163, 74, .13);
  --t-depth-ask: rgba(220, 38, 38, .11);
  /* Dải của sổ lệnh ĐÃ ĐÔNG CỨNG: vẫn còn để đọc được bậc nào dày, nhưng rút
     hết xanh/đỏ — màu là thứ mắt đọc trước cả chữ, nên để nguyên màu sống mà
     dán chữ "cuối phiên" bên trên là hai tín hiệu đánh nhau. */
  --t-depth-idle: rgba(100, 116, 139, .15);
  --t-head-h:  38px;      /* chiều cao CHUẨN của mọi thanh đầu khối */
}
.dark {
  --t-depth-bid: rgba(34, 197, 94, .20);
  --t-depth-ask: rgba(239, 68, 68, .18);
  --t-depth-idle: rgba(146, 160, 201, .20);
}

/* ── Thanh cuộn ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--t-line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--t-mute); }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.chart-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block;
}

/* ── Lưới nhiều biểu đồ (home/chart-grid.js) ─────────────────────────────
   Ô ngăn nhau bằng khe 1px để lộ nền --t-line: cùng kiểu kẻ 1px như giữa ba cột.
   Khuôn của từng bố cục nằm ở đây (CSS) chứ không ở JS, để script nội tuyến đặt
   được `data-layout` TRƯỚC lần vẽ đầu mà không phải biết hình học. Hình học phải
   khớp `BO_CUC` trong chart-grid.js — ô xếp theo hàng, trái sang phải. Cỡ đã kéo
   thì JS ghi đè bằng style nội tuyến. */
.t-chart-grid {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: grid; gap: 1px; background: var(--t-line);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.t-chart-grid[data-layout="2c"],
.t-chart-grid[data-layout="1-2"],
.t-chart-grid[data-layout="4"]  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-chart-grid[data-layout="3c"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-chart-grid[data-layout="2r"],
.t-chart-grid[data-layout="1-2"],
.t-chart-grid[data-layout="4"]  { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.t-chart-grid[data-layout="1-2"] > [data-pane="0"] { grid-row: span 2; }

.t-chart-cell { position: relative; min-width: 0; min-height: 0; background: var(--t-panel); }

/* Ô đang chọn: viền màu nhấn VẼ ĐÈ lên iframe (không chiếm chỗ, không đẩy biểu đồ).
   2px chứ không 1px: ở lưới 2×2, viền 1px lẫn vào khe kẻ và mắt không tìm ra ô nào
   đang nối với cột phải. Chỉ có khi lưới có từ hai ô. */
.t-chart-grid.is-multi > .t-chart-cell.is-active::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--t-accent);
}

/* Thanh kéo: vùng bắt chuột 7px phủ lên khe 1px; chỉ hiện vạch khi rê/kéo/focus. */
.t-grid-handle { position: absolute; z-index: 3; touch-action: none; outline: none; }
.t-grid-handle[data-truc="cot"]  { width: 7px;  margin-left: -3.5px; cursor: col-resize; }
.t-grid-handle[data-truc="hang"] { height: 7px; margin-top: -3.5px;  cursor: row-resize; }
.t-grid-handle::after {
  content: ''; position: absolute; background: var(--t-accent);
  opacity: 0; transition: opacity .15s;
}
.t-grid-handle[data-truc="cot"]::after  { top: 0; bottom: 0; left: 3px; width: 1px; }
.t-grid-handle[data-truc="hang"]::after { left: 0; right: 0; top: 3px; height: 1px; }
.t-grid-handle:hover::after,
.t-grid-handle:focus-visible::after,
.t-grid-handle.is-dragging::after { opacity: 1; }
/* Iframe nuốt sự kiện chuột khi con trỏ lướt qua — tắt tạm trong lúc kéo. */
.t-chart-grid.is-resizing iframe { pointer-events: none; }
.t-chart-grid[data-resizing="cot"]  { cursor: col-resize; user-select: none; }
.t-chart-grid[data-resizing="hang"] { cursor: row-resize; user-select: none; }

/* Menu bố cục — mở từ nút trên thanh công cụ TradingView của ô góc trên-phải. */
.t-lm {
  position: fixed; z-index: 60; width: 248px; padding: 10px 12px 12px;
  background: var(--t-panel); color: var(--t-text);
  border: 1px solid var(--t-line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
}
.dark .t-lm { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.t-lm[hidden] { display: none; }
.t-lm__label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-mute); margin: 2px 0 8px;
}
.t-lm__label + .t-lm__sw, .t-lm__name + .t-lm__label { margin-top: 12px; }
.t-lm__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.t-lm__opt {
  height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: var(--t-dim); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.t-lm__opt svg rect { fill: none; stroke: currentColor; stroke-width: 1.2; }
.t-lm__opt:hover { background: var(--t-hover); color: var(--t-text); }
.t-lm__opt.is-disabled { opacity: .35; cursor: not-allowed; }
.t-lm__opt.is-disabled:hover { background: transparent; color: var(--t-dim); }
.t-lm__opt:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 1px; }
.t-lm__opt.is-active {
  color: var(--t-accent); border-color: var(--t-accent);
  background: color-mix(in srgb, var(--t-accent) 10%, transparent);
}
.t-lm__opt.is-active svg rect { fill: color-mix(in srgb, var(--t-accent) 18%, transparent); }
.t-lm__name { font-size: 12px; color: var(--t-dim); margin-top: 8px; min-height: 16px; }
.t-lm__sw {
  display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; cursor: pointer;
}
.t-lm__sw input { margin: 2px 0 0; accent-color: var(--t-accent); cursor: inherit; }
.t-lm__sw b { display: block; font-size: 12px; font-weight: 600; }
.t-lm__sw small { display: block; font-size: 11px; color: var(--t-mute); line-height: 1.35; }
.t-lm__sw.is-disabled { opacity: .45; cursor: default; }
/* Tuỳ chọn CON của một công tắc (vd. "Vạch ngang" thuộc "Thanh dọc con trỏ"): thụt
   thẳng hàng chữ của công tắc cha, để thứ bậc đọc được bằng mắt. */
.t-lm__sub { padding: 0 0 6px 21px; }
.t-lm__sub > b { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.t-lm__sub > small { display: block; font-size: 11px; color: var(--t-mute); line-height: 1.35; margin-top: 5px; }
.t-lm__sub.is-disabled { opacity: .45; }
.t-lm__seg {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--t-line); border-radius: 5px; overflow: hidden;
}
.t-lm__seg button {
  height: 26px; border: 0; background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--t-dim);
  transition: background-color .15s, color .15s;
}
.t-lm__seg button + button { border-left: 1px solid var(--t-line); }
.t-lm__seg button:hover:not(:disabled) { background: var(--t-hover); color: var(--t-text); }
.t-lm__seg button:focus-visible { outline: 2px solid var(--t-accent); outline-offset: -2px; }
.t-lm__seg button.is-active {
  color: var(--t-accent);
  background: color-mix(in srgb, var(--t-accent) 12%, transparent);
}
.t-lm__seg button:disabled { cursor: default; }
.t-lm__hint {
  margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--t-line-2);
  font-size: 11px; line-height: 1.45; color: var(--t-mute);
}
@media (prefers-reduced-motion: reduce) {
  .t-grid-handle::after, .t-lm__opt { transition: none; }
}

/* ── Khối (pane) ─────────────────────────────────────────────────────── */
.t-pane {
  background: var(--t-panel);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
}
.t-pane + .t-pane { border-left: 1px solid var(--t-line); }
#stockInfoPanel { border-left: 1px solid var(--t-line); }
#rp-collapsed-strip { display: none; }
html[data-home-trades-collapsed="true"] #tradesTableWrapper { display: none; }
html[data-home-trades-collapsed="true"] #tradesToggleIcon { transform: rotate(180deg); }

/* Tỷ lệ và thu gọn dùng cùng CSS từ lần vẽ đầu tới khi kéo thanh chia. */
@media (min-width: 1280px) {
  #chartPane { flex: var(--chart-ratio, .74) 1 0%; }
  #stockInfoPanel { flex: calc(1 - var(--chart-ratio, .74)) 1 0%; }
  html[data-home-rail-collapsed="true"] #stockInfoPanel { flex: 0 0 32px; }
  html[data-home-rail-collapsed="true"] #chartPane { flex: 1 1 0%; }
  html[data-home-rail-collapsed="true"] #rp-panel-content,
  html[data-home-rail-collapsed="true"] #chartHorizontalSplit > .split-divider { display: none; }
  html[data-home-rail-collapsed="true"] #rp-collapsed-strip { display: flex; }
}

/* Thanh đầu khối — MỘT chiều cao duy nhất cho cả ba cột, nhờ vậy ba khối
   thẳng hàng ngang thay vì so le như bản đang chạy. */
.t-head {
  height: var(--t-head-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: linear-gradient(110deg, var(--ui-glow), transparent 75%), var(--t-head);
  border-bottom: 1px solid var(--t-line);
}
.t-head__title {
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--t-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-spacer { flex: 1 1 auto; }

/* Nút biểu tượng nhỏ — vùng bấm ≥32px trên desktop, ≥44px trên cảm ứng */
.t-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border: 0; background: transparent; border-radius: 5px;
  color: var(--t-mute); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.t-icon-btn:hover { background: var(--t-hover); color: var(--t-text); }
.t-icon-btn .material-symbols-outlined { font-size: 20px; }

/* ── Dải tab (dùng CHUNG cho tab biểu đồ và tab cột phải) ────────────── */
.t-tabs {
  display: flex; flex-shrink: 0;
  background: var(--t-head);
  border-bottom: 1px solid var(--t-line);
  overflow-x: auto; scrollbar-width: none;
}
.t-tabs::-webkit-scrollbar { display: none; }
.t-tab {
  flex: 1 1 0; min-width: max-content;
  height: var(--t-head-h); padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--t-dim); font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.t-tab:hover { color: var(--t-text); background: var(--t-hover); }
/* Màu tab đang chọn do CSS quyết định, KHÔNG do style nội tuyến trong JS —
   bản đang chạy ghi cứng rgb(15,59,189) vào style nên nhánh .dark không bao
   giờ thắng và gạch chân ở chế độ tối vẫn là xanh của chế độ sáng. */
html[data-home-rail-tab="signal"] .t-tab[data-rptab="signal"],
html[data-home-rail-tab="info"] .t-tab[data-rptab="info"] {
  color: var(--t-accent);
  border-bottom-color: var(--t-accent);
  background: var(--t-panel);
}
.t-tab__badge {
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--t-accent) 16%, transparent);
  color: var(--t-accent);
}

/* ── Thân tab ────────────────────────────────────────────────────────── */
.t-tabpanel { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html[data-home-rail-tab="signal"] #rp-panel-signal,
html[data-home-rail-tab="info"] #rp-panel-info { display: block; }

/* ── Khối con trong cột phải ─────────────────────────────────────────── */
.t-section { border-bottom: 1px solid var(--t-line); padding: 12px 12px 14px; }
.t-section:last-child { border-bottom: 0; }
.t-section__label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--t-mute); margin-bottom: 8px;
}
.t-tick-heading {
  position: sticky; top: 0; z-index: 1; background: var(--t-panel);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px;
}
.t-tick-latest {
  color: var(--t-accent); background: var(--t-panel); border: 1px solid var(--t-line);
  border-radius: 5px; padding: 4px 8px; margin-bottom: 8px; font-size: 11px; min-height: 32px;
  cursor: pointer;
}
#tick-rows { overflow-anchor: none; }

/* Bảng giá đầu cột phải */
.t-quote { padding: 10px 12px 12px; border-bottom: 1px solid var(--t-line); }
.t-quote__name {
  font-size: 13px; font-weight: 700; color: var(--t-text); line-height: 1.25;
  height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.t-quote__ticker { font-size: 11px; color: var(--t-mute); margin-top: 2px; }
.t-quote__row { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.t-quote__price { font-size: 24px; font-weight: 800; color: var(--t-text); font-variant-numeric: tabular-nums; min-width: 7ch; }
.t-quote__chg { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 5ch; }

/* Chi tiết phía sau lớp che không được đổi chiều cao/vị trí lời mời đăng nhập. */
#rp-panel-signal.has-signal-gate { position: relative; contain: size; overflow: hidden !important; }

/* Thẻ tín hiệu hiện tại */
.t-verdict { display: flex; align-items: center; gap: 12px; }
.t-verdict__icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--t-dim) 14%, transparent);
  color: var(--t-dim);
  border: 1px solid color-mix(in srgb, var(--t-dim) 28%, transparent);
}
.t-verdict__icon .material-symbols-outlined { font-size: 26px; }
.t-verdict__icon.is-buy {
  background: color-mix(in srgb, var(--t-up) 14%, transparent);
  color: var(--t-up); border-color: color-mix(in srgb, var(--t-up) 32%, transparent);
}
.t-verdict__icon.is-sell {
  background: color-mix(in srgb, var(--t-down) 14%, transparent);
  color: var(--t-down); border-color: color-mix(in srgb, var(--t-down) 32%, transparent);
}
.t-verdict__word { font-size: 22px; font-weight: 900; line-height: 1.05; color: var(--t-dim); }
.t-verdict__word.is-buy  { color: var(--t-up); }
.t-verdict__word.is-sell { color: var(--t-down); }
.t-verdict__sub { font-size: 12px; color: var(--t-dim); margin-top: 3px; }

/* Ba ô kế hoạch */
.t-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.t-plan__box {
  background: var(--t-head); border: 1px solid var(--t-line-2);
  border-radius: 6px; padding: 7px 8px; min-width: 0;
}
.t-plan__lbl { font-size: 10px; color: var(--t-mute); white-space: nowrap; }
.t-plan__val {
  font-size: 15px; font-weight: 700; margin-top: 2px; color: var(--t-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.t-plan__box.is-tp .t-plan__val { color: var(--t-up); }
.t-plan__box.is-exit .t-plan__val { color: var(--t-down); }
/* Biến thể chữ nhỏ: ô "Về tài khoản" mang một TRẠNG THÁI chứ không mang giá. Cho
   XUỐNG DÒNG thay vì cắt bằng ellipsis — "Còn 2 phiên" không lọt một dòng trong ô
   rộng ~77px, mà cắt thành "Còn 2 phi…" thì mất đúng đơn vị đếm: còn 2 phiên hay
   còn 2 phút? Ô cao thêm một dòng, cả hàng vẫn thẳng vì grid kéo bằng nhau. */
.t-plan__val.is-sm {
  font-size: 12px; font-weight: 600;
  white-space: normal; overflow: visible; line-height: 1.25;
}
/* Ô "Vùng vào" mang HAI số và một gạch nối. Ô rộng ~77px sau khi trừ đệm, mà
   "13,3-13,5" ở cỡ 15px cần ~81px — nó bị `text-overflow: ellipsis` cắt thành
   "13,3-1…", tức là vùng vào hiện ra mà đọc không nổi cận trên. */
.t-plan__val.is-range { font-size: 13px; }
/* Mốc "đã đạt" cạnh nhãn Mục tiêu. Kế hoạch neo cứng vào giá vào và không bao giờ
   đổi, nên với một vị thế đã chạy xa, "Mục tiêu 14,6" mà không có mốc này đọc ra
   thành một mục tiêu còn ở phía trước — trong khi giá đã 18,6 từ lâu. */
.t-plan__flag { font-size: 10px; font-weight: 700; color: var(--t-up); margin-left: 4px; }
/* Ghi chú nhỏ đứng cạnh nhãn khối, chữ thường để không chen với nhãn in hoa */
.t-label__note { float: right; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* Chú thích "cần nến xanh/đỏ" — điều kiện thứ ba của luật, thứ mà một con số ngưỡng
   không gói được. Hổ phách chứ không xám: nó là điều kiện, không phải siêu dữ liệu. */
.t-warn-note { color: var(--t-warn); }

/* Ngưỡng thoát động.

   Hai vạt có lớp RIÊNG, không dùng lại lớp của thanh rủi ro/lợi nhuận cũ (thanh ấy đã
   gỡ 25/09/2026 — xem markup),
   dù hình dạng y hệt: ở đây nghĩa của màu ngược lại. Quãng từ giá vào lên tới ngưỡng
   là phần lãi ĐÃ được ngưỡng chốt (xanh), còn quãng từ ngưỡng lên giá hiện tại là
   phần sẽ TRẢ LẠI nếu ngưỡng chạm (hổ phách). Mượn hai lớp kia thì vạt "sẽ trả lại"
   mang màu lãi — một cái sai chỉ lộ ra khi có người mất tiền vì nó. */
.t-gap__kept { background: color-mix(in srgb, var(--t-up) 55%, transparent); }
.t-gap__risk { background: color-mix(in srgb, var(--t-warn) 50%, transparent); }
.t-exit { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.t-exit__val { font-size: 19px; font-weight: 800; color: var(--t-text); font-variant-numeric: tabular-nums; }
.t-exit__gap { font-size: 12px; font-weight: 600; color: var(--t-dim); font-variant-numeric: tabular-nums; }
.t-exit__stale { color: var(--t-mute); }
.t-rr { height: 6px; border-radius: 999px; background: var(--t-line); margin-top: 10px; overflow: hidden; display: flex; }
.t-rr-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--t-dim); margin-top: 5px; }

/* Ba số hiệu suất */
.t-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.t-stats__val { font-size: 19px; font-weight: 800; color: var(--t-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.t-stats__lbl { font-size: 10px; color: var(--t-dim); margin-top: 3px; }

/* Lịch sử lệnh — danh sách gọn, KHÔNG phải bảng 7 cột: cột phải rộng
   ~340px, bảng 7 cột ở đó chỉ còn cách cuộn ngang. */
.t-trade {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--t-line-2);
}
.t-trade:hover { background: var(--t-hover); }
.t-trade__when { font-size: 11px; color: var(--t-dim); font-variant-numeric: tabular-nums; }
.t-trade__px   { font-size: 12px; color: var(--t-text); font-variant-numeric: tabular-nums; }
.t-trade__pnl  { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.t-trade__cum  { font-size: 10px; color: var(--t-mute); text-align: right; font-variant-numeric: tabular-nums; }
.t-trade.is-win  .t-trade__pnl { color: var(--t-up); }
.t-trade.is-loss .t-trade__pnl { color: var(--t-down); }

.t-empty { padding: 28px 16px; text-align: center; font-size: 12px; color: var(--t-mute); }

/* Sổ lệnh / khớp lệnh — giữ nguyên lưới 4 cột, chỉ đổi màu kẻ sang biến */
.t-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); font-variant-numeric: tabular-nums; }
.t-grid4.is-head {
  font-size: 10px; font-weight: 600; color: var(--t-mute);
  padding: 5px 4px; border-bottom: 1px solid var(--t-line);
}
.t-grid4.is-row {
  font-size: 12px; padding: 4px; border-bottom: 1px solid var(--t-line-2);
}
.t-grid4.is-row:hover { background: var(--t-hover); }

/* Dải nền tỉ lệ khối lượng của sổ lệnh.
   Bảng bốn cột là KL | Giá | Giá | KL, nên đường giữa hàng cũng là ranh giới
   mua/bán: dải mọc từ đó ra ngoài, bên nào dày thì lấn ra xa hơn bên ấy. Thấy
   được tương quan mua–bán bằng một cái liếc thay vì đọc so từng con số.

   Dải là con TUYỆT ĐỐI nên rơi khỏi luồng lưới — không chiếm ô nào của bốn cột;
   đổi lại các ô chữ phải được nâng z-index, nếu không dải vẽ đè lên số. */
.t-grid4.is-row { position: relative; }
.t-grid4.is-row > span { position: relative; z-index: 1; }
.t-depth {
  position: absolute; top: 1px; bottom: 1px; z-index: 0; width: 0;
  border-radius: 2px; transition: width .18s ease-out;
}
.t-depth.is-bid { right: 50%; background: var(--t-depth-bid); }
.t-depth.is-ask { left: 50%;  background: var(--t-depth-ask); }
/* Sổ lệnh cuối phiên: giữ NGUYÊN bố cục, chỉ rút màu khỏi dải. Không đổi sang
   một khối khác hẳn, để lúc phiên đóng cột phải không bị nhảy hình. */
.t-book-rows.is-idle .t-depth { background: var(--t-depth-idle); }

/* Dải nhãn trên đầu sổ lệnh. Chỉ hiện khi CÓ điều để nói — sổ lệnh đang chạy
   thì chấm xanh là đủ, còn đông cứng thì phải nói rõ nó cuối từ lúc nào. */
.t-book-state {
  display: flex; align-items: center; gap: 6px; padding-bottom: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--t-mute);
  font-variant-numeric: tabular-nums;
}
.t-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--t-mute); }
.t-dot.is-live { background: var(--t-up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-up) 22%, transparent); }

/* Sổ lệnh rỗng: nói rõ là CHƯA CÓ DỮ LIỆU. Trước đây phần này biến mất hẳn
   ngoài phiên, chỉ còn mỗi hàng tiêu đề trơ ra — trông như hỏng. */
.t-book-empty {
  padding: 18px 8px; text-align: center; font-size: 11px; color: var(--t-mute);
}

/* Tương quan mua/bán chủ động. Cùng hình dạng với .t-rr (thanh 6px hai đoạn +
   chú giải hai đầu) — cố ý, để hai thanh trong một cột đọc theo cùng một luật.
   Không dùng chung lớp vì .t-rr nói về rủi ro/lợi nhuận của MỘT kế hoạch. */
.t-flow { height: 6px; border-radius: 999px; background: var(--t-line); overflow: hidden; display: flex; }
.t-flow__buy  { background: color-mix(in srgb, var(--t-up) 55%, transparent); transition: flex-basis .25s ease-out; }
.t-flow__sell { background: color-mix(in srgb, var(--t-down) 55%, transparent); }
.t-flow-legend {
  display: flex; justify-content: space-between; font-size: 11px;
  color: var(--t-dim); margin-top: 6px; font-variant-numeric: tabular-nums;
}
.t-flow-legend b { font-weight: 700; }
/* Không có số thì thanh về xám ĐẶC — không chia hai màu. Một thanh xanh/đỏ là
   một khẳng định bên nào áp đảo; lúc không biết thì không được khẳng định. */
.t-flow.is-unknown .t-flow__buy,
.t-flow.is-unknown .t-flow__sell { background: var(--t-line); }
.t-book-head {
  display: grid; grid-template-columns: 1fr 1fr; text-align: center;
  font-size: 11px; font-weight: 700; padding-bottom: 5px;
  border-bottom: 1px solid var(--t-line);
}
.t-up { color: var(--t-up); } .t-down { color: var(--t-down); } .t-neutral { color: var(--t-dim); }

/* ══ Mobile: xếp chồng hai khối, không chạy SplitView ══════════════════ */

@media (max-width: 1279.98px) {
  /* Chồng dọc: biểu đồ trên, cột phải rơi xuống dưới thành khối full-width.
     Cột trái (Live Signals) ẩn — trên mobile nó mở bằng ngăn kéo ở navbar. */
  #horizontalSplit {
    display: flex !important; flex-direction: column !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  }
  #horizontalSplit > .signal-panel,
  #horizontalSplit > #signalPanelMount,
  #horizontalSplit > .split-divider { display: none !important; }
  #workArea { flex: 0 0 auto !important; display: block !important; overflow: visible !important; }
  #chartHorizontalSplit {
    display: flex !important; flex-direction: column !important;
    overflow: visible !important;
  }
  #chartHorizontalSplit > .split-divider { display: none !important; }
  #chartPane { flex: 0 0 auto !important; height: 60vh !important; min-height: 0 !important; }
  #stockInfoPanel {
    width: auto; min-width: 0;
    flex: 0 0 auto !important; min-height: 320px !important;
    overflow: visible;
    border-left: 0 !important; border-top: 1px solid var(--t-line) !important;
    padding-bottom: 96px; /* chừa chỗ cho dock liên hệ nổi */
  }
  /* Khối con tự giãn theo nội dung thay vì cuộn trong ô nhỏ */
  #stockInfoPanel .t-tabpanel { overflow-y: visible !important; }
  #rp-panel-content { overflow: visible; }
  #rp-toggle-btn { display: none; }
  #rp-panel-signal.has-signal-gate { flex: 0 0 400px; min-height: 400px; }
  #siGateOverlay { justify-content: flex-start; }
  #siGateOverlay > .signal-gate-card { margin: 0; }
  .btn-zalo { display: none !important; }
  /* Vùng bấm ≥44px cho nút chỉ-biểu-tượng trên cảm ứng */
  .t-icon-btn { width: 44px !important; height: 44px !important; }
  .t-tab { padding: 0 18px; }
  .t-tick-latest { min-height: 44px; }
  .t-tick-heading { min-height: 52px; }
}
@media (max-width: 640px) {
  #chartPane { height: 44vh !important; min-height: 260px !important; }
}

/* Điện thoại nằm ngang (khung nhìn thấp): ưu tiên biểu đồ toàn màn.
   Chặn trên bằng max-width:1279.98 để KHÔNG bắn nhầm vào cửa sổ desktop
   thấp (1440×450 vừa ngang vừa thấp nhưng phải giữ bố cục terminal). */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1279.98px) {
  header.sticky { padding-top: .3rem !important; padding-bottom: .3rem !important; }
  .btn-zalo, .mobile-contact-dock { display: none !important; }
  #chartPane { height: calc(100dvh - 40px) !important; min-height: 0 !important; }
}

/* Use dynamic viewport height on mobile so the browser URL bar doesn't clip
   the bottom of the app (100vh includes the URL bar; 100dvh excludes it). */
@supports (height: 100dvh) {
  body.h-screen, body { height: 100dvh; }
}

/* Replay chỉ hiện chart và tài khoản mô phỏng; không lộ panel realtime. */
:is(body.native-replay, body.native-strategy) #signalPanelMount,
:is(body.native-replay, body.native-strategy) .signal-panel,
:is(body.native-replay, body.native-strategy) #stockInfoPanel,
:is(body.native-replay, body.native-strategy) .split-divider { display: none !important; }
:is(body.native-replay, body.native-strategy) #workArea,
:is(body.native-replay, body.native-strategy) #chartHorizontalSplit { display:flex !important;flex:1 !important;min-height:0 !important;overflow:hidden !important; }
:is(body.native-replay, body.native-strategy) #chartPane { flex:1 !important;width:100% !important;height:auto !important;min-height:0 !important; }
:is(body.native-replay, body.native-strategy) #horizontalSplit { overflow:hidden !important; }

/* ── Khung chờ biểu đồ ───────────────────────────────────────────────────
   Vỏ trang nay nhẹ (7,5 KB nén) nên nó hiện gần như tức thì, trong khi
   TradingView cần ~1,5 s mới vẽ xong. Không có khung chờ thì suốt quãng đó cột
   giữa là một ô trống giữa hai cột đã đầy đủ — trông như trang phải nạp thêm
   một bước trung gian. Khung chờ nằm DƯỚI iframe và nhìn xuyên qua được, vì
   chart.html ở chế độ nhúng đặt nền body trong suốt. */
.t-chart-skeleton {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--t-panel);
  pointer-events: none;
}
.t-chart-skeleton__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  overflow: hidden; background: var(--t-line);
}
.t-chart-skeleton__bar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--t-accent);
  transform: translateX(-100%);
  animation: t-chart-skeleton-run 1.1s ease-in-out infinite;
}
@keyframes t-chart-skeleton-run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.t-chart-skeleton__text { font-size: 12px; color: var(--t-mute); letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) {
  .t-chart-skeleton__bar::after { animation: none; transform: none; opacity: .35; }
}


/* ---------- Sức mạnh ----------
   HAI ĐIỂM TRÊN HAI RAY GRADIENT. Trước đó chỗ này bày một NHÃN về hướng giá (hai bản:
   "hạ nhiệt/đang nóng", rồi "tăng/giảm") và cả hai đều bị bác đúng một lý do: nhìn cây
   nến đã biết giá đang lên hay xuống, nên nhãn hướng không thêm gì.

   Điểm thì thêm. Nó chuẩn hoá theo độ dao động của CHÍNH mã đó, nên +4 của một mã trầm
   và +4 của một mã sôi là hai chuyện khác nhau — thứ không đọc được từ nến. Hai kỳ cho
   hai số thật (r 0,644, cùng dấu 70,3%), nên KHOẢNG CÁCH giữa hai mốc trên hai ray là
   một đại lượng riêng, và xếp hai ray chồng nhau làm khoảng cách ấy đọc được bằng mắt.

   LƯU Ý VỀ DẢI MÀU. Đỏ → vàng → xanh là thang ĐƠN ĐIỆU, trong khi quan hệ đo được với
   lãi lại hình chữ U (hai đuôi đều khá hơn phần giữa: thắng 59,9% ở trung hạn ≤ −6 và
   42,0% ở vùng −2…−1). Dải màu ở đây vì thế mã hoá VỊ TRÍ TRÊN THANG, không mã hoá
   tốt/xấu — tooltip nói thẳng "điểm cao KHÔNG có nghĩa là tốt hơn điểm thấp". Đừng
   thêm bất kỳ nhãn nào như "vùng mua tốt" lên dải này. Bằng chứng ở `HE_SO_DIEM`
   trong apps/common/signal_strength.py.

   Hai đầu dải dùng lại --sp-lo/--sp-lai của bảng tín hiệu để cả trang nói một thứ
   tiếng; điểm giữa là vàng, mốc 0 của thang. */
.t-strength { margin-top: 2px; }

.t-diem { display: flex; flex-direction: column; gap: 7px; }
.t-diem__hang { display: flex; align-items: center; gap: 8px; }
.t-diem__ten {
  flex: 0 0 56px; font-size: 10px; color: var(--t-mute);
}
.t-diem__ray {
  position: relative; flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sp-lo) 0%, #eab308 50%, var(--sp-lai) 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
}
/* Mốc CAO HƠN ray và cố ý thò ra hai phía: nó phải đọc được trên cả ba vùng màu, mà
   một chấm nằm gọn trong ray thì chìm vào nền vàng. Viền tương phản lo phần còn lại. */
.t-diem__moc {
  position: absolute; top: -3px; left: 50%; width: 4px; height: 14px;
  margin-left: -2px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 0 1.5px rgba(15, 23, 42, 0.60);
  transition: left .18s ease;
}
.t-diem__so {
  flex: 0 0 32px; text-align: right;
  font-size: 15px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--t-mute);
}
.t-diem--duong .t-diem__so { color: var(--sp-lai); }
.t-diem--am    .t-diem__so { color: var(--sp-lo); }
/* Chưa đo được: thay dải màu bằng một ray TRUNG TÍNH phẳng và giấu mốc. Để nguyên dải
   rực rỡ dưới một ô "–" đọc ra thành "có số đấy, chỉ là không hiện".

   Dùng nền phẳng chứ KHÔNG dùng `grayscale() + opacity`: lọc xám một dải sáng vẫn ra
   xám SÁNG, và ở chế độ tối cái ray vô hiệu ấy lại nổi hơn cả ray đang hoạt động. */
.t-diem--trong .t-diem__ray { background: var(--t-line); }

.dark .t-diem__ray { box-shadow: inset 0 0 0 1px rgba(232, 236, 247, 0.10); }
.dark .t-diem__moc {
  background: #0f1629; box-shadow: 0 0 0 1.5px rgba(232, 236, 247, 0.75);
}

/* Dòng lệch chỉ hiện khi hai kỳ tách nhau đủ xa để có nghĩa — xem NGUONG_LECH. */
.t-diem__lech {
  margin-top: 7px; font-size: 10px; line-height: 1.35;
  color: var(--t-mute); text-align: center;
}
.t-diem__lech:empty { display: none; }
.t-diem__lech b { font-weight: 700; }
.t-diem__lech.t-diem--duong b { color: var(--sp-lai); }
.t-diem__lech.t-diem--am    b { color: var(--sp-lo); }