@font-face {
    font-family: "Scandinavia Brush";
    src: url("../fonts/ScandinaviaBrush.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #140f0e;
    --gold: #d4b06a;
    --gold-soft: #e7d2a3;
    --gold-active: #f3dfa8;
    --maroon: #6b1c23;
    --pill: rgba(12, 9, 8, 0.62);
    --pill-border: rgba(212, 176, 106, 0.32);
}

* { box-sizing: border-box; }
html {
    scroll-behavior: auto !important;
    overflow-x: clip;
}
body {
    margin: 0;
    background: #000;
    color: #fff;
    font-family: "Cormorant Garamond", Georgia, serif;
    overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* PDF-style separate gold pills */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
    padding-top: clamp(14px, 3.46vw, 62px);
}
.header-inner {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 0 12px;
}
.brand { display: none; }

.main-nav {
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px clamp(8px, 0.8vw, 14px);
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}
/* Nút theo mẫu thiết kế: khối tối bo góc, chữ Vollkorn vàng cam; cỡ theo vw để giữ tỉ lệ với ảnh hero */
.main-nav a {
    font-family: "Vollkorn", Georgia, serif;
    font-size: clamp(13px, 1.73vw, 30px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #dc9c3f;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    border-radius: clamp(10px, 1.07vw, 18px);
    padding: clamp(6px, 0.73vw, 13px) clamp(12px, 1.4vw, 24px);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    box-shadow: none;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.main-nav a.is-active {
    color: #f0b04f;
}
.main-nav a:hover {
    color: #f3c66a;
    background: rgba(0, 0, 0, 0.62);
}
/* Khi cuộn xuống: nút vuông (bỏ bo góc), nền đen chữ trắng; nút của trang đang xem nền trắng chữ đen;
   di chuột → nút toả sáng */
.site-header.is-scrolled .main-nav a {
    color: #fff;
    background: #000;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;
}
.site-header.is-scrolled .main-nav a.is-active {
    color: #000;
    background: #fff;
}
.site-header.is-scrolled .main-nav a:hover {
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.75),
        0 0 26px rgba(255, 255, 255, 0.45),
        0 0 48px rgba(255, 236, 200, 0.3);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
}
.site-header.is-scrolled .main-nav a.is-active:hover {
    text-shadow: none;
}
.site-header.is-scrolled .nav-toggle {
    background: #000;
    border-radius: 0;
    box-shadow: none;
}
.site-header.is-scrolled .nav-toggle span {
    background: #fff;
}
/* Intro trang chủ: từng nút trượt từ phải sang, mờ → rõ (HOME trước).
   main.js gắn .nav-intro (trạng thái ẩn) → .nav-intro-in (chạy) → gỡ cả 2 khi xong; --i = thứ tự nút */
@media (min-width: 901px) {
    .nav-intro .main-nav a {
        opacity: 0;
        transform: translateX(60px);
    }
    .nav-intro.nav-intro-in .main-nav a {
        opacity: 1;
        transform: none;
        transition:
            opacity 1.5s ease calc(1.4s + var(--i, 0) * 0.2s),
            transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) calc(1.4s + var(--i, 0) * 0.2s);
    }
    /* Chạy lại khi cuộn lên (main.js gắn body.hero-replay): nhanh hơn lần đầu */
    .hero-replay.nav-intro.nav-intro-in .main-nav a {
        transition:
            opacity 1.1s ease calc(0.3s + var(--i, 0) * 0.12s),
            transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--i, 0) * 0.12s);
    }
}
/* Menu hiện lại (kiểu nền vàng) sau khi hero đã thoát hẳn */
.site-header.is-scrolled .main-nav {
    animation: navBack 0.5s ease;
}
@keyframes navBack {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}
.main-nav a:first-child {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.nav-login {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}
.nav-login svg {
    width: 0.85em;
    height: 0.85em;
}
.nav-toggle {
    display: none;
    pointer-events: auto;
    position: absolute;
    right: 14px;
    top: 10px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--pill);
    padding: 10px;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--gold);
    margin: 5px 0;
}

.panel-stack { width: 100%; }
.panel {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    background: #000;
    overflow: hidden;
    scroll-margin-top: 0;
}
.panel img.panel-art {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
}
.panel-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}
.panel-empty {
    min-height: 40vh;
    display: grid;
    place-items: center;
    color: #888;
    line-height: 1.4;
}

/* Hero: full natural image + FG person plate over the script name */
.panel-hero {
    width: 100%;
    line-height: normal;
    perspective: 1200px;
    background: #251e23;
}
/* Intro: lúc đầu chỉ có nền #251e23, ảnh (cả lớp người) hiện dần khi main.js gắn .is-shown */
.panel-hero .hero-art,
.panel-hero .hero-fg,
.panel-hero .hero-veil {
    opacity: 0;
    transition: opacity 1.6s ease 0.3s;
}
.panel-hero.is-shown .hero-art,
.panel-hero.is-shown .hero-fg,
.panel-hero.is-shown .hero-veil {
    opacity: 1;
}
.hero-replay .panel-hero .hero-art,
.hero-replay .panel-hero .hero-fg,
.hero-replay .panel-hero .hero-veil {
    transition: opacity 1s ease;
}
/* Sau intro: cuộn xuống thì ảnh mờ dần từ trên xuống — main.js đặt --hero-fade theo vị trí cuộn
   (-30% = hiện đủ … 75% = chỉ còn mép dưới, nối liền ảnh trang 2) */
