/* เย็ดหี5.com — vee/ph/01
   โครงตามภาพอ้างอิง: รางซ้ายแคบ + โลโก้แนวตั้ง, หัวเว็บ โลโก้ซ้าย/ค้นหาขวา,
   แผงตัวกรอง, ชิปแท็ก, กริด 5 คอลัมน์ ภาพแนวตั้ง ป้ายเวลาบนภาพ ชื่อ+meta ใต้ภาพ */
:root{--bg:#0a090f;--panel:#1c1e23;--panel2:#232529;--line:#2d3035;--text:#fefefe;--dim:#9aa0a8;--accent:#ff9000;--ink:#14100a;--barh:57px;--tr:9/19;--rt:96px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 Tahoma,"Leelawadee UI","Segoe UI",Arial,sans-serif;letter-spacing:0}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,label:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{display:block;max-width:100%}
svg{flex:0 0 auto}
h1,h2,h3,p{margin:0;overflow-wrap:anywhere}
h1,h2,h3{line-height:1.5;font-weight:700}
button{font:inherit;color:inherit}
.wrap{max-width:1480px;margin:0 auto;padding:16px}

/* หัวเว็บ */
.topbar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .in{display:flex;align-items:center;gap:16px;max-width:1480px;margin:0 auto;padding:8px 16px;min-height:56px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-size:20px;font-weight:700;color:var(--accent);white-space:nowrap}
.brand:hover{color:var(--accent);filter:brightness(1.1)}
.brand span{color:var(--text)}
.qform{flex:1;display:flex;justify-content:flex-end;min-width:0;margin:0 0 0 auto;max-width:420px}
.q{flex:1;min-width:0;max-width:420px;margin-left:auto;min-height:44px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:4px;padding:8px 12px;font:inherit}
.qform .q{max-width:none;margin:0;width:100%}
.q:hover{border-color:var(--dim)}
.q:focus{border-color:var(--accent);outline:none}
.q::placeholder,#query::placeholder{color:var(--dim)}

/* รางซ้าย */
.rail{display:none}
.shell{display:block}
.col{min-width:0}

/* หัวข้อ */
.pagetitle{font-size:22px;margin:8px 0 16px}
.crumbs + .pagetitle{margin-top:0}
.player + .pagetitle{font-size:18px;margin:16px 0 4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hcount{font-size:14px;font-weight:400;color:var(--dim)}
.tagdesc{color:var(--dim);line-height:1.5;margin:0 0 16px}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--dim);min-height:32px;padding:4px 0 12px}
.crumbs a{display:inline-flex;align-items:center;min-height:32px}
.crumbs a:hover{color:var(--accent)}

/* แผงตัวกรอง + ปุ่ม */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px;margin:0 0 16px}
.fl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);min-height:44px}
select{min-height:44px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:8px;font:inherit;font-size:14px;max-width:100%;cursor:pointer}
select:hover{border-color:var(--dim)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:4px;cursor:pointer;font-size:14px;line-height:1.5}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}
.btn.primary:hover{color:var(--ink);filter:brightness(1.08)}
.btn:disabled,.btn.is-disabled{opacity:.45;cursor:not-allowed}
.count{font-size:12px;color:var(--dim);display:flex;align-items:center;min-height:44px;margin:0}
.filterbar .count{margin-left:auto;padding:0 8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 16px;scrollbar-width:thin}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:24px;cursor:pointer;font-size:14px;line-height:1.5;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}
.chip[aria-pressed="true"]:hover{color:var(--ink)}
.chip[aria-pressed="true"]::after{content:"×";font-weight:700}
.chip:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line);color:var(--text)}
.chip .n{font-size:12px;font-weight:400;color:var(--dim)}
.chip[aria-pressed="true"] .n{color:var(--ink)}
.chip .x{margin-left:8px;font-weight:700}

