:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f3f2ee;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,.10);
  --accent: #2a78d6; --accent-soft: #e4effc;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#6250d6; --s8:#e34948;
  --o1:#86b6ef; --o2:#5598e7; --o3:#2a78d6; --o4:#1c5cab; --o5:#104281;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b; --info:#898781;
  --good-text:#006300;
  --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:#0d0d0d; --surface:#1a1a19; --surface-2:#232322;
    --ink:#f0efec; --ink-2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --axis:#383835; --border: rgba(255,255,255,.10);
    --accent:#3987e5; --accent-soft:#1c2b40;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --o1:#9ec5f4; --o2:#6da7ec; --o3:#3987e5; --o4:#256abf; --o5:#184f95;
    --good-text:#0ca30c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#232322;
  --ink:#f0efec; --ink-2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --border: rgba(255,255,255,.10);
  --accent:#3987e5; --accent-soft:#1c2b40;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --o1:#9ec5f4; --o2:#6da7ec; --o3:#3987e5; --o4:#256abf; --o5:#184f95;
  --good-text:#0ca30c;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---- layout ---- */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100dvh; }
.side { background: var(--surface); border-right: 1px solid var(--border); padding: 18px 14px; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 6px; }
.brand { font-weight: 700; font-size: 15px; margin-bottom: 4px; letter-spacing: .2px; }
.brand small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.nav button { display: flex; width: 100%; gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; color: var(--ink-2); }
.nav button:hover { background: var(--surface-2); }
.nav button.active { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.nav .n { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.side .foot { margin-top: auto; font-size: 12px; color: var(--muted); display: grid; gap: 6px; }
.live { display: inline-flex; align-items: center; gap: 6px; }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live.on .dot { background: var(--good); box-shadow: 0 0 0 3px rgba(12,163,12,.18); }
.live.pulse .dot { animation: pulse .8s ease-out; }
@keyframes pulse { 0% { transform: scale(1);} 40% { transform: scale(1.8);} 100% { transform: scale(1);} }
.main { padding: clamp(14px, 1.6vw, 28px) clamp(14px, 2vw, 36px) calc(48px + env(safe-area-inset-bottom)); width: 100%; min-width: 0; }
.main.loading { opacity: .6; }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--ink-2); margin: 0 0 18px; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
h3 { font-size: 13px; margin: 0 0 8px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .4px; }
.ghost { background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; color: var(--ink-2); font-size: 12px; }
.ghost:hover { background: var(--surface-2); }
.ghost.active { background: var(--accent-soft); color: var(--ink); border-color: transparent; }

/* ---- filter row ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.filters select, .filters input { background: var(--surface-2); border: 1px solid transparent; border-radius: 7px; padding: 6px 9px; min-width: 130px; }
.filters input[type=search] { min-width: 240px; flex: 1; }
.filters label { font-size: 12px; color: var(--muted); }
.filters .spacer { flex: 1; }

/* ---- tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.tile .lbl { font-size: 12px; color: var(--muted); }
.tile .val { font-size: 28px; font-weight: 600; line-height: 1.15; margin: 4px 0 2px; }
.tile .hint { font-size: 12px; color: var(--ink-2); }
.tile .hint .up { color: var(--good-text); }
.tile.crit .val { color: var(--critical); }

/* ---- cards & charts ---- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); margin-bottom: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 12px; box-shadow: var(--shadow); min-width: 0; }
.card .head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.card .head .desc { color: var(--muted); font-size: 12px; }
.card .head .tools { margin-left: auto; display: flex; gap: 6px; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; } .span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.chart-wrap { position: relative; height: 260px; }
.chart-wrap.tall { height: 320px; }
.chart-wrap canvas { position: absolute; inset: 0; }
.chart-table { display: none; max-height: 320px; overflow: auto; }
.card.table-mode .chart-wrap { display: none; } .card.table-mode .chart-table { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: -1px; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.row:hover { background: var(--surface-2); cursor: pointer; }
.table-scroll { overflow: auto; max-height: 70vh; }
.path { color: var(--muted); font-size: 12px; word-break: break-all; }
.title { font-weight: 500; }
.bar { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; min-width: 60px; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--s1); }

/* ---- chips ---- */
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); margin: 1px 2px 1px 0; white-space: nowrap; }
.chip.t { border-color: transparent; color: var(--ink); background: color-mix(in oklab, var(--c) 18%, var(--surface)); }
.chip.t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 5px; }
.sev { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; }
.sev::before { content: "●"; font-size: 10px; }
.sev.critical { color: var(--critical);} .sev.serious { color: var(--serious);} .sev.warning { color: color-mix(in oklab, var(--warning) 70%, var(--ink)); } .sev.info { color: var(--muted);}
.status-active { color: var(--good-text); } .status-draft { color: var(--ink-2);} .status-deprecated { color: var(--muted); text-decoration: line-through; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.empty { color: var(--muted); padding: 18px; text-align: center; }

/* ---- feed ---- */
.feed { display: grid; gap: 0; }
.feed .day { font-size: 12px; color: var(--muted); margin: 14px 0 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.feed .item { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.feed .item:hover { background: var(--surface-2); }
.feed .time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 2px; }
.feed .msg { font-weight: 500; }
.feed .meta { color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.feed .meta b { color: var(--ink); font-weight: 500; }
.feed .files { color: var(--muted); font-size: 12px; margin-top: 3px; }
.feed .item.new { animation: flash 2s ease-out; }
@keyframes flash { from { background: var(--accent-soft);} to { background: transparent;} }
.events { font-size: 12px; max-height: 300px; overflow: auto; }
.events div { padding: 5px 0; border-bottom: 1px solid var(--grid); color: var(--ink-2); }
.events time { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* ---- capability cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.cap:hover { border-color: var(--accent); }
.cap .top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.cap .name { font-weight: 600; }
.cap .desc { color: var(--ink-2); font-size: 12px; margin: 4px 0; max-height: 54px; overflow: hidden; }
.cap .meta { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.ladder { display: flex; gap: 2px; margin-top: 8px; }
.ladder i { flex: 1; height: 6px; border-radius: 3px; background: var(--grid); }
.ladder i.on { background: var(--o3); }

/* ---- drawer ---- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 95vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .2s; z-index: 50; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer .dh { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; }
.drawer .dh h2 { font-size: 16px; }
.drawer .dh .close { margin-left: auto; }
.drawer .db { padding: 16px 20px; overflow: auto; }
.fm { font-size: 12px; margin-bottom: 14px; } .fm td { padding: 3px 8px; }
.md { line-height: 1.6; } .md h1 { font-size: 20px;} .md h2 { font-size: 17px; margin-top: 20px;} .md h3 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink);} .md pre { background: var(--surface-2); padding: 10px; border-radius: 8px; overflow: auto; font-size: 12px;} .md code { background: var(--surface-2); padding: 1px 4px; border-radius: 4px; font-size: 12px;} .md table td, .md table th { border: 1px solid var(--grid); } .md img { max-width: 100%; } .md blockquote { border-left: 3px solid var(--grid); margin: 0; padding: 2px 12px; color: var(--ink-2); }
.hist { font-size: 12px; margin-top: 18px; }
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.25); display: none; z-index: 40; }
.backdrop.show { display: block; }
.toast { position: fixed; bottom: 18px; right: 18px; background: var(--ink); color: var(--page); padding: 10px 14px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .2s; z-index: 60; max-width: 420px; }
.toast.show { opacity: 1; }
.notice { background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; color: var(--ink-2); }
.notice.warn { background: color-mix(in oklab, var(--warning) 18%, var(--surface)); }
.matrix td .mini { display: flex; align-items: center; gap: 8px; } .matrix td .mini .bar { width: 70px; }
.kpi { display: inline-block; min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }

/* ===== Nâng cấp: hero, animation, heatmap, radar, ticker ===== */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.anim { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .anim, .hm i, .ticker .pill, .gauge circle { animation: none !important; transition: none !important; } }

.hero { display: grid; grid-template-columns: 300px 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.hero > .card { padding: 16px 18px; }
.gauge-wrap { display: flex; gap: 16px; align-items: center; }
.gauge { width: 132px; height: 132px; flex: none; }
.gauge circle { fill: none; stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.gauge .track { stroke: var(--grid); }
.gauge .arc { stroke: var(--o3); transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1); }
.gauge text { fill: var(--ink); font-weight: 600; font-size: 30px; text-anchor: middle; }
.gauge .unit { fill: var(--muted); font-size: 11px; font-weight: 400; }
.gauge-side .grade { font-weight: 600; font-size: 15px; }
.gauge-side .how { color: var(--muted); font-size: 12px; margin-top: 4px; }
.comps { display: grid; gap: 7px; margin-top: 12px; }
.comp { display: grid; grid-template-columns: 78px 1fr 36px; gap: 8px; align-items: center; font-size: 12px; }
.comp .lbl { color: var(--ink-2); }
.comp .bar { height: 7px; }
.comp .bar i { width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.comp .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.insights { display: grid; gap: 8px; }
.ins { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.ins .ic { font-size: 14px; line-height: 1.2; text-align: center; }
.ins .ic.good { color: var(--good-text);} .ins .ic.bad { color: var(--critical);} .ins .ic.warn { color: color-mix(in oklab, var(--warning) 70%, var(--ink)); } .ins .ic.neutral { color: var(--accent); }
.ins b { font-weight: 600; } .ins .act { color: var(--muted); font-size: 12px; margin-top: 2px; }

.tile { position: relative; overflow: hidden; }
.tile .delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); }
.tile .delta.up { color: var(--good-text); } .tile .delta.down { color: var(--critical); } .tile .delta.flat { color: var(--muted); }
.tile .spark { position: absolute; right: 12px; bottom: 10px; width: 92px; height: 30px; opacity: .9; }
.tile .spark polyline { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tile .spark circle { fill: var(--s1); }
.tile .spark path { fill: var(--s1); opacity: .10; }

.ticker { display: flex; gap: 8px; overflow: hidden; align-items: center; margin: -8px 0 16px; min-height: 30px; }
.ticker .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; flex: none; }
.ticker .pill { flex: none; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; animation: slideIn .4s both; display: inline-flex; gap: 6px; align-items: center; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ticker .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.ticker .pill time { color: var(--muted); }

.hm { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.hm i { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--surface-2); animation: pop .35s both; transition: transform .12s; }
.hm i:hover { transform: scale(1.35); outline: 2px solid var(--ink); outline-offset: 1px; }
.hm i[data-l="1"] { background: var(--h1);} .hm i[data-l="2"] { background: var(--h2);} .hm i[data-l="3"] { background: var(--h3);} .hm i[data-l="4"] { background: var(--h4);} .hm i[data-l="5"] { background: var(--h5);}
:root { --h1:#cde2fb; --h2:#9ec5f4; --h3:#5598e7; --h4:#256abf; --h5:#104281; }
:root[data-theme="dark"] { --h1:#184f95; --h2:#1c5cab; --h3:#2a78d6; --h4:#5598e7; --h5:#9ec5f4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --h1:#184f95; --h2:#1c5cab; --h3:#2a78d6; --h4:#5598e7; --h5:#9ec5f4; } }
.hm-foot { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 8px; }
.hm-foot i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; background: var(--surface-2); }
.hm-months { display: flex; font-size: 11px; color: var(--muted); margin-bottom: 4px; gap: 0; }
.hm-months span { flex: none; }

.radars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.radar { text-align: center; }
.radar .rw { position: relative; height: 170px; } .radar canvas { position: absolute; inset: 0; }
.radar .rn { font-size: 12px; font-weight: 600; margin-top: 2px; } .radar .rs { font-size: 20px; font-weight: 600; } .radar .rs small { font-size: 11px; color: var(--muted); font-weight: 400; }
.share { display: grid; gap: 6px; }
.share .r { display: grid; grid-template-columns: 110px 1fr 56px; gap: 8px; align-items: center; font-size: 12px; }
.share .r .bar i { width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.share .r .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); }
.badge.cao { color: var(--critical);} .badge.vừa { color: color-mix(in oklab, var(--warning) 70%, var(--ink)); } .badge.thấp { color: var(--good-text); }

/* ===== Responsive: full screen → tablet → phone ===== */
.table-scroll { -webkit-overflow-scrolling: touch; }
.ticker { overflow-x: auto; scrollbar-width: none; } .ticker::-webkit-scrollbar { display: none; }
.hm { scrollbar-width: thin; }
.side .ctl { display: flex; gap: 6px; flex-wrap: wrap; }

/* Màn hình rất rộng: tận dụng chiều ngang */
@media (min-width: 1700px) {
  .app { grid-template-columns: 240px minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(7, 1fr); }
  .chart-wrap { height: 300px; } .chart-wrap.tall { height: 360px; }
  .hero { grid-template-columns: 340px 1.2fr 1fr; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
/* Laptop nhỏ / tablet ngang */
@media (max-width: 1280px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero > .card:first-child { grid-column: span 2; }
  .hero .gauge-wrap { justify-content: flex-start; }
  .span-8, .span-7 { grid-column: span 12; } .span-5, .span-4 { grid-column: span 12; }
  .radars { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; }
}
/* Tablet dọc & điện thoại: thanh bên -> thanh trên cố định */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; z-index: 30; height: auto; padding: 10px 12px 0; border-right: 0; border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand ctl" "nav nav"; gap: 6px 10px; align-items: center; box-shadow: var(--shadow); }
  .brand { grid-area: brand; margin: 0; font-size: 14px; } .brand small { display: none; }
  .side .foot { grid-area: ctl; margin: 0; display: flex; align-items: center; gap: 8px; }
  .side .foot #scan-info, .side .foot #gitea-info { display: none; }
  .side .foot .live #live-text { display: none; }
  .nav { grid-area: nav; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 8px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button { flex: none; padding: 9px 12px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; font-size: 13px; white-space: nowrap; }
  .nav button.active { background: transparent; border-bottom-color: var(--accent); }
  .nav .n { margin-left: 6px; }
  .main { padding: 14px 14px calc(40px + env(safe-area-inset-bottom)); }
  h1 { font-size: 18px; } .sub { font-size: 13px; margin-bottom: 14px; }
  .hero { grid-template-columns: 1fr; } .hero > .card:first-child { grid-column: auto; }
  .span-12, .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .chart-wrap { height: 240px; } .chart-wrap.tall { height: 280px; }
  .filters { padding: 8px 10px; gap: 6px; }
  .filters label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 150px; }
  .filters select { width: 100%; min-width: 0; } .filters input[type=search] { flex: 1 1 100%; min-width: 0; }
  .filters .spacer { display: none; }
  .table-scroll table { min-width: 720px; }
  .drawer { width: 100vw; }
  .drawer .db { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
  .toast { left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: none; }
  .radars { grid-template-columns: repeat(5, 150px); overflow-x: auto; padding-bottom: 6px; }
  .radar .rw { height: 150px; }
}
/* Điện thoại */
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile { padding: 11px 12px; } .tile .val { font-size: 22px; } .tile .hint { font-size: 11px; }
  .tile .spark { width: 70px; height: 24px; right: 10px; bottom: 8px; }
  .tile .delta { font-size: 11px; padding: 0 6px; }
  .card { padding: 12px 12px 10px; } .card .head { flex-wrap: wrap; gap: 4px 8px; } .card .head .desc { flex: 1 1 100%; }
  .card .head .tools { margin-left: 0; }
  .grid { gap: 10px; }
  .gauge-wrap { gap: 12px; } .gauge { width: 110px; height: 110px; }
  .comp { grid-template-columns: 70px 1fr 32px; }
  .share .r { grid-template-columns: 90px 1fr 56px; }
  .feed .item { grid-template-columns: 46px 1fr; gap: 8px; }
  .feed .files { display: none; }
  .cards { grid-template-columns: 1fr; }
  .hm { grid-template-rows: repeat(7, 11px); gap: 2px; } .hm i { width: 11px; height: 11px; }
  table { font-size: 12px; } th, td { padding: 6px 8px; }
  .nav button { padding: 9px 10px; font-size: 12px; }
}
/* Thiết bị cảm ứng: vùng chạm ≥ 40px, tắt hiệu ứng hover phóng to */
@media (pointer: coarse) {
  .ghost, .filters select, .filters input, .nav button { min-height: 40px; }
  .nav button { padding-top: 10px; padding-bottom: 10px; }
  .hm i:hover { transform: none; outline: none; }
  tr.row td { padding-top: 10px; padding-bottom: 10px; }
  .drawer .dh .close { min-width: 64px; }
}