/* ink / ref/03 — เย็ดหลุด · plain CSS, system fonts, spacing 4/8/12/16/24/32, accent เดียว */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root{--bg:#12100d;--top:#191612;--card:#1d1915;--card2:#272119;--line:#352c22;--line2:#4a3c2c;--tx:#f6efe4;--mute:#b9ad9d;--ac:#f9b65b;--ac-ink:#14110d;--ac-soft:rgba(249,182,91,.14);--r:10px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:"Noto Sans Thai","Sarabun","Leelawadee UI","Thonburi",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden}
h1,h2,h3{line-height:1.45;font-weight:700;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,label:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
img{display:block;max-width:100%}
button,input{font:inherit}
ul,ol{list-style:none;margin:0;padding:0}
.wrap{max-width:1280px;margin:0 auto;padding-left:16px;padding-right:16px}
main.wrap{padding-bottom:32px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:10;background:var(--top);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:16px;min-height:72px}
.logo{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:44px;font-weight:700;font-size:24px;line-height:1.45;color:var(--ac);white-space:nowrap;letter-spacing:.2px}
.logo small{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--mute);font-weight:400;letter-spacing:0}
.mainnav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-left:auto}
.mainnav a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:700;line-height:1.45;color:var(--tx);transition:background-color .15s,color .15s}
.mainnav a:hover{background:var(--card2);color:var(--ac)}
.mainnav a.on,.mainnav a[aria-current]{background:var(--ac);color:var(--ac-ink)}
.nt,#nt{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nt-btn{display:none;flex:none;width:44px;height:44px;position:relative;cursor:pointer;margin-left:auto;border:1px solid var(--line);border-radius:8px}
.nt-btn span,.nt-btn span::before,.nt-btn span::after{position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:var(--tx);content:""}
.nt-btn span{top:20px}.nt-btn span::before{top:-6px;left:0}.nt-btn span::after{top:6px;left:0}
.nt:checked+.nt-btn{border-color:var(--ac)}
.sbox{position:relative;flex:none}
.sbox summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;border:1px solid var(--ac);border-radius:8px;color:var(--ac);cursor:pointer;transition:background-color .15s}
.sbox summary:hover,.sbox[open] summary{background:var(--ac-soft)}
.sbox summary::-webkit-details-marker{display:none}
.lens{position:absolute;left:13px;top:12px;width:14px;height:14px;border:2px solid var(--ac);border-radius:50%}
.lens::after{content:"";position:absolute;width:2px;height:8px;background:var(--ac);right:-5px;bottom:-7px;transform:rotate(-45deg)}
.sbox form{position:absolute;right:0;top:52px;width:min(360px,calc(100vw - 32px));padding:8px;background:var(--top);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.sbox input{width:100%;height:44px;padding:0 12px;background:var(--card);border:1px solid var(--line2);border-radius:8px;color:var(--tx)}
.sbox input::placeholder{color:var(--mute)}
.sbox input:focus{border-color:var(--ac);outline:none}

/* ---------- headings ---------- */
.h1{margin:24px 0 16px;padding:16px 24px;font-size:22px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ac);border-radius:var(--r);overflow-wrap:anywhere}
.h1-sm{margin:24px 0 16px;padding:0 0 0 12px;font-size:18px;background:none;border:0;border-left:4px solid var(--ac);border-radius:0}
.cnt{display:inline-block;margin-left:8px;color:var(--mute);font-size:14px;font-weight:400}
.sec-h{display:flex;align-items:center;font-size:18px;margin:32px 0 16px}
.sec-h .ic,.h1 .ic{margin-right:8px;color:var(--ac)}
.post-box .sec-h,.q-head .sec-h,.tagcloud .sec-h{margin-top:0}
h3.sec-h{font-size:14px;color:var(--mute);margin:16px 0 8px;font-weight:700}

/* ---------- breadcrumb ---------- */
.crumbs{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--tx)}
.crumbs a:hover{color:var(--ac)}
.crumbs span{color:var(--mute)}
.crumbs+.h1{margin-top:8px}
.crumbs+.player{margin-top:8px}

