/* ============ Track Record ============
   Dùng chung design token từ app.css (:root). File này KHÔNG khai báo token mới,
   chỉ dùng lại --long / --short / --amber / --surface / --dim / --faint ...
   Mọi selector đều có tiền tố .tr- để không đụng vào phần nào khác của app. */

/* Ràng buộc chung cho 375px: không cho bất cứ thứ gì bên trong đẩy panel rộng ra. */
.tr-sec, .tr-verdict, .tr-metrics, .tr-flow, .tr-syms { min-width: 0; }
.tr-sec * { min-width: 0; }

/* ---------- Khối kết luận cỡ mẫu: thứ TO NHẤT trên màn hình ---------- */
.tr-verdict {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  margin-bottom: 14px;
  background: var(--surface);
}
.tr-verdict.bad {
  border-color: rgba(234, 57, 67, .45);
  background: linear-gradient(180deg, rgba(234, 57, 67, .10), rgba(234, 57, 67, .03));
}
.tr-verdict.warn {
  border-color: rgba(240, 185, 11, .40);
  background: linear-gradient(180deg, rgba(240, 185, 11, .09), rgba(240, 185, 11, .02));
}
.tr-verdict.ok {
  border-color: rgba(22, 199, 132, .35);
  background: linear-gradient(180deg, rgba(22, 199, 132, .08), rgba(22, 199, 132, .02));
}
.tr-verdict-top { display: flex; gap: 12px; align-items: flex-start; }
.tr-verdict-ico { font-size: 22px; line-height: 1.2; flex: none; }
.tr-verdict-txt { min-width: 0; }
/* Phải là chữ TO NHẤT panel. Mọi con số bên dưới (vốn 26px, tỷ lệ thắng 42px)
   đều được canh để không vượt mặt dòng này khi kết luận là "chưa đủ dữ liệu". */
