/* ฟอนต์ทั้งเว็บ: Noto Sans Thai ตัวหนา semi bold (600) — เก็บไฟล์ไว้ในโฟลเดอร์ fonts/ ไม่ต้องพึ่ง Google
   ตัวเลข 0 ไม่มีขีดกลาง */
@font-face{ font-family:'Noto Sans Thai'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../fonts/noto-sans-thai-thai-600-normal.woff2) format('woff2'); unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Thai'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../fonts/noto-sans-thai-latin-600-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root{
  --bg:#02040a;
  --ink:#f4f7ff;
  --ink-dim:rgba(226,234,255,.72);
  --ink-faint:rgba(200,214,255,.46);
  --blue:#2f7bff;
  --blue-2:#1747d6;
  --cyan:#3fd5ff;
  --violet:#7457ff;
  --line:rgba(255,255,255,.14);
  --glass-a:rgba(255,255,255,.13);
  --glass-b:rgba(255,255,255,.035);
  --r-xl:34px; --r-lg:26px; --r-md:18px;
--f-display:var(--f-body);
--f-body:'Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --nav-h:64px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-synthesis:none; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:600; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
  display:flex; flex-direction:column;
  animation:pageIn .8s var(--ease) both;
}
body.leaving{ opacity:0; transform:translateY(8px) scale(.995); transition:opacity .22s ease, transform .22s ease; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
main{ flex:1; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,p{ margin:0; }
::selection{ background:rgba(47,123,255,.5); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px; }
.container{ width:min(1240px,100% - clamp(32px,8vw,80px)); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- พื้นหลังเรืองแสงเคลื่อนไหว ---------- */
.ambient{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, #07122e 0%, #02040a 55%); }
.ambient i{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform; }
.ambient i:nth-child(1){ width:46vmax; height:46vmax; left:-14vmax; top:8vh; background:radial-gradient(circle,#1a4dff 0%,transparent 66%); animation:drift1 24s ease-in-out infinite alternate; }
.ambient i:nth-child(2){ width:40vmax; height:40vmax; right:-12vmax; top:42vh; background:radial-gradient(circle,#00b7ff 0%,transparent 66%); opacity:.38; animation:drift2 29s ease-in-out infinite alternate; }
.ambient i:nth-child(3){ width:34vmax; height:34vmax; left:30vw; bottom:-14vmax; background:radial-gradient(circle,#6a3dff 0%,transparent 66%); opacity:.34; animation:drift3 33s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform:translate(14vw,18vh) scale(1.2); } }
@keyframes drift2{ to{ transform:translate(-16vw,-14vh) scale(1.15); } }
@keyframes drift3{ to{ transform:translate(-20vw,-8vh) scale(1.3); } }
.progress{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:300; transform-origin:0 50%; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet)); box-shadow:0 0 12px var(--blue); }
.cursor-glow{ position:fixed; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(circle,rgba(63,160,255,.16),transparent 62%); transform:translate3d(-999px,-999px,0); will-change:transform; transition:opacity .4s; }
@media (hover:none){ .cursor-glow{ display:none; } }

/* ---------- Liquid glass ---------- */
.glass{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(140deg,var(--glass-a),var(--glass-b) 42%,rgba(255,255,255,.06));
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 28px rgba(110,160,255,.07),
    0 24px 50px -24px rgba(0,0,0,.85);
}
.glass::before,.spec-hl::before{ /* แสงสะท้อนตามเมาส์ */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.2),transparent 46%);
}
.glass:hover::before{ opacity:1; }
.glass-lite{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.025) 50%,rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 20px 40px -22px rgba(0,0,0,.85);
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; padding:0 26px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  font-family:var(--f-display); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px -12px rgba(0,0,0,.8);
  transition:transform .35s var(--spring), box-shadow .3s, background .3s;
}
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transition:transform .8s var(--ease); }
.btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 18px 34px -14px rgba(47,123,255,.7); }
.btn:hover::after{ transform:translateX(120%) skewX(-20deg); }
.btn:active{ transform:scale(.97); }
.btn-white{ background:#fff; color:#07102a; border-color:#fff; box-shadow:0 10px 30px -10px rgba(255,255,255,.45); -webkit-backdrop-filter:none; backdrop-filter:none; }
.btn-white::after{ background:linear-gradient(90deg,transparent,rgba(47,123,255,.28),transparent); }
.btn-blue{ background:linear-gradient(135deg,#4aa0ff,var(--blue) 45%,var(--blue-2)); border-color:rgba(255,255,255,.3); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px -12px rgba(47,123,255,.9); }
.btn-sm{ min-height:36px; padding:0 18px; font-size:11px; }
.btn-lg{ min-height:54px; padding:0 40px; font-size:15px; }
.btn svg{ width:16px; height:16px; flex:none; }
.icon-btn{ width:54px; height:54px; padding:0; border-radius:50%; font-size:22px; }
.icon-btn.on{ color:#ff5d8f; border-color:rgba(255,93,143,.6); }
.icon-btn.on svg{ fill:#ff5d8f; }
.icon-btn.pop{ animation:pop .5s var(--spring); }
@keyframes pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.35);} 100%{ transform:scale(1);} }

/* ---------- Navigation ---------- */
.nav-wrap{ position:fixed; z-index:200; top:14px; left:0; right:0; display:flex; justify-content:center; padding-inline:12px; pointer-events:none;
  transition:transform .5s var(--ease); }
.nav{ position:relative; pointer-events:auto; width:min(980px,100%); height:var(--nav-h); border-radius:999px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 10px 0 24px;
  background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(26px) saturate(1.9); backdrop-filter:blur(26px) saturate(1.9);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.05), 0 18px 40px -16px rgba(0,0,0,.8);
  transition:background .4s, box-shadow .4s, height .4s var(--ease);
}
.nav-wrap.scrolled .nav{ background:linear-gradient(140deg,rgba(10,16,40,.7),rgba(10,16,40,.45)); }
.nav-wrap.hide{ transform:translateY(-130%); }
.brand img{ height:26px; width:auto; transition:transform .4s var(--spring); }
.brand:hover img{ transform:scale(1.07); }
.nav-links{ position:relative; display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.nav-links a{ position:relative; z-index:1; display:block; padding:8px 20px; font-family:var(--f-display); font-weight:600; font-size:11.5px; letter-spacing:.16em; color:var(--ink-dim); transition:color .25s; }
.nav-links a:hover,.nav-links a.active{ color:#fff; }
.nav-ind{ position:absolute; z-index:0; top:0; bottom:0; left:0; width:0; border-radius:999px; opacity:0;
  background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.07)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:left .45s var(--spring), width .45s var(--spring), opacity .3s; }
.nav-ind.show{ opacity:1; }
.search-btn{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 20px 0 16px; border:0; border-radius:999px;
  background:#fff; color:#07102a; font-family:var(--f-display); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:transform .35s var(--spring), box-shadow .3s; box-shadow:0 8px 22px -10px rgba(255,255,255,.6); }
.search-btn:hover{ transform:scale(1.06); box-shadow:0 10px 28px -8px rgba(63,213,255,.8); }
.search-btn svg{ width:15px; height:15px; }
.burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); position:relative; }
.burger i{ position:absolute; left:12px; right:12px; height:2px; border-radius:2px; background:#fff; transition:transform .35s var(--ease), opacity .2s, top .35s var(--ease); }
.burger i:nth-child(1){ top:15px; } .burger i:nth-child(2){ top:20px; } .burger i:nth-child(3){ top:25px; }
.nav.open .burger i:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav.open .burger i:nth-child(2){ opacity:0; }
.nav.open .burger i:nth-child(3){ top:20px; transform:rotate(-45deg); }
.nav-right{ display:flex; align-items:center; gap:8px; }
@media (max-width:760px){
  .nav{ padding-left:18px; }
  .burger{ display:block; }
  .search-btn span{ display:none; } .search-btn{ padding:0; width:42px; justify-content:center; }
  .nav-links{ position:absolute; left:0; right:0; top:calc(100% + 10px); flex-direction:column; gap:2px; padding:10px; border-radius:var(--r-lg);
    background:linear-gradient(140deg,rgba(18,26,60,.88),rgba(10,16,40,.9)); -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
    border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -20px #000;
    opacity:0; transform:translateY(-10px) scale(.97); pointer-events:none; transition:opacity .3s, transform .4s var(--spring); }
  .nav.open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links a{ padding:14px 18px; border-radius:16px; font-size:13px; }
  .nav-links a.active{ background:rgba(255,255,255,.1); }
  .nav-ind{ display:none; }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(34px) scale(.98); filter:blur(8px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay:calc(var(--i,0) * 90ms); }
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal="zoom"]{ transform:scale(.88); }
[data-reveal].in{ opacity:1; transform:none; filter:none; }

/* ---------- Section title ---------- */
.sec{ padding:clamp(56px,9vw,120px) 0 0; }
.sec-title{ font-family:var(--f-display); font-weight:600; text-align:center; letter-spacing:.06em; font-size:clamp(1.9rem,5.2vw,3.6rem); line-height:1.15;
  background:linear-gradient(180deg,#fff 20%,#9ec3ff); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(47,123,255,.0); margin-bottom:clamp(24px,4vw,44px); }
.sec-title.th{ font-family:var(--f-body); font-weight:600; letter-spacing:.01em; font-size:clamp(1.7rem,4vw,2.6rem); }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:min(100svh,900px); display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--nav-h) + 70px) 0 clamp(28px,5vw,60px); overflow:hidden; }
.hero-bg{ position:absolute; inset:-6% 0 0; z-index:-1; will-change:transform; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:saturate(1.12) brightness(1.02); animation:heroZoom 22s ease-in-out infinite alternate; }
@keyframes heroZoom{ to{ transform:scale(1.08); } }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(2,4,10,.34) 0%,rgba(2,4,10,.03) 32%,rgba(2,4,10,.34) 68%,#02040a 100%),
             radial-gradient(70% 60% at 25% 55%,rgba(2,4,10,.28),transparent); }
.hero-copy{ max-width:min(100%,900px); margin-bottom:clamp(28px,5vw,56px); }
.eyebrow{ font-family:var(--f-display); font-size:13px; letter-spacing:.34em; color:var(--cyan); text-transform:uppercase; margin-bottom:10px; }
.hero h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.9rem,7.4vw,5rem); line-height:1.12; letter-spacing:.01em; text-transform:uppercase; }
.hl{ display:block; overflow:hidden; padding:0 .12em .1em 0; }
.hl > span{ display:block; transform:translateY(110%); animation:rise 1.1s var(--ease) forwards; animation-delay:calc(.25s + var(--i,0) * .16s); }
.hl .w{ font-weight:inherit; background:linear-gradient(180deg,#fff 30%,#a9ccff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hl .w.acc{ background:linear-gradient(90deg,#027be4,#27a8e3); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:none; text-shadow:none; box-shadow:none; }
@keyframes rise{ to{ transform:none; } }
.hero-sub{ margin:18px 0 26px; color:var(--ink-dim); font-size:clamp(14px,1.6vw,17px); opacity:0; animation:fadeUp 1s var(--ease) .85s forwards; }
.hero-copy .btn{ opacity:0; animation:fadeUp 1s var(--ease) 1.05s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }
.scroll-cue{ position:absolute; left:50%; bottom:10px; width:22px; height:36px; margin-left:-11px; border:1.5px solid rgba(255,255,255,.4); border-radius:12px; opacity:.7; }
.scroll-cue::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:#fff; animation:wheel 1.8s infinite; }
@keyframes wheel{ 0%{ opacity:1; transform:translateY(0);} 100%{ opacity:0; transform:translateY(14px);} }
@media (max-width:760px){ .scroll-cue{ display:none; } }

.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,20px); }
@media (max-width:760px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
.tile{ display:block; aspect-ratio:16/11; border-radius:var(--r-lg); padding:14px 16px; transition:transform .5s var(--spring), border-color .3s, box-shadow .4s; }
.tile.glass{ background:linear-gradient(150deg,rgba(70,135,255,.34),rgba(12,24,72,.42) 60%,rgba(255,255,255,.08)); }
.tile:hover{ transform:translateY(-8px); border-color:rgba(120,190,255,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 30px 50px -20px rgba(47,123,255,.7); }
.tile-t{ font-family:var(--f-display); font-weight:600; font-size:clamp(.8rem,1.5vw,1.15rem); letter-spacing:.05em; }
.tile-s{ position:absolute; left:16px; bottom:12px; font-size:10px; letter-spacing:.1em; color:var(--ink-dim); text-transform:uppercase; max-width:60%; line-height:1.3; }
.tile-img{ position:absolute; inset:24% 8% 10% 28%; }
.tile-img img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 22px rgba(0,0,0,.6)); animation:float 6s ease-in-out infinite; transition:transform .6s var(--spring); }
.tile:nth-child(2) .tile-img img{ animation-delay:-1.4s; } .tile:nth-child(3) .tile-img img{ animation-delay:-2.8s; } .tile:nth-child(4) .tile-img img{ animation-delay:-4.2s; }
.tile:hover .tile-img img{ transform:scale(1.12) rotate(-3deg); }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@media (max-width:760px){ .tile-img{ inset:36% 6% 8% 6%; } .tile-s{ display:none; } }

/* ---------- Banner (carousel & series grid) ---------- */
.banner{ position:relative; display:block; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden; isolation:isolate;
  background:
    radial-gradient(90% 90% at 85% 10%,rgba(63,160,255,.55),transparent 55%),
    radial-gradient(70% 80% at 5% 100%,rgba(116,87,255,.35),transparent 60%),
    linear-gradient(160deg,#0b2d86,#050c2c 70%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 60px rgba(63,160,255,.14), 0 30px 60px -28px rgba(10,60,255,.65);
  transition:box-shadow .5s, border-color .4s; }
.banner::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 48%); }
.banner:hover::before{ opacity:1; }
.banner:hover{ border-color:rgba(130,200,255,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 70px rgba(63,160,255,.25), 0 36px 70px -26px rgba(40,110,255,.9); }
.banner{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(4px,1.2%,10px); padding:clamp(14px,3.2%,30px) clamp(16px,4%,38px) clamp(14px,3%,28px); }
.banner-t{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.15rem,2.8vw,2.5rem); line-height:1.05; letter-spacing:.03em; text-shadow:0 4px 30px rgba(0,0,0,.5); }
.banner-img{ position:relative; min-height:0; }
.banner-img > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 20px 28px rgba(0,0,0,.65)); transition:transform .8s var(--ease); }
.banner:hover .banner-img > img{ transform:scale(1.04) translateY(-3px); }
.banner-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.banner-s{ max-width:64%; font-family:var(--f-display); font-weight:600; font-size:clamp(.5rem,1.05vw,.9rem); line-height:1.5; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.88); }
.stack{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; }
.stack img{ height:64%; width:auto; max-width:none; margin-left:-7%; border-radius:10px; filter:drop-shadow(0 14px 22px rgba(0,0,0,.65)); transition:transform .8s var(--spring); }
.stack img:first-child{ margin-left:0; }
.stack img:nth-child(1){ transform:rotate(-9deg); }
.stack img:nth-child(2){ transform:rotate(-3deg) translateY(-4%); z-index:2; }
.stack img:nth-child(3){ transform:rotate(4deg); z-index:3; }
.stack img:nth-child(4){ transform:rotate(10deg) translateY(-3%); z-index:4; }
.banner:hover .stack img:nth-child(1){ transform:rotate(-13deg) translateX(-6%); }
.banner:hover .stack img:nth-child(2){ transform:rotate(-5deg) translateY(-8%); }
.banner:hover .stack img:nth-child(3){ transform:rotate(6deg) translateY(-3%); }
.banner:hover .stack img:nth-child(4){ transform:rotate(14deg) translateX(6%) translateY(-6%); }
@media (max-width:620px){ .banner{ aspect-ratio:4/3; } .banner-s{ max-width:58%; font-size:.55rem; } .banner-foot .btn{ min-height:32px; padding:0 14px; font-size:10px; } }

