.vcd-contact{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:980;
    display:flex;
    flex-direction:column;
    gap:14px;
    /* tránh vùng bo tròn / thanh cử chỉ trên điện thoại */
    margin-bottom:env(safe-area-inset-bottom,0);
}
.vcd-contact__item{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(10,35,63,.28);
    transition:transform .25s ease, box-shadow .25s ease;
    -webkit-tap-highlight-color:transparent;
}
.vcd-contact__item:hover,
.vcd-contact__item:focus-visible{
    color:#fff;
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 10px 24px rgba(10,35,63,.36);
}
.vcd-contact__item:focus-visible{outline:3px solid #efa758;outline-offset:3px}
.vcd-contact__item--phone{background:#2b4675}
.vcd-contact__item--zalo{background:#0068ff}

.vcd-contact__item svg{width:27px;height:27px;display:block;position:relative;z-index:2}
.vcd-contact__zalo-text{
    font:700 15px/1 'Roboto Condensed',Arial,Helvetica,sans-serif;
    letter-spacing:.4px;
    position:relative;
    z-index:2;
}

/* vòng sóng lan toả */
.vcd-contact__item::before,
.vcd-contact__item::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:inherit;
    opacity:.55;
    z-index:1;
    animation:vcd-contact-pulse 2.4s cubic-bezier(.25,.8,.4,1) infinite;
}
.vcd-contact__item::after{animation-delay:1.2s}
@keyframes vcd-contact-pulse{
    0%  {transform:scale(1);opacity:.5}
    70% {transform:scale(1.85);opacity:0}
    100%{transform:scale(1.85);opacity:0}
}

/* nhãn trượt ra khi rê chuột */
.vcd-contact__label{
    position:absolute;
    right:calc(100% + 12px);
    top:50%;
    transform:translate(8px,-50%);
    white-space:nowrap;
    background:#0a233f;
    color:#fff;
    font:600 13px/1 'Roboto Condensed',Arial,Helvetica,sans-serif;
    letter-spacing:.3px;
    padding:9px 13px;
    border-radius:6px;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
    box-shadow:0 4px 14px rgba(10,35,63,.25);
}
.vcd-contact__label::after{
    content:'';
    position:absolute;
    left:100%;
    top:50%;
    margin-top:-5px;
    border:5px solid transparent;
    border-left-color:#0a233f;
}
.vcd-contact__item:hover .vcd-contact__label,
.vcd-contact__item:focus-visible .vcd-contact__label{
    opacity:1;
    transform:translate(0,-50%);
}

@media (max-width:639px){
    .vcd-contact{right:14px;bottom:14px;gap:11px}
    .vcd-contact__item{width:50px;height:50px}
    .vcd-contact__item svg{width:24px;height:24px}
    .vcd-contact__zalo-text{font-size:13px}
    .vcd-contact__label{display:none}
}

@media (prefers-reduced-motion:reduce){
    .vcd-contact__item::before,
    .vcd-contact__item::after{animation:none;opacity:0}
    .vcd-contact__item{transition:none}
    .vcd-contact__item:hover{transform:none}
}