/* POPNIX Flood ข่าวน้ำเช้านี้ (/brief/, 2026-10-05): โหลดต่อจาก lite.css เฉพาะหน้านี้ หน้าตาแบบหนังสือพิมพ์ฉบับเช้า
   ภาพเป็น SVG จาก brief_art.inc.php (สีแบบ attribute สำหรับ PNG ถูกทับด้วย class ที่นี่ตามธีมสว่าง/มืด)
   ทุก loop animation และการเผยตอนเลื่อนถึงปิดใต้ prefers-reduced-motion (ท้ายไฟล์) ภาพนิ่งคือภาพสุดท้ายของ animation
   ห้ามแถบสีหนาด้านซ้ายของการ์ด (กติกาของเว็บ) ใช้ตัวเลข ชิป จุดสี หลอดวัดแทน; ข้อความไทยหลายบรรทัด line-height >= 1.4 */
.br {
    --br-paper: #fbf7ee; --br-paper-2: #f4ecdc; --br-card: #fffdf8; --br-ink: #1b2733; --br-ink-2: #34444f; --br-muted: #586773;
    --br-rule: #d4c6ab; --br-rule-2: #e8dfcc; --br-shadow: 0 1px 0 rgba(80, 60, 20, .05), 0 14px 30px -20px rgba(80, 60, 20, .35);
    --br-l-bank: #9e1d2b; --br-l-crit: #cc3d3b; --br-l-warn: #9a5d00; --br-l-ok: #17695f; --br-l-unk: #6b7a85;
    --br-d-bank: #b3222f; --br-d-crit: #e4524c; --br-d-warn: #f0b23e; --br-d-ok: #3aa596; --br-d-unk: #a3b3bb;
    --br-m-calm: #1f7d72; --br-m-watch: #b8760f; --br-m-heavy: #cc3d3b; --br-m-unknown: #6b7c88;
    /* ฉากรุ่งเช้า */
    --br-sky0: #3d5a9e; --br-sky1: #9c86b8; --br-sky2: #f2a98f; --br-sky3: #ffd9a1; --br-sun: #fff6d6; --br-glow: #ffcf8a;
    --br-far: #a690b5; --br-farwin: #ffe7b8; --br-mid: #7a6c93; --br-win: #ffe1a0; --br-tree: #5f6f86; --br-cloud: #ffd9cc; --br-storm: #6f7487;
    --br-temple: #6e5f86; --br-rim: #e1b25a; --br-roof: #b5645a; --br-lit: #ffe1a0;
    --br-coping: #d8cfd6; --br-wall0: #b3a7bb; --br-wall1: #8e839f; --br-seam: #3a2f4f; --br-gauge: #f8f5ee; --br-tick: #d0453f;
    --br-water0: #5aa6cb; --br-water1: #1d5a80; --br-wave2: #84bfdc; --br-crest: #ffffff; --br-boat: #2b2f45; --br-bird: #4f4766;
    --br-ln-warn: #f0b23e; --br-ln-crit: #e9564f; --br-art-ink: #1d2735; --br-halo: #fff3e3; --br-rain: #eef5fa;
    /* ภาพประกอบของแต่ละส่วน */
    --br-glass: rgba(255, 255, 255, .6); --br-glass-line: rgba(27, 39, 51, .22); --br-w-top: #7fc0e0; --br-w-deep: #2a7aa6;
    --br-map: #efe6d4; --br-map-line: #cdbd9e; --br-road: #b9ad98; --br-fig: #4d5b66;
    background: var(--br-paper); color: var(--br-ink);
}
@media (prefers-color-scheme: dark) {
    .br {
        --br-paper: #0b151d; --br-paper-2: #0f1d27; --br-card: #102029; --br-ink: #eaf1f5; --br-ink-2: #cbd8df; --br-muted: #9fb2be;
        --br-rule: #2c4352; --br-rule-2: #1c3240; --br-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 36px -22px rgba(0, 0, 0, .9);
        --br-l-bank: #ff8a8f; --br-l-crit: #f58a86; --br-l-warn: #e8c070; --br-l-ok: #62cbb9; --br-l-unk: #a9bfcb;
        --br-d-bank: #ff5b66; --br-d-crit: #f06a66; --br-d-warn: #e3b55a; --br-d-ok: #4dbfad; --br-d-unk: #56707e;
        --br-m-calm: #4dbfad; --br-m-watch: #e3b55a; --br-m-heavy: #f06a66; --br-m-unknown: #8aa0ab;
        --br-sky0: #081230; --br-sky1: #262552; --br-sky2: #6f3d63; --br-sky3: #d9806a; --br-sun: #ffe4b5; --br-glow: #f0a070;
        --br-far: #2a2648; --br-farwin: #ffcf7a; --br-mid: #1b1934; --br-win: #ffcf7a; --br-tree: #141a2e; --br-cloud: #5a4a74; --br-storm: #3a3f55;
        --br-temple: #231f3d; --br-rim: #e3b55a; --br-roof: #43293a; --br-lit: #ffcf7a;
        --br-coping: #3a3a58; --br-wall0: #2a2a45; --br-wall1: #18182b; --br-seam: #000000; --br-gauge: #d3dde2; --br-tick: #d9463f;
        --br-water0: #1f6386; --br-water1: #051d2a; --br-wave2: #2a7396; --br-crest: #bfe6fa; --br-boat: #03101a; --br-bird: #c8bfe0;
        --br-ln-warn: #e3b55a; --br-ln-crit: #f06a66; --br-art-ink: #f4f8fb; --br-halo: #0b1525; --br-rain: #bcd6e6;
        --br-glass: rgba(16, 32, 41, .6); --br-glass-line: rgba(200, 225, 240, .25); --br-w-top: #3f9bc7; --br-w-deep: #0f4766;
        --br-map: #13232e; --br-map-line: #2b4352; --br-road: #3a4650; --br-fig: #b9c8d1;
    }
}
body.br { background: var(--br-paper); color: var(--br-ink); }
.br .top { background: var(--br-paper); border-bottom: 1px solid var(--br-rule-2); }
.br .br-topw { max-width: 58rem; }
.br main { padding: 0 0 36px; }
.br .br-wrap { width: 100%; max-width: 58rem; margin: 0 auto; padding: 0 16px; }
.br a { color: var(--ink-link); }
.br .br-fine { color: var(--br-muted); font-size: .84em; line-height: 1.55; margin: .6em 0 0; }
.br .br-meta { color: var(--br-muted); font-size: .86em; line-height: 1.5; margin: .25em 0 0; }
.br .br-txt { line-height: 1.6; margin: 0 0 .55em; text-wrap: pretty; }
.br .br-h3 { font-size: 1.1em; margin: 1.2em 0 .6em; line-height: 1.4; }
.br .br-h3 small { display: block; font-size: .78em; font-weight: 600; color: var(--br-muted); }
.br .br-more { margin: .8em 0 0; font-weight: 700; }
.br .br-more a { display: inline-flex; align-items: center; min-height: 44px; }
.br .br-more a::after { content: "\00a0→"; }
.br .br-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.br .btn { min-height: 48px; }

