/* Transparent Overlay Modal */



.wheel-modal-overlay {



    position: fixed;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-color: rgba(0, 0, 0, 0.75);



    backdrop-filter: blur(8px);



    display: none;



    justify-content: center;



    align-items: center;



    z-index: 99999;



    opacity: 0;



    transition: opacity 0.3s ease;



}







.wheel-modal-overlay.show {



    display: flex;



    opacity: 1;



}







.wheel-modal-card {



    position: relative;



    width: 840px;



    border-radius: 0;



    background: transparent;



    box-shadow: none;



    border: none;



    padding: 30px 20px;



    text-align: center;



    overflow: visible;



    transform: scale(0.85);



    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);



}







.wheel-modal-overlay.show .wheel-modal-card {



    transform: scale(1);



}







.modal-close-btn {



    position: absolute;



    top: 75px;



    right: 75px;



    background: #e2e8f0;



    border: 2px solid #ffffff;



    color: #475569 !important;



    width: 32px;



    height: 32px;



    border-radius: 50%;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 16px;



    transition: all 0.2s;



    z-index: 20;



    line-height: 1;



    padding: 0;



    box-shadow: 0 2px 6px rgba(0,0,0,0.15);



}







.modal-close-btn:hover, .modal-close-btn:active {



    background: #fee2e2;



    color: #ef4444 !important;



    transform: scale(1.08);



}







/* Rotating ray beams & confetti */



.modal-sparkles-container {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    pointer-events: none;



    z-index: 0;



    overflow: hidden;



}







.beam-ray {



    position: absolute;



    top: -50%;



    left: -50%;



    width: 200%;



    height: 200%;



    background: repeating-conic-gradient(from 0deg,



            rgba(255, 255, 255, 0.03) 0deg 15deg,



            transparent 15deg 30deg);



    transform-origin: center center;



    animation: rotateBeams 25s linear infinite;



}







.confetti-piece {



    position: absolute;



    width: 6px;



    height: 12px;



    border-radius: 2px;



    opacity: 0.8;



}







/* Realistic Floating Gift Boxes */



.floating-gift-box {



    position: absolute;



    font-size: 72px;



    z-index: 5;



    opacity: 0;



    transform: scale(0);



    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));



}







.floating-gift-box.left-box {



    left: -85px;



    bottom: -10px;



    color: #ff9800;



    text-shadow: 0 0 20px rgba(255, 152, 0, 0.6);



}







.floating-gift-box.right-box {



    right: -85px;



    bottom: 10px;



    color: #ff3d00;



    text-shadow: 0 0 20px rgba(255, 61, 0, 0.6);



}







.wheel-modal-overlay.show .floating-gift-box.left-box {



    animation: popGiftLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, floatGift 3s ease-in-out infinite alternate 0.8s;



}







.wheel-modal-overlay.show .floating-gift-box.right-box {



    animation: popGiftRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, floatGift 3s ease-in-out infinite alternate 0.8s;



}







/* Sector Dividers */



.wheel-dividers {



    position: absolute;



    width: 100%;



    height: 100%;



    top: 0;



    left: 0;



    z-index: 3;



    pointer-events: none;



}







.wheel-divider {



    position: absolute;



    top: 0;



    left: calc(50% - 1.5px);



    width: 3px;



    height: 50%;



    background: linear-gradient(to top, #ffcc00 20%, rgba(255, 255, 255, 0.8) 100%);



    transform-origin: bottom center;



    box-shadow: 0 0 4px rgba(255, 204, 0, 0.5);



}







/* Modal Title Header */



.modal-wheel-title {



    font-size: 38px;



    font-weight: 900;



    text-transform: uppercase;



    background: linear-gradient(135deg, #ffe082 0%, #ffd700 35%, #ff9800 70%, #ff3b30 100%);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    margin-bottom: 8px;



    letter-spacing: 1.5px;



    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9));



    animation: titlePulse 2s infinite ease-in-out;



    font-family: 'Be Vietnam Pro', sans-serif;



    font-style: italic;



    z-index: 10;



    position: relative;



    line-height: 1.4;       /* To ensure tone marks (dấu sắc) are not clipped */



    padding: 8px 0;         /* To ensure tone marks (dấu sắc) are not clipped */



}







.modal-wheel-title::after {



    content: '';



    position: absolute;



    bottom: 2px;



    left: 10%;



    width: 80%;



    height: 3px;



    background: radial-gradient(circle, #ffd700 0%, rgba(255, 215, 0, 0) 80%);



    filter: blur(1px);



    box-shadow: 0 0 10px #ffd700, 0 0 20px #ff9800;



}







.modal-wheel-subtitle {



    display: inline-flex;



    align-items: center;



    gap: 6px;



    background-color: rgba(255, 255, 255, 0.15);



    color: #ffffff;



    padding: 6px 18px;



    border-radius: 20px;



    font-size: 14.5px;



    font-weight: 700;



    margin-bottom: 45px; /* INCREASED margin to make it spacious */



    z-index: 10;



    position: relative;



    border: 1px solid rgba(255, 255, 255, 0.2);



}







.modal-wheel-subtitle i {



    margin-right: 4px;



}



/* Modal Lucky Wheel Assembly */

.modal-assembly {

    position: relative;

    width: 100%;

    max-width: 740px;

    margin: 40px auto 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 10;

}



.modal-assembly-title {

    width: 85%;

    height: auto;

    margin-bottom: -7%;

    z-index: 12;

    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));

}



.modal-assembly-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 1/1;

    background-image: url('/Content/images/lucky-wheel/khung-trang-tri.png');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    z-index: 10;

}



.modal-assembly-wheel-wrapper {

    position: absolute;

    width: 66.8%;

    height: 66.8%;

    top: 16.6%;

    left: 16.6%;

    border-radius: 50%;

    overflow: hidden;

    z-index: 2;

}



.modal-assembly-wheel {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background-image: url('/Content/images/lucky-wheel/khung-wheel.png');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    position: relative;

    transition: transform 4s cubic-bezier(0.1, 0.8, 0.1, 1);

    box-shadow: inset 0 0 15px rgba(0,0,0,0.2);

}



.modal-wheel-sectors {

    width: 100%;

    height: 100%;

    position: relative;

    border-radius: 50%;

}



.modal-sector-label {

    position: absolute;

    top: 0;

    left: 37.5%;

    width: 25%;

    height: 50%;

    transform-origin: bottom center;

    color: white;

    font-weight: 900;

    font-size: 16.5px;

    text-transform: uppercase;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding-top: 5%;

    gap: 8px;

    text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.8);

    z-index: 5;

    box-sizing: border-box;

}



.modal-sector-label img.modal-sector-icon {

    width: 45%;

    height: auto;

    aspect-ratio: 1/1;

    object-fit: contain;

    margin-bottom: 2px;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));

}



.modal-sector-label img.modal-sector-icon[src*="dongxu"] {

    width: 31%;

}

.modal-sector-label img.modal-sector-icon[src*="gift"] {

    width: 19%;

}



@media (min-width: 577px) {

    .modal-sector-label img.modal-sector-icon[src*="deal"],

    .modal-sector-label img.modal-sector-icon[src*="themluot"] {

        margin-bottom: -8px !important;

    }

}



.modal-sector-label span {

    display: block;

    line-height: 1.2;

    text-align: center;

}



/* Rotations for 6 segments */

.modal-sector-label:nth-child(1) { transform: rotate(0deg); }

.modal-sector-label:nth-child(2) { transform: rotate(60deg); }

.modal-sector-label:nth-child(3) { transform: rotate(120deg); }

.modal-sector-label:nth-child(4) { transform: rotate(180deg); }

.modal-sector-label:nth-child(5) { transform: rotate(240deg); }

.modal-sector-label:nth-child(6) { transform: rotate(300deg); }



/* Center pointer / needle */

.modal-assembly-pointer {

    position: absolute;

    top: 7.2%;

    left: 50%;

    transform: translateX(-50%);

    width: 8.5%;

    height: auto;

    z-index: 15;

    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));

    pointer-events: none;

    transform-origin: 50% 16.8%;

}



.modal-assembly-pointer.shaking {

    animation: modalPointerWiggle 0.12s infinite alternate ease-in-out;

}



@keyframes modalPointerWiggle {

    0% { transform: translateX(-50%) rotate(-10deg); }

    100% { transform: translateX(-50%) rotate(10deg); }

}



@keyframes modalPulseZoom {

    0% { transform: translate(-50%, -50%) scale(1); }

    50% { transform: translate(-50%, -50%) scale(1.08); }

    100% { transform: translate(-50%, -50%) scale(1); }

}



/* Center spin button */

.modal-assembly-btn-spin {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 17%;

    aspect-ratio: 1/1;

    border-radius: 50%;

    background: radial-gradient(circle, #ff4d4d 0%, #cc0000 70%, #990000 100%);

    border: 3px solid #ffd700;

    box-shadow: 0 6px 15px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.5);

    z-index: 20;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 0;

    line-height: 1.1;

    transition: all 0.1s ease;

    animation: modalPulseZoom 1.5s infinite ease-in-out;

}



.modal-assembly-btn-spin:active {

    transform: translate(-50%, -50%) scale(0.92);

    box-shadow: 0 3px 8px rgba(0,0,0,0.3);

    animation: none;

}



.modal-assembly-btn-spin span {

    color: #fff;

    font-size: 18px;

    font-weight: 900;

    text-shadow: 0 1.5px 3px rgba(0,0,0,0.5);

    text-transform: uppercase;

    display: block;

}



/* Red Ribbon counter text overlay style */

.modal-assembly-ribbon-text {

    position: absolute;

    bottom: 6.8%;

    left: 50%;

    transform: translateX(-50%);

    z-index: 25;

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0,0,0,0.5);

    white-space: nowrap;

    pointer-events: none;

}



/* Tablet & Mobile responsive overrides */

