@font-face {
    font-family: 'SVN-Poppins';
    src: url('fonts/SVN-Poppins.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('fonts/SVN-PoppinsSemiBold.woff2') format('woff2');
    font-weight: 600;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('fonts/SVN-PoppinsBold.woff2') format('woff2');
    font-weight: 700;
}

body {
    font-family: 'SVN-Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.subtitle {
    font-size: 17px;
    color: #fff;
    text-align: center;
    /*  margin-bottom: 5px; */
    text-shadow: 0 0 8px #69c9d0, 0 0 12px #ee1d52;
}

.wish-bar {
    position: relative;
    width: 450px;
    height: 45px;
    border-radius: 25px;
    background: rgba(31, 30, 30, 0.15);
    /*  border: 2px solid rgba(255, 255, 255, 0.2); */
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
}

.water {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ee1d52 0%, #69c9d0 100%);
    border-radius: 25px;
    transition: width 0.4s ease;
}

.water::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -10%;
    width: 120%;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: wave 2s infinite linear;
}

@keyframes wave {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

.water::before {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 50%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.041) 50%, transparent 100%);
    animation: metallic-shine 2s infinite linear;
}

@keyframes metallic-shine {
    0% {
        left: -70%;
    }

    100% {
        left: 130%;
    }
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 6px #69c9d0, 0 0 10px #ee1d52;
    z-index: 2;
}

.bubble {
    position: absolute;
    bottom: 5px;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    opacity: 0.8;
    animation: bubbleUp 1s linear infinite;
}

@keyframes bubbleUp {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0.1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-60px) scale(1.2);
        opacity: 0;
    }
}

.full-glow {
    box-shadow: 0 0 20px #ee1d52, 0 0 40px #69c9d0;
    animation: pulseGlow 1s infinite alternate;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 15px #ee1d52, 0 0 30px #69c9d0;
    }

    100% {
        box-shadow: 0 0 25px #ee1d52, 0 0 50px #69c9d0;
    }
}