/* ---------- หัวหนังสือพิมพ์ ---------- */
.br .br-top { padding-top: 14px; padding-bottom: 2px; background-image: radial-gradient(color-mix(in srgb, var(--br-ink) 7%, transparent) .7px, transparent .9px); background-size: 4px 4px; }   /* เม็ดสกรีนจาง ๆ แบบหนังสือพิมพ์ */
/* ชื่อฉบับพิมพ์ออกมาจากซ้ายไปขวาครั้งเดียว (ขอบตัดเผื่อสระ/วรรณยุกต์ที่เลยกล่องข้อความ) */
.br .br-title { animation: brPrint 1.2s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes brPrint { from { clip-path: inset(-40% 100% -40% -4%); } to { clip-path: inset(-40% -4% -40% -4%); } }
.br .br-flagline { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding-bottom: 7px; border-bottom: 4px double var(--br-ink);
    font-size: .76em; font-weight: 700; letter-spacing: .08em; color: var(--br-ink-2); }
.br .br-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0 2px; border-bottom: 1px solid var(--br-ink); }
.br .br-title { margin: 0; font-size: min(4.3rem, 13vw); line-height: 1.3; letter-spacing: -.015em; white-space: nowrap; color: var(--br-ink); }
.br .br-t2 { color: var(--br-m-calm); }
.br.br-m-watch .br-t2 { color: var(--br-m-watch); } .br.br-m-heavy .br-t2 { color: var(--br-m-heavy); } .br.br-m-unknown .br-t2 { color: var(--br-m-unknown); }
.br .br-mfig { flex: none; width: 104px; margin: -2px -8px -16px 0; }
@media (max-width: 430px) { .br .brand small { display: none; } }
.br .br-mascot { display: block; width: 100%; height: auto; overflow: visible; }
.br .br-bub { position: relative; margin: 12px 0 12px; padding: 10px 14px; border-radius: 16px; background: var(--br-card); border: 1px solid var(--br-rule-2);
    box-shadow: var(--br-shadow); font-size: .95em; line-height: 1.5; color: var(--br-ink-2); text-wrap: pretty; }
.br .br-bub::before { content: ""; position: absolute; right: 38px; top: -9px; width: 16px; height: 16px; background: var(--br-card); border-left: 1px solid var(--br-rule-2);
    border-top: 1px solid var(--br-rule-2); transform: rotate(45deg); }
.br .br-bub span { font-weight: 700; color: var(--br-ink); }
.br .br-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px; font-size: .92em; color: var(--br-ink-2); line-height: 1.5; }
.br .br-dl time { font-weight: 700; color: var(--br-ink); }
.br .br-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 9px; border-radius: 999px; font-weight: 700; font-size: .92em;
    color: var(--mc); background: color-mix(in srgb, var(--mc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mc) 45%, transparent); }
.br .br-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--mc); }
.br .br-c-calm { --mc: var(--br-m-calm); } .br .br-c-watch { --mc: var(--br-m-watch); } .br .br-c-heavy { --mc: var(--br-m-heavy); } .br .br-c-unknown { --mc: var(--br-m-unknown); }
.br .br-c-heavy i { box-shadow: 0 0 0 0 var(--mc); animation: brPing 2.2s ease-out infinite; }
@keyframes brPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--br-m-heavy) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.br .br-nw { white-space: nowrap; }
.br .br-lead { margin: 0 0 10px; font-size: 1.32em; font-weight: 700; line-height: 1.45; color: var(--br-ink); text-wrap: pretty; }
.br .br-note { margin: 8px 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--br-paper-2); border: 1px dashed var(--br-rule); line-height: 1.5; font-size: .94em; }
.br .br-stale { display: flex; gap: 8px; align-items: baseline; margin: 0 0 6px; color: var(--br-l-warn); font-weight: 600; font-size: .9em; line-height: 1.5; }
.br .br-stale i { flex: none; width: 9px; height: 9px; transform: rotate(45deg) translateY(-1px); background: var(--br-d-warn); }
.br .br-toc { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 12px; margin: 4px 0 0; scrollbar-width: none; }
.br .br-toc::-webkit-scrollbar { display: none; }
.br .br-toc a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--br-rule);
    color: var(--br-ink) !important; font-weight: 600; font-size: .9em; text-decoration: none; background: var(--br-card); }
