/* ==========================================================================
   Front page header — as drawn in the home frame, Figma DwVsiflHKOGd1W2Wvfdzp8 "Trang Chủ .1 - v2" (3409:1941),
   y 0–132 at 1920 (docs/figma/specs-v3/home/home-text-spec.tsv + assets/3798-201xx.svg). Site-wide since 12/10
   (owner: one header everywhere, the home one); scoped to body.ohio-hh (inc/v2/header-home.php) so it overrides
   header D's base rules (css/ohio-header.css).
   White 131px, 0.5px #E1E1E1 hairline; content 1197px centred.
   Row 1 (0–69): logo 107×53 · search pill 710×39 · hotline · CTA 162×37 (the frame's own CTA, not the Style Guide M).
   Row 2 (69–131): nav, "Về chúng tôi" 18px #422666 then two-line grey 13px items, spread edge to edge.
   Type is exactly the frame's (Montserrat menu/hotline, BVP CTA 11.47px, Light placeholder) — owner, 11/10.
   ========================================================================== */
@media (min-width:850px){
  .ohio-hh #header .header-main .container,
  .ohio-hh #header .header-bottom .container{max-width:1197px;padding-left:0;padding-right:0}
  .ohio-hh #header .header-wrapper{background:#fff;box-shadow:inset 0 -.5px 0 #e1e1e1}

  /* ---- row 1 ---- */
  .ohio-hh #header .header-main{height:69px;background:#fff;border:0}
  .ohio-hh #header .header-main .header-inner{height:69px;align-items:stretch}
  .ohio-hh #header #logo{width:107px!important;max-width:107px;margin:6px 29px 0 0;align-self:flex-start}
  .ohio-hh #header #logo img{width:107px;height:53px;max-height:none;object-fit:contain;padding:0}
  .ohio-hh #header .header-main .flex-left{flex:0 0 auto;margin-right:13px;align-items:flex-start}
  .ohio-hh #header .header-main .flex-right{flex:0 0 auto;margin-left:auto;align-items:flex-start}
  .ohio-hh #header .header-main .header-nav{gap:0;flex-wrap:nowrap;align-items:flex-start}
  .ohio-hh #header .header-main .header-nav > li{margin:0}
  .ohio-hh #header .header-main .flex-col.hide-for-medium.flex-center{display:none}

  /* search pill 710×39 at y 20; placeholder Montserrat 300 14px #848484 at x+25; icon 17px #B7B7B7, 15px from the right */
  /* Flatsome centres slot items and drops their margins: offsets use position/top instead */
  .ohio-hh #header .ohio-hh-search{position:relative;top:20px;display:block;width:710px;height:39px;margin:0}
  .ohio-hh .ohio-hh-search__input{box-sizing:border-box;width:100%!important;height:39px!important;margin:0!important;padding:0 48px 0 25px!important;
    border:.55px solid #e1e1e1!important;border-radius:20px!important;background:#fff!important;box-shadow:none!important;
    font:300 14px/39px 'Montserrat',sans-serif!important;color:#422666!important}
  .ohio-hh .ohio-hh-search__input::placeholder{color:#848484;opacity:1}
  .ohio-hh .ohio-hh-search__btn{position:absolute;top:13px;right:15px;width:19px;height:19px;padding:0;margin:0;border:0;background:none;
    color:#b7b7b7;cursor:pointer;line-height:0;min-height:0}

  /* hotline: icon 30×30 at y 23, label 600 11.65px at y 23, number 400 17.5px at y 34 */
  .ohio-hh #header .ohio-hh-hotline{position:relative;top:23px;display:inline-flex;align-items:flex-start;gap:8px;height:30px;margin:0 27px 0 0;
    text-decoration:none;color:#422666;line-height:1}
  .ohio-hh .ohio-hh-hotline__icon{display:block;width:30px;height:30px;flex:0 0 30px}
  .ohio-hh .ohio-hh-hotline__text{display:flex;flex-direction:column;line-height:1}
  .ohio-hh #header .ohio-hh-hotline__label{font:600 11.65px/14px 'Montserrat',sans-serif;color:#422666;text-transform:none;letter-spacing:0}
  .ohio-hh .ohio-hh-hotline__num{font:400 17.5px/21px 'Montserrat',sans-serif;color:#422666;white-space:nowrap;margin-top:-2px}
  .ohio-hh .ohio-hh-hotline:hover .ohio-hh-hotline__num{text-decoration:underline}

  /* CTA 162×37, radius 5.5, gradient #F6911E→#F67D1C 44%→#F75E18; label BVP 600 11.47px; arrow tile 27.6px #F6911E */
  .ohio-hh #header .ohio-hh-cta{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:162px;height:37px;
    position:relative;top:20px;margin:0;padding:0 5px 0 20px;border-radius:5.5px;background:linear-gradient(90deg,#f6911e 0%,#f67d1c 43.6%,#f75e18 100%);
    font:600 11.47px/1 'Be Vietnam Pro',sans-serif!important;letter-spacing:0;text-transform:uppercase;color:#fff!important;text-decoration:none;
    box-shadow:none;white-space:nowrap}
  .ohio-hh #header .ohio-hh-cta:hover{filter:brightness(.95)}
  .ohio-hh .ohio-hh-cta__arrow{display:inline-flex;align-items:center;justify-content:center;width:27.6px;height:27.6px;border-radius:5.1px;background:#f6911e}

  /* ---- row 2: nav ---- */
  .ohio-hh #header .header-bottom{background:#fff!important;min-height:62px;border:0}
  .ohio-hh #header .header-bottom .container{border-top:.5px solid #e1e1e1}   /* hairline spans the content only */
  .ohio-hh #header .header-bottom .flex-col,.ohio-hh #header .header-bottom .header-bottom-nav{width:100%}
  .ohio-hh #header .header-bottom .nav{display:flex;justify-content:space-between;align-items:center;width:100%;flex-wrap:nowrap;height:62px}
  .ohio-hh #header .header-bottom .nav > li{margin:0}
  .ohio-hh #header .header-bottom .nav > li > a{display:block;padding:0;height:auto;
    font:600 13px/17.3px 'Montserrat',sans-serif!important;letter-spacing:0;text-transform:none;color:#848484!important;text-align:center;white-space:nowrap}
  /* middle items: the menu title wraps onto two balanced lines like the frame ("Trị mao / mạch máu") */
  .ohio-hh #header .header-bottom .nav > li:not(:first-child):not(:last-child) > a{white-space:normal;width:max-content;max-width:8em;text-wrap:balance}
  .ohio-hh #header .header-bottom .nav > li:first-child > a{font-size:18px!important;line-height:22px!important;color:#422666!important}
  .ohio-hh #header .header-bottom .nav > li:last-child > a{text-transform:uppercase}
  .ohio-hh #header .header-bottom .nav > li > a:hover,
  .ohio-hh #header .header-bottom .nav > li.active > a,
  .ohio-hh #header .header-bottom .nav > li.current-menu-ancestor > a{color:#422666!important}
  .ohio-hh #header .header-bottom .nav > li > a .icon-angle-down{display:none}

  /* ---- sticky: same layout, Flatsome only toggles position ---- */
  .ohio-hh #header .header-wrapper.stuck .header-main,
  .ohio-hh #header .header-wrapper.stuck .header-main .header-inner{height:69px}
}
@media (min-width:850px) and (max-width:1240px){
  /* narrower than the 1197 frame: search shrinks first, hotline label goes */
  .ohio-hh #header .header-main .container,.ohio-hh #header .header-bottom .container{padding-left:20px;padding-right:20px}
  .ohio-hh .ohio-hh-search{width:calc(100vw - 640px)}
  .ohio-hh .ohio-hh-hotline__label{display:none}
  .ohio-hh #header .header-bottom .nav > li > a{font-size:12px!important}
  .ohio-hh #header .header-bottom .nav > li:first-child > a{font-size:15px!important}
}
@media (min-width:850px){
  .ohio-hh #header .header-bottom .nav > li > a br{display:inline}   /* header D hides the <br>; the frame labels are two-line */
}
@media (min-width:850px){
  /* Flatsome pads header links (padding 10px 0) and gives .qh_tuvan a border: reset so the inner boxes sit at the frame y
     (icon 23, label 22.8, number 34); CTA arrow tile 10.7px from the right edge (3798:20141). */
  .ohio-hh #header .ohio-hh-hotline,.ohio-hh #header .ohio-hh-cta{padding-top:0;padding-bottom:0;line-height:1}
  .ohio-hh #header .ohio-hh-hotline{align-items:flex-start}
  .ohio-hh #header .ohio-hh-cta{padding-right:10.7px;border:0!important;outline:0;box-shadow:none!important}
}
@media (min-width:850px){
  .ohio-hh #header .ohio-hh-cta::before,.ohio-hh #header .ohio-hh-cta::after{content:none!important;display:none!important}   /* legacy .qh_tuvan pulse ring */
}