/* Hallmark · macrostructure: Photographic + Split Studio bands · tone: fresh-bold consumer · anchor hue: cyan 217
 * theme: custom (vibe: "Thai tropical, sun-bright, sparkling clean")
 *   paper  oklch(71.5% 0.126 217) cyan · accent oklch(89.5% 0.187 106) yellow
 *   type   Kanit only (300–700 + italic 700 for the RESET FRESH LIFE lockup)
 * nav: N9 edge-aligned + centred wordmark + scroll-spy · footer: Ft5 Statement
 * enrichment: real brand footage (hero bg loop) + brand lifestyle photography + 4K film stills
 */

:root{
  --cyan:        oklch(71.5% 0.126 217);
  --cyan-deep:   oklch(58%   0.115 222);
  --yellow:      oklch(89.5% 0.187 106);
  --navy:        oklch(21%   0.038 249);
  --navy-2:      oklch(27%   0.050 250);
  --cream:       oklch(98.3% 0.018 98);
  --cream-2:     oklch(95%   0.022 96);
  --ink:         oklch(21%   0.038 249);
  --ink-soft:    oklch(21%   0.038 249 / .7);
  --on-dark:     oklch(98.3% 0.018 98 / .76);
  --line-dark:   oklch(98.3% 0.018 98 / .16);
  --line-light:  oklch(21%   0.038 249 / .14);

  --mango:       oklch(80% 0.157 78);
  --pineapple:   oklch(88% 0.155 96);
  --passion:     oklch(66% 0.165 42);

  --font:        "Kanit",system-ui,-apple-system,sans-serif;
  --text-display: clamp(2.5rem, 5.4vw, 4.8rem);
  --text-h2:      clamp(2rem, 4.2vw, 3.4rem);
  --text-h3:      clamp(1.4rem, 2.4vw, 2rem);

  --radius-pill:999px; --radius-lg:26px; --radius-md:16px;
  --wrap:1240px;
  --pad:clamp(4.5rem, 9vw, 7.5rem);
  --ease-out:cubic-bezier(.22,.8,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:180ms; --dur-mid:420ms; --dur-slow:720ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--cream);color:var(--ink);
  font-family:var(--font);font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--font);font-weight:600;font-style:normal;line-height:1.12;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;color:inherit}
b,strong{font-weight:500}
.wrap{width:min(100% - clamp(2rem,6vw,4rem),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
/* ภาษาไทยไม่มีเว้นวรรคระหว่างคำ — ล็อกคำประสมไม่ให้ตัดกลางคำ และกันคำเดียวตกบรรทัดสุดท้าย */
z-w{white-space:nowrap}
p,li,summary,figcaption{text-wrap:pretty}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--yellow);color:var(--navy);padding:.6rem 1rem;border-radius:10px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.on-light :focus-visible{outline-color:var(--navy)}

/* ============ ANNOUNCE + NAV ============ */
.announce{background:var(--navy);color:var(--on-dark);text-align:center;font-size:.82rem;padding:.55rem 1rem}
.announce a{color:var(--yellow);border-bottom:1px solid currentColor}
.nav{position:sticky;top:0;z-index:50;background:var(--cyan);box-shadow:0 1px 0 var(--line-light)}
.nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem;
  width:min(100% - clamp(2rem,6vw,4rem),var(--wrap));margin-inline:auto;padding:.8rem 0}
.nav__links{display:flex;gap:1.5rem;font-size:.95rem;font-weight:400;white-space:nowrap}
.nav__links a{position:relative;padding:.25rem 0;color:var(--navy)}
.nav__links a::after{content:"";position:absolute;inset:auto 0 -3px;height:2px;border-radius:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease-out)}
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1)}
.nav__links a[aria-current="true"]{font-weight:500}
.nav__mark{justify-self:center}
.nav__mark img{height:30px;width:auto}
.nav__right{justify-self:end;display:flex;align-items:center;gap:1.2rem;white-space:nowrap}
.nav__right .navlink{font-size:.95rem;color:var(--navy)}
.nav__burger{display:none;background:none;border:0;padding:.55rem;justify-self:start}
.nav__burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px}
.nav__burger span+span{margin-top:6px}

/* ============ BUTTONS ============ */
.btn{--bg:var(--navy);--fg:var(--cream);--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;
  font-weight:500;font-size:1rem;padding:.85rem 1.7rem;border-radius:var(--radius-pill);
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn--yellow{--bg:var(--yellow);--fg:var(--navy)}
.btn--cream{--bg:var(--cream);--fg:var(--navy)}
.btn--outline{--bg:transparent;--fg:var(--navy);--bd:var(--navy)}
.btn--outline:hover{--bg:oklch(21% .038 249 / .07)}
.btn--ghostlight{--bg:transparent;--fg:var(--cream);--bd:oklch(98.3% .018 98 / .5)}
.btn--ghostlight:hover{--bg:oklch(98.3% .018 98 / .12)}
.btn--sm{padding:.6rem 1.25rem;font-size:.9rem}
.tlink{display:inline-flex;align-items:center;gap:.4rem;font-weight:500}
.tlink::after{content:"→";transition:transform var(--dur-fast) var(--ease-out)}
.tlink:hover::after{transform:translateX(4px)}

/* ============ SECTION FRAME — หัว section แบบเดียวกันทุกที่ ============ */
.sec{position:relative;padding:var(--pad) 0}
.sec--cream{background:var(--cream)}
.sec--cream2{background:var(--cream-2)}
.sec--navy{background:var(--navy);color:var(--cream)}
.sec--cyan{background:var(--cyan)}
.shead{display:grid;gap:.9rem;margin-bottom:clamp(2.2rem,4.5vw,3.5rem)}
.shead--row{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.5rem 3rem}
.shead--center{justify-items:center;text-align:center}
.shead__label{display:inline-flex;align-items:center;gap:.7rem;font-size:.8rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-deep)}
.shead__label span{display:inline-grid;place-items:center;min-width:2.1rem;height:2.1rem;padding:0 .5rem;border-radius:var(--radius-pill);
  background:var(--navy);color:var(--yellow);letter-spacing:.04em;font-weight:600}
.sec--navy .shead__label{color:var(--cyan)}
.sec--navy .shead__label span{background:var(--yellow);color:var(--navy)}
.sec--cyan .shead__label{color:var(--navy)}
.shead h2{font-size:var(--text-h2);text-wrap:balance}
.shead p{max-width:52ch;color:var(--ink-soft);font-size:1.05rem}
.sec--navy .shead p{color:var(--on-dark)}
.sec--cyan .shead p{color:oklch(21% .038 249 / .78)}

/* คลื่นคั่นระหว่าง section */
.wave{display:block;width:100%;height:clamp(38px,5.5vw,80px);line-height:0;background:var(--to);color:var(--from);margin-top:-1px}
.wave svg{width:100%;height:100%;display:block}

.wave-ov{position:absolute;left:0;right:0;z-index:3;height:clamp(38px,5.5vw,80px);line-height:0;pointer-events:none}
.wave-ov svg{width:100%;height:100%;display:block}
.wave-ov--top{top:-1px}
.wave-ov--bottom{bottom:-1px}
.wave-ov--bottom svg{transform:scaleY(-1)}

/* ============ HERO — วิดีโอเต็มจอ ============ */
.heroV{position:relative;min-height:min(92svh,880px);display:grid;align-items:center;overflow:hidden;background:var(--navy);isolation:isolate}
.heroV__media{position:absolute;inset:0;z-index:0}
.heroV__media video{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.heroV__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(100deg, oklch(18% .035 249 / .93) 0%, oklch(18% .035 249 / .8) 20%,
                          oklch(18% .035 249 / .36) 42%, oklch(18% .035 249 / .06) 60%, transparent 70%),
  linear-gradient(to top, oklch(18% .035 249 / .5), transparent 34%),
  radial-gradient(64% 92% at 4% 55%, oklch(71.5% .126 217 / .3), transparent 70%)}
