/* DistrictM Vinyl Chat — bìa đĩa than */
#dm-vinyl-chat {
    position: fixed;
    right: 56px;
    bottom: 24px;
    z-index: 1000;
    cursor: pointer;
    animation: dm-vc-float 3.6s ease-in-out infinite;
}

#dm-vinyl-chat:hover,
#dm-vinyl-chat.is-open {
    animation-play-state: paused;
    bottom: 28px;
}

.dm-vinyl-disc {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #ffffff 0 4.5%, transparent 4.7%),
        radial-gradient(circle at 50% 50%, #00b7d4 0 22%, transparent 22.2%),
        radial-gradient(circle at 50% 50%, #0a0a0a 0 26%, transparent 26.2%),
        repeating-radial-gradient(
            circle at 50% 50%,
            #6a6a6a 0px,
            #6a6a6a 1.2px,
            #3a3a3a 1.2px,
            #3a3a3a 2.6px
        );
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    z-index: 1;
    animation: dm-vc-spin 3.4s linear infinite;
    pointer-events: none;
}

.dm-vinyl-disc::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 55% 22% at 58% 62%, rgba(180, 120, 255, 0.35), transparent 70%),
        radial-gradient(ellipse 50% 20% at 42% 68%, rgba(80, 200, 255, 0.28), transparent 70%),
        radial-gradient(ellipse 70% 28% at 50% 8%, rgba(255, 255, 255, 0.5), transparent 70%),
        linear-gradient(90deg, transparent 18%, rgba(0, 0, 0, 0.28) 34%, transparent 42%, transparent 58%, rgba(0, 0, 0, 0.28) 66%, transparent 82%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.dm-vinyl-disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px #111;
    pointer-events: none;
}

.dm-sleeve {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 3px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    display: block;
}

.dm-sleeve__cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20%;
    border-radius: inherit;
    background:
        radial-gradient(
            ellipse 210% 125% at 50% 112%,
            #e9a31c 0 61%,
            transparent 61.2%
        ),
        #3a6842;
    border: 1px solid rgba(20, 40, 28, 0.28);
    box-shadow:
        0 10px 22px rgba(17, 24, 39, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 22px;
    overflow: hidden;
}

.dm-sleeve__cover i.fa-comments,
.dm-sleeve__cover i.fa-times,
.dm-sleeve__cover i.fa-xmark {
    opacity: 1 !important;
    transform: none !important;
    color: #fff;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.dm-sleeve__slide {
    position: absolute;
    inset: 4px;
    z-index: 1;
    pointer-events: none;
    transform: translateX(10%);
    transition: transform 0.5s cubic-bezier(0.4, 0.05, 0.2, 1);
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.28));
}

.dm-sleeve .dm-vinyl-disc {
    position: absolute;
    inset: 0;
    animation-play-state: paused;
}

#dm-vinyl-chat:hover .dm-sleeve__slide,
#dm-vinyl-chat:focus-visible .dm-sleeve__slide,
#dm-vinyl-chat.is-open .dm-sleeve__slide,
.dm-sleeve:hover .dm-sleeve__slide,
.dm-sleeve:focus-visible .dm-sleeve__slide {
    transform: translateX(50%);
}

#dm-vinyl-chat:hover .dm-vinyl-disc,
#dm-vinyl-chat:focus-visible .dm-vinyl-disc,
#dm-vinyl-chat.is-open .dm-vinyl-disc,
.dm-sleeve:hover .dm-vinyl-disc,
.dm-sleeve:focus-visible .dm-vinyl-disc {
    animation-play-state: running;
}

#dm-vinyl-chat.is-open .dm-sleeve__cover {
    background:
        radial-gradient(
            ellipse 210% 125% at 50% 112%,
            #c98918 0 61%,
            transparent 61.2%
        ),
        #2a5232;
}

.dm-sleeve-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    width: min(280px, calc(100vw - 32px));
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom right;
    transition:
        opacity 0.28s ease,
        transform 0.36s cubic-bezier(0.4, 0.05, 0.2, 1),
        visibility 0.28s;
    z-index: 2;
}

#dm-vinyl-chat.is-open .dm-sleeve-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dm-sleeve-panel__gate {
    display: grid;
    grid-template-columns: 1fr 10px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 22px 48px rgba(17, 24, 39, 0.22),
        0 8px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(30, 50, 36, 0.28);
    background: #f4efe6;
}

.dm-sleeve-panel__inner {
    padding: 18px 16px 16px;
    background: linear-gradient(180deg, #faf6ef 0%, #f0e8da 100%);
    position: relative;
}

.dm-sleeve-panel__inner::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(61, 107, 69, 0.22);
    border-radius: 2px;
    pointer-events: none;
}

.dm-sleeve-panel__title {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-align: center;
    color: #3a6842;
    font-weight: 700;
    position: relative;
}

.dm-sleeve-panel__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.dm-sleeve-panel__links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1612;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(61, 107, 69, 0.14);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.dm-sleeve-panel__links a:hover {
    background: #fff;
    border-color: rgba(61, 107, 69, 0.35);
    transform: translateX(2px);
}

.dm-sleeve-panel__links a i {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    color: #fff;
}

.dm-sleeve-panel__links a[href^="tel"] i {
    background: #3a6842;
}

.dm-sleeve-panel__links a[href*="facebook"] i {
    background: #1877f2;
}

.dm-sleeve-panel__zalo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    border-radius: 6px;
}

.dm-sleeve-panel__spine {
    background:
        radial-gradient(
            ellipse 220% 130% at 50% 112%,
            #e9a31c 0 58%,
            transparent 58.2%
        ),
        #3a6842;
    position: relative;
}

.dm-sleeve-panel__spine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 40%);
    pointer-events: none;
}

@keyframes dm-vc-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes dm-vc-float {
    0%,
    100% {
        bottom: 24px;
    }
    50% {
        bottom: 28px;
    }
}

@keyframes dm-vc-float-mobile {
    0%,
    100% {
        bottom: 16px;
    }
    50% {
        bottom: 20px;
    }
}

@media (max-width: 767px) {
    #dm-vinyl-chat {
        right: 40px;
        bottom: 16px;
        animation-name: dm-vc-float-mobile;
    }

    #dm-vinyl-chat:hover,
    #dm-vinyl-chat.is-open {
        bottom: 20px;
    }

    .dm-sleeve {
        width: 60px;
        height: 60px;
    }

    .dm-sleeve__cover {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #dm-vinyl-chat,
    .dm-vinyl-disc {
        animation: none !important;
    }

    .dm-sleeve__slide,
    .dm-sleeve-panel {
        transition: none !important;
    }
}