/* ==========================================================================
   THANH HEADER CHÍNH (VIETTEL PREMIUM + HIỆU ỨNG KÍNH MỜ)
   ========================================================================== */
.bg-viettel { border-bottom: 1px solid var(--accent-color) !important; }

.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1050; 
    box-shadow: 0 6px 20px rgba(var(--theme-color-dark-rgb), 0.18) !important; 
    transition: all 0.3s ease;
}

@media (min-width: 992px) {
    .bg-viettel {
        background: linear-gradient(135deg, rgba(var(--theme-color-rgb), 0.96) 0%, rgba(var(--theme-color-dark-rgb), 0.96) 100%) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

@media (max-width: 991px) {
    .bg-viettel {
        background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color-dark) 100%) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ==========================================================================
   CSS ĐỒNG BỘ GIAO DIỆN MENU - CSS3 GPU ANIMATION
   ========================================================================== */
.offcanvas-body::-webkit-scrollbar { width: 0; display: none; }
.offcanvas-body { -ms-overflow-style: none; scrollbar-width: none; }
.dropdown-toggle::after { display: none !important; }

.menu-arrow, .menu-arrow-sub {
    font-size: 0.85em;
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Ép nút 3 gạch của Bootstrap thành màu trắng */
.navbar-dark .navbar-toggler-icon.navbar_edit {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-nav .nav-link {
    color: #ffffff !important; 
    font-weight: 600;
    font-size: 14px;
    padding: 10px 10px !important;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase;
}

.navbar-nav .dropdown-menu {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border: none;
    margin: 0;
    padding: 0;
}

/* --- GIAO DIỆN MÁY TÍNH (PC >= 992px) --- */
@media (min-width: 992px) {
    .navbar-nav > .nav-item > .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 2px;
        left: 50%;
        background-color: var(--accent-color);
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .navbar-nav > .nav-item > .nav-link:hover,
    .navbar-nav > .nav-item > .nav-link.active {
        color: var(--accent-color) !important;
    }
    
    .navbar-nav > .nav-item > .nav-link:hover::after,
    .navbar-nav > .nav-item > .nav-link.active::after {
        width: 75%; 
    }

    .navbar-nav .dropdown-menu {
        position: absolute;
        top: 110%; 
        left: 0;
        background-color: #ffffff;
        min-width: 240px; 
        padding: 0; 
        border-radius: 8px;
        border-top: 3px solid var(--theme-color); 
        box-shadow: 0 15px 40px rgba(var(--theme-color-rgb), 0.08); 
        z-index: 1000;
        transform: translateY(10px);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
	
    .navbar-nav .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -11px; 
        left: 25px; 
        border-width: 0 8px 8px 8px;
        border-style: solid;
        border-color: transparent transparent var(--theme-color) transparent;
    }

    .navbar-nav .dropdown:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        top: 100%;
    }

    .dropdown-item {
        font-weight: 500;
        font-size: 14px;
        color: #444444 !important; 
        padding: 12px 20px !important; 
        border-bottom: 1px solid #f2f2f2; 
        transition: all 0.25s ease;
        display: block;
        position: relative; 
        text-transform: uppercase;
    }
	
    .dropdown-item:last-child {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
    }
	
    .dropdown-item .icon-sub {
        color: var(--theme-color);
        transition: all 0.25s ease;
        opacity: 0.7; 
    }
	
    .dropdown-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: var(--theme-color);
        transform: scaleY(0); 
        transition: transform 0.2s ease;
    }

    .dropdown-item:hover,
	.dropdown-item.active	{
        background-color: var(--bg-pink-light) !important; 
        color: var(--theme-color) !important;
        padding-left: 28px !important; 
    }

    .dropdown-item:hover::before { transform: scaleY(1); }
    .dropdown-item:hover .icon-sub { opacity: 1; }

    .dropdown-submenu { position: relative; }
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 95%; 
    }
    .dropdown-submenu:hover > .dropdown-menu {
        left: 100%;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/* --- GIAO DIỆN ĐIỆN THOẠI (Mobile < 992px) --- */
@media (max-width: 991px) {
	.offcanvas {
        width: 82vw !important;
        max-width: 320px !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.25) !important;
        
        /* MÀU NỀN TOÀN BỘ SLIDE MENU */
        background-color: var(--theme-color-mobile) !important;
    }

    .offcanvas-header .btn-close-white {
    opacity: 1 !important;
    }
    
    .navbar-nav .nav-link {
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        padding: 0 !important;
        height: 56px !important; 
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        overflow: hidden;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.active-mobile {
        color: var(--accent-color) !important;
    }

	.navbar-nav .dropdown-menu {
		background-color: rgba(0, 0, 0, 0.15) !important; 
		position: static !important;
		float: none !important;
		border-radius: 0 !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
	}

    .navbar-nav .dropdown-menu.show-mobile {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .navbar-nav .dropdown-item {
        color: #ffffff !important;
        font-weight: 500;
        font-size: 14px;
        padding: 13px 15px !important;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        transition: color 0.2s ease, padding-left 0.3s ease;
        white-space: normal;
        text-transform: uppercase;
    }
    
    .dropdown-item .icon-sub { color: var(--accent-color); }

	.navbar-nav .dropdown-item:hover,
	.navbar-nav .dropdown-item:active,
	.navbar-nav .dropdown-item.active {
		background-color: transparent !important;
		color: var(--accent-color) !important;
		padding-left: 22px !important; 
	}
	
    .navbar-nav .menu-arrow,
    .navbar-nav .menu-arrow-sub {
        width: 60px !important;
        height: 100% !important; 
        display: flex !important;      
        align-items: center;            
        justify-content: center;        
        margin: 0 -10px 0 0 !important;
        padding: 0 !important;
    }
	
    .navbar-nav .menu-left-group {
        display: flex;
        align-items: center;
    }
    .navbar-nav .menu-icon-mobile {
        width: 28px; 
        text-align: left;
        flex-shrink: 0;
    }
    .navbar-nav .menu-text-mobile {
        white-space: normal;
    }
	
    .navbar-nav .nav-link.active i,
    .navbar-nav .nav-link:hover i,
    .navbar-nav .nav-link:focus i,
    .navbar-nav .nav-link[aria-expanded="true"] i,
    .dropdown-menu .dropdown-item.active i,
    .dropdown-menu .dropdown-item:hover i,
    .dropdown-menu .dropdown-item:focus i {
        color: inherit !important;
    }
}