.heroV__copy{position:relative;z-index:3;padding-block:clamp(6rem,13vh,9rem)}
.hero__kicker{font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1rem,1.6vw,1.25rem);color:var(--yellow);margin-bottom:.6rem}
.heroV h1{color:var(--cream);font-size:var(--text-display);font-weight:700;margin-bottom:1rem;text-wrap:balance;text-shadow:0 2px 40px oklch(21% .038 249 / .5)}
.heroV h1 em{font-style:normal;color:var(--yellow)}
.heroV__lead{max-width:33rem;color:oklch(98.3% .018 98 / .86);font-size:clamp(1.02rem,1.3vw,1.12rem);text-shadow:0 1px 20px oklch(21% .038 249 / .7)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1rem;margin-top:2.2rem}
.heroV__toggle{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(3.5rem,7vw,5rem);z-index:4;width:46px;height:46px;border-radius:50%;
  border:1px solid oklch(98.3% .018 98 / .35);background:oklch(21% .038 249 / .42);backdrop-filter:blur(8px);color:var(--cream);
  display:grid;place-items:center;transition:transform var(--dur-fast) var(--ease-out)}
.heroV__toggle:hover{transform:scale(1.06)}
.heroV__toggle svg{width:15px;height:15px}
.heroV__scroll{position:absolute;left:clamp(1.25rem,5vw,4rem);bottom:clamp(3.5rem,7vw,5rem);z-index:4;display:flex;align-items:center;gap:.7rem;
  color:oklch(98.3% .018 98 / .7);font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.heroV__scroll i{width:1px;height:34px;background:linear-gradient(180deg,oklch(98.3% .018 98 / .1),oklch(98.3% .018 98 / .6));position:relative;overflow:hidden}
.heroV__scroll i::after{content:"";position:absolute;inset:0 auto auto 0;width:1px;height:12px;background:var(--yellow);animation:heroScroll 2.2s var(--ease-in-out) infinite}
@keyframes heroScroll{0%{transform:translateY(-14px)}60%,100%{transform:translateY(36px)}}
.heroV__wave{position:absolute;inset:auto 0 -1px;z-index:2;color:var(--navy);pointer-events:none;line-height:0}
.heroV__wave svg{width:100%;height:clamp(40px,6vw,84px);display:block}

/* ============ MARQUEE ============ */
.marq{background:var(--navy);color:var(--cream);overflow:hidden;padding:1.05rem 0 1.3rem;border-bottom:1px solid var(--line-dark)}
.marq__track{display:flex;width:max-content;animation:marq 42s linear infinite}
.marq__track ul{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem}
.marq li{display:flex;align-items:center;gap:2.6rem;font-size:1rem;font-weight:400;white-space:nowrap}
.marq li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ 01 FLAVOURS — แถบเต็มจอต่อรส ============ */
.flv{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.flv__head{margin-bottom:0}
.band{--c:var(--mango);background:var(--c);color:var(--navy);padding:clamp(2.75rem,5.5vw,4.75rem) 0}
.band__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.band--flip .band__media{order:2}
.band__kv{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1672/941;box-shadow:0 30px 60px -30px oklch(21% .038 249 / .55)}
.band__kv img{width:100%;height:100%;object-fit:cover}
.band__thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:.7rem}
.band__thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md)}
.band__n{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:.8rem}
.band h3{font-size:clamp(2.4rem,5vw,4rem);font-weight:700;line-height:1;margin-bottom:1rem}
.band__desc{font-size:1.08rem;color:oklch(21% .038 249 / .85);max-width:30rem}
.band__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.8rem}
.band__chips li{font-size:.85rem;font-weight:400;padding:.4rem .9rem;border-radius:var(--radius-pill);border:1.5px solid oklch(21% .038 249 / .3)}

