/* Lightweight contact actions: animate only transforms and opacity. */
nav.contact-dock{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:24px;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;backdrop-filter:none;z-index:20;isolation:isolate}
.contact-dock a{--contact-color:#0876e9;--contact-rgb:8,118,233;position:relative;display:grid;place-items:center;width:52px;height:52px;min-width:44px;min-height:44px;flex:none;border:1px solid rgba(var(--contact-rgb),.32);border-radius:50%;background:rgba(var(--contact-rgb),.48);color:#fff;box-shadow:0 2px 8px #17261f0d;transition:transform .18s ease,background-color .18s ease;touch-action:manipulation}
.contact-dock .dock-phone{--contact-color:#e53935;--contact-rgb:229,57,53}
.contact-dock a::before,.contact-dock a::after{content:"";position:absolute;inset:-8px;border:1px solid rgba(var(--contact-rgb),.4);border-radius:50%;background:transparent;pointer-events:none;opacity:0;z-index:-1;animation:contact-wave 5.6s ease-out infinite}
.contact-dock a::after{animation-delay:.55s}.contact-dock .dock-phone::before{animation-delay:2.8s}.contact-dock .dock-phone::after{animation-delay:3.35s}
.contact-dock .contact-symbol{display:grid;place-items:center;width:34px;height:34px;animation:contact-nudge 5.6s ease-in-out infinite;transform-origin:center}
.contact-dock .dock-phone .contact-symbol{width:24px;height:24px;animation-delay:2.8s}
.contact-dock .contact-symbol svg{display:block;width:100%;height:100%;overflow:visible}
.contact-dock .dock-zalo text{fill:#0876e9;font:700 14px Arial,sans-serif;letter-spacing:-.5px}
.contact-dock .contact-label{position:absolute;right:calc(100% + 16px);top:50%;padding:6px 11px;border-radius:7px;background:var(--ink);color:var(--paper);font:500 12px/1.5 'Be Vietnam Pro',sans-serif;letter-spacing:0;white-space:nowrap;opacity:0;transform:translate(5px,-50%);pointer-events:none;transition:opacity .18s,transform .18s}
.contact-dock a:focus-visible{background:var(--contact-color);outline:2px solid var(--ink);outline-offset:6px}.contact-dock a:focus-visible .contact-label{opacity:1;transform:translate(0,-50%)}
.contact-dock a:active{transform:scale(.95);background:var(--contact-color)}
@media(hover:hover){.contact-dock a:hover{transform:translateY(-2px);background:var(--contact-color)}.contact-dock a:hover .contact-label{opacity:1;transform:translate(0,-50%)}}
body:has(dialog[open]) .contact-dock{display:none}
@keyframes contact-wave{0%{transform:scale(.8);opacity:0}5%{opacity:.12}30%{transform:scale(1.2);opacity:0}100%{transform:scale(1.2);opacity:0}}
@keyframes contact-nudge{0%,6%,18%,100%{transform:rotate(0)}9%,15%{transform:rotate(-10deg)}12%{transform:rotate(8deg)}}
@media(max-width:650px){nav.contact-dock{right:max(18px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));gap:22px}.contact-dock a{width:46px;height:46px}.contact-dock .contact-symbol{width:31px;height:31px}.contact-dock .dock-phone .contact-symbol{width:22px;height:22px}.contact-dock a::before,.contact-dock a::after{inset:-6px}}
@media(prefers-reduced-motion:reduce){.contact-dock a::before,.contact-dock a::after{animation:none;display:none}.contact-dock .contact-symbol{animation:none}.contact-dock a,.contact-dock .contact-label{transition:none}}