/* Reset và nền chung */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Open Sans', sans-serif; /* Sử dụng font bạn đã import */
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
}
/* Site Wrapper để căn giữa nội dung */

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Đảm bảo wrapper chiếm toàn bộ chiều cao màn hình */
    width: 100%; /* max-width: 1200px; Có thể thêm nếu bạn muốn giới hạn chiều rộng tổng thể */ /* margin: 0 auto; */ /* Bỏ margin auto ở đây, để body flex điều khiển */
}
/* Header */

header {
    background: #1a1a1a; /* Tối hơn một chút so với #111 để tăng độ tương phản */
    color: white;
    padding: 15px 40px; /* Tăng padding để có thêm không gian quanh các phần tử */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Thêm bóng nhẹ cho header */
}
    /* Nav links (HOME, ABOUT, LOGIN) */

    header nav { /* Thêm header để nhắm đúng nav trong header */
        display: flex;
        gap: 40px; /* Tăng khoảng cách giữa các liên kết để chúng thoáng hơn */
        flex-basis: auto;
        flex-grow: 0;
    }

        header nav a {
            text-decoration: none;
            color: #f0f0f0; /* Màu trắng ngà, mềm mại hơn so với trắng tinh */
            font-weight: 600; /* Tăng độ đậm để nổi bật */
            font-size: 17px; /* Tăng kích thước chữ một chút */
            text-transform: uppercase; /* Chuyển thành chữ in hoa để chuyên nghiệp hơn */
            transition: color 0.3s ease; /* Thêm hiệu ứng chuyển màu mượt mà khi hover */
        }

            header nav a:hover {
                color: #ffcc00; /* Màu vàng cam vẫn giữ nguyên khi hover */
            }
/* Logo Container (để chứa các phần tử bên trái header nếu cần) */

.logo-container {
    display: flex;
    align-items: center;
    gap: 20px; /* Khoảng cách giữa các phần tử trong logo-container */
}
/* H1 (Menu Thức Uống) */

header h1 { /* Nhắm đúng h1 trong header */
    margin: 0 auto; /* Căn giữa tự động */
    flex-grow: 1; /* Cho phép nó giãn ra để chiếm không gian */
    text-align: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* Cart icon container */

.cart-icon-container { /* Sử dụng container để bọc icon và số lượng */
    cursor: pointer;
    position: relative;
    padding-right: 0;
    margin-left: 40px;
    transition: transform 0.2s ease;
}

    .cart-icon-container:hover {
        transform: scale(1.05);
    }

    .cart-icon-container .cart-icon {
        font-size: 26px; /* to hơn nhẹ */
        color: #ffffff; /* icon trắng nổi bật */
        transition: color 0.3s ease;
    }

    .cart-icon-container:hover .cart-icon {
        color: #ffcc00; /* vàng khi hover */
    }

.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #e74c3c;
    color: white;
    font-size: 13px;
    padding: 3px 7px;
    border-radius: 50%;
    font-weight: bold;
    display: flex; /* Dùng flex để căn giữa số */
    align-items: center;
    justify-content: center;
    min-width: 20px; /* Đảm bảo đủ rộng cho số 2 chữ số */
    height: 20px; /* initial display is 'none' for empty cart, JS will change it to 'flex' */
    display: none;
}
/* Section lọc danh mục và nút Admin */

.category-filter-section {
    display: flex;
    justify-content: flex-start; /* Giữ các phần tử ở bên trái */
    align-items: center; /* Căn giữa theo chiều dọc */
    padding: 20px;
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
    background: #f0f0f0; /* Nền nhẹ nhàng hơn cho phần này */
    border-bottom: 1px solid #e0e0e0; /* Đường viền dưới nhẹ */
}

