/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0.0
*/

/* --- CUSTOM CSS CỦA BẠN VIẾT DƯỚI ĐÂY --- */
/* Ví dụ: Đổi màu nút Mua hàng WooCommerce */
/* --- START DYNAMIC WOOCOMMERCE GRID SYSTEM --- */

/* Chỉ áp dụng cho Desktop (trên 768px) để Mobile không bị vỡ */
@media (min-width: 768px) {

    /* 1. THIẾT LẬP CONTAINER CHUNG
       Sử dụng Attribute Selector [class*="columns-"] để bắt tất cả các class
       bắt đầu bằng 'columns-' (ví dụ: columns-2, columns-3, columns-4...)
    */
    .woocommerce[class*="columns-"] ul.products {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -10px !important; /* Tạo lề âm để cân bằng padding của cột */
        box-sizing: border-box !important;
    }

    /* 2. THIẾT LẬP ITEM CHUNG */
    .woocommerce[class*="columns-"] ul.products li.product {
        float: none !important;
        clear: none !important;
        margin-right: 0 !important; /* Flexbox không dùng margin-right để chia cột */
        padding: 0 10px 20px 10px !important; /* Padding trái phải tạo khoảng cách, dưới tạo dòng */
        box-sizing: border-box !important;
        display: flex !important; /* Đảm bảo nội dung bên trong canh chỉnh tốt */
        flex-direction: column !important;
    }

    /* 3. ĐỊNH NGHĨA TỈ LỆ CỘT (DYNAMIC WIDTH) */

    /* Nếu là columns-1 */
    .woocommerce.columns-1 ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Nếu là columns-2 */
    .woocommerce.columns-2 ul.products li.product {
        width: 50% !important;
        max-width: 50% !important;
    }

    /* Nếu là columns-3 (33.33%) */
    .woocommerce.columns-3 ul.products li.product {
        width: 33.3333% !important;
        max-width: 33.3333% !important;
    }

    /* Nếu là columns-4 (25%) */
    .woocommerce.columns-4 ul.products li.product {
        width: 25% !important;
        max-width: 25% !important;
    }

    /* Nếu là columns-5 (20%) */
    .woocommerce.columns-5 ul.products li.product {
        width: 20% !important;
        max-width: 20% !important;
    }

    /* Nếu là columns-6 (16.66%) */
    .woocommerce.columns-6 ul.products li.product {
        width: 16.6666% !important;
        max-width: 16.6666% !important;
    }
}

/* --- END DYNAMIC WOOCOMMERCE GRID SYSTEM --- */