/* ==========================================================================
   HỆ THỐNG KHUNG CHUẨN 1200PX (ĐỒNG NHẤT TỪ TRÊN XUỐNG DƯỚI)
   ========================================================================== */

/* Ép thẻ bọc lớn nhất của trang không được tự tạo thêm khoảng đệm thừa */
body.single-product .woocommerce,
body.single-product .site-main,
body.single-product #primary,
body.single-product #content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* KHUNG 1200PX CHUẨN - DÙNG CHUNG CHO TẤT CẢ PHẦN TỬ TRÊN TRANG */
.midori-main-container {
    max-width: 1200px !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Xóa bỏ các thuộc tính margin/padding mặc định gây lệch khung của WooCommerce */
.woocommerce div.product {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    clear: both;
}

/* Flex gap giữa Cột ảnh và Cột thông tin */
.esight-product-top-wrap.gap-60 { 
    gap: 60px; 
    width: 100%;
}

/* Breadcrumb thẳng hàng 1200px */
.woocommerce-breadcrumb { 
    padding-top: 50px !important; 
    margin: 0 0 30px 0 !important; 
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-family: var(--font-secondary) !important; 
    font-weight: 400 !important; 
    font-size: 14px !important; 
    line-height: 1.5 !important; 
    color: var(--text-grey) !important; 
}
.woocommerce-breadcrumb a { color: var(--text-heading) !important; text-decoration: none; font-weight: 500; }
.woocommerce-breadcrumb a:hover { color: var(--color-accent-1) !important; }

/* ==========================================================================
   SẢN PHẨM TƯƠNG TỰ (NỀN TRÀN 100% - RUỘT KHÓA 1200PX)
   ========================================================================== */

/* Nền bung tràn mép toàn màn hình */
.woocommerce section.related.products,
section.related.products.related-full-width-bg {
    max-width: 100% !important; 
    width: 100% !important;
    padding: 80px 0 !important; 
    margin: 60px 0 0 0 !important;
    background-color: var(--color-bg-main) !important;
    box-sizing: border-box !important;
    clear: both;
}

/* Lưới 4 sản phẩm chia đều trong khung 1200px */
.related.products .midori-product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   RESPONSIVE (ĐIỆN THOẠI & TABLET: 1 HÀNG 2 SẢN PHẨM)
   ========================================================================== */

/* Tablet (Dưới 1024px) */
@media (max-width: 1024px) {
    .esight-product-top-wrap { 
        flex-direction: column; 
        gap: 30px; 
    }
    .woocommerce-breadcrumb { 
        padding-top: 100px !important; 
    }
    .related.products .midori-product-grid { 
        grid-template-columns: repeat(2, 1fr) !important; /* 2 sản phẩm / hàng */
        gap: 15px !important;
    }
}

/* Điện thoại Mobile (Dưới 767px: ÉP CHUẨN 2 SẢN PHẨM 1 HÀNG) */
@media (max-width: 767px) {
    .related.products .midori-product-grid {
        display: grid !important; /* Đổi từ flex trượt ngang sang Grid lưới */
        grid-template-columns: repeat(2, 1fr) !important; /* Chia đều 2 cột */
        gap: 10px !important; /* Khoảng cách giữa 2 thẻ sản phẩm */
        padding: 0 !important;
        overflow-x: visible !important;
    }
    
    /* Reset lại thẻ sản phẩm chiếm đủ 100% của mỗi ô cột */
    .related.products .midori-product-grid > * {
        flex: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}