/* ============ AI Trade Console — Design System ============ */
:root {
  --bg: #0a0c10;
  --surface: #12151b;
  --surface2: #181c24;
  --border: #232936;
  --border-soft: #1c212b;
  --text: #e8ecf3;
  --dim: #96a0b0;
  --faint: #5c6675;
  --long: #16c784;
  --long-bg: rgba(22,199,132,.09);
  --short: #ea3943;
  --short-bg: rgba(234,57,67,.09);
  --wait: #8b95a7;
  --wait-bg: rgba(139,149,167,.08);
  --amber: #f0b90b;
  --blue: #4b8dfa;
  --radius: 12px;
  --radius-sm: 8px;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html {
  /* Chặn cử chỉ vuốt-ngang-để-quay-lại của trình duyệt TRÊN TOÀN TRANG. Đây là
     ứng dụng một trang: "quay lại" nghĩa là reload mất trạng thái, và trên
     mobile chỉ cần trượt tay lệch một chút khi cuộn bảng là dính. Cuộn dọc và
     kéo-để-tải-lại giữ nguyên (chỉ khoá trục X). */
  overscroll-behavior-x: none;
}

body {
  background: var(--bg); color: var(--text);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}
.num { font-variant-numeric: tabular-nums; }
a { color: var(--blue); text-decoration: none; }
.green { color: var(--long); } .red { color: var(--short); } .dim { color: var(--dim); } .amber { color: var(--amber); }
/* Cho các chỉ số LUÔN là mất mát (sụt vốn, phí, trượt giá): mức nhẹ vẫn không
   được mang màu lãi. Xanh lá ở đây bị đọc lướt thành "đang thắng" — xem
   healthPanel.js, ô Sụt giảm vốn. */
.muted { color: var(--wait); }

/* ---------- Layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px 60px; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,12,16,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-in {
  max-width: 1240px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.logo { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.logo .bolt { color: var(--amber); }
.sym-select {
  background: var(--card, #12151c); color: var(--text, #e6e9ef);
  border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 6px 12px; font-size: 14px; font-weight: 600; max-width: 130px;
}
.sym-chip {
  border: 1px solid var(--border); background: none; color: var(--dim);
  padding: 5px 13px; border-radius: 999px; font-size: 13px; cursor: pointer; font-weight: 500;
}
.sym-chip.active { background: var(--surface2); color: var(--text); border-color: #333b4d; }
.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 9px;
  border-radius: 999px; border: 1px solid;
}
.badge.testnet { color: var(--amber); border-color: rgba(240,185,11,.4); background: rgba(240,185,11,.08); }
.badge.live { color: var(--short); border-color: rgba(234,57,67,.45); background: var(--short-bg); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.kill-mini {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--dim);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
}
.kill-mini .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--long); box-shadow: 0 0 6px var(--long); }
.kill-mini.stopped { color: var(--short); border-color: rgba(234,57,67,.5); }
.kill-mini.stopped .dot { background: var(--short); box-shadow: 0 0 6px var(--short); }
.usermenu { position: relative; }
.usermenu > button {
  background: var(--surface); border: 1px solid var(--border); color: var(--dim);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu .menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-width: 160px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.usermenu.open .menu { display: block; }
.usermenu .menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); padding: 10px 14px; font-size: 13px; cursor: pointer;
}
.usermenu .menu button:hover { background: var(--surface); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 2px; margin: 14px 0 18px;
  border-bottom: 1px solid var(--border-soft);
  overflow-x: auto; overscroll-behavior-x: contain;
  /* GHIM khi cuộn (yêu cầu 30/07): topbar sticky ở z-40 cao ~56px; hàng tab
     dính ngay dưới nó. Không có nền thì chữ trang trượt xuyên qua tab. */
  position: sticky; top: var(--topbar-h, 52px); z-index: 30;
  background: rgba(10,12,16,.92); backdrop-filter: blur(10px);
}
.tab {
  padding: 9px 16px; cursor: pointer; color: var(--dim); border: 0; background: none;
  font-size: 13.5px; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500;
}
.tab.active { color: var(--text); border-bottom-color: var(--text); }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px;
}
.card h2 {
  font-size: 11px; text-transform: uppercase; color: var(--faint);
  letter-spacing: .09em; margin-bottom: 12px; font-weight: 600;
}

