/* POPNIX Flood /province/ (ออกแบบใหม่ 2026-10-05 เจ้าของสั่ง "be creative - add animations, cool graphics"): โหลดต่อจาก lite.css เฉพาะหน้ารายจังหวัด
   ภาพทั้งหมดเป็น SVG จาก province_art.inc.php; สีสถานะ = สถานีที่หนักที่สุด; ทุก loop animation และการเผยตอนเลื่อนถึงปิดใต้ prefers-reduced-motion (ท้ายไฟล์)
   ห้ามแถบสีหนาด้านซ้ายของการ์ด (กติกาของเว็บ) ใช้จุด/หลอด/ตัวเลขสีแทน; ข้อความไทยหลายบรรทัด line-height >= 1.4 */
.prov {
    --pv-hero-1: #e8f4f9; --pv-hero-2: #cde4ee;
    --pv-sea-1: #d4e9f3; --pv-sea-2: #b3d5e6; --pv-wave: rgba(31, 111, 153, .2);
    --pv-land: #e2e9ec; --pv-land-edge: rgba(18, 52, 70, .14);
    --pv-edge: rgba(255, 255, 255, .92);
    --pv-ok: #78cbbd; --pv-warn: #f1b443; --pv-crit: #e4524c; --pv-unk: #b6c5cc; --pv-none: #d2dce1; --pv-bkk: #56a8db; --pv-nb: #cbd9e0;
    --pv-river: #2589c4; --pv-flow: #ffffff; --pv-border: rgba(18, 52, 70, .45);
    --pv-sheen: #ffffff; --pv-sheen-a: .38; --pv-rain: #1d5f91;
    --pv-glass: rgba(255, 255, 255, .74); --pv-glass-line: rgba(18, 52, 70, .12);
    --pv-blob-1: rgba(31, 111, 153, .18); --pv-blob-2: rgba(38, 143, 131, .15); --pv-blob-3: rgba(228, 82, 76, .1);
    --pv-ink-crit: var(--ink-crit); --pv-ink-warn: var(--ink-warn); --pv-ink-ok: var(--ink-ok);
}
@media (prefers-color-scheme: dark) {
    .prov {
        --pv-hero-1: #04111a; --pv-hero-2: #0a2232;
        --pv-sea-1: #061a27; --pv-sea-2: #0b2b3f; --pv-wave: rgba(124, 196, 232, .17);
        --pv-land: #0c1b24; --pv-land-edge: rgba(150, 205, 232, .08);
        --pv-edge: rgba(4, 14, 21, .88);
        --pv-ok: #28897e; --pv-warn: #d99e3c; --pv-crit: #ee5a55; --pv-unk: #3d5764; --pv-none: #1a2d38; --pv-bkk: #3e92c3; --pv-nb: #16303f;
        --pv-river: #6ccaf7; --pv-flow: #e9f9ff; --pv-border: rgba(240, 246, 249, .32);
        --pv-sheen: #d6f1ff; --pv-sheen-a: .16; --pv-rain: #a8dcff;
        --pv-glass: rgba(9, 28, 40, .74); --pv-glass-line: rgba(150, 205, 232, .15);
        --pv-blob-1: rgba(124, 196, 232, .17); --pv-blob-2: rgba(77, 191, 173, .13); --pv-blob-3: rgba(240, 106, 102, .11);
    }
}
.prov .wrap { max-width: 76rem; }
.prov main { padding: 0 0 52px; }
.pv-msg { padding: 36px 16px; }
.pv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- สีตามระดับ: พื้น (fill) ของรูปจังหวัด/จุด, ตัวหนังสือใช้ --ink-* ที่อ่านได้บนพื้นสว่าง ---------- */
.prov .lv-crit { --lvc: var(--pv-crit); --lvi: var(--pv-ink-crit); }
.prov .lv-warn { --lvc: var(--pv-warn); --lvi: var(--pv-ink-warn); }
.prov .lv-ok { --lvc: var(--pv-ok); --lvi: var(--pv-ink-ok); }
.prov .lv-unk { --lvc: var(--pv-unk); --lvi: var(--ink-muted); }
.prov .lv-off, .prov .lv-none { --lvc: var(--pv-none); --lvi: var(--ink-muted); }
.prov .lv-bkk { --lvc: var(--pv-bkk); --lvi: var(--ink-link); }
.prov .lv-nb { --lvc: var(--pv-nb); --lvi: var(--ink-muted); }

