/* =============================================================
   D-OP PROTECTION — สไตล์สำหรับหน้าย่อย
   (เกี่ยวกับเรา / สินค้าและบริการ / ผลงาน / รีวิว / ติดต่อเรา)
   ============================================================= */

/* ---------- หัวหน้าเพจ ---------- */
.page-hero{
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:360px;padding:150px 0 66px;background:var(--dark-1);
}
.page-hero .ph-bg{
  position:absolute;inset:0;z-index:1;
  background:url("img/banner-car.jpg") right center/cover no-repeat;
  transform:scale(1.09);animation:phZoom 14s var(--ease) forwards;
}
@keyframes phZoom{to{transform:scale(1)}}
.page-hero .ph-veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(95deg,rgba(8,8,7,.94) 0%,rgba(10,10,9,.85) 32%,rgba(12,12,11,.55) 52%,rgba(12,12,11,.18) 70%,transparent 86%);
}
.page-hero .ph-rays{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url("img/bg-rays-dark.svg") left center/62% 100% no-repeat;opacity:.35}
.page-hero .wrap{position:relative;z-index:3}
.page-hero h1{
  font-family:"Kanit","Prompt",sans-serif;font-weight:600;line-height:1.2;
  font-size:clamp(28px,3.6vw,48px);
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.page-hero .ph-sub{margin-top:12px;font-size:clamp(11px,1vw,13.5px);letter-spacing:5px;color:#E7DFCB}
.page-hero .ph-desc{margin-top:18px;font-size:clamp(14px,1.2vw,17px);line-height:1.8;color:#EDEDEB;max-width:560px}
.crumb{margin-top:24px;font-size:13px;color:#A3A19C}
.crumb a{color:var(--gold-300)}
.crumb a:hover{color:var(--gold-100)}

/* ---------- บล็อกทั่วไป ---------- */
.sec{position:relative;overflow:hidden;padding:78px 0}
.sec-light{background:url("img/bg-silver.svg") left center/140% 100% no-repeat,linear-gradient(180deg,#A5A9AC 0%,#94989C 100%)}
.sec-silver{background:url("img/bg-silver.svg") right center/160% 100% no-repeat,linear-gradient(180deg,#9DA1A4 0%,#8B8F93 48%,#989B9F 100%)}
.sec-dark{background:linear-gradient(160deg,#121110 0%,#1C1B19 60%,#0E0D0C 100%);color:#D8D8D6}
.sec-dark h2,.sec-dark h3{color:#F2F2F0}
.sec-head{max-width:780px;margin:0 auto 50px;text-align:center}
.sec-head .kicker{font-size:12.5px;letter-spacing:4.6px;color:#96660A;font-weight:500;margin-bottom:12px}
.sec-dark .sec-head .kicker{color:var(--gold-300)}
.sec-head h2{font-family:"Kanit","Prompt",sans-serif;font-weight:600;font-size:clamp(24px,2.5vw,34px);line-height:1.32;color:#141414}
.sec-dark .sec-head h2{color:#F4F4F2}
.sec-head p{margin-top:16px;font-size:16px;line-height:1.9;color:#2E2E2E}
.sec-dark .sec-head p{color:#ADADAB}
.sec-head .line{width:96px;height:4px;border-radius:3px;background:var(--gold-bar);margin:18px auto 0}

/* ---------- การ์ด ---------- */
.cards{display:grid;gap:26px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;background:linear-gradient(180deg,#E6E7E4,#D2D4D1);
  border:1px solid rgba(201,150,44,.36);border-radius:14px;padding:32px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:14px 14px 0 0;
  background:var(--gold-bar);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(0,0,0,.15);border-color:rgba(201,150,44,.6)}
.card:hover::before{transform:scaleX(1)}
.card img.ic{width:78px;margin-bottom:18px;transition:transform .4s var(--ease)}
.card:hover img.ic{transform:scale(1.1) rotate(-4deg)}
.card h3{font-family:"Kanit",sans-serif;font-size:19px;font-weight:600;margin-bottom:10px;color:#151515}
.card p{font-size:14.5px;line-height:1.85;color:var(--muted)}
.card .tag{
  display:inline-block;margin-bottom:14px;padding:5px 14px;border-radius:999px;font-size:11.5px;letter-spacing:2px;
  background:linear-gradient(180deg,#2B2A28,#131211);color:var(--gold-200);
}
.card ul{margin:14px 0 0;padding-left:18px;font-size:14px;line-height:2;color:var(--muted)}
.sec-dark .card{background:linear-gradient(180deg,#1E1D1B,#141312);border-color:rgba(201,150,44,.3)}
.sec-dark .card h3{color:#F4F4F2}
.sec-dark .card p,.sec-dark .card ul{color:#A9A9A7}

/* ---------- สถิติ ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;padding:28px 14px;border-radius:14px;background:rgba(255,255,255,.28);border:1px solid rgba(201,150,44,.4)}
.sec-dark .stat{background:rgba(255,255,255,.04);border-color:rgba(201,150,44,.28)}
.stat b{
  display:block;white-space:nowrap;font-family:"Kanit",sans-serif;font-weight:700;font-size:clamp(28px,3vw,42px);
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat i{font-style:normal;font-family:"Kanit",sans-serif;font-weight:700;font-size:clamp(20px,2vw,28px);color:var(--gold-400)}
.stat span{display:block;margin-top:8px;font-size:13.5px;color:#2E2E2E}
.sec-dark .stat span{color:#A9A9A7}

/* ---------- แกลเลอรี ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gitem{
  position:relative;overflow:hidden;border-radius:12px;background:#d8d9d8;margin:0;
  box-shadow:0 12px 30px rgba(0,0,0,.16);aspect-ratio:4/3;
}
.gitem.wide{grid-column:span 2;aspect-ratio:16/8}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gitem:hover img{transform:scale(1.08)}
.gitem figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;color:#fff;font-size:13.5px;
  background:linear-gradient(180deg,transparent,rgba(10,9,8,.9));
  transform:translateY(6px);transition:transform .4s var(--ease);
}
.gitem:hover figcaption{transform:none}
.gitem figcaption b{display:block;font-family:"Kanit",sans-serif;font-weight:500;font-size:16px;color:var(--gold-200);margin-bottom:3px}

/* ---------- รีวิว ---------- */
.review{
  position:relative;background:linear-gradient(180deg,#E6E7E4,#D2D4D1);
  border:1px solid rgba(201,150,44,.34);border-radius:14px;padding:28px 26px 24px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.review:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.14)}
.review .quote{font-family:Georgia,serif;font-size:52px;line-height:1;color:var(--gold-400);opacity:.45}
.review p{margin-top:-16px;font-size:15px;line-height:1.9;color:var(--muted)}
.stars{display:flex;gap:3px;margin:14px 0 0;color:var(--gold-500)}
.who{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(0,0,0,.08);padding-top:16px;margin-top:18px}
.who .av{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,#2B2A28,#131211);color:var(--gold-200);
  font-family:"Kanit",sans-serif;font-weight:600;font-size:17px;
}
.who b{display:block;font-size:15px;font-weight:500;color:#1B1B1B}
.who span{display:block;font-size:12.5px;color:var(--muted-2)}

/* ---------- ติดต่อ ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.cinfo{display:grid;gap:18px}
.crow{
  display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:12px;
  background:linear-gradient(180deg,#E6E7E4,#D4D6D3);border:1px solid rgba(201,150,44,.34);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.crow:hover{transform:translateX(6px);box-shadow:0 12px 26px rgba(0,0,0,.1)}
.crow .ci{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-btn);color:#3A2905;box-shadow:0 6px 16px rgba(176,131,31,.4);
}
.crow b{display:block;font-family:"Kanit",sans-serif;font-weight:500;font-size:16px;margin-bottom:4px;color:#171717}
.crow span,.crow a{display:block;font-size:14.5px;line-height:1.8;color:var(--muted)}
.crow a:hover{color:var(--gold-700)}

.form{background:linear-gradient(180deg,#EDEEEB,#DADCD9);border:1px solid rgba(201,150,44,.28);border-radius:16px;padding:32px}
.form h3{font-family:"Kanit",sans-serif;font-size:21px;font-weight:600;margin-bottom:6px;color:#161616}
.form .fsub{font-size:14px;color:var(--muted-2);margin-bottom:22px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;margin-bottom:7px;color:#3D3D3D}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:10px;border:1px solid rgba(0,0,0,.16);
  background:#FBFBFA;font:inherit;font-size:15px;color:#1B1B1B;transition:border-color .25s,box-shadow .25s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,150,44,.18);
}
.form .btn{width:100%;justify-content:center;padding-left:18px;margin-top:6px}
.form-ok{
  display:none;margin-top:16px;padding:14px 16px;border-radius:10px;font-size:14.5px;
  background:rgba(201,150,44,.14);border:1px solid rgba(201,150,44,.45);color:#6B4708;
}
.form-ok.show{display:block;animation:okIn .5s var(--ease)}
@keyframes okIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- FAQ ---------- */
.faq{max-width:880px;margin:0 auto}
.faq-item{
  border:1px solid rgba(201,150,44,.26);border-radius:12px;margin-bottom:14px;overflow:hidden;
  background:linear-gradient(180deg,#E6E7E4,#D4D5D2);
}
.faq-q{
  width:100%;text-align:left;border:0;background:transparent;padding:20px 56px 20px 22px;
  font-family:"Kanit",sans-serif;font-size:16.5px;font-weight:500;color:#1B1B1B;position:relative;
}
.faq-q::after{
  content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-8px;
  border-right:2.4px solid var(--gold-600);border-bottom:2.4px solid var(--gold-600);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq-item.open .faq-q::after{transform:rotate(-135deg);margin-top:-3px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-item.open .faq-a{max-height:620px}
.faq-a p{padding:0 22px 22px;font-size:15px;line-height:1.9;color:var(--muted)}

/* ---------- ขั้นตอนการทำงาน ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{position:relative;padding:30px 22px 26px;border-radius:14px;background:rgba(255,255,255,.3);border:1px solid rgba(201,150,44,.4)}
.step::before{
  counter-increment:s;content:"0" counter(s);
  font-family:"Kanit",sans-serif;font-weight:700;font-size:30px;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.step h3{font-family:"Kanit",sans-serif;font-size:17px;font-weight:600;margin:8px 0 8px;color:#171717}
.step p{font-size:14px;line-height:1.8;color:var(--muted)}

/* ---------- แถบ CTA ท้ายหน้า ---------- */
.cta-strip{
  position:relative;overflow:hidden;padding:66px 0;text-align:center;
  background:linear-gradient(100deg,#0F0E0D 0%,#1B1A18 45%,#2C2B28 100%);
}
.cta-strip h2{
  font-family:"Kanit",sans-serif;font-weight:600;font-size:clamp(22px,2.4vw,32px);
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cta-strip p{margin-top:14px;color:#C6C6C4;font-size:16px}
.cta-strip .btn{margin-top:26px}

/* ---------- ภาพ + ข้อความสองคอลัมน์ ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split .txt h2{font-family:"Kanit",sans-serif;font-weight:600;font-size:clamp(22px,2.3vw,31px);line-height:1.35;color:#151515;margin-bottom:16px}
.split .txt p{font-size:15.5px;line-height:1.95;color:#2E2E2E;margin-bottom:14px}
.split .pic{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.split .pic img{width:100%}
.split.rev .txt{order:2}

@media (max-width:960px){
  .cards.c4,.cards.c3{grid-template-columns:repeat(2,1fr)}
  .stats,.steps{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .split{grid-template-columns:1fr;gap:28px}
  .split.rev .txt{order:0}
  .page-hero{min-height:290px;padding:120px 0 50px}
}
@media (max-width:620px){
  .cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gitem.wide{grid-column:span 1;aspect-ratio:4/3}
  .sec{padding:56px 0}
  .form{padding:24px 20px}
  .frow{grid-template-columns:1fr;gap:0}
  .stats,.steps{grid-template-columns:1fr}
}

/* ---------- โรงงาน (ภาพมุมสูง) ---------- */
.plant{position:relative;overflow:hidden;display:flex;align-items:center;min-height:560px;background:#0E0D0C;
  border-top:1px solid rgba(201,150,44,.4);border-bottom:1px solid rgba(201,150,44,.4)}
.plant-bg{position:absolute;inset:0;z-index:1;background:url("img/factory-aerial.jpg") center 42%/cover no-repeat;
  transform:scale(1.08);transition:transform 2s var(--ease)}
.plant.in .plant-bg{transform:scale(1)}
.plant-veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(92deg,rgba(9,9,8,.94) 0%,rgba(11,11,10,.9) 26%,rgba(13,13,12,.7) 44%,rgba(15,15,14,.28) 62%,rgba(15,15,14,.05) 78%),
             linear-gradient(180deg,rgba(9,9,8,.55) 0%,transparent 26%,transparent 74%,rgba(9,9,8,.6) 100%)}
.plant .wrap{position:relative;z-index:3}
.plant-text{max-width:600px;padding:70px 0}
.plant-text .kicker{font-size:12.5px;letter-spacing:4.6px;color:var(--gold-300);font-weight:500;margin-bottom:14px}
.plant-text h2{font-family:"Kanit","Prompt",sans-serif;font-weight:600;font-size:clamp(24px,2.8vw,38px);line-height:1.3;color:#F4F4F2}
.plant-text p{margin-top:20px;font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.95;color:#D6D6D4}
.plant-text .btn{margin-top:30px}
.cinfo.cinfo-2{grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:960px){
  .plant{min-height:440px}
  .plant-veil{background:linear-gradient(92deg,rgba(9,9,8,.95) 0%,rgba(11,11,10,.88) 45%,rgba(13,13,12,.6) 100%)}
  .cinfo.cinfo-2{grid-template-columns:1fr}
}
@media (max-width:620px){.plant-text{padding:50px 0}}

/* ---------- บล็อกโรงงานแบบสองคอลัมน์ (ภาพคมเต็มความละเอียด) ---------- */
.plant2 .split{grid-template-columns:1fr 1.15fr;gap:52px}
.plant2 .txt .kicker{font-size:12.5px;letter-spacing:4.6px;color:#96660A;font-weight:500;margin-bottom:12px}
.plant2 .txt h2{font-family:"Kanit","Prompt",sans-serif;font-weight:600;font-size:clamp(23px,2.4vw,33px);line-height:1.34;color:#141414;margin-bottom:18px}
.plant2 .txt p{font-size:15.5px;line-height:1.95;color:#2E2E2E;margin-bottom:14px}
.plant-pic{
  position:relative;margin:0;border-radius:14px;overflow:hidden;
  border:1px solid rgba(201,150,44,.5);
  box-shadow:0 20px 46px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.plant-pic img{width:100%;display:block;transition:transform 1.1s var(--ease)}
.plant-pic:hover img{transform:scale(1.04)}
.plant-pic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 20px 15px;
  font-size:13.5px;color:#F2EFE6;
  background:linear-gradient(180deg,transparent,rgba(10,9,8,.82));
}
@media (max-width:960px){.plant2 .split{grid-template-columns:1fr;gap:28px}}

/* =============================================================
   ขนาดรูปพอดีตา + Lightbox (กดแล้วขยาย)
   ============================================================= */
.gallery{max-width:1120px;margin:0 auto;grid-template-columns:repeat(3,1fr);gap:14px}
.gitem{aspect-ratio:4/3;border-radius:12px}
.gitem.wide{grid-column:span 2;aspect-ratio:8/5}
.gitem figcaption{padding:32px 16px 13px;font-size:12.5px}
.gitem figcaption b{font-size:14.5px}

/* ไอคอนแว่นขยายบอกว่ากดดูภาพใหญ่ได้ */
.zoomable{cursor:zoom-in}
.zoomable::before{
  content:"";position:absolute;right:12px;top:12px;z-index:5;width:34px;height:34px;border-radius:50%;
  background:rgba(14,13,12,.62) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23EACB72' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6M11 8v6M8 11h6'/></svg>") center/18px no-repeat;
  border:1px solid rgba(201,150,44,.55);
  opacity:0;transform:scale(.85);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.zoomable:hover::before{opacity:1;transform:none}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,7,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  padding:74px 78px;
}
.lb.open{opacity:1;visibility:visible}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-img{
  max-width:min(1000px,100%);max-height:calc(100dvh - 190px);width:auto;height:auto;
  border-radius:10px;border:1px solid rgba(201,150,44,.5);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  transform:scale(.94);opacity:0;transition:transform .38s var(--ease),opacity .38s var(--ease);
}
.lb.open .lb-img{transform:none;opacity:1}
.lb-cap{
  font-size:14.5px;color:#E9E4D6;text-align:center;max-width:760px;line-height:1.7;
}
.lb-cap b{
  display:block;font-family:"Kanit",sans-serif;font-weight:500;font-size:17px;margin-bottom:3px;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lb-btn{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:50px;height:50px;border:1px solid rgba(201,150,44,.5);border-radius:50%;
  background:rgba(20,19,18,.8);color:var(--gold-200);
  transition:background .25s,transform .25s var(--ease),border-color .25s;
}
.lb-btn:hover{background:rgba(201,150,44,.9);color:#241802;transform:scale(1.06);border-color:transparent}
.lb-close{top:22px;right:22px}
.lb-prev{left:22px;top:50%;margin-top:-25px}
.lb-next{right:22px;top:50%;margin-top:-25px}
.lb-count{
  position:absolute;left:0;right:0;bottom:24px;text-align:center;
  font-size:13px;letter-spacing:2px;color:#9C978A;
}
body.lb-lock{overflow:hidden}

@media (max-width:960px){
  .gallery{grid-template-columns:repeat(2,1fr);gap:12px}
  .gitem.wide{grid-column:span 2;aspect-ratio:16/10}
  .lb{padding:64px 14px 70px}
  .lb-btn{width:44px;height:44px}
  .lb-close{top:14px;right:14px}
  .lb-prev{left:10px}
  .lb-next{right:10px}
  .lb-img{max-height:calc(100dvh - 210px)}
  .lb-cap{font-size:13.5px}
  .lb-cap b{font-size:15.5px}
  .zoomable::before{opacity:.9;transform:none;width:30px;height:30px;background-size:16px}
}
@media (max-width:620px){
  .gallery{grid-template-columns:1fr}
  .gitem,.gitem.wide{grid-column:span 1;aspect-ratio:4/3}
}


/* =============================================================
   วิดีโอ — เวทีหลัก / การ์ด / ตัวกรอง / ป๊อปอัปเล่นวิดีโอ
   ============================================================= */

/* ---------- เวทีวิดีโอแนะนำ ---------- */
.vstage{
  position:relative;margin:0 auto;max-width:1000px;aspect-ratio:16/9;overflow:hidden;
  border-radius:18px;background:#0B0A09;border:1px solid rgba(201,150,44,.5);
  box-shadow:0 26px 64px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.vstage>img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.vstage:not(.is-empty):hover>img{transform:scale(1.045)}
.vstage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,7,.18) 0%,rgba(8,8,7,.05) 38%,rgba(8,8,7,.88) 100%);
}
.vstage figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:52px 30px 26px;color:#F1EEE6}
.vstage figcaption b{
  display:block;font-family:"Kanit",sans-serif;font-weight:600;font-size:clamp(18px,2vw,25px);line-height:1.35;
  margin:10px 0 7px;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vstage figcaption>span:last-child{display:block;font-size:14.5px;line-height:1.8;color:#D9D6CE;max-width:640px}
.vstage.playing::after,.vstage.playing figcaption{display:none}
.vstage .vplayer{position:absolute;inset:0;z-index:4}

/* ---------- ปุ่มเล่น ---------- */
.vplay{
  position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
  width:66px;height:66px;border:0;border-radius:50%;display:grid;place-items:center;padding:0;
  background:var(--gold-btn);color:#33230A;
  box-shadow:0 14px 34px rgba(198,146,20,.5), inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.vplay.big{width:88px;height:88px}
.vplay svg{width:26px;height:26px;margin-left:3px}
.vplay.big svg{width:34px;height:34px;margin-left:4px}
.vplay::before{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  border:1px solid rgba(240,213,132,.6);animation:vpulse 2.8s var(--ease) infinite;
}
@keyframes vpulse{0%{transform:scale(.86);opacity:.85}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}
.vstage:hover .vplay,.vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.09);box-shadow:0 20px 44px rgba(198,146,20,.68), inset 0 1px 0 rgba(255,255,255,.9)}
.vplay:focus-visible{outline:3px solid var(--gold-200);outline-offset:4px}

/* ---------- สถานะ "ยังไม่มีไฟล์วิดีโอ" ---------- */
.vsoon{display:none}
.is-empty .vplay{display:none}
.is-empty>img,.is-empty .vthumb img{filter:grayscale(.35) brightness(.82)}
.is-empty .vsoon{
  display:inline-flex;align-items:center;gap:8px;
  position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
  padding:11px 22px;border-radius:999px;white-space:nowrap;
  background:rgba(14,13,12,.78);border:1px dashed rgba(201,150,44,.75);
  color:var(--gold-200);font-size:13.5px;letter-spacing:1.2px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.is-empty .vsoon::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--gold-400);box-shadow:0 0 0 4px rgba(201,150,44,.25);
}
.vstage.is-empty,.vcard.is-empty .vthumb{cursor:default}

/* ---------- ตัวกรองหมวด ---------- */
.vfilter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 34px}
.vchip-btn{
  padding:10px 22px;border-radius:999px;font-size:14.5px;color:#2B2B2B;
  background:rgba(255,255,255,.34);border:1px solid rgba(201,150,44,.45);
  transition:background .28s,color .28s,border-color .28s,transform .28s var(--ease),box-shadow .28s var(--ease);
}
.vchip-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.55)}
.vchip-btn.on{
  background:var(--gold-btn);color:#33230A;font-weight:500;border-color:transparent;
  box-shadow:0 10px 24px rgba(198,146,20,.42), inset 0 1px 0 rgba(255,255,255,.8);
}
.vchip-btn:focus-visible{outline:3px solid rgba(201,150,44,.55);outline-offset:3px}

/* ---------- การ์ดวิดีโอ ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto}
.vcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#E6E7E4,#D2D4D1);
  border:1px solid rgba(201,150,44,.36);border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.vcard::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:5;height:3px;
  background:var(--gold-bar);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.vcard:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,.18);border-color:rgba(201,150,44,.65)}
.vcard:hover::before{transform:scaleX(1)}
.vcard.is-off{display:none}

.vthumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;cursor:pointer}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.vcard:not(.is-empty):hover .vthumb img{transform:scale(1.07)}
.vthumb::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,7,.06),rgba(8,8,7,.5));
  transition:opacity .4s;
}
.vcard:hover .vthumb::after{opacity:.7}
.vdur{
  position:absolute;right:10px;bottom:10px;z-index:3;
  padding:4px 10px;border-radius:6px;font-size:12px;letter-spacing:.6px;
  background:rgba(10,9,8,.8);color:#EDE6D4;border:1px solid rgba(201,150,44,.4);
}
.is-empty .vdur{display:none}

.vbody{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.vchip{
  display:inline-block;align-self:flex-start;margin-bottom:12px;
  padding:5px 14px;border-radius:999px;font-size:11.5px;letter-spacing:2px;
  background:linear-gradient(180deg,#2B2A28,#131211);color:var(--gold-200);
}
.vstage .vchip{background:rgba(201,150,44,.2);border:1px solid rgba(201,150,44,.55)}
.vbody h3{font-family:"Kanit",sans-serif;font-size:18px;font-weight:600;line-height:1.45;color:#151515;margin-bottom:9px}
.vbody p{font-size:14px;line-height:1.8;color:var(--muted)}
.vcount{margin-top:28px;text-align:center;font-size:13.5px;letter-spacing:1px;color:#3A3A3A}

/* ---------- ป๊อปอัปเล่นวิดีโอ ---------- */
.vlb{
  position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;
  padding:74px 24px;background:rgba(8,8,7,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.vlb.open{opacity:1;visibility:visible}
.vlb-box{width:min(1060px,100%);max-height:100%;display:flex;flex-direction:column;gap:16px}
.vlb-frame{
  position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#000;
  border-radius:14px;border:1px solid rgba(201,150,44,.5);
  box-shadow:0 30px 80px rgba(0,0,0,.72);
  transform:scale(.95);opacity:0;transition:transform .38s var(--ease),opacity .38s var(--ease);
}
.vlb.open .vlb-frame{transform:none;opacity:1}
.vlb-frame video,.vlb-frame iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#000}
.vlb-cap{text-align:center;font-size:14.5px;line-height:1.7;color:#DED9CC}
.vlb-cap b{
  display:block;font-family:"Kanit",sans-serif;font-weight:500;font-size:18px;margin-bottom:4px;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}