/* File: /templates/blocks/slider-pro/style.css
 * Version: 2.3 — FINAL FIX: Isolate styles, fix height override & Parallax centering (FULL CODE)
 */

/* ----------------------------------------------------
   Container & anti-FOUC
-----------------------------------------------------*/
.pf-slider {
  /* -- Biến CSS cục bộ, có tiền tố 'sp-' để tránh xung đột -- */
  --pf-sp-min-h: 360px;
  --pf-sp-content-max-w: 880px;
  --pf-sp-title-size: clamp(22px, 3.2vw, 42px);
  --pf-sp-caption-size: clamp(14px, 1.4vw, 18px);
  --pf-sp-btn-py: 0.75rem;
  --pf-sp-btn-px: 1.5rem;
  --pf-sp-text: #ffffff;
  --pf-sp-btn-bg: #ffffff;
  --pf-sp-btn-text: #111111;
  --swiper-theme-color: #ffffff;
  --pf-sp-v-align: 50%;
  --pf-sp-object-fit: cover;

  position: relative;
  width: 100%;
  color: var(--pf-sp-text);
  /*
    IMPORTANT:
    Không được ẩn mặc định.
    Nếu Swiper init fail (thiếu JS/basepath), `visibility:hidden` sẽ làm trắng hoàn toàn slider.
    => Luôn hiển thị; CSS bên dưới tạo fallback khi chưa init.
  */
  visibility: visible;
  background: #111;
}

/* Fallback khi Swiper CHƯA init: hiển thị dạng cuộn ngang (không phụ thuộc JS) */
.pf-slider.swiper:not(.swiper-initialized) .swiper-wrapper{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.pf-slider.swiper:not(.swiper-initialized) .swiper-slide{
  flex:0 0 auto;
  width:100%;
  scroll-snap-align:start;
}

.pf-slider.swiper-initialized { visibility: visible; }

/* Aspect ratio (mặc định) */
.pf-slider[data-ratio="16:9"] { aspect-ratio: 16/9; }
.pf-slider[data-ratio="21:9"] { aspect-ratio: 21/9; }
.pf-slider[data-ratio="4:3"]  { aspect-ratio: 4/3; }
.pf-slider[data-ratio="auto"] {
  aspect-ratio: auto;
  min-height: var(--pf-sp-min-h);
}

/* Ưu tiên chiều cao tùy chỉnh */
.pf-slider[style*="--pf-sp-custom-height"] {
  aspect-ratio: auto;
  height: var(--pf-sp-custom-height);
}

.pf-slider .swiper-wrapper { align-items: stretch; }

/* ----------------------------------------------------
   Slide
-----------------------------------------------------*/
.pf-slider .pf-slide {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Media (img / video) cho ảnh thông thường */
/* TĂNG ĐỘ ƯU TIÊN VÀ SỬA LỖI HEIGHT */
.pf-slider .pf-slide .pf-slide__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important; /* <-- SỬA LỖI: Thêm !important để thắng height: auto */
  max-width: none !important; /* Thêm để ghi đè max-width: 100% nếu cần */
  object-fit: var(--pf-sp-object-fit);
  object-position: center var(--pf-sp-v-align);
  z-index: 1;
}

/* Nền cho Parallax */
/* TĂNG ĐỘ ƯU TIÊN VÀ SỬA LỖI CĂN GIỮA */
.pf-slider .pf-slide .pf-slide__media-parallax-bg {
  position: absolute;
  left: -15%; /* Dịch sang trái 15% để bù cho width 130% */
  top: 0;
  width: 130%;
  height: 100%;
  background-position: center var(--pf-sp-v-align);
  z-index: 1;
}

/* Overlay */
.pf-slider .pf-slide .pf-slide__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Nội dung */
.pf-slider .pf-slide .pf-slide__content{
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2rem 1.25rem;
  max-width: var(--pf-sp-content-max-w);
  margin-inline: auto;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.pf-slider .pf-slide .pf-slide__title{
  font-size: var(--pf-sp-title-size);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 .5rem 0;
}
.pf-slider .pf-slide .pf-slide__caption{
  font-size: var(--pf-sp-caption-size);
  line-height: 1.6;
  opacity: .95;
  margin: 0;
}
.pf-slider .pf-slide .pf-slide__button{
  display: inline-block;
  margin-top: 1.25rem;
  padding: var(--pf-sp-btn-py) var(--pf-sp-btn-px);
  background: var(--pf-sp-btn-bg);
  color: var(--pf-sp-btn-text);
  text-decoration: none;
  border-radius: .5rem;
  font-weight: 700;
  transition: transform .15s ease, background-color .2s ease, opacity .2s ease;
}
.pf-slider .pf-slide .pf-slide__button:hover{
  transform: translateY(-1px);
  opacity: .92;
}

/* ----------------------------------------------------
   Swiper controls
-----------------------------------------------------*/
.pf-slider .swiper-pagination{ bottom: 14px; }
.pf-slider .swiper-pagination-bullet{ background: rgba(255,255,255,.7); opacity: 1; }
.pf-slider .swiper-pagination-bullet-active{ background: #fff; }
.pf-slider .swiper-button-prev,
.pf-slider .swiper-button-next{ width: 44px; height: 44px; border-radius: 999px; background: rgba(0,0,0,.28); backdrop-filter: blur(2px); }
.pf-slider .swiper-button-prev::after,
.pf-slider .swiper-button-next::after{ font-size: 18px; }
.pf-slider .swiper-button-prev:hover,
.pf-slider .swiper-button-next:hover{ background: rgba(0,0,0,.45); }
@media (max-width: 640px){ .pf-slider .swiper-button-prev, .pf-slider .swiper-button-next{ display: none; } }

/* ----------------------------------------------------
   Hiệu ứng Ken Burns
-----------------------------------------------------*/
.pf-slider.pf-kenburns .swiper-slide-active .pf-slide__media,
.pf-slider.pf-kenburns .swiper-slide-active .pf-slide__media-parallax-bg {
  animation: pf-kenburns-zoom 12s ease-in-out infinite alternate;
}
@keyframes pf-kenburns-zoom{
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

/* ----------------------------------------------------
   Static Preview (dùng trong Builder)
-----------------------------------------------------*/
.pf-slider-preview{ position: relative; width: 100%; background: #eef3f8; border: 1px dashed #cbd5e1; border-radius: 10px; color: #64748b; overflow: hidden; }
.pf-slider-preview[data-ratio="16:9"]{ aspect-ratio: 16/9; }
.pf-slider-preview[data-ratio="21:9"]{ aspect-ratio: 21/9; }
.pf-slider-preview[data-ratio="4:3"] { aspect-ratio: 4/3; }
.pf-slider-preview[data-ratio="auto"]{ min-height: 220px; aspect-ratio: auto; }
.pf-slider-preview__inner{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }