/* ========================================
   Header CSS - MTech Website - RESPONSIVE OPTIMIZED
   ======================================== */

:root {
    /* Breakpoint variables */
    --breakpoint-xs: 320px;    /* Extra small phones */
    --breakpoint-sm: 360px;    /* Standard phones */
    --breakpoint-md: 480px;    /* Larger phones */
    --breakpoint-tablet-v: 600px;  /* Tablet portrait */
    --breakpoint-tablet-h: 834px;  /* Tablet landscape */
    --breakpoint-lg: 1024px;   /* Small laptops */
    --breakpoint-xl: 1280px;   /* HD laptops */
    
    /* Fluid font sizes using clamp() */
    --font-nav: clamp(0.875rem, 1.5vw, 1rem);
    --font-logo: clamp(1rem, 2.5vw, 1.25rem);
    --font-dropdown: clamp(0.8125rem, 1.3vw, 0.9375rem);
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    width: 100%;
}

/* ---- Elfsight branding ---- */
.eapps-widget-toolbar,
.eapps-link,
[class*="eapps-"][class*="-branding"],
[class*="eapps-"][class*="-powered"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ---- Language Selector ---- */
.lang_selector {
    position: relative;
    cursor: pointer;
}

.lang_current {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1vw, 7px);
    color: #fff;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 400;
    font-style: normal;
    padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
    border-radius: 3px;
    transition: background 0.25s ease;
    user-select: none;
    white-space: nowrap;
}

.lang_current:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang_caret {
    font-size: clamp(8px, 1vw, 10px);
    opacity: 0.7;
    margin-left: clamp(1px, 0.3vw, 2px);
}

.flag_icon {
    width: clamp(18px, 3vw, 22px);
    height: clamp(12px, 2vw, 15px);
    object-fit: cover;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
}

.lang_dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: clamp(-10px, 2vw, 0);
    min-width: clamp(130px, 25vw, 150px);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: clamp(4px, 1vw, 6px) 0;
    z-index: 10001;
    max-width: calc(100vw - 20px);
}

.lang_dropdown.show {
    display: block;
}

.lang_dropdown li a {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 10px);
    padding: clamp(8px, 1vw, 10px) clamp(12px, 2vw, 16px);
    color: #333;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    font-style: normal;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.lang_dropdown li a:hover,
.lang_dropdown li.active a {
    background: #3363DD;
    color: #fff;
}

/* ---- Main Menu Area ---- */
.main_menu_area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    padding: 0 !important;
}

.home-page .main_menu_area::before {
    display: none;
}

.menu_absolute {
    width: 100%;
    background: #1749c9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: clamp(10px, 2vw, 15px) 0;
    margin: 0;
}

/* Inner container giới hạn chiều rộng nội dung navbar */
.menu_absolute > .navbar {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Offset body so content isn't hidden under the fixed header */
body {
    padding-top: 60px;
}

/* ---- Navbar Layout ---- */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    min-height: 48px;
    gap: clamp(8px, 1.5vw, 15px);
}

/* ---- Navbar Logo + MTECH ---- */
.navbar_logo {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
    text-decoration: none;
    margin-left: 0;
    margin-right: auto;
    padding-left: clamp(15px, 4vw, 40px);
    padding-right: clamp(12px, 2vw, 20px);
    padding-top: 0;
    padding-bottom: 0;
    flex-shrink: 0;
}

.navbar_logo_img {
    height: clamp(45px, 8vw, 78px);
    width: auto;
    display: block;
    filter: brightness(1.2) contrast(1.15) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.navbar_logo_text {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-style: normal;
    font-weight: 750;
    font-size: clamp(0.9rem, 2.5vw, 1.25rem);
    color: #FFFFFF;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    line-height: 1.2;
    white-space: nowrap;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

/* ---- Profile Button ---- */
.nav-profile-btn {
    padding: 0 clamp(4px, 1vw, 8px) !important;
    display: none;
}

.btn_profile_download_nav {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 0.8vw, 5px);
    background: #ffffff;
    color: #3363DD !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
    font-weight: 700;
    font-style: normal;
    text-decoration: none !important;
    padding: clamp(3px, 0.8vw, 4px) clamp(8px, 1.5vw, 10px);
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
    line-height: 1.4;
}

.btn_profile_download_nav svg {
    flex-shrink: 0;
    width: clamp(10px, 2vw, 13px);
    height: clamp(10px, 2vw, 13px);
}

.btn_profile_download_nav:hover {
    background: #f5f5f5;
    color: #3363DD !important;
    transform: translateY(-1px);
}

/* ---- Navbar Collapse ---- */
.navbar-collapse {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    padding-right: clamp(15px, 3vw, 40px);
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 56px;
    margin-left: auto;
}

/* -- Menu list -- */
ul.menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: clamp(2px, 1.5vw, 10px);
    flex-wrap: wrap;
}

