.contact-fixed{
    position:fixed;
    bottom:30px;
    left:20px;
    display:flex;
    flex-direction:column;
    gap:35px;
    z-index:999;
}

.contact-item{
    position:relative;
    width:60px;
    height:60px;
}

.contact-item img{
    width:55px;
    height:55px;
    position:relative;
    z-index:2;
}

.contact-item::before,
.contact-item::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:60px;
    height:60px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:pulse 2s infinite;
}

.contact-item::after{
    animation-delay:1s;
}

#zaloBox::before,
#zaloBox::after{
    background:rgba(0,150,255,0.35);
}

#phoneBox::before,
#phoneBox::after{
    background:rgba(255,0,0,0.35);
}

@keyframes pulse{
    0%{
        transform:translate(-50%,-50%) scale(1);
        opacity:0.7;
    }
    70%{
        transform:translate(-50%,-50%) scale(1.8);
        opacity:0;
    }
    100%{
        opacity:0;
    }
}

.contact-close{
    position:absolute;
    top:-8px;
    right:-8px;
    background:#d40000;
    color:#fff;
    width:20px;
    height:20px;
    border-radius:50%;
    font-size:12px;
    text-align:center;
    line-height:20px;
    cursor:pointer;
    z-index:3;
}

.contact-item img{
    animation:phoneRing 1.2s infinite;
}

@keyframes phoneRing{
    0%{transform:rotate(0)}
    25%{transform:rotate(10deg)}
    50%{transform:rotate(-10deg)}
    75%{transform:rotate(10deg)}
    100%{transform:rotate(0)}
}

#phoneBox{
    background:#e60000;
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

#phoneBox img{
    width:32px;
    height:32px;
}

#zaloBox img{
    width:55px;
    height:55px;
}