/* ==========================================================================
   Floating buttons PC (Figma "Nút nổi PC" 3578:6329) — restyles QH_FloatBar markup.
   Group 1: white pill r32 pad 8 gap 6 → Messenger, Chỉ đường, Ưu đãi (44 round, gradient Tím 600→800),
            Đặt lịch (48 ring Tím 100 around a 40 button, gradient Tím 400→600).
   Group 2: Gọi ngay — white 64 circle holding a 48 gradient button; tooltip with the hotline on hover.
   "Lên đầu trang": Flatsome #top-link restyled to a 48 white circle with a Tím 100 border.
   Icons: img/floatbar/*.svg (white strokes). Hidden ≤849px: the mobile bottom bar takes over.
   ========================================================================== */
.qh-fb{gap:16px!important;--ohio-fb-gradient:linear-gradient(135deg,var(--ohio-purple-600),var(--ohio-purple-800));
  --ohio-fb-shadow:0 8px 12px rgba(36,18,59,.16)}
.qh-fb .qh-fb-group{background:#fff!important;border-radius:32px!important;padding:8px!important;gap:6px!important;
  box-shadow:var(--ohio-fb-shadow)!important;display:flex;flex-direction:column;align-items:center}
.qh-fb .qh-fb-ico{position:relative;width:44px!important;height:44px!important;border-radius:50%!important;border:0;padding:0;
  display:flex;align-items:center;justify-content:center;background:var(--ohio-fb-gradient)!important;cursor:pointer;
  transition:transform .15s,box-shadow .15s}
.qh-fb .qh-fb-ico img{width:22px!important;height:22px!important;object-fit:contain;display:block;border-radius:0!important}
.qh-fb .qh-fb-ico:hover{transform:translateX(-2px);box-shadow:var(--ohio-shadow-floating)}

/* Đặt lịch (4724:15835): 40 inner button inside a 48 Tím 100 ring, white 22px calendar. */
.qh-fb .qh-fb-ico.qh-fb--booking{width:40px!important;height:40px!important;margin:2px;
  background:linear-gradient(135deg,var(--ohio-purple-400),var(--ohio-purple-600))!important;box-shadow:0 0 0 4px var(--ohio-purple-100)}

/* Two soft waves around the desktop booking CTA; leave its icon and hit area still. */
@media (min-width:850px) and (prefers-reduced-motion:no-preference){
  .qh-fb .qh-fb-ico.qh-fb--booking::before,.qh-fb .qh-fb-ico.qh-fb--booking::after{
    content:"";display:block!important;position:absolute;inset:-4px;width:auto;height:auto;box-sizing:border-box;
    border:1.5px solid var(--ohio-purple-400);border-radius:50%;background:none;box-shadow:none;opacity:0;
    pointer-events:none;animation:ohio-booking-ripple 2.8s ease-out infinite}
  .qh-fb .qh-fb-ico.qh-fb--booking::after{animation-delay:-1.4s}
}
@keyframes ohio-booking-ripple{
  0%{transform:scale(1);opacity:.6}
  80%,100%{transform:scale(1.65);opacity:0}
}

/* Gọi ngay: separate white 64 circle */
.qh-fb .qh-fb-group:last-child{padding:8px!important;border-radius:32px!important}
.qh-fb .qh-fb-ico.qh-fb--call{width:48px!important;height:48px!important}

/* tooltips (QH_FloatBar prints .qh-fb-tip from the label) */
.qh-fb .qh-fb-tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);white-space:nowrap;
  padding:8px 14px;border-radius:10px;background:var(--ohio-purple-700);color:#fff;font:400 var(--fs-caption)/var(--lh-caption) var(--font-base);
  opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:var(--ohio-shadow-floating)}
.qh-fb .qh-fb-ico:hover .qh-fb-tip,.qh-fb .qh-fb-ico:focus-visible .qh-fb-tip{opacity:1!important;visibility:visible}
.qh-fb .qh-fb--call .qh-fb-tip{background:#fff!important;color:var(--ohio-purple-700)!important;opacity:0;padding:10px 14px;border-radius:12px;
  font:700 var(--fs-h4)/var(--lh-h4) var(--font-base);box-shadow:var(--ohio-shadow-floating)}
.qh-fb .qh-fb--call .qh-fb-tip::before{content:"Hotline tư vấn";display:block;font:600 var(--fs-label)/var(--lh-label) var(--font-base);color:var(--ohio-purple-600)}
html[lang^="en"] .qh-fb .qh-fb--call .qh-fb-tip::before{content:"Hotline"}   /* EN pages (15/10 inventory: the label was Vietnamese everywhere) */

/* back to top */
#top-link.back-to-top{width:48px;height:48px;min-height:0;line-height:46px;border-radius:50%;background:#fff!important;
  border:1px solid var(--ohio-purple-100)!important;color:var(--ohio-purple-700)!important;box-shadow:var(--ohio-shadow-floating)}
#top-link.back-to-top:hover{background:var(--ohio-purple-50)!important}

@media (max-width:849px){
  .qh-fb{display:none!important}
}