* {
        font-family: "Inter", sans-serif;
    }
    #wrapper,
    .bottom-menu {
        max-width: 540px;
        margin: 0 auto;
    }

    main {
        height: 100vh;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

    .fs-7 {
        font-size: 0.875rem;
    }

    .fs-8 {
        font-size: 0.75rem;
    }

    .fs-9 {
        font-size: 0.625rem;
    }

    .fs-10 {
        font-size: 0.5rem;
    }
    .icon-sm {
        width: 20px;
        height: 20px;
    }
    .icon-md {
        width: 30px;
        height: 30px;
    }
    .icon-lg {
        width: 40px;
        height: 40px;
    }
    .bottom__banner {
        margin-bottom: 100px;
    }
    .bottom__banner img {
        max-width: 70%;
        display: block;
        margin: 0 auto 20px auto;
    }
    .radius__bottom-30 {
        border-bottom-left-radius: 30px !important;
        border-bottom-right-radius: 30px !important;
    }
    .recharge__withdraw {
        background: linear-gradient(to bottom, #edd3bc8f, #ffffff);
        border-radius: 30px;
        padding: 10px 50px;
        margin: 10px 0;
    }
    .regulation__content {
        background: transparent !important;
        outline: none;
        border: none;
        height: 100vh;
        text-align: justify;
    }
    .regulation__content:focus {
        outline: none;
    }

    .animate__animated {
        animation-duration: 1s;
    }
    .animate__fadeInUp {
        animation-name: fadeInUp;
    }
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
    .animate__fadeOutDown {
        animation-name: fadeOutDown;
    }
    @keyframes fadeOutDown {
        from {
            opacity: 1;
            transform: none;
        }

        to {
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }
    }
    .animate__fadeOut {
        animation-name: fadeOut;
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .animate__fadeIn {
        animation-name: fadeIn;
    }
    .logo__login {
        max-height: 200px;
    }
    .form-login {
        background: linear-gradient(to bottom, #ffc77f, #ffffff);
        border: 2px solid #000000;
        border-radius: 20px;
    }
    .login__btn {
        width: 100%;
        border: 2px solid #000000;
        background: #ffffff;
        border-radius: 20px;
    }
    .number__code {
        width: 36px;
        height: 35px;
        border: 3px solid #ffffff;
        border-radius: 100%;
        text-align: center;
        line-height: 30px;
        font-weight: 600 !important;
    }
    .countdown-item {
        font-weight: 600 !important;
    }

    .close__reward {
        left: 50%;
        transform: translateX(-50%);
    }
    .reward__modal img {
        min-height: 300px;
    }
    .reward__modal-title {
        top: 20px;
        left: 50%;
        white-space: nowrap;
        transform: translateX(-50%);
        color: #ffdc16 !important;
    }
    .reward__modal-description {
        top: 30%;
    }

    canvas {
        z-index: 1056 !important; /* Đảm bảo z-index cao hơn modal */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }