/* ==========================================================
   HNSCHOOL / TranCuong2026 - Unified Mobile Navigation 2026
   Scope: MOBILE ONLY (<= 860px). Desktop menu is untouched.
   Lightweight off-canvas + accordion, no external dependency.
   ========================================================== */

/* Mobile theme tokens. */
body{
  --mm-bg:#0f2742;
  --mm-bg-2:#173b61;
  --mm-card:rgba(255,255,255,.075);
  --mm-card-active:rgba(255,255,255,.14);
  --mm-border:rgba(255,255,255,.14);
  --mm-text:#f7fbff;
  --mm-muted:#cbd9e7;
  --mm-accent:#5db7ff;
  --mm-accent-2:#d8efff;
  --mm-shadow:0 22px 60px rgba(5,18,35,.34);
}
body.home-layout-news{--mm-bg:#083d73;--mm-bg-2:#0a5aa4;--mm-accent:#8ed1ff;--mm-accent-2:#e8f7ff}
body.home-layout-education{--mm-bg:#123f57;--mm-bg-2:#176a76;--mm-accent:#8be0cf;--mm-accent-2:#e7fff9}
body.home-layout-modern{--mm-bg:#113b4a;--mm-bg-2:#176071;--mm-accent:#83ded6;--mm-accent-2:#ebfffd}
body.home-layout-transport,body.layout-transport,body.transport-layout{--mm-bg:#102e4b;--mm-bg-2:#174c70;--mm-accent:#73c8d7;--mm-accent-2:#ebfbff}
body.home-layout-fengshui,body.fengshui-theme-active{--mm-bg:#5d1222;--mm-bg-2:#8a2231;--mm-accent:#f1c75b;--mm-accent-2:#fff4ca}
body.home-layout-mechanical,body.mechanical-theme-active{--mm-bg:#283845;--mm-bg-2:#455763;--mm-accent:#e5b36c;--mm-accent-2:#fff2df}

.mobile-menu-overlay,
.mobile-menu-panel-head,
.mobile-submenu-toggle{display:none}

@media (max-width:860px){
  html.mobile-menu-lock,
  body.mobile-menu-lock{overflow:hidden!important;overscroll-behavior:none!important}

  /* Main nav keeps only a compact trigger on mobile. */
  #mainNavigation.main-menu-wrap{
    position:relative!important;
    top:auto!important;
    z-index:10002!important;
    min-height:54px!important;
    padding:6px 0!important;
    background:linear-gradient(110deg,var(--mm-bg),var(--mm-bg-2))!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 6px 18px rgba(7,24,43,.11)!important;
  }
  #mainNavigation .main-menu-shell,
  #mainNavigation>.site-shell.main-menu-shell{
    width:100%!important;
    max-width:1280px!important;
    min-height:42px!important;
    margin:0 auto!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
  }

  #mainNavigation .mobile-menu-toggle{
    position:relative!important;
    z-index:10004!important;
    display:inline-flex!important;
    width:auto!important;
    min-width:112px!important;
    height:42px!important;
    margin:0!important;
    padding:0 13px!important;
    flex:0 0 auto!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.10)!important;
    color:var(--mm-text)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
    font-family:"Segoe UI Variable","Segoe UI",Arial,Helvetica,sans-serif!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;
    letter-spacing:.35px!important;
    text-transform:none!important;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  #mainNavigation .mobile-menu-toggle::after{
    content:"Menu"!important;
    display:inline-block!important;
    margin-left:6px!important;
    color:inherit!important;
    font:inherit!important;
  }
  html[lang="vi"] #mainNavigation .mobile-menu-toggle::after{content:"Menu"!important}
  #mainNavigation .mobile-menu-toggle:active{transform:scale(.98)}
  #mainNavigation .mobile-menu-toggle-bar{
    display:block!important;
    width:18px!important;
    height:2px!important;
    margin:0!important;
    border-radius:99px!important;
    background:var(--mm-accent-2)!important;
    transform-origin:center!important;
    transition:transform .2s ease,opacity .16s ease!important;
  }
  #mainNavigation.menu-open .mobile-menu-toggle{
    position:fixed!important;
    top:14px!important;
    right:14px!important;
    min-width:46px!important;
    width:46px!important;
    padding:0!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.14)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #mainNavigation.menu-open .mobile-menu-toggle::after{display:none!important}
  #mainNavigation.menu-open .mobile-menu-toggle-bar:nth-child(1){transform:translate(5px,0) rotate(45deg)!important}
  #mainNavigation.menu-open .mobile-menu-toggle-bar:nth-child(2){opacity:0!important;width:0!important}
  #mainNavigation.menu-open .mobile-menu-toggle-bar:nth-child(3){transform:translate(-5px,0) rotate(-45deg)!important}

  .mobile-menu-overlay{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:10001!important;
    background:rgba(3,13,24,.54)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .22s ease,visibility .22s ease!important;
    -webkit-tap-highlight-color:transparent;
  }
  body.mobile-menu-lock .mobile-menu-overlay{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Off-canvas panel. Always exists but is inert when closed. */
  #mainNavigation .primary-menu-host{
    display:block!important;
    position:fixed!important;
    z-index:10003!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(90vw,390px)!important;
    max-width:390px!important;
    height:100vh!important;
    height:100dvh!important;
    margin:0!important;
    padding:0 12px 24px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    border:0!important;
    border-radius:0!important;
    background:linear-gradient(155deg,var(--mm-bg) 0%,var(--mm-bg-2) 100%)!important;
    box-shadow:var(--mm-shadow)!important;
    transform:translate3d(103%,0,0)!important;
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .25s cubic-bezier(.22,.8,.24,1),visibility 0s linear .25s!important;
    contain:layout paint;
  }
  #mainNavigation.menu-open .primary-menu-host{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .25s cubic-bezier(.22,.8,.24,1),visibility 0s!important;
  }

  .mobile-menu-panel-head{
    position:sticky!important;
    top:0!important;
    z-index:3!important;
    min-height:70px!important;
    margin:0 -12px 8px!important;
    padding:16px 68px 12px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:2px!important;
    background:linear-gradient(180deg,var(--mm-bg) 72%,rgba(0,0,0,0))!important;
    color:var(--mm-text)!important;
  }
  .mobile-menu-panel-title{
    font-family:"Segoe UI Variable","Segoe UI",Arial,Helvetica,sans-serif!important;
    font-size:17px!important;
    font-weight:700!important;
    line-height:1.25!important;
    letter-spacing:.1px!important;
    color:var(--mm-text)!important;
  }
  .mobile-menu-panel-note{
    font-family:"Segoe UI Variable","Segoe UI",Arial,Helvetica,sans-serif!important;
    font-size:11.5px!important;
    font-weight:500!important;
    color:var(--mm-muted)!important;
  }

  #mainNavigation .primary-menu-host>.menu-root,
  #mainNavigation .primary-menu-host>.sf-menu,
  #mainNavigation .primary-menu-host>ul{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:5px!important;
    margin:0!important;
    padding:0 0 10px!important;
    list-style:none!important;
    background:transparent!important;
  }
  #mainNavigation .menu-root li,
  #mainNavigation .sf-menu li{
    position:relative!important;
    display:block!important;
    float:none!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }

  /* Top-level card. */
  #mainNavigation .menu-root>li>a,
  #mainNavigation .sf-menu>li>a,
  #mainNavigation .menu-home-link{
    position:relative!important;
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    margin:0!important;
    padding:10px 48px 10px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    border:1px solid var(--mm-border)!important;
    border-radius:12px!important;
    background:var(--mm-card)!important;
    color:var(--mm-text)!important;
    box-shadow:none!important;
    font-family:"Segoe UI Variable","Segoe UI",Arial,Helvetica,sans-serif!important;
    font-size:13.5px!important;
    font-weight:700!important;
    font-synthesis:none!important;
    line-height:1.3!important;
    letter-spacing:.05px!important;
    text-transform:none!important;
    text-decoration:none!important;
    -webkit-tap-highlight-color:transparent;
    transition:background .14s ease,border-color .14s ease,transform .12s ease!important;
  }
  #mainNavigation .menu-root>li>a:active,
  #mainNavigation .sf-menu>li>a:active{transform:scale(.995);background:var(--mm-card-active)!important}
  #mainNavigation .menu-link-inner{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
  }
  #mainNavigation .menu-label{
    min-width:0!important;
    color:inherit!important;
    font:inherit!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  #mainNavigation .menu-icon-badge{
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:9px!important;
    background:rgba(255,255,255,.08)!important;
    color:var(--mm-accent)!important;
  }
  #mainNavigation .menu-icon-badge i{font-size:12px!important;color:inherit!important}
  #mainNavigation a>.menu-arrow{display:none!important}

  /* Separate accordion control keeps parent links clickable. */
  #mainNavigation .mobile-submenu-toggle{
    position:absolute!important;
    top:6px!important;
    right:6px!important;
    z-index:2!important;
    width:36px!important;
    height:36px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.08)!important;
    color:var(--mm-accent-2)!important;
    box-shadow:none!important;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  #mainNavigation .mobile-submenu-toggle::before{
    content:"";
    width:7px;
    height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .18s ease;
  }
  #mainNavigation li.open>.mobile-submenu-toggle{
    background:rgba(255,255,255,.15)!important;
    color:var(--mm-accent)!important;
  }
  #mainNavigation li.open>.mobile-submenu-toggle::before{transform:translateY(2px) rotate(225deg)}

  /* Accordion levels. */
  #mainNavigation .menu-sub,
  #mainNavigation .menu-root li ul,
  #mainNavigation .sf-menu li ul{
    position:static!important;
    inset:auto!important;
    display:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    margin:5px 0 4px!important;
    padding:4px 0 3px 12px!important;
    overflow:visible!important;
    border:0!important;
    border-left:1px solid rgba(255,255,255,.16)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  #mainNavigation li.open>ul.menu-sub,
  #mainNavigation li.open>ul{display:block!important}

  #mainNavigation .menu-sub li>a,
  #mainNavigation .sf-menu li ul li>a{
    position:relative!important;
    width:100%!important;
    min-height:42px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 45px 8px 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    border:0!important;
    border-radius:10px!important;
    background:transparent!important;
    color:var(--mm-muted)!important;
    box-shadow:none!important;
    font-family:"Segoe UI Variable","Segoe UI",Arial,Helvetica,sans-serif!important;
    font-size:13px!important;
    font-weight:500!important;
    font-synthesis:none!important;
    line-height:1.35!important;
    letter-spacing:0!important;
    text-transform:none!important;
    text-decoration:none!important;
  }
  #mainNavigation .menu-sub li>a:active{background:rgba(255,255,255,.08)!important;color:var(--mm-text)!important}
  #mainNavigation .menu-sub .menu-icon-badge{
    width:26px!important;min-width:26px!important;height:26px!important;flex-basis:26px!important;border-radius:8px!important
  }
  #mainNavigation .menu-sub .menu-icon-badge i{font-size:10.5px!important}
  #mainNavigation .menu-sub .mobile-submenu-toggle{top:3px!important;right:4px!important;width:34px!important;height:34px!important}

  /* Deep levels stay compact, readable and visibly nested. */
  #mainNavigation .menu-sub .menu-sub{margin-left:0!important;padding-left:10px!important}
  #mainNavigation .menu-sub .menu-sub li>a{font-size:12.5px!important;color:rgba(235,244,252,.88)!important}

  /* Reduce motion for users who request it. */
  @media (prefers-reduced-motion:reduce){
    #mainNavigation .primary-menu-host,
    .mobile-menu-overlay,
    #mainNavigation .mobile-menu-toggle-bar,
    #mainNavigation .mobile-submenu-toggle::before{transition:none!important}
  }
}

