/* LYNK SLIDER CSS - Vertical Slider Framework */

/* 1. KHÓA KHUNG NHÌN TRÌNH DUYỆT - Chỉ áp dụng khi có slider */
body.lynk-has-slider,
body.lynk-has-slider html {
    overflow: hidden !important; 
    margin: 0; 
    padding: 0;
    height: 100vh;
    width: 100vw;
    background: #000;
}

/* 2. CONTAINER TỔNG - TRƯỢT DỌC */
#dat-nuoc-container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100vw !important;
    height: calc(var(--lynk-section-count, 8) * 100vh) !important;
    min-height: 100vh !important;
    will-change: transform;
    cursor: default;
}

/* 3. CÁC TRANG CON - XẾP DỌC */
#dat-nuoc-container > .e-con, 
#dat-nuoc-container > .e-container,
#dat-nuoc-container > .elementor-section {
    flex: 0 0 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Đảm bảo các section cụ thể (trừ #home) có height đầy đủ và không có margin-top */
#dat-nuoc-container > #music,
#dat-nuoc-container > #fashion,
#dat-nuoc-container > #video,
#dat-nuoc-container > #news,
#dat-nuoc-container > #about,
#dat-nuoc-container > #contact,
#dat-nuoc-container > #search {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
}

/* Loại bỏ margin-top từ các phần tử con trong sections (bao gồm cả margin-top âm) */
#music > *,
#fashion > *,
#video > *,
#news > *,
#about > *,
#contact > *,
#search > * {
    margin-top: 0 !important;
}

/* Đảm bảo các Elementor containers trong sections không có margin-top */
#music .elementor-element,
#music .e-con,
#music .e-container,
#fashion .elementor-element,
#fashion .e-con,
#fashion .e-container,
#video .elementor-element,
#video .e-con,
#video .e-container,
#news .elementor-element,
#news .e-con,
#news .e-container,
#about .elementor-element,
#about .e-con,
#about .e-container,
#contact .elementor-element,
#contact .e-con,
#contact .e-container,
#search .elementor-element,
#search .e-con,
#search .e-container {
    margin-top: 0 !important;
}


/* Ẩn section #search mặc định - chỉ hiển thị khi body có data-active-section="search" */
#dat-nuoc-container > #search {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body[data-active-section="search"] #dat-nuoc-container > #search {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* 4. THANH CUỘN DỌC (XANH LỤC BẢO) */
#dat-nuoc-container > div::-webkit-scrollbar {
    width: 5px;
}
#dat-nuoc-container > div::-webkit-scrollbar-thumb {
    background: rgba(162, 255, 179, 0.3);
    border-radius: 10px;
}

/* Mobile: hide scrollbars (incl. homepage on load) */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    html, body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    #dat-nuoc-container > div::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #dat-nuoc-container > div {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* 5. STYLE CHO MENU ACTIVE */
.elementor-icon-list-item.active .elementor-icon-list-text,
.elementor-item.active,
.menu-link.active,
.active-menu-item {
    color: #C5A059 !important; 
    font-weight: bold !important;
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
}

/* 6. ĐẢM BẢO NAVIGATION LINKS LUÔN CÓ THỂ CLICK ĐƯỢC */
/* Ngay cả khi section nằm ngoài viewport, các navigation links vẫn có thể click được */
#dat-nuoc-container a[href^="#"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Đảm bảo các navigation links trong home section vẫn có thể click được */
#home a[href^="#music"],
#home a[href^="#fashion"],
#home a[href^="#video"],
#home a[href^="#news"],
#home a[href^="#about"],
#home a[href^="#contact"],
#home a[href^="#search"],
#home a[href^="#home"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 9999;
}

