/* POPNIX Flood - โหมดจอทีวี /tv/ (รอบ "wow" 2026-10-05) ใช้คู่กับ lite.css (หัวหน้า ท้ายหน้า แบบไม่มี JS) + assets/js/tv.js
   ธีมมืดเสมอ: จอในที่สาธารณะอ่านง่ายกว่าบนพื้นมืดและไม่จ้าตอนกลางคืน ท้องฟ้า/ฉากคลองเปลี่ยนตามเวลากรุงเทพฯ (data-tod)
   ขนาดตามจอ: --u = 1% ของความสูงจอ 16:9 (1920x1080: ข้อความ ~37px ตัวเลขหลัก ~121px) จอแนวตั้ง (มือถือ) จัดใหม่ทั้งหมดท้ายไฟล์
   ทุก class ขึ้นต้น tv- (หน้า) ta- (ฉากคลองใน SVG) tz-/tr- (หลอดวัด) tm- (แผนที่เรดาร์) mc- (น้องน้ำ); ลดการเคลื่อนไหว = ไม่มี animation/transition */
body.tv {
    margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: break-word;
    --u: min(1vh, .5625vw);
    --ink: #eef5f9; --ink-2: #bdd0da; --ink-3: #8aa4b2; --line: rgba(160, 210, 235, .2); --glass: rgba(8, 22, 32, .66); --glass-2: rgba(10, 28, 40, .9);
    --accent: #7cc4e8; --crit: #ff6b66; --warn: #f2c14e; --ok: #4dbfad; --rain: #9aa6ff; --off: #6b8593;
    --fs-xs: max(12px, calc(2.3 * var(--u))); --fs-s: max(13px, calc(2.75 * var(--u))); --fs-b: max(15px, calc(3.35 * var(--u)));
    --fs-m: max(18px, calc(4.4 * var(--u))); --fs-l: max(22px, calc(6 * var(--u))); --fs-xl: max(44px, calc(11.2 * var(--u)));
    --ease: cubic-bezier(.16, 1, .3, 1);
    /* ฉากแบบไม่มี JS ใช้ token ของ lite.css: ตั้งชุดกลางคืนให้ตรงกับพื้นมืด */
    --bg: #071219; --bg-2: #0a1822; --core: #0c1c26; --line-2: rgba(150, 205, 232, .17); --text: #c9dae3; --strong: #f0f6f9; --muted: #7f98a6;
    --edge: #213946; --ink-muted: #a9bfcb; --ink-link: #8fd0f0; --accent-ink: #06202c;
    color-scheme: dark; background: #050c13; color: var(--ink);
}
/* พื้นฐานแบบ body.pg ของ lite.css (หน้านี้ไม่ใช้ class pg) ความเจาะจงเป็น 0 ด้วย :where() class ของแต่ละส่วนจึงชนะเสมอ */
:where(body.tv) :where(h1, h2, h3) { color: var(--strong); font-weight: 700; line-height: 1.3; margin: 0 0 .45em; }
:where(.tv-nojs) h1 { font-size: 1.9em; } :where(body.tv) p { margin: 0 0 .8em; }
:where(body.tv) a { color: var(--ink-link); text-underline-offset: .2em; } :where(body.tv) :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
:where(.tv-stage, .tv-set) :where(p, h1, h2, h3, figure, ol, ul) { margin: 0; }
.tv-nojs { padding-top: 28px; padding-bottom: 8px; }
.tv-nj-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.tv-nj-nums div { background: var(--core); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; }
.tv-nj-nums dt { font-weight: 600; line-height: 1.4; }
.tv-nj-nums dd { margin: 0; font-size: 2rem; font-weight: 700; color: var(--strong); line-height: 1.2; }
.tv-nj-nums small { display: block; font-size: .9rem; font-weight: 400; color: var(--ink-muted); line-height: 1.4; }

