/* ============================================================
   Toys Uncle — Trang chủ  ·  home.css
   Gallery / triển lãm editorial. Mobile-first.
   Font rule: tiêu đề tiếng Việt = Be Vietnam Pro (đậm).
   Lora chỉ cho: logo, "Việt Nam", chữ Latin đã kiểm tra.
   ============================================================ */

:root{
  --orange:#F6A251;
  --ink:#1C1614;
  --orange-deep:#C56A23;
  --cream:#FBF6EE;
  --kraft:#6B5847;
  --ochre:#E7C9A0;
  --sea:#2F9C93;          /* accent vui cho Key-chill hè */
  --sea-deep:#1F726B;
  --line:#6B584733;
  --line-soft:#6B584720;
  --serif:'Lora',Georgia,serif;
  --body:'Be Vietnam Pro',system-ui,sans-serif;
  --maxw:1340px;
  --pad:clamp(20px,5vw,64px);
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--cream);color:var(--ink);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* Tranh chu mo coi (1 chu rot dong): can dong cho de doc, giu tron cau */
h1,h2,h3,h4,.sec-title,.pos-statement,.hero-headline,.exh-title{text-wrap:balance;}
p,.lede,.hero-lede,.sec-intro,.eyebrow,figcaption,.store-addr span{text-wrap:pretty;}
/* link "sap co" (TikTok chua co kenh): hien mo, khong bam/khong nhay len dau trang */
.foot-col a.soon{opacity:.5;cursor:default;}

/* lang visibility */
[data-lang]{display:none;}
body[data-active="vi"] [data-lang="vi"]{display:revert;}
body[data-active="en"] [data-lang="en"]{display:revert;}
/* inline variant (keeps flow) */
.t[data-lang]{display:none;}
body[data-active="vi"] .t[data-lang="vi"]{display:inline;}
body[data-active="en"] .t[data-lang="en"]{display:inline;}

/* paper grain helper */
.grain{position:relative;}
.grain::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.45;background-image:var(--paper);}
.grain>*{position:relative;z-index:1;}

/* reveal-on-scroll — visible by default; hidden only when JS active, revealed via .in.
   Uses a transition (not a CSS animation): the .in end-state applies even when the
   animation is deferred (offscreen render), so content is never stuck hidden. */
.reveal{opacity:1;transform:none;}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);}
html.js .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;}}

/* reveal STAGGER: cac the trong luoi xuat hien lan luot cho muot (chi desktop, ton trong reduced-motion) */
@media(min-width:821px) and (prefers-reduced-motion:no-preference){
  html.js :is(.benefits,.process,.exhibit-grid,.aud-grid,.social-grid,#zodiac-grid)>.reveal:nth-child(2){transition-delay:.07s;}
  html.js :is(.benefits,.process,.exhibit-grid,.aud-grid,.social-grid,#zodiac-grid)>.reveal:nth-child(3){transition-delay:.14s;}
  html.js :is(.benefits,.process,.exhibit-grid,.aud-grid,.social-grid,#zodiac-grid)>.reveal:nth-child(4){transition-delay:.21s;}
  html.js :is(.benefits,.social-grid,#zodiac-grid)>.reveal:nth-child(5){transition-delay:.28s;}
  html.js :is(.benefits,.social-grid,#zodiac-grid)>.reveal:nth-child(n+6){transition-delay:.35s;}
}
/* micro-interaction: anh san pham/cung hoang dao hoi phong khi hover */
.zodiac-card img,.gframe-img img,.store-logo{transition:transform .35s cubic-bezier(.2,.7,.2,1);}
@media(prefers-reduced-motion:no-preference){
  .zodiac-card:hover img{transform:scale(1.05);}
  .store-card:hover .store-logo{transform:scale(1.06);}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:#FBF6EEcc;backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s;}
.site-header.scrolled{border-bottom-color:var(--line);background:#FBF6EEee;}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;flex-direction:column;line-height:1;}
.brand-logo{height:clamp(26px,3vw,34px);width:auto;display:block;}
.brand .wm{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.2vw,24px);letter-spacing:-.01em;}
.brand .wm .u{color:var(--orange-deep);font-style:italic;}
/* Logo mở ra slogan (ý từ Artiox): slogan ẩn, "mở ra" sau khi vào trang, thu lại khi cuộn */
.brand .slogan{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.2em;line-height:1.6;text-transform:none;color:var(--kraft);white-space:nowrap;margin-top:0;max-height:0;opacity:0;transform:translateY(-3px);overflow:hidden;transition:max-height .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),margin-top .55s cubic-bezier(.2,.7,.2,1);}
.brand.open .slogan{max-height:18px;opacity:1;transform:none;margin-top:2px;}
.site-header.scrolled .brand .slogan{max-height:0;opacity:0;transform:translateY(-3px);margin-top:0;}
@media(prefers-reduced-motion:reduce){.brand .slogan{max-height:18px;opacity:1;transform:none;margin-top:2px;transition:none;}}

.main-nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);}
.nav-links{display:flex;gap:clamp(16px,1.9vw,28px);}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink);opacity:.82;transition:opacity .18s;position:relative;padding:4px 0;}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1;}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);border-radius:2px;}

