/* ── ผลงานโปรดักชั่น: รางเลื่อนแนวนอน ──
   คอม 2 ใบต่อจอ · มือถือ 1 ใบกลางจอ โดยมีใบซ้าย-ขวาโผล่จางๆ ให้รู้ว่าเลื่อนต่อได้
   ใช้ scroll-snap เพื่อให้หยุดตรงกลางใบพอดีทั้งลากนิ้วและกดปุ่ม */
.prod-rail{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;justify-content:flex-start;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.prod-rail::-webkit-scrollbar{display:none}
/* คุมขนาดจาก "ความสูงที่จอรับได้" แล้วให้ความกว้างไหลตามสัดส่วน 9:16
   ถ้าตั้งความกว้างเป็นครึ่งคอนเทนเนอร์ (700px) แล้วบังคับ 9:16 การ์ดจะสูง 1,200px ล้นจอ */
.prod-card{position:relative;flex:0 0 auto;scroll-snap-align:center;
    height:min(62vh,560px);aspect-ratio:9/16;
    border-radius:20px;overflow:hidden;background:#0B1220}
.prod-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.8,.2,1)}
/* แถบชื่อแบรนด์เหนือราง — กดเพื่อกระโดดไปคลิปแรกของแบรนด์นั้น
   และไฮไลต์ตามแบรนด์ที่กำลังอยู่ตรงขอบซ้ายของรางขณะเลื่อน
   จงใจไม่บอกจำนวนคลิปต่อแบรนด์ที่ไหนเลย */
.prod-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    margin:0 0 1.15rem;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.prod-chips::-webkit-scrollbar{display:none}
.prod-chip{flex:0 0 auto;border:1px solid rgba(15,27,48,.14);background:rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:#38495F;font-family:'Poppins','Kanit',sans-serif;font-size:12.5px;font-weight:500;
    letter-spacing:.01em;line-height:1;padding:.55rem .95rem;border-radius:9999px;cursor:pointer;
    white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease}
.prod-chip:hover{border-color:rgba(45,77,177,.4);color:#23408F}
.prod-chip.is-on{background:#2C4CAA;border-color:#2C4CAA;color:#fff}
/* เดิมซ่อนปุ่มไว้จนกว่าการ์ดจะถูกทำเครื่องหมายว่ากำลังเล่น (.is-live)
   ผลคือปุ่มกดได้แต่มองไม่เห็น คนใช้จึงคิดว่าคลิปไม่มีเสียง — โชว์ตลอดดีกว่า
   เปิดเสียงอยู่ให้พื้นทึบขึ้นเฉย ๆ ไม่เปลี่ยนเป็นสีน้ำเงิน ตัวไอคอนบอกสถานะแทน */
/* ปุ่มเล่น/หยุด วางคู่กับปุ่มเสียง — สคริปต์เป็นคนสร้างปุ่มนี้ */
.prod-play{position:absolute;top:9px;right:47px;z-index:3;width:32px;height:32px;
    border-radius:9999px;border:0;cursor:pointer;display:flex;align-items:center;
    justify-content:center;color:#fff;background:rgba(9,16,32,.5);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 2px 10px rgba(9,16,32,.3);transition:background .2s ease}
.prod-play svg{width:15px;height:15px}
.prod-play:active{background:rgba(9,16,32,.72)}
/* การ์ดที่คลิปไม่มีเสียงไม่มีปุ่มเสียง ปุ่มเล่นจึงเลื่อนมาชิดขวาแทน */
.prod-card:not(:has(.prod-mute)) .prod-play{right:9px}
@media(max-width:767px){.prod-play{top:8px;right:43px;width:29px;height:29px}
    .prod-play svg{width:14px;height:14px}
    .prod-card:not(:has(.prod-mute)) .prod-play{right:8px}}
.prod-mute{position:absolute;top:9px;right:9px;z-index:3;width:32px;height:32px;
    border-radius:9999px;border:0;cursor:pointer;display:flex;align-items:center;
    justify-content:center;color:#fff;background:rgba(9,16,32,.5);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 2px 10px rgba(9,16,32,.3);transition:background .2s ease}
.prod-mute svg{width:15px;height:15px}
.prod-mute:active{background:rgba(9,16,32,.72)}
.prod-mute.is-on{background:rgba(9,16,32,.72)}
@media(max-width:767px){.prod-mute{top:8px;right:8px;width:29px;height:29px}
    .prod-mute svg{width:14px;height:14px}}
@media(min-width:768px){
    /* เดิมเว้นซ้ายไว้เกือบ 300px เพื่อจัดการ์ดใบเดียวให้อยู่กลางจอ
       ตอนนี้รางเป็นคลิปเรียงยาว การเว้นแบบนั้นคือที่ว่างเปล่า ๆ
       ให้เริ่มชิดขอบเนื้อหาเท่ากับแถบชื่อแบรนด์ด้านบน */
    .prod-rail{padding-left:0;padding-right:2rem}
}
.prod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}
/* ปุ่มเลื่อนอยู่ข้างรางไปเลย ไม่ใช่มุมบนขวา — มือจะได้อยู่ใกล้ของที่กำลังดู
   .prod-stage เป็นกรอบอ้างอิงให้ปุ่มลอยทาบขอบซ้าย-ขวาของราง */
.prod-stage{position:relative}
.prod-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
    width:44px;height:44px;border-radius:999px;border:1px solid #D9DFEA;background:#fff;
    display:none;align-items:center;justify-content:center;color:#2C4CAA;cursor:pointer;
    box-shadow:0 10px 28px -12px rgba(15,27,48,.45);
    transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease}
@media(min-width:768px){.prod-arrow{display:flex}}
.prod-arrow-l{left:-14px}
.prod-arrow-r{right:-14px}
@media(min-width:1280px){.prod-arrow-l{left:-20px}.prod-arrow-r{right:-20px}}
.prod-arrow:hover{background:#2C4CAA;border-color:#2C4CAA;color:#fff}
.prod-arrow[disabled]{opacity:0;pointer-events:none}
/* แถบเลื่อนเวลา — ซ่อนไว้จนกว่าเมาส์จะมาอยู่บนการ์ด หรือนิ้วแตะการ์ดนั้น */
.prod-seek{position:absolute;left:11px;right:11px;bottom:9px;z-index:4;
    width:calc(100% - 22px);height:18px;margin:0;padding:0;background:transparent;
    -webkit-appearance:none;appearance:none;cursor:pointer;
    opacity:0;transition:opacity .22s ease}
.prod-card:hover .prod-seek,.prod-card.is-scrub .prod-seek,.prod-seek:focus-visible{opacity:1}
.prod-seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;
    background:linear-gradient(to right,#fff 0 var(--p,0%),rgba(255,255,255,.34) var(--p,0%) 100%)}
.prod-seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;
    border-radius:50%;background:#fff;margin-top:-4px;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.prod-seek::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.34)}
.prod-seek::-moz-range-progress{height:3px;border-radius:2px;background:#fff}
.prod-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}
@media(max-width:767px){
    /* กินเต็มขอบจอเพื่อให้ใบข้างๆ โผล่ได้จริง */
    .prod-rail{gap:12px;margin-left:-1.15rem;margin-right:-1.15rem;width:calc(100% + 2.3rem);
        padding-left:14vw;padding-right:14vw;
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
        mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
    .prod-card{flex:0 0 72vw}
}