@media (max-width: 768px) and (min-width: 577px) {

    .modal-close-btn {

        top: 25px !important;

        right: 25px !important;

    }

    .wheel-modal-card {

        width: 96% !important;

        max-width: 720px !important;

    }

    .modal-assembly {

        max-width: 640px !important;

        margin: 30px auto 10px;

    }

    .modal-sector-label {

        font-size: 13.5px !important;

        padding-top: 7% !important;

    }

    .modal-sector-label img.modal-sector-icon {

        width: 39% !important;

    }

    .modal-sector-label img.modal-sector-icon[src*="dongxu"] {

        width: 27% !important;

    }

    .modal-sector-label img.modal-sector-icon[src*="gift"] {

        width: 15% !important;

    }

    .modal-assembly-btn-spin {

        width: 15% !important;

    }

    .modal-assembly-btn-spin span {

        font-size: 13px !important;

    }

    .modal-assembly-ribbon-text {

        font-size: 13px;

        bottom: 6.2%;

    }

}



@media (max-width: 576px) {

    .modal-close-btn {

        top: 15px !important;

        right: 15px !important;

    }

    .wheel-modal-card {

        width: 96% !important;

        max-width: 440px !important;

        padding: 15px 8px !important;

    }

    .modal-assembly {

        max-width: 100% !important;

        margin: 20px auto 10px !important;

    }

    .modal-assembly-ribbon-text {

        font-size: 10.5px;

        bottom: 7.2%;

    }

    .modal-sector-label {

        padding-top: 14% !important;

        justify-content: flex-start !important;

        font-size: 12px;

    }

    .modal-sector-label img.modal-sector-icon {

        display: none !important;

    }

    .modal-assembly-btn-spin span {

        font-size: 11px !important;

    }

}







/* --- Winner Prize Modal Styles --- */



.wheel-win-overlay {



    position: fixed;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-color: rgba(0, 0, 0, 0.75);



    backdrop-filter: blur(8px);



    display: none;



    justify-content: center;



    align-items: center;



    z-index: 999999;



    opacity: 0;



    transition: opacity 0.3s ease;



}







.wheel-win-overlay.show {



    display: flex;



    opacity: 1;



}







.wheel-win-card {



    position: relative;



    width: 360px;



    background: #ffffff;



    border-radius: 16px;



    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);



    overflow: visible;



    display: flex;



    flex-direction: column;



    transform: scale(0.85);



    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);



    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;



}







.wheel-win-overlay.show .wheel-win-card {



    transform: scale(1);



}







.win-ribbon-container {

    position: absolute;

    top: -24px;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    z-index: 30;

    pointer-events: none;

}







.win-ribbon {

    position: relative;

    background: linear-gradient(180deg, #1041b3 0%, #0d328f 100%);

    color: #ffffff;

    padding: 12px 60px;

    font-size: 26px;

    font-weight: 900;

    font-style: italic;

    box-shadow: 0 6px 15px rgba(0,0,0,0.3);

    border-top: 2.5px solid #ffd700;

    border-bottom: 2.5px solid #ffd700;

    text-shadow: 0 1.5px 3px rgba(0,0,0,0.3);

    white-space: nowrap;

}



.win-ribbon::before {

    content: '';

    position: absolute;

    left: -25px;

    top: 0;

    bottom: 0;

    border-width: 27px 10px 27px 15px;

    border-style: solid;

    border-color: #0a2d7c #0a2d7c #0a2d7c transparent;

    z-index: -1;

}



.win-ribbon::after {

    content: '';

    position: absolute;

    right: -25px;

    top: 0;

    bottom: 0;

    border-width: 27px 15px 27px 10px;

    border-style: solid;

    border-color: #0a2d7c transparent #0a2d7c #0a2d7c;

    z-index: -1;

}







.win-close-btn {



    position: absolute;



    top: -12px;



    right: -12px;



    background: #e2e8f0;



    border: 2px solid #ffffff;



    color: #475569 !important;



    width: 30px;



    height: 30px;



    border-radius: 50%;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 14px;



    font-weight: 900;



    box-shadow: 0 4px 10px rgba(0,0,0,0.25);



    z-index: 40;



    transition: all 0.2s;



    line-height: 1;



    padding: 0;



}







.win-close-btn:hover, .win-close-btn:active {



    background: #fee2e2;



    color: #ef4444 !important;



    transform: scale(1.1);



}







.win-sparkles-container {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 360px;

    height: 450px;

    pointer-events: none;

    z-index: 999999;

    overflow: visible;

}







.win-card-top-red {

    position: relative;

    height: 120px;

    background: #e53935;

    border-top-left-radius: 16px;

    border-top-right-radius: 16px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    clip-path: ellipse(95% 100% at 50% 0%);

}







.win-top-rays {



    position: absolute;



    top: -50%;



    left: -50%;



    width: 200%;



    height: 200%;



    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.12) 0deg 15deg, transparent 15deg 30deg);



    transform-origin: center center;



    animation: rotateBeams 30s linear infinite;



    z-index: 1;



}







.win-ticket-outline {

    position: relative;

    width: 130px;

    height: 70px;

    border: 2px dashed rgba(255, 255, 255, 0.85);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(2px);

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

}







