@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: "Noto Sans Thai Condensed";
    src: url(/assets_2025/fonts/NotoSansThai-unhinted/NotoSansThai-Condensed.ttf);
}

@font-face {
    font-family: "Noto Sans Thai UI";
    src: url(/assets_2025/fonts/NotoSansThai-unhinted/NotoSansThaiUI-Condensed.ttf);
}

@font-face {
    font-family: "DB Heavent";
    src: url("/assets_2025/fonts/dbheavent/0c7add3d34a08f3d86a1ba32ac081598.eot");
    src: url("/assets_2025/fonts/dbheavent/0c7add3d34a08f3d86a1ba32ac081598.eot?#iefix")format("embedded-opentype"),
        url("/assets_2025/fonts/dbheavent/0c7add3d34a08f3d86a1ba32ac081598.woff2")format("woff2"),
        url("/assets_2025/fonts/dbheavent/0c7add3d34a08f3d86a1ba32ac081598.woff")format("woff"),
        url("/assets_2025/fonts/dbheavent/0c7add3d34a08f3d86a1ba32ac081598.ttf")format("truetype"),
        url("/assets_2025/fonts/dbheavent/0c7add3d34a08f3d86a1ba32ac081598.svg#DB Heavent")format("svg");
}

* ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: none;
    z-index: 1;
    overflow: overlay;
    background: transparent;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(63, 67, 80, 0.24);
    border-radius: 3px;
}


body {
    display: grid;
    font-family: "Noto Sans Thai UI";
    grid-template-columns: 20vw 80vw;
    grid-template-rows: max-content minmax(100vh, max-content) 100px;
    grid-template-areas:
        "header header header"
        "sidemanu content content"
        "footer footer footer";
    font-family: "Noto Sans Thai UI";
    background: url(/assets_2025/images/background.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    background-color: #000000 !important;
}

header {
    height: 100%;
    grid-area: header;
}

section {
    grid-area: sidemanu;
}

main {
    width: 80vw !important;
    grid-area: content;
}

footer {
    height: 100%;
    grid-area: footer;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Sans Thai";
    font-size: clamp(12px, 4vw, 26px);
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
}

header nav.navbar {
    height: 100%;
    background: linear-gradient(180deg, #1D1D1D 0%, #202020 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

header nav.navbar .line {
    width: 2px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #6B4822 0%, #EFDA81 52.6%, #E7B846 100%);
}

header nav.navbar .navbar-toggler {
    height: 32px;
    width: 32px;
}

header nav.navbar .navbar-collapse a {
    margin-left: 4.875rem !important;
    color: #FFF;
    font-size: clamp(10px, 4vw, 20px);
    font-style: normal;
    font-weight: 400;
    font-family: "Noto Sans Thai Condensed";
    line-height: normal;
    border-bottom: 2px solid #202020;
    transition: all .5s;
}

header nav.navbar .navbar-collapse a.active {
    color: #FFF;
}

header nav.navbar .navbar-collapse a:hover {
    color: #FFEC5F;
    border-bottom-color: #D9D9D9;
}

.navbar-brand {
    width: 18vw;
}

.navbar-collapse~.banner {
    width: 20.5vw;
}

section .card {
    border-radius: 16px;
    background: linear-gradient(180deg, #1A1A1A 0%, #1B1B1B 51%, #1A1A1A 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card.login .card-header {
    height: 3.75rem;
    color: #FFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans Thai UI";
    font-size: clamp(10px, 4vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 16px;
    background: linear-gradient(180deg, #323232 0%, #2B2B2B 9%, #282828 51%, #242424 100%);
    box-shadow: 0px 1px 0px 0px #363636 inset;
}

.card.login .card-header img:first-child {
    width: 119px;
}

.card.login .card-header img:nth-child(2) {
    width: 31px;
}

.card.login .card-body input {
    height: 42px;
    padding-left: 2rem;
    color: #FFF;
    font-family: "Noto Sans Thai";
    font-style: normal;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #272727;
    background: #0F0F0F;
    box-shadow: 0px 5px 2px 0px #0A0A0A inset;
}

.card.login .card-body input:placeholder-shown {
    color: rgba(72, 73, 71, 0.25);
}

.card.login .card-body img {
    width: 19.5px;
}

.card.login .card-body button[type="submit"] {
    height: 42px;
    font-size: clamp(11px, 4vw, 23px);
    font-family: "Noto Sans Thai UI";
    transition: 0.25s ease-in-out;
    background: linear-gradient(180deg, #FFFF96 0%, #C2AA6B 28%, #AE8324 72%, #CFAA3A 100%);
}

.card.login .card-body button[type="submit"]:hover {
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
    background: linear-gradient(180deg, #AE8324 10.5%, #C2AA6B 48%, #FFFF96 89%, #CFAA3A 100%);
}

.card.login .card-body .contract {
    border-radius: 8px;
    background: linear-gradient(180deg, #2B2B2B 0%, #383838 11.5%, #202020 100%);
}

.card.login .card-body .contract h3 {
    color: #FFF;
    text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.80);
    font-family: "Noto Sans Thai UI";
    font-size: clamp(10px, 4vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card.login .card-body .contract img {
    width: 47px;
}

.card.login .card-body .forgot {
    color: #E2D6B5;
    font-size: 16px;
    font-family: "Noto Sans Thai UI";
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    text-decoration-line: underline;
}

.card.register {
    background: transparent;
}

.card.register .card-title {
    color: #FFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(174, 115, 0, 0.70);
    -webkit-text-stroke-width: 0.125px;
    -webkit-text-stroke-color: #896232;
    font-family: "Noto Sans Thai";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.card.register .card-subtitle {
    color: #FFF;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.80);
    font-family: "Noto Sans Thai";
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.RegisterModal .modal {
    transition: none;
}

.RegisterModal .modal.show .modal-dialog {
    max-width: 730px !important;
}

.RegisterModal .modal.show .modal-content {
    border-radius: 24px;
    border: 3px solid #FFF584;
    background: rgba(0, 0, 0, 0.00);
}

.RegisterModal .modal.show .modal-body {
    border-radius: 24px;
    background: #000;
}

.RegisterModal .modal.show .modal-body .btn-close {
    width: 77px;
    height: 77px;
    top: -10%;
    background: url(/assets_2025/images/Home/btn-close.png) no-repeat;
    background-size: 77px;
    opacity: 1;
    transition: 0.5s ease-out;
}

.RegisterModal .modal.show .modal-body .btn-close:hover {
    background: url(/assets_2025/images/Home/btn-close2.png) no-repeat;
    background-size: 77px;
}

.RegisterModal .modal.show .modal-body nav .nav-tabs {
    border-radius: 24px 24px 0px 0px;
    background: linear-gradient(180deg, #1B1B1B 0%, #494949 45%, #696968 76%, #909090 85.5%, #636363 93.5%);
}

.RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link {
    width: 50%;
    color: #DDD;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans Thai";
    font-size: 28px !important;
    font-style: normal;
    font-weight: 600 !important;
    line-height: normal;
    border: none;
}

.RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link:first-child {
    position: relative;
    border-radius: 24px 0px 0px 0px;
}

.RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link:first-child p {
    position: absolute;
    top: 15%;
    right: 31.5%;
    color: #FFF584;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans Thai";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link:last-child {
    border-radius: 0px 24px 0px 0px;
}

.RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link.active {
    background: linear-gradient(180deg, #2A241E 0%, #A06F2F 45%, #C18F3C 76%, #EFE194 87%, #C0A556 94.5%);
}

.RegisterModal .modal.show .modal-body #contentContainer .text-warning,
.RegisterModal .modal.show .modal-body #nav-login h1.text-warning {
    color: #EAE187 !important;
    font-family: "Noto Sans Thai";
    font-size: 36px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.RegisterModal .modal.show .modal-body #contentContainer p {
    color: #FFF !important;
    font-family: "Noto Sans Thai";
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.RegisterModal .modal.show .modal-body #contentContainer #bankName img,
.RegisterModal .modal.show .modal-body #contentContainer input[type="radio"] {
    width: 50px;
    height: 50px;
}

.RegisterModal .modal.show .modal-body #contentContainer #bankName img:first-child {
    margin-right: 1rem;
}

.RegisterModal .modal.show .modal-body #contentContainer #bankName img:last-child {
    margin-left: 1rem;
}

.RegisterModal .modal.show .modal-body #contentContainer input,
.RegisterModal .modal.show .modal-body #nav-login input,
.RegisterModal .modal.show .modal-body #contentContainer .input-group,
.RegisterModal .modal.show .modal-body #nav-login .input-group {
    color: #FFF !important;
    font-family: "Noto Sans Thai";
    font-size: 43px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    border: none;
    border-radius: 20px;
    background: #1A1A1A;
}

.RegisterModal .modal.show .modal-body #contentContainer input:placeholder-shown,
.RegisterModal .modal.show .modal-body #nav-login input:placeholder-shown {
    color: rgba(72, 73, 71, 0.25);
}

.RegisterModal .modal.show .modal-body #contentContainer .form-check .d-flex {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.RegisterModal .modal.show .modal-body #contentContainer .form-check.form-check-inline {
    width: calc(100% / 7);
    margin-right: 0;
    padding: 0 0.75rem;
}

.RegisterModal .modal.show .modal-body #contentContainer input[type="radio"]:checked {
    border-color: #E1CA84 !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 0px 10px 0px rgba(253, 255, 152, 0.70);
}

.RegisterModal .modal.show .modal-body #contentContainer .input-group .otp-input,
.RegisterModal .modal.show .modal-body #nav-login .input-group .otp-input {
    margin-right: 0.75rem;
    max-width: 15%;
}

.RegisterModal .modal.show .modal-body #contentContainer button[type="submit"],
.RegisterModal .modal.show .modal-body #nav-login button[type="submit"] {
    padding: 0.75rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: #000;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Sans Thai";
    letter-spacing: -0.64px;
    transition: 0.25s ease-in-out;
    background: linear-gradient(180deg, #FFFF96 0%, #C2AA6B 28%, #AE8324 72%, #CFAA3A 100%);
}

.RegisterModal .modal.show .modal-body #contentContainer button[type="submit"]:hover,
.RegisterModal .modal.show .modal-body #nav-login button[type="submit"]:hover {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    background: linear-gradient(180deg, #AE8324 10.5%, #C2AA6B 48%, #FFFF96 89%, #CFAA3A 100%);
}

.RegisterModal .modal.show .modal-body #contentContainer button.btn-cancel,
.RegisterModal .modal.show .modal-body #nav-login button.btn-cancel {
    padding: 0.75rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: #A2A2A2;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: 1px solid #A2A2A2;
    background: #000;
}

.RegisterModal .modal.show .modal-body #nav-login a {
    color: #E2D6B5 !important;
    font-family: "Noto Sans Thai";
}


.card.demo .video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    border: 1px solid #78613C;
}

.card.demo .video-container video {
    width: 100%;
    height: auto;
    display: block;
}

.card.demo .video-container video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none !important;
}

.card.demo .video-container .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10%;
    height: 20%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.25);
    background-image: url('/assets_2025/images/Home/Polygon1.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    pointer-events: auto;
    transition: 0.3s ease-out;
}

