/* ============================================================
   KhmerMeteo — bảng đo thời tiết
   Hướng thiết kế: đọc như một bảng đồng hồ đo, không như tạp chí.
   Chữ số dùng font mono tabular -> cột số thẳng hàng, quét mắt nhanh.
   Không tải webfont -> LCP nhanh, quan trọng với trang tra cứu.
   ============================================================ */
:root{
  --ink:#0d1b21; --ink-2:#3d4f57; --ink-3:#6c7d85;
  --bg:#eef1f2; --surface:#fff; --line:#d7dee1; --line-2:#e9eef0;
  --water:#0f6fa8; --water-2:#e3f0f7;
  --sun:#e8842a; --heat:#c2371f; --cool:#3d8ea3; --ok:#2e8b57;
  --r:10px; --pad:16px; --maxw:1120px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Consolas,monospace;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Khmer","Noto Sans SC","Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--ui)}
a{color:var(--water);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}
img,svg{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- header ---------- */
.hdr{background:var(--ink);color:#fff;position:sticky;top:0;z-index:40}
.hdr .wrap{display:flex;align-items:center;gap:14px;height:56px}
.logo{color:#fff;font-weight:700;letter-spacing:-.02em;font-size:17px;white-space:nowrap}
.logo:hover{text-decoration:none}
.hdr nav{display:flex;gap:14px;font-size:14px;margin-left:auto;align-items:center}
.hdr nav a{color:#b9c8ce}
.hdr nav a:hover,.hdr nav a[aria-current]{color:#fff}
.lang{display:flex;gap:6px}
.lang a{font-size:12px;padding:3px 7px;border:1px solid #2c4049;border-radius:5px;color:#b9c8ce}
.lang a[aria-current]{background:#fff;color:var(--ink);border-color:#fff}
.srch{flex:1;max-width:280px}
.srch input{width:100%;height:34px;border:1px solid #2c4049;background:#152730;color:#fff;
  border-radius:6px;padding:0 10px;font:14px var(--ui)}
.srch input::placeholder{color:#7d919a}

/* ---------- khối chung ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:14px 0}
.card>h2,.card>h3{margin:0;padding:12px 16px;border-bottom:1px solid var(--line-2);
  font-size:15px;font-weight:650;letter-spacing:-.01em}
.card .body{padding:16px}
.bc{font-size:13px;color:var(--ink-3);padding:12px 0 0}
.bc a{color:var(--ink-2)}
h1{font-size:26px;line-height:1.25;margin:10px 0 4px;letter-spacing:-.02em}
.sub{color:var(--ink-3);font-size:14px;margin:0 0 12px}
.upd{font-size:12px;color:var(--ink-3);font-family:var(--mono)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;padding:7px 13px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.tabs a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- hero hiện tại ---------- */
.now{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:20px 16px}
.now .t{font-family:var(--mono);font-size:64px;line-height:.9;font-weight:600;letter-spacing:-.05em}
.now .c{font-size:16px;color:var(--ink-2);margin-top:6px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
  background:var(--line-2);border-top:1px solid var(--line-2)}
.metrics div{background:var(--surface);padding:11px 14px}
.metrics dt{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin:0}
.metrics dd{margin:3px 0 0;font-family:var(--mono);font-size:17px;font-weight:600}

/* ---------- SIGNATURE: dải 24 giờ ----------
   Mỗi cột = 1 giờ. Chiều cao cột dưới = lượng mưa, màu nền = trời sáng/tối.
   Đọc cả ngày trong một cái liếc mắt. */
.band{display:flex;height:78px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.band .h{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  border-right:1px solid rgba(255,255,255,.35)}
.band .h:last-child{border-right:0}
.band .h.day{background:linear-gradient(180deg,#cfe6f2,#eaf4f9)}
.band .h.night{background:linear-gradient(180deg,#2b3f4b,#435966)}
.band .rain{background:var(--water);width:100%}
.band .lbl{position:absolute;top:3px;left:0;right:0;text-align:center;font-family:var(--mono);
  font-size:9px;color:var(--ink-2)}
.band .h.night .lbl{color:#cfe0e8}
.band-x{display:flex;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:5px}
.band-x span{flex:1;text-align:center}

/* ---------- bảng giờ ---------- */
.hrs{display:flex;overflow-x:auto;gap:0;scroll-snap-type:x proximity}
.hrs .h{flex:0 0 74px;text-align:center;padding:12px 4px;border-right:1px solid var(--line-2);scroll-snap-align:start}
.hrs .h:last-child{border-right:0}
.hrs .tm{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.hrs .tp{font-family:var(--mono);font-size:19px;font-weight:600;margin:5px 0 3px}
.hrs .pp{font-family:var(--mono);font-size:12px;color:var(--water)}
.hrs .ic{height:26px;margin:0 auto}

/* ---------- bảng ngày ---------- */
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th,table.t td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:left}
table.t th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
table.t td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.t tr:last-child td{border-bottom:0}
.bar{height:6px;background:var(--water-2);border-radius:3px;overflow:hidden;min-width:44px}
.bar i{display:block;height:100%;background:var(--water)}
.tr{display:inline-flex;align-items:center;gap:8px}
.tr b{font-family:var(--mono);font-weight:600}
.tr .rail{width:74px;height:5px;background:var(--line-2);border-radius:3px;position:relative}
.tr .rail i{position:absolute;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--cool),var(--sun),var(--heat))}

/* ---------- văn bản phân tích ---------- */
.prose{padding:16px;font-size:15px}
.prose p{margin:0 0 10px}
.prose p:last-child{margin:0}
.prose h2,.prose h3{margin:20px 0 8px;font-size:17px;letter-spacing:-.01em}
.prose ul{margin:0 0 10px;padding-left:20px}

/* ---------- FAQ ---------- */
details.q{border-bottom:1px solid var(--line-2)}
details.q:last-child{border-bottom:0}
details.q summary{padding:13px 16px;cursor:pointer;font-weight:600;font-size:15px;list-style:none}
details.q summary::-webkit-details-marker{display:none}
details.q summary::before{content:"+";color:var(--water);font-family:var(--mono);margin-right:9px}
details.q[open] summary::before{content:"−"}
details.q .a{padding:0 16px 14px 16px;color:var(--ink-2);font-size:15px}

/* ---------- lưới địa điểm ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px;background:var(--line-2)}
.grid a{background:var(--surface);padding:12px 14px;color:var(--ink)}
.grid a:hover{background:#f6f9fa;text-decoration:none}
.grid .nm{font-size:14px;font-weight:600}
.grid .tt{font-family:var(--mono);font-size:20px;font-weight:600;margin-top:3px}
.grid .cc{font-size:12px;color:var(--ink-3)}
.links{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px}
.links a{font-size:14px;padding:5px 11px;background:var(--bg);border-radius:6px;color:var(--ink-2)}

/* ---------- AQI ---------- */
.aqi{display:flex;align-items:center;gap:16px;padding:18px 16px}
.aqi .v{font-family:var(--mono);font-size:44px;font-weight:600;line-height:1;
  padding:12px 18px;border-radius:9px;color:#fff}
.v.good{background:#2e8b57}.v.fair{background:#8fbf3f}.v.moderate{background:#e3b005}
.v.poor{background:var(--sun)}.v.verypoor{background:var(--heat)}.v.extreme{background:#7a1d10}.v.na{background:#8a9aa2}
.pol{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:1px;background:var(--line-2)}
.pol div{background:var(--surface);padding:10px 12px}
.pol dt{font-size:11px;color:var(--ink-3);margin:0}
.pol dd{margin:2px 0 0;font-family:var(--mono);font-weight:600}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#9fb2ba;margin-top:36px;padding:28px 0 34px;font-size:14px}
.ftr a{color:#cfdde2}
.ftr .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
.ftr h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin:0 0 9px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:5px}
.attr{margin-top:22px;padding-top:16px;border-top:1px solid #23343c;font-size:12.5px;color:#7e939c}

/* ---------- responsive ---------- */
@media (max-width:720px){
  h1{font-size:21px}
  .now{grid-template-columns:1fr;gap:10px;text-align:left}
  .now .t{font-size:52px}
  .hdr nav{gap:9px;font-size:13px}
  .srch{display:none}
  .band{height:62px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- chỉ số ứng dụng ---------- */
.ixs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line-2)}
.ix{background:var(--surface);padding:14px 16px}
.ix-h{display:flex;align-items:center;gap:8px}
.ix-l{font-size:13px;color:var(--ink-2);font-weight:600}
.ix-v{font-size:24px;font-weight:600;margin:6px 0 4px}
.ix-n{font-size:13px;color:var(--ink-3);line-height:1.45}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dot.good{background:#2e8b57}.dot.moderate{background:#e3b005}.dot.poor{background:var(--sun)}
.dot.verypoor{background:var(--heat)}.dot.extreme{background:#7a1d10}.dot.na{background:#8a9aa2}

/* ---------- chip đồng thuận mô hình ---------- */
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:600;
  font-family:var(--mono);color:#fff}
.chip.good{background:#2e8b57}.chip.moderate{background:#e3b005;color:#4a3a00}.chip.poor{background:var(--heat)}

/* ---------- bảng khí hậu tháng ---------- */
.thirds{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2)}
.thirds div{background:var(--surface);padding:12px 14px;text-align:center}
.thirds dt{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin:0}
.thirds dd{margin:5px 0 0;font-family:var(--mono);font-size:18px;font-weight:600}
.thirds small{display:block;color:var(--water);font-family:var(--mono);font-size:13px;margin-top:2px}

/* ============================================================
   THEME — CAMPUCHIA
   Hướng: đá sa thạch Angkor và nước Biển Hồ. Nâu đất + lam nước.
   Chữ ký: card bo góc lớn, tiêu đề gạch chân đôi, nền vân giấy nhẹ.
   ============================================================ */
:root{
  --ink:#1c1710; --ink-2:#4f4436; --ink-3:#7d7263;
  --bg:#f4f1ea; --surface:#fffefb; --line:#ddd5c6; --line-2:#ebe5d9;
  --water:#1d6f8b;        /* lam Biển Hồ */
  --water-2:#dcedf3;
  --sun:#c8873a; --heat:#9d4a25; --cool:#1d6f8b; --ok:#5f7f47;
  --r:2px;
}
body{background-image:
  repeating-linear-gradient(0deg,rgba(120,100,70,.025) 0 1px,transparent 1px 4px);}
.hdr{background:#2e2519}
.hdr::after{content:"";display:block;height:4px;
  background:repeating-linear-gradient(90deg,#c8873a 0 14px,#2e2519 14px 18px)}
.card{border-radius:var(--r);border:1px solid var(--line)}
.card>h2,.card>h3{border-bottom:3px double var(--line);background:transparent;
  text-transform:none;letter-spacing:.01em}
.tabs a{border-radius:2px}
.tabs a[aria-current]{background:var(--water);border-color:var(--water)}
.now .t{color:var(--heat)}
.band{border-radius:2px}
.band .h.day{background:linear-gradient(180deg,#cfe3ec,#eef5f8)}
.band .h.night{background:linear-gradient(180deg,#22323a,#3d525c)}
.ftr{background:#2e2519}
table.t thead th{border-bottom:2px solid var(--line)}

/* ---------- gói 7: trang micro (huyện/xã) + trang ngày mai ---------- */
.src-note{color:var(--ink-3);font-size:12.5px;margin:6px 2px 14px}
.lead{font-size:17px;margin:0;line-height:1.55}
.links a{padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);
  font-size:14px;line-height:1.3}
.links a:hover{border-color:var(--water);text-decoration:none;color:var(--water)}
.hero3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.chip{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;
  background:var(--water-2);color:var(--water);white-space:nowrap}

/* danh sách tin — gói 19 */
ul.newslist{list-style:none;padding:0;margin:8px 0}
ul.newslist li{padding:9px 0;border-bottom:1px solid var(--line-2);font-size:15px;line-height:1.5}
ul.newslist li:last-child{border-bottom:none}
ul.newslist a{font-weight:600}