/* ============================================================
   QHCN Custom Slider – Frontend Styles
   ============================================================ */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
    --qhcn-color-primary:   #233F90;
    --qhcn-color-secondary: #4F6EDB;
    --qhcn-color-nav-bg:    rgba(255,255,255,.9);
    --qhcn-color-nav-arrow: #1a1a1a;
    --qhcn-nav-size:        44px;
    --qhcn-nav-radius:      50%;
    --qhcn-pag-color:       rgba(255,255,255,.5);
    --qhcn-pag-active:      #ffffff;
    --qhcn-transition:      .4s ease;
    --slider-height:        auto;
    --slider-height-tablet: var(--slider-height);
    --slider-height-mobile: var(--slider-height);
    --page-container-max-width: 1320px;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.qhcn-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.qhcn-slider .qhcn-swiper {
    width: 100%;
    height: var(--slider-height);
}
.qhcn-slider .qhcn-swiper .swiper-wrapper {
    height: var(--slider-height);
}

/* ── Slide base ───────────────────────────────────────────── */
.qhcn-slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    display: flex;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
}

/* ── Nền ảnh – phủ toàn slide, dưới cùng ─────────────────── */
/*
 * Dùng chung cho cả slide-default và slide-split.
 * Luôn nằm absolute, z-index 0, phủ 100% slide.
 * Overlay (z-index 1) và các cột (z-index 2) nằm trên.
 */
.qhcn-slide-bg {
    position: absolute;
    width:100%;
    height:100%;
    z-index: 0;
    overflow: hidden;
    left:0;
    top:0;
}

.qhcn-slide-bg img,
.qhcn-slide-bg picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Overlay ──────────────────────────────────────────────── */
.qhcn-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ── Buttons ──────────────────────────────────────────────── */
.qhcn-slide-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .25rem;
}

/* ── Navigation ───────────────────────────────────────────── */
.qhcn-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--qhcn-nav-size) !important;
    height: var(--qhcn-nav-size) !important;
    border-radius: var(--qhcn-nav-radius);
    border: none;
    background: var(--qhcn-color-nav-bg) !important;
    color: var(--qhcn-color-nav-arrow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    backdrop-filter: blur(4px);
    transition: background var(--qhcn-transition), transform var(--qhcn-transition);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    padding:0;
}
.qhcn-nav-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}
.qhcn-nav-btn svg {
    width: 16px;
    height: 16px;
}
.swiper-button-prev.qhcn-nav-btn { left: 1rem; }
.swiper-button-next.qhcn-nav-btn { right: 1rem; }
.swiper-button-next::after,
.swiper-button-prev::after { display: none; }

/* ── Pagination ───────────────────────────────────────────── */
.qhcn-slider .swiper-pagination-bullet {
    background: var(--qhcn-pag-color);
    opacity: 1;
    transition: background var(--qhcn-transition), transform var(--qhcn-transition);
}
.qhcn-slider .swiper-pagination-bullet-active {
    background: var(--qhcn-pag-active);
    transform: scale(1.3);
}
.qhcn-slider .swiper-pagination-progressbar {
    background: rgba(255,255,255,.1);
    height: 3px;
}
.qhcn-slider .swiper-pagination-progressbar-fill { background: var(--qhcn-pag-active); }
.qhcn-slider .swiper-pagination-fraction {
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .05em;
}

/* ============================================================
   LAYOUT: content-center  (slide-default.php)
   Nền ảnh phủ toàn slide (z-index 0).
   Nội dung canh giữa nổi lên (z-index 2).
   ============================================================ */
.qhcn-layout-content-center .qhcn-slide--default {
    align-items: center;
    justify-content: center;
}

.qhcn-slide--default .qhcn-slide-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 900px;
}

.qhcn-slide-text              { margin-bottom: 1.5rem; }
.qhcn-slide-text h1,
.qhcn-slide-text h2,
.qhcn-slide-text h3           { margin: 0 0 .5em; line-height: 1.2; }
.qhcn-slide-text p            { margin: 0 0 1em; }

.qhcn-layout-content-center .qhcn-slide-content { text-align: center; }
.qhcn-layout-content-center .qhcn-slide-buttons  { justify-content: center; }