/* ---------- grid + card ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}
.card{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .15s,transform .15s}
.card-link{display:block;flex:1}
.card-link:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;border-radius:var(--r)}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--card2)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.card .thumb{border-radius:0}
.dur{position:absolute;right:8px;bottom:8px;padding:0 8px;border-radius:4px;background:rgba(0,0,0,.82);color:#fff;font-size:12px;font-weight:700;line-height:1.75;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:calc(2 * 1.5em + 12px);padding:12px 12px 0;font-size:15px;line-height:1.5;font-weight:700;word-break:break-word;overflow-wrap:anywhere;color:var(--tx);transition:color .15s}
.meta{margin:0;padding:4px 12px 12px;color:var(--mute);font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums}
.card .meta::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:2px;border-radius:50%;background:var(--ac)}
.card:hover{border-color:var(--ac)}
.card:hover .card-title,.card-link:focus-visible .card-title{color:var(--ac)}
.card:hover .thumb img{transform:scale(1.04)}
.card[aria-hidden="true"] .thumb{background:linear-gradient(90deg,var(--card2),#2f281f,var(--card2));background-size:200% 100%;animation:sk 1.2s linear infinite}
.card[aria-hidden="true"] .card-title{color:var(--mute);font-weight:400}
.card[aria-hidden="true"] .meta::before{background:var(--line2)}
.card[aria-hidden="true"]:hover{border-color:var(--line)}
@keyframes sk{from{background-position:200% 0}to{background-position:0 0}}

/* ---------- chips / tabs / pager ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chips li{min-width:0}
.chips a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;line-height:1.45;color:var(--tx);overflow-wrap:anywhere;transition:border-color .15s,color .15s}
.chips a:hover{border-color:var(--ac);color:var(--ac)}
.chips a[aria-current]{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);font-weight:700}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:32px 0}
.pager a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:14px;font-weight:700;line-height:1.45;font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s}
.pager a:hover{border-color:var(--ac);color:var(--ac)}
.pager a.on{background:var(--ac);color:var(--ac-ink);border-color:var(--ac)}
.pager a .ic{margin-left:4px}
/* แท็บเรียง (ล่าสุด/ยอดนิยม) ที่อยู่ใต้หัวข้อ: ชิดซ้าย ระยะแคบ */
.h1+.pager,.chips+.pager,.cnt+.pager{justify-content:flex-start;margin:0 0 16px}
/* ตัวกรองหน้า cat */
main details:not(.sbox){margin:0 0 24px;padding:0 16px 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
main details:not(.sbox)>summary{list-style:none;display:flex;align-items:center;min-height:44px;font-weight:700;cursor:pointer}
main details:not(.sbox)>summary::-webkit-details-marker{display:none}
main details:not(.sbox)>summary::after{content:"";width:8px;height:8px;margin-left:auto;border-right:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(45deg);transition:transform .15s}
main details[open]:not(.sbox)>summary::after{transform:rotate(-135deg)}
main details:not(.sbox) .chips{margin:0 0 8px}
summary{min-height:44px;display:flex;align-items:center;cursor:pointer}

/* ---------- ads / tagcloud / footer ---------- */
.ads{display:grid;grid-template-columns:1fr;max-width:728px;margin:32px auto}
.ad{display:flex;flex-direction:column;align-items:center;justify-content:center;height:90px;background:var(--card);border:1px dashed var(--line2);border-radius:8px;color:var(--mute);font-size:14px}
.ad small{font-size:12px}
.tagcloud{margin:32px 0;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.tagcloud .chips{margin-bottom:0}
.foot{margin-top:32px;padding:32px 16px;border-top:1px solid var(--line);background:var(--top);text-align:center;font-size:13px;color:var(--mute);line-height:1.5}
.foot p{margin:0 0 8px}
.foot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--tx)}
.foot a:hover{color:var(--ac)}
.totop{gap:8px;padding:0 16px;border:1px solid var(--line);border-radius:8px}
.see{display:inline-flex;min-width:44px;justify-content:center}