/* -- Menu item -- */
ul.menu > li.nav-item {
    position: relative;
    margin: 0;
    padding: 0 clamp(3px, 1vw, 8px);
}

/* -- Nav link (top level) -- */
ul.menu > li.nav-item > a.nav-link {
    color: #fff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: var(--font-nav);
    line-height: clamp(1.2, 2vw, 1.5);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.8vw, 5px);
    transition: color 0.3s ease, background 0.3s ease, text-shadow 0.3s ease, border-radius 0.3s ease;
    position: relative;
    padding: clamp(3px, 0.8vw, 5px) clamp(8px, 1.5vw, 15px);
    min-height: clamp(32px, 5vw, 48px);
    overflow-wrap: break-word;
}

/* Border bottom indicator */
ul.menu > li.nav-item > a.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: clamp(8px, 1.5vw, 15px);
    right: clamp(8px, 1.5vw, 15px);
    height: 3px;
    background: #3363DD;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

ul.menu > li.nav-item:hover > a.nav-link,
ul.menu > li.nav-item.active > a.nav-link {
    color: #ffffff !important;
    font-weight: 600;
}

ul.menu > li.nav-item:hover > a.nav-link::after,
ul.menu > li.nav-item.active > a.nav-link::after {
    opacity: 1;
    background: #ffffff;
    border-radius: 2px;
}

/* -- Caret arrow ---- */
.caret-drop {
    display: inline-block;
    width: clamp(4px, 0.8vw, 6px);
    height: clamp(4px, 0.8vw, 6px);
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    padding: 0;
    margin-left: clamp(2px, 0.5vw, 3px);
    vertical-align: middle;
    flex-shrink: 0;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

/* -- Dropdown menu -- */
ul.menu > li.nav-item.submenu > ul.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: max-content;
    max-width: calc(100vw - 20px);
    background: rgba(23, 73, 201, 0.97);
    border-top: 3px solid #ffffff;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    list-style: none;
    margin: 0;
    padding: clamp(6px, 1.5vw, 10px) 0;
    z-index: 10000;
    pointer-events: auto;
}

/* Show dropdown on hover - top level */
ul.menu > li.nav-item.submenu:hover > ul.dropdown-menu,
ul.menu > li.nav-item.submenu > ul.dropdown-menu:hover,
ul.menu > li.nav-item.submenu.show > ul.dropdown-menu {
    display: block;
    pointer-events: auto;
}

/* Ensure dropdown menu items can trigger hover on nested menus */
ul.menu > li.nav-item.submenu > ul.dropdown-menu > li.nav-item.submenu:hover,
ul.menu > li.nav-item.submenu > ul.dropdown-menu > li.nav-item.submenu:hover > a {
    pointer-events: auto;
}

/* Position nested submenu items - required for nested dropdown positioning */
.services-dropdown > ul.dropdown-menu > li.nav-item.submenu {
    position: relative;
}

/* ========================================
   SERVICES DROPDOWN - Đồng bộ với Blog Categories
   Support cấp n-levels với cấu trúc .nav-item.submenu
   ======================================== */

/* Services dropdown - keep absolute position, allow auto height */
.services-dropdown:hover > ul.dropdown-menu {
    height: auto;
    overflow: visible;
}

/* All Categories item highlight - no border */
.services-dropdown > ul.dropdown-menu > li.all-categories-item {
    margin-bottom: 5px;
}

.services-dropdown > ul.dropdown-menu > li.all-categories-item > a.nav-link {
    display: block !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 25px !important;
    white-space: nowrap !important;
    word-wrap: break-word;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.services-dropdown > ul.dropdown-menu > li.all-categories-item > a.nav-link:hover {
    color: #ffffff !important;
    background: rgba(51, 99, 221, 0.15) !important;
}

/* Services dropdown - Leaf items (danh mục lá không có con) */
.services-dropdown > ul.dropdown-menu > li:not(.nav-item.submenu):not(.all-categories-item) > a.nav-link {
    display: block !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 25px !important;
    white-space: nowrap !important;
    word-wrap: break-word;
    transition: color 0.25s ease, padding-left 0.25s ease;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.services-dropdown > ul.dropdown-menu > li:not(.nav-item.submenu):not(.all-categories-item) > a.nav-link:hover {
    color: #ffffff !important;
    padding-left: 32px !important;
}

/* Services dropdown - Submenu items (danh mục cha có con) */
.services-dropdown > ul.dropdown-menu > li.nav-item.submenu > a.nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-direction: row !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 25px !important;
    white-space: nowrap !important;
    word-wrap: break-word;
    transition: color 0.25s ease, background 0.2s ease;
    background: transparent !important;
}

.services-dropdown > ul.dropdown-menu > li.nav-item.submenu > a.nav-link:hover {
    color: #ffffff !important;
    background: rgba(51, 99, 221, 0.1) !important;
}

.services-dropdown > ul.dropdown-menu > li.nav-item.submenu > a.nav-link .caret-drop {
    margin-left: 0;
    margin-right: 15px;
    transform: rotate(-45deg);
}

/* Services nested items positioning & hover bridge */
.services-dropdown > ul.dropdown-menu > li.nav-item.submenu {
    position: relative;
}

.services-dropdown > ul.dropdown-menu > li.nav-item.submenu::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    pointer-events: auto;
}

