/*
Theme Name: Vì Bạn Xinh Đẹp
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}/*nut doc them danh muc*/
.balico_readmore_taxonomy_flatsome a {
    color: #318A00;
    display: block;
    border: 1px solid #2f80ed;
    border-radius: 5px;
    color: #2f80ed;
    display: block;
    margin: 0 auto;
    max-width: 340px;
    padding: 10px 5px;
    text-align: center;
}
/* Tạo khoảng cách đều giữa các sản phẩm */
.product-grid .product {
    margin-bottom: 30px; /* Điều chỉnh khoảng cách giữa các sản phẩm */
}

/* Điều chỉnh chiều cao của sản phẩm */
.product-grid .product {
    min-height: 400px; /* Thay đổi chiều cao tối thiểu của các khối sản phẩm */
}

/* Hiển thị sản phẩm với tỷ lệ hình ảnh vuông */
.product-grid .product img {
    object-fit: cover;
    width: 100%;
    height: 300px; /* Điều chỉnh chiều cao của hình ảnh sản phẩm */
}
/* Đổi màu và căn chỉnh tiêu đề sản phẩm */
.product-title a {
    color: #333333; /* Màu tiêu đề */
    font-size: 16px; /* Kích thước font tiêu đề */
    font-weight: bold; /* Đậm font chữ */
    text-transform: uppercase; /* In hoa tất cả tiêu đề */
    text-align: center; /* Căn giữa tiêu đề */
}

/* Thay đổi màu khi di chuột qua tiêu đề */
.product-title a:hover {
    color: #ff6600; /* Màu tiêu đề khi rê chuột */
    text-decoration: underline; /* Gạch chân tiêu đề khi rê chuột */
}
/* Thay đổi màu sắc và kiểu dáng của nút thêm vào giỏ hàng */
.button.add_to_cart_button {
    background-color: #ff6600; /* Màu nền nút */
    color: white; /* Màu chữ */
    border-radius: 5px; /* Bo tròn góc nút */
    padding: 10px 20px; /* Khoảng cách bên trong nút */
    font-size: 14px; /* Kích thước chữ */
    transition: background-color 0.3s ease; /* Hiệu ứng khi đổi màu */
}

/* Đổi màu nút khi di chuột qua */
.button.add_to_cart_button:hover {
    background-color: #e55b00; /* Màu khi rê chuột */
    color: white; /* Màu chữ khi rê chuột */
}
/* Phóng to hình ảnh sản phẩm khi rê chuột */
.product img {
    transition: transform 0.3s ease; /* Hiệu ứng chuyển động */
}

.product:hover img {
    transform: scale(1.1); /* Phóng to hình ảnh khi rê chuột */
}

/* Thêm bóng đổ khi rê chuột vào sản phẩm */
.product:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bóng đổ mềm */
}
/* Định dạng giá sản phẩm */
.price {
    color: #ff6600; /* Màu chữ của giá */
    font-size: 18px; /* Kích thước chữ */
    font-weight: bold; /* Đậm chữ */
    text-align: center; /* Căn giữa giá sản phẩm */
}

/* Thay đổi màu giá khi di chuột qua sản phẩm */
.product:hover .price {
    color: #e55b00; /* Màu khi rê chuột qua sản phẩm */
}
/* Tạo khoảng cách giữa các danh mục */
.product-category {
    margin-bottom: 30px; /* Khoảng cách giữa các danh mục */
}

/* Căn giữa nội dung danh mục */
.product-category .woocommerce-loop-category__title {
    text-align: center; /* Căn giữa tiêu đề danh mục */
    font-size: 16px; /* Kích thước font tiêu đề */
    color: #333; /* Màu tiêu đề */
}
/* Điều chỉnh lưới sản phẩm trên di động */
@media only screen and (max-width: 768px) {
    .product-grid .product {
        width: 48%; /* Hiển thị 2 sản phẩm mỗi hàng trên di động */
        margin: 1%; /* Khoảng cách giữa các sản phẩm */
    }
    
    .product-grid .product img {
        height: auto; /* Để hình ảnh tự động điều chỉnh kích thước theo chiều rộng */
    }
}

/* Căn chỉnh tiêu đề sản phẩm trên di động */
@media only screen and (max-width: 768px) {
    .product-title a {
        font-size: 14px; /* Kích thước tiêu đề nhỏ hơn trên di động */
    }
}