.panel-hero.is-live .hero-art,
.panel-hero.is-live .hero-fg,
.panel-hero.is-live .hero-veil {
    transition: none;
    -webkit-mask-image: linear-gradient(180deg, transparent var(--hero-fade, -30%), #000 calc(var(--hero-fade, -30%) + 30%));
    mask-image: linear-gradient(180deg, transparent var(--hero-fade, -30%), #000 calc(var(--hero-fade, -30%) + 30%));
}
.panel-hero img.panel-art.hero-art {
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    display: block;
    max-width: none;
}
.hero-fg {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    /* Cắt đúng dáng người (đầu, tóc, áo, tay) để tên nằm dưới người mà không phủ lớp mờ lên phần chữ còn lại.
       Toạ độ % theo ảnh hero hiện tại (uploads/hero-zoom.jpg) — đổi ảnh hero thì phải đo lại */
    clip-path: polygon(
        18.7% 14.8%, 16.2% 13.9%, 12.4% 16.4%, 9.3% 25.4%, 7.8% 36.1%, 6.5% 47.8%,
        3.5% 64.9%, 7.1% 71.4%, 7.5% 100%, 26.9% 100%, 26.6% 87.5%,
        38.3% 82.6%, 41.9% 84.2%, 44.5% 79.9%, 43.8% 73%, 37.5% 74.6%, 24.4% 74.6%,
        24% 70.3%, 24% 57.6%, 22.5% 51.1%, 21.3% 46.8%, 22.2% 44.2%, 22.2% 38.3%,
        23.5% 29.2%, 22.2% 25.4%, 20.6% 17.9%
    );
}
.hero-fg img.hero-art-fg {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* PAGE 2: 2VVT_4951 photo + red Heritage — one stacked page */
.panel-page2 {
    width: 100%;
    line-height: normal;
    background: #7c1b2d;
    overflow: hidden;
}
/* Ảnh + veil + quote chồng cùng 1 ô lưới: khung cao theo cái nào dài hơn → quote không tràn xuống Heritage */
.page2-photo {
    position: relative;
    width: 100%;
    background: #000;
    display: grid;
}
.page2-photo > img,
.page2-photo-veil,
.page2-photo > .quote-copy {
    grid-area: 1 / 1;
}
.page2-photo > img {
    width: 100%;
    height: auto;
    display: block;
    align-self: start;
}
/* Quote dài hơn dải ảnh (class do main.js gắn): mép dưới ảnh mờ dần vào nền đen */
.page2-photo.is-overflow > img {
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.page2-photo-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.55) 100%
    );
    pointer-events: none;
}
/* Theo mẫu: Vollkorn nghiêng đậm, dòng sát nhau, cụm chữ nằm sát đáy dải ảnh */
.quote-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: clamp(32px, 7vh, 64px) clamp(16px, 4vw, 48px) clamp(16px, 2vw, 40px);
    text-align: center;
    font-family: "Vollkorn", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(16px, 1.57vw, 30px);
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
/* Mỗi đoạn 1 dòng theo mẫu; chỉ xuống dòng khi màn quá hẹp (không bị cắt chữ) */
.quote-copy p {
    margin: 0;
    max-width: 100%;
    width: max-content;
    white-space: normal;
    text-wrap: balance;
}
.quote-copy p:last-child {
    margin-bottom: 0;
}
/* Hiện dần từng dòng: mờ nhoè → rõ (main.js gắn .quote-reveal, thêm .is-in khi cuộn tới; --i = thứ tự dòng) */
.quote-copy.quote-reveal > * {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(8px);
    transition:
        opacity 1.2s ease,
        filter 1.2s ease,
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.quote-copy.quote-reveal.is-in > * {
    opacity: 1;
    filter: none;
    transform: none;
    transition-delay: calc(0.2s + var(--i, 0) * 0.4s);
}
.quote-copy .quote-gold {
    color: #dc9c3f;
    font-weight: 400;
}
/* Khối Heritage theo mẫu: nền đỏ #7c1b2d, mọi thứ căn giữa, chữ Vollkorn */
.page2-heritage {
    width: 100%;
    padding: clamp(18px, 2.2vw, 42px) clamp(16px, 4vw, 72px) clamp(32px, 3.9vw, 76px);
    background-color: #7c1b2d;
    text-align: center;
}
/* Ảnh nền (ảnh bài Heritage trong admin): phủ kín khung, chỉ cắt không co méo; nền đen bên dưới để chữ dễ đọc.
   Hiện dần: nền đen → ảnh ~20% khi cuộn tới (main.js gắn .bg-reveal, thêm .is-in) */
.page2-heritage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.page2-heritage:has(.heritage-bg) {
    background-color: #000;
}
.heritage-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.2;
    pointer-events: none;
}
.page2-heritage.bg-reveal .heritage-bg {
    opacity: 0;
    transition: opacity 2.4s ease-in-out;
}
.page2-heritage.bg-reveal.is-in .heritage-bg {
    opacity: 0.2;
}
.page2-heritage .heritage-script {
    margin: 0;
    font-size: clamp(52px, 7.4vw, 146px);
    line-height: 1;
    color: #dc9c3f;
    text-shadow: 3px 4px 3px rgba(0, 0, 0, 0.45);
}
.page2-heritage .heritage-heading {
    margin: clamp(14px, 3.5vw, 66px) 0 clamp(18px, 2.9vw, 56px);
    font-family: "Vollkorn", Georgia, serif;
    font-weight: 700;
    font-size: clamp(15px, 1.86vw, 34px);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
}
.page2-heritage .heritage-body {
    font-family: "Vollkorn", Georgia, serif;
    font-size: clamp(15px, 1.66vw, 30px);
    line-height: 1.5;
    color: #fff;
}
.page2-heritage .heritage-body p {
    margin: 0;
}
.page2-family img {
    width: 100%;
    height: auto;
    display: block;
}
/* Shared column rhythm for page 3 + 4 (left ↔ left, right ↔ right) */
:root {
    --heritage-cols: minmax(280px, 1.15fr) minmax(260px, 0.95fr);
    --heritage-col-gap: clamp(24px, 4vw, 48px);
    --heritage-pad-x: clamp(24px, 5vw, 72px);
}

/* PAGE 3: Ha Bui / SOHEE — text căn giữa + album trượt trong khung tối bo góc (theo mẫu, đo ở 1278px) */
/* Nền theo mẫu "Artist statement": đen + mảng hình khối trừu tượng (đỏ đô / xanh ngọc / cam đất) bên trái,
   tối dần sang phải; khung album là kính mờ nhìn xuyên các mảng màu */
.panel-habui {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    padding: clamp(28px, 3.6vw, 68px) clamp(16px, 3.7vw, 70px) clamp(32px, 3.6vw, 68px);
    background: #000;
    line-height: normal;
}
.panel-habui::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.45) 18%, rgba(0, 0, 0, 0.85) 34%, #000 50%),
        radial-gradient(circle at 15% 64%, rgba(176, 110, 58, 0.85) 0 7.5vw, transparent calc(7.5vw + 1px)),
        radial-gradient(circle at 1% 62%, transparent 0 5.5vw, #6b1626 calc(5.5vw + 1px) 9vw, transparent calc(9vw + 1px)),
        radial-gradient(circle at 7% 30%, #0f4b55 0 7vw, transparent calc(7vw + 1px)),
        radial-gradient(circle at 0% 22%, #6e1a28 0 12vw, transparent calc(12vw + 1px)),
        radial-gradient(circle at 9% 104%, #0e3f49 0 11vw, transparent calc(11vw + 1px)),
        radial-gradient(circle at 26% 98%, #5a1422 0 6vw, transparent calc(6vw + 1px)),
        #000;
}
.habui-copy {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
    font-family: "Vollkorn", Georgia, serif;
    font-size: clamp(15px, 1.72vw, 32px);
    line-height: 1.42;
    color: #fff;
}
.habui-copy p {
    margin: 0;
}
.habui-copy strong {
    font-weight: 700;
    color: #fff;
}
/* Album: track trượt ngang, main.js nhân bản slide để chạy vòng vô tận */
.album {
    --slide-w: 18.8vw;
    --slide-gap: 1.8vw;
    position: relative;
    margin-top: clamp(20px, 2.5vw, 48px);
    padding: 1.95vw 1.8vw 2.85vw;
    /* Kính mờ: trong ở trái (thấy mảng màu nhoè phía sau) → đen dần sang phải, viền sáng mảnh */
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(30, 26, 24, 0.45) 30%,
        rgba(0, 0, 0, 0.88) 62%,
        rgba(0, 0, 0, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: clamp(10px, 1.4vw, 24px);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.album-viewport {
    overflow: hidden;
}
.album-track {
    display: flex;
    gap: var(--slide-gap);
    will-change: transform;
}
.album-track.is-animating {
    transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1);
}
.album-slide {
    flex: 0 0 var(--slide-w);
    aspect-ratio: 240 / 379;
    margin: 0;
    overflow: hidden;
    background: #2a0e14;
}
.album-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.album-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: clamp(32px, 3.1vw, 52px);
    height: clamp(32px, 3.1vw, 52px);
    margin-top: calc(clamp(32px, 3.1vw, 52px) / -2 - 0.45vw);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    color: #3a2a2e;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}
.album-nav:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.06);
}
.album-nav svg {
    width: 55%;
    height: 55%;
}
.album-prev { left: 1.8vw; }
.album-next { right: 1.8vw; }

/* PAGE 4: Khanh Pham — theo mẫu (đo ở 1327px): nền đen, dải ảnh liền nhau, chữ Vollkorn căn giữa, khung quote */
.panel-khanh {
    width: 100%;
    padding: clamp(28px, 3.9vw, 72px) clamp(12px, 1.5vw, 28px) clamp(40px, 5vw, 90px);
    background: #000;
    line-height: normal;
}
/* Cover flow (ảnh Khanh Pham): vị trí/góc xoay từng ảnh do main.js tính; --cf-h = chiều cao ảnh */
.coverflow {
    --cf-h: clamp(170px, 22vw, 420px);
    position: relative;
    width: 100%;
    height: calc(var(--cf-h) * 1.42);
    perspective: 1300px;
    perspective-origin: 50% 35%;
    overflow: hidden;
    user-select: none;
}
.cf-item {
    position: absolute;
    left: 50%;
    top: calc(var(--cf-h) * 0.04);
    width: calc(var(--cf-h) * var(--ar, 1.5));
    height: var(--cf-h);
    margin: 0;
    cursor: pointer;
    transform-style: preserve-3d;
    transition:
        transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1),
        filter 0.9s ease,
        opacity 0.9s ease;
    will-change: transform;
}
.cf-item.is-center {
    cursor: default;
}
.cf-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Bóng phản chiếu bên dưới (Chrome/Edge/Safari) */
    -webkit-box-reflect: below 2px linear-gradient(transparent 58%, rgba(255, 255, 255, 0.3));
}
.khanh-copy {
    max-width: 1200px;
    margin: clamp(30px, 4.3vw, 80px) auto 0;
    text-align: center;
    font-family: "Vollkorn", Georgia, serif;
    font-size: clamp(15px, 1.6vw, 29px);
    line-height: 1.5;
    color: #fff;
}
.khanh-copy > p {
    margin: 0 0 1.5em;
}
.khanh-copy > p:last-child {
    margin-bottom: 0;
}
.khanh-copy strong {
    font-weight: 700;
    color: #fff;
}
.khanh-copy .khanh-bridge {
    margin: 2.8em 0 0;
}
/* Khung quote: góc trên-trái bo → dấu “ → vạch ngang ngắn; góc dưới-phải đối xứng với dấu ” */
.khanh-quote {
    --qline: rgba(255, 255, 255, 0.85);
    position: relative;
    max-width: 46vw;
    margin: 1.25em auto 0;
    padding: 1.7em 1.6em 1.9em;
    border: 0;
    text-align: center;
    /* Vạch ngang ngắn sau dấu “ (trên) và trước dấu ” (dưới) */
    background:
        linear-gradient(var(--qline), var(--qline)) left 3.65em top 0 / 6.2em 1.5px no-repeat,
        linear-gradient(var(--qline), var(--qline)) right 3.65em bottom 0 / 6.2em 1.5px no-repeat;
}
/* Góc bo + vạch dọc */
.khanh-quote::before,
.khanh-quote::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 82%;
    border: 0 solid var(--qline);
    pointer-events: none;
}
.khanh-quote::before {
    top: 0;
    left: 0;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
    border-top-left-radius: 14px;
}
.khanh-quote::after {
    right: 0;
    bottom: 0;
    border-bottom-width: 1.5px;
    border-right-width: 1.5px;
    border-bottom-right-radius: 14px;
}
.khanh-quote p {
    margin: 0;
    font-family: "Vollkorn", Georgia, serif;
    font-weight: 700;
    font-size: clamp(13px, 1.36vw, 24px);
    letter-spacing: 0.01em;
    line-height: 1.45;
    text-transform: uppercase;
    color: #dc9c3f;
    font-style: normal;
}
/* Dấu ngoặc kép to nằm giữa góc bo và vạch ngang */
.khanh-quote p::before,
.khanh-quote p::after {
    position: absolute;
    z-index: 1;
    font-family: "Vollkorn", Georgia, serif;
    font-weight: 700;
    font-size: 5.4em;
    line-height: 1;
    color: #fff;
}
/* Dấu nằm giữa vạch kẻ (glyph “ ” ở nửa trên ô chữ → kéo lên) */
.khanh-quote p::before {
    content: "\201C";
    top: -0.22em;
    left: 0.2em;
}
.khanh-quote p::after {
    content: "\201D";
    bottom: -0.76em;
    right: 0.2em;
}
.khanh-quote-line {
    display: inline;
}
.khanh-quote-line + .khanh-quote-line::before {
    content: " ";
}