.tr-verdict-title {
  font-size: clamp(22px, 3.8vw, 28px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere;
}
.tr-verdict.bad .tr-verdict-title { color: #ff8f96; }
.tr-verdict.warn .tr-verdict-title { color: #f5cf5c; }
.tr-verdict.ok .tr-verdict-title { color: var(--long); }
.tr-verdict-lead {
  font-size: 13px; color: var(--dim); margin-top: 5px;
  line-height: 1.5; overflow-wrap: anywhere;
}
.tr-verdict-note {
  font-size: 12.5px; color: var(--dim); margin-top: 10px;
  font-style: italic; overflow-wrap: anywhere;
}
.tr-verdict-note code { font-style: normal; color: var(--amber); }
.tr-verdict-hard {
  margin-top: 11px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(234, 57, 67, .10); border: 1px solid rgba(234, 57, 67, .28);
  color: #ffb3b8; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere;
}

/* Thanh tiến độ tới ngưỡng mẫu tối thiểu */
.tr-gauge { margin-top: 13px; }
.tr-gauge-bar {
  height: 7px; border-radius: 4px; background: var(--border-soft); overflow: hidden;
}
.tr-gauge-bar i { display: block; height: 100%; border-radius: 4px; }
.tr-gauge-bar i.bad { background: var(--short); }
.tr-gauge-bar i.warn { background: var(--amber); }
.tr-gauge-bar i.ok { background: var(--long); }
.tr-gauge-lbl { font-size: 12px; color: var(--dim); margin-top: 6px; }
.tr-gauge-lbl b { color: var(--text); }

/* ---------- Section chung ---------- */
.tr-sec {
  border-top: 1px solid var(--border-soft);
  padding: 15px 0 3px;
}
.tr-sec:first-of-type { border-top: 0; }
.tr-sec-hot {
  border: 1px solid rgba(240, 185, 11, .26);
  background: rgba(240, 185, 11, .035);
  border-radius: var(--radius);
  padding: 14px; margin: 14px 0 4px;
}
.tr-sec-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600; margin-bottom: 11px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.tr-sec-side { text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 500; }
.tr-chip-warn {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px;
  color: #f5cf5c; background: rgba(240, 185, 11, .12);
  border: 1px solid rgba(240, 185, 11, .3);
  padding: 2px 8px; border-radius: 999px;
}
.tr-note {
  font-size: 12.5px; color: var(--dim); line-height: 1.55;
  margin-top: 11px; overflow-wrap: anywhere;
}
.tr-note code { color: var(--amber); font-size: 11.5px; }
.tr-warn {
  margin-top: 11px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(234, 57, 67, .10); border: 1px solid rgba(234, 57, 67, .3);
  color: #ffb3b8; font-size: 12.5px; line-height: 1.5;
}
.tr-empty-line { font-size: 12.5px; color: var(--dim); padding: 4px 0 8px; }

/* ---------- Đường vốn ---------- */
.tr-eq-top {
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 10px;
}
.tr-eq-now { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.tr-eq-sub { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.tr-eq-dd { text-align: right; }
.tr-eq-dd-v { font-size: 19px; font-weight: 700; line-height: 1.2; }
.tr-eq-wrap { width: 100%; }
/* Chiều cao cố định bằng CSS + width 100% -> việc set canvas.width/height trong JS
   không làm thay đổi kích thước layout, nên ResizeObserver không tự kích lại mình. */
.tr-eq-canvas { display: block; width: 100%; height: 150px; }
.tr-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 11px; color: var(--faint); margin-top: 6px;
}
.tr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tr-legend .sw { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }
/* Ô màu chú giải phải khớp màu đường THẬT SỰ được vẽ (xanh khi tăng, đỏ khi
   giảm). Để cứng màu xanh là chú giải nói dối chính cái hình bên trên nó. */
.tr-legend .sw.line.up { background: var(--long); }
.tr-legend .sw.line.down { background: var(--short); }
.tr-legend .sw.dd { background: var(--short); height: 3px; }

/* ---------- Gộp → phí → ròng ---------- */
.tr-flow { display: flex; flex-direction: column; gap: 7px; }
.tr-flow-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 96px; align-items: center; gap: 10px; }
.tr-flow-k { font-size: 12px; color: var(--dim); }
.tr-flow-track { height: 8px; background: var(--border-soft); border-radius: 4px; overflow: hidden; }
.tr-flow-track i { display: block; height: 100%; border-radius: 4px; }
.tr-flow-track i.b-g { background: var(--long); }
.tr-flow-track i.b-r { background: var(--short); }
.tr-flow-track i.b-f { background: var(--amber); }
.tr-flow-v { font-size: 13px; font-weight: 600; text-align: right; }
.tr-flow-total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.tr-flow-total .tr-flow-k { color: var(--text); font-weight: 700; }
.tr-flow-total .tr-flow-v { font-size: 15px; }

/* ---------- Tỷ lệ thắng + khoảng tin cậy ---------- */
.tr-wr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.tr-wr-big {
  font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  flex: none;
}
/* Chưa đủ mẫu: vừa làm mờ VỪA THU NHỎ. Chỉ đổi màu là chưa đủ — một số "100%"
   cỡ 42px vẫn hút mắt mạnh hơn dòng cảnh báo, và người đọc sẽ nhớ con số chứ
   không nhớ lời cảnh báo. Thu về 26px để nó thấp hơn tiêu đề kết luận. */
.tr-wr-big.muted { color: var(--faint); font-size: 26px; font-weight: 700; }
.tr-wr-side { flex: 1 1 220px; min-width: 0; }
.tr-wr-frac { font-size: 12.5px; color: var(--dim); margin-bottom: 8px; }
.tr-ci-bar {
  position: relative; height: 10px; border-radius: 5px;
  background: var(--border-soft); border: 1px solid var(--border-soft);
}
.tr-ci-bar i.rng {
  position: absolute; top: 0; bottom: 0; border-radius: 5px;
  background: rgba(240, 185, 11, .45); border: 1px solid rgba(240, 185, 11, .6);
}
/* Khoảng "nếu coi các lệnh là ĐỘC LẬP" — vẽ chồng lên khoảng thật để thấy ngay
   nó hẹp hơn bao nhiêu. Chỉ là viền đứt, không tô nền: nó KHÔNG phải con số đúng,
   nó là con số mà một dashboard cẩu thả sẽ hiện. */
.tr-ci-bar i.rng-naive {
  position: absolute; top: -2px; bottom: -2px; border-radius: 5px;
  background: none; border: 1px dashed var(--text); opacity: .55;
}
.tr-ci-bar i.pt {
  position: absolute; top: -3px; width: 3px; height: 16px; border-radius: 2px;
  background: var(--text); transform: translateX(-50%);
}
.tr-ci-scale {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--faint); margin-top: 4px;
}

/* ---------- Lưới chỉ số ---------- */
.tr-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px;
}
.tr-m {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 9px 11px; min-width: 0;
}
.tr-m-k { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.tr-m-v { font-size: 18px; font-weight: 700; line-height: 1.25; margin-top: 3px; overflow-wrap: anywhere; }
.tr-m-s { font-size: 10.5px; color: var(--faint); margin-top: 2px; overflow-wrap: anywhere; }

/* Cỡ mẫu chưa đủ -> làm mờ CÓ CHỦ Ý + gạch chéo nền, để mắt hiểu ngay
   "đây là số chưa dùng được", chứ không phải một bảng thành tích. */
.tr-dimmed .tr-metrics, .tr-dimmed .tr-syms { opacity: .5; }
.tr-dimmed .tr-m, .tr-dimmed .tr-sym, .tr-m-unreliable {
  background-image: repeating-linear-gradient(
    -45deg, rgba(255, 255, 255, .028) 0 6px, transparent 6px 12px);
}
/* Ô lẻ không đáng tin nằm trong khối vẫn đáng tin (ví dụ Sharpe trong mục Rủi ro,
   nơi Sụt giảm vẫn là sự thật đo được). */
.tr-m-unreliable { opacity: .5; }

/* ---------- Theo cặp ---------- */
.tr-syms { display: flex; flex-direction: column; gap: 5px; }
.tr-sym {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 7px 11px;
}
.tr-sym-n { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.tr-sym-c { font-size: 11.5px; color: var(--faint); }
.tr-sym-p { font-size: 13px; font-weight: 600; text-align: right; }

/* ---------- Dữ liệu bị loại ----------
   Lý do loại là câu tiếng Việt dài, KHÔNG được để nó nằm cùng hàng với mã lệnh:
   cột `auto` gặp chuỗi dài sẽ đẩy lưới rộng ra và sinh cuộn ngang ở 375px. Xếp
   dọc, và cho phép ngắt trong từ để chuỗi không dấu cách cũng không tràn. */
.tr-dq-list { display: flex; flex-direction: column; gap: 5px; }
.tr-dq-row {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 7px 11px; min-width: 0;
}
.tr-dq-id { font-weight: 700; font-size: 12.5px; }
.tr-dq-why { font-size: 11.5px; color: var(--faint); line-height: 1.5; overflow-wrap: anywhere; }

/* ============================================================================
   LÃI/LỖ THEO NGÀY  (components/dailyPnl.js)
   ---------------------------------------------------------------------------
   Yêu cầu duy nhất: đọc được trong 5 giây. Vì vậy mỗi ngày là MỘT dòng, số tiền
   canh phải để so cột dọc bằng mắt, và một thanh ngang cho biết ngày nào nặng.
   ========================================================================== */

.dp-top {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 10px 0 12px;
}
.dp-top-c {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 9px 11px; min-width: 0;
}
.dp-top-k {
  font-size: 10px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
}
.dp-top-v { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; overflow-wrap: anywhere; }
.dp-top-s { font-size: 11px; color: var(--faint); margin-top: 2px; overflow-wrap: anywhere; }

.dp-table { display: flex; flex-direction: column; gap: 3px; }
.dp-head, .dp-row {
  display: grid;
  grid-template-columns: 78px minmax(50px, 1fr) 82px minmax(0, 130px) 96px;
  align-items: center; gap: 10px;
}
.dp-head {
  font-size: 10px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .06em; padding: 0 11px 3px;
}
/* Ô tiêu đề canh phải + nowrap sẽ TRÀN NGƯỢC sang cột bên trái khi chữ dài hơn
   cột. Cắt thay vì để hai nhãn chồng lên nhau — chồng chữ đọc ra nhãn sai. */
.dp-head > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-row {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 7px 11px;
}
/* Ngày không giao dịch vẫn PHẢI hiện (một khoảng trống bị đọc thành "không có
   dữ liệu"), nhưng mờ đi để không cạnh tranh với ngày có thật. */
.dp-row-idle { background: none; border-style: dashed; }
.dp-row-today { border-color: var(--border); }
.dp-day { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dp-row-idle .dp-day { font-weight: 500; color: var(--dim); }
.dp-bar {
  height: 7px; border-radius: 4px; background: var(--border-soft); overflow: hidden;
}
.dp-bar-f { display: block; height: 100%; border-radius: 4px; }
.dp-bar-f.up { background: var(--long); }
.dp-bar-f.down { background: var(--short); }
.dp-bar-f.zero { background: none; }
.dp-net { font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.dp-cnt { font-size: 11.5px; color: var(--dim); overflow-wrap: anywhere; }
.dp-cm { font-size: 11.5px; text-align: right; white-space: nowrap; }
.dp-cm-tag {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  color: var(--amber); background: rgba(240, 185, 11, .12);
}

.dp-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: var(--faint); margin-top: 9px;
}
.dp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dp-sw { width: 12px; height: 6px; border-radius: 3px; flex: none; }
.dp-sw.up { background: var(--long); }
.dp-sw.down { background: var(--short); }
.dp-sw.zero { background: var(--border-soft); }

.dp-cm-note, .tlg-cm-note {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(240, 185, 11, .09); border: 1px solid rgba(240, 185, 11, .30);
  color: #f0d489; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere;
}
.dp-cm-note code, .tlg-cm-note code { color: var(--amber); }
.dp-cm-note b, .tlg-cm-note b { color: #ffdf8a; }
.dp-warn, .tlg-thin {
  margin-top: 9px; font-size: 11.5px; line-height: 1.55;
  color: var(--dim); overflow-wrap: anywhere;
}

/* ============================================================================
   LỊCH SỬ LỆNH  (components/tradeLog.js)
   ========================================================================== */

.tlg-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 10px 0 11px; }
.tlg-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.tlg-mode {
  min-height: 30px; padding: 4px 11px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--dim); background: var(--surface); cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
}
.tlg-mode:hover { color: var(--text); border-color: var(--faint); }
.tlg-mode.active { color: var(--bg); background: var(--dim); border-color: var(--dim); }
.tlg-mode:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.tlg-pick { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tlg-pick.hide { display: none; }
.tlg-pick span {
  font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em;
}
.tlg-pick input {
  font: inherit; font-size: 12.5px; min-height: 30px; max-width: 100%;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 3px 8px; color-scheme: dark;
}
.tlg-pick input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.tlg-sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  font-size: 12px; color: var(--dim); margin-bottom: 9px;
}
.tlg-sum-k {
  font-size: 10px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.tlg-sum b { color: var(--text); }

.tlg-list { display: flex; flex-direction: column; gap: 4px; }
/* SÁU cột cố định, kể cả khi ô "thu dữ liệu" rỗng. Chỉ vẽ ô đó ở dòng có dấu
   collection_mode sẽ làm số ô lệch nhau giữa các dòng và grid đẩy nút 🔍 xuống
   một hàng mới — dòng đó cao gấp đôi, trông như một lỗi hiển thị. */
.tlg-head, .tlg-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 92px 92px auto auto;
  align-items: center; gap: 10px; text-align: left;
}
.tlg-head {
  font-size: 10px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .06em; padding: 0 11px 2px;
}
.tlg-head > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlg-row {
  width: 100%; font: inherit; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 8px 11px;
}
.tlg-row:hover:not([disabled]) { border-color: var(--border); background: var(--surface2); }
.tlg-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.tlg-row[disabled] { cursor: default; }
.tlg-go-no {
  font-size: 10px; color: var(--faint); white-space: nowrap; opacity: 1;
}
/* Lệnh thu dữ liệu: nền + viền riêng, KHÔNG chỉ một chữ nhỏ. Người đọc lướt
   danh sách bằng màu, nên dấu hiệu cũng phải nằm ở màu. */
.tlg-row-cm {
  background: rgba(240, 185, 11, .06);
  border-color: rgba(240, 185, 11, .30);
}
.tlg-row-cm:hover:not([disabled]) { background: rgba(240, 185, 11, .10); border-color: rgba(240, 185, 11, .5); }

.tlg-when { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.tlg-sym { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.tlg-side {
  font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 3px; flex: none;
}
.tlg-side.long { color: var(--long); background: rgba(22, 199, 132, .12); }
.tlg-side.short { color: var(--short); background: rgba(234, 57, 67, .12); }
.tlg-st { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.tlg-st.open { color: var(--amber); }
.tlg-st.err { color: var(--short); }
.tlg-pnl { font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; }
.tlg-cm { white-space: nowrap; }
.tlg-cm-tag {
  display: inline-block; font-size: 10px; font-style: normal; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  color: var(--amber); background: rgba(240, 185, 11, .14);
}
.tlg-go { font-size: 12px; opacity: .55; }
.tlg-row:hover .tlg-go { opacity: 1; }

.tlg-empty {
  padding: 18px 14px; text-align: center; font-size: 12.5px;
  color: var(--faint); line-height: 1.6; overflow-wrap: anywhere;
}
.tlg-empty b { color: var(--dim); }

/* ---------- Rỗng ---------- */
.tr-empty { text-align: center; padding: 26px 14px 20px; color: var(--faint); }
.tr-empty .ico { font-size: 28px; margin-bottom: 8px; opacity: .8; }
.tr-empty .t1 { color: var(--dim); font-size: 14px; font-weight: 600; }
.tr-empty .t2 {
  font-size: 12.5px; margin-top: 5px; line-height: 1.55;
  max-width: 460px; margin-left: auto; margin-right: auto;
}

/* ---------- Mốc mua-và-giữ ----------
   Khối này được cố ý làm NỔI ngang khối kết luận cỡ mẫu: nó là thứ duy nhất
   trên màn hình phân biệt "hệ thống có kỹ năng" với "thị trường đang đi lên". */
.tr-bench {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px; margin: 14px 0 4px;
  background: var(--surface);
}
.tr-bench.ok   { border-color: rgba(22, 199, 132, .38); background: rgba(22, 199, 132, .045); }
.tr-bench.bad  { border-color: rgba(234, 57, 67, .42);  background: rgba(234, 57, 67, .05); }
.tr-bench.warn { border-color: rgba(240, 185, 11, .38); background: rgba(240, 185, 11, .04); }
.tr-bench-off  { border-color: rgba(240, 185, 11, .30); }

.tr-bench-head { margin-top: 10px; }
.tr-bench-title {
  font-size: clamp(17px, 3vw, 21px); font-weight: 800; letter-spacing: -.01em;
  line-height: 1.25; overflow-wrap: anywhere;
}
.tr-bench.ok   .tr-bench-title { color: var(--long); }
.tr-bench.bad  .tr-bench-title { color: #ff8f96; }
.tr-bench.warn .tr-bench-title { color: #f5cf5c; }
.tr-bench-lead {
  font-size: 12.5px; color: var(--dim); margin-top: 5px;
  line-height: 1.5; overflow-wrap: anywhere;
}

/* Hai cột cạnh nhau + chữ "vs" ở giữa. Ở 375px chúng xuống hàng (xem media query),
   nhưng KHÔNG bao giờ cuộn ngang: minmax(0,1fr) chặn phần tử con đẩy rộng ra. */
.tr-bench-cmp {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 10px; margin-top: 13px;
}
.tr-bench-col {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 11px; background: rgba(0, 0, 0, .18); min-width: 0;
}
.tr-bench-k {
  font-size: 10.5px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .04em; overflow-wrap: anywhere;
}
.tr-bench-v { font-size: 24px; font-weight: 800; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere; }
.tr-bench-s { font-size: 11.5px; color: var(--dim); margin-top: 2px; overflow-wrap: anywhere; }
.tr-bench-vs { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }

.tr-bench-delta {
  margin-top: 11px; padding: 9px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: rgba(0, 0, 0, .18);
  font-size: 13px; overflow-wrap: anywhere;
}
.tr-bench-delta.green { color: var(--long); }
.tr-bench-delta.red   { color: #ff8f96; }
.tr-bench-delta.amber { color: var(--amber); }
.tr-bench-delta b { font-weight: 800; }

.tr-bench-legs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tr-bench-leg {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-soft); background: rgba(0, 0, 0, .2);
  font-size: 11.5px;
}
.tr-bench-leg b { font-weight: 700; color: var(--dim); }
.tr-bench-leg i { font-style: normal; font-weight: 700; }

/* Chú giải đường mốc trên biểu đồ — nét đứt, màu trung tính, khớp canvas. */
.tr-legend .sw.bench {
  background: repeating-linear-gradient(90deg, var(--wait) 0 5px, transparent 5px 9px);
  height: 2px;
}

/* ---------- Chân trang: phân biệt thống kê thật vs xác suất mô hình (§A6) ---------- */
.tr-foot {
  margin-top: 16px; padding-top: 11px; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--faint); line-height: 1.55; overflow-wrap: anywhere;
}
.tr-foot b { color: var(--dim); font-weight: 600; }

/* ---------- Responsive: 375px phải dùng được thật ---------- */
@media (max-width: 560px) {
  /* 112px + 96px cột cố định vốn không vừa 375px -> thu cột nhãn/giá trị lại. */
  .tr-flow-row { grid-template-columns: 88px minmax(0, 1fr) 78px; gap: 8px; }
  .tr-flow-k { font-size: 11.5px; }
  .tr-metrics { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .tr-m-v { font-size: 16px; }
  /* Ở 375px tiêu đề kết luận chỉ còn 22px. Mọi con số bên dưới phải nhỏ hơn nó
     khi kết luận là "chưa đủ dữ liệu", nếu không cảnh báo bị con số nuốt mất. */
  .tr-eq-now { font-size: 20px; }
  .tr-eq-canvas { height: 128px; }
  .tr-wr-big { font-size: 30px; }
  .tr-wr-big.muted { font-size: 18px; }
  .tr-empty .ico { font-size: 24px; }
  .tr-sym { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; }
  .tr-sec-hot { padding: 12px; }
  /* 375px: hai cột so sánh xếp dọc, chữ "vs" thành một dòng ở giữa. Ép ba cột
     vào 375px sẽ làm con số 24px tràn ra ngoài và sinh cuộn ngang. */
  .tr-bench { padding: 12px; }
  .tr-bench-cmp { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tr-bench-vs { text-align: center; }
  .tr-bench-v { font-size: 21px; }
  /* --- Lãi/lỗ theo ngày ở 375px ---
     5 cột không vừa. Bỏ hàng tiêu đề (mỗi ô tự có nhãn), xếp thành 2 hàng:
     hàng trên NGÀY + SỐ TIỀN (đó là cặp người ta đọc trước), hàng dưới thanh và
     phần đếm. Cột thu dữ liệu xuống cuối nhưng KHÔNG bị ẩn — ẩn nó đi thì trên
     điện thoại người dùng mất hẳn thông tin lệnh nào không tính. */
  .dp-top { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dp-top-v { font-size: 18px; }
  .dp-head { display: none; }
  .dp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "day net" "bar bar" "cnt cm";
    row-gap: 5px; gap: 8px;
  }
  .dp-day { grid-area: day; }
  .dp-net { grid-area: net; }
  .dp-bar { grid-area: bar; }
  .dp-cnt { grid-area: cnt; }
  .dp-cm { grid-area: cm; }

  /* --- Lịch sử lệnh ở 375px ---
     Giữ nguyên 4 mẩu thông tin, chỉ xếp lại thành 2 hàng. Nhãn "thu dữ liệu"
     đứng riêng một hàng để không bao giờ bị cắt cụt. */
  .tlg-head { display: none; }
  .tlg-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "sym pnl" "when st" "cm cm";
    row-gap: 4px; gap: 8px;
  }
  .tlg-sym { grid-area: sym; }
  .tlg-pnl { grid-area: pnl; }
  .tlg-when { grid-area: when; }
  .tlg-st { grid-area: st; text-align: right; }
  .tlg-cm { grid-area: cm; justify-self: start; }
  .tlg-go { display: none; }
  .tlg-pick { width: 100%; }
  .tlg-pick input { width: 100%; }
}
@media (max-width: 380px) {
  /* Ở đúng 375px, 3 cột cho dòng phí là chật. Xếp nhãn lên trên, thanh + số xuống dưới. */
  .tr-flow-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "t v"; row-gap: 3px; }
  .tr-flow-k { grid-area: k; }
  .tr-flow-track { grid-area: t; }
  .tr-flow-v { grid-area: v; }
}