.br .br-toc a:hover { border-color: var(--br-ink); }

/* ---------- ฉากรุ่งเช้า ---------- */
.br .br-scene { margin: 0; }
.br .br-art { display: block; width: 100%; height: auto; aspect-ratio: 390 / 272; max-height: 72vh; background: var(--br-sky3); }
.br .br-scene figcaption { padding-top: 8px; padding-bottom: 6px; color: var(--br-muted); font-size: .8em; line-height: 1.55; }
.br .br-art text { font-family: var(--font); }
.br .br-art .br-td { display: none; }
@media (min-width: 760px) { .br .br-art .br-tm { display: none; } .br .br-art .br-td { display: inline; } }
.br .br-art .br-s0 { stop-color: var(--br-sky0); } .br .br-art .br-s1 { stop-color: var(--br-sky1); } .br .br-art .br-s2 { stop-color: var(--br-sky2); } .br .br-art .br-s3 { stop-color: var(--br-sky3); }
.br .br-art .br-g0 { stop-color: var(--br-glow); } .br .br-art .br-w0 { stop-color: var(--br-wall0); } .br .br-art .br-w1 { stop-color: var(--br-wall1); }
.br .br-art .br-a0 { stop-color: var(--br-water0); } .br .br-art .br-a1 { stop-color: var(--br-water1); }
.br .br-art .br-disc { fill: var(--br-sun); } .br .br-art .br-rays { fill: var(--br-glow); }
.br .br-art .br-far { fill: var(--br-far); } .br .br-art .br-farwin { fill: var(--br-farwin); } .br .br-art .br-mid { fill: var(--br-mid); } .br .br-art .br-win { fill: var(--br-win); }
.br .br-art .br-overcast { fill: var(--br-storm); } .br .br-art .br-trees { fill: var(--br-tree); } .br .br-art .br-clouds { fill: var(--br-cloud); } .br .br-art .br-clouds.br-rainy { fill: var(--br-storm); }
.br .br-art .br-temple { fill: var(--br-temple); stroke: var(--br-rim); } .br .br-art .br-roof { fill: var(--br-roof); } .br .br-art .br-face { fill: var(--br-temple); }
.br .br-art .br-tgold { stroke: var(--br-rim); } .br .br-art .br-tlit { fill: var(--br-lit); } .br .br-art .br-pole { fill: var(--br-temple); }
.br .br-art .br-coping { fill: var(--br-coping); } .br .br-art .br-seams { stroke: var(--br-seam); } .br .br-art .br-gauge { fill: var(--br-tick); } .br .br-art .br-gback { fill: var(--br-gauge); }
.br .br-art .br-wv2 path { fill: var(--br-wave2); } .br .br-art .br-crest { stroke: var(--br-crest); } .br .br-art .br-bob { fill: var(--br-boat); stroke: var(--br-boat); }
.br .br-art .br-flock { stroke: var(--br-bird); } .br .br-art .br-shims { fill: var(--br-glow); } .br .br-art .br-rain { stroke: var(--br-rain); }
.br .br-art .br-ln-warn { stroke: var(--br-ln-warn); } .br .br-art .br-ln-crit { stroke: var(--br-ln-crit); }
.br .br-art .br-halo { fill: var(--br-halo); stroke: var(--br-halo); } .br .br-art .br-rot, .br .br-art .br-mk-bank .br-mkt { fill: var(--br-art-ink); }
.br .br-art .br-mk-bank line { stroke: var(--br-art-ink); } .br .br-art .br-mk-warn .br-mkt { fill: var(--br-ln-warn); } .br .br-art .br-mk-crit .br-mkt { fill: var(--br-ln-crit); }
@media (prefers-color-scheme: dark) { .br .br-art .br-mk-warn line { stroke: var(--br-ln-warn); } .br .br-art .br-mk-crit line { stroke: var(--br-ln-crit); } .br .br-art .br-shine { opacity: .5; } }