/* PAGE 5: Kim Hoang folk — blurred bg + 3 frames + maroon text */
.panel-folk {
    position: relative;
    width: 100%;
    min-height: min(78vh, 720px);
    overflow: hidden;
    line-height: normal;
    background: #1a0a0c;
}
.folk-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.folk-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(3px) brightness(0.55) saturate(0.85);
    transform: scale(1.06);
}
/* Khói bay góc trái: canvas nằm giữa ảnh nền và khung tranh, mép phải mờ dần */
.folk-smoke {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 48%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.folk-smoke-front {
    z-index: 3;
}
/* Bố cục theo mẫu (đo ở 1332px): 3 tranh không viền bên trái, khối chữ đỏ trong suốt sát mép phải */
.folk-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 34.6vw 1fr;
    column-gap: 1.8vw;
    align-items: start;
    width: 100%;
    min-height: 52vw;
    padding: 4.65vw 0 3.4vw 2.25vw;
}
.folk-frames {
    display: grid;
    grid-template-columns: 17.05vw 16.65vw;
    column-gap: 0.85vw;
    row-gap: 0.9vw;
    align-items: start;
    min-width: 0;
}
.folk-frame {
    margin: 0;
    background: #111;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.folk-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.folk-frame-1 {
    grid-column: 1 / -1;
    width: 31vw;
    aspect-ratio: 413 / 274;
}
.folk-frame-2 {
    aspect-ratio: 227 / 300;
}
.folk-frame-3 {
    aspect-ratio: 222 / 300;
}
/* Phóng nhẹ trong khung để ẩn viền giấy / nền gỗ ở mép ảnh như mẫu */
.folk-frame-2 img,
.folk-frame-3 img {
    transform: scale(1.12);
}
.folk-copy {
    margin-top: 10.4vw;
    padding: 2.9vw 2.6vw 3vw 3.3vw;
    background: rgba(124, 27, 45, 0.82);
    font-family: "Vollkorn", Georgia, serif;
    font-size: clamp(15px, 1.58vw, 30px);
    line-height: 1.48;
    text-align: justify;
    color: #fff;
}
.folk-copy p {
    margin: 0 0 1.48em;
}
.folk-copy p:last-child {
    margin-bottom: 0;
}
.folk-copy strong {
    font-weight: 700;
    color: #fff;
}

/* PAGE 6: Where fabric learn to move — theo mẫu (đo ở 1512px): script + text căn giữa, 3 ảnh không viền */
.panel-fabric {
    width: 100%;
    padding: 0.4vw 5.4vw clamp(36px, 3.3vw, 64px);
    background: #7c1b2d;
    line-height: normal;
}
.fabric-copy {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    font-family: "Vollkorn", Georgia, serif;
    font-size: clamp(15px, 1.68vw, 32px);
    line-height: 1.41;
    color: #fff;
}
.fabric-copy .fabric-script {
    margin: 0 0 0.42em;
    font-family: "Scandinavia Brush", "Segoe Script", cursive;
    font-size: clamp(42px, 6.9vw, 132px);
    line-height: 1.25;
    color: #dc9c3f;
    text-shadow: 3px 4px 3px rgba(0, 0, 0, 0.45);
}
.fabric-copy p {
    margin: 0 0 1.5em;
}
.fabric-copy p:last-child {
    margin-bottom: 0;
}
.fabric-copy strong {
    font-weight: 700;
    color: #fff;
}
.fabric-frames {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 1vw;
    width: 100%;
    margin: 2.2vw 0 0;
}
/* 3 ảnh như mẫu: ảnh giữa rộng hơn */
.fabric-frames-3 {
    grid-template-columns: 414fr 487fr 413fr;
}
.fabric-frame {
    margin: 0;
    background: #111;
    overflow: hidden;
    width: 100%;
    height: 20.5vw;
}
/* Cuộn tới (main.js gắn .is-in cho [data-reveal-group]): chữ mờ nhoè → rõ từng đoạn, ảnh hiện lần lượt trái → phải.
   --d = độ trễ do main.js tính */