/* ---------- Hero grid ---------- */
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-bottom: 14px; }
.mid-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-bottom: 14px; }

/* Decision hero */
.decision { display: flex; gap: 26px; align-items: center; padding: 26px 26px; }
.decision-main { flex: 1; min-width: 0; }
.decision-sym { font-size: 13px; color: var(--dim); display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.decision-sym .price { color: var(--text); font-weight: 600; font-size: 15px; }
.decision-action { font-size: clamp(38px, 6vw, 56px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 4px; }
.decision-action.long { color: var(--long); }
.decision-action.short { color: var(--short); }
.decision-action.flat { color: var(--wait); }
.decision-flip {
  margin-top: 10px; font-size: 13px; color: var(--dim);
  border-left: 3px solid var(--border); padding: 4px 0 4px 12px;
}
.decision-flip b { color: var(--text); font-weight: 600; }
.decision-time { font-size: 11.5px; color: var(--faint); margin-top: 10px; }

/* Độ mạnh tín hiệu — §A6.
   Thay cho ring gauge phần trăm cũ (xem đầu decision.js). Cố tình KHÔNG dùng
   xanh/đỏ: độ mạnh không phải hướng, và tô màu theo hướng sẽ khiến người đọc
   gộp hai khái niệm. Cũng cố tình không có thanh/vòng tròn — mọi hình dạng
   "đầy bao nhiêu phần" đều gợi ra một tỷ lệ phần trăm không tồn tại. */
.verdict-strength {
  width: 158px; flex: none; text-align: center; padding: 14px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2);
}
.verdict-strength .vs-label { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--dim); }
.verdict-strength .vs-label.lvl-weak { color: var(--faint); }
.verdict-strength .vs-label.lvl-mid { color: var(--dim); }
.verdict-strength .vs-label.lvl-strong { color: var(--text); }
.verdict-strength .vs-label.lvl-none { color: var(--faint); font-style: italic; font-weight: 600; font-size: 15px; }
.verdict-strength .vs-cap { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; margin-top: 7px; }
.verdict-strength .vs-a6 { font-size: 10.5px; color: var(--faint); line-height: 1.5; margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.verdict-strength .vs-a6 b { color: var(--amber); font-weight: 600; }

/* Trade plan */
.plan-rows { display: grid; gap: 2px; }
.plan-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13.5px;
}
.plan-row:nth-child(odd) { background: rgba(255,255,255,.02); }
.plan-row .k { color: var(--dim); }
.plan-row .v { font-weight: 600; }
.plan-note { margin-top: 10px; font-size: 12px; color: var(--faint); }

/* Explain card */
.explain-group { margin-bottom: 13px; }
.explain-group:last-child { margin-bottom: 0; }
.explain-title { font-size: 12.5px; font-weight: 700; margin-bottom: 5px; display: flex; gap: 7px; align-items: center; }
.explain-title.pro-long { color: var(--long); }
.explain-title.pro-short { color: var(--short); }
.explain-title.risks { color: var(--amber); }
.explain-title.verdict { color: var(--blue); }
.explain-list { list-style: none; padding: 0; display: grid; gap: 4px; }
.explain-list li { font-size: 13px; color: var(--dim); padding-left: 16px; position: relative; }
.explain-list li::before { content: "·"; position: absolute; left: 4px; color: var(--faint); }
.explain-verdict { font-size: 13.5px; color: var(--text); background: rgba(75,141,250,.07); border: 1px solid rgba(75,141,250,.18); border-radius: var(--radius-sm); padding: 10px 12px; }

/* Consensus */
.consensus-rows { display: grid; gap: 12px; }
.cons-row { display: grid; gap: 4px; }
.cons-head { display: flex; justify-content: space-between; font-size: 12.5px; }
.cons-head .name { color: var(--text); font-weight: 600; }
.cons-head .side { font-weight: 700; font-size: 11px; letter-spacing: .04em; }
.cons-bar { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; border: 1px solid var(--border-soft); }
.cons-fill { height: 100%; border-radius: 3px; transition: width .5s; }
.cons-note { font-size: 11.5px; color: var(--faint); }

