/* ============================================================
   BASE.CSS — dung chung cho MOI trang cua website gia san.
   Tach tu style.css ngay 31/07/2026 (GD 0 muc 0.2).
   Reskin sang "Fey Design System" ngay 03/08/2026: bo Liquid Glass
   (aurora + backdrop-filter + slider Trong/Duc), chuyen sang be mat
   PHANG DUC theo design "Stock Dashboard Redesign.dc.html".

   NOTE: --border, --text-muted, --amber duoc chartModule.js doc qua
   getComputedStyle -> PHAI la mau CU THE trong tung khoi theme
   (khong duoc la var(), vi getPropertyValue tra ve chuoi "var(...)").
   ============================================================ */

/* ============================================================
   TOKENS — Fey design system. Dark la mac dinh (DS goc la dark-mode).
   Light lay tu khoi [data-theme="light"] cua file design.
   ============================================================ */
:root {
  /* base neutrals — warm-tinted near-black scale */
  --gray-0: #000000;
  --gray-50: #0a0a0a;
  --gray-100: #0d0d0d;
  --gray-150: #121212;
  --gray-200: #161616;
  --gray-250: #1a1a1a;
  --gray-300: #212121;
  --gray-400: #2c2c2c;
  --gray-500: #3d3d3d;
  --gray-600: #5c5c5c;
  --gray-700: #8a8a8a;
  --gray-800: #b3b3b0;
  --gray-900: #e8e8e3;
  --white: #f5f5f0;

  /* accents */
  --accent-orange: #f0a94e;
  --accent-green: #3ddc97;
  --accent-red: #f0625f;
  --accent-purple: #a78bfa;
  --accent-yellow: #e5d26b;
  --accent-teal: #2dd4bf;

  /* semantic surfaces */
  --surface-app: var(--gray-50);
  --surface-card: var(--gray-150);
  --surface-card-raised: var(--gray-200);
  --surface-inset: var(--gray-100);
  --surface-hover: var(--gray-250);
  --surface-pill-active: var(--white);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* semantic text */
  --text-primary: var(--white);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-600);
  --text-on-accent: #0a0a0a;

  /* semantic feedback */
  --positive: var(--accent-green);
  --negative: var(--accent-red);

  /* chart series palette, in order */
  --chart-2: var(--accent-orange);
  --chart-3: var(--accent-purple);
  --chart-4: var(--accent-yellow);
  --chart-5: var(--accent-teal);

  /* type */
  --font-sans: "Roboto", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Roboto Mono", monospace;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --type-title: 600 var(--text-lg) / var(--leading-snug) var(--font-sans);
  --type-label: 500 var(--text-sm) / var(--leading-snug) var(--font-sans);
  --type-caption: 400 var(--text-xs) / var(--leading-normal) var(--font-sans);

  /* space / radius / shadow / motion */
  --space-4: 16px;
  --space-6: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  /* ---- accent tints (dung cho vung chon / chip bat) ---- */
  --accent-soft: rgba(240, 169, 78, 0.14);
  --positive-soft: rgba(61, 220, 151, 0.14);
  --negative-soft: rgba(240, 98, 95, 0.14);

  /* ============================================================
     ALIAS TUONG THICH — ten bien cu ma ~4000 dong CSS/JS dang goi.
     Giu lai de khong phai sua tung cho; chi doi GIA TRI o day.
     ============================================================ */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --radius: var(--radius-lg);

  --ground: var(--surface-app);
  --ground-2: var(--surface-inset);
  --text: var(--text-primary);
  --text-dim: var(--text-tertiary);
  --panel: var(--surface-card);
  --panel-2: var(--surface-card-raised);
  --field-bg: var(--surface-inset);

  --amber-dim: var(--accent-soft);
  --up: var(--positive);
  --up-dim: var(--positive-soft);
  --down: var(--negative);
  --down-dim: var(--negative-soft);
  --up-strong: #1f9d68;
  --down-strong: #b3403d;
  --on-strong: #f5f5f0;
  --blue: var(--accent-purple);

  --bg: var(--surface-app);
  --bg-alt: var(--surface-inset);
  --green: var(--positive);
  --green-dim: var(--positive-soft);
  --red: var(--negative);
  --red-dim: var(--negative-soft);

  /* Doc boi chartModule.js qua getComputedStyle -> mau cu the, khong var().
     getPropertyValue tra ve CHUOI chua giai, nen alias kieu var(--x) se hong. */
  --border: rgba(255, 255, 255, 0.09);
  --text-muted: #8a8a8a;
  --amber: #f0a94e;
  --chart-up: #3ddc97;
  --chart-down: #f0625f;
  --chart-ma10: #f0a94e;
  --chart-ma20: #a78bfa;
  --chart-boll: #8a8a8a;
  --chart-rsi: #e5d26b;
  --chart-trend: #f0a94e;
  --chart-line: #f5f5f0;
}