/* การเคลื่อนไหวของฉาก: ฟ้าสว่าง ดาวจาง ดวงอาทิตย์ขึ้น (ครั้งเดียว) แล้ว loop เบา ๆ: แสงหมุน เมฆ นก เรือ คลื่น ประกายน้ำ ธง */
.br .br-art .br-night { animation: brDawn 6.5s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes brDawn { from { opacity: .82; } to { opacity: 0; } }
.br .br-art .br-stars { animation: brStars 5s ease-in both; }
@keyframes brStars { from { opacity: .9; } to { opacity: 0; } }
.br .br-art .br-sun { animation: brSunUp 6.5s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes brSunUp { from { transform: translateY(170px); } to { transform: none; } }
.br .br-art .br-rays { transform-box: fill-box; transform-origin: center; animation: brSpin 90s linear infinite; }
@keyframes brSpin { to { transform: rotate(360deg); } }
.br .br-art .br-cloud { animation: brCloud 46s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -9s); }
@keyframes brCloud { from { transform: translateX(-26px); } to { transform: translateX(30px); } }
.br .br-art .br-flock { animation: brFlock 52s linear infinite 2s; }
@keyframes brFlock { from { transform: translate(-480px, 40px); } to { transform: translate(1060px, -30px); } }
.br .br-art .br-bird { transform-box: fill-box; transform-origin: 50% 80%; animation: brFlap .42s ease-in-out infinite alternate; }
@keyframes brFlap { to { transform: scaleY(-.45); } }
.br .br-art .br-drift { animation: brDrift 44s ease-in-out infinite alternate; }
@keyframes brDrift { from { transform: translateX(-40px); } to { transform: translateX(470px); } }
.br .br-art .br-bob { transform-box: fill-box; transform-origin: 50% 80%; animation: brBob 4.2s ease-in-out infinite; }
@keyframes brBob { 25% { transform: translateY(2px) rotate(1.4deg); } 75% { transform: translateY(-2px) rotate(-1.2deg); } }
.br .br-art .br-wv1 { animation: brWave 12s linear infinite; } .br .br-art .br-wv2 { animation: brWave 19s linear infinite reverse; }
@keyframes brWave { to { transform: translateX(-1200px); } }
.br .br-art .br-shim { transform-box: fill-box; transform-origin: center; animation: brShim 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
@keyframes brShim { 50% { transform: scaleX(.5); opacity: .45; } }
.br .br-art .br-cloth { transform-box: fill-box; transform-origin: 0 50%; animation: brFlag 2.4s ease-in-out infinite alternate; }
@keyframes brFlag { from { transform: skewY(-5deg) scaleX(.92); } to { transform: skewY(4deg) scaleX(1); } }
.br .br-art .br-tlit { animation: brCandle 5s ease-in-out infinite alternate; }
@keyframes brCandle { 50% { opacity: .7; } }
/* น้ำขึ้นจากท้องคลองถึงค่ากลางจริงครั้งเดียว แล้วเส้นเกณฑ์กับป้ายค่อยปรากฏ */
.br .br-art .br-rise { animation: brRise 2.8s cubic-bezier(.2, .9, .3, 1) .5s both; }
@keyframes brRise { 0% { transform: translateY(200px); } 62% { transform: translateY(-10px); } 82% { transform: translateY(4px); } 100% { transform: none; } }
.br .br-art .br-lns, .br .br-art .br-marks { animation: brFade 1s ease-out 2.6s both; }
@keyframes brFade { from { opacity: 0; } to { opacity: 1; } }
.br .br-art .br-drop { animation: brFall var(--d, .8s) linear infinite; animation-delay: var(--l, 0s); }
@keyframes brFall { from { transform: translate(0, -60px); } to { transform: translate(-60px, 660px); } }
.br .br-art .br-flash { animation: brFlash 9s steps(1) infinite 3s; }
@keyframes brFlash { 0%, 100% { opacity: 0; } 41% { opacity: .55; } 42% { opacity: 0; } 44% { opacity: .38; } 45% { opacity: 0; } }
.br .br-scene.br-off *, .br .br-mfig.br-off *, html.br-hidden .br * { animation-play-state: paused !important; }

/* ---------- น้องน้ำ ---------- */
.br .br-mbody { animation: brFloat 4.6s ease-in-out infinite; }
@keyframes brFloat { 50% { transform: translateY(-3px); } }
.br .br-eye { transform-box: fill-box; transform-origin: center; animation: brBlink 5.4s ease-in-out infinite; }
@keyframes brBlink { 0%, 93%, 100% { transform: none; } 95% { transform: scaleY(.1); } }
.br .br-spark { transform-box: fill-box; transform-origin: center; animation: brTwinkle 2.6s ease-in-out infinite; }
.br .br-spark2 { animation-delay: -1.3s; }
@keyframes brTwinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .4; } }
.br .br-bang { transform-box: fill-box; transform-origin: center; animation: brBang 1.8s ease-in-out infinite; }
@keyframes brBang { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18) rotate(-8deg); } 24% { transform: scale(1) rotate(6deg); } 36% { transform: none; } }
.br .br-sweat { animation: brSweat 2.8s ease-in infinite; }
@keyframes brSweat { 0%, 30% { transform: none; opacity: 1; } 80% { transform: translate(1px, 9px); opacity: 0; } 100% { opacity: 0; } }
.br .br-think { animation: brThink 3s ease-in-out infinite; }
@keyframes brThink { 50% { transform: translateY(-3px); opacity: .75; } }
.br .br-steam path { stroke-dasharray: 14 30; animation: brSteam 2.6s linear infinite; }
.br .br-steam .br-steam2 { animation-delay: -1.3s; }
@keyframes brSteam { from { stroke-dashoffset: 44; opacity: 0; } 30% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 0; } }
.br .br-paper { transform-box: fill-box; transform-origin: 50% 0; animation: brRustle 6s ease-in-out infinite; }
@keyframes brRustle { 0%, 80%, 100% { transform: none; } 86% { transform: rotate(-1.6deg); } 92% { transform: rotate(1.2deg); } }

