/* /nam — แผนที่น้ำสด (ใช้โครง hetu.css) */
body.nam{--hz-dark:#0b4f7a;--hz-red:#c0392b}
.nam-live{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border-radius:99px;padding:5px 11px;font-size:.78rem;font-weight:700;white-space:nowrap}
.nam-live i{width:9px;height:9px;border-radius:50%;background:#37d67a;box-shadow:0 0 0 0 rgba(55,214,122,.7);animation:namPulse 1.8s infinite}
.nam-live.stale i{background:#ffb020;animation:none}.nam-live.off i{background:#ff5a4d;animation:none}
@keyframes namPulse{70%{box-shadow:0 0 0 9px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
.nam-toast{position:fixed;z-index:1200;left:50%;transform:translateX(-50%);top:calc(max(8px,env(safe-area-inset-top)) + 100px);background:#0b4f7a;color:#fff;border-radius:99px;padding:8px 16px;font-size:.86rem;font-weight:700;box-shadow:0 4px 18px rgba(0,0,0,.35);max-width:92vw;text-align:center}
.nam-bar{margin:4px 0 8px;padding:9px 11px;background:#e8f3fb;border-radius:12px;font-size:.84rem}
.nam-bar-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.nam-bar-top b{font-variant-numeric:tabular-nums;color:#0b4f7a;font-size:1rem}
.nam-prog{height:6px;border-radius:9px;background:#cfe2f1;margin:6px 0;overflow:hidden}.nam-prog i{display:block;height:100%;width:0;background:#0b6fb0;transition:width 1s linear}
.nam-bar small{color:#52606d;font-size:.71rem;line-height:1.4;display:block}
.nam-cnt{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.nam-cnt span{border-radius:99px;padding:3px 10px;font-size:.78rem;font-weight:700;color:#fff}
.nam-card{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;width:100%;background:#fff;border:1px solid var(--hz-line);border-left:5px solid var(--c,#868e96);border-radius:12px;padding:8px 10px;margin:0 0 7px;cursor:pointer;font:inherit}
.nam-card.sel{outline:2px solid #0b6fb0}.nam-card.flash{animation:namFlash 2.4s}
@keyframes namFlash{0%{background:#fff3b0}100%{background:#fff}}
.nam-card .nm{font-weight:700;font-size:.92rem}.nam-card .lv{font-size:1.15rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.nam-card .lv small{font-size:.66rem;font-weight:400;color:#777}
.nam-card .mt{grid-column:1/3;font-size:.74rem;color:#6b635a;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center}
.nam-card svg{grid-column:1/3;width:100%;height:34px;display:block}
.nam-up{color:#c0392b;font-weight:700}.nam-dn{color:#1e8449;font-weight:700}.nam-fl{color:#868e96}
.nam-tag{display:inline-block;border-radius:6px;padding:0 6px;color:#fff;font-size:.7rem;font-weight:700}
.nam-pin{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.5);color:#fff;font-size:.82rem;position:relative}
.nam-pin em{position:absolute;right:-7px;top:-8px;font-style:normal;font-size:.62rem;font-weight:800;border-radius:8px;padding:0 4px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);line-height:1.35}
.nam-pin.up em{color:#c0392b}.nam-pin.down em{color:#1e8449}
.nam-pin.pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--c);animation:namRing 1.6s 3}
@keyframes namRing{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.7);opacity:0}}
.nam-lbl{background:rgba(255,255,255,.92);border:0;border-radius:8px;padding:1px 6px;font-size:.72rem;font-weight:700;color:#12315b;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.nam-lbl b{font-variant-numeric:tabular-nums}
.nam-lbl{display:none}.hz-zoomed .nam-lbl{display:block}.hz-zoomed .nam-lbl.nolabel{display:none}
.nam-big{font-size:2.1rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}.nam-big small{font-size:.9rem;font-weight:400;color:#777}
.nam-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.nam-grid div{background:#f4f1ec;border-radius:10px;padding:7px 9px;font-size:.78rem;color:#6b635a}.nam-grid b{display:block;color:#1d1a16;font-size:.98rem}
.nam-chart{width:100%;height:auto;display:block;margin:6px 0;background:#f8fbfd;border-radius:10px}
.nam-tbl{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:6px}.nam-tbl td,.nam-tbl th{padding:3px 6px;border-bottom:1px solid #eee;text-align:right;font-variant-numeric:tabular-nums}.nam-tbl td:first-child,.nam-tbl th:first-child{text-align:left}
.nam-src{font-size:.7rem;color:#777;margin-top:8px;line-height:1.5}
body.nam .hz-sos a:last-child{color:#0b4f7a}
.nam-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ตัวนับออนไลน์/ผู้เข้าชม — ใช้สไตล์ .hz-online/.hz-visits จาก hetu.css; /nam ไม่มีปุ่มแจ้งเหตุ จึงชิดมุมเหมือนกัน */

/* แจ้งเตือนละเอียด + น้ำท้ายเขื่อน */
.nam-box{margin:8px 0;padding:9px 10px;background:#fff;border:1px solid var(--hz-line);border-radius:12px}
.nam-sec{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:.9rem}.nam-sec b{color:#0b4f7a}
.nam-notify{font-size:.74rem;color:#52606d;display:flex;gap:4px;align-items:center;cursor:pointer}
.nam-alert{display:flex;gap:8px;text-align:left;width:100%;border:0;border-left:5px solid #0b6fb0;border-radius:10px;background:#f4f8fb;padding:7px 9px;margin:0 0 6px;cursor:pointer;font:inherit}
.nam-alert.critical{border-left-color:#c0392b;background:#fdecea}.nam-alert.warn{border-left-color:#e8590c;background:#fff3e8}
.nam-alert .tx{display:flex;flex-direction:column;gap:1px}.nam-alert b{font-size:.86rem}.nam-alert small{font-size:.72rem;color:#52606d;line-height:1.4}
.nam-more{width:100%;border:0;background:none;color:#0b6fb0;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;padding:3px}
.nam-dam{font-size:.86rem;padding:6px 8px;background:#f1ebfa;border-radius:10px;margin-bottom:6px}.nam-dam b{font-size:1.1rem;color:#6f42c1}.nam-dam small{display:block;font-size:.7rem;color:#52606d;margin-top:2px}
.nam-dpt{display:grid;grid-template-columns:1fr auto;gap:1px 8px;text-align:left;width:100%;border:1px solid var(--hz-line);border-left:5px solid var(--c,#868e96);border-radius:10px;background:#fff;padding:6px 9px;margin:0 0 6px;cursor:pointer;font:inherit}
.nam-dpt .nm b{font-size:.88rem}.nam-dpt small{font-size:.7rem;color:#52606d;line-height:1.35}.nam-dpt .q{text-align:right;font-size:.74rem}.nam-dpt .q b{font-size:1.1rem}
.nam-dpt .bar{grid-column:1/3;height:5px;border-radius:9px;background:#e3edf3;overflow:hidden}.nam-dpt .bar i{display:block;height:100%}
.nam-dpt .qp,.nam-dpt .mv{grid-column:1/3}
.nam-note{display:block;color:#777;font-size:.68rem;line-height:1.4;margin-top:4px}
.nam-dpt .nm small,.nam-dpt .mv,.nam-dpt .qp{display:block}

/* เทียบเหนือเขื่อน vs ท้ายเขื่อน */
.nam-cmp{background:#f1ebfa;border-radius:12px;padding:8px 10px;margin-bottom:8px}.cmp-t{font-weight:800;font-size:.84rem;color:#4b2a8a;margin-bottom:6px}
.cmp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.cmp-col{background:#fff;border-radius:10px;padding:6px 8px;text-align:center}.cmp-col b{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums;color:#1d1a16}.cmp-col small,.cmp-mid small,.cmp-up,.cmp-off{font-size:.7rem;color:#52606d;line-height:1.4}
.cmp-mid{text-align:center}.cmp-mid>b{display:block;font-size:.95rem;color:#c0392b}.cmp-mid small b{color:#1d1a16}
.cmp-up,.cmp-off{margin-top:6px}.cmp-off b{color:#1d1a16}