/* ==========================================================================
   Header v2 kiểu D — Figma 3418:3948 (variant "D - Logo giữa"), docs/figma/specs/components/header-ohio.md
   Row 1: white 104px, padding 0/120 at 1920 (content 1680). Row 2: Tím 700, 56px, nav as typed.
   Desktop only (≥850px, Flatsome "medium" breakpoint); the mobile header is item 7.
   ========================================================================== */
@media (min-width:850px){
  #header .header-main .container,
  #header .header-bottom .container{max-width:1680px;padding-left:clamp(20px,6.25vw,120px);padding-right:clamp(20px,6.25vw,120px)}

  /* ---- row 1 ---- */
  #header .header-main{height:104px;background:#fff;border-bottom:0}
  #header .header-main .header-inner{height:104px}
  #header .header-main .flex-left,#header .header-main .flex-right{flex:1 1 0;min-width:0}
  #header #logo{width:140px!important;max-width:140px}
  #header #logo img{max-height:73px;width:auto}
  #header .header-main .header-nav > li{margin:0;flex-shrink:0}
  #header .header-main .header-nav > li > a{white-space:nowrap}
  #header .header-main .flex-right .header-nav{gap:16px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}

  /* Flatsome search icon element → 40px square outlined button */
  #header .header-main .header-search > a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border:1px solid var(--ohio-purple-200);border-radius:10px;color:var(--ohio-purple-700);padding:0}
  #header .header-main .header-search > a i{font-size:16px;top:0}

  /* language switcher kept, compact, after the CTA */
  #header .header-main .header-language-dropdown > a{font:500 var(--fs-menu)/var(--lh-menu) var(--font-base);color:var(--ohio-purple-700)}

  /* ---- row 2: purple nav ---- */
  #header .header-bottom{background:var(--ohio-purple-700)!important;min-height:56px}
  #header .header-bottom .header-bottom-nav,
  #header .header-bottom .flex-col{width:100%}
  #header .header-bottom .nav{display:flex;justify-content:space-between;width:100%;flex-wrap:nowrap}
  #header .header-bottom .nav > li{margin:0}
  #header .header-bottom .nav > li > a{display:flex;align-items:center;gap:6px;height:56px;padding:0;
    font:500 var(--fs-menu)/var(--lh-menu) var(--font-base)!important;letter-spacing:0;text-transform:none;color:#fff!important;white-space:nowrap}
  #header .header-bottom .nav > li > a:hover,
  #header .header-bottom .nav > li.active > a,
  #header .header-bottom .nav > li.current-menu-ancestor > a{color:var(--ohio-text-on-dark)!important}
  #header .header-bottom .nav > li > a .icon-angle-down{font-size:var(--fs-menu);opacity:.9;margin:0}
  #header .header-bottom .nav > li > a br{display:none}

  /* ---- sticky: shrink row 1, keep the purple nav ---- */
  #header .header-wrapper.stuck .header-main,
  #header .header-wrapper.stuck .header-main .header-inner{height:72px}
  #header .header-wrapper.stuck #logo img{max-height:52px}
}
@media (min-width:850px) and (max-width:1700px){
  /* language switcher: flag + chevron only */
  #header .header-main .header-language-dropdown__link{font-size:0!important;gap:4px}
  #header .header-main .header-language-dropdown__link i{font-size:var(--fs-menu)}
}
@media (min-width:850px) and (max-width:1366px){
  #header .header-bottom .nav > li > a{font-size:var(--fs-menu)!important}
  #header .header-main .flex-right .header-nav{gap:12px}
}
@media (min-width:850px) and (max-width:1199px){
  /* tablets / small laptops: nav labels may wrap to two lines, like the old <br> titles */
  #header .header-bottom .nav > li > a{white-space:normal;text-align:center;font-size:var(--fs-menu)!important;line-height:var(--lh-menu)!important;max-width:150px;padding:0 4px}
  #header .header-bottom .nav > li > a .icon-angle-down{display:none}
}
/* Dat 1984202266: both full-width mobile navs overlap the centered logo.
   Empty nav space passes taps through; hamburger and right icons stay interactive. */
@media(max-width:1023px){
 #header .mobile-nav.nav-left,#header .mobile-nav.nav-right{pointer-events:none}
 #header .mobile-nav.nav-left > li,#header .mobile-nav.nav-right > li{pointer-events:auto}
 /* Keep fractional logo edges above the adjacent empty flex columns too. */
 #header #logo{z-index:2}
}
/* Below 298px, keep the actual language tile clear of the logo as well. */
@media(max-width:297px){
 #header #logo{max-width:calc(100vw - 212px)}
}