/* Desktop
.section:has(.banner) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.section:has(.banner) .banner {
  width: 100% !important;
  max-width: 100% !important;
}

.section:has(.banner) .banner-layers.container {
  max-width: 100% !important;
  padding: 0 !important;
} */


/* ==========================================
   CSS SỬA LỖI VỠ SLIDER & TRÀN TOÀN MÀN HÌNH
   ========================================== */

/* 1. Cấu hình lại Section chứa banner (Bỏ transform để tránh lỗi Slider) */
.section:has(.banner) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;       /* Ép sát lên trên sát Header */
    margin-bottom: 0 !important;
    padding: 0 !important;          /* Xóa padding để tránh lỗi tràn */
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;  /* Công thức tràn viền chuẩn không lỗi JS */
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* 2. Ép các khung của slider và banner bên trong mở rộng 100% */
.section:has(.banner) .slider-wrapper,
.section:has(.banner) .flickity-viewport,
.section:has(.banner) .banner {
    width: 100% !important;
    max-width: 100% !important;
}

.section:has(.banner) .banner-layers.container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* 3. Xóa khoảng trống của khung nội dung chính (Nếu phía trên vẫn hở) */
#content, .page-wrapper, main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 4. Chống vỡ hoặc xuất hiện thanh cuộn ngang */
html, body {
    overflow-x: hidden !important;
}