/* POPNIX Flood /dams/ น้ำในเขื่อนและอ่างเก็บน้ำวันนี้ (2026-10-05): โหลดต่อจาก lite.css เฉพาะหน้านี้ คลาสขึ้นต้น ang- ทั้งหมด
   ภาพเป็น SVG จาก system_include/dams_art.inc.php สีทั้งหมดเป็น token ด้านล่าง (กลางวัน/กลางคืนตาม prefers-color-scheme)
   น้ำในถังเป็นสีน้ำเสมอ สถานะบอกด้วยขอบถัง ชิป ตัวเลข และคาปิบารา (ไม่มีแถบสีหนาด้านซ้ายของการ์ด); ข้อความไทยหลายบรรทัด line-height >= 1.4
   การเคลื่อนไหวทุกอย่างปิดใต้ prefers-reduced-motion (ท้ายไฟล์) ภาพนิ่งยังอยู่ที่ค่าจริง */
.ang {
    --ang-sky0: #8fcbe8; --ang-sky1: #cbe8f4; --ang-sky2: #f4ead8;
    --ang-sun: #ffcf5a; --ang-sg0: rgba(255, 214, 120, .62); --ang-sg1: rgba(255, 214, 120, 0);
    --ang-m1: #a6c6d3; --ang-m2: #8bbc9b; --ang-m3: #78ab88; --ang-tree: #5f9c74; --ang-tree2: #5a9470;
    --ang-wp: #9ad6ef; --ang-w0: #3d9fcd; --ang-w1: #175b86; --ang-wc: #8fd3f1; --ang-glint: #ffffff;
    --ang-e0: #d6b98a; --ang-e1: #a37a50; --ang-grass: #69a35f; --ang-mud: #5d4b3b; --ang-strata: rgba(60, 35, 15, .2); --ang-peb: rgba(255, 255, 255, .16);
    --ang-rock: #8d9296; --ang-c0: #eceeeb; --ang-c1: #d3d7d6; --ang-c2: #b6bcbd; --ang-lift: rgba(30, 45, 55, .1); --ang-chute: rgba(255, 255, 255, .55);
    --ang-gb: #fbfbf6; --ang-gr: #d9443f; --ang-gt: #24414f;
    --ang-plaque: #33434c; --ang-plaque-t: #f3dfa6;
    --ang-crest: #9aa4a7; --ang-rail: #66737a; --ang-house: #f4efe4; --ang-win: #8dbcd6; --ang-roof: #d4673b; --ang-roof2: #e98d4f; --ang-gold: #d9a63c;
    --ang-pole: #59656b; --ang-bulb: #fff6cf; --ang-lg0: rgba(255, 233, 160, .0); --ang-lg1: rgba(255, 233, 160, 0); --ang-win-on: #8dbcd6;
    --ang-river: #46a6d6; --ang-flow: rgba(255, 255, 255, .95);
    --ang-full: #c8413e; --ang-80: rgba(36, 65, 79, .38);
    --ang-pill: rgba(255, 255, 255, .9); --ang-pill-t: #19323f; --ang-pill-line: rgba(18, 52, 70, .14);
    --ang-bird: #3b5666; --ang-star: #ffffff;
    --ang-c-full: #df4a45; --ang-c-high: #e7a32c; --ang-c-mid: #2f8fc3; --ang-c-old: #a3b3bb; --ang-urc: #ef8a17;
    --ang-glass: rgba(255, 255, 255, .62); --ang-glass-line: rgba(18, 52, 70, .14); --ang-tk-line: #8ea8b5;
    --ang-hero-1: #eaf5fa; --ang-hero-2: #d3e8f1; --ang-blob-1: rgba(31, 111, 153, .16); --ang-blob-2: rgba(231, 163, 44, .13);
}
@media (prefers-color-scheme: dark) {
    .ang {
        --ang-sky0: #04101a; --ang-sky1: #0a2131; --ang-sky2: #143246;
        --ang-sun: #f3efe0; --ang-sg0: rgba(240, 236, 210, .3); --ang-sg1: rgba(240, 236, 210, 0);
        --ang-m1: #0f2637; --ang-m2: #11302b; --ang-m3: #132f29; --ang-tree: #0d2722; --ang-tree2: #0c2420;
        --ang-wp: #1f5d7d; --ang-w0: #17506f; --ang-w1: #061d2e; --ang-wc: #3384ad; --ang-glint: #cfeeff;
        --ang-e0: #3c2b1f; --ang-e1: #1a120c; --ang-grass: #2c5932; --ang-mud: #261d16; --ang-strata: rgba(0, 0, 0, .3); --ang-peb: rgba(255, 255, 255, .07);
        --ang-rock: #2b3135; --ang-c0: #64727a; --ang-c1: #4a575e; --ang-c2: #354148; --ang-lift: rgba(0, 0, 0, .22); --ang-chute: rgba(255, 255, 255, .1);
        --ang-gb: #d8dcd6; --ang-gr: #c9433f; --ang-gt: #cfe2ec;
        --ang-plaque: #172128; --ang-plaque-t: #e9c76a;
        --ang-crest: #6b777d; --ang-rail: #93a1a7; --ang-house: #c7c0b2; --ang-win: #ffd27a; --ang-roof: #9a4a2d; --ang-roof2: #b35d36; --ang-gold: #e3b34c;
        --ang-pole: #8a979d; --ang-bulb: #fff1b8; --ang-lg0: rgba(255, 228, 150, .7); --ang-lg1: rgba(255, 228, 150, 0);
        --ang-river: #3d97c6; --ang-flow: rgba(220, 245, 255, .9);
        --ang-full: #f0716b; --ang-80: rgba(207, 226, 236, .35);
        --ang-pill: rgba(7, 22, 32, .84); --ang-pill-t: #e6f1f6; --ang-pill-line: rgba(150, 205, 232, .2);
        --ang-bird: #9fb9c7; --ang-star: #fdf8e8;
        --ang-c-full: #f06a66; --ang-c-high: #e3b55a; --ang-c-mid: #5fb3e0; --ang-c-old: #46606d; --ang-urc: #f5a23c;
        --ang-glass: rgba(9, 28, 40, .72); --ang-glass-line: rgba(150, 205, 232, .15); --ang-tk-line: #3d5c6d;
        --ang-hero-1: #04111a; --ang-hero-2: #0a2232; --ang-blob-1: rgba(124, 196, 232, .14); --ang-blob-2: rgba(227, 181, 90, .09);
    }
}
.ang .wrap { max-width: 76rem; }
.ang main { padding: 0 0 52px; }
.ang-msg { padding: 36px 16px; }
.ang .b-full { --bc: var(--ang-c-full); --bi: var(--ink-crit); }
.ang .b-high { --bc: var(--ang-c-high); --bi: var(--ink-warn); }
.ang .b-mid { --bc: var(--ang-c-mid); --bi: var(--ink-link); }
.ang .b-na, .ang .b-old { --bc: var(--ang-c-old); --bi: var(--ink-muted); }
.ang-ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ang-ic .ang-icw { fill: currentColor; stroke: none; opacity: .35; }

