/* ===== Banner slot (trình quản lý banner) ===== */
.banner-slot {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    margin: 18px auto 6px;
    max-width: 1140px;
    box-shadow: 0 10px 30px rgba(30, 58, 138, .18);
    isolation: isolate;
}
.banner-slot.bn-h-sm { height: 140px; }
.banner-slot.bn-h-md { height: 220px; }
.banner-slot.bn-h-lg { height: 340px; }

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s;
    display: flex;
    align-items: center;
}
.banner-slide.active { opacity: 1; visibility: visible; z-index: 1; }

.banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.banner-img-fallback {
    background: linear-gradient(120deg, #1d4ed8, #2563eb 45%, #06b6d4);
    background-size: 200% 200%;
    animation: bn-gradient-move 10s ease infinite;
}

/* Lớp phủ màu giúp chữ dễ đọc */
.banner-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.banner-slide.overlay-dark::before { background: linear-gradient(90deg, rgba(15, 23, 42, .68), rgba(15, 23, 42, .25)); }
.banner-slide.overlay-brand::before { background: linear-gradient(120deg, rgba(37, 99, 235, .78), rgba(6, 182, 212, .55)); }
.banner-slide.overlay-light::before { background: rgba(255, 255, 255, .55); }

.banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px 56px;
    color: #fff;
}
.banner-slide.overlay-light .banner-content { color: #1e3a8a; }
.banner-slide.align-center .banner-content { text-align: center; }
.banner-slide.align-right .banner-content { text-align: right; }

.banner-headline {
    font-size: clamp(1.25rem, 3.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}
.banner-slide.overlay-light .banner-headline { text-shadow: none; }
.banner-subtext {
    margin-top: 8px;
    font-size: clamp(.9rem, 1.6vw, 1.05rem);
    opacity: .92;
    max-width: 640px;
}
.banner-slide.align-center .banner-subtext { margin-left: auto; margin-right: auto; }
.banner-slide.align-right .banner-subtext { margin-left: auto; }
.banner-btn { margin-top: 14px; display: inline-block; }
.banner-link { position: absolute; inset: 0; z-index: 3; }

/* ===== Hiệu ứng hình ảnh ===== */
@keyframes bn-kenburns { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.15) translate(-2.5%, -2%); } }
@keyframes bn-zoomin { 0% { transform: scale(1); } 100% { transform: scale(1.14); } }
@keyframes bn-zoomout { 0% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes bn-pan { 0% { transform: scale(1.12) translateX(2.5%); } 100% { transform: scale(1.12) translateX(-2.5%); } }
@keyframes bn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bn-gradient-move { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.banner-slide.active .imgfx-kenburns { animation: bn-kenburns 14s ease-out forwards; }
.banner-slide.active .imgfx-zoomin { animation: bn-zoomin 14s ease-out forwards; }
.banner-slide.active .imgfx-zoomout { animation: bn-zoomout 14s ease-out forwards; }
.banner-slide.active .imgfx-pan { animation: bn-pan 16s ease-in-out infinite alternate; }
.banner-slide.active .imgfx-pulse { animation: bn-pulse 8s ease-in-out infinite; }

/* ===== Hiệu ứng chữ ===== */
@keyframes bn-fadeup { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: translateY(0); } }
.banner-slide.active .fx-fadeup { animation: bn-fadeup .9s ease both; }
.banner-slide.active .fx-fadeup + .banner-subtext { animation: bn-fadeup .9s .25s ease both; }
.banner-slide.active .banner-btn { animation: bn-fadeup .9s .45s ease both; }

@keyframes bn-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.fx-typing::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-left: 4px;
    vertical-align: -.12em;
    background: currentColor;
    animation: bn-caret .8s step-end infinite;
}

@keyframes bn-wave { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-.35em); } }
.fx-wave .bn-ch { display: inline-block; animation: bn-wave 1.6s ease-in-out infinite; }

.fx-gradient {
    background: linear-gradient(90deg, #ffffff, #bae6fd, #bfdbfe, #ffffff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: bn-gradient-move 5s linear infinite;
}
.banner-slide.overlay-light .fx-gradient { background-image: linear-gradient(90deg, #1d4ed8, #06b6d4, #2563eb, #1d4ed8); }

@keyframes bn-neon {
    0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,.85), 0 0 18px rgba(56,189,248,.9), 0 0 38px rgba(6,182,212,.8); }
    50% { text-shadow: 0 0 3px rgba(255,255,255,.5), 0 0 10px rgba(56,189,248,.55), 0 0 20px rgba(6,182,212,.45); }
}
.fx-neon { animation: bn-neon 2.2s ease-in-out infinite; }

@keyframes bn-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.fx-marquee { white-space: nowrap; will-change: transform; }
.banner-slide.active .fx-marquee { animation: bn-marquee 14s linear infinite; }

/* ===== Điều hướng carousel ===== */
.banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .2s;
}
.banner-nav:hover { background: rgba(255, 255, 255, .45); }
.banner-nav.prev { left: 12px; }
.banner-nav.next { right: 12px; }

.banner-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.banner-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.banner-dot.active { background: #fff; transform: scale(1.25); }

/* ===== Banner làm nền hero (trang chủ): căng ngang toàn màn hình, chữ hero overlay lên hình ===== */
.hero { position: relative; overflow: hidden; }
.hero .banner-slot,
.hero .banner-slot.bn-h-sm,
.hero .banner-slot.bn-h-md,
.hero .banner-slot.bn-h-lg {
    position: absolute;
    inset: 0;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
.hero .hero-inner { position: relative; z-index: 5; }
.hero .banner-nav, .hero .banner-dots { z-index: 6; }
/* Hình chưa đủ tối thì phủ thêm lớp mờ để chữ hero luôn đọc được */
.hero .banner-slide.overlay-none::before {
    content: "";
    background: linear-gradient(90deg, rgba(15, 23, 42, .45), rgba(15, 23, 42, .12));
}

@media (prefers-reduced-motion: reduce) {
    .banner-img, .fx-wave .bn-ch, .fx-neon, .fx-marquee, .fx-gradient { animation: none !important; }
}

@media (max-width: 640px) {
    .banner-slot { border-radius: 12px; margin: 12px 12px 4px; }
    .banner-slot.bn-h-sm { height: 110px; }
    .banner-slot.bn-h-md { height: 160px; }
    .banner-slot.bn-h-lg { height: 220px; }
    .banner-content { padding: 14px 46px; }
    .banner-nav { width: 30px; height: 30px; font-size: 18px; }
}