.dropdown {
    position: relative;
    display: inline-block; /* Quan trọng để nút dropdown không chiếm hết chiều rộng */
}

    .dropdown button {
        background: #ffcc00;
        border: none;
        padding: 8px 15px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 5px;
        color: black; /* Đảm bảo chữ đen */
        transition: background-color 0.3s ease; /* Thêm hiệu ứng chuyển màu */
    }

        .dropdown button:hover {
            background-color: #e0b300; /* Màu vàng đậm hơn khi hover */
        }

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    top: 100%;
    left: 0;
    border-radius: 5px;
    min-width: 150px;
    z-index: 10;
    margin-top: 5px; /* Khoảng cách nhỏ giữa nút và menu dropdown */
    overflow: hidden; /* Quan trọng để border-radius hoạt động với các mục con */
}

    .dropdown-content a {
        display: block;
        padding: 10px 15px;
        color: #333;
        text-decoration: none;
        white-space: nowrap; /* Ngăn không cho text xuống dòng */
        transition: background-color 0.2s ease;
    }

        .dropdown-content a:hover {
            background: #f0f0f0;
        }

    .dropdown-content.show { /* Thêm quy tắc để hiển thị khi có class 'show' */
        display: block;
    }
/* STYLE CHO NÚT "THÊM SẢN PHẨM" */

.admin-actions {
    margin-left: 10px; /* Khoảng cách giữa dropdown và nút "Thêm Sản phẩm" */
}

    .admin-actions .admin-button { /* Nhắm đúng class đã thêm vào HTML */
        background-color: #ffcc00; /* Màu vàng, giống nút Danh mục */
        color: black; /* Màu chữ đen */
        padding: 8px 15px; /* Giống padding của nút Danh mục */
        border: none;
        border-radius: 5px; /* Bo góc */
        cursor: pointer;
        font-size: 1em; /* Cỡ chữ */
        font-weight: bold; /* Chữ đậm */
        transition: background-color 0.3s ease; /* Thêm hiệu ứng chuyển màu */
    }

        .admin-actions .admin-button:hover {
            background-color: #e0b300; /* Màu vàng đậm hơn khi hover */
        }
/* Thông báo thành công/thất bại */

.alert {
    padding: 10px 20px;
    margin: 15px 20px 0; /* Khoảng cách trên và hai bên */
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
/* Product list */

main {
    flex-grow: 1; /* Cho phép main chiếm hết không gian còn lại */
    display: flex;
    flex-direction: column; /* Quan trọng để main cũng có thể chứa các phần tử theo cột */
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 20px;
    flex-grow: 1;
    background: #fff;
    margin-top: 0px; /* Bỏ margin-top ở đây, vì category-filter-section đã có padding */
}

.product-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Bóng rõ hơn */
    padding: 25px;
    max-width: 220px;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Thêm transition cho box-shadow */
}

    .product-card:hover {
        transform: translateY(-5px); /* Nhấc nhẹ lên khi hover */
        box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Bóng rõ hơn khi hover */
    }

    .product-card img {
        width: 100%;
        border-radius: 12px;
        object-fit: cover;
        height: 140px;
    }

    .product-card h3 {
        font-weight: 600;
        margin: 12px 0 8px;
        font-size: 18px;
        color: #333;
    }

    .product-card p {
        font-size: 14px;
        color: #666;
        min-height: 45px;
        text-align: center;
        margin-bottom: 10px; /* Khoảng cách với select */
    }

    .product-card select, .product-card input[type="number"] {
        margin-top: 10px; /* Khoảng cách sau p */
        width: 100%;
        padding: 8px 10px; /* Tăng padding cho dễ chọn/nhập */
        border-radius: 8px; /* Bo góc hơn */
        border: 1px solid #ccc;
        font-size: 15px; /* Tăng cỡ chữ */
        box-sizing: border-box;
        -webkit-appearance: none; /* Bỏ style mặc định của trình duyệt cho select */
        -moz-appearance: none;
        appearance: none;
        background-color: #f8f8f8; /* Nền nhẹ nhàng cho select/input */
    }
    /* Các nút trong product-card (Thêm vào giỏ, Sửa, Xóa) */

    .product-card .add-to-cart-btn { /* Nhắm đúng class của nút "Thêm vào giỏ" */
        margin-top: 12px;
        padding: 10px 15px; /* Tăng padding cho dễ click */
        border: none;
        border-radius: 8px;
        background-color: #3f51b5; /* Màu xanh dương */
        color: white;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Thêm bóng cho nút */
    }

        .product-card .add-to-cart-btn:hover {
            background-color: #2c387e;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Bóng rõ hơn khi hover */
        }
