/* Lucian UX/UI Prompt #006 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#006 */
.u006-call{position:fixed;left:26px;bottom:26px;z-index:180;width:58px;height:198px}
.u006-call .u006-btn{position:absolute;left:0;display:grid;width:58px;height:58px;padding:0;place-items:center;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:var(--deep);color:#fff;box-shadow:0 18px 34px -14px rgba(3,43,39,.72);transition:background-color .55s var(--ux-ease),box-shadow .5s var(--ux-ease),transform .45s var(--ux-spring)}
.u006-call .u006-quote{top:0;background:#fff;border-color:rgba(255,85,85,.22)}
.u006-call .u006-quote img{width:42px;height:42px;object-fit:contain}
.u006-call .u006-zalo{top:70px;background:#fff;border-color:rgba(0,104,255,.22);box-shadow:0 18px 34px -14px rgba(0,92,224,.45)}
.u006-call .u006-phone-btn{bottom:0}
.u006-call .u006-btn:hover{transform:translateY(-3px);background:var(--gold)}
.u006-call .u006-quote:hover{background:#fff4f1}
.u006-call .u006-zalo:hover{background:#eef5ff}
.u006-call .u006-btn:active{transform:scale(.94)}
.u006-call .u006-btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}
.u006-call .u006-zalo-logo{position:relative;z-index:1;width:38px;height:38px;display:grid;place-items:center;border-radius:13px;overflow:hidden}
.u006-call .u006-zalo-logo img{width:100%;height:100%;object-fit:contain}
.u006-call .u006-phone{position:relative;z-index:1;width:24px;height:24px;transform-origin:50% 50%;animation:u006-ring 4.4s var(--ux-ease) infinite}
.u006-call .u006-phone svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u006-call .u006-ink{position:absolute;z-index:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--gold-bright);pointer-events:none;animation:u006-ink .75s var(--ux-ease) forwards}
.u006-call .u006-pulse{position:absolute;left:-5px;bottom:-5px;width:68px;height:68px;border:1px solid color-mix(in srgb,var(--gold-bright) 72%,transparent);border-radius:50%;animation:u006-pulse 2.2s ease-out infinite;pointer-events:none}
.u006-call .u006-tip{position:absolute;left:68px;width:max-content;padding:8px 11px;border-radius:8px;background:var(--deep);color:#fff;font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translate(-6px,-50%);transition:opacity .25s var(--ux-ease),transform .35s var(--ux-spring);pointer-events:none}
.u006-call .u006-tip-quote{top:29px}.u006-call .u006-tip-zalo{top:99px}.u006-call .u006-tip-phone{top:169px}
.u006-call .u006-quote:hover+.u006-tip,.u006-call .u006-quote:focus-visible+.u006-tip,.u006-call .u006-zalo:hover+.u006-tip,.u006-call .u006-zalo:focus-visible+.u006-tip,.u006-call .u006-phone-btn:hover+.u006-tip,.u006-call .u006-phone-btn:focus-visible+.u006-tip{opacity:1;transform:translate(0,-50%)}
@keyframes u006-ink{from{transform:scale(0);opacity:.9}to{transform:scale(var(--s));opacity:1}}
@keyframes u006-ring{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(18deg)}90%{transform:rotate(-15deg)}94%{transform:rotate(9deg)}97%{transform:rotate(-4deg)}}
@keyframes u006-pulse{0%{opacity:.72;transform:scale(.88)}72%,100%{opacity:0;transform:scale(1.28)}}
@media(max-width:560px){.u006-call{display:none}}
@media(prefers-reduced-motion:reduce){.u006-call .u006-phone,.u006-call .u006-pulse{animation:none}}