/* ==========================================================================
   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 uppercase.
   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}

  .ohio-hdr-hotline{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border:1px solid var(--ohio-purple-200);
    border-radius:var(--ohio-radius-m);background:#fff;box-shadow:0 4px 14px rgba(66,38,102,.06);text-decoration:none;line-height:1}
  .ohio-hdr-hotline__icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
    background:var(--ohio-grad-cta);color:#fff}
  .ohio-hdr-hotline__text{display:flex;flex-direction:column;gap:4px}
  .ohio-hdr-hotline__label{font:600 12px/16px var(--ohio-font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--ohio-purple-600)}
  .ohio-hdr-hotline__num{font:700 22px/26px var(--ohio-font-body);color:var(--ohio-purple-700);white-space:nowrap}
  .ohio-hdr-hotline:hover{border-color:var(--ohio-purple-300)}

  #header .ohio-hdr-branches{display:inline-flex;align-items:center;gap:6px;font:600 14px/20px var(--ohio-font-body)!important;color:var(--ohio-purple-700);
    text-decoration:none;white-space:nowrap;text-transform:none!important;letter-spacing:0}
  .ohio-hdr-branches .ohio-icon{fill:var(--ohio-purple-700);stroke:#fff;stroke-width:1.5}
  .ohio-hdr-branches:hover{color:var(--ohio-purple-600)}

  /* 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}

  #header .ohio-hdr-cta.ohio-btn{height:48px;padding:0 8px 0 24px;gap:16px;box-shadow:0 6px 16px rgba(246,145,28,.28);
    font:600 15px/1 var(--ohio-font-body)!important;letter-spacing:.04em;color:#fff!important}
  .ohio-hdr-cta.ohio-btn::after{content:none}
  .ohio-hdr-cta__arrow{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ohio-radius-s);
    background:rgba(255,255,255,.22)}

  /* language switcher kept, compact, after the CTA */
  #header .header-main .header-language-dropdown > a{font:600 13px/1 var(--ohio-font-body);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:700 14px/20px var(--ohio-font-body)!important;letter-spacing:0;text-transform:uppercase;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-orange-200)!important}
  #header .header-bottom .nav > li > a .icon-angle-down{font-size:12px;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}
  #header .header-wrapper.stuck .ohio-hdr-hotline{padding-top:4px;padding-bottom:4px}
  #header .header-wrapper.stuck .ohio-hdr-hotline__icon{width:40px;height:40px}
}
@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:12px}
}
@media (min-width:850px) and (max-width:1366px){
  .ohio-hdr-hotline__num{font-size:18px}
  #header .header-bottom .nav > li > a{font-size:13px!important}
  #header .ohio-hdr-branches span{display:none}   /* icon only on narrow desktops */
  #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:12px!important;line-height:16px!important;max-width:150px;padding:0 4px}
  #header .header-bottom .nav > li > a .icon-angle-down{display:none}
  .ohio-hdr-hotline__label{display:none}
  .ohio-hdr-hotline__num{font-size:16px}
}