.lang-toggle{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;flex:none;}
.lang-toggle button{font-family:var(--body);font-weight:600;font-size:12px;border:none;background:transparent;color:var(--ink);min-height:34px;padding:0 13px;cursor:pointer;transition:.18s;}
.lang-toggle button.on{background:var(--ink);color:var(--cream);}

.hamb{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;min-height:44px;min-width:44px;align-items:center;justify-content:center;}
.hamb i{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s;}
.hamb.open i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamb.open i:nth-child(2){opacity:0;}
.hamb.open i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* mobile menu sheet */
.mobile-sheet{position:fixed;inset:0 0 0 auto;width:min(82vw,360px);background:var(--cream);z-index:55;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);box-shadow:-30px 0 60px -30px #1C161455;padding:96px var(--pad) 40px;display:flex;flex-direction:column;gap:6px;}
.mobile-sheet.open{transform:none;}
.mobile-sheet a{font-family:var(--serif);font-size:24px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--line-soft);}
.mobile-sheet .u{color:var(--orange-deep);font-style:italic;}
.sheet-backdrop{position:fixed;inset:0;background:#1C161455;z-index:54;opacity:0;pointer-events:none;transition:opacity .3s;}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}

/* ============================================================
   Buttons / links (shared)
   ============================================================ */
.btn-cta{font-family:var(--body);font-weight:600;font-size:15px;background:var(--orange);color:var(--ink);border:none;border-radius:999px;min-height:52px;padding:0 28px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;transition:background .18s,color .18s,transform .18s,box-shadow .18s;box-shadow:0 10px 26px -16px #C56A2399;}
.btn-cta:hover{background:var(--orange-deep);color:#fff;transform:translateY(-2px);}
.btn-cta svg{width:18px;height:18px;flex:none;}
.link-arrow{font-weight:600;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:7px;border-bottom:1.5px solid #1C161433;padding-bottom:3px;min-height:24px;transition:border-color .18s,color .18s,gap .18s;}
.link-arrow:hover{color:var(--orange-deep);border-color:var(--orange-deep);gap:11px;}
.btn-ghost{font-family:var(--body);font-weight:600;font-size:15px;background:transparent;color:var(--ink);border:1.6px solid var(--ink);border-radius:999px;min-height:52px;padding:0 26px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:.18s;}
.btn-ghost:hover{background:var(--ink);color:var(--cream);}

/* eyebrow + section heading system */
.eyebrow{font-size:clamp(11px,1.1vw,12.5px);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--orange-deep);}
.sec-title{font-family:var(--body);font-weight:800;letter-spacing:-.025em;line-height:1.04;font-size:clamp(28px,4vw,46px);}
.sec-title .ser{font-family:var(--serif);font-weight:600;font-style:italic;color:var(--orange-deep);letter-spacing:-.01em;}
.sec-intro{color:#3a302b;font-size:clamp(15px,1.4vw,17px);max-width:54ch;}

/* ============================================================
   HERO
   ============================================================ */
/* Vertical "gallery" hero — images are the hero; NO drum motif / circles / rays behind. */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(108px,13vw,140px) var(--pad) clamp(56px,7vw,84px);}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.45;background-image:var(--paper);}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1160px;margin:0 auto;}

/* top row: kicker + collection label */
.hero-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px 24px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:clamp(30px,4.5vw,52px);}
.hero-kick{font-family:var(--body);font-weight:600;font-size:clamp(11px,1.05vw,12.5px);letter-spacing:.26em;line-height:1.7;color:var(--orange-deep);}
.hero-kick .dim{color:var(--kraft);font-weight:500;}
.hero-coll{font-family:var(--serif);font-style:italic;font-size:clamp(13px,1.3vw,15px);color:var(--kraft);white-space:nowrap;}

