/* ============================================================
   FULLPAGE SCROLL (Section-by-section 1 screen per scroll)
   Tối ưu hiệu năng, áp dụng cho Desktop (>= 1024px)
   Mobile / Tablet giữ nguyên thanh cuộn mặc định
============================================================ */

@media (min-width: 1024px) {

    html.has-fp-scroll,
    body.has-fp-scroll {
        height: 100% !important;
        overflow: hidden !important;
    }

    .page-fullpage-scroll {
        height: 100vh;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .fullpage-container {
        width: 100%;
        height: 100%;
        will-change: transform;
        transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .screen-section {
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Section footer và overview-video-section hiển thị ở đáy màn hình */
    .screen-section.section-footer-wrap,
    .screen-section.overview-video-section {
        justify-content: flex-end;
    }

    .screen-section.section-footer-wrap {
        background-color: var(--bv-footer-bg, #111827);
    }

    /* Điều chỉnh các phần tử có chiều cao cố định bên trong section */
    .screen-section .ctnr {
        width: 100%;
    }

    /* Fixed header tương tác với fullpage */
    body.has-fp-scroll .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        transition: all 0.35s ease;
    }

    /* Right Side Pagination Dots Navigation */
    .fp-nav-dots {
        position: fixed;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 8px;
        list-style: none;
        background: rgba(0, 0, 0, 0.18);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 30px;
        display: none;
    }

    .fp-nav-dots li {
        width: 12px;
        height: 12px;
        position: relative;
    }

    .fp-nav-dots button {
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.8);
        background-color: transparent;
        cursor: pointer;
        outline: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
    }

    .fp-nav-dots li.is-active button {
        background-color: var(--bv-primary, #314b42);
        border-color: #ffffff;
        transform: scale(1.3);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    }
}