/* 🎯 Container Balance Fix CSS */
/* ปรับขอบซ้ายและขวาให้สมดุลเหมือนกับแท็บ test Product */

:root {
    --balance-max-width: var(--page-max-width, 1320px);
    --balance-edge-padding: var(--page-edge-padding, var(--page-gutter-inline, clamp(16px, 4vw, 48px)));
    --balance-product-gap: clamp(13px, 1.6vw, 18px);
    --balance-product-min: clamp(144px, 15.2vw, 184px);
}

/* === GLOBAL CONTAINER BALANCE === */
.homepage-section,
.section-content-area,
.product-grid-container {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-edge-padding, var(--balance-edge-padding));
    padding-right: var(--page-edge-padding, var(--balance-edge-padding));
    box-sizing: border-box;
}

/* === SECTION TITLE/HEADER BALANCE === */
.section-title-wrapper,
.test-product-header,
.category-title-section {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding: 1rem var(--page-edge-padding, var(--balance-edge-padding));
    box-sizing: border-box;
    background: linear-gradient(135deg, #6b73ff 0%, #9c27b0 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

/* === PRODUCT GRID BALANCE === */
.product-grid {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--balance-product-gap);
    box-sizing: border-box;
}

.product-grid .product-card-wrapper {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* === HOMEPAGE SECTIONS CONSISTENCY === */
.homepage-section {
    margin-bottom: 2rem;
    padding: 0;
}

.homepage-section .container {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width)) !important;
    padding-left: var(--page-edge-padding, var(--balance-edge-padding)) !important;
    padding-right: var(--page-edge-padding, var(--balance-edge-padding)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* === SECTION HEADERS (เช่น test Product tab) === */
.section-header-tab {
    background: linear-gradient(135deg, #6b73ff 0%, #9c27b0 100%);
    color: white;
    padding: 1rem 15px;
    border-radius: 8px;
    margin: 0 0 1.5rem 0;
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight: 600;
    font-size: 1.2rem;
    box-sizing: border-box;
}

/* === RESPONSIVE DESKTOP (Large screens) === */
@media (min-width: 1400px) {
    .product-grid {
        --balance-product-min: clamp(152px, 9.6vw, 176px);
    }
}

/* === RESPONSIVE DESKTOP (Medium screens) === */
@media (min-width: 992px) and (max-width: 1399px) {
    .product-grid {
        --balance-product-min: clamp(140px, 17.6vw, 176px);
    }
}

/* === RESPONSIVE TABLET === */
@media (min-width: 768px) and (max-width: 991px) {
    .product-grid {
        --balance-product-min: clamp(132px, 25.6vw, 168px);
    }
    
    .section-header-tab {
        font-size: 1.1rem;
        padding: 0.875rem var(--page-edge-padding, var(--balance-edge-padding));
    }
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 767px) {
    .product-grid {
        --balance-product-min: 100%;
        grid-template-columns: 1fr;
        gap: clamp(16px, 4vw, 24px);
    }
    
    .section-header-tab {
        font-size: 1rem;
        padding: 0.75rem var(--page-edge-padding, var(--balance-edge-padding));
        border-radius: 6px;
    }
}

/* === FORCE CONSISTENT SPACING === */
.homepage-section[data-section-type="product_grid"] {
    padding: 0 !important;
    margin-bottom: 2rem;
}

.homepage-section[data-section-type="product_grid"] .section-content-area {
    padding: 0 !important;
    width: 100%;
}

/* === CONTAINER WRAPPER OVERRIDE === */
.main-container-wrapper {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--page-edge-padding, var(--balance-edge-padding));
    box-sizing: border-box;
}

/* === CATEGORY BAR BALANCE === */
.category-bar-wrapper-v2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.category-bar-wrapper-v2 .container {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-edge-padding, var(--balance-edge-padding));
    padding-right: var(--page-edge-padding, var(--balance-edge-padding));
    box-sizing: border-box;
}

/* === BANNER SECTIONS - เต็มพื้นที่มากขึ้น === */
#section-wrapper-38,
#section-wrapper-39,
.homepage-section[data-section-type*="banner"] {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--page-edge-padding, var(--balance-edge-padding));
    box-sizing: border-box;
    position: static;
    left: auto;
    right: auto;
}

/* === Banner Container - เต็มพื้นที่มากขึ้น === */
#section-wrapper-38.container,
#section-wrapper-39.container,
.homepage-section[data-section-type*="banner"].container {
    width: min(100%, var(--global-content-width, var(--balance-max-width))) !important;
    max-width: var(--global-content-width, var(--balance-max-width)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--page-edge-padding, var(--balance-edge-padding)) !important;
    padding-right: var(--page-edge-padding, var(--balance-edge-padding)) !important;
    box-sizing: border-box !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
}

