#oyt{--red:#b3141f;--red-bg:#f7eced;--yt:#ff0033;--blk:#0a0a0a;--bg:#f1f1f3;--card:#fff;--soft:#f5f5f7;--ln:#e2e2e7;--ln2:#cfcfd6;--tx:#2f2f35;--mt:#62626b;--line:#06c755;
  --r:22px;--sh:0 1px 2px rgba(0,0,0,.04),0 8px 24px -14px rgba(0,0,0,.16);
  --ff:"Anuphan","Noto Sans Thai",system-ui,-apple-system,sans-serif;--num:"Inter",system-ui,sans-serif;
  --sec:80px;--gap:22px;
  width:100%;background:var(--bg);color:var(--tx);font-family:var(--ff);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
@media(max-width:1024px){#oyt{--sec:64px}}
@media(max-width:767px){#oyt{--sec:48px;--gap:14px;font-size:16px}}
#oyt *{box-sizing:border-box}
#oyt h1,#oyt h2,#oyt h3,#oyt h4{font-family:var(--ff);color:var(--blk);margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.25;text-transform:none}
#oyt p{margin:0}
#oyt a{text-decoration:none;color:inherit;box-shadow:none;border-bottom:0}
#oyt img{max-width:100%;display:block;border:0;border-radius:0;box-shadow:none;margin:0}
#oyt .w{max-width:1158px;margin:0 auto;padding:0 24px}
@media(max-width:767px){#oyt .w{padding:0 16px}}
#oyt .n{font-family:var(--num);font-variant-numeric:tabular-nums}
#oyt .sec{padding:var(--sec) 0}
#oyt .sec.alt{background:#e9e9ec}
#oyt .eb{display:inline-flex;align-items:center;gap:8px;font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
#oyt .eb:before{content:"";width:18px;height:2px;background:currentColor}
#oyt .hd{margin-bottom:28px;max-width:660px}
#oyt .hd h2{font-size:34px;margin-top:10px}
#oyt .hd p{color:var(--mt);margin-top:8px}
@media(max-width:767px){#oyt .hd{margin-bottom:20px}#oyt .hd h2{font-size:26px}}

/* buttons */
#oyt .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff);font-weight:600;font-size:15px;line-height:1.2;padding:12px 20px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;transition:background .2s,box-shadow .2s,color .2s;margin:0}
#oyt .b-red{background:var(--red);color:#fff!important}
#oyt .b-red:hover{background:var(--blk)}
#oyt .b-yt{background:var(--yt);color:#fff!important}
#oyt .b-yt:hover{background:#d4002b}
#oyt .b-out{background:var(--card);color:var(--blk)!important;box-shadow:inset 0 0 0 1.5px var(--ln2)}
#oyt .b-out:hover{box-shadow:inset 0 0 0 1.5px var(--blk)}
#oyt .b-line{background:var(--line);color:#fff!important}
#oyt .b-line:hover{background:#05a948}
#oyt .b-gh{background:rgba(255,255,255,.08);color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
#oyt .b-gh:hover{background:rgba(255,255,255,.16)}
#oyt .btn svg{width:18px;height:18px;flex:0 0 auto}
#oyt .btn:focus-visible,#oyt button:focus-visible,#oyt a:focus-visible,#oyt summary:focus-visible{outline:3px solid rgba(179,20,31,.45);outline-offset:3px}

/* ===== HERO ===== */
#oyt .hero{position:relative;background:var(--blk);color:#a1a1aa;overflow:hidden;isolation:isolate;padding:56px 0}
#oyt .hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 90% at 100% 0%,rgba(179,20,31,.34),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(255,0,51,.10),transparent 70%)}
#oyt .hero .w{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
#oyt .crumb{font-size:13px;margin-bottom:18px}
#oyt .crumb a{color:#e4e4e7}
#oyt .crumb i{font-style:normal;margin:0 7px;opacity:.45}
#oyt .chn{display:flex;align-items:center;gap:12px;margin-bottom:18px}
#oyt .chn img{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
#oyt .chn b{display:block;color:#fff;font-size:16.5px;line-height:1.3}
#oyt .chn small{display:block;font-family:var(--num);font-size:13px;color:#a1a1aa}
#oyt .hero h1{color:#fff;font-size:44px;line-height:1.18;letter-spacing:-.03em}
#oyt .hero h1 span{color:#ff5a64}
#oyt .hero .lead{font-size:17.5px;color:#c9c9d0;margin:16px 0 24px;max-width:500px}
#oyt .ctas{display:flex;flex-wrap:wrap;gap:10px}
#oyt .stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin-top:28px}
#oyt .stats div{padding:0 22px;line-height:1.25}
#oyt .stats div:first-child{padding-left:0}
#oyt .stats div+div{border-left:1px solid rgba(255,255,255,.14)}
#oyt .stats b{display:block;font-family:var(--num);font-size:26px;font-weight:800;color:#fff;letter-spacing:-.03em}
#oyt .stats small{font-size:13px}
/* featured player */
#oyt .feat{border-radius:20px;overflow:hidden;background:#000;box-shadow:0 24px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
#oyt .fp{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#111;cursor:pointer;margin:0}
#oyt .fp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .25s}
#oyt .fp:hover img{opacity:1}
#oyt .fp iframe,#oyt .mdl iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#oyt .fp .pl{width:74px;height:52px}
#oyt .fp .lbl{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.66);border-radius:999px;padding:5px 12px;line-height:1.3}
#oyt .fp .lbl:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yt);box-shadow:0 0 0 3px rgba(255,0,51,.3)}
#oyt .fcap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:13.5px;color:#a1a1aa;background:#141416}
#oyt .fcap a{color:#fff;font-weight:600;white-space:nowrap}
/* play icon */
#oyt .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:40px;border-radius:12px;background:rgba(15,15,15,.78);transition:background .2s}
#oyt .pl:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
#oyt .fp:hover .pl,#oyt .vt:hover .pl{background:var(--yt)}

/* ===== TOOLBAR ===== */
#oyt .bar{position:sticky;top:0;z-index:5;background:rgba(241,241,243,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
#oyt .bar .w{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
#oyt .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
#oyt .chips::-webkit-scrollbar{display:none}
#oyt .chips button{flex:0 0 auto;font-family:var(--ff);font-size:14px;font-weight:600;color:var(--tx);background:var(--card);border:1px solid var(--ln);border-radius:999px;padding:7px 14px;cursor:pointer;line-height:1.3;margin:0;transition:all .2s}
#oyt .chips button:hover{border-color:var(--ln2)}
#oyt .chips button[aria-pressed="true"]{background:var(--blk);border-color:var(--blk);color:#fff}
#oyt .bar .sub{flex:0 0 auto;padding:8px 16px;font-size:14px}

/* ===== VIDEO GRID ===== */
#oyt .cnt{font-size:14px;color:var(--mt);margin-bottom:14px}
#oyt .cnt b{color:var(--blk)}
#oyt .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
#oyt .vc{background:var(--card);border:1px solid var(--ln);border-radius:18px;overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
#oyt .vc:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 32px -16px rgba(0,0,0,.28)}
#oyt .vc[hidden]{display:none}
#oyt .vt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#ddd;cursor:pointer;margin:0;overflow:hidden}
#oyt .vt img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
#oyt .vc:hover .vt img{transform:scale(1.04)}
#oyt .vb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
#oyt .tg{align-self:flex-start;font-size:12px;font-weight:700;border-radius:999px;padding:1px 10px;line-height:1.7;background:var(--soft);color:var(--tx)}
#oyt .t-new{background:#e3f6e9;color:#166534}
#oyt .t-tech{background:#e8eefc;color:#1e40af}
#oyt .t-news{background:#fdf1e2;color:#9a4a07}
#oyt .t-mind{background:#f3e8fb;color:#6b21a8}
#oyt .t-app{background:var(--red-bg);color:var(--red)}
#oyt .t-gold{background:#fbf3d9;color:#854d0e}
#oyt .t-def{background:var(--soft);color:var(--tx)}
#oyt .vb .top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#oyt .nw{font-family:var(--num);font-size:11px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--yt);border-radius:999px;padding:1px 8px;line-height:1.7}
#oyt .dt{font-size:12px;color:var(--mt)}
#oyt .vb h3{font-size:16px;line-height:1.5;font-weight:600;letter-spacing:-.01em}
#oyt .vb h3 button{all:unset;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--blk);font:inherit}
#oyt .vb h3 button:hover{color:var(--red)}
#oyt .vb h3 button:focus-visible{outline:3px solid rgba(179,20,31,.45);outline-offset:2px;border-radius:4px}
#oyt .yl{margin-top:auto;font-size:13px;font-weight:600;color:var(--mt)}
#oyt .yl:hover{color:var(--red)}
#oyt .more{display:flex;justify-content:center;margin-top:28px}
#oyt .more[hidden]{display:none}
#oyt .none{display:none;text-align:center;padding:36px 16px;border:1.5px dashed var(--ln2);border-radius:var(--r);color:var(--mt)}
#oyt .none.on{display:block}

/* ===== PLAYLISTS ===== */
#oyt .pls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
#oyt .pc{position:relative;background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:24px;box-shadow:var(--sh);overflow:hidden}
#oyt .pc:before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(179,20,31,.10),transparent 70%)}
#oyt .pc-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#oyt .pc-t .n{font-weight:800;font-size:14px;color:#fff;background:var(--blk);border-radius:10px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
#oyt .pc-t em{font-style:normal;font-family:var(--num);font-size:13px;font-weight:700;color:var(--red);background:var(--red-bg);border-radius:999px;padding:3px 12px}
#oyt .pc h3{font-size:22px;margin-bottom:6px}
#oyt .pc p{font-size:15px;color:var(--mt);line-height:1.65}
#oyt .pc-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#oyt .pc-a .btn{padding:10px 16px;font-size:14.5px}

/* ===== WATCH + READ ===== */
#oyt .wr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
#oyt .ep{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
#oyt .ep small{font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--red)}
#oyt .ep h3{font-size:18.5px;margin:6px 0 8px;line-height:1.4}
#oyt .ep p{font-size:14.5px;color:var(--mt);line-height:1.65;margin-bottom:16px}
#oyt .ep .ln{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
#oyt .ep .btn{padding:9px 14px;font-size:14px}
#oyt .ep .btn:first-child{flex:1 1 auto}

/* ===== SUBSCRIBE BANNER ===== */
#oyt .sb{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:var(--blk);color:#a1a1aa;border-radius:var(--r);padding:28px 32px;position:relative;overflow:hidden;isolation:isolate}
#oyt .sb:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 100% 50%,rgba(255,0,51,.22),transparent 70%)}
#oyt .sb img{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
#oyt .sb h2{color:#fff;font-size:26px}
#oyt .sb p{margin-top:4px;font-size:15px}
#oyt .sb .ctas{justify-content:flex-end}

/* ===== FAQ ===== */
#oyt .fq{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start}
#oyt .fq .hd{margin:0}
#oyt .fq .hd .btn{margin-top:18px}
#oyt .qa{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:4px 22px}
#oyt .qa details+details{border-top:1px solid var(--ln)}
#oyt .qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;font-weight:600;font-size:16.5px;color:var(--blk)}
#oyt .qa summary::-webkit-details-marker{display:none}
#oyt .qa summary:after{content:"+";flex:0 0 28px;height:28px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-family:var(--num);font-size:17px;font-weight:600;color:var(--blk);transition:transform .25s,background .2s,color .2s}
#oyt .qa details[open] summary:after{transform:rotate(45deg);background:var(--red);color:#fff}
#oyt .qa p{color:var(--mt);font-size:15px;padding:0 44px 18px 0;line-height:1.75}
#oyt .disc{margin-top:40px;padding:18px 20px;border-radius:16px;background:#e5e5e9;font-size:13px;color:var(--mt);line-height:1.8}
#oyt .disc b{color:var(--blk)}
#oyt .disc a{color:var(--blk);text-decoration:underline;text-underline-offset:3px}

/* ===== MODAL ===== */
#oyt .mdl{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#oyt .mdl.on{display:flex}
#oyt .mdl-in{position:relative;width:100%;max-width:1040px}
#oyt .mdl-v{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
#oyt .mdl-x{position:absolute;right:0;top:-48px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer;margin:0;padding:0}
#oyt .mdl-x:hover{background:var(--red)}
#oyt .mdl-f{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:14px;color:#c9c9d0}
#oyt .mdl-f a{color:#fff;font-weight:600;white-space:nowrap}

/* ===== TABLET ===== */
@media(max-width:1024px){
  #oyt .hero .w{grid-template-columns:1fr;gap:32px}
  #oyt .hero h1{font-size:40px}
  #oyt .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #oyt .wr{grid-template-columns:1fr}
  #oyt .sb{grid-template-columns:auto 1fr}
  #oyt .sb .ctas{grid-column:1/-1;justify-content:flex-start}
  #oyt .fq{grid-template-columns:1fr;gap:20px}
}
/* ===== MOBILE ===== */
@media(max-width:767px){
  #oyt .hero{padding:32px 0 36px}
  #oyt .crumb{margin-bottom:14px}
  #oyt .chn img{width:44px;height:44px}
  #oyt .hero h1{font-size:31px}
  #oyt .hero .lead{font-size:16px;margin:12px 0 20px}
  #oyt .ctas .btn{flex:1 1 0;min-width:0;padding:12px 10px}
  #oyt .stats{grid-template-columns:repeat(3,1fr);margin-top:22px}
  #oyt .stats div{padding:0 12px}
  #oyt .stats b{font-size:21px}
  #oyt .stats small{font-size:12px}
  #oyt .feat{border-radius:16px}
  #oyt .fcap{font-size:12.5px;padding:10px 14px}
  #oyt .bar{position:static}
  #oyt .bar .w{flex-wrap:wrap;gap:10px}
  #oyt .chips{flex-basis:100%;margin:0 -16px;padding:0 16px}
  #oyt .chips button{font-size:13.5px;padding:6px 12px}
  #oyt .bar .sub{display:none}
  #oyt .grid{grid-template-columns:1fr;gap:12px}
  #oyt .vc{flex-direction:row;border-radius:14px}
  #oyt .vc:hover{transform:none}
  #oyt .vt{flex:0 0 42%;aspect-ratio:16/9;align-self:flex-start}
  #oyt .vt .pl{width:40px;height:28px;border-radius:9px}
  #oyt .vt .pl:after{border-width:6px 0 6px 10px}
  #oyt .vb{padding:10px 12px;gap:5px;min-width:0}
  #oyt .vb h3{font-size:14.5px;line-height:1.45}
  #oyt .tg{font-size:11px;padding:0 8px}
  #oyt .yl{display:none}
  #oyt .pls{grid-template-columns:1fr}
  #oyt .pc{padding:20px 18px}
  #oyt .pc-a .btn{flex:1 1 0;min-width:0;padding:11px 10px}
  #oyt .sb{grid-template-columns:1fr;text-align:left;padding:24px 20px;gap:14px}
  #oyt .sb img{width:56px;height:56px}
  #oyt .sb h2{font-size:22px}
  #oyt .qa{padding:2px 16px}
  #oyt .qa summary{font-size:15.5px;padding:15px 0}
  #oyt .qa p{padding-right:0;font-size:14.5px}
  #oyt .mdl{padding:12px}
  #oyt .mdl-x{top:-50px}
  #oyt .mdl-f{flex-direction:column;align-items:flex-start;gap:6px}
}
@media(prefers-reduced-motion:reduce){#oyt *{transition:none!important}}
/* theme guard (JNews / wpautop) */
#oyt p:empty{display:none}
#oyt br{display:none}#oyt h1 br{display:inline}
#oyt ul,#oyt ol{margin:0;padding:0}
#oyt h2:before,#oyt h2:after,#oyt h3:before,#oyt h3:after{display:none}
#oyt button{text-transform:none;letter-spacing:normal;min-height:0}

/* ===== v2: toolbar (ค้นหา + หมวด + เรียง) ===== */
#oyt .bar .w{flex-wrap:wrap;row-gap:10px}
#oyt .srch{position:relative;flex:1 1 320px;max-width:440px;min-width:0}
#oyt .bar .chips{order:3;flex:1 1 100%}
#oyt .bar .seg{margin-left:auto}
#oyt .pop-h h2{display:flex;align-items:center;gap:10px}
#oyt .pop-h h2:before{content:"";display:block!important;width:4px;height:20px;border-radius:2px;background:var(--red)}
#oyt .srch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--mt);pointer-events:none}
#oyt .srch input{width:100%;height:40px;margin:0;padding:0 36px 0 40px;border:1px solid var(--ln);border-radius:999px;background:var(--card);font-family:var(--ff);font-size:14.5px;color:var(--blk);outline:0;box-shadow:none;transition:border-color .2s,box-shadow .2s}
#oyt .srch input::placeholder{color:#8b8b94}
#oyt .srch input:focus{border-color:var(--blk);box-shadow:0 0 0 3px rgba(10,10,10,.08)}
#oyt .srch button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:var(--soft);color:var(--mt);font-size:16px;line-height:1;cursor:pointer;margin:0;padding:0;display:none}
#oyt .srch.has button{display:block}
#oyt .seg{flex:0 0 auto;display:inline-flex;padding:3px;border-radius:999px;background:#e2e2e7}
#oyt .seg button{font-family:var(--ff);font-size:13.5px;font-weight:600;color:var(--mt);background:transparent;border:0;border-radius:999px;padding:7px 13px;cursor:pointer;line-height:1.2;margin:0}
#oyt .seg button[aria-pressed="true"]{background:#fff;color:var(--blk);box-shadow:0 1px 3px rgba(0,0,0,.12)}
#oyt .row2{flex-basis:100%;display:flex;align-items:center;gap:12px;min-width:0}
/* tabs วิดีโอ / Shorts */
#oyt .tabs{display:flex;gap:22px;border-bottom:1px solid var(--ln);margin-bottom:18px}
#oyt .tabs button{position:relative;font-family:var(--ff);font-size:15.5px;font-weight:700;color:var(--mt);background:none;border:0;padding:0 0 12px;margin:0;cursor:pointer;line-height:1.3}
#oyt .tabs button b{font-family:var(--num);font-size:12.5px;font-weight:700;color:var(--mt);background:#e2e2e7;border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:1px}
#oyt .tabs button[aria-selected="true"]{color:var(--blk)}
#oyt .tabs button[aria-selected="true"]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--red)}
#oyt .tabs button[aria-selected="true"] b{background:var(--blk);color:#fff}
#oyt .tabs button[hidden]{display:none}
/* ยอดนิยม rail */
#oyt .pop{margin-bottom:36px}
#oyt .pop-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
#oyt .pop-h h2{font-size:22px}
#oyt .pop-h small{font-size:13px;color:var(--mt)}
#oyt .rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
#oyt .rk{position:relative;display:block;align-self:start;text-align:left;background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;min-width:0}
#oyt .rk .th{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#ddd}
#oyt .rk img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
#oyt .rk:hover img{transform:scale(1.05)}
#oyt .rk .no{position:absolute;left:8px;top:8px;min-width:30px;height:30px;padding:0 8px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--num);font-weight:800;font-size:15px;color:#fff;background:rgba(10,10,10,.82)}
#oyt .rk:first-child .no{background:var(--red)}
#oyt .rk .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--blk);margin-top:9px}
#oyt .rk:hover .t{color:var(--red)}
#oyt .rk .m{display:block;font-size:12.5px;color:var(--mt);margin-top:3px}
/* การ์ด v2 */
#oyt .vt .du{position:absolute;right:8px;bottom:8px;font-family:var(--num);font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.8);border-radius:6px;padding:2px 6px;line-height:1.3}
#oyt .vt .nw2{position:absolute;left:8px;top:8px;font-family:var(--num);font-size:11px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--yt);border-radius:6px;padding:3px 7px;line-height:1.2}
#oyt .vb .mt{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--mt);margin-top:auto}
#oyt .vb .mt span+span:before{content:"·";margin-right:10px;color:#b0b0b8}
#oyt mark{background:#ffe8a3;color:inherit;border-radius:3px;padding:0 1px}
#oyt .prog{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px}
#oyt .prog .pb{width:220px;height:4px;border-radius:4px;background:#dcdce1;overflow:hidden}
#oyt .prog .pb i{display:block;height:100%;background:var(--blk);border-radius:4px;transition:width .3s}
#oyt .prog p{font-size:13.5px;color:var(--mt)}
#oyt .prog p b{color:var(--blk);font-family:var(--num)}
#oyt .prog .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#oyt .none p+p{margin-top:6px}
#oyt .none button{margin-top:10px;font-family:var(--ff);font-weight:600;color:var(--red);background:none;border:0;cursor:pointer;font-size:15px}
/* Shorts (แนวตั้ง) */
#oyt .grid.sh{grid-template-columns:repeat(5,minmax(0,1fr))}
#oyt .grid.sh .vc{flex-direction:column}
#oyt .grid.sh .vt{aspect-ratio:9/16;flex:none}
@media(max-width:1024px){
  #oyt .rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -24px;padding:0 24px;scroll-padding-inline:24px}
  #oyt .rail::-webkit-scrollbar{display:none}
  #oyt .rk{scroll-snap-align:start}
  #oyt .grid.sh{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
  #oyt .bar{position:static}
  #oyt .srch{flex:1 1 100%;max-width:none}
  #oyt .bar .seg{order:2;flex:1 1 100%;margin:0}
  #oyt .bar .seg button{flex:1 1 0}
  #oyt .rail{grid-auto-columns:72%;margin:0 -16px;padding:0 16px;scroll-padding-inline:16px}
  #oyt .pop-h h2{font-size:19px}
  #oyt .vt .du{right:5px;bottom:5px;font-size:11px;padding:1px 5px}
  #oyt .vt .nw2{left:5px;top:5px;font-size:10px;padding:2px 5px}
  #oyt .vb .mt{font-size:12px;gap:2px 8px}
  #oyt .vb .mt span+span:before{margin-right:8px}
  #oyt .grid.sh{grid-template-columns:repeat(2,minmax(0,1fr))}
  #oyt .grid.sh .vc{flex-direction:column}
  #oyt .grid.sh .vt{flex:none}
  #oyt .tabs{gap:18px}
}

/* ===== v3: แถบไลฟ์ ===== */
#oyt .lv{background:linear-gradient(90deg,#b3141f,#e11d2e);color:#fff}
#oyt .lv[hidden]{display:none}
#oyt .lv .w{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
#oyt .lv-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:oytp 1.6s infinite}
@keyframes oytp{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
#oyt .lv-t{flex:1;min-width:0;line-height:1.35}
#oyt .lv-t b{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;background:rgba(0,0,0,.22);border-radius:6px;padding:2px 8px;margin-right:10px}
#oyt .lv-t span{font-weight:600;font-size:15px}
#oyt .lv-cd{font-family:var(--num);font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
#oyt .lv .btn{background:#fff;color:var(--red)!important;padding:9px 16px;font-size:14px}
#oyt .lv .btn:hover{background:var(--blk);color:#fff!important}
/* ===== v3: ดูแล้ว ===== */
#oyt .vt .sn{position:absolute;left:8px;bottom:8px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(10,10,10,.78);border-radius:6px;padding:2px 7px;line-height:1.35}
#oyt .vt .sn:before{content:"✓ "}
#oyt .vc.seen .vt img{opacity:.55}
#oyt .vc.seen .vt:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red)}
/* ===== v3: modal รายละเอียด ===== */
#oyt .mdl{align-items:flex-start;overflow-y:auto;padding:64px 24px 32px}
#oyt .mdl-d{display:grid;grid-template-columns:1fr 290px;gap:20px;margin-top:16px;align-items:start}
#oyt .md-main{min-width:0}
#oyt .mdl-d h3{color:#fff;font-size:19px;line-height:1.45;font-weight:700;letter-spacing:-.01em}
#oyt .md-m{font-size:13.5px;color:#a1a1aa;margin-top:6px}
#oyt .md-desc{font-size:14.5px;color:#d4d4d8;line-height:1.7;margin-top:10px}
#oyt .md-desc:empty{display:none}
#oyt .md-ch{margin-top:14px}
#oyt .md-ch[hidden]{display:none}
#oyt .md-ch>b{display:block;font-size:13px;color:#a1a1aa;font-weight:600;margin-bottom:8px}
#oyt .md-ch>div{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow-y:auto}
#oyt .md-ch button{display:inline-flex;gap:7px;align-items:center;font-family:var(--ff);font-size:13px;color:#e4e4e7;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 11px;cursor:pointer;margin:0;line-height:1.3}
#oyt .md-ch button:hover{background:rgba(255,255,255,.16)}
#oyt .md-ch button i{font-style:normal;font-family:var(--num);font-weight:700;color:#ff8a92}
#oyt .md-l{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:14px}
#oyt .md-l a{color:#fff;font-weight:600}
#oyt .md-l .md-art{color:#ff8a92}
#oyt .md-l .md-art[hidden]{display:none}
#oyt .md-l .md-art:before{content:"อ่านต่อ: ";color:#a1a1aa;font-weight:500}
#oyt .md-cta{display:block;border-radius:18px;padding:18px;background:linear-gradient(160deg,#1f1f23,#141416);border:1px solid rgba(255,255,255,.1);transition:border-color .2s}
#oyt .md-cta:hover{border-color:var(--red)}
#oyt .md-cta small{display:block;font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:.12em;color:#ff5a64}
#oyt .md-cta b{display:block;color:#fff;font-size:16.5px;line-height:1.4;margin-top:6px}
#oyt .md-cta span{display:block;color:#a1a1aa;font-size:13.5px;line-height:1.6;margin-top:6px}
#oyt .md-cta em{display:inline-flex;margin-top:14px;font-style:normal;font-size:14px;font-weight:600;color:#fff;background:var(--red);border-radius:999px;padding:9px 16px}
@media(max-width:1024px){#oyt .mdl-d{grid-template-columns:1fr}}
@media(max-width:767px){
  #oyt .lv .w{flex-wrap:wrap;gap:8px 12px}
  #oyt .lv-t{flex:1 1 calc(100% - 30px)}
  #oyt .lv-t b{margin:0 0 4px;display:table}
  #oyt .lv-cd{font-size:16px}
  #oyt .lv .btn{margin-left:auto}
  #oyt .mdl{padding:60px 12px 24px}
  #oyt .mdl-d h3{font-size:17px}
  #oyt .vt .sn{left:5px;bottom:5px;font-size:10.5px;padding:1px 5px}
}


#oyt .mdl{align-items:center;padding:52px 24px 20px;background:rgba(6,6,8,.95)}
#oyt .mdl-in{--sw:360px;--mw:min(calc(100vw - 48px),1480px,calc((100vh - 232px) * 16 / 9 + var(--sw)));width:var(--mw);max-width:none;height:min(calc(100vh - 72px),980px);display:grid;grid-template-columns:minmax(0,1fr) var(--sw);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"v s" "i s";background:#111114;border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
#oyt .mdl-x{top:-44px;right:0}
#oyt .mdl-v{grid-area:v;border-radius:18px 0 0 0}
#oyt .mdl-d{display:contents}
#oyt .md-main{grid-area:i;min-height:0;overflow-y:auto;padding:18px 24px 22px}
#oyt .md-side{grid-area:s;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:20px;border-left:1px solid rgba(255,255,255,.08)}
#oyt .md-main,#oyt .md-side{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
#oyt .md-main::-webkit-scrollbar,#oyt .md-side::-webkit-scrollbar{width:6px}
#oyt .md-main::-webkit-scrollbar-thumb,#oyt .md-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
#oyt .mdl-d h3{font-size:19px}
#oyt .md-desc{white-space:pre-line}
#oyt .md-l{padding-top:14px;margin-top:16px;border-top:1px solid rgba(255,255,255,.08)}
#oyt .md-side .md-ch{margin:0}
#oyt .md-side .md-ch>div{flex-direction:column;align-items:stretch;max-height:none;overflow:visible;gap:4px}
#oyt .md-side .md-ch button{justify-content:flex-start;text-align:left;border-radius:10px;padding:8px 12px;font-size:13.5px}
#oyt .md-side .md-ch button i{min-width:44px}
#oyt .md-side .md-cta{padding:16px 18px}
#oyt .md-cta{--ac:#ff5a64;--bt:#b3141f;--bi:#fff}
#oyt .md-cta.bk-ex{--ac:#ffde02;--bt:#ffde02;--bi:#0a141c;background:radial-gradient(260px 140px at 100% 0%,rgba(255,222,2,.14),transparent 70%),linear-gradient(160deg,#0b1d26,#07121a)}
#oyt .md-cta.bk-xm{--ac:#ff5a6e;--bt:#d7263d;--bi:#fff;background:radial-gradient(260px 140px at 100% 0%,rgba(215,38,61,.2),transparent 70%),linear-gradient(160deg,#121a2e,#0a0e17)}
#oyt .md-cta.bk-hf{--ac:#ff4d56;--bt:#d81e27;--bi:#fff;background:radial-gradient(260px 140px at 100% 0%,rgba(216,30,39,.22),transparent 70%),linear-gradient(160deg,#1a1012,#0a0a0b)}
#oyt .md-cta small{color:var(--ac)}
#oyt .md-cta em{background:var(--bt);color:var(--bi)}
#oyt .md-cta:hover{border-color:var(--ac)}
#oyt .md-cta .rk2{display:block;font-size:11px;color:rgba(255,255,255,.45);margin-top:10px;line-height:1.5}
#oyt .md-rel>b{display:block;font-size:13px;color:#a1a1aa;font-weight:600;margin-bottom:8px}
#oyt .md-rel[hidden]{display:none}
#oyt .md-rel button{display:grid;grid-template-columns:128px 1fr;gap:10px;align-items:start;width:100%;text-align:left;background:none;border:0;padding:6px;margin:0 -6px;border-radius:10px;cursor:pointer;font:inherit;color:inherit}
#oyt .md-rel button:hover{background:rgba(255,255,255,.06)}
#oyt .md-rel .rt{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#222}
#oyt .md-rel img{width:100%;height:100%;object-fit:cover}
#oyt .md-rel .rd{position:absolute;right:4px;bottom:4px;font-family:var(--num);font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.8);border-radius:4px;padding:1px 4px}
#oyt .md-rel .rn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.45;color:#f4f4f5}
#oyt .md-rel .rm{display:block;font-size:12px;color:#a1a1aa;margin-top:3px}
@media(max-width:1024px){
  #oyt .mdl{align-items:flex-start;overflow-y:auto;padding:58px 16px 24px}
  #oyt .mdl-in{width:100%;max-width:820px;height:auto;display:block;border-radius:16px}
  #oyt .mdl-v{border-radius:16px 16px 0 0}
  #oyt .mdl-d{display:block}
  #oyt .md-main{overflow:visible;padding:18px 18px 4px}
  #oyt .md-side{overflow:visible;border-left:0;padding:14px 18px 20px}
  #oyt .md-side .md-ch>div{flex-direction:row;flex-wrap:wrap}
  #oyt .md-side .md-ch button{border-radius:999px;padding:5px 11px;font-size:13px}
  #oyt .md-side .md-ch button i{min-width:0}
}
@media(max-width:767px){#oyt .mdl{padding:54px 10px 20px}#oyt .md-main{padding:16px 16px 4px}#oyt .md-side{padding:12px 16px 18px}#oyt .md-rel button{grid-template-columns:112px 1fr}}