:root{--green:#0b5b45;--deep:#073f34;--mint:#e9f5ef;--gold:#c9972f;--ink:#15231f;--muted:#65746f;--line:#dce8e2;--paper:#fff;--bg:#f5f8f6;--shadow:0 14px 38px #0b5b4514}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}button{font:inherit}
.site-header{position:sticky;top:0;z-index:20;background:#fffffff2;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.header-inner{width:min(1160px,calc(100% - 28px));min-height:70px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:10px}.brand-logo{width:42px;height:42px;display:block;object-fit:contain;border-radius:50%;flex:0 0 auto;transform-origin:center center;animation:header-logo-spin 20s linear infinite}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:.7rem}.header-inner nav{display:flex;gap:7px}.header-inner nav a{padding:9px 12px;border-radius:99px;font-size:.86rem;font-weight:700}.header-inner nav a:hover,.header-inner nav a[aria-current]{color:var(--green);background:var(--mint)}
main{width:min(1160px,calc(100% - 28px));margin:auto;padding:24px 0 64px}.hero-playlist{overflow:hidden;background:#082f28;color:#fff;border-radius:28px;box-shadow:var(--shadow)}.hero-stage{position:relative;aspect-ratio:16/9;background:#061e1a}.hero-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#000}.hero-controls{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto auto auto auto minmax(100px,1fr) auto;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(transparent,#000d);font-size:.78rem}.hero-controls button{padding:7px 10px;border:1px solid #ffffff55;border-radius:8px;color:#fff;background:#0b5b45dd}.hero-controls input{min-width:80px;accent-color:#55d7a4}.hero-failure{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#071f1bdd;color:#fff;text-align:center}.hero-failure[hidden]{display:none}.hero-playlist .hero-copy{padding:20px 24px}.hero-playlist .hero-copy h1{margin:4px 0;font-size:clamp(1.4rem,4vw,2.4rem)}.hero-playlist .hero-copy p{margin:5px 0;color:#d9ebe4}.hero-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0 18px 18px}.hero-thumb{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center;min-width:0;padding:6px;border:2px solid transparent;border-radius:12px;color:#fff;background:#ffffff12;text-align:left;cursor:pointer}.hero-thumb.active{border-color:#55d7a4;background:#ffffff20}.hero-thumb img{width:72px;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#061e1a}.hero-thumb span,.hero-thumb strong,.hero-thumb small{display:block;min-width:0}.hero-thumb strong,.hero-thumb small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-thumb small{color:#bcd8cf}.hero-slot{color:#55d7a4;font-size:.68rem;text-transform:uppercase}
.eyebrow{margin:0;color:var(--gold);font-size:.72rem;letter-spacing:.18em;font-weight:900}.section{margin-top:42px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.section h1,.section h2{margin:3px 0 0;line-height:1.2}.section h1{font-size:clamp(1.7rem,5vw,2.8rem)}.status{padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--muted);text-align:center}.status.error{color:#9b2c2c;background:#fff4f4}.video-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.story-card,.info-card{overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.story-media{position:relative;aspect-ratio:9/13;background:linear-gradient(145deg,#dfe9e4,#c7d9d0)}.story-media img,.story-media video,.info-media img{width:100%;height:100%;display:block;object-fit:cover}.video-play{position:absolute;inset:0;display:grid;place-items:center;border:0;color:#fff;background:#0002;cursor:pointer;font-size:3rem}.video-play span{width:72px;height:72px;display:grid;place-items:center;background:#0b5b45dc;border:1px solid #ffffff66;border-radius:50%;box-shadow:0 8px 30px #0004}.story-body,.info-body{padding:18px}.story-meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.73rem}.type{padding:3px 8px;background:var(--mint);color:var(--green);border-radius:99px;font-weight:800}.story-card h3,.info-card h3{margin:10px 0 5px;font-size:1.12rem}.story-card p,.info-card p{margin:0;color:var(--muted);font-size:.9rem}.cta{display:inline-flex;margin-top:14px;padding:10px 14px;border-radius:10px;color:#fff;background:var(--green);font-size:.84rem;font-weight:800}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{display:grid;grid-template-columns:130px 1fr}.info-media{min-height:160px;background:#dfe9e4}.load-more{display:block;margin:22px auto 0;padding:12px 22px;border:1px solid var(--green);border-radius:99px;color:var(--green);background:#fff;cursor:pointer;font-weight:800}footer{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;padding:28px 16px;color:#d9ebe4;background:var(--deep);font-size:.85rem}footer a{color:#fff;font-weight:800}
@media(max-width:900px){.video-feed,.card-grid{grid-template-columns:repeat(2,1fr)}.hero-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.hero-thumb{flex:0 0 min(310px,85vw);scroll-snap-align:start}}
@media(max-width:620px){.header-inner{min-height:62px}.brand small{display:none}.header-inner nav{gap:1px}.header-inner nav a{padding:8px 7px;font-size:.76rem}main{width:min(100% - 20px,1160px);padding-top:14px}.hero-playlist{border-radius:20px}.hero-controls{grid-template-columns:auto auto 1fr auto}.hero-controls #heroTime,.hero-controls #heroProgress{grid-column:1/-1;width:100%}.hero-playlist .hero-copy{padding:16px}.hero-thumbs{padding:0 10px 12px}.video-feed,.card-grid{grid-template-columns:1fr}.story-media{aspect-ratio:9/12}.info-card{grid-template-columns:112px 1fr}.section{margin-top:32px}}
@keyframes header-logo-spin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.story-player{position:absolute;inset:0}.clip-picker{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;gap:5px;overflow-x:auto;padding:6px;border-radius:12px;background:#0009}.clip-picker button{flex:0 0 30px;height:30px;border:1px solid #ffffff66;border-radius:8px;color:#fff;background:#0b5b45dd;cursor:pointer;font-weight:800}