/* ============================================================
   LAYOUT: hero-left / hero-right  (slide-split.php)

   Cấu trúc z-index bên trong slide:
     z-index 0 → .qhcn-slide-bg   (ảnh nền phủ full)
     z-index 1 → .qhcn-overlay
     z-index 2 → .qhcn-split-content  (cột nội dung)
     z-index 2 → .qhcn-split-media    (cột ảnh slide)

   hero-left  → content trái (order 1) | media phải (order 2)
   hero-right → media trái  (order 1) | content phải (order 2)
   ============================================================ */
.qhcn-layout-hero-left  .qhcn-slide--split .swiper-slide-inner,
.qhcn-layout-hero-right .qhcn-slide--split .swiper-slide-inner{
    display: flex;
    align-items: stretch;
    width:100%;
    margin:0 auto;
    max-width: var(--page-container-max-width);
}
.qhcn-layout-hero-left .qhcn-split-content,
.qhcn-layout-hero-right .qhcn-split-content,
.qhcn-layout-hero-left .qhcn-split-media,
.qhcn-layout-hero-right .qhcn-split-media {
    width: 50%;
    flex-shrink: 0;
}
.qhcn-layout-hero-right .qhcn-slide--split {
    flex-direction: row-reverse;
}
.qhcn-split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* hero-left: DOM order mặc định */
.qhcn-layout-hero-left .qhcn-split-content { order: 1; }
.qhcn-layout-hero-left .qhcn-split-media   { order: 2; }

/* hero-right: đảo cột bằng CSS order */
.qhcn-layout-hero-right .qhcn-split-content { order: 2; }
.qhcn-layout-hero-right .qhcn-split-media   { order: 1; }

/* ── Cột nội dung ─────────────────────────────────────────── */
.qhcn-split-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2.5rem;
}

/* ── Cột media (ảnh slide) ────────────────────────────────── */
.qhcn-split-media {
    position: relative;
    z-index: 2;
    overflow: hidden;
    min-height: 300px;
}

.qhcn-split-media img,
.qhcn-split-media picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Responsive visibility ────────────────────────────────── */
@media (max-width: 1023px) {
    .qhcn-slider { --slider-height: var(--slider-height-tablet) !important; }

    .hide-on-tablet { display: none !important; }

    /* Split → xếp dọc: media trên, content dưới */
    .qhcn-layout-hero-left  .qhcn-slide--split,
    .qhcn-layout-hero-right .qhcn-slide--split {
        grid-template-columns: 1fr;
    }

    .qhcn-layout-hero-left  .qhcn-split-media,
    .qhcn-layout-hero-right .qhcn-split-media   { order: 1; }
    .qhcn-layout-hero-left  .qhcn-split-content,
    .qhcn-layout-hero-right .qhcn-split-content { order: 2; }

    .qhcn-split-media   { min-height: 260px; }
    .qhcn-split-content { padding: 2rem 1.5rem; }
}

@media (max-width: 767px) {
    .qhcn-slider { --slider-height: var(--slider-height-mobile) !important; }

    .hide-on-mobile { display: none !important; }

    .qhcn-slide--default .qhcn-slide-content { padding: 1.25rem; }
    .qhcn-split-content  { padding: 1.5rem 1rem; }
    .qhcn-split-media    { min-height: 200px; }

    /* Mobile alignment */
    .qhcn-mob-align-center .qhcn-slide-content,
    .qhcn-mob-align-center .qhcn-split-content { text-align: center; }
    .qhcn-mob-align-center .qhcn-slide-buttons  { justify-content: center; }

    .qhcn-mob-align-right .qhcn-slide-content,
    .qhcn-mob-align-right .qhcn-split-content  { text-align: right; }
    .qhcn-mob-align-right .qhcn-slide-buttons   { justify-content: flex-end; }

    .qhcn-nav-btn { display: none; }
    .qhcn-layout-hero-left  .qhcn-slide--split .swiper-slide-inner,
    .qhcn-layout-hero-right .qhcn-slide--split .swiper-slide-inner{
        flex-direction: column;
    }
    .qhcn-layout-hero-left .qhcn-split-content,
    .qhcn-layout-hero-right .qhcn-split-content,
    .qhcn-layout-hero-left .qhcn-split-media,
    .qhcn-layout-hero-right .qhcn-split-media {
        width: 100%;
    }
}