/* HEADER TRANSPARENT - Làm header Elementor transparent */
#site-header,
.site-header,
header[class*="elementor"],
header.elementor-location-header,
.elementor-location-header,
.e-global__header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ẨN HEADER CHỈ Ở #HOME - Hiển thị bình thường ở các section khác */
/* Chỉ ẩn khi body có class on-home-section */
body.on-home-section #site-header,
body.on-home-section .site-header,
body.on-home-section header[class*="elementor"],
body.on-home-section header.elementor-location-header,
body.on-home-section .elementor-location-header,
body.on-home-section .e-global__header,
body.on-home-section header.elementor-location-header *,
body.on-home-section header.elementor-location-header .elementor-element,
body.on-home-section header.elementor-location-header .elementor-widget,
body.on-home-section header.elementor-location-header .elementor-widget-container,
body.on-home-section header.elementor-location-header .elementor-heading-title,
body.on-home-section header.elementor-location-header h1,
body.on-home-section header.elementor-location-header h2,
body.on-home-section header.elementor-location-header h3,
body.on-home-section header.elementor-location-header h4,
body.on-home-section header.elementor-location-header h5,
body.on-home-section header.elementor-location-header h6,
body.on-home-section header.elementor-location-header a,
body.on-home-section header.elementor-location-header span,
body.on-home-section header.elementor-location-header div,
body.on-home-section header.elementor-location-header p,
body.on-home-section header.elementor-location-header .e-con,
body.on-home-section header.elementor-location-header .e-container,
body.on-home-section header.elementor-location-header .lynk-header-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Đảm bảo header inner cũng transparent */
.site-header .header-inner,
#site-header .header-inner,
.elementor-location-header .header-inner {
    background: transparent !important;
    background-color: transparent !important;
}

/* Đảm bảo TẤT CẢ phần tử trong header container đều transparent */
header.elementor-location-header *,
.lynk-header-container,
.lynk-header-container *,
header.elementor-location-header .elementor-element,
header.elementor-location-header .elementor-widget,
header.elementor-location-header .e-con,
header.elementor-location-header .e-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Loại bỏ background đen từ Elementor settings */
header.elementor-location-header .elementor-element[data-settings*="background"],
.lynk-header-container[data-settings*="background"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* MOBILE - VERTICAL SLIDER OPTIMIZATION */
/* CHỈ CHỈNH TỪ #music TRỞ VỀ SAU, GIỮ NGUYÊN #home */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    /* Đảm bảo các sections từ #music trở về sau có height 100vh và hiển thị tốt */
    #music,
    #fashion,
    #video,
    #news,
    #about,
    #contact,
    #search {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        transform: translateY(0) !important;
        -webkit-transform: translateY(0) !important;
    }
    
    /* Đảm bảo Elementor containers trong sections (trừ #home) */
    #music .elementor-element,
    #music .elementor-shortcode,
    #music .e-con,
    #music .e-container,
    #fashion .elementor-element,
    #fashion .elementor-shortcode,
    #fashion .e-con,
    #fashion .e-container,
    #video .elementor-element,
    #video .elementor-shortcode,
    #video .e-con,
    #video .e-container,
    #news .elementor-element,
    #news .elementor-shortcode,
    #news .e-con,
    #news .e-container,
    #about .elementor-element,
    #about .elementor-shortcode,
    #about .e-con,
    #about .e-container,
    #contact .elementor-element,
    #contact .elementor-shortcode,
    #contact .e-con,
    #contact .e-container,
    #search .elementor-element,
    #search .elementor-shortcode,
    #search .e-con,
    #search .e-container {
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* Padding cho sections trên mobile (trừ #home) */
    #music > .e-con,
    #music > .e-container,
    #music > .elementor-section,
    #fashion > .e-con,
    #fashion > .e-container,
    #fashion > .elementor-section,
    #video > .e-con,
    #video > .e-container,
    #video > .elementor-section,
    #news > .e-con,
    #news > .e-container,
    #news > .elementor-section,
    #about > .e-con,
    #about > .e-container,
    #about > .elementor-section,
    #contact > .e-con,
    #contact > .e-container,
    #contact > .elementor-section,
    #search > .e-con,
    #search > .e-container,
    #search > .elementor-section {
        padding: 50px 15px 20px 15px !important;
    }
}

@media (max-width: 480px) {
    /* Small mobile - điều chỉnh padding (trừ #home) */
    #music > .e-con,
    #music > .e-container,
    #music > .elementor-section,
    #fashion > .e-con,
    #fashion > .e-container,
    #fashion > .elementor-section,
    #video > .e-con,
    #video > .e-container,
    #video > .elementor-section,
    #news > .e-con,
    #news > .e-container,
    #news > .elementor-section,
    #about > .e-con,
    #about > .e-container,
    #about > .elementor-section,
    #contact > .e-con,
    #contact > .e-container,
    #contact > .elementor-section,
    #search > .e-con,
    #search > .e-container,
    #search > .elementor-section {
        padding: 40px 10px 15px 10px !important;
    }
}