/* =========================================================
   หน้าแรกตามแบบ webex2.svg
   ใช้ร่วมกับ style.css (ตัวแปรสี/nav/footer/lightbox)
   ========================================================= */

:root{
  --font:"Prompt","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:var(--font);
  --red:#c40000;
  --gold:#d7bf7a;
}
body{font-family:var(--font);font-weight:400}
h1,h2,h3{font-weight:500;letter-spacing:-.01em}
.script{font-family:var(--font-script)}

/* ---------- ปุ่ม ---------- */
.btn-red,.btn-line{display:block;width:100%;padding:17px 20px;text-align:center;text-decoration:none;font-weight:500;font-size:clamp(15px,1.25vw,17px);line-height:1.3;transition:filter .3s,background .3s,color .3s;cursor:pointer}
.btn-red{color:#fff;border:0;background:linear-gradient(180deg,#d40000 0,#8a0000 100%)}
.btn-red:hover{filter:brightness(1.18)}
.btn-line{background:#000;color:#fff;border:1.5px solid #fff}
.btn-line:hover{background:#fff;color:#000}

/* ---------- nav (แบบ webex2: โลโก้ซ้าย · แถบเมนูกลาง · ปุ่มลงทะเบียนขวา) ---------- */
.nav{gap:24px;padding:14px clamp(20px,3.2vw,44px)}
.nav-logo img{height:clamp(40px,4.6vw,62px);width:auto}
.nav-links{margin:0 auto;gap:clamp(18px,2.4vw,40px);padding:0 clamp(20px,2.4vw,40px);background:rgba(60,60,60,.62);height:54px;align-items:center}
.nav-links a{font-size:clamp(13px,1.15vw,16px);letter-spacing:0;text-transform:none;opacity:.92}
.nav-cta{padding:14px 30px;border-radius:0;border:2px solid rgba(255,255,255,.4);font-size:15px;letter-spacing:0;text-transform:none;background:rgba(0,0,0,.35)}
.nav.scrolled .nav-links{background:rgba(40,40,40,.7)}
@media (max-width:720px){
  .nav-links{height:auto;padding:0;background:rgba(0,0,0,.96)}
  .nav-cta{padding:9px 16px;font-size:13px}
}

/* ---------- 1. ส่วนบน (webnew3): แถวภาพอยู่บนสุด เลื่อนลงแล้วกระจายรอบโลโก้ → ข้อความ · วิดีโอพื้นหลังต่อเนื่อง ---------- */
.top3{position:relative;isolation:isolate;background:#000}
.top3-bg{position:absolute;inset:0;z-index:-1;overflow:clip}
.top3-video{position:sticky;top:0;display:block;width:100%;height:100svh;object-fit:cover;filter:blur(5px) brightness(.8);transform:scale(1.05)}
.hero2{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(60px,8vw,130px) 0 clamp(110px,13vw,220px);background:linear-gradient(180deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.55) 45%,#000 96%)}
.hero2-copy{padding:0 var(--gutter)}
.hero2-copy h1{margin:0;font-weight:500;font-size:clamp(34px,6.4vw,92px);line-height:1.1}
.hero2-copy p{margin:clamp(24px,3vw,44px) auto 0;font-weight:300;font-size:clamp(15px,1.75vw,24px);line-height:1.6;color:#f0f0f0}

/* ---------- 2. แถว → กระจายเป็นพื้นหลังโลโก้ ---------- */
.cl{position:relative;height:320vh;z-index:2;pointer-events:none}
.cl-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:rgba(0,0,0,var(--veil,1))}
.cl-piece,.cl-logo{position:absolute;left:0;top:0;max-width:none;will-change:transform,width,height;user-select:none}
.cl-logo{opacity:0;z-index:5}
/* โลโก้เปิดหน้า: เห็นก่อน แล้วค่อยจางออกตามการเลื่อน (ควบคุมด้วย home2.js) */
.cl-intro{position:absolute;left:50%;top:50%;z-index:6;width:min(74vw,560px);height:auto;transform:translate(-50%,-50%);will-change:transform,opacity;pointer-events:none;user-select:none}
@media (prefers-reduced-motion:reduce){.cl-intro{display:none}}
.cl-piece>img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover}
/* แสงเรืองหลังภาพ: ใช้รูปเดียวกันเป็น mask (ตามรูปทรงเฉียงของภาพ) + ไล่สี + blur ให้ฟุ้งออกด้านข้าง */
.cl-glow{position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(25px);opacity:.4;transition:filter .6s ease-out,opacity .6s ease-out}
.cl-glow::before{content:"";position:absolute;inset:-8% -16%;background:var(--glow);
  -webkit-mask:var(--src) center/100% 100% no-repeat;mask:var(--src) center/100% 100% no-repeat}
.cl-glow.g1{--glow:linear-gradient(135deg,#a855f7,#ec4899,#3b82f6)}
.cl-glow.g2{--glow:linear-gradient(135deg,#ff0055,#ff5500,#ffcc00)}
.cl-piece.active .cl-glow{filter:blur(45px);opacity:.85}
@media (prefers-reduced-motion:reduce){.cl{height:auto}.cl-stage{position:relative}}

/* ---------- 3. เริ่มต้นเส้นทางสู่ความเป็นเลิศ ในแบบที่เป็นคุณ — คอลลาจภาพทั้งหมด (tlb.betteroff.studio) + รายการตัวเลือกใหญ่ (dulcedo.com) ---------- */
.ch{background:#fff;color:#000;padding:0}
.ch-h{margin:0;display:flex;flex-direction:column;align-items:center;font-weight:600;font-size:clamp(22px,4.1vw,64px);line-height:1.12;letter-spacing:-.02em;color:#000}
.ch-h span{display:block;padding:.02em clamp(10px,3vw,40px);color:#000;text-align:center}
/* แถวรูปใต้หัวข้อ (แบบ tlb.betteroff.studio / วิดีโอ "การบันทึก"): หัวข้อค้างอยู่ รูปไหลไปทางซ้ายตามการเลื่อน เอียงตามความเร็ว + ไม้บรรทัดด้านล่าง */
.tl{position:relative;height:100svh}
.tl-stick{position:relative;height:100%;overflow:hidden;background:#fff}
.tl-head{position:absolute;left:0;right:0;top:clamp(86px,13svh,150px);z-index:3;pointer-events:none}
.tl-i{position:absolute;left:0;top:0;margin:0;overflow:hidden;background:#e9e9e9;will-change:transform;backface-visibility:hidden}
.tl-i img{display:block;width:100%;height:100%;object-fit:cover}
.tl-ruler{position:absolute;left:0;right:0;bottom:clamp(14px,3svh,30px);height:34px;z-index:3;font-size:11px;letter-spacing:.06em;color:#000}
.tl-ticks{position:absolute;left:0;right:0;bottom:0;height:9px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0 1px,transparent 1px 9px);background-position-x:var(--tx,0)}
.tl-mark{position:absolute;left:50%;bottom:0;width:2px;height:20px;margin-left:-1px;background:#000}
.tl-l{position:absolute;bottom:16px;left:clamp(14px,2.4vw,34px);font-weight:500}
.ch-list{list-style:none;margin:0 auto;padding:0;text-align:center}
.ch-list li{position:relative}
.ch-list a{display:flex;justify-content:center;align-items:flex-start;gap:.12em;padding:.02em clamp(10px,3vw,40px);color:#000;text-decoration:none;font-weight:600;font-size:clamp(22px,4.1vw,64px);line-height:1.12;letter-spacing:-.02em;text-transform:uppercase;transition:background .25s,color .25s}
.ch-pm{font-size:.26em;line-height:1.7;letter-spacing:0;opacity:0;transition:opacity .25s}
.ch-list li.on a{background:#000;color:#fff}
.ch-list li.on .ch-pm{opacity:1}

/* ---------- 4. กิจกรรมที่กำลังจะมาถึง — กล่องดำ 3 คอลัมน์ + ประเภทการแข่งขันทั้งหมด (พื้นขาว · webnew3) ---------- */
.upcoming{background:#fff;color:#000;padding:clamp(24px,3vw,44px) clamp(14px,2.8vw,38px) clamp(60px,8vw,120px)}
.up-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:stretch;background:#000;color:#fff;padding:0 0 0 clamp(18px,3.4vw,56px)}
.up-box>.up-info,.up-box>.up-when{padding-top:clamp(18px,2.6vw,38px);padding-bottom:clamp(18px,2.6vw,38px)}
.up-info{display:flex;flex-direction:column}
.up-info h2{margin:0;font-size:clamp(26px,3.2vw,48px);line-height:1.15;font-weight:500}
.up-btns{display:grid;gap:14px;margin-top:clamp(24px,3vw,40px)}
.up-btns .btn-line:first-of-type{margin-top:clamp(30px,5vw,80px)}
.up-when{padding-top:clamp(2px,.4vw,8px)}
.up-date{margin:0;font-weight:500;font-size:clamp(22px,2.5vw,38px);line-height:1.3}
.up-venue{margin:clamp(28px,4vw,60px) 0 0;font-weight:500;font-size:clamp(20px,2.5vw,38px);line-height:1.45}
.up-poster{position:relative;display:block;height:clamp(300px,36vw,520px);aspect-ratio:4/5;overflow:hidden;line-height:0;transition:transform .6s var(--ease)}
.up-poster:hover{transform:scale(1.015)}
.up-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.up-cats{padding-top:clamp(48px,6vw,92px)}
.up-cats h2{margin:0;font-weight:600;font-size:clamp(30px,4.2vw,62px);line-height:1.15;letter-spacing:-.01em;color:#000}
.up-cats-sub{margin:.5em 0 0;font-weight:400;font-size:clamp(18px,2.2vw,32px);line-height:1.4}
.up-strip{list-style:none;margin:clamp(24px,3vw,46px) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.up-strip li{overflow:hidden;background:#111}
.up-strip a{position:relative;display:block;color:#fff;text-decoration:none}
.up-strip img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;transition:transform 1s var(--ease)}
.up-strip li:hover img{transform:scale(1.05)}
.up-strip span{position:absolute;left:0;right:0;bottom:0;padding:34px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.88));text-align:left}
.up-strip b{display:block;font-weight:600;font-size:clamp(11px,1vw,14px);line-height:1.3}
.up-strip i{display:block;margin-top:3px;font-style:normal;font-weight:300;font-size:clamp(9px,.78vw,11px);line-height:1.3;color:#e2e2e2}
@media (max-width:980px){
  .up-box{grid-template-columns:1fr;padding-right:clamp(18px,3.4vw,56px)}
  .up-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){.up-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 5. กิจกรรมภายในงาน — เลื่อนลงแล้วหน้าเลื่อนไปทางซ้ายทีละหน้า (แบบ dulcedo.com/history · webnew3) ---------- */
.ev{position:relative;height:calc(var(--n,4) * 120svh);background:#000}
.ev-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.ev-track{display:flex;width:calc(var(--n,4) * 100%);height:100%;will-change:transform}
.evp{--o:0;flex:0 0 calc(100% / var(--n,4));height:100%;padding:clamp(84px,12svh,130px) clamp(18px,5vw,90px) clamp(84px,14svh,130px)}
.evp-inner{position:relative;height:100%;max-width:1240px;margin:0 auto;display:flex;align-items:center}
.evp-pic{position:absolute;top:0;bottom:0;right:0;width:56%;overflow:hidden;background:#111;transform:translate3d(calc(var(--o) * -9%),0,0)}
.evp-flip .evp-pic{left:0;right:auto}
.evp-intro .evp-pic{width:72%}
.evp-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1.1s ease,transform 7s ease-out}
.evp-pic img.on{opacity:1;transform:scale(1)}
.evp-intro .evp-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 24%,rgba(0,0,0,0) 62%)}
.evp-h{position:relative;z-index:2;margin:0;width:40%;font-weight:600;font-size:clamp(24px,3.5vw,56px);line-height:1.3;letter-spacing:-.01em;text-wrap:balance;transform:translate3d(calc(var(--o) * -22%),0,0)}
.evp-flip .evp-h{margin-left:auto}
.evp-intro .evp-h{width:auto;font-size:clamp(38px,6.6vw,104px);line-height:1.12}
.evp-intro .evp-h span{display:block}
.evp-intro .evp-h span+span{margin-left:.8em}
.evp-ruler{position:absolute;left:50%;bottom:clamp(20px,4svh,44px);z-index:3;width:min(calc(100% - 2 * clamp(18px,5vw,90px)),1240px);height:46px;transform:translateX(-50%)}
.evp-ticks{position:absolute;left:0;right:0;bottom:0;height:9px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 1px,transparent 1px 9px)}
.evp-mark{position:absolute;bottom:0;left:var(--mx,48%);width:2px;height:20px;margin-left:-1px;background:#fff}
.evp-lb{position:absolute;left:var(--x);bottom:24px;transform:translateX(-50%);padding:2px 8px;border:0;background:none;font:inherit;font-size:12px;font-weight:500;letter-spacing:.08em;color:#8d8d8d;cursor:pointer;transition:color .3s}
.evp-lb:hover,.evp-lb.act{color:#fff}
@media (max-width:860px){
  .evp-inner{flex-direction:column;justify-content:center;align-items:stretch;gap:20px}
  .evp-pic,.evp-intro .evp-pic,.evp-flip .evp-pic{position:relative;inset:auto;width:100%;flex:0 0 auto;aspect-ratio:3/2;transform:none}
  .evp-h,.evp-flip .evp-h{width:100%;margin:0;transform:none}
  .evp-intro .evp-inner{display:block}
  .evp-intro .evp-h{position:absolute;left:5%;top:30%;transform:translateY(-50%);width:auto}
  .evp-lb{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){.evp-pic img{transition:none;transform:none}.evp-pic,.evp-h{transform:none}}

/* ---------- 6b. ย่อหน้าประสบการณ์บนพื้นขาว ---------- */
.exp-note{background:#fff;color:#000;padding:clamp(52px,7vw,100px) 0}
.exp-note p{margin:0 auto;max-width:980px;text-align:center;font-weight:300;font-size:clamp(16px,1.7vw,23px);line-height:1.75}

/* ---------- 6. ประสบการณ์ที่คุณจะได้รับ — การ์ดขาวเรียงพัด (webnew1) ---------- */
.exp{padding:clamp(70px,9vw,140px) 0 clamp(64px,8vw,120px);text-align:center;overflow:hidden;background:#000}
.exp h2{margin:0;font-size:clamp(30px,4.4vw,62px);line-height:1.2}
.xp{--cw:clamp(150px,19vw,280px);position:relative;height:calc(var(--cw) * 1.62);margin:clamp(34px,5vw,80px) auto 0;overflow:hidden}
.xp-card{position:absolute;left:50%;top:calc(var(--cw) * .04);width:var(--cw);aspect-ratio:3/4.35;margin-left:calc(var(--cw) / -2);border-radius:calc(var(--cw) * .07);overflow:hidden;background:#0c0c0e;transform-origin:50% 165%;
  transform:translateX(calc(var(--o) * var(--cw) * 1.02)) translateY(calc(var(--o) * var(--o) * var(--cw) * .05)) rotate(calc(var(--o) * 8.5deg));
  transition:transform .95s var(--ease),opacity .6s ease;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.xp:not(.in) .xp-card{opacity:0;transform:translateX(0) translateY(calc(var(--cw) * .3)) rotate(0)}
.xp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--c) 0,transparent 46%),linear-gradient(90deg,transparent 55%,rgba(0,0,0,.55) 100%)}
.xp-card figcaption{position:absolute;z-index:1;top:calc(var(--cw) * .07);bottom:calc(var(--cw) * .07);right:calc(var(--cw) * .06);display:flex;align-items:flex-start;writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-weight:700;font-size:clamp(11px,1.02vw,15px);line-height:1.25;text-align:left;max-width:calc(var(--cw) * .5)}
.xp-card figcaption span{display:block}
@media (max-width:720px){.xp{--cw:clamp(120px,36vw,180px)}.xp-card{transform:translateX(calc(var(--o) * var(--cw) * .9)) translateY(calc(var(--o) * var(--o) * var(--cw) * .05)) rotate(calc(var(--o) * 9deg))}}
margin:clamp(44px,6vw,90px) auto 0;max-width:980px;font-weight:300;font-size:clamp(16px,1.7vw,23px);line-height:1.75;color:#f2f2f2}
@media (max-width:720px){.xp{--cw:clamp(118px,33vw,170px);height:calc(var(--cw) * 1.55)}.xp-card{transform:translateX(calc(var(--o) * var(--cw) * .66)) translateY(calc(var(--y) * var(--cw) / 290)) rotate(var(--r))}}

/* ---------- 7. วิดีโอเต็มจอ + รูปไหลซ้าย (แบบ inkedsoul) ---------- */
.vs{position:relative;background:#000}
.vs-stage{position:relative;height:min(100svh,56.25vw);min-height:60svh;overflow:hidden;background:#000;isolation:isolate}
.vs-bgimg{position:absolute;inset:0;z-index:-3}
.vs-bgimg img{width:100%;height:100%;object-fit:cover;opacity:.4;filter:blur(6px)}
.vs-vid{position:absolute;inset:0;z-index:0;overflow:hidden;background:#111}
.vs-vid video{width:100%;height:100%;object-fit:cover;display:block}
.vs-dim{position:absolute;inset:0;z-index:-1;background:#000;opacity:var(--dim,0);pointer-events:none}
.vs-head{position:absolute;left:0;right:0;top:clamp(78px,11vh,130px);z-index:2;margin:0;padding:0 var(--gutter);text-align:center;font-weight:600;font-size:clamp(22px,3.9vw,58px);line-height:1.3;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.vs-row{position:absolute;left:0;right:0;top:46%;z-index:2;overflow:hidden;opacity:var(--ro,0);transform:translateY(calc((1 - var(--ro,0)) * 50px));pointer-events:none}
.vs-track{display:flex;width:max-content;animation:vs-flow 46s linear infinite}
.vs-set{display:flex}
.vs-set img{height:clamp(150px,36vh,360px);width:auto;margin-right:clamp(10px,1.4vw,20px);object-fit:cover;border-radius:6px}
@keyframes vs-flow{to{transform:translateX(-50%)}}
.vs-snd{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(16px,2.4vw,32px);z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff;font:inherit;font-size:13px;cursor:pointer;transition:background .3s}
.vs-snd:hover{background:rgba(0,0,0,.7)}
.vs-snd-ic{width:8px;height:8px;border-radius:50%;background:#7a7a7a;margin-right:2px}
.vs-snd[aria-pressed="true"] .vs-snd-ic{background:#35d07f;box-shadow:0 0 8px #35d07f}
@media (prefers-reduced-motion:reduce){.vs-track{animation:none}}

/* ---------- 7b. ทีมชาติ ---------- */
.teamsec{background:#000}
.team{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(60px,8vw,120px)}
.team h2{margin:0 0 clamp(30px,4vw,60px);font-size:clamp(26px,3.8vw,54px);line-height:1.22;text-align:left}
.team-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
.member{position:relative;display:block;aspect-ratio:3/4.4;overflow:hidden;border-radius:clamp(10px,1.2vw,16px);background:#1b1b1f}
.member img{width:100%;height:100%;object-fit:cover;object-position:center top}
.member::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.member-body{position:absolute;left:clamp(10px,1.1vw,16px);right:8px;bottom:clamp(10px,1.1vw,16px);z-index:1}
.member-name{margin:0;font-weight:600;font-size:clamp(13px,1.3vw,19px);line-height:1.15;text-transform:uppercase}
.member-role{margin:4px 0 0;font-size:clamp(10px,.85vw,12px);font-weight:300;color:#e4e4e4}
.team-link{display:flex;align-items:center;gap:clamp(18px,3.4vw,70px);margin-top:clamp(36px,5vw,70px);text-decoration:none;font-weight:300;font-size:clamp(14px,1.6vw,22px);line-height:1.5}
.team-arrow{flex:0 0 clamp(120px,26vw,380px);height:2px;background:#fff;position:relative;transition:flex-basis .5s var(--ease)}
.team-arrow::after{content:"";position:absolute;right:-1px;top:-6px;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.team-link:hover .team-arrow{flex-basis:clamp(150px,30vw,440px)}


/* ---------- 8. HALL OF FAME (แบบ line-up) ---------- */
.hof{position:relative;padding:0 0 clamp(60px,8vw,110px);background:#000;overflow:hidden}
.hof-strip{position:relative;height:clamp(150px,24vw,330px);overflow:hidden}
.hof-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 20%,#000 98%)}
.hof-strip-track{display:flex;width:max-content;height:100%;animation:hof-flow 90s linear infinite}
.hof-strip img{height:100%;width:auto;flex:0 0 auto;margin-right:4px;object-fit:cover}
@keyframes hof-flow{to{transform:translateX(-50%)}}
.hof-top{margin-top:clamp(-70px,-5vw,-30px);position:relative;z-index:1;text-align:center}
.hof-head h2{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,var(--font);font-weight:700;font-size:clamp(26px,5.6vw,80px);letter-spacing:-.02em;line-height:1}
.hof-head .gold{display:block;margin-top:10px;font-weight:400;font-size:clamp(15px,1.8vw,26px);letter-spacing:.06em;color:var(--gold)}
.hof-present{margin:clamp(26px,3.4vw,48px) 0 clamp(18px,2.4vw,30px);font-size:clamp(10px,1vw,13px);letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.hof-roles{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.hof-roles a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-size:clamp(14px,1.45vw,19px);font-weight:500;letter-spacing:.03em;text-transform:uppercase;opacity:.92;transition:opacity .3s,color .3s}
.hof-roles a:hover{opacity:1;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.hof-strip-track{animation:none}}

/* ---------- 9. ผู้ร่วมวิสัยทัศน์ — โลโก้ไหล 2 แถวสวนทางกัน (webnew3) ---------- */
.partners{border-top:1px solid #3a3a3d;padding:clamp(56px,8vw,110px) 0 clamp(64px,8vw,110px);text-align:center;background:#000;overflow:hidden}
.partners h2{margin:0 0 clamp(30px,4vw,56px);font-weight:400;font-size:clamp(26px,3.6vw,52px)}
.pm{display:grid;gap:clamp(10px,1.2vw,16px)}
.pm-row{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:pm-l 70s linear infinite}
.pm-b{animation-name:pm-r;animation-duration:80s}
.pm:hover .pm-row{animation-play-state:paused}
.pm-row li{flex:0 0 auto;width:clamp(130px,14vw,200px);height:clamp(70px,7vw,100px);margin-right:clamp(10px,1.2vw,16px);display:flex;align-items:center;justify-content:center;padding:10px 18px;background:#0d0d0d;border:1px solid #2b2b2e}
.pm-row li.on-light{background:#fff}
.pm-row img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@keyframes pm-l{to{transform:translateX(-50%)}}
@keyframes pm-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.pm-row{animation:none}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .up-poster{order:-1;height:auto;width:min(100%,420px);margin:0 auto}
  .team-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .hof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .show-row{display:grid;grid-template-columns:repeat(3,1fr)}
  .show-row img{height:34vw}
  .team-link{flex-direction:column;align-items:flex-start;gap:16px}
  .team-arrow{flex-basis:auto;width:60%}
  .exp-stage{height:clamp(260px,78vw,400px)}
}

/* ---------- เลื่อนหน้านุ่มนวล (Lenis) + แถบเมนูบนพื้นขาว ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.nav.on-light{background:rgba(0,0,0,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}

/* ===== blueprint ===== */
.bp{background:#fff;color:#000;padding:clamp(56px,7vw,110px) 0}
.bp-in{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.bp-eye{margin:0;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#c40000}
.bp-h{margin:16px 0 0;font-size:clamp(38px,6.6vw,104px);line-height:1;font-weight:700;letter-spacing:-.03em}
.bp-p{margin:clamp(18px,2.4vw,30px) 0 0;max-width:62ch;font-size:clamp(15px,1.3vw,18px);line-height:1.85;color:#444;font-weight:300}
.bp-roles{list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #000;border-bottom:1px solid #000}
.bp-roles li{border-left:1px solid #d8d8d8}
.bp-roles li:first-child{border-left:0}
.bp-roles a{display:flex;flex-direction:column;gap:6px;height:100%;padding:clamp(18px,2vw,28px) clamp(14px,1.6vw,24px);transition:background .25s,color .25s}
.bp-roles a:hover,.bp-roles a:focus-visible{background:#000;color:#fff}
.bp-roles b{font-size:clamp(18px,1.7vw,24px);font-weight:600}
.bp-roles span{font-size:13.5px;opacity:.7;font-weight:300}
.bp-roles i{font-style:normal;font-size:22px;margin-top:14px;color:#c40000}
@media(max-width:820px){.bp-roles{grid-template-columns:1fr 1fr}.bp-roles li:nth-child(3){border-left:0}.bp-roles li:nth-child(n+3){border-top:1px solid #d8d8d8}}
@media(max-width:480px){.bp-roles{grid-template-columns:1fr}.bp-roles li{border-left:0;border-top:1px solid #d8d8d8}.bp-roles li:first-child{border-top:0}}

/* ===== tilted grid hero (experience) ===== */
.exp{background:#070809}
.tg-cap{list-style:none;padding:0;margin:clamp(20px,3vw,40px) auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,2vw,28px);text-align:left}
.tg-cap li{border-top:1px solid rgba(255,255,255,.28);padding-top:14px;font-size:clamp(13px,1.1vw,15px);line-height:1.6;font-weight:300;color:#e8e8e8}
.tg-cap b{display:block;color:#ff4b24;font-size:13px;letter-spacing:.14em;margin-bottom:6px}
@media(max-width:900px){.tg-cap{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tg-cap{grid-template-columns:1fr}}
.bp a{text-decoration:none;color:inherit}

/* tilted grid hero (ported from TiltedGridHero) */
.tg{position:relative;height:clamp(380px,50vw,620px);margin-top:clamp(10px,2vw,30px);overflow:hidden;container-type:size}
.tg-band{position:absolute;inset:0;pointer-events:none;transition:opacity .5s}
.tg-tile{position:absolute}
.tg-sl{position:absolute;top:0;overflow:hidden;background:#161718}
.tg-sl img{position:absolute;top:0;max-width:none;object-fit:cover;display:block}
/* nav: ดำทึบ */
.nav,.nav.scrolled,.nav.solid,.nav.on-light{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid #1d1d1d}
.nav-links,.nav.scrolled .nav-links{background:transparent}
.nav-cta{background:transparent}
@media(max-width:900px){.nav-links,.nav.scrolled .nav-links{background:#000}}
/* blueprint heading: ตัวพิมพ์ใหญ่ทั้งหมด */
.bp-h{text-transform:uppercase}

.up-more{margin:clamp(18px,2.4vw,32px) 0 0;text-align:center}
.up-more a{display:inline-block;color:#000;font-size:clamp(14px,1.2vw,17px);border-bottom:1px solid rgba(0,0,0,.5);padding-bottom:4px;text-decoration:none}
.up-more a:hover{border-color:#000}

/* ===== หัวข้อรองใต้ Local stages (บรรทัดเดียว) ===== */
.bp-sub{margin:clamp(14px,1.8vw,24px) 0 0;font-size:clamp(15px,4vw,24px);font-weight:500;line-height:1.4;white-space:nowrap;color:#000}

/* ===== การ์ด 4 ช่อง (แบบ carousel) ===== */
.hl{margin-top:clamp(30px,4vw,56px)}
.hl-track{list-style:none;margin:0 calc(-1 * clamp(16px,4vw,56px));padding:4px clamp(16px,4vw,56px) 10px;display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,4vw,56px);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hl-track::-webkit-scrollbar{display:none}
.hl-card{flex:0 0 auto;width:clamp(264px,78vw,330px);scroll-snap-align:start}
.hl-card a{position:relative;display:block;aspect-ratio:11/16;border-radius:20px;overflow:hidden;background:#111;color:#fff}
.hl-card a::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.45) 34%,rgba(0,0,0,0) 62%)}
.hl-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hl-card a:hover img,.hl-card a:focus-visible img{transform:scale(1.05)}
.hl-txt{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,26px)}
.hl-txt b{font-size:clamp(26px,7.2vw,34px);font-weight:700;line-height:1.05;text-transform:uppercase;letter-spacing:0}
.hl-txt>span{font-size:clamp(15px,4vw,16.5px);font-weight:400;line-height:1.55;color:rgba(255,255,255,.94)}
.hl-go{position:absolute;right:clamp(16px,1.8vw,22px);bottom:clamp(16px,1.8vw,22px);z-index:2;width:44px;height:44px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-style:normal;font-size:20px;line-height:1;transition:transform .3s}
.hl-card a:hover .hl-go,.hl-card a:focus-visible .hl-go{transform:rotate(45deg)}
.hl-ctl{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.hl-ctl[hidden]{display:none}
.hl-btn{width:44px;height:44px;border-radius:50%;border:1px solid #000;background:#fff;color:#000;font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.hl-btn:disabled{opacity:.3;cursor:default}
@media(min-width:900px){.hl-card{width:calc((100% - 3 * clamp(14px,1.6vw,24px)) / 4)}}

/* ===== HALL OF FAME: การ์ดคน (แบบ team-02) ===== */
.tm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(40px,5vw,72px);text-align:left}
.tm-card a{display:flex;flex-direction:column;gap:14px;color:#fff;text-decoration:none}
.tm-pic{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#0d0d10}
.tm-pic img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .7s ease}
.tm-card a:hover .tm-pic img,.tm-card a:focus-visible .tm-pic img{transform:scale(1.05)}
.tm-pic::after{content:"";position:absolute;inset:0;background:rgba(3,7,18,.5);opacity:0;transition:opacity .3s}
.tm-card a:hover .tm-pic::after,.tm-card a:focus-visible .tm-pic::after{opacity:1}
.tm-go{position:absolute;right:16px;bottom:16px;z-index:2;width:44px;height:44px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:20px;line-height:1;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.tm-card a:hover .tm-go,.tm-card a:focus-visible .tm-go{opacity:1;transform:none}
@media (hover:none){.tm-go{opacity:1;transform:none;width:38px;height:38px;right:12px;bottom:12px;font-size:17px}}
.tm-soon{display:grid;place-items:center;text-align:center;background:linear-gradient(160deg,#15110a,#0a0a0a 60%);border:1px solid rgba(215,191,122,.35)}
.tm-soon em{font-style:normal;font-size:clamp(15px,1.5vw,18px);line-height:1.6;letter-spacing:.06em;color:var(--gold)}
.tm-name{display:block;font-size:clamp(18px,1.6vw,22px);font-weight:500;line-height:1.25}
.tm-role{display:block;margin-top:-8px;font-size:clamp(14px,1.2vw,15px);color:var(--muted)}
@media (max-width:1000px){.tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== หมวดตัวเลือก: เลื่อนเต็มจอ ภาพพื้นหลังสลับตามตัวเลือก (แบบ full-screen-scroll-fx) ===== */
.fxs{position:relative;height:calc(100svh + var(--n) * 90svh);background:#000;color:#fff}
.fxs-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.fxs-bgs{position:absolute;inset:0;background:#000}
.fxs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .8s ease,transform 1.2s ease}
.fxs-bg.on{opacity:1;transform:scale(1)}
.fxs-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.45) 45%,rgba(0,0,0,.65))}
.fxs-l,.fxs-r,.fxs-t{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.fxs-grid{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;column-gap:clamp(12px,2vw,32px);padding:0 clamp(18px,4vw,64px)}
.fxs-left,.fxs-right{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}
.fxs-right{align-items:flex-end}
.fxs-l{background:none;border:0;padding:0 0 0 18px;position:relative;font:inherit;font-size:clamp(14px,1.25vw,18px);font-weight:500;line-height:1.35;color:#fff;opacity:.55;text-align:left;cursor:pointer;transition:opacity .3s,transform .3s}
.fxs-l::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#fff;opacity:0;transition:opacity .3s}
.fxs-l:hover{opacity:.8}
.fxs-l.on{opacity:1;transform:translateX(6px)}
.fxs-l.on::before{opacity:1}
.fxs-r{font-size:clamp(14px,1.25vw,18px);font-weight:500;letter-spacing:.1em;opacity:.55;transition:opacity .3s}
.fxs-r.on{opacity:1}
.fxs-center{position:relative;display:grid;place-items:center;text-align:center;min-height:50svh}
.fxs-t{grid-area:1/1;display:block;color:#fff;text-decoration:none;font-weight:600;font-size:clamp(30px,5.6vw,84px);line-height:1.12;letter-spacing:-.02em;opacity:0;visibility:hidden;transform:translateY(40px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s .7s}
.fxs-t[data-s="past"]{transform:translateY(-40px)}
.fxs-t[data-s="on"]{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s}
.fxs-t i{display:inline-block;margin-left:.18em;font-style:normal;font-size:.5em;vertical-align:.4em;opacity:.8;transition:transform .3s}
.fxs-t:hover i,.fxs-t:focus-visible i{transform:translate(4px,-4px)}
.fxs-foot{position:absolute;left:0;right:0;bottom:clamp(20px,5vh,48px);display:flex;flex-direction:column;align-items:center}
.fxs-prog{width:min(220px,60vw);display:flex;justify-content:space-between;font-size:13px;letter-spacing:.1em;margin-bottom:8px}
.fxs-bar{width:min(220px,60vw);height:2px;background:rgba(255,255,255,.3)}
.fxs-fill{height:100%;width:0;background:#fff;transition:width .4s ease}
@media (max-width:900px){
  .fxs-grid{grid-template-columns:1fr}
  .fxs-left,.fxs-right{display:none}
  .fxs-center{min-height:60svh}
  .fxs-t{font-size:clamp(30px,8.4vw,52px)}
}
@media (prefers-reduced-motion:reduce){
  .fxs{height:auto}
  .fxs-sticky{position:relative;min-height:100svh}
  .fxs-bg,.fxs-t{transition:none}
}