.win-ticket-outline::before, .win-ticket-outline::after {



    content: '';



    position: absolute;



    width: 12px;



    height: 12px;



    background: #e53935;



    border-radius: 50%;



    top: 50%;



    transform: translateY(-50%);



    box-sizing: border-box;



}







.win-ticket-outline::before {



    left: -7px;



    border-right: 1px dashed rgba(255, 255, 255, 0.85);



}







.win-ticket-outline::after {



    right: -7px;



    border-left: 1px dashed rgba(255, 255, 255, 0.85);



}







.win-ticket-icon {

    font-size: 26px;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));

}







.win-card-middle-white {

    background: #ffffff;

    padding: 16px 20px 12px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    max-height: 42vh;

    overflow-y: auto;

    width: 100%;

    box-sizing: border-box;

}

.win-card-middle-white::-webkit-scrollbar {

    width: 6px;

}

.win-card-middle-white::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 3px;

}







.win-prize-title {



    font-size: 20px;



    font-weight: 850;



    color: #222222;



    margin: 0;



    text-transform: uppercase;



}







.win-prize-desc {



    font-size: 13px;



    color: #666666;



    margin: 0;



    line-height: 1.4;



    max-width: 90%;



}







.win-countdown-box {

    margin-top: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: rgba(229, 57, 53, 0.08);

    border: 1.5px solid rgba(229, 57, 53, 0.2);

    padding: 8px 18px;

    border-radius: 24px;

    font-size: 14px;

    font-weight: 700;

    color: #e53935;

}



.win-countdown-timer {

    font-family: monospace;

    font-size: 16px;

    font-weight: 900;

    letter-spacing: 0.5px;

}







.win-card-bottom-gray {

    background: #f8f9fa;

    border-top: 1px solid #eef0f2;

    border-bottom-left-radius: 16px;

    border-bottom-right-radius: 16px;

    padding: 12px 20px;

    text-align: center;

}







.win-spins-desc {



    font-size: 12.5px;



    color: #555555;



    margin: 0 0 16px;



    font-weight: 600;



}







.win-actions-new {



    display: flex;



    gap: 10px;



    width: 100%;



    box-sizing: border-box;



}







.win-btn-new {



    flex: 1;



    padding: 10px 0;



    border-radius: 20px;



    font-size: 11px;



    font-weight: 800;



    text-transform: uppercase;



    cursor: pointer;



    border: none;



    transition: all 0.2s;



    text-align: center;



    display: inline-block;



    text-decoration: none !important;



    box-sizing: border-box;



    outline: none;



    line-height: 1.2;



}







.win-btn-new.btn-claim {



    background: linear-gradient(135deg, #ee4d2d 0%, #ff6633 100%);



    color: #ffffff !important;



    box-shadow: 0 4px 10px rgba(238, 77, 45, 0.35);



}







.win-btn-new.btn-claim:hover {



    transform: translateY(-1.5px);



    box-shadow: 0 6px 14px rgba(238, 77, 45, 0.45);



}







.win-btn-new.btn-spin-again {



    background: #ffffff;



    color: #555555 !important;



    border: 1px solid #cccccc;



}







.win-btn-new.btn-spin-again:hover {



    background: #f1f3f5;



}







.modal-wheel-banner {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 10px;



    width: 95%;



    margin: 5px auto 0;



    border: 1px solid rgba(255, 255, 255, 0.2);



    border-radius: 8px;



    padding: 10px 15px;



    background-color: rgba(255, 255, 255, 0.08);



    z-index: 10;



    position: relative;



}







.modal-banner-icon {



    width: 28px;



    height: 28px;



    background-color: #ffcc00;



    color: #e05e00;



    border-radius: 4px;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 14px;



}







.modal-banner-text {



    font-size: 11px;



    font-weight: 700;



    color: #e2e8f0;



    text-align: left;



}







.modal-banner-text a {



    color: #ffcc00;



    text-decoration: underline;



    font-weight: 800;



    cursor: pointer;



}







@keyframes rotateBeams {



    0% { transform: rotate(0deg); }



    100% { transform: rotate(360deg); }



}







@keyframes floatGift {



    0% { transform: translateY(0) rotate(0deg); }



    100% { transform: translateY(-10px) rotate(5deg); }



}







@keyframes flash {



    0% {



        background-color: #ffeb3b;



        box-shadow: 0 0 8px #ffeb3b, 0 0 20px #ffeb3b, 0 0 35px #ff9800;



    }



    100% {



        background-color: #ffffff;



        box-shadow: 0 0 12px #ffffff, 0 0 24px #fff, 0 0 45px #ffeb3b;



    }



}







.wheel-toast {



    position: fixed;



    bottom: 30px;



    left: 50%;



    transform: translateX(-50%) translateY(100px);



    background: #333;



    color: white;



    padding: 12px 24px;



    border-radius: 30px;



    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);



    z-index: 999999;



    display: flex;



    align-items: center;



    gap: 10px;



    font-size: 13px;



    font-weight: 500;



    pointer-events: none;



    opacity: 0;



    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);



}







.wheel-toast.show {



    transform: translateX(-50%) translateY(0);



    opacity: 1;



}







.wheel-toast-success {



    background-color: #2ec4b6;



}