/* Services nested items (cấp 2+) - recursive styling */
.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li:not(.nav-item.submenu) > a.nav-link {
    display: block !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 9px 20px !important;
    white-space: nowrap !important;
    word-wrap: break-word;
    transition: color 0.25s ease, padding-left 0.25s ease;
    background: rgba(51, 99, 221, 0.97);
    visibility: visible !important;
    opacity: 1 !important;
}

.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li:not(.nav-item.submenu) > a.nav-link:hover {
    color: #ffffff !important;
    padding-left: 27px !important;
}

/* Services nested submenu items (cấp 2+) */
.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li.nav-item.submenu > a.nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-direction: row !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 25px !important;
    white-space: nowrap !important;
    word-wrap: break-word;
    transition: color 0.25s ease, background 0.2s ease;
    background: transparent !important;
}

.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li.nav-item.submenu > a.nav-link:hover {
    color: #ffffff !important;
    background: rgba(51, 99, 221, 0.1) !important;
}

.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li.nav-item.submenu > a.nav-link .caret-drop {
    margin-left: 0;
    margin-right: 15px;
    transform: rotate(-45deg);
}

/* Services nested dropdown - show on hover & click */
.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: auto;
    right: calc(100% + 5px);
    width: max-content;
    max-width: 90vw;
    background: #1749C9;
    border-top: 3px solid #ffffff;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 10px 0;
    z-index: 10001;
    list-style: none;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.25s ease;
}

.services-dropdown > ul.dropdown-menu li.nav-item.submenu:hover > ul.dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.services-dropdown > ul.dropdown-menu li.nav-item.submenu.show > ul.dropdown-menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ✅ NO ROTATE on desktop - mũi tên luôn hướng phải */
.services-dropdown > ul.dropdown-menu li.nav-item.submenu.show > a.nav-link .caret-drop {
    transform: rotate(-45deg) !important;
}

/* Project items styling - special blue color */
.services-dropdown > ul.dropdown-menu li.project-item a.project-link {
    display: block !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 25px !important;
    white-space: normal !important;
    word-wrap: break-word;
    transition: color 0.25s ease, background 0.2s ease;
    background: transparent !important;
}

.services-dropdown > ul.dropdown-menu li.project-item a.project-link:hover {
    color: #ffffff !important;
    background: rgba(51, 99, 221, 0.2) !important;
}

/* Remove hover bridge for accordion items */
.services-dropdown > ul.dropdown-menu > li.accordion-item::after {
    display: none;
}

/* ========================================
   NESTED DROPDOWN SUPPORT - N-LEVELS (Blog categories, Projects, About)
   Support cấp 2, 3, 4, n... không giới hạn
   ======================================== */

/* Generic nested dropdown styling - áp dụng cho TẤT CẢ mức nested */
ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu ul.dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 5px);
    width: max-content;
    max-width: 90vw;
    background: #1749C9;
    border-top: 3px solid #ffffff;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 10px 0;
    z-index: 10001;
    list-style: none;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.25s ease;
}