/* กริด + การ์ด */
.vgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 8px;align-items:start;transition:opacity .12s}
.vgrid.is-busy{opacity:.4;pointer-events:none}
.card{min-width:0;position:relative}
.card > a{display:block;border-radius:4px}
.card > a:hover{color:var(--text)}
.card .thumb{display:block;position:relative;aspect-ratio:var(--tr);background:var(--panel);border-radius:4px;overflow:hidden}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent;font-size:0;transition:filter .15s}
.card a:hover img{filter:brightness(1.15)}
.card a:hover .title{color:var(--accent)}
.card a:hover .thumb{box-shadow:inset 0 0 0 2px var(--accent)}
.dur{position:absolute;right:4px;bottom:4px;z-index:1;background:rgba(0,0,0,.82);color:#fff;font-size:12px;font-weight:700;line-height:1.5;padding:0 4px;border-radius:4px}
.title{font-size:14px;font-weight:400;line-height:1.5;min-height:3em;color:var(--text);transition:color .15s;margin:8px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.meta{font-size:12px;color:var(--dim);line-height:1.5;display:flex;gap:4px 8px;flex-wrap:wrap;margin:0}
.why{font-size:12px;color:var(--accent);line-height:1.5;margin-top:4px}

/* แบ่งหน้า */
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:24px 0 0}
.pg{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:4px;font-size:14px}
.pg:hover{border-color:var(--accent);color:var(--accent)}
.pg[aria-current="page"]{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}
.pg.is-disabled{opacity:.45}

/* สถานะ */
.states{margin:16px 0}
.states h2{font-size:16px;margin:16px 0 8px}
.slab{font-size:12px;color:var(--dim);margin:8px 0}
.sgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 8px}
.skel .sthumb{aspect-ratio:var(--tr);background:var(--panel2);border-radius:4px;animation:pulse 1.2s ease-in-out infinite}
.skel .sline{height:12px;background:var(--panel2);border-radius:4px;margin:8px 0;animation:pulse 1.2s ease-in-out infinite}
.skel .sline.short{width:60%}
@keyframes pulse{50%{opacity:.4}}
.panel{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:16px;margin:24px 0}
.panel h2,.panel h3{font-size:16px;margin:0 0 8px}
.panel p{color:var(--dim);margin:0 0 12px;line-height:1.5}
.state-empty{text-align:left}
.fempty{margin:0 0 24px}
.state-error h2{font-size:32px;color:var(--accent);margin:0 0 8px}
.chprofile{margin-top:0}
.chprofile h2{font-size:20px}
.dstates{display:flex;flex-wrap:wrap;gap:8px}

/* หน้าคลิป */
.player{width:100%;overflow:hidden;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.playbtn{width:64px;height:64px;border-radius:50%;background:var(--accent);border:none;display:grid;place-items:center;cursor:pointer}
.playbtn:hover{filter:brightness(1.1)}
.tri{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:20px solid var(--ink);margin-left:4px}
.pnote{font-size:12px;color:var(--dim)}
.postmeta{padding:4px 0 8px;border-bottom:1px solid var(--line)}
.actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}
.tagsblock > h2,.nearby > h2,.sechead h2{font-size:18px;margin:16px 0 8px}
.tagsblock .chips{flex-wrap:wrap;overflow:visible;padding-bottom:8px}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sechead .count{min-height:0}
.prevnext{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 16px}
.prevnext .btn{flex:1 1 160px;text-align:center}
.related .vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* หน้าแท็ก */
.facetbtn{display:inline-flex;margin:0 0 16px}
.taglayout{display:block}
.tagmain{min-width:0}
.tagmain > .ad:first-child{margin-top:0}
.facet{display:none}
.nearby .chips{overflow:visible;flex-wrap:wrap}

/* ท้ายเว็บ */
footer{border-top:1px solid var(--line);color:var(--dim);font-size:12px;line-height:1.5;padding:24px 0;margin-top:32px;text-align:center}
footer p{margin:0}
.flinks{display:flex;justify-content:center;flex-wrap:wrap;gap:0 8px;margin-bottom:4px}
.flinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--text)}

/* แผงตัวกรองมือถือ */
.sheetcheck{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sheetveil{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30}
.fsheet{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--panel);border-top:1px solid var(--line);border-radius:12px 12px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));transform:translateY(100%);visibility:hidden;transition:transform .2s,visibility .2s;max-height:80vh;overflow:auto}
.fsheet .chips{flex-wrap:wrap;overflow:visible;padding-bottom:8px}
.fsheet .fl{margin:0 0 8px;justify-content:space-between;color:var(--text);font-size:14px}
.fsheet select{flex:1;max-width:240px}
.sheetgrab{width:32px;height:4px;background:var(--line);border-radius:4px;margin:0 auto 12px}
.fsheet h2{font-size:16px;margin:0 0 12px}
.sheetfoot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.sheetclose{margin-left:auto}
#fsheet:checked ~ .sheetveil{display:block}
#fsheet:checked ~ .fsheet{transform:none;visibility:visible}

/* แถบล่างมือถือ */
.bottombar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bottombar a,.bottombar label,.bottombar button,.barbtn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:56px;padding:4px;background:none;border:0;border-right:1px solid var(--line);color:var(--text);cursor:pointer;font-size:12px;line-height:1.5;text-align:center}
.bottombar a:hover,.bottombar label:hover,.barbtn:hover{color:var(--accent)}
.bottombar a[aria-current="page"]{color:var(--accent);font-weight:700}
.bottombar :last-child{border-right:none}

/* ค้นหา */
#query{flex:1 1 240px;justify-content:flex-start;text-align:left;cursor:text;font:inherit;background:var(--bg)}
#query:focus{border-color:var(--accent);outline:none;color:var(--text)}
.filterbar[role="search"] .fl{color:var(--text);font-size:14px}