/* ============ 02 MOMENTS — กริดนิตยสาร ============ */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,215px);gap:.8rem}
.tile{position:relative;overflow:hidden;border-radius:var(--radius-md);margin:0;background:var(--cream-2)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.tile:hover img{transform:scale(1.04)}
.tile figcaption{position:absolute;inset:auto 0 0;padding:2.4rem 1.1rem 1rem;color:var(--cream);
  background:linear-gradient(to top, oklch(21% .038 249 / .82), transparent)}
.tile figcaption b{display:block;font-size:1.08rem;font-weight:500;line-height:1.3}
.tile figcaption span{font-size:.85rem;color:oklch(98.3% .018 98 / .8)}
.t-a{grid-column:1 / 3;grid-row:1 / 3}
.t-b{grid-column:3}
.t-c{grid-column:4}
.t-d{grid-column:3 / 5}
.t-e{grid-column:1}
.t-f{grid-column:2 / 4}
.t-g{grid-column:4}
.t-a figcaption b{font-size:1.4rem}

/* ============ 03 LOOKBOOK ============ */
.look{overflow:hidden}
.look__track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(calc((100vw - var(--wrap))/2), clamp(1rem,3vw,2rem));padding-bottom:.4rem}
.look__track::-webkit-scrollbar{display:none}
.lb-card{flex:0 0 clamp(260px,26vw,340px);scroll-snap-align:start;text-align:left;background:var(--navy-2);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);padding:.7rem .7rem 1.1rem;color:var(--cream);transition:transform var(--dur-mid) var(--ease-out),border-color var(--dur-mid)}
.lb-card:hover{transform:translateY(-4px);border-color:oklch(89.5% .187 106 / .6)}
.lb-card__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;border-radius:calc(var(--radius-lg) - .5rem);overflow:hidden}
.lb-card__grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lb-card__meta{display:grid;gap:.15rem;padding:.9rem .4rem 0}
.lb-card__meta b{font-size:1.05rem;font-weight:500}
.lb-card__meta span{font-size:.88rem;color:var(--on-dark)}
.lb-card__meta i{font-style:normal;justify-self:start;margin-top:.5rem;font-size:.74rem;font-weight:500;letter-spacing:.06em;
  padding:.22rem .6rem;border-radius:var(--radius-pill);background:var(--flav,var(--cyan));color:var(--navy)}
.look__nav{display:flex;gap:.5rem}
.look__nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-dark);background:transparent;color:var(--cream);
  display:grid;place-items:center;transition:background var(--dur-fast)}
.look__nav button:hover{background:oklch(98.3% .018 98 / .1)}
.look__nav svg{width:18px;height:18px}

/* lightbox */
.lbx{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:auto 1fr auto;gap:1rem;padding:clamp(1rem,3vw,2rem);
  background:oklch(16% .03 249 / .96);backdrop-filter:blur(8px);color:var(--cream)}
.lbx[hidden]{display:none}
.lbx__top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.lbx__top b{font-weight:500;font-size:1.05rem}
.lbx__top span{color:var(--on-dark);font-size:.9rem;margin-left:.6rem}
.lbx__stage{display:grid;place-items:center;min-height:0}
.lbx__stage img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain}
.lbx__bar{display:flex;justify-content:center;gap:.6rem}
.lbx button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-dark);background:transparent;color:var(--cream);display:grid;place-items:center}
.lbx button:hover{background:oklch(98.3% .018 98 / .1)}
.lbx svg{width:18px;height:18px}
.lbx__note{text-align:center;font-size:.8rem;color:oklch(98.3% .018 98 / .5)}

/* ============ 04 STORY — ภาพเต็มจอ ============ */
.story{position:relative;min-height:min(86svh,760px);display:grid;align-items:center;overflow:hidden;isolation:isolate;background:var(--cream-2)}
.story__bg{position:absolute;inset:0;z-index:0}
.story__bg img{width:100%;height:100%;object-fit:cover;object-position:28% center}
.story__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(270deg, oklch(98.3% .018 98 / .95) 0%, oklch(98.3% .018 98 / .92) 46%, oklch(98.3% .018 98 / .5) 56%, transparent 68%)}
.story__copy{position:relative;z-index:2;display:grid;justify-items:start;margin-left:auto;max-width:31rem;padding-block:var(--pad)}
.story__copy p{color:var(--ink-soft);font-size:1.06rem;margin-top:1rem}
.story__copy .btn{margin-top:2rem}