/* gallery row of 4 portrait frames, hung like paintings, staggered heights */
.gallery{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2.4vw,34px);margin-bottom:clamp(38px,5.5vw,66px);}
.gframe{flex:1 1 0;max-width:236px;min-width:0;display:flex;flex-direction:column;}
.gframe-img{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#F1E2CB,#E6D0AE);box-shadow:0 22px 44px -28px rgba(28,22,20,.45);}
.gframe-img .slot{position:absolute;inset:0;width:100%;height:100%;}
.gframe-img .gph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#9c8a74;background:#FBF6EEcc;padding:5px 10px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;}
.gframe-img img{width:100%;height:100%;object-fit:cover;display:block;}
.gframe figcaption{font-family:var(--body);font-style:italic;font-weight:500;font-size:clamp(12px,1.2vw,14px);color:var(--kraft);margin-top:12px;text-align:center;}
.gframe:nth-child(odd) .gframe-img{aspect-ratio:1/1;}
.gframe:nth-child(even) .gframe-img{aspect-ratio:1/1;margin-top:clamp(18px,3vw,40px);}

/* headline + copy — centered exhibition poster */
.hero-headline{font-family:var(--body);font-weight:800;color:var(--ink);font-size:clamp(33px,5.5vw,74px);line-height:1.0;letter-spacing:-.035em;text-align:center;max-width:15ch;margin:0 auto;text-wrap:balance;}
.hero-headline em{font-family:var(--serif);font-style:italic;color:var(--orange);font-weight:600;font-size:1.06em;letter-spacing:-.015em;}
.hero-lede{font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:#3a302b;max-width:48ch;margin:clamp(18px,2.4vw,26px) auto 0;text-align:center;}
.hero-fine{font-size:clamp(11.5px,1.05vw,13px);letter-spacing:.06em;color:var(--kraft);text-align:center;margin-top:12px;}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-top:clamp(24px,3vw,34px);}

.scrollcue{position:absolute;z-index:5;left:50%;transform:translateX(-50%);bottom:22px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--kraft);}
.scrollcue span{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;}
.scrollcue .ln{width:1px;height:34px;background:linear-gradient(var(--kraft),transparent);animation:cue 1.8s ease-in-out infinite;transform-origin:top;}
@keyframes cue{0%,100%{transform:scaleY(.5);opacity:.5;}50%{transform:scaleY(1);opacity:1;}}

/* hero intro stagger — TRANSFORM-ONLY slide; opacity stays 1 at all times so content is
   visible under every render condition (hidden tab / offscreen / paused animation). */
.intro{opacity:1;transform:none;}
@media(prefers-reduced-motion:no-preference){
  html.js .intro{animation:introSlide .8s cubic-bezier(.2,.7,.2,1) both;}
  html.js .intro.d1{animation-delay:.10s;}
  html.js .intro.d2{animation-delay:.24s;}
  html.js .intro.d3{animation-delay:.38s;}
  html.js .intro.d4{animation-delay:.52s;}
}
@keyframes introSlide{from{transform:translateY(20px);}to{transform:none;}}

/* ============================================================
   POSITIONING STRIP
   ============================================================ */
.positioning{padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--line);}
.pos-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:start;}
.pos-statement{font-family:var(--body);font-weight:800;letter-spacing:-.025em;line-height:1.06;font-size:clamp(26px,3.8vw,46px);}
.pos-statement .ser{font-family:var(--serif);font-weight:600;font-style:italic;color:var(--orange-deep);}
.pos-notes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.pos-note{background:var(--cream);padding:22px 20px;}
.pos-note .n{font-family:var(--serif);font-style:italic;color:var(--orange-deep);font-size:15px;}
.pos-note p{font-size:14px;color:var(--ink);margin-top:8px;font-weight:500;line-height:1.45;}