.deal-float-upays {



    position: fixed;



    pointer-events: none;



    color: #ffcc00;



    font-weight: 900;



    font-size: 20px;



    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 5px #ff8f00;



    z-index: 10000;



    animation: floatUpPts 1s forwards ease-out;



}







@keyframes floatUpPts {



    0% {



        transform: translateY(0) scale(1);



        opacity: 1;



    }



    100% {



        transform: translateY(-80px) scale(1.2);



        opacity: 0;



    }



}







/* --- Responsive Styles --- */



@media (max-width: 1366px) or (max-height: 850px) {



    .wheel-modal-card {



        width: 640px !important;



    }



    .modal-wheel-outer {



        width: 500px !important;



        height: 500px !important;



        margin: 40px auto 25px !important;



    }







    .modal-wheel-center {



        width: 110px !important;



        height: 110px !important;



    }



    .modal-spin-btn {



        font-size: 16px !important;



    }



        .modal-wheel-pointer {

        width: 50px !important;

        height: 90px !important;

        top: -40px !important;

        left: calc(50% - 25px) !important;

    }



    .floating-gift-box {



        font-size: 60px !important;



    }



    .floating-gift-box.left-box {



        left: -65px !important;



    }



    .floating-gift-box.right-box {



        right: -65px !important;



    }



    .modal-wheel-title {



        font-size: 30px !important;



    }



    .modal-wheel-subtitle {



        font-size: 12px !important;



        margin-bottom: 15px !important;



    }



    .wheel-bottom-ribbon-container {



        width: 118% !important;



        bottom: -36px !important;



    }



    .wheel-ribbon-text {



        font-size: 13px !important;



    }



    .ribbon-star {



        font-size: 15px !important;



    }



}







@media (max-width: 768px) {



    .wheel-modal-card {



        width: 520px !important;



    }



    .modal-wheel-outer {



        width: 400px !important;



        height: 400px !important;



        margin: 35px auto 20px !important;



    }



    .modal-wheel-gold {



        padding: 14px !important;



        border-width: 6px !important;



    }







    .modal-wheel-center {



        width: 96px !important;



        height: 96px !important;



    }



    .modal-spin-btn {



        font-size: 14px !important;



    }



        .modal-wheel-pointer {

        width: 42px !important;

        height: 75px !important;

        left: calc(50% - 21px) !important;

        top: -30px !important;

    }



    .modal-wheel-pointer::after {



        width: 14px !important;



        height: 14px !important;



        left: calc(50% - 7px) !important;



        top: -3px !important;



    }



    .modal-spin-btn span {



        font-size: 13px !important;



    }



    .modal-light-bulb {



        width: 8px !important;



        height: 8px !important;



    }



    .modal-wheel-banner {



        padding: 8px 10px !important;



        margin-bottom: 12px !important;



    }



    .modal-wheel-banner .banner-title {



        font-size: 11px !important;



    }



    .modal-wheel-banner .banner-title i {



        font-size: 13px !important;



    }



    .modal-wheel-banner .banner-desc {



        font-size: 9.5px !important;



        margin-bottom: 6px !important;



    }



    .modal-wheel-banner .banner-btn {



        font-size: 9.5px !important;



        padding: 4px 10px !important;



    }



    .wheel-bottom-ribbon-container {



        width: 360px !important;



        height: 108px !important;



        bottom: -40px !important;



    }



    .wheel-bottom-ribbon-container {



        width: 140% !important;



        height: 96px !important;



        bottom: -36px !important;



    }



    .wheel-svg-ribbon text {



        font-size: 15px !important;



    }



    .bottom-gift {



        font-size: 32px !important;



        bottom: -20px !important;



        left: 25px !important;



    }



    .bottom-ticket {



        font-size: 30px !important;



        bottom: -18px !important;



        right: 25px !important;



    }



    .bottom-coins {



        font-size: 22px !important;



        bottom: -28px !important;



        left: calc(50% - 46px) !important;



    }



    .floating-gift-box {



        font-size: 50px !important;



    }



    .floating-gift-box.left-box {



        left: -45px !important;



        bottom: -10px !important;



    }



    .floating-gift-box.right-box {



        right: -45px !important;



        bottom: 10px !important;



    }



    .modal-wheel-title {



        font-size: 26px !important;



    }



    .modal-wheel-subtitle {



        font-size: 11px !important;



        margin-bottom: 40px !important; /* INCREASED */



    }



}