/* ============ 05 FILM ============ */
.film__head h2{font-size:var(--text-h2);text-wrap:balance}
.film__em{white-space:nowrap;font-style:italic;font-weight:700;letter-spacing:-.02em;padding-inline:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent 58%, var(--yellow) 58% 94%, transparent 94%)}
.film__player{position:relative;margin:0 auto clamp(2.2rem,4vw,3.2rem);max-width:1100px;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:16/9;background:var(--navy);box-shadow:0 36px 70px -34px oklch(21% .038 249 / .7)}
.film__player video{width:100%;height:100%;object-fit:cover}
.film__play{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.9rem;border:0;padding:0;
  background:linear-gradient(to top, oklch(21% .038 249 / .45), oklch(21% .038 249 / .08) 55%);color:#fff;transition:opacity var(--dur-mid)}
.film__play span{width:92px;height:92px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;
  box-shadow:0 0 0 0 oklch(89.5% .187 106 / .6),0 12px 30px -8px oklch(21% .038 249 / .6);transition:transform var(--dur-fast) var(--ease-out);
  animation:fizz 2.4s var(--ease-out) infinite}
.film__play svg{width:30px;height:30px;margin-left:4px}
.film__play em{font-style:normal;font-weight:500;font-size:.9rem;letter-spacing:.02em;text-shadow:0 1px 8px oklch(21% .038 249 / .6)}
.film__play:hover span{transform:scale(1.08)}
.film__player.is-on .film__play{opacity:0;pointer-events:none}
.film__teaser{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-mid)}
.film__teaser.is-live{opacity:1}
.film__player.is-on .film__teaser,.film__player.is-end .film__teaser{opacity:0;visibility:hidden}
.film__player.is-end .film__play,.film__player.is-end .film__cap{opacity:0;pointer-events:none}
.film__end{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:.35rem;padding:1.5rem;
  background:oklch(21% .038 249 / .72);backdrop-filter:blur(3px);color:var(--cream);animation:endIn var(--dur-mid) var(--ease-out)}
.film__end[hidden]{display:none}
.film__endk{color:var(--yellow);font-weight:500;letter-spacing:.04em}
.film__endh{font-size:var(--text-h3);font-weight:600;line-height:1.2}
.film__endb{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.1rem}
.film__endl{margin-top:.8rem;font-size:.9rem;color:var(--on-dark);border-bottom:1px solid currentColor}
@keyframes endIn{from{opacity:0}to{opacity:1}}
.film__cap{position:absolute;left:1rem;top:1rem;padding:.35rem .8rem;border-radius:var(--radius-pill);font-size:.82rem;
  background:oklch(21% .038 249 / .62);color:var(--cream);backdrop-filter:blur(6px);transition:opacity var(--dur-mid)}
.film__cap b{color:var(--yellow)}
.film__player.is-on .film__cap{opacity:0}
@keyframes fizz{0%{box-shadow:0 0 0 0 oklch(89.5% .187 106 / .55),0 12px 30px -8px oklch(21% .038 249 / .6)}
  70%,100%{box-shadow:0 0 0 22px oklch(89.5% .187 106 / 0),0 12px 30px -8px oklch(21% .038 249 / .6)}}
.chap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;max-width:1100px;margin:calc(-1 * clamp(1rem,2vw,1.8rem)) auto clamp(2.4rem,4.5vw,3.4rem)}
.chap button{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/9;background:var(--navy);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast)}
.chap img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity var(--dur-fast)}
.chap span{position:absolute;inset:auto 0 0;display:flex;align-items:baseline;gap:.5rem;padding:1.4rem .8rem .6rem;text-align:left;color:var(--cream);
  font-weight:500;font-size:.95rem;background:linear-gradient(to top, oklch(21% .038 249 / .85), transparent)}