/* === Container ภายใน Banner === */
#section-wrapper-38 .container,
#section-wrapper-39 .container,
.homepage-section[data-section-type*="banner"] .container {
    width: min(100%, var(--global-content-width, var(--balance-max-width))) !important;
    max-width: var(--global-content-width, var(--balance-max-width)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--page-edge-padding, var(--balance-edge-padding)) !important;
    padding-right: var(--page-edge-padding, var(--balance-edge-padding)) !important;
}

/* === Row ใน Banner === */
#section-wrapper-38 .row,
#section-wrapper-39 .row,
.homepage-section[data-section-type*="banner"] .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* === Columns ใน Banner - เต็มพื้นที่มากขึ้น === */
#section-wrapper-38 [class*="col-"],
#section-wrapper-39 [class*="col-"],
.homepage-section[data-section-type*="banner"] [class*="col-"] {
    padding-left: 0.25rem !important;  /* ลดจาก 0.5rem เป็น 0.25rem */
    padding-right: 0.25rem !important; /* ลดจาก 0.5rem เป็น 0.25rem */
}

/* === Banner Images - รักษาสัดส่วน === */
#section-wrapper-38 img,
#section-wrapper-39 img,
.homepage-section[data-section-type*="banner"] img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 4px !important;     /* ลดจาก 8px เป็น 4px */
    object-fit: cover !important;
    aspect-ratio: 2/1 !important;
}

/* === Banner Responsive - เต็มพื้นที่ทุกขนาด === */
@media (max-width: 768px) {
    #section-wrapper-38,
    #section-wrapper-39,
    .homepage-section[data-section-type*="banner"] {
        padding-left: clamp(8px, 3vw, 16px) !important;
        padding-right: clamp(8px, 3vw, 16px) !important;
    }
    
    #section-wrapper-38 [class*="col-"],
    #section-wrapper-39 [class*="col-"],
    .homepage-section[data-section-type*="banner"] [class*="col-"] {
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }
}

/* === BLOG SECTIONS BALANCE === */
.blog-section-homepage {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--page-edge-padding, var(--balance-edge-padding));
    box-sizing: border-box;
}

.blog-cards-grid-container {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* === HERO SLIDER BALANCE === */
.main-hero-slider-container {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

/* === UTILITY CLASSES === */
.container-balanced {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-edge-padding, var(--balance-edge-padding));
    padding-right: var(--page-edge-padding, var(--balance-edge-padding));
    box-sizing: border-box;
}

.section-balanced {
    width: min(100%, var(--global-content-width, var(--balance-max-width)));
    max-width: var(--global-content-width, var(--balance-max-width));
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--page-edge-padding, var(--balance-edge-padding));
    margin-bottom: 2rem;
    box-sizing: border-box;
}

.grid-balanced {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* === DEBUGGING (สำหรับ development) === */
/*
.debug-container * {
    border: 1px solid red !important;
}

.debug-container .homepage-section {
    border: 2px solid blue !important;
}

.debug-container .product-grid {
    border: 2px solid green !important;
}
*/

/* === PRINT STYLES === */
@media print {
    .homepage-section,
    .section-content-area,
    .product-grid-container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
}

/* === HIGH DPI DISPLAYS === */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .section-header-tab {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* === ACCESSIBILITY === */
.section-header-tab:focus {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* === OVERRIDE CONFLICTS === */
.homepage-section .container,
.homepage-section .container-fluid {
    max-width: min(100%, var(--global-content-width, var(--balance-max-width))) !important;
    padding-left: var(--page-edge-padding, var(--balance-edge-padding)) !important;
    padding-right: var(--page-edge-padding, var(--balance-edge-padding)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === เก่า Bootstrap override === */
.row {
    margin-left: calc(var(--balance-edge-padding) * -0.5) !important;
    margin-right: calc(var(--balance-edge-padding) * -0.5) !important;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3,
.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
.col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4,
.col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-md-10, .col-md-11, .col-md-12, .col-lg,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5,
.col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10,
.col-lg-11, .col-lg-12, .col-xl, .col-xl-1, .col-xl-2,
.col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7,
.col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    padding-left: calc(var(--balance-edge-padding) * 0.5) !important;
    padding-right: calc(var(--balance-edge-padding) * 0.5) !important;
}