.wish-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 25px;
    border-radius: 20px;
    /*   background: rgba(20, 20, 20, 0.5); */
    backdrop-filter: blur(8px);
    /*   box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), 0 0 40px rgba(0, 200, 255, 0.2); */
    max-width: 500px;
    width: 90%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(150px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(150px);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

.remaining-text {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    /*  margin-top: 6px; */
}

/* 🌈 Style 1: Neon TikTok */
.style-neon .wish-bar {
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(31, 30, 30, 0.15);
    /*    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4),
        0 0 20px #ee1d52,
        0 0 40px #69c9d0; */
}

.style-neon .water {
    background: linear-gradient(90deg, #ee1d52, #69c9d0);
}

/* 💎 Style 2: Gold Luxury */
.style-gold .wish-bar {
    background: linear-gradient(145deg, #3b2f1e, #1e1a11);
    border: 2px solid #ffd700;
    /*  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); */
}

.style-gold .water {
    background: linear-gradient(90deg, #ffcc33, #ff9900);
}

.style-gold .text,
.style-gold .subtitle {
    color: white;
}

/* 🌊 Style 3: Ocean Blue */
.style-ocean .wish-bar {
    background: rgba(0, 50, 100, 0.3);
    border: 2px solid rgba(0, 150, 255, 0.3);
    /*  box-shadow: 0 0 30px rgba(0, 150, 255, 0.5); */
}

.style-ocean .water {
    background: linear-gradient(90deg, #00bfff, #0077ff);
}

.style-ocean .text,
.style-ocean .subtitle {
    color: white;
}

/* 🌌 Style 4: Galaxy */
.style-galaxy .wish-bar {
    background: radial-gradient(circle at 30% 30%, #3a0070, #0a001a);
    border: 2px solid #c77dff;
    /*   box-shadow: 0 0 40px #c77dff, 0 0 60px #6f42c1; */
}

.style-galaxy .water {
    background: linear-gradient(90deg, #9d4edd, #5a189a, #3c096c);
}

.style-galaxy .text,
.style-galaxy .subtitle {
    color: white;
}

/* 🌅 Style 5: Sunset (hoàng hôn ấm áp) */
.style-sunset .wish-bar {
    background: linear-gradient(145deg, #2c1a1d, #120b0c);
    border: 2px solid #ff9966;
}

.style-sunset .water {
    background: linear-gradient(90deg, #ff5f6d, #ffc371);
}

.style-sunset .text,
.style-sunset .subtitle {
    color: white;
}

/* 🔥 Style 6: Inferno (lửa mạnh) */
.style-inferno .wish-bar {
    background: linear-gradient(145deg, #2b0000, #0a0000);
    border: 2px solid #ff4500;
}

.style-inferno .water {
    background: linear-gradient(90deg, #ff512f, #dd2476);
}

.style-inferno .text,
.style-inferno .subtitle {
    color: white;
}

/* 🍀 Style 7: Emerald (xanh ngọc) */
.style-emerald .wish-bar {
    background: linear-gradient(145deg, #0a2e1f, #051a11);
    border: 2px solid #00ff99;
}

.style-emerald .water {
    background: linear-gradient(90deg, #00ff99, #00cc66);
}

.style-emerald .text,
.style-emerald .subtitle {
    color: white;
}

/* ⚡ Style 8: Electric (điện xanh tím) */
.style-electric .wish-bar {
    background: linear-gradient(145deg, #0b0033, #000000);
    border: 2px solid #8a2be2;
}

.style-electric .water {
    background: linear-gradient(90deg, #00ffff, #8a2be2);
}

.style-electric .text,
.style-electric .subtitle {
    color: white;
}

/* 🌸 Style 9: Sakura (hồng pastel nhẹ nhàng) */
.style-sakura .wish-bar {
    background: linear-gradient(145deg, #3d2b3d, #1a0f1a);
    border: 2px solid #ffc0cb;
}

.style-sakura .water {
    background: linear-gradient(90deg, #ff9a9e, #fecfef);
}

.style-sakura .text,
.style-sakura .subtitle {
    color: white;
}

/* ☁️ Style 10: Cloud (trắng xanh nhẹ) */
.style-cloud .wish-bar {
    background: linear-gradient(145deg, #1e2a40, #0a1525);
    border: 2px solid #a8cfff;
}

.style-cloud .water {
    background: linear-gradient(90deg, #a8cfff, #89f7fe);
}

.style-cloud .text,
.style-cloud .subtitle {
    color: white;
}

/* 🧊 Style 11: Ice (băng lạnh) */
.style-ice .wish-bar {
    background: linear-gradient(145deg, #001f33, #000a14);
    border: 2px solid #00d4ff;
}

.style-ice .water {
    background: linear-gradient(90deg, #00d4ff, #80eaff);
}

.style-ice .text,
.style-ice .subtitle {
    color: white;
}

/* 🩵 Style 12: Mint (xanh bạc hà) */
.style-mint .wish-bar {
    background: linear-gradient(145deg, #0d2b2b, #081a1a);
    border: 2px solid #00ffaa;
}

.style-mint .water {
    background: linear-gradient(90deg, #00ffaa, #00cc88);
}

.style-mint .text,
.style-mint .subtitle {
    color: white;
}

/* 🌠 Style 13: Aurora (bắc cực quang) */
.style-aurora .wish-bar {
    background: linear-gradient(145deg, #001d3d, #000814);
    border: 2px solid #00ffcc;
}

.style-aurora .water {
    background: linear-gradient(90deg, #00ffcc, #7b2ff7, #f107a3);
}

.style-aurora .text,
.style-aurora .subtitle {
    color: white;
}

/* 💜 Style 14: Dream (tím mơ mộng) */
.style-dream .wish-bar {
    background: linear-gradient(145deg, #2b1b3f, #100418);
    border: 2px solid #d291ff;
}

.style-dream .water {
    background: linear-gradient(90deg, #d291ff, #ffb6ff);
}

.style-dream .text,
.style-dream .subtitle {
    color: white;
}

/* 🌿 Style 15: Forest (rừng sâu) */
.style-forest .wish-bar {
    background: linear-gradient(145deg, #0b1a0b, #050f05);
    border: 2px solid #33cc66;
}

.style-forest .water {
    background: linear-gradient(90deg, #00ff88, #00cc44);
}

.style-forest .text,
.style-forest .subtitle {
    color: white;
}

/* 🧡 Style 16: Candy (kẹo ngọt hồng cam) */
.style-candy .wish-bar {
    background: linear-gradient(145deg, #3a1a2a, #1a0f10);
    border: 2px solid #ff6f91;
}

.style-candy .water {
    background: linear-gradient(90deg, #ff6f91, #ff9671);
}

.style-candy .text,
.style-candy .subtitle {
    color: white;
}

/* 🌻 Style 17: Sunflower (vàng rực rỡ) */
.style-sunflower .wish-bar {
    background: linear-gradient(145deg, #3a2b00, #1a1200);
    border: 2px solid #ffdd33;
}

.style-sunflower .water {
    background: linear-gradient(90deg, #ffdd33, #ffaa00);
}

.style-sunflower .text,
.style-sunflower .subtitle {
    color: white;
}

/* 🌲 Style 18: Pine (xanh thông) */
.style-pine .wish-bar {
    background: linear-gradient(145deg, #051a0b, #020c05);
    border: 2px solid #33ff88;
}

.style-pine .water {
    background: linear-gradient(90deg, #33ff88, #00cc66);
}

.style-pine .text,
.style-pine .subtitle {
    color: white;
}

/* 🪐 Style 19: Cosmic (vũ trụ xanh tím) */
.style-cosmic .wish-bar {
    background: linear-gradient(145deg, #0a0033, #00001a);
    border: 2px solid #7f00ff;
}

.style-cosmic .water {
    background: linear-gradient(90deg, #7f00ff, #5500aa, #330077);
}

.style-cosmic .text,
.style-cosmic .subtitle {
    color: white;
}

/*   /* 🍓 Style 20: Strawberry (hồng đỏ ngọt) */
.style-strawberry .wish-bar {
    background: linear-gradient(145deg, #33000a, #1a0005);
    border: 2px solid #ff4d6d;
}

.style-strawberry .water {
    background: linear-gradient(90deg, #ff4d6d, #ff99aa);
}

.style-strawberry .text,
.style-strawberry .subtitle {
    color: white;
} */


.remaining-wrapper {
    position: relative;
    width: 55%;
    overflow: hidden;
    /* bắt buộc để mask không tràn ra ngoài */
    display: flex;
    justify-content: center;
    background-color: #000000ad;
    padding: 8px;
    border-radius: 30px;
}

.subtitle-wrapper {
    position: relative;
    width: 70%;
    overflow: hidden;
    display: flex;

    justify-content: center;
    padding: 8px;
    /*  border-radius: 30px; */
    background: none;
    /* nền sẽ chuyển sang pseudo-element */
}

/* lớp nền đen mờ + fade 2 bên */
.subtitle-wrapper::after {
    content: "";
    position: absolute;
    inset: -10px;
    /* đẩy ra ngoài */
    border-radius: 40px;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.6) 70%,
            rgba(0, 0, 0, 0.6) 70%,
            rgba(192, 153, 153, 0) 100%);
    filter: blur(8px);
    z-index: 0;
}


/* chữ luôn nổi trên cùng */
.subtitle-wrapper>* {
    position: relative;
    z-index: 1;
    color: white;
}



.remaining-number {
    font-size: 14px;
    font-weight: 700;
    color: #ffd700;
    animation: pulseNumber 2s infinite ease-in-out;
}

@keyframes pulseNumber {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* 🎉 Màn chúc mừng */
.congrats-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'SVN-Poppins', sans-serif;
    /*    font-weight: 700; */
    color: #ffd700;
    font-size: 22px;

    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
    z-index: 10;
}

/* ✨ hiệu ứng xuất hiện */
.congrats-overlay.show {
    opacity: 1;
    transform: scale(1);
    animation: glowPulse 1.5s infinite alternate;
}

@keyframes glowPulse {
    0% {
        color: #fff;
    }

    100% {
        color: #fff;
    }
}