.chap b{font-size:.78rem;font-weight:500;color:var(--yellow);font-variant-numeric:tabular-nums}
.chap button:hover{transform:translateY(-3px)}
.chap button:hover img{opacity:1}
.chap button[aria-current="true"]{box-shadow:0 0 0 3px var(--yellow)}
.chap button[aria-current="true"] img{opacity:1}
.film__more{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.2rem);align-items:center;
  max-width:1100px;margin:0 auto}
.film__side{position:relative;display:block;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/9}
.film__side img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.film__side:hover img{transform:scale(1.04)}
.film__mini{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center}
.film__mini svg{width:20px;height:20px;margin-left:3px}
.film__kicker{font-weight:600;font-size:1.15rem}
.yt{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;padding:.9rem 1.1rem;border-radius:var(--radius-md);background:var(--navy);color:var(--cream);max-width:30rem;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast)}
.yt:hover{transform:translateY(-2px);background:var(--navy-2)}
.yt__ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:#FF0000;color:#fff}
.yt__ic svg{width:24px;height:24px}
.yt__t{display:grid;min-width:0;line-height:1.35}
.yt__t b{font-size:1.05rem;font-weight:500}
.yt__t span{font-size:.82rem;color:var(--on-dark);overflow-wrap:anywhere}
.yt__go{margin-left:auto;color:var(--yellow);font-weight:500}

/* ============ 06 BUY ============ */
.buy__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.buy__pic{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1;background:var(--navy)}
.buy__pic img{width:100%;height:100%;object-fit:cover}
.shops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1.8rem}
.shop{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;border-radius:var(--radius-md);background:#fff0;border:1.5px solid var(--line-light);
  transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out),background var(--dur-fast)}
a.shop:hover{border-color:var(--navy);transform:translateY(-2px);background:oklch(100% 0 0 / .5)}
.shop--main{grid-column:1 / -1;background:var(--navy);color:var(--cream);border-color:var(--navy);padding:1.35rem 1.4rem}
a.shop--main:hover{background:var(--navy-2);border-color:var(--navy-2)}
.shop__ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--cream-2);color:var(--navy)}
.shop--main .shop__ic{background:var(--yellow)}
.shop__ic svg{width:22px;height:22px}
.shop__t{display:grid;min-width:0;line-height:1.35}
.shop__t b{font-size:1.05rem}
.shop__t span{font-size:.86rem;color:var(--ink-soft)}
.shop--main .shop__t span{color:var(--on-dark)}
.shop__go{margin-left:auto;font-weight:500;font-size:.92rem;white-space:nowrap}
.shop--main .shop__go{color:var(--yellow)}
.shop--soon{opacity:.55}
.shop__soon{margin-left:auto;font-size:.76rem;padding:.25rem .6rem;border-radius:var(--radius-pill);border:1px solid var(--line-light);white-space:nowrap}

/* ============ 07 FAQ ============ */
.faq__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq__in .shead{margin-bottom:0;position:sticky;top:6rem}
.faq{display:grid;gap:.7rem}
.faq details{background:var(--cream);border:1.5px solid var(--line-light);border-radius:var(--radius-md);transition:border-color var(--dur-fast)}
.faq details[open]{border-color:var(--navy)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;cursor:pointer;
  font-weight:500;font-size:1.06rem;line-height:1.4;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq__q{min-width:0}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--yellow) center/14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%2304182C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:transform var(--dur-fast) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.3rem 1.25rem;color:var(--ink-soft);max-width:60ch}

/* ============ FOOTER ============ */
.foot{background:var(--navy);color:var(--on-dark);padding:clamp(3.5rem,7vw,6rem) 0 2rem}
.foot__state{font-weight:700;color:var(--cream);font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.015em;max-width:15ch}
.foot__state em{font-style:normal;color:var(--yellow)}
.foot__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem 2.4rem;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--line-dark)}
.foot__nav{display:flex;flex-wrap:wrap;gap:.8rem 2rem;font-size:.95rem}
.foot__nav a:hover{color:var(--cream)}
.foot__social{display:flex;gap:.6rem}
.foot__social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:oklch(98.3% .018 98 / .08);color:var(--cream);
  transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.foot__social a:hover{transform:translateY(-2px);background:var(--yellow);color:var(--navy)}