/* Dark = mac dinh, nhung viet lai tuong minh de nut "Tối" luon thang */
:root[data-theme="dark"] {
  --surface-app: var(--gray-50);
  --surface-card: var(--gray-150);
  --surface-card-raised: var(--gray-200);
  --surface-inset: var(--gray-100);
  --surface-hover: var(--gray-250);
  --surface-pill-active: var(--white);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text-primary: var(--white);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-600);
  --text-on-accent: #0a0a0a;
  --positive: var(--accent-green);
  --negative: var(--accent-red);
  --accent-orange: #f0a94e;
  --accent-soft: rgba(240, 169, 78, 0.14);
  --positive-soft: rgba(61, 220, 151, 0.14);
  --negative-soft: rgba(240, 98, 95, 0.14);
  --chart-2: var(--accent-orange);
  --chart-3: var(--accent-purple);
  --chart-4: var(--accent-yellow);
  --up-strong: #1f9d68;
  --down-strong: #b3403d;
  --on-strong: #f5f5f0;

  --border: rgba(255, 255, 255, 0.09);
  --text-muted: #8a8a8a;
  --amber: #f0a94e;
  --chart-up: #3ddc97;
  --chart-down: #f0625f;
  --chart-ma10: #f0a94e;
  --chart-ma20: #a78bfa;
  --chart-boll: #8a8a8a;
  --chart-rsi: #e5d26b;
  --chart-trend: #f0a94e;
  --chart-line: #f5f5f0;
}

/* Light — nguyen van khoi [data-theme="light"] cua file design */
:root[data-theme="light"] {
  --white: #14171f;
  --text-on-accent: #ffffff;
  --surface-app: #f7f7f4;
  --surface-card: #ffffff;
  --surface-card-raised: #f0f0ec;
  --surface-inset: #eeeeea;
  --surface-hover: #e6e6e1;
  --surface-pill-active: #14171f;
  --border-subtle: rgba(20, 23, 31, 0.07);
  --border-default: rgba(20, 23, 31, 0.11);
  --border-strong: rgba(20, 23, 31, 0.18);
  --text-primary: #14171f;
  --text-secondary: #5c5c5c;
  --text-tertiary: #8a8a8a;
  --positive: #1f9d68;
  --negative: #c9433f;
  --accent-orange: #b9740a;
  --accent-soft: rgba(185, 116, 10, 0.12);
  --positive-soft: rgba(31, 157, 104, 0.13);
  --negative-soft: rgba(201, 67, 63, 0.12);
  --chart-2: #b9740a;
  --chart-3: #7c5cd1;
  --chart-4: #a68c17;
  --chart-5: #0f8f80;
  --shadow-card: 0 1px 2px rgba(20, 23, 31, 0.04), 0 8px 24px rgba(20, 23, 31, 0.06);
  --up-strong: #157a50;
  --down-strong: #a5322e;
  --on-strong: #ffffff;

  --border: rgba(20, 23, 31, 0.11);
  --text-muted: #5c5c5c;
  --amber: #b9740a;
  --chart-up: #1f9d68;
  --chart-down: #c9433f;
  --chart-ma10: #b9740a;
  --chart-ma20: #7c5cd1;
  --chart-boll: #8a8a8a;
  --chart-rsi: #a68c17;
  --chart-trend: #b9740a;
  --chart-line: #14171f;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--accent-orange); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Moi trang deu la mot cot noi dung can giua, khong tran vien */
.app-nav, .app-header, .app-footer, .main-grid-single {
  max-width: 1440px; margin-left: auto; margin-right: auto;
}

/* LIVE badge — Badge component, tone "warning" */
.live-dot {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-orange);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em;
}
.live-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-orange); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   HEADER — dai phang, chi co vien duoi (khong con la the kinh noi)
   ============================================================ */
