/* Container chính cho cụm nút chat */
.fab-container {
    position: fixed;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9998; /* Đổi z-index xuống thấp hơn Back to top một chút */
    pointer-events: none; /* QUAN TRỌNG: Cho phép click xuyên qua vùng trống của container này */
    transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fab-container-right {
    right: 20px;
}

.fab-container-left {
    left: 20px;
}

/* Kiểu dáng chung cho toàn bộ nút tròn */
.fab-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.25s ease-in-out;
    position: relative;
    pointer-events: auto; /* Khôi phục lại tính năng click cho bản thân các nút bấm */
}

.fab-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.fab-button img {
    width: 28px;
    height: 28px;
    transition: transform 0.2s ease-in-out;
}

/* Ẩn các nút chat thành viên khi chưa bấm kích hoạt */
.fab-sub-button {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hiển thị các nút chat thành viên khi container có class .open */
.fab-container.open .fab-sub-button {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto; /* Kích hoạt lại click cho nút con khi bung menu */
}

#fab-toggle-main {
    cursor: pointer;
    z-index: 2;
}

/* Hiệu ứng xoay icon chat thành dấu X */
.fab-container.open #fab-toggle-main svg {
    transform: translate(-50%, -50%) rotate(135deg);
}

#fab-toggle-main svg {
    transition: transform 0.3s ease-in-out;
}

/* ĐỊNH VỊ NÚT BACK TO TOP ĐỘC LẬP - LUÔN NẰM TRÊN CÙNG ĐỂ KHÔNG BỊ CHE KHUẤT */
#fab-scroll-top {
    position: fixed;
    bottom: 85px; /* Mặc định nằm ngay trên nút chat chính */
    z-index: 9999; /* Đẩy lên cao nhất để luôn click được */
    display: none;
    pointer-events: auto; /* Luôn luôn cho phép click */
    transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Định vị trái phải đồng bộ cho nút Back to Top */
#fab-scroll-top.fab-container-right {
    right: 20px;
}
#fab-scroll-top.fab-container-left {
    left: 20px;
}

/* HIỆU ỨNG SÓNG LAN TỎA (CHỈ CHẠY CHO NÚT CÓ CLASS .fab-ripple) */
.fab-ripple::before,
.fab-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: inherit;
    z-index: -1;
    animation: sonar-effect 2s infinite ease-out;
}

.fab-ripple::after {
    animation-delay: 0.7s;
}

@keyframes sonar-effect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}