.pp-floating-cta {
    --pp-cta-bottom: 24px;
    --pp-cta-right: 24px;
    position: fixed;
    right: calc(var(--pp-cta-right) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--pp-cta-bottom) + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    width: max-content;
    max-width: calc(100vw - 32px);
    pointer-events: none;
    font-family: inherit;
}
.pp-floating-cta, .pp-floating-cta * { box-sizing: border-box; }
.pp-floating-cta .pp-floating-cta__notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 3px 3px 3px 13px;
    border: 2px solid #ff7b26;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 28px #2b191112;
    color: #38312d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    pointer-events: auto;
    animation: pp-cta-bounce 1s infinite;
}
.pp-floating-cta .pp-floating-cta__notice[hidden] { display: none; }
.pp-floating-cta__dot { flex: 0 0 8px; height: 8px; border-radius: 50%; background: #ff751f; animation: pp-cta-ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
.pp-floating-cta .pp-floating-cta__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #8b817b;
    cursor: pointer;
}
.pp-floating-cta .pp-floating-cta__close:hover { color: #f54a00; background: #fff1e8; }
.pp-floating-cta .pp-floating-cta__button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 16px #241b1626;
    color: #fff;
    text-decoration: none;
    pointer-events: auto;
    transition: transform .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.pp-floating-cta .pp-floating-cta__zalo { background: #0068ff; }
.pp-floating-cta__zalo-word { font-family: Arial, sans-serif; font-size: 15px; font-weight: 900; letter-spacing: -.6px; }
.pp-floating-cta .pp-floating-cta__call {
    width: 64px;
    height: 64px;
    background: linear-gradient(45deg, #dc2626, #ea580c, #f59e0b);
    animation: pp-cta-pulse-glow 2s infinite;
}
 .pp-floating-cta__call-wrap::before,
.pp-floating-cta__call-wrap::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}
.pp-floating-cta__call-wrap::before {
    background: #ea580c;
    animation: pp-cta-ripple 2s cubic-bezier(0, .2, .8, 1) infinite;
}
.pp-floating-cta__call-wrap::after {
    background: #ef4444;
    animation: pp-cta-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
.pp-floating-cta .pp-floating-cta__call svg { display: block; width: 28px; height: 28px; animation: pp-cta-shake 1.2s infinite; transform-origin: center; }
.pp-floating-cta .pp-floating-cta__tooltip {
    position: absolute;
    right: calc(100% + 13px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    border-radius: 9px;
    background: #2b1911;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
}
.pp-floating-cta :is(a, button):focus-visible { outline: 3px solid #713516; outline-offset: 5px; }
.pp-floating-cta__button:focus-visible .pp-floating-cta__tooltip { opacity: 1; visibility: visible; }
@media (hover: hover) and (pointer: fine) {
    .pp-floating-cta .pp-floating-cta__button:hover { transform: scale(1.1); color: #fff; box-shadow: 0 8px 22px #241b1633; }
    .pp-floating-cta__button:hover .pp-floating-cta__tooltip { opacity: 1; visibility: visible; }
}
.pp-floating-cta .pp-floating-cta__button:active { transform: scale(.95); }
.pp-floating-cta .pp-floating-cta__call .pp-floating-cta__tooltip { background: #ea580c; }
@keyframes pp-cta-shake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
    20%, 40%, 60%, 80% { transform: rotate(10deg); }
}
@keyframes pp-cta-ripple {
    0% { transform: scale(.95); opacity: .8; }
    50% { transform: scale(1.4); opacity: .3; }
    100% { transform: scale(1.8); opacity: 0; }
}
@keyframes pp-cta-ping {
    0% { transform: scale(1); opacity: .75; }
    75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes pp-cta-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .7); }
    50% { box-shadow: 0 0 0 15px rgba(249, 115, 22, 0); }
}
@keyframes pp-cta-bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
@media (max-width: 767px) {
    .pp-floating-cta {
        --pp-cta-bottom: 18px;
        --pp-cta-right: 14px;
        align-items: center;
        gap: 11px;
    }
    .pp-floating-cta .pp-floating-cta__notice,
    .pp-floating-cta .pp-floating-cta__tooltip { display: none; }
    .pp-floating-cta .pp-floating-cta__button { width: 50px; height: 50px; box-shadow: 0 4px 12px #241b1626; }
    .pp-floating-cta .pp-floating-cta__call { width: 56px; height: 56px; }
    .pp-floating-cta .pp-floating-cta__call svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .pp-floating-cta *, .pp-floating-cta *::before, .pp-floating-cta *::after { animation: none; transition: none; }
    .pp-floating-cta__call-wrap::before, .pp-floating-cta__call-wrap::after { display: none; }
}

.pp-floating-cta__call-wrap { position: relative; isolation: isolate; width: 64px; height: 64px; border-radius: 50%; pointer-events: auto; }
@media (max-width: 767px) { .pp-floating-cta__call-wrap { width: 56px; height: 56px; } }