/*
 * Mobile Layout Fix - Chuẩn hóa layout tránh tràn ra ngoài
 * Version: 1.0.0
 * Date: 2025-01-27
 */

/* ===== RESET VÀ CHUẨN HÓA CƠ BẢN ===== */
* {
  box-sizing: border-box !important;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ===== CONTAINER CHUẨN HÓA ===== */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== ROW VÀ COL CHUẨN HÓA ===== */
.row {
  margin-left: -7.5px !important;
  margin-right: -7.5px !important;
  max-width: 100% !important;
}

.row > [class*="col-"] {
  padding-left: 7.5px !important;
  padding-right: 7.5px !important;
  max-width: 100% !important;
}

/* ===== MOBILE FIRST (≤ 575px) ===== */
@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .row {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }
  
  .row > [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  
  /* Ẩn các element gây tràn */
  .banner-left,
  .banner-right,
  .nb-marquee {
    display: none !important;
  }
  
  /* Chuẩn hóa khối live */
  .khv1 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 8px !important;
  }
  
  .khv1-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .khv1-card {
    margin-bottom: 8px !important;
  }
}

/* ===== TABLET (576px - 991px) ===== */
@media (min-width: 576px) and (max-width: 991.98px) {
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  
  .row > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  
  .khv1-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ===== DESKTOP (≥ 992px) ===== */
@media (min-width: 992px) {
  .container,
  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .row {
    margin-left: -7.5px !important;
    margin-right: -7.5px !important;
  }
  
  .row > [class*="col-"] {
    padding-left: 7.5px !important;
    padding-right: 7.5px !important;
  }
}

/* ===== CHUẨN HÓA CARD VÀ ELEMENT ===== */
.khv1-card,
.shb-card,
.gt-card,
.nb-card,
.highlightReel-card-item,
.video-item,
.swiper-slide {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ===== CHUẨN HÓA HÌNH ẢNH ===== */
img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ===== CHUẨN HÓA TEXT ===== */
h1, h2, h3, h4, h5, h6,
p, span, div, a, button {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* ===== FIX SPECIFIC ISSUES ===== */
/* Fix marquee overflow */
.noibat .nb-marquee {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  transform: none !important;
}

/* Fix news grid overflow */
.news-grid-wrapper,
.nbft-wrap,
.nbft-columns {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix swiper overflow */
.swiper,
.swiper-wrapper,
.nb-swiper-wrapper {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Fix scale transform */
.shb-inner {
  transform: none !important;
  max-width: 100% !important;
}

/* ===== UTILITY CLASSES ===== */
.no-overflow {
  overflow: hidden !important;
  max-width: 100% !important;
}

.mobile-fit {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.text-break {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}