.reveal-blur {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
    transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-slide {
    opacity: 0;
    transform: translateX(-46px);
    transition: opacity 1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Ảnh dùng kiểu mờ → rõ: nhoè mạnh hơn chữ cho thấy rõ hiệu ứng */
figure.reveal-blur {
    filter: blur(16px);
    transform: scale(1.03);
    transition: opacity 1.3s ease, filter 1.5s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Rơi từ trên xuống + mở dần từ mép trên như kéo rèm */
.reveal-drop {
    opacity: 0;
    transform: translateY(-90px);
    clip-path: inset(0 0 100% 0);
    transition:
        opacity 0.9s ease,
        transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.is-in .reveal-blur,
.is-in .reveal-slide,
.is-in .reveal-drop {
    opacity: 1;
    filter: none;
    transform: none;
    clip-path: inset(0 0 0 0);
    transition-delay: var(--d, 0s);
}
.fabric-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* PAGE 7: Qingdao — text / 5-frame grid / text */
/* PAGE 7: Qingdao — theo mẫu (đo ở 1516px): text căn giữa / 4 cột ảnh (cột giữa 2 ảnh chồng) / text + câu trích */
.panel-qingdao {
    width: 100%;
    padding: 1.2vw 2.8vw clamp(36px, 3.4vw, 64px);
    background: #7c1b2d;
    line-height: normal;
}
.qingdao-copy {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    font-family: "Vollkorn", Georgia, serif;
    font-size: clamp(15px, 1.66vw, 31px);
    line-height: 1.42;
    color: #fff;
}
.qingdao-copy p {
    margin: 0 0 1.42em;
}
.qingdao-copy p:last-child {
    margin-bottom: 0;
}
.qingdao-copy strong {
    font-weight: 700;
}
/* Câu dẫn + câu trích liền nhau như mẫu */
.qingdao-copy .qingdao-bridge {
    margin-bottom: 0;
}
.qingdao-pull {
    font-style: italic;
    font-weight: 700;
}
.qingdao-frames {
    display: grid;
    grid-template-columns: 314fr 442fr 314fr 314fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.25vw 0.92vw;
    width: 100%;
    height: 30vw;
    margin: 2.6vw 0 2vw;
}
.qingdao-frame {
    margin: 0;
    background: #111;
    overflow: hidden;
    min-height: 0;
}
.qingdao-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.qingdao-frame-1 {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.qingdao-frame-2 {
    grid-column: 2;
    grid-row: 1;
}
.qingdao-frame-3 {
    grid-column: 2;
    grid-row: 2;
}
.qingdao-frame-4 {
    grid-column: 3;
    grid-row: 1 / span 2;
}
.qingdao-frame-5 {
    grid-column: 4;
    grid-row: 1 / span 2;
}

/* PAGE 8: Kim Hoang Reborn — photo | mustard yellow */
.panel-reborn {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(320px, 1fr);
    align-items: stretch;
    width: 100%;
    min-height: 0;
    background: #d4a84b;
    line-height: normal;
    overflow: hidden;
}
.reborn-script {
    position: absolute;
    left: 50%;
    top: clamp(10px, 2vh, 22px);
    z-index: 4;
    margin: 0;
    width: max-content;
    max-width: 92%;
    transform: translateX(-50%);
    text-align: center;
    /* Cùng font trang 1 (Vu Quynh Anh) */
    font-family: "Scandinavia Brush", "Segoe Script", cursive;
    font-weight: 400;
    font-size: clamp(44px, 6.2vw, 84px);
    line-height: 1.05;
    letter-spacing: 0;
    color: #6b1c23;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 3px 8px rgba(0, 0, 0, 0.2),
        0 8px 22px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    white-space: nowrap;
}
.reborn-photo {
    position: relative;
    z-index: 1;
    /* Cao theo hàng (cột vàng); rộng = cao × tỷ lệ ảnh gốc → full hình, không crop */
    align-self: stretch;
    justify-self: start;
    aspect-ratio: 1931 / 3335;
    width: auto;
    max-width: min(46vw, 560px);
    min-height: 0;
    height: auto;
    background: #111;
    overflow: hidden;
}
.reborn-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}
.reborn-yellow {
    position: relative;
    z-index: 2;
    /* Block flow — float logo/iPad mới bo chữ đúng */
    display: block;
    min-height: 0;
    height: auto;
    padding: clamp(48px, 6vh, 64px) 0 0 clamp(20px, 3vw, 40px);
    background: #d4a84b;
    color: #2c1214;
}
/* Chừa chỗ logo góc phải — chữ không tràn đè */
.reborn-logo-slot {
    float: right;
    width: clamp(128px, 16vw, 196px);
    height: clamp(110px, 14vw, 170px);
    margin: 0 0 12px 18px;
    shape-outside: margin-box;
    shape-margin: 8px;
    pointer-events: none;
}
.reborn-logo {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(120px, 15vw, 180px);
    height: clamp(120px, 15vw, 180px);
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 5;
}
.reborn-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.reborn-fb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    /* Ngay trên dòng Quỹ Hồi Sinh… */
    margin: 0 0 0.55em;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(13px, 1.3vw, 16px);
    color: #1b2a4a;
    text-decoration: none;
}
.reborn-fb:hover {
    text-decoration: underline;
}
.reborn-fb-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #1877f2;
    box-shadow: inset 0 0 0 2px #1877f2;
    position: relative;
}
.reborn-fb-icon::after {
    content: "f";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}
.reborn-copy {
    display: flow-root; /* chứa float logo phía trên */
    max-width: none;
    width: 100%;
    min-height: 0;
    padding-right: clamp(8px, 1.5vw, 16px);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(18px, 1.85vw, 24px);
    line-height: 1.6;
    color: #2c1214;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.reborn-copy::after {
    content: "";
    display: table;
    clear: both;
}
.reborn-copy p {
    margin: 0 0 0.85em;
    text-align: justify;
}
.reborn-copy p:last-child {
    margin-bottom: 0;
}
.reborn-copy strong {
    font-weight: 700;
    color: #1a0a0c;
}
/* Đẩy ghost xuống — đoạn trên full width */
.reborn-float-push {
    float: right;
    width: 0;
    height: clamp(48px, 8vh, 100px);
}
/* Giữ chỗ rộng hơn khi chữ to — tránh tràn đè iPad */
.reborn-float-slot {
    float: right;
    clear: right;
    width: min(52%, 340px);
    max-width: 340px;
    aspect-ratio: 1024 / 1536;
    margin: 0 0 0 16px;
    shape-outside: polygon(
        22% 0%,
        100% 0%,
        100% 100%,
        0% 100%,
        0% 52%,
        10% 28%,
        18% 10%
    );
    shape-margin: 14px;
    pointer-events: none;
}
.reborn-float {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: min(52%, 340px);
    max-width: 340px;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
}
.reborn-float img {
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
    mix-blend-mode: screen;
    filter:
        contrast(1.08)
        saturate(1.06)
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

/* PAGE 9 PDF: vàng + 1o trái + chữ | ảnh VVT_4900 phải */
.panel-heritagecol {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 1.25fr) auto;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    background: #d4a84b;
    line-height: normal;
    overflow: hidden;
}
.hc-yellow {
    position: relative;
    z-index: 2;
    min-height: 0;
    height: auto;
    /* PDF: không mép trái — ảnh 1o sát cạnh trái */
    padding: clamp(28px, 4vh, 48px) clamp(18px, 2.5vw, 36px) 0 0;
    background: #d4a84b;
    color: #2c1214;
}
.hc-copy {
    width: 100%;
    min-height: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(18px, 1.85vw, 24px);
    line-height: 1.6;
    color: #2c1214;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.hc-copy::after {
    content: "";
    display: table;
    clear: both;
}
.hc-copy p {
    margin: 0 0 0.85em;
    text-align: justify;
}
.hc-copy p:last-child {
    margin-bottom: 0;
}
.hc-copy strong {
    font-weight: 700;
    color: #1a0a0c;
}
/* 1o cột trái PDF — chữ chảy bên phải ảnh */
.hc-float-push {
    float: left;
    width: 0;
    height: 0;
}
.hc-float-slot {
    float: left;
    clear: left;
    width: min(42%, 300px);
    max-width: 300px;
    aspect-ratio: 999 / 1574;
    margin: 0 14px 0 0;
    shape-outside: margin-box;
    shape-margin: 8px;
    pointer-events: none;
}
.hc-float {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: min(42%, 300px);
    max-width: 300px;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
}
.hc-float img {
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
    mix-blend-mode: screen;
    filter:
        contrast(1.08)
        saturate(1.06)
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
.hc-photo {
    position: relative;
    z-index: 1;
    align-self: stretch;
    justify-self: end;
    aspect-ratio: 3335 / 5000;
    width: auto;
    max-width: min(46vw, 560px);
    min-height: 0;
    height: auto;
    background: #111;
    overflow: hidden;
}
.hc-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* PAGE 10: Collection look — 5 portrait + CTA */
.panel-collook {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 4.5vh, 44px);
    width: 100%;
    padding: clamp(36px, 6vh, 56px) 0 clamp(40px, 7vh, 64px);
    background: #d4a84b;
    line-height: normal;
}
.collook-frames {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 18px);
    /* Full width — dàn đều 2 bên */
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(32px, 5vh, 56px) clamp(12px, 2vw, 28px);
    align-items: start;
    box-sizing: border-box;
}
.collook-frame {
    margin: 0;
    background: #111;
    overflow: hidden;
    /* Cao hơn → khối ảnh to hơn */
    aspect-ratio: 3 / 5;
    width: 100%;
    min-height: clamp(280px, 42vh, 520px);
}
/* PDF: thấp — cao — thấp — cao — thấp */
.collook-frame:nth-child(odd) {
    margin-top: clamp(36px, 5.5vh, 64px);
}
.collook-frame:nth-child(even) {
    margin-top: 0;
}
.collook-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.collook-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    max-width: 920px;
    padding: 0 clamp(16px, 3vw, 40px);
}
.collook-title {
    margin: 0;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(15px, 1.55vw, 20px);
    line-height: 1.45;
    color: #3a1418;
}
.collook-title em {
    font-style: italic;
}
.collook-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border: 1.5px solid #3a1418;
    border-radius: 999px;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(13px, 1.25vw, 16px);
    color: #3a1418;
    text-decoration: none;
    background: transparent;
}
.collook-cta u {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.collook-cta:hover {
    background: rgba(58, 20, 24, 0.06);
}
.collook-cta-static {
    cursor: default;
}

/* PAGE 11–12: cùng lề ngang để text thẳng hàng */
.panel-hoaguom,
.panel-numbers {
    --yellow-gutter: clamp(12px, 2vw, 28px);
}

/* PAGE 11: Hoa Guom — collage to, dàn đều 2 bên */
.panel-hoaguom {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.5vh, 22px);
    width: 100%;
    padding: clamp(32px, 5vh, 52px) 0 clamp(36px, 6vh, 56px);
    background: #d4a84b;
    line-height: normal;
}
.hoaguom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(10px, 1.3vw, 16px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--yellow-gutter);
    align-items: stretch;
    box-sizing: border-box;
    min-height: clamp(320px, 48vh, 560px);
}
.hoaguom-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: clamp(10px, 1.3vw, 16px);
    min-height: 0;
}
.hoaguom-frame {
    margin: 0;
    border: 2px solid #4a1a1e;
    background: #111;
    overflow: hidden;
    min-height: 0;
}
.hoaguom-center {
    min-height: 100%;
}
.hoaguom-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.hoaguom-side .hoaguom-frame {
    height: 100%;
}
.hoaguom-caption {
    max-width: min(1100px, 94%);
    margin: 8px auto 0;
    padding: 0 clamp(16px, 3vw, 40px);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(14px, 1.35vw, 17px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: #3a1418;
    text-wrap: balance;
}
.hoaguom-caption p {
    margin: 0;
    font-weight: 700;
}
.hoaguom-body {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--yellow-gutter);
    box-sizing: border-box;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(18px, 1.85vw, 24px);
    line-height: 1.45;
    color: #2c1214;
    text-align: justify;
    text-justify: inter-word;
}
.hoaguom-body p {
    margin: 0;
    width: 100%;
    text-align: justify;
    text-justify: inter-word;
}
.hoaguom-body strong {
    font-weight: 700;
    color: #1a0a0c;
}

