/* ==========================================================================
   LUI HERO BANNER & SLIDER - COMPLETE BEM STYLES
   Path: light-ui/templates/sections/block-banner/style.css
   ========================================================================== */

/* 1. ÉP SECTION HERO TRÀN VIỀN MÀN HÌNH (BREAKOUT FULLWIDTH) */
.lui-hero,
.lui-scope .crb-block-fullwidth.lui-hero,
.lui-scope .lui-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;
    font-family: var(--font-body);
}

/* 2. LỚP PHỦ TỐI (OVERLAY) */
.lui-hero__overlay,
.lui-scope .lui-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg-overlay);
    z-index: 2;
    pointer-events: none;
}

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

/* ==========================================================================
   CAROUSEL CARDS LAYOUT
   ========================================================================== */
.lui-hero--carousel,
.lui-scope .lui-hero--carousel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: var(--hero-height-carousel) !important;
    padding: calc(var(--space-text-bottom) * 2.4) 0 var(--space-heading-bottom) 0 !important;
    box-sizing: border-box !important;
    background-color: var(--color-primary-second) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.lui-hero__carousel-container,
.lui-scope .lui-hero__carousel-container {
    position: relative !important;
    z-index: 2 !important;
    max-width: var(--container-max-w) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--container-pad-x) !important;
    box-sizing: border-box !important;
}

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

.lui-hero__carousel-slide,
.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-hero__card,
.lui-scope .lui-hero__card {
    width: 100% !important;
    background: var(--color-primary) !important;
    border-radius: var(--radius-atom) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-card) !important;
    aspect-ratio: var(--hero-card-ratio) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-base) !important;
}

.lui-hero__card:hover,
.lui-scope .lui-hero__card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

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

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

/* ==========================================================================
   STANDARD SLIDER LAYOUT
   ========================================================================== */
.lui-hero__slider,
.lui-scope .lui-hero__slider {
    width: 100% !important;
    height: auto !important;
    min-height: clamp(var(--hero-height-std-min), var(--hero-height-std-vh), var(--hero-height-std-max));
}

.lui-hero__slide,
.lui-scope .lui-hero__slide {
    position: relative;
    width: 100%;
    min-height: clamp(var(--hero-height-std-min), var(--hero-height-std-vh), var(--hero-height-std-max));
    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;
}

.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 {
    min-height: clamp(var(--hero-height-std-min), var(--hero-height-std-vh), var(--hero-height-std-max)) !important;
}

.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 {
    min-height: clamp(var(--hero-height-compact-min), var(--hero-height-compact-vh), var(--hero-height-compact-max)) !important;
}

.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 {
    min-height: 100vh !important;
}

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

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

.lui-hero__container-inner,
.lui-scope .lui-hero__container-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-max-w);
    margin: 0 auto;
    padding: 0 var(--container-pad-x);
    box-sizing: border-box;
}

.lui-hero__content,
.lui-scope .lui-hero__content {
    max-width: 760px;
    display: flex;
    flex-direction: column;
}

.lui-hero__slide--left .lui-hero__content,
.lui-scope .lui-hero__slide--left .lui-hero__content {
    text-align: left !important;
    align-items: flex-start !important;
    margin: 0 !important;
}

.lui-hero__slide--center .lui-hero__content,
.lui-scope .lui-hero__slide--center .lui-hero__content {
    text-align: center !important;
    align-items: center !important;
    margin: 0 auto;
}

/* ==========================================================================
   TYPOGRAPHY IN HERO (ĂN THEO BIẾN GLOBAL.CSS)
   ========================================================================== */
.lui-hero__title,
.lui-scope .lui-hero__title {
    font-family: var(--ff-hero) !important;
    font-size: var(--fs-hero) !important;
    line-height: var(--lh-hero) !important;
    font-weight: var(--fw-hero) !important;
    margin: 0 0 var(--space-heading-bottom) 0 !important;
    text-shadow: var(--shadow-text-title);
    text-transform: none;
}

.lui-hero__slide--left .lui-hero__title,
.lui-scope .lui-hero__slide--left .lui-hero__title {
    text-align: left !important;
    text-transform: none !important;
    position: relative;
    padding-bottom: var(--space-heading-bottom);
    margin-bottom: var(--space-text-bottom) !important;
}

.lui-hero__slide--left .lui-hero__title::after,
.lui-scope .lui-hero__slide--left .lui-hero__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--hero-deco-line-w);
    height: var(--hero-deco-line-h);
    background-color: var(--color-white-90);
    border-radius: var(--radius-atom);
}

.lui-hero__subtitle,
.lui-scope .lui-hero__subtitle {
    font-family: var(--font-body) !important;
    font-size: var(--fs-caption) !important;
    font-weight: var(--fw-body-s) !important;
    letter-spacing: 1.2px !important;
    text-transform: none;
    margin-bottom: calc(var(--space-heading-bottom) / 2);
    opacity: 0.95;
    text-shadow: var(--shadow-text-sub);
}

.lui-hero__slide--left .lui-hero__subtitle,
.lui-scope .lui-hero__slide--left .lui-hero__subtitle {
    text-align: left !important;
    text-transform: none !important;
}

.lui-hero__breadcrumb,
.lui-scope .lui-hero__breadcrumb {
    margin-top: calc(var(--space-heading-bottom) / 2);
    margin-bottom: var(--space-heading-bottom);
    font-size: calc(var(--fs-caption) - 1px);
    color: var(--color-white-85);
}

.lui-hero__breadcrumb a,
.lui-scope .lui-hero__breadcrumb a {
    color: var(--color-white-85);
    text-decoration: none;
}

.lui-hero__breadcrumb a:hover,
.lui-scope .lui-hero__breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

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

/* ==========================================================================
   STYLE NÚT BẤM (TRIỆT PHÂN MÀU XANH BẰNG CÁCH GẮN TRỰC TIẾP BIẾN GLOBAL)
   ========================================================================== */
.lui-hero__btn,
.lui-scope .lui-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: var(--radius-atom);
    font-family: var(--font-body);
    font-size: var(--fs-btn-l);
    font-weight: var(--fw-btn-l);
    text-decoration: none !important;
    text-transform: uppercase;
    transition: var(--transition-base);
    
    /* Gán biến Nút Viền Trắng từ global.css (Đè hẳn inline style #027CC5 từ PHP) */
    background-color: transparent !important;
    border: 1.5px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: none !important;
}

.lui-hero__btn:hover,
.lui-scope .lui-hero__btn:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary-second) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   PAGINATION (CHẤM TRÒN PHÂN TRANG)
   ========================================================================== */
.lui-hero__pagination,
.lui-scope .lui-hero__pagination {
    position: absolute !important;
    bottom: calc(var(--space-heading-bottom) / 2) !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-hero__pagination .swiper-pagination-bullet,
.lui-scope .lui-hero__pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--color-primary) !important;
    opacity: 0.5 !important;
    margin: 0 !important;
    transition: var(--transition-base) !important;
    cursor: pointer !important;
}

.lui-hero__pagination .swiper-pagination-bullet-active,
.lui-scope .lui-hero__pagination .swiper-pagination-bullet-active {
    opacity: 1 !important;
    transform: scale(1.3) !important;
    background-color: var(--color-primary) !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: 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;
    }

    .lui-hero--carousel,
    .lui-scope .lui-hero--carousel {
        min-height: var(--hero-height-carousel-mobile) !important;
    }
}