/*
Theme Name: thiet bi ve sinh Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* 1. CSS tiêu đề các mục lọc (Nền xám, viết hoa, in đậm) */
#shop-sidebar .widget-woof h4 {
    background-color: #f5f5f5 !important; /* Nền xám nhạt */
    color: #333 !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* 2. Chia 2 cột cho Bề mặt và Chất liệu (trừ khung giá và thương hiệu) */
.woof_container_pa_be-mat ul.woof_list_checkbox,
.woof_container_pa_chat-lieu ul.woof_list_checkbox,
.woof_container_product_brand ul.woof_list_checkbox {
    display: flex !important;
    flex-wrap: wrap !important;
}

.woof_container_pa_be-mat ul.woof_list_checkbox li,
.woof_container_pa_chat-lieu ul.woof_list_checkbox li,
.woof_container_product_brand ul.woof_list_checkbox li{
    width: 50% !important; /* Mỗi mục chiếm 50% chiều ngang */
    float: none !important;
}
#shop-sidebar .woof_redraw_zone h4 {
    margin-top: 20px;
    background: #f2f2f2;
    padding: 10px;
}
        /* ==============================================
           1. TÙY CHỈNH HIỂN THỊ GIÁ TIỀN
        ============================================== */
        .woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
        .woocommerce ul.products li.product .price > .woocommerce-Price-amount {
            color: #ff0000 !important; /* Giá bán màu đỏ */
            font-weight: 700 !important; /* In đậm */
            font-size: 16px !important;
            text-decoration: none !important;
        }
        .woocommerce ul.products li.product .price del .woocommerce-Price-amount {
            color: #888888 !important; /* Giá cũ màu xám */
            font-size: 13px !important;
            font-weight: 400 !important;
        }

        /* ==============================================
           2. TÙY CHỈNH MÀU SẮC NÚT "CHO VÀO GIỎ"
        ============================================== */
        .woocommerce ul.products li.product .button, 
        .woocommerce ul.products li.product .button.add_to_cart_button {
            background-color: #ffffff !important; 
            color: #00a0d2 !important; 
            border: 1px solid #00a0d2 !important; 
            border-radius: 5px !important; 
            padding: 6px 12px !important; /* Chỉnh đệm vừa vặn */
            text-transform: none !important; 
            font-weight: 500 !important;
            transition: all 0.3s ease-in-out !important; 
        }

        .woocommerce ul.products li.product .button:hover, 
        .woocommerce ul.products li.product .button.add_to_cart_button:hover {
            background-color: #00a0d2 !important; 
            color: #ffffff !important; 
            border-color: #00a0d2 !important;
        }

        /* ==============================================
           3. HIỂN THỊ GIÁ VÀ NÚT TRÊN CÙNG 1 HÀNG (TRỊ FLATSOME)
        ============================================== */
        /* Chuyển box chứa nội dung thành Flexbox */
        .woocommerce .product-small .box-text {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: space-between !important; /* Đẩy 2 phần tử ra 2 góc */
            align-items: center !important; /* Căn giữa theo chiều dọc */
        }

        /* Ép tiêu đề và các thành phần khác chiếm 100% để rớt dòng */
        .woocommerce .product-small .box-text > * {
            width: 100%;
        }

        /* Thu hẹp chiều rộng của khung giá và khung nút lại */
        .woocommerce .product-small .box-text .price-wrapper,
        .woocommerce .product-small .box-text .add-to-cart-button {
            width: auto !important;
            margin-bottom: 0 !important;
            margin-top: 5px !important;
        }

        /* Căn lề trái phải cho giá và nút */
        .woocommerce .product-small .box-text .price-wrapper {
            text-align: left !important;
        }
        .woocommerce .product-small .box-text .add-to-cart-button {
            text-align: right !important;
        }
        
        /* Xóa margin thừa mặc định của nút trong Flatsome */
        .woocommerce .product-small .box-text .button {
            margin: 0 !important;
        }

        /* ==============================================
           4. RESPONSIVE CHO ĐIỆN THOẠI MÀN HÌNH NHỎ
        ============================================== */
        @media (max-width: 480px) {
            .woocommerce .product-small .box-text .price-wrapper,
            .woocommerce .product-small .box-text .add-to-cart-button {
                width: 100% !important; /* Rớt thành 2 dòng riêng biệt trên mobile */
                text-align: center !important; /* Căn giữa lại */
            }
            .woocommerce .product-small .box-text .add-to-cart-button {
                margin-top: 8px !important;
            }
        }
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}