/* 1. KHUNG CHỨA SẢN PHẨM */
.cart_product {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    align-items: flex-start; /* Giữ ảnh và text thẳng hàng ở đỉnh */
}

/* 2. KHỐI ẢNH SẢN PHẨM */
.cart_image {
    width: 90px;
    min-width: 90px;
    height: 90px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 4px;
}

.cart_image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh không bị bóp méo dù là ảnh dọc hay ngang */
}

/* 3. KHỐI THÔNG TIN BÊN PHẢI */
.cart_info {
    flex: 1;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
}

/* Tên sản phẩm chiếm trọn hàng trên */
.cart_name {
    margin-bottom: 8px;
}

.cart_name a {
    color: #222;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng nếu tên quá dài để không vỡ khung */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 4. HÀNG ĐIỀU KHIỂN (Chia đôi: Trái Số lượng - Phải Giá cả) */
.row-cart-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Căn chân của 2 khối bằng nhau */
    margin-top: 5px;
}

/* Khối số lượng bên trái */
.cart_quantity label {
    display: block;
    margin-bottom: 5px;
    color: #666;
    font-size: 13px;
}

/* Sửa lỗi khối bấm tăng giảm số lượng */
.cart_select .input-group-btn, 



.cart_select button:hover {
    background: #f5f5f5;
}

/* Khung chứa bao ngoài bộ số lượng */
.cart_select {
    display: inline-flex !important; /* Đổi thành inline-flex để ôm khít 3 khối */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important; /* Triệt tiêu hoàn toàn khoảng cách giữa các khối */
}

/* Đồng bộ nút bấm - và + */
/* THU NHỎ NÚT BẤM (- và +) */
.cart_select button {
    width: 28px !important;         /* Thu nhỏ từ 36px xuống 28px */
    height: 28px !important;        /* Thu nhỏ từ 36px xuống 28px */
    border: 1px solid #ddd !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: 14px !important;     /* Thu nhỏ icon - + */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    float: none !important;         /* Triệt tiêu float gây lệch dòng */
}

