
.dsz-floating-zalo {
    position: fixed;
    z-index: 9998;
    width: var(--dsz-size-mobile);
    height: var(--dsz-size-mobile);
    bottom: var(--dsz-bottom-mobile);
    isolation: isolate;
}

.dsz-floating-zalo.dsz-pos-left {
    left: var(--dsz-side-mobile);
}
.dsz-floating-zalo.dsz-pos-right {
    right: var(--dsz-side-mobile);
}

.dsz-floating-zalo::before,
.dsz-floating-zalo::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    border: 2px solid rgba(0, 120, 255, .42);
    background: rgba(0, 120, 255, .05);
    pointer-events: none;
    z-index: -1;
    animation: dsz-wave 2.8s ease-out infinite;
}

.dsz-floating-zalo::after {
    animation-delay: 1.4s;
}

.dsz-floating-zalo__button {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #0b86ff;
    box-shadow:
        0 8px 22px rgba(0, 92, 190, .28),
        0 0 0 6px rgba(11, 134, 255, .12);
    overflow: hidden;
    text-decoration: none;
    transform-origin: 50% 80%;
    animation: dsz-attention var(--dsz-shake-interval) ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

.dsz-floating-zalo__button img {
    display: block;
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.dsz-floating-zalo__button:hover {
    transform: translateY(-2px) scale(1.03);
}

.dsz-floating-zalo__button:focus-visible {
    outline: 3px solid rgba(11, 134, 255, .35);
    outline-offset: 4px;
}

@keyframes dsz-wave {
    0% {
        transform: scale(.82);
        opacity: .72;
    }
    72% {
        opacity: .18;
    }
    100% {
        transform: scale(1.72);
        opacity: 0;
    }
}

/* Yên hầu hết thời gian, rung rất nhẹ ở cuối chu kỳ */
@keyframes dsz-attention {
    0%, 82%, 100% { transform: translate3d(0,0,0) rotate(0); }
    84% { transform: translate3d(-1px,0,0) rotate(-5deg); }
    86% { transform: translate3d(1px,0,0) rotate(5deg); }
    88% { transform: translate3d(-1px,0,0) rotate(-4deg); }
    90% { transform: translate3d(1px,0,0) rotate(4deg); }
    92% { transform: translate3d(0,0,0) rotate(0); }
}

/* Trang thành viên FNE: nâng nút lên trên bottom nav */
body.dsz-member-page .dsz-floating-zalo {
    bottom: var(--dsz-member-bottom-mobile);
}

@media (min-width: 769px) {
    .dsz-floating-zalo {
        width: var(--dsz-size-desktop);
        height: var(--dsz-size-desktop);
        bottom: var(--dsz-bottom-desktop);
    }
    .dsz-floating-zalo.dsz-pos-left {
        left: var(--dsz-side-desktop);
    }
    .dsz-floating-zalo.dsz-pos-right {
        right: var(--dsz-side-desktop);
    }
    body.dsz-member-page .dsz-floating-zalo {
        bottom: var(--dsz-bottom-desktop);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dsz-floating-zalo::before,
    .dsz-floating-zalo::after,
    .dsz-floating-zalo__button {
        animation: none !important;
    }
}
