/* POPNIX Flood - "มีอะไรใหม่" บนหน้าแรก (#newPromo ต่อจากการ์ดน้องน้ำ, system_include/promo_art.inc.php + newpromo.js) เจ้าของสั่ง 2026-10-05
   จอกว้าง: bento 4 คอลัมน์ (สายน้ำไทย 3 มิติ ใหญ่ 2x2) | แท็บเล็ต: 2 คอลัมน์ | มือถือ: ปัดข้างทีละการ์ด ไม่กินความสูงของหน้า
   ภาพเคลื่อนไหวทุกตัวเป็น transform/opacity/stroke-dashoffset; เฟรมแรกของทุก loop = ภาพนิ่งที่สมบูรณ์ (ไม่มี js / หยุดเล่น / ลดการเคลื่อนไหว เห็นภาพเดียวกัน)
   newpromo.js ใส่ .np-live ให้การ์ดที่อยู่บนจอ การ์ดอื่นหยุดทุกอย่าง (ภาพในการ์ดที่เลื่อนพ้นจอไม่กินเครื่อง) */

.np {
    --th-sea1: #d9eff8; --th-sea2: #a6d3e8; --th-grid: rgba(31, 111, 153, .16);
    --th-l1: #f1f1dc; --th-l2: #d3e2b5; --th-l3: #b4c693; --th-hill: #8fa874; --th-side1: #b8ab84; --th-side2: #93865f; --th-shadow: rgba(14, 62, 88, .16);
    --th-coast: rgba(255, 255, 255, .95); --th-river: #2385bd; --th-flow: #dff7ff; --th-trail: #0a5d8f; --th-trail-glow: #5fc3ee; --th-comet: #ffffff;
    --th-pk-l: #c9d5ab; --th-pk-d: #92a676; --th-pin: #1f6f99; --th-pin-stem: rgba(11, 28, 39, .45);
    --nb-s1: #a9d5f0; --nb-s2: #ffe0c0; --nb-s3: #fff2e0; --nb-sun: #ffc861; --nb-cloud: #fff6ec; --nb-bird: #6f6a8a; --nb-city: #cbbad8; --nb-prang: #ad97c6;
    --nb-w1: #9ccbe0; --nb-w2: #5aa3c6; --nb-crest: rgba(255, 255, 255, .75); --nb-ink: #2b3a46;
    --nd-dam1: #e6eaed; --nd-dam2: #c2cbd1; --nd-seam: rgba(60, 80, 95, .2); --nd-sala: #f4ead6;
    --ns-b1: #edf4f8; --ns-b2: #d6e4ed; --ns-dot: rgba(31, 111, 153, .25); --ns-stack: #e6dcc8; --ns-ink: #26394a; --ns-phone: #13212b; --ns-rail: #c9d6dd;
    --nt-w1: #e6eef3; --nt-w2: #d2dee5; --nt-floor: #c3d0d8; --nt-line: rgba(18, 52, 70, .16); --nt-lamp: #f4c86a;
}
@media (prefers-color-scheme: dark) {
    .np {
        --th-sea1: #10364a; --th-sea2: #050f17; --th-grid: rgba(124, 196, 232, .13);
        --th-l1: #24443c; --th-l2: #1f3d36; --th-l3: #2c4b3b; --th-hill: #3f6a4c; --th-side1: #0f2329; --th-side2: #08161b; --th-shadow: rgba(0, 0, 0, .35);
        --th-coast: rgba(168, 236, 255, .5); --th-river: #3cb4e6; --th-flow: #e2fbff; --th-trail: #f2fdff; --th-trail-glow: #3fc4f5; --th-comet: #ffffff;
        --th-pk-l: #4a7559; --th-pk-d: #25412f; --th-pin: #7cc4e8; --th-pin-stem: rgba(200, 235, 250, .5);
        --nb-s1: #1a2149; --nb-s2: #874a6d; --nb-s3: #eea06a; --nb-sun: #ffd68a; --nb-cloud: #6d5679; --nb-bird: #2a2440; --nb-city: #2c2645; --nb-prang: #3b3056;
        --nb-w1: #2e4a6d; --nb-w2: #0f1d35; --nb-crest: rgba(255, 214, 170, .45);
        --nd-dam1: #3b4c57; --nd-dam2: #23313a; --nd-seam: rgba(0, 0, 0, .35); --nd-sala: #6b5d4a;
        --ns-b1: #0e2231; --ns-b2: #071219; --ns-dot: rgba(124, 196, 232, .25); --ns-stack: #2a3946; --ns-ink: #c9dae3; --ns-phone: #02070b; --ns-rail: #20374a;
        --nt-w1: #16293a; --nt-w2: #0e1d29; --nt-floor: #0a1620; --nt-line: rgba(150, 205, 232, .12); --nt-lamp: #b8913f;
    }
}

