/* V18 responsive reading layout: content determines each chapter's height. */
html{scroll-padding-top:100px}
.scene.clean-cover{position:absolute;inset:0;height:100%;width:100%}
.static .scene.clean-cover{position:relative;height:auto;aspect-ratio:16/9}
body.responsive-flow #journey{height:auto!important}
body.responsive-flow .sticky{position:relative;height:auto;overflow:visible;display:block}
body.responsive-flow .stage{width:100%;aspect-ratio:auto;overflow:visible}
body.responsive-flow .scene{position:relative!important;height:auto!important;min-height:0!important;display:flex;flex-direction:column;gap:24px;padding:48px clamp(20px,5vw,64px)!important;overflow:hidden;scroll-margin-top:96px;container-type:inline-size}
body.responsive-flow .scene>*{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;height:auto;min-height:0;margin:0!important;flex-shrink:0;transform:none!important}
body.responsive-flow .scene>:not(.media){height:auto!important;aspect-ratio:auto}
body.responsive-flow .scene .chapter{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;order:-10}
body.responsive-flow .scene .chapter>*{min-width:0;max-width:100%}
body.responsive-flow .scene p,body.responsive-flow .scene [data-edit]{overflow-wrap:anywhere}
body.responsive-flow .scene p{font-size:1rem!important;line-height:1.65!important;max-width:65ch}
body.responsive-flow .scene h1,body.responsive-flow .scene h2,body.responsive-flow .scene h2 [data-edit],html[lang=vi] body.responsive-flow .scene h2 [data-edit]{font-size:clamp(2rem,5.4vw,3.5rem)!important;line-height:1.16!important;letter-spacing:-.03em!important}
body.responsive-flow .scene h3{font-size:1.3rem!important;line-height:1.35}
body.responsive-flow .scene .fine,body.responsive-flow .scene .fine [data-edit],body.responsive-flow .scene figcaption{font-size:.875rem!important;line-height:1.6!important}
body.responsive-flow .scene .kicker,body.responsive-flow .scene .label{font-size:.875rem!important;line-height:1.5;letter-spacing:.1em}
body.responsive-flow .scene .copy,body.responsive-flow .scene [class$="-copy"],body.responsive-flow .scene .campaign-side{padding:0!important;background:transparent!important;text-align:left}
body.responsive-flow .scene h2+p,body.responsive-flow .scene p+p{margin-top:16px!important}
body.responsive-flow .scene>.media{aspect-ratio:4/3;height:auto!important;border-radius:12px}
body.responsive-flow .scene>.media.contain{aspect-ratio:4/3}
body.responsive-flow .scene>.copy,body.responsive-flow .scene>[class$="-copy"],body.responsive-flow .scene>.press-title,body.responsive-flow .scene>.guideline-title,body.responsive-flow .scene>.campaign-heading,body.responsive-flow .scene>.triptych-title,body.responsive-flow .scene>.workflow-title,body.responsive-flow .scene>.memories-title{order:-5}
body.responsive-flow .scene>.media.cf-portrait{order:0}
body.responsive-flow .scene .scope{margin:24px 0}
body.responsive-flow .scene .stats{gap:32px;flex-wrap:wrap;margin:24px 0}
body.responsive-flow .scene .stats strong{font-size:3rem!important}
body.responsive-flow .scene .stats span{font-size:.875rem!important}
body.responsive-flow .scene .process,body.responsive-flow .scene .event-flow{display:flex;flex-wrap:wrap;gap:16px;font-size:.875rem;line-height:1.5;padding-top:20px}
body.responsive-flow .scene .source-label{text-align:left;font-size:.875rem}
body.responsive-flow .scene .number{font-size:clamp(5rem,18vw,8rem)!important;margin:20px 0!important;line-height:1.1}
body.responsive-flow .scene .number small{font-size:.875rem;white-space:normal;display:block;margin:8px 0}
body.responsive-flow .scene .big-metric>span{font-size:5rem!important}
body.responsive-flow .scene.hero:after{display:none}
body.responsive-flow .scene .side{text-align:left}
body.responsive-flow .scene .bridge,body.responsive-flow .scene .future{text-align:left}
body.responsive-flow .scene .socials{flex-wrap:wrap;gap:20px}
body.responsive-flow .scene.closing a{font-size:1rem;overflow-wrap:anywhere}
body.responsive-flow .scene .closing-cutout{aspect-ratio:3/4;max-height:480px}
body.responsive-flow .scene .closing-cutout img{object-fit:contain}
body.responsive-flow .scene .plan-stack,body.responsive-flow .scene .workflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body.responsive-flow .scene .plan-stack article,body.responsive-flow .scene .workflow-grid article{padding-top:16px;min-width:0}
body.responsive-flow .scene .press-layout{position:relative;inset:auto;width:100%;display:grid;grid-template-columns:1fr;gap:24px;height:auto}
body.responsive-flow .scene .press-layout>*{position:relative;inset:auto;width:100%;height:auto;min-width:0}
body.responsive-flow .scene .articles{position:relative;inset:auto;width:100%;gap:24px}
body.responsive-flow .scene .articles article{padding-bottom:20px}
body.responsive-flow .scene .articles a{font-size:.875rem;line-height:1.6}
body.responsive-flow .scene .event-designs,body.responsive-flow .scene .event-moments,body.responsive-flow .scene .seasonal-details,body.responsive-flow .scene .triptych-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;height:auto!important}
body.responsive-flow .scene .triptych-images{grid-template-columns:repeat(3,minmax(0,1fr))}
body.responsive-flow .scene .event-designs .media,body.responsive-flow .scene .event-moments .media,body.responsive-flow .scene .seasonal-details .media,body.responsive-flow .scene .triptych-images .media{width:100%;height:auto;aspect-ratio:3/4;min-width:0;border-radius:8px}
body.responsive-flow .scene .sj-artworks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;grid-template-rows:auto}
body.responsive-flow .scene .sj-artworks figure{height:auto;overflow:visible;gap:12px}
body.responsive-flow .scene .sj-artworks .media{height:auto;aspect-ratio:3/4;flex:none}
body.responsive-flow .scene .system-art{height:clamp(300px,68vw,620px)!important;min-height:0}
body.responsive-flow .scene .kj-group{padding-bottom:58px}
body.responsive-flow .scene .kj-tabs{margin-top:24px}
body.responsive-flow .scene .kj-tabs button{font-size:.875rem!important;min-height:44px}
body.responsive-flow .scene .swatches{height:32px;min-height:32px}
body.responsive-flow .scene .memory-album{height:auto!important;aspect-ratio:4/3}
body.responsive-flow .scene .journey-steps{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:20px;width:100%;font-size:.875rem}
body.responsive-flow .scene .album{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;margin:0!important}
body.responsive-flow .scene .album-screen{height:auto!important;max-height:none;min-height:0;aspect-ratio:16/9}
body.responsive-flow .scene .album-screen.is-portrait{aspect-ratio:9/16;max-width:320px;margin-inline:auto}
body.responsive-flow .scene .album-tabs,body.responsive-flow .scene .album-nav{display:flex;flex-wrap:wrap;gap:8px;position:relative;inset:auto;height:auto}
body.responsive-flow .scene .album-tabs{margin-bottom:12px}
body.responsive-flow .scene .album-nav{margin-top:12px}
body.responsive-flow .scene .album-tabs button,body.responsive-flow .scene .album-nav button{font-size:.875rem!important;min-height:44px;padding:10px 12px;white-space:normal}
body.responsive-flow .scene .album-external{font-size:.875rem;line-height:1.5;overflow-wrap:anywhere}
body.responsive-flow .scene .album-play{font-size:.875rem;max-width:90%;white-space:normal;min-height:44px}
body.responsive-flow .scene .direct-library{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;order:10}
body.responsive-flow .scene .direct-open{width:100%;padding:16px;white-space:normal}
body.responsive-flow .scene .v10-film-addition{position:relative;inset:auto;width:100%;height:auto;order:10}
body.responsive-flow .scene .film-drawer{position:relative;inset:auto;width:100%;max-width:100%}
body.responsive-flow .scene .film-drawer summary{font-size:.875rem;min-height:44px}
body.responsive-flow .scene .booth-label{font-size:.875rem!important}
body.responsive-flow .scene .booth-render{order:0}body.responsive-flow .scene .render-label{order:1}body.responsive-flow .scene .booth-built{order:2}body.responsive-flow .scene .built-label{order:3}
body.responsive-flow .clean-cover{gap:20px;padding-top:32px!important}
body.responsive-flow .clean-cover .cf-grid,body.responsive-flow .clean-cover .cf-orbit,body.responsive-flow .clean-cover .cf-portal{display:none}
body.responsive-flow .clean-cover .cf-topline{font-size:.75rem;display:flex;flex-wrap:wrap;gap:12px}
body.responsive-flow .clean-cover .cf-headline,body.responsive-flow .clean-cover .cf-headline [data-edit],html[lang=vi] body.responsive-flow .clean-cover .cf-headline [data-edit]{font-size:clamp(3.25rem,12vw,6.5rem)!important;line-height:1.12!important;letter-spacing:0!important}
body.responsive-flow .clean-cover .cf-surname{margin-left:8%}
body.responsive-flow .clean-cover .cf-role{font-size:.875rem}
body.responsive-flow .clean-cover .cf-statement{font-size:clamp(1.3rem,3vw,1.75rem)!important}
body.responsive-flow .clean-cover .cf-fine{font-size:.875rem!important;max-width:60ch!important}
body.responsive-flow .clean-cover .cf-portrait{aspect-ratio:4/3;max-height:520px;mask-image:linear-gradient(black 85%,transparent);overflow:visible}
body.responsive-flow .clean-cover .cf-glass-tag{padding:14px 18px;align-self:flex-start;width:auto!important;font-size:.75rem}
body.responsive-flow .clean-cover .cf-glass-tag b{font-size:1rem}
body.responsive-flow .clean-cover .cf-bottom{font-size:.75rem;display:flex;flex-wrap:wrap;gap:12px;line-height:1.5;padding-top:16px}
body.responsive-flow header{position:sticky;inset:0 0 auto;height:auto;min-height:72px;padding:12px clamp(16px,4vw,48px);gap:12px;flex-wrap:wrap;background:#eef2eff5;backdrop-filter:blur(14px)}
body.responsive-flow .signature{font-size:1rem}body.responsive-flow .signature small{display:none}
body.responsive-flow .tools{gap:8px;flex-wrap:wrap;align-items:center}
body.responsive-flow header button{min-width:44px;min-height:44px;font-size:.875rem;padding:10px 12px}
body.responsive-flow #motion-toggle{display:none}
body.responsive-flow footer{display:none!important}
body.responsive-flow .progress{height:3px}
body.responsive-flow #index-dialog{padding:16px;max-height:100dvh;overflow:auto}
body.responsive-flow .index-panel{width:min(100%,720px);max-height:calc(100dvh - 32px);overflow:auto}
body.responsive-flow .index-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.responsive-flow .index-list button{min-height:48px;font-size:.875rem;min-width:0}
.direct-dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.direct-dialog .direct-controls{min-width:0}
@media(max-width:600px){body.responsive-flow .plan-stack,body.responsive-flow .workflow-grid,body.responsive-flow .sj-artworks,body.responsive-flow .triptych-images,body.responsive-flow .seasonal-details,body.responsive-flow .index-list{grid-template-columns:1fr!important}body.responsive-flow .triptych-images .media{aspect-ratio:4/3}body.responsive-flow header{gap:8px}body.responsive-flow .tools{gap:4px}body.responsive-flow header button{padding:8px;font-size:.8125rem}body.responsive-flow .scene .sj-artworks .media{aspect-ratio:4/3}}
@media(max-width:1100px),(max-height:600px){.direct-layout{display:flex;flex-direction:column;gap:16px}.direct-controls{display:contents}.direct-screen{order:1}.direct-groups{order:0}.direct-nav{order:2;width:100%}.direct-strip{order:3;flex-wrap:nowrap;overflow-x:auto;width:100%;padding:4px}.direct-strip button{flex-shrink:0}.direct-note{order:5}.direct-reload{order:4}.direct-editor{order:6}.direct-screen.is-portrait{width:min(100%,32dvh);height:auto;min-height:0;aspect-ratio:9/16;align-self:center}.direct-dialog{padding:16px}.direct-title{font-size:1.25rem!important}}

/* Usability review: natural chapter sizing, touch navigation and reduced motion. */
body.responsive-flow .scene,body.responsive-flow.static .scene.clean-cover{aspect-ratio:auto!important}
body.responsive-flow .scene button,body.responsive-flow .gallery-nav button{min-width:44px;min-height:44px}
body.responsive-flow .post-gallery{padding-bottom:52px}
body.responsive-flow .gallery-nav{height:48px}
body.responsive-flow .clean-cover .cf-surname{margin-left:0;max-width:100%}
body.responsive-flow{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body.responsive-flow footer{display:flex!important;position:fixed;inset:auto 0 0;height:auto;min-height:60px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:#eef2eff5;backdrop-filter:blur(14px);z-index:60;gap:12px}
body.responsive-flow footer .footer-brand{display:none}
body.responsive-flow .footer-nav{flex:1;justify-content:space-between;min-width:0;gap:8px}
body.responsive-flow .footer-nav button{min-width:44px;min-height:44px;padding:8px}
body.responsive-flow .footer-nav .readout{max-width:none;flex:1;text-align:center;font-size:12px;min-width:0}
body.responsive-flow #counter{font-size:12px;white-space:nowrap}
body.responsive-flow .index-card{width:min(720px,100%);max-height:calc(100dvh - 32px);padding:20px;overscroll-behavior:contain}
.index-head{position:sticky;top:-20px;background:#f2f4ef;z-index:2;padding-block:12px}
body.index-open,body:has(dialog:modal){overflow:hidden}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #966483;outline-offset:3px}
button:disabled{opacity:.45;cursor:default}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-height:500px){body.responsive-flow header{min-height:60px;padding-block:8px}body.responsive-flow .scene{padding-block:32px!important}.direct-dialog .direct-screen:not(.is-portrait){width:min(100%,55dvh * 16 / 9);align-self:center}}

/* Inline playback actions and one language toggle. */
.album-external{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;cursor:pointer}
#language-toggle{min-width:52px;min-height:44px;font-weight:600}

/* Video libraries expand in the section without browser focus scrolling. */
.film-drawer:modal{position:fixed!important;inset:0!important;margin:auto!important;width:min(980px,94vw)!important;max-height:calc(100dvh - 32px)!important}
body.responsive-flow .scene dialog[data-inline-video],body.static .scene dialog[data-inline-video]{position:relative!important;inset:auto!important;margin:20px 0 0!important;width:100%!important;max-width:100%!important;max-height:none!important;overflow:visible;box-shadow:none;padding:20px}
body.responsive-flow .scene .direct-library:has(dialog[data-inline-video][open]){max-width:100%;width:100%}
dialog[data-inline-video] .film-close,dialog[data-inline-video] .direct-close{min-width:44px;min-height:44px}
dialog[data-inline-video] .album-screen{max-height:none}

/* Keep the section heading; suppress redundant headings and single-choice tabs. */
.film-drawer>h3{display:none!important}
.album-tabs[hidden]{display:none!important}

/* Native video fills the AI playback frame and keeps its controls accessible. */
.album-screen>video.uploaded-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain;z-index:4;background:#152421}

/* V24 compact AI categories and full FUNDOO guideline. */
.ai-album .album-tabs{display:block!important;margin-bottom:12px}
.ai-group-select{width:100%;max-width:100%;min-height:46px;padding:10px 36px 10px 14px;border:1px solid currentColor;border-radius:12px;background:#eef3ef;color:#273b37;font:inherit;cursor:pointer}
.ai-group-select:focus-visible,.fundoo-guideline-link:focus-visible{outline:3px solid #a87b43;outline-offset:4px}
.fundoo-guideline-link{display:inline-flex;align-items:center;min-height:44px;max-width:100%;margin-top:12px;padding:10px 16px;border:1px solid currentColor;border-radius:24px;color:inherit;font-size:14px;line-height:1.4;text-decoration:none}
.fundoo-guideline-link:hover{background:#dce7df}

/* V25: warm closing chapter with the new portrait. */
.scene.closing-v25{background:radial-gradient(ellipse at 88% 18%,#ddcbb1 0,transparent 55%),linear-gradient(135deg,#f6f1e7,#e7ded0);color:#293b35}
.scene.closing-v25 .closing-portrait{position:absolute;left:auto;right:8%;top:12%;bottom:auto;width:29%;height:76%;border-radius:46% 46% 18px 18px;background:#d8c7ad;overflow:hidden;box-shadow:0 18px 48px #65513b22;border:1px solid #ffffffaa}
.scene.closing-v25 .closing-portrait img{position:static;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.scene.closing-v25 .copy{width:48%;top:20%}
body.responsive-flow .scene.closing-v25 .closing-portrait{position:relative;inset:auto;width:min(100%,360px);height:auto;aspect-ratio:9/14;margin:28px auto 8px;order:1;align-self:center;max-height:none}
body.responsive-flow .scene.closing-v25 .copy{position:relative;inset:auto;width:100%;order:0}
body.responsive-flow .scene.closing-v25 .closing-portrait img{position:absolute;inset:0;object-fit:cover}

/* V27: preserve headroom in Kieu Oanh's right portrait. */
.scene[data-id='scene-20'] .media.b img{object-position:center 35%}


/* V28: closing contact card, without a portrait. */
.scene.closing-qr .closing-qr-card{position:absolute;right:8%;top:16%;width:24%;text-align:center}
.closing-qr-card img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 16px 40px #65513b1c}
.scene.closing-qr .closing-qr-card p{font-size:14px;line-height:1.5;margin:14px 0 0}
body.responsive-flow .scene.closing-qr .closing-qr-card{position:relative;inset:auto;width:min(100%,300px);margin:28px auto 8px;order:1;align-self:center}