.scf-wrap{position:fixed;bottom:5px;z-index:9999}

/* Item wrapper */
.scf-item {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.scf-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
.scf-btn img{width:25px;z-index:3; position: relative; top: 1px;}
.scf-btn {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.scf-btn span{position:absolute;width:100%;height:100%;border-radius:50%;animation:scf-wave 1.8s infinite}
.scf-btn span:nth-child(2){animation-delay:.6s}
.scf-btn span:nth-child(3){animation-delay:1.2s}
.scf-zalo{background:#1e88e5}
.scf-zalo span{background:rgb(0, 136, 255)}
.scf-phone{background:#e53935}
.scf-phone span{background:rgb(255, 4, 0)}

/* Label styles - Always visible */
.scf-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: none;
}

.scf-label-left {
    left: 55px;
}

.scf-label-right {
    right: 55px;
}

.scf-label-text {
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

/* Color for Zalo label - blue like button */
.scf-label-zalo {
    background: #1e88e5 !important;
}

/* Color for Phone label - red like button */
.scf-label-phone {
    background: #e53935 !important;
}

/* Hover effect - slight scale */
.scf-item:hover .scf-label-text {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Animation */
@keyframes scf-wave{0%{transform:scale(1);opacity:.45}100%{transform:scale(1.8);opacity:0}}

/* Mobile responsive */
@media(max-width:768px){
    .scf-wrap{
        bottom: 5px;
    }
    
    .scf-label-text {
        font-size: 12px;
        padding: 6px 12px;
    }
}