/* Floating social dock, shared by every public layout (v3, legacy, campaign, template).
   Each of those layouts ships its own stylesheet, so every rule here is prefixed `.osd`
   and resets what a page-level `a` / `button` rule could otherwise leak in. */
.osd{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:10px}
/* Campaign and template landings already pin their own buttons/bar to the bottom edge. */
.osd.osd--lifted{bottom:96px}

.osd .osd-panel{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:0}

.osd .osd-btn,
.osd .osd-toggle{
  box-sizing:border-box;position:relative;width:48px;height:48px;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:#fff;cursor:pointer;text-decoration:none;
  box-shadow:0 6px 18px -6px rgba(12,84,153,.35);transition:transform .2s,box-shadow .2s;
}
.osd .osd-btn:hover,
.osd .osd-btn:focus-visible,
.osd .osd-toggle:hover,
.osd .osd-toggle:focus-visible{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(12,84,153,.45)}
.osd .osd-btn svg,
.osd .osd-toggle svg{display:block;width:26px;height:26px}

.osd .osd-btn--facebook svg{color:#1877F2}
.osd .osd-btn--call svg{color:#16A34A}
.osd .osd-btn--download svg{color:#0C73C4}

/* The label lives in data-tip, not inside the <a>: the campaign CTA test reads an anchor's
   text to decide where it must link, and "Tải app" text would bind it to /download-app. */
.osd .osd-btn::after{
  content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  white-space:nowrap;padding:8px 10px;border-radius:8px;background:#1F2937;color:#fff;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.osd .osd-btn:hover::after,
.osd .osd-btn:focus-visible::after{opacity:1}

.osd .osd-toggle{display:none;background:#1499F5}
.osd .osd-toggle svg{color:#fff}
.osd .osd-toggle .osd-ic-close,
.osd.is-open .osd-toggle .osd-ic-open{display:none}
.osd.is-open .osd-toggle .osd-ic-close{display:block}

/* Phones and tablets: four stacked buttons would cover the content, so they fold behind one toggle. */
@media (max-width:991.98px){
  .osd{right:14px;bottom:14px}
  .osd.osd--lifted{bottom:90px}
  .osd .osd-toggle{display:flex}
  .osd .osd-panel{display:none}
  .osd.is-open .osd-panel{display:flex}
  .osd .osd-btn::after{display:none}
}

@media print{.osd{display:none}}