/* ============================================================
   EXHIBITIONS (collections)
   ============================================================ */
.exhibitions{padding:clamp(56px,8vw,104px) 0;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px);}
.sec-head .left{max-width:60ch;}
.sec-head .eyebrow{margin-bottom:14px;}
.exhibit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,28px);}
.exhibit-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--cream);display:flex;flex-direction:column;min-height:clamp(360px,40vw,460px);transition:transform .25s ease,box-shadow .25s ease;}
.exhibit-card:hover{transform:translateY(-5px);box-shadow:0 28px 56px -30px #1C161544;}
.exh-cover{position:relative;flex:1;min-height:230px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.exh-cover .slot{position:absolute;inset:0;width:100%;height:100%;}
.exh-num{position:absolute;top:16px;left:18px;z-index:3;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink);background:#FBF6EEcc;backdrop-filter:blur(2px);padding:4px 11px;border-radius:999px;border:1px solid var(--line);}
.exh-tag{position:absolute;top:16px;right:18px;z-index:3;font-size:11px;font-weight:600;letter-spacing:.04em;padding:5px 11px;border-radius:999px;text-transform:uppercase;}
.exh-body{padding:22px clamp(20px,2vw,26px) 24px;border-top:1px solid var(--line);background:var(--cream);}
.exh-name{font-family:var(--body);font-weight:800;letter-spacing:-.02em;font-size:clamp(22px,2.4vw,28px);line-height:1.06;}
.exh-en{font-family:var(--serif);font-style:italic;color:var(--kraft);font-size:14px;margin-top:3px;}
.exh-desc{font-size:14px;color:var(--kraft);margin-top:11px;line-height:1.5;max-width:42ch;}
.exh-foot{margin-top:18px;}

/* themed gradient cover background, per variant */
.exh-scene{position:absolute;inset:0;}
.exh-ph{position:relative;z-index:2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#9c8a74;background:#FBF6EEbb;padding:6px 12px;border-radius:999px;border:1px solid var(--line);}

/* variant palettes */
.var-rucro .exh-scene{background:linear-gradient(150deg,#F8D9A8,#F3B574);}
.var-rucro .exh-tag{background:var(--ink);color:var(--cream);}
.var-motvong .exh-scene{background:linear-gradient(150deg,#EFE4D2,#E4CBA8);}
.var-motvong .exh-tag{background:var(--orange);color:var(--ink);}
.var-keychill .exh-scene{background:linear-gradient(150deg,#9FE0D6,#46B3A8);}
.var-keychill{border-color:#2F9C9340;}
.var-keychill .exh-name{color:var(--ink);}
.var-keychill .exh-tag{background:var(--sea);color:#fff;}
.var-keychill .exh-foot .link-arrow{color:var(--sea-deep);border-color:#2F9C9355;}
.var-keychill .exh-foot .link-arrow:hover{color:var(--sea-deep);border-color:var(--sea-deep);}
.var-keychill .exh-num{color:var(--sea-deep);}
.var-nep .exh-scene{background:linear-gradient(155deg,#2A2320,#15110F);}
.var-nep{background:#1C1614;border-color:#ffffff14;color:var(--cream);}
.var-nep .exh-body{background:#1C1614;border-top-color:#ffffff16;}
.var-nep .exh-name{color:var(--cream);}
.var-nep .exh-en{color:#FBF6EE99;}
.var-nep .exh-desc{color:#FBF6EE99;}
.var-nep .exh-num{background:#00000055;color:var(--cream);border-color:#ffffff22;}
.var-nep .exh-tag{background:#ffffff18;color:var(--cream);}
.var-nep .exh-ph{background:#00000055;color:#FBF6EE99;border-color:#ffffff22;}
.var-nep .link-arrow{color:var(--ochre);border-color:#E7C9A055;}
.var-nep .link-arrow:hover{color:#fff;border-color:#fff;}

/* ============================================================
   TIER B — Dòng quà khác (Zodiac) trên trang chủ, tone galaxy riêng
   ============================================================ */
.tier-b{margin-top:clamp(20px,3vw,32px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center;background:radial-gradient(120% 140% at 0% 0%,#3a2b63,#221943 55%,#160f2e);border:1px solid #ffffff14;border-radius:22px;padding:clamp(28px,4vw,52px);color:#EDE7FF;overflow:hidden;}
.tier-b-text .eyebrow{color:#C9B6FF;}
.tier-b-title{font-family:var(--body);font-weight:800;letter-spacing:-.02em;font-size:clamp(26px,3.4vw,40px);line-height:1.05;margin:12px 0 0;color:#fff;}
.tier-b-title em{font-family:var(--serif);font-style:italic;font-weight:600;color:#C9A6FF;}
.tier-b-text p{color:#CBC0EAcc;font-size:clamp(14px,1.3vw,16px);max-width:46ch;margin:14px 0 22px;line-height:1.6;}
.tier-b-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tier-b-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:1px solid #ffffff1f;background:#160f2e;}
@media(max-width:760px){.tier-b{grid-template-columns:1fr;}.tier-b-thumbs{grid-template-columns:repeat(4,1fr);}}

/* ============================================================
   AUDIENCE
   ============================================================ */
.audience{padding:clamp(56px,8vw,100px) 0;}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3.6vw,42px);}
.aud-card{border:1px solid var(--line);border-radius:18px;padding:clamp(24px,2.4vw,32px);background:var(--cream);display:flex;flex-direction:column;min-height:200px;transition:transform .22s ease,border-color .22s ease,background .22s;}
.aud-card:hover{transform:translateY(-4px);border-color:var(--orange);}
.aud-idx{font-family:var(--serif);font-style:italic;color:var(--orange-deep);font-size:16px;}
.aud-title{font-family:var(--body);font-weight:800;letter-spacing:-.02em;font-size:clamp(20px,2.1vw,25px);margin-top:14px;}
.aud-sub{font-size:14.5px;color:var(--kraft);margin-top:8px;line-height:1.5;flex:1;}
.aud-card .link-arrow{margin-top:18px;align-self:flex-start;}

/* ============================================================
   STORY
   ============================================================ */
.story{padding:clamp(60px,9vw,116px) 0;}
.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,68px);align-items:center;}
.story-visual{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:linear-gradient(160deg,#EFE0CA,#E3CCA8);}
.story-visual .slot{position:absolute;inset:0;width:100%;height:100%;}
.story-visual .ph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#9c8a74;background:#FBF6EEcc;padding:6px 13px;border-radius:999px;border:1px solid var(--line);}
.story-text .eyebrow{margin-bottom:16px;}
.story-text h2{margin-bottom:20px;}
.story-text p{font-size:clamp(15px,1.45vw,17.5px);line-height:1.72;color:#332b27;max-width:52ch;}
.story-text .btn-ghost{margin-top:26px;}
.story-sign{font-family:var(--serif);font-style:italic;color:var(--kraft);margin-top:18px;font-size:15px;}

/* ============================================================
   PRESENCE
   ============================================================ */
.presence{padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.presence-row{display:flex;align-items:center;gap:clamp(20px,4vw,48px);flex-wrap:wrap;}
.presence-label{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kraft);flex:none;}
.markers{display:flex;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;align-items:center;}
.marker{display:flex;align-items:center;gap:11px;}
.marker .pin{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;flex:none;}
.marker .pin svg{width:17px;height:17px;}
.marker b{font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:-.01em;}
.marker span{display:block;font-size:12px;color:var(--kraft);}
.press-slot{margin-top:28px;border:1px dashed var(--line);border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:14px;color:var(--kraft);font-size:13.5px;background:#6B58470a;}
.press-slot .dot{width:8px;height:8px;border-radius:50%;background:var(--kraft);opacity:.5;flex:none;}

/* presence — logo wall điểm bán & đối tác B2B */
.presence-head{display:flex;align-items:baseline;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,32px);}
.presence-stat{font-size:14px;color:var(--kraft);}
.presence-stat b{font-family:var(--body);font-weight:800;color:var(--orange-deep);font-size:18px;}
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,16px);}
.logo-cell{display:flex;flex-direction:column;align-items:center;gap:8px;}
.logo-cell img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(10px,1.2vw,16px);filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s,transform .2s,box-shadow .2s;}
.logo-cell:hover img{filter:grayscale(0);opacity:1;transform:translateY(-3px);box-shadow:0 16px 30px -20px #1C161455;}
.logo-cell span{font-size:11px;color:var(--kraft);text-align:center;line-height:1.25;}
.presence .presence-row{margin-top:clamp(30px,4vw,46px);}
.b2b-block{margin-top:clamp(30px,4vw,44px);padding-top:clamp(24px,3vw,32px);border-top:1px dashed var(--line);}
.b2b-block .presence-label{display:block;margin-bottom:16px;}
.logo-wall.b2b{grid-template-columns:repeat(2,1fr);max-width:340px;}
@media(max-width:920px){.logo-wall{grid-template-columns:repeat(4,1fr);}}
@media(max-width:560px){.logo-wall{grid-template-columns:repeat(3,1fr);}}

/* ============================================================
   SOCIAL FEED
   ============================================================ */
.social{padding:clamp(56px,8vw,104px) 0;}
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(26px,3.6vw,42px);}
.social-card{position:relative;aspect-ratio:9/14;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#F0E2CC,#E6D0AE);display:flex;align-items:flex-end;}
.social-card .slot{position:absolute;inset:0;width:100%;height:100%;}
.social-card .meta{position:relative;z-index:2;width:100%;padding:14px;background:linear-gradient(transparent,#1C161488);display:flex;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:600;}
.social-card .meta svg{width:16px;height:16px;flex:none;}
.social-ph{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#9c8a74;background:#FBF6EEcc;padding:5px 11px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{padding:clamp(56px,8vw,104px) 0;}
.fc-box{position:relative;overflow:hidden;border-radius:26px;background:var(--ink);color:var(--cream);padding:clamp(40px,6vw,84px) clamp(28px,5vw,80px);text-align:center;}
.fc-box::before{content:"";position:absolute;inset:0;background-image:var(--paper);mix-blend-mode:overlay;opacity:.4;pointer-events:none;}
.fc-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;}
.fc-box .eyebrow{color:var(--orange);}
.fc-box h2{font-family:var(--body);font-weight:800;letter-spacing:-.03em;line-height:1.04;font-size:clamp(30px,4.6vw,58px);margin:14px 0 8px;max-width:18ch;}
.fc-box h2 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--orange);}
.fc-box p{color:#FBF6EEbb;max-width:46ch;font-size:clamp(15px,1.5vw,17px);}
.fc-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;margin-top:28px;}
.fc-box .link-arrow{color:var(--ochre);border-color:#E7C9A055;}
.fc-box .link-arrow:hover{color:#fff;border-color:#fff;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#15110F;color:#FBF6EEcc;padding:clamp(48px,6vw,80px) 0 32px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,48px);}
.foot-brand .wm{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--cream);}
.foot-logo{height:clamp(32px,3.4vw,40px);width:auto;display:block;margin-bottom:4px;}
.foot-brand .wm .u{color:var(--orange);font-style:italic;}
.foot-brand .tag{font-family:var(--serif);font-style:italic;color:var(--ochre);margin-top:8px;font-size:15px;}
.foot-brand p{margin-top:14px;font-size:13.5px;color:#FBF6EE88;max-width:34ch;line-height:1.6;}
.foot-col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#FBF6EE66;font-weight:600;margin-bottom:16px;}
.foot-col a,.foot-col p{display:block;font-size:14px;color:#FBF6EEcc;padding:6px 0;line-height:1.4;transition:color .18s;}
.foot-col a:hover{color:var(--orange);}
.foot-bottom{max-width:var(--maxw);margin:clamp(36px,5vw,56px) auto 0;padding:22px var(--pad) 0;border-top:1px solid #ffffff14;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#FBF6EE66;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .foot-brand{grid-column:1/-1;}
}
@media(max-width:920px){
  .nav-links{display:none;}
  .hamb{display:flex;}
  .hero-headline{font-size:clamp(32px,8.5vw,54px);}
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,22px);}
  .gframe{max-width:none;}
  .gallery .gframe:nth-child(n) .gframe-img{margin-top:0;aspect-ratio:3/4;}
  .scrollcue{display:none;}
  .pos-grid{grid-template-columns:1fr;gap:32px;}
  .story-grid{grid-template-columns:1fr;gap:30px;}
  .story-visual{order:-1;}
  .social-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  .hero{padding-top:88px;}
  .exhibit-grid{grid-template-columns:1fr;}
  .aud-grid{grid-template-columns:1fr;}
  .pos-notes{grid-template-columns:1fr;}
  .hero-actions .btn-cta{width:100%;justify-content:center;}
  .fc-actions .btn-cta{width:100%;justify-content:center;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px;}
}
@media(max-width:430px){
  .hero-headline{font-size:clamp(31px,10.5vw,46px);}
  .social-grid{grid-template-columns:1fr 1fr;}
}
/* phone: 4 gallery frames become a horizontal snap carousel */
@media(max-width:520px){
  .gallery{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start;align-items:flex-start;gap:14px;padding:4px var(--pad) 10px;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);-webkit-overflow-scrolling:touch;}
  .gallery::-webkit-scrollbar{display:none;}
  .gallery .gframe{flex:0 0 62%;max-width:none;scroll-snap-align:center;}
  .gallery .gframe:nth-child(n) .gframe-img{aspect-ratio:3/4;margin-top:0;}
}


/* ============================================================
   HERO v2 — Artiox-style scroll journey (gallery -> "Toys Uncle" tách đôi -> message)
   ============================================================ */
.hero2{position:relative;height:260vh;}
.hero2-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);}
.hero2-pin::before{content:"";position:absolute;inset:0;background-image:var(--paper);mix-blend-mode:multiply;opacity:.45;pointer-events:none;z-index:0;}
.h2-kick{position:absolute;top:clamp(92px,12vh,118px);left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap;max-width:1160px;margin:0 auto;padding:0 var(--pad) 16px;border-bottom:1px solid var(--line);}
.h2-gallery{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:clamp(16px,2.4vw,34px);will-change:transform,opacity;}
.h2-gallery .gframe{flex:0 0 auto;width:clamp(116px,13vw,196px);display:flex;flex-direction:column;will-change:transform;}
.h2-gallery .gframe-img{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#F1E2CB,#E6D0AE);box-shadow:0 22px 44px -28px rgba(28,22,20,.45);aspect-ratio:1/1;}
.h2-gallery .gframe:nth-child(even) .gframe-img{margin-top:0;}
.h2-gallery figcaption{font-family:var(--body);font-style:italic;font-weight:500;font-size:clamp(11px,1vw,13px);color:var(--kraft);margin-top:10px;text-align:center;}
.h2-stage{position:absolute;inset:0;z-index:1;}
/* logo Toys Uncle nguyên khối; JS dieu khien dua vao giua + phong to + hoa tan */
.h2-logo{position:absolute;left:50%;top:50%;height:clamp(64px,12vw,152px);width:auto;transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity;z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;}
.h2-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);z-index:3;width:min(760px,92vw);text-align:center;opacity:0;will-change:transform,opacity;}
.h2-msg .hero-headline{margin:0 auto;}
.h2-msg .hero-lede{margin:clamp(16px,2vw,24px) auto 0;}
.h2-msg .hero-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:clamp(22px,3vw,32px);}
.hero2 .scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;z-index:4;}

@media(max-width:820px){
  .hero2{height:auto;}
  .hero2-pin{position:static;height:auto;flex-direction:column;align-items:stretch;padding:clamp(96px,22vw,130px) var(--pad) clamp(48px,10vw,64px);}
  .h2-kick{position:static;max-width:none;margin:0 0 clamp(26px,6vw,40px);}
  .h2-gallery{position:static;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;width:auto;gap:14px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 10px;-webkit-overflow-scrolling:touch;justify-content:flex-start;}
  .h2-gallery::-webkit-scrollbar{display:none;}
  .h2-gallery .gframe{flex:0 0 62%;width:auto;scroll-snap-align:center;}
  .h2-gallery .gframe:nth-child(even) .gframe-img{margin-top:0;}
  .h2-stage{position:static;display:flex;flex-direction:column;align-items:center;}
  .h2-logo{position:static;opacity:1;transform:none;height:clamp(46px,13vw,72px);margin:clamp(30px,7vw,44px) auto 0;}
  .h2-msg{position:static;transform:none;opacity:1;width:auto;margin-top:clamp(20px,5vw,28px);}
  .h2-msg .hero-headline{text-align:center;}
  .hero2 .scrollcue{display:none;}
}