/* ============================================================
   social.css — footer social icons + floating contact panel.
   Neither is in the prototype (client request 2026-09-18); colours
   are the footer's own rgba(255,250,242,…) values and concept3.css
   tokens, so nothing new enters the palette except Zalo's brand blue.
   ============================================================ */

/* ---- Footer: .fsocial under the brand block ---- */
.fsocial{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
/* 38px keeps all five on one line in the 1.5fr brand column (225px at 1440);
   below 1100px the brand block spans the grid, so touch sizes get the full 44px. */
.fsocial a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,250,242,.22);color:rgba(255,250,242,.78);transition:.3s var(--ease)}
.fsocial svg{width:18px;height:18px}
/* An uploaded icon (repeater "Icon riêng"): concept3.css:28 sets every img to
   100%/cover, so the size and fit are restated here. */
.fsocial img{width:18px;height:18px;object-fit:contain}
.fsocial a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:1100px){
  .fsocial{gap:10px}
  .fsocial a{width:44px;height:44px}
}
@media(hover:hover){
  .fsocial a:hover{background:#fff;border-color:#fff;color:var(--espresso)}
}

/* ---- Floating buttons: .qcontact ----
   Free-standing round buttons stacked bottom right, each with its own shadow.
   The first version was a white panel docked to the screen edge; the client
   rejected it (2026-09-18), so no shared background here.
   z-index 90: under the fixed header (100) and the full-screen mobile menu (110),
   so opening the menu covers the buttons. */
.qcontact{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;align-items:center;gap:12px}
.qcontact__links{display:flex;flex-direction:column;gap:12px}
.qcontact__btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;background:var(--espresso);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(34,30,26,.24);transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .35s var(--ease),visibility .35s}
.qcontact__btn svg{width:22px;height:22px}
.qcontact__btn img{width:24px;height:24px;object-fit:contain}
/* Brand colours for the channels that have one; the editor's "Màu nền" is an
   inline style and overrides these. */
.qcontact__btn--zalo{background:#0068FF}
.qcontact__btn--messenger{background:#0084FF}
.qcontact__btn--whatsapp{background:#25D366}
.qcontact__btn--zalo svg{width:30px;height:30px}
.qcontact__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Back to top: light so it reads as navigation, not a fourth contact channel.
   Hidden until contact-float.js adds .is-visible; visibility also drops it from
   the tab order while hidden. */
.qcontact__top{background:#fff;color:var(--espresso);box-shadow:0 6px 18px rgba(34,30,26,.16),inset 0 0 0 1px var(--line-soft);opacity:0;visibility:hidden;transform:translateY(10px)}
.qcontact__top.is-visible{opacity:1;visibility:visible;transform:none}

@media(hover:hover){
  .qcontact__btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(34,30,26,.3)}
}
@media(max-width:820px){
  .qcontact{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));gap:10px}
  .qcontact__links{gap:10px}
  .qcontact__btn{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
  .fsocial a,.qcontact__btn{transition:none}
}
@media print{
  .qcontact{display:none}
}