/* =========================================================
   CSS: DROPDOWN MENU SẢN PHẨM (ACCORDION)
   ========================================================= */


/* 1. Mặc định ẩn tất cả các dòng sản phẩm */

.menu-category .product-row {
    display: none !important;
}


/* 2. Khi nhóm được mở (có class active), hiển thị các dòng sản phẩm */

.menu-category.active .product-row {
    display: table-row !important;
}


/* MỚI: Chỉ hiển thị tối đa 5 sản phẩm đầu tiên, ẩn từ sản phẩm thứ 6 trở đi nếu chưa ấn "Xem thêm" */

.menu-category.active:not(.expanded) .product-row:nth-child(n+7) {
    display: none !important;
}


/* 3. Hiển thị dạng lưới trên điện thoại khi nhóm mở */

@media screen and (max-width: 1024px) {
    .menu-category.active .product-row {
        display: flex !important;
    }
    .menu-category.active:not(.expanded) .product-row:nth-child(n+7) {
        display: none !important;
    }
}


/* 4. Icon mũi tên thu gọn bên góc phải */

.toggle-icon {
    position: absolute;
    right: 15px;
    font-size: 0.9em;
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
    /* Mũi tên chỉ ngang khi đóng */
}


/* Xoay mũi tên chỉ xuống khi mở */

.menu-category.active .toggle-icon {
    transform: rotate(0deg);
}


/* 5. Hiệu ứng khi trỏ chuột vào thanh Tiêu Đề Nhóm */

.category-toggle {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.category-toggle:hover {
    background-color: rgba(251, 248, 236, 0.2) !important;
}


/* 5.1 Định dạng Tiêu Đề Nhóm */

.group-header-row {
    background-color: rgba(251, 248, 236, 0.1);
    border-bottom: 2px solid var(--default-menu-border);
    border-top: 2px solid var(--default-menu-border);
}

.group-header-cell {
    padding: 10px 15px;
    text-align: center;
    position: relative;
    font-weight: bold;
    color: var(--default-menu-border);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* 6. Định dạng cho các dòng sản phẩm */

.product-row {
    border-bottom: 1px dashed rgba(251, 248, 236, 0.2);
}

.product-cell {
    padding: 10px 5px;
}

.product-price-cell {
    color: #fff101;
    font-weight: bold;
}

.product-action-cell {
    text-align: center;
    padding-right: 10px;
}

.product-row .soluong-wrapper {
    margin: 0 auto;
    justify-content: center;
}

.product-row .input-soluong {
    width: 35px;
    text-align: center;
    padding: 0;
}

.product-row .btn-muahang-item {
    padding: 8px 16px;
    font-size: 0.9rem;
    width: auto;
    text-align: center;
}


/* 7. Khắc phục lỗi tiêu đề bị đè vào dấu X */

.donhang-title {
    text-align: left;
    font-size: 1.25rem !important;
    /* Thu nhỏ cỡ chữ cho gọn */
    padding: 0 50px 0 0 !important;
    /* Ép lề phải thụt vào 40px để nhường chỗ cho dấu X */
    margin-top: 5px !important;
}

.donhang-modal-close {
    font-size: 1.55rem;
    z-index: 100 !important;
    /* Đảm bảo dấu X luôn nổi lên trên cùng, không bị khung chữ che khuất */
}