/* Container bao bọc các nút */
.floating-cta-wrapper {
    position: fixed;
    bottom: 30px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
}

/* Định dạng cơ bản cho nút */
.cta-btn {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(135deg, #001435 0%, #1d4cf0 100%); 

    border-radius: 20px; /* Bo góc squircle */
    
    /* Hiệu ứng kính mờ (Glassmorphism) */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* Tạo viền mờ ảo bên trong */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
                0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* CSS hiện đại tạo viền Gradient sáng ở 2 đầu */
.cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.2px; /* Độ dày của viền gradient */
    /* background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; */
    mask-composite: exclude;
    pointer-events: none;
}

/* Hiệu ứng phát sáng màu xanh (Glow) giống SVG gốc */
.glow-effect {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(7,143,255,0.8) 0%, rgba(0,0,0,0) 70%);
    opacity: 0; /* Ẩn mặc định, có thể đổi thành 0.4 nếu muốn sáng liên tục */
    transition: opacity 0.3s ease;
    border-radius: 20px;
    filter: blur(15px);
    z-index: -1;
}

/* Hover effect */
.cta-btn:hover {
    transform: translateY(-3px);
}
.cta-btn:hover .glow-effect {
    opacity: 0.8; /* Sáng lên khi di chuột vào */
}

/* Căn giữa Icon */
.icon-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Animation rung cho Icon */
.icon-wrap svg {
    animation: phone-ring 1s infinite ease-in-out;
    transform-origin: center center;
}

/* Keyframe hiệu ứng rung nguyên bản */
@keyframes phone-ring {
    0%   { transform: rotate(0); }
    10%  { transform: rotate(-25deg); }
    20%  { transform: rotate(25deg); }
    30%  { transform: rotate(-25deg); }
    40%  { transform: rotate(25deg); }
    50%  { transform: rotate(0); }
    100% { transform: rotate(0); }
}