/* Fix cho mobile - Không có thanh scroll ngang */

@media (max-width: 768px) {
    /* Fix body overflow */
    body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    
    /* Fix container */
    .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden !important;
    }
    
    /* Fix navbar collapse menu */
    .navbar-collapse {
        max-width: 100vw !important;
        width: 100% !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Fix navbar nav */
    .navbar-nav {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Fix nav items */
    .nav-item {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .nav-item .nav-link {
        font-size: 16px !important;
        padding: 12px 0 !important;
    }
    
    /* Fix navbar icons - 4 icons cân đối */
    .navbar-icons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
        padding: 15px 0 !important;
        margin: 0 -15px !important;
        border-top: 1px solid #e0e0e0 !important;
        background: #f8f9fa !important;
    }
    
    .navbar-icons .nav-item {
        flex: 1 !important;
        text-align: center !important;
        padding: 0 !important;
        width: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .navbar-icons .nav-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 8px !important;
        font-size: 28px !important;
    }
    
    .navbar-icons .nav-link i {
        font-size: 28px !important;
        margin: 0 !important;
        color: #000 !important;
    }
    
    .navbar-icons .nav-link img {
        width: 36px !important;
        height: 36px !important;
        object-fit: cover !important;
    }
    
    /* Fix badge position */
    .navbar-icons .badge {
        top: 8px !important;
        right: calc(50% - 20px) !important;
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
    
    /* Fix user dropdown wrapper */
    .navbar-icons .user-dropdown-wrapper {
        position: relative !important;
        z-index: 1 !important;
    }
    
    .navbar-icons .user-dropdown-wrapper .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .navbar-icons .user-dropdown-wrapper .fa-caret-down {
        display: none !important;
    }
    
    /* Fix login/signup section */
    .login-wrap {
        max-width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 !important;
    }
    
    /* Fix form elements */
    .form-control {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix buttons */
    .btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix close button */
    .close {
        position: absolute !important;
        right: 10px !important;
        top: 10px !important;
        z-index: 10 !important;
        font-size: 24px !important;
        padding: 5px 10px !important;
    }
    
    /* Fix alert */
    .alert {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: 40px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix row */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Fix col */
    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    /* Fix section */
    section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Fix ftco-section */
    .ftco-section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}