/* ---------- หัวส่วน ---------- */
.sec.np { padding-top: 40px; padding-bottom: 0; }
.np-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.np-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.np-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.4; letter-spacing: -.01em; color: var(--strong); }
.np-new { position: relative; overflow: hidden; display: inline-flex; align-items: center; padding: 1px 11px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .8rem; line-height: 1.6; }
.np-new::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); animation: npShine 3.6s var(--ease) infinite; }
.np-new.sm { padding: 0 9px; font-size: .74rem; }
@keyframes npShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.np-spark { width: .95em; height: .95em; flex: none; overflow: visible; margin-left: 10px; }
.np-spark path { fill: var(--warn); transform-box: fill-box; transform-origin: center; }
.np-spark .sk1 { animation: npTwinkle 2.8s ease-in-out infinite; } .np-spark .sk2 { animation: npTwinkle 2.8s ease-in-out infinite -1.4s; fill: var(--accent); }
@keyframes npTwinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(45deg); opacity: .6; } }
.np-ctl { display: none; align-items: center; gap: 8px; flex: none; }
.np-ctl button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--core); color: var(--strong); transition: opacity .3s, transform .3s var(--ease); }
.np-ctl button:disabled { opacity: .35; }
.np-ctl button:not(:disabled):active { transform: scale(.94); }
#npCount { min-width: 2.6em; text-align: center; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* ---------- การ์ด ---------- */
.np-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.np-c-th { grid-column: 1 / 3; grid-row: 1 / 3; }
.np-card { transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s var(--ease); }
.ww a.np-card { display: block; color: var(--text); text-decoration: none; }
a.np-card:hover, .np-c-th:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
a.np-card:active { transform: translateY(0) scale(.99); }
a.np-card:focus-visible, .np-c-th:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.np-core { display: flex; flex-direction: column; padding: 0; }
.np-art { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: calc(var(--r-core) - 1px) calc(var(--r-core) - 1px) 0 0; background: var(--sky-bot); isolation: isolate; }
.np-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: transform 1.2s var(--ease-out); }
a.np-card:hover .np-svg { transform: scale(1.035); }
.np-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; padding: 14px 18px 18px; }
.np-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.np-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: npDot 2s ease-out infinite; }
@keyframes npDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.np-h { margin: 0; color: var(--strong); font-size: 1.16rem; line-height: 1.4; text-wrap: balance; }
.np-p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.np-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 600; font-size: .92rem; line-height: 1.4; }
.np-go-th { display: none; }
.np-go i, .np-sub i { transition: transform .5s var(--ease); }
a.np-card:hover .np-go i, .np-sub:hover i { transform: translateX(4px); }