/* Positions */
.pos-card { border-left: 4px solid var(--border); }
.pos-card.long { border-left-color: var(--long); }
.pos-card.short { border-left-color: var(--short); }
.pos-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.pos-side { font-size: 30px; font-weight: 800; }
.pos-side.long { color: var(--long); } .pos-side.short { color: var(--short); }
.pos-pnl { font-size: 20px; font-weight: 700; }
.pos-stats { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; }
.pos-stats .st .k { color: var(--faint); font-size: 11px; display: block; }
.pos-track { position: relative; height: 34px; margin-top: 12px; }
.pos-track .line { position: absolute; top: 16px; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--short) 0%, var(--surface2) 50%, var(--long) 100%); opacity: .8; }
.pos-track .mark { position: absolute; top: 8px; width: 2px; height: 20px; background: var(--faint); }
.pos-track .cur { position: absolute; top: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--text); border: 2.5px solid var(--bg); box-shadow: 0 0 8px rgba(255,255,255,.5); }
.pos-track .cap { position: absolute; top: 30px; font-size: 10px; color: var(--faint); transform: translateX(-50%); }
.pos-status { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; }
.pos-status.safe { color: var(--long); background: var(--long-bg); }
.pos-status.warn { color: var(--amber); background: rgba(240,185,11,.1); }
.pos-status.danger { color: var(--short); background: var(--short-bg); }
.empty {
  text-align: center; padding: 34px 20px; color: var(--faint);
}
.empty .ico { font-size: 30px; margin-bottom: 8px; opacity: .75; }
.empty .t1 { color: var(--dim); font-size: 14px; font-weight: 600; }
.empty .t2 { font-size: 12.5px; margin-top: 3px; }

/* Stats strip */
.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.stat-card .v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.stat-card .s { font-size: 12px; color: var(--faint); margin-top: 2px; }
.stat-card canvas { width: 100%; height: 46px; margin-top: 8px; }

/* Timeline */
.tl { display: grid; gap: 8px; }
.tl-item {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 13px;
}
.tl-chip { font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 4px 11px; border-radius: 999px; text-align: center; min-width: 92px; }
.tl-chip.long { color: var(--long); background: var(--long-bg); }
.tl-chip.short { color: var(--short); background: var(--short-bg); }
.tl-chip.flat { color: var(--wait); background: var(--wait-bg); }
/* Hàng `signals` sinh ra TRƯỚC audit/41 chưa có cột `brain`. "Chưa ghi" phải
   trông KHÁC "đứng ngoài" — gộp hai thứ là bịa ra một lịch sử quyết định. */
