/* User reference, 9 November: static white navigation, editorial hero and fanned photo cards. */
:root{--header-height:44px}
#tham-gia,#trai-nghiem,#the-vip,#faq,#so-do-khong-gian{scroll-margin-top:calc(var(--header-height) + 16px)}
.nav{height:var(--header-height);margin:0;padding:0 32px;grid-template-columns:140px minmax(0,1fr) 180px;grid-template-areas:'brand links contact';gap:24px;background:var(--color-paper);color:var(--color-ink);box-shadow:none;transition:none}
.nav .logo{grid-area:brand;width:120px;height:36px;max-width:none;display:flex;gap:16px;align-items:center}
.nav .logo img{position:static;width:calc(50% - 8px);height:100%;object-fit:contain}
.nav .links{grid-area:links;justify-self:center;gap:24px;font-size:14px;white-space:nowrap}
.nav .links a{transition:none}.nav .links a:hover{color:var(--color-accent);opacity:1}
.nav .book{grid-area:contact;position:static;justify-self:end;box-sizing:border-box;width:180px;height:44px;margin:0;padding:0 14px;background:var(--color-ink);color:var(--color-paper);font-size:12px;letter-spacing:0}
.nav .book:hover,.nav .book:focus-visible{background:var(--color-accent);color:var(--color-paper)}
.nav .menu-toggle{grid-area:menu;margin:0;padding:8px 0;color:var(--color-ink)}
.menu-toggle span,.menu-toggle[aria-expanded=true] span{transform:none;transition:none}
.mobile-menu{top:var(--header-height);margin:0;box-shadow:0 1px 0 var(--color-rule)}
.hero-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;padding:92px 40px 76px;background:var(--color-paper)}
.hero-copy{grid-column:5 / span 7;min-width:0;max-width:840px}
.hero-eyebrow{margin:0 0 6px;color:var(--color-muted);font:600 16px/1.4 var(--font-body);letter-spacing:-.4px}
.hero-copy h1{margin:0;color:var(--color-ink);font:500 clamp(32px,3.1vw,48px)/1.16 var(--font-body);letter-spacing:-1.5px;max-width:850px}
.hero-consult{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:34px;color:var(--color-muted);font:600 14px/1.4 var(--font-body);letter-spacing:0}
.hero-consult:hover,.hero-consult:focus-visible{color:var(--color-accent);text-decoration:none}.hero-consult>span{font-size:24px;font-weight:300}
.hero-stage{position:relative;margin:0 16px;isolation:isolate}
.hero-stage .hero{display:block;width:100%;height:auto;aspect-ratio:2600 / 1347;object-fit:contain;border-radius:5px;transform:none;background:var(--color-ink)}
.hero-location{position:absolute;left:20px;bottom:36px;box-sizing:border-box;width:400px;max-width:38%;padding:18px 20px 20px;background:var(--color-paper);color:var(--color-ink);border-radius:3px}
.hero-location>p{margin:0 0 4px;font:500 16px/1.4 var(--font-body);color:var(--color-muted)}
.hero-location h2{margin:0;font:500 28px/1.22 var(--font-body);letter-spacing:-.6px}
.hero-location>a{display:inline-flex;align-items:center;gap:10px;margin-top:20px;min-height:36px;color:var(--color-muted);font:600 13px/1.4 var(--font-body);letter-spacing:0}
.hero-location>a:hover{color:var(--color-accent);text-decoration:none}.hero-location>a>span{font-size:22px;font-weight:300}
.hero-consult:focus-visible,.hero-location a:focus-visible,.nav a:focus-visible{outline:3px solid var(--color-ink);outline-offset:4px}
.roadmap-tabs{top:var(--header-height)}
.event-overview{margin:0 0 100px}
.jexperience{padding-top:100px;margin-bottom:100px;overflow-x:clip}
.experience-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;align-items:center;max-width:1200px;margin:0 auto 110px}
.experience-intro>.jphoto{grid-column:1 / span 5;aspect-ratio:1.35}
.experience-intro>div:last-child{grid-column:7 / span 6;min-width:0}
.experience-intro h2{margin:0 0 16px;color:var(--color-accent);font:600 26px/1.2 var(--font-body);letter-spacing:-.5px}
.experience-intro p{margin:0 0 20px;font:500 18px/1.5 var(--font-body)}
.experience-intro .jtext-link{color:var(--color-muted);font-size:14px}
.jexperience>.stitle{text-align:center;border:0;padding:0;max-width:900px;margin:0 auto 20px}
.experience-stack{position:relative;isolation:isolate;min-width:0;width:100%;height:clamp(360px,calc(38vw + 110px),690px);touch-action:pan-y;outline-offset:-4px;user-select:none}
.experience-card{position:absolute;left:50%;top:32px;box-sizing:border-box;width:60%;margin-left:-30%;padding:12px;border:1px solid rgba(0,16,64,.14);border-radius:12px;background:var(--color-paper);color:var(--color-ink);text-align:left;box-shadow:0 24px 52px rgba(0,16,64,.12);transform-origin:50% 65%;will-change:transform;overflow:hidden;cursor:grab!important}
.experience-card .jphoto{aspect-ratio:8 / 5;border-radius:6px}
.experience-card-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:68px;padding:8px 10px 0;font:500 20px/1.25 var(--font-body);letter-spacing:-.5px}
.experience-card-foot>span{max-width:85%}.experience-card-foot small{flex:none;color:var(--color-muted);font:500 12px/1.4 var(--font-body);letter-spacing:2px}
.experience-dim{position:absolute;inset:0;background:var(--color-ink);pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .6s}
.experience-card[data-slot='0']{z-index:10;transform:none}
.experience-card[data-slot='1']{z-index:8;transform:translateX(48%) rotate(4deg) scale(.84)}
.experience-card[data-slot='-1']{z-index:8;transform:translateX(-48%) rotate(-4deg) scale(.84)}
.experience-card[data-slot='2']{z-index:1;transform:scale(.72);opacity:0;pointer-events:none}
.experience-card:not([data-slot='0']) .experience-dim{opacity:.12}
.experience-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;width:60%;margin:0 auto}
.experience-picks{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px}
.experience-picks button,.experience-play{padding:8px 0;min-height:44px;border:0;background:var(--color-clear);color:var(--color-muted);font:500 14px/1.3 var(--font-body);letter-spacing:inherit}
.experience-picks button{border-bottom:1px solid var(--color-clear)}
.experience-picks button[aria-pressed=true],.experience-picks button:hover{color:var(--color-accent);border-color:currentColor}
.experience-play{display:flex;align-items:center;gap:12px;font-size:12px;margin-left:auto}
.experience-play:hover{color:var(--color-ink)}
.experience-copy{box-sizing:border-box;width:60%;margin:30px auto 0;min-height:190px}
.experience-label{color:var(--color-muted);margin-bottom:10px}
.experience-description{margin:0 0 22px;font:500 22px/1.45 var(--font-body);max-width:42ch}
.experience-copy .programme-actions{gap:8px 32px}
@media(min-width:1800px){.hero-intro{max-width:1720px;margin:auto}.hero-stage{max-width:1720px;margin-inline:auto}.experience-stack{height:720px}}
@media(max-width:1100px){:root{--header-height:44px}.nav{padding:0 24px;grid-template-columns:minmax(0,1fr) auto 160px;grid-template-areas:'brand menu contact';gap:24px}.nav .links{display:none}.nav .menu-toggle{display:flex;font-size:14px}.nav .book{width:160px;height:44px;font-size:11px}.nav .logo{width:108px;height:34px}.hero-intro{padding:72px 32px 64px}.hero-copy{grid-column:4 / span 9}.hero-eyebrow{font-size:13px}.hero-copy h1{font-size:38px}.hero-location{bottom:28px;max-width:43%;width:340px;padding:16px}.hero-location h2{font-size:24px}.hero-location>p{font-size:14px}.experience-card-foot{font-size:16px;min-height:58px}.experience-stack{height:calc(39vw + 110px)}.experience-picks{gap:8px 16px}.experience-picks button{font-size:12px}.experience-intro{gap:24px}.experience-intro h2{font-size:24px}.experience-intro p{font-size:16px}}
@media(max-width:700px){.nav{padding:0 20px;grid-template-columns:minmax(0,1fr) auto 132px;gap:16px}.nav .logo{width:92px;height:34px;gap:12px}.nav .logo img{width:calc(50% - 6px)}.nav .book{width:132px;font-size:10px;padding:0 8px}.hero-intro{display:block;padding:52px 24px 42px}.hero-eyebrow{font-size:11px;line-height:1.5;max-width:40ch;margin-bottom:12px}.hero-copy h1{font-size:32px;line-height:1.17;letter-spacing:-1px}.hero-consult{margin-top:24px;font-size:11px;gap:8px}.hero-stage{margin:0 12px}.hero-stage .hero{border-radius:4px}.hero-location{position:static;width:auto;max-width:none;margin:0 8px;padding:22px 0;border-bottom:1px solid var(--color-rule)}.hero-location h2{font-size:25px;max-width:25ch}.hero-location>a{margin-top:14px;font-size:11px;min-height:40px}.hero-location>p{font-size:13px}.jexperience{padding-top:72px;margin-bottom:72px}.experience-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:72px}.experience-intro>.jphoto,.experience-intro>div:last-child{grid-column:1}.experience-intro>.jphoto{aspect-ratio:1.5}.experience-intro h2{font-size:24px}.experience-intro p{font-size:16px}.jexperience>.stitle{font-size:34px;max-width:320px;line-height:1.1;margin-bottom:8px}.experience-card{width:76%;margin-left:-38%;padding:7px;border-radius:8px;top:24px}.experience-card .jphoto{border-radius:4px;aspect-ratio:1.35}.experience-card-foot{font-size:13px;gap:8px;min-height:62px;padding:8px 3px 0}.experience-card-foot>span{max-width:82%}.experience-card-foot small{font-size:9px;letter-spacing:0}.experience-stack{height:calc(57vw + 125px);min-height:300px}.experience-toolbar,.experience-copy{width:100%}.experience-toolbar{gap:8px}.experience-picks{gap:8px 14px;justify-content:space-between;flex:1}.experience-picks button{font-size:11px}.experience-play{font-size:11px}.experience-copy{margin-top:20px;min-height:230px}.experience-description{font-size:18px}.experience-copy .jtext-link{font-size:14px}.event-overview{margin-bottom:60px}}
@media(max-width:359px){.nav{padding-inline:16px;gap:12px;grid-template-columns:minmax(0,1fr) auto 118px}.nav .logo{width:80px}.nav .book{width:118px;font-size:9px}.nav .menu-toggle{font-size:12px}.hero-copy h1{font-size:29px}.hero-intro{padding-inline:20px}.experience-picks{gap:8px 10px}.experience-picks button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.experience-card,.experience-dim{transition:none!important;will-change:auto}.experience-copy{animation:none!important}}