/* ---------- Carousel ---------- */
.carousel{ position:relative; }
.car-track{ --cw:min(66vw,820px); display:flex; gap:clamp(12px,2vw,26px); overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory;
  padding:30px calc(50% - var(--cw) / 2) 46px; scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; }
.car-track::-webkit-scrollbar{ display:none; }
.car-track.drag{ cursor:grabbing; scroll-snap-type:none; }
.car-item{ flex:0 0 var(--cw); scroll-snap-align:center; transform:scale(calc(1 - var(--d,1) * .14)); opacity:calc(1 - var(--d,1) * .62); filter:blur(calc(var(--d,1) * 2px));
  transition:transform .25s linear, opacity .25s linear; user-select:none; }
.car-item .banner{ -webkit-user-drag:none; }
.car-item img{ -webkit-user-drag:none; }
@media (max-width:760px){ .car-track{ --cw:82vw; } }
.car-btn{ position:absolute; top:50%; z-index:5; width:50px; height:50px; margin-top:-34px; border-radius:50%; display:grid; place-items:center; padding:0; font-size:22px; }
.car-btn.prev{ left:max(10px,2vw); } .car-btn.next{ right:max(10px,2vw); }
.car-btn:hover{ transform:scale(1.12); }
@media (max-width:760px){ .car-btn{ display:none; } }
.car-dots{ display:flex; justify-content:center; gap:8px; margin-top:-8px; }
.car-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:8px; background:rgba(255,255,255,.28); transition:width .4s var(--spring), background .3s; }
.car-dots button.on{ width:30px; background:linear-gradient(90deg,var(--cyan),var(--blue)); box-shadow:0 0 12px var(--blue); }

