/* Cảnh thời trang theo cuộn; chỉ áp dụng cho trang chủ. */
.scroll-lookbook { --header-height: 92px; overflow: clip; }
.scroll-scene, #san-pham { scroll-margin-top: 0; }
.scroll-lookbook .lookbook-block { overflow: clip; }
.scroll-lookbook .lookbook-inner { width: 86%; min-height: max(660px, calc(100svh - var(--header-height))); }
.scroll-lookbook .layout-hero .lookbook-inner { position: relative; z-index: 1; grid-template-columns: 45% 55%; padding: 35px 0 75px; }
.scroll-lookbook .layout-hero .lookbook-copy h1 { font-family: Unit, Arial, sans-serif; font-size: clamp(4rem, 7.4vw, 8rem); font-weight: 500; line-height: 1.02; letter-spacing: -.065em; }
.scroll-lookbook .layout-hero .lookbook-copy { padding: 20px 0; }
.scroll-lookbook .layout-hero .lookbook-description { max-width: 34ch; }
.scroll-lookbook .layout-hero .lookbook-collage { height: clamp(460px, 64svh, 760px); }
.scroll-lookbook .layout-hero .lookbook-disc { border-radius: 50%; transform: none; background: currentColor; opacity: .06; }
.scroll-lookbook .theme-navy::before { background: radial-gradient(ellipse at 65% 40%, #4a81aa, transparent 65%); opacity: .35; }
.scroll-brand { position: absolute; font-size: clamp(10rem, 32vw, 36rem); line-height: .8; letter-spacing: -.09em; font-weight: 700; left: 4%; bottom: -3%; opacity: .045; pointer-events: none; }
.scroll-explore { position: absolute; z-index: 4; bottom: 20px; right: 7%; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; }
.scroll-explore span { display: grid; place-items: center; }
.scroll-explore svg { display: block; width: 24px; height: 24px; }
.scroll-explore:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.scroll-explore[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .scroll-explore svg { animation: explore-nudge 2.2s ease-in-out infinite; }
}
@keyframes explore-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.scroll-lookbook .lookbook-main { transition: none; }
.scroll-lookbook .lookbook-main:hover { transform: none; }
.scroll-lookbook .layout-hero .lookbook-main img { animation: none; }
.scroll-lookbook .size-compact .lookbook-inner { min-height: 480px; }
.scroll-lookbook .layout-wide .lookbook-inner { width: 100%; }
.scroll-lookbook .size-compact .lookbook-collage { height: 360px; }
.scroll-lookbook .size-tall .lookbook-collage { height: 670px; }
.scroll-lookbook .size-tall .lookbook-inner { min-height: max(780px, calc(110svh - var(--header-height))); }
.scroll-lookbook .lookbook-video { position: relative; z-index: 5; }
.scene-navigation { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; padding: 7px 3px; border-radius: 28px; background: #ffffffed; color: #173745; box-shadow: 0 3px 24px #102d4b22; }
.scene-navigation[hidden] { display: none; }
.scene-navigation a { width: 38px; height: 40px; display: grid; place-items: center; position: relative; }
.scene-navigation a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8da0b2; }
.scene-navigation a[aria-current]::before { background: #195dc1; box-shadow: 0 0 0 5px #195dc11a; }
.scene-navigation .scene-name { position: absolute; right: 48px; width: max-content; max-width: 210px; padding: 6px 12px; font-size: .75rem; background: #173745; color: white; border-radius: 5px; opacity: 0; pointer-events: none; }
.scene-navigation a:hover .scene-name, .scene-navigation a:focus-visible .scene-name { opacity: 1; }
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
    .scroll-lookbook.motion-enabled .scroll-opening.is-pinned { height: calc(var(--opening-height) + 65vh); }
    .scroll-lookbook.motion-enabled .is-pinned > .lookbook-block { position: sticky; top: var(--header-height); }
    .scroll-lookbook.motion-enabled .scroll-opening .lookbook-main { transform: translate3d(0, var(--opening-shift, 0px), 0) scale(var(--opening-scale, 1)); transform-origin: center 60%; }
    .scroll-lookbook.motion-enabled .scroll-opening .lookbook-detail { transform: translate3d(var(--detail-shift, 0px), 0, 0); }
    .scroll-lookbook.motion-enabled .is-pinned .lookbook-copy { transform: translate3d(0, var(--copy-shift, 0px), 0); }
}
/* Chuyển động của cảnh giới thiệu cũng hoạt động trên máy tính bảng. */
.story-title-line { display: block; overflow: clip; padding-block: .06em; margin-block: -.06em; }
.story-title-line > span { display: block; }
.scroll-lookbook .story-scene .lookbook-cta { transition: transform .25s ease, box-shadow .25s ease; }
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
    .scroll-lookbook.story-motion-enabled .story-scene .lookbook-main img { transform: translate3d(0, var(--scene-shift, 0px), 0) scale(1.045); }
    .scroll-lookbook.story-motion-enabled .story-scene .fit-contain .lookbook-main img { transform: translate3d(0, var(--scene-shift, 0px), 0); }
    .scroll-lookbook.story-motion-enabled .story-scene .lookbook-disc { transform: scale(var(--disc-scale, 1)); }
    .scroll-lookbook .story-scene .lookbook-inner { min-height: max(560px, calc(100svh - var(--header-height))); }
    .scroll-lookbook .story-scene .size-compact .lookbook-inner { min-height: 480px; }
    .scroll-lookbook .story-scene .size-tall .lookbook-inner { min-height: max(780px, calc(110svh - var(--header-height))); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .scroll-lookbook .story-scene .lookbook-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #00000012; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-lookbook .story-scene .lookbook-cta { transition: none; }
}
/* Vừa vùng nhìn trên laptop, kể cả khi thanh công cụ hoặc mức thu phóng chiếm nhiều chiều cao. */
@media (min-width: 1001px) and (max-height: 800px) {
    .scroll-lookbook .layout-hero.size-standard .lookbook-inner { min-height: calc(100svh - var(--header-height)); padding: 20px 0 64px; }
    .scroll-lookbook .layout-hero.size-standard .lookbook-collage { height: max(280px, calc(100svh - var(--header-height) - 100px)); }
    .scroll-lookbook .layout-hero.size-standard .lookbook-copy { padding: 10px 0; }
    .scroll-lookbook .layout-hero.size-standard .lookbook-copy h1 { font-size: clamp(3.1rem, min(7.4vw, 11svh), 6rem); margin-bottom: 20px; }
    .scroll-lookbook .layout-hero.size-standard .lookbook-label { margin-bottom: 12px; }
    .scroll-lookbook .layout-hero.size-standard .lookbook-description { line-height: 1.65; }
    .scene-navigation { max-height: calc(100dvh - 120px); overflow-y: auto; }
}
@media (max-width: 1000px) { .scene-navigation { display: none; } }
@media (max-width: 700px) {
    .scroll-lookbook .lookbook-inner, .scroll-lookbook .layout-hero .lookbook-inner { width: 88%; min-height: 0; padding: 35px 0 65px; grid-template-columns: 1fr; }
    .scroll-lookbook .layout-hero .lookbook-copy h1 { font-size: clamp(3rem, 13vw, 5rem); }
    .scroll-lookbook .layout-hero .lookbook-collage { height: 410px; }
    .scroll-lookbook .size-compact .lookbook-collage { height: 300px; }
    .scroll-lookbook .layout-hero.has-video .lookbook-collage { height: auto; }
    .scroll-lookbook .size-tall .lookbook-collage { height: 520px; }
    .scroll-lookbook .has-video .lookbook-collage { height: auto; }
    .scroll-explore { bottom: 10px; right: 6%; }
    .scroll-brand { bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }