/* Floating Contact Buttons */

.floating-contact-buttons {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 999;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.contact-card {

    display: flex;

    align-items: center;

    gap: 12px;

    background: white;

    padding: 12px 16px;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    text-decoration: none;

    transition: all 0.3s ease;

    min-width: 220px;

}



.contact-card:hover {

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

    transform: translateX(-5px);

}



.contact-icon {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    color: white;

    flex-shrink: 0;

}



.messenger-icon {

    background: linear-gradient(135deg, #0084ff, #00a4ff);

}



.zalo-icon {

    background: linear-gradient(135deg, #0084ff, #00a4ff);

}



.phone-icon {

    background: #25d366;

}



.contact-info {

    display: flex;

    flex-direction: column;

}



.contact-title {

    font-weight: 600;

    color: #333;

    font-size: 14px;

}



.contact-time {

    font-size: 12px;

    color: #999;

    margin-top: 2px;

}

.zalo-icon svg {

    width: 24px;

    height: 24px;

    color: white;

}



/* Mobile Responsive */

@media (max-width: 768px) {

    .floating-contact-buttons {

        bottom: 70px;

        right: 10px;

        gap: 10px;

    }



    .contact-card {

        min-width: 200px;

        padding: 10px 14px;

    }



    .contact-icon {

        width: 45px;

        height: 45px;

        font-size: 20px;

    }



    .contact-title {

        font-size: 13px;

    }



    .contact-time {

        font-size: 11px;

    }

}