/* ==============================================
   FILE: CSS/floating_icons.css
   (ĐÃ SỬA: HIỂN THỊ RÕ ẢNH ZALO)
   ============================================== */

/* Container (dùng trong Public/footer.php) */
.floating-contact-icons,
.floating-contact-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column; /* Xếp dọc */
    gap: 15px; /* Khoảng cách giữa các icon */
}

/* Style chung cho nút tròn */
.f-icon {
    width: 50px; 
    height: 50px;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-decoration: none;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    position: relative; /* Để căn chỉnh ảnh tuyệt đối nếu cần */
    overflow: visible; /* Cho phép vòng phát ra hiển thị */
    isolation: isolate;
    /* Nháy + rung liên tục */
    animation: iconBlink 1.05s ease-in-out infinite, iconShake 1.8s ease-in-out infinite;
}

.f-icon:hover {
    filter: brightness(1.15);
    box-shadow: 0 8px 18px rgba(0,0,0,0.38);
}

/* Vòng phát ra */
.f-icon::before,
.f-icon::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    border: 2px solid var(--ring-color, rgba(255,255,255,0.45));
    opacity: 0;
    transform: scale(0.65);
    z-index: -1;
    pointer-events: none;
    animation: ringPulse 1.35s ease-out infinite;
}
.f-icon::after {
    inset: -18px;
    border-width: 2px;
    animation-delay: 0.35s;
}

/* --- 1. Icon Hotline (Điện thoại) --- */
.icon-call {
    background-color: #28a745; /* Xanh lá */
    --ring-color: rgba(40, 167, 69, 0.6);
    color: white;
    font-size: 22px;
}

/* --- 2. Icon Zalo (FIX LỖI MẤT ẢNH) --- */
.icon-zalo {
    background-color: #0068ff; /* Xanh Zalo (màu gốc) */
    --ring-color: rgba(0, 104, 255, 0.6);
    padding: 0; /* Xóa padding để ảnh tràn viền */
    overflow: hidden; /* Chỉ clip ảnh Zalo */
}
.icon-zalo img {
    width: 100%;       /* Chiếm hết nút */
    height: 100%;      /* Chiếm hết nút */
    object-fit: cover; /* Cắt ảnh cho vừa hình tròn */
    display: block;    /* Loại bỏ khoảng trắng thừa */
    border-radius: 50%;
}

/* --- 3. Nút Chat Live (Native) --- */
.open-chat-btn {
    background-color: #002d72; /* Xanh đậm */
    --ring-color: rgba(0, 45, 114, 0.6);
    color: white;
    font-size: 22px;
    /* Reset vị trí để nằm trong wrapper */
    position: static; 
    bottom: auto;
    right: auto;
    margin: 0;
}


/* --- KEYFRAMES HIỆU ỨNG --- */

/* Nháy liên tục (nhẹ, hài hoà) */
@keyframes iconBlink {
    0%, 100% {
        opacity: 1;
        filter: brightness(100%);
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    50% {
        opacity: 0.88;
        filter: brightness(140%);
        box-shadow: 0 6px 16px rgba(0,0,0,0.38), 0 0 0 12px rgba(255,255,255,0.10);
    }
}

/* Rung theo nhịp (burst) */
@keyframes iconShake {
    0%, 62%, 100% { transform: translate(0, 0) rotate(0deg); }
    64% { transform: translate(-2px, 0) rotate(-10deg); }
    66% { transform: translate(2px, 0) rotate(10deg); }
    68% { transform: translate(-2px, 0) rotate(-10deg); }
    70% { transform: translate(2px, 0) rotate(10deg); }
    72% { transform: translate(0, 0) rotate(0deg); }
}

/* Vòng phát ra */
@keyframes ringPulse {
    0% {
        opacity: 0.0;
        transform: scale(0.55);
    }
    15% {
        opacity: 0.55;
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}