/**
 * Layout Fix CSS
 * Fix banner và header không bị tràn ra 2 bên trên PC
 * @package SoiCauPro
 */

/* ========================================
   CONTAINER CONSTRAINTS - CENTERED LAYOUT
   ======================================== */

/* Centered layout với max-width */
.site {
    width: 100%;
    overflow-x: hidden;
}

/* Header Container - Centered with same width as content */
.site-header {
    width: 100%;
    display: flex;
    justify-content: center;
}

.site-header > * {
    width: 100%;
    max-width: 1100px;
    background: linear-gradient(135deg, #c8232c 0%, #e74c3c 100%);
}

.site-header .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    background: transparent;
}

/* Main Navigation Container - Centered with same width as content */
.main-navigation {
    width: 100%;
    display: flex;
    justify-content: center;
}

.main-navigation > * {
    width: 100%;
    max-width: 1100px;
    background: linear-gradient(90deg, #2c3e50 0%, #34495e 100%);
}

.main-navigation .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    background: transparent;
}

/* Quick Menu Bar Container - Centered with same width as content */
.quick-menu-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    background: transparent;
    padding: 10px 0;
}

.quick-menu-bar > * {
    width: 100%;
    max-width: 1100px;
}

.quick-menu-bar .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 8px;
}

/* ========================================
   HERO BANNER - CENTERED
   ======================================== */

/* Hero Banner Section - Centered on Desktop */
@media (min-width: 1200px) {
    .hero-banner-section {
        width: 100%;
        margin-bottom: 0;
    }
    
    .hero-banner-section .hero-banner,
    .hero-banner-section .hero-banner-placeholder,
    .hero-banner-section .hero-banner-image,
    .hero-banner-section .hero-slider-wrapper {
        max-width: 1100px;
        margin: 0 auto;
        border-radius: 0;
        overflow: hidden;
    }
}

/* Hero Banner Section - Tablet to Desktop */
@media (min-width: 768px) and (max-width: 1199px) {
    .hero-banner-section {
        padding: 15px;
    }
    
    .hero-banner-section .hero-banner,
    .hero-banner-section .hero-banner-placeholder,
    .hero-banner-section .hero-banner-image {
        border-radius: 8px;
        overflow: hidden;
    }
}

/* Hero Banner Section - Mobile */
@media (max-width: 767px) {
    .hero-banner-section {
        width: 100%;
        padding: 0;
    }
    
    .hero-banner-section .hero-banner,
    .hero-banner-section .hero-banner-placeholder,
    .hero-banner-section .hero-banner-image {
        border-radius: 0;
    }
}

/* ========================================
   PAGE CONTENT CONSTRAINTS
   ======================================== */

/* Main Content Area - Centered */
.site-content {
    width: 100%;
    padding: 20px 0;
}

.site-content .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Single Column Layout */
.single-column-layout {
    max-width: 100%;
}

/* ========================================
   FOOTER - CENTERED
   ======================================== */

.site-footer {
    width: 100%;
    background: #2c3e50;
}

.site-footer .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   CARD GRID CONSTRAINTS
   ======================================== */

.card-grid {
    max-width: 100%;
    padding: 0;
}

/* Cards inside sections */
.homepage-section {
    width: 100%;
    padding: 0;
    margin-bottom: 15px;
}

.homepage-section .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Large Desktop - Centered with max-width */
@media (min-width: 1400px) {
    .container,
    .site-header .container,
    .main-navigation .container,
    .quick-menu-bar .container,
    .site-content .container,
    .site-footer .container,
    .homepage-section .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .hero-banner-section .hero-banner,
    .hero-banner-section .hero-banner-placeholder,
    .hero-banner-section .hero-banner-image {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* Standard Desktop - Centered with max-width */
@media (min-width: 1200px) and (max-width: 1399px) {
    .container,
    .site-header .container,
    .main-navigation .container,
    .quick-menu-bar .container,
    .site-content .container,
    .site-footer .container,
    .homepage-section .container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .hero-banner-section .hero-banner,
    .hero-banner-section .hero-banner-placeholder,
    .hero-banner-section .hero-banner-image {
        max-width: 1100px;
        margin: 0 auto;
    }
}

/* Tablet - Centered with max-width */
@media (min-width: 768px) and (max-width: 1199px) {
    .container,
    .site-header .container,
    .main-navigation .container,
    .quick-menu-bar .container,
    .site-content .container,
    .site-footer .container,
    .homepage-section .container {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 15px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .container,
    .site-header .container,
    .main-navigation .container,
    .quick-menu-bar .container,
    .site-content .container,
    .site-footer .container,
    .homepage-section .container {
        max-width: 100%;
        padding: 0 10px;
    }
}

/* ========================================
   OVERFLOW FIXES
   ======================================== */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure all sections don't overflow */
.site > * {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix for full-width backgrounds with contained content */
.full-width-bg {
    width: 100%;
    position: relative;
}

.full-width-bg > .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   Z-INDEX HIERARCHY
   ======================================== */

.site-header {
    z-index: 1000;
}

.main-navigation {
    z-index: 999;
}

.quick-menu-bar {
    z-index: 998;
}

.hero-banner-section {
    z-index: 1;
}

.mobile-bottom-nav {
    z-index: 1001;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.container-fluid {
    width: 100%;
    padding: 0 15px;
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Alignment utilities */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center;
}

.d-block {
    display: block;
}

.w-100 {
    width: 100%;
}