/* AI Line Data Board - dark industrial monitoring. Mau chi dung de bao trang thai. */
:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #12151a;
  --panel-2: #181c22;
  --panel-3: #1f242b;
  --hair: #262c34;
  --hair-2: #333b46;
  --text: #e9ecef;
  --text-2: #aab2bd;
  --muted: #7c8591;
  --accent: #3987e5;
  --accent-2: #5b9cf0;
  /* trang thai (co dinh, khong dung cho series) */
  --ok: #0ca30c;
  --warn: #fab219;
  --crit: #d03b3b;
  --off: #5c6470;
  --ok-tint: rgba(12, 163, 12, .10);
  --warn-tint: rgba(250, 178, 25, .13);
  --crit-tint: rgba(208, 59, 59, .20);
  --off-tint: rgba(92, 100, 112, .10);
  --up: #f07171;     /* xu huong xau di */
  --down: #3fcf5a;   /* xu huong tot len */
  --radius: 6px;
  --gap: 12px;
  --tile-min: 8.4rem;
  --mono: Consolas, "Cascadia Mono", "SFMono-Regular", monospace;
  font-size: 14px;
}
@media (min-width: 2200px) { :root { font-size: 16px; --gap: 14px; } }
@media (min-width: 3000px) { :root { font-size: 19px; --gap: 18px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
a { color: var(--accent-2); }
h2 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------------------------------------------------------------- header */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px; background: #0f1216; border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 5px; flex: none;
  background: linear-gradient(135deg, #1c5cab 0 50%, #2a78d6 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-title { font-weight: 750; letter-spacing: .12em; font-size: 1.05rem; white-space: nowrap; }
.brand-sub { color: var(--text-2); font-size: .86rem; display: flex; gap: 14px; white-space: nowrap; }
.brand-sub span:empty { display: none; }
.brand-sub #clock { font-variant-numeric: tabular-nums; color: var(--text); }
.top-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.conn {
  display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 750;
  letter-spacing: .08em; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--hair-2);
  white-space: nowrap;
}
.conn i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.conn.is-live i { background: var(--ok); box-shadow: 0 0 0 0 rgba(12,163,12,.6); animation: live 2.4s infinite; }
.conn.is-live { color: #bfeec4; }
.conn.is-paused i { background: var(--warn); }
.conn.is-lost { border-color: var(--crit); color: #ffd1d1; background: rgba(208,59,59,.15); }
.conn.is-lost i { background: var(--crit); }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(12,163,12,.55); } 70% { box-shadow: 0 0 0 7px rgba(12,163,12,0); } 100% { box-shadow: 0 0 0 0 rgba(12,163,12,0); } }
.updated { color: var(--text-2); font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav { display: flex; gap: 4px; }
.nav a {
  color: var(--text-2); text-decoration: none; font-size: .86rem; padding: 5px 9px; border-radius: 4px;
  border: 1px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--text); border-color: var(--hair-2); background: var(--panel-2); }

.btn {
  background: var(--panel-2); border: 1px solid var(--hair-2); border-radius: 4px; padding: 5px 11px;
  font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--panel-3); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.small { padding: 3px 8px; font-size: .8rem; }
.btn.icon { font-size: 1.4rem; line-height: 1; padding: 2px 10px; }
.btn[aria-pressed="true"] { border-color: var(--warn); color: #ffe2a3; }

.sys-wrap { position: relative; }
.sys {
  display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--hair-2);
  border-radius: 4px; padding: 4px 10px; font-size: .8rem; font-weight: 750; letter-spacing: .08em; cursor: pointer;
}
.sys i { width: 9px; height: 9px; border-radius: 2px; background: var(--muted); }
.sys.ok i { background: var(--ok); }
.sys.degraded i { background: var(--warn); }
.sys.degraded { border-color: rgba(250,178,25,.6); }
.sys.down i { background: var(--crit); }
.sys.stale { opacity: .45; }
.sys.down { border-color: var(--crit); }
.sys-pop {
  position: absolute; right: 0; top: calc(100% + 6px); width: 340px; z-index: 40;
  background: var(--panel-2); border: 1px solid var(--hair-2); border-radius: var(--radius);
  padding: 10px 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.sys-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: start; padding: 6px 0;
  border-bottom: 1px solid var(--hair); }
.sys-row:last-child { border-bottom: none; }
.sys-row i { width: 8px; height: 8px; border-radius: 2px; margin-top: 6px; background: var(--muted); }
.sys-row.ok i { background: var(--ok); } .sys-row.warn i { background: var(--warn); } .sys-row.bad i { background: var(--crit); }
.sys-row b { font-size: .86rem; } .sys-row small { display: block; color: var(--text-2); font-size: .8rem; word-break: break-word; }
.sys-row em { font-style: normal; font-size: .76rem; font-weight: 750; letter-spacing: .06em; color: var(--text-2); }

.banner {
  margin: 10px 16px 0; padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--crit);
  background: rgba(208,59,59,.12); color: #ffd9d9; font-size: .92rem;
}
.banner.warn { border-color: rgba(250,178,25,.7); background: rgba(250,178,25,.10); color: #ffe7b0; }

/* ---------------------------------------------------------------- filters */
.filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px 0;
}
.seg { display: inline-flex; border: 1px solid var(--hair-2); border-radius: 5px; overflow: hidden; background: var(--panel); }
.seg button {
  background: transparent; border: 0; border-right: 1px solid var(--hair-2); padding: 6px 13px; cursor: pointer;
  font-size: .9rem; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--panel-2); color: var(--text); }
