/* ===== เบื้องหลังในสตูดิโอ: กองภาพโพลารอยด์ + ภาพค่อย ๆ เปลี่ยน ===== */
.btssec,.filmsec{padding-block:44px}
.btsgrid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;
 padding:clamp(28px,4vw,56px) clamp(22px,4vw,64px);border-radius:24px;border:1px solid #ead9cf;overflow:hidden;
 background:radial-gradient(60% 80% at 80% 40%,#fff8f2,transparent 70%),
  repeating-linear-gradient(0deg,#e7d3c71f 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,#e7d3c71f 0 1px,transparent 1px 34px),#f6ece5}
.btscopy{max-width:460px}
.btscopy h2{font-size:clamp(26px,2.4vw,38px);margin:10px 0 12px}
.btscopy>p{color:#62464a;margin:0 0 30px}
.btsnow{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.btsnum{font:italic 500 clamp(44px,4.4vw,64px)/1 Georgia,"Times New Roman",serif;color:#94603f;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.btstotal{font:500 14px/1 Georgia,serif;color:#a98a7e;letter-spacing:.1em}
.btslabel{margin:0 0 16px;font-size:17px;font-weight:600;color:#38282a;min-height:1.6em;transition:opacity .4s}
.btslabel.fade{opacity:0}
.btsline{position:relative;height:2px;background:#e3cfc4;border-radius:2px;overflow:hidden;margin-bottom:18px;max-width:320px}
.btsline i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#94603f,#c99158)}
.btsline i.run{animation:btsfill var(--dur,4.5s) linear forwards}
.btsgrid.paused .btsline i.run{animation-play-state:paused}
@keyframes btsfill{to{width:100%}}
.btsctrl{display:flex;gap:8px}
.btsctrl button{width:42px;height:42px;border-radius:50%;border:1.5px solid #c9a99b;background:#fff9;color:#7d4a3f;font-size:17px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btsctrl button:hover{background:#7d4a3f;border-color:#7d4a3f;color:#fff}
.btsstack{position:relative;height:clamp(380px,36vw,500px);width:100%;max-width:520px;justify-self:center}
.bp{position:absolute;top:50%;left:50%;margin:0;padding:10px 10px 42px;background:#fffdfb;border-radius:4px;box-shadow:0 2px 4px #7d4a3f1a,0 22px 44px -22px #7d4a3f66;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bp .ph{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#eadcd3}
.bp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s ease}
.bp-front{z-index:3;width:clamp(220px,20vw,290px);transform:translate(-50%,-50%) rotate(-2deg)}
.bp-front img.hide{opacity:0}
.bp-front figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:baseline;font:italic 13px/1 Georgia,serif;color:#6a4f49}
.bp-front figcaption b{font:600 10px/1 PlexThai,Tahoma,sans-serif;letter-spacing:.18em;color:#94603f;font-style:normal}
.bp-back{z-index:1;width:clamp(180px,16vw,230px);opacity:.92}
.bp-back.l{transform:translate(-112%,-46%) rotate(-9deg)}
.bp-back.r{transform:translate(12%,-54%) rotate(7deg)}
.bp-back img{filter:saturate(.85)}
.btsstack:hover .bp-back.l{transform:translate(-118%,-46%) rotate(-11deg)}
.btsstack:hover .bp-back.r{transform:translate(18%,-54%) rotate(9deg)}
.btstape{position:absolute;z-index:4;top:-12px;left:50%;width:86px;height:24px;margin-left:-43px;transform:rotate(-3deg);background:#f3dcc6b3;box-shadow:0 1px 2px #7d4a3f22}
@media(max-width:860px){
 .btsgrid{grid-template-columns:1fr;gap:20px}
 .btscopy{max-width:none}
 .btscopy>p{margin-bottom:18px}
 .btsstack{height:380px;order:2}
 .bp-front{width:220px}.bp-back{width:170px}
 .bp-back.l{transform:translate(-100%,-46%) rotate(-9deg)}
 .bp-back.r{transform:translate(0%,-54%) rotate(7deg)}
 .filmpanel{grid-template-columns:1fr}
 .film{flex-basis:58%}
 .filmnav{display:none}
}
@media(prefers-reduced-motion:reduce){.bp img,.bp{transition:none}.btsline{display:none}}

.filmpanel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(22px,3vw,48px);align-items:center;
 padding:clamp(22px,3vw,40px);border-radius:24px;color:#fdf9f7;
 background:radial-gradient(60% 90% at 0 0,#4f2e32,transparent 70%),radial-gradient(50% 80% at 100% 100%,#d4a37326,transparent 70%),#2b1a1d;
 box-shadow:0 30px 70px -40px #2b1a1d}
.filmpanel .eyebrow{color:#e7b98f}
.filmhead p{color:#e9d9d3;margin:0 0 18px;max-width:360px}
.filmnav{display:flex;gap:8px}
.filmnav button{width:42px;height:42px;border-radius:50%;border:1.5px solid #d4a373;background:#ffffff10;color:#fff6ec;font-size:18px;line-height:1;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.filmnav button:hover{background:#d4a373;color:#2b1a1d}
.filmnav button:disabled{opacity:.35;cursor:default;background:#ffffff10;color:#fff6ec}
.filmtrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:#d4a37388 transparent;
 -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.filmtrack.atend{-webkit-mask-image:none;mask-image:none}
.film{flex:0 0 clamp(170px,19vw,232px);scroll-snap-align:start;margin:0}
.filmbox{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#3d2629;box-shadow:0 0 0 1px #ffffff1f,0 18px 36px -20px #000}
.filmbox video,.filmbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmbox{cursor:pointer}.filmplay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;background:linear-gradient(180deg,transparent 55%,#000a)}
.filmplay span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff6ecdd;color:#2b1a1d;box-shadow:0 8px 24px #0006;transition:transform .2s}
.filmbox:hover .filmplay span{transform:scale(1.08)}
.filmplay svg{width:20px;height:20px;margin-left:3px}
.film.playing .filmplay{display:none}
.film figcaption{margin-top:10px;font-size:13.5px;line-height:1.45;color:#f3e6df}
.film figcaption small{display:block;color:#c9a99b;font-size:11px;letter-spacing:.12em}
.filmsoon{position:absolute;top:10px;left:10px;z-index:3;padding:3px 9px;border-radius:999px;background:#d4a373;color:#2b1a1d;font-size:11px;font-weight:600}

/* การ์ดภาพตัวอย่าง + วิดีโอเต็มกลางจอ */
button.filmbox{display:block;width:100%;padding:0;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.filmbox img{transition:transform .5s ease,filter .3s}
.filmbox:hover img,.filmbox:focus-visible img{transform:scale(1.05);filter:brightness(1.05)}
.filmbox:focus-visible{outline:2px solid #d4a373;outline-offset:3px}
.filmtag{position:absolute;right:10px;bottom:10px;z-index:3;padding:4px 10px;border-radius:999px;background:#fff6ece6;color:#2b1a1d;font-size:11.5px;font-weight:600}
.filmmodal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px 72px;background:#140c0ee6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .25s}
.filmmodal.show{opacity:1}
.filmmodal[hidden]{display:none}
.fmstage{display:flex;flex-direction:column;align-items:center;gap:12px;transform:scale(.96);transition:transform .25s}
.filmmodal.show .fmstage{transform:none}
.fmvideo{display:block;height:min(82vh,960px);width:auto;max-width:calc(100vw - 48px);aspect-ratio:9/16;border-radius:18px;background:#000;box-shadow:0 30px 80px #000a}
.fmcap{color:#fff6ec;text-align:center;font-size:15px;line-height:1.4}
.fmcap small{display:block;color:#d4a373;font-size:11px;letter-spacing:.14em}
.fmclose,.fmnav{position:absolute;border:1.5px solid #ffffff55;background:#ffffff14;color:#fff;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.fmclose:hover,.fmnav:hover{background:#d4a373;color:#2b1a1d;border-color:#d4a373}
.fmclose{top:18px;right:18px;width:46px;height:46px;font-size:26px;line-height:1}
.fmnav{top:50%;width:52px;height:52px;margin-top:-26px;font-size:30px;line-height:1}
.fmprev{left:18px}.fmnext{right:18px}
html.fmopen{overflow:hidden}
@media(max-width:620px){.filmmodal{padding:60px 12px 20px}.fmvideo{height:min(74vh,960px)}.fmnav{top:auto;bottom:18px;margin:0;width:44px;height:44px}.fmprev{left:calc(50% - 56px)}.fmnext{right:calc(50% - 56px)}.fmcap{margin-bottom:56px}}


/* ปัดด้วยนิ้วในมือถือ */
.btsstack{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.btsstack .bp-front{transition:translate .28s cubic-bezier(.2,.7,.2,1)}
.btsstack.dragging .bp-front{transition:none}