/* Facebook Messenger Custom Styles */
.fb-customerchat {
    /* Đảm bảo chat plugin không che các thành phần quan trọng */
    z-index: 9999 !important;
}

/* Container cho desktop và mobile */
.fb-customerchat-desktop,
.fb-customerchat-mobile {
    position: relative;
}

/* Tùy chỉnh vị trí hiển thị */
.fb-customerchat.fb_iframe_widget_fluid_desktop {
    /* Đảm bảo vị trí cố định ở góc phải màn hình */
    position: fixed !important;
    bottom: 80px !important; /* Đặt vị trí cao hơn để không đè lên Back to Top */
    right: 20px !important; /* Điều chỉnh để tránh chồng lấn với nút Back to Top */
}

/* Tùy chỉnh trên mobile */
.fb-customerchat.fb_iframe_widget_fluid_mobile {
    /* Đảm bảo vị trí cố định ở góc phải màn hình mobile */
    position: fixed !important;
    bottom: 75px !important; /* Đặt vị trí cao hơn để không đè lên Back to Top trên mobile */
    right: 15px !important; /* Điều chỉnh để tránh chồng lấn với nút Back to Top */
}

/* Tùy chỉnh cho chat dialog */
.fb_dialog.fb_dialog_advanced {
    /* Đảm bảo dialog không che header khi mở */
    bottom: 80px !important;
    right: 20px !important; /* Điều chỉnh để tránh chồng lấn với nút Back to Top */
}

/* Tùy chỉnh cho button chat */
iframe.fb_customer_chat_bounce_in_v2 {
    /* Thêm hiệu ứng mượt mà khi hiển thị */
    animation: fadeInUp 0.3s ease-out !important;
}

/* Tùy chỉnh cho container */
.fb_customer_chat_container {
    /* Đảm bảo không ảnh hưởng đến các thành phần khác */
    position: fixed !important;
    z-index: 9999 !important;
}

/* Tùy chỉnh khi chat đang mở */
.fb_customer_chat_container.is_minimized {
    /* Vị trí khi thu nhỏ */
    bottom: 80px !important; /* Đặt vị trí cao hơn để không đè lên Back to Top */
    right: 20px !important; /* Điều chỉnh để tránh chồng lấn với nút Back to Top */
}

.fb_customer_chat_container.is_maximized {
    /* Vị trí khi mở rộng */
    bottom: 80px !important; /* Đặt vị trí cao hơn để không đè lên Back to Top */
    right: 20px !important; /* Điều chỉnh để tránh chồng lấn với nút Back to Top */
}

/* Animation cho chat plugin */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive cho các thiết bị khác nhau */
@media (max-width: 768px) {
    .fb-customerchat.fb_iframe_widget_fluid_mobile {
        /* Điều chỉnh kích thước trên mobile */
        bottom: 75px !important; /* Đặt vị trí cao hơn để không đè lên Back to Top trên mobile */
        right: 15px !important; /* Điều chỉnh để tránh chồng lấn với nút Back to Top trên mobile */
    }

    .fb_dialog.fb_dialog_advanced {
        /* Điều chỉnh vị trí dialog trên mobile */
        bottom: 75px !important; /* Đặt vị trí cao hơn để không đè lên Back to Top trên mobile */
        right: 15px !important; /* Điều chỉnh để tránh chồng lấn với nút Back to Top trên mobile */
        left: 15px !important;
        max-width: calc(100vw - 30px) !important; /* Điều chỉnh max-width để phù hợp với right mới */
    }
}

/* Đảm bảo chat plugin không che các nút quan trọng khác */
.back-to-top {
    /* Điều chỉnh vị trí nếu cần */
    z-index: 9998 !important;
}

/* Tùy chỉnh cho container mobile */
.fb-customerchat-mobile .fb-customerchat {
    /* Điều chỉnh kích thước cho mobile */
    transform: scale(0.9);
    transform-origin: bottom right;
}

/* Tùy chỉnh cho container desktop */
.fb-customerchat-desktop .fb-customerchat {
    /* Kích thước mặc định cho desktop */
    transform: scale(1);
}

