body {
    background: #1a2220;
    color: #fff;
}

.bg-dark {
    background: #1a2220 !important;
}

.bg-secondary {
    /* background: #23262f !important; */
    background: #2d3533 !important;
}

.btn-success {
    background: linear-gradient(90deg, #16e0bd 0, #05b169 100%);
    border: none;
}

.card-bc {
    padding: 2rem !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.content-bc {
    margin-top: 3rem;
}

.btn-submit {
    background: linear-gradient(90deg, #16e0bd 0, #05b169 100%) !important;
    color: #fff;
    border: 0;
}


.submenu-item{
    display: flex;
    align-items: center;
}
.icon-bc {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../logo.png')
}

.icon-bc2 {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../logo2.png')
}

.icon-wallet-connect {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../wallet_connect.jpg');
}

.icon-casino {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/casino.png');
}

.icon-livecasino {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/livecasino.png');
}

.icon-card2 {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/game_card.png');
}

.icon-menu_mobile {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/mobile_menu.png');
}

.icon-sport {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/sport.png');
}

.icon-football {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/football.png');
}

.icon-lotto {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/lotto.png');
}

.icon-lotto2 {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/lotto2.png');
}

.icon-lotto3 {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/lotto3.png');
}

.icon-cypto {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/cypto.png');
}

.icon-exchange {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/exchange.png');
}

.icon-market {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/market.png');
}

.icon-promotion {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/promotion.png');
}

.icon-af {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/af.png');
}

.icon-slot {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/slot.png');
}

.icon-deposit {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/deposit.png');
}
.icon-withdraw {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/withdraw.png');
}
.icon-af2 {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/af2.png');
}
.icon-contact_us {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/contact_us.png');
}
.icon-support {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../image/support.png');
}

.toast-top-center {
    top: 1rem;
    /* ปรับค่าตามต้องการ */
}

.btn-submenu,
#sidebarTokenBtn {
    padding: 5px;
    background: #5a5b5b;
    border: none;
    color: #cfcfcf;
}

.sidebar-text {
    font-weight: 600;
}

#username::placeholder,
#password::placeholder {
    color: #999;
}

.menu-mobile {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 2px solid #29d97dbd !important;
}

.btn-mobile-menu {
    font-weight: 600;
}

.btn-mobile-menu.active {
    /* color: rgb(44, 217, 125) !important; */
    color: #00FFFF !important;
}

.main {
    background-image: url('/image/background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
    /* min-height: 100vh; */
}


.aurora-background {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #02271e 100%);
}

.aurora {
    position: absolute;
    width: 150%;
    height: 150%;
    filter: blur(120px);
    opacity: 0.5;
    mix-blend-mode: screen;
    border-radius: 50%;
}

.aurora.one {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background: conic-gradient(from 0deg at 50% 50%,
            rgba(225, 5, 245, 0.2),
            rgba(0, 255, 0, 0.1),
            rgba(255, 0, 255, 0.2),
            rgba(0, 255, 255, 0.2));
    animation: auroraMove1 25s linear infinite;
}

.aurora.two {
    background: conic-gradient(from 90deg at 50% 50%,
            rgba(255, 0, 255, 0.15),
            rgba(0, 255, 255, 0.1),
            rgba(255, 255, 0, 0.15),
            rgba(255, 0, 0, 0.15));
    animation: auroraMove2 35s linear infinite reverse;
}

.aurora.three {
    background: conic-gradient(from 180deg at 50% 50%,
            rgba(0, 255, 100, 0.2),
            rgba(0, 100, 255, 0.1),
            rgba(255, 0, 200, 0.1));
    animation: auroraMove3 45s linear infinite;
}


@keyframes auroraMove1 {
    0% {
        transform: rotate(0deg) translate(-10%, -10%);
    }

    100% {
        transform: rotate(360deg) translate(-10%, -10%);
    }
}

@keyframes auroraMove2 {
    0% {
        transform: rotate(0deg) translate(10%, 10%);
    }

    100% {
        transform: rotate(-360deg) translate(10%, 10%);
    }
}

@keyframes auroraMove3 {
    0% {
        transform: rotate(0deg) translate(0%, 5%);
    }

    100% {
        transform: rotate(360deg) translate(0%, 5%);
    }
}

.text-logo{
    background: linear-gradient(to right, #1f89bb, #53c4ff, #00c6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Keyframes สำหรับ animation การหมุน */
@keyframes spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* สไตล์สำหรับโลโก้ที่มี animation */
.animated-logo {
    animation: spin 5s linear infinite; /* ใช้ animation "spin" หมุน 5 วินาที, เป็นเส้นตรง, วนซ้ำไม่รู้จบ */
    /* box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); */
    border-radius: 50%; /* ทำให้ขอบโลโก้โค้งมนเป็นวงกลม */
    width: 150px; /* กำหนดขนาดโลโก้ให้คงที่ */
    height: 150px;
}

/* สไตล์สำหรับ container ของโลโก้ */
.logo-container {
    width: 150px;
    height: 150px;
    perspective: 1000px; /* เพิ่ม perspective เพื่อให้การหมุนดูมีมิติแบบ 3D */
}


/* สไตล์สำหรับโลโก้ Loading */
.loading-logo {
    animation: spin 1.5s linear infinite; /* ใช้ animation ชื่อ spin หมุน 1.5 วินาที, ความเร็วคงที่, วนซ้ำไม่รู้จบ */
    width: 150px; /* ขนาดของโลโก้ */
    height: 150px;
}

/* สไตล์สำหรับ container ของ Loading */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed; /* ทำให้ Loading อยู่ตรงกลางจอเสมอ */
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.95); /* พื้นหลังสีดำจางๆ */
    z-index: 9999; /* ให้ Loading อยู่เหนือทุก elements */
}

 .fw-normal{
    font-size: 18px !important; /* ขนาดฟอนต์มาตรฐาน */
 }
.fs-5{
    font-size:1.8rem!important;
}

@media (max-width: 768px) {
    .content-bc {
        margin-top: 1rem;
    }
    .crypto_text{
        line-height: 1;
        font-size: 1rem !important;
    }
    .home-title-text{
        font-size: 1.4rem;
        font-weight: 600;
    }
}