.app-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 16px 20px;
  background: var(--surface-app);
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.brand { display: flex; flex-direction: column; gap: 3px; }
.brand-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand .mark { font: var(--type-title); letter-spacing: -0.01em; }
.brand .mark span { color: var(--accent-orange); }
.brand .sub { font: var(--type-caption); color: var(--text-secondary); }
.brand .clock { margin-top: 1px; }

.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mock-badge {
  font-size: var(--text-2xs); font-weight: 600; padding: 3px 9px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-orange); letter-spacing: 0.02em;
}
/* Backend connection state. Only visible while the Render instance is waking
   up or unreachable — an empty board must always say why it is empty. */
.backend-status {
  display: none;
  font-size: var(--text-2xs); font-weight: 600; padding: 3px 9px; border-radius: var(--radius-sm);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.backend-status.warn { background: var(--accent-soft); color: var(--accent-orange); }
.backend-status.err { background: var(--negative-soft); color: var(--negative); }
.clock { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* Theme toggle — khoi 2 nut, nut dang chon to mau accent */
.controls { display: flex; align-items: center; gap: 8px; }
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-inset); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.segmented button {
  border: 0; background: transparent; color: var(--text-secondary); font-family: inherit;
  font-size: var(--text-xs); font-weight: 600; padding: 6px 12px; border-radius: 6px;
  cursor: pointer; transition: background var(--duration-fast) var(--ease-standard);
}
.segmented button.on { background: var(--accent-orange); color: var(--text-on-accent); }

/* ============================================================
   SEGMENTED CONTROL — tab thi truong / tab tai khoan.
   Fey SegmentedControl: khong vien, nut dang chon dao mau (nen sang,
   chu toi o dark; nen den, chu trang o light).
   ============================================================ */
.market-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 0 0 14px; margin: 0;
}
.market-tabs button {
  border: none; background: transparent; color: var(--text-secondary); font-family: inherit;
  font-size: var(--text-xs); font-weight: 600; padding: 6px 12px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.market-tabs button:hover { color: var(--text-primary); background: var(--surface-hover); }
.market-tabs button.active { background: var(--surface-pill-active); color: var(--text-on-accent); }
.mtab-pane[hidden] { display: none; }

.market-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.market-head h2 { font: var(--type-label); color: var(--text-primary); margin: 0; }

/* ============================================================
   PANEL — the phang, vien hairline, bong nhe
   ============================================================ */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.panel-head h2 { font: var(--type-label); color: var(--text-primary); margin: 0; }
.panel-body { padding: 0; }

/* Button component: primary = nen dao mau, secondary/outline = the noi */
.watchlist-add button, .btn {
  background: var(--surface-pill-active); color: var(--text-on-accent);
  border: 1px solid var(--surface-pill-active); border-radius: var(--radius-sm);
  font-family: inherit; font-weight: 500; font-size: var(--text-sm); padding: 9px 16px;
  cursor: pointer; transition: opacity var(--duration-fast) var(--ease-standard);
}
.watchlist-add button:hover, .btn:hover { opacity: 0.85; }
.btn-outline {
  background: var(--surface-card-raised); border: 1px solid var(--border-default);
  color: var(--text-primary); font-family: inherit;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 500; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn-outline:hover { background: var(--surface-hover); }
.btn-outline.active {
  background: var(--accent-soft); border-color: var(--accent-orange); color: var(--accent-orange);
}

.up { color: var(--positive); }
.down { color: var(--negative); }
.flat { color: var(--text-secondary); }

/* DataTable component: khong ke doc, chi hairline giua cac hang */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--border-subtle); }
th { color: var(--text-tertiary); font-weight: 400; font-size: var(--text-xs); letter-spacing: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background var(--duration-fast) var(--ease-standard); }
tr:hover td { background: var(--surface-hover); }
.pill {
  padding: 3px 9px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600;
}
.pill.buy { background: var(--positive-soft); color: var(--positive); }
.pill.sell { background: var(--negative-soft); color: var(--negative); }
.del-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 13px; }
.del-btn:hover { color: var(--negative); }