/* ---------- ส่วนต่าง ๆ ---------- */
.br .br-sec { padding: 26px 0 30px; border-top: 3px double var(--br-rule); }
.br .br-sec h2 { font-size: 1.5em; line-height: 1.4; margin: 0 0 .25em; text-wrap: balance; }
.br .br-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 .35em; font-size: .8em; font-weight: 700; letter-spacing: .07em; color: var(--br-muted); }
.br .br-kick span { display: inline-grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--br-ink); color: var(--br-paper); letter-spacing: 0; }
.br .br-sub { margin: 0 0 1em; color: var(--br-muted); font-size: .92em; line-height: 1.5; }
.br .br-nums { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.br .br-nums.br-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.br .br-n3 li { padding: 10px 10px 12px; } .br .br-n3 b { font-size: 2em; }
.br .br-nums li { background: var(--br-card); border: 1px solid var(--br-rule-2); border-radius: 16px; padding: 10px 14px 12px; box-shadow: var(--br-shadow); }
.br .br-nums b { display: block; font-size: 2.35em; line-height: 1.2; font-weight: 700; color: var(--k, var(--br-ink)); font-variant-numeric: tabular-nums; }
.br .br-nums span { display: block; font-size: .86em; line-height: 1.45; color: var(--br-muted); }
.br .br-k-bank { --k: var(--br-l-bank); } .br .br-k-crit { --k: var(--br-l-crit); } .br .br-k-warn { --k: var(--br-l-warn); } .br .br-k-ok { --k: var(--br-l-ok); }
.br .br-nums li.is-0 b, .br .br-big.is-0 b { color: var(--br-muted); }
.br .br-bar { display: flex; gap: 2px; height: 12px; margin: 0 0 14px; border-radius: 999px; overflow: hidden; background: var(--br-rule-2); transform-origin: 0 50%;
    transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.br .br-bar i { flex: var(--n) 1 0; }
.br .br-b-crit { background: var(--br-d-crit); } .br .br-b-warn { background: var(--br-d-warn); } .br .br-b-ok { background: var(--br-d-ok); } .br .br-b-unk { background: var(--br-d-unk); }
.br .br-big { margin: 0 0 .4em; font-size: 1.05em; line-height: 1.4; }
.br .br-big b { font-size: 2.6em; line-height: 1.15; font-weight: 700; color: var(--k, var(--br-ink)); font-variant-numeric: tabular-nums; }
.br .br-big small { display: block; color: var(--br-muted); font-size: .84em; line-height: 1.5; }

/* ระดับ: สีช่วยเท่านั้น รูปทรงต่างกัน (ล้นตลิ่ง/วิกฤต = สี่เหลี่ยม เฝ้าระวัง = ข้าวหลามตัด ยังไม่ถึงเกณฑ์ = วงกลม ไม่มีเกณฑ์ = วงกลมกลวง) มีคำกำกับเสมอ */
.br .br-lvl { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 700; font-size: .88em; color: var(--lvi); }
.br .br-lvl i { width: 10px; height: 10px; background: var(--lvc); }
.br .br-l-bank { --lvc: var(--br-d-bank); --lvi: var(--br-l-bank); } .br .br-l-crit, .br .br-l-flood { --lvc: var(--br-d-crit); --lvi: var(--br-l-crit); }
.br .br-l-warn, .br .br-l-slight { --lvc: var(--br-d-warn); --lvi: var(--br-l-warn); } .br .br-l-ok, .br .br-l-dry { --lvc: var(--br-d-ok); --lvi: var(--br-l-ok); }
.br .br-l-unk { --lvc: transparent; --lvi: var(--br-l-unk); }
.br .br-l-bank i { box-shadow: 0 0 0 2px var(--br-paper), 0 0 0 3.5px var(--br-d-bank); } .br .br-l-warn i, .br .br-l-slight i { transform: rotate(45deg) scale(.9); }
.br .br-l-ok i, .br .br-l-dry i { border-radius: 50%; } .br .br-l-unk i { border-radius: 50%; border: 2px solid var(--br-d-unk); }

/* คลอง: หลอดวัดของ 3 จุด + แผนที่ */
.br .br-gzs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.br .br-gzc { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 14px 10px 6px; border-radius: 18px;
    background: var(--br-card); border: 1px solid var(--br-rule-2); box-shadow: var(--br-shadow); }
.br .br-gzc h4 { margin: 0 0 4px; font-size: 1.02em; line-height: 1.4; }
.br .br-gzc h4 a { color: var(--br-ink) !important; text-decoration: none; } .br .br-gzc h4 a:hover { text-decoration: underline; }
.br .br-val { margin: 2px 0 0; font-weight: 700; font-size: 1.06em; }
.br .br-gz { display: block; width: 70px; height: auto; }
.br .br-gz-t { fill: var(--br-glass); } .br .br-gz-o { fill: none; stroke: var(--br-glass-line); stroke-width: 2; } .br .br-gz-hl { stroke: #fff; stroke-opacity: .45; stroke-width: 3; stroke-linecap: round; }
.br .br-gz-wf { fill: var(--br-w-deep); } .br .br-gz-wv { fill: var(--br-w-top); }
.br .br-gz-b { stroke: var(--br-ink); stroke-width: 2; stroke-dasharray: 4 3; } .br .br-gz-bt { font-size: 12px; font-weight: 700; fill: var(--br-ink); }
.br .br-gz-warn { stroke: var(--br-d-warn); stroke-width: 3.5; stroke-linecap: round; } .br .br-gz-crit { stroke: var(--br-d-crit); stroke-width: 3.5; stroke-linecap: round; }
.br .br-gz-na { font-size: 28px; font-weight: 700; fill: var(--br-muted); text-anchor: middle; }
.br .br-gz-w { transition: transform 1.6s cubic-bezier(.2, .85, .25, 1) .15s; }
.br .br-gz-wv { animation: brGzWave 2.8s ease-in-out infinite alternate; }
@keyframes brGzWave { to { transform: translateX(-12px); } }
.br .br-mapf { margin: 6px 0 4px; }
.br .br-map { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; }
.br .br-map-d { fill: var(--br-map); stroke: var(--br-map-line); stroke-width: 1.4; stroke-linejoin: round; }
.br .br-pt { stroke: var(--br-paper); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.br .br-pt-crit, .br .br-pt-flood { fill: var(--br-d-crit); } .br .br-pt-warn, .br .br-pt-slight { fill: var(--br-d-warn); } .br .br-pt-bank { fill: var(--br-d-bank); }
.br .br-pt-ring { fill: none; stroke: var(--br-d-bank); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: brRing 2.2s ease-out infinite; }
@keyframes brRing { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.br .br-mapf figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; padding-top: 8px; font-size: .84em; color: var(--br-ink-2); }
.br .br-mapf figcaption .br-fine { flex-basis: 100%; text-align: center; }
.br .br-lg { display: inline-flex; align-items: center; gap: 6px; }
.br .br-lg i { width: 11px; height: 11px; } .br .br-lg-c { border-radius: 50%; } .br .br-lg-s { border-radius: 3px; }
.br .br-lg .br-pt-crit, .br .br-lg .br-pt-flood { background: var(--br-d-crit); } .br .br-lg .br-pt-warn, .br .br-lg .br-pt-slight { background: var(--br-d-warn); }
.br .br-lg .br-pt-bank { background: var(--br-d-bank); box-shadow: 0 0 0 2px var(--br-paper), 0 0 0 3.5px var(--br-d-bank); }

/* ถนน */
.br .br-rdf { margin: 4px 0 12px; }
.br .br-rd { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.br .br-rdf figcaption { text-align: center; font-size: .82em; color: var(--br-muted); line-height: 1.5; padding-top: 4px; }
.br .br-rd-road { fill: var(--br-road); } .br .br-rd-lane { stroke: var(--br-paper); stroke-width: 2.4; stroke-dasharray: 22 14; opacity: .6; }
.br .br-rd-fig { fill: var(--br-fig); } .br .br-rd-arm { fill: none; stroke: var(--br-fig); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.br .br-rd-umb { fill: var(--br-w-top); } .br .br-rd-wh { fill: var(--br-ink); opacity: .85; } .br .br-rd-hub { fill: var(--br-road); } .br .br-rd-seat { fill: var(--br-ink); opacity: .55; } .br .br-rd-lamp { fill: #ffd98a; }
.br .br-rd-none .br-rd-fig { opacity: .45; }
.br .br-rdw0 { stop-color: var(--br-w-top); stop-opacity: .7; } .br .br-rdw1 { stop-color: var(--br-w-deep); stop-opacity: .92; }
.br .br-rd-crest { fill: none; stroke: #e6f6ff; stroke-opacity: .7; stroke-width: 1.6; }
.br .br-rd-rip { fill: none; stroke: #e6f6ff; stroke-opacity: .55; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: brRip 2.6s ease-out infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes brRip { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
.br .br-rd-water { transition: transform 1.6s cubic-bezier(.2, .85, .25, 1) .2s; }
.br .br-rd-ruler path { stroke: var(--br-ink-2); stroke-width: 1.6; } .br .br-rd-ruler text { font-size: 11px; fill: var(--br-muted); text-anchor: end; font-family: var(--font); }
.br .br-rd-t5 { stroke: var(--br-d-warn) !important; stroke-width: 3 !important; } .br .br-rd-t10 { stroke: var(--br-d-crit) !important; stroke-width: 3 !important; }
.br .br-rd-lvl { stroke: var(--br-ink); stroke-width: 2.4; } .br .br-rd-lab { font-size: 17px; font-weight: 700; fill: var(--br-ink); font-family: var(--font); }
.br .br-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.br .br-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 16px; background: var(--br-card);
    border: 1px solid var(--br-rule-2); box-shadow: var(--br-shadow); color: var(--br-ink) !important; text-decoration: none; }
.br .br-list a:hover { border-color: var(--br-rule); }
.br .br-li-n { font-weight: 700; line-height: 1.4; } .br .br-li-n small, .br .br-li-v small { display: block; font-weight: 500; font-size: .8em; color: var(--br-muted); line-height: 1.45; }
.br .br-li-v { flex: none; max-width: 46%; text-align: right; color: var(--lvi); font-weight: 600; } .br .br-li-v b { font-size: 1.6em; line-height: 1.2; }

/* ฝน */
.br .br-rgrid { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 4px 16px; align-items: center; margin: 0 0 6px; }
.br .br-rgf { margin: 0; text-align: center; } .br .br-rgf figcaption { font-size: .74em; color: var(--br-muted); line-height: 1.4; }
.br .br-rg { display: block; width: 116px; height: auto; }
.br .br-rg-fun { fill: var(--br-glass); stroke: var(--br-glass-line); stroke-width: 2; } .br .br-rg-t { fill: var(--br-glass); } .br .br-rg-o { fill: none; stroke: var(--br-glass-line); stroke-width: 2; }
.br .br-rg-hl { stroke: #fff; stroke-opacity: .5; stroke-width: 3; stroke-linecap: round; } .br .br-rg-wf { fill: #4d6fd0; } .br .br-rg-wv { fill: #7d95ea; }
.br .br-rg-sc path { stroke: var(--br-ink-2); stroke-width: 1.6; } .br .br-rg-sc text { font-size: 12px; fill: var(--br-muted); text-anchor: end; font-family: var(--font); }
.br .br-rg-u { font-weight: 700; } .br .br-rg-max { stroke: var(--br-d-crit); stroke-width: 3; stroke-linecap: round; } .br .br-rg-mt { font-size: 12px; font-weight: 700; fill: var(--br-l-crit); font-family: var(--font); }
.br .br-rg-w { transition: transform 1.8s cubic-bezier(.2, .85, .25, 1) .2s; }
.br .br-rg-drops path { fill: #6d8fe6; animation: brRgDrop 1.4s ease-in infinite; animation-delay: var(--l); }
@keyframes brRgDrop { from { transform: translateY(-10px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(48px); opacity: 0; } }
.br .br-radar { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: var(--br-card); border: 1px solid var(--br-rule-2); box-shadow: var(--br-shadow); }
.br .br-radar .br-h3 { margin-top: .1em; }
.br .br-cp { flex: none; width: 96px; height: 96px; }
.br .br-cp-o { fill: var(--br-paper-2); stroke: var(--br-rule); stroke-width: 2; } .br .br-cp-i { fill: none; stroke: var(--br-rule-2); stroke-width: 1.5; stroke-dasharray: 3 4; }
.br .br-cp-t { stroke: var(--br-ink-2); stroke-width: 2.4; } .br .br-cp-n { font-size: 11px; font-weight: 700; fill: var(--br-muted); text-anchor: middle; font-family: var(--font); }
.br .br-cp-flow { stroke: #4d6fd0; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 8 9; animation: brFlow 1.4s linear infinite; }
@keyframes brFlow { to { stroke-dashoffset: -17; } }
.br .br-cp-a { fill: #4d6fd0; } .br .br-cp-c { fill: var(--br-ink); }

/* แม่น้ำ */
.br .br-rvf { margin: 4px 0 10px; }
.br .br-rv { display: block; width: 100%; height: auto; }
.br .br-rvf figcaption { font-size: .8em; color: var(--br-muted); line-height: 1.5; padding-top: 4px; }
.br .br-rv-bank { stroke: var(--br-ink); stroke-width: 2; stroke-dasharray: 6 5; } .br .br-rv-bed { stroke: var(--br-rule-2); stroke-width: 6; stroke-linecap: round; }
.br .br-rv-bt, .br .br-rv-ax { font-size: 12px; font-weight: 700; fill: var(--br-ink-2); font-family: var(--font); } .br .br-rv-bt, .br .br-rv-ax2 { text-anchor: end; }
.br .br-rv-ax { font-weight: 600; fill: var(--br-muted); }
.br .br-rv-s path { stroke-width: 9; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 45ms); }
.br .br-rv-dn path { stroke: var(--br-w-top); } .br .br-rv-dn circle { fill: var(--br-w-deep); } .br .br-rv-up path { stroke: var(--br-d-crit); } .br .br-rv-up circle { fill: var(--br-l-crit); }
.br .br-rv-s circle { stroke: var(--br-paper); stroke-width: 2; } .br .br-rv-off { fill: var(--br-d-unk); }
.br .br-rv-k circle { fill: var(--br-ink); } .br .br-rv-k text { fill: var(--br-paper); font-size: 11px; font-weight: 700; text-anchor: middle; font-family: var(--font); }
.br .br-keys { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.br .br-keys li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.br .br-keys small { display: block; color: var(--br-muted); font-size: .84em; }
.br .br-kn { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--br-ink); color: var(--br-paper); font-size: .78em; font-weight: 700; margin-top: 1px; }

/* ทั่วประเทศ */
.br .br-xgrid { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 14px; align-items: start; margin: 0 0 10px; }
.br .br-thf figcaption { font-size: .74em; color: var(--br-muted); line-height: 1.4; text-align: center; }
.br .br-thf { margin: 0; }
.br .br-th { display: block; width: 100%; height: auto; }
.br .br-th-o { fill: var(--br-map); stroke: var(--br-map-line); stroke-width: 5; stroke-linejoin: round; }
.br .br-th-top { fill: color-mix(in srgb, var(--br-d-crit) 18%, var(--br-map)); stroke: var(--br-d-crit); stroke-width: 4; stroke-opacity: .55; }
.br .br-th-pt { fill: var(--br-d-crit); stroke: var(--br-paper); stroke-width: 4; transition: opacity .6s ease; transition-delay: calc(var(--i) * 70ms); }
.br .br-th-hot { transform-box: fill-box; transform-origin: center; animation: brHot 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes brHot { 50% { transform: scale(1.45); } }
.br .br-prov { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.br .br-prov a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 16px; background: var(--br-card); border: 1px solid var(--br-rule-2);
    box-shadow: var(--br-shadow); color: var(--br-ink) !important; text-decoration: none; line-height: 1.4; }
.br .br-prov small { display: block; font-size: .82em; color: var(--br-muted); }
.br .br-ps { flex: none; width: 40px; height: 40px; }
.br .br-ps use { fill: color-mix(in srgb, var(--br-d-crit) 30%, var(--br-card)); stroke: var(--br-d-crit); stroke-width: 6; vector-effect: non-scaling-stroke; }
.br .br-tks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.br .br-tks li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; border-radius: 16px; background: var(--br-card);
    border: 1px solid var(--br-rule-2); box-shadow: var(--br-shadow); line-height: 1.4; font-size: .9em; }
.br .br-tks .br-tk { width: 100%; max-width: 96px; height: auto; margin: 0 0 4px; }
.br .br-tks b { font-size: 1.5em; line-height: 1.2; } .br .br-tks span { font-weight: 600; } .br .br-tks small { display: block; font-weight: 500; color: var(--br-muted); }
.br .br-tk-hill { fill: color-mix(in srgb, var(--br-l-ok) 26%, var(--br-card)); } .br .br-tk-wf { fill: var(--br-w-deep); } .br .br-tk-wv { fill: var(--br-w-top); }
.br .br-tk-full { stroke: var(--br-ink); stroke-width: 1.6; stroke-dasharray: 4 3; } .br .br-tk-wall { fill: var(--br-road); }
.br .br-tk-w { transition: transform 1.6s cubic-bezier(.2, .85, .25, 1) .2s; }

/* เทียบเมื่อวาน */
.br .br-dt { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--br-rule-2); }
.br .br-dt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 2px; border-bottom: 1px solid var(--br-rule-2); line-height: 1.45; }
.br .br-dl-l { font-weight: 600; } .br .br-dl-v { text-align: right; } .br .br-dl-v b { font-size: 1.25em; }
.br .br-dl-d { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px; font-size: .86em; color: var(--br-muted); }
.br .br-dl-d i { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.br .br-d-up .br-dl-d i { border-bottom: 9px solid var(--br-ink-2); } .br .br-d-down .br-dl-d i { border-top: 9px solid var(--br-ink-2); }
.br .br-d-same .br-dl-d i { width: 11px; height: 3px; border: 0; background: var(--br-ink-2); }

/* แชร์ + ฉบับก่อน ๆ */
.br .br-copy { margin: 4px 0 0; }
.br .br-copy summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; font-weight: 700; list-style: none; }
.br .br-copy summary::-webkit-details-marker { display: none; }
.br .br-copy summary::before { content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; transition: transform .2s; }
.br .br-copy[open] summary::before { transform: rotate(90deg); }
.br .br-copy textarea { display: block; width: 100%; margin: 6px 0 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--br-rule); background: var(--br-card); color: var(--br-ink);
    font: inherit; font-size: 16px; line-height: 1.55; resize: vertical; }
.br .br-ok { margin: 4px 0 0; min-height: 1.5em; color: var(--br-l-ok); font-weight: 700; }
.br [hidden] { display: none !important; }
.js .br-js[hidden] { display: inline-flex !important; }   /* ปุ่มที่ต้องใช้ JS แสดงเมื่อ html.js เท่านั้น */
.br .br-ax { list-style: none; margin: 0; padding: 4px 2px 10px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; }
.br .br-ax li { flex: none; scroll-snap-align: start; }
.br .br-ax-i { position: relative; display: grid; justify-items: center; gap: 2px; width: 78px; padding: 10px 6px 8px; border-radius: 16px; border: 1px solid var(--br-rule-2); background: var(--br-card);
    color: var(--br-ink) !important; text-decoration: none; line-height: 1.35; }
.br .br-ax-i.is-cur { border-color: var(--br-ink); box-shadow: inset 0 0 0 1px var(--br-ink); }
.br .br-ax-d { font-weight: 700; font-size: .92em; } .br .br-ax-w { font-size: .76em; color: var(--br-muted); }
.br .br-fc { width: 30px; height: 36px; }
.br .br-fc-calm .br-fcb { fill: var(--br-d-ok); } .br .br-fc-watch .br-fcb { fill: var(--br-d-warn); } .br .br-fc-heavy .br-fcb { fill: var(--br-d-crit); } .br .br-fc-unknown .br-fcb { fill: var(--br-d-unk); }
.br .br-srcx { padding: 16px 0 0; color: var(--br-muted); font-size: .85em; line-height: 1.55; border-top: 1px solid var(--br-rule-2); }
.br .br-empty .br-lead { font-weight: 600; margin-top: 14px; }

/* ---------- เผยตอนเลื่อนถึง (เฉพาะเมื่อ JS ทำงาน: html.js) ---------- */
.rv { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv:not(.in) { opacity: 0; transform: translateY(16px); }
.js .rv:not(.in) .br-gz-w, .js .rv:not(.in) .br-rg-w, .js .rv:not(.in) .br-tk-w, .js .rv:not(.in) .br-rd-water { transform: translateY(var(--h)); }
.js .br-bar.rv:not(.in) { transform: scaleX(0); opacity: 1; }
.js .rv:not(.in) .br-pt { transform: scale(0); }
.js .rv:not(.in) .br-rv-s path { stroke-dashoffset: 160; }
.js .rv:not(.in) .br-th-pt { opacity: 0; }

/* ---------- จอกว้าง ---------- */
@media (min-width: 560px) {
    .br .br-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .br .br-nums.br-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .br .br-nums.br-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br .br-xgrid { grid-template-columns: minmax(0, 1fr) 190px; }
}
@media (min-width: 760px) {
    .br .br-art { aspect-ratio: 1200 / 560; max-height: 500px; }
    .br .br-title { font-size: 6.2rem; line-height: 1.25; }
    .br .br-mfig { width: 168px; margin: -10px 0 -20px; }
    .br .br-gzs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .br .br-gzc { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 12px; }
    .br .br-gzc .br-lvl { justify-content: center; }
    .br .br-gz { width: 92px; }
    .br .br-rgrid { grid-template-columns: 150px minmax(0, 1fr); } .br .br-rg { width: 150px; }
    .br .br-xgrid { grid-template-columns: minmax(0, 1fr) 240px; }
    .br .br-lead { font-size: 1.55em; }
    .br .br-bub { max-width: 40rem; margin-left: auto; }
}

/* ---------- ลดการเคลื่อนไหว: ภาพสุดท้ายนิ่ง ไม่เผย ไม่วน ---------- */
@media (prefers-reduced-motion: reduce) {
    .br *, .br *::before, .br *::after { animation: none !important; transition: none !important; }
    .br .br-art .br-stars, .br .br-art .br-flash { display: none; }
    .js .rv:not(.in) { opacity: 1; transform: none; }
    .js .rv:not(.in) .br-gz-w, .js .rv:not(.in) .br-rg-w, .js .rv:not(.in) .br-tk-w, .js .rv:not(.in) .br-rd-water { transform: none; }
    .js .br-bar.rv:not(.in) { transform: none; }
    .js .rv:not(.in) .br-pt { transform: none; }
    .js .rv:not(.in) .br-rv-s path { stroke-dashoffset: 0; }
    .js .rv:not(.in) .br-th-pt { opacity: 1; }
}