/* ---------- ฉากหลังของ hero: แสงนุ่มลอยช้า ๆ ---------- */
.pvh, .ph { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(165deg, var(--pv-hero-1) 10%, var(--pv-hero-2)); border-bottom: 1px solid var(--edge); }
.pv-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pv-bg i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); opacity: .9; }
.pv-bg i:nth-child(1) { left: -12vmax; top: -18vmax; background: radial-gradient(closest-side, var(--pv-blob-1), transparent); animation: pvBlob 26s ease-in-out infinite alternate; }
.pv-bg i:nth-child(2) { right: -16vmax; top: 6vmax; background: radial-gradient(closest-side, var(--pv-blob-2), transparent); animation: pvBlob 32s ease-in-out -9s infinite alternate-reverse; }
.pv-bg i:nth-child(3) { left: 22vmax; bottom: -26vmax; background: radial-gradient(closest-side, var(--pv-blob-3), transparent); animation: pvBlob 38s ease-in-out -17s infinite alternate; }
@keyframes pvBlob { to { transform: translate(6vmax, 4vmax) scale(1.12); } }

/* ---------- หน้ารวม: hero ---------- */
.pvh-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: center; padding-top: 36px; padding-bottom: 28px; }
.eye { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--pv-glass);
    border: 1px solid var(--pv-glass-line); color: var(--ink-muted); font-size: .9em; font-weight: 600; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.live { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--pv-ok); }
