/*
Theme Name: Shoptimizer Child Theme
Theme URI: 
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Đẩy nút Mua ngay sang phải một chút */
.buy-now-btn {
    margin-left: 10px !important;
    background-color: #e09900 !important; /* Màu cam */
    color: #fff !important;
}

/* Hiệu ứng khi di chuột vào */
.buy-now-btn:hover {
    background-color: #c48600 !important;
    color: #fff !important;
}

/* Đảm bảo form hiển thị ngang (Flexbox) để 2 nút nằm cạnh nhau */
form.cart {
    display: flex !important;
    align-items: flex-end; /* Căn đáy các nút cho đều */
    flex-wrap: wrap;
}
/* Ẩn tiêu đề cột bảng thuộc tính để gọn hơn */
.woocommerce-product-attributes th {
    padding: 5px 0;
    width: 30%; /* Điều chỉnh độ rộng cột tên */
    text-align: left;
}
.woocommerce-product-attributes td {
    padding: 5px 0;
    font-style: italic; /* Làm nghiêng chữ cho đẹp */
}
/* Xóa kẻ bảng nếu muốn giao diện sạch hơn */
.shop_attributes tr, .shop_attributes th, .shop_attributes td {
    border: none !important;
    background: transparent !important;
}
/* 1. Dùng Flexbox để xếp ngang hàng tất cả */
form.cart {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 20px; /* Khoảng cách 20px giữa các phần tử */
}

/* 2. Thiết lập giao diện chung cho cả 2 nút */
button.single_add_to_cart_button,
.buy-now-btn {
    background-color: #28a745 !important; /* Màu xanh lá giống nhau */
    color: #ffffff !important;
    flex-grow: 1; /* Tự động giãn nở để to bằng nhau */
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px !important; /* Chiều cao cố định cho đều */
    border-radius: 4px;
    font-weight: bold;
    margin: 0 !important; /* Xóa margin thừa */
    border: none !important;
    padding: 0 20px !important;
}

/* 3. Chỉnh riêng cho ô số lượng (để nó không bị méo) */
.woocommerce .quantity .qty {
    height: 50px !important; /* Cao bằng nút bấm */
    width: 60px !important;
}

/* Hiệu ứng khi di chuột */
button.single_add_to_cart_button:hover,
.buy-now-btn:hover {
    opacity: 0.9;
}
.ajax_add_to_cart.add_to_cart_button, .product form.cart .button {
    background: #dc9814;
    height: 50px;
    text-align: center;
    position: relative;
    width: 130px;
}
div.product .summary form.cart {
    margin: 0.75rem -27px 1rem;
}
/* 1. Dàn hàng ngang 3 phần tử */
form.cart {
    display: flex !important;
    gap: 10px; /* Khoảng cách giữa các nút */
    width: 100%;
    align-items: stretch; /* Kéo dãn chiều cao bằng nhau */
}

/* 2. Thiết lập chung cho cả 3: Số lượng, Add to cart, Buy now */
.quantity,
button.single_add_to_cart_button,
.buy-now-btn {
    flex: 1; /* Chia đều không gian: mỗi nút chiếm 33% */
    height: 50px !important; /* Chiều cao cố định bằng nhau */
    margin: 0 !important;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 3. Chỉnh riêng ô số lượng cho đẹp */
.quantity {
    position: relative;
    border: 1px solid #ccc; /* Tạo viền cho giống nút */
    background: #fff;
    min-width: 0; /* Tránh bị vỡ layout trên mobile */
}
.quantity input.qty {
    height: 100% !important;
    width: 100% !important;
    border: none !important;
    text-align: center;
}

/* 4. Chỉnh màu và căn chữ cho 2 nút bấm */
button.single_add_to_cart_button,
.buy-now-btn {
    background-color: #28a745 !important; /* Màu xanh đồng bộ */
    color: #ffffff !important;
    border: none !important;
    display: flex; /* Flexbox để căn giữa chữ */
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    padding: 0 5px !important;
}
.quantity-nav{
        right: 0px;
}
.woocommerce .quantity .qty {
    height: 46px !important;
    width: 60px !important;
}