#contact-buttons-widget * { margin:0; padding:0; box-sizing:border-box; }
.cb-wrapper {
    position:fixed; bottom:0; left:0; width:100%; z-index:999;
    background:rgba(255,255,255,0.95); backdrop-filter:blur(10px);
    box-shadow:0 -5px 25px rgba(0,0,0,0.15);
    border-top:3px solid; border-image:linear-gradient(90deg,#00C851,#0084ff,#ff6b6b) 1;
    transition:all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
    transform:translateY(0);
}

/* Hover state cho toàn bộ wrapper */
.cb-wrapper:hover {
    transform:translateY(-2px) !important;
    box-shadow:0 -8px 30px rgba(0,0,0,0.2);
    background:rgba(255,255,255,0.98);
}

.cb-wrapper.hide { 
    opacity:0; 
    transform:translateY(100%); 
    pointer-events:none; 
}

.cb-wrapper.shake { 
    animation:cbShake 0.4s ease-in-out; 
}

/* Khi hover, dừng tất cả animation */
.cb-wrapper:hover * {
    animation-play-state:paused;
}

.cb-banner {
    width:100%; background:linear-gradient(135deg,#ff4757 0%,#ff3742 100%);
    color:white; text-align:center; padding:6px; font-size:12px; font-weight:bold;
    position:relative; overflow:hidden;
    transition:all 0.3s ease;
}

/* Hover effect cho banner */
.cb-wrapper:hover .cb-banner {
    background:linear-gradient(135deg,#ff3742 0%,#ff2f3a 100%);
    transform:scale(1.01);
}

.cb-banner::before {
    content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
    animation:cbSweep 2s ease-in-out infinite;
}

.cb-hot {
    background:#fff; color:#ff4757; padding:2px 8px; border-radius:10px;
    font-size:10px; margin-left:5px; 
    animation:cbHotPulse 1.5s ease-in-out infinite;
    transition:all 0.3s ease;
}

/* Hover effect cho HOT badge */
.cb-wrapper:hover .cb-hot {
    transform:scale(1.1);
    background:#ffebee;
}

.cb-group { 
    padding:10px 8px 15px 8px; 
}

/* Mobile Layout - Rows with spacing */
@media (max-width:600px) {
    .cb-row { 
        display:flex; 
        justify-content:space-around; 
        margin-bottom:12px;
    }
    .cb-row:last-child { margin-bottom:0; }
    .cb-btn { flex:0 0 calc(50% - 6px); margin:0 3px; }
}

/* Desktop Layout - Single row */
@media (min-width:601px) {
    .cb-group { display:flex; justify-content:space-around; flex-wrap:wrap; }
    .cb-row { display:contents; }
    .cb-btn { flex:0 0 calc(25% - 8px); font-size:13px; padding:12px 8px; margin:2px; }
}

.cb-btn {
    background:linear-gradient(135deg,#0070c9 0%,#0056b3 100%);
    color:#fff; padding:10px 6px; border-radius:12px; font-size:12px; font-weight:bold;
    text-decoration:none; text-align:center; display:flex; align-items:center;
    justify-content:center; position:relative; overflow:hidden;
    box-shadow:0 4px 15px rgba(0,112,201,0.3); 
    transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    min-height:48px;
    transform:translateY(0) scale(1);
}

/* Enhanced hover effects cho buttons */
.cb-btn:hover {
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 8px 25px rgba(0,112,201,0.4);
}

.cb-btn:active {
    transform:translateY(-1px) scale(1.02);
    transition:all 0.1s ease;
}

.cb-zalo {
    background:linear-gradient(135deg,#00C851 0%,#007E33 100%);
    box-shadow:0 4px 15px rgba(0,200,81,0.4); 
    animation:cbZaloPulse 2s ease-in-out infinite;
}

.cb-zalo:hover {
    background:linear-gradient(135deg,#00D95F 0%,#008F3A 100%);
    box-shadow:0 8px 25px rgba(0,200,81,0.5);
    transform:translateY(-4px) scale(1.06);
}

.cb-phone {
    background:linear-gradient(135deg,#ff6b6b 0%,#d63031 100%);
    box-shadow:0 4px 15px rgba(255,107,107,0.4);
}

.cb-phone:hover {
    background:linear-gradient(135deg,#ff7979 0%,#e84393 100%);
    box-shadow:0 8px 25px rgba(255,107,107,0.5);
    transform:translateY(-4px) scale(1.06);
}

.cb-icon { 
    margin-right:6px; 
    font-size:16px; 
    transition:all 0.3s ease;
}

/* Icon hover effects */
.cb-btn:hover .cb-icon {
    transform:scale(1.2) rotate(5deg);
}

.cb-btn small { 
    font-size:9px; 
    opacity:0.9; 
    margin-top:1px; 
    display:block; 
    transition:all 0.3s ease;
}

.cb-btn:hover small {
    opacity:1;
    transform:translateY(-1px);
}

/* Shine effect khi hover */
.cb-btn::before {
    content:"";
    position:absolute;
    top:0; left:-100%;
    width:100%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    transition:left 0.5s ease;
}

.cb-btn:hover::before {
    left:100%;
}

/* Animations */
@keyframes cbHotPulse { 
    0%,100%{transform:scale(1);} 
    50%{transform:scale(1.1);} 
}

@keyframes cbZaloPulse { 
    0%,100%{transform:scale(1);} 
    50%{transform:scale(1.02);} 
}

@keyframes cbShake { 
    0%,100%{transform:translateY(0);} 
    25%{transform:translateY(-3px);} 
    75%{transform:translateY(3px);} 
}

@keyframes cbSweep { 
    0%{left:-100%;} 
    100%{left:100%;} 
}

/* Breathing effect khi không hover */
@keyframes cbBreathe {
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-1px) scale(1.005);}
}

.cb-wrapper:not(:hover) {
    animation:cbBreathe 4s ease-in-out infinite;
}

/* Prevent animation conflicts */
.cb-wrapper:hover {
    animation:none !important;
}

/* Focus states for accessibility */
.cb-btn:focus {
    outline:3px solid rgba(66, 153, 225, 0.5);
    outline-offset:2px;
}