@keyframes tgwv-fc-ring-pulse {
    0% {
        opacity: 0.2;
        transform: rotate(0) scale(0.7) skew(1deg);
    }
    50% {
        opacity: 0.2;
        transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        opacity: 0.2;
        transform: rotate(0) scale(0.7) skew(1deg);
    }
}

@keyframes tgwv-fc-ring-shake {
    0% {
        transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg);
    }
}

.tgwv-fc-left {
    --tgwv-fc-left-accent: #a6b00a;
    --tgwv-fc-left-icon-size: 50px;
    --tgwv-fc-left-gap: 10px;
    /* Zalo sticker opaque ≈ 79% khung ảnh → phóng để vòng xanh = icon-size */
    --tgwv-fc-left-zalo-scale: 1.27;
    --tgwv-fc-left-pulse-scale: 1.6;
    --tgwv-fc-scroll-size: 46px;
    --tgwv-fc-scroll-inset: 16px;
    --tgwv-fc-stack-gap: 12px;

    position: fixed;
    right: var(--tgwv-fc-scroll-inset);
    left: auto;
    /* Sit above Back to top: inset + button height + gap */
    bottom: calc(var(--tgwv-fc-scroll-inset) + var(--tgwv-fc-scroll-size) + var(--tgwv-fc-stack-gap));
    z-index: 9990;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--tgwv-fc-left-gap);
}

.tgwv-fc-left__item {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--tgwv-fc-left-icon-size);
    height: var(--tgwv-fc-left-icon-size);
    line-height: 0;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.tgwv-fc-left__item:hover,
.tgwv-fc-left__item:focus-visible {
    opacity: 0.9;
    text-decoration: none;
}

.tgwv-fc-left__img {
    display: block;
    object-fit: contain;
}

/* Zalo: phóng ảnh bù padding trong suốt để vòng xanh = icon-size */
.tgwv-fc-left__zalo {
    overflow: visible;
}

.tgwv-fc-left__zalo .tgwv-fc-left__img {
    width: calc(var(--tgwv-fc-left-icon-size) * var(--tgwv-fc-left-zalo-scale));
    height: calc(var(--tgwv-fc-left-icon-size) * var(--tgwv-fc-left-zalo-scale));
    max-width: none;
}

/* Messenger: cùng đường kính icon-size */
.tgwv-fc-left__messenger {
    border-radius: 50%;
    background: linear-gradient(135deg, #00b2ff 0%, #006aff 50%, #a033ff 100%);
    box-shadow: 0 2px 6px rgba(0, 106, 255, 0.28);
}

.tgwv-fc-left__messenger .tgwv-fc-left__img {
    width: 62%;
    height: 62%;
}

/* Hotline: hộp layout = icon-size; pulse halo tràn ra ngoài (không ảnh hưởng gap) */
.tgwv-fc-ring {
    position: relative;
    overflow: visible;
}

.tgwv-fc-ring__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--tgwv-fc-left-icon-size) * var(--tgwv-fc-left-pulse-scale));
    height: calc(var(--tgwv-fc-left-icon-size) * var(--tgwv-fc-left-pulse-scale));
    margin-top: calc(var(--tgwv-fc-left-icon-size) * var(--tgwv-fc-left-pulse-scale) / -2);
    margin-left: calc(var(--tgwv-fc-left-icon-size) * var(--tgwv-fc-left-pulse-scale) / -2);
    background-color: var(--tgwv-fc-left-accent);
    border: 2px solid transparent;
    border-radius: 100%;
    opacity: 0.2;
    transform-origin: 50% 50% 0;
    pointer-events: none;
    animation: 2.3s ease-in-out 0s normal none infinite running tgwv-fc-ring-pulse;
}

.tgwv-fc-ring__icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tgwv-fc-left-icon-size);
    height: var(--tgwv-fc-left-icon-size);
    background-color: var(--tgwv-fc-left-accent);
    border: 2px solid transparent;
    border-radius: 100%;
    transform-origin: 50% 50% 0;
    animation: 1s ease-in-out 0s normal none infinite running tgwv-fc-ring-shake;
}

.tgwv-fc-ring__img {
    display: block;
    width: 66%;
    height: 66%;
    object-fit: contain;
}

.tgwv-fc-ring__number {
    position: absolute;
    right: calc(100% - 6px);
    left: auto;
    top: 50%;
    z-index: 2;
    padding: 8px 14px;
    background-color: var(--tgwv-fc-left-accent);
    border-radius: 50px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(8px, -50%);
    transition: opacity 0.25s ease, transform 0.3s ease, visibility 0.25s ease;
}

@media (min-width: 992px) {
    .tgwv-fc-ring:hover .tgwv-fc-ring__number,
    .tgwv-fc-ring:focus-visible .tgwv-fc-ring__number {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }
}

/* Back to top: bottom-right, below Zalo / Hotline stack */
.tgwv-fc-scroll-top {
    position: fixed;
    right: var(--tgwv-fc-scroll-inset, 16px);
    bottom: var(--tgwv-fc-scroll-inset, 16px);
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tgwv-fc-scroll-size, 46px);
    height: var(--tgwv-fc-scroll-size, 46px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--tgwv-brand, #0d6efd);
    color: var(--tgwv-color-light, #fff);
    font-size: 17px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.tgwv-fc-scroll-top:hover,
.tgwv-fc-scroll-top:focus-visible {
    color: var(--tgwv-color-light, #fff);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.tgwv-fc-scroll-top__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .tgwv-fc-left {
        --tgwv-fc-left-icon-size: 48px;
        --tgwv-fc-left-gap: 10px;
        --tgwv-fc-scroll-size: 42px;
        --tgwv-fc-scroll-inset: 12px;
        --tgwv-fc-stack-gap: 10px;

        right: var(--tgwv-fc-scroll-inset);
        left: auto;
        bottom: calc(var(--tgwv-fc-scroll-inset) + var(--tgwv-fc-scroll-size) + var(--tgwv-fc-stack-gap));
    }

    .tgwv-fc-scroll-top {
        right: var(--tgwv-fc-scroll-inset, 12px);
        bottom: var(--tgwv-fc-scroll-inset, 12px);
        width: var(--tgwv-fc-scroll-size, 42px);
        height: var(--tgwv-fc-scroll-size, 42px);
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tgwv-fc-ring__pulse,
    .tgwv-fc-ring__icon {
        animation: none;
    }

    .tgwv-fc-left__item,
    .tgwv-fc-ring__number,
    .tgwv-fc-scroll-top {
        transition-duration: 0.01ms;
    }
}

@media print {
    .tgwv-fc-left,
    .tgwv-fc-scroll-top {
        display: none;
    }
}