/* ==========================================================================
   DLV Welcome Voucher Popup - Concept 1: Interactive Mystery Unboxing
   Theme: Luxury Floating 3D Gift Box -> Explosive Unboxing -> VIP Ticket Reveal
   Brand Color: var(--c-primary, #ed007f)
   ========================================================================== */

/* 1. BACKDROP & AMBIENT CANVAS */
.dlv-wvc-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999999;
    display: none;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.dlv-wvc-backdrop.dlv-wvc-in {
    display: flex;
    pointer-events: auto;
    opacity: 1;
}

.dlv-wvc-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Nút đóng ngoài cùng góc trên màn hình (đảm bảo luôn đóng được dù ở Stage nào) */
.dlv-wvc-close-backdrop {
    position: fixed;
    top: 20px;
    right: 22px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: 26px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.dlv-wvc-close-backdrop:hover {
    background: var(--c-primary, #ed007f);
    border-color: var(--c-primary, #ed007f);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(237, 0, 127, 0.45);
}

/* Ambient Floating Clouds & Sky elements */
.dlv-wvc-cloud {
    position: absolute;
    background: #ffffff;
    border-radius: 100px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.75;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3));
}

.dlv-wvc-cloud::before,
.dlv-wvc-cloud::after {
    content: '';
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
}

.dlv-wvc-cloud-1 {
    width: 180px;
    height: 54px;
    top: 12%;
    left: 5%;
    animation: dlvCloudDrift1 20s ease-in-out infinite alternate;
}

.dlv-wvc-cloud-1::before {
    width: 72px;
    height: 72px;
    top: -34px;
    left: 28px;
}

.dlv-wvc-cloud-1::after {
    width: 88px;
    height: 88px;
    top: -46px;
    left: 76px;
}

.dlv-wvc-cloud-2 {
    width: 150px;
    height: 48px;
    bottom: 12%;
    right: 6%;
    opacity: 0.65;
    animation: dlvCloudDrift2 24s ease-in-out infinite alternate-reverse;
}

.dlv-wvc-cloud-2::before {
    width: 60px;
    height: 60px;
    top: -28px;
    left: 24px;
}

.dlv-wvc-cloud-2::after {
    width: 70px;
    height: 70px;
    top: -36px;
    left: 64px;
}

@keyframes dlvCloudDrift1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(45px, -15px); }
}

@keyframes dlvCloudDrift2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-40px, 12px); }
}

.dlv-wvc-airplane-float {
    position: absolute;
    top: 14%;
    right: 18%;
    color: rgba(255, 255, 255, 0.85);
    font-size: 28px;
    pointer-events: none;
    z-index: 1;
    animation: dlvPlaneFly 14s linear infinite;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

@keyframes dlvPlaneFly {
    0% { transform: translate(-120px, 40px) rotate(-15deg); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(180px, -60px) rotate(-15deg); opacity: 0; }
}


/* ==========================================================================
   STAGE 1: INTERACTIVE 3D GIFT BOX TEASER (Chạm Để Mở Quà)
   ========================================================================== */
.dlv-wvc-teaser-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 480px;
    width: 100%;
    z-index: 5;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    animation: dlvTeaserEnter 0.6s cubic-bezier(0.34, 1.4, 0.7, 1) forwards;
}

@keyframes dlvTeaserEnter {
    0% {
        transform: scale(0.6) translateY(50px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.dlv-wvc-teaser-wrap.dlv-wvc-teaser-hidden {
    transform: scale(0.3) translateY(40px);
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

/* Hào quang nền phía sau hộp quà */
.dlv-wvc-teaser-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237, 0, 127, 0.35) 0%, rgba(251, 191, 36, 0.22) 45%, transparent 70%);
    filter: blur(35px);
    pointer-events: none;
    z-index: 0;
    animation: dlvAuraPulse 4s ease-in-out infinite alternate;
}

@keyframes dlvAuraPulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* Ánh dương 360 độ quay tròn sau hộp quà */
.dlv-wvc-teaser-sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg, 
        rgba(251, 191, 36, 0.25) 0deg, transparent 15deg,
        rgba(237, 0, 127, 0.25) 30deg, transparent 45deg,
        rgba(251, 191, 36, 0.25) 60deg, transparent 75deg,
        rgba(237, 0, 127, 0.25) 90deg, transparent 105deg,
        rgba(251, 191, 36, 0.25) 120deg, transparent 135deg,
        rgba(237, 0, 127, 0.25) 150deg, transparent 165deg,
        rgba(251, 191, 36, 0.25) 180deg, transparent 195deg,
        rgba(251, 191, 36, 0.25) 210deg, transparent 225deg,
        rgba(251, 191, 36, 0.25) 240deg, transparent 255deg,
        rgba(237, 0, 127, 0.25) 270deg, transparent 285deg,
        rgba(251, 191, 36, 0.25) 300deg, transparent 315deg,
        rgba(237, 0, 127, 0.25) 330deg, transparent 345deg,
        rgba(251, 191, 36, 0.25) 360deg
    );
    animation: dlvSunburstRotate 20s linear infinite;
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
}

