/* FILE: css/dropdown.css - FIXED */

/* 1. Giao diện Dropdown chung (Desktop & Mobile) */
.dropdown-menu {
    background-color: #1a1a1a; /* Nền tối */
    border: 1px solid #333;
    border-top: 2px solid #9B2C88; /* Viền trên màu hồng */
    border-radius: 0 0 8px 8px;
    padding: 0;
    margin-top: 0; /* Dính liền với navbar */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.dropdown-item {
    color: #e0e0e0;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: #9B2C88; /* Hover màu hồng */
    color: #fff;
}

/* 2. Logic cho Desktop (Màn hình lớn > 992px) */
@media (min-width: 992px) {
    /* Hiệu ứng Hover mở menu (Optional - Nếu muốn giữ hover) */
    .dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    /* Ẩn mũi tên mặc định của Bootstrap để đẹp hơn */
    .dropdown-toggle::after {
        display: none;
    }
}

/* 3. Logic cho Mobile (Màn hình nhỏ < 992px) */
@media (max-width: 991px) {
    /* Ẩn mũi tên dropdown trên mobile */
    .dropdown-toggle::after {
        display: none !important;
    }

    .dropdown-menu {
        background-color: rgba(255,255,255,0.05); /* Nền nhạt hơn chút để phân biệt */
        border: none;
        border-radius: 8px;
        margin-top: 5px;
        box-shadow: none; /* Bỏ bóng trên mobile */
        padding-left: 20px; /* Thụt vào đầu dòng */
    }

    .dropdown-item {
        color: #ccc;
        border-bottom: none; /* Bỏ kẻ ngang trên mobile cho đỡ rối */
    }

    .dropdown-item:hover {
        background-color: transparent;
        color: #9B2C88; /* Chỉ đổi màu chữ, không đổi nền */
    }
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}