/* การ์ดใหญ่: ทั้งการ์ดเป็นลิงก์ไปหน้า 3 มิติ (::after ของหัวข้อ) ลิงก์ "ดูทีละจังหวัด" อยู่เหนือชั้นนั้น */
.np-c-th .np-art { flex: 1; aspect-ratio: auto; min-height: 320px; background: radial-gradient(120% 95% at 50% 38%, var(--th-sea1), var(--th-sea2)); container-type: size; }
.np-c-th .np-txt { flex: none; padding: 18px 22px 22px; gap: 8px; }
.np-c-th .np-h { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.np-c-th .np-p { max-width: 62ch; }
.ww .np-main { color: inherit; text-decoration: none; }
.np-main::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.np-main:focus-visible { outline: none; }
.np-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.np-btn { pointer-events: none; }
.ww a.np-sub { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; text-decoration: none; padding: 6px 2px; }
.np-c-th:hover .np-btn .ico { transform: translate(2px, 1px) scale(1.07); }

/* ---------- 1) สายน้ำไทย 3 มิติ ---------- */
.np-th-stage { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 18%; }
.np-th-rig { position: absolute; left: 50%; top: 47%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateZ(var(--rz)); animation: npOrbit 18s ease-in-out infinite; }
@keyframes npOrbit { 0%, 100% { transform: rotateX(var(--rx)) rotateZ(var(--rz)); } 50% { transform: rotateX(calc(var(--rx) - 5deg)) rotateZ(calc(var(--rz) - 7deg)); } }
.np-th-sea { position: absolute; left: 0; top: 0; width: 640px; height: 860px; transform: translate(-50%, -50%) translateZ(-16px);
    background-image: repeating-linear-gradient(0deg, var(--th-grid) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, var(--th-grid) 0 1px, transparent 1px 30px);
    -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent); }