.live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--pv-ok); opacity: 0; animation: pvLive 2.4s ease-out infinite; }
@keyframes pvLive { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.pvh h1, .ph h1 { margin: 0 0 .35em; line-height: 1.12; letter-spacing: -.015em; }
.pvh h1 .h-a { display: block; font-size: .5em; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; line-height: 1.4; }
.pvh h1 .h-b { display: block; font-size: clamp(2.2rem, 5.2vw, 3.7rem); line-height: 1.2; }
.pvh h1 em { font-style: normal; background: linear-gradient(100deg, var(--pv-river), var(--accent) 45%, var(--pv-ok)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pvh .lead { max-width: 34em; margin-bottom: 1.1em; line-height: 1.55; }
.pvh-st { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0 0 16px; padding: 0; }
.pvh-st li, .ph-st li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 13px; border-radius: 18px; background: var(--pv-glass); border: 1px solid var(--pv-glass-line);
    box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
.pvh-st b, .ph-st b { font-size: 2.05em; line-height: 1.1; font-weight: 700; color: var(--lvi, var(--strong)); font-variant-numeric: tabular-nums; }
.pvh-st span, .ph-st span { font-size: .84em; line-height: 1.4; color: var(--ink-muted); }
.pvh-st li::before, .ph-st li::before { content: ""; position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--lvc, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lvc, var(--accent)) 22%, transparent); }
.pvh-st .lv-st { --lvc: var(--pv-river); --lvi: var(--strong); }
.pvh-st .lv-rain { --lvc: var(--pv-rain); --lvi: var(--strong); }
.pvh-st .lv-crit::before, .ph-st .lv-crit::before { animation: pvBeat 1.6s ease-in-out infinite; }
@keyframes pvBeat { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--lvc) 8%, transparent); } }
.pvh-bar { display: flex; gap: 3px; height: 12px; margin: 0 0 14px; border-radius: 999px; overflow: hidden; }
.pvh-bar i { flex: var(--n) 1 0; min-width: 6px; background: var(--lvc); border-radius: 3px; transform-origin: left; animation: pvGrow 1.4s cubic-bezier(.2, .8, .2, 1) .5s both; }
@keyframes pvGrow { from { transform: scaleX(0); } }
.pvh-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 18px; padding: 0; font-size: .86em; color: var(--ink-muted); line-height: 1.4; }
.pvh-lg li { display: inline-flex; align-items: center; gap: 7px; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--lvc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sw-rain { background: repeating-linear-gradient(115deg, transparent 0 3px, var(--pv-rain) 3px 4.5px), var(--pv-none); }
.sw-river { height: 4px; border-radius: 2px; background: var(--pv-river); box-shadow: none; }
.pvh .acts, .ph .acts { margin: 0; }

/* ---------- แผนที่ประเทศ ---------- */
.pvh-map { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.pvm { display: block; height: min(84vh, 940px); width: auto; max-width: 100%; overflow: hidden; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(6, 30, 45, .45), inset 0 0 0 1px var(--pv-glass-line); }
.pvh-map figcaption { margin-top: 10px; max-width: 30em; text-align: center; font-size: .82em; color: var(--ink-muted); line-height: 1.45; }
.pvm .pv-s1 { stop-color: var(--pv-sea-1); } .pvm .pv-s2 { stop-color: var(--pv-sea-2); }
.pvm .pv-wl { fill: none; stroke: var(--pv-wave); stroke-width: 1.8; stroke-linecap: round; }
.pv-wvs rect { animation: pvWave 18s linear infinite; }
@keyframes pvWave { to { transform: translateX(120px); } }
.pvm .pv-land { fill: var(--pv-land); stroke: var(--pv-land-edge); stroke-width: .8; }
.pv-p { fill: var(--lvc); stroke: var(--pv-edge); stroke-width: .7px; stroke-linejoin: round; cursor: pointer; transform-box: fill-box; transform-origin: center;
    animation: pvIn .9s cubic-bezier(.2, .8, .2, 1) var(--d) both; transition: fill .35s ease, stroke .2s ease; }
.pv-p path { vector-effect: non-scaling-stroke; }
.pv-p:hover, .pv-p.on, .pv-p:focus-visible { fill: color-mix(in srgb, var(--lvc) 78%, var(--pv-sheen)); stroke: var(--strong); stroke-width: 1.6px; outline: none; }
@keyframes pvIn { from { opacity: 0; transform: scale(.86); } 60% { opacity: 1; } }
.pv-sh { animation: pvSheen 12s ease-in-out 2.8s infinite; }
.pvm .pv-h0 { stop-color: var(--pv-sheen); stop-opacity: 0; } .pvm .pv-h1 { stop-color: var(--pv-sheen); stop-opacity: var(--pv-sheen-a); }   /* จาง: แสงผ่านต้องไม่ทำให้สีระดับเพี้ยน */
@keyframes pvSheen { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(2500px); } }
.pvm .pv-bd { fill: none; stroke: var(--pv-border); stroke-width: 1.1px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.pv-r { fill: none; stroke: var(--pv-river); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pv-r.r1 { stroke-width: .8px; opacity: .55; } .pv-r.r2 { stroke-width: 1.35px; opacity: .9; } .pv-r.r3 { stroke-width: 2.3px; }
.pv-f { fill: none; stroke: var(--pv-flow); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 1.1px; stroke-dasharray: 1.6 18; opacity: .9;
    animation: pvFlow 2.6s linear infinite; }
.pv-f.r3 { stroke-width: 1.7px; animation-duration: 2s; }
@keyframes pvFlow { to { stroke-dashoffset: -19.6; } }
.pvm .pv-rd { fill: none; stroke: var(--pv-rain); stroke-width: 2.6; stroke-linecap: round; opacity: .85; }
.pv-rnm { animation: pvRain .95s linear infinite; }
.pv-rn.hv .pv-rnm { animation-duration: .6s; }
@keyframes pvRain { to { transform: translateY(64px); } }
.pv-pg { fill: none; stroke: var(--pv-crit); stroke-width: 2.4px; vector-effect: non-scaling-stroke; animation: pvPing 2.8s cubic-bezier(.2, .6, .3, 1) infinite; }
.pv-pd { fill: #fff; stroke: var(--pv-crit); stroke-width: 2px; vector-effect: non-scaling-stroke; }
@keyframes pvPing { 0% { transform: scale(.3); opacity: .95; } 80%, 100% { transform: scale(2); opacity: 0; } }
.pv-shw, .pv-bd, .pv-rvs, .pv-rvf, .pv-rns, .pv-pgs, .pv-wvs { pointer-events: none; }
.pvm.paused *, .phm.paused * { animation-play-state: paused !important; }
/* กล่องบอกชื่อจังหวัดบนแผนที่ (province.js) */
.pv-tip { position: absolute; z-index: 5; left: 0; top: 0; width: max-content; max-width: min(19rem, 80vw); padding: 10px 14px 11px; border-radius: 16px; pointer-events: none;
    background: var(--pv-glass); border: 1px solid var(--pv-glass-line); box-shadow: var(--shadow); color: var(--text); font-size: .88em; line-height: 1.45;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translate(-50%, calc(-100% - 14px)); }
.pv-tip b { display: block; color: var(--strong); font-size: 1.08em; }
.pv-tip .tp-l { display: flex; align-items: center; gap: 2px; color: var(--lvi, var(--strong)); font-weight: 700; }
.pv-tip small { display: block; color: var(--ink-muted); }
.pv-tip .tp-r { color: var(--ink-link); }

/* ---------- ส่วนต่าง ๆ ---------- */
.pv-sec { margin: 34px 0 0; }
.pv-sec > h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: .55em; font-size: 1.5em; }
.pv-sec > h2 small { font-size: .58em; font-weight: 600; color: var(--ink-muted); }
.sec-sub { margin: -.2em 0 1em; color: var(--ink-muted); font-size: .94em; line-height: 1.5; max-width: 52em; }
.prov .fine { margin-top: .9em; line-height: 1.5; }

/* จังหวัดที่ต้องจับตา: การ์ดรูปจังหวัดมีวงกระเพื่อม */
.hot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.hot { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 14px 16px; border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pv-crit) 12%, var(--core)), var(--core) 62%); border: 1px solid color-mix(in srgb, var(--pv-crit) 30%, var(--edge));
    color: var(--text) !important; text-decoration: none; box-shadow: var(--shadow); overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.hot:hover, .pt:hover, .am:hover { transform: translateY(-3px); box-shadow: 0 1px 1px rgba(22, 66, 88, .05), 0 22px 40px -20px rgba(22, 66, 88, .45); }
.hot-s { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.hot-s::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--pv-crit); opacity: 0; animation: pvRing 2.8s ease-out infinite; }
.hot:nth-child(odd) .hot-s::before { animation-delay: -1.2s; }
@keyframes pvRing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.hot-s .pt-s { width: 64px; height: 64px; }
.hot-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.4; }
.hot-b b { color: var(--strong); font-size: 1.06em; }
.hot-n { color: var(--ink-crit); font-weight: 700; } .hot-n em { font-style: normal; font-size: 1.5em; line-height: 1; }
.hot-b small { color: var(--ink-muted); font-size: .84em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hot-rain, .pt-rain { position: absolute; right: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--pv-rain) 14%, transparent); }
.hot-rain::before, .pt-rain::before { content: ""; position: absolute; inset: 5px 6px; background: repeating-linear-gradient(110deg, transparent 0 2.5px, var(--pv-rain) 2.5px 4px); border-radius: 4px; animation: pvDrizzle .7s linear infinite; }
@keyframes pvDrizzle { to { background-position: 0 6px; } }

