/* HDev Swiper Slider Pro - Frontend CSS */

/* Font UTM Americana - Cần upload file font vào thư mục assets/fonts/ */
@font-face {
    font-family: 'UTM Americana';
    src: url('../fonts/UTM-Americana.woff2') format('woff2'),
        url('../fonts/UTM-Americana.woff') format('woff'),
        url('../fonts/UTM-Americana.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CRITICAL: Tương thích với fullPage.js */
/* Khi slider nằm trong section có class hdev-fullpage, không set height riêng */
.hdev-fullpage .hdev-swiper-slider-container {
    position: relative;
    width: 100%;
    height: 100% !important;
    /* Inherit từ parent section */
    overflow: visible !important;
    /* Cho phép pagination hiển thị bên ngoài */
    z-index: 1;
    /* Thấp hơn Flatsome header (z-index: 9999) */
}

/* Khi slider KHÔNG nằm trong fullpage section, vẫn dùng 100vh như bình thường */
.hdev-swiper-slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    /* Thấp hơn Flatsome header */
}

/* Đảm bảo slider luôn full height của container */
.hdev-swiper-slider {
    width: 100%;
    height: 100%;
    overflow: visible !important;
    /* CRITICAL: Cho phép pagination hiển thị */
}

/* Đảm bảo swiper-wrapper cũng có height đầy đủ */
.hdev-swiper-slider .swiper-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Nội dung slide không overflow */
}

.hdev-swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Slide content không tràn */
}

/* Hình ảnh full screen */
.hdev-swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Overlay tối phía trên - giống trang mẫu */
.hdev-swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14rem;
    background: linear-gradient(0deg, rgba(0, 79, 56, .9) 0%, rgba(0, 79, 56, .9) .01%, rgba(0, 79, 56, .74) 41.45%, rgba(0, 79, 56, 0) 100%);
    z-index: 1;
    transform: rotate(180deg);
    pointer-events: none;
}

/* Overlay tối phía dưới */
.hdev-swiper-slide::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(0deg, rgba(0, 27, 19, .9) 0%, rgba(0, 27, 19, .74) 52%, rgba(0, 27, 19, 0) 100%);
    pointer-events: none;
}

/* Text wrapper - uses Flatsome container for alignment */
.hdev-swiper-text-wrapper {
    position: absolute;
    bottom: 120px;
    /* Fixed pixels instead of % - won't change when viewport resizes */
    left: 0;
    right: 0;
    z-index: 5;
    /* Thấp hơn pagination và header */
    pointer-events: none;
    /* Cho phép click through wrapper */
}

/* Text content - now inside container, aligned with logo */
.hdev-swiper-text {
    color: #ffffff;
    font-size: 3.2rem;
    font-weight: 300;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.4;
    padding: 0;
    max-width: 715px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    font-family: 'UTM Americana', serif;
    margin-bottom: 30px;
    pointer-events: all;
    /* Text có thể select được */
}

/* Pagination wrapper - uses Flatsome container for alignment */
.hdev-swiper-pagination-wrapper {
    position: fixed !important;
    /* CRITICAL: Dùng fixed để không bị che */
    bottom: 80px !important;
    /* Fixed pixels instead of vh - stable position */
    left: 0;
    right: 0;
    z-index: 9998 !important;
    /* Cao hơn slider, thấp hơn header */
    pointer-events: none;
    /* Cho phép click through wrapper */
}

/* CRITICAL: Container inside wrapper MUST be relative for pagination to position correctly */
.hdev-swiper-pagination-wrapper .container {
    position: relative;
}

/* Dot navigation (pagination) - inside container, aligned with text */
.hdev-swiper-pagination {
    position: relative !important;
    display: flex;
    gap: 10px;
    /* Slightly smaller gap */
    align-items: center;
    pointer-events: all;
    /* Đảm bảo click được */
    will-change: transform;
    /* Optimize for smooth repositioning */
    bottom: var(--swiper-pagination-bottom, -30px);
    /* Space below text */
}

.hdev-swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    /* Smaller size */
    height: 10px;
    background: transparent;
    opacity: 1;
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: all 0.4s ease;
    cursor: pointer;
    border-radius: 2px;
    transform: rotate(45deg);
}

/* Active bullet - gold/yellow theme matching reference site */
.hdev-swiper-pagination .swiper-pagination-bullet-active {
    background: rgba(212, 175, 55, 1);
    /* Gold fill */
    border-color: rgba(255, 215, 0, 1);
    /* Bright gold border */
    transform: rotate(45deg) scale(1.5);
    /* Slightly larger scale */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.5);
    /* Strong glow */
}

.hdev-swiper-pagination .swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Audio player (ẩn nhưng vẫn hoạt động) */
.hdev-swiper-audio {
    display: none;
}

/* Audio Control Button - Ẩn tạm thời */
.hdev-audio-control {
    display: none !important;
}

/* Tương thích với Flatsome Transparent Header */
.header.transparent~#main .hdev-swiper-slider-container,
.header.has-transparent~#main .hdev-swiper-slider-container {
    margin-top: -150px;
    padding-top: 150px;
}

/* Đảm bảo slider content không bị header che */
.header.transparent~#main .hdev-swiper-slide,
.header.has-transparent~#main .hdev-swiper-slide {
    padding-top: 0;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .hdev-swiper-text-wrapper {
        bottom: 20%;
    }

    .hdev-swiper-text {
        font-size: 1.8rem;
        letter-spacing: 0.1em;
        max-width: 85%;
        margin-bottom: 25px;
    }

    .hdev-swiper-pagination-wrapper {
        bottom: calc(20% - 45px) !important;
    }

    .hdev-swiper-pagination {
        gap: 10px;
    }

    .hdev-swiper-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
    }

    /* Điều chỉnh transparent header cho mobile */
    .header.transparent~#main .hdev-swiper-slider-container,
    .header.has-transparent~#main .hdev-swiper-slider-container {
        margin-top: -80px;
        padding-top: 80px;
    }
}

@media (max-width: 480px) {
    .hdev-swiper-text-wrapper {
        bottom: 25%;
    }

    .hdev-swiper-text {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .hdev-swiper-pagination-wrapper {
        bottom: calc(25% - 40px) !important;
    }

    .hdev-swiper-pagination {
        gap: 8px;
    }
}

/* Animation cho text khi slide thay đổi */
.hdev-swiper-slide-active .hdev-swiper-text {
    animation: fadeInLeft 0.8s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}