/* --- Desktop VR Style --- */
.button-lbm-wrapper { 
    position: fixed; 
    z-index: 99999; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    align-items: center; 
}

.button-lbm-item { 
    position: relative; 
    width: 80px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.button-lbm-item a { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-decoration: none !important; 
}

/* Vòng tròn VR tỏa sóng */
.button-lbm-circle-fill { 
    width: 60px; 
    height: 60px; 
    position: absolute; 
    top: 0; 
    border-radius: 50%; 
    animation: lbm-pulse 2.3s infinite ease-in-out; 
    z-index: 1; 
}

/* Vòng tròn chứa Icon - GIỮ MÀU NỀN ĐỂ HIỆN ICON TRONG SUỐT */
.button-lbm-img-circle { 
    width: 42px; 
    height: 42px; 
    margin-top: 9px; 
    position: relative; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
    animation: lbm-shake 1s infinite ease-in-out; 
    z-index: 2; 
}

.button-lbm-img-circle img { 
    width: 24px; 
    height: 24px; 
    object-fit: contain; 
}

.button-lbm-text { 
    display: block; 
    font-size: 11px; 
    color: #333; 
    font-weight: 600; 
    text-align: center; 
    margin-top: 8px; 
    white-space: nowrap; 
}

/* Badge Thông báo */
.button-lbm-badge { 
    position: absolute; 
    top: -2px; 
    right: -2px; 
    width: 12px; 
    height: 12px; 
    background: #ff0000; 
    border: 2px solid #fff; 
    border-radius: 50%; 
    z-index: 3; 
    animation: lbm-zoom 1s infinite; 
}

/* --- Mobile View (Fix lỗi mất màu icon) --- */
@media (max-width: 768px) {
    .button-lbm-wrapper {
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100%; height: 65px; background: #fff; 
        flex-direction: row; justify-content: space-around; 
        border-top: 1px solid #eee; padding-bottom: env(safe-area-inset-bottom);
        align-items: center;
    }
    .button-lbm-item { width: 25%; height: 100%; justify-content: center; }
    
    /* KHÔNG dùng background: transparent ở đây để hiện màu icon trong suốt */
    .button-lbm-img-circle { 
        margin-top: 0; 
        width: 32px; 
        height: 32px; 
        animation: none; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    }
    
    .button-lbm-img-circle img { width: 18px; height: 18px; }
    .button-lbm-circle-fill { display: none; }
    .button-lbm-text { margin-top: 4px; font-size: 10px; }
}

@keyframes lbm-shake { 0%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-15deg); } 20%, 40% { transform: rotate(15deg); } }
@keyframes lbm-pulse { 0% { transform: scale(0.9); opacity: 0.8; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(0.9); opacity: 0; } }
@keyframes lbm-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }