/* hello-biz: banner-slider.css — trong DevTools > tab Sources, Ctrl+P gõ "banner-slider" để mở file */
.banner-slider {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Ảnh slide: tách khỏi background section (gradient/transition Elementor) — z-index 1, nội dung 3 */
.banner-slider > .banner-slider-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: none;
}

/* Content luôn nằm trên */
.banner-slider > * {
  position: relative;
  z-index: 3;
}

/* Grid luôn hiển thị */
.banner-slider .e-grid {
  position: relative;
  z-index: 3;
}

.banner-slider .banner-slider-thumb {
  position: relative;
  overflow: visible !important;
  cursor: pointer;
}

.banner-slider
  .banner-slider-thumb
  .elementor-element.elementor-widget.elementor-widget-image {
  position: relative;
  display: block;
}

.banner-slider
  .banner-slider-thumb
  .elementor-element.elementor-widget.elementor-widget-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* transition: opacity 0.35s ease, background 0.35s ease; */
  border-radius: inherit;
}

.banner-slider
  .banner-slider-thumb--active
  .elementor-element.elementor-widget.elementor-widget-image::after {
  display: none !important;
  opacity: 0;
}

/* Fallback khi không có widget Image trong ô */
.banner-slider .banner-slider-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: none;
  transition: opacity 0.35s ease, background 0.35s ease;
  border-radius: inherit;
}

.banner-slider .banner-slider-thumb:has(.elementor-widget-image)::after {
  content: none;
}

.banner-slider .banner-slider-thumb--active::after {
  display: none !important;
  opacity: 0;
}

.banner-slider .banner-slider-thumb img.banner-slider-thumb-img {
  position: relative;
  z-index: 0;
  vertical-align: middle;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  display: block;
  cursor: pointer;
}

.banner-slider
  .banner-slider-thumb:not(.banner-slider-thumb--active)
  img.banner-slider-thumb-img {
  filter: brightness(0.65) saturate(0.9);
}

.banner-slider .banner-slider-thumb:hover img.banner-slider-thumb-img {
  transform: scale(1.04);
}

.banner-slider
  .banner-slider-thumb:hover:not(.banner-slider-thumb--active)
  img.banner-slider-thumb-img {
  filter: brightness(0.92) saturate(0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 48px rgba(0, 0, 0, 0.35);
}

/* Đang zoom: giữ thumb nhìn thấy để animation đúng vị trí */
.banner-slider .banner-slider-thumb--zooming img.banner-slider-thumb-img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Thumb đang là nền banner: ẩn khỏi grid (ô co lại, không chiếm chỗ) */
.banner-slider .banner-slider-thumb--off-grid {
  display: none !important;
}

/* Disable click khi animating */
.banner-slider--animating {
  pointer-events: none;
}

/* Clone zoom (nằm dưới) */
.banner-slider-zoom-clone {
  position: absolute;
  z-index: 1;
  object-fit: cover;
  object-position: center;
  will-change: left, top, width, height;
  transition: all 0.68s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button fix khi zoom */
.banner-slider--animating .animation-swipe-secondary-btn .elementor-button {
  pointer-events: none;
}

.banner-slider--animating .animation-swipe-secondary-btn .elementor-button:after {
  height: 0 !important;
  transition: none !important;
}

/* ===== FADE IN UP ===== */

.banner-slider [data-banner-role="title"],
.banner-slider [data-banner-role="desc"],
.banner-slider .elementor-button {
  opacity: 0;
  transform: translateY(30px);
}

.banner-slider.banner-slider--content-show [data-banner-role="title"],
.banner-slider.banner-slider--content-show [data-banner-role="desc"],
.banner-slider .elementor-button {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-slider.banner-slider--content-show [data-banner-role="title"] {
  transition-delay: 0.1s;
}

.banner-slider.banner-slider--content-show [data-banner-role="desc"] {
  transition-delay: 0.25s;
}

.banner-slider .elementor-button {
  transition-delay: 0.4s;
}