:root{
  --bg:#0b0f17;
  --card:#121a27;
  --muted:#9fb0c3;
  --text:#e8eef7;
  --line:#22314a;
  --ok:#3ddc97;
  --warn:#ffcc00;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
.bar{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:rgba(11,15,23,0.9);
  backdrop-filter: blur(10px);
}
.title{font-weight:800; font-size:18px;}
.pill{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}
.container{max-width:1100px; margin:0 auto; padding:16px;}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .grid2{grid-template-columns:1fr}
}
.row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.row.right{justify-content:flex-end}
.h{font-weight:700}
.sub{color:var(--muted); font-size:12px; margin-top:4px;}
.note{color:var(--muted); font-size:12px; margin-top:10px;}
button, select{
  background:#0e1522;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}
button{cursor:pointer}
button:hover{border-color:#2e4366}
.datebox{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.datechip{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px 14px 10px; /* chừa chỗ cho vạch màu */
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
  position:relative;
}
.datechip::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:4px;
  border-radius:999px;
  background: var(--day-color, #90a4ae);
  opacity:0.95;
}

.datechip input{transform: scale(1.1);}
.toggle{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px;}
.chartFooter{color:var(--muted); font-size:12px; margin-top:8px; text-align:center;}
.list{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
.item{
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
}
.item .meta{color:var(--muted); font-size:12px; margin-top:4px;}
.item a{color:var(--ok); text-decoration:none}
.item a:hover{text-decoration:underline}
code{background:#0e1522; border:1px solid var(--line); padding:2px 6px; border-radius:8px;}


/* Day color indicator under each date chip */
.datechip{position:relative; padding-bottom:12px;}
.datechip::after{content:""; position:absolute; left:10px; right:10px; bottom:4px; height:4px; border-radius:4px; background: var(--day-color, transparent); opacity:0.95;}

/* Abnormal markers table */
.abnTableWrap{margin-top:10px; overflow:auto; border:1px solid var(--line); border-radius:12px;}
.abnTable{width:100%; border-collapse:separate; border-spacing:0; min-width:520px;}
.abnTable thead th{
  position:sticky;
  top:0;
  background:#0e1522;
  z-index:1;
  font-weight:700;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.abnTable th, .abnTable td{padding:10px 12px; font-size:13px;}
.abnTable tbody td{border-bottom:1px solid var(--line);}
.abnTable tbody tr:hover{background:rgba(255,255,255,0.03);}
.abnTable .colIdx{width:72px; text-align:right; color:var(--muted);}
.abnTable .colPick{width:140px; text-align:center;}
.abnTable input[type=checkbox]{transform:scale(1.15);}
.abnFile{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.abnMeta{color:var(--muted); font-size:12px; margin-top:4px;}


/* ===== v6: Time window controls ===== */
.controls .controls-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.controls .controls-title{font-weight:700;font-size:16px}
.controls .controls-sub{opacity:.85;font-size:12px;margin-top:4px}
.window-note{margin-top:10px;font-size:12px;opacity:.9}

.controls-right{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.timePick{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.timePickLabel{font-size:12px;opacity:.9}
.timePickRow{display:flex;align-items:center;gap:8px}
.timePick select{
  background:#0e1727;
  color:#e8eef7;
  border:1px solid #233551;
  border-radius:10px;
  padding:8px 10px;
  font-size:14px;
  outline:none;
  min-width:64px;
}
.timePick select:focus{border-color:#3b82f6}
.timeSep{opacity:.8}
.timeHint{font-size:12px;opacity:.75}

.liveToggle{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.9;padding:8px 10px;border:1px solid #233551;border-radius:999px;background:#0e1727}
.liveToggle input{width:16px;height:16px}

/* Button alignment */
#applyTimeBtn{white-space:nowrap}


/* ===== v8 UI: tối ưu biểu đồ + tự cập nhật không cần Live ===== */
.container{ max-width: 1280px; }

.datebox{
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.datebox::-webkit-scrollbar{ height: 8px; }
.datebox::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.08); border-radius: 999px; }
@media (max-width: 900px){
  .datebox{ flex-wrap: wrap; overflow-x: visible; }
}

.chartWrap{
  height: 440px;
  position: relative;
}
@media (max-width: 900px){
  .chartWrap{ height: 360px; }
}
.chartWrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}