@media (max-width:420px){
  #mainNavigation .primary-menu-host{width:94vw!important}
  #mainNavigation .main-menu-shell,#mainNavigation>.site-shell.main-menu-shell{padding-left:10px!important;padding-right:10px!important}
  #mainNavigation .mobile-menu-toggle{height:40px!important;min-width:106px!important}
  #mainNavigation.menu-open .mobile-menu-toggle{width:42px!important;min-width:42px!important;height:42px!important;top:12px!important;right:12px!important}
}

/* ==========================================================
   2026-08-17 MOBILE NAV CONTRAST + HOME BUTTON REFINEMENT
   Desktop remains untouched. This block intentionally loads last.
   ========================================================== */
.mobile-home-button{display:none}
@media (max-width:860px){
  body{
    --mm-card:rgba(255,255,255,.13);
    --mm-card-active:rgba(255,255,255,.21);
    --mm-border:rgba(255,255,255,.28);
    --mm-text:#ffffff;
    --mm-muted:#eef6ff;
  }

  #mainNavigation.main-menu-wrap{
    border-top-color:rgba(255,255,255,.16)!important;
    border-bottom-color:rgba(255,255,255,.24)!important;
    box-shadow:0 7px 20px rgba(3,14,27,.22)!important;
  }
  #mainNavigation .main-menu-shell,
  #mainNavigation>.site-shell.main-menu-shell{
    justify-content:space-between!important;
  }

  #mainNavigation .mobile-home-button{
    display:inline-flex!important;
    min-width:0!important;
    height:44px!important;
    padding:0 16px 0 11px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    border:1px solid rgba(255,255,255,.40)!important;
    border-radius:12px!important;
    background:#ffffff!important;
    color:var(--mm-bg)!important;
    box-shadow:0 4px 14px rgba(2,15,28,.22),inset 0 1px 0 rgba(255,255,255,.8)!important;
    text-decoration:none!important;
    font-family:"Segoe UI Variable","Segoe UI",Arial,Helvetica,sans-serif!important;
    font-size:13px!important;
    font-weight:800!important;
    font-synthesis:none!important;
    line-height:1!important;
    letter-spacing:.28px!important;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  #mainNavigation .mobile-home-button:visited,
  #mainNavigation .mobile-home-button:hover,
  #mainNavigation .mobile-home-button:focus{color:var(--mm-bg)!important;text-decoration:none!important}
  #mainNavigation .mobile-home-button:active{transform:translateY(1px)!important}
  #mainNavigation .mobile-home-button__icon{
    width:29px!important;
    height:29px!important;
    flex:0 0 29px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    background:var(--mm-bg)!important;
    color:#fff!important;
    box-shadow:0 2px 7px rgba(0,0,0,.18)!important;
  }
  #mainNavigation .mobile-home-button__icon i{font-size:13px!important;color:#fff!important}
  #mainNavigation .mobile-home-button__text{color:inherit!important;font:inherit!important;white-space:nowrap!important}

  #mainNavigation .mobile-menu-toggle{
    width:46px!important;
    min-width:46px!important;
    height:44px!important;
    padding:0!important;
    gap:4px!important;
    border:1px solid rgba(255,255,255,.46)!important;
    border-radius:12px!important;
    background:rgba(0,0,0,.20)!important;
    color:#fff!important;
    box-shadow:0 4px 13px rgba(2,14,26,.18)!important;
  }
  #mainNavigation .mobile-menu-toggle::after{content:none!important;display:none!important}
  #mainNavigation .mobile-menu-toggle-bar{width:21px!important;height:2.5px!important;background:#fff!important}

  #mainNavigation .primary-menu-host{
    border-left:1px solid rgba(255,255,255,.20)!important;
    background:linear-gradient(155deg,var(--mm-bg) 0%,var(--mm-bg-2) 100%)!important;
  }
  .mobile-menu-panel-head{
    min-height:78px!important;
    border-bottom:1px solid rgba(255,255,255,.16)!important;
  }
  .mobile-menu-panel-title{font-size:18px!important;font-weight:800!important;color:#fff!important}
  .mobile-menu-panel-note{font-size:12px!important;font-weight:600!important;color:rgba(255,255,255,.82)!important}

  #mainNavigation .menu-root>li>a,
  #mainNavigation .sf-menu>li>a,
  #mainNavigation .menu-home-link{
    border-color:rgba(255,255,255,.30)!important;
    background:rgba(255,255,255,.13)!important;
    color:#fff!important;
    box-shadow:0 2px 8px rgba(0,0,0,.08)!important;
  }
  #mainNavigation .menu-root>li>a:hover,
  #mainNavigation .sf-menu>li>a:hover,
  #mainNavigation .menu-root>li>a:focus,
  #mainNavigation .sf-menu>li>a:focus,
  #mainNavigation .menu-root>li>a:active,
  #mainNavigation .sf-menu>li>a:active{
    background:rgba(255,255,255,.23)!important;
    border-color:rgba(255,255,255,.48)!important;
    color:#fff!important;
  }
  #mainNavigation .menu-icon-badge{
    background:rgba(0,0,0,.18)!important;
    border-color:rgba(255,255,255,.25)!important;
    color:#fff!important;
  }
  #mainNavigation .mobile-submenu-toggle{
    border:1px solid rgba(255,255,255,.20)!important;
    background:rgba(0,0,0,.22)!important;
    color:#fff!important;
  }
  #mainNavigation li.open>.mobile-submenu-toggle{
    background:#fff!important;
    border-color:#fff!important;
    color:var(--mm-bg)!important;
  }
  #mainNavigation .menu-sub,
  #mainNavigation .menu-root li ul,
  #mainNavigation .sf-menu li ul{
    border-left:2px solid rgba(255,255,255,.30)!important;
  }
  #mainNavigation .menu-sub li>a,
  #mainNavigation .sf-menu li ul li>a{
    margin-bottom:2px!important;
    border:1px solid transparent!important;
    background:rgba(0,0,0,.10)!important;
    color:#f7fbff!important;
    font-weight:600!important;
  }
  #mainNavigation .menu-sub li>a:hover,
  #mainNavigation .menu-sub li>a:focus,
  #mainNavigation .menu-sub li>a:active{
    background:rgba(255,255,255,.14)!important;
    border-color:rgba(255,255,255,.17)!important;
    color:#fff!important;
  }
  #mainNavigation .menu-sub .menu-sub li>a{color:#f5faff!important;font-weight:600!important}

  /* Per-theme home button keeps a bright surface while icon follows theme. */
  body.home-layout-fengshui #mainNavigation .mobile-home-button,
  body.fengshui-theme-active #mainNavigation .mobile-home-button{color:#641322!important}
  body.home-layout-fengshui #mainNavigation .mobile-home-button__icon,
  body.fengshui-theme-active #mainNavigation .mobile-home-button__icon{background:#641322!important}
  body.home-layout-mechanical #mainNavigation .mobile-home-button,
  body.mechanical-theme-active #mainNavigation .mobile-home-button{color:#283845!important}
  body.home-layout-mechanical #mainNavigation .mobile-home-button__icon,
  body.mechanical-theme-active #mainNavigation .mobile-home-button__icon{background:#283845!important}
}