.series-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,28px); }
@media (max-width:700px){ .series-grid{ grid-template-columns:1fr; } }

/* ---------- Reviews ---------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); }
@media (max-width:980px){ .review-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .review-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:none; margin-inline:-16px; padding-inline:16px; }
  .review-grid::-webkit-scrollbar{ display:none; } .review-grid .review{ flex:0 0 82%; scroll-snap-align:center; } }
.review{ border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; gap:12px; transition:transform .5s var(--spring), border-color .3s; }
.review:hover{ transform:translateY(-6px); border-color:rgba(130,200,255,.4); }
.rv-top{ display:flex; align-items:center; gap:12px; }
.rv-av{ flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:15px;
  background:linear-gradient(135deg,var(--cyan),var(--blue-2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.rv-name{ font-size:14px; font-weight:600; line-height:1.2; }
.rv-src{ font-size:11px; color:var(--ink-faint); letter-spacing:.08em; text-transform:uppercase; }
.rv-badge{ margin-left:auto; font-size:10px; letter-spacing:.1em; padding:2px 9px; border-radius:99px; border:1px dashed rgba(255,255,255,.35); color:var(--ink-faint); white-space:nowrap; }
.rv-text{ font-size:13.5px; line-height:1.55; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; min-height:4.6em; }
.rv-photos{ display:flex; gap:6px; }
.rv-photos img{ width:54px; height:54px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.rv-foot{ display:flex; align-items:center; gap:10px; margin-top:auto; font-size:14px; }
.star{ color:#ffc933; font-size:22px; line-height:1; filter:drop-shadow(0 0 8px rgba(255,201,51,.55)); }
.rv-score{ font-weight:600; }
.rv-label{ color:var(--ink-dim); font-size:13px; }

/* ---------- Page header (about / category / contact) ---------- */
.page-hero{ position:relative; overflow:hidden; padding:calc(var(--nav-h) + 76px) 0 clamp(36px,6vw,70px); }
.page-hero .hero-bg{ inset:-10% 0 0; }
.page-hero .hero-bg img{ animation:none; filter:saturate(1.15) brightness(.7); }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(2,4,10,.35),rgba(2,4,10,.2) 40%,#02040a 100%); }
.page-hero h1{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(2.2rem,7.6vw,5.4rem); line-height:1.05;
  background:linear-gradient(180deg,#fff 35%,#8fb8ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero p{ margin-top:12px; color:var(--ink-dim); max-width:56ch; }
.crumb{ display:inline-flex; gap:8px; align-items:center; margin-bottom:16px; font-size:13px; color:var(--ink-dim); transition:color .2s, transform .3s var(--spring); }
.crumb:hover{ color:#fff; transform:translateX(-4px); }

/* ---------- Filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.chip{ position:relative; min-width:64px; padding:8px 22px; border-radius:999px; border:1px solid rgba(255,255,255,.18); font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  background:linear-gradient(140deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25); transition:transform .35s var(--spring), background .3s, border-color .3s; }
.chip:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.4); }
.chip.on{ background:linear-gradient(135deg,rgba(63,160,255,.55),rgba(23,71,214,.5)); border-color:rgba(160,210,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px -8px rgba(47,123,255,.9); }
.sub-h{ font-size:clamp(1.3rem,3vw,1.9rem); font-weight:600; margin-bottom:14px; }

/* ---------- Product card ---------- */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px); }
@media (max-width:1020px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .grid{ grid-template-columns:repeat(2,1fr); } }
.pcard{ display:flex; flex-direction:column; border-radius:var(--r-lg); transition:transform .5s var(--spring), border-color .3s, box-shadow .4s, opacity .4s; will-change:transform; }
.pcard.glass-lite{ border-color:rgba(100,160,255,.22); }
.pcard:hover{ border-color:rgba(130,200,255,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 30px 50px -22px rgba(47,123,255,.75); }
.pcard::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 50%); }
.pcard:hover::before{ opacity:1; }
.pcard-media{ position:relative; aspect-ratio:4/3; display:block; padding:9%;
  background:radial-gradient(90% 90% at 80% 0%,rgba(63,160,255,.5),transparent 60%), linear-gradient(160deg,#0a2a80,#050c2c 75%); }
.pcard-media img{ position:absolute; inset:9%; width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 14px 20px rgba(0,0,0,.55)); transition:transform .7s var(--ease); }
.pcard:hover .pcard-media img{ transform:scale(1.1) translateY(-4px) rotate(-1.5deg); }
.pcard-pill{ z-index:3; position:absolute; top:10px; left:10px; font-family:var(--f-display); font-size:9.5px; letter-spacing:.14em; padding:4px 10px; border-radius:99px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.pcard-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:3px; flex:1; }
.pcard-tag{ color:#5fb4ff; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.pcard-name{ font-weight:600; font-size:14.5px; line-height:1.35; }
.pcard-foot{ margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim); flex-wrap:wrap; }
.pcard-foot .star{ font-size:20px; }
.price{ color:#fff; font-weight:600; } .price s{ color:var(--ink-faint); font-weight:600; margin-left:6px; font-size:.85em; }
.grid .pcard.out{ opacity:0; transform:scale(.88); pointer-events:none; }
.grid .pcard[hidden]{ display:none; }
.empty{ padding:50px 20px; text-align:center; color:var(--ink-dim); grid-column:1/-1; }

/* ---------- Detail ---------- */
.pd{ padding:calc(var(--nav-h) + 56px) 0 0; }
.pd-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,3.5vw,52px); align-items:center; }
@media (max-width:900px){ .pd-grid{ grid-template-columns:1fr; } }
.pill{ display:inline-block; padding:6px 22px; border-radius:99px; background:#fff; color:#07102a; font-family:var(--f-display); font-weight:600; font-size:clamp(.85rem,1.6vw,1.1rem); letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; box-shadow:0 10px 30px -10px rgba(255,255,255,.5); }
.pd h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.9rem,4.8vw,3.4rem); line-height:1.1; letter-spacing:.02em; text-transform:uppercase; }
.pd h1 small{ display:block; font-size:.5em; letter-spacing:.06em; color:var(--cyan); margin-top:6px; font-weight:600; }
.pd-sum{ margin:16px 0 14px; color:var(--ink-dim); max-width:46ch; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tags span{ font-size:12px; padding:5px 14px; border-radius:99px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--ink-dim); }
.pd-price{ margin-bottom:22px; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600; }
.pd-price s{ font-size:.55em; color:var(--ink-faint); margin-left:10px; font-weight:600; }
.pd-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.variants{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.variants .chip{ text-transform:none; letter-spacing:.04em; font-family:var(--f-body); font-weight:600; text-align:left; padding:8px 16px; font-size:13px; }
.variants .chip small{ display:block; font-size:10.5px; color:var(--ink-dim); font-weight:600; }
.stage{ position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); display:grid; place-items:center; padding:7%;
  background:radial-gradient(80% 80% at 80% 0%,rgba(63,160,255,.55),transparent 60%), radial-gradient(70% 70% at 0% 100%,rgba(116,87,255,.3),transparent 60%), linear-gradient(160deg,#0a2a80,#050c2c 75%);
  border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 80px rgba(63,160,255,.16), 0 40px 80px -34px rgba(20,90,255,.8); overflow:hidden; }
@media (max-width:900px){ .stage{ aspect-ratio:4/3; } }
.stage img{ position:absolute; inset:7%; width:86%; height:86%; object-fit:contain; filter:drop-shadow(0 26px 36px rgba(0,0,0,.65)); opacity:0; transform:scale(.9) translateY(16px); transition:opacity .6s var(--ease), transform .7s var(--ease); }
.stage img.on{ opacity:1; transform:none; }
.stage .orb{ position:absolute; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(63,213,255,.4),transparent 65%); filter:blur(30px); animation:float 7s ease-in-out infinite; z-index:0; }
.stage img{ z-index:1; }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(56px,128px)); justify-content:start; gap:clamp(8px,1.4vw,16px); margin-top:clamp(20px,3vw,34px); padding:6px 4px 14px; }
.thumb{ width:100%; aspect-ratio:1; padding:10%; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.15); display:grid; place-items:center;
  background:linear-gradient(160deg,#0a2a80,#050c2c 75%); transition:transform .4s var(--spring), border-color .3s, box-shadow .3s; }
.thumb{ position:relative; }
.thumb img{ position:absolute; inset:10%; width:80%; height:80%; object-fit:contain; }
.thumb:hover{ transform:translateY(-4px); }
.thumb.on{ border-color:var(--cyan); box-shadow:0 0 0 2px rgba(63,213,255,.35), 0 14px 30px -10px rgba(63,213,255,.7); transform:translateY(-4px); }

/* ===== SPECIFICATION (ตามแบบ) ===== */
.spec{ margin-top:clamp(36px,6vw,70px); }
.spec-h{ font-family:var(--f-body); letter-spacing:0; font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.2; margin-bottom:18px; text-transform:none; }
.spec-card.glass{ position:relative; padding:clamp(6px,1vw,12px) clamp(18px,3.4vw,52px) 0; border-radius:clamp(22px,3vw,34px); background:#0a0b0d; border:1px solid #0d73d6;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 30px 70px -40px rgba(2,123,228,.5); }
.spec-card.glass::before{ display:none; }
.spec-body{ position:relative; max-height:clamp(400px,46vw,500px); overflow:hidden; transition:max-height .8s var(--ease); }
.spec-group{ padding:clamp(14px,2vw,26px) 0 2px; }
.spec-group h3{ font-size:clamp(1.15rem,2.3vw,1.7rem); color:#1385e6; margin:0 0 4px; line-height:1.3; }
.spec-row{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(12px,3vw,48px); align-items:end; padding:clamp(12px,1.8vw,20px) 0; border-bottom:1px solid #0d73d6; font-size:clamp(.88rem,1.5vw,1.2rem); line-height:1.45; }
.spec-row span{ color:#fff; } .spec-row b{ color:#fff; text-align:left; }
.spec-more{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:clamp(120px,16vw,170px); padding-bottom:clamp(12px,1.6vw,20px);
  background:linear-gradient(180deg,rgba(10,11,13,0),rgba(10,11,13,.92) 58%,#0a0b0d); pointer-events:none; border-radius:0 0 clamp(22px,3vw,34px) clamp(22px,3vw,34px); }
.spec-more button{ pointer-events:auto; background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 22px; color:#fff; font-size:clamp(.95rem,1.6vw,1.25rem); }
.spec-more svg{ width:clamp(30px,3.4vw,44px); height:auto; animation:bob 1.6s ease-in-out infinite; transition:transform .5s var(--ease); }
.spec-card.open .spec-more{ position:static; height:auto; background:none; padding:8px 0 14px; }
.spec-card.open .spec-more svg{ transform:rotate(180deg); animation:none; }

@keyframes bob{ 0%,100%{ transform:translateY(-2px);} 50%{ transform:translateY(5px);} }

.rv-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.rv-head .big{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.3rem,3vw,2rem); }
.rv-head .score{ display:inline-flex; align-items:center; gap:8px; font-size:18px; }
.rv-head .star{ font-size:30px; }
.hscroll{ display:flex; gap:clamp(12px,1.6vw,20px); overflow-x:auto; scroll-snap-type:x proximity; padding:6px 2px 18px; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll .review{ flex:0 0 min(340px,80%); scroll-snap-align:start; }
.hscroll .pcard{ flex:0 0 min(250px,64%); scroll-snap-align:start; }

/* ---------- About ---------- */
.about-card{ border-radius:var(--r-xl); padding:clamp(24px,4vw,52px); max-width:920px; }
/* About: จัดกล่องต้อนรับและการ์ดจุดเด่นให้อยู่กลางแนวนอน */
.about-card{ margin-inline:auto; }
.about-card h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.4rem,3.2vw,2.2rem); letter-spacing:.04em; margin-bottom:16px; }
.about-card p{ color:var(--ink-dim); font-size:clamp(14.5px,1.5vw,16.5px); margin-bottom:12px; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:26px; max-width:920px; }
.stats{ margin-inline:auto; }
.stat{ border-radius:var(--r-lg); padding:22px; text-align:center; }
.stat-icon{ display:grid; place-items:center; width:62px; height:62px; margin:0 auto 12px; border-radius:18px; color:#9ed5ff; background:linear-gradient(145deg,rgba(50,142,255,.19),rgba(48,86,205,.07)); border:1px solid rgba(123,186,255,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.13); }
.stat-icon svg{ width:32px; height:32px; }
.stat-label{ display:block; color:var(--ink-dim); font-size:14px; line-height:1.5; }
.stat b{ display:block; font-family:var(--f-display); font-size:clamp(1.8rem,4vw,2.8rem); background:linear-gradient(180deg,#fff,#6bb7ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ color:var(--ink-dim); font-size:13px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(16px,3vw,36px); align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.channels{ display:flex; flex-direction:column; gap:14px; }
.channel{ display:flex; align-items:center; gap:18px; padding:16px 22px 16px 16px; border-radius:var(--r-lg); transition:transform .45s var(--spring), border-color .3s; }
.channel:hover{ transform:translateX(8px); border-color:rgba(130,200,255,.55); }
.ch-ico{ flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:13px; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px -8px rgba(0,0,0,.6); }
.ch-ico.line{ background:#06c755; } .ch-ico.facebook{ background:#1877f2; font-size:22px; } .ch-ico.instagram{ background:linear-gradient(45deg,#f9a03f,#e1306c,#833ab4); }
.ch-ico.mail{ background:linear-gradient(135deg,#4aa0ff,#1747d6); } .ch-ico.phone{ background:linear-gradient(135deg,#34c8a0,#0b8a6a); }
.channel b{ display:block; font-weight:600; font-size:16px; } .channel small{ color:var(--ink-dim); font-size:13px; }
.channel em{ margin-left:auto; font-style:normal; color:var(--cyan); font-size:22px; transition:transform .4s var(--spring); }
.channel:hover em{ transform:translateX(6px); }
.info-card{ border-radius:var(--r-xl); padding:26px; text-align:center; }
.info-card h3{ font-size:13px; letter-spacing:.14em; color:var(--cyan); font-family:var(--f-display); text-transform:uppercase; margin-bottom:6px; }
.info-card p{ margin-bottom:20px; }
.qr{ width:min(220px,70%); margin:6px auto 0; padding:10px; border-radius:20px; background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.1), 0 24px 50px -16px rgba(63,213,255,.5); }
.stores{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.store{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 10px; border-radius:var(--r-lg); font-size:13px; text-align:center; transition:transform .45s var(--spring), border-color .3s; }
.store:hover{ transform:translateY(-6px); border-color:rgba(130,200,255,.55); }
.store-logo{ width:64px; height:64px; border-radius:18px; background:#fff; display:grid; place-items:center; padding:8px; overflow:hidden; }
.store-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.faq{ display:flex; flex-direction:column; gap:10px; max-width:860px; margin-inline:auto; }
.faq-item{ border-radius:var(--r-md); padding:0 20px; }
.faq-q{ width:100%; background:none; border:0; text-align:left; padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; font-weight:600; }
.faq-q::after{ content:"+"; flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.25); color:var(--cyan); transition:transform .4s var(--spring), background .3s; }
.faq-item.open .faq-q::after{ transform:rotate(135deg); background:rgba(63,213,255,.15); }
.faq .ans{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.faq-item.open .ans{ grid-template-rows:1fr; }
.faq .ans > div{ overflow:hidden; } .faq .ans p{ padding:0 0 18px; color:var(--ink-dim); font-size:14.5px; }

/* ---------- Modal (BUY HERE) & Search ---------- */
.overlay{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:16px; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
  background:rgba(2,4,12,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.overlay.open{ opacity:1; visibility:visible; }
.sheet{ width:min(480px,100%); border-radius:var(--r-xl); padding:26px; transform:translateY(40px) scale(.94); transition:transform .55s var(--spring);
  background:linear-gradient(150deg,rgba(60,100,200,.3),rgba(8,14,40,.85)); }
.overlay.open .sheet{ transform:none; }
.sheet h3{ font-family:var(--f-display); letter-spacing:.08em; font-size:1.2rem; margin-bottom:4px; }
.sheet > p{ color:var(--ink-dim); font-size:13.5px; margin-bottom:18px; }
.sheet-x{ position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); font-size:18px; line-height:1; z-index:3; transition:transform .4s var(--spring); }
.sheet-x:hover{ transform:rotate(90deg) scale(1.1); }
.buy-list{ display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto; }
.buy-row{ display:flex; align-items:center; gap:14px; padding:10px 16px 10px 10px; border-radius:var(--r-md); transition:transform .4s var(--spring), border-color .3s; }
.buy-row:hover{ transform:translateX(6px); border-color:rgba(130,200,255,.6); }
.buy-row .store-logo{ width:46px; height:46px; border-radius:14px; }
.buy-row b{ font-weight:600; } .buy-row small{ display:block; color:var(--ink-faint); font-size:12px; }
.buy-row em{ margin-left:auto; font-style:normal; color:var(--cyan); }
.search-ov{ align-items:start; padding-top:clamp(70px,12vh,130px); }
.search-box{ width:min(660px,100%); border-radius:var(--r-xl); padding:16px; transform:translateY(-20px) scale(.96); transition:transform .55s var(--spring); background:linear-gradient(150deg,rgba(60,100,200,.3),rgba(8,14,40,.88)); }
.overlay.open .search-box{ transform:none; }
.search-in{ display:flex; align-items:center; gap:12px; padding:6px 16px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }
.search-in svg{ width:20px; height:20px; flex:none; opacity:.8; }
.search-in input{ flex:1; min-width:0; height:46px; background:none; border:0; outline:0; color:#fff; font:inherit; font-size:17px; }
.search-in kbd{ font-family:var(--f-display); font-size:10px; padding:3px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.25); color:var(--ink-dim); }
.s-results{ margin-top:12px; max-height:52vh; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.s-row{ display:flex; align-items:center; gap:14px; padding:8px 12px 8px 8px; border-radius:var(--r-md); transition:background .25s, transform .35s var(--spring); }
.s-row:hover,.s-row.sel{ background:rgba(255,255,255,.1); transform:translateX(4px); }
.s-row .th{ flex:none; width:56px; height:44px; border-radius:10px; padding:4px; display:grid; place-items:center; background:linear-gradient(160deg,#0a2a80,#050c2c); }
.s-row .th img{ max-width:100%; max-height:100%; object-fit:contain; }
.s-row b{ font-weight:600; font-size:14.5px; display:block; line-height:1.3; } .s-row small{ color:var(--ink-faint); font-size:12px; }
.s-empty{ padding:24px; text-align:center; color:var(--ink-dim); }

/* ---------- Footer ---------- */
.foot{ margin-top:clamp(70px,10vw,140px); padding:0 0 28px; }
.foot-card{ border-radius:var(--r-xl); padding:clamp(22px,3.4vw,40px); display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px; align-items:start; }
@media (max-width:820px){ .foot-card{ grid-template-columns:1fr; } }
.foot-card img{ height:30px; width:auto; margin-bottom:12px; }
.foot-card p{ color:var(--ink-dim); font-size:13.5px; max-width:36ch; }
.foot-card h4{ margin:0 0 10px; font-family:var(--f-display); font-size:11px; letter-spacing:.2em; color:var(--cyan); text-transform:uppercase; }
.foot-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.foot-card li a{ color:var(--ink-dim); font-size:14px; transition:color .2s, padding .3s var(--spring); }
.foot-card li a:hover{ color:#fff; padding-left:6px; }
.copy{ text-align:center; margin-top:18px; color:var(--ink-faint); font-size:12.5px; }

.to-top{ position:fixed; right:18px; bottom:18px; z-index:150; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; padding:0;
  opacity:0; transform:translateY(20px) scale(.8); pointer-events:none; transition:opacity .4s, transform .5s var(--spring); }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top svg{ width:20px; height:20px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
  .hl > span,.hero-sub,.hero-copy .btn{ opacity:1; transform:none; }
}

[data-tilt].tilting{ transition:transform .12s linear, border-color .3s, box-shadow .4s, opacity .4s; }
.car-track{ position:relative; }
.page-hero + .container{ margin-top:30px !important; }

/* ---------- Contact: orbit BUY HERE ---------- */
.orbit-sec{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,70px); align-items:center; }
@media (max-width:860px){ .orbit-sec{ grid-template-columns:1fr; } }
.orbit{ --size:480px; --r:190px; --icon:88px; position:relative; width:var(--size); max-width:100%; aspect-ratio:1; margin:0 auto; }
@media (max-width:560px){ .orbit{ --size:320px; --r:125px; --icon:62px; } }
.orbit::before{ content:""; position:absolute; inset:calc(50% - var(--r)); border:1px dashed rgba(160,200,255,.28); border-radius:50%; animation:ringPulse 5s ease-in-out infinite; }
@keyframes ringPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(63,213,255,0); } 50%{ box-shadow:0 0 40px 2px rgba(63,213,255,.18); } }
.orbit-center{ position:absolute; top:50%; left:50%; width:132px; height:132px; margin:-66px 0 0 -66px; border-radius:50%; display:grid; place-items:center; z-index:2;
  border-color:rgba(100,180,255,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 50px rgba(47,123,255,.55); }
.orbit-center img{ width:68%; height:auto; }
.orbit-ring{ position:absolute; inset:0; animation:orbitSpin 32s linear infinite; }
.orbit-item{ position:absolute; top:50%; left:50%; width:var(--icon); height:var(--icon); margin:calc(var(--icon) / -2) 0 0 calc(var(--icon) / -2);
  transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.orbit-icon{ display:grid; place-items:center; width:100%; height:100%; padding:14%; border-radius:50%; background:#fff; overflow:hidden;
  box-shadow:0 0 0 4px rgba(255,255,255,.12), 0 14px 30px -8px rgba(0,0,0,.7); animation:orbitSpinRev 32s linear infinite; transition:filter .25s, box-shadow .3s; }
.orbit-icon img{ max-width:100%; max-height:100%; object-fit:contain; }
a.orbit-icon:hover{ filter:brightness(1.06); box-shadow:0 0 0 4px rgba(63,213,255,.6), 0 18px 36px -8px rgba(63,213,255,.6); }
.orbit:hover .orbit-ring,.orbit:hover .orbit-icon{ animation-play-state:paused; }
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
@keyframes orbitSpinRev{ to{ transform:rotate(-360deg); } }
.buy-copy h3{ font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:600; line-height:1.2; margin:6px 0 8px; }
.buy-copy > p{ color:var(--ink-dim); margin-bottom:20px; }
.store-list{ display:flex; flex-direction:column; gap:10px; max-width:460px; }
.buy-row.soon{ opacity:.6; }
.buy-row.soon:hover{ transform:none; border-color:var(--line); }
/* ช่องทางติดต่อ "เร็วๆ นี้" */
.channel.soon{ opacity:.62; cursor:default; border-style:dashed; }
.channel.soon:hover{ transform:none; border-color:rgba(255,255,255,.13); }
.soon-b{ margin-left:auto; font-family:var(--f-display); font-size:9.5px; letter-spacing:.14em; padding:5px 11px; border-radius:99px; border:1px solid rgba(255,255,255,.28); color:var(--ink-dim); white-space:nowrap; }
.ch-ico.tiktok{ background:#0a0a0a; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), -3px -2px 0 rgba(37,244,238,.85), 3px 2px 0 rgba(254,44,85,.85); font-size:12px; }
@media (prefers-reduced-motion:reduce){ .orbit-ring,.orbit-icon,.orbit::before{ animation:none; } }
@media (max-width:600px){ .hero h1{ font-size:8.4vw; } }

/* แถวเลื่อนข้าง: ลาก + ปุ่ม */
.hs-wrap{ position:relative; }
.hscroll{ cursor:grab; }
.hscroll.drag{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.hscroll img{ -webkit-user-drag:none; user-select:none; }
.hs-btn{ position:absolute; top:calc(50% - 9px); z-index:6; width:46px; height:46px; margin-top:-23px; padding:0; border-radius:50%;
  display:grid; place-items:center; font-size:24px; line-height:1; color:#fff; transition:transform .35s var(--spring); }
.hs-btn.prev{ left:-14px; } .hs-btn.next{ right:-14px; }
.hs-btn:hover{ transform:scale(1.12); }
.hs-btn[hidden]{ display:none; }
@media (hover:none){ .hs-btn{ display:none; } }  /* จอสัมผัสใช้ปัดนิ้วแทน */

.tile-s{ z-index:2; text-shadow:0 1px 10px rgba(0,0,0,.9); }
.pd-price.pop{ animation:pricePop .5s var(--spring); }
@keyframes pricePop{ 0%{ transform:scale(.9); opacity:.4; } 100%{ transform:none; opacity:1; } }

/* ตัวหนา semi bold ทั้งเว็บ */
body,b,strong,h1,h2,h3,h4,h5,h6,th,button,input,textarea,select,summary,small{ font-weight:600; }

/* =====================================================================
   MEGA MENU — กล่องข้อมูลเลื่อนลงตอนชี้เมนู
   ===================================================================== */
[hidden]{ display:none !important; }
.mega{ position:absolute; z-index:5; left:50%; top:calc(var(--nav-h) + 8px); width:min(980px,calc(100% - 24px)); height:0; overflow:hidden; border-radius:30px;
  transform:translateX(-50%) translateY(-14px) scale(.97); transform-origin:50% 0; opacity:0; pointer-events:none;
  background:linear-gradient(150deg,rgba(22,36,86,.82),rgba(6,10,28,.9)); -webkit-backdrop-filter:blur(30px) saturate(1.8); backdrop-filter:blur(30px) saturate(1.8);
  border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 40px 80px -30px rgba(0,0,0,.9), 0 0 60px -20px rgba(2,123,228,.5);
  transition:height .55s var(--ease), opacity .3s ease, transform .6s var(--spring); }
.mega.open{ opacity:1; transform:translateX(-50%); pointer-events:auto; }
.mega-in{ position:relative; }
.mega-pane{ position:absolute; top:0; left:0; right:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(18px,3vw,40px); align-items:center; padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,38px);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s ease, transform .45s var(--ease), visibility 0s .3s; }
.mega-pane.on{ opacity:1; visibility:visible; transform:none; transition:opacity .35s ease .08s, transform .55s var(--ease) .08s, visibility 0s; }
.mega-pane .mi{ opacity:0; transform:translateY(12px); }
.mega-pane.on .mi{ opacity:1; transform:none; transition:opacity .45s ease calc(var(--k,0) * 55ms + 120ms), transform .6s var(--ease) calc(var(--k,0) * 55ms + 120ms); }
.mega-pane:not(.on) .mi{ transition:none; }
.mega-l h3{ font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.25; margin:2px 0 8px; }
.mega-l p{ color:var(--ink-dim); font-size:14.5px; margin-bottom:14px; max-width:36ch; }
.meyebrow{ display:block; font-size:11px; letter-spacing:.2em; color:var(--cyan); }
.mlinks{ display:flex; flex-wrap:wrap; gap:8px; }
.mlink{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:99px; font-size:13.5px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); transition:background .25s, transform .35s var(--spring); }
.mlink span{ color:var(--cyan); transition:transform .3s var(--spring); }
.mlink:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); } .mlink:hover span{ transform:translateX(4px); }
.mega-r{ min-width:0; }
.mshow{ position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(90% 90% at 80% 0%,rgba(63,160,255,.5),transparent 60%),linear-gradient(160deg,#0a2a80,#050c2c 75%); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.mshow img{ position:absolute; inset:7%; width:86%; height:86%; object-fit:contain; opacity:0; transform:scale(.92); transition:opacity .8s ease, transform 1.4s var(--ease); filter:drop-shadow(0 14px 20px rgba(0,0,0,.55)); }
.mshow img.cover{ inset:0; width:100%; height:100%; object-fit:cover; filter:none; }
.mshow img.on{ opacity:1; transform:none; }
.mcats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.mcat{ display:flex; flex-direction:column; gap:3px; padding:8px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); transition:transform .45s var(--spring), border-color .3s, background .3s; }
.mcat:hover{ transform:translateY(-6px); border-color:rgba(130,200,255,.6); background:rgba(255,255,255,.1); }
.mcat-img{ position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#0a2a80,#050c2c 75%); }
.mcat-img img{ position:absolute; inset:10%; width:80%; height:80%; object-fit:contain; transition:transform .6s var(--ease); }
.mcat:hover .mcat-img img{ transform:scale(1.12) rotate(-2deg); }
.mcat b{ font-size:13.5px; padding:6px 4px 0; line-height:1.25; } .mcat small{ font-size:11.5px; color:var(--ink-dim); padding:0 4px 4px; }
.mega-pane:has(.mcontact){ grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
.mchips{ display:flex; flex-wrap:wrap; gap:8px; } .mhours{ margin-top:14px; color:var(--ink-dim); font-size:13.5px; }
.mch{ padding:9px 18px; border-radius:99px; font-size:13.5px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08); transition:background .25s, transform .35s var(--spring); }
a.mch:hover{ background:rgba(63,213,255,.22); transform:translateY(-2px); } .mch.soon{ opacity:.55; border-style:dashed; }
.mqr{ text-align:center; } .mqr img{ width:112px; border-radius:14px; background:#fff; padding:6px; box-shadow:0 0 0 4px rgba(255,255,255,.1); } .mqr small{ display:block; margin-top:6px; font-size:11.5px; color:var(--ink-dim); }
@media (max-width:760px), (hover:none){ .mega{ display:none; } }
@media (max-width:980px){ .mega-pane:has(.mcontact){ grid-template-columns:1fr 1fr; } .mqr{ display:none; } }

/* =====================================================================
   หน้า REVIEW (สไตล์ Apple × ZARO)
   ===================================================================== */
.rv-hero{ padding-top:calc(var(--nav-h) + 74px); }
.rv-title{ font-size:clamp(3.6rem,13vw,10rem); line-height:.95; letter-spacing:-.04em; margin:6px 0 14px;
  background:linear-gradient(180deg,#fff 25%,#2f8bff 130%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rv-sub{ font-size:clamp(1.05rem,2.3vw,1.75rem); line-height:1.4; color:var(--ink-dim); max-width:30ch; margin-bottom:30px; }
.seg{ position:relative; display:inline-flex; padding:5px; border-radius:999px; background:linear-gradient(140deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); max-width:100%; overflow-x:auto; scrollbar-width:none; }
.seg::-webkit-scrollbar{ display:none; }
.seg button{ position:relative; z-index:1; background:none; border:0; padding:10px clamp(14px,2.4vw,26px); border-radius:999px; color:var(--ink-dim); font-size:clamp(13px,1.6vw,15px); white-space:nowrap; transition:color .3s; }
.seg button.on{ color:#fff; }
.seg-thumb{ position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:linear-gradient(135deg,#4aa0ff,#027be4 55%,#1747d6); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px -8px rgba(2,123,228,.9); transition:transform .55s var(--spring), width .55s var(--spring); }

.rv-feature{ margin-top:clamp(34px,5vw,60px); }
.vfeat{ position:relative; display:block; width:100%; aspect-ratio:21/9; border-radius:clamp(22px,3.4vw,40px); overflow:hidden; padding:0; border:1px solid rgba(255,255,255,.16); background:#050c2c; text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 50px 90px -40px rgba(2,123,228,.7); isolation:isolate; }
.vfeat > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); z-index:-2; }
.vfeat:hover > img{ transform:scale(1.05); }
.vfeat-shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(2,4,10,.88) 0%,rgba(2,4,10,.15) 55%,rgba(2,4,10,.25) 100%); }
.vfeat-txt{ position:absolute; left:clamp(18px,3.4vw,44px); right:clamp(90px,16vw,200px); bottom:clamp(16px,3vw,38px); display:flex; flex-direction:column; gap:8px; }
.vfeat-txt strong{ font-size:clamp(1.15rem,3vw,2.3rem); line-height:1.2; }
.vfeat-by{ display:flex; align-items:center; gap:10px; color:var(--ink-dim); font-size:clamp(12.5px,1.4vw,15px); }
@media (max-width:760px){ .vfeat{ aspect-ratio:4/3; } .vfeat-txt{ right:18px; } }
.vph{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(90% 90% at 80% 0%,rgba(63,160,255,.45),transparent 60%),linear-gradient(160deg,#0a2a80,#050c2c 75%); }
.vph img{ width:34%; max-width:180px; opacity:.28; } .vph.big img{ width:22%; }
.vplay{ position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,rgba(255,255,255,.34),rgba(255,255,255,.1)); border:1px solid rgba(255,255,255,.4); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 14px 30px -8px rgba(0,0,0,.7); transition:transform .5s var(--spring), background .3s; }
.vplay svg{ width:44%; margin-left:6%; } .vplay.xl{ width:clamp(70px,9vw,104px); height:clamp(70px,9vw,104px); margin:calc(clamp(70px,9vw,104px) / -2) 0 0 calc(clamp(70px,9vw,104px) / -2); }
.vfeat:hover .vplay,.vcard:hover .vplay{ transform:scale(1.14); background:linear-gradient(140deg,rgba(63,160,255,.75),rgba(2,123,228,.45)); }
.vplay::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(255,255,255,.35); animation:ping 2.4s ease-out infinite; }
@keyframes ping{ 0%{ transform:scale(.85); opacity:.9; } 100%{ transform:scale(1.45); opacity:0; } }

.rv-sec{ scroll-margin-top:86px; }
.rv-sechead{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(16px,2.4vw,28px); }
.rv-sechead h2{ font-size:clamp(1.7rem,4.4vw,3rem); letter-spacing:-.01em; line-height:1.15; }
.rail-btns{ display:flex; gap:10px; } .rail-btns .btn{ width:46px; height:46px; font-size:20px; } .rail-btns .btn:disabled{ opacity:.35; pointer-events:none; }
.vrail{ --cw:min(1240px,100vw - clamp(32px,8vw,80px)); --gut:max(0px,calc((100vw - var(--cw)) / 2));
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px var(--gut) 26px; margin-inline:calc(var(--gut) * -1); scroll-padding-inline:var(--gut); scrollbar-width:none; }
.vrail::-webkit-scrollbar{ display:none; }
.vcard{ flex:0 0 min(430px,82vw); scroll-snap-align:start; display:flex; flex-direction:column; gap:14px; padding:0; border:0; background:none; text-align:left; cursor:pointer; color:inherit; }
.hscroll .vcard{ flex-basis:min(340px,80%); }
.vcard.soon{ cursor:default; }
.vmedia{ position:relative; display:block; aspect-ratio:16/10; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#050c2c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 26px 50px -26px rgba(2,123,228,.6); transition:transform .6s var(--spring), box-shadow .4s; }
.vmedia > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.vcard:not(.soon):hover .vmedia{ transform:translateY(-6px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 40px 60px -26px rgba(47,123,255,.85); }
.vcard:not(.soon):hover .vmedia > img{ transform:scale(1.07); }
.vbadge{ position:absolute; top:12px; left:12px; font-size:10px; letter-spacing:.16em; padding:4px 11px; border-radius:99px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.vsoon{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:11px; letter-spacing:.24em; padding:8px 18px; border-radius:99px; border:1px dashed rgba(255,255,255,.4); color:var(--ink-dim); white-space:nowrap; }
.vmeta{ display:flex; flex-direction:column; gap:6px; padding:0 6px; }
.vwho{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-dim); }
.vav{ flex:none; width:28px; height:28px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-style:normal; font-size:12px; background:linear-gradient(135deg,var(--cyan),var(--blue-2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.vav img{ width:100%; height:100%; object-fit:cover; }
.vtitle{ font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vtag{ align-self:flex-start; font-size:11.5px; padding:3px 12px; border-radius:99px; border:1px solid rgba(100,170,255,.45); color:#8cc4ff; background:rgba(47,123,255,.12); }

.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,19vw,250px); grid-auto-flow:dense; gap:clamp(10px,1.4vw,16px); }
.gtile{ position:relative; margin:0; border-radius:clamp(18px,2.4vw,28px); overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#050c2c; isolation:isolate; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25); transition:transform .6s var(--spring), border-color .3s, box-shadow .4s; }
.gtile.size-big{ grid-column:span 2; grid-row:span 2; } .gtile.size-wide{ grid-column:span 2; } .gtile.size-tall{ grid-row:span 2; }
.gtile > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); z-index:-1; }
.gtile:hover{ transform:translateY(-5px); border-color:rgba(130,200,255,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 34px 54px -28px rgba(47,123,255,.8); }
.gtile:hover > img{ transform:scale(1.08); }
.gtile figcaption{ position:absolute; left:0; right:0; bottom:0; padding:38px clamp(14px,2vw,22px) clamp(12px,1.6vw,20px); display:flex; flex-direction:column; gap:2px; background:linear-gradient(0deg,rgba(2,4,10,.82),transparent); font-size:clamp(13px,1.5vw,16px); }
.gtile figcaption span{ font-size:12px; color:var(--ink-dim); }
.gtile.soon{ cursor:default; background:radial-gradient(90% 90% at 80% 0%,rgba(63,160,255,.4),transparent 60%),linear-gradient(160deg,#0a2a80,#050c2c 75%); }
.gtile.soon:hover{ transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); border-color:rgba(255,255,255,.14); }
.gph{ position:absolute; inset:0; display:grid; place-items:center; z-index:-1; } .gph img{ width:30%; max-width:130px; opacity:.2; }
.gsoon{ position:absolute; right:14px; top:14px; font-size:10px; letter-spacing:.2em; padding:4px 11px; border-radius:99px; border:1px dashed rgba(255,255,255,.4); color:var(--ink-dim); }
@media (max-width:760px){ .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(130px,34vw,200px); } .gtile.size-big{ grid-column:span 2; grid-row:span 2; } }
[data-sec].flt{ animation:fltIn .7s var(--ease); } @keyframes fltIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:clamp(22px,3.4vw,40px); border-radius:var(--r-xl); }
.cta h3{ font-size:clamp(1.2rem,2.6vw,1.8rem); line-height:1.3; margin-bottom:4px; } .cta p{ color:var(--ink-dim); }

/* ---- popup วิดีโอ + lightbox ---- */
.media-ov{ background:rgba(2,4,12,.82); }
.vwrap{ width:min(1100px,100%); display:flex; flex-direction:column; align-items:center; gap:14px; transform:scale(.94) translateY(20px); transition:transform .6s var(--spring); }
.overlay.open .vwrap{ transform:none; }
.vbox{ width:100%; max-height:78vh; border-radius:clamp(14px,2vw,26px); overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.18); box-shadow:0 50px 100px -30px rgba(2,123,228,.6); }
.vbox.portrait{ width:auto; height:min(78vh,720px); max-width:100%; }
.vbox iframe,.vbox video{ width:100%; height:100%; border:0; display:block; }
.vcap{ font-size:14px; color:var(--ink-dim); text-align:center; }
.light-ov{ padding:clamp(10px,3vw,40px); }
.lfig{ margin:0; max-width:min(1200px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lfig.swap img{ animation:lbIn .6s var(--ease); } @keyframes lbIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.lfig img{ max-width:100%; max-height:76vh; object-fit:contain; border-radius:clamp(14px,2vw,24px); box-shadow:0 40px 90px -30px rgba(0,0,0,.9); }
.lfig figcaption{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; justify-content:center; } .lfig figcaption span,.lfig figcaption em{ color:var(--ink-dim); font-size:13px; font-style:normal; }
.light-nav{ position:absolute; top:50%; margin-top:-23px; z-index:3; width:48px; height:48px; font-size:22px; } .light-nav.prev{ left:clamp(8px,2vw,28px); } .light-nav.next{ right:clamp(8px,2vw,28px); }
.vsoon,.gsoon{ background:rgba(2,4,10,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.gsoon{ letter-spacing:0; font-size:11.5px; padding:5px 14px; }

  @media (min-width:601px){ .hero h1{ font-size:clamp(2.6rem,9vw,6.4rem); } }
/* Keep anchor headings visible below the sticky navigation. */
#buy { scroll-margin-top: 100px; }

/* About page: center only the ABOUT US heading; other page headers remain unchanged. */
body[data-page="about"] .page-hero .container{ text-align:center; }