/* Nút Sửa và Xóa (dành cho Admin) */

.admin-product-actions {
    display: flex; /* Dùng flexbox để căn chỉnh các nút */
    justify-content: space-between; /* Đẩy hai nút ra hai bên */
    width: 100%; /* Chiếm toàn bộ chiều rộng của product-card */
    margin-top: 15px; /* Khoảng cách từ nút "Thêm vào giỏ" */
}

    .admin-product-actions button {
        margin: 0; /* Đặt lại margin để flexbox kiểm soát */
        flex-grow: 1; /* Cho phép các nút giãn ra để chiếm không gian */
        padding: 8px 10px;
        font-size: 14px; /* Cỡ chữ nhỏ hơn một chút */
        border-radius: 6px; /* Bo góc nhẹ hơn */
        color: white;
        box-shadow: none; /* Bỏ bóng mặc định của product-card button */
        border: none; /* Đảm bảo không có border */
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

        .admin-product-actions button:first-child {
            margin-right: 8px; /* Khoảng cách giữa nút Sửa và Xóa */
            background-color: #4CAF50; /* Màu xanh lá cho nút Sửa */
        }

        .admin-product-actions button:last-child {
            background-color: #f44336; /* Màu đỏ cho nút Xóa */
        }

        .admin-product-actions button:hover {
            opacity: 0.85; /* Giảm opacity khi hover */
        }
/* Footer */

footer {
    background: #1a1a1a;
    color: white;
    text-align: center;
    padding: 15px 0;
    margin-top: auto; /* Đẩy footer xuống cuối trang */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}
/* Cart popup */

.cart-popup {
    display: none; /* Sẽ được JavaScript bật/tắt */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.cart-content {
    background: white;
    width: 380px; /* Tăng chiều rộng một chút */
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0,0,0,0.3); /* Bóng rõ hơn */
    padding: 25px; /* Tăng padding */
    display: flex;
    flex-direction: column;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee; /* Đường kẻ dưới tiêu đề */
    padding-bottom: 10px;
}

    .cart-header h2 {
        margin: 0;
        color: #333;
        font-size: 24px;
    }

    .cart-header .close-button { /* Nhắm đúng class close-button */
        font-size: 30px; /* Kích thước lớn hơn cho dấu X */
        font-weight: lighter; /* Làm cho dấu X mảnh hơn */
        cursor: pointer;
        color: #888;
        line-height: 1; /* Căn chỉnh dấu X */
        transition: color 0.2s ease;
    }

        .cart-header .close-button:hover {
            color: #555;
        }

.cart-items-container {
    margin: 15px 0;
    flex-grow: 1;
    overflow-y: auto; /* Cho phép cuộn nếu danh sách quá dài */
}

.empty-cart-message { /* Thêm style cho thông báo giỏ hàng trống */
    text-align: center;
    color: #888;
    padding: 20px;
    font-style: italic;
}

.cart-summary { /* Đổi tên từ .cart-footer thành .cart-summary */
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    margin-top: 15px;
    border-top: 1px solid #eee; /* Đường kẻ trên tổng cộng */
    padding-top: 10px;
}

.cart-item {
    display: flex;
    align-items: center; /* Căn giữa các item */
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

    .cart-item img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        margin-right: 15px;
        flex-shrink: 0; /* Ngăn không cho ảnh bị co lại */
    }

    .cart-item .item-details { /* Thêm một div bọc để nhóm tên, size, giá */
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden; /* Ngăn text tràn ra ngoài */
    }

    .cart-item .item-name {
        font-weight: 600;
        color: #333;
        white-space: nowrap; /* Không cho tên sản phẩm xuống dòng */
        overflow: hidden;
        text-overflow: ellipsis; /* Hiển thị dấu ba chấm nếu quá dài */
        max-width: 100%; /* Đảm bảo không tràn khỏi item-details */
    }

    .cart-item .item-size {
        font-style: italic;
        font-size: 13px; /* Kích thước nhỏ hơn một chút */
        color: #555;
        white-space: nowrap;
    }

    .cart-item .item-price {
        font-weight: bold;
        color: #e53935; /* Màu đỏ cho giá */
        white-space: nowrap; /* Không cho giá xuống dòng */
    }

    .cart-item .item-quantity-controls { /* Thêm style cho controls số lượng */
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 0 10px; /* Khoảng cách với các phần tử khác */
        flex-shrink: 0;
    }

        .cart-item .item-quantity-controls button {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            line-height: 1;
            transition: background-color 0.2s ease;
        }

            .cart-item .item-quantity-controls button:hover {
                background-color: #e0e0e0;
            }

        .cart-item .item-quantity-controls span {
            font-weight: bold;
            min-width: 20px;
            text-align: center;
        }

    .cart-item .item-total { /* Thêm style cho tổng tiền từng item */
        font-weight: bold;
        color: #333;
        white-space: nowrap;
        margin-left: auto; /* Đẩy sang phải */
        flex-shrink: 0;
    }
    /* Nút xóa trong giỏ hàng */

    .cart-item .remove-item-btn { /* Đổi tên từ remove-item sang remove-item-btn để khớp với JS mới */
        background-color: #dc3545; /* Màu đỏ */
        color: white;
        border: none;
        border-radius: 50%; /* Làm tròn nút */
        width: 28px; /* Kích thước nhỏ hơn */
        height: 28px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        margin-left: 10px; /* Khoảng cách từ giá */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0; /* Không cho nút bị co lại */
        transition: background-color 0.2s ease;
    }

        .cart-item .remove-item-btn:hover {
            background-color: #c82333;
        }
/* Nút Checkout trong giỏ hàng */

.cart-summary .checkout-button { /* Chọn trực tiếp nút con của cart-summary */
    background-color: #28a745; /* Màu xanh lá cây cho nút Checkout */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    width: 100%; /* Cho nút chiếm toàn bộ chiều rộng */
}

    .cart-summary .checkout-button:hover {
        background-color: #218838;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
/* Toast Container */

#toast-container { /* Giữ ID cho khớp với JS */
    position: fixed;
    top: 20px; /* Vị trí trên cùng bên phải */
    right: 20px;
    z-index: 10000; /* Đảm bảo toast luôn ở trên cùng */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Khoảng cách giữa các toast */
    pointer-events: none; /* Cho phép click xuyên qua container */
}
/* Toast Message */

.toast {
    background-color: #333;
    color: white;
    padding: 15px 25px; /* Tăng padding */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Mặc định ẩn, sẽ được hiển thị bằng JS */
    transform: translateX(100%); /* Bắt đầu từ bên phải màn hình */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Kéo dài transition */
    min-width: 300px; /* Tăng chiều rộng tối thiểu */
    font-size: 16px; /* Tăng cỡ chữ */
    display: flex;
    align-items: center;
    gap: 15px; /* Khoảng cách giữa icon và nội dung */
    pointer-events: auto; /* Cho phép tương tác với toast (ví dụ: nút đóng) */
}

    .toast.show-toast { /* Class được thêm bởi JS để hiển thị toast */
        opacity: 1;
        transform: translateX(0);
    }

.toast--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

    .toast--success .toast__icon {
        color: #28a745;
    }

.toast--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

    .toast--error .toast__icon {
        color: #dc3545;
    }

.toast--info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

    .toast--info .toast__icon {
        color: #17a2b8;
    }

.toast__icon i {
    font-size: 24px;
}

.toast__body {
    flex-grow: 1;
}

.toast__title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px;
}

