.floating-contact{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));z-index:50;display:flex;flex-direction:column;gap:var(--contact-gap,12px)}
.floating-contact.is-right{right:24px}.floating-contact.is-left{left:24px}
.floating-contact-button{position:relative;display:flex;align-items:center;justify-content:center;width:var(--contact-size,48px);height:var(--contact-size,48px);flex-shrink:0;border-radius:50%;background:var(--contact-bg);color:var(--contact-ink);box-shadow:0 5px 16px #0002;text-decoration:none;font-weight:800;isolation:isolate;transition:transform .2s}
.floating-contact-button:hover{transform:scale(1.1)}
.floating-contact-button svg,.floating-contact-button img{width:55%;height:55%;object-fit:contain;position:relative;z-index:1}.contact-icon-word{position:relative;z-index:1;font-size:calc(var(--contact-size,48px)*.27)}
.floating-contact-tooltip{position:absolute;right:calc(100% + 12px);padding:7px 10px;max-width:240px;white-space:nowrap;background:#17202e;color:#fff;font-size:12px;border-radius:6px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s}
.is-left .floating-contact-tooltip{right:auto;left:calc(100% + 12px)}
.floating-contact-button:hover .floating-contact-tooltip,.floating-contact-button:focus-visible .floating-contact-tooltip{opacity:1;visibility:visible}
.floating-contact-button:focus-visible{outline:3px solid #243247;outline-offset:4px}
/* Match the original design: hotline bounce, hotline/Zalo expanding rings. */
.has-motion .floating-contact-button:is([data-contact="hotline"],[data-contact="zalo"])::before{content:"";position:absolute;inset:0;background:var(--contact-bg);border-radius:50%;pointer-events:none;z-index:-1;animation:contact-pulse 1s cubic-bezier(0,0,.2,1) infinite}
.has-motion .floating-contact-button[data-contact="hotline"]>svg,.has-motion .floating-contact-button[data-contact="hotline"]>img{animation:contact-bounce 1s infinite}
@keyframes contact-pulse{0%{transform:scale(1);opacity:.4}75%,100%{transform:scale(2);opacity:0}}
@keyframes contact-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}
@media(max-width:600px){.floating-contact.is-right{right:16px}.floating-contact.is-left{left:16px}}
@media(prefers-reduced-motion:reduce){.has-motion .floating-contact-button[data-contact]::before{animation:none;display:none}.has-motion .floating-contact-button[data-contact]>svg,.has-motion .floating-contact-button[data-contact]>img{animation:none}.floating-contact-button,.floating-contact-tooltip{transition:none}}