@media (max-width: 480px) {

    .wheel-modal-card {

        width: 95% !important;

        padding: 15px 5px !important;

    }

    .modal-close-btn {

        top: 6px !important;

        right: 6px !important;

        width: 28px !important;

        height: 28px !important;

        font-size: 13px !important;

    }



    .modal-wheel-outer {



        width: 300px !important;



        height: 300px !important;



        margin: 30px auto 15px !important;



    }



    .modal-wheel-gold {



        padding: 10px !important;



        border-width: 4px !important;



    }







    .modal-wheel-center {



        width: 76px !important;



        height: 76px !important;



    }



    .modal-spin-btn {



        font-size: 11px !important;



    }



    .win-btn {



        font-size: 12px !important;



        padding: 10px 0 !important;



    }



        .modal-wheel-pointer {

        width: 34px !important;

        height: 60px !important;

        left: calc(50% - 17px) !important;

        top: -25px !important;

    }



    .modal-wheel-pointer::after {



        width: 10px !important;



        height: 10px !important;



        left: calc(50% - 5px) !important;



        top: -2px !important;



    }



    .modal-spin-btn span {



        font-size: 10px !important;



    }



    .modal-light-bulb {



        width: 6px !important;



        height: 6px !important;



    }



    .modal-wheel-banner {



        padding: 6px 8px !important;



        margin-bottom: 8px !important;



    }



    .modal-wheel-banner .banner-title {



        font-size: 10px !important;



    }



    .modal-wheel-banner .banner-title i {



        font-size: 11px !important;



    }



    .modal-wheel-banner .banner-desc {



        font-size: 8.5px !important;



        margin-bottom: 4px !important;



    }



    .modal-wheel-banner .banner-btn {



        font-size: 8.5px !important;



        padding: 3px 8px !important;



    }



    .wheel-bottom-ribbon-container {



        width: 140% !important;



        height: 72px !important;



        bottom: -28px !important;



    }



    .wheel-svg-ribbon text {



        font-size: 13px !important;



    }



    .floating-gift-box {



        font-size: 36px !important;



    }



    .floating-gift-box.left-box {



        left: -25px !important;



        bottom: -10px !important;



    }



    .floating-gift-box.right-box {



        right: -25px !important;



        bottom: 0px !important;



    }



    .modal-wheel-title {



        font-size: 20px !important;



    }



    .modal-wheel-subtitle {



        font-size: 10px !important;



        margin-bottom: 30px !important; /* INCREASED */



        padding: 4px 10px !important;



    }



    .wheel-win-card {



        width: 90% !important;



    }



        .win-card-top-red {

        height: 90px !important;

    }

    .win-ticket-outline {

        width: 110px !important;

        height: 60px !important;

    }

    .win-card-middle-white {

        padding: 10px 15px 8px !important;

        gap: 4px !important;

    }

    .win-card-bottom-gray {

        padding: 10px 15px !important;

    }

    .win-spins-desc {

        margin-bottom: 8px !important;

        font-size: 11px !important;

    }



    .win-ticket-icon {



        font-size: 26px !important;



    }



    .win-prize-title {



        font-size: 17px !important;



    }



    .win-prize-desc {



        font-size: 11.5px !important;



    }



    .win-btn-new {



        font-size: 11.5px !important;



        padding: 9px 0 !important;



    }



}







/* --- Falling Gift & Voucher Rain --- */



.falling-rain-item {



    position: absolute;



    top: -60px;



    pointer-events: none;



    z-index: 999999;



    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));



    animation: rainFall 4.5s linear forwards;



}







@keyframes rainFall {



    0% {



        top: -60px;



        transform: translateX(0) rotate(0deg);



        opacity: 0;



    }



    10% {



        opacity: 1;



    }



    90% {



        opacity: 1;



    }



    100% {



        top: 105vh;



        transform: translateX(120px) rotate(540deg);



        opacity: 0;



    }



}







@keyframes spinBtnPulse {



    0% {



        transform: translate(-50%, -50%) scale(1);



        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(229, 57, 53, 0.45);



    }



    50% {



        transform: translate(-50%, -50%) scale(1.08);



        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 15px 5px rgba(229, 57, 53, 0.55);



    }



    100% {



        transform: translate(-50%, -50%) scale(1);



        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(229, 57, 53, 0.45);



    }



}







@keyframes popGiftLeft {



    0% { transform: scale(0) rotate(-45deg); opacity: 0; }



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



}



@keyframes popGiftRight {



    0% { transform: scale(0) rotate(45deg); opacity: 0; }



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



}







.opening-confetti {



    position: absolute;



    width: 8px; height: 16px;



    border-radius: 2px;



    z-index: 100;



    pointer-events: none;



    opacity: 0;



}



.shoot-l1 { animation: shootL1 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }



.shoot-l2 { animation: shootL2 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }



.shoot-l3 { animation: shootL3 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }



.shoot-r1 { animation: shootR1 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }



.shoot-r2 { animation: shootR2 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }



.shoot-r3 { animation: shootR3 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }







@keyframes shootL1 {



    0% { left: -30px; bottom: 20px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }



    15% { opacity: 1; }



    100% { transform: translate(240px, -350px) rotate(360deg) scale(1.2); opacity: 0; }



}



@keyframes shootL2 {



    0% { left: -30px; bottom: 20px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }



    15% { opacity: 1; }



    100% { transform: translate(140px, -450px) rotate(-240deg) scale(0.9); opacity: 0; }



}



@keyframes shootL3 {



    0% { left: -30px; bottom: 20px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }



    15% { opacity: 1; }



    100% { transform: translate(320px, -240px) rotate(180deg) scale(1); opacity: 0; }



}



@keyframes shootR1 {



    0% { right: -30px; bottom: 40px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }



    15% { opacity: 1; }



    100% { transform: translate(-240px, -350px) rotate(-360deg) scale(1.2); opacity: 0; }



}