/* ĐỒNG BỘ Ô INPUT Ở GIỮA - SỬA LỖI LỆCH KHUNG */
.cart_select input {
    /* 1. Reset thuộc tính chiều cao tối thiểu của Bootstrap/toàn trang */
    min-height: 0px !important;
    max-height: 28px !important;
    height: 28px !important;        /* Ép cứng chiều cao về 24px */
    
    /* 2. Ép phẳng tuyệt đối và cô lập CSS toàn trang */
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
    
    /* 3. Kích thước và căn chữ giữa tâm */
    width: 28px !important;
    line-height: 22px !important;   /* Chữ nằm chính giữa tâm (24px trừ đi 2px viền) */
    text-align: center !important;
    font-size: 14px !important;
    color: #333 !important;
    background-color: #ffffff !important;
    
    /* 4. Triệt tiêu viền hai bên và bo góc để dính liền vào nút bấm */
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 0px none !important;   
    border-right: 0px none !important;  
    border-radius: 0px !important;      
    
    /* 5. Định dạng hiển thị */
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;          
    padding: 0 !important;          
}
/* Khối giá tiền và nút xóa bên phải */
.cart_prices {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.cart__sale-price {
    color: #e60023 !important;
    font-size: 15px !important;     /* Thu nhỏ giá tiền từ 18px xuống 15px nhìn sẽ rất sang */
    font-weight: bold !important;
    display: inline-block !important;
    line-height: 28px !important;   /* Cho line-height bằng chiều cao bộ số lượng để thẳng hàng ngang */
}

/* CĂN CHỈNH LẠI NÚT BỎ SẢN PHẨM */
.cart__btn-remove {
    display: inline-block !important;
    color: #2196f3 !important;
    font-size: 13px !important;     /* Thu nhỏ chữ */
    text-decoration: none !important;
    line-height: 28px !important;   /* Thẳng hàng ngang tăm tắp với cụm số lượng và giá */
    margin: 0 !important;
}

.cart__btn-remove:hover {
    text-decoration: underline;
}
.cart-footer{
    padding:15px;
    border-top:1px solid #eee;
    background:#fff;
}

.cart-total-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.cart-total-box span:first-child{
    font-size:16px;
    font-weight:600;
}

.cart-total-price{
    color:#e60023;
    font-size:16px;
    font-weight:bold;
}

.btn-checkout{
    width:100%;
    height:36px;
    border:none;
    border-radius:4px;
    background:#2196f3;
    color:#fff;
    font-size:16px;
    cursor:pointer;
}
.cart_image, 
.cart_name a {
    cursor: pointer; /* Biến chuột thành hình bàn tay khi di chuyển vào */
}

.cart_name a:hover {
    color: #2196f3; /* Đổi màu tên sản phẩm khi di chuột vào (Ví dụ màu xanh) */
    text-decoration: underline; /* Gạch chân nhẹ khi hover giống các sàn TMĐT */
}

/* CĂN CHỈNH LẠI NÚT BỎ SẢN PHẨM HÀNG MỚI NẰM XÉO HÌNH ẢNH */
/* Đảm bảo khung bọc ảnh cắt ruy băng thừa khi xoay góc */
        /* Khung chứa ảnh sản phẩm */
.product__box-image {
    position: relative;
    display: block;
    overflow: hidden; /* Giữ nhãn xéo không bị lòi ra ngoài viền khung */
}

/* Nhãn "Hàng mới" phong cách ruy-băng xéo góc trái */
.badge-new-like {
    position: absolute;
    top: 15px;
    left: -30px;
    background-color: #ff3838; /* Màu đỏ nổi bật (Có thể đổi sang #28a745 nếu muốn màu xanh lá) */
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    width: 100px;
    padding: 4px 0;
    transform: rotate(-45deg); /* Xoay xéo 45 độ ngược chiều kim đồng hồ */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10; /* Đảm bảo luôn nằm trên cùng của ảnh */
    letter-spacing: 0.5px;
}
/* Đảm bảo khung bọc ảnh cắt ruy băng thừa khi xoay góc */
.product__box-image {
    position: relative;
    display: block;
    overflow: hidden; /* Bắt buộc phải có để ẩn phần ruy-băng thừa ngoài khung */
}

/* Kiểu dáng ruy băng chữ xéo "Hàng mới" */
.badge-new-like {
    position: absolute;
    top: 14px;            /* Điều chỉnh khoảng cách lên xuống */
    left: -28px;          /* Điều chỉnh khoảng cách sang trái/phải */
    background-color: #28a745; /* Màu xanh lá (Nếu thích màu đỏ rực rỡ hãy thay bằng #ff3838) */
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    width: 95px;          /* Độ rộng ruy băng vừa vặn */
    padding: 3px 0;
    transform: rotate(-45deg); /* Cốt lõi tạo góc xoay xéo 45 độ ngược chiều kim đồng hồ */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 11;          /* Đảm bảo đè lên trên ảnh sản phẩm và các hiệu ứng khác */
    letter-spacing: 0.3px;
}
/* ==========================================================================
   CẤU HÌNH HIỂN THỊ CHẤM CAM GIỎ HÀNG TRÊN MOBILE (DƯỚI 991PX)
   ========================================================================== */
@media (max-width: 991px) {
    
    /* 1. Thiết lập khung định vị chuẩn cho icon giỏ hàng trên mobile */
    .evo-header-cart {
        position: relative !important;
        display: inline-block !important;
    }

    /* 2. Ẩn chữ số 0, 1, 2... cũ đi để không bị đè chữ lên icon */
    .evo-header-cart .count_item_pr {
        display: none !important; 
    }

    /* 3. Tự động vẽ chấm cam chuẩn xác khi có class .has-products */
    .evo-header-cart.has-products::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        
        /* Căn chỉnh vị trí chấm cam nằm ở góc trên bên phải icon */
        top: -2px !important;
        right: -6px !important;
        
        /* Kích thước chấm cam */
        width: 12px !important;
        height: 12px !important;
        
        /* Màu cam chuẩn và bo tròn tuyệt đối */
        background-color: #ff9800 !important; 
        border-radius: 50% !important;
        
        /* Viền trắng mảnh để nổi bật trên nền xanh của Header */
        border: 1px solid #ffffff !important; 
        
        /* Đảm bảo chấm cam luôn nổi lên trên cùng */
        z-index: 99999 !important;
    }
}