.elementor-kit-13{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-81debdf:#173796;--e-global-color-bb1ce24:#E1F5FF;--e-global-color-1a6819a:#F3821D;--e-global-color-6ca755a:#5B0C3B;--e-global-color-8d339a5:#FAFAFA;--e-global-color-65fa203:#1E4F8B;--e-global-color-78d4a32:#FAFAFA;--e-global-color-4c23267:#FAFAFA;--e-global-color-6705679:#28282F;--e-global-color-e16f2e5:#FFFFFF;--e-global-color-2ba61d5:#F3F3F5;--e-global-color-5aab38b:#71717A;--e-global-color-e04b226:#E4E4E7;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-8d0d07a-font-family:"Instrument Sans";--e-global-typography-8d0d07a-font-weight:600;--e-global-typography-10b2bf3-font-family:"Arial";--e-global-typography-10b2bf3-font-weight:700;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */.sub-menu {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    margin-top: 9px !important;
    border: 1px solid var(--color-border) !important;
    min-width: calc(0.25rem * 64) !important;
}

.mega-menu-wrap, .mega-menu-toggle {
    background-color: transparent !important;
}

.mega-toggle-on a, .mega-current-menu-item a, .mega-menu-wrap a:hover, .mega-menu-wrap a:focus {
    background-color: transparent !important;
}

.mega-menu > li > .mega-sub-menu:first-of-type {
    border-bottom-left-radius: var(--radius-lg) !important;
    border-bottom-right-radius: var(--radius-lg) !important;
    margin-top: 4px !important;
    border: 1px solid var(--color-border) !important;
    min-width: calc(0.25rem * 64) !important;
    background: var(--color-card) !important;
}

.menu-item {
    list-style: none;
}

.mega-menu-item > a {
    padding: 0px 15px !important;
}

.mega-menu .menu-item a, .mega-menu .mega-sub-menu a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.25rem;
    color: var(--color-brand) !important;
    background-color: transparent !important;
    text-decoration: none;
    border-radius: 0;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
    text-transform: none !important;
}

.menu {
    padding-left: 0;
}

.mega-indicator {
    display: none !important;
}

li.mega-menu-item {
    padding: 0 !important;
}

.mega-menu .menu-item a:hover, .mega-menu .mega-sub-menu a:hover  {
    background-color: color-mix(in oklch, var(--color-brand) 5%, transparent) !important;
    color: var(--color-brand) !important;
}

.mega-menu-column {
    --span: 12 !important;
}

/* ===========================================================
   STATE REQUIREMENTS MEGA — (#mega-menu-item-41)
   Layout: 1 column (states grid) + floating professions panel
   Panel float absolute bên cạnh state item đang hover (giống React)
   JS handle: positioning + title update + show/hide
   =========================================================== */

/* --- Mega panel: 1 column, relative positioning context --- */
#mega-menu-item-41 > .mega-sub-menu:first-of-type {
    min-width: min(960px, 95vw) !important;
    position: relative;
    overflow: visible !important;
}

/* --- States grid (5 cột) --- */
#mega-menu-item-41 .menu-menu-states-container .menu {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px 4px;
    padding: 0.5rem;
    list-style: none;
    margin: 0;
}

@media (max-width: 1200px) {
    #mega-menu-item-41 .menu-menu-states-container .menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    #mega-menu-item-41 .menu-menu-states-container .menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    #mega-menu-item-41 .menu-menu-states-container .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#mega-menu-item-41 .menu-menu-states-container .menu .menu-item a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--color-brand) !important;
    background-color: transparent !important;
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s ease;
}

#mega-menu-item-41 .menu-menu-states-container .menu .menu-item a:hover {
    background-color: color-mix(in oklch, var(--color-brand) 10%, transparent) !important;
}

#mega-menu-item-41 .menu-menu-states-container .menu .menu-item a::after {
    content: '›';
    font-size: 0.75rem;
    opacity: 0.4;
    margin-left: auto;
}

#mega-menu-item-41 .menu-menu-states-container .menu .menu-item a:hover::after {
    opacity: 1;
}

/* Ẩn professions widget gốc (JS clone vào floating panel) */
#mega-menu-item-41 > .mega-sub-menu .menu-menu-professions-container {
    display: none !important;
}
#mega-menu-item-40 > .mega-sub-menu .menu-menu-states-container {
    display: none !important;
}
/* ===========================================================
   FLOATING SUB-PANELS — shared styles cho cả 2 menus
   JS tạo panel + clone .menu UL từ Nav Menu widget
   .state-professions-panel = hover state → show professions
   .prof-states-panel = hover profession → show states
   =========================================================== */
