/* --- Cấu trúc và Style cơ bản --- */
.cfb-container {
    position: fixed !important; 
    bottom: var(--cfb-margin-bottom, 20px);
    z-index: 99999 !important; 
    display: flex;
    width: auto;
}
.cfb-pos-left { left: var(--cfb-margin-side, 20px); right: auto; }
.cfb-pos-right { right: var(--cfb-margin-side, 20px); left: auto; }
.cfb-align-vertical { flex-direction: column; }
.cfb-align-horizontal { flex-direction: row; }

.cfb-container a {
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--cfb-size, 3rem);
    height: var(--cfb-size, 3rem);
    padding: 0;
    box-sizing: border-box;
    transition: transform 0.3s ease;
    border-radius: 50%;
}

.cfb-align-vertical a + a { margin-top: var(--cfb-spacing, 10px); }
.cfb-align-horizontal a + a { margin-left: var(--cfb-spacing, 10px); }

.cfb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    border-radius: 50%;
}
.cfb-container a:hover { transform: scale(1.1); }

/* --- HIỆU ỨNG 1: PHÁT SÁNG TỎA RA (PULSE) --- */
@keyframes cfb-rainbow-glow {
    0% { box-shadow: 0 0 12px 4px rgba(255, 107, 107, 0.8); }
    20% { box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.8); }
    40% { box-shadow: 0 0 12px 4px rgba(138, 255, 138, 0.8); }
    60% { box-shadow: 0 0 12px 4px rgba(173, 216, 230, 0.8); }
    80% { box-shadow: 0 0 12px 4px rgba(255, 182, 193, 0.8); }
    100% { box-shadow: 0 0 12px 4px rgba(255, 107, 107, 0.8); }
}

.cfb-container a.glowing.cfb-glow-pulse {
    animation-name: cfb-rainbow-glow;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.cfb-container a.glowing.cfb-glow-pulse.animation-slow { animation-duration: 10s; }
.cfb-container a.glowing.cfb-glow-pulse.animation-medium { animation-duration: 5s; }
.cfb-container a.glowing.cfb-glow-pulse.animation-fast { animation-duration: 2s; }


/* --- HIỆU ỨNG 2: VỆT SÁNG CHẠY QUANH (ORBIT) --- */
@keyframes cfb-orbit-light {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cfb-container a.glowing.cfb-glow-orbit::before {
    content: '';
    position: absolute;
    z-index: -1;
    
    /* Sử dụng biến CSS để tính toán độ dày viền */
    top: calc(-1 * var(--cfb-orbit-width, 0.15rem));
    left: calc(-1 * var(--cfb-orbit-width, 0.15rem));
    right: calc(-1 * var(--cfb-orbit-width, 0.15rem));
    bottom: calc(-1 * var(--cfb-orbit-width, 0.15rem));
    
    border-radius: 50%;
    
    /* Sử dụng biến CSS cho màu sắc */
    background: conic-gradient(
        from 90deg at 50% 50%,
        transparent 0%,
        var(--cfb-orbit-color, #00aaff) 30%, 
        transparent 50%
    );
    animation-name: cfb-orbit-light;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.cfb-container a.glowing.cfb-glow-orbit.animation-slow::before { animation-duration: 6s; }
.cfb-container a.glowing.cfb-glow-orbit.animation-medium::before { animation-duration: 4s; }
.cfb-container a.glowing.cfb-glow-orbit.animation-fast::before { animation-duration: 2s; }