@media (max-width:420px){
  #mainNavigation .mobile-home-button{height:42px!important;padding-right:13px!important;font-size:12.5px!important}
  #mainNavigation .mobile-home-button__icon{width:27px!important;height:27px!important;flex-basis:27px!important}
  #mainNavigation .mobile-menu-toggle{width:44px!important;min-width:44px!important;height:42px!important}
}

/* ==========================================================
   2026-08-17 R2 - Desktop Home de-dup + Transport mobile sheet
   Desktop menu remains data-driven. The separate HOME button is mobile-only.
   Transport switches from translucent right drawer to a solid bottom sheet.
   ========================================================== */
@media (max-width:860px){
  #mainNavigation .mobile-root-home-duplicate{display:none!important}

  /* TRANSPORT: opaque navigation bar; never let page content show through. */
  body.home-layout-transport #mainNavigation.main-menu-wrap,
  body.layout-transport #mainNavigation.main-menu-wrap,
  body.transport-layout #mainNavigation.main-menu-wrap{
    background:#0d3554!important;
    border-top:1px solid #245979!important;
    border-bottom:1px solid #08263e!important;
    box-shadow:0 5px 16px rgba(4,24,41,.24)!important;
  }

  body.home-layout-transport #mainNavigation .mobile-home-button,
  body.layout-transport #mainNavigation .mobile-home-button,
  body.transport-layout #mainNavigation .mobile-home-button{
    background:#fff!important;
    color:#0b3554!important;
    border-color:#dce8f0!important;
    box-shadow:0 3px 10px rgba(2,24,42,.22)!important;
  }
  body.home-layout-transport #mainNavigation .mobile-home-button__icon,
  body.layout-transport #mainNavigation .mobile-home-button__icon,
  body.transport-layout #mainNavigation .mobile-home-button__icon{
    background:#0d476c!important;
  }
  body.home-layout-transport #mainNavigation .mobile-menu-toggle,
  body.layout-transport #mainNavigation .mobile-menu-toggle,
  body.transport-layout #mainNavigation .mobile-menu-toggle{
    background:#fff!important;
    border-color:#dce8f0!important;
    box-shadow:0 3px 10px rgba(2,24,42,.22)!important;
  }
  body.home-layout-transport #mainNavigation .mobile-menu-toggle-bar,
  body.layout-transport #mainNavigation .mobile-menu-toggle-bar,
  body.transport-layout #mainNavigation .mobile-menu-toggle-bar{
    background:#0d3554!important;
  }

  /* Transport uses a solid bottom sheet instead of the transparent-looking side drawer. */
  body.home-layout-transport #mainNavigation .primary-menu-host,
  body.layout-transport #mainNavigation .primary-menu-host,
  body.transport-layout #mainNavigation .primary-menu-host{
    top:auto!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    max-width:none!important;
    height:min(82dvh,680px)!important;
    min-height:320px!important;
    padding:0 12px 22px!important;
    border:1px solid #bed1df!important;
    border-bottom:0!important;
    border-radius:20px 20px 0 0!important;
    background:#f5f9fc!important;
    background-image:none!important;
    opacity:1!important;
    box-shadow:0 -18px 50px rgba(1,24,42,.34)!important;
    transform:translate3d(0,104%,0)!important;
    transition:transform .26s cubic-bezier(.22,.8,.24,1),visibility 0s linear .26s!important;
    contain:layout paint!important;
  }
  body.home-layout-transport #mainNavigation.menu-open .primary-menu-host,
  body.layout-transport #mainNavigation.menu-open .primary-menu-host,
  body.transport-layout #mainNavigation.menu-open .primary-menu-host{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .26s cubic-bezier(.22,.8,.24,1),visibility 0s!important;
  }

  body.home-layout-transport .mobile-menu-panel-head,
  body.layout-transport .mobile-menu-panel-head,
  body.transport-layout .mobile-menu-panel-head{
    min-height:72px!important;
    margin:0 -12px 10px!important;
    padding:14px 66px 12px 18px!important;
    background:#0d3554!important;
    background-image:none!important;
    border-bottom:3px solid #58a9bd!important;
    color:#fff!important;
  }
  body.home-layout-transport .mobile-menu-panel-title,
  body.layout-transport .mobile-menu-panel-title,
  body.transport-layout .mobile-menu-panel-title{color:#fff!important;font-weight:800!important}
  body.home-layout-transport .mobile-menu-panel-note,
  body.layout-transport .mobile-menu-panel-note,
  body.transport-layout .mobile-menu-panel-note{color:#d9edf5!important;font-weight:600!important}

  body.home-layout-transport #mainNavigation.menu-open .mobile-menu-toggle,
  body.layout-transport #mainNavigation.menu-open .mobile-menu-toggle,
  body.transport-layout #mainNavigation.menu-open .mobile-menu-toggle{
    top:auto!important;
    right:14px!important;
    bottom:calc(min(82dvh,680px) - 58px)!important;
    background:#fff!important;
    border-color:#c6d9e6!important;
  }
  body.home-layout-transport #mainNavigation.menu-open .mobile-menu-toggle-bar,
  body.layout-transport #mainNavigation.menu-open .mobile-menu-toggle-bar,
  body.transport-layout #mainNavigation.menu-open .mobile-menu-toggle-bar{background:#0d3554!important}

  body.home-layout-transport #mainNavigation .primary-menu-host>.menu-root,
  body.layout-transport #mainNavigation .primary-menu-host>.menu-root,
  body.transport-layout #mainNavigation .primary-menu-host>.menu-root,
  body.home-layout-transport #mainNavigation .primary-menu-host>.sf-menu,
  body.layout-transport #mainNavigation .primary-menu-host>.sf-menu,
  body.transport-layout #mainNavigation .primary-menu-host>.sf-menu{
    background:#f5f9fc!important;
  }

  body.home-layout-transport #mainNavigation .menu-root>li>a,
  body.layout-transport #mainNavigation .menu-root>li>a,
  body.transport-layout #mainNavigation .menu-root>li>a,
  body.home-layout-transport #mainNavigation .sf-menu>li>a,
  body.layout-transport #mainNavigation .sf-menu>li>a,
  body.transport-layout #mainNavigation .sf-menu>li>a{
    background:#fff!important;
    color:#102f48!important;
    border:1px solid #d1e0ea!important;
    box-shadow:0 2px 7px rgba(23,62,91,.07)!important;
    font-weight:700!important;
  }
  body.home-layout-transport #mainNavigation .menu-root>li>a:hover,
  body.layout-transport #mainNavigation .menu-root>li>a:hover,
  body.transport-layout #mainNavigation .menu-root>li>a:hover,
  body.home-layout-transport #mainNavigation .menu-root>li>a:focus,
  body.layout-transport #mainNavigation .menu-root>li>a:focus,
  body.transport-layout #mainNavigation .menu-root>li>a:focus{
    background:#e8f3f8!important;
    color:#082b45!important;
    border-color:#83b9c9!important;
  }
  body.home-layout-transport #mainNavigation .menu-icon-badge,
  body.layout-transport #mainNavigation .menu-icon-badge,
  body.transport-layout #mainNavigation .menu-icon-badge{
    background:#e5f1f6!important;
    color:#0c4c6d!important;
    border-color:#c7dfe9!important;
  }
  body.home-layout-transport #mainNavigation .mobile-submenu-toggle,
  body.layout-transport #mainNavigation .mobile-submenu-toggle,
  body.transport-layout #mainNavigation .mobile-submenu-toggle{
    background:#e7f0f5!important;
    color:#0c3f5d!important;
    border-color:#c7d9e4!important;
  }
  body.home-layout-transport #mainNavigation li.open>.mobile-submenu-toggle,
  body.layout-transport #mainNavigation li.open>.mobile-submenu-toggle,
  body.transport-layout #mainNavigation li.open>.mobile-submenu-toggle{
    background:#0d476c!important;
    color:#fff!important;
    border-color:#0d476c!important;
  }
  body.home-layout-transport #mainNavigation .menu-sub,
  body.layout-transport #mainNavigation .menu-sub,
  body.transport-layout #mainNavigation .menu-sub,
  body.home-layout-transport #mainNavigation .menu-root li ul,
  body.layout-transport #mainNavigation .menu-root li ul,
  body.transport-layout #mainNavigation .menu-root li ul{
    border-left:2px solid #6fa8ba!important;
    background:#eef5f9!important;
  }
  body.home-layout-transport #mainNavigation .menu-sub li>a,
  body.layout-transport #mainNavigation .menu-sub li>a,
  body.transport-layout #mainNavigation .menu-sub li>a,
  body.home-layout-transport #mainNavigation .sf-menu li ul li>a,
  body.layout-transport #mainNavigation .sf-menu li ul li>a,
  body.transport-layout #mainNavigation .sf-menu li ul li>a{
    background:#f8fbfd!important;
    color:#21445c!important;
    border:1px solid #dae6ed!important;
    font-weight:600!important;
  }
  body.home-layout-transport #mainNavigation .menu-sub li>a:hover,
  body.layout-transport #mainNavigation .menu-sub li>a:hover,
  body.transport-layout #mainNavigation .menu-sub li>a:hover,
  body.home-layout-transport #mainNavigation .menu-sub li>a:focus,
  body.layout-transport #mainNavigation .menu-sub li>a:focus,
  body.transport-layout #mainNavigation .menu-sub li>a:focus{
    background:#dcecf3!important;
    color:#082d47!important;
    border-color:#a8c9d7!important;
  }
}