/* ============================================================================
 * hero.css — Hero banner trang chủ (slider .aqf-slider-area) — UI/UX chuẩn
 * chuyển đổi cao. Tách riêng theo trang/khu (CLAUDE.md 6.3), chỉ nạp ở trang chủ.
 * Tái dùng markup + Swiper của theme; override phần nhìn bằng scope .aqf-slider-area.
 * Responsive đầy đủ mobile → desktop (6.4).
 * ========================================================================== */

:root {
    --hero-accent: var(--aq-common-red, #e4002b);
    --hero-accent-dark: #c20025;
}

/* ---- Khung slide: chiều cao ổn định, bo nhẹ đáy, cắt ảnh gọn -------------- */
.aqf-slider-area .aqf-slider-item {
    position: relative;
    overflow: hidden;
    min-height: 460px;
}

@media (min-width: 768px) {
    .aqf-slider-area .aqf-slider-item { min-height: 600px; }
}

@media (min-width: 1200px) {
    .aqf-slider-area .aqf-slider-item { min-height: 700px; }
}

/* Ảnh phủ kín khung ở MỌI thiết bị (ghi đè kiểu xếp dọc của theme trên mobile) */
.aqf-slider-area .aqf-slider-thumb {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
}

.aqf-slider-area .aqf-slider-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin-inline-end: 0 !important;
    transform: scale(1.04);
    transition: transform 7s ease;
}

.aqf-slider-area .swiper-slide-active .aqf-slider-thumb img { transform: scale(1); }

/* ---- Lớp phủ gradient: đảm bảo chữ trắng luôn đọc rõ trên mọi ảnh CMS ----- */
.aqf-slider-area .aqf-slider-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(13, 15, 20, .72) 0%, rgba(13, 15, 20, .45) 38%, rgba(13, 15, 20, .12) 64%, rgba(13, 15, 20, 0) 100%);
}

@media (max-width: 767px) {
    /* Mobile: phủ tối từ dưới lên cho chữ căn đáy */
    .aqf-slider-area .aqf-slider-item::before {
        background: linear-gradient(180deg, rgba(13, 15, 20, .15) 0%, rgba(13, 15, 20, .35) 45%, rgba(13, 15, 20, .82) 100%);
    }
}

/* ---- Nội dung ----------------------------------------------------------- */
/* Neo nội dung xuống đáy + padding-bottom cố định → khối CTA luôn nằm đúng một
   vị trí (như khi có đủ dữ liệu), không lên/xuống dù banner thiếu subtitle/title;
   chữ chỉ "mọc" lên trên. */
.aqf-slider-area .aqf-slider-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 110px;
}

@media (min-width: 768px) {
    .aqf-slider-area .aqf-slider-content { min-height: 600px; padding-bottom: 150px; }
}

@media (min-width: 1200px) {
    .aqf-slider-area .aqf-slider-content { min-height: 700px; padding-bottom: 180px; }
}

@media (max-width: 767px) {
    .aqf-slider-area .aqf-slider-content { padding-bottom: 80px; }
}

/* Eyebrow: chỉ là chữ — không pill/viền/chấm đỏ. */
.aqf-slider-area .aq-section-subtitle {
    display: inline-block;
    margin-bottom: 14px !important;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* Mobile: theme (cy-slider-style) ép subtitle về màu đen — ghi đè lại thành trắng. */
@media (max-width: 767px) {
    .aqf-slider-area .cy-slider-style .aq-section-subtitle.ff-onest-med {
        color: #fff;
    }
}

/* Tiêu đề: chỉ là chữ — không vạch accent / hộp / gạch chân. Co giãn theo màn,
   đổ bóng nhẹ để nổi trên ảnh + hiệu ứng vào đồng bộ CTA. */
.aqf-slider-area .aq-section-title.fs-84 {
    margin-bottom: 22px !important;
    /* Co chữ theo bề ngang màn (min nhỏ) + không xuống dòng → tiêu đề luôn nằm 1 dòng. */
    font-size: clamp(22px, 6vw, 74px) !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -1.2px;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .4);
}

/* Hiệu ứng vào cho tiêu đề (tái dùng keyframe fadeInUp của theme) */
.aqf-slider-area .aq-section-title.fs-84 { animation-delay: .45s; animation-duration: 1s; }
.aqf-slider-active .swiper-slide-active .aq-section-title.fs-84 {
    animation-name: fadeInUp;
    animation-fill-mode: both;
}

/* Dòng mô tả ngắn dưới tiêu đề (tuỳ chọn) */
.aqf-slider-area .oe-hero-lead {
    margin-bottom: 28px;
    max-width: 480px;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .3);
}

/* Hiệu ứng vào cho các khối mới (tái dùng keyframe fadeInUp của theme) */
.aqf-slider-area .oe-hero-lead { animation-delay: .6s; animation-duration: 1s; }
.aqf-slider-area .oe-hero-cta { animation-delay: .75s; animation-duration: 1s; }
.aqf-slider-active .swiper-slide-active .oe-hero-lead,
.aqf-slider-active .swiper-slide-active .oe-hero-cta {
    animation-name: fadeInUp;
    animation-fill-mode: both;
}

/* ---- CTA ---------------------------------------------------------------- */
.aqf-slider-area .oe-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.aqf-slider-area .oe-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    min-width: 220px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    transition: transform .15s ease, background .25s ease, box-shadow .25s ease, color .25s ease;
}

@media (max-width: 479px) {
    .aqf-slider-area .oe-hero-cta { flex-direction: column; }
    .aqf-slider-area .oe-hero-btn { min-width: 0; width: 100%; }
}

.aqf-slider-area .oe-hero-btn svg { transition: transform .2s ease; }
.aqf-slider-area .oe-hero-btn:active { transform: translateY(1px); }

.aqf-slider-area .oe-hero-btn-primary {
    background: var(--hero-accent);
    color: #fff;
    box-shadow: 0 12px 30px rgba(228, 0, 43, .35);
}

.aqf-slider-area .oe-hero-btn-primary:hover {
    background: var(--hero-accent-dark);
    color: #fff;
    box-shadow: 0 16px 38px rgba(228, 0, 43, .45);
}

.aqf-slider-area .oe-hero-btn-primary:hover svg { transform: translateX(4px); }

.aqf-slider-area .oe-hero-btn-ghost {
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
    backdrop-filter: blur(4px);
}

.aqf-slider-area .oe-hero-btn-ghost:hover { background: #fff; color: #16181c; border-color: #fff; }

/* ---- Pagination dots: NẰM NGANG, căn giữa, dưới đáy banner --------------- */
/* Ghi đè kiểu dọc/bên phải của theme: ép container về hàng ngang ở đáy. */
.aqf-slider-area .aqf-slider-dot {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 24px !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    z-index: 3;
}

.aqf-slider-area .aqf-slider-dot .swiper-pagination-bullet {
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    margin: 0 5px !important;
    background: rgba(255, 255, 255, .5) !important;
    border: none !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    transition: width .3s ease, background .3s ease !important;
}

.aqf-slider-area .aqf-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff !important;
    transform: none !important;
    width: 28px !important;
    height: 9px !important;
}

@media (max-width: 767px) {
    .aqf-slider-area .aqf-slider-dot { bottom: 16px !important; }
}