@keyframes dlvSunburstRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Badge Chào Mừng */
.dlv-wvc-teaser-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--c-primary, #ed007f);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(237, 0, 127, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
    z-index: 1;
}

.dlv-wvc-badge-sparkle {
    font-size: 14px;
    display: inline-block;
    animation: dlvSparkleSpin 3s linear infinite;
}

@keyframes dlvSparkleSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

.dlv-wvc-teaser-title {
    position: relative;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0 0 24px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    line-height: 1.35;
    z-index: 1;
}

/* Khối Hộp Quà 3D Tương Tác (Clickable Stage) */
.dlv-wvc-gift-stage {
    position: relative;
    width: 200px;
    height: 190px;
    margin: 0 auto 20px;
    cursor: pointer;
    perspective: 800px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dlv-wvc-gift-stage:hover {
    transform: scale(1.06);
}

.dlv-wvc-gift-stage:active {
    transform: scale(0.96);
}

/* Vòng xoay hạt sáng quanh hộp quà */
.dlv-wvc-gift-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 2px dashed rgba(251, 191, 36, 0.6);
    animation: dlvSpinRing 10s linear infinite;
    pointer-events: none;
}

@keyframes dlvSpinRing {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Các hạt sparkle lơ lửng xung quanh hộp quà */
.dlv-wvc-gift-burst-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.dlv-bp {
    position: absolute;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
    animation: dlvParticleFloat 3s ease-in-out infinite alternate;
}

.dlv-bp-1 { top: 10px; left: 10px; font-size: 22px; animation-delay: 0.1s; }
.dlv-bp-2 { top: 0px; right: 15px; font-size: 20px; animation-delay: 0.5s; }
.dlv-bp-3 { bottom: 45px; left: -10px; font-size: 24px; animation-delay: 0.9s; }
.dlv-bp-4 { bottom: 50px; right: -5px; font-size: 20px; animation-delay: 1.3s; }
.dlv-bp-5 { top: 60px; right: -18px; font-size: 22px; animation-delay: 0.7s; }

@keyframes dlvParticleFloat {
    0% { transform: translateY(0) scale(0.9) rotate(-10deg); opacity: 0.7; }
    100% { transform: translateY(-14px) scale(1.15) rotate(15deg); opacity: 1; }
}

/* Cụm Hộp Quà 3D bồng bềnh + rung lắc nhẹ mời gọi click */
.dlv-wvc-gift-box-3d {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 10px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    animation: dlvBoxLevitate 3.6s ease-in-out infinite alternate, dlvBoxWiggle 4s ease-in-out infinite;
    z-index: 2;
}

/* Chuyển động lơ lửng bồng bềnh êm ái */
@keyframes dlvBoxLevitate {
    0% { transform: translateY(0); }
    100% { transform: translateY(-16px); }
}

/* Rung rinh nảy nhẹ mỗi 4s để kích thích tò mò người dùng */
@keyframes dlvBoxWiggle {
    0%, 75%, 100% { transform: translateY(0) rotate(0deg); }
    80% { transform: translateY(-6px) rotate(-6deg) scale(1.05); }
    85% { transform: translateY(-10px) rotate(6deg) scale(1.08); }
    90% { transform: translateY(-4px) rotate(-4deg) scale(1.04); }
    95% { transform: translateY(-2px) rotate(2deg) scale(1.02); }
}

/* Nắp hộp quà (Lid) */
.dlv-wvc-gift-lid-wrap {
    position: relative;
    width: 142px;
    height: 38px;
    z-index: 5;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dlv-wvc-gift-lid-cap {
    width: 100%;
    height: 28px;
    background: linear-gradient(145deg, #ff2a8d 0%, #ed007f 60%, #c40069 100%);
    border-radius: 10px 10px 4px 4px;
    box-shadow: 0 6px 16px rgba(216, 0, 111, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.dlv-wvc-lid-ribbon-stripe {
    width: 22px;
    height: 100%;
    background: linear-gradient(180deg, #fffbeb 0%, #fbbf24 50%, #d97706 100%);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}

/* Nơ lụa 3D đỉnh nắp hộp quà */
.dlv-wvc-gift-bow-3d {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    z-index: 6;
}

.dlv-bow-center {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #fffbeb 0%, #f59e0b 100%);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 1px #ffffff;
    z-index: 3;
}

.dlv-bow-left,
.dlv-bow-right {
    position: absolute;
    top: 2px;
    width: 26px;
    height: 22px;
    background: linear-gradient(135deg, #fef08a 0%, #f59e0b 70%, #d97706 100%);
    border-radius: 50% 50% 20% 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

.dlv-bow-left {
    left: 6px;
    transform: rotate(-30deg);
}

.dlv-bow-right {
    right: 6px;
    transform: rotate(30deg) scaleX(-1);
}

.dlv-bow-ribbon-l,
.dlv-bow-ribbon-r {
    position: absolute;
    top: 18px;
    width: 14px;
    height: 20px;
    background: linear-gradient(180deg, #fbbf24 0%, #b45309 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%);
}

.dlv-bow-ribbon-l {
    left: 14px;
    transform: rotate(-25deg);
}

.dlv-bow-ribbon-r {
    right: 14px;
    transform: rotate(25deg);
}

/* Thân hộp quà 3D (Base Cube) */
.dlv-wvc-gift-cube {
    position: relative;
    width: 126px;
    height: 94px;
    background: linear-gradient(145deg, #ed007f 0%, #c40069 65%, #990050 100%);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 36px rgba(237, 0, 127, 0.5), 0 0 0 2.5px #ffffff, inset 0 2px 6px rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

.dlv-cube-front {
    position: relative;
    width: 100%;
    height: 100%;
}

.dlv-cube-ribbon-v {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 100%;
    background: linear-gradient(180deg, #fffbeb 0%, #fbbf24 50%, #d97706 100%);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
}

.dlv-cube-ribbon-h {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg, #fffbeb 0%, #fbbf24 50%, #d97706 100%);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
}

.dlv-cube-vip-tag {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 3;
}

/* Ánh sáng vàng bừng nổ từ trong hộp quà khi mở */
.dlv-wvc-gift-inner-light {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 30px;
    background: radial-gradient(ellipse at center, #fffbeb 0%, #fbbf24 60%, transparent 100%);
    box-shadow: 0 0 35px 12px rgba(251, 191, 36, 0.95);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Bóng đổ dưới hộp quà */
.dlv-wvc-gift-shadow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 18px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    animation: dlvShadowScale 3.6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}

@keyframes dlvShadowScale {
    0% { transform: translateX(-50%) scale(1); opacity: 0.65; }
    100% { transform: translateX(-50%) scale(0.65); opacity: 0.3; }
}

/* ==========================================================================
   HIỆU ỨNG MỞ NẮP QUÀ (UNBOXING EXPLOSION EFFECT)
   ========================================================================== */
.dlv-wvc-unboxing .dlv-wvc-gift-stage {
    pointer-events: none;
}

.dlv-wvc-unboxing .dlv-wvc-gift-lid-wrap {
    transform: translate(-35px, -110px) rotate(-42deg) scale(1.2) !important;
    opacity: 0;
}

.dlv-wvc-unboxing .dlv-wvc-gift-inner-light {
    opacity: 1;
    transform: translateX(-50%) scale(2);
}

.dlv-wvc-unboxing .dlv-wvc-gift-cube {
    transform: scale(0.92);
    filter: brightness(1.2);
    transition: all 0.4s ease;
}

/* Nút Chạm Mở Quà (Interactive CTA) */
.dlv-wvc-teaser-action {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dlv-wvc-unbox-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--c-primary, #ed007f) 0%, #db0075 50%, #c40069 100%);
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 800;
    padding: 14px 32px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(237, 0, 127, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: dlvBtnPulse 2.4s infinite;
}

@keyframes dlvBtnPulse {
    0% { transform: scale(1); box-shadow: 0 12px 32px rgba(237, 0, 127, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.9); }
    50% { transform: scale(1.05); box-shadow: 0 16px 40px rgba(237, 0, 127, 0.7), 0 0 0 5px rgba(255, 255, 255, 1); }
    100% { transform: scale(1); box-shadow: 0 12px 32px rgba(237, 0, 127, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.9); }
}

.dlv-wvc-unbox-btn:hover {
    background: linear-gradient(135deg, #ff1a94 0%, #e00078 100%);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 18px 45px rgba(237, 0, 127, 0.7);
}

.dlv-wvc-unbox-btn:active {
    transform: translateY(0) scale(0.98);
}

.dlv-wvc-unbox-btn-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    transform: skewX(-25deg);
    animation: dlvShimmer 2.5s infinite;
    pointer-events: none;
}

@keyframes dlvShimmer {
    0% { left: -100%; }
    50%, 100% { left: 200%; }
}

.dlv-wvc-unbox-hand {
    font-size: 20px;
    animation: dlvHandTap 1.5s ease-in-out infinite;
}

@keyframes dlvHandTap {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.dlv-wvc-teaser-hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-weight: 500;
}


/* ==========================================================================
   STAGE 2: REVEALED LUXURY VOUCHER CARD (Vé Voucher Sang Trọng Bung Nở)
   ========================================================================== */
.dlv-wvc-card {
    position: relative;
    background: #ffffff;
    border-radius: 30px;
    width: 100%;
    max-width: 540px;
    box-shadow: 0 25px 70px -15px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.9) inset, 0 15px 40px rgba(237, 0, 127, 0.18);
    overflow: visible;
    text-align: center;
    padding: 34px 26px 24px;
    box-sizing: border-box;
    z-index: 6;
    display: none;
    opacity: 0;
    transform: scale(0.3) translateY(60px);
    transition: transform 0.15s ease-out; /* Phục vụ 3D mouse parallax mượt mà */
    transform-style: preserve-3d;
}

/* Khi mở quà thành công: Card bung nở với hiệu ứng Spring Bounce tuyệt đẹp */
.dlv-wvc-card.dlv-wvc-card-revealed {
    display: block !important;
    animation: dlvWvcCardEnterSpring 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dlvWvcCardEnterSpring {
    0% {
        transform: scale(0.3) translateY(60px) rotate(-3deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.04) translateY(-10px) rotate(1deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0) rotate(0deg);
        opacity: 1;
    }
}

/* Viền ánh sáng hào quang vàng hồng sang trọng */
.dlv-wvc-card-border-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(237, 0, 127, 0.5), rgba(251, 191, 36, 0.55), rgba(237, 0, 127, 0.45));
    background-size: 200% 200%;
    animation: dlvBorderGlowFlow 5s ease infinite;
    z-index: -1;
    filter: blur(6px);
    pointer-events: none;
}

@keyframes dlvBorderGlowFlow {
    0% { background-position: 0% 50%; opacity: 0.7; }
    50% { background-position: 100% 50%; opacity: 1; }
    100% { background-position: 0% 50%; opacity: 0.7; }
}

/* Ánh hào quang tỏa sáng nền sau card */
.dlv-wvc-glow-aura {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 260px;
    background: radial-gradient(circle, rgba(237, 0, 127, 0.25) 0%, rgba(255, 114, 172, 0.12) 50%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
    animation: dlvPulseAura 4s ease-in-out infinite alternate;
}

@keyframes dlvPulseAura {
    0% { transform: translateX(-50%) scale(0.95); opacity: 0.7; }
    100% { transform: translateX(-50%) scale(1.18); opacity: 1; }
}

/* Vòng tròn trang trí bay bổng */
.dlv-wvc-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.dlv-wvc-orb-1 {
    width: 140px;
    height: 140px;
    top: -30px;
    right: -30px;
    background: radial-gradient(circle, #fce7f3 0%, rgba(253, 242, 248, 0) 70%);
    animation: dlvFloatOrb 6s ease-in-out infinite alternate;
}

.dlv-wvc-orb-2 {
    width: 110px;
    height: 110px;
    bottom: -20px;
    left: -20px;
    background: radial-gradient(circle, #ffe4e6 0%, rgba(255, 241, 242, 0) 70%);
    animation: dlvFloatOrb 5s ease-in-out infinite alternate-reverse;
}

@keyframes dlvFloatOrb {
    0% { transform: translate(0, 0); }
    100% { transform: translate(12px, 14px); }
}

/* Nút đóng trên Card */
.dlv-wvc-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    background: rgba(248, 250, 252, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid #e2e8f0;
    border-radius: 50%;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dlv-wvc-close:hover {
    background: #ffe4ef;
    color: var(--c-primary, #ed007f);
    border-color: #fbcfe8;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 14px rgba(237, 0, 127, 0.3);
}

.dlv-wvc-close:active {
    transform: rotate(90deg) scale(0.95);
}

/* Header Elements */
.dlv-wvc-header {
    position: relative;
    margin-bottom: 18px;
    z-index: 1;
}

.dlv-wvc-banner-wrap {
    display: none;
    position: relative;
    margin: -6px 0 16px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
    background: #f8fafc;
}

.dlv-wvc-banner-img {
    width: 100%;
    max-height: 220px;
    min-height: 130px;
    object-fit: cover;
    display: block;
}

.dlv-wvc-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.85) 100%);
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

.dlv-wvc-overlay .dlv-wvc-badge-tag {
    background: rgba(255, 255, 255, 0.95);
    color: var(--c-primary, #ed007f);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    margin-bottom: 8px;
}

.dlv-wvc-overlay .dlv-wvc-title {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 800;
}

.dlv-wvc-overlay .dlv-wvc-sub {
    color: #f8fafc;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    font-size: 13px;
    max-width: 420px;
    line-height: 1.4;
    margin: 0;
}

/* Fallback Header (Khi không up banner ảnh) */
.dlv-wvc-fallback-header {
    display: block;
    position: relative;
}

.dlv-wvc-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    background: #fff0f6;
    color: var(--c-primary, #ed007f);
    border-radius: 24px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 8px;
    border: 1px solid rgba(237, 0, 127, 0.3);
    box-shadow: 0 2px 8px rgba(237, 0, 127, 0.08);
}

.dlv-wvc-title {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.dlv-wvc-sub {
    font-size: 13.5px;
    color: #475569;
    margin: 0 auto;
    max-width: 440px;
    line-height: 1.5;
    font-weight: 500;
}

/* ==========================================================================
   VÉ VOUCHER HÀNG KHÔNG / DU LỊCH VIP (VIP Boarding Pass Design)
   ========================================================================== */
.dlv-wvc-ticket-wrap {
    display: flex;
    background: #ffffff;
    border: 1.5px solid #fecdd3;
    border-radius: 18px;
    box-shadow: 0 10px 28px -5px rgba(237, 0, 127, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 1;
}

.dlv-wvc-ticket-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -4px rgba(237, 0, 127, 0.22), 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Ruy băng góc VIP GIFT */
.dlv-wvc-vip-ribbon {
    position: absolute;
    top: 14px;
    left: -32px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 30px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
    pointer-events: none;
    z-index: 5;
}

/* Phần bên trái vé: Giá trị ưu đãi & Tên voucher */
.dlv-wvc-ticket-left {
    flex: 1.25;
    background: linear-gradient(135deg, #fff5f8 0%, #ffe9f2 100%);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dlv-wvc-ticket-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    transform: skewX(-25deg);
    animation: dlvTicketShine 4s infinite;
    pointer-events: none;
}

@keyframes dlvTicketShine {
    0%, 60% { left: -100%; }
    100% { left: 200%; }
}

.dlv-wvc-discount-tag {
    font-size: 28px;
    font-weight: 900;
    color: var(--c-primary, #ed007f);
    line-height: 1.15;
    margin-bottom: 6px;
    letter-spacing: -0.6px;
    text-shadow: 0 1px 2px rgba(237, 0, 127, 0.12);
}

.dlv-wvc-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
}

/* Vạch ngăn đục lỗ giữa 2 phần vé */
.dlv-wvc-ticket-divider {
    position: relative;
    width: 0;
    border-left: 2px dashed #f472b6;
    background: #ffffff;
}

.dlv-wvc-notch {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 1.5px solid #fecdd3;
    border-radius: 50%;
    left: -11px;
    z-index: 2;
}

.dlv-wvc-notch-top {
    top: -11px;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
}

.dlv-wvc-notch-bottom {
    bottom: -11px;
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(45deg);
}

/* Phần bên phải vé: Mã code, Nút copy, Hạn sử dụng */
.dlv-wvc-ticket-right {
    flex: 1.25;
    background: #ffffff;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dlv-wvc-code-lbl {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dlv-wvc-code-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    padding: 7px 14px;
    margin-bottom: 9px;
    transition: all 0.2s ease;
    white-space: nowrap;
    max-width: 100%;
}

.dlv-wvc-code-box:hover {
    border-color: var(--c-primary, #ed007f);
    background: #fff7fa;
}

.dlv-wvc-code-val {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 16px;
    font-weight: 800;
    color: var(--c-primary, #ed007f);
    letter-spacing: 1.2px;
    white-space: nowrap;
}

.dlv-wvc-copy-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dlv-wvc-copy-btn span {
    white-space: nowrap;
}

.dlv-wvc-copy-btn:hover {
    background: var(--c-primary, #ed007f);
    color: #ffffff;
    border-color: var(--c-primary, #ed007f);
    box-shadow: 0 3px 8px rgba(237, 0, 127, 0.25);
}

.dlv-wvc-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
    width: 100%;
}

#dlvWvcExpiry {
    white-space: nowrap;
    display: inline-block;
}

/* ==========================================================================
   FOOTER & CTA BUTTON
   ========================================================================== */
.dlv-wvc-footer {
    width: 100%;
    z-index: 1;
}

.dlv-wvc-use-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: linear-gradient(135deg, var(--c-primary, #ed007f) 0%, #db0075 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15.5px;
    padding: 13.5px 22px;
    border-radius: 30px;
    text-decoration: none !important;
    text-align: center;
    box-shadow: 0 10px 25px -3px rgba(237, 0, 127, 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.dlv-wvc-btn-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    transform: skewX(-25deg);
    animation: dlvBtnShimmer 3s infinite;
    pointer-events: none;
}

@keyframes dlvBtnShimmer {
    0%, 50% { left: -100%; }
    100% { left: 200%; }
}

.dlv-wvc-use-btn i {
    font-size: 16px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dlv-wvc-use-btn:hover {
    background: linear-gradient(135deg, #ff1a94 0%, #c40069 100%);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 14px 30px -4px rgba(237, 0, 127, 0.55);
}

.dlv-wvc-use-btn:hover i {
    transform: translate(3px, -2px) rotate(8deg);
}

.dlv-wvc-use-btn:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 4px 12px rgba(237, 0, 127, 0.35);
}

.dlv-wvc-hint {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #94a3b8;
}

.dlv-wvc-hint a {
    color: var(--c-primary, #ed007f);
    text-decoration: underline;
    font-weight: 600;
}

.dlv-wvc-hint a:hover {
    color: #c40069;
}

/* ==========================================================================
   RESPONSIVE OPTIMIZATIONS (Mobile & Small Tablets)
   ========================================================================== */
@media (max-width: 560px) {
    .dlv-wvc-teaser-wrap {
        max-width: 90vw;
    }

    .dlv-wvc-teaser-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .dlv-wvc-gift-stage {
        width: 170px;
        height: 160px;
        margin-bottom: 14px;
    }

    .dlv-wvc-gift-box-3d {
        transform: scale(0.85);
    }

    .dlv-wvc-unbox-btn {
        font-size: 14.5px;
        padding: 12px 24px;
    }

    .dlv-wvc-card {
        padding: 28px 16px 18px;
        border-radius: 24px;
        max-width: 94vw;
    }

    .dlv-wvc-cloud,
    .dlv-wvc-airplane-float {
        display: none !important;
    }

    .dlv-wvc-title {
        font-size: 19px;
    }

    .dlv-wvc-sub {
        font-size: 12.5px;
    }

    .dlv-wvc-ticket-wrap {
        flex-direction: column;
    }

    .dlv-wvc-ticket-divider {
        width: 100%;
        height: 0;
        border-left: none;
        border-top: 2px dashed #f472b6;
    }

    .dlv-wvc-notch {
        top: -10px !important;
        bottom: auto !important;
    }

    .dlv-wvc-notch-top {
        left: -10px;
    }

    .dlv-wvc-notch-bottom {
        right: -10px;
        left: auto;
    }

    .dlv-wvc-ticket-left {
        padding: 16px 14px 12px;
    }

    .dlv-wvc-discount-tag {
        font-size: 24px;
    }

    .dlv-wvc-ticket-right {
        padding: 14px 12px 16px;
    }

    .dlv-wvc-use-btn {
        font-size: 14px;
        padding: 12px 16px;
    }
}