/* PAGE 12: Project through numbers */
.panel-numbers {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3.5vh, 36px);
    width: 100%;
    padding: clamp(36px, 6vh, 56px) var(--yellow-gutter) clamp(40px, 7vh, 64px);
    box-sizing: border-box;
    background: #d4a84b;
    line-height: normal;
}
.numbers-copy {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(18px, 1.85vw, 24px);
    line-height: 1.6;
    color: #2c1214;
    text-align: justify;
    text-justify: inter-word;
}
.numbers-copy p {
    margin: 0 0 0.9em;
    text-align: justify;
    text-justify: inter-word;
}
.numbers-copy p:last-child {
    margin-bottom: 0;
}
.numbers-copy strong {
    font-weight: 700;
    color: #1a0a0c;
}
.numbers-heading {
    margin: 8px 0 0;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(14px, 1.45vw, 18px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: #3a1418;
}
.numbers-stats {
    width: 100%;
    max-width: none;
    margin: 0;
}
.numbers-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 14px);
    width: 100%;
}
.numbers-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: clamp(150px, 22vh, 210px);
    padding: 16px 10px;
    background: #6b1c23;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    text-align: center;
}
.numbers-stat strong {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.numbers-stat span {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(13px, 1.25vw, 16px);
    line-height: 1.35;
    color: rgba(255, 248, 236, 0.95);
}

/* ========== PDF pages 13–27: shared ochre family ========== */
.panel-ochre {
    --ochre-bg: #d4a84b;
    --ochre-ink: #3a1418;
    --ochre-pill: #f3e7ef;
    /* Cột chữ chung trang 13→14 (thẳng hàng) */
    --ochre-col-w: min(720px, 62%);
    width: 100%;
    padding: clamp(36px, 6vh, 64px) clamp(20px, 4vw, 56px);
    background: var(--ochre-bg);
    color: var(--ochre-ink);
    line-height: normal;
}
.ochre-script {
    margin: 0 0 14px;
    font-family: "Scandinavia Brush", "Segoe Script", cursive;
    font-size: clamp(48px, 6.5vw, 84px);
    line-height: 0.95;
    color: #6b1c23;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.ochre-script-center { text-align: center; }
.ochre-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(16px, 3vw, 36px);
    align-items: start;
    margin-bottom: clamp(16px, 2.5vh, 28px);
}
.ochre-pill-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}
.ochre-pill-center { align-items: center; }
.ochre-pill {
    display: inline-block;
    max-width: 100%;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--ochre-pill);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(13px, 1.35vw, 17px);
    font-weight: 700;
    color: var(--ochre-ink);
}
.ochre-pill-date {
    background: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    font-size: clamp(12px, 1.2vw, 15px);
}
.ochre-logo-box {
    width: clamp(110px, 14vw, 168px);
    height: clamp(110px, 14vw, 168px);
    padding: 8px;
    background: #fff;
    border: 2px solid rgba(58, 20, 24, 0.35);
    flex-shrink: 0;
}
/* Trang 14: logo phải to gấp đôi */
.panel-fashionomics .ochre-logo-box {
    width: clamp(220px, 28vw, 336px);
    height: clamp(220px, 28vw, 336px);
    padding: 12px;
}
/* Trang 15: logo Youngpreneurs (image 21) to gấp đôi */
.panel-ypintro .ochre-logo-box {
    width: clamp(220px, 28vw, 336px);
    height: clamp(220px, 28vw, 336px);
    padding: 12px;
}
.ochre-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ochre-fb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(13px, 1.3vw, 16px);
    color: #1b2a4a;
    text-decoration: underline;
}
.ochre-fb-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #1877f2;
    position: relative;
}
.ochre-fb-icon::after {
    content: "f";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
}
.ochre-body {
    font-family: "Cormorant Garamond", Georgia, serif;
    /* Khớp / hơi lớn hơn chữ trang nền đỏ (1.75vw → 22px) */
    font-size: clamp(18px, 1.85vw, 24px);
    line-height: 1.6;
    color: var(--ochre-ink);
}
.ochre-body-narrow { max-width: 920px; margin: 0 auto; }
/* 24–25 Research — khối chữ trải full ngang như PDF */
.panel-research .ochre-body-narrow,
.panel-researchnum .ochre-body-narrow { max-width: none; }
.ochre-body p { margin: 0 0 0.85em; }
.ochre-body p:last-child { margin-bottom: 0; }
.ochre-body strong { font-weight: 700; color: #1a0a0c; }
.ochre-kicker,
.ochre-section {
    margin: 0.4em 0 0.75em;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(14px, 1.45vw, 18px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ochre-ink);
}
.ochre-featured {
    margin-top: 1.2em !important;
    font-family: "Jost", sans-serif;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ochre-quote {
    margin: 1.1em 0 !important;
    font-size: clamp(18px, 1.9vw, 24px);
    font-weight: 700;
    font-style: italic;
    text-align: center;
    color: #5a2428;
}
.ochre-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 10px 26px;
    border: 1.5px solid var(--ochre-ink);
    border-radius: 999px;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(13px, 1.25vw, 16px);
    color: var(--ochre-ink);
    text-decoration: underline;
    background: transparent;
}
.ochre-cta-right { display: flex; justify-content: flex-end; margin-top: 18px; }

/* Hover tỏa sáng cho mọi nút link (nút viền tròn + link Facebook) */
.ochre-cta,
a.collook-cta {
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease, color .25s ease;
}
.ochre-cta:hover,
.ochre-cta:focus-visible,
a.collook-cta:hover,
a.collook-cta:focus-visible {
    background: rgba(255, 248, 230, 0.55);
    box-shadow:
        0 0 0 1px rgba(255, 244, 214, 0.9),
        0 0 14px 2px rgba(255, 236, 190, 0.85),
        0 0 32px 6px rgba(255, 214, 140, 0.55);
    transform: translateY(-1px);
    color: #1a0a0c;
    outline: none;
}
.ochre-fb,
.reborn-fb {
    transition: text-shadow .25s ease, color .25s ease;
}
.ochre-fb-icon,
.reborn-fb-icon {
    transition: box-shadow .25s ease, transform .25s ease;
}
.ochre-fb:hover,
.ochre-fb:focus-visible,
.reborn-fb:hover,
.reborn-fb:focus-visible {
    color: #0d1a33;
    text-shadow: 0 0 8px rgba(255, 246, 220, 0.95), 0 0 18px rgba(255, 226, 160, 0.8);
    outline: none;
}
.ochre-fb:hover .ochre-fb-icon,
.ochre-fb:focus-visible .ochre-fb-icon,
.reborn-fb:hover .reborn-fb-icon,
.reborn-fb:focus-visible .reborn-fb-icon {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 14px 3px rgba(120, 175, 255, 0.85);
    transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
    .ochre-cta, a.collook-cta, .ochre-fb, .reborn-fb, .ochre-fb-icon, .reborn-fb-icon { transition: none; }
    .ochre-cta:hover, a.collook-cta:hover { transform: none; }
}
.ochre-stats { margin-top: clamp(22px, 4vh, 40px); }
.ochre-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 24px);
    text-align: center;
}
.ochre-stat-row-a { margin-bottom: clamp(18px, 3vh, 32px); }
.ochre-stat-row-b { padding: 0 clamp(24px, 6vw, 80px); }
.ochre-stat strong {
    display: block;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.05;
    color: var(--ochre-ink);
}
.ochre-stat span {
    display: block;
    margin-top: 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(13px, 1.25vw, 16px);
}
.ochre-gallery {
    display: grid;
    gap: clamp(8px, 1.2vw, 14px);
    margin-top: clamp(22px, 4vh, 40px);
    width: 100%;
}
.ochre-gallery-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; }
.ochre-gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 20 Hồn ta — gallery full 2 bên, khoảng cách giống trang 19 */
.panel-honta { --tc-gap: clamp(10px, 1.2vw, 20px); }
.honta-gallery {
    gap: var(--tc-gap);
    width: auto;
    margin-left: calc(var(--tc-gap) - clamp(20px, 4vw, 56px));
    margin-right: calc(var(--tc-gap) - clamp(20px, 4vw, 56px));
}
.honta-gallery .ochre-gframe { border-width: 3px; }
.ochre-gframe {
    margin: 0;
    border: 2px solid #4a1a1e;
    background: #111;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.ochre-gframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ochre-gallery-6 .ochre-gframe:nth-child(odd) { aspect-ratio: 3 / 4; }
.ochre-gallery-6 .ochre-gframe:nth-child(even) { aspect-ratio: 1 / 1; margin-bottom: 18px; }
.stagger-hlh .ochre-gframe:nth-child(odd) { margin-top: 0; aspect-ratio: 3 / 4; }
.stagger-hlh .ochre-gframe:nth-child(even) { margin-top: clamp(28px, 5vh, 56px); aspect-ratio: 3 / 4; }
.ochre-bullets {
    margin: 0;
    padding-left: 1.2em;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(17px, 1.7vw, 21px);
}
.ochre-bullets li { margin: 0.35em 0; }
.ochre-milestones {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Cormorant Garamond", Georgia, serif;
    /* Bằng cỡ chữ thân bài để danh sách giải thưởng nổi bật */
    font-size: clamp(18px, 1.85vw, 24px);
    line-height: 1.45;
}
.ochre-milestones li { margin: 0 0 0.8em; }
.ochre-milestones small {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    font-style: italic;
    opacity: 0.9;
}
.panel-awards .ochre-section {
    font-size: clamp(16px, 1.75vw, 22px);
}

/* 13 Vẽ Mâm — tiêu đề giữa trang | body kéo rộng sang phải | Painterly1 mép phải */
.panel-vemam {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: min(78vh, 720px);
    padding-right: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.panel-vemam > .ochre-script {
    position: relative;
    z-index: 2;
    width: min(1100px, calc(100% - min(28vw, 300px)));
    max-width: none;
    margin: 0 0 clamp(16px, 2.5vh, 28px);
    text-align: left;
}
.vemam-copy {
    position: relative;
    z-index: 2;
    /* Kéo rộng thêm sang phải, chừa nhẹ chỗ ảnh */
    width: min(1100px, calc(100% - min(28vw, 300px)));
    max-width: none;
    margin: 0;
    margin-right: auto;
    padding-right: clamp(8px, 1.5vw, 16px);
    box-sizing: border-box;
}
.vemam-copy .ochre-body {
    max-width: none;
}
.vemam-art {
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    z-index: 1;
    margin: 0;
    width: min(46vw, 520px);
    max-width: none;
    background: transparent;
    pointer-events: none;
}
.vemam-art img {
    width: 100%;
    height: auto;
    display: block;
    /* Nền đen Painterly1 → hòa vào vàng ochre */
    mix-blend-mode: screen;
    filter: contrast(1.06) saturate(1.05);
}

/* 14 Fashionomics — cùng kiểu chữ trang 13 (trái + kéo rộng), logo sát phải */
.panel-fashionomics {
    position: relative;
    padding-right: 0;
    overflow: hidden;
}
.panel-fashionomics .fo-col {
    position: relative;
    z-index: 2;
    width: min(1100px, calc(100% - min(32vw, 360px)));
    max-width: none;
    margin: 0;
    margin-right: auto;
    padding-right: clamp(8px, 1.5vw, 16px);
    box-sizing: border-box;
}
.panel-fashionomics .fo-col .ochre-script {
    text-align: left;
}
.panel-fashionomics .fo-col .ochre-body {
    max-width: none;
}
.panel-fashionomics > .ochre-logo-box {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    margin: 0;
}

/* 15 Youngpreneurs intro cards */
.ypintro-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 22px);
    margin: clamp(18px, 3vh, 28px) 0;
}
.ypintro-card {
    margin: 0;
    background: #fff;
    border: 1px solid rgba(58, 20, 24, 0.2);
    overflow: hidden;
    aspect-ratio: 1;
}
.ypintro-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ypintro-foot { margin-top: 8px; margin-bottom: 0; }