.holdings-summary {
  display: flex; gap: 22px; padding: 0 0 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap;
}
.holdings-summary:empty { display: none; }
.holdings-summary .stat .label { font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary); }
.holdings-summary .stat .val {
  font-size: var(--text-xl); font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums;
}

.empty-state { padding: 24px; text-align: center; color: var(--text-tertiary); font-size: var(--text-xs); }

/* Chip bat/tat duong ve tren bieu do. Dung chung trang chung khoan va trang
   ngoai te — dat o base.css de them trang moi khong phai chep lai. */
/* Chi bao la chip vien: tat = vien mo + chu xam, bat = vien accent + nen accent mo.
   Checkbox that bi an; :has() lay trang thai :checked ra ngoai. */
.chk {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: var(--text-2xs); font-weight: 600;
  border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.chk input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.chk:has(input:checked) {
  border-color: var(--accent-orange); background: var(--accent-soft); color: var(--accent-orange);
}
.sw { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.app-footer {
  padding: 16px 20px 32px; color: var(--text-tertiary); font-size: var(--text-2xs);
  text-align: center; line-height: 1.6;
}
.app-footer code { color: var(--accent-orange); }

/* ============================================================
   THANH DIEU HUONG — dung chung 6 trang. Render boi assets/js/core/nav.js
   ============================================================ */
.app-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 20px 0;
}
.app-nav a {
  text-decoration: none; color: var(--text-secondary);
  font-size: var(--text-xs); font-weight: 600; padding: 6px 12px;
  border-radius: var(--radius-sm); white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.app-nav a:hover { color: var(--text-primary); background: var(--surface-hover); }
.app-nav a.active { background: var(--surface-pill-active); color: var(--text-on-accent); }
/* Trang chua lam: van hien de biet lo trinh, nhung khong bam duoc */
.app-nav a.soon { opacity: 0.45; pointer-events: none; }
.app-nav a.soon::after {
  content: "sắp có"; font-size: 9px; font-weight: 600; margin-left: 6px;
  padding: 1px 6px; border-radius: var(--radius-pill); border: 1px solid currentColor;
}
/* Links take the slack so the eye button sits hard right on desktop. */
.nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }

/* Nut con mat — bat/tat che so tien. Xem khoi CHE DO RIENG TU ben duoi. */
.eye-btn {
  border: 1px solid var(--border-default); background: var(--surface-card-raised); color: var(--text-secondary);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; flex: 0 0 auto;
  transition: background var(--duration-fast) var(--ease-standard);
}
.eye-btn:hover { color: var(--text-primary); background: var(--surface-hover); }
.eye-btn.on { background: var(--accent-orange); color: var(--text-on-accent); border-color: var(--accent-orange); }

/* ============================================================
   CHE DO RIENG TU
   Muc dich: mo website cho nguoi khac xem ma khong lo so tai san.

   CACH DUNG: boc MOI so tien tuyet doi va MOI so luong nam giu trong
   <span class="money">. Dung sua tung cho render — CSS lo phan che, nen
   them o hien thi moi chi can nho boc the, khong phai sua JS.

   VAN HIEN khi bat: gia thi truong, % lai/lo, ty trong phan bo, hinh dang
   bieu do. Do moi la phan dang khoe, va khong lo quy mo tai san.

   Gioi han da biet: be rong o van theo so cu, nen doan duoc so chu so.
   Chap nhan duoc cho muc dich khoe san pham; muon kin tuyet doi thi phai
   ghim width co dinh cho .money.
   ============================================================ */
:root.privacy .money {
  visibility: hidden; position: relative; user-select: none;
}
:root.privacy .money::before {
  content: "••••"; visibility: visible;
  position: absolute; left: 0; top: 0; right: 0;
  text-align: inherit; letter-spacing: 0.12em;
  color: var(--text-tertiary); font-weight: 700;
}
/* Bieu do tai san: bo nhan truc Y, nhin truc la doan ra ngay */
:root.privacy .hide-axis-labels { visibility: hidden; }

/* ============================================================
   TRANG TAI SAN (ngoai te, vang, coin, tiet kiem) — thanh phan dung chung.
   Bang gia, nhan nguon, form danh muc nhap tay, o sua tai cho.
   Dat o base.css vi 5 trang tai san dung y het nhau; chep lai vao tung file
   CSS trang la cach chac chan de chung roi ra khac nhau.
   ============================================================ */

/* Nhan nguon. Bat buoc co mat canh moi con so — hai nguon khac nhau cho hai
   con so khac nhau, va so dung dan nhan sai danh lua y het so bia. */
.src-badge {
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.src-badge.alt { color: var(--accent-orange); background: var(--accent-soft); border-color: transparent; }

.asset-table-wrap { overflow-x: auto; }
.asset-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.asset-table th {
  text-align: left; font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-secondary); padding: 8px 10px;
  border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.asset-table th.num, .asset-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.asset-table th.sortable { cursor: pointer; user-select: none; }
.asset-table th.sortable:hover { color: var(--text-primary); }
.asset-table th.sorted { color: var(--accent-orange); }
.asset-table th.sorted[data-dir="asc"]::after { content: " \25B2"; font-size: 9px; }
.asset-table th.sorted[data-dir="desc"]::after { content: " \25BC"; font-size: 9px; }
.asset-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.asset-table tbody tr:hover { background: var(--surface-hover); }
.asset-table tbody tr.sel { background: var(--accent-soft); }
.asset-table tbody tr.sel td.code { color: var(--accent-orange); }
.asset-table td.code { font-weight: 700; }
.asset-table td.muted { color: var(--text-secondary); }
.asset-table td.warn { color: var(--accent-orange); font-weight: 600; }

/* ---- Corporate-action (dividend) list — compact, fits a narrow column ---- */
.ev-item { padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.ev-item:first-child { padding-top: 2px; }
.ev-item:last-child { border-bottom: none; }
.ev-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ev-row1 .ev-date { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.ev-row2 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 3px; font-size: var(--text-2xs);
}
.ev-row2 .ev-detail { color: var(--text-secondary); min-width: 0; }
.ev-row2 .ev-rec { color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: var(--text-2xs); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.ev-badge.ev-cash { color: var(--up); background: var(--up-dim); }
.ev-badge.ev-stock { color: var(--accent-orange); background: var(--accent-soft); }
.ev-badge.ev-issue { color: var(--text-secondary); background: var(--surface-inset); border-color: var(--border-default); }
.ev-note { padding: 10px; font-size: var(--text-2xs); color: var(--text-tertiary); line-height: 1.5; }

/* ---- Danh muc nhap tay ---- */
.hold-form { display: grid; gap: 8px; margin: 12px 0 10px; }
.hold-input {
  background: var(--surface-inset); border: 1px solid var(--border-default);
  color: var(--text-primary); font-family: inherit; font-size: var(--text-xs);
  padding: 9px 12px; border-radius: var(--radius-sm); min-width: 0;
}
.hold-input:focus { outline: none; border-color: var(--accent-orange); }
.hold-error {
  font-size: var(--text-2xs); color: var(--negative);
  background: var(--negative-soft); padding: 7px 10px; border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.hold-error[hidden] { display: none; }
/* Canh bao don vi (CostGuard): khac mau loi that vi day KHONG chan thao tac —
   bam lai lan nua la app nhan so da nhap. Do = sai, cam = dang ngo. */
.hold-error.warn { color: var(--accent-orange); background: var(--accent-soft); }

.hold-summary { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.hold-summary:empty { display: none; }
.hold-summary .label { font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary); }
.hold-summary .val {
  font-size: var(--text-xl); font-weight: 700; margin-top: 2px;
  font-variant-numeric: tabular-nums; display: block;
}

.hold-table tbody tr { cursor: default; }
.hold-table tbody tr:hover { background: transparent; }
.hold-table .th-act { width: 96px; }
.hold-table td.act { text-align: right; white-space: nowrap; }
.hold-table .row-btn {
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  color: var(--text-tertiary); font-family: inherit; font-size: var(--text-2xs); font-weight: 600;
}
.hold-table .row-btn:hover { color: var(--text-primary); }
.hold-table .row-btn.danger:hover { color: var(--negative); }
.hold-table .row-btn.save { color: var(--accent-orange); }
/* O sua tai cho: cung chieu cao dong, khong lam bang nhay khi vao che do sua. */
.hold-table .edit-input {
  width: 100%; background: var(--surface-inset); border: 1px solid var(--accent-orange);
  color: var(--text-primary); font-family: inherit; font-size: var(--text-xs);
  padding: 4px 6px; border-radius: var(--radius-sm);
  text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  /* Bang danh muc cuon ngang tren dien thoai; bo cot gia tham chieu de nut
     Sua/Xoa nam trong tam nhin dau tien. Gia do van co o bang gia phia tren. */
  .hold-table .col-rate { display: none; }
}

/* Khung bieu do Lightweight Charts. Dung chung trang chung khoan / ngoai te /
   coin — de rieng o chung-khoan.css thi trang khac mat .trend-overlay
   position:absolute va lop canvas phu roi xuong duoi, day chart-stack cao
   gap doi (do 07/08/2026: 524px thay vi 260px). */
/* Chart nam thang tren mat the — khong khung, khong nen rieng */
.chart-stack { position: relative; height: 260px; margin-top: 4px; }
.chart-wrap { height: 260px; overflow: hidden; position: relative; }
/* Transparent to the mouse unless a drawing tool is armed — otherwise the
   overlay swallows every wheel/drag and the chart cannot be zoomed or panned.
   chartModule flips pointer-events to `auto` while trendline/ruler is active. */
.trend-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; cursor: default; }
.chart-wrap-rsi { height: 90px; margin-top: 6px; overflow: hidden; }

/* ============================================================
   TRANG TONG — layout mot cot (tam thoi, GD 0)
   ============================================================ */
.main-grid-single { padding: 16px 20px 40px; }
.build-note { font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); margin: 0 0 14px; }
.build-note a { color: var(--accent-orange); font-weight: 600; }
.demo-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; }
.demo-stats .label { font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary); }
.demo-stats .val {
  font-size: var(--text-2xl); font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums;
}

/* ============================================================
   MOBILE — phan dung chung
   ============================================================ */
@media (max-width: 640px) {
  .app-header { padding: 14px; }
  .header-right { width: 100%; justify-content: space-between; }
  .main-grid-single { padding-left: 14px; padding-right: 14px; }
  .panel { padding: 16px; }
  .panel-head { flex-wrap: wrap; gap: 8px 12px; }

  /* 6 muc xuong dong tren dien thoai an mat 3 hang man hinh va day nut con mat
     xuong goc. Cuon ngang 1 hang thay vi wrap; nut con mat ghim ben phai. */
  .app-nav { padding-left: 14px; padding-right: 14px; }
  /* Chi khoi link cuon ngang; nut con mat dung yen ben ngoai vung cuon,
     nen khong bao gio de len chu. */
  .nav-links {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; }

  /* Hang tab cuon ngang thay vi xuong dong — 5 tab wrap an mat 2 hang */
  .market-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .market-tabs::-webkit-scrollbar { display: none; }
  .market-tabs button { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .live-dot::before { animation: none; }
}

/* Dai canh bao "chua dang nhap" (GD 5). Cam chu khong do: du lieu van doc
   duoc, chi la doc tu cho khac voi noi user tuong. Do danh cho loi that. */
.login-warn {
  background: var(--accent-soft); color: var(--accent-orange);
  border: 1px solid var(--accent-orange);
  border-radius: var(--radius-sm);
  padding: 10px 14px; margin: 0 0 14px;
  font-size: var(--text-sm); line-height: 1.5;
}
.login-warn a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ============================================================
   TRANG TONG GIA SAN (GD 6)
   ============================================================ */
/* Dai canh bao 6.5. Do va cam KHAC BAN CHAT chu khong phai khac muc do:
   do  = kenh KHONG duoc cong vao tong, so duoi thieu han mot mang
   cam = co cong nhung thieu vai dong, so gan dung
   Dat TREN con so tong, khong thu gon duoc - xem tong.js. */
.nw-alert {
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px;
  font-size: var(--text-sm); line-height: 1.55;
}
.nw-alert-error {
  background: var(--negative-soft); color: var(--negative);
  border: 1px solid var(--negative);
}
.nw-alert-warn {
  background: var(--accent-soft); color: var(--accent-orange);
  border: 1px solid var(--accent-orange);
}
.nw-alert-detail { opacity: 0.85; font-size: var(--text-xs); }

.nw-totals { display: flex; gap: 32px; flex-wrap: wrap; margin: 16px 0 20px; }
.nw-total .label {
  font-size: var(--text-2xs); font-weight: 600; color: var(--text-secondary);
  margin-bottom: 4px;
}
.nw-total .val { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nw-total .val small { font-size: var(--text-sm); font-weight: 500; }

.nw-note { font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: 2px; }
.nw-status { font-size: var(--text-2xs); color: var(--text-tertiary); }
.nw-row-bad td { color: var(--negative); }
.nw-row-empty td { color: var(--text-tertiary); }

@media (max-width: 640px) {
  .nw-totals { gap: 18px; }
  .nw-total .val { font-size: 21px; }
}

/* ---- Phan bo tai san (GD 6.3 + 6.7) ----
   Mau phan loai gan CO DINH theo kenh, KHONG theo thu hang: kenh nao cung giu
   mot mau du gia tri doi. Doi mau theo thu hang thi moi lan gia bien dong la
   bang mau nhay lung tung, doc thanh vo nghia.
   Bo mau da chay qua validator (CVD + tuong phan) o ca hai nen: sang #ffffff,
   toi #121212. Doi mau thi PHAI chay lai, dung uoc luong bang mat. */
:root {
  --series-stock:   #2a78d6;
  --series-gold:    #eb6834;
  --series-fx:      #1baf7a;
  --series-crypto:  #eda100;
  --series-savings: #e87ba4;
}
:root[data-theme="dark"] {
  --series-stock:   #3987e5;
  --series-gold:    #d95926;
  --series-fx:      #199e70;
  --series-crypto:  #c98500;
  --series-savings: #d55181;
}

.nw-alloc { margin: 4px 0 20px; }
/* Thanh xep chong ngang thay cho bieu do tron: 5 kenh, ten dai, va so sanh ty
   trong tren mot truc thang de doc hon nhieu so voi so sanh goc quat. */
.nw-alloc-bar {
  display: flex; gap: 2px; /* 2px khe = mau nen, tach hai mang mau ke nhau */
  height: 14px; border-radius: 4px; overflow: hidden; margin-bottom: 12px;
  background: var(--surface-inset);
}
.nw-alloc-bar > span { display: block; min-width: 2px; }

.nw-alloc-legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
}
.nw-alloc-legend li {
  display: flex; align-items: baseline; gap: 7px;
  font-size: var(--text-xs); color: var(--text-secondary);
}
.nw-alloc-legend i {
  width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
  transform: translateY(1px);
}
/* Chu dung token chu, KHONG dung mau chuoi so lieu - o mau ben canh da mang
   danh tinh roi. */
.nw-alloc-legend b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.nw-alloc-legend .money { color: var(--text-tertiary); }

/* Cot dau bang tong mang ca nhan nguon lan gia dinh dinh gia - de dai tu nhien
   thi bang phinh ra va cot Lai/lo bi day khoi khung nhin. Ep xuong dong. */
#nwTableBody td:first-child { max-width: 340px; white-space: normal; }
#nwTableBody .nw-note { white-space: normal; line-height: 1.4; }

/* ---- Khoa ma 6 so cho che do rieng tu ----
   Hop nhap ma tu dung thay cho prompt(): prompt() bi chan tren nhieu trinh
   duyet dien thoai va khong dat duoc inputmode so. */
.pin-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pin-box {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 20px; width: 100%; max-width: 320px;
  box-shadow: var(--shadow-card);
}
.pin-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--text-primary);
  margin-bottom: 12px;
}
.pin-box .edit-input {
  width: 100%; text-align: center; letter-spacing: 6px; font-size: 20px;
}
.pin-err { color: var(--negative); font-size: var(--text-xs); min-height: 18px; margin-top: 6px; }
.pin-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* Khoi nguon du lieu cuoi trang tong (GD 6, doi cho tu duoi tung ten kenh). */
.nw-sources { margin-top: 10px; font-size: var(--text-xs); color: var(--text-secondary); }
.nw-sources summary { cursor: pointer; color: var(--text-tertiary); }
.nw-sources ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
.nw-src-note { color: var(--text-tertiary); }