.toast__msg {
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.toast__close {
    font-size: 18px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    pointer-events: auto; /* Cho phép click nút đóng */
}

    .toast__close:hover {
        opacity: 1;
    }
/* Responsive adjustments */

@media screen and (max-width: 768px) {
    header {
        flex-direction: column;
        padding: 15px 20px;
    }

        header nav { /* Nhắm đúng nav trong header */
            margin-bottom: 10px;
            gap: 20px;
        }

        header h1 { /* Nhắm đúng h1 trong header */
            font-size: 26px;
            margin: 10px 0;
        }

    .cart-icon-container { /* Nhắm đúng container */
        margin-left: 0;
        margin-top: 10px;
    }

    .category-filter-section {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }

    .admin-actions {
        margin-left: 0;
        margin-top: 10px;
    }

    .product-list {
        padding: 15px;
        gap: 15px;
    }

    .product-card {
        max-width: 90vw;
        flex: 1 1 100%; /* Mỗi card chiếm 100% chiều rộng trên màn hình nhỏ */
    }

    .cart-content {
        width: 90vw;
        max-height: 70vh;
        padding: 20px;
    }

    #toast-container {
        right: 10px;
        left: 10px; /* Căn giữa trên màn hình nhỏ */
        width: auto;
    }

    .toast {
        min-width: unset;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }

    .toast__icon {
        font-size: 20px; /* Giữ icon trên mobile nhưng nhỏ hơn */
        flex-shrink: 0;
    }
}

