/* ==========================================================================
   HERO BANNER & SLIDER - BEM CSS LẤY BIẾN GLOBAL CSS
   ========================================================================== */

/* 1. ÉP SECTION HERO TRÀN VIỀN MÀN HÌNH */
.lui-scope .crb-block-fullwidth.lui-hero,
.crb-block-fullwidth.hero {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    background-color: transparent !important;
}

/* 2. OVERLAY TỐI */
.lui-scope .lui-hero__overlay,
.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
}

.lui-scope .lui-hero--no-overlay .lui-hero__overlay,
.hero--no-overlay .hero__overlay {
    display: none !important;
}

/* 3. LAYOUT CAROUSEL CARDS */
.lui-scope .lui-hero--carousel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 520px !important;
    padding: 60px 0 40px 0 !important;
    box-sizing: border-box !important;
    background-color: var(--text-dark) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.lui-scope .lui-hero__carousel-container {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1240px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.lui-scope .lui-hero__swiper-carousel {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 10px 0 50px 0 !important;
}

.lui-scope .lui-hero__carousel-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.lui-scope .lui-hero__card {
    width: 100% !important;
    background: var(--text-white) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    aspect-ratio: 1 / 1.08 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-base) !important;
}

.lui-scope .lui-hero__card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
}

.lui-scope .lui-hero__card-link {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.lui-scope .lui-hero__card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
}

/* 4. STANDARD SLIDER LAYOUT */
.lui-scope .lui-hero__slider,
.hero__slider {
    width: 100% !important;
    height: auto !important;
    min-height: clamp(450px, 52vh, 580px);
}

.lui-scope .lui-hero__slide,
.hero__slide {
    position: relative;
    width: 100%;
    min-height: clamp(450px, 52vh, 580px);
    display: flex !important;
    align-items: center !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: var(--bg-mb);
    box-sizing: border-box;
}

/* Chiều cao Tiêu chuẩn (460px - 560px) */
.hero--height-standard .hero__slider,
.hero--height-standard .hero__slide,
.lui-hero--height-standard .lui-hero__slider,
.lui-hero--height-standard .lui-hero__slide,
.lui-scope .lui-hero--height-standard .lui-hero__slider,
.lui-scope .lui-hero--height-standard .lui-hero__slide {
    height: clamp(460px, 55vh, 560px) !important;
    min-height: clamp(460px, 55vh, 560px) !important;
    max-height: 560px !important;
}

/* Chiều cao Gọn gàng (380px - 450px) */
.hero--height-compact .hero__slider,
.hero--height-compact .hero__slide,
.lui-hero--height-compact .lui-hero__slider,
.lui-hero--height-compact .lui-hero__slide,
.lui-scope .lui-hero--height-compact .lui-hero__slider,
.lui-scope .lui-hero--height-compact .lui-hero__slide {
    height: clamp(380px, 45vh, 450px) !important;
    min-height: clamp(380px, 45vh, 450px) !important;
    max-height: 450px !important;
}

/* Chiều cao Toàn màn hình (100vh) */
.hero--height-fullscreen .hero__slider,
.hero--height-fullscreen .hero__slide,
.lui-hero--height-fullscreen .lui-hero__slider,
.lui-hero--height-fullscreen .lui-hero__slide,
.lui-scope .lui-hero--height-fullscreen .lui-hero__slider,
.lui-scope .lui-hero--height-fullscreen .lui-hero__slide {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
}

@media (max-width: 767px) {
    .hero--height-standard .hero__slider,
    .hero--height-standard .hero__slide,
    .lui-hero--height-standard .lui-hero__slider,
    .lui-hero--height-standard .lui-hero__slide,
    .lui-scope .lui-hero--height-standard .lui-hero__slider,
    .lui-scope .lui-hero--height-standard .lui-hero__slide {
        height: auto !important;
        min-height: 420px !important;
        max-height: none !important;
    }

    .hero--height-compact .hero__slider,
    .hero--height-compact .hero__slide,
    .lui-hero--height-compact .lui-hero__slider,
    .lui-hero--height-compact .lui-hero__slide,
    .lui-scope .lui-hero--height-compact .lui-hero__slider,
    .lui-scope .lui-hero--height-compact .lui-hero__slide {
        height: auto !important;
        min-height: 350px !important;
        max-height: none !important;
    }

    .hero--height-fullscreen .hero__slider,
    .hero--height-fullscreen .hero__slide,
    .lui-hero--height-fullscreen .lui-hero__slider,
    .lui-hero--height-fullscreen .lui-hero__slide,
    .lui-scope .lui-hero--height-fullscreen .lui-hero__slider,
    .lui-scope .lui-hero--height-fullscreen .lui-hero__slide {
        height: 100vh !important;
        min-height: 100vh !important;
    }
}