.card.demo a {
    color: #DDD;
    text-align: left;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans Thai UI";
    font-size: clamp(10px, 4vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: linear-gradient(180deg, #323232 0%, #313131 13%, #333 51.5%, #313131 100%);
    box-shadow: 0px 1px 0px 0px #363636 inset;
}

.card.demo a:hover {
    background: linear-gradient(180deg, #6A6455 0%, #443422 13%, #A4722F 51.5%, #E5D081 100%);
    box-shadow: 0px 1px 0px 0px #363636 inset;
}

.card.demo a img:first-child {
    width: 45px;
    transition: all 5s ease-in-out;
}

.card.demo a:hover img:first-child {
    display: none !important;
}

.card.demo a img:last-child {
    width: 45px;
    transition: all 5s ease-in-out;
}

.card.demo a:hover img:last-child {
    display: inline-block !important;
}

.card.category .card-header img {
    width: 31px;
}

.card.category .card-title {
    color: #FFFFFE;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.80);
    -webkit-text-stroke-width: 0.125px;
    -webkit-text-stroke-color: #2D0C00;
    font-family: "Noto Sans Thai UI";
    font-size: clamp(10px, 4vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.subpage .category {
    margin-bottom: 22px;
}

.subpage .category .nav-item {
    width: calc((100% - 1rem) / 5);
}

.subpage .category .nav-item .nav-link,
.subpage .category .nav-item .nav-link .card {
    width: 100%;
}

.subpage .category .nav-item .card-body {
    width: 100%;
    padding: 11px 15px 0 !important;
    border-radius: 12px;
    background: linear-gradient(180deg, #1B1B1B 0%, #8E602C 31%, #BB8431 60.5%, #F4EB9E 91%, #B08738 100%);
    box-shadow: 1px 1px 1px 0px rgba(255, 243, 202, 0.50) inset;
}


.card.category .card-body .card .card-body {
    padding: 0 !important;
    border-radius: 12px;
    background: linear-gradient(180deg, #1B1B1B 0%, #8E602C 31%, #BB8431 60.5%, #F4EB9E 91%, #B08738 100%);
    box-shadow: 1px 1px 1px 0px rgba(255, 243, 202, 0.50) inset;
}

.subpage .category .nav-item .card-body img,
.card.category .card-body .card .card-body img {
    filter: drop-shadow(-8px 4px 4px rgb(60 24 13 / 0.6));
}

.card.category .card-body .card:hover .card-body img,
.category .nav-item:hover .card-body img {
    animation: springAnimation 1s ease-in-out infinite;
}

.card.category .card-body .card .card-body hr,
.category .nav-item .card-body hr {
    height: 5px !important;
    border: 1px solid #E6D182;
    background: #4C472B;
    opacity: 1;
}

.card.category .card-body .card:hover .card-body hr,
.category .nav-item:hover .card-body hr {
    background: #FFF;
}

.card.category .card-body .card .card-footer,
.category .nav-item .card-footer {
    height: auto;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    color: #F0F0F0;
    text-align: center;
    font-family: "Noto Sans Thai UI";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 8px;
    background: linear-gradient(180deg, #868686 0%, #7B7B7B 9%, #656565 51%, #5D5D5D 100%);
    box-shadow: 1px 1px 1px 0px rgba(54, 54, 54, 0.50) inset;
}

.category .nav-item .card-footer {
    height: auto;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    color: #F0F0F0;
    text-align: center;
    font-family: "Noto Sans Thai UI";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 8px;
    background: linear-gradient(180deg, #868686 0%, #7B7B7B 9%, #444 51%, #0D0D0D 100%);
    box-shadow: 1px 1px 1px 0px rgba(54, 54, 54, 0.50) inset;
}

.card.category .card-body .card:hover .card-footer,
.category .nav-item:hover .card-footer {
    color: #070707;
    background: linear-gradient(180deg, #FFFF96 0%, #C2AA6B 28%, #AE8324 72%, #CFAA3A 100%);
}

main #carouselAutoplaying.carousel .carousel-indicators button {
    width: 40px !important;
    height: 10px !important;
    border-radius: 9px;
    background: rgba(244, 235, 158, 0.30);
}

main #carouselAutoplaying.carousel .carousel-indicators button.active {
    background: #F4EB9E;
}

main #carouselAutoplaying.carousel .carousel-inner {
    -webkit-appearance: none;
    border-radius: 3.5rem !important;
}

main .submenu:not(.home) .col-md-2_4:not(.active) {
    width: 13.5% !important;
    margin-top: auto;
}

main .submenu .card:hover .card-body img {
    transition: transform 0.15s ease-in-out;
}

main .submenu .card:hover .card-body img {
    transform: translateY(-5%);
}

main .submenu~.card .card-header {
    background: linear-gradient(180deg, #323232 0%, #2B2B2B 8.5%, #282828 51%, #242424 100%);
    box-shadow: 0px 1px 1px 0px #4E4E4E inset;
}

main .submenu~.card .card-header .card-title {
    color: #DDD;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke-width: 0.125px;
    -webkit-text-stroke-color: #2D0C00;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

main .submenu~.card .card-header .card-title p {
    color: #FCD63D;
}

main .card.slide-right .card-header,
main .card.slide-left .card-header,
main .card.gamecamp .card-header,
main .suggest .card-header {
    border-radius: 16px;
    background: linear-gradient(180deg, #323232 0%, #2B2B2B 8.5%, #282828 51%, #242424 100%);
    box-shadow: 0px 1px 1px 0px #4E4E4E inset;
}

main .card.slide-right .card-header .card-title,
main .card.slide-left .card-header .card-title,
main .card.gamecamp .card-header .card-title,
main .suggest .card-header .card-title {
    color: #DDD;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke-width: 0.125px;
    -webkit-text-stroke-color: #2D0C00;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

main .card.slide-right .card-header .card-title p,
main .card.slide-left .card-header .card-title p,
main .card.gamecamp .card-header .card-title p,
main .suggest .card-header .card-title p {
    color: #FCD63D;
}

main .card.slide-right .card-body .card-title,
main .card.slide-left .card-body .card-title,
.page2 .listslot2 .card-footer .card-title {
    color: #FFF;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    text-shadow: 0px 1px 7px #000;
    font-family: "Noto Sans Thai";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    text-transform: uppercase;
}

.page2 .card-header button {
    width: 119px;
    height: 40px;
    color: #000;
    font-family: "Noto Sans Thai UI";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 20px;
    background: linear-gradient(180deg, #E5C586 0%, #764A24 100%);
    transition: .3s ease-out;
}

.page2 .card-header button:hover {
    background: linear-gradient(180deg, #FFF584 0%, #ED8E00 100%);
}

img[alt="Arrow Right"] {
    width: 40px;
}

img[alt="Play Media"] {
    width: 53px;
}

.slick-track {
    left: 0;
}

main .card.slide-left .carousel-inner .carousel-items {
    margin: 0 14px;
    transition: transfrom 3s ease-out;
}

main .card.slide-right .carousel-inner .carousel-items {
    margin: 0 14px;
    transition: transfrom 3s ease-out;
}

main .card.gamecamp .card {
    border-radius: 10px;
    background: #353535;
    cursor: pointer;
    text-decoration: none;
    transition: all .3s ease-out;
}

main .card.gamecamp .card:hover {
    transform: scale(1.1);
    background: linear-gradient(180deg, #D4C291 0%, #EBD079 50%, #A1812E 100%);
}

main .card.gamecamp .card .card-body .card-title {
    color: #FFF;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
}

main .card.gamecamp .card:hover .card-img img[alt="Play Media"],
.listslot .card:hover .card-img img[alt="Play Media"],
.listfishing .card:hover .card-img img[alt="Play Media"] {
    display: block !important;
    z-index: 2;
    transition: display .3s ease-out;
}

main .card.gamecamp .card:hover .card-img .dark-frame,
.listslot .card:hover .card-img .dark-frame,
.listfishing .card:hover .card-img .dark-frame {
    display: block !important;
    background: rgba(0, 0, 0, 0.60);
}

main .card.gamecamp .card:hover .card-body .card-title,
.listslot .card:hover .card-body .card-title,
.listfishing .card:hover .card-body .card-title {
    color: #000;
}

main .suggest .card:nth-child(1) {
    width: 40% !important;
}

main .suggest .card:nth-child(2) {
    width: 60% !important;
}

main .suggest .card button {
    border: 2px solid #000;
    background: linear-gradient(180deg, #FFE6A3 0%, #FFE896 54%, #A1812E 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -7px 0px 0px rgba(161, 120, 46, 0.70) inset, 0px 6px 4px 0px #E9CB53 inset, 0px 6px 0.2px 0px #FFF6D5 inset;
}

main .suggest .card button p {
    color: #000;
    text-align: center;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
}

main .card.DepositWithdraealList,
main .card.DepositWithdraealList .card-header {
    border-radius: 3.5rem;
    border: 1px solid #232323;
    background: linear-gradient(180deg, #232323 0%, #1F1E1C 100%);
}

main .card.DepositWithdraealList .card-header .card-title {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    text-shadow: 0px 0px 6px rgba(213, 96, 2, 0.80);
    -webkit-text-stroke-width: 0.125px;
    -webkit-text-stroke-color: #2D0C00;
    font-family: "Noto Sans Thai Condensed";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}

main .card.DepositWithdraealList .card-header .card-title p {
    color: #FCD63D;
}

main .card.DepositWithdraealList .line {
    height: 3px;
    background: linear-gradient(180deg, #2C1F12 0%, #A98339 51.5%, #DEAF41 100%);
}

main .card.DepositWithdraealList .card-body .card {
    border-radius: 22px;
}

main .card.DepositWithdraealList .card.deposit {
    margin-top: 6px;
    margin-bottom: 6px;
    background: linear-gradient(180deg, #323232 0%, #2D2D2D 50.5%, #272727 100%);
    box-shadow: 0px 2px 8px 0px rgba(40, 40, 40, 0.20) inset, 0px 2px 0px 0px #3F3F3F inset, 0px 3px 2px 0px rgba(30, 30, 30, 0.25);
}

main .card.DepositWithdraealList .card.deposit button {
    border: 2px solid #00FF0C;
    background: linear-gradient(90deg, #00520C 0%, #228500 100%);
}

main .card.DepositWithdraealList .card.withdraw {
    margin-top: 6px;
    margin-bottom: 6px;
    background: linear-gradient(180deg, #1B1B1B 0%, #1B1B1B 100%);
    box-shadow: 0px 2px 8px 0px rgba(26, 26, 26, 0.20) inset, 0px 2px 0px 0px #262626 inset, 0px 3px 2px 0px rgba(30, 30, 30, 0.25);
}

main .card.DepositWithdraealList .card.withdraw button {
    background: #9B0303;
    border: 2px solid #9B0303;
    box-shadow: 0px 0px 4px 2px rgba(192, 0, 0, 0.60);
}

main .card.DepositWithdraealList .card .card-body {
    leading-trim: both;
    text-edge: cap;
    -webkit-text-stroke-width: 0.125px;
    -webkit-text-stroke-color: #2D0C00;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}

main .card.DepositWithdraealList .card .card-body button {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Sans Thai";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}

main .card.DepositWithdraealList .card .card-body p {
    color: #6A6A6A;
    leading-trim: both;
    text-edge: cap;
    -webkit-text-stroke-width: 0px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75);
    font-family: "Noto Sans Thai";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}

main .card.DepositWithdraealList .card .card-body .card-title {
    color: #FCD63D;
}

main .card.DepositWithdraealList .card .card-body .card-subtitle {
    color: #D3D3D3;
}

/* main .card.DepositWithdraealList .carousel-container .card.slide-up {
    animation: slideUp 1s ease-out infinite alternate;
} */

main .card.DepositWithdraealList .carousel-container .card.slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

main .card.DepositWithdraealList .carousel-container .card.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

main .promotion .card-header .card-title,
main .event .card-header .card-title {
    color: #FFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke-width: 0.125px;
    -webkit-text-stroke-color: #2D0C00;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

main .promotion .card-header .card-title p,
main .event .card-header .card-title p {
    color: #FCD63D;
}

main .promotion .card-header .nav-pills .nav-item {
    width: 13.415%;
}

main .promotion .card-header .nav-pills .nav-item button,
main .event .card-header .nav-pills .nav-item button {
    color: #FFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans Thai UI";
    font-size: clamp(10px, 4vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: linear-gradient(180deg, #323232 0%, #2B2B2B 8.5%, #282828 51%, #242424 100%);
    box-shadow: 0px 1px 1px 0px #4E4E4E inset;
}

main .promotion .card-header .nav-pills .nav-item button.active,
main .event .card-header .nav-pills .nav-item button.active {
    color: #412400;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: linear-gradient(180deg, #E4D7C1 0%, #AC9A7C 8.5%, #AC9A7C 51%, #AC9A7C 100%);
    box-shadow: 0px 1px 1px 0px #4E4E4E inset;
}

main .promotion .card-body .card .card-body a {
    position: absolute;
    right: 5%;
    bottom: 9.5%;
    background: linear-gradient(180deg, #FFE6A3 0%, #FFE896 54%, #A1812E 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -7px 0px 0px rgba(161, 120, 46, 0.70) inset, 0px 6px 4px 0px #E9CB53 inset, 0px 6px 0.2px 0px #FFF6D5 inset;
}

main .promotion .card-body .card .card-body a p {
    color: #000;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
}

main .promotion .card-footer button,
main .event .card-footer button {
    color: #FFF;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans Thai UI";
    font-size: clamp(10px, 4vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 1px solid #767676;
    background: #171717;
    box-shadow: 0px 1px 1px 0px #4E4E4E inset;
}

.subpage .submenu .nav-item .nav-link {
    height: 110px;
    margin-right: 10px;
}

.subpage .submenu .nav-item .nav-link.active {
    height: 152px;
}

.subpage .tab-content .card-header {
    background: linear-gradient(180deg, #323232 0%, #2B2B2B 8.5%, #282828 51%, #242424 100%);
    box-shadow: 0px 1px 1px 0px #4E4E4E inset;
}

.subpage .tab-content .card-header .card-title {
    color: #DDD;
    -webkit-text-stroke-width: 0.25px;
    -webkit-text-stroke-color: #2D0C00;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 14px 30px;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.subpage .tab-content .card-header .card-title p {
    color: #FCD63D;
}

.cardborder {
    border-radius: 1.15rem !important;
    border: 6px solid transparent !important;
    transition: all .3s ease-out;
}

.cardborder img {
    border-radius: 0.65rem !important;
}

.cardborder:hover {
    border-color: #E1CA84 !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 0px 10px 0px rgba(253, 255, 152, 0.70);
}

.cardborder button {
    color: #000;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFE6A3 0%, #FFE896 54%, #A1812E 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -7px 0px 0px rgba(161, 120, 46, 0.70) inset, 0px 6px 4px 0px #E9CB53 inset, 0px 6px 0.2px 0px #FFF6D5 inset;
}

.cardborder button.disabled-color {
    border: 2px solid #000 !important;
    background: linear-gradient(180deg, #5C5C5C 0%, #9C9C9C 54%, #717171 100%) !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -7px 0px 0px rgba(101, 101, 101, 0.70) inset, 0px 6px 4px 0px #EFEFEF inset, 0px 6px 0.2px 0px #DBDBDB inset !important;
}

.listslot .card,
.listfishing .card {
    background: #353535;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.listslot .card:hover,
.listfishing .card:hover,
#pills-tabContent .tab-pane .listslot .card:hover,
#pills-tabContent .tab-pane .listfishing .card:hover {
    transform: scale(1.05);
    background: linear-gradient(180deg, #D4C291 0%, #EBD079 50%, #A1812E 100%) !important;
}

.listslot .card .card-title,
.listfishing .card .card-title {
    color: #FFF;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans Thai";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
}

.listslot .card .card-footer .card-title,
.listfishing .card .card-footer .card-title {
    color: #FFF;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    text-shadow: 0px 1px 7px #000;
    font-family: "Noto Sans Thai";
    font-size: 0.94rem;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    text-transform: uppercase;
}

.our-partner {
    /* position: absolute; */
    left: 0;
    right: 3rem;
    bottom: 0;
    margin-top: 5rem;
    padding-bottom: 1.75rem;
    border-bottom: 2px solid #262626;
}

.our-partner .our {
    color: #FFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke-width: 0.125px;
    -webkit-text-stroke-color: #2D0C00;
    font-family: "Noto Sans Thai";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
}

.our-partner .our p {
    color: #FCD63D;
}

.promotion .our-partner,
.event .our-partner {
    left: 3rem;
}

.start-5 {
    left: 5% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.h-2 {
    height: 2% !important;
}

.h-73 {
    height: 73% !important;
}

.top-25 {
    top: 25% !important;
}

.start-5 {
    left: 5% !important;
}

.end-1 {
    right: 1% !important;
}

.end-2 {
    right: 2% !important;
}

.end-3 {
    right: 3% !important;
}

.end-4 {
    right: 4% !important;
}

.end-5 {
    right: 5% !important;
}

.end-6 {
    right: 6% !important;
}

.end-7 {
    right: 7% !important;
}

.end-8 {
    right: 8% !important;
}

.end-9 {
    right: 9% !important;
}

.end-10 {
    right: 10% !important;
}

.bottom-5 {
    bottom: 5% !important;
}

.bottom-0 {
    bottom: 0% !important;
}

.bottom-10 {
    bottom: 10% !important;
}

.-bottom-20 {
    bottom: -20% !important;
}

.opacity-80 {
    opacity: 0.8;
}

.col-md-1_7 {
    flex: 0 0 auto;
    width: 14.25% !important;
}

.col-md-2_4 {
    flex: 0 0 auto;
    width: 20% !important;
}

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

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

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
    }

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

@keyframes springAnimation {

    0%,
    50%,
    100% {
        transform: translateY(0);
    }

    25%,
    75% {
        transform: translateY(-10px);
    }
}

@media (max-width: 1600px) {
    .card.register .card-title {
        font-size: 24px;
    }

    .card.register .card-subtitle {
        font-size: 14px;
    }

    .subpage .submenu .nav-item .nav-link {
        height: 80px;
    }

    .subpage .submenu .nav-item .nav-link.active {
        height: 132px;
    }

    /* .card.category .card-body .card .card-body img {
        height: 3.5rem;
        margin-left: -30%;
    } */
}

@media (max-width: 1440px) {

    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }

    .navbar-nav {
        flex-direction: row !important;
    }

    .navbar-brand {
        width: 18vw;
    }

    .navbar-brand img {
        width: 100%;
    }

    .navbar-collapse .navbar-nav .nav-link {
        margin-left: 2rem !important;
    }

    .navbar-collapse~.banner {
        width: 23vw;
    }

    .card.login .card-header {
        height: 2.75rem;
        padding: 0.25rem 0.75rem 0.25rem 1rem !important;
    }

    .card.login .card-header img:nth-child(1) {
        width: 80px;
    }

    .card.login .card-header .card-title {
        margin-bottom: 0.25rem;
    }

    .card.login .contract h3 {
        margin-bottom: 0.25rem;
    }

    .card.login .card-body .contract img,
    .card.demo button img {
        width: 30px;
        height: 30px;
    }

    .card.register .card-body .card-title {
        font-size: 20px;
    }

    .card.register .card-body .card-subtitle {
        font-size: 12px;
    }

    .pt-4.px-2 {
        padding: 1rem 0 0 !important;
    }

    .p-4 {
        padding: 1rem !important;
    }

    .subpage .submenu .nav-item .nav-link {
        height: 75px;
    }

    .subpage .submenu .nav-item .nav-link.active {
        height: 117px;
    }

    .card.demo button {
        padding: 0.25rem 0.5rem !important;
        font-size: calc(18px + 2px) !important;
    }

    .card.category .card-body.row>* {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* .card.category .card-body .card .card-body img {
        height: 3.5rem;
        margin-left: -15%;
    } */

    .card.category .card-body .card .card-footer {
        font-size: calc(8px + 2px);
    }

    main.p-2.pb-md-0.ps-md-5.pe-md-3 {
        width: 100%;
        padding: 1.5rem 1rem 0 1.5rem !important;
    }

    .home.pe-md-5,
    main.p-2.ps-md-0 {
        width: 70% !important;
        padding-right: 1.5rem !important;
    }

    main #carouselAutoplaying.carousel .carousel-indicators button {
        width: 35px !important;
    }

    main .card.slide-right .card-body .card-title,
    main .card.slide-left .card-body .card-title {
        font-size: 9px !important;
    }

    .page2 .listslot2 .card-footer .card-title {
        font-size: 8px !important;
    }

    main .card.slide-left .carousel-inner .carousel-items {
        margin: 0 11px;
    }

    main .card.slide-right .carousel-inner .carousel-items {
        margin: 0 11px;
    }

    .DepositWithdraw.w-25 {
        width: 30% !important;
    }

    .DepositWithdraealList .card-header .card-title {
        font-size: calc(24px + 2px) !important;
    }

    .DepositWithdraealList .card-header img {
        padding-left: 0.5rem !important;
        padding-right: 0 !important;
    }

    /* .DepositWithdraealList .card-body .card {
        margin: 0.5rem !important;
    } */

    main .card.DepositWithdraealList .card-header .card-title {
        padding-left: 0 !important;
    }

    main .card.DepositWithdraealList .card .card-body {
        padding: 0.25rem 0.75rem !important;
        font-size: 14px !important;
        border-radius: 10px;
    }

    .DepositWithdraealList .card-body .card .card-body>div {
        padding: 0.25rem !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-5 button {
        padding: 0.25rem !important;
        font-size: 14px !important;
    }

    main .card.DepositWithdraealList .card .card-body p {
        font-size: 10px;
    }

    .DepositWithdraealList .card-body .card .card-body .col-5 button {
        padding: 0.5rem 1rem !important;
    }

    .cardborder button,
    main .suggest .card button p,
    main .card.gamecamp .card .card-body .card-title {
        font-size: 12px !important;
    }

    main .promotion .card-header .nav-pills .nav-item button {
        margin-right: 0.5rem !important;
        padding-left: 0rem !important;
        padding-right: 0rem !important;
        font-size: calc(15px + 2px) !important;
    }


    main .promotion .card-header .nav-pills .nav-item button img {
        margin-right: 0.5rem !important;
        height: 22px !important;
    }

    main .event .card-header .nav-pills .nav-item button {
        margin-right: 0.5rem !important;
        font-size: calc(15px + 2px) !important;
    }

    main .event .card-header .nav-pills .nav-item button img {
        margin-right: 0.5rem !important;
        height: 22px !important;
    }

    .card.category .card-body .card .card-body {
        padding: 0.5rem 0rem 0 !important;
    }

    #pills-tabContent .tab-pane .card-header .card-title {
        font-size: calc(16px + 2px);
    }

    #pills-tabContent .tab-pane .card {
        font-size: calc(18px + 2px);
    }

    .RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link {
        font-size: calc(18px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link:first-child p {
        font-size: calc(8px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer .text-warning,
    .RegisterModal .modal.show .modal-body #nav-login h1.text-warning {
        font-size: calc(20px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #nav-login a,
    .RegisterModal .modal.show .modal-body #contentContainer p {
        font-size: calc(12px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img {
        width: 35px;
        height: 35px;
    }

    .RegisterModal .modal.show .modal-body #contentContainer input,
    .RegisterModal .modal.show .modal-body #nav-login input {
        font-size: calc(24px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer button,
    .RegisterModal .modal.show .modal-body #nav-login button {
        font-size: calc(16px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #nav-login img {
        width: 22px !important;
    }

    .page1 .card-header .card-title,
    .page2 .card-header .card-title,
    .sport .card-header .card-title,
    .casino .card-header .card-title,
    .fishing .card-header .card-title,
    .online .card-header .card-title {
        font-size: calc(16px + 2px) !important;
    }

    .listslot .card .card-title,
    .listfishing .card .card-title {
        font-size: 12px !important;
    }

    .col-md-2_4 {
        flex: 0 0 auto;
        width: 20% !important;
    }

    .col-md-1_7 {
        flex: 0 0 auto;
        width: 14.25% !important;
    }

    .our-partner .our {
        font-size: 20px;
    }
}

@media (max-width: 1280px) {
    .col-md-6.col-lg-4 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* .card.category .card-body .card .card-body img {
        margin-left: -30%;
    } */

    .our-partner .our {
        font-size: 18px;
    }

    .subpage .submenu .nav-item .nav-link {
        height: 60px;
    }

    .subpage .submenu .nav-item .nav-link.active {
        height: 102px;
    }
}

/* @media (max-width: 1200px) {
    .card.category .card-body .card .card-body img {
        height: 2.5rem;
       margin-left: -10%;
    }
} */

@media (max-width: 1024px) {
    body {
        grid-template-columns: 22vw 78vw;
    }

    .navbar-collapse {
        display: flex !important;
    }

    .navbar-nav {
        flex-direction: row;
    }

    .navbar-brand {
        width: 18vw;
    }

    .navbar-brand img {
        width: 100%;
    }

    .navbar-collapse .navbar-nav .nav-link {
        margin-left: 2rem !important;
    }

    .navbar-collapse .banner {
        width: 18vw;
    }

    .card.login .card-header {
        height: 2rem;
        padding: 0.25rem 0.75rem 0.25rem 0.5rem !important;
    }

    .card.login .card-body img {
        width: 15px;
        height: 15px;
    }

    .card.login .card-body .contract {
        padding-left: 0.5rem !important;
    }

    .card.login .card-body .contract button:first-child {
        margin-right: 0.25rem !important;
    }

    .card.login .card-body .contract button:first-child {
        margin-right: 0.25rem !important;
    }

    .card.login .card-body .contract img {
        width: 20px;
        height: 20px;
    }

    .card.demo a {
        font-size: 14px;
        border-radius: 8px !important;
    }

    .card.demo a img:first-child,
    .card.demo a img:last-child {
        width: 20px;
        height: 20px;
        padding: 0 !important;
    }

    .card-body,
    .card.demo {
        padding: 0.5rem !important;
    }

    .card.login .card-header img:nth-child(1) {
        width: 70px;
    }

    .card.login .card-header img:nth-child(2) {
        width: 20px;
        margin-left: 2rem !important;
    }

    .card.login .card-header .card-title {
        margin-bottom: 0.25rem;
    }

    .card.login .contract h3 {
        margin-bottom: 0.25rem;
    }

    .card.login .card-body .contract img,
    .card.demo button img {
        width: 30px;
        height: 30px;
    }

    .card.register .card-body .card-title {
        font-size: 100%;
    }

    .card.register .card-body .card-subtitle {
        font-size: 10px;
    }

    .pt-4.px-2 {
        padding: 1rem 0 0 !important;
    }

    .p-4 {
        padding: 1rem !important;
    }

    .card.demo button {
        padding: 0.25rem 0.5rem !important;
        font-size: calc(12px) !important;
    }

    /*  .card.category .card-body .card .card-body img {
        height: 3rem;
        margin: -0.25rem auto 0 -15%;
    } */

    section .card.category .card-body {
        padding: 0.75rem !important;
    }

    .card.category .card-body .card .card-footer {
        font-size: 8px;
    }

    .subpage .submenu .nav-item .nav-link {
        height: 50px;
    }

    .subpage .submenu .nav-item .nav-link.active {
        height: 82px;
    }

    main.p-2.pb-md-0.ps-md-5.pe-md-3 {
        width: 100%;
        padding: 1.5rem 1rem 0 0 !important;
    }

    .home.pe-md-5 {
        padding-right: 1.5rem !important;
    }

    main .card.slide-right .card-header .card-title,
    main .card.slide-left .card-header .card-title,
    main .card.gamecamp .card-header .card-title,
    main .suggest .card-header .card-title,
    #pills-tabContent .card-header .card-title {
        font-size: 20px !important;
        margin-bottom: 0 !important;
    }

    main .card.slide-right .card-body .card-title,
    main .card.slide-left .card-body .card-title {
        font-size: 8px !important;
    }

    .page2 .listslot2 .card-footer .card-title {
        margin-top: 0 !important;
    }

    .DepositWithdraealList .card-header .card-title {
        font-size: 18px !important;
    }

    .DepositWithdraealList .card-header img {
        padding-left: 0.5rem !important;
        padding-right: 0 !important;
    }

    /* .DepositWithdraealList .card-body .card {
        margin: 0.5rem !important;
    } */

    .DepositWithdraealList .card-body .card .card-body>div {
        padding: 0.5rem !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-5 button {
        padding: 0.5rem 0.75rem !important;
    }

    .cardborder button,
    main .suggest .card button p {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    .cardborder button p {
        padding: 0 8px !important;
    }

    main .promotion .card-header .nav-pills .nav-item {
        width: calc(100% / 6.5);
        margin-right: 0.5rem !important;
    }

    main .promotion .card-header .nav-pills .nav-item button {
        font-size: 15px !important;
    }

    main .promotion .card-header .nav-pills .nav-item button img {
        height: 22px !important;
    }

    #pills-tabContent .tab-pane .card-header .card-title {
        font-size: 16px;
        padding: 10px 16px;
    }

    #pills-tabContent .tab-pane .card {
        font-size: 18px;
    }

    .RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link {
        font-size: calc(18px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link:first-child p {
        font-size: calc(8px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer .text-warning,
    .RegisterModal .modal.show .modal-body #nav-login h1.text-warning {
        font-size: calc(20px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #nav-login a,
    .RegisterModal .modal.show .modal-body #contentContainer p {
        font-size: calc(12px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img {
        width: 30px;
        height: 30px;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img:first-child {
        margin-right: 0.75rem;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img:last-child {
        margin-left: 0.75rem;
    }

    .RegisterModal .modal.show .modal-body #contentContainer input,
    .RegisterModal .modal.show .modal-body #nav-login input {
        font-size: calc(24px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer button,
    .RegisterModal .modal.show .modal-body #nav-login button {
        font-size: calc(16px + 10px) !important;
    }

    .RegisterModal .modal.show .modal-body #nav-login img {
        width: 22px !important;
    }

    .page1 .card-header .card-title,
    .page2 .card-header .card-title,
    .sport .card-header .card-title,
    .casino .card-header .card-title,
    .fishing .card-header .card-title,
    .online .card-header .card-title {
        font-size: 16px !important;
    }

    .cardborder button,
    main .suggest .card button p,
    main .card.gamecamp .card .card-body .card-title {
        font-size: 10px;
    }

    .col-md-2_4 {
        flex: 0 0 auto;
        width: 20% !important;
    }

    .col-md-1_7 {
        flex: 0 0 auto;
        width: 14.25% !important;
    }

    .our-partner .our {
        font-size: 16px;
    }

    .-bottom-20 {
        bottom: -30% !important;
    }
}

@media (max-width: 991px) {
    .navbar-collapse .navbar-nav {
        flex-direction: row !important;
    }

    .card.login .card-header img:nth-child(1) {
        width: 50%;
        margin-left: -1.5rem;
    }

    .card.login .card-header img:nth-child(2) {
        width: 15px;
        margin-left: 1rem !important;
    }

    .card.login .card-body button[type="submit"] {
        height: 36px;
        font-size: 18px;
    }

    .card.login .card-header .card-title {
        font-size: 10px !important;
    }

    .card.register .card-body .card-title {
        font-size: 80%;
    }

    .card.login .card-body .contract h3 {
        font-size: 14px !important;
    }

    .card.login .card-body .forgot {
        font-size: 12px;
    }

    .card.login .card-body .contract img {
        width: 15px;
        height: 15px;
    }

    .card.register .card-body .card-subtitle {
        font-size: 8px;
    }

    .col-md-6.col-lg-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* .card.category .card-body .card .card-body img {
        height: 3.5rem;
        margin-left: 0%;
    } */

    main #carouselAutoplaying.carousel {
        padding-bottom: 2rem !important;
    }

    main #carouselAutoplaying.carousel .carousel-inner {
        border-radius: 1.5rem !important;
    }

    main #carouselAutoplaying.carousel .carousel-indicators button {
        width: calc(40px - 20px) !important;
        height: calc(10px - 4px) !important;
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }

    main .card.slide-right .card-body .card-title,
    main .card.slide-left .card-body .card-title,
    .page2 .listslot2 .card-footer .card-title {
        font-size: 6px !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0 !important;
    }

    main .card.slide-left .carousel-inner .carousel-items {
        margin: 0 8px;
    }

    main .card.slide-right .carousel-inner .carousel-items {
        margin: 0 8px;
    }

    main .card.gamecamp .card .card-body .card-title {
        font-size: 7px !important;
    }

    main .card.gamecamp .card {
        padding: 0.25rem !important;
    }

    main .card.slide-right .card-header,
    main .card.slide-left .card-header,
    main .card.gamecamp .card-header,
    main .suggest .card button p {
        padding: 0 !important;
    }

    /* main .suggest .card button {
        padding: 0.25rem 0.5rem !important;
    } */

    main .card.DepositWithdraealList .card-header .card-title {
        padding-left: 0 !important;
    }

    main .card.DepositWithdraealList .card .card-body {
        padding: 0.25rem 0.75rem !important;
        font-size: 10px !important;
        border-radius: 10px;
    }

    .DepositWithdraealList .card-body .card .card-body>div {
        padding: 0.25rem !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-5 button {
        padding: 0.25rem !important;
        font-size: 10px !important;
    }

    main .card.DepositWithdraealList .card .card-body p {
        font-size: 7px;
    }

    .listslot .card .card-title,
    .listfishing .card .card-title {
        font-size: 7px !important;
    }

    footer {
        font-size: medium;
    }
}

/* @media (max-width: 880px) {
    .card.category .card-body .card .card-body img {
        margin-left: -10%;
    }
} */

@media (max-width: 800px) {
    .card.demo a {
        font-size: 12px;
    }

    .card.demo a img {
        width: 30px;
        height: 30px;
    }

    .card.category .card-header img {
        width: 20px;
        height: 20px;
    }

    .card.category .card-title {
        font-size: 14px;
    }

    main .promotion .card-header .nav-pills .nav-item {
        margin-right: 1% !important;
    }

    main .promotion .card-header .nav-pills .nav-item button {
        font-size: 14px !important;
    }

    main .promotion .card-header .nav-pills .nav-item button img {
        margin-right: 0.25rem !important;
    }

    main .card.DepositWithdraealList,
    main .card.DepositWithdraealList .card-header {
        border-radius: 1.5rem;
    }

    main .card.DepositWithdraealList .card-body .card {
        border-radius: 12px;
    }

    .RegisterModal .modal.show .modal-dialog {
        max-width: 80% !important;
    }

    main .promotion .card-body .card .card-body a p {
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 12px;
    }

    .DepositWithdraealList .card-header .card-title {
        font-size: 16px !important;
    }

    /* .card.category .card-body .card .card-body img {
        height: 3rem;
        margin-left: -15%;
    } */

    .subpage .submenu .nav-item .nav-link {
        height: 40px;
    }

    .subpage .submenu .nav-item .nav-link.active {
        height: 72px;
    }

    .col-md-2_4 {
        padding-right: calc(0.5rem * 0.5) !important;
        padding-left: calc(0.5rem * 0.5) !important;
    }
}

@media (max-width: 767px) {
    body {
        background-color: rgba(0, 0, 0, 0.25);
        grid-template-columns: 100%;
        grid-template-rows: 78px minmax(100vh, max-content) 77px 0px;
        grid-template-areas:
            "header"
            "content"
            "footer"
            "section";
    }

    main {
        width: 100vw !important;
    }

    footer {
        position: sticky !important;
        bottom: 0 !important;
    }

    .collapse:not(.show) {
        display: none !important;
    }

    .navbar-brand {
        width: 45% !important;
        padding: 0 !important;
    }

    .navbar-brand img {
        width: auto !important;
        height: 47px !important;
    }

    .login-register {
        font-family: "Noto Sans Thai";
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .login-register button:first-child {
        font-size: calc(12px + 2px) !important;
        background: linear-gradient(180deg, #F8F8F8 0%, #686868 100%);
    }

    .login-register button:last-child {
        font-size: calc(12px + 2px) !important;
        background: linear-gradient(180deg, #FFE141 0%, #B58A24 100%);
    }

    main.p-2.pb-md-0.ps-md-5.pe-md-3,
    .p-2.ps-md-0.pe-md-1.pt-md-2 {
        padding: 0.75rem !important;
    }

    .home.pe-md-5 {
        padding-right: 0 !important;
    }

    .MobileSidemenu {
        color: #F7FEFF;
        text-align: center;
        text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.30);
        font-family: "DB Heavent";
        font-size: calc(18px + 2px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        border-radius: 20px 20px 0px 0px;
        background: linear-gradient(180deg, #FFE351 2.67%, #424242 6.56%, #262626 50.05%, #0C0C0C 89.63%, #242424 100.04%);
    }

    .MobileSidemenu>a,
    .MobileSidemenu>button {
        color: #F7FEFF;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        text-decoration: none;
    }

    .MobileSidemenu img {
        width: 30px !important;
        height: 30px !important;
    }

    .MobileSidemenu .login img {
        width: 87px !important;
        height: 87px !important;
        top: 7px !important;
    }

    .MobileSidemenu .contract-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: 0.75rem;
    }

    .MobileSidemenu .contract-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .MobileSidemenu .contract-menu img {
        width: 60px !important;
        height: 60px !important;
    }

    .MobileSidemenu .contract-menu .btn-close {
        background: url(/assets_2025/images/Home/btn-close.png) no-repeat;
        background-position: center;
        background-size: 42px;
        opacity: 1;
    }

    .MobileSidemenu .contract-menu .btn-close:hover {
        background: url(/assets_2025/images/Home/btn-close2.png) no-repeat;
        background-position: center;
        background-size: 42px;
        opacity: 1;
    }

    .MobileSidemenu .contract-menu .btn {
        width: 60px !important;
        height: 60px !important;
        position: absolute;
        right: 0.2rem;
        bottom: 100%;
        scale: 0;
        text-align: center;
        transition: 0.5s;
        transform: translateY(calc((-130% * var(--i))));
        transition-delay: calc(0.05s * var(--i));
    }

    .MobileSidemenu .contract-menu.show .btn {
        scale: 1;
    }

    .subpage #pills-tabContent .tab-pane .card.bg-transparent,
    .suggest #pills-tabContent .tab-pane .card.cardborder.bg-transparent,
    #pills-tabContent .tab-pane .card.page1.bg-transparent,
    #pills-tabContent .tab-pane .card.page2.bg-transparent {
        background: transparent !important;
    }

    .our-partner {
        width: 100% !important;
        position: relative;
        margin-top: 0;
    }

    main>.home.w-75,
    main>.subpage.w-75,
    .home.pe-md-5,
    main.p-2.ps-md-0 {
        width: 100% !important;
    }

    main #carouselAutoplaying.carousel .carousel-indicators button {
        width: 20px !important;
        height: 5px !important;
    }

    main #carouselAutoplaying.carousel .carousel-indicators button.active {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        transform: scaleX(1.5);
    }

    .card.category .card-body.row {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .card.category .card-body.row .col-2_4.col-md-4 {
        padding-left: 0.125rem !important;
        padding-right: 0.125rem !important;
    }

    main .card.slide-right .card-header .card-title,
    main .card.slide-left .card-header .card-title,
    main .card.gamecamp .card-header .card-title,
    main .suggest .card-header .card-title,
    #pills-tabContent .card-header .card-title {
        font-size: 20px !important;
    }

    /* .card.category .card-body .card .card-body img,
    .subpage .category .nav-item .card-body img {
        width: auto !important;
        height: 6rem !important;
        margin: -0.25rem auto 0 0;
    } */

    .card.category .card-body .card .card-footer {
        font-size: 14px;
        background: linear-gradient(180deg, #868686 0%, #7B7B7B 9%, #444 51%, #0D0D0D 100%);
        box-shadow: 1px 1px 1px 0px rgba(54, 54, 54, 0.50) inset;
    }

    main .card.slide-left .card-header,
    main .card.gamecamp .card-header,
    #pills-tabContent .tab-pane .card-header {
        border-radius: 8px;
        background: linear-gradient(180deg, #323232 0%, #2B2B2B 8.5%, #282828 51%, #242424 100%);
        box-shadow: 0px 1px 1px 0px #4E4E4E inset;
    }

    .cardborder button,
    main .suggest .card button p,
    main .card.slide-left .card-body .card-title {
        font-size: 14px !important;
    }

    main .card.gamecamp .card:hover,
    .listslot .card:hover,
    .listfishing .card:hover {
        transform: scale(1.05);
    }

    main .card.gamecamp .card .card-body {
        padding: 1rem 0 !important;
    }

    main .card.gamecamp .card .card-body .card-title {
        font-size: 18px !important;
    }

    main .suggest {
        flex-direction: column;
    }

    main .suggest .card:nth-child(1),
    main .suggest .card:nth-child(2) {
        width: 100% !important;
    }

    main .suggest .col-12 .cardborder:nth-child(1) button p {
        padding: 0.25rem 0.65rem !important;
    }

    /* main .suggest .card button {
        padding: 0.75rem 1.5rem !important;
    } */

    main .card.DepositWithdraealList .card-header .card-title {
        font-size: 20px !important;
        leading-trim: both;
        text-edge: cap;
        text-shadow: 0px 0px 6px rgba(213, 96, 2, 0.80);
        -webkit-text-stroke: 0.5px;
        -webkit-text-stroke-color: #2D0C00;
    }

    main .card.DepositWithdraealList .card .card-body {
        padding: 10px 1rem !important;
        font-size: 1rem !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-5 button {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }

    main .card.DepositWithdraealList .card .card-body p {
        font-size: 12px;
        margin-top: 1rem;
    }

    main .promotion .card-header .nav-pills .nav-item {
        width: calc((100% - 30px)/3);
    }

    main .event .card-header .nav-pills .nav-item {
        width: calc((100% - 20px)/3);
    }

    main .promotion .card-header .nav-pills .nav-item button,
    main .event .card-header .nav-pills .nav-item button {
        font-size: calc(15px + 8px) !important;
        padding: 0.5rem 0 !important;
    }

    main .promotion .card-header .nav-pills .nav-item button img,
    main .event .card-header .nav-pills .nav-item button img {
        height: 22px !important;
    }

    .promotion .card-body .col-md-6 {
        padding: 0;
    }

    .event .card-body .col-md-6 {
        padding: 0 0.25rem;
        margin-bottom: 0.75rem !important;
    }

    .promotion .card-footer:last-child,
    .event .card-footer:last-child {
        font-size: 24px;
    }

    .listslot .card,
    .listfishing .card {
        height: 100%;
    }

    .listslot .card .card-body,
    .listfishing .card .card-body {
        padding: 1.5rem 0 1rem !important;
    }

    .listslot .card .card-title,
    .listfishing .card .card-title {
        color: #FFF;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: "Noto Sans Thai";
        font-size: 18px !important;
        font-style: normal;
        font-weight: 700;
        line-height: 110%;
        text-transform: uppercase;
    }

    #pills-tabContent .tab-pane .card-header,
    .suggest .card-header {
        border-radius: 8px !important;
    }

    #pills-tabContent .tab-pane .card-header .card-title {
        color: #FFF;
        font-family: "Noto Sans Thai";
        font-size: calc(16px + 12px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 0 !important;
        padding: 3px 16px;
    }

    #pills-tabContent .tab-pane .card {
        color: #FFF;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: "Noto Sans Thai";
        font-size: calc(18px + 2px);
        font-style: normal;
        font-weight: 500;
        line-height: 110%;
        text-transform: uppercase;
        border-radius: 10px;
        background: #353535 !important;
        box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.25);
    }

    .RegisterModal .modal.show .modal-dialog-centered {
        justify-content: center;
    }

    .RegisterModal .modal.show .modal-dialog {
        max-width: 90% !important;
    }

    .RegisterModal .modal.show .modal-dialog .btn-close {
        width: 30px !important;
        height: 30px !important;
        top: -5% !important;
        background-size: 30px !important;
    }

    .RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link {
        font-size: calc(18px + 8px) !important;
    }

    .RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link:first-child p {
        font-size: calc(8px + 8px) !important;
        top: 5% !important;
        right: 25% !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer .text-warning,
    .RegisterModal .modal.show .modal-body #nav-login h1.text-warning {
        font-size: calc(20px + 8px) !important;
    }

    .RegisterModal .modal.show .modal-body #nav-login a,
    .RegisterModal .modal.show .modal-body #contentContainer p {
        font-size: calc(12px + 8px) !important;
    }

    .page2 .listslot2 .card-footer .card-title {
        font-size: 11px !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img {
        width: 25px;
        height: 25px;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img:first-child {
        margin-right: 0.5rem;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img:last-child {
        margin-left: 0.5rem;
    }

    .RegisterModal .modal.show .modal-body #contentContainer input,
    .RegisterModal .modal.show .modal-body #nav-login input {
        font-size: calc(24px + 8px) !important;
        border-radius: 16px;
    }

    .RegisterModal .modal.show .modal-body #contentContainer button,
    .RegisterModal .modal.show .modal-body #nav-login button {
        font-size: calc(16px + 8px) !important;
    }

    .RegisterModal .modal.show .modal-body #nav-login img {
        width: 22px !important;
    }

    .page1 .card-header .card-title,
    .page2 .card-header .card-title,
    .sport .card-header .card-title,
    .casino .card-header .card-title,
    .fishing .card-header .card-title,
    .online .card-header .card-title {
        font-size: calc(16px + 8px) !important;
    }

    .col-2_4 {
        flex: 0 0 auto;
        width: 20% !important;
    }

    .col-6 {
        flex: 0 0 auto;
        width: 50% !important;
    }

    #contentContainer .form-check.ms-auto {
        width: 400px !important;
    }

    #contentContainer form[action="Successful"] p {
        padding-left: 9rem !important;
    }

    .our-partner {
        border: none;
    }

    .promotion .our-partner,
    .event .our-partner {
        left: 0;
    }

    .cardborder button {
        padding: 8px 24px !important;
    }

    .cardborder button p {
        font-size: 16px;
        padding: 8px 24px !important;
    }

    .col-6.col-md-2_4 {
        padding-right: 0.375rem !important;
        padding-left: 0.375rem !important;
    }
}

/* @media (max-width: 650px) {

    .card.category .card-body .card .card-body img,
    .subpage .category .nav-item .card-body img {
        margin: -0.25rem auto 0 -15%;
    }
} */

@media (max-width: 575px) {

    /* .card.category .card-body .card .card-body img,
    .subpage .category .nav-item .card-body img {
        height: 5.75rem !important;
        margin-left: -15% !important;
    } */

    .card.category .card-body.row .col-2_4.col-md-4 {
        padding: 0 0.25rem !important;
    }

    .cardborder button,
    main .suggest .card button p,
    .card.category .card-body .card .card-footer {
        font-size: 12px !important;
    }

    main .card.slide-left .card-body .card-title {
        font-size: 9px !important;
    }

    main .card.gamecamp .card:hover,
    .listslot .card:hover,
    .listfishing .card:hover {
        transform: scale(1.05);
    }

    main .card.DepositWithdraealList .card-header .card-title {
        font-size: 16px !important;
    }

    /* main .suggest .card button {
        padding: 0.1875rem 0.375rem !important;
    } */

    main .promotion .card-header .nav-pills .nav-item button,
    main .event .card-header .nav-pills .nav-item button {
        font-size: 15px !important;
    }

    main .promotion .card-header .nav-pills .nav-item button img,
    main .event .card-header .nav-pills .nav-item button img {
        height: 22px !important;
        margin-right: 0.25rem !important;
    }

    .promotion .card-footer:last-child,
    .event .card-footer:last-child {
        font-size: 18px;
    }

    main .card.slide-right .card-header .card-title,
    main .card.slide-left .card-header .card-title,
    main .card.gamecamp .card-header .card-title,
    main .suggest .card-header .card-title,
    #pills-tabContent .card-header .card-title {
        font-size: 16px !important;
    }

    #pills-tabContent .tab-pane .card-header .card-title {
        color: #FFF;
        font-family: "Noto Sans Thai";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    #pills-tabContent .tab-pane .card {
        color: #FFF;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: "Noto Sans Thai";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%;
        text-transform: uppercase;
        border-radius: 10px;
        background: #353535 !important;
        box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.25);
    }

    .RegisterModal .modal.show .modal-dialog-centered {
        justify-content: center;
    }

    .RegisterModal .modal.show .modal-dialog .btn-close {
        width: 30px !important;
        height: 30px !important;
        top: -5% !important;
        background-size: 30px !important;
    }

    .RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link {
        font-size: 18px !important;
    }

    .RegisterModal .modal.show .modal-body nav .nav-tabs .nav-link:first-child p {
        font-size: 8px !important;
        top: 20% !important;
        right: 25% !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer .text-warning,
    .RegisterModal .modal.show .modal-body #nav-login h1.text-warning {
        font-size: 20px !important;
    }

    .RegisterModal .modal.show .modal-body #nav-login a,
    .RegisterModal .modal.show .modal-body #contentContainer p,
    .page2 .listslot2 .card-footer .card-title {
        font-size: 12px !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img {
        width: 20px;
        height: 20px;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img:first-child {
        margin-right: 0.25rem;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img:last-child {
        margin-left: 0.25rem;
    }

    .RegisterModal .modal.show .modal-body #contentContainer input,
    .RegisterModal .modal.show .modal-body #nav-login input {
        font-size: 24px !important;
        border-radius: 16px;
    }

    .RegisterModal .modal.show .modal-body #contentContainer button,
    .RegisterModal .modal.show .modal-body #nav-login button {
        font-size: 16px !important;
    }

    .RegisterModal .modal.show .modal-body #nav-login img {
        width: 22px !important;
    }

    .page1 .card-header .card-title,
    .page2 .card-header .card-title,
    .sport .card-header .card-title,
    .casino .card-header .card-title,
    .fishing .card-header .card-title,
    .online .card-header .card-title {
        font-size: 16px !important;
    }

    .col-2_4 {
        flex: 0 0 auto;
        width: 20% !important;
    }

    .col-3 {
        flex: 0 0 auto;
        width: 25% !important;
    }

    #contentContainer .form-check.ms-auto {
        width: 330px !important;
    }

    #contentContainer .form-check input {
        padding: 0 !important;
    }

    #contentContainer form[action="Successful"] p {
        padding-left: 3rem !important;
    }

    .cardborder button {
        padding: 8px 24px !important;
    }

    .cardborder button p {
        padding: 8px 16px !important;
    }

    form[action="Successful"] img {
        width: 75px !important;
    }

    main.p-2.pb-md-0.ps-md-5.pe-md-3,
    .p-2.ps-md-0.pe-md-1.pt-md-2,
    .card-body.row {
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0.5rem !important;
    }

    .card.category .card-body.row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .card.category .card-body.row .col-2_4.col-md-4 {
        padding-left: 0.125rem !important;
        padding-right: 0.125rem !important;
    }

    main .card.DepositWithdraealList .card-body .card {
        border-radius: 22px;
    }

    main .card.DepositWithdraealList .card .card-body {
        padding: 0.75rem !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-3 {
        padding-left: 0.75rem !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-5 {
        padding-right: 0.75rem !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-5 button {
        height: 36px;
        padding: 8px 13.75px !important;
        border-radius: 14.5px !important;
    }

    .card.gamecamp .card-body,
    .suggest .card-body,
    .promotion .card-body,
    .event .card-body,
    .subpage .card-body {
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    .card.gamecamp .col-6 {
        padding: 0 0.375rem !important;
    }

    .col-12,
    .col-6,
    .cardborder .card-body {
        padding: 0 !important;
    }
}

/* @media (max-width: 520px) {

    .card.category .card-body .card .card-body img,
    .subpage .category .nav-item .card-body img {
        height: 4.5rem !important;
    }
} */

@media (max-width: 430px) {

    .card-title {
        font-size: 16px !important;
    }

    .page2 .listslot2 .card-footer .card-title {
        font-size: 10px !important;
    }

    #contentContainer .form-check.ms-auto {
        padding-left: 1.5rem !important;
    }

    #contentContainer form[action="Successful"] p {
        padding-left: 2rem !important;
    }

    .login-register button:first-child {
        padding: 0.5rem !important;
    }

    .login-register button:last-child {
        margin-left: 0rem !important;
    }

    /* .card.category .card-body .card .card-body img {
        height: 3.5rem !important;
        margin-left: -7.5% !important;
    } */

    .subpage .category .nav-item .card-body img {
        height: 3.5rem !important;
        margin-left: 0 !important;
    }

    .subpage .category .nav-item .card-body {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .cardborder button {
        padding: 5px 16px !important;
    }

    .cardborder button p {
        padding: 4px 8px !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer .form-check .d-flex {
        width: calc(100% + 1rem);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img,
    .RegisterModal .modal.show .modal-body #contentContainer input[type="radio"] {
        width: 35px;
        height: 35px;
    }

    .RegisterModal .modal.show .modal-body #contentContainer .form-check.form-check-inline {
        padding: 0 0.5rem;
    }
}

/* @media (max-width: 375px) {

    .card.category .card-body .card .card-body img,
    .subpage .category .nav-item .card-body img {
        margin-left: -10% !important;
    }
} */

@media (max-width: 320px) {

    .card.category .card-body .card .card-body,
    .subpage .category .nav-item .card-body {
        padding: 0.5rem 0.5rem 0 !important;
    }

    /* .card.category .card-body .card .card-body img,
    .subpage .category .nav-item .card-body img {
        height: 2.75rem !important;
         margin-left: -15% !important; 
    }*/

    .MobileSidemenu>a,
    .MobileSidemenu>button {
        font-size: 16px;
    }

    main .card.DepositWithdraealList .card .card-body {
        padding: 0.5rem !important;
    }

    main .card.DepositWithdraealList .card-body .card {
        margin: 0.5rem 0 !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-3 {
        padding-left: 0.5rem !important;
    }

    .DepositWithdraealList .card-body .card .card-body .col-5 {
        padding-right: 0.5rem !important;
    }

    .listslot .card,
    .listfishing .card,
    #pills-tabContent .tab-pane .listslot .card,
    #pills-tabContent .tab-pane .listfishing .card {
        padding: 0.25rem !important;
    }

    .listslot .card .card-title,
    .listfishing .card .card-title {
        font-size: 14px !important;
    }

    .RegisterModal .modal.show .modal-body #contentContainer .form-check .d-flex {
        width: calc(100% + 0.5rem);
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }

    .RegisterModal .modal.show .modal-body #contentContainer #bankName img,
    .RegisterModal .modal.show .modal-body #contentContainer input[type="radio"] {
        width: 30px;
        height: 30px;
    }

    .RegisterModal .modal.show .modal-body #contentContainer .form-check.form-check-inline {
        padding: 0 0.25rem;
    }
}