/* Header Navigation Slider - Xử lý menu tràn */
/* KHÔNG dùng overflow - dùng JS ẩn/hiện item để giữ dropdown hoạt động */

/* Style cho nav-left container */
.header-main .flex-col.flex-grow {
    position: relative;
    min-width: 0;
}

/* Khi có overflow, parent cần chứa cả menu và nút */
.header-nav-has-overflow {
    display: flex !important;
    align-items: center;
    position: relative;
}

/* Menu chính - giới hạn chiều rộng khi có overflow để chừa chỗ cho nút */
ul.header-nav.header-nav-main.nav-left {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0;
}

/* Khi có overflow, menu co lại để chừa chỗ cho nút */
.header-nav-has-overflow ul.header-nav.header-nav-main.nav-left {
    flex: 0 1 auto;
    max-width: calc(100% - 80px); /* Giảm xuống 80px */
    /* BỎ overflow: hidden để dropdown vẫn hiện */
}

ul.header-nav.header-nav-main.nav-left > li {
    flex-shrink: 0;
}

/* Ẩn menu item bị tràn bằng class - ẩn hoàn toàn */
ul.header-nav.header-nav-main.nav-left > li.nav-item-hidden {
    display: none !important;
}

ul.header-nav.header-nav-main.nav-left > li.nav-item-hidden > a {
    display: none !important;
}

/* Container cho 2 nút điều hướng - đứng riêng bên phải */
.header-nav-arrows {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 15px;
    flex-shrink: 0;
}

/* Ẩn khi không có overflow */
.header-nav-arrows {
    display: none;
}

/* Hiển thị container khi có overflow */
.header-nav-has-overflow .header-nav-arrows {
    display: flex !important;
}

/* Nút điều hướng - đơn giản như leninn.com */
.header-nav-arrow {
    display: flex;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    color: #333;
    margin: 0;
}

.header-nav-arrow:hover {
    color: #000;
}

/* Ẩn nút khi đã ở đầu hoặc cuối */
.header-nav-arrow.is-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

/* Icon mũi tên SVG style */
.header-nav-arrow svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Responsive - Ẩn trên mobile vì đã có menu hamburger */
@media (max-width: 849px) {
    .header-nav-arrows {
        display: none !important;
    }
    
    .header-nav-has-overflow ul.header-nav.header-nav-main.nav-left {
        max-width: 100%;
        overflow: visible;
    }
    
    ul.header-nav.header-nav-main.nav-left > li.nav-item-hidden {
        display: flex !important;
    }
    
    ul.header-nav.header-nav-main.nav-left > li.nav-item-hidden > a {
        display: flex !important;
    }
}