.np-th-map { position: absolute; left: 0; top: 0; width: 230px; width: clamp(140px, 64cqh, 340px); height: auto; overflow: visible; transform: translate(-50%, -50%); }
.np-th-shadow { fill: var(--th-shadow); }
.np-th-side { fill: var(--th-side1); } .np-th-side.s2 { fill: var(--th-side2); }
.np-th-coast { fill: none; stroke: var(--th-coast); stroke-width: .7; stroke-linejoin: round; }
.npr { fill: none; stroke: var(--th-river); stroke-linecap: round; stroke-linejoin: round; }
.npr.r3 { stroke-width: 1.6; } .npr.r2 { stroke-width: 1.05; } .npr.r1 { stroke-width: .65; stroke-opacity: .85; }
.npf { fill: none; stroke: var(--th-flow); stroke-linecap: round; stroke-dasharray: 1.2 7; animation: npFlow 1.7s linear infinite; }
.npf.r3 { stroke-width: 1.5; } .npf.r2 { stroke-width: 1; animation-duration: 2.2s; }
@keyframes npFlow { to { stroke-dashoffset: -8.2; } }   /* ลายไหลไปทางปากแม่น้ำ (ทิศของเส้นในข้อมูล) */
.pk-l { fill: var(--th-pk-l); } .pk-r { fill: var(--th-pk-d); }
/* หยดน้ำนี้ไปไหน: รอบ 11 วิ = เห็นเส้นเต็ม (0-8%) จางหาย หยดน้ำวิ่งจากเชียงใหม่ (15-72%) กระเพื่อมที่อ่าวไทย */
.np-th-trail, .np-th-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; animation: npTrail 11s linear infinite; }
.np-th-trail { stroke: var(--th-trail); stroke-width: 1.9; }
.np-th-glow { stroke: var(--th-trail-glow); stroke-width: 5.5; stroke-opacity: .35; }
@keyframes npTrail { 0%, 8% { stroke-dashoffset: 0; opacity: 1; } 13% { stroke-dashoffset: 0; opacity: 0; } 14% { stroke-dashoffset: 100; opacity: 0; } 15% { stroke-dashoffset: 100; opacity: 1; } 72%, 100% { stroke-dashoffset: 0; opacity: 1; } }
.np-th-comet, .np-th-halo { fill: none; stroke-linecap: round; stroke-dasharray: .01 200; stroke-dashoffset: 0; opacity: 0; animation: npComet 11s linear infinite; }
.np-th-comet { stroke: var(--th-comet); stroke-width: 4; }
.np-th-halo { stroke: var(--th-trail-glow); stroke-width: 11; stroke-opacity: .4; }
@keyframes npComet { 0%, 14% { stroke-dashoffset: 0; opacity: 0; } 15% { stroke-dashoffset: 0; opacity: 1; } 72% { stroke-dashoffset: -100; opacity: 1; } 76%, 100% { stroke-dashoffset: -100; opacity: 0; } }
.np-th-spl ellipse { fill: none; stroke: var(--th-trail-glow); stroke-width: 1.3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: npSplash 11s ease-out infinite; }
.np-th-spl .sp2 { animation-name: npSplash2; }
@keyframes npSplash { 0%, 71% { transform: scale(.3); opacity: 0; } 72% { transform: scale(.3); opacity: .95; } 84%, 100% { transform: scale(2.5); opacity: 0; } }
@keyframes npSplash2 { 0%, 74% { transform: scale(.3); opacity: 0; } 75% { transform: scale(.3); opacity: .8; } 88%, 100% { transform: scale(3.1); opacity: 0; } }
.np-pin line { stroke: var(--th-pin-stem); stroke-width: .8; }
.np-pin .pn-head { fill: var(--th-pin); stroke: #fff; stroke-width: .7; }
.np-pin .pn-ring { fill: none; stroke: var(--th-trail-glow); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center;
    animation: npPing 11s ease-out infinite backwards; animation-delay: calc(1.65s + var(--t) * 6.27s); }
@keyframes npPing { 0% { transform: scale(.5); opacity: 0; } 1% { transform: scale(.5); opacity: .95; } 12%, 100% { transform: scale(3.2); opacity: 0; } }
.np-th-start { fill: var(--th-comet); stroke: var(--th-trail); stroke-width: 1; }
.np-th-start-r { fill: none; stroke: var(--th-trail-glow); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: npStart 2.4s ease-out infinite; }
@keyframes npStart { 0% { transform: scale(1); opacity: 0; } 5% { opacity: .9; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
/* แผงระยะทาง: ตัวเลขนับตามหยดน้ำ (counter + @property) เครื่องที่ไม่รองรับเห็น 877 นิ่ง ๆ */
@property --km { syntax: '<integer>'; inherits: false; initial-value: 877; }
.np-th-hud { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 7px; margin: 0; padding: 6px 13px; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--glass-line); color: var(--strong); font-size: .85rem; line-height: 1.4; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 24px -16px var(--shadow-c); }
.np-th-hud i { color: var(--accent); }
.np-th-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: npDot2 1.4s ease-in-out infinite; }
@keyframes npDot2 { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .55; } }
.np-km { --km: 877; counter-reset: km var(--km); font-size: 0; font-variant-numeric: tabular-nums; animation: npKm 11s linear infinite; }
.np-km::after { content: counter(km); font-size: .95rem; font-weight: 700; color: var(--accent); }
@keyframes npKm { 0%, 14% { --km: 877; } 15% { --km: 0; } 72%, 100% { --km: 877; } }
.np-th-mascot { position: absolute; right: 3%; bottom: 3%; z-index: 2; width: clamp(48px, 12%, 74px); height: auto; overflow: visible; }
.np-th-mrip { stroke: var(--th-trail-glow); transform-box: fill-box; transform-origin: center; animation: npRip 3.2s ease-out infinite; }
@keyframes npRip { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.np-wave-hand { transform-box: view-box; transform-origin: 17px -2px; animation: npWave 2.6s ease-in-out infinite; }
@keyframes npWave { 0%, 40%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } 60% { transform: rotate(8deg); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(0); } }
.np-glint { transform-box: fill-box; animation: npGlint 5s ease-in-out infinite; opacity: 0; }
@keyframes npGlint { 0%, 70% { opacity: 0; transform: translateX(-4px); } 78% { opacity: .9; } 88%, 100% { opacity: 0; transform: translateX(6px); } }

