/* GomSuViet_Project/giohang.css */

.page-content h1 { /* Tiêu đề "Giỏ Hàng Của Bạn" */
    text-align: center;
    margin-bottom: 30px;
}

.cart-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.cart-items {
    /* width: 65%; (sẽ dùng col-8 từ grid.css) */
    background-color: var(--white-color);
    padding: 20px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-light);
}

.cart-summary {
    /* width: 32%; (sẽ dùng col-4 từ grid.css) */
    background-color: var(--white-color);
    padding: 20px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-light);
    align-self: flex-start; /* Giữ summary ở trên khi items dài */
}

.cart-items h2,
.cart-summary h2,
.checkout-form-section h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.cart-table th,
.cart-table td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.cart-table th {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.9em;
    text-transform: uppercase;
}
.product-thumbnail-header { width: 15%; text-align: center;}
.product-name-header { width: 35%; }
.product-price-header { width: 15%; text-align: right; }
.product-quantity-header { width: 15%; text-align: center; }
.product-subtotal-header { width: 15%; text-align: right; }
.product-remove-header { width: 5%; text-align: center; }

.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}
.product-name {
    font-weight: bold;
}
.product-price, .product-subtotal {
    font-weight: bold;
    text-align: right;
}
.product-quantity input[type="number"] {
    width: 60px;
    padding: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}
.remove-item-btn {
    background-color: #e74c3c; /* Màu đỏ */
    color: var(--white-color);
    border: none;
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.85em;
}
.remove-item-btn:hover {
    background-color: #c0392b;
}

.cart-empty-row td {
    text-align: center;
    padding: 30px 0;
    font-style: italic;
    color: #777;
}

.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

#update-cart-btn, .continue-shopping-btn, #checkout-btn, #apply-coupon-btn, #confirm-order-btn {
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}
#update-cart-btn, .continue-shopping-btn {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}
#update-cart-btn:hover, .continue-shopping-btn:hover {
    background-color: #c1a370; /* Darker secondary */
    text-decoration: none;
}
#checkout-btn, #confirm-order-btn {
    background-color: var(--accent-color);
    color: var(--white-color);
    width: 100%; /* Nút thanh toán chiếm toàn bộ chiều rộng */
    font-size: 1.1em;
}
#checkout-btn:hover, #confirm-order-btn:hover {
    background-color: var(--primary-color);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 1em;
}
.summary-row span:first-child {
    color: #555;
}
.summary-row span:last-child, .total-row strong {
    font-weight: bold;
}
.total-row {
    font-size: 1.2em;
    color: var(--primary-color);
    padding-top: 10px;
}
.cart-summary hr {
    border: 0;
    border-top: 1px dashed var(--border-color);
    margin: 15px 0;
}

.coupon-section {
    margin-top: 20px;
    border-top: 1px dashed var(--border-color);
    padding-top: 20px;
}
.coupon-section h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
}
.coupon-section input[type="text"] {
    width: calc(100% - 110px); /* Để vừa nút Áp dụng */
    margin-right: 10px;
    display: inline-block;
}
#apply-coupon-btn {
    width: 100px;
    background-color: var(--text-color);
    color: var(--white-color);
    font-size: 0.9em;
}
#apply-coupon-btn:hover {
    background-color: #555;
}

/* Checkout Form Section (Thông tin giao hàng) */
.checkout-form-section {
    margin-top: 30px;
    padding: 25px;
    background-color: var(--white-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-light);
}
.form-row { /* Dùng cho các trường trên cùng 1 hàng */
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Khoảng cách giữa các input trên cùng hàng */
}
.form-row .form-group {
    flex: 1; /* Các input chia sẻ không gian */
    min-width: calc(50% - 10px); /* Đảm bảo 2 cột trên màn hình lớn hơn */
}


/* Responsive for Cart Page */
@media (max-width: 992px) {
    .cart-items.col-8, .cart-summary.col-4 { /* Reset grid width */
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .cart-table {
        display: block; /* Chuyển table sang block để scroll ngang */
        overflow-x: auto;
        white-space: nowrap; /* Giữ các cell trên 1 hàng khi scroll */
    }
    .cart-table th, .cart-table td {
        padding: 10px 5px;
        font-size: 0.9em;
    }
    .product-thumbnail img { width: 60px; height: 60px; }
    .product-quantity input[type="number"] { width: 50px; }

    .cart-actions {
        flex-direction: column;
        align-items: stretch; /* Nút chiếm toàn bộ chiều rộng */
    }
    #update-cart-btn, .continue-shopping-btn {
        width: 100%;
    }
    .coupon-section input[type="text"] {
        width: calc(100% - 120px);
    }
    .form-row .form-group.col-6, .form-row .form-group.col-4 {
        min-width: 100%; /* Các input trong form giao hàng thành 1 cột */
    }
}