/* ไปที่ภาค */
.rg-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; }
.rg-jump a { padding: .4em 1em; border-radius: 999px; border: 1px solid var(--edge); background: var(--core); color: var(--strong) !important; font-weight: 600; text-decoration: none; line-height: 1.4; }
.rg-jump a:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ภาค: แผนที่ย่อของภาค + จำนวนตามระดับ + การ์ดจังหวัด */
.pv-rg { scroll-margin-top: 16px; }
.rg-h { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: center; margin: 0 0 14px; }
.rg-m { width: 92px; height: 104px; filter: drop-shadow(0 8px 14px rgba(6, 30, 45, .18)); }
.rg-m use { fill: var(--lvc); stroke: var(--pv-edge); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.rg-h h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 .3em; font-size: 1.5em; }
.rg-h h2 small { font-size: .58em; font-weight: 600; color: var(--ink-muted); }
.rg-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: .9em; color: var(--ink-muted); line-height: 1.4; }
.rg-sum span { display: inline-flex; align-items: baseline; }
.rg-sum b { color: var(--lvi, var(--strong)); margin-right: .25em; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.pt { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; height: 100%; padding: 10px 14px 10px 10px; border-radius: 18px;
    background: var(--core); border: 1px solid var(--edge); color: var(--text) !important; text-decoration: none; overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .3s ease; }
.pt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%); }
.pt:hover::after { transform: translateX(120%); transition: transform .9s ease; }
.pt:hover { border-color: color-mix(in srgb, var(--lvc) 55%, var(--edge)); }
.pt-s { display: block; width: 52px; height: 52px; overflow: visible; }
.pt-s use { fill: var(--lvc); stroke: color-mix(in srgb, var(--lvc) 60%, #000); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.pt-b { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.pt-b b { color: var(--strong); }
.pt-b small { color: var(--lvi, var(--ink-muted)); font-size: .82em; font-weight: 600; }
.pt.lv-ok .pt-b small, .pt.lv-none .pt-b small, .pt.lv-bkk .pt-b small, .pt.lv-nb .pt-b small { font-weight: 400; color: var(--ink-muted); }

/* ---------- หน้าจังหวัด: hero ---------- */
.ph-in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px 40px; align-items: center; padding-top: 30px; padding-bottom: 30px; }
.crumb { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 12px; font-size: .9em; color: var(--ink-muted); }
.crumb a { font-weight: 600; }
.ph h1 small { display: block; font-size: .42em; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; line-height: 1.4; }
.ph-txt { container-type: inline-size; }
/* ชื่อจังหวัดบรรทัดเดียวเสมอ: ขนาดตามความกว้างคอลัมน์และความยาวชื่อ (ภาษาไทยไม่มีช่องว่าง ตัดกลางคำแล้วเหลือสระลอย "พระนครศรีอยุธย/า") */
.ph-name { display: block; white-space: nowrap; font-size: clamp(2rem, 6vw, 4.4rem); font-size: min(4.4rem, calc(100cqi / (var(--len, 8) * .62))); line-height: 1.25; padding-bottom: .05em;
    background: linear-gradient(100deg, var(--strong) 30%, color-mix(in srgb, var(--lvc) 80%, var(--strong))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph .pill { border-color: var(--lvc); background: var(--pv-glass); }
.ph .lead { line-height: 1.55; }
.ph-st { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.ph-st b { font-size: 1.7em; }
.ph-map { position: relative; margin: 0; }
.phm { display: block; width: 100%; height: auto; max-height: 78vh; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(6, 30, 45, .45), inset 0 0 0 1px var(--pv-glass-line); }
.ph-map figcaption { margin-top: 10px; font-size: .82em; color: var(--ink-muted); line-height: 1.45; text-align: center; }
.phm .ph-sea { fill: var(--pv-sea-1); }
.phm .ph-land { fill: var(--pv-land); }
.phm .ph-nb { fill: var(--pv-nb); stroke: var(--pv-edge); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.phm .ph-g0 { stop-color: color-mix(in srgb, var(--lvc) 62%, #fff); } .phm .ph-g1 { stop-color: var(--lvc); }
.phm .ph-fill { animation: phFade 1.2s ease .9s both; }
@keyframes phFade { from { opacity: 0; } }
.phm .ph-wl { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: calc(var(--u) * .32px); stroke-linecap: round; }
.ph-wv { animation: phWave 8s linear infinite; }
@keyframes phWave { to { transform: translateX(var(--wv)); } }
.ph-r { fill: none; stroke: var(--pv-river); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .85; }
.ph-r.r1 { stroke-width: 1.4px; } .ph-r.r2 { stroke-width: 2.4px; } .ph-r.r3 { stroke-width: 3.6px; }
.ph-f { fill: none; stroke: var(--pv-flow); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 1.4px; stroke-dasharray: 2 20; opacity: .9; animation: pvFlowH 2.3s linear infinite; }
.ph-f.r3 { stroke-width: 2px; }
@keyframes pvFlowH { to { stroke-dashoffset: -22; } }
.phm .ph-glow { fill: none; stroke: var(--lvc); stroke-width: calc(var(--u) * 1.6px); opacity: .32; stroke-linejoin: round; }
.phm .ph-line { fill: none; stroke: color-mix(in srgb, var(--lvc) 55%, var(--strong)); stroke-width: calc(var(--u) * .42px); stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 1; animation: phDraw 2.8s cubic-bezier(.65, 0, .25, 1) .15s both; }
@keyframes phDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ph-nbl text { fill: var(--ink-muted); font-weight: 600; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--pv-nb); stroke-width: calc(var(--u) * .7px); stroke-linejoin: round; }
.ph-nbl:hover text { fill: var(--ink-link); }
.ph-dg { animation: phPop .55s cubic-bezier(.3, 1.6, .5, 1) var(--d) both; }
@keyframes phPop { from { transform: scale(0); } }
.ph-dc { fill: var(--lvc); stroke: #fff; stroke-width: calc(var(--u) * .32px); }
.ph-d.lv-off .ph-dc, .ph-d.lv-none .ph-dc { fill: var(--pv-none); stroke: var(--ink-muted); }
.ph-pg { fill: none; stroke: var(--pv-crit); stroke-width: calc(var(--u) * .35px); animation: pvPing 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
a.ph-d { cursor: pointer; }
a.ph-d:hover .ph-dc, a.ph-d:focus-visible .ph-dc { stroke: var(--strong); stroke-width: calc(var(--u) * .5px); }
.ph-rd { fill: none; stroke: var(--pv-rain); stroke-width: calc(var(--u) * .36px); stroke-linecap: round; animation: phDrop 1.15s linear infinite; }
.ph-wet.hv .ph-rd { animation-duration: .75s; }
.ph-rp { fill: none; stroke: var(--pv-rain); stroke-width: calc(var(--u) * .2px); opacity: .7; animation: phRipple 1.15s ease-out infinite; }
@keyframes phDrop { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(calc(var(--u) * 5px)); opacity: 0; } }
@keyframes phRipple { 0%, 60% { transform: scale(.2); opacity: 0; } 70% { opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
/* เขื่อน/เหตุบนทางหลวง: พื้นขาวขอบสี (สีเดียวกับจังหวัดจะกลืนหาย) */
.ph-dam circle { fill: var(--core); stroke: var(--lvc); stroke-width: calc(var(--u) * .45px); }
.ph-dam path { fill: var(--pv-river); }
.ph-hw path { fill: var(--core); stroke: var(--lvc); stroke-width: calc(var(--u) * .5px); stroke-linejoin: round; }
.ph-hw .ph-hx { fill: none; stroke: var(--strong); stroke-width: calc(var(--u) * .45px); stroke-linecap: round; }
.ph-sc path { fill: none; stroke: var(--strong); stroke-width: calc(var(--u) * .35px); stroke-linecap: round; stroke-linejoin: round; }
.ph-sc text, .ph-n text { fill: var(--strong); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--pv-hero-1); stroke-width: calc(var(--u) * .6px); }
.ph-n path { fill: var(--strong); }
.ph-ui, .ph-wets, .ph-rvs, .ph-rvf { pointer-events: none; }
.ph-loc { position: absolute; right: 14px; top: 14px; width: 17%; max-width: 104px; height: auto; padding: 8px; border-radius: 16px; background: var(--pv-glass);
    border: 1px solid var(--pv-glass-line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: visible; }
.ph-loc-th { fill: var(--pv-nb); stroke: var(--pv-border); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ph-loc-me { fill: var(--lvc); }
.ph-loc-pg { fill: none; stroke: var(--lvc); stroke-width: 2px; vector-effect: non-scaling-stroke; animation: pvPing 2.4s ease-out infinite; }

/* ---------- หลอดวัดของสถานี ---------- */
.gz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 12px; }
.gzc { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px 14px 12px; border-radius: 20px;
    background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); scroll-margin-top: 20px; }
.gzc:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.gzc.lv-crit { background: linear-gradient(160deg, color-mix(in srgb, var(--pv-crit) 9%, var(--core)), var(--core) 55%); }
.gzc.lv-warn { background: linear-gradient(160deg, color-mix(in srgb, var(--pv-warn) 10%, var(--core)), var(--core) 55%); }
.gzc.lv-off { opacity: .78; }
.gz { width: 62px; height: 104px; overflow: visible; }
.gz .gz-t { fill: var(--bg-2); }
.gz .gz-o { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.gz .gz-hl { stroke: rgba(255, 255, 255, .5); stroke-width: 3; stroke-linecap: round; }
.gz .gz-wf { fill: var(--lvc); }
.gz .gz-wv { fill: color-mix(in srgb, var(--lvc) 70%, #fff); animation: gzWave 2.4s linear infinite; }
@keyframes gzWave { to { transform: translateX(-18px); } }
.gz-w { transition: transform 1.5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 60ms + .15s); }
.gz .gz-b { stroke: var(--strong); stroke-width: 1.4; stroke-dasharray: 3.5 2.5; }
.gz .gz-bt { font-size: 12px; font-weight: 600; fill: var(--ink-muted); text-anchor: end; }
.gz .gz-na { font-size: 20px; font-weight: 700; fill: var(--ink-muted); text-anchor: middle; }
.gzc-b { min-width: 0; line-height: 1.45; }
.gzc-b h3 { margin: 0 0 .1em; font-size: 1.05em; }
.gzc-wh { margin: 0 0 .35em; color: var(--ink-muted); font-size: .84em; }
.gzc-lv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .3em; margin: 0 0 .2em; color: var(--lvi, var(--strong)); font-weight: 700; }
.gzc-v { margin: 0 0 .3em; font-size: .9em; color: var(--text); }
.gzc-t { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: .82em; color: var(--ink-muted); }
.tr { font-weight: 600; } .tr.tr-up { color: var(--ink-rise); } .tr.tr-down { color: var(--ink-fall); }

/* ---------- อ่างเก็บน้ำ ---------- */
.dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 12px; }
.dmc { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.dm { width: 150px; height: 82px; }
.dm .dm-hill { fill: color-mix(in srgb, var(--pv-ok) 30%, var(--pv-land)); }
.dm .dm-wf { fill: var(--pv-river); opacity: .85; }
.dm .dm-wv { fill: color-mix(in srgb, var(--pv-river) 60%, #fff); animation: dmWave 3s linear infinite; }
@keyframes dmWave { to { transform: translateX(-21px); } }
.dm-w { transition: transform 1.8s cubic-bezier(.2, .8, .2, 1) .2s; }
.dm .dm-full { stroke: var(--lvc); stroke-width: 1.4; stroke-dasharray: 4 3; }
.dm .dm-ft { font-size: 8px; font-weight: 600; fill: var(--ink-muted); }
.dm .dm-wall { fill: var(--ink-muted); }
.dm .dm-out { fill: none; stroke: var(--pv-river); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 3 5; animation: pvFlowH 1.6s linear infinite; }
.dmc-b h3 { margin: 0 0 .1em; font-size: 1.05em; }
.dmc-p { display: flex; align-items: baseline; gap: 4px; margin: 0; color: var(--lvi); }
.dmc-p b { font-size: 2.2em; line-height: 1.1; }
.dmc-p span { color: var(--ink-muted); font-size: .88em; }

/* ---------- ฝน ---------- */
.pv-rain h2 { align-items: center; }
.rain-art { width: 52px; height: 34px; margin-right: 2px; overflow: visible; }
.rain-art .ra-c { fill: color-mix(in srgb, var(--pv-rain) 22%, var(--core)); stroke: var(--pv-rain); stroke-width: 1.6; }
.rain-art .ra-d { fill: none; stroke: var(--pv-rain); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 3 7; animation: raDrop .8s linear infinite; }
@keyframes raDrop { to { stroke-dashoffset: -10; } }
.rn-list { display: grid; gap: 10px; list-style: none; margin: 0 0 1em; padding: 0; }
.rn-list li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--core); border: 1px solid var(--edge); }
.rn-n { min-width: 0; font-weight: 600; color: var(--strong); line-height: 1.4; }
.rn-n small, .rn-v small { display: block; font-weight: 400; color: var(--ink-muted); font-size: .8em; }
.rn-bar { height: 14px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.rn-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--pv-river) 55%, #fff), var(--pv-river) 60%, var(--accent));
    transform-origin: left; transform: scaleX(var(--v)); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms + .1s); }
.rn-v { text-align: right; color: var(--ink-muted); font-size: .9em; line-height: 1.4; }
.rn-v b { color: var(--strong); font-size: 1.25em; }

/* ---------- ถนนและทางหลวง ---------- */
.rd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 12px; list-style: none; margin: 0 0 .8em; padding: 0; }
.rdc { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 20px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); line-height: 1.45; }
.rdc h3 { margin: 0 0 .15em; font-size: 1.02em; }
.sh { width: 44px; height: 48px; }
.sh .sh-b { fill: #1d5f99; stroke: #fff; stroke-width: 2; }
.sh text { fill: #fff; font-weight: 700; text-anchor: middle; font-family: var(--font); }
.sh-w .sh-b { fill: var(--lvc); stroke: var(--strong); stroke-width: 1.5; stroke-linejoin: round; }
.sh-w .sh-x, .sh-r .sh-x { fill: none; stroke: var(--strong); stroke-width: 3; stroke-linecap: round; }
.sh-r .sh-b { fill: color-mix(in srgb, var(--pv-warn) 30%, var(--core)); stroke: var(--pv-warn); stroke-width: 2; }

/* ---------- อำเภอ ---------- */
.am-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.am { display: flex; align-items: baseline; gap: .2em; height: 100%; padding: .6em .9em; border-radius: 16px; border: 1px solid var(--edge); background: var(--core); color: var(--strong) !important;
    font-weight: 600; line-height: 1.4; text-decoration: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.am small { display: block; color: var(--ink-muted); font-size: .8em; font-weight: 400; }

/* ---------- ถาม-ตอบสั้น (province_seo.inc.php): คำถามที่คนค้นบ่อย ตอบด้วยตัวเลขสดและเวลาของข้อมูล ---------- */
.qa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 12px; margin: 0; }
.qa { position: relative; padding: 14px 16px 15px 46px; border-radius: 20px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.qa::before { content: ""; position: absolute; left: 16px; top: 19px; width: 15px; height: 15px; border-radius: 50% 50% 50% 0; transform: rotate(135deg);   /* หยดน้ำเล็ก ๆ ปลายแหลมชี้ขึ้น */
    background: linear-gradient(135deg, color-mix(in srgb, var(--pv-river) 55%, #fff), var(--pv-river)); }
.qa dt { margin: 0 0 .25em; color: var(--strong); font-weight: 700; line-height: 1.45; }
.qa dd { margin: 0; color: var(--text); font-size: .95em; line-height: 1.55; }
/* แถวส่งต่อใน hero ตั้งอยู่บนพื้นกระจกแบบเดียวกับตัวเลข */
.ph .shot-row, .pvh .shot-row { padding-top: 12px; border-top: 1px dashed var(--pv-glass-line); }
.ph .shot-btn:not(.shot-go), .pvh .shot-btn:not(.shot-go) { background: var(--pv-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 640px) { .qa-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- เผยตอนเลื่อนถึง (มีเฉพาะเมื่อ JS ทำงาน: html.js) ---------- */
.rv { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.js .rv:not(.in) { opacity: 0; transform: translateY(16px); }
.js .rv:not(.in) .gz-w, .js .rv:not(.in) .dm-w { transform: translateY(var(--gz-h)); }
.js .rv:not(.in) .rn-bar i { transform: scaleX(0); }

/* ---------- จอแคบ ---------- */
@media (max-width: 960px) {
    .pvh-in, .ph-in { grid-template-columns: minmax(0, 1fr); }
    .pvm { height: auto; width: 100%; max-height: none; }
    .pvh-map { order: 2; } .ph-map { order: 2; }
    .phm { max-height: none; }
}
@media (max-width: 640px) {
    .pvh-in, .ph-in { padding-top: 22px; padding-bottom: 20px; gap: 20px; }
    .pvh-st b { font-size: 1.7em; }
    .pt-grid, .am-list { grid-template-columns: minmax(0, 1fr); }
    /* จังหวัดที่ต้องจับตาบนมือถือ: แถวเดียวปัดข้าง (24 ใบเรียงลงยาวเกินก่อนถึงรายภาค) */
    .hot-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: thin; }
    .hot-list > li { flex: 0 0 84%; scroll-snap-align: center; }
    .gz-grid, .dm-grid, .rd-list { grid-template-columns: minmax(0, 1fr); }
    .dmc { grid-template-columns: 116px minmax(0, 1fr); } .dm { width: 116px; height: 64px; }
    .rn-list li { grid-template-columns: minmax(0, 1fr) auto; }
    .rn-bar { grid-column: 1 / -1; grid-row: 2; }
    .rg-h { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; } .rg-m { width: 70px; height: 80px; }
    .ph-loc { width: 22%; right: 10px; top: 10px; }
    .phm { border-radius: 22px; }
}

/* ---------- ลดการเคลื่อนไหว: ทุกอย่างนิ่งที่ค่าจริง (ภาพยังครบ) ---------- */
@media (prefers-reduced-motion: reduce) {
    .prov *, .prov *::before, .prov *::after { animation: none !important; transition: none !important; }
    .js .rv:not(.in) { opacity: 1; transform: none; }
    .js .rv:not(.in) .gz-w, .js .rv:not(.in) .dm-w { transform: none; }
    .js .rv:not(.in) .rn-bar i { transform: scaleX(var(--v)); }
    .pv-sh, .live::after, .hot-s::before { display: none; }
}