/* ═══════════════════════════════════════
   DESKTOP PAGE CSS
   /wp-content/themes/flatsome-child/assets/css/desktop-page.css
═══════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root { --header-height: 0px; }
.header-wrapper { height: 70px; }

/* ── Snap sticky: header cố định khi ở section > 0 ── */
.header-wrapper.snap-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1001;
    background-color: #fff;
    transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s !important;
    will-change: transform;
}
.header-wrapper.snap-sticky.sticky-section-hidden {
    transform: translateY(-110%) !important;
    pointer-events: none;
}
.header-wrapper.snap-sticky:not(.sticky-section-hidden) {
    transform: translateY(0) !important;
    pointer-events: auto;
}

/* ── Snap sticky zero: section 0, transparent overlay trên hero ── */
.header-wrapper.snap-sticky-zero {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1001;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: translateY(0) !important;
    pointer-events: auto;
}

#page-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-height));
    overflow: visible;
}

#page-screen {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0; bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;      /* scroll được để footer hiện tự nhiên */
    z-index: 10;
    /* Ẩn scrollbar — JS điều khiển scroll, không cần user thấy */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#page-screen::-webkit-scrollbar { display: none; }

/* Tạo chiều cao đủ lớn để scroll xuống footer.
   100vh = vùng section hiện tại, phần thêm = chiều cao footer */
#page-screen > .page-screen-inner {
    position: relative;
    height: 100vh; /* sections absolute bên trong */
}

/* Footer nằm sau .page-screen-inner, trong luồng bình thường
   → đóng góp vào scrollHeight của #page-screen              */
#page-screen > #footer,
#page-screen > .footer-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
}

.page-section {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: top 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}

.hero-statement {
    transition: top 0.85s cubic-bezier(0.76, 0, 0.24, 1),
                height 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
.hero-statement.is-collapsed { height: 50vh; }

/* Section backgrounds — set via JS data-bg để lazy load */
.hero-banner        { background: #1a1a2e; display: flex; align-items: center; justify-content: center; height: 100vh; }
.hero-statement     { background: #fff; display: flex; align-items: center; justify-content: center; }
.why_vietnam_section { background: #0f3460; }
.ecosystem          { display: flex; align-items: center; justify-content: center; }
.our-map            { display: flex; align-items: center; justify-content: center; }
.our-milestone      { display: flex; align-items: center; justify-content: center; }
.partnership_pathways { display: flex; align-items: center; justify-content: center; }
.contact_form7      { display: flex; align-items: center; justify-content: center; }

/* Section content */
.section-content {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 100%; height: 100%;
    position: relative; z-index: 2;
    padding: 0 12%; text-align: center;
}
.section-content .sub-tittle {
    font-size: clamp(1.6rem, 3vw, 3rem);
    font-weight: 400; font-style: italic;
    opacity: 0; transform: translateY(0px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    margin-bottom: 0;
}
.section-content p {
    width: 75%; text-align: center;
    font-size: clamp(0.85rem, 1.4vw, 1.125rem);
    line-height: 1.8; opacity: 0;
    transition: opacity 0.5s ease;
}
.section-content .section-img { opacity: 0; transition: opacity 0.5s ease; }

.page-section.anim-active .sub-tittle { opacity: 1; transform: translateY(-24px); transition-delay: 0.5s; }
.page-section.anim-active p           { opacity: 1; transition-delay: 1s; }
.page-section.anim-active .section-img { opacity: 1; transition-delay: 1s; }
.page-section.anim-reset .sub-tittle,
.page-section.anim-reset p,
.page-section.anim-reset .section-img { opacity: 0; transition: none; }
.page-section.anim-reset .sub-tittle  { transform: translateY(0px); }

.contact_form7.anim-active .sub-tittle { transition-delay: 0.05s; }
.contact_form7.anim-active p           { transition-delay: 0.05s; }
.contact_form7.anim-active .section-img { transition-delay: 0.1s; }

/* Hero banner overlay */
.hero-banner { position: relative; }
.hero-banner::before { content: ''; position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; background-size: cover; background-position: center; }
.hero-banner::after  { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.20); z-index: 1; }

/* Why sections */
.why-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }
.why-section {
    position: absolute; left: 0; width: 100%;
    height: 100%;          /* phủ hết chiều cao why-wrapper */
    min-height: 62.5vw;    /* tương đương aspect-ratio 16/10 */
    background-repeat: no-repeat; background-size: cover; background-position: center;
    display: flex; align-items: center;
    transition: top 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
.why-content { width: 45%; padding: 5% 6%; position: relative; z-index: 3; }
.why-content h2 { font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 400; font-style: italic; color: #152B1C; margin-bottom: 0; }
.why-content p  { font-size: clamp(0.8rem, 1.3vw, 1rem); color: rgba(21,43,28,0.7); line-height: 1.8; text-align: justify; }
.why-vietnam { justify-content: flex-end; }
.why-us      { justify-content: flex-start; }
.why-now     { justify-content: flex-end; }
.why_vietnam_section.is-intermediate .why-vietnam { transform: translateY(100vh); }
.why-vietnam { transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1), top 0.85s cubic-bezier(0.76, 0, 0.24, 1); }

.contact_form7 .section-content { width: 73% !important; }
.contact_form7 .section-content p { width: 100%; text-align: left; }