/* ทุกภาพ: น้องน้ำลอยตัวและกะพริบตา */
.np-bob { transform-box: fill-box; transform-origin: center bottom; animation: npBob 3.4s ease-in-out infinite; }
@keyframes npBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) rotate(2deg); } }
.np-blink { transform-box: fill-box; transform-origin: center; animation: npBlink 4.8s infinite; }
@keyframes npBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ---------- 2) ข่าวน้ำเช้านี้ ---------- */
.np-c-brief .np-art { background: var(--nb-s2); }
.nb-rays { transform-box: fill-box; transform-origin: center; animation: npSpin 46s linear infinite; }
@keyframes npSpin { to { transform: rotate(360deg); } }
.nb-glow { transform-box: fill-box; transform-origin: center; animation: nbGlow 5s ease-in-out infinite; }
@keyframes nbGlow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .82; } }
.nb-cloud { animation: npDrift 22s ease-in-out infinite; } .nb-cloud.c2 { animation-duration: 28s; animation-delay: -9s; }
@keyframes npDrift { 0%, 100% { transform: none; } 50% { transform: translateX(16px); } }
.nb-birds { animation: nbFly 20s linear infinite; }
@keyframes nbFly { 0% { transform: none; opacity: 1; } 58% { transform: translateX(200px); opacity: 1; } 59% { transform: translateX(200px); opacity: 0; } 60% { transform: translateX(-180px); opacity: 0; } 62% { transform: translateX(-170px); opacity: 1; } 100% { transform: none; opacity: 1; } }
.nb-bird, .nd-bird { transform-box: fill-box; transform-origin: center; animation: npFlap .55s ease-in-out infinite alternate; }
.nb-bird.b2, .nd-bird.n2 { animation-delay: -.3s; }
@keyframes npFlap { to { transform: scaleY(.35); } }
.nb-gl { animation: nbGlint 2.4s ease-in-out infinite; } .nb-gl.g2 { animation-delay: -.8s; } .nb-gl.g3 { animation-delay: -1.6s; }
@keyframes nbGlint { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
.nb-wave { animation: npWave20 4s linear infinite; }
@keyframes npWave20 { to { transform: translateX(-20px); } }
.nb-peek { animation: nbPeek 6s ease-in-out infinite; }
@keyframes nbPeek { 0%, 100% { transform: none; } 30%, 60% { transform: translate(5px, -3px) rotate(4deg); } }
.nb-mast { font-size: 13px; font-weight: 700; fill: #17252f; letter-spacing: -.01em; }
.nb-mast2 { fill: #c0392b; }
.nb-line { transform-box: fill-box; transform-origin: left center; animation: nbType 7s ease-in-out infinite; }
.nb-line.l2 { animation-delay: .25s; }
@keyframes nbType { 0%, 72% { transform: scaleX(1); } 76% { transform: scaleX(.02); } 92%, 100% { transform: scaleX(1); } }
.nb-time { font-size: 9.5px; font-weight: 700; fill: #fff; text-anchor: middle; font-variant-numeric: tabular-nums; }
.nb-clock { animation: nbShake 6s ease-in-out infinite; }
@keyframes nbShake { 0%, 78%, 100% { transform: rotate(0); } 80% { transform: rotate(-11deg); } 82% { transform: rotate(10deg); } 84% { transform: rotate(-9deg); } 86% { transform: rotate(8deg); } 88% { transform: rotate(-4deg); } 90% { transform: rotate(0); } }
.nb-ring { opacity: .55; animation: nbRing 6s ease-in-out infinite; }
@keyframes nbRing { 0%, 78%, 92%, 100% { opacity: .55; } 80%, 88% { opacity: 1; } }

/* ---------- 3) น้ำในเขื่อนวันนี้ ---------- */
.nd-stars { opacity: var(--stars-op); }
.nd-cloud { animation: npDrift 24s ease-in-out infinite; }
.nd-birds { animation: ndFly 24s linear infinite; }
@keyframes ndFly { 0% { transform: none; opacity: 1; } 45% { transform: translateX(-190px); opacity: 1; } 46% { transform: translateX(-190px); opacity: 0; } 47% { transform: translateX(190px); opacity: 0; } 49% { transform: translateX(180px); opacity: 1; } 100% { transform: none; opacity: 1; } }
.nd-wave { animation: npWave20 6s linear infinite; } .nd-wave.w2 { animation-duration: 9s; animation-direction: reverse; } .nd-wave.w3 { animation-duration: 4.5s; }
.nd-front { animation: npWave20 5s linear infinite; }
.nd-bob { transform-box: fill-box; transform-origin: center bottom; animation: ndBob 3.6s ease-in-out infinite; }
@keyframes ndBob { 0%, 100% { transform: none; } 50% { transform: translateY(2px) rotate(-2.5deg); } }
.nd-sail { transform-box: fill-box; transform-origin: left center; animation: ndSail 2.8s ease-in-out infinite; }
@keyframes ndSail { 0%, 100% { transform: none; } 50% { transform: scaleX(.85); } }
.nd-flag, .nd-tflag { transform-box: fill-box; transform-origin: left center; animation: ndFlag 1.4s ease-in-out infinite; }
@keyframes ndFlag { 0%, 100% { transform: none; } 50% { transform: skewY(-8deg) scaleX(.94); } }
.nd-rip { transform-box: fill-box; transform-origin: center; animation: npRip 3.6s ease-out infinite; }
.nd-fish { opacity: 0; animation: ndFish 7s ease-in-out infinite; }
@keyframes ndFish { 0%, 62% { opacity: 0; transform: translate(0, 4px) rotate(-55deg); } 64% { opacity: 1; transform: translate(2px, -2px) rotate(-55deg); }
    72% { opacity: 1; transform: translate(12px, -22px) rotate(0); } 80% { opacity: 1; transform: translate(22px, -4px) rotate(55deg); } 82%, 100% { opacity: 0; transform: translate(24px, 4px) rotate(60deg); } }
.nd-splash { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ndSplash 7s ease-out infinite; }
@keyframes ndSplash { 0%, 80% { opacity: 0; transform: scale(.4); } 81% { opacity: .9; transform: scale(.4); } 92%, 100% { opacity: 0; transform: scale(2.2); } }

/* ---------- 4) ย้อนดูน้ำท่วม ---------- */
.ns-page { transform-box: fill-box; transform-origin: center top; }
.ns-page.p0 { animation: nsFlip0 10s ease-in-out infinite; } .ns-page.p1 { animation: nsFlip1 10s ease-in-out infinite; } .ns-page.p2 { animation: nsFlip2 10s ease-in-out infinite; }
@keyframes nsFlip0 { 0%, 15% { transform: none; opacity: 1; } 20%, 92% { transform: scaleY(.04); opacity: 0; } 94%, 100% { transform: none; opacity: 1; } }
@keyframes nsFlip1 { 0%, 38% { transform: none; opacity: 1; } 43%, 90% { transform: scaleY(.04); opacity: 0; } 92%, 100% { transform: none; opacity: 1; } }
@keyframes nsFlip2 { 0%, 61% { transform: none; opacity: 1; } 66%, 88% { transform: scaleY(.04); opacity: 0; } 90%, 100% { transform: none; opacity: 1; } }
.ns-mon { font-size: 7.4px; font-weight: 700; fill: #fff; text-anchor: middle; }
.ns-day { font-size: 27px; font-weight: 700; fill: #26394a; text-anchor: middle; font-variant-numeric: tabular-nums; }
.ns-rew { transform-box: fill-box; transform-origin: center; animation: nsRew 10s ease-in-out infinite; }
@keyframes nsRew { 0%, 84%, 100% { transform: none; opacity: .55; } 88% { transform: scale(1.15); opacity: 1; } 92% { transform: scale(1.08); opacity: 1; } 96% { transform: none; opacity: .55; } }
.ns-num { font-size: 13px; font-weight: 700; opacity: .32; }
.ns-num { animation: nsNum 9.6s ease-in-out infinite; } .ns-num.n2 { animation-delay: 3.2s; } .ns-num.n3 { animation-delay: 6.4s; }
@keyframes nsNum { 0%, 100% { opacity: .32; } 10%, 25% { opacity: .9; } }
.ns-scroll { animation: nsScroll 9.6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes nsScroll { 0%, 12% { transform: none; } 16.67%, 28.67% { transform: translateY(-40px); } 33.33%, 45.33% { transform: translateY(-80px); } 50%, 62% { transform: translateY(-120px); }
    66.67%, 78.67% { transform: translateY(-160px); } 83.33%, 95.33% { transform: translateY(-200px); } 100% { transform: translateY(-240px); } }
.ns-fill { transform-box: fill-box; transform-origin: center top; transform: scaleY(.06); animation: nsFill 9.6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes nsFill { 0%, 12% { transform: scaleY(.06); } 16.67%, 28.67% { transform: scaleY(.22); } 33.33%, 45.33% { transform: scaleY(.4); } 50%, 62% { transform: scaleY(.58); } 66.67%, 78.67% { transform: scaleY(.76); } 83.33%, 95.33% { transform: scaleY(.94); } 100% { transform: scaleY(.06); } }
.ns-rider { animation: nsRide 9.6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes nsRide { 0%, 12% { transform: translateY(8px); } 16.67%, 28.67% { transform: translateY(28px); } 33.33%, 45.33% { transform: translateY(51px); } 50%, 62% { transform: translateY(74px); } 66.67%, 78.67% { transform: translateY(97px); } 83.33%, 95.33% { transform: translateY(120px); } 100% { transform: translateY(8px); } }
.ns-rider { transform: translateY(8px); }

/* ---------- 5) โหมดจอทีวี ---------- */
@property --nt-gc { syntax: '<color>'; inherits: true; initial-value: #7cc4e8; }
.np-c-tv .np-svg { --nt-gc: #7cc4e8; animation: ntGlowHue 16s linear infinite; }
@keyframes ntGlowHue { 0%, 22% { --nt-gc: #7cc4e8; } 25%, 47% { --nt-gc: #4dd68c; } 50%, 72% { --nt-gc: #ffb35c; } 75%, 97% { --nt-gc: #e8f2f6; } 100% { --nt-gc: #7cc4e8; } }
.nt-glow { opacity: .9; }
@media (prefers-color-scheme: dark) { .nt-glow { opacity: 1; } .nt-bezel { stroke: #4a5d69; } }   /* สีแสงมาจาก stop ของ gradient (--nt-gc เปลี่ยนตามฉาก) */
.nt-sc { opacity: 0; animation: ntScene 16s ease-in-out infinite; }
.nt-sc.sA { opacity: 1; } .nt-sc.sB { animation-delay: -12s; } .nt-sc.sC { animation-delay: -8s; } .nt-sc.sD { animation-delay: -4s; }
@keyframes ntScene { 0%, 23% { opacity: 1; } 25%, 98% { opacity: 0; } 100% { opacity: 1; } }
.nt-cur { fill: #7cc4e8; animation: ntCur 16s steps(1) infinite; } .nt-prog circle { fill: #46606d; } .nt-prog .nt-cur { fill: #7cc4e8; }
@keyframes ntCur { 0% { transform: none; } 25% { transform: translateX(6px); } 50% { transform: translateX(12px); } 75% { transform: translateX(18px); } }
.nt-tube { transform-box: fill-box; transform-origin: center bottom; animation: ntTube 4s ease-in-out infinite; }
@keyframes ntTube { 0%, 100% { transform: none; } 50% { transform: scaleY(1.06); } }
.nt-sweep { transform-box: view-box; transform-origin: 160px 68px; animation: npSpin 2.6s linear infinite; }
.nt-blobs { animation: ntBlob 2.6s ease-in-out infinite; } @keyframes ntBlob { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.nt-lane { animation: ntLane .8s linear infinite; } @keyframes ntLane { to { stroke-dashoffset: -16; } }
.nt-car { transform-box: fill-box; transform-origin: center; animation: ntCar 4s ease-in infinite; }
@keyframes ntCar { 0% { transform: none; opacity: 1; } 80% { transform: translate(6px, -34px) scale(.4); opacity: .9; } 81%, 99% { opacity: 0; transform: translate(6px, -34px) scale(.4); } 100% { transform: none; opacity: 1; } }
.nt-ticker { transform-box: fill-box; transform-origin: left center; animation: nbType 4s ease-in-out infinite; }
.nt-scan { animation: ntScan 5s linear infinite; } @keyframes ntScan { from { transform: translateY(0); } to { transform: translateY(100px); } }
.nt-led { animation: ntLed 2.2s ease-in-out infinite; } @keyframes ntLed { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.nt-leaves { transform-box: fill-box; transform-origin: center bottom; animation: ntSway 5s ease-in-out infinite; }
@keyframes ntSway { 0%, 100% { transform: none; } 50% { transform: rotate(3deg); } }
.nt-lampglow { animation: nbGlint 4s ease-in-out infinite; }

/* ---------- เล่นเฉพาะการ์ดที่อยู่บนจอ (newpromo.js) ---------- */
.js .np-card:not(.np-live) *, .js .np-card:not(.np-live) *::before, .js .np-card:not(.np-live) *::after { animation-play-state: paused !important; }

/* ---------- ขนาดจอ ---------- */
@media (max-width: 1080px) {
    .np-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .np-c-th { grid-column: 1 / -1; grid-row: auto; }
    .np-c-th .np-core { flex-direction: row; }
    .np-c-th .np-art { flex: 1.25; min-height: 330px; border-radius: calc(var(--r-core) - 1px) 0 0 calc(var(--r-core) - 1px); }
    .np-c-th .np-txt { flex: 1; justify-content: center; padding: 24px 26px; }
    .np-th-map { width: clamp(140px, 76cqh, 340px); }   /* การ์ดแนวนอน/มือถือ: กล่องภาพกว้างกว่าสูง แผนที่ใหญ่ขึ้นได้ */
}
@media (max-width: 900px) { .sec.np { padding: 28px 20px 0; } }
@media (max-width: 700px) {
    .np-head { align-items: center; margin-bottom: 14px; }
    .np-ctl { display: flex; }
    .np-kick { font-size: .84rem; }
    .np-grid { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -20px; padding: 4px 20px 16px; scroll-padding: 0 20px; scrollbar-width: none; }
    .np-grid::-webkit-scrollbar { display: none; }
    .np-card { flex: 0 0 86%; scroll-snap-align: start; }
    .np-art { aspect-ratio: 16 / 11; }   /* ทุกใบสูงเท่าการ์ดใหญ่ ไม่มีช่องว่างกลางการ์ด (แถวปัดข้างยืดทุกใบเท่าใบที่สูงสุด) */
    a.np-card:hover, .np-c-th:hover { transform: none; }
    .np-c-th .np-core { flex-direction: column; }
    .np-c-th .np-art { flex: none; min-height: 0; aspect-ratio: 16 / 11; border-radius: calc(var(--r-core) - 1px) calc(var(--r-core) - 1px) 0 0; }
    .np-c-th .np-txt { padding: 14px 18px 18px; justify-content: flex-start; }
    .np-c-th .np-h { font-size: 1.3rem; }
    .np-p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
    .np-acts { gap: 8px 14px; }
    .np-c-th .np-btn { padding-left: 18px; }
    .np-th-hud { left: 10px; bottom: 10px; padding: 5px 11px; font-size: .78rem; }
    .np-th-rig { top: 45%; left: 48%; }
    .np-th-map { width: clamp(130px, 70cqh, 300px); }   /* ปลายแหลมมลายูไม่ไปอยู่ใต้ป้ายระยะทางมุมล่าง */
    .np-kx { display: none; }
    .np-c-th .np-p { -webkit-line-clamp: 2; }
    .np-btn { display: none; }
    .np-go-th { display: inline-flex; margin-top: 0; padding-top: 0; }
    .ww a.np-sub { font-weight: 400; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
    .np *, .np *::before, .np *::after { animation: none !important; }
    a.np-card:hover .np-svg { transform: none; }
    .np-card, .np-svg { transition: none; }
}