@media (min-width: 768px) {
    .lui-scope .lui-hero__slide,
    .hero__slide {
        background-image: var(--bg-desk);
    }
}

.lui-scope .lui-hero__video,
.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.lui-scope .lui-hero__container-inner,
.hero__container-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.lui-scope .lui-hero__content,
.hero__content {
    max-width: 680px;
    color: var(--text-white) !important;
    display: flex;
    flex-direction: column;
}

/* 5. TYPOGRAPHY & BUTTONS LẤY TỪ GLOBAL CSS */
.lui-scope .lui-hero__title,
.hero__title {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-h1) !important;
    line-height: var(--lh-h1) !important;
    font-weight: var(--fw-h1) !important;
    color: var(--text-white) !important;
    margin: 0 0 var(--space-heading-bottom) 0 !important;
}

.lui-scope .lui-hero__subtitle {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-body-s) !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    color: var(--text-white) !important;
    margin-bottom: 8px;
    opacity: 0.95;
}

.lui-scope .lui-hero__desc,
.hero__desc {
    font-family: var(--font-body) !important;
    font-size: var(--fs-body-l) !important;
    line-height: var(--lh-body-l) !important;
    font-weight: var(--fw-body-l) !important;
    color: var(--text-white) !important;
    margin: 0 0 var(--space-text-bottom) 0 !important;
    opacity: 0.95;
}

.lui-scope .lui-hero__btn,
.hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body) !important;
    font-size: var(--fs-btn-l) !important;
    font-weight: var(--fw-btn-l) !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
    transition: var(--transition-base);
}

/* 6. VỊ TRÍ CHỮ (LEFT - CENTER - RIGHT NHƯ ẢNH KRESTON) */

/* Căn Trái */
.lui-scope .lui-hero__slide--pos-left .lui-hero__content,
.hero__slide--pos-left .hero__content {
    text-align: left !important;
    align-items: flex-start !important;
    margin: 0 !important;
}

/* Căn Giữa */
.lui-scope .lui-hero__slide--pos-center .lui-hero__content,
.hero__slide--pos-center .hero__content {
    text-align: center !important;
    align-items: center !important;
    margin: 0 auto !important;
}

/* Căn Phải (Chữ nằm gọn vùng xanh vát bên phải ảnh) */
.lui-scope .lui-hero__slide--pos-right .lui-hero__content,
.hero__slide--pos-right .hero__content {
    text-align: left !important;
    align-items: flex-start !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: 50% !important; /* Dành 50% không gian góc phải cho chữ */
}

/* Style Nút Bấm Kreston (Text + Mũi tên >) */
.lui-scope .lui-hero__slide--pos-right .lui-hero__btn,
.hero__slide--pos-right .hero__btn {
    background: transparent !important;
    color: var(--text-white) !important;
    font-weight: 600 !important;
    padding: 0 !important;
    border: none !important;
}

.lui-scope .lui-hero__slide--pos-right .lui-hero__btn::after,
.hero__slide--pos-right .hero__btn::after {
    content: "›" !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* 7. PAGINATION DOTS */
.lui-scope .lui-hero__pagination,
.hero__pagination {
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}

.lui-scope .lui-hero__pagination .swiper-pagination-bullet,
.hero__pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--text-white) !important;
    opacity: 0.5 !important;
    margin: 0 !important;
    transition: var(--transition-base) !important;
    cursor: pointer !important;
}

.lui-scope .lui-hero__pagination .swiper-pagination-bullet-active,
.hero__pagination .swiper-pagination-bullet-active {
    opacity: 1 !important;
    transform: scale(1.2) !important;
    background-color: var(--text-white) !important;
}

/* RESPONSIVE MOBILE */
.lui-hero__text-desktop,
.lui-scope .lui-hero__text-desktop { display: inline; }

.lui-hero__text-mobile,
.lui-scope .lui-hero__text-mobile { display: none; }

@media (max-width: 991px) {
    .lui-scope .lui-hero__slide--pos-right .lui-hero__content,
    .hero__slide--pos-right .hero__content {
        max-width: 100% !important; /* Mobile chữ tự căng tròn chiều rộng */
    }
}

@media (max-width: 767px) {
    .lui-hero__text-desktop,
    .lui-scope .lui-hero__text-desktop { display: none !important; }

    .lui-hero__text-mobile,
    .lui-scope .lui-hero__text-mobile { display: inline !important; }
}