/* 19 collage — theo PDF: ảnh dọc 4:5 | 2 ảnh ngang xếp chồng | ảnh dọc 4:5 */
.panel-trangcollage {
    --tc-gap: clamp(10px, 1.2vw, 20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Full 2 bên: lề ngoài = khoảng cách giữa các ảnh */
    padding-left: var(--tc-gap);
    padding-right: var(--tc-gap);
}
.trangcollage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Chiều cao hàng = cột dọc 4:5, nhưng không cao quá khung nhìn (màn thấp thì ảnh crop nhẹ) */
    grid-template-rows: min(
        calc((100vw - 4 * var(--tc-gap)) / 3 * 1.25),
        calc(100vh - 2 * clamp(36px, 6vh, 64px))
    );
    gap: var(--tc-gap);
    align-items: stretch;
    width: 100%;
    margin: 0;
}
/* Ảnh nằm tuyệt đối trong khung để kích thước gốc không đẩy giãn lưới */
.trangcollage-grid .ochre-gframe {
    position: relative;
    min-width: 0;
    min-height: 0;
    border-width: 3px;
}
.trangcollage-grid .ochre-gframe img {
    position: absolute;
    inset: 0;
}
.trangcollage-side { aspect-ratio: auto; }
.trangcollage-mids {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--tc-gap);
    min-width: 0;
}
.trangcollage-mids .ochre-gframe { aspect-ratio: auto; }

/* 21 Hồn ta body */
.hontabody-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 36px);
    align-items: start;
}
/* 21 — cụm ảnh sát mép trái, lề + khoảng cách ảnh giống trang 19/20 */
.panel-hontabody {
    --tc-gap: clamp(10px, 1.2vw, 20px);
    padding-left: var(--tc-gap);
}
.hontabody-frames { display: grid; gap: var(--tc-gap); }
.hontabody-frames .ochre-gframe { border-width: 3px; }
.hontabody-top { aspect-ratio: 16 / 9; }
.hontabody-bot {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: var(--tc-gap);
    align-items: stretch;
}
/* Ảnh dọc cao bằng ảnh ngang bên cạnh (chiều cao hàng do khung 4:3 quyết định) */
.hontabody-tall {
    aspect-ratio: auto;
    position: relative;
    min-height: 0;
}
.hontabody-tall img {
    position: absolute;
    inset: 0;
}

