:root {
  --ground:#FBFCFD; --surface:#FFFFFF; --surface-2:#F3F6F8; --line:#DFE6EB;
  --ink:#131A22; --ink-2:#4E5C68; --ink-3:#7C8B98;
  --accent:#0E6E6B; --accent-soft:#E3F1F0;
  --up:#12894F; --down:#D3403A; --hold:#B4820E;
  --band-1:#D7F0E2; --band-2:#E9F7EE; --band-3:#FCF4DE; --band-4:#FBE4E1; --band-5:#F6CFCB;
  --shadow:0 1px 2px rgba(19,26,34,.05), 0 8px 24px -16px rgba(19,26,34,.25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0C1013; --surface:#141A1F; --surface-2:#1B232A; --line:#28323A;
    --ink:#E6EDF2; --ink-2:#A3B1BC; --ink-3:#75838F;
    --accent:#2FB3A8; --accent-soft:#123330;
    --up:#3FBE7C; --down:#E9695F; --hold:#D9A32B;
    --band-1:#12352A; --band-2:#0F2A24; --band-3:#2E2A16; --band-4:#33201E; --band-5:#40231F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --ground:#0C1013; --surface:#141A1F; --surface-2:#1B232A; --line:#28323A;
  --ink:#E6EDF2; --ink-2:#A3B1BC; --ink-3:#75838F;
  --accent:#2FB3A8; --accent-soft:#123330;
  --up:#3FBE7C; --down:#E9695F; --hold:#D9A32B;
  --band-1:#12352A; --band-2:#0F2A24; --band-3:#2E2A16; --band-4:#33201E; --band-5:#40231F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1180px; margin:0 auto; padding:32px 20px 72px; display:flex; flex-direction:column; gap:28px; }

h1,h2,h3,.ticker { font-family:Archivo,"Segoe UI",system-ui,sans-serif; text-wrap:balance; }
h1 { font-size:30px; font-weight:700; letter-spacing:-.02em; margin:0; }
h2 { font-size:17px; font-weight:650; letter-spacing:-.01em; margin:0; }
.mono, .num { font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }

/* ---- header ---- */
/* Ghim vao .wrap: `header {}` tran lan se ro sang thanh tren cua web app -
   dung 20px padding-bottom o do lam ho mot mang trong duoi dai NAV. */
.wrap > header { display:flex; flex-direction:column; gap:6px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.wrap > header .meta { color:var(--ink-2); font-size:13.5px; }
.summary { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.stat {
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; min-width:118px; box-shadow:var(--shadow);
}
.stat .k { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.stat .v { font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:20px; font-weight:600; margin-top:2px; }

/* ---- section ---- */
section { display:flex; flex-direction:column; gap:14px; }
.section-head { display:flex; align-items:baseline; gap:12px; }
.section-head .hint { color:var(--ink-3); font-size:13px; }

/* ---- card ---- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden;
}
.card-head { display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ticker { font-size:23px; font-weight:700; letter-spacing:-.01em; }
.price { font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:19px; font-weight:600; }
.chg { font-family:"IBM Plex Mono",monospace; font-size:13.5px; font-weight:600; }
.chg.up { color:var(--up); } .chg.dn { color:var(--down); } .chg.flat { color:var(--ink-3); }
.sub { color:var(--ink-3); font-size:13px; }
.spacer { flex:1 1 auto; }

.pill {
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.pill-buy    { background:color-mix(in srgb, var(--up) 14%, transparent);   color:var(--up);   border-color:color-mix(in srgb, var(--up) 34%, transparent); }
.pill-watch  { background:color-mix(in srgb, var(--hold) 16%, transparent); color:var(--hold); border-color:color-mix(in srgb, var(--hold) 36%, transparent); }
.pill-avoid  { background:color-mix(in srgb, var(--down) 12%, transparent); color:var(--down); border-color:color-mix(in srgb, var(--down) 32%, transparent); }
.pill-ghost  { background:var(--surface-2); color:var(--ink-2); border-color:var(--line); }
.pill-good   { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }

/* ---- metrics ---- */
/* Duong ke ve bang vien cua tung o. Neu dung meo "container mau xam + khe 1px"
   thi o trong o cuoi hang se lo ra thanh mang xam khi so o khong chia het cot. */
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); background:var(--surface); }
.metric { padding:12px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric .k { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.metric .v { font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:17px; font-weight:600; margin-top:3px; }
.metric .v.up { color:var(--up); } .metric .v.dn { color:var(--down); }

/* ---- charts ---- */
.charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); background:var(--surface); }
.chart-box { padding:14px 16px 8px; min-width:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
/* Nen can be ngang hon hai bieu do kia; nhet chung mot cot thi khong doc
   duoc gi. Cho no trai het hang khi luoi co tu hai cot tro len. */
@media (min-width:640px) { .chart-wide { grid-column:1 / -1; } }
.chart-box h3 { font-size:13px; font-weight:650; margin:0 0 2px; }
.chart-box .cap { font-size:12px; color:var(--ink-3); margin:0 0 6px; }
.chart { width:100%; height:auto; display:block; overflow:visible; }
.empty { color:var(--ink-3); font-size:13px; padding:36px 0; text-align:center; }

.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:11.5px; color:var(--ink-2); margin-top:2px; }
.legend i { display:inline-block; width:14px; height:2.5px; border-radius:2px; vertical-align:middle; margin-right:5px; }

svg text { font-family:"IBM Plex Mono",monospace; }
.axis { font-size:9.5px; fill:var(--ink-3); }
.band-label { font-size:9.5px; fill:var(--ink-2); text-anchor:end; font-family:"Source Sans 3",sans-serif; }
.grid { stroke:var(--line); stroke-width:1; }
.axis-zero { stroke:var(--ink-3); stroke-width:1; }
.line-value { fill:none; stroke:var(--accent); stroke-width:1.9; stroke-linejoin:round; }
.line-market { fill:none; stroke:var(--ink-3); stroke-width:1.3; stroke-dasharray:1 3; opacity:.75; }
.line-mean { stroke:var(--hold); stroke-width:1.4; }
.mean-label { font-size:9.5px; fill:var(--hold); }
.dot-value { fill:var(--accent); stroke:var(--surface); stroke-width:1.5; }
.value-label { font-size:11px; fill:var(--accent); font-weight:600; }
.line-rev { fill:none; stroke:var(--hold); stroke-width:1.8; }
.line-rev-dot { fill:var(--hold); }
.line-pro { fill:none; stroke:var(--accent); stroke-width:1.8; }
.line-pro-dot { fill:var(--accent); }
.cd-up { fill:var(--up); } .cd-up-wick { stroke:var(--up); stroke-width:1; }
.cd-dn { fill:var(--down); } .cd-dn-wick { stroke:var(--down); stroke-width:1; }
.buy-zone { fill:color-mix(in srgb, var(--up) 12%, transparent); }
.lvl-target { stroke:var(--up); stroke-width:1.2; stroke-dasharray:4 3; }
.lvl-stop { stroke:var(--down); stroke-width:1.2; stroke-dasharray:4 3; }
.lvl-now { stroke:var(--ink-2); stroke-width:1; }
.lvl-label { font-size:10px; }
.lvl-target-t { fill:var(--up); } .lvl-stop-t { fill:var(--down); } .lvl-now-t { fill:var(--ink-2); }
/* Chip nen sau nhan muc gia: khong co no thi chu de len rau nen, doc rat met */
.lvl-chip { fill:var(--surface); stroke:var(--line); stroke-width:1; rx:4; }
.area-value { fill:url(#gValue); }
.tick { font-size:9px; fill:var(--ink-3); }
.tick-line { stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; }
.end-label { font-size:10.5px; font-weight:600; }
.end-rev { fill:var(--hold); } .end-pro { fill:var(--accent); }
.line-rev, .line-pro { stroke-linecap:round; stroke-linejoin:round; stroke-width:2.1; }

.ring-bg { fill:none; stroke:var(--line); stroke-width:5; }
.ring-fg { fill:none; stroke-width:5; stroke-linecap:round; }
.ring-good .ring-fg { stroke:var(--up); } .ring-mid .ring-fg { stroke:var(--hold); } .ring-low .ring-fg { stroke:var(--down); }
.ring-text { text-anchor:middle; font-size:16px; font-weight:600; fill:var(--ink); }
.ring { width:54px; height:54px; flex:0 0 auto; }

/* ---- notes + timeline ---- */
.foot { padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.notes { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.notes li { font-size:12.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:4px 9px; }

.timeline { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding-bottom:2px; }
.tl-step { display:flex; flex-direction:column; gap:3px; min-width:96px; position:relative; padding-right:8px; }
.tl-step::before { content:""; position:absolute; top:5px; left:5px; right:0; height:1px; background:var(--line); }
.tl-step:last-child::before { display:none; }
.tl-dot { width:10px; height:10px; border-radius:50%; position:relative; z-index:1; }
.tl-name { font-size:12px; font-weight:600; }
.tl-date { font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; }

/* ---- table ---- */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { padding:10px 14px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line); }
th:first-child, td:first-child { text-align:left; }
th { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; background:var(--surface-2); }
tbody tr:last-child td { border-bottom:none; }
td.num { font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
td .up { color:var(--up); } td .dn { color:var(--down); }

/* ---- bang toan ro ---- */
.controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chip {
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  background:var(--surface); color:var(--ink-2); border:1px solid var(--line);
  border-radius:999px; padding:5px 13px;
}
.chip[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.chip:focus-visible, th[role="button"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#search {
  font:inherit; font-size:13px; padding:6px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); min-width:150px;
}
th[role="button"] { cursor:pointer; user-select:none; }
th[role="button"]:hover { color:var(--ink); }
th .arrow { opacity:.35; margin-left:3px; }
th[aria-sort] .arrow { opacity:1; color:var(--accent); }
tbody tr.hidden { display:none; }
tbody tr:hover td { background:var(--surface-2); }
.count { font-size:12.5px; color:var(--ink-3); }

.bar { height:8px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line); overflow:hidden; }
.bar span { display:block; height:100%; background:var(--accent); }
tfoot td { border-top:1px solid var(--line); background:var(--surface-2); }

.disclaimer { font-size:12.5px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:16px; max-width:70ch; }
@media (max-width:640px) { .wrap { padding:20px 14px 56px; } h1 { font-size:24px; } }
/* Nen co ty le 3.5:1 nen ep vua be ngang dien thoai thi chi con ~88px cao -
   khong doc noi. Ghim chieu cao roi cho cuon ngang; nhin 130 nen bang cach vuot
   van hon la nhin mot vach mo. */
@media (max-width:720px) {
  .chart-wide { overflow-x:auto; overscroll-behavior-x:contain; }
  .chart-wide .chart { height:200px; width:auto; max-width:none; }
}
@media (prefers-reduced-motion:no-preference) { .card { transition:border-color .15s ease; } }