/* ---------- hero ---------- */
.ang-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; background: linear-gradient(165deg, var(--ang-hero-1) 10%, var(--ang-hero-2)); border-bottom: 1px solid var(--edge); }
.ang-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ang-bg i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); }
.ang-bg i:nth-child(1) { left: -14vmax; top: -20vmax; background: radial-gradient(closest-side, var(--ang-blob-1), transparent); animation: angBlob 28s ease-in-out infinite alternate; }
.ang-bg i:nth-child(2) { right: -16vmax; bottom: -24vmax; background: radial-gradient(closest-side, var(--ang-blob-2), transparent); animation: angBlob 34s ease-in-out -11s infinite alternate-reverse; }
@keyframes angBlob { to { transform: translate(5vmax, 4vmax) scale(1.1); } }
.ang-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "art" "tot" "stats" "rep" "share"; gap: 16px; padding-top: 20px; padding-bottom: 26px; }
.ang-htxt { grid-area: txt; min-width: 0; }
.ang-art { grid-area: art; } .ang-total { grid-area: tot; } .ang-stats { grid-area: stats; } .ang-rep { grid-area: rep; } .ang-share { grid-area: share; }
@media (min-width: 961px) {
    .ang-hero-in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "txt art" "tot art" "stats art" "rep art" "share art"; gap: 16px 40px;
        grid-template-rows: auto auto auto auto 1fr; padding-top: 34px; padding-bottom: 34px; align-items: start; }
    .ang-art { align-self: center; }
}
.ang-crumb { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; font-size: .9em; color: var(--ink-muted); }
.ang-crumb a { font-weight: 600; }
.ang-eye { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--ang-glass);
    border: 1px solid var(--ang-glass-line); color: var(--ink-muted); font-size: .9em; font-weight: 600; line-height: 1.4; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ang-eye .ang-ic { color: var(--accent); }
