/* === MOBILE MENU FIX - Dropdown sang phải === */
/* Author: Sơn Lê */
/* Date: 2025-01-16 */

@media (max-width: 991.98px) {
    /* Đảm bảo navbar collapse menu hiển thị full width và sang phải */
    .navbar-collapse {
        position: fixed !important;
        right: 0 !important;
        top: 56px !important;
        width: 280px !important;
        max-width: 85vw !important;
        background: #1e293b !important;
        border-left: 1px solid #334155;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
        z-index: 999;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        overflow-x: hidden !important; /* Ẩn scroll ngang */
        padding: 0.5rem !important;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        /* Ẩn scrollbar nhưng vẫn scroll được */
        scrollbar-width: thin;
        scrollbar-color: #334155 transparent;
    }
    
    /* Webkit scrollbar styling */
    .navbar-collapse::-webkit-scrollbar {
        width: 4px;
    }
    
    .navbar-collapse::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .navbar-collapse::-webkit-scrollbar-thumb {
        background: #334155;
        border-radius: 2px;
    }
    
    /* Show menu khi collapse */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        transform: translateX(0) !important;
    }
    
    /* Navbar toggler button position - đưa sang phải */
    .navbar-toggler {
        order: 3 !important;
        margin-left: auto !important;
        border: 1px solid #334155;
        padding: 0.4rem 0.6rem;
        margin-right: 0 !important;
    }
    
    /* Logo position */
    .navbar-brand {
        order: 1;
    }
    
    /* Search toggle button position */
    .search-toggle-btn {
        order: 2;
        margin-left: auto;
    }
    
    /* Container flex layout */
    .navbar .container-fluid > .d-flex {
        gap: 10px !important;
    }
    
    /* Search dropdown - Full width, không trong menu */
    .search-dropdown {
        position: fixed !important;
        top: 56px !important;
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100% !important;
        background: #1e293b;
        border-bottom: 1px solid #334155;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        z-index: 998;
        padding: 1rem !important;
    }
    
    .search-dropdown .input-group {
        position: relative;
    }
    
    .search-dropdown input {
        width: 100% !important;
        padding: 0.75rem 1rem 0.75rem 3rem !important;
        border-radius: 25px !important;
    }
    
    /* Ẩn search dropdown khi không dùng */
    #searchDropdown:not(:has(.input-group input:focus)) {
        /* Hide when not active */
    }
    
    /* Nav items styling - Loại bỏ padding thừa để hết scrollbar */
    .navbar-nav {
        flex-direction: column !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }
    
    .navbar-nav .nav-item {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem !important;
        border-radius: 8px;
        width: auto;
        display: block;
        text-align: left;
    }
    
    /* Không cho scrollbar hiện khi không cần */
    .navbar-collapse:not(.show) {
        overflow: hidden !important;
    }
    
    /* Overlay background khi menu mở */
    .navbar-collapse.show::before {
        content: '';
        position: fixed;
        left: 0;
        top: 56px;
        width: 100vw;
        height: calc(100vh - 56px);
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

/* Extra small devices */
@media (max-width: 575.98px) {
    .navbar-collapse {
        width: 260px !important;
    }
    
    .search-dropdown {
        max-width: 260px;
    }
}