/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.fcb-container { position: fixed; bottom: 30px; right: 30px; z-index: 999; display: flex; flex-direction: column-reverse; align-items: center; }
.fcb-main-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative; /* Bắt buộc để làm tâm cho radar */
    z-index: 10; /* Đảm bảo nút nằm trên cùng */
    background-color: #0065F8; /* Màu nền gốc của radar */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

/* Ảnh bên trong nút chính */
.fcb-main-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 11; /* Ảnh phải nằm trên các vòng radar */
}

/* Tạo hiệu ứng Radar */
.fcb-main-button::before,
.fcb-main-button::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: inherit; /* Lấy màu nền từ nút chính */
    z-index: -1; /* Nằm dưới ảnh */
    animation: fcb-radar-wave 2s linear infinite;
}

.fcb-main-button::after {
    animation-delay: 1s;
}

@keyframes fcb-radar-wave {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Tùy chọn: Tắt hiệu ứng khi menu đang mở (active) để đỡ rối mắt */
.fcb-container.active .fcb-main-button::before,
.fcb-container.active .fcb-main-button::after {
    animation: none;
    display: none;
}
.fcb-sub-buttons { display: none; flex-direction: column; margin-bottom: 15px; gap: 10px; }
.fcb-link { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-weight: bold; }
.color-phone { background: #4caf50; }
.color-zalo { background: #0084ff; }
.color-fb { background: #00c6ff; }
/* Khi active */
.fcb-container.active .fcb-sub-buttons { display: flex; }
.fcb-container.active .fcb-main-button { transform: rotate(45deg); }