/* Container chứa các icon nổi */
.floating-contact{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;/* Xếp dọc */
    gap:15px;/* Khoảng cách giữa các icon */}
/* Style chung cho từng nút */
.contact-item{display:block;width:50px;height:50px;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,0.2);transition:transform 0.3s ease,box-shadow 0.3s ease;background-color:#fff;position:relative;cursor:pointer}
/* Hiệu ứng khi di chuột vào */
.contact-item:hover{transform:scale(1.1);/* Phóng to nhẹ */
    box-shadow:0 6px 14px rgba(0,0,0,0.3)}
/* Căn chỉnh ảnh bên trong */
.contact-item .icon-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* --- Style riêng cho nút Hotline (Màu xanh lá & Rung) --- */
.contact-item.hotline{background-color:#22c55e;/* Màu xanh lá */
    display:flex;align-items:center;justify-content:center;animation:shake 2s infinite;/* Hiệu ứng rung */}
/* Vòng tròn lan tỏa (Ping) cho hotline */
.ping-circle{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:rgba(34,197,94,0.7);/* Màu xanh nhạt hơn */
    z-index:-1;/* Nằm chìm phía sau nút */
    animation:ping 1.5s cubic-bezier(0,0,0.2,1) infinite}
/* Định nghĩa hiệu ứng Ping (Lan tỏa) */
@keyframes ping{75%,100%{transform:scale(1.6);opacity:0}}
/* Định nghĩa hiệu ứng Shake (Rung lắc) */
@keyframes shake{0%{transform:rotate(0) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0) scale(1) skew(1deg)}100%{transform:rotate(0) scale(1) skew(1deg)}}
/* Mobile:Điều chỉnh vị trí nếu cần */
@media (max-width:768px){.floating-contact{bottom:15px;right:15px;gap:12px}.contact-item{width:45px;height:45px}}