@keyframes shootR2 {



    0% { right: -30px; bottom: 40px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }



    15% { opacity: 1; }



    100% { transform: translate(-140px, -450px) rotate(240deg) scale(0.9); opacity: 0; }



}



@keyframes shootR3 {



    0% { right: -30px; bottom: 40px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }



    15% { opacity: 1; }



    100% { transform: translate(-320px, -240px) rotate(-180deg) scale(1); opacity: 0; }



}







/* Compact Timeline Styles (Unified UI Layout) */



.header-deal-timeline-compact {



    display: flex;



    align-items: center;



    gap: 12px;



    font-size: 13px;



    font-family: 'Play', sans-serif;



    color: #ffffff;



    flex-shrink: 1; /* Allow container itself to shrink */



    min-width: 0; /* Enable shrink below default content width */



}







.header-deal-timeline-compact.d-none-mobile {



    margin-left: 12px; /* Align left edge inline with logo (not more left than logo) */



}







.deal-badge-v2 {



    background: #ffcc00;



    color: #1041b3;



    font-weight: 900;



    padding: 3px 8px;



    border-radius: 4px;



    font-size: 11.5px;



    box-shadow: 0 1px 3px rgba(0,0,0,0.15);



    white-space: nowrap;



}







.deal-progress-bar-bg-compact {



    position: relative;



    background: rgba(255, 255, 255, 0.25);



    width: 150px; /* Long rounded bar */



    max-width: 150px;



    min-width: 80px; /* Auto-shorten when crowded */



    flex-shrink: 1;



    height: 18px;



    border-radius: 9px;



    border: 1px solid rgba(255, 255, 255, 0.15);



    overflow: hidden;



}







.deal-progress-bar-fill-compact {



    background: linear-gradient(90deg, #ffcc00 0%, #fffb8f 50%, #ffcc00 100%);



    background-size: 200px 100%;



    animation: progress-shimmer 1.8s infinite linear;



    height: 100%;



    border-radius: 9px;



}







.deal-progress-val-overlay {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 10px;



    font-weight: 900;



    color: #ffffff !important;



    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);



    pointer-events: none;



    z-index: 5;



    line-height: 1;



    white-space: nowrap;



}







.header-deal-countdown-class-span {



    font-weight: 800;



    color: #ffcc00;



    animation: blink-countdown 2.5s infinite ease-in-out;



    white-space: nowrap;



    font-size: 13px;



}







/* Align right/left overrides for wrapper elements inside mobile logo timeline wrapper */



.logo-timeline-wrapper .header-logo-v2 {



    order: 0 !important; /* Forces logo to be first (left side) */



}







.logo-timeline-wrapper .header-deal-timeline-compact {



    order: 1 !important; /* Forces timeline to be second (right side) */



}







/* Animations */



@keyframes progress-shimmer {



    0% { background-position: -150px 0; }



    100% { background-position: 150px 0; }



}







@keyframes blink-countdown {



    0% { opacity: 1; }



    50% { opacity: 0.65; }



    100% { opacity: 1; }



}







/* Visibility classes */



.d-none-mobile {



    display: flex;



}







.d-show-mobile {



    display: none;



}







@media (max-width: 767px) {



    .d-none-mobile {



        display: none !important;



    }



    



    .d-show-mobile {



        display: flex !important;



    }



    



    .logo-timeline-wrapper {



        display: flex;



        align-items: center;



        gap: 15px;



        width: 100%;



        justify-content: space-between;



    }







    .header-main-v2 .header-deal-timeline-compact {



        display: flex !important;



        flex-direction: row !important; /* Inline layout on mobile */



        align-items: center !important;



        gap: 6px !important;



        color: #ffffff;



        background: transparent;



        padding: 0;



        border: none;



        font-size: 10px;



    }







    .header-main-v2 .deal-badge-v2 {



        padding: 1.5px 4px;



        font-size: 8.5px;



    }







    .header-main-v2 .deal-progress-bar-bg-compact {



        width: 90px; /* Slightly shorter to fit on mobile */



        max-width: 90px;



        min-width: 60px; /* Can shrink when mobile width is extremely narrow */



        flex-shrink: 1;



        height: 12px;



        border-radius: 6px;



    }







    .header-main-v2 .deal-progress-bar-fill-compact {



        border-radius: 6px;



    }



}



.star-confetti {



    width: 8px; height: 16px;

    border-radius: 2px;

    z-index: 100;

    pointer-events: none;

    opacity: 0;

}

.shoot-l1 { animation: shootL1 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }

.shoot-l2 { animation: shootL2 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }

.shoot-l3 { animation: shootL3 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }

.shoot-r1 { animation: shootR1 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }

.shoot-r2 { animation: shootR2 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }

.shoot-r3 { animation: shootR3 1.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }



@keyframes shootL1 {

    0% { left: -30px; bottom: 20px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }

    15% { opacity: 1; }

    100% { transform: translate(240px, -350px) rotate(360deg) scale(1.2); opacity: 0; }

}

