/* ==========================================================================
   Mobile header + bottom bar — Figma "OHIO Mobile – Thư viện thành phần" 3630:6708.
   Header Mobile 3630:6806: white 390×64, border-bottom 1px Viền #ECEAF0, padding 0/16, space-between;
     menu & search buttons 40×40 Tím 50 r12 with 22px icons (img/mobile/menu.svg, search.svg), logo 84.857×44.
   Thanh neo đáy 3630:7014: white 390×72, r20 top, padding 10/28, drop-shadow 0 -4 10 rgba(66,38,102,.12),
     five 52px slots: 44 circle gradient 135° Tím 600→800 (Messenger, Chỉ đường, Ưu đãi), Đặt lịch = 52 Tím 100
     halo around a 42 circle Tím 400→600, Gọi ngay = 44 circle Tím 500→700; icons 22 white.
   Shown ≤849px (Flatsome "medium"); the footer's 104px bottom padding leaves room for the bar (Footer Mobile 3630:7041).
   ========================================================================== */
.ohio-mbar{display:none}
@media (max-width:849px){
  #header .header-main{height:64px!important;border-bottom:1px solid #ECEAF0;box-sizing:border-box}
  #header .header-main .header-inner{height:63px;padding:0 16px}
  #header .header-main .header-inner{position:relative}
  #header #logo{position:absolute;left:50%;top:10px;width:85px!important;margin:0;transform:translateX(-50%)}   /* frame centres the logo */
  #header #logo img{max-height:44px!important}
  #header .mobile-nav{align-items:center}
  #header .mobile-nav > li{display:flex;align-items:center;height:40px;margin:0;padding:0}
  #header .mobile-nav > li > a,#header .mobile-nav .tgn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:12px;background:var(--ohio-purple-50) center/22px 22px no-repeat;padding:0;cursor:pointer}
  #header .mobile-nav .tgn{background-image:url(../img/mobile/menu.svg)}
  #header .mobile-nav .header-search > a{background-image:url(../img/mobile/search.svg)}
  #header .mobile-nav .tgn i,#header .mobile-nav .header-search > a > i{display:none}

  .ohio-mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
    height:72px;padding:10px 28px;padding-bottom:max(10px,env(safe-area-inset-bottom));box-sizing:border-box;background:#fff;
    border-radius:20px 20px 0 0;filter:drop-shadow(0 -4px 10px rgba(66,38,102,.12))}
  .ohio-mbar__item{flex:0 0 52px;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;text-decoration:none}
  .ohio-mbar__btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg,var(--ohio-purple-600),var(--ohio-purple-800))}
  .ohio-mbar__btn img{display:block;width:22px;height:22px}
  .ohio-mbar__item--call .ohio-mbar__btn{background:linear-gradient(135deg,var(--ohio-purple-500),var(--ohio-purple-700))}
  .ohio-mbar .ohio-mbar__item--book{background:var(--ohio-purple-100)!important;border:0!important;box-shadow:none!important;padding:0!important;
    margin:0!important;min-height:0!important;height:52px!important;line-height:1!important;outline:0}
  .ohio-mbar__item--book .ohio-mbar__btn{width:42px;height:42px;background:linear-gradient(135deg,var(--ohio-purple-400),var(--ohio-purple-600))}
  .ohio-mbar__item.qh_tuvan::before,.ohio-mbar__item.qh_tuvan::after{display:none!important}   /* legacy pulse ring draws a box here */
  #top-link.back-to-top{bottom:84px!important}
}
@media (min-width:768px) and (max-width:849px){
  body{padding-bottom:72px}   /* footer reserves 104px for the bar only at ≤767 */
}