/* 26 Awards */
.awards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}
.awards-bottom {
    margin-top: clamp(24px, 4vh, 40px);
    text-align: center;
}
/* Cặp link chữ thay nút (vd. My evaluation | Reflection ở Internship) */
.ochre-links {
    margin: 1.2em 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(17px, 1.75vw, 22px);
    font-weight: 600;
    color: var(--ochre-ink);
}
.ochre-links-sep {
    margin: 0 0.45em;
    opacity: 0.7;
}
.glow-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Link chứng nhận (Certificate, Pitch deck…) + .glow-link: rê chuột → chữ sáng + vệt sáng quét ngang + quầng sáng */
.glow-link,
.panel-awards a {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: 0 0.15em;
    margin: 0 -0.15em;
    border-radius: 4px;
    transition: color 0.25s ease, background-color 0.25s ease, text-shadow 0.25s ease, box-shadow 0.3s ease;
}
.glow-link::after,
.panel-awards a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
}
.glow-link:hover,
.glow-link:focus-visible,
.panel-awards a:hover,
.panel-awards a:focus-visible {
    color: #fff;
    background-color: #7c1b2d;
    text-shadow: 0 0 6px rgba(255, 236, 190, 0.9);
    box-shadow: 0 0 12px rgba(255, 220, 140, 0.85), 0 0 26px rgba(255, 200, 100, 0.45);
}
.glow-link:hover::after,
.glow-link:focus-visible::after,
.panel-awards a:hover::after,
.panel-awards a:focus-visible::after {
    opacity: 1;
    animation: linkShine 0.7s ease-out;
}
@keyframes linkShine {
    from { left: -60%; }
    to { left: 120%; }
}
.awards-foot {
    margin: 0 0 0.6em;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(16px, 1.6vw, 20px);
}

/* 27 Thanks */
.panel-thanks {
    min-height: min(70vh, 640px);
    display: grid;
    place-items: center;
    text-align: center;
}
.thanks-script {
    display: inline-block;
    margin: 0 0 48px;
    font-family: "Scandinavia Brush", "Segoe Script", cursive;
    font-size: clamp(64px, 10vw, 120px);
    line-height: 1;
    color: #6b1c23;
    text-shadow: 2px 3px 0 rgba(255, 255, 255, 0.35);
    /* Chữ "động đậy": bồng bềnh lên xuống + lắc nhẹ, lặp liên tục */
    transform-origin: 50% 75%;
    animation: thanksSway 3.4s ease-in-out infinite;
}
@keyframes thanksSway {
    0%, 100% {
        transform: translateY(0) rotate(-3deg) scale(1);
    }
    25% {
        transform: translateY(-8px) rotate(0deg) scale(1.03);
    }
    50% {
        transform: translateY(-14px) rotate(3deg) scale(1.05);
    }
    75% {
        transform: translateY(-6px) rotate(0deg) scale(1.02);
    }
}
.thanks-contact {
    margin: 0.35em 0;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(14px, 1.4vw, 18px);
    color: var(--ochre-ink);
}

.heritage-script {
    margin: 0 0 0.35em;
    font-family: "Scandinavia Brush", "Segoe Script", cursive;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 0.85;
    color: var(--gold);
}
.heritage-heading {
    /* Tách khỏi chữ Heritage phía trên */
    margin: 0.55em 0 22px;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;
}
.heritage-body {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.55;
    color: rgba(255, 248, 236, 0.95);
}
.heritage-body p {
    margin: 0 0 1em;
}
.heritage-body p:last-child {
    margin-bottom: 0;
}
.heritage-frames {
    position: relative;
    min-height: 340px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
}
.heritage-frame {
    margin: 0;
    border: 3px solid #e0a24a;
    background: #111;
    overflow: hidden;
}
.heritage-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.heritage-frame-1 {
    grid-row: 1 / span 2;
    min-height: 320px;
}
.heritage-frame-2,
.heritage-frame-3 {
    min-height: 150px;
}
.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            transparent 0%,
            transparent 38%,
            rgba(0, 0, 0, 0.22) 55%,
            rgba(0, 0, 0, 0.55) 72%,
            rgba(0, 0, 0, 0.78) 88%,
            rgba(0, 0, 0, 0.88) 100%
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 30%, rgba(0, 0, 0, 0.2) 100%);
}