@keyframes shootL2 {

    0% { left: -30px; bottom: 20px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }

    15% { opacity: 1; }

    100% { transform: translate(140px, -450px) rotate(-240deg) scale(0.9); opacity: 0; }

}

@keyframes shootL3 {

    0% { left: -30px; bottom: 20px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }

    15% { opacity: 1; }

    100% { transform: translate(320px, -240px) rotate(180deg) scale(1); opacity: 0; }

}

@keyframes shootR1 {

    0% { right: -30px; bottom: 40px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }

    15% { opacity: 1; }

    100% { transform: translate(-240px, -350px) rotate(-360deg) scale(1.2); opacity: 0; }

}

@keyframes shootR2 {

    0% { right: -30px; bottom: 40px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }

    15% { opacity: 1; }

    100% { transform: translate(-140px, -450px) rotate(240deg) scale(0.9); opacity: 0; }

}

@keyframes shootR3 {

    0% { right: -30px; bottom: 40px; transform: translate(0, 0) rotate(0deg) scale(0); opacity: 0; }

    15% { opacity: 1; }

    100% { transform: translate(-320px, -240px) rotate(-180deg) scale(1); opacity: 0; }

}



/* Compact Timeline Styles (Unified UI Layout) */

.header-deal-timeline-compact {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 13px;

    font-family: 'Play', sans-serif;

    color: #ffffff;

    flex-shrink: 1; /* Allow container itself to shrink */

    min-width: 0; /* Enable shrink below default content width */

}



.header-deal-timeline-compact.d-none-mobile {

    margin-left: 12px; /* Align left edge inline with logo (not more left than logo) */

}



.deal-badge-v2 {

    background: #ffcc00;

    color: #1041b3;

    font-weight: 900;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 11.5px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.15);

    white-space: nowrap;

}



.deal-progress-bar-bg-compact {

    position: relative;

    background: rgba(255, 255, 255, 0.25);

    width: 150px; /* Long rounded bar */

    max-width: 150px;

    min-width: 80px; /* Auto-shorten when crowded */

    flex-shrink: 1;

    height: 18px;

    border-radius: 9px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    overflow: hidden;

}



.deal-progress-bar-fill-compact {

    background: linear-gradient(90deg, #ffcc00 0%, #fffb8f 50%, #ffcc00 100%);

    background-size: 200px 100%;

    animation: progress-shimmer 1.8s infinite linear;

    height: 100%;

    border-radius: 9px;

}



.deal-progress-val-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 900;

    color: #ffffff !important;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);

    pointer-events: none;

    z-index: 5;

    line-height: 1;

    white-space: nowrap;

}



.header-deal-countdown-class-span {

    font-weight: 800;

    color: #ffcc00;

    animation: blink-countdown 2.5s infinite ease-in-out;

    white-space: nowrap;

    font-size: 13px;

}



/* Align right/left overrides for wrapper elements inside mobile logo timeline wrapper */

.logo-timeline-wrapper .header-logo-v2 {

    order: 0 !important; /* Forces logo to be first (left side) */

}



.logo-timeline-wrapper .header-deal-timeline-compact {

    order: 1 !important; /* Forces timeline to be second (right side) */

}



/* Animations */

@keyframes progress-shimmer {

    0% { background-position: -150px 0; }

    100% { background-position: 150px 0; }

}



@keyframes blink-countdown {

    0% { opacity: 1; }

    50% { opacity: 0.65; }

    100% { opacity: 1; }

}



/* Visibility classes */

.d-none-mobile {

    display: flex;

}



.d-show-mobile {

    display: none;

}



@media (max-width: 767px) {

    .d-none-mobile {

        display: none !important;

    }

    

    .d-show-mobile {

        display: flex !important;

    }

    

    .logo-timeline-wrapper {

        display: flex;

        align-items: center;

        gap: 15px;

        width: 100%;

        justify-content: space-between;

    }



    .header-main-v2 .header-deal-timeline-compact {

        display: flex !important;

        flex-direction: row !important; /* Inline layout on mobile */

        align-items: center !important;

        gap: 6px !important;

        color: #ffffff;

        background: transparent;

        padding: 0;

        border: none;

        font-size: 10px;

    }



    .header-main-v2 .deal-badge-v2 {

        padding: 1.5px 4px;

        font-size: 8.5px;

    }



    .header-main-v2 .deal-progress-bar-bg-compact {

        width: 90px; /* Slightly shorter to fit on mobile */

        max-width: 90px;

        min-width: 60px; /* Can shrink when mobile width is extremely narrow */

        flex-shrink: 1;

        height: 12px;

        border-radius: 6px;

    }



    .header-main-v2 .deal-progress-bar-fill-compact {

        border-radius: 6px;

    }



    .header-main-v2 .deal-progress-val-overlay {

        font-size: 7.5px;

    }

}



/* Tablet Layout Space Optimization */

@media (max-width: 991px) {

    .header-info-inner {

        gap: 10px !important;

    }

    .header-info-left {

        gap: 10px !important;

    }

    .header-info-left a:last-child {

        display: none !important; /* Hide 'Hệ thống văn phòng' on tablet top bar to prevent timeline overflow */

    }

}