/* Yêu cầu của khách 27/10 — cụm nút nổi góc trái (Báo giá / Zalo / Messenger / Hotline): vòng tròn đồng bộ, icon trắng 24px, không chữ trong vòng tròn.
   Nạp SAU sanitec-shell.css (ghi đè kiểu cũ). Không đặt `bottom` ở đây: vị trí mobile trên thanh .mobile-bar do sanitec-family.css quyết định. */
.snt-floating{--fl:52px;left:12px;gap:12px;transition:opacity .2s}
.snt-floating.is-tucked{opacity:0;pointer-events:none}
.snt-floating>a{position:relative;width:var(--fl);height:var(--fl);box-shadow:0 4px 12px rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s}
.snt-floating>a:hover,.snt-floating>a:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
.snt-floating>a svg{width:24px;height:24px;display:block;flex:none}
.snt-floating .float-quote{background:#0d9148}
.snt-floating .float-zalo{background:#0068FF}
.snt-floating .float-message{background:#0084FF}
/* Hotline: pill có số, cao bằng các nút tròn */
.snt-floating .float-phone{margin-top:0;width:auto;height:var(--fl);gap:10px;padding:0 18px 0 0;background:#0d9148;border-radius:calc(var(--fl)/2);font:600 16px/1 "Be Vietnam Pro",Arial,sans-serif;white-space:nowrap}
.snt-floating .float-phone span{width:var(--fl);height:var(--fl);font-size:inherit;background:#07974c;border-radius:50%}
.snt-floating .float-phone b{font-size:16px;font-weight:600}
/* Nhãn pill khi rê chuột (chỉ máy có chuột) */
@media(hover:hover) and (min-width:701px){
.snt-floating>a[data-label]::after{content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px);padding:7px 12px;border-radius:999px;background:#173128;color:#fff;font:500 13px/1 "Be Vietnam Pro",Arial,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.snt-floating>a[data-label]:hover::after,.snt-floating>a[data-label]:focus-visible::after{opacity:1;transform:translateY(-50%)}
}
@media(max-width:700px){.snt-floating{--fl:48px}.snt-floating .float-phone{padding:0;background:#07974c}.snt-floating .float-phone b{display:none}}
@media(prefers-reduced-motion:reduce){.snt-floating,.snt-floating>a,.snt-floating>a::after{transition:none}.snt-floating>a:hover,.snt-floating>a:focus-visible{transform:none}}

/* khach-27-10-toi 2: Hotline to hơn các nút khác + vòng sáng pulse nhẹ (nhịp ~3,6s, đợt sáng chỉ ở đầu nhịp); tắt với prefers-reduced-motion. */
.snt-floating{--fl-ph:60px}
.snt-floating .float-phone{height:var(--fl-ph);margin-left:calc((var(--fl) - var(--fl-ph))/2);border-radius:calc(var(--fl-ph)/2);padding-right:22px;animation:snt-ph-pulse 3.6s ease-out 1.5s infinite}
.snt-floating .float-phone span{width:var(--fl-ph);height:var(--fl-ph)}
.snt-floating .float-phone svg{width:28px;height:28px}
.snt-floating .float-phone b{font-size:18px}
@keyframes snt-ph-pulse{0%{box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 0 rgba(13,145,72,.55)}22%{box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 16px rgba(13,145,72,0)}100%{box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 16px rgba(13,145,72,0)}}
@media(max-width:700px){.snt-floating{--fl-ph:56px}.snt-floating .float-phone{padding:0}.snt-floating .float-phone svg{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.snt-floating .float-phone{animation:none}}