/* Show nested dropdown on hover - áp dụng cho TẤT CẢ nested submenu items */
ul.menu > li.nav-item.submenu:not(.services-dropdown) li.nav-item.submenu:hover > ul.dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Style nested dropdown items - generic cho TẤT CẢ nested levels */
ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu ul.dropdown-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu ul.dropdown-menu li > a {
    display: block !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 20px !important;
    white-space: nowrap !important;
    word-wrap: break-word;
    transition: color 0.25s ease, padding-left 0.25s ease;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu ul.dropdown-menu li > a:hover {
    color: #ffffff !important;
    padding-left: 27px !important;
}

/* -- Dropdown items (ALL levels - leaf & submenu) -- */
ul.menu > li.nav-item.submenu > ul.dropdown-menu > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Dropdown item links - TẤT CẢ items (leaf items không có submenu) */
ul.menu > li.nav-item.submenu:not(.services-dropdown) > ul.dropdown-menu > li:not(.nav-item.submenu) > a.nav-link {
    display: block !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 25px !important;
    white-space: nowrap !important;
    word-wrap: break-word;
    transition: color 0.25s ease, padding-left 0.25s ease;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

ul.menu > li.nav-item.submenu:not(.services-dropdown) > ul.dropdown-menu > li:not(.nav-item.submenu) > a.nav-link:hover {
    color: #ffffff !important;
    padding-left: 32px !important;
}

/* Nested leaf items in any level - danh mục lá ở bất kỳ cấp nào */
ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu li:not(.nav-item.submenu) > a.nav-link {
    display: block !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 20px !important;
    white-space: nowrap !important;
    word-wrap: break-word;
    transition: color 0.25s ease, padding-left 0.25s ease;
    background: #1749C9 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu li:not(.nav-item.submenu) > a.nav-link:hover {
    color: #ffffff !important;
    padding-left: 27px !important;
}

/* Nested submenu item - position relative cho tất cả submenu nested levels */
ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu li.nav-item.submenu {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Add hover area bridge - only for non-services dropdowns */
ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu li.nav-item.submenu::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    pointer-events: auto;
}

/* Style nested dropdown links - cho TẤT CẢ nested submenu levels */
ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu li.nav-item.submenu > a.nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #ffffff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 11px 25px !important;
    white-space: nowrap !important;
    transition: color 0.25s ease, padding-left 0.25s ease, background 0.2s ease;
    background: transparent !important;
}

ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu li.nav-item.submenu > a.nav-link:hover {
    color: #ffffff !important;
    background: rgba(51, 99, 221, 0.1) !important;
}

ul.menu > li.nav-item.submenu:not(.services-dropdown) ul.dropdown-menu li.nav-item.submenu > a.nav-link .caret-drop {
    margin-left: 0;
    margin-right: 15px;
    transform: rotate(-45deg);
    margin: 0 15px 0 0;
    padding: 0;
}

/* ========================================
   MOBILE SHOW STATE - Nested Dropdown n-levels
   ======================================== */

/* Show nested dropdown menu on mobile when .show class is added */
ul.menu > li.nav-item.submenu:not(.services-dropdown) li.nav-item.submenu.show > ul.dropdown-menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ✅ NO ROTATE on desktop - mũi tên luôn hướng phải */
ul.menu > li.nav-item.submenu:not(.services-dropdown) li.nav-item.submenu.show > a.nav-link .caret-drop {
    transform: rotate(-45deg) !important;
}

/* -- Phone number -- */
.header-phone {
    color: #fff !important;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    line-height: 38px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    transition: color 0.3s ease;
}

.header-phone:hover {
    color: #3363DD !important;
}

/* -- Hamburger toggler -- */
.navbar-toggler {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    outline: none;
}

.menu_toggle {
    display: block;
    width: 28px;
    height: 22px;
    position: relative;
}

.hamburger {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background: #fff;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

.hamburger span:last-child {
    margin-bottom: 0;
}

.hamburger-cross {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.hamburger-cross span {
    display: block;
    width: 28px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.hamburger-cross span:first-child { transform: rotate(45deg); }
.hamburger-cross span:last-child  { transform: rotate(-45deg); }

.navbar-toggler:not(.collapsed) .hamburger      { display: none; }
.navbar-toggler:not(.collapsed) .hamburger-cross { display: block; }

/* -- Mobile Close Button -- */
.nav-close-btn {
    display: none;
}

/* ========================================
   Responsive Breakpoints - OPTIMIZED
   ======================================== */

/* Extra Small: 320px (iPhone SE) */
@media (max-width: 359px) {
    .navbar { padding: 0 clamp(8px, 2vw, 10px); }
    .navbar_logo { padding-left: clamp(10px, 2vw, 15px); }
    .navbar_logo_text { display: none; }
    ul.menu > li.nav-item > a.nav-link { font-size: clamp(0.75rem, 1.2vw, 0.875rem); }
    .search_toggle svg { width: 18px !important; height: 18px !important; }
}

/* Standard Mobile: 360px - 440px */
@media (max-width: 440px) {
    .navbar { padding: 0 clamp(10px, 2.5vw, 12px); }
    .navbar_logo { padding-left: clamp(12px, 3vw, 15px); }
    .navbar_logo_text { display: none; }
    .navbar-toggler { display: block; }
    ul.menu > li.nav-item > a.nav-link { 
        font-size: clamp(0.75rem, 1.3vw, 0.875rem);
        padding: clamp(4px, 1vw, 6px) clamp(10px, 1.5vw, 12px);
    }
    .btn_profile_download_nav { display: none !important; }
    .nav-profile-btn { display: none !important; }
}

/* Larger Mobile: 480px */
@media (max-width: 599px) {
    .navbar { padding: 0 clamp(12px, 3vw, 15px); }
    .navbar_logo_text { display: block; font-size: clamp(0.9rem, 2vw, 1rem); }
    ul.menu > li.nav-item > a.nav-link { 
        font-size: clamp(0.8rem, 1.4vw, 0.9rem);
        padding: clamp(5px, 1.2vw, 7px) clamp(10px, 2vw, 14px);
    }
    .search_toggle svg { width: 20px !important; height: 20px !important; }
}

/* Tablet Portrait: 600px - 834px */
@media (max-width: 834px) {
    .navbar { 
        padding: 0 clamp(12px, 2.5vw, 15px); 
        min-height: max(65px, clamp(60px, 10vw, 100px));
    }
    .navbar_logo_text { display: block; font-size: clamp(1rem, 2.2vw, 1.1rem); }
    .menu_absolute { padding: 6px 0; }
    .navbar-toggler { display: block; }
    .header-phone { display: none; }
    
    /* Mobile dropdown styling */
    ul.menu > li.nav-item.submenu > ul.dropdown-menu {
        position: static;
        display: block;
        max-height: 0;
        overflow: hidden !important;
        background: transparent !important;
        border: none;
        box-shadow: none;
        padding: 0;
        min-width: unset;
        width: 100%;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        transform: none !important;
        left: 0 !important;
        right: auto !important;
    }

    ul.menu > li.nav-item.submenu.show > ul.dropdown-menu {
        max-height: clamp(200px, 40vh, 2500px) !important;
    }

    ul.menu > li.nav-item.submenu > ul.dropdown-menu > li > a {
        padding: clamp(10px, 2vw, 12px) clamp(25px, 4vw, 35px) !important;
        font-size: clamp(0.8125rem, 1.3vw, 0.9375rem) !important;
        color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        text-align: left !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    ul.menu > li.nav-item.submenu > ul.dropdown-menu > li > a:hover {
        background: rgba(23, 73, 201, 0.2) !important;
    }

    /* Caret rotation for mobile */
    ul.menu > li.nav-item.submenu .caret-drop {
        transform: rotate(45deg) !important;
        margin-left: auto;
        margin-right: 0;
    }

    ul.menu > li.nav-item.submenu.show .caret-drop {
        transform: rotate(-135deg) !important;
    }
}

/* Tablet Landscape / Small Laptop: 834px - 1023px */
@media (max-width: 1023px) {
    .navbar { padding: 0 clamp(12px, 2vw, 15px); }
    ul.menu > li.nav-item > a.nav-link { 
        font-size: clamp(0.875rem, 1.3vw, 0.95rem);
        padding: clamp(5px, 1vw, 7px) clamp(10px, 1.5vw, 14px);
    }
    .search_toggle svg { width: 22px !important; height: 22px !important; }
}

/* Laptop Small: 1024px - 1280px */
@media (min-width: 1024px) and (max-width: 1280px) {
    .navbar { padding: 0 clamp(15px, 2vw, 20px); }
    ul.menu > li.nav-item > a.nav-link { 
        font-size: clamp(0.9rem, 1.2vw, 1rem);
        padding: clamp(5px, 1vw, 6px) clamp(12px, 1.5vw, 15px);
    }
}

/* Desktop: 1281px+ */
@media (min-width: 1281px) {
    .navbar { padding: 0 20px; }
    ul.menu > li.nav-item > a.nav-link { 
        font-size: 1rem;
        padding: 5px 15px;
    }
    .navbar_logo_text { font-size: 1.25rem; }
}

/* ========================================
   Responsive Mobile Menu
   ======================================== */

@media (max-width: 1199px) {
    .navbar { padding: 0 15px; }

    .header_top_five { display: none; }

    .menu_absolute { 
        top: 0 !important;
        width: 100%;
    }

    .navbar-toggler { display: block; }

    .header-phone { display: none; }

    .navbar_brand_text { display: none; }

    .navbar-collapse {
        position: fixed;
        top: clamp(60px, 12vw, 110px);
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - clamp(60px, 12vw, 110px));
        background: #1749c9;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9998;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }

    .navbar-collapse.show { 
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Close Button */
    .nav-close-btn {
        display: flex;
        align-items: center;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: #fff;
        padding: clamp(14px, 2vw, 18px) clamp(15px, 3vw, 20px);
        cursor: pointer;
        transition: color 0.25s ease;
        outline: none;
        margin-bottom: 0;
        height: clamp(70px, 10vw, 110px);
        justify-content: flex-start;
    }

    .nav-close-btn:hover,
    .nav-close-btn:active {
        color: #1749c9;
    }

    .nav-close-arrow {
        font-size: clamp(18px, 3vw, 22px);
        line-height: 1;
        display: inline-block;
        transition: transform 0.25s ease, color 0.25s ease;
        color: #fff;
    }

    .nav-close-btn:hover .nav-close-arrow,
    .nav-close-btn:active .nav-close-arrow {
        transform: translateX(-5px);
        color: #1749c9;
    }

    .nav-close-text {
        display: none;
    }

    /* Menu list mobile */
    ul.menu {
        flex-direction: column;
        width: 100%;
        padding: 0 0 clamp(15px, 2vw, 20px);
        gap: 0;
    }

    ul.menu > li.nav-item {
        width: 100%;
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    ul.menu > li.nav-item:last-child,
    ul.menu > li.nav-item.nav-search-btn,
    ul.menu > li.nav-item.nav-profile-btn,
    ul.menu > li.nav-item.nav-lang-item {
        border-bottom: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .search_toggle {
        padding: clamp(10px, 2vw, 12px) clamp(15px, 3vw, 20px) !important;
    }

    .search_toggle svg {
        width: clamp(20px, 3vw, 24px) !important;
        height: clamp(20px, 3vw, 24px) !important;
    }

    .btn_profile_download_nav {
        font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
        padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 16px) !important;
    }

    .btn_profile_download_nav svg {
        width: clamp(16px, 2.5vw, 20px) !important;
        height: clamp(16px, 2.5vw, 20px) !important;
    }

    ul.menu > li.nav-item > a.nav-link {
        padding: clamp(12px, 2vw, 14px) clamp(18px, 3vw, 20px);
        line-height: clamp(1.2, 2vw, 1.5);
        justify-content: space-between;
    }

    /* Mobile nested dropdowns */
    ul.menu > li.nav-item.submenu:not(.services-dropdown) li.nav-item.submenu > a.nav-link {
        padding: clamp(10px, 2vw, 12px) clamp(30px, 5vw, 35px) !important;
        text-align: left !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    ul.menu > li.nav-item.submenu:not(.services-dropdown) li.nav-item.submenu.show > a.nav-link .caret-drop {
        transform: rotate(-135deg);
    }

    /* ========================================
       KIRO FIX: MOBILE RESPONSIVE CHO SERVICES DROPDOWN & MENU CON
       Fix specificity issues và dropdown overflow
       ======================================== */

    /* 1. Nới lỏng max-height cho menu cha để không cắt đứt menu con */
    ul.menu > li.nav-item.submenu.show > ul.dropdown-menu {
        max-height: 2500px !important;
    }

    /* 2. Reset flex-direction để nội dung không bị lộn ngược (text bên trái, icon bên phải) */
    .services-dropdown > ul.dropdown-menu > li.nav-item.submenu > a.nav-link,
    .services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li.nav-item.submenu > a.nav-link {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    /* 3. Reset hướng mũi tên (caret) cho đúng chiều */
    .services-dropdown > ul.dropdown-menu li.nav-item.submenu > a.nav-link .caret-drop {
        margin-left: 8px !important;
        margin-right: 0 !important;
        transform: rotate(45deg) !important;
        transition: transform 0.3s ease !important;
    }

    .services-dropdown > ul.dropdown-menu li.nav-item.submenu.show > a.nav-link .caret-drop {
        transform: rotate(-135deg) !important;
    }

    /* 4. Fix triệt để lỗi menu con tràn ra ngoài màn hình và tạo style Accordion mượt mà */
    .services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: 0;
        overflow: hidden !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 5. Cho phép menu con bung ra khi có class .show */
    .services-dropdown > ul.dropdown-menu li.nav-item.submenu.show > ul.dropdown-menu {
        max-height: 1500px !important;
    }

    /* 6. Thụt lề (padding) phân cấp cho các menu con */
    .services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li > a.nav-link {
        padding: 10px 20px !important;
        font-size: 13px !important;
        color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        text-align: left !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    .services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li > a.nav-link:hover {
        padding: 10px 20px !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }
}

@media (max-width: 576px) {
    .navbar { padding: 0 10px; }
    .navbar-brand img { height: 45px; }
    .logo-text { font-size: 22px; }
    .navbar-collapse { width: 100%; max-height: calc(100vh - 70px); }
    .menu_absolute { padding: 12px 0; }
}

/* Mobile: nested dropdown support (for dropdown-menu inside dropdown-menu) */
@media (max-width: 1199px) {
    /* Nested dropdowns (cấp 2, 3, n...) - full-width in mobile */
    ul.menu > li.nav-item.submenu > ul.dropdown-menu > li.nav-item.submenu > ul.dropdown-menu {
        position: static !important;
        display: none;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        max-width: none;
        background: transparent !important;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none !important;
        max-height: 0;
        overflow: hidden !important;
        transition: max-height 0.35s ease;
    }
    
    ul.menu > li.nav-item.submenu > ul.dropdown-menu > li.nav-item.submenu.show > ul.dropdown-menu {
        display: block;
        max-height: 500px;
    }

    ul.menu > li.nav-item.submenu > ul.dropdown-menu > li.nav-item.submenu > a.nav-link {
        padding: 12px 35px !important;
        text-align: left !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    ul.menu > li.nav-item.submenu > ul.dropdown-menu > li.nav-item.submenu.show > a.nav-link .caret-drop {
        transform: rotate(-135deg);
    }

    /* Nested items in mobile */
    ul.menu > li.nav-item.submenu > ul.dropdown-menu > li.nav-item.submenu > ul.dropdown-menu > li > a {
        padding: 10px 20px !important;
        font-size: 13px !important;
        color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        text-align: left !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    ul.menu > li.nav-item.submenu > ul.dropdown-menu > li.nav-item.submenu > ul.dropdown-menu > li > a:hover {
        padding: 10px 20px !important;
        background: rgba(23, 73, 201, 0.2) !important;
    }
}

/* -- Search Icon Button -- */
.nav-search-btn {
    padding: 0 8px !important;
}

.search_toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    color: #fff;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
    outline: none;
}

.search_toggle:hover {
    color: #1749c9;
}

/* -- Language Switcher in Navbar -- */
.nav-lang-item {
    margin-left: auto;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.nav_lang {
    display: flex;
    align-items: center;
}

/* -- Search Overlay -- */
.search_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.search_overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.search_overlay_box {
    background: #1749c9;
    width: 100%;
    max-width: 560px;
    padding: 36px 40px 40px;
    position: relative;
    border-radius: 2px;
    transform: scale(0.85) translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
}

.search_overlay.active .search_overlay_box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.search_overlay_close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color 0.25s ease;
    outline: none;
}

.search_overlay_close:hover {
    color: #1749c9;
}

.search_overlay_label {
    color: #1749c9;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
}

.search_overlay_inner {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 8px;
}

.search_overlay_input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: 16px;
    font-style: normal;
    padding: 6px 0;
}

.search_overlay_input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.search_overlay_submit {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.25s ease;
    outline: none;
}

.search_overlay_submit:hover {
    color: #3363DD;
}

/* ========================================
   Mega Menu System - MTech Custom
   ======================================== */

/* Kích hoạt trạng thái Mega Menu */
.nav-item.has-megamenu {
    position: static !important;
}

.megamenu-panel {
.megapanel {
    display: block;
    position: absolute;
    top: calc(100% + 15px);
    left: 0;
    right: 0;
    width: auto;
    max-width: 1200px;
    background: rgba(13, 27, 62, 0.98);
    backdrop-filter: blur(10px);
    border-top: 3px solid #3363DD;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.45);
    padding: 40px 0;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin: 0 45px;
}
}

.nav-item.has-megamenu:hover .megamenu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.megamenu-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 45px;
}

.megamenu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
}

.megamenu-services-only {
    grid-template-columns: 1fr;
    gap: 0;
}

.megamenu-services-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 42px;
    row-gap: 0;
}

.megamenu-list.megamenu-services-list > li {
    margin-bottom: 0;
    padding: 18px 0;
}

.megamenu-list.megamenu-services-list > li:nth-child(-n + 4) {
    padding-top: 0;
}

.megamenu-list.megamenu-services-list > li:nth-child(n + 5) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Cột trong Mega Menu */
.megamenu-col {
    display: flex;
    flex-direction: column;
}

.megamenu-title {
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 750;
    color: #3363DD;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.megamenu-title a {
    color: inherit;
    text-decoration: none;
}

.megamenu-title a:hover {
    color: #fff;
}

/* Danh sách link trong Mega Menu */
.megamenu-list, .megamenu-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.megamenu-list > li {
    margin-bottom: 12px;
}

.megamenu-list > li > a {
    color: #FFFFFF;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-block;
}

.megamenu-list > li > a:hover {
    color: #3363DD;
    transform: translateX(5px);
}

/* Hỗ trợ danh mục con (Sub-list) */
.megamenu-item-has-children > a {
    font-weight: 700 !important;
    margin-bottom: 8px;
}

.megamenu-sub-list {
    padding-left: 15px;
    margin-top: 5px;
    border-left: 1px solid rgba(26, 63, 191, 0.3);
}

.megamenu-sub-list li {
    margin-bottom: 8px;
}

.megamenu-sub-list li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.megamenu-sub-list li a:hover {
    color: #3363DD;
}

/* Spotlight Card */
.megamenu-spotlight {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s ease;
}

.megamenu-spotlight:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.spotlight-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.spotlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.megamenu-spotlight:hover .spotlight-image img {
    transform: scale(1.1);
}

.spotlight-content {
    padding: 20px;
}

.spotlight-content h5 {
    color: #FFFFFF;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.spotlight-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.spotlight-link {
    color: #3363DD;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.spotlight-link:hover {
    color: #FFFFFF;
}

/* ========================================
   Blog Categories Mega Menu - Dropdown hierarchical
   ======================================== */

/* Blog Categories Toggle Button - Dấu + xoay */
.category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0;
}

.category-toggle .toggle-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Default rotate 0° (pointing right) */
.category-toggle .toggle-icon {
    transform: rotate(0deg);
}

/* Rotate khi open (180° pointing down) */
.category-toggle.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* Blog Categories Container */
.blog-categories-submenu,
.blog-categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-categories-list li {
    margin: 0;
    padding: 0;
}

/* Category Link Styling */
.blog-categories-list a {
    display: block;
    color: #FFFFFF;
    font-family: "Noto Sans", "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 11px 25px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.blog-categories-list a:hover {
    color: #3363DD;
    padding-left: 32px;
}

/* Submenu styling */
.blog-categories-submenu {
    display: none;
    max-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(26, 63, 191, 0.4);
    transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.45s ease;
}

.blog-categories-submenu.show {
    display: block;
    max-height: 500px;
}

.blog-categories-submenu li a {
    padding-left: 40px;
    font-size: 13px;
    font-weight: 400;
}

.blog-categories-submenu li a:hover {
    padding-left: 47px;
}

/* Level 3 submenu */
.blog-categories-submenu .blog-categories-submenu {
    border-left: 2px solid rgba(26, 63, 191, 0.2);
}

.blog-categories-submenu .blog-categories-submenu li a {
    padding-left: 55px;
}

.blog-categories-submenu .blog-categories-submenu li a:hover {
    padding-left: 62px;
}

/* Level 4 submenu */
.blog-categories-submenu .blog-categories-submenu .blog-categories-submenu li a {
    padding-left: 70px;
}

.blog-categories-submenu .blog-categories-submenu .blog-categories-submenu li a:hover {
    padding-left: 77px;
}

/* Responsive cho Mega Menu */
@media (max-width: 1199px) {
    .nav-item.has-megamenu {
        position: relative !important;
    }
    
    .megamenu-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        display: none; /* Sẽ được điều khiển bằng class .show trên mobile */
        transform: none;
        padding: 20px;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
    }
    
    .nav-item.has-megamenu.show .megamenu-panel {
        display: block;
    }
    
    .megamenu-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .megamenu-services-list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .megamenu-list.megamenu-services-list > li {
        padding: 14px 0;
    }

    .megamenu-list.megamenu-services-list > li:nth-child(-n + 4) {
        padding-top: 14px;
    }

    .megamenu-list.megamenu-services-list > li:first-child {
        padding-top: 0;
    }

    .megamenu-list.megamenu-services-list > li:nth-child(n + 2) {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    
    .spotlight-col {
        display: none; /* Ẩn spotlight trên mobile để tiết kiệm không gian */
    }
}

/* ========================================
   KIRO FIX: DESKTOP DROPDOWN & ARROW POSITION
   Fix lỗi mũi tên bị lộn ngược và menu bung sang trái
   ======================================== */

/* 1. Trả lại thứ tự text và mũi tên (từ trái sang phải) */
.services-dropdown > ul.dropdown-menu > li.nav-item.submenu > a.nav-link,
.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li.nav-item.submenu > a.nav-link {
    flex-direction: row !important;
}

/* 2. Đẩy mũi tên về bên phải - NO ROTATE, mũi tên luôn hướng phải */
.services-dropdown > ul.dropdown-menu > li.nav-item.submenu > a.nav-link .caret-drop,
.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu > li.nav-item.submenu > a.nav-link .caret-drop {
    margin-left: auto !important;
    margin-right: 0 !important;
    transform: rotate(-45deg) !important;
}

/* 3. Ép menu con (cấp 2, 3...) hiển thị ở bên PHẢI của menu cha */
.services-dropdown > ul.dropdown-menu li.nav-item.submenu ul.dropdown-menu {
    left: calc(100% + 5px) !important;
    right: auto !important;
    transform: translateX(-10px) !important; /* Đảo ngược hiệu ứng animation */
}

/* Hiệu ứng trượt ra mượt mà */
.services-dropdown > ul.dropdown-menu li.nav-item.submenu:hover > ul.dropdown-menu,
.services-dropdown > ul.dropdown-menu li.nav-item.submenu.show > ul.dropdown-menu {
    transform: translateX(0) !important;
}