/* ===============================================
   MOBILE & TABLET SPACING FIX - CRITICAL
   ปิดช่องว่างสีขาวที่ดูไม่เป็นมืออาชีพ
   ลำดับความสำคัญ: โหลดทีหลังสุดเพื่อ override CSS ทั้งหมด
   =============================================== */

/* ============================================
   GLOBAL RESET - MAXIMUM PRIORITY
   ============================================ */
* {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ============================================
   BOOTSTRAP OVERRIDE - ลบ margin utilities
   ============================================ */
.my-1, .my-2, .my-3, .my-4, .my-5,
.mt-1, .mt-2, .mt-3, .mt-4, .mt-5,
.mb-1, .mb-2, .mb-3, .mb-4, .mb-5,
.py-1, .py-2, .py-3, .py-4, .py-5,
.pt-1, .pt-2, .pt-3, .pt-4, .pt-5,
.pb-1, .pb-2, .pb-3, .pb-4, .pb-5 {
    margin: 0 !important;
    padding: 0 !important;
}

.pb-1, .pb-2, .pb-3, .pb-4, .pb-5 {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   SECTION RESET - ลบ margin/padding ทั้งหมด
   ============================================ */
html body section,
html body .section,
html body [class*="section"],
html body div[class*="section"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   1. TOP HERO ROW - Center like category
   ============================================ */
.top-hero-row {
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    width: 100% !important;
    max-width: 1400px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ============================================
   2. HERO SECTION - ชิดขอบ
   ============================================ */
.hero-section {
    margin: 0 !important;
    padding: 16px clamp(18px, 5%, 36px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.hero-section-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

#main-hero-slider,
.main-hero-slider-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   3. CATEGORY SECTION - ติดกับ hero ทันที
   ============================================ */
html body section.category-section,
html body .category-section {
    margin: 0 !important;
    padding: 16px clamp(18px, 5%, 36px) !important;
}

html body .category-section-wrapper {
    margin: 0 !important;
    padding: 25px !important;
}

/* ============================================
   4. BELOW MAIN ROW - ติดกับ category ทันที
   ============================================ */
.below-main-row {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   5. MAIN CONTENT - ไม่มี margin ด้านบน
   ============================================ */
html body .main-content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html body .content-balanced-container {
    margin: 0 !important;
    padding: 0 !important;
}

html body .balance-section {
    margin: 0 !important;
    padding: 0 !important;
}

html body #content-loading {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   6. DYNAMIC CONTENT WRAPPER
   ============================================ */
#dynamic-content-wrapper,
.dynamic-sections-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   7. FLASH SALE & BEST SELLING SECTIONS
   ============================================ */
.flash-sale-section,
.best-selling-section,
section[class*="flash"],
section[class*="best-selling"],
div[class*="flash-sale"],
div[class*="best-selling"] {
    margin: 0 !important;
    padding: 1rem 0 !important;
}

/* ============================================
   8. VENDOR LOGO SECTION
   ============================================ */
.logo-strip-section,
.vendor-support-section {
    margin: 0 !important;
    padding: 1.5rem 0 !important;
}

/* ============================================
   9. CONTAINER & ROW RESET
   ============================================ */
.container,
.container-fluid,
.row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================
   RESPONSIVE: TABLET & MOBILE
   ============================================ */
@media (max-width: 991px) {
    /* บังคับให้ทุก element ไม่มี margin top/bottom */
    html body * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Override category-bar-balance.css */
    html body .category-section {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* อนุญาตเฉพาะ padding ภายใน sections */
    .category-section-wrapper {
        padding: 0.75rem !important;
    }
    
    .content-balanced-container {
        padding: 0.5rem !important;
    }
    
    .flash-sale-section,
    .best-selling-section {
        padding: 0.75rem 0 !important;
    }
    
    .logo-strip-section {
        padding: 1rem 0 !important;
    }
}

/* ============================================
   TABLET SPECIFIC (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .category-section-wrapper {
        padding: 1rem !important;
    }
    
    .content-balanced-container {
        padding: 0.75rem !important;
    }
}

/* ============================================
   MOBILE SPECIFIC (< 768px)
   ============================================ */
@media (max-width: 767px) {
    /* Category Bar - แบบกระชับ */
    .category-section {
        padding: 0 !important;
    }
    
    .category-section-wrapper {
        padding: 0.5rem !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    /* Content - padding น้อยมาก */
    .content-balanced-container {
        padding: 0.25rem !important;
    }
    
    /* Sections - spacing น้อยที่สุด */
    .flash-sale-section,
    .best-selling-section {
        padding: 0.5rem 0 !important;
    }
    
    .logo-strip-section {
        padding: 0.75rem 0 !important;
    }
}

/* ============================================
   วิธีแก้ปัญหาในอนาคต:
   ============================================
   1. ใช้ margin: 0 !important บน sections
   2. ใช้ padding เฉพาะภายใน (0.5rem - 1.5rem)
   3. ลบ .my-5, .mt-5 classes จาก HTML
   4. ตรวจสอบด้วย F12 → Elements → Computed
   5. Override ด้วย !important หาก CSS อื่นมี specificity สูง
   ============================================ */