/* Script sits under the FG person plate */
.hero-name {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    padding: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}
.hero-name-title {
    position: absolute;
    /* Vị trí + cỡ theo mẫu thiết kế (khung hero-zoom.jpg); cỡ theo vw để giữ đúng toạ độ ở mọi bề rộng */
    left: 19.2%;
    top: 21%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12em;
    width: max-content;
    max-width: none;
    /* Intro: trượt từ phải sang, mờ → rõ (sau khi menu hiện xong) */
    transform: translateX(14vw);
    font-family: "Scandinavia Brush", "Segoe Script", cursive;
    font-weight: 400;
    font-size: clamp(64px, 10.2vw, 230px);
    line-height: 1.05;
    color: #f0a93e;
    letter-spacing: 0;
    text-align: left;
    opacity: 0;
    transition:
        opacity 1.3s ease 2.25s,
        transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.25s;
    /* Bóng gọn, không dùng filter để nét chữ sắc */
    text-shadow:
        2px 3px 2px rgba(0, 0, 0, 0.55),
        0 6px 18px rgba(0, 0, 0, 0.35);
    -webkit-font-smoothing: antialiased;
}
.hero-name.is-ready .hero-name-title {
    opacity: 1;
    transform: translateX(0);
}
.hero-replay .hero-name-title {
    transition-delay: 0.7s;
}
.hero-name.is-live .hero-name-title,
.hero-name-meta.is-live {
    transition: none;
}
.hero-name-line {
    display: block;
    white-space: nowrap;
}
.hero-name-top {
    font-size: 0.96em;
    margin-left: 0.18em;
    margin-bottom: 0;
}
.hero-name-bottom {
    font-size: 0.95em;
    margin-left: 0.12em;
    margin-top: 0.13em;
    padding-top: 0.08em;
    word-spacing: 0.17em;
}
/* PDF placement: under the script name, mid-right — keep each line on one row */
.hero-name-meta {
    position: absolute;
    left: 50%;
    top: 73%;
    right: clamp(16px, 4vw, 48px);
    z-index: 5;
    text-align: left;
    max-width: none;
    width: max-content;
    pointer-events: none;
    /* Intro: trượt từ trái sang, sau tên */
    opacity: 0;
    transform: translateX(-10vw);
    transition:
        opacity 1.2s ease 3s,
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 3s;
}
.hero-name-meta.is-ready {
    opacity: 1;
    transform: none;
}
.hero-replay .hero-name-meta {
    transition-delay: 1.2s;
}
.hero-name-tag {
    margin: 0;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(14px, 1.25vw, 26px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f0a93e;
    white-space: nowrap;
}
.hero-name-lead {
    margin: 12px 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: clamp(18px, 1.65vw, 34px);
    line-height: 1.4;
    color: rgba(255, 248, 236, 0.92);
    white-space: nowrap;
}

.site-footer { display: none; }

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 22px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.88);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: 0.2s ease;
    z-index: 40;
    font-size: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    line-height: 1;
    backdrop-filter: blur(4px);
}
.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.back-to-top:hover {
    background: rgba(0, 0, 0, 0.7);
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .main-nav {
        display: none;
        position: absolute;
        top: 56px;
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
        border-radius: 18px;
        background: rgba(12, 9, 8, 0.92);
        border: 1px solid var(--pill-border);
    }
    .main-nav.is-open { display: flex; }
    .main-nav a {
        text-align: center;
        font-size: 14px;
        padding: 12px 14px;
    }

    /* Hero mobile: ảnh phủ cả màn dọc, tên ở giữa-dưới, tagline + lead ở đáy (không chồng chữ).
       --hero-h / --hero-x dùng chung với dải chân váy trang 2 để 2 ảnh nối khớp */
    .panel-stack {
        --hero-h: max(100svh, 560px);
        --hero-x: 0.03; /* ảnh hero-zoom: người ở mép trái → khung lấy sát trái để thấy cả người */
    }
    .panel-hero {
        height: 100vh;
        height: 100svh;
        min-height: 560px;
    }
    .panel-hero img.panel-art.hero-art {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: calc(var(--hero-x) * 100%) center;
    }
    .hero-fg { display: none; }
    .hero-veil {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.2) 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.45) 55%,
            rgba(0, 0, 0, 0.82) 80%,
            rgba(0, 0, 0, 0.62) 100%);
    }
    .hero-name-title {
        left: 20px;
        right: 20px;
        top: auto;
        bottom: calc(clamp(150px, 26svh, 230px) + 8px);
        width: auto;
        gap: 0.25em;
        font-size: clamp(46px, 14vw, 72px);
    }
    .hero-name-meta {
        left: 20px;
        right: 20px;
        top: auto;
        bottom: clamp(24px, 5svh, 44px);
        width: auto;
    }
    .hero-name-tag {
        font-size: 13px;
        letter-spacing: 0.16em;
        white-space: normal;
    }
    .hero-name-lead {
        margin-top: 8px;
        font-size: 19px;
        white-space: normal;
    }

    /* Trang 2 mobile: dải chân váy cùng tỉ lệ phóng + độ dịch với ảnh hero → nối liền trang 1.
       Phần quote dài hơn dải ảnh thì chìm dần vào nền đen. */
    .page2-photo { overflow: hidden; }
    .page2-photo > img {
        position: absolute;
        top: 0;
        width: calc(var(--hero-h) * var(--hero-ar, 2));
        max-width: none;
        height: auto;
        left: calc(-1 * var(--hero-x) * (var(--hero-h) * var(--hero-ar, 2) - 100vw));
        /* Mờ dần ở mép dưới — không lộ đường cắt khi quote dài hơn dải ảnh */
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    .page2-photo-veil {
        z-index: 1;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.8) 60%,
            #000 85%);
    }
    .quote-copy {
        position: relative;
        padding: 44px 20px 40px;
        font-size: 19px;
    }
    .quote-copy p {
        width: auto;
        max-width: none;
        white-space: normal;
    }
    .page2-heritage {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 40px 20px 48px;
    }
    .panel-habui {
        padding: 36px 16px 44px;
    }
    .album {
        --slide-w: 56vw;
        --slide-gap: 12px;
        padding: 14px 12px 18px;
    }
    .album-prev { left: 8px; }
    .album-next { right: 8px; }
    .panel-khanh {
        padding: 28px 0 48px;
    }
    .khanh-copy {
        padding: 0 20px;
    }
    .khanh-quote {
        max-width: none;
        padding: 26px 22px;
    }
    .folk-inner {
        grid-template-columns: 1fr;
        row-gap: 24px;
        min-height: auto;
        padding: 36px 20px 44px;
    }
    .folk-frames {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .folk-frame-1 {
        width: auto;
    }
    .folk-copy {
        margin-top: 0;
        padding: 28px 22px;
        text-align: left;
    }
    .folk-smoke {
        width: 100%;
        height: 60%;
    }
    .panel-fabric,
    .panel-qingdao {
        min-height: auto;
        padding: 36px 20px 44px;
    }
    .panel-reborn {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .reborn-photo {
        width: 100%;
        max-width: none;
        min-height: 0;
        height: auto;
    }
    .reborn-photo img {
        position: relative;
        width: 100%;
        height: auto;
        max-height: 70vh;
        object-fit: contain;
    }
    .reborn-fb {
        margin: 0 0 0.5em;
    }
    .reborn-float-push {
        height: 40px;
    }
    .reborn-float-slot,
    .reborn-float {
        width: min(48%, 200px);
        max-width: 200px;
    }
    .reborn-script {
        left: 50%;
        width: 92%;
        white-space: normal;
        font-size: clamp(34px, 8.5vw, 52px);
    }
    .reborn-yellow {
        padding: 48px 16px 16px;
        overflow: visible;
    }
    .reborn-logo {
        width: 110px;
        height: 110px;
        right: 0;
    }
    .reborn-logo-slot {
        width: 120px;
        height: 100px;
        margin: 0 0 8px 12px;
    }
    .panel-heritagecol {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hc-photo {
        width: 100%;
        max-width: none;
        order: -1;
    }
    .hc-photo img {
        position: relative;
        width: 100%;
        height: auto;
        max-height: 70vh;
        object-fit: contain;
    }
    .hc-yellow {
        padding: 28px 16px 0;
    }
    .hc-float-push {
        height: 24px;
    }
    .hc-float-slot,
    .hc-float {
        width: min(48%, 200px);
        max-width: 200px;
    }
    .collook-frames {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px 0;
    }
    .collook-frame:nth-child(odd),
    .collook-frame:nth-child(even) {
        margin-top: 0;
    }
    .collook-frame:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
    }
    .hoaguom-grid {
        grid-template-columns: 1fr;
    }
    .hoaguom-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .hoaguom-center {
        min-height: 200px;
        aspect-ratio: 16 / 10;
    }
    .numbers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .panel-vemam,
    .ochre-top,
    .hontabody-grid,
    .awards-grid,
    .trangcollage-grid {
        grid-template-columns: 1fr;
    }
    .trangcollage-grid {
        grid-template-rows: none;
    }
    .panel-hontabody {
        padding-left: clamp(20px, 4vw, 56px);
    }
    .trangcollage-side {
        aspect-ratio: 4 / 5;
    }
    .trangcollage-mids .ochre-gframe {
        aspect-ratio: 4 / 3;
    }
    .ypintro-cards {
        grid-template-columns: 1fr;
    }
    .ochre-gallery-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ochre-gallery-3 {
        grid-template-columns: 1fr;
    }
    .ochre-stat-row,
    .ochre-stat-row-b {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0;
    }
    .panel-vemam {
        flex-direction: column;
        min-height: 0;
        padding-right: clamp(20px, 4vw, 56px);
    }
    .panel-vemam > .ochre-script {
        order: 0;
    }
    .vemam-copy {
        max-width: 100%;
        width: 100%;
        order: 1;
    }
    .vemam-art {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: min(100%, 360px);
        margin: 12px auto 0;
        order: 2;
        pointer-events: auto;
    }
    .panel-fashionomics {
        padding-right: clamp(20px, 4vw, 56px);
    }
    .panel-fashionomics .fo-col {
        max-width: 100%;
        width: 100%;
    }
    .panel-fashionomics .ochre-logo-box {
        position: relative;
        top: auto;
        right: auto;
        margin: 0 0 16px auto;
    }
    .ochre-logo-box {
        justify-self: end;
    }
    .fabric-frames,
    .fabric-frames-3 {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 24px;
    }
    .fabric-frame {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .qingdao-frames {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        height: auto;
        gap: 10px;
        margin: 24px 0;
    }
    .qingdao-frame-1,
    .qingdao-frame-2,
    .qingdao-frame-3,
    .qingdao-frame-4,
    .qingdao-frame-5 {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 3 / 4;
    }
    .heritage-frames {
        min-height: 280px;
    }
    .hero-name-top {
        margin-left: 0.08em;
    }
    .hero-name-bottom {
        margin-left: 0.04em;
    }

    .back-to-top {
        right: 14px;
        bottom: 16px;
        width: 52px;
        height: 52px;
        font-size: 26px;
    }

    /* Trang 8–9 mobile: bỏ chữ bo quanh ảnh nổi (cột chữ bị ép hẹp) — ảnh thành khối riêng trên đoạn chữ */
    .reborn-float-push,
    .reborn-float-slot,
    .hc-float-push,
    .hc-float-slot {
        display: none;
    }
    .reborn-float,
    .hc-float {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: min(62%, 240px);
        margin: 0 auto 18px;
    }
    .hc-yellow {
        padding: 28px 20px 24px;
    }

    /* Cột hẹp: căn trái thay vì căn đều để không giãn khoảng trắng giữa chữ */
    .reborn-copy,
    .reborn-copy p,
    .hc-copy,
    .hc-copy p,
    .hoaguom-body,
    .hoaguom-body p,
    .numbers-copy,
    .numbers-copy p {
        text-align: left;
        hyphens: manual;
    }
}