.foot__social a[data-brand="shopee"]:hover{background:#EE4D2D;color:#fff}
.foot__social a[data-brand="lazada"]:hover{background:#0F146D;color:#fff}
.foot__social a[data-brand="tiktok"]:hover{background:#fff;color:#000}
.foot__social a[data-brand="facebook"]:hover{background:#1877F2;color:#fff}
.foot__social a[data-brand="youtube"]:hover{background:#FF0000;color:#fff}
.foot__social svg{width:20px;height:20px}
.foot__base a{color:oklch(98.3% .018 98 / .7);border-bottom:1px solid currentColor}
.foot__base a:hover{color:var(--cream)}
.foot__base{margin-top:2rem;font-size:.8rem;color:oklch(98.3% .018 98 / .42);display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .marq__track,.heroV__scroll i::after{animation:none}
  .btn:hover,.lb-card:hover,.tile:hover img,.film__side:hover img,.foot__social a:hover,.yt:hover{transform:none}
  .chap button:hover,.film__end{transform:none;animation:none}
  .film__play span{animation:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .nav__links{gap:1.1rem}
}
@media (max-width:960px){
  .nav__in{grid-template-columns:auto 1fr auto}
  .nav__burger{display:block}
  .nav__links{display:none;position:absolute;inset:100% 0 auto;flex-direction:column;gap:1rem;
    background:var(--cyan);padding:1.2rem clamp(1rem,5vw,2rem) 1.6rem;box-shadow:0 12px 24px -16px oklch(21% .038 249 / .5)}
  .nav__links.open{display:flex}
  .nav__right .navlink{display:none}
  .band__in,.buy__in{grid-template-columns:minmax(0,1fr)}
  .band--flip .band__media{order:0}
  .shead--row{grid-template-columns:minmax(0,1fr)}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,34vw,230px);grid-auto-flow:row dense}
  .t-a{grid-column:1 / 3;grid-row:auto / span 2}
  .t-b,.t-c,.t-e,.t-g{grid-column:auto}
  .t-d,.t-f{grid-column:1 / 3}
  .heroV{min-height:min(84svh,760px)}
  .heroV__scrim{background:
    linear-gradient(to top, oklch(21% .038 249 / .92) 0%, oklch(21% .038 249 / .55) 42%, oklch(21% .038 249 / .25) 70%, oklch(21% .038 249 / .3) 100%),
    radial-gradient(90% 60% at 50% 85%, oklch(71.5% .126 217 / .26), transparent 70%)}
  .heroV__copy{align-self:end;padding-bottom:clamp(7rem,18vh,10rem)}
  .heroV__scroll{display:none}
  .story{min-height:0;align-items:end}
  .story__bg{position:relative;aspect-ratio:16/10}
  .story__scrim{display:none}
  .story{display:block}
  .story__copy{margin:0;max-width:none;padding-block:2.5rem var(--pad)}
  .buy__pic{aspect-ratio:16/10}
  .faq__in{grid-template-columns:minmax(0,1fr)}
  .faq__in .shead{position:static}
}
@media (max-width:560px){
  body{font-size:16px}
  .film__more{grid-template-columns:minmax(0,1fr)}
  .film__side{aspect-ratio:2/1}
  .faq summary{padding:1rem 1.05rem;font-size:1rem}
  .faq details p{padding:0 1.05rem 1.1rem}
  .foot__row{flex-direction:column;align-items:flex-start}
  .chap{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .film__end{padding:.8rem;gap:.2rem}
  .film__endk,.film__endl{display:none}
  .film__endh{font-size:1.1rem}
  .film__endb{margin-top:.6rem;gap:.5rem}
  .film__end .btn{padding:.55rem 1.1rem;font-size:.88rem}
  .film__play span{width:72px;height:72px}
  .hero__cta .btn{flex:1 1 100%}
  .band__thumbs{gap:.5rem}
  .shops{grid-template-columns:minmax(0,1fr)}
  .heroV__toggle{right:.9rem;bottom:1.1rem;width:42px;height:42px}
  .shop__go{display:none}
}