/* โฆษณา: กล่องขนาดคงที่ ไม่ทำให้ layout กระโดด */
.ad{display:flex;align-items:center;justify-content:center;max-width:100%;margin:0 auto 16px;background:#111015;border:1px dashed var(--line);border-radius:4px;color:var(--dim);font-size:12px;line-height:1.5}
.ad:hover{border-color:var(--accent);color:var(--accent)}
.ad-970{width:970px;height:250px}
.ad-728{width:728px;height:90px}
.ad-native{width:auto;height:auto;margin:0;align-self:stretch;min-height:120px}
.nearby + .ad,.chprofile + .ad{margin-top:24px}

/* ไล่คอลัมน์ */
@media(max-width:1180px){.vgrid,.sgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.vgrid,.sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .wrap{padding:12px 12px 16px}
  body{padding-bottom:calc(var(--barh) + env(safe-area-inset-bottom))}
  .topbar{position:static}
  .topbar .in{flex-wrap:wrap;gap:8px;padding:4px 12px 12px;min-height:0}
  .q{display:none}
  .qform{flex:1 1 100%;max-width:none;margin:0}
  .qform .q{display:block}
  .ad-970,.ad-728{width:320px;height:100px}
  .ad-top{display:none}
  body:has(#query) .qform{display:none}
  .pagetitle{font-size:18px;margin:4px 0 12px}
  .player + .pagetitle{font-size:16px}
  .prevnext .btn{flex:1 1 120px}
  .player{width:auto;margin:0 -12px;border-radius:0;border-left:0;border-right:0}
  .crumbs{padding:0 0 8px}
  .vgrid,.sgrid,.related .vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}
  .filterbar .count{margin-left:0}
  .bottombar{display:flex}
  footer{margin-top:24px}
}
@media(max-width:400px){
  .filterbar .fl{flex:1 1 140px}
  .filterbar select{flex:1}
}
@media(min-width:1024px){
  .shell{display:grid;grid-template-columns:72px minmax(0,1fr)}
  .rail{display:flex;position:sticky;top:0;height:100vh;flex-direction:column;align-items:center;gap:8px;padding:16px 0;background:var(--panel);border-right:1px solid var(--line);z-index:10}
  .rbrand{writing-mode:vertical-rl;font-size:14px;font-weight:700;color:var(--accent);margin:0 0 16px;line-height:1.5}
  .rail a{display:flex;align-items:center;justify-content:center;min-height:44px;width:64px;font-size:12px;color:var(--dim);border-radius:4px;text-align:center}
  .rail a:hover{color:var(--accent);background:var(--panel2)}
  .rail a[aria-current="page"]{color:var(--accent);background:var(--panel2);font-weight:700}
}
@media(min-width:900px){
  .taglayout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
  .taglayout .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facet{display:block;position:sticky;top:72px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px}
  .facet h2{font-size:16px;margin:0 0 12px}
  .facet .fl{flex-direction:column;align-items:stretch;gap:4px;margin:0 0 8px;color:var(--text);font-size:14px}
  .facet select{width:100%;min-width:0}
  .facet .btn{width:100%;margin-top:8px}
  .facet .chips{flex-wrap:wrap;overflow:visible;padding:8px 0 0}
  .facet .chip{max-width:100%;white-space:normal;text-align:left;line-height:1.45;height:auto;min-height:44px}
  .facet .count{min-height:32px}
  .facetbtn{display:none}
  .fsheet,.sheetveil{display:none!important}
}
@media(min-width:1180px){.taglayout .vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1180px){
  main.wrap:has(> .player){display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:repeat(7,auto) 1fr auto;column-gap:24px;align-items:start}
  main.wrap:has(> .player) > *{grid-column:1}
  main.wrap:has(> .player) > .crumbs{grid-row:1;grid-column:1/-1}
  main.wrap:has(> .player) > .related{grid-column:2;grid-row:2/9}
  main.wrap:has(> .player) > footer{grid-column:1/-1;grid-row:9}
  .related .sechead h2{margin-top:0}
  .related .vgrid{grid-template-columns:minmax(0,1fr);gap:12px}
  .related .card{display:grid;grid-template-columns:var(--rt) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px}
  .related .card > a{grid-column:1/-1;grid-row:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
  .related .card .thumb{grid-column:1;grid-row:1/-1;align-self:start}
  .related .card .title{grid-column:2;grid-row:1;margin:0;min-height:0}
  .related .card .meta{grid-column:2;grid-row:2}
  .related .card .why{grid-column:2;grid-row:3;margin:0}
}

/* แบนเนอร์บนสุด = เฟรมแรกของคลิปแรก */
.hero{display:block;position:relative;margin:16px 0;border-radius:6px;overflow:hidden;aspect-ratio:970/250;background:var(--panel)}
.hero img{width:100%;height:100%;object-fit:cover}
.hero:hover img{filter:brightness(1.12)}
.hero .dur{right:8px;bottom:8px;font-size:13px;padding:0 6px}
.herotitle{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;font-size:15px;font-weight:700;color:#fff;line-height:1.5;background:linear-gradient(transparent,rgba(0,0,0,.85));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:760px){.hero{aspect-ratio:320/100;margin:12px 0}.hero .dur{right:4px;bottom:4px;font-size:11px}.herotitle{display:none}}