.tl-chip.tl-chip-none { color: var(--faint); background: rgba(255,255,255,.04); font-style: italic; letter-spacing: .02em; }
.tl-time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.tl-reason { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-lead { font-size: 12.5px; color: var(--faint); line-height: 1.6; margin: -4px 0 12px; }
.tl-lead b { color: var(--dim); }
.tl-lead code { font-size: 11.5px; }
/* §A6: nhãn ĐỊNH TÍNH thay cho phần trăm. Cố tình không có biến thể màu
   xanh/đỏ — độ mạnh không phải hướng, và tô màu sẽ khiến người đọc gộp hai
   khái niệm đó lại. */
.tl-str {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; margin-right: 8px;
  padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border);
  color: var(--faint); white-space: nowrap;
}
.tl-str.lvl-mid { color: var(--dim); }
.tl-str.lvl-strong { color: var(--text); border-color: #3d4757; background: var(--surface2); }
.tl-badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tl-badge.entered { color: var(--blue); background: rgba(75,141,250,.1); }
.tl-badge.skipped { color: var(--faint); background: rgba(255,255,255,.04); }
.tl-badge.win { color: var(--long); background: var(--long-bg); }
.tl-badge.loss { color: var(--short); background: var(--short-bg); }
.tl-detail { grid-column: 1 / -1; font-size: 12px; color: var(--dim); border-top: 1px dashed var(--border); padding-top: 9px; margin-top: 3px; white-space: pre-wrap; }
.tl-item summary { cursor: pointer; list-style: none; }
.tl-more { text-align: center; margin-top: 10px; }

/* ---------- Dev mode ---------- */
.dev-toggle {
  position: fixed; bottom: 16px; right: 16px; z-index: 30;
  background: var(--surface2); color: var(--faint); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px; font-size: 12px; cursor: pointer; font-family: ui-monospace, monospace;
}
.dev-panel {
  display: none; margin-top: 14px;
}
.dev-panel.open { display: block; }
.dev-panel pre {
  background: #0b0e13; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 14px; font-size: 11.5px; overflow: auto; max-height: 420px; color: #9fb3c8;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- Forms (settings) ---------- */
.sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
label { display: block; font-size: 12px; color: var(--dim); margin: 12px 0 5px; }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 14px; outline: none;
}
input:focus, select:focus { border-color: var(--blue); }
.keystate { font-size: 11px; margin-top: 4px; color: var(--faint); }
.keystate.ok { color: var(--long); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 16px; font-size: 13px; cursor: pointer;
}
.btn:hover { border-color: var(--blue); }
.btn.primary { background: var(--text); color: var(--bg); font-weight: 700; border: 0; padding: 11px 24px; }
.btn.primary:hover { opacity: .9; }
.btn.danger { color: var(--short); }
.btn:disabled { opacity: .5; cursor: wait; }
.testresult { font-size: 12px; margin-top: 7px; min-height: 16px; }
.hint { font-size: 12px; color: var(--faint); margin-top: 5px; }
.savebar { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.modewarn {
  background: var(--short-bg); border: 1px solid rgba(234,57,67,.35); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12.5px; color: var(--short); margin-top: 10px; display: none;
}
.sw { display: flex; gap: 6px; }
.sw input { flex: 1; }
.secret { -webkit-text-security: disc; }
.eye { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--dim); cursor: pointer; padding: 0 11px; font-size: 14px; }
.provrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.provbox { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; }
.provbox.sel { border-color: var(--blue); background: rgba(75,141,250,.07); }
.provbox b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.provbox .pdesc { font-size: 11px; color: var(--faint); margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 12px; padding: 4px 11px; border-radius: 999px; background: var(--surface2);
  border: 1px solid var(--border); cursor: pointer; color: var(--dim); }
.chip:hover { border-color: var(--blue); color: var(--text); }

/* Tables (users tab) */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--faint); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(5,7,10,.7); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  width: 440px; max-width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px;
}
.modal h3 { font-size: 16px; margin-bottom: 6px; }
.modal .sub { font-size: 13px; color: var(--dim); margin-bottom: 14px; }
.modal ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 7px; }
.modal ul li { font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 12px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn.kill-confirm { background: var(--short); color: #fff; font-weight: 700; border: 0; }

/* ---------- Login ---------- */
#loginOverlay {
  position: fixed; inset: 0; background: radial-gradient(80% 60% at 50% 0%, #10141c 0%, var(--bg) 70%);
  z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px;
}
#loginOverlay.open { display: flex; }
.loginbox { width: 380px; max-width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; padding: 30px; }
.loginbox h2 { font-size: 19px; margin-bottom: 4px; }
.loginbox .sub { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.loginerr { color: var(--short); font-size: 12px; margin-top: 10px; min-height: 16px; }
.gbtn { width: 100%; margin-top: 10px; background: var(--surface); border: 1px dashed var(--border); color: var(--faint);
  border-radius: var(--radius-sm); padding: 10px; font-size: 13px; cursor: not-allowed; }
.switchmode { font-size: 12.5px; color: var(--blue); cursor: pointer; margin-top: 14px; display: inline-block; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--surface2); border: 1px solid var(--long); color: var(--text);
  padding: 12px 20px; border-radius: 10px; font-size: 13px; opacity: 0; transition: all .3s;
  pointer-events: none; z-index: 80; box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: var(--short); }

.section { margin-bottom: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid, .mid-grid { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 12px 80px; }
  .topbar-in { padding: 8px 12px; gap: 8px; }
  /* 10 chip coin không co lại được -> trước đây đẩy CẢ TRANG cuộn ngang.
     Cho dải chip tự cuộn trong lòng nó, phần còn lại của trang đứng yên. */

  .decision { flex-direction: column-reverse; align-items: flex-start; gap: 14px; padding: 20px; }
  .verdict-strength { width: 100%; text-align: left; }
  .stats-strip { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr auto; }
  .tl-time { display: none; }
  .tl-reason { grid-column: 1 / -1; white-space: normal; }
  .pos-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Sức khoẻ tài khoản ---------- */
.hp-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.hp-box {
  background: var(--surface2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.hp-wide { grid-column: span 1; }
.hp-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 10px; }
.hp-big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hp-sub { font-size: 11.5px; color: var(--faint); margin-top: 6px; }
.hp-empty, .hp-unavail { font-size: 12.5px; color: var(--dim); padding: 6px 0; }
.hp-unavail { color: var(--amber); border-left: 2px solid var(--amber); padding-left: 10px; margin-top: 10px; }

/* Thanh phí */
.hp-rows { display: flex; flex-direction: column; gap: 7px; }
.hp-row { display: grid; grid-template-columns: 104px 1fr 92px; align-items: center; gap: 10px; }
.hp-lbl { font-size: 12px; color: var(--dim); }
.hp-track { height: 8px; background: var(--border-soft); border-radius: 4px; overflow: hidden; }
.hp-track i { display: block; height: 100%; border-radius: 4px; }
.bar-g { background: var(--long); } .bar-r { background: var(--short); } .bar-f { background: var(--amber); }
.hp-val { font-size: 13px; font-weight: 600; text-align: right; }
.hp-row-total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.hp-row-total .hp-lbl { color: var(--text); font-weight: 600; }
.hp-row-total .hp-val { font-size: 15px; }
.hp-note { font-size: 12.5px; color: var(--dim); margin-top: 11px; line-height: 1.5; }
.hp-warn {
  font-size: 12.5px; color: var(--amber); background: rgba(240,185,11,.07);
  border-radius: 6px; padding: 8px 10px; margin-top: 9px; line-height: 1.5;
}
.hp-src { font-size: 11px; color: var(--faint); margin-top: 9px; font-style: italic; }

/* Danh mục */
.hp-poslist { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.hp-pos {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 9px; font-size: 12px;
}
.hp-side { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 5px; border-radius: 3px; }
.hp-side.long { background: var(--long-bg); color: var(--long); }
.hp-side.short { background: var(--short-bg); color: var(--short); }
.hp-sym { font-weight: 600; }
.hp-w { color: var(--dim); font-size: 11.5px; }

.hp-pairs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hp-pair {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px;
  border-radius: 5px; padding: 4px 9px; border: 1px solid transparent;
}
.hp-pair.hot  { background: rgba(234,57,67,.10);  border-color: rgba(234,57,67,.3);  color: #ff8f96; }
.hp-pair.warm { background: rgba(240,185,11,.09); border-color: rgba(240,185,11,.26); color: #f5cf5c; }
.hp-pair.cool { background: var(--surface); border-color: var(--border); color: var(--dim); }

.hp-expo { display: flex; align-items: center; gap: 14px; padding: 4px 0 2px; }
.hp-expo-cell { flex: 0 0 auto; }
.hp-expo-v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.hp-expo-s { font-size: 11px; color: var(--faint); margin-top: 1px; }
.hp-expo-arrow { color: var(--faint); font-size: 17px; }

.hp-funnel { display: flex; gap: 16px; flex-wrap: wrap; }
.hp-funnel div { display: flex; flex-direction: column; }
.hp-funnel b { font-size: 20px; font-weight: 700; line-height: 1.2; }
.hp-funnel span { font-size: 11px; color: var(--faint); }

@media (max-width: 860px) {
  .hp-grid { grid-template-columns: 1fr; }
  .hp-row { grid-template-columns: 88px 1fr 80px; gap: 8px; }
  .hp-big { font-size: 26px; }
}

/* ============================================================================
 * LỚP NGOÀI / LỚP TRONG  (audit/52)
 *
 * Hai class dùng chung cho mọi khối đã được nén:
 *
 *   .plain-verdict — MỘT câu tiếng Việt thường, luôn hiện. Đây là thứ người
 *                    trade đọc trong 5 giây. Không thuật ngữ, không tên biến.
 *   details.fold   — mọi chi tiết kỹ thuật, MẶC ĐỊNH ĐÓNG.
 *
 * Vì sao dùng <details> chứ không phải xoá: những khối kỹ thuật đó tồn tại vì
 * hệ thống này từng hiện các con số nghe thuyết phục mà vô nghĩa. Nén là được,
 * xoá là quay lại chỗ cũ. Mọi con số bị đẩy vào đây vẫn nằm nguyên trong DOM,
 * vẫn bấm ra được phiếu nguồn gốc, và vẫn đổ ra ở chế độ dev (§C10).
 * ========================================================================== */
.plain-verdict {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
}
.plain-verdict .pv-ico { font-size: 17px; line-height: 1.35; flex: 0 0 auto; }
.plain-verdict .pv-t { font-weight: 700; font-size: 14.5px; line-height: 1.45; }
.plain-verdict .pv-b { font-size: 13px; color: var(--dim); line-height: 1.65; margin-top: 4px; }
.plain-verdict .pv-b b { color: var(--text); font-weight: 600; }
.plain-verdict.ok   { border-color: rgba(22,199,132,.35); background: var(--long-bg); }
.plain-verdict.ok   .pv-t { color: var(--long); }
.plain-verdict.warn { border-color: rgba(240,185,11,.42); background: rgba(240,185,11,.05); }
.plain-verdict.warn .pv-t { color: var(--amber); }
.plain-verdict.bad  { border-color: rgba(234,57,67,.42); background: var(--short-bg); }
.plain-verdict.bad  .pv-t { color: var(--short); }
/* "Chưa biết" KHÔNG được mượn màu xanh của "đã đo và ổn". Xám trung tính. */
.plain-verdict.wait { border-color: var(--border); background: var(--wait-bg); }
.plain-verdict.wait .pv-t { color: var(--wait); }

/* MỘT DÒNG — dạng gọn nhất của một cảnh báo. Dùng cho những sự thật BẮT BUỘC
   phải ở lại Tổng quan nhưng không được chiếm chỗ: đang chạy thử thu dữ liệu,
   chưa đủ dữ liệu để kết luận. Chi tiết nằm ở tab Hệ thống AI. */
.one-line {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13px; line-height: 1.5;
  padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  color: var(--dim); overflow-wrap: anywhere;
}
.one-line b { color: var(--text); font-weight: 700; }
.one-line > span:first-child { flex: none; font-size: 14px; }
.one-line.ok   { border-color: rgba(22,199,132,.32); background: var(--long-bg); }
.one-line.ok b { color: var(--long); }
/* "Chưa biết" KHÔNG mượn màu xanh: xám trung tính, không phải tin tốt cũng
   chưa phải tin xấu. Xem đầu decay.css. */
.one-line.wait { border-color: var(--border); background: var(--wait-bg); }
.one-line.wait b { color: var(--text); }
.one-line.warn { border-color: rgba(240,185,11,.42); background: rgba(240,185,11,.06); }
.one-line.warn b { color: var(--amber); }
.one-line.bad  { border-color: rgba(234,57,67,.45); background: var(--short-bg); }
.one-line.bad b { color: var(--short); }

details.fold { margin-top: 12px; }
details.fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--dim);
  padding: 8px 11px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; font-size: 10px; transition: transform .15s ease; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover { color: var(--text); border-color: var(--border); }
details.fold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fold-body {
  border: 1px solid var(--border-soft); border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 14px 13px 13px;
}
/* Câu dịch thuật ngữ sang lời thường, đặt ở ĐẦU mỗi khối đã mở.
   Bắt buộc: chỉ số thống kê chỉ được xuất hiện kèm một câu giải thích. */
.fold-lead {
  font-size: 12.5px; color: var(--dim); line-height: 1.65;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--border);
}
.fold-lead b { color: var(--text); }
@media (max-width: 560px) {
  .plain-verdict { padding: 11px 12px; gap: 9px; }
  .plain-verdict .pv-t { font-size: 13.5px; }
  .fold-body { padding: 12px 10px; }
}

/* ---------- Chỉ báo giá real-time ---------- */
/* Chấm xanh nhấp nháy = mark price đang chảy về qua WebSocket.
   Kín đáo có chủ đích: người dùng cần biết số có tươi không, không cần bị hét vào mặt. */
.live-dot {
  display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-radius: 50%; background: var(--long); vertical-align: middle;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
/* Mất kết nối: nói rõ đang dùng số làm mới chậm, KHÔNG im lặng giả vờ vẫn real-time */
.live-off { margin-left: 6px; color: var(--faint); font-size: 11px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none } }