/* Form dong tien (GD 6.4) - 5 o + 1 nut, nhieu hon moi form khac trong du an
   nen cho xuong dong som va de o ghi chu an het phan con lai. */
.cf-form { flex-wrap: wrap; gap: 8px; }
.cf-form .edit-input { min-width: 120px; }
.cf-form input[type="date"] { min-width: 155px; }
.cf-form #cfNote { flex: 1 1 200px; min-width: 200px; }

/* Canh bao "chua lay duoc gia ma X" o danh muc chung khoan. Cam chu khong do:
   du lieu khong sai, chi la thieu - va da noi ro thieu cai gi. */
.hold-warn {
  flex-basis: 100%; margin-top: 4px;
  color: var(--accent-orange); font-size: var(--text-xs); line-height: 1.5;
}

/* Momentum Score A-F o tab Tin hieu. Thang mau A xanh -> F do, doc nhanh. */
.mom-grade {
  display: inline-block; min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: var(--text-xs);
}
.mom-A { background: var(--positive-soft); color: var(--positive); }
.mom-B { background: var(--positive-soft); color: var(--positive); opacity: 0.8; }
.mom-C { background: var(--surface-inset); color: var(--text-secondary); }
.mom-D { background: var(--surface-inset); color: var(--text-secondary); }
.mom-E { background: var(--negative-soft); color: var(--negative); opacity: 0.8; }
.mom-F { background: var(--negative-soft); color: var(--negative); }

/* ---- Accordion "Tai khoan & cong cu du lieu" o cuoi trang tong ----
   Gom 4 panel nen (dang nhap, khoa ma, sao luu, chuyen du lieu) vao mot cho de
   trang tong chi con tap trung vao TAI SAN. Xem tong.js. */
.tools-panel { padding: 0; }
.tools-panel > summary {
  list-style: none; cursor: pointer;
  padding: 14px var(--space-6);
  font: var(--type-label); color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
}
.tools-panel > summary::-webkit-details-marker { display: none; }
.tools-panel > summary::before {
  content: "▸"; color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-standard);
}
.tools-panel[open] > summary::before { transform: rotate(90deg); }
.tools-panel > summary:hover { color: var(--text-primary); }
.tools-body {
  padding: 0 var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: 14px;
}
/* Panel con trong accordion: lam phang de khong long hop-trong-hop. Bo nen/vien/
   bong, chi giu duong ke mong ngan cach. */
.tools-body .panel {
  background: none; border: none; box-shadow: none;
  padding: 0; border-top: 1px solid var(--border-subtle);
  padding-top: 14px; border-radius: 0;
}
.tools-body > div:first-child .panel { border-top: none; padding-top: 0; }