/* Phần chi tiết của version 3 — mọi bộ chọn giới hạn trong .v2-detail. Biến màu chung ở sheet.css (:root). */
.v2-detail {
  color-scheme: light;
  --bg: var(--page-bg);
  --surface: #fff;
  --border: #d5e2f1;
  --text: var(--ink);
  --text-2: #3f5268;
  --muted: #687b90;
  --accent: var(--blue-700);
  --series-1: var(--blue-500);
  --series-2: #eb6834;
  --grid: #e3ecf6;
  --good: #1e9e4a;
  --warning: #e0a100;
  --serious: #ec835a;
  --critical: #d03b3b;
  --critical-bg: #fde4e4;
  --lv-1: #fff3b0;
  --lv-2: #ffd08a;
  --lv-3: #ff9c9c;
  --st-normal: var(--blue-500);
  --st-near: #f2b705;
  --st-over: #d93025;
  --st-na: #b8c4d2;
}
.v2-detail, .v2-detail * { box-sizing: border-box; }
.v2-detail { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
.v2-detail .wrap { max-width: 1280px; margin: 0 auto; padding: 20px 16px 8px; }
.v2-detail .muted { color: var(--muted); }
.v2-detail .small { font-size: 13px; }
.v2-detail a { color: var(--accent); }
.v2-detail section { margin-block: 28px; }
.v2-detail .section-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.v2-detail .banner { margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: var(--critical-bg); border: 1px solid var(--critical); }

/* chú thích màu */
.v2-detail .status-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.v2-detail .status-key li { display: inline-flex; align-items: center; gap: 7px; }
.v2-detail .status-key i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); }
.v2-detail .status-key .k-normal { background: var(--st-normal); }
.v2-detail .status-key .k-near { background: var(--st-near); }
.v2-detail .status-key .k-over { background: var(--st-over); }
.v2-detail .status-key .lv-0 { background: #fff; }
.v2-detail .status-key .lv-1 { background: var(--lv-1); }
.v2-detail .status-key .lv-2 { background: var(--lv-2); }
.v2-detail .status-key .lv-3 { background: var(--lv-3); }
.v2-detail .level-key { margin: 10px 0 0; }

/* ---------- thẻ hồ chứa ---------- */
.v2-detail .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.v2-detail .card {
  --st: var(--st-normal);
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px 18px;
  background: #fff; border: 1px solid #e1e9f3; border-left: 4px solid var(--st); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .06), 0 4px 14px rgba(16, 42, 84, .07);
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.v2-detail .card.st-near { --st: var(--st-near); }
.v2-detail .card.st-over { --st: var(--st-over); }
.v2-detail .card.st-na { --st: var(--st-na); }
.v2-detail .card:hover { box-shadow: 0 2px 4px rgba(16, 42, 84, .08), 0 10px 24px rgba(16, 42, 84, .12); transform: translateY(-1px); }
.v2-detail .card:focus-visible { outline: 3px solid #9cc8f5; outline-offset: 2px; }
.v2-detail .card.selected { box-shadow: 0 0 0 2px var(--blue-500), 0 6px 18px rgba(16, 42, 84, .12); }
.v2-detail .card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.v2-detail .card-head h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--blue-900); }
.v2-detail .card .when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.v2-detail .card-body { display: flex; gap: 16px; align-items: stretch; }

/* cột mực nước: nước dâng từ đáy theo % (MNC = 0%, MNDBT = 100%), mặt nước có sóng */
.v2-detail .gauge {
  position: relative; flex: none; width: 56px; min-height: 132px; overflow: hidden; /* cao bằng cột chữ bên phải (card-body stretch) */
  border: 2px solid #c7d8ec; border-radius: 10px 10px 12px 12px;
  background:
    repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), #dbe6f3 calc(25% - 1px) 25%),
    linear-gradient(#f7fbff, #edf4fc);
}
.v2-detail .water {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, #4fa8f0, #1565c0);
  transition: height .6s ease;
}
.v2-detail .st-over .water { background: linear-gradient(to bottom, #f07a6f, #c62828); }
.v2-detail .wave {
  position: absolute; left: 0; bottom: 100%; width: 200%; height: 7px; margin-bottom: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5 Q10 0 20 3.5 T40 3.5 V7 H0z' fill='%234fa8f0'/%3E%3C/svg%3E") repeat-x 0 0 / 28px 7px;
  animation: v3-wave 2.6s linear infinite;
}
.v2-detail .wave.w2 { opacity: .5; height: 9px; animation-duration: 4.2s; animation-direction: reverse; }
.v2-detail .st-over .wave { filter: hue-rotate(160deg) saturate(1.4); }
@keyframes v3-wave { from { transform: translateX(0); } to { transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { .v2-detail .wave { animation: none; } }
.v2-detail .gauge-pct {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  font-size: 12px; font-weight: 700; color: var(--blue-900); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

.v2-detail .card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.v2-detail .htl { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--blue-900); font-variant-numeric: tabular-nums; }
.v2-detail .htl small { font-size: 14px; font-weight: 500; color: var(--text-2); }
.v2-detail .delta { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.v2-detail .status-chip {
  align-self: flex-start; margin-top: 2px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: #0b4da2; background: #e3effc;
}
.v2-detail .st-near .status-chip { color: #7a5600; background: #fff1c2; }
.v2-detail .st-over .status-chip { color: #a3150c; background: #fde0dd; }
.v2-detail .st-na .status-chip { color: var(--muted); background: #eef2f6; }
.v2-detail .levels { margin: 6px 0 0; display: grid; gap: 2px; font-size: 13px; }
.v2-detail .levels div { display: flex; justify-content: space-between; gap: 8px; }
.v2-detail .levels dt { color: var(--muted); }
.v2-detail .levels dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.v2-detail .gap { font-size: 12.5px; color: var(--text-2); }
.v2-detail .st-near .gap { color: #8a6100; font-weight: 600; }
.v2-detail .st-over .gap { color: #b3261e; font-weight: 600; }

.v2-detail .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 13px; padding-top: 8px; border-top: 1px dashed #dfe8f2; }
.v2-detail .kv div { display: flex; justify-content: space-between; gap: 6px; }
.v2-detail .kv span:first-child { color: var(--muted); }
.v2-detail .kv span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.v2-detail .spill { font-size: 12px; color: var(--text-2); white-space: pre-line; border-left: 3px solid #d5e2f1; padding: 2px 0 2px 8px; }
.v2-detail .badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-2); }
.v2-detail .badge.stale { border-color: var(--warning); }

/* ---------- bảng ---------- */
.v2-detail .table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid #d5e2f1; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 42, 84, .05);
}
.v2-detail table.data { border-collapse: collapse; width: 100%; min-width: 680px; }
.v2-detail table.data th, .v2-detail table.data td { padding: 10px 14px; text-align: left; white-space: nowrap; }
.v2-detail table.data th { font-size: 13px; font-weight: 600; color: #fff; background: var(--blue-800); }
.v2-detail table.data td { border-bottom: 1px solid #e6eef7; }
.v2-detail table.data tbody tr:nth-child(even) td { background: #f3f8fd; }
.v2-detail table.data tr:last-child td { border-bottom: 0; }
.v2-detail table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.v2-detail table.data td.level { font-size: 15px; }
.v2-detail table.data td.level.lv-0 { background: #fff; }
.v2-detail table.data tbody tr td.level.lv-1 { background: var(--lv-1); }
.v2-detail table.data tbody tr td.level.lv-2 { background: var(--lv-2); }
.v2-detail table.data tbody tr td.level.lv-3 { background: var(--lv-3); }
.v2-detail .status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.v2-detail .status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--muted)); }
.v2-detail .status.s0 { --dot: var(--good); font-weight: 400; }
.v2-detail .status.s1 { --dot: var(--warning); }
.v2-detail .status.s2 { --dot: var(--serious); }
.v2-detail .status.s3 { --dot: var(--critical); }
.v2-detail .gate-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 10px; border-radius: 999px;
  font-weight: 600; font-size: 13px; line-height: 1.3;
}
.v2-detail .gate-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.v2-detail .gate-state.open { color: #fff; background: #1e9e4a; }
.v2-detail .gate-state.open::before { background: #c9f5d7; }
.v2-detail .gate-state.closed { color: #fff; background: #8a96a3; }
.v2-detail .gate-state.closed::before { background: #e3e8ed; }

/* ---------- biểu đồ ---------- */
.v2-detail .chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 12px; }
.v2-detail .chart-toolbar .section-note { margin: 0; }
.v2-detail .picker { font-weight: 600; color: var(--text-2); }
.v2-detail .picker select {
  font: inherit; font-weight: 500; padding: 6px 10px; margin-left: 6px; border-radius: 8px;
  border: 1px solid #b9cde4; background: #fff; color: var(--text); max-width: 100%;
}
.v2-detail .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.v2-detail .chart-box { margin: 0; background: #fff; border: 1px solid #d5e2f1; border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(16, 42, 84, .05); }
.v2-detail .chart-box figcaption { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--blue-900); }
.v2-detail .chart-area { position: relative; height: 300px; }

/* ---------- bảng giải thích chữ viết tắt (cuối phần chi tiết, sau biểu đồ), nền là ảnh họa tiết ----------
   Ảnh: khung góc, sách mở (trái), mây mưa + thước đo nước (phải), dòng sông có điểm trạm ở đáy; nội dung đặt ở khoảng trống phía trên. */
.v2-detail .abbr-card {
  aspect-ratio: 2021 / 778; /* hiện trọn ảnh; nội dung nhiều hơn thì khối tự cao thêm */
  padding: 5.5% 6% 3%; color: #fff; border-radius: 14px; overflow: hidden;
  background: #005af6 url("/static/img/abbr-bg.jpg") center bottom / cover no-repeat;
  box-shadow: 0 4px 14px rgba(0, 70, 200, .28);
}
.v2-detail .abbr-card h2 {
  margin: 0 0 18px; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .06em; color: #fff;
  text-shadow: 0 2px 6px rgba(0, 20, 80, .45), 0 0 16px rgba(69, 216, 247, .35);
}
.v2-detail .abbr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px 28px; margin: 0; font-size: 15px;
  max-width: 1080px; margin-inline: auto;
}
.v2-detail .abbr-grid > div { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 12px; }
.v2-detail .abbr-grid dt {
  padding: 3px 6px; border-radius: 7px; text-align: center; white-space: nowrap;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(124, 241, 255, .75); color: #fff; font-weight: 700; font-size: 13.5px;
  box-shadow: 0 0 8px rgba(69, 216, 247, .35);
}
.v2-detail .abbr-grid dd { margin: 0; color: #eaf7ff; text-shadow: 0 1px 2px rgba(0, 20, 80, .35); }

@media (max-width: 640px) {
  .v2-detail .wrap { padding: 14px 12px 4px; }
  .v2-detail section { margin-block: 22px; }
  .v2-detail .cards { grid-template-columns: 1fr; gap: 12px; }
  /* màn hình hẹp: chỉ dùng dải đáy của ảnh (sách, sông, mây mưa) để không bị cắt mất hai bên */
  .v2-detail .abbr-card {
    aspect-ratio: auto; padding: 18px 16px calc((100vw - 24px) * 378 / 2021 + 4px);
    background: #005af6 url("/static/img/abbr-bg-bottom.jpg") center bottom / 100% auto no-repeat;
  }
  .v2-detail .abbr-card h2 { font-size: 17px; margin-bottom: 12px; }
  .v2-detail .abbr-grid { grid-template-columns: 1fr; gap: 7px; font-size: 13.5px; }
  .v2-detail .abbr-grid > div { grid-template-columns: 92px 1fr; }
  .v2-detail .chart-area { height: 240px; }
}
@media (min-width: 1800px) {
  .v2-detail { font-size: 16px; }
  .v2-detail .abbr-grid { font-size: 15.5px; }
  .v2-detail .abbr-card h2 { font-size: 26px; }
}