.seg button[aria-checked="true"] { background: #1d3a5f; color: #fff; }
.seg.small button { padding: 3px 9px; font-size: .8rem; }
.search {
  display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--hair-2);
  border-radius: 5px; padding: 0 8px; height: 32px;
}
.search:focus-within { border-color: var(--accent-2); }
.search-ico { color: var(--muted); font-size: .9rem; }
.search input {
  background: transparent; border: 0; outline: 0; color: var(--text); width: 14rem; font-size: .92rem;
}
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hair-2); background: var(--panel-2);
  border-radius: 14px; padding: 3px 6px 3px 10px; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; }
.chip span.x { color: var(--muted); padding: 0 3px; }
.chip:hover span.x { color: var(--text); }
.scope-note { color: var(--muted); font-size: .84rem; margin-left: auto; }

/* ---------------------------------------------------------------- KPI */
.kpis {
  display: grid; gap: var(--gap); padding: 10px 16px 0;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
}
.kpi {
  position: relative; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 9px 12px 10px; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px;
}
button.kpi { cursor: pointer; }
button.kpi:hover { border-color: var(--hair-2); background: var(--panel-2); }
.kpi.is-selected { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; background: transparent; }
.kpi.ok::before { background: var(--ok); } .kpi.warn::before { background: var(--warn); }
.kpi.crit::before { background: var(--crit); } .kpi.off::before { background: var(--off); }
.kpi.crit.has { background: linear-gradient(var(--crit-tint), var(--crit-tint)), var(--panel); border-color: rgba(208,59,59,.6); }
.kpi.warn.has { background: linear-gradient(var(--warn-tint), var(--warn-tint)), var(--panel); }
.kpi-label {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px;
}
.kpi-label .g { font-size: .8rem; }
.kpi.ok .g { color: var(--ok); } .kpi.warn .g { color: var(--warn); } .kpi.crit .g { color: var(--crit); } .kpi.off .g { color: var(--muted); }
.kpi-value { font-size: 2.3rem; font-weight: 650; line-height: 1.1; white-space: nowrap; letter-spacing: -.01em; }
.kpi-value.na { color: var(--muted); }
.kpi-value.mid { font-size: 1.9rem; }
.kpi-sub { font-size: .8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub .up { color: var(--up); font-weight: 700; } .kpi-sub .down { color: var(--down); font-weight: 700; }

/* ---------------------------------------------------------------- layout */
.layout {
  display: grid; gap: var(--gap); padding: var(--gap) 16px 16px;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 24vw, 520px);
  align-items: start;
}
.col-main, .col-rail { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.col-rail { position: sticky; top: 64px; max-height: calc(100vh - 76px); }
.panel { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius); min-width: 0; }
.panel.grow { flex: 1 1 auto; min-height: 260px; display: flex; flex-direction: column; }
.panel-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--hair);
  flex-wrap: wrap; min-height: 42px;
}
.panel-head h2 { font-size: .86rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.panel-meta { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-head .seg, .panel-head > .btn { margin-left: auto; }
.legend { display: inline-flex; gap: 10px; margin-left: auto; font-size: .78rem; color: var(--text-2); }
.legend + .seg { margin-left: 0; }
.lg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lg i { width: 9px; height: 9px; border-radius: 2px; }
.lg.ok i { background: var(--ok); } .lg.warn i { background: var(--warn); } .lg.crit i { background: var(--crit); } .lg.off i { background: var(--off); }

/* ---------------------------------------------------------------- line tiles */
.grid {
  display: grid; gap: 6px; padding: 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
}
.tile {
  position: relative; display: grid; grid-template-rows: auto auto auto; gap: 1px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--hair); border-left: 4px solid var(--ok);
  border-radius: 4px; padding: 5px 8px 7px 8px; cursor: pointer; min-width: 0; overflow: hidden;
  transition: border-color .2s, background-color .4s;
}
.tile:hover { border-color: var(--hair-2); background: var(--panel-3); }
.tile.s-ok { border-left-color: rgba(12,163,12,.85); }
.tile.s-warn { border-left-color: var(--warn); background: linear-gradient(var(--warn-tint), var(--warn-tint)), var(--panel-2); border-color: rgba(250,178,25,.45); }
.tile.s-crit { border-left-color: var(--crit); background: linear-gradient(var(--crit-tint), var(--crit-tint)), var(--panel-2); border-color: rgba(208,59,59,.65); }
.tile.s-off { border-left-color: var(--off); background: var(--panel); }
.tile.s-off .t-id, .tile.s-off .t-health { color: var(--text-2); }
.tile.changed { animation: changed 1.6s ease-out; }
@keyframes changed { 0% { box-shadow: 0 0 0 2px var(--accent-2); } 100% { box-shadow: 0 0 0 0 transparent; } }
.t-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; white-space: nowrap; min-width: 0; }
.t-id { font-weight: 750; font-size: 1.02rem; letter-spacing: .02em; }
.t-st { font-size: .7rem; font-weight: 800; letter-spacing: .08em; padding: 1px 5px; border-radius: 3px; }
.s-ok .t-st { color: var(--text-2); }
.s-ok .t-st b { color: var(--ok); }
.s-warn .t-st { background: var(--warn); color: #1a1300; }
.s-crit .t-st { background: var(--crit); color: #fff; }
.s-off .t-st { color: var(--muted); border: 1px solid var(--hair-2); }
.s-crit .t-st b { display: inline-block; animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.t-health { font-size: 1.45rem; font-weight: 650; line-height: 1.1; }
.t-health small { font-size: .62rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; margin-left: 2px; }
.t-ng { font-size: .86rem; color: var(--text-2); }
.t-ng b { color: var(--text); font-size: .98rem; font-weight: 700; }
.t-rate { font-size: .82rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.t-trend { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.t-trend.up, .t-trend.new { color: var(--up); } .t-trend.down { color: var(--down); }
.t-meter { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--ok); opacity: .7; }
.s-warn .t-meter { background: var(--warn); opacity: 1; } .s-crit .t-meter { background: var(--crit); opacity: 1; }
.s-off .t-meter { display: none; }

/* Mat do o line: board.js chon muc lon nhat ma TAT CA line vua khung (nhieu line -> o nho dan).
   full = 3 dong; compact = bo dong ty le/xu huong; mini = ma line + health; micro = chi ma line
   (mau nen = trang thai, chi tiet o tooltip). */
.grid.d-compact .tile { padding: 4px 7px 5px; }
.grid.d-compact .t-r3 { display: none; }
.grid.d-compact .t-health { font-size: 1.2rem; }
.grid.d-mini .tile { padding: 2px 6px 3px; gap: 0; border-left-width: 3px; align-content: center; }
.grid.d-mini .t-r3, .grid.d-mini .t-st-txt, .grid.d-mini .t-ng { display: none; }
.grid.d-mini .t-st { padding: 0 3px; font-size: .66rem; }
.grid.d-mini .t-id { font-size: .86rem; }
.grid.d-mini .t-health { font-size: .98rem; }
.grid.d-micro .tile { padding: 0 2px; border-left-width: 3px; align-content: center; }
.grid.d-micro .t-r2, .grid.d-micro .t-r3, .grid.d-micro .t-st, .grid.d-micro .t-meter, .grid.d-micro .t-flag { display: none; }
.grid.d-micro .t-r1 { justify-content: center; }
.grid.d-micro .t-id { font-size: .74rem; font-weight: 750; letter-spacing: 0; }
.grid.d-micro .tile.s-warn { background: var(--warn); border-color: var(--warn); }
.grid.d-micro .tile.s-warn .t-id { color: #1a1300; }
.grid.d-micro .tile.s-crit { background: var(--crit); border-color: var(--crit); }
.grid.d-micro .tile.s-crit .t-id { color: #fff; }
.grid.d-micro .tile.s-off { opacity: .6; }
.grid.d-nano .tile { border-left-width: 2px; border-radius: 2px; }
.grid.d-nano .t-id { font-size: .64rem; }
.t-flag { color: var(--warn); font-size: .7rem; margin-left: 3px; }

/* ---------------------------------------------------------------- chart */
.chart { padding: 6px 10px 6px; position: relative; min-height: 120px; }
.chart svg { display: block; overflow: visible; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .ttl { fill: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.chart .grid-l { stroke: #232930; stroke-width: 1; shape-rendering: crispEdges; }
.chart .base-l { stroke: #39414c; stroke-width: 1; shape-rendering: crispEdges; }
.chart .col { fill: var(--accent); }
.chart .col.partial { opacity: .45; }
.chart .rate-line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .rate-area { fill: var(--accent-2); opacity: .1; }
.chart .thr { stroke-width: 1; shape-rendering: crispEdges; }
.chart .thr.warn { stroke: var(--warn); } .chart .thr.crit { stroke: var(--crit); }
.chart .thr-t { font-size: 10px; font-weight: 700; letter-spacing: .05em; fill: var(--text-2); }
.chart .mk-crit { fill: var(--crit); stroke: var(--panel); stroke-width: 2; }
.chart .mk-warn { fill: var(--warn); stroke: var(--panel); stroke-width: 2; }
.chart .end-dot { fill: var(--accent-2); stroke: var(--panel); stroke-width: 2; }
.chart .end-t { fill: var(--text); font-size: 12px; font-weight: 700; }
.chart .xhair { stroke: var(--text-2); stroke-width: 1; shape-rendering: crispEdges; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .now-l { stroke: var(--accent-2); stroke-width: 1; opacity: .35; shape-rendering: crispEdges; }
.table-view { max-height: 300px; overflow: auto; margin: 0 10px 10px; border: 1px solid var(--hair); border-radius: 4px; }
table.data { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.data th, table.data td { padding: 5px 9px; text-align: right; border-bottom: 1px solid var(--hair); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- heatmap */
.heat-body { padding: 10px 10px 4px; overflow-x: auto; }
.heat { display: grid; gap: 2px; width: max-content; }
.heat .hl { font-size: .78rem; color: var(--text-2); white-space: nowrap; padding-right: 8px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.heat .hc { font-size: .66rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }
.heat .hc:hover { color: var(--text); }
.heat .cell {
  border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .62rem; line-height: 1; background: #1b2027;
}
.heat .cell:hover { outline: 2px solid var(--text); outline-offset: -1px; }
.heat .cell.c-none { background: transparent; box-shadow: inset 0 0 0 1px #20262d; }
.heat .cell.c-low { background: #222830; }
.heat .cell.c-ok { background: rgba(12,163,12,.30); }
.heat .cell.c-ok0 { background: rgba(12,163,12,.16); }
.heat .cell.c-warn { background: var(--warn); color: #1a1300; }
.heat .cell.c-crit { background: var(--crit); color: #fff; }
.heat-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 4px 12px 10px; font-size: .78rem; color: var(--text-2); }
.heat-legend span { display: inline-flex; align-items: center; gap: 5px; }
.heat-legend i { width: 14px; height: 12px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-style: normal; }

/* ---------------------------------------------------------------- top list */
.top-list { padding: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 42vh; overflow-y: auto; }
.top-row {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 3px;
  align-items: center; text-align: left; background: var(--panel-2); border: 1px solid var(--hair);
  border-radius: 4px; padding: 6px 9px; cursor: pointer;
}
.top-row:hover { border-color: var(--hair-2); background: var(--panel-3); }
.top-row .tl { font-weight: 750; font-size: 1.02rem; }
.top-row .th { font-size: .8rem; color: var(--text-2); text-align: right; white-space: nowrap; }
.top-row .th b { color: var(--text); font-size: .95rem; }
.top-row .tb { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.bar-track { height: 8px; background: #20262d; border-radius: 0 4px 4px 0; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--ok); min-width: 2px; }
.bar-fill.warn { background: var(--warn); } .bar-fill.crit { background: var(--crit); }
.top-row .tv { font-size: .82rem; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.top-row .tv b { color: var(--text); }
.top-row .tv .up, .top-row .tv .new { color: var(--up); font-weight: 700; } .top-row .tv .down { color: var(--down); font-weight: 700; }
.top-foot { padding: 4px 6px 8px; font-size: .82rem; color: var(--text-2); }
.linkbtn { background: none; border: 0; color: var(--accent-2); cursor: pointer; padding: 0; font-weight: 600; }
.linkbtn:hover { text-decoration: underline; }

/* status pill dung chung */
.pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .07em;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap; line-height: 1.2;
}
.pill.ok { color: var(--text-2); box-shadow: inset 0 0 0 1px var(--hair-2); } .pill.ok b { color: var(--ok); }
.pill.warn { background: var(--warn); color: #1a1300; }
.pill.crit { background: var(--crit); color: #fff; }
.pill.off { color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair-2); }
.pill.cfg { background: #3b3470; color: #e2ddff; }

/* ---------------------------------------------------------------- feed */
.feed { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 4px 6px 8px; }
.ev {
  display: grid; grid-template-columns: auto auto 1fr; column-gap: 8px; row-gap: 2px; align-items: center;
  padding: 6px 8px; border-bottom: 1px solid var(--hair); text-decoration: none; color: inherit; border-radius: 3px;
}
.ev:hover { background: var(--panel-2); }
.ev .et { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: .84rem; white-space: nowrap; }
.ev .em { display: flex; gap: 6px; align-items: center; min-width: 0; justify-self: end; }
.ev .el { font-weight: 750; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); font-size: .92rem; }
.ev .el:hover { color: var(--accent-2); text-decoration: underline; }
.cam { font-size: .68rem; font-weight: 750; letter-spacing: .06em; color: var(--text-2); border: 1px solid var(--hair-2); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
.ev .ed { grid-column: 1 / -1; font-size: .86rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .ed small { color: var(--muted); }
.ev.is-new { animation: newev 3s ease-out; }
@keyframes newev { 0% { background: rgba(57,135,229,.28); } 100% { background: transparent; } }

/* ---------------------------------------------------------------- empty / loading */
.empty {
  color: var(--text-2); text-align: center; padding: 26px 16px; font-size: .92rem;
  border: 1px dashed var(--hair-2); border-radius: 4px; margin: 10px;
}
.empty small { display: block; color: var(--muted); margin-top: 4px; font-size: .82rem; }
.empty.err { border-color: rgba(208,59,59,.6); color: #ffd1d1; }
.sk { background: linear-gradient(90deg, #171b21 0%, #1e232a 40%, #171b21 80%); background-size: 200% 100%; animation: sk 1.4s infinite linear; border-radius: 4px; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-tile { height: 4.6rem; }
.sk-line { height: 12px; margin: 8px 10px; }
.sk-block { height: 180px; margin: 10px; }
body.is-refetching .col-main, body.is-refetching .col-rail, body.is-refetching .kpis { opacity: .55; transition: opacity .15s; }

/* ---------------------------------------------------------------- tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 340px;
  background: #0f1317; border: 1px solid var(--hair-2); border-radius: 5px; padding: 8px 10px;
  font-size: .84rem; box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.tip .tt { font-weight: 750; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.tip .tr { display: flex; justify-content: space-between; gap: 14px; color: var(--text-2); }
.tip .tr b { color: var(--text); font-variant-numeric: tabular-nums; }
.tip .tn { color: var(--text-2); margin-top: 4px; font-size: .8rem; }
.tip .key { display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 6px; }

/* ---------------------------------------------------------------- drawer */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(980px, 94vw); z-index: 50;
  background: var(--bg); border-left: 1px solid var(--hair-2); display: flex; flex-direction: column;
  box-shadow: -18px 0 40px rgba(0,0,0,.5); animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.dr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--hair); background: #0f1216; }
.dr-title-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dr-title { font-size: 1.5rem; font-weight: 800; letter-spacing: .03em; }
.dr-title-wrap .pill { font-size: .8rem; padding: 3px 8px; }
.dr-health { font-size: .92rem; color: var(--text-2); }
.dr-health b { font-size: 1.3rem; color: var(--text); }
.dr-actions { display: flex; align-items: center; gap: 8px; }
.btn.ask { border-color: #2c5a92; background: #14263d; color: #d8e8ff; }
.btn.ask:hover { background: #1b3352; }
.btn.ask[aria-pressed="true"] { border-color: var(--accent-2); background: #1d3a5f; color: #fff; }
.dr-main { flex: 1 1 auto; min-height: 0; display: flex; }
.dr-body { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 12px 14px 24px; display: flex; flex-direction: column; gap: var(--gap); }
/* Cot chat Hub (iframe trang chat ?embed=1 cua Hub) */
.drawer.with-chat { width: min(1640px, 98vw); }
.dr-chat { flex: 0 0 clamp(380px, 34vw, 580px); display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--hair-2); background: #0f1216; }
.chat-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.chat-title { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; letter-spacing: .1em; margin-right: auto; white-space: nowrap; }
.chat-title i { width: 9px; height: 9px; border-radius: 2px; background: var(--accent-2); }
.chat-title span { letter-spacing: .02em; color: var(--text-2); font-weight: 650; }
.chat-state { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.chat-state.ok { color: #9fd9a9; }
.chat-hint { margin: 8px 10px 0; padding: 8px 10px; border: 1px solid rgba(250,178,25,.6); border-radius: 4px;
  background: rgba(250,178,25,.08); color: #ffe7b0; font-size: .84rem; }
.chat-hint code { font-family: var(--mono); color: #fff; }
.dr-chat iframe { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--bg); }
.focusbar .btn.ask { margin-left: auto; }
.dr-reason { font-size: .95rem; color: var(--text); }
.dr-reason small { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.stat { background: var(--panel); border: 1px solid var(--hair); border-radius: 4px; padding: 7px 10px; min-width: 0; }
.stat .sl { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.stat .sv { font-size: 1.25rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .ss { font-size: .8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .ss .up, .stat .ss .new { color: var(--up); font-weight: 700; } .stat .ss .down { color: var(--down); font-weight: 700; }
.hparts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82rem; color: var(--text-2); }
.hparts .hp { border: 1px solid var(--hair-2); border-radius: 3px; padding: 2px 7px; }
.hparts .hp b { color: var(--up); margin-right: 4px; }
.cams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.camcard { background: var(--panel); border: 1px solid var(--hair); border-left: 4px solid var(--hair-2); border-radius: 4px; padding: 8px 10px; text-align: left; cursor: pointer; min-width: 0; }
.camcard:hover { border-color: var(--hair-2); }
.camcard.is-focus { box-shadow: inset 0 0 0 1px var(--accent-2); border-color: var(--accent-2); }
.camcard.c-ok { border-left-color: var(--ok); } .camcard.c-warn { border-left-color: var(--warn); } .camcard.c-crit { border-left-color: var(--crit); }
.camcard h3 { margin: 0 0 4px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; }
.camcard .cv { font-size: 1.15rem; font-weight: 650; }
.camcard .cv small { font-size: .8rem; color: var(--text-2); font-weight: 500; }
.defs { margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 3px 8px; align-items: center; font-size: .8rem; }
.defs .dn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.defs .dc { text-align: right; font-variant-numeric: tabular-nums; }
.defs .bar-track { height: 6px; }
.defs .bar-fill { background: var(--accent); }
.focusbar { display: flex; gap: 10px; align-items: center; font-size: .86rem; color: var(--text-2); background: #13233a; border: 1px solid #23476f; border-radius: 4px; padding: 6px 10px; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.subpanel { background: var(--panel); border: 1px solid var(--hair); border-radius: 4px; min-width: 0; }
.subpanel > h3 { margin: 0; padding: 7px 10px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--hair); color: var(--text-2); display: flex; justify-content: space-between; gap: 8px; }
.subpanel .scroll { max-height: 340px; overflow: auto; }
.subpanel td.mono { font-family: var(--mono); font-size: .8rem; }
.subpanel td.wrap { white-space: normal; text-align: left; color: var(--text-2); }
.agentline { font-size: .84rem; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.agentline b { color: var(--text); font-weight: 600; }
.agentline a.linkbtn { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.agentline .pcst.pc-ok { color: var(--ok); } .agentline .pcst.pc-warning { color: var(--warn); }
.agentline .pcst.pc-critical { color: var(--crit); } .agentline .pcst.pc-stale,
.agentline .pcst.pc-offline, .agentline .pcst.pc-unknown { color: var(--muted); }

/* ---------------------------------------------------------------- responsive */
/* ---------------------------------------------------------------- vua mot man hinh (body.fit)
   Ca trang cao dung bang man hinh: trend va heatmap giu cho co dinh, khung line lay phan con lai
   va tu giam mat do o (board.js). Man hinh nho hon nguong -> kieu cuon trang ben duoi. */
@media (min-width: 1281px) and (min-height: 680px) {
  :root { --trend-h: clamp(190px, 27vh, 440px); --heat-time-h: clamp(165px, 21vh, 360px); }
  body.fit { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  body.fit .topbar { position: static; }
  body.fit .filters { padding-top: 8px; }
  body.fit .kpis { padding-top: 8px; }
  body.fit .kpi { padding: 7px 12px 8px; }
  body.fit .kpi-value { font-size: 2rem; }
  body.fit .layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; padding-bottom: 10px; }
  body.fit .col-main, body.fit .col-rail { min-height: 0; height: 100%; }
  body.fit .col-rail { position: static; max-height: none; }
  body.fit .panel-head { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
  body.fit #p-lines { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  body.fit #p-lines .grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
  body.fit #p-trend { flex: 0 0 var(--trend-h); min-height: 0; display: flex; flex-direction: column; }
  body.fit #p-trend .chart { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  body.fit #p-trend.show-table .chart { display: none; }
  body.fit #p-trend .table-view { flex: 1 1 auto; min-height: 0; max-height: none; }
  body.fit #p-heat { flex: 0 0 auto; }
  body.fit #p-heat.mode-time { flex-basis: var(--heat-time-h); min-height: 0; display: flex; flex-direction: column; }
  body.fit #p-heat.mode-time .heat-body { flex: 1 1 auto; min-height: 0; }
  body.fit #p-top { flex: 0 1 auto; max-height: 46%; min-height: 0; display: flex; flex-direction: column; }
  body.fit .top-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  body.fit .panel.grow { min-height: 0; }
}
/* Man hinh thap (1366x768, 1600x900): KPI va tieu de panel gon lai de nhuong cho bieu do */
@media (min-width: 1281px) and (min-height: 680px) and (max-height: 900px) {
  body.fit .topbar { padding-top: 6px; padding-bottom: 6px; }
  body.fit .kpi { padding: 5px 10px 6px; }
  body.fit .kpi-value { font-size: 1.6rem; }
  body.fit .kpi-sub { font-size: .74rem; }
  body.fit .panel-head { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
  body.fit .heat-body { padding-top: 6px; }
}
.btn[aria-pressed="true"].fit-btn { border-color: var(--accent-2); color: #d8e8ff; }

@media (max-width: 1500px) {
  .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
  .kpi-value { font-size: 2rem; }
  .legend { display: none; }
}
@media (max-width: 1280px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .col-rail { position: static; max-height: none; }
  .feed { max-height: 520px; }
  /* 10 cot: 5 o trang thai x2, hang 2: ty le x4 + canh bao x3 + cap nhat x3 */
  .kpis { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .kpis .kpi { grid-column: span 2; }
  .kpis .kpi.wide { grid-column: span 3; }
  .kpis .kpi.wide:nth-child(6) { grid-column: span 4; }
  .nav { display: none; }
}
@media (max-width: 1100px) {
  .drawer.with-chat .dr-main { flex-direction: column; }
  .drawer.with-chat .dr-body { flex: 1 1 45%; }
  .drawer.with-chat .dr-chat { flex: 1 1 55%; border-left: 0; border-top: 1px solid var(--hair-2); }
}
@media (max-width: 760px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .top-right { justify-content: flex-start; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi, .kpis .kpi.wide { grid-column: span 1; }
  .kpis .kpi:first-child, .kpis .kpi.wide:nth-child(6) { grid-column: span 2; }
  .kpi-value { font-size: 1.7rem; }
  .search input { width: 9rem; }
  .scope-note { margin-left: 0; }
  .cams, .cols2 { grid-template-columns: 1fr; }
  :root { --tile-min: 7.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}