.ang-eye.stale { color: var(--ink-warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.ang-hero h1 { margin: 0 0 .4em; line-height: 1.15; letter-spacing: -.01em; }
.ang-h1a { display: block; font-size: .56em; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; line-height: 1.4; }
.ang-h1b { display: block; font-size: clamp(2.1rem, 6.4vw, 3.6rem); line-height: 1.4; }
.ang-h1b em { font-style: normal; background: linear-gradient(100deg, var(--ang-c-mid), var(--accent) 45%, var(--ang-c-high)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ang-hero .lead { margin: 0 0 .8em; line-height: 1.55; max-width: 34em; }
.ang-total { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 4px; padding: 12px 14px; border-radius: 18px; background: var(--ang-glass); border: 1px solid var(--ang-glass-line);
    line-height: 1.45; max-width: 34em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ang-total .ang-ic { width: 1.6em; height: 1.6em; color: var(--accent); margin-top: .1em; }
.ang-total b { font-size: 1.45em; color: var(--strong); }
.ang-total small { display: block; color: var(--ink-muted); font-size: .85em; }

/* ฉาก: กล่องสัดส่วนคงที่ ภาพ slice ให้เต็มกล่อง (มือถือเห็นช่วงกลาง x ~150-850) */
.ang-art { position: relative; margin: 0; }
.ang-art-box { position: relative; aspect-ratio: 1000 / 600; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -32px rgba(6, 30, 45, .5), inset 0 0 0 1px var(--ang-glass-line); background: var(--ang-sky1); }
.ang-scene { display: block; width: 100%; height: 100%; font-family: var(--font); }
.ang-art figcaption { margin-top: 10px; font-size: .82em; color: var(--ink-muted); line-height: 1.45; text-align: center; }
@media (max-width: 960px) { .ang-art-box { aspect-ratio: 390 / 345; border-radius: 24px; } }
.ang-card { position: relative; margin: -22px 14px 0; padding: 12px 16px 13px; border-radius: 20px; background: var(--ang-glass); border: 1px solid var(--ang-glass-line);
    box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); line-height: 1.4; }
@media (min-width: 700px) {
    .ang-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "n v" "f m"; align-items: center; gap: 2px 22px; padding: 14px 22px 15px; }
    .ang-ck { grid-area: k; } .ang-cn { grid-area: n; } .ang-cv { grid-area: v; margin: 0; justify-self: end; }
    .ang-cm { grid-area: m; margin: 4px 0 0; justify-content: flex-end; } .ang-cf { grid-area: f; margin-top: 4px; }
}
@media (max-width: 960px) { .ang-card { margin: -18px 10px 0; } }
.ang-ck { margin: 0 0 2px; font-size: .8em; font-weight: 700; color: var(--ink-muted); }
.ang-cn { margin: 0; color: var(--strong); font-weight: 700; font-size: 1.05em; }
.ang-cn small { margin-left: .4em; font-weight: 500; color: var(--ink-muted); font-size: .82em; }
.ang-cv { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 6px; }
.ang-cv b { font-size: 2.6em; line-height: 1.05; color: var(--bi, var(--strong)); font-variant-numeric: tabular-nums; }
.ang-cv span { color: var(--ink-muted); font-size: .9em; }
.ang-cm, .ang-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.ang-cf { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .86em; color: var(--text); }
.ang-cf .ang-ic { color: var(--ang-river); }
.ang-chip { display: inline-flex; align-items: center; gap: 5px; padding: .12em .7em; border-radius: 999px; font-size: .82em; font-weight: 700; line-height: 1.5;
    color: var(--bi, var(--ink-muted)); background: color-mix(in srgb, var(--bc, var(--ang-c-old)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--bc, var(--ang-c-old)) 45%, transparent); }
.ang-chip.urc { --bc: var(--ang-urc); color: var(--ink-warn); }

/* ตัวเลขสรุป */
.ang-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.ang-st { position: relative; display: flex; flex-direction: column; padding: 12px 14px 13px; border-radius: 18px; background: var(--ang-glass); border: 1px solid var(--ang-glass-line);
    box-shadow: var(--shadow); overflow: hidden; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ang-st b { font-size: 2.1em; line-height: 1.1; color: var(--strong); font-variant-numeric: tabular-nums; }
.ang-st span { font-size: .88em; font-weight: 600; color: var(--text); line-height: 1.4; }
.ang-st small { font-size: .78em; color: var(--ink-muted); line-height: 1.4; }
.ang-st.s-full b { color: var(--ink-crit); } .ang-st.s-high b { color: var(--ink-warn); } .ang-st.s-none b { color: var(--ink-muted); }
.ang-st::after { content: ""; position: absolute; right: 12px; top: 12px; width: 18px; height: 24px; border-radius: 6px; border: 2px solid var(--ang-tk-line);
    background: linear-gradient(to top, var(--ang-c-mid) var(--lvl, 55%), transparent 0); opacity: .9; }
.ang-st.s-full::after { --lvl: 100%; border-color: var(--ang-c-full); }
.ang-st.s-high::after { --lvl: 82%; border-color: var(--ang-c-high); }
.ang-st.s-all::after, .ang-st.s-date::after { --lvl: 50%; }
.ang-st.s-full::before { content: ""; position: absolute; right: 9px; top: 9px; width: 24px; height: 8px; border-radius: 50%; border: 2px solid var(--ang-c-full); opacity: 0; animation: angPing 2.6s ease-out infinite; }
.ang-rep { margin: 0; font-size: .86em; color: var(--ink-muted); line-height: 1.45; }
.ang-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ang-share .btn { min-height: 2.9em; }
.ang-shmsg { font-size: .88em; color: var(--ink-ok); font-weight: 600; }
.ang-shtxt { flex: 1 1 100%; min-height: 4.6em; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 14px; background: var(--core); color: var(--strong);
    font: inherit; font-size: max(16px, .92em); line-height: 1.5; resize: vertical; }
.ang-qn a { font-weight: 700; }

/* ---------- ฉากเขื่อน (สีจาก token) ---------- */
.ang-scene .ang-sky0 { stop-color: var(--ang-sky0); } .ang-scene .ang-sky1 { stop-color: var(--ang-sky1); } .ang-scene .ang-sky2 { stop-color: var(--ang-sky2); }
.ang-scene .ang-sg0 { stop-color: var(--ang-sg0); } .ang-scene .ang-sg1 { stop-color: var(--ang-sg1); }
.ang-scene .ang-lg0 { stop-color: var(--ang-lg0); } .ang-scene .ang-lg1 { stop-color: var(--ang-lg1); }
.ang-scene .ang-w0 { stop-color: var(--ang-w0); } .ang-scene .ang-w1 { stop-color: var(--ang-w1); }
.ang-scene .ang-c0 { stop-color: var(--ang-c0); } .ang-scene .ang-c1 { stop-color: var(--ang-c1); } .ang-scene .ang-c2 { stop-color: var(--ang-c2); }
.ang-scene .ang-e0 { stop-color: var(--ang-e0); } .ang-scene .ang-e1 { stop-color: var(--ang-e1); }
.ang-sun-c { fill: var(--ang-sun); }
.ang-moon, .ang-stars { display: none; }
.ang-moon-c { fill: var(--ang-sun); } .ang-moon-s { fill: #d9d2bb; opacity: .55; }
.ang-star { fill: var(--ang-star); animation: angTwinkle 4.2s ease-in-out infinite; }
@media (prefers-color-scheme: dark) { .ang-sun { display: none; } .ang-moon, .ang-stars { display: inline; } }
.ang-m1 { fill: var(--ang-m1); } .ang-m2 { fill: var(--ang-m2); } .ang-m3 { fill: var(--ang-m3); }
.ang-trees { fill: var(--ang-tree); } .ang-trees2 { fill: var(--ang-tree2); }
.ang-wing { fill: none; stroke: var(--ang-bird); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; animation: angFlap .9s ease-in-out infinite; }
.ang-bird { animation: angFly 40s linear infinite; }
.ang-bird:nth-child(2) .ang-wing { animation-duration: .8s; } .ang-bird:nth-child(3) .ang-wing { animation-duration: 1.05s; }
@keyframes angFly { from { transform: translateX(-80px); } to { transform: translateX(1080px); } }
@keyframes angFlap { 50% { transform: scaleY(-.35); } }
.ang-gb { fill: var(--ang-gb); stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
.ang-gr { fill: var(--ang-gr); }
.ang-gt { fill: var(--ang-gt); font-size: 19px; font-weight: 700; text-anchor: end; paint-order: stroke; stroke: var(--ang-pill); stroke-width: 4px; stroke-linejoin: round; }
.ang-wplane { fill: var(--ang-wp); }
.ang-wcrest { fill: var(--ang-wc); }
.ang-wbody { opacity: .93; }
.ang-glint { stroke: var(--ang-glint); stroke-width: 2.6; stroke-linecap: round; opacity: .2; animation: angGlint 3.8s ease-in-out infinite; }
.ang-wave { animation: angWave 3.2s linear infinite; }
.ang-ray { fill: var(--ang-glint); opacity: .07; animation: angRay 7s ease-in-out infinite; }
@keyframes angRay { 50% { opacity: .16; } }
.ang-fish path { fill: var(--ang-w1); opacity: .5; } .ang-fish .ang-fey { fill: var(--ang-glint); opacity: .7; }
.ang-fish { animation: angSwim 9s ease-in-out infinite; }
@keyframes angSwim { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-34px); } }
@keyframes angWave { to { transform: translateX(40px); } }
.ang-wtr { animation: angRise 2.8s cubic-bezier(.22, .8, .24, 1) .25s both; }
@keyframes angRise { from { transform: translateY(var(--rise)); } }
.ang-earth { stroke: none; }
.ang-strata { fill: none; stroke: var(--ang-strata); stroke-width: 2; stroke-dasharray: 10 8; }
.ang-peb { fill: var(--ang-peb); }
.ang-grass { fill: none; stroke: var(--ang-grass); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ang-mud { fill: none; stroke: var(--ang-mud); stroke-width: 4; stroke-linejoin: round; }
.ang-rv { fill: none; stroke: var(--ang-river); stroke-width: var(--fw); stroke-linecap: round; stroke-linejoin: round; }
.ang-rvf { fill: none; stroke: var(--ang-flow); stroke-width: calc(var(--fw) * .34); stroke-linecap: round; stroke-dasharray: 3 22; animation: angFlow 1.6s linear infinite; }
.ang-cur .ang-rv { opacity: .45; }
.ang-inriver { animation: angFade 1s ease 2.6s both; }   /* ลำน้ำเข้าโผล่หลังน้ำในอ่างขึ้นถึงระดับจริง (ไม่ลอยเหนือน้ำระหว่างเติม) */
.ang-foam { fill: none; stroke: var(--ang-flow); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 5; animation: angFlow .7s linear infinite; }
@keyframes angFlow { to { stroke-dashoffset: -25; } }
.ang-rock { fill: var(--ang-rock); }
.ang-dam { stroke: none; }
.ang-lift { fill: none; stroke: var(--ang-lift); stroke-width: 1.6; }
.ang-chute { fill: var(--ang-chute); }
.ang-step { fill: none; stroke: var(--ang-lift); stroke-width: 2; }
.ang-dface { fill: none; stroke: rgba(0, 0, 0, .16); stroke-width: 2; }
.ang-sgate rect { fill: var(--ang-rail); } .ang-sgate path { stroke: var(--ang-c0); stroke-width: 1.2; }
.ang-plaque rect { fill: var(--ang-plaque); stroke: var(--ang-gold); stroke-width: 1.2; }
.ang-plaque text { fill: var(--ang-plaque-t); font-weight: 700; text-anchor: middle; }
.ang-outlet { fill: #11222c; }
.ang-crest { fill: var(--ang-crest); }
.ang-rail { fill: none; stroke: var(--ang-rail); stroke-width: 1.6; }
.ang-house rect { fill: var(--ang-house); } .ang-house .ang-win { fill: var(--ang-win); }
.ang-roof { fill: var(--ang-roof); } .ang-roof2 { fill: none; stroke: var(--ang-roof2); stroke-width: 3; stroke-linejoin: round; }
.ang-chofa { fill: none; stroke: var(--ang-gold); stroke-width: 2.4; stroke-linecap: round; }
.ang-lpole { stroke: var(--ang-pole); stroke-width: 2.4; }
.ang-lbulb { fill: var(--ang-bulb); }
.ang-lglow { animation: angGlow 4s ease-in-out infinite; }
.ang-fpole { stroke: var(--ang-pole); stroke-width: 2; }
.ang-fwave { transform-box: fill-box; transform-origin: 0 50%; animation: angFlag 2.4s ease-in-out infinite; }
@keyframes angFlag { 50% { transform: skewY(-5deg) scaleX(.94); } }
.ang-sala-b { fill: var(--ang-house); } .ang-sala-p { stroke: #8a5a33; stroke-width: 3; }
.ang-l100 { fill: none; stroke: var(--ang-full); stroke-width: 2.6; stroke-dasharray: 10 7; }
.ang-l100t { fill: var(--ang-full); font-size: 20px; font-weight: 700; text-anchor: start; paint-order: stroke; stroke: var(--ang-pill); stroke-width: 5px; stroke-linejoin: round; }
.ang-l80 { fill: none; stroke: var(--ang-80); stroke-width: 2; stroke-dasharray: 5 7; }
.ang-l80t { fill: var(--ang-gt); opacity: .8; font-size: 18px; font-weight: 700; text-anchor: start; paint-order: stroke; stroke: var(--ang-pill); stroke-width: 4px; stroke-linejoin: round; }
.ang-mark path:first-child { stroke: #ff7a52; stroke-width: 3; stroke-linecap: round; }
.ang-mark .ang-mk { fill: #ff7a52; stroke: #fff; stroke-width: 1.5; }
.ang-mark { animation: angFade .8s ease 2.6s both; }
.ang-pill rect { fill: var(--ang-pill); stroke: var(--ang-pill-line); stroke-width: 1.2; }
.ang-pill circle { fill: var(--ang-river); }
.ang-pill text { fill: var(--ang-pill-t); font-size: 21px; font-weight: 700; }
.ang-pill { animation: angFade .8s ease 2.9s both; }
.ang-nodata rect { fill: var(--ang-pill); stroke: var(--ang-pill-line); } .ang-nodata text { fill: var(--ang-pill-t); font-size: 24px; font-weight: 700; text-anchor: middle; }
.ang-hcapy > .ang-cp { animation: angPop 1s cubic-bezier(.3, 1.4, .5, 1) 2.5s both; transform-box: fill-box; transform-origin: 50% 80%; }
@keyframes angPop { from { opacity: 0; transform: translateY(-40px) scale(.7); } }
@keyframes angFade { from { opacity: 0; } }
@keyframes angTwinkle { 50% { opacity: .25; } }
@keyframes angGlint { 50% { opacity: .85; } }
@keyframes angGlow { 50% { opacity: .62; } }
@keyframes angPing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

/* คาปิบารา (ฉากและถัง): เรือโคลง ใบเรือ/ธงพลิ้ว กะพริบตา คลื่นหน้าลำ */
.ang-cp { color: var(--ang-wc); }   /* คลื่นหน้าลำเรือ/ห่วงยาง = สีผิวน้ำของที่ที่ลอยอยู่ */
.ang-tk .ang-cp { color: color-mix(in srgb, var(--ang-c-mid) 60%, #fff); }
.ang-mtc .ang-cp { color: color-mix(in srgb, var(--ang-c-mid) 50%, #fff); }
.ang-bob { transform-box: fill-box; transform-origin: 50% 88%; animation: angBob 3.4s ease-in-out infinite; }
.ang-ringc .ang-bob { animation-name: angBobR; animation-duration: 3s; }
.ang-sail { transform-box: fill-box; transform-origin: 0 50%; animation: angSail 2.3s ease-in-out infinite; }
.ang-flag { transform-box: fill-box; transform-origin: 0 50%; animation: angFlagS 1.7s ease-in-out infinite; }
.ang-ceye { transform-box: fill-box; transform-origin: center; animation: angBlink 5.2s infinite; }
.ang-cpw { opacity: .88; animation: angCw 2.4s linear infinite; }
@keyframes angBob { 0%, 100% { transform: translate(-1.5px, 0) rotate(-3.5deg); } 50% { transform: translate(1.5px, 3px) rotate(3.5deg); } }
@keyframes angBobR { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(3px) rotate(2deg); } }
@keyframes angSail { 50% { transform: scaleX(.84); } }
@keyframes angFlagS { 50% { transform: skewY(-7deg); } }
@keyframes angBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes angCw { to { transform: translateX(-12px); } }

/* ---------- อ่านก่อน ---------- */
.ang-notes { background: var(--core); border-bottom: 1px solid var(--edge); }
.ang-nl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 4px 28px; list-style: none; margin: 0; padding: 16px 0; }
.ang-nl li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.ang-nl .ang-ic { width: 1.6em; height: 1.6em; color: var(--accent); margin-top: .1em; }
.ang-nl p { margin: 0; font-size: .92em; line-height: 1.5; color: var(--text); }
.ang-nl b { color: var(--strong); }

/* ---------- ค้นหา / เลือกจังหวัด ---------- */
.ang-find-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; padding-top: 22px; padding-bottom: 4px; }
@media (min-width: 801px) { .ang-find-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.ang-q label, .ang-pick label { display: block; margin: 0 0 6px; font-weight: 700; color: var(--strong); }
.ang-q input, .ang-pick select { width: 100%; min-height: 3em; padding: .35em 1em; border: 2px solid var(--edge); border-radius: 14px; background: var(--core); color: var(--strong);
    font: inherit; font-size: max(16px, 1em); }
.ang-q input:focus, .ang-pick select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.ang-qn { margin: 6px 0 0; min-height: 1.4em; font-size: .88em; color: var(--ink-muted); }
.ang-pick-r { display: flex; gap: 8px; }
.ang-pick-r select { flex: 1 1 auto; min-width: 0; }

/* ---------- ส่วนต่าง ๆ ---------- */
.ang-sec { margin: 30px 0 0; scroll-margin-top: 12px; }
.ang-sh h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 .25em; font-size: 1.55em; }
.ang-sh h2 em, .ang-lh em { font-style: normal; color: var(--accent); }
.ang-sh p { margin: 0 0 14px; color: var(--ink-muted); font-size: .94em; line-height: 1.5; max-width: 50em; }
.ang-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 8px 22px; list-style: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 16px;
    background: var(--core); border: 1px solid var(--edge); font-size: .84em; color: var(--ink-muted); line-height: 1.45; }
.ang-legend li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: center; }
.ang-lgi { display: flex; align-items: center; justify-content: center; min-height: 26px; }
.ang-lg-t { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.ang-lg-t i { display: block; width: 9px; border-radius: 3px; border: 1.6px solid var(--ang-tk-line); background: linear-gradient(to top, var(--ang-c-mid) 60%, transparent 0); }
.ang-lg-t .t1 { height: 11px; } .ang-lg-t .t2 { height: 16px; } .ang-lg-t .t3 { height: 22px; }
.ang-lg-l { display: inline-block; width: 22px; border-top: 2px dashed var(--strong); opacity: .6; }
.ang-lg-cs { display: grid; grid-template-columns: repeat(2, 10px); gap: 3px; }
.ang-lg-cs i { display: block; width: 10px; height: 10px; border-radius: 3px; border: 2.2px solid var(--bc); background: color-mix(in srgb, var(--bc) 18%, transparent); }
.ang-lg-cs .b-old { border-style: dashed; }
.ang-lg-f { display: inline-block; width: 0; height: 0; border-left: 11px solid var(--ang-urc); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ang-lg-a { display: inline-block; width: 22px; height: 2px; background: var(--ang-river); position: relative; }
.ang-lg-a::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 7px solid var(--ang-river); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ang-lg-k { display: block; width: 34px; height: 28px; overflow: visible; }

/* ถังของเขื่อนใหญ่ */
.ang-tanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px 8px; align-items: end; list-style: none; margin: 0; padding: 0; }
.ang-ti:has(> details[open]) { grid-column: 1 / -1; }
.ang-x > summary { list-style: none; cursor: pointer; }
.ang-x > summary::-webkit-details-marker { display: none; }
.ang-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; height: 100%; padding: 4px 4px 6px; border-radius: 18px; border: 1px solid transparent; text-align: center;
    transition: background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent; }
.ang-tile:hover { background: var(--core); border-color: var(--edge); transform: translateY(-2px); }
.ang-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ang-tk { display: block; width: 100%; max-width: 132px; height: auto; overflow: visible; }
.ang-tnb { display: flex; flex-direction: column; align-items: center; min-height: 3.62em; }   /* ชื่อ 2 บรรทัด + จังหวัด: ฐานถังในแถวเดียวกันตรงกัน */
.ang-tn { font-weight: 700; color: var(--strong); font-size: .9em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ang-tv { margin-top: 2px; color: var(--bi); line-height: 1.2; }
.ang-tv b { font-size: 1.45em; font-variant-numeric: tabular-nums; } .ang-tv small { font-size: .8em; font-weight: 700; }
.ang-tpv { font-size: .78em; color: var(--ink-muted); line-height: 1.4; }
.ang-old { margin-top: 3px; padding: 0 .6em; border-radius: 999px; font-size: .74em; font-weight: 700; color: var(--ink-warn); background: color-mix(in srgb, var(--warn) 14%, transparent); line-height: 1.6; }
.ang-tsh { fill: rgba(10, 40, 60, .12); }
.ang-tg { fill: var(--ang-glass); }
.ang-to { fill: none; stroke: var(--ang-tk-line); stroke-width: 2.4; }
.b-full .ang-to { stroke: var(--ang-c-full); stroke-width: 3.6; }
.b-high .ang-to { stroke: var(--ang-c-high); stroke-width: 3; }
.b-old .ang-to, .b-na .ang-to { stroke-dasharray: 5 4; }
.ang-thl { stroke: rgba(255, 255, 255, .55); stroke-width: 3.4; stroke-linecap: round; }
.ang-twf { fill: var(--ang-c-mid); opacity: .92; }
.ang-twv { fill: color-mix(in srgb, var(--ang-c-mid) 60%, #fff); animation: angTw 2.6s linear infinite; }
.b-old .ang-twf, .b-na .ang-twf { fill: var(--ang-c-old); } .b-old .ang-twv { fill: color-mix(in srgb, var(--ang-c-old) 60%, #fff); }
@keyframes angTw { to { transform: translateX(-18px); } }
.ang-t100 { stroke: var(--strong); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: .62; }
.ang-tna { fill: var(--ink-muted); font-size: 26px; font-weight: 700; text-anchor: middle; }
.ang-turcl { stroke: var(--ang-urc); stroke-width: 1.6; stroke-dasharray: 2 2.5; }
.ang-turcp { fill: none; stroke: var(--ang-urc); stroke-width: 1.8; }
.ang-turcf { fill: var(--ang-urc); }
.ang-tring { fill: none; stroke: var(--ang-c-full); stroke-width: 2.4; transform-box: fill-box; transform-origin: center; animation: angTring 2.8s ease-out infinite; }
@keyframes angTring { 0% { transform: scale(.85); opacity: .85; } 80%, 100% { transform: scale(1.3); opacity: 0; } }
.ang-tp { stroke: var(--ang-river); stroke-width: 5; stroke-linecap: round; opacity: .55; }
.ang-tpf { stroke: var(--ang-flow); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; animation: angTpf 1.2s linear infinite; }
@keyframes angTpf { to { stroke-dashoffset: -9; } }
.ang-tah { fill: var(--ang-river); }
.ang-tnum { fill: var(--strong); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ang-tnr { text-anchor: end; }
.z0 .ang-tp, .z0 .ang-tah { stroke: var(--ang-c-old); fill: var(--ang-c-old); }
.z0 .ang-tpf { display: none; }
.z0 .ang-tnum { fill: var(--ink-muted); }

/* แถบจุดรายภาค */
.ang-rgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 12px; list-style: none; margin: 0 0 22px; padding: 0; }
.ang-rg { padding: 14px 16px 12px; border-radius: 20px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.ang-rg h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 .2em; font-size: 1.08em; }
.ang-rg h3 small { font-size: .8em; font-weight: 600; color: var(--ink-muted); }
.ang-rgc { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 6px; font-size: .84em; color: var(--ink-muted); line-height: 1.4; }
.ang-rgc span { display: inline-flex; align-items: baseline; gap: 4px; }
.ang-rgc b { color: var(--bi); font-size: 1.15em; }
.ang-strip { display: block; width: 100%; height: auto; }
.ang-sx { stroke: var(--edge); stroke-width: 1.4; } .ang-sx.s100 { stroke: var(--ang-c-full); stroke-width: 2; stroke-dasharray: 4 3; }
.ang-sxt { fill: var(--ink-muted); font-size: 21px; text-anchor: middle; } .ang-sxt.s100 { fill: var(--ink-crit); font-weight: 700; }
.ang-sxt.s0 { text-anchor: start; } .ang-sxt.s150 { text-anchor: end; }
.ang-sfull { fill: color-mix(in srgb, var(--ang-c-full) 7%, transparent); }
.ang-sbase { stroke: var(--line-2); stroke-width: 1.4; }
.ang-sd { fill: var(--bc); transition: transform .7s cubic-bezier(.3, 1.3, .5, 1), opacity .5s ease; transition-delay: calc(var(--k) * 18ms + .1s); }
.ang-sd.b-old, .ang-sd.b-na { fill: none; stroke: var(--bc); stroke-width: 1.4; }
.ang-rgl { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .92em; }

/* แถวของอ่างขนาดกลาง */
.ang-lh { display: flex; align-items: baseline; gap: 8px; margin: 30px 0 10px; font-size: 1.2em; }
.ang-lnote { margin: -4px 0 14px; font-size: .84em; color: var(--ink-muted); line-height: 1.5; }
.ang-lnote .ang-uf { margin: 0 2px; }
html:not(.js) .ang-js, html.ang-nodlg .ang-js { display: none; }
.ang-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.ang-ri:has(> details[open]) { grid-column: 1 / -1; }
.ang-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 9px 14px 9px 12px; border-radius: 16px;
    background: var(--core); border: 1px solid var(--edge); transition: border-color .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent; }
.ang-row:hover { border-color: color-mix(in srgb, var(--bc) 55%, var(--edge)); transform: translateY(-1px); }
.ang-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ang-rn { min-width: 0; line-height: 1.4; }
.ang-rn b { color: var(--strong); font-weight: 700; }
.ang-rn small, .ang-rp small { display: block; color: var(--ink-muted); font-size: .8em; }
.ang-rp { text-align: right; line-height: 1.3; white-space: nowrap; }
.ang-rp b { color: var(--bi); font-size: 1.15em; font-variant-numeric: tabular-nums; } .ang-rp b small { display: inline; font-size: .75em; color: inherit; }
.ang-uf { display: inline-block; width: 0; height: 0; margin-left: 6px; border-left: 9px solid var(--ang-urc); border-top: 5px solid transparent; border-bottom: 5px solid transparent; vertical-align: .05em; }
.ang-mt { position: relative; display: block; width: 22px; height: 32px; border-radius: 7px; border: 2px solid var(--ang-tk-line); background: var(--ang-glass); overflow: hidden; }
.ang-mt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 80%; border-top: 1.5px dashed var(--strong); opacity: .5; }
.ang-mt i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f, 0) * 100%); background: linear-gradient(to top, color-mix(in srgb, var(--ang-c-mid) 80%, #003), var(--ang-c-mid)); }
.ang-mt i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: color-mix(in srgb, var(--ang-c-mid) 50%, #fff); }
.ang-mt.b-full { border-color: var(--ang-c-full); } .ang-mt.b-high { border-color: var(--ang-c-high); }
.ang-mt.b-old i, .ang-mt.b-na i { background: var(--ang-c-old); }
.ang-rows .ang-more { grid-column: 1 / -1; }
.ang-more .btn { width: 100%; }
.ang-rgd { margin: 0 0 10px; border-radius: 18px; background: color-mix(in srgb, var(--core) 60%, transparent); border: 1px solid var(--edge); scroll-margin-top: 12px; }
.ang-rgd > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 16px; cursor: pointer; font-weight: 700; color: var(--strong); list-style: none; }
.ang-rgd > summary::-webkit-details-marker { display: none; }
.ang-rgd > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.4px solid var(--ink-muted); border-bottom: 2.4px solid var(--ink-muted); transform: rotate(45deg) translateY(-3px); transition: transform .25s ease; }
.ang-rgd[open] > summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.ang-rgd > summary small { margin-left: auto; font-weight: 600; color: var(--ink-muted); font-size: .82em; }
.ang-rgd > .ang-rows { padding: 0 10px 12px; }
.ang-none { margin: 14px 0; padding: 14px 16px; border-radius: 16px; background: var(--core); border: 1px dashed var(--edge); color: var(--ink-muted); }

/* รายละเอียด (ไม่มี JS: เปิดในที่, มี JS: ย้ายไปหน้าต่าง) */
.ang-x[open] > .ang-pn { margin: 8px 0 4px; padding: 16px 18px; border-radius: 18px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); text-align: left; }
.ang-pn-t { margin: 0 0 .1em; font-size: 1.2em; }
.ang-pn-s { margin: 0 0 8px; color: var(--ink-muted); font-size: .88em; line-height: 1.45; }
.ang-pn-v { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; color: var(--bi); }
.ang-pn-v b { font-size: 2.3em; line-height: 1.05; font-variant-numeric: tabular-nums; } .ang-pn-v span { color: var(--ink-muted); font-size: .92em; }
.ang-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 8px 18px; margin: 10px 0; }
.ang-dl div { padding: 6px 0; border-bottom: 1px solid var(--edge); }
.ang-dl dt { font-size: .8em; color: var(--ink-muted); line-height: 1.4; }
.ang-dl dd { margin: 0; color: var(--strong); font-weight: 600; line-height: 1.45; }
.ang-pn-a { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 4px; }
.ang-pn-a a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.ang-pn-f { margin: 4px 0 0; font-size: .8em; color: var(--ink-muted); }
.ang-pn-sh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 6px; }
.ang-pn-sh .btn { min-height: 2.9em; }
.ang-spk-slot:empty { display: none; }
.ang-spk-slot { margin: 6px 0 4px; }
.ang-spk-slot p { margin: 0 0 2px; font-size: .8em; color: var(--ink-muted); }
.ang-spk { display: block; width: 100%; max-width: 340px; height: auto; }
.ang-spk100 { stroke: var(--ang-c-full); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .7; }
.ang-spkl { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ang-spkd circle { fill: var(--core); stroke: var(--accent); stroke-width: 2; }
.ang-spkt { fill: var(--ink-muted); font-size: 11px; }

/* หน้าต่างรายละเอียด: มือถือ = แผ่นเลื่อนขึ้นจากล่าง, จอกว้าง = กลางจอ */
.ang-dlg { width: min(36rem, 100vw); max-width: 100vw; max-height: min(88vh, 46rem); margin: auto auto 0; padding: 0; border: 0; border-radius: 26px 26px 0 0; background: var(--core);
    color: var(--text); box-shadow: 0 -20px 60px -20px rgba(0, 20, 30, .5); overflow: hidden; }
.ang-dlg[open] { animation: angSheet .42s cubic-bezier(.2, .9, .25, 1); }
.ang-dlg::backdrop { background: rgba(4, 18, 28, .48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (min-width: 700px) { .ang-dlg { margin: auto; border-radius: 26px; } .ang-dlg[open] { animation-name: angPopIn; } }
@keyframes angSheet { from { transform: translateY(40%); opacity: .4; } }
@keyframes angPopIn { from { transform: translateY(20px) scale(.97); opacity: 0; } }
.ang-dlg-in { position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
.ang-dlg-in::before { content: ""; display: block; width: 44px; height: 5px; margin: -6px auto 10px; border-radius: 3px; background: var(--edge); }
@media (min-width: 700px) { .ang-dlg-in::before { display: none; } }
.ang-close { position: absolute; right: 10px; top: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--strong); cursor: pointer; }
.ang-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ang-dlg-b .ang-pn { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.ang-dlg-b .ang-pn-t { padding-right: 48px; }
.ang-dlg-art { display: flex; justify-content: center; align-items: flex-end; height: 190px; margin: 0 0 8px; border-radius: 18px;
    background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--ang-c-mid) 12%, transparent), transparent 70%); }
.ang-dlg-art .ang-tk { width: 150px; max-width: none; height: auto; max-height: 186px; }
.ang-mtw { position: relative; width: 76px; height: 112px; margin-bottom: 18px; }
.ang-mtw .ang-mt { width: 100%; height: 100%; border-radius: 22px; border-width: 3px; }
.ang-mtw .ang-mt::after { border-top-width: 2px; }
.ang-mtw .ang-mt i::before { height: 6px; animation: angMtw 2.4s ease-in-out infinite; }
.ang-mtc { position: absolute; left: 50%; bottom: calc(var(--f, 0) * (100% - 6px) + 3px); width: 96px; transform: translate(-50%, 24%); }
.ang-mtc svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes angMtw { 50% { transform: translateY(2px); opacity: .7; } }

/* อ่านตัวเลขอย่างไร */
.ang-about { padding-top: 6px; }
.ang-about h2 { font-size: 1.4em; }
.ang-defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 10px; margin: 0 0 14px; }
.ang-defs div { padding: 12px 14px; border-radius: 16px; background: var(--core); border: 1px solid var(--edge); }
.ang-defs dt { font-weight: 700; color: var(--strong); margin: 0 0 2px; }
.ang-defs dd { margin: 0; font-size: .92em; line-height: 1.5; }
.ang-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 10px; }
.ang-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- เผยตอนเลื่อนถึง (มีเฉพาะเมื่อ 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(14px); }
.ang-tw, .ang-tcap { transition: transform 1.6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; transition-delay: calc(var(--i, 0) * 60ms + .15s); }
.js .rv:not(.in) .ang-tw { transform: translateY(var(--h)); }
.js .rv:not(.in) .ang-tcap { transform: translateY(var(--h)); opacity: 0; }
.js .rv:not(.in) .ang-sd { transform: translateY(-26px); opacity: 0; }
.paused *, .ang-hid * { animation-play-state: paused !important; }

/* ---------- จอแคบ ---------- */
@media (max-width: 440px) { .ang-eye { font-size: .8em; padding-right: 12px; } }
@media (max-width: 640px) {
    .ang-hero h1 { font-size: 1.6em; }
    .ang-st b { font-size: 1.75em; }
    .ang-tanks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 4px; }
    .ang-rows { grid-template-columns: minmax(0, 1fr); }
    .ang-rgs { grid-template-columns: minmax(0, 1fr); }
    .ang-legend { font-size: .8em; gap: 6px 16px; }
    .ang-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
}

/* ---------- ลดการเคลื่อนไหว: ทุกอย่างนิ่งที่ค่าจริง ---------- */
@media (prefers-reduced-motion: reduce) {
    .ang *, .ang *::before, .ang *::after { animation: none !important; transition: none !important; }
    .js .rv:not(.in) { opacity: 1; transform: none; }
    .js .rv:not(.in) .ang-tw, .js .rv:not(.in) .ang-tcap, .js .rv:not(.in) .ang-sd { transform: none; opacity: 1; }
    .ang-bird, .ang-st.s-full::before, .ang-tring { display: none; }
}

/* ---------- สถานะจาก dams.js ---------- */
.ang [hidden] { display: none !important; }
.ang-rows:not(.ang-all):not(.ang-find-on) > .ang-pgh, .ang-find-on > .ang-more { display: none; }
.ang-empty-q .ang-legend, .ang-empty-q .ang-tanks, .ang-empty-q .ang-rgs, .ang-empty-q .ang-lh { display: none; }

/* หัวข้อที่ขึ้นบรรทัดใหม่ได้ (ชื่อจังหวัด/อ่างยาว) ต้องห่างพอให้สระบน-ล่างไม่ทับกัน (lite.css ตั้งหัวข้อไว้ 1.25) */
.ang .ang-sh h2, .ang .ang-lh, .ang .ang-rg h3, .ang .ang-pn-t, .ang .ang-about h2, .ang-msg h1 { line-height: 1.4; }