@media screen and (max-width: 480px) {
    header nav a {
        font-size: 15px;
    }

    header h1 {
        font-size: 22px;
    }

    .cart-icon-container .cart-icon { /* Nhắm đúng icon trong container */
        width: 25px;
        height: 25px;
    }

    .cart-count {
        font-size: 11px;
        padding: 2px 6px;
        top: -6px;
        right: -8px;
    }

    .product-card {
        padding: 20px;
    }

        .product-card h3 {
            font-size: 16px;
        }

        .product-card p {
            font-size: 13px;
        }

        .product-card select, .product-card input[type="number"] {
            padding: 6px 8px;
            font-size: 14px;
        }

        .product-card .add-to-cart-btn {
            padding: 8px 12px;
            font-size: 0.9em;
        }

    .admin-product-actions button {
        font-size: 12px;
        padding: 6px 8px;
    }

    .cart-content {
        width: 95vw;
        padding: 15px;
    }

    .cart-header h2 {
        font-size: 20px;
    }

    .cart-header .close-button { /* Nhắm đúng class close-button */
        font-size: 26px; /* Hơi nhỏ hơn trên mobile */
    }
}
/* Cart icon container */

.cart-icon-container {
    cursor: pointer;
    position: relative;
    margin-left: 30px;
    font-size: 24px; /* kích thước icon */
    color: #ffffff; /* màu trắng mặc định */
    transition: transform 0.2s ease, color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .cart-icon-container:hover {
        color: #ffcc00; /* vàng khi hover */
        transform: scale(1.1);
    }
/* Icon giỏ hàng FontAwesome */

.cart-icon {
    font-size: 26px;
    line-height: 1;
}
/* Badge số lượng */

.cart-count {
    position: absolute;
    top: -8px;
    right: -12px;
    background: #e74c3c; /* đỏ */
    color: #fff; /* chữ trắng */
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    display: none; /* ẩn mặc định khi chưa có sản phẩm */
    min-width: 20px;
    height: 20px;
    text-align: center;
    line-height: 16px;
    box-shadow: 0 0 6px rgba(0,0,0,0.3); /* thêm bóng cho badge */
}
/* 🎨 CẢI TIẾN HIỂN THỊ ẢNH SẢN PHẨM - KHÔNG BỊ MÉO, SẮC NÉT HƠN */
.product-card img {
    width: 100%;
    height: 200px; /* tăng nhẹ chiều cao để ảnh nổi bật hơn */
    object-fit: cover; /* giữ đúng tỷ lệ, không bị méo */
    object-position: center; /* căn giữa ảnh */
    border-radius: 12px;
    image-rendering: -webkit-optimize-contrast; /* tăng độ rõ cho Chrome */
    image-rendering: crisp-edges; /* giúp ảnh hiển thị sắc nét hơn */
    filter: brightness(1.05) contrast(1.05) saturate(1.1); /* tăng sáng & tươi màu */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* 🌟 Hiệu ứng khi hover ảnh */
.product-card:hover img {
    transform: scale(1.03); /* phóng to nhẹ khi hover */
    filter: brightness(1.1) contrast(1.1);
}