/* ---------- ฉากเต็มจอ (เฉพาะเมื่อมี JS) ---------- */
.tv-stage, .tv-intro { display: none; }
.js body.tv { overflow: hidden; }
.js .tv-nojs, .js body.tv > .foot, .js body.tv > .skip { display: none; }
.js .tv-stage { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; isolation: isolate; background: #050c13; cursor: none;
    --pf: 0px; --pm: 0px; --pn: 0px; font-family: var(--font); line-height: 1.4;
    --sky0: #040b14; --sky1: #0b2233; --sky2: #16405a; --far: #0e2331; --mid: #0a1a24; --tree: #081720; --win: #ffcf7a; --win-op: .78; --wall0: #1a2f3c; --wall1: #0b1b25;
    --coping: #24404f; --seam: rgba(150, 205, 232, .08); --wat0: #1c6488; --wat1: #052033; --wave2: #2a7499; --crest: rgba(170, 225, 250, .55); --boat: #03101a;
    --gauge: #d3e0e5; --tick: #d9463f; --temple: #22333e; --temple-rim: rgba(227, 181, 90, .85); --roof: #2a3238; --bird: #3b5a6b; --hill: #0b1d29; --hill2: #0f2635;
    --lamp-op: 1; --refl-op: .7; --stars-op: 1; --orb: #e7f1f5; --orb-glow: rgba(170, 215, 238, .24); --halo: rgba(4, 12, 19, .82); }
.js .tv-stage.tv-ui { cursor: auto; }
.tv-stage[data-tod="day"] { --sky0: #0a2c47; --sky1: #1a557a; --sky2: #4a8cad; --far: #1d4a63; --mid: #163d54; --tree: #11364a; --win-op: .14; --wall0: #294859; --wall1: #142f3e;
    --coping: #3b6074; --wat0: #2a86b1; --wat1: #0b3b58; --wave2: #3b95bd; --temple: #2b5367; --roof: #8b5a46; --bird: #0d2a3a; --hill: #1c475b; --hill2: #2b5c72;
    --lamp-op: 0; --refl-op: 0; --stars-op: 0; --orb: #fff3cf; --orb-glow: rgba(255, 232, 170, .5); }
.tv-stage[data-tod="dawn"] { --sky0: #0d1736; --sky1: #3a3c6b; --sky2: #c27c66; --far: #1b2a48; --mid: #141f38; --tree: #10192c; --win-op: .5; --wall0: #253651; --wall1: #121b30;
    --coping: #34476a; --wat0: #3a6d9a; --wat1: #101f3d; --wave2: #5683ad; --temple: #2b3654; --roof: #6e4a52; --bird: #1b2340; --hill: #1f2948; --hill2: #2d3760;
    --lamp-op: .55; --refl-op: .45; --stars-op: .3; --orb: #ffe0b8; --orb-glow: rgba(255, 175, 130, .5); }
.tv-stage[data-tod="dusk"] { --sky0: #120f2e; --sky1: #4a2a56; --sky2: #c9643f; --far: #24183a; --mid: #1b1230; --tree: #140d24; --win-op: .7; --wall0: #2e2440; --wall1: #161024;
    --coping: #44365e; --wat0: #4b5c99; --wat1: #140f30; --wave2: #6670a8; --temple: #2f2440; --roof: #6a3e3a; --bird: #1a1030; --hill: #261a3d; --hill2: #36264f;
    --lamp-op: .85; --refl-op: .6; --stars-op: .2; --orb: #ffd2a0; --orb-glow: rgba(255, 150, 90, .55); }

/* ท้องฟ้า: ไล่สีตามเวลา + แสงฟุ้งที่เลื่อนช้า ๆ (ลมหายใจของฉาก) ดาวกลางคืน ดวงอาทิตย์/ดวงจันทร์ตามเวลาจริง เมฆหนาขึ้นเฉพาะตอนฝนตกจริง */
.tv-sky { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(180deg, var(--sky0) 0%, var(--sky1) 40%, var(--sky2) 60%, var(--wall1) 100%); }
.tv-sky i { position: absolute; display: block; }
.tv-sky-g { top: -25%; left: -25%; width: 150%; height: 150%; background: radial-gradient(45% 32% at 30% 30%, rgba(124, 196, 232, .16), transparent 70%), radial-gradient(40% 28% at 72% 22%, rgba(255, 196, 140, .1), transparent 70%);
    animation: tvSky 70s ease-in-out infinite alternate; }
@keyframes tvSky { to { transform: translate(7%, 5%) scale(1.08); } }
.tv-stars { top: 0; left: 0; width: 100%; height: 62%; opacity: var(--stars-op); animation: tvTwinkle 6s ease-in-out infinite alternate;
    background-image: radial-gradient(1.4px 1.4px at 8% 18%, #fff, transparent), radial-gradient(1px 1px at 16% 42%, #fff, transparent), radial-gradient(1.6px 1.6px at 27% 12%, #fff, transparent),
        radial-gradient(1px 1px at 35% 33%, #fff, transparent), radial-gradient(1.3px 1.3px at 44% 8%, #fff, transparent), radial-gradient(1px 1px at 52% 27%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 61% 15%, #fff, transparent), radial-gradient(1px 1px at 69% 39%, #fff, transparent), radial-gradient(1.2px 1.2px at 77% 9%, #fff, transparent),
        radial-gradient(1px 1px at 85% 30%, #fff, transparent), radial-gradient(1.6px 1.6px at 92% 14%, #fff, transparent), radial-gradient(1px 1px at 4% 55%, #fff, transparent),
        radial-gradient(1px 1px at 58% 50%, #fff, transparent), radial-gradient(1.2px 1.2px at 23% 60%, #fff, transparent), radial-gradient(1px 1px at 97% 48%, #fff, transparent); }
@keyframes tvTwinkle { to { opacity: calc(var(--stars-op) * .55); } }
.tv-orb { left: var(--ox, 80%); top: var(--oy, 18%); width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin: calc(-4.5 * var(--u)) 0 0 calc(-4.5 * var(--u)); border-radius: 50%;
    background: var(--orb); box-shadow: 0 0 calc(7 * var(--u)) calc(3 * var(--u)) var(--orb-glow); }
.tv-orb.moon { box-shadow: inset calc(-2.4 * var(--u)) calc(-1 * var(--u)) 0 0 rgba(4, 14, 22, .22), 0 0 calc(6 * var(--u)) calc(2 * var(--u)) var(--orb-glow); }
.tv-cloud { border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 225, 240, .11), transparent); filter: none; animation: tvCloud 120s linear infinite; opacity: .9; }
.tv-cloud.c1 { top: 12%; left: -30%; width: 60%; height: 18%; }
.tv-cloud.c2 { top: 26%; left: -40%; width: 46%; height: 14%; animation-duration: 160s; animation-delay: -60s; }
@keyframes tvCloud { to { transform: translateX(200vw); } }
.tv-stage[data-rain="1"] .tv-cloud, .tv-stage[data-rain="2"] .tv-cloud { background: radial-gradient(closest-side, rgba(70, 90, 110, .55), transparent); }
.tv-stage[data-rain="2"] .tv-sky-g { opacity: .4; }

/* ฉากคลอง: เต็มจอในฉาก "ตอนนี้" ถอยไปเป็นพื้นหลังจาง ๆ ในฉากอื่น (กล้องเลื่อนช้า ๆ ตามฉาก) */
.tv-art { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 72% 100%; transition: opacity 1.4s ease, transform 2.4s var(--ease); }
.tv-stage:not([data-scene="now"]) .tv-art { opacity: .26; transform: scale(1.06); }
.ta-ro, .ta-marks, .ta-ln-w, .ta-ln-c, .ta-now { transition: opacity .8s ease; }
.tv-stage:not([data-scene="now"]) :is(.ta-ro, .ta-marks, .ta-ln-w, .ta-ln-c, .ta-now) { opacity: 0; }
.tv-scrim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 1.2s ease;
    background: linear-gradient(90deg, rgba(4, 10, 16, .84) 0%, rgba(4, 10, 16, .58) 36%, rgba(4, 10, 16, 0) 60%), linear-gradient(0deg, rgba(4, 10, 16, .78) 0%, rgba(4, 10, 16, 0) 24%),
        linear-gradient(180deg, rgba(4, 10, 16, .6) 0%, rgba(4, 10, 16, 0) 16%); }
.tv-stage:not([data-scene="now"]) .tv-scrim { background: linear-gradient(180deg, rgba(4, 10, 16, .55), rgba(4, 10, 16, .78)); }
.ta-l { transition: transform 2.8s var(--ease); }
.ta-far { transform: translateX(var(--pf)); } .ta-mid { transform: translateX(var(--pm)); } .ta-near { transform: translateX(var(--pn)); }
.ta-b { fill: var(--far); } .ta-fw { fill: var(--win); opacity: calc(var(--win-op) * .55); }
.ta-flk { animation: taFlk 7s steps(1) infinite; } @keyframes taFlk { 0%, 100% { opacity: calc(var(--win-op) * .55); } 43% { opacity: .08; } 47% { opacity: calc(var(--win-op) * .55); } 71% { opacity: .12; } }
.ta-hill { fill: var(--hill); } .ta-hill2 { fill: var(--hill2); }
.ta-tglow { opacity: calc(var(--lamp-op) * .55); }
.ta-temple { fill: var(--temple); stroke: var(--temple-rim); stroke-width: 1.1; stroke-linejoin: round; }
.ta-roof { fill: var(--roof); } .ta-face { fill: var(--temple); stroke-width: .9; }
.ta-lit { fill: var(--win); stroke: none; opacity: var(--win-op); animation: taCandle 5s ease-in-out infinite alternate; } @keyframes taCandle { 50% { opacity: calc(var(--win-op) * .7); } }
.ta-gold { fill: none; stroke: var(--temple-rim); stroke-width: 1.4; }
.ta-pole { fill: var(--temple); } .ta-sr { fill: #b8283f; } .ta-sw { fill: #e4e2da; } .ta-sb { fill: #3b3f78; } .ta-flag path, .ta-flag rect, .ta-flag circle { stroke: none; }
.ta-cloth { transform-box: fill-box; transform-origin: 0 50%; animation: taFlag 2.4s ease-in-out infinite alternate; } @keyframes taFlag { from { transform: skewY(-5deg) scaleX(.92); } to { transform: skewY(4deg) scaleX(1); } }
.ta-glint { transform: translateX(-160px) skewX(-18deg); animation: taGlint 14s ease-in-out infinite 2s; opacity: .85; }
@keyframes taGlint { 0% { transform: translateX(-160px) skewX(-18deg); } 34%, 100% { transform: translateX(520px) skewX(-18deg); } }
.ta-mids { fill: var(--mid); } .ta-roofs { fill: var(--roof); } .ta-win { fill: var(--wall1); } .ta-win.on { fill: var(--win); opacity: var(--win-op); }
.ta-trees { fill: var(--tree); } .ta-palm { fill: none; stroke: var(--tree); stroke-width: 3.4; stroke-linecap: round; }
.ta-flock { animation: taFlock 80s linear infinite; } @keyframes taFlock { from { transform: translate(-120px, 30px); } to { transform: translate(1800px, -50px); } }
.tv-stage[data-tod="night"] .ta-flock { display: none; }
.ta-bird { fill: none; stroke: var(--bird); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 80%; animation: taFlap .42s ease-in-out infinite alternate; }
@keyframes taFlap { to { transform: scaleY(-.45); } }
.ta-rail, .ta-coping { fill: var(--coping); }
.ta-lamps .ta-post { fill: var(--mid); } .ta-lamps .ta-bulb { fill: #ffe2a8; opacity: max(var(--lamp-op), .25); } .ta-lamps .ta-glow { opacity: var(--lamp-op); }
.ta-seams line { stroke: var(--seam); stroke-width: 1.2; }
.ta-wall0 { stop-color: var(--wall0); } .ta-wall1 { stop-color: var(--wall1); } .ta-wat0 { stop-color: var(--wat0); } .ta-wat1 { stop-color: var(--wat1); }
.ta-stain { display: none; }
.ta-gback { fill: var(--gauge); } .ta-tick { fill: var(--tick); }
.ta-ln { stroke-width: 2.6; stroke-dasharray: 12 9; transition: transform 2s var(--ease); } .ta-ln-w { stroke: var(--warn); opacity: .8; } .ta-ln-c { stroke: var(--crit); opacity: .85; }
.ta-water, .ta-ro, .ta-mk { transition: transform 2.2s var(--ease); }
.ta-wave { will-change: transform; } .ta-w1 { animation: taWave 11s linear infinite; } .ta-w2 { animation: taWave2 17s linear infinite reverse; }
@keyframes taWave { to { transform: translateX(-1020px); } } @keyframes taWave2 { to { transform: translateX(-1040px); } }
.ta-w2 path { fill: var(--wave2); opacity: .8; } .ta-crest { fill: none; stroke: var(--crest); stroke-width: 1.8; }
.ta-refl { opacity: var(--refl-op); } .ta-rfl { animation: taShim 3.2s ease-in-out infinite; } @keyframes taShim { 50% { transform: scaleX(.55); opacity: .7; } }
.ta-boat { fill: var(--boat); stroke: var(--boat); stroke-width: 2; stroke-linejoin: round; }
.ta-drift { transform: translate(905px, -30px) scale(.8); animation: taDrift 46s ease-in-out infinite alternate; } @keyframes taDrift { to { transform: translate(960px, -30px) scale(.8); } }
.ta-bob { transform-box: fill-box; transform-origin: 50% 80%; animation: taBob 4.2s ease-in-out infinite; } @keyframes taBob { 25% { transform: translateY(2px) rotate(1.6deg); } 75% { transform: translateY(-2px) rotate(-1.4deg); } }
.ta-ro text, .ta-mk text, .ta-now { paint-order: stroke; stroke: var(--halo); stroke-width: 6px; stroke-linejoin: round; font-family: var(--font); }
.ta-ro-num { font-size: 96px; font-weight: 700; fill: var(--ink); letter-spacing: -.01em; }
.ta-ro-cap { font-size: 25px; font-weight: 600; fill: var(--ink); }
.ta-ro-sub { font-size: 21px; fill: var(--ink-2); }
.ta-mk text { font-size: 25px; font-weight: 700; } .ta-mk line { stroke-width: 3.2; }
.ta-mk-bank text { fill: var(--ink); } .ta-mk-bank line { stroke: var(--ink); } .ta-mk-warn text { fill: var(--warn); } .ta-mk-warn line { stroke: var(--warn); } .ta-mk-crit text { fill: var(--crit); } .ta-mk-crit line { stroke: var(--crit); }
.ta-mk.off { display: none; }
.ta-now { font-size: 26px; fill: var(--ink-2); }
.tv-art.ta-none .ta-water, .tv-art.ta-none .ta-ro, .tv-art.ta-none .ta-ln, .tv-art.ta-none .ta-mk-warn, .tv-art.ta-none .ta-mk-crit { display: none; }
/* ฝนจากสถานีวัดฝนจริงเท่านั้น (data-rain มาจาก server) ฝนหนักจริง = ถี่ขึ้น + ฟ้าแลบ */
.ta-rain { opacity: 0; transition: opacity 1.6s ease; }
.tv-stage[data-rain="1"] .ta-rain { opacity: .55; } .tv-stage[data-rain="2"] .ta-rain { opacity: .85; }
.ta-rain .ta-dh { display: none; } .tv-stage[data-rain="2"] .ta-rain .ta-dh { display: inline; }
.ta-drop { stroke: var(--crest); stroke-width: 1.6; stroke-linecap: round; animation: taFall .9s linear infinite; }
@keyframes taFall { from { transform: translate(0, -140px); } to { transform: translate(-90px, 1040px); } }
.ta-flash, .ta-bolt { opacity: 0; } .ta-flash { fill: #e8f3ff; } .ta-bolt { fill: #fff3c4; }
.tv-stage[data-rain="2"] .ta-flash { animation: taFlash 8s infinite 1s; } .tv-stage[data-rain="2"] .ta-bolt { animation: taBolt 8s infinite 1s; }
@keyframes taFlash { 0%, 89%, 100% { opacity: 0; } 90% { opacity: .55; } 91% { opacity: .1; } 92.5% { opacity: .4; } 94% { opacity: 0; } }
@keyframes taBolt { 0%, 89%, 100% { opacity: 0; } 90% { opacity: 1; } 91% { opacity: 0; } 92.5% { opacity: .9; } 93.5% { opacity: 0; } }

/* ---------- แถบบน: แบรนด์ พื้นที่ สด นาฬิกา เวลาข้อมูล ---------- */
.tv-top { position: absolute; left: 3.4vw; right: 3.4vw; top: 2.4vh; height: 8.6vh; display: flex; align-items: center; gap: 2vw; z-index: 6; margin: 0; }
.tv-brand { display: flex; align-items: center; gap: .55em; margin: 0; font-size: var(--fs-s); font-weight: 700; white-space: nowrap; color: var(--ink); }
.tv-brand img { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: calc(1.2 * var(--u)); }
.tv-brand b { color: var(--accent); font-weight: 700; }
.tv-brand em { font-style: normal; font-size: var(--fs-xs); padding: .12em .7em; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }
.tv-where { flex: 1; min-width: 0; display: flex; align-items: center; gap: .8em; margin: 0; }
.tv-where b { font-size: var(--fs-m); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); line-height: 1.3; }
.tv-live { display: inline-flex; align-items: center; gap: .45em; padding: .18em .8em .18em .6em; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
    background: rgba(220, 60, 60, .2); border: 1px solid rgba(255, 107, 102, .5); color: #ffd9d7; }
.tv-live i { width: .62em; height: .62em; border-radius: 50%; background: #ff5b55; box-shadow: 0 0 0 0 rgba(255, 91, 85, .6); animation: tvPulse 2s ease-out infinite; }
@keyframes tvPulse { 70% { box-shadow: 0 0 0 .6em rgba(255, 91, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 91, 85, 0); } }
.tv-live.stale { background: rgba(242, 193, 78, .14); border-color: rgba(242, 193, 78, .5); color: #ffe7ad; } .tv-live.stale i { background: var(--warn); animation: none; }
.tv-clock { display: flex; align-items: center; gap: 1.1vw; margin: 0; }
.tv-meta { display: flex; flex-direction: column; align-items: flex-end; margin: 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; text-align: right; }
.tv-dt .st { color: var(--warn); font-weight: 700; } .tv-dt i { font-style: normal; color: var(--ink-3); }
#tvClock { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
#tvClock i { font-style: normal; animation: tvBlink 2s steps(1) infinite; } @keyframes tvBlink { 50% { opacity: .25; } }
.tv-stalebar { position: absolute; top: 11.4vh; left: 50%; transform: translateX(-50%); z-index: 7; margin: 0; max-width: 80vw; padding: .35em 1.1em; border-radius: 999px;
    background: rgba(60, 44, 8, .92); border: 1px solid rgba(242, 193, 78, .7); color: #ffe7ad; font-size: var(--fs-s); font-weight: 600; text-align: center; line-height: 1.4; }
.tv-stalebar[hidden] { display: none; }

/* ---------- ฉาก: เข้าจากขวา จางออกไปทางซ้าย (ชั้นภาพหลังเลื่อนช้ากว่า = parallax) ---------- */
.tv-scenes { position: absolute; left: 3.4vw; right: 3.4vw; top: 13.4vh; bottom: 21.4vh; z-index: 4; margin: 0; padding: 0; display: block; }
.tv-sc { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; transform: translateX(5vw); }
.tv-sc.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .9s ease .35s, transform 1.3s var(--ease) .3s; }
.tv-sc.is-out { opacity: 0; visibility: visible; transform: translateX(-4vw); transition: opacity .55s ease, transform .9s cubic-bezier(.55, 0, .7, .2); }
.tv-sc.is-on [style*="--i"] { animation: tvUp .9s var(--ease) both; animation-delay: calc(.45s + var(--i) * .11s); }
@keyframes tvUp { from { opacity: 0; transform: translateY(2.4vh); } }
.tv-k { margin: 0; font-size: var(--fs-s); font-weight: 600; color: var(--accent); letter-spacing: .01em; line-height: 1.4; }
.tv-h { margin: 0; font-size: var(--fs-l); font-weight: 700; line-height: 1.25; color: var(--ink); }
.tv-h2 { margin: 0 0 2vh; font-size: var(--fs-m); font-weight: 700; line-height: 1.3; color: var(--ink); }
.tv-h2 small { display: block; margin-top: .3em; font-size: var(--fs-s); font-weight: 400; color: var(--ink-2); line-height: 1.4; }
.tv-num { font-variant-numeric: tabular-nums; }
.tv-wait { margin: 2vh 0 0; font-size: var(--fs-b); color: var(--ink-2); }

/* ตอนนี้: ตัวเลขใหญ่ 4 ช่อง ทางซ้าย ฉากคลองทางขวา */
.tv-now { height: 100%; display: flex; justify-content: space-between; gap: 2vw; }
.tv-now-l { width: min(57%, calc(112 * var(--u))); display: flex; flex-direction: column; gap: 1.2vh; }
.tv-now-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45em; }
.tv-now-h .tv-k { font-size: var(--fs-b); } .tv-now-h .tv-h { font-size: var(--fs-m); line-height: 1.4; }
.tv-now-r { flex: 0 1 34%; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.tv-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: .55em; margin: 0; padding: .22em .95em .22em .7em; border-radius: 999px; font-size: var(--fs-s); font-weight: 600;
    background: var(--glass); border: 1px solid var(--line); color: var(--ink); line-height: 1.4; }
.tv-pill i { width: .72em; height: .72em; border-radius: 3px; background: var(--off); flex: none; }
.tv-pill.lv-crit i { background: var(--crit); box-shadow: 0 0 .7em rgba(255, 107, 102, .8); } .tv-pill.lv-warn i { background: var(--warn); transform: rotate(45deg); border-radius: 2px; }
.tv-pill.lv-ok i { background: var(--ok); border-radius: 50%; } .tv-pill.lv-unk i, .tv-pill.lv-none i { background: transparent; border: 2px solid var(--off); border-radius: 50%; }
.tv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3vh 1.1vw; margin-top: .4vh; }
.tv-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.25vh 1.4vw 1.4vh; border-radius: calc(2.4 * var(--u)); overflow: hidden;
    background: linear-gradient(160deg, rgba(14, 36, 50, .82), rgba(6, 18, 27, .72)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.tv-tile::after { content: ""; position: absolute; right: -20%; top: -40%; width: 60%; height: 120%; background: radial-gradient(closest-side, var(--glow, transparent), transparent); opacity: .5; pointer-events: none; }
.tv-tile-ic { position: absolute; right: 1.2vw; top: 1.4vh; width: calc(5 * var(--u)); height: calc(5 * var(--u)); fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.tv-tile.c-crit .tv-tile-ic { stroke: var(--crit); } .tv-tile.c-warn .tv-tile-ic { stroke: var(--warn); } .tv-tile.c-rain .tv-tile-ic { stroke: var(--rain); } .tv-tile.c-info .tv-tile-ic { stroke: var(--accent); }
.tv-tile .tv-num { font-size: var(--fs-xl); line-height: 1.02; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.tv-tl { font-size: var(--fs-b); font-weight: 600; line-height: 1.4; color: var(--ink); }
.tv-tile small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.tv-tile.c-crit { --glow: rgba(255, 107, 102, .5); } .tv-tile.c-crit .tv-num { color: var(--crit); text-shadow: 0 0 .35em rgba(255, 107, 102, .35); }
.tv-tile.c-warn { --glow: rgba(242, 193, 78, .45); } .tv-tile.c-warn .tv-num { color: var(--warn); }
.tv-tile.c-rain { --glow: rgba(154, 166, 255, .45); } .tv-tile.c-rain .tv-num { color: var(--rain); }
.tv-tile.c-info .tv-num { color: var(--accent); } .tv-tile.c-zero .tv-num { color: var(--ink-2); } .tv-tile.c-na .tv-num { color: var(--ink-3); }
.tv-rain { display: flex; align-items: center; gap: .6em; margin: 0; padding: .5em 1.1em .5em .8em; border-radius: calc(1.8 * var(--u));
    background: var(--glass); border: 1px solid var(--line); font-size: var(--fs-s); line-height: 1.4; color: var(--ink); max-width: 100%; }
.tv-rain small { color: var(--ink-3); }
.tv-rain-ic { width: 2.1em; height: auto; flex: none; } .tv-rain-ic .rc { fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linejoin: round; }
.tv-rain-ic .rd { stroke: var(--rain); stroke-width: 2.6; stroke-linecap: round; animation: tvDrip 1s linear infinite; } @keyframes tvDrip { from { transform: translateY(-2px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(3px); opacity: 0; } }
.tv-rain.wet { border-color: rgba(154, 166, 255, .55); }
.tv-artnote { display: none; }

/* เรดาร์: แผนที่สี่เหลี่ยมจัตุรัสทางซ้าย ข้อมูลทางขวา */
.tv-rd { display: flex; gap: 2.6vw; height: 100%; }
.tv-rd-map { position: relative; flex: none; margin: 0; width: 65vh; max-width: 54vw; height: 100%; border-radius: calc(3 * var(--u)); overflow: hidden; background: #06131d;
    border: 1px solid var(--line); box-shadow: 0 3vh 8vh -3vh rgba(0, 0, 0, .7); }
.tv-rd-map svg { display: block; width: 100%; height: 100%; }
.tv-rd-map figcaption { position: absolute; left: 1.2vw; bottom: 1vh; margin: 0; font-size: var(--fs-xs); color: var(--ink-2); background: rgba(4, 12, 19, .7); padding: .15em .7em; border-radius: 999px; }
.tv-rd-img { opacity: .92; mix-blend-mode: screen; }
.tm-sea { fill: #06131d; } .tm-land { fill: #0c1820; } .tm-th { fill: #0f2331; } .tm-mef { fill: rgba(124, 196, 232, .2); }
.tm-pv, .tm-rv, .tm-d, .tm-bkk, .tm-me, .tm-ring { fill: none; vector-effect: non-scaling-stroke; }
.tm-pv { stroke: rgba(160, 205, 230, .32); stroke-width: 1.3px; }
.tm-rv { stroke: rgba(70, 160, 225, .55); stroke-width: 1.4px; } .tm-rv.r2 { stroke-width: 2.2px; } .tm-rv.r3 { stroke-width: 3px; }
.tm-d { stroke: rgba(160, 205, 230, .34); stroke-width: 1px; }
.tm-bkk { stroke: rgba(205, 235, 250, .85); stroke-width: 2.4px; }
.tm-me { stroke: #9fdcff; stroke-width: 3.6px; }
.tm-ring { stroke: rgba(124, 196, 232, .4); stroke-width: 1.6px; stroke-dasharray: 7 7; }
.tm-site { fill: #7cc4e8; }
.tm-pl { fill: rgba(222, 238, 246, .8); font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 12, 18, .88); stroke-width: .3em; stroke-linejoin: round; font-family: var(--font); }
.tm-pl.me { fill: #fff; font-weight: 700; font-size: 1.28em; } .tm-pl.bk { fill: #eaf7fd; font-size: 1.1em; font-weight: 700; } .tm-pl.rd { fill: #9fdcff; font-size: .82em; }
.tv-rd-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5vh; }
.tv-rd-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .35em; margin: 0; color: var(--ink); }
.tv-rd-t b { font-size: var(--fs-xl); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tv-rd-t span { font-size: var(--fs-m); font-weight: 700; } .tv-rd-t small { flex-basis: 100%; font-size: var(--fs-s); color: var(--ink-2); }
.tv-rd-tl { display: flex; align-items: flex-end; gap: .45vw; list-style: none; margin: 0; padding: 0 0 2.6vh; position: relative; }
.tv-rd-tl li { position: relative; flex: 1; height: 1.1vh; border-radius: 999px; background: rgba(124, 196, 232, .2); transition: background .3s; }
.tv-rd-tl li.past { background: rgba(124, 196, 232, .45); } .tv-rd-tl li.on { background: var(--accent); box-shadow: 0 0 1.2vh rgba(124, 196, 232, .8); }
.tv-rd-tl li span { position: absolute; top: 1.7vh; left: 0; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; } .tv-rd-tl li:last-child span { left: auto; right: 0; }
.tv-rd-txt { margin: 0; font-size: var(--fs-b); font-weight: 700; line-height: 1.4; color: var(--ink); }
.tv-rd-sub { margin: 0; font-size: var(--fs-s); line-height: 1.4; color: var(--ink-2); } .tv-rd-sub small { color: var(--ink-3); font-size: var(--fs-xs); }
.tv-rd-lg { display: flex; flex-wrap: wrap; gap: .5vh 1.1vw; list-style: none; margin: auto 0 0; padding: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.tv-rd-lg li { display: inline-flex; align-items: center; gap: .4em; } .tv-rd-lg i { width: 1.6em; height: .8em; border-radius: 3px; opacity: .9; }
.tv-rd-note { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.tm-sweep { transform-origin: 0 0; animation: tvSweep 7s linear infinite; } @keyframes tvSweep { to { transform: rotate(360deg); } }
.tm-beam { stroke: rgba(160, 225, 250, .55); stroke-width: 1.6px; vector-effect: non-scaling-stroke; fill: none; }

/* กล้อง: ห้องควบคุม 2x2 ภาพใหญ่ + คำอธิบายข้างภาพ (ภาพล่าสุดเท่านั้น ซูมช้า ๆ) */
.tv-nw { white-space: nowrap; }
.tv-cams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 1.8vh 1.6vw; height: 100%; }
.tv-cams.n1 { grid-template-columns: minmax(0, 70vw); justify-content: center; }
.tv-cam { margin: 0; display: flex; align-items: center; gap: 1.2vw; min-width: 0; min-height: 0; padding: 1.2vh; border-radius: calc(2.4 * var(--u)); background: var(--glass); border: 1px solid var(--line); }
.tv-cams.n3 .tv-cam:first-child { grid-row: span 2; flex-direction: column; align-items: stretch; }
.tv-cams.n2 .tv-cam, .tv-cams.n1 .tv-cam { flex-direction: column; align-items: stretch; }
.tv-cam.dead { display: none; }
.tv-cam-img { position: relative; flex: 0 0 58%; align-self: stretch; overflow: hidden; border-radius: calc(1.6 * var(--u)); background: #0b1820; box-shadow: 0 1.4vh 4vh -1.6vh rgba(0, 0, 0, .8); }
.tv-cams.n3 .tv-cam:first-child .tv-cam-img, .tv-cams.n2 .tv-cam-img, .tv-cams.n1 .tv-cam-img { flex: 1 1 auto; min-height: 0; }
.tv-rec { position: absolute; left: .8vw; top: 1vh; font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: #fff; padding: .1em .7em .1em 1.5em; border-radius: 999px; background: rgba(4, 12, 19, .62); }
.tv-rec::before { content: ""; position: absolute; left: .6em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: #ff5b55; animation: tvBlink 2s steps(1) infinite; }
.tv-cam.fl .tv-cam-img { border-color: var(--crit); box-shadow: 0 0 0 2px rgba(255, 107, 102, .5), 0 2vh 5vh -2vh rgba(0, 0, 0, .7); }
.tv-cam-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; animation: tvKb 22s linear both; }
.tv-cam:nth-child(2n) .tv-cam-img img { animation-name: tvKb2; }
@keyframes tvKb { from { transform: scale(1.01); } to { transform: scale(1.09) translate(-1.5%, -1%); } } @keyframes tvKb2 { from { transform: scale(1.08) translate(1%, 1%); } to { transform: scale(1.01); } }
.tv-cam figcaption { display: flex; flex-direction: column; gap: .4vh; min-width: 0; }
.tv-cam figcaption b { font-size: var(--fs-b); font-weight: 700; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv-cams.n3 .tv-cam:first-child figcaption b, .tv-cams.n2 figcaption b, .tv-cams.n1 figcaption b { -webkit-line-clamp: 1; }
.tv-cam figcaption span { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.tv-cam time { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.4; } .tv-cam time.old { color: var(--warn); }
.tv-cam em { font-style: normal; font-size: var(--fs-xs); color: #ffc9c6; }

/* จุดที่น่าจับตา: หลอดแก้ว 6 หลอด */
.tv-watch { height: 100%; display: flex; flex-direction: column; }
.tv-gz-row { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1vw; list-style: none; margin: 0; padding: 0; align-items: start; }
.tv-gz-row.n1, .tv-gz-row.n2, .tv-gz-row.n3 { grid-template-columns: repeat(3, minmax(0, 17vw)); justify-content: center; } .tv-gz-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tv-gz-row.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tv-gz { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; gap: .5vh; }
.tv-tube { display: block; height: 26vh; width: auto; max-width: 100%; overflow: visible; }
.tv-gz.over .tv-tube { filter: drop-shadow(0 0 1.4vh rgba(255, 107, 102, .6)); }
.tz-glass { fill: rgba(150, 210, 240, .08); } .tz-rim { fill: none; stroke: rgba(190, 230, 250, .55); stroke-width: 2.2; }
.tz-hl { stroke: rgba(255, 255, 255, .28); stroke-width: 6; stroke-linecap: round; fill: none; }
.tz-fill { fill: #1d7fb3; } .tz-wave { fill: #74ccf3; }
.lv-crit .tz-wave { fill: #ff8f84; } .lv-warn .tz-wave { fill: #f6cf6e; } .lv-off .tz-fill { fill: #3a5563; } .lv-off .tz-wave { fill: #557282; }
.tz-water { animation: tzRise 1.8s var(--ease) both; animation-delay: calc(.5s + var(--i, 0) * .12s); }
@keyframes tzRise { from { transform: translateY(var(--h)); } }
.tz-wave { animation: tzWave 2.6s linear infinite; } @keyframes tzWave { to { transform: translateX(-56px); } }
.tz-bub circle { fill: rgba(255, 255, 255, .55); animation: tzBub 3.4s ease-in infinite; } .tz-bub circle:nth-child(2) { animation-delay: -1.1s; } .tz-bub circle:nth-child(3) { animation-delay: -2.2s; }
@keyframes tzBub { from { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } to { transform: translateY(-120px); opacity: 0; } }
.tz-bank { stroke: #eaf5fa; stroke-width: 2.4; stroke-dasharray: 7 5; fill: none; } .tz-bt { font-size: 21px; font-weight: 700; fill: var(--ink-2); font-family: var(--font); }
.tz-bot { stroke: var(--ink-3); stroke-width: 2; } .tz-bb { font-size: 17px; font-weight: 600; fill: var(--ink-3); }
.tv-road .tz-fill { fill-opacity: .58; } .tv-road .tz-wave { fill-opacity: .85; }
.tz-thr { stroke-width: 4.4; stroke-linecap: round; fill: none; } .tz-tw { stroke: var(--warn); } .tz-tc { stroke: var(--crit); }
.tz-na { font-size: 64px; font-weight: 700; fill: var(--ink-3); font-family: var(--font); }
.tr-mm { stroke: rgba(234, 245, 250, .35); stroke-width: 1.4; } .tr-mm.k { stroke: rgba(234, 245, 250, .6); stroke-width: 2; }
.tr-road { fill: #2b3237; } .tr-lane { stroke: #e9d36a; stroke-width: 3; fill: none; }
.tr-l { stroke-width: 3; } .tr-t { font-size: 19px; font-weight: 700; fill: var(--ink-2); font-family: var(--font); paint-order: stroke; stroke: rgba(4, 12, 19, .7); stroke-width: 3px; } .tr-up { fill: var(--crit); }
.tv-gz-lv { display: inline-flex; align-items: center; gap: .45em; margin: .4vh 0 0; padding: .12em .8em .12em .6em; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700;
    background: rgba(107, 133, 147, .22); color: var(--ink); line-height: 1.4; }
.tv-gz-lv i { width: .7em; height: .7em; border-radius: 50%; background: var(--off); }
.lv-crit > .tv-gz-lv, .lv-crit .tv-gz-lv { background: rgba(255, 107, 102, .2); color: #ffd3d1; } .lv-crit .tv-gz-lv i { background: var(--crit); border-radius: 2px; }
.lv-flood .tv-gz-lv { background: rgba(255, 107, 102, .2); color: #ffd3d1; } .lv-flood .tv-gz-lv i { background: var(--crit); border-radius: 2px; }
.lv-warn .tv-gz-lv, .lv-slight .tv-gz-lv { background: rgba(242, 193, 78, .18); color: #ffe7ad; } .lv-warn .tv-gz-lv i, .lv-slight .tv-gz-lv i { background: var(--warn); transform: rotate(45deg); border-radius: 1px; }
.lv-ok .tv-gz-lv i { background: var(--ok); } .lv-unk .tv-gz-lv i, .lv-off .tv-gz-lv i { background: transparent; border: 2px solid var(--off); }
.tv-gz-lv span { font-weight: 400; color: var(--ink-2); }
.tv-gz-n { margin: 0; font-size: var(--fs-s); font-weight: 700; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-gz-w { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tv-gz-v { margin: 0; font-size: var(--fs-s); font-weight: 600; line-height: 1.4; color: var(--ink); }
.tv-gz.over .tv-gz-v, .lv-flood .tv-gz-v { color: #ffc0bb; }
.tv-gz-t { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.tv-tr { white-space: nowrap; } .tv-tr.up { color: #ffb0a6; } .tv-tr.dn { color: #8fe0c8; }

/* แม่น้ำเจ้าพระยา: สถานีเรียงเหนือลงใต้บนสายน้ำ (ไม่ขยับไปทางไหน: ไม่บอกทิศ/ความเร็วการไหล) + เขื่อนเจ้าพระยาที่ละติจูดของมัน */
.tv-river { height: 100%; display: flex; flex-direction: column; }
.tv-rv { position: relative; flex: 1; min-height: 0; }
.tv-rv-band { position: absolute; left: -3.4vw; right: -3.4vw; top: 9vh; height: 16vh; width: calc(100% + 6.8vw); }
.rv-bank { fill: rgba(40, 120, 170, .3); } .rv-shine { fill: none; stroke: rgba(140, 210, 245, .35); stroke-width: 2; }
.tv-rv-row { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .9vw; list-style: none; margin: 0; padding: 0; align-items: start; }
.tv-rv-st, .tv-rv-dam { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4vh; min-width: 0; }
.tv-rv-st .tv-tube { height: 24vh; }
.tv-rv-st.over .tv-tube { filter: drop-shadow(0 0 1.3vh rgba(255, 107, 102, .6)); }
.tv-rv-n { font-size: var(--fs-s); font-weight: 700; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-rv-v { font-size: var(--fs-s); line-height: 1.4; color: var(--ink-2); } .tv-rv-st.over .tv-rv-v { color: #ffc0bb; font-weight: 700; }
.tv-rv-st small, .tv-rv-dam small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.tv-rv-st.bkk .tv-rv-n::after { content: " กทม."; font-weight: 400; color: var(--accent); }
.tv-rv-dam { padding-top: 6vh; }
.tv-rv-dam svg { width: 80%; max-width: calc(14 * var(--u)); height: auto; }
.dmi-w { fill: #2a86b1; opacity: .8; } .dmi-wall { fill: #9fb5c1; } .dmi-g { stroke: #5f7480; stroke-width: 2; fill: none; } .dmi-out { stroke: #74ccf3; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.tv-rv-dam b { font-size: var(--fs-s); line-height: 1.4; }
.tv-rv-q { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; } .tv-rv-q .tv-num { font-size: var(--fs-m); color: var(--accent); }
.tv-stale { margin: 1vh 0 0; font-size: var(--fs-s); color: var(--warn); }

/* เขื่อนในจังหวัด */
.tv-dams { height: 100%; display: flex; flex-direction: column; }
.tv-dam-row { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2vw; align-items: center; }
.tv-dams.n1 .tv-dam-row { grid-template-columns: minmax(0, 60vw); justify-content: center; }
.tv-dam { display: flex; align-items: center; gap: 1.6vw; padding: 2vh 1.6vw; border-radius: calc(2.6 * var(--u)); background: var(--glass); border: 1px solid var(--line); min-width: 0; }
.tv-damsvg { width: 46%; flex: none; height: auto; overflow: visible; }
.dm-hill { fill: #1c3a4a; } .dm-full { stroke: #eaf5fa; stroke-width: 2.4; stroke-dasharray: 8 6; fill: none; } .dm-ft { font-size: 17px; fill: var(--ink-2); font-family: var(--font); }
.dm-wall { fill: #9fb5c1; } .dm-out { stroke: #74ccf3; stroke-width: 3; fill: none; stroke-linecap: round; }
.tv-dam-b { min-width: 0; display: flex; flex-direction: column; gap: .5vh; }
.tv-dam-p { margin: 0; display: flex; align-items: baseline; gap: .3em; } .tv-dam-p b { font-size: var(--fs-xl); line-height: 1; font-weight: 700; color: var(--warn); }
.tv-dam.lv-crit .tv-dam-p b { color: var(--crit); } .tv-dam-p span { font-size: var(--fs-s); color: var(--ink-2); }
.tv-dam h3 { margin: 0; font-size: var(--fs-b); line-height: 1.4; color: var(--ink); } .tv-dam-t { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }

/* QR: ดูของคุณเองที่ */
.tv-qr { height: 100%; display: flex; align-items: center; gap: 3.4vw; }
.tv-qr-card { margin: 0; flex: none; width: 50vh; max-width: 40vw; padding: 2.2vh; border-radius: calc(3 * var(--u)); background: #fff; color: #0b2a3a; text-align: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 8vh -1vh rgba(124, 196, 232, .55); animation: tvGlow 4s ease-in-out infinite alternate; }
@keyframes tvGlow { to { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 11vh 0 rgba(124, 196, 232, .75); } }
.tv-qr-svg { display: block; width: 100%; height: auto; } .qb { fill: #fff; } .qm rect { fill: #0b2a3a; } .qm .qf { fill: none; stroke: #0b2a3a; stroke-width: 1; }
.qh { fill: #fff; } .qd { fill: #4fb3e3; stroke: #1c6f9b; stroke-width: 1.4; }
.tv-qr-card figcaption { margin-top: 1vh; font-size: var(--fs-b); font-weight: 700; color: #0b2a3a; }
.tv-qr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.3vh; }
.tv-qr-url { margin: 0; font-size: calc(8.6 * var(--u)); font-weight: 700; line-height: 1.1; color: var(--accent); letter-spacing: -.01em; overflow-wrap: anywhere; }
.tv-qr-sub { margin: 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.4; } .tv-qr-sub span { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.tv-qr-list { display: grid; gap: 1vh; list-style: none; margin: .6vh 0 0; padding: 0; font-size: var(--fs-b); line-height: 1.4; color: var(--ink); }
.tv-qr-list li { display: flex; align-items: center; gap: .6em; } .tv-qr-list .tv-ic { width: 1.25em; height: 1.25em; flex: none; }
.tv-qr-fine { margin: .6vh 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.tv-qr-mc { flex: none; width: 30vh; } .tv-qr-mcs { width: 100%; height: auto; }
.tv-ic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tv-qr-list .tv-ic { stroke: var(--accent); }

/* ---------- แถบล่างแบบรายการข่าว + ความคืบหน้าของฉาก ---------- */
.tv-low { position: absolute; left: calc(3.4vw + 15.4vh); right: 3.4vw; bottom: 2.6vh; z-index: 6; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "tab cap cap" "cred cred dots"; align-items: center; gap: .5vh 1.4vw; padding: 1.4vh 1.8vw 1.9vh 2vw; border-radius: calc(2.4 * var(--u)); overflow: hidden;
    background: linear-gradient(180deg, rgba(11, 30, 43, .94), rgba(5, 16, 24, .94)); border: 1px solid var(--line); box-shadow: 0 2vh 6vh -2vh rgba(0, 0, 0, .7); }
.tv-tab { grid-area: tab; display: inline-flex; align-items: center; gap: .45em; margin: 0; padding: .2em .95em .2em .6em; border-radius: 999px; background: var(--accent); color: #04202c;
    font-size: var(--fs-s); font-weight: 700; white-space: nowrap; line-height: 1.4; }
.tv-tab-n { display: inline-flex; } .tv-tab .tv-ic { width: 1.2em; height: 1.2em; stroke: #04202c; }
.tv-cap { grid-area: cap; margin: 0; font-size: var(--fs-b); font-weight: 600; line-height: 1.4; color: var(--ink); }
.tv-seg { display: inline-block; max-width: 100%; } .tv-sep { font-style: normal; color: var(--ink-3); }
.tv-tab, .tv-cap { transition: opacity .25s ease; } .tv-low.speak .tv-tab, .tv-low.speak .tv-cap { opacity: 0; }
.tv-cred { grid-area: cred; margin: 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.tv-dots { grid-area: dots; display: flex; align-items: center; gap: .5vw; list-style: none; margin: 0; padding: 0; }
.tv-dots li { width: 1vh; height: 1vh; border-radius: 999px; background: rgba(124, 196, 232, .32); transition: width .5s var(--ease), background .5s; }
.tv-dots li.on { width: 3vh; background: var(--accent); }
.tv-prog { position: absolute; left: 0; right: 0; bottom: 0; height: .55vh; background: rgba(255, 255, 255, .06); }
.tv-prog i { display: block; width: 100%; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), #c4ecff); animation: tvProg var(--dur, 20s) linear both; }
@keyframes tvProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tv-low.swap .tv-tab { animation: tvLowIn .7s var(--ease) both; } .tv-low.swap .tv-cap { animation: tvLowIn .8s var(--ease) .12s both; } .tv-low.swap .tv-cred { animation: tvLowIn .8s var(--ease) .2s both; }
@keyframes tvLowIn { from { opacity: 0; transform: translateY(1.2vh); } }
.tv-stage[data-mood="heavy"] .tv-tab { background: #ffb3ad; } .tv-stage[data-mood="watch"] .tv-tab { background: #ffe199; }

/* ---------- น้องน้ำผู้ประกาศ (ท่าตามจำนวนจุดที่ถึงเกณฑ์: calm ไมค์ยิ้ม, watch คิ้วยก เหงื่อ, heavy ห่วงยาง คิ้วจริงจัง) ---------- */
.tv-mc { position: absolute; left: .5vw; bottom: .6vh; width: 21.5vh; height: 18vh; z-index: 7; pointer-events: none; transition: opacity .6s ease; }
.tv-stage[data-scene="qr"] .tv-mc { opacity: 0; }
.tv-mc-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mc-shadow { fill: rgba(0, 0, 0, .38); }
.mc-body { transform-origin: 0 30px; animation: mcBob 3.6s ease-in-out infinite; } @keyframes mcBob { 50% { transform: translateY(-2.5px) rotate(-1.4deg); } }
.mc-eyes { transform-origin: 0 6px; animation: mcBlink 5.4s infinite; } @keyframes mcBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.mc-mouth { fill: none; stroke: #0b2a3a; stroke-width: 1.5; stroke-linecap: round; } .mc-talk { fill: #0b2a3a; opacity: 0; }
.tv-mc.talk .mc-talk { animation: mcTalk .3s steps(1) infinite; } .tv-mc.talk .mc-mouth { animation: mcTalk2 .3s steps(1) infinite; }
@keyframes mcTalk { 50% { opacity: 1; } } @keyframes mcTalk2 { 50% { opacity: 0; } }
.mc-brow, .mc-brow2, .mc-sweat, .mc-ring, .mc-ring-b, .mc-arm, .mc-fx { display: none; }
.mc-brow, .mc-brow2 { fill: none; stroke: #0b2a3a; stroke-width: 1.5; stroke-linecap: round; }
[data-mood="watch"] .mc-brow, [data-mood="watch"] .mc-sweat { display: inline; }
[data-mood="heavy"] .mc-brow2, [data-mood="heavy"] .mc-ring, [data-mood="heavy"] .mc-ring-b { display: inline; }
.mc-sweat { fill: #bfe8fb; stroke: #1c6f9b; stroke-width: .8; animation: mcSweat 2.6s ease-in infinite; } @keyframes mcSweat { 0%, 30% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }
.mc-ring-f, .mc-ring-b { fill: none; stroke: #ff7a45; stroke-width: 6.4; } .mc-ring-b { stroke: #d65b2c; } .mc-ring-s { fill: none; stroke: #fff; stroke-width: 6.4; stroke-dasharray: 7 10; }
.mc-limb { fill: none; stroke: #1c6f9b; stroke-width: 4.2; stroke-linecap: round; } .mc-hand { fill: #58b9e6; stroke: #1c6f9b; stroke-width: 1.2; }
.mc-micstick { stroke: #26353f; stroke-width: 3.2; stroke-linecap: round; fill: none; } .mc-michead { fill: #31424d; stroke: #121c22; stroke-width: 1; }
.mc-micshine { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
.mc-mic { transform-origin: 17px 12px; animation: mcMic 3.6s ease-in-out infinite; } @keyframes mcMic { 50% { transform: rotate(-6deg); } }
.mc-spark { fill: #ffd36b; transform-box: fill-box; transform-origin: center; animation: mcSpark 1.8s ease-in-out infinite; } .mc-spark.s2 { animation-delay: -.9s; }
@keyframes mcSpark { 50% { transform: scale(.4) rotate(45deg); opacity: .5; } }
.tv-qr-mcs .mc-arm, .tv-qr-mcs .mc-fx { display: inline; } .tv-qr-mcs .mc-mic, .tv-qr-mcs .mc-ring, .tv-qr-mcs .mc-ring-b, .tv-qr-mcs .mc-brow2, .tv-qr-mcs .mc-sweat, .tv-qr-mcs .mc-brow { display: none; }
.mc-desk-t { fill: #0f2a3a; stroke: rgba(124, 196, 232, .5); stroke-width: 1; } .mc-desk-s { stroke: #7cc4e8; stroke-width: 1.4; opacity: .8; }
.mc-desk-l { fill: #ff5b55; animation: tvBlink 2s steps(1) infinite; } .mc-desk-w { fill: none; stroke: #7cc4e8; stroke-width: 1.4; stroke-linecap: round; }
.tv-qr-mcs .mc-desk { display: none; }
.tv-qr-mcs .mc-arm { transform-origin: -15px 4px; animation: mcWave 1.3s ease-in-out infinite; } @keyframes mcWave { 50% { transform: rotate(-24deg); } }
.tv-qr-mcs .mc-body { animation: mcHop 1.3s ease-in-out infinite; } @keyframes mcHop { 50% { transform: translateY(-4px); } }
/* คำเปิดฉากของน้องน้ำ: บอลลูนคำพูดในแถบล่าง หางชี้ไปที่น้องน้ำ 3 วิ แล้วแถบล่างเป็นข้อความหลัก */
.tv-bub { position: absolute; left: 1.2vw; top: 1.1vh; bottom: calc(2.4vh + 1.4 * var(--fs-xs)); max-width: 72%; z-index: 2; display: flex; align-items: center; margin: 0; padding: 0 1.4vw;
    border-radius: calc(1.6 * var(--u)); background: #f5fbfe; color: #0b2a3a; font-size: var(--fs-b); font-weight: 700; line-height: 1.3; white-space: nowrap;
    box-shadow: 0 1vh 3vh -1vh rgba(0, 0, 0, .55); opacity: 0; transform: translateX(-1.6vw) scale(.94); transform-origin: 0 50%; pointer-events: none;
    transition: opacity .3s ease, transform .5s var(--ease); }
.tv-bub::before { content: ""; position: absolute; left: -.9vw; top: 50%; margin-top: -1vh; border-style: solid; border-width: 1vh 1vw 1vh 0; border-color: transparent #f5fbfe transparent transparent; }
.tv-bub.on { opacity: 1; transform: none; } .tv-bub span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- ปุ่มควบคุม (ขยับเมาส์/แตะ/โฟกัสแล้วเห็น) ---------- */
.tv-ctl { position: absolute; right: 1vw; top: 13.4vh; z-index: 8; display: flex; flex-direction: column; gap: 1vh; opacity: 0; transition: opacity .3s ease; }
.tv-ui .tv-ctl, .tv-ctl:focus-within { opacity: 1; }
.tv-btn { width: max(44px, calc(6 * var(--u))); height: max(44px, calc(6 * var(--u))); display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%;
    background: rgba(8, 22, 32, .85); color: var(--ink); cursor: pointer; }
.tv-btn:hover { background: rgba(20, 50, 68, .95); } .tv-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .tv-btn.on { background: var(--accent); color: #04202c; }
.tv-ico { position: relative; display: block; width: 42%; height: 42%; }
.tv-ico-pause::before, .tv-ico-pause::after { content: ""; position: absolute; top: 0; bottom: 0; width: 32%; border-radius: 2px; background: currentColor; } .tv-ico-pause::before { left: 6%; } .tv-ico-pause::after { right: 6%; }
.tv-btn.on .tv-ico-pause::before { left: 18%; width: 0; height: 0; top: 0; border-style: solid; border-width: .5em 0 .5em .8em; border-color: transparent transparent transparent currentColor; background: none; border-radius: 0; }
.tv-btn.on .tv-ico-pause::after { display: none; }
.tv-ico-fs { border: 2px solid currentColor; border-radius: 3px; } .tv-ico-fs::before { content: ""; position: absolute; left: 22%; right: 22%; top: 22%; bottom: 22%; background: currentColor; border-radius: 1px; opacity: .6; }
.tv-ico-gear { border: 3px solid currentColor; border-radius: 50%; } .tv-ico-gear::before { content: ""; position: absolute; left: 50%; top: -38%; bottom: -38%; width: 18%; margin-left: -9%; background: currentColor; border-radius: 2px; box-shadow: 0 0 0 0; }
.tv-ico-gear::after { content: ""; position: absolute; top: 50%; left: -38%; right: -38%; height: 18%; margin-top: -9%; background: currentColor; border-radius: 2px; }

/* ---------- เปิดหน้า: โลโก้ + พื้นที่ แล้วจางเข้าเรื่อง ---------- */
.js .tv-stage.intro .tv-intro { display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(14, 40, 58, .97), rgba(3, 9, 14, .99)); animation: tvIntroOut .9s ease 1.6s both; }
.tv-intro p { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; margin: 0; animation: tvIntroIn 1s var(--ease) both; text-align: center; }
.tv-intro img { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(2.6 * var(--u)); box-shadow: 0 0 6vh rgba(124, 196, 232, .45); }
.tv-intro b { font-size: var(--fs-l); font-weight: 700; color: var(--ink); } .tv-intro b span { color: var(--accent); } .tv-intro small { font-size: var(--fs-b); color: var(--ink-2); }
@keyframes tvIntroIn { from { opacity: 0; transform: scale(.9) translateY(2vh); } } @keyframes tvIntroOut { to { opacity: 0; visibility: hidden; } }

/* ---------- ตั้งค่าจอ (ไม่มี JS = ฟอร์มธรรมดาในหน้า, มี JS = หน้าต่างลอย) ---------- */
.tv-setup { padding: 8px 16px 32px; }
.js .tv-setup { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; padding: 3vh 16px; background: rgba(3, 9, 14, .78); overflow-y: auto; align-items: flex-start; justify-content: center; }
.js .tv-setup.open { display: flex; }
.tv-set { position: relative; width: 100%; max-width: 820px; margin: auto; padding: 28px 32px 26px; border-radius: 28px; color: var(--ink);
    background: linear-gradient(170deg, rgba(16, 42, 58, .98), rgba(7, 20, 30, .98)); border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); font-size: max(16px, calc(2.4 * var(--u))); }
.tv-set-mc { position: absolute; right: 20px; top: -46px; width: 120px; height: 100px; }
.tv-set-mc .mc-mic { display: inline; }
.tv-set h2 { margin: 0 0 10px; font-size: 1.6em; line-height: 1.3; color: var(--ink); padding-right: 120px; }
.tv-set-lead { margin: 0 0 16px; color: var(--ink-2); line-height: 1.5; }
.tv-set-bad { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(242, 193, 78, .6); background: rgba(60, 44, 8, .6); color: #ffe7ad; line-height: 1.5; }
.tv-set-l { display: block; margin: 0 0 6px; font-weight: 700; }
.tv-sel { display: block; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: #0a1c27; color: var(--ink); font: inherit; font-size: max(16px, 1.05em); }
.tv-sel:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.tv-set-sc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; counter-reset: sc; }
.tv-set-sc li { counter-increment: sc; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: .82em; line-height: 1.5; }
.tv-set-sc li::before { content: counter(sc) " "; color: var(--accent); font-weight: 700; }
.tv-set-act { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 14px; }
.tv-go { min-height: 56px; min-width: 9em; padding: 8px 28px; border: 0; border-radius: 16px; background: var(--accent); color: #04202c; font: inherit; font-weight: 700; font-size: 1.15em; cursor: pointer;
    box-shadow: 0 12px 30px -12px rgba(124, 196, 232, .8); }
.tv-go:focus-visible, .tv-set-x:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tv-set-x { min-height: 56px; padding: 8px 22px; border-radius: 16px; border: 2px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.tv-set-x[hidden] { display: none; }
.tv-set-tips { margin: 0 0 12px; padding-left: 1.2em; color: var(--ink-2); line-height: 1.5; font-size: .9em; } .tv-set-tips li { margin: 0 0 4px; }
.tv-set-fine { margin: 0; color: var(--ink-3); font-size: .82em; line-height: 1.5; }

/* ---------- จอแนวตั้ง (มือถือ) และจอเตี้ย: จัดซ้อนลงมา ตัวหนังสือตามความกว้าง ---------- */
@media (max-aspect-ratio: 4/5) {
    body.tv { --u: min(.78vh, 1.5vw); --fs-xs: 12px; --fs-s: 14px; --fs-b: 16px; --fs-m: 20px; --fs-l: 26px; --fs-xl: 40px; }
    /* แถบบน 3 แถว: แบรนด์ + นาฬิกา / สด + พื้นที่ / เวลาของข้อมูล */
    .tv-top { flex-wrap: wrap; height: auto; top: 1.4vh; left: 4vw; right: 4vw; gap: .4vh 3vw; }
    .tv-clock { display: contents; }
    .tv-brand { order: 1; } #tvClock { order: 2; margin-left: auto; font-size: var(--fs-l); } .tv-where { order: 3; flex-basis: 100%; } .tv-meta { order: 4; flex-basis: 100%; align-items: flex-start; text-align: left; }
    .tv-brand em, .tv-meta #tvDate { display: none; } .tv-brand img { width: 30px; height: 30px; border-radius: 8px; } .tv-where b { font-size: var(--fs-m); }
    .tv-scenes { top: 17.5vh; bottom: 24.5vh; left: 4vw; right: 4vw; }
    .tv-stalebar { top: 17vh; font-size: var(--fs-xs); max-width: 92vw; }
    .tv-sc.is-on [style*="--i"] { animation-delay: calc(.3s + var(--i) * .06s); }
    .tv-h2 { margin-bottom: 1vh; }
    .tv-now { flex-direction: column; gap: 1vh; } .tv-now-l { width: 100%; gap: .8vh; } .tv-now-r { flex: none; align-items: stretch; }
    .tv-tiles { gap: .9vh 2.4vw; } .tv-tile { padding: .8vh 3vw 1vh; } .tv-tile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tv-rain { font-size: var(--fs-xs); }
    .tv-artnote { display: block; margin-top: .8vh; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }
    .ta-ro { display: none; } .tv-river .tv-h2 small, .tv-watch .tv-h2 small { display: none; }   /* ป้ายสีของแต่ละจุดบอกระดับอยู่แล้ว */
    .tv-rd { flex-direction: column; gap: 1.2vh; } .tv-rd-map { width: 100%; max-width: none; height: 30vh; flex: none; }
    .tv-rd-t b { font-size: var(--fs-l); } .tv-rd-t small { flex-basis: auto; } .tv-rd-tl, .tv-rd-note, .tv-rd-map figcaption, .tv-rd-sub small { display: none; } .tv-rd-side { gap: .6vh; } .tv-rd-lg { margin-top: 0; }
    .tv-rd-txt { font-size: var(--fs-b); }
    .tv-cams, .tv-cams.n1, .tv-cams.n2, .tv-cams.n3 { grid-template-columns: minmax(0, 1fr); gap: .8vh; }
    .tv-cam, .tv-cams.n3 .tv-cam:first-child, .tv-cams.n2 .tv-cam, .tv-cams.n1 .tv-cam { grid-row: auto; flex-direction: row; align-items: center; padding: .7vh; gap: 3vw; }
    .tv-cam-img, .tv-cams.n3 .tv-cam:first-child .tv-cam-img, .tv-cams.n2 .tv-cam-img, .tv-cams.n1 .tv-cam-img { flex: 0 0 44%; }
    .tv-cam figcaption b, .tv-cams.n2 figcaption b, .tv-cams.n1 figcaption b { -webkit-line-clamp: 2; font-size: var(--fs-s); } .tv-cam figcaption > span, .tv-rec { display: none; }
    .tv-gz-row, .tv-gz-row.n1, .tv-gz-row.n2, .tv-gz-row.n3, .tv-gz-row.n4, .tv-gz-row.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1vh 2vw; align-content: start; }
    .tv-gz { gap: .2vh; } .tv-tube { height: 9.5vh; } .tv-gz-w, .tv-gz-t .tv-tr, .tv-gz-lv i { display: none; }
    .tv-gz-n { font-size: var(--fs-xs); } .tv-gz-v { font-size: var(--fs-xs); }
    .tv-rv-band, .tv-rv-st small { display: none; } .tv-rv-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1vh 2vw; } .tv-rv-st .tv-tube { height: 9vh; } .tv-rv-dam { padding-top: 0; }
    .tv-rv-n, .tv-rv-v { font-size: var(--fs-xs); } .tv-rv-q .tv-num { font-size: var(--fs-b); }
    .tv-dam-row, .tv-dams.n1 .tv-dam-row { grid-template-columns: minmax(0, 1fr); gap: 1vh; align-items: start; } .tv-dam { padding: 1vh 3vw; gap: 3vw; } .tv-dam-t { display: none; }
    .tv-qr { flex-direction: column; justify-content: center; gap: 1.6vh; text-align: center; } .tv-qr-card { width: min(34vh, 60vw); max-width: none; } .tv-qr-mc, .tv-qr-list, .tv-qr-fine { display: none; }
    .tv-qr-txt { align-items: center; } .tv-qr-url { font-size: var(--fs-l); }
    /* แถบล่างกะทัดรัด: แท็บ + จุด / ข้อความ 3 บรรทัด / ที่มา */
    .tv-low { left: 3vw; right: 3vw; bottom: 1.4vh; gap: .4vh 2vw; padding: .9vh 3vw 1.4vh calc(2.6vw + 11vh); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tab dots" "cap cap" "cred cred"; }
    .tv-tab { justify-self: start; } .tv-cap { font-size: var(--fs-s); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tv-seg { display: inline; }
    .tv-bub { left: calc(2.6vw + 11vh - 1.6vw); max-width: 70%; font-size: var(--fs-s); bottom: auto; height: 3.4vh; top: .9vh; }
    .tv-mc { width: 12vh; height: 10vh; left: 1vw; bottom: 3.4vh; }
    .tv-ctl { top: calc(1.4vh + 38px); right: 3vw; } .tv-ctl #tvPause, .tv-ctl #tvFs { display: none; }
}
@media (max-height: 520px) and (min-aspect-ratio: 4/5) {
    .tv-pill, .tv-tile small, .tv-rd-tl, .tv-rd-note, .tv-gz-w, .tv-cam figcaption span { display: none; }
}
@media (hover: none) { .tv-ctl { opacity: .55; } }

/* ---------- ลดการเคลื่อนไหว: ไม่มี animation/transition ใด ๆ (ฉากยังเปลี่ยนแบบตัดภาพ) ฝนยังวาดเป็นเส้นนิ่งเมื่อฝนตกจริง ---------- */
@media (prefers-reduced-motion: reduce) {
    .tv-stage *, .tv-stage *::before, .tv-stage *::after, .tv-setup * { animation: none !important; transition: none !important; }
    .js .tv-stage.intro .tv-intro { display: none; }
    .tv-sc, .tv-sc.is-out { transform: none; } .tv-stage:not([data-scene="now"]) .tv-art { transform: none; }
    .tv-prog { display: none; }
    .tv-mc.talk .mc-talk { opacity: 0; } .tv-mc.talk .mc-mouth { opacity: 1; }
}
.tv-paused *, .tv-paused *::before, .tv-paused *::after { animation-play-state: paused !important; }
.tv-dam .tv-gz-lv { align-self: flex-start; }
.tv-set-auto { margin: -4px 0 14px; color: var(--accent); font-weight: 600; line-height: 1.5; } .tv-set-auto[hidden] { display: none; }