/* Ẩn greeting dialog mặc định để tránh phiền nhiễu */
.fb-customerchat .fb_dialog_greeting {
    display: none !important;
}

/* Tùy chỉnh cho trạng thái minimized */
.fb-customerchat .fb_customer_chat_bounce_in {
    /* Hiệu ứng mượt mà khi hiển thị */
    animation: bounceIn 0.5s ease-out !important;
}

/* Animation bounce in */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Tùy chỉnh cho chat bubble trên mobile */
@media (max-width: 480px) {
    .fb-customerchat-mobile .fb-customerchat {
        transform: scale(0.8);
        transform-origin: bottom right;
    }

    /* Điều chỉnh vị trí cho màn hình rất nhỏ */
    .fb-customerchat.fb_iframe_widget_fluid_mobile {
        right: 60px !important; /* Giảm khoảng cách cho màn hình rất nhỏ */
    }

    .fb_dialog.fb_dialog_advanced {
        right: 60px !important; /* Giảm khoảng cách cho màn hình rất nhỏ */
        max-width: calc(100vw - 75px) !important; /* Điều chỉnh max-width tương ứng */
    }
}

/* Đảm bảo chat không che footer trên mobile */
@media (max-width: 768px) {
    .fb_customer_chat_container.is_maximized {
        /* Giảm chiều cao dialog trên mobile để không che footer */
        max-height: calc(100vh - 120px) !important;
        bottom: 75px !important; /* Đặt vị trí cao hơn để không đè lên Back to Top trên mobile */
        right: 15px !important; /* Điều chỉnh vị trí khi mở rộng trên mobile */
    }
}

/* Đảm bảo nút Back to Top có z-index cao hơn */
.back-to-top {
    z-index: 10000 !important;
}

/* Animation cho icon điện thoại rung */
@keyframes ring {
    0% {
        transform: rotate(0deg);
    }
    5% {
        transform: rotate(10deg);
    }
    10% {
        transform: rotate(-10deg);
    }
    15% {
        transform: rotate(10deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    25% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Styles cho icon điện thoại */
.phone-messenger-fallback-link,
.phone-messenger-link {
    /* Animation rung liên tục */
    animation: ring 2s infinite;
}

/* Hover effects cho icon điện thoại */
.phone-messenger-fallback-link:hover,
.phone-messenger-link:hover {
    animation-play-state: paused;
}

/* Responsive cho icon điện thoại */
@media (max-width: 768px) {
    .phone-messenger-fallback-link,
    .phone-messenger-link {
        bottom: 200px !important;
        right: 30px !important;
        width: 45px !important;
        height: 45px !important;
    }

    /* Điều chỉnh vị trí Zalo icon trên mobile */
    .zalo-messenger-fallback-link {
        bottom: 150px !important;
        right: 30px !important;
        width: 45px !important;
        height: 45px !important;
    }

    /* Điều chỉnh vị trí Facebook icon trên mobile */
    .fb-messenger-fallback-link {
        bottom: 100px !important;
        right: 30px !important;
        width: 45px !important;
        height: 45px !important;
    }
}

@media (max-width: 480px) {
    .phone-messenger-fallback-link,
    .phone-messenger-link {
        bottom: 200px !important;
        right: 30px !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Điều chỉnh vị trí Zalo icon trên mobile rất nhỏ */
    .zalo-messenger-fallback-link {
        bottom: 150px !important;
        right: 30px !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Điều chỉnh vị trí Facebook icon trên mobile rất nhỏ */
    .fb-messenger-fallback-link {
        bottom: 100px !important;
        right: 30px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* Styles cho Zalo và Facebook icon fallback */
.zalo-messenger-fallback-link,
.fb-messenger-fallback-link {
    position: fixed !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.zalo-messenger-fallback-link {
    bottom: 140px !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
}

.fb-messenger-fallback-link {
    bottom: 80px !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    background-color: #0084ff !important;
    color: white !important;
    font-weight: bold !important;
    box-shadow: 0 4px 12px rgba(0, 132, 255, 0.3) !important;
}