.state-professions-panel,
.prof-states-panel {
    position: absolute;
    z-index: 99999;
    background: var(--color-card, #ffffff);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    border: 1px solid rgb(0 0 0 / 0.10);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
}

.state-professions-panel.is-visible,
.prof-states-panel.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Title header (state name / profession name) */
.state-professions-panel .state-title,
.prof-states-panel .prof-title {
    padding: 0.25rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted-foreground, #71717a);
}

/* --- State → Professions panel: vertical list, narrow --- */
.state-professions-panel {
    min-width: 14rem;
}

.state-professions-panel .menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.state-professions-panel .menu .menu-item a {
    display: block !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    color: var(--color-brand, #5b0c3b) !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.state-professions-panel .menu .menu-item a:hover {
    background-color: color-mix(in oklch, var(--color-brand) 5%, transparent) !important;
}

/* ===========================================================
   PROFESSIONS MEGA — (#mega-menu-item-40)
   1 column professions + floating states panel (tương tự State Req)
   JS lấy menu-states từ col 2 → tạo floating panel → position bên cạnh item
   =========================================================== */

/* --- Professions list --- */
.menu-menu-professions-container .menu {
    padding: 0.25rem 0;
    list-style: none;
    margin: 0;
}

.menu-menu-professions-container .menu .menu-item a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    color: var(--color-brand) !important;
    background-color: transparent !important;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.menu-menu-professions-container .menu .menu-item a:hover {
    background-color: color-mix(in oklch, var(--color-brand) 5%, transparent) !important;
}

.menu-menu-professions-container .menu .menu-item a::after {
    content: '›';
    font-size: 0.75rem;
    opacity: 0.5;
    margin-left: auto;
    transition: opacity .15s;
}

.menu-menu-professions-container .menu .menu-item a:hover::after {
    opacity: 1;
}

/* Ẩn col 2 (chứa menu-states) — JS sẽ lấy content ra floating panel */
#mega-menu-item-40 .mega-menu-column:nth-child(2) {
    display: none !important;
}

/* --- Floating states panel (JS tạo + append vào megaItem) --- */
.prof-states-panel {
    position: absolute;
    z-index: 99999;
    background: var(--color-card, #ffffff);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    border: 1px solid rgb(0 0 0 / 0.10);
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-width: min(480px, 90vw);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
}

.prof-states-panel.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.prof-states-panel .prof-title {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted-foreground, #71717a);
    margin-bottom: 0.25rem;
}

/* States grid bên trong floating panel — 3-4 cột */
.prof-states-panel .menu {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 768px) {
    .prof-states-panel .menu { grid-template-columns: repeat(2, 1fr); }
}

.prof-states-panel .menu .menu-item a {
    display: block !important;
    padding: 0.375rem 0.625rem !important;
    font-size: 0.8125rem !important;
    color: var(--color-brand) !important;
    background-color: transparent !important;
    border-radius: 0.25rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease;
}

.prof-states-panel .menu .menu-item a:hover {
    background-color: color-mix(in oklch, var(--color-brand) 10%, transparent) !important;
}

/* ===========================================================
   COURSES LIST — "Courses" mega menu (#mega-menu-item-42)
   3 items là sub-items trực tiếp của MMM (KHÔNG phải Nav Menu widget)
   DOM: .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link
   =========================================================== */
#mega-menu-item-42 .mega-menu-column > .mega-sub-menu {
    padding: 0.25rem 0;
    list-style: none;
    margin: 0;
}

#mega-menu-item-42 .mega-menu-column > .mega-sub-menu > .mega-menu-item > .mega-menu-link {
    display: flex !important;
    align-items: center;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--color-brand) !important;
    background-color: transparent !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

#mega-menu-item-42 .mega-menu-column > .mega-sub-menu > .mega-menu-item > .mega-menu-link:hover {
    background-color: color-mix(in oklch, var(--color-brand) 5%, transparent) !important;
}

/*.mega-menu[role="dialog"],*/
/*.mega-menu[role="dialog"] ul,*/
/*.mega-menu[role="dialog"] .mega-menu > li > .mega-sub-menu:first-of-type {*/
/*    background-color: var(--color-navy) !important;*/
/*    border: 0 !important;*/
/*}*/

/*.mega-menu[role="dialog"] .menu .menu-item a {*/
/*    color: var(--color-navy-foreground) !important;*/
/*}*//* End custom CSS */