/* ---------- post ---------- */
.player{position:relative;aspect-ratio:16/9;margin-top:16px;background:#000;border-radius:var(--r);overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player img{width:100%;height:100%;object-fit:cover;opacity:.55}
.play{position:absolute;inset:0;width:72px;height:72px;margin:auto;border-radius:50%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}
.tri{width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:24px solid var(--ac);margin-left:4px}
.post-box{margin-top:16px;padding:16px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.post-box .meta{padding:0;margin-top:8px}
.post-box .chips{margin-bottom:0}
.post-h{margin:0 0 8px;font-size:20px;line-height:1.5;overflow-wrap:anywhere}
.post-box .grid{margin-top:16px}
#h-q{margin:0}

/* ---------- ช่อง: แท็บของช่องอยู่ใน main ต้องแสดงตลอด ---------- */
main .mainnav{display:flex;position:static;justify-content:flex-start;gap:8px;margin:0 0 24px;padding:0 0 8px;background:none;border:0;border-bottom:1px solid var(--line)}
main .mainnav a{flex:0 0 auto;min-width:88px;background:none}
main .mainnav a.on{background:none;color:var(--ac);box-shadow:inset 0 -2px 0 var(--ac);border-radius:0}

/* ---------- 404 ---------- */
main>.h1:first-child{margin-top:32px}
main>.h1:first-child+.meta{padding:0;max-width:640px;font-size:15px}
main .sbox{display:inline-block;margin:24px 0 0}
main .sbox form{position:static;margin-top:8px;width:min(480px,calc(100vw - 32px));box-shadow:none}
main .sbox+.pager{justify-content:flex-start;margin:16px 0 0}

#i-close,#i-filter,#i-follow,#i-full,#i-left,#i-listadd,#i-pause,#i-play,#i-resume,#i-right,#i-search,#i-share,#i-star,#i-top,#i-volume{overflow:visible}
#ap-off,#mini-off{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
 .nt-btn{display:block}
 .top .mainnav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--top);border-bottom:1px solid var(--line);padding:8px 16px 16px;justify-content:flex-start;gap:8px}
 .nt:checked~.mainnav{display:flex}
 .nt:focus-visible+.nt-btn{outline:2px solid var(--ac);outline-offset:2px}
 .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
 .top-in{gap:8px;min-height:64px}
 .top .mainnav{top:64px}
 .logo{font-size:20px}
 .top .mainnav a{flex:1 1 40%;background:var(--card)}
 .top .mainnav a.on{background:var(--ac)}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .card-title{font-size:14px;padding:8px 8px 0;min-height:calc(2 * 1.5em + 8px)}
 .meta{padding:4px 8px 8px;font-size:12px}
 .card .meta::before{margin-right:4px}
 .dur{right:4px;bottom:4px;padding:0 4px}
 .h1{font-size:18px;padding:12px 16px;margin:16px 0 12px}
 .h1-sm{font-size:16px;padding:0 0 0 12px}
 .cnt{display:block;margin:4px 0 0;font-size:13px}
 .sec-h{margin:24px 0 12px;font-size:16px}
 .post-box{padding:16px}
 .post-h{font-size:18px}
 .tagcloud{padding:16px}
 .chips a{padding:0 12px}
 .pager{margin:24px 0}
 .pager a{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ชุดไอคอน 15 ตัว + ดูต่อ/related (QA Lynx 2026-11-04 แก้โดย Ink): โทเคนเดิม, สเกล 4/8/12/16/24/32 */
.ic-set{position:absolute;width:0;height:0;overflow:hidden}
.ic{flex:none;display:inline-block;vertical-align:-4px}
.sec-h .ic,.h1 .ic{margin-right:8px;color:var(--ac)}
.pager a .ic{margin-left:4px}
.totop{gap:8px}
.play .ic{color:var(--ac);margin-left:4px}
.search button{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:inherit}
.thumb .progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.6)}
.thumb .progress::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);background:var(--ac)}
.resume{margin-bottom:24px}
.ap-toggle,.mini-off{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.autonext{position:relative;overflow:hidden;display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;margin:12px 0;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:8px;line-height:1.5}
.an-bar{position:absolute;left:0;top:0;height:4px;width:100%;background:var(--ac);transform-origin:left;animation:an-bar 5s linear forwards}
@keyframes an-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.an-thumb{display:block;border-radius:4px;overflow:hidden}
.an-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.an-txt{min-width:0;display:flex;flex-direction:column}
.an-txt small{color:var(--mute);font-size:13px}
.an-txt a{display:flex;align-items:center;min-height:44px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-n::after{content:"5";color:var(--ac);animation:cd 5s steps(1) forwards}
@keyframes cd{0%{content:"5"}20%{content:"4"}40%{content:"3"}60%{content:"2"}80%{content:"1"}100%{content:"0"}}
.an-act,.actions{display:flex;flex-wrap:wrap;gap:8px}
.an-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--tx);font-size:14px;cursor:pointer}
.an-btn.primary{background:var(--ac);border-color:var(--ac);color:var(--bg)}
.an-off{display:none;align-items:center;gap:12px;margin:12px 0;color:var(--mute);line-height:1.5}
.ap-toggle:checked+.autonext{display:none}
.ap-toggle:checked~.an-off{display:flex}
.actions{margin:12px 0}
.queue{margin:24px 0}
.q-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:12px}
.q-head .sec-h{margin:0}
.q-head small{color:var(--mute);font-size:13px}
.q-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.q-list li{min-width:0}
.q-list .qitem{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto 1fr;gap:4px 12px;justify-content:stretch;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;line-height:1.5}
.qitem.on{border-color:var(--ac)}
.qitem .thumb{grid-row:1/3;border-radius:4px;overflow:hidden}
.qitem .thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.q-t{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.q-why,.reason{color:var(--mute);font-size:12px;line-height:1.5}
.card .reason{margin:4px 0 0}
.mini{position:fixed;left:16px;right:16px;bottom:16px;z-index:20;max-width:560px;margin-left:auto;display:none;grid-template-columns:96px 1fr repeat(4,44px);gap:8px;align-items:center;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);line-height:1.5}
.mini-thumb{display:block;border-radius:4px;overflow:hidden}
.mini-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.mini-t{min-width:0;display:flex;flex-direction:column;font-size:13px}
.mini-t small{color:var(--mute);font-size:12px}
.mini-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--tx);cursor:pointer;padding:0}
@supports (animation-timeline:scroll()){
 .mini{display:grid;opacity:0;visibility:hidden;animation:mini-in linear both;animation-timeline:scroll(root);animation-range:600px 700px}
 @keyframes mini-in{to{opacity:1;visibility:visible}}
 body:has(.mini){padding-bottom:calc(32px + 32px + 16px)}
}
.mini-off:checked+.mini{display:none}
@media (max-width:860px){.q-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
 .autonext{grid-template-columns:96px 1fr}
 .an-act{grid-column:1/-1}
 .an-act .an-btn{flex:1}
 .q-list{grid-template-columns:1fr}
 .q-list .qitem{grid-template-columns:112px 1fr}
 .mini{left:8px;right:8px;bottom:8px;grid-template-columns:64px 1fr 44px 44px}
 .mini .mini-btn:nth-of-type(2),.mini a.mini-btn{display:none}
}

/* เก็บงาน: ข้อความสรุปใต้หัวข้อ + ภาพปกโหลดไม่ขึ้นไม่โชว์ alt ทับการ์ด */
main>.meta{padding:0;margin:0 0 16px}
main>.meta+.pager{justify-content:flex-start;margin:0 0 16px}
.thumb img{color:transparent;font-size:0}

/* filterbar */
[data-filterbar]{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
[data-filter]{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
[data-filter][aria-pressed="true"]{background:#f9b65b;border-color:#f9b65b;color:#fff;font-weight:700}
[data-clear]{min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
[data-empty] .t{font-weight:700}
[data-empty]{padding:24px;border:1px dashed var(--line);border-radius:8px;margin:16px 0}
.card[hidden]{display:none!important}

/* hero จากเฟรมแรกของคลิป */
.hero{position:relative;display:block;margin:16px 0 8px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-t{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 10px;color:#fff;font-weight:700;font-size:18px;line-height:1.4;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);text-shadow:0 1px 8px #000}
.hero:hover{border-color:var(--ac)}
@media(max-width:760px){.hero{margin:12px 0 8px}.hero-t{font-size:16px;padding:34px 10px 8px}}