.container img{
    object-fit: contain !important;
}

header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    padding: 0px 20px;
    background-color: #010851;
    top: 0;
    position: fixed;
    width: 100%;
    max-width: 460px;
    z-index: 9;
}

.header-left {
    display: flex;
    margin-top: 5px;
}
.avatar-container{
    position: relative;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid #FFD900;
}
.avatar:hover{
    cursor: pointer;
}
.level{
    position: absolute;
    left: 10px;
    top: 46px;
    width: 55%;
    z-index: 2;
}
.text-level{
    position: absolute;
    left: 16px;
    top: 38px;
    font-size: 14px;
    z-index: 4;
    font-weight: bold;
}
.info{
    margin-top: 5px;
    margin-left: 5px;
}
.info .recharge{
    padding: 5px 0;
    margin-left: 10px;
}
.recharge .horizontal-container{
    width: 100%;
}
.recharge .img-horizontal{
    position: relative;
    width: 60%;
}
.img-horizontal .icon-add__recharge{
    width: 50%;
    position: absolute;
    left: -13px;
    top: -6px;
}
#number-spin{
    font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
}
.img-horizontal .icon-add__recharge:hover{
    cursor: pointer;
}
.recharge .text-recharge{
    position: absolute;
    top: 4px;
    left: 22px;
    font-size: 13px;
}
.header-right {
    display: flex;
    align-items: center;
}
.icon-noti{
    width: 50%;
}

.info p {
    margin: 0;
}

.bell-icon {
    display: flex;
    justify-content: center;
    position: relative;
}
.bell-icon:hover{
    cursor: pointer;
}

.bell-icon p {
    position: absolute;
    top: -14px;
    right: 7px;
    border-radius: 50%;
    padding: 3px 7px;
    font-size: 12px;
}
.bell-icon .icon-red {
    position: absolute;
    top: -4px;
    right: 0px;
    width: 40%;
    object-fit: contain;
    padding: 3px 7px;
}
.icon-red,
#count-notis {
    display: none;
}

.slide-wrapper{
    margin-top: 75px;
}
.owl-carousel{
    padding: 10px 0 0 0 !important;
}
.owl-dots, .owl-nav {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.owl-dot span {
    width: 8px;
    height: 8px;
    margin: 5px 7px;
    background: #232C90;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}
.owl-dots {
    margin-top: 5px;
}
.owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #fff;
}
.main-content{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: -10px;
}

.main-content .sub-slider{
    width: 22%;
}
.main-content .sub-slider:hover{
    cursor: pointer;
}
.main-content .sub-slider img{
    width: 100%;
}
.main-content .sub-slider p{
    text-align: center;
    font-weight: bold;
    margin: -10px 0 0 0 !important;

}


.list-game{
    padding: 5px 15px 0 15px;
    padding-bottom: 150px;
}
.list-game .category{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.category .name-category{
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0;
}
.category .view-all{
    color: #53D1FF;
    text-decoration: none;
    font-size: 15px;
}
.container-game__lists{
    background-color: #1D2282;
    border-radius: 12px;
}
.game-lists{
    border-radius: 12px;
    border: 1px solid #3B44D9;
    padding: 15px;
    display: flex;
    gap: 20px;
    overflow-x: auto;            /* Ẩn thanh cuộn ngang */
    -webkit-overflow-scrolling: touch;  /* Giữ khả năng cuộn bằng chuột và cảm ứng */
}
.game-lists .item-game{
    min-width: 130px;
}
.game-lists .item-game img{
    width:100%;
    object-fit: contain !important;
    height: auto !important;

}
.game-lists .item-game .name-game{
    width:100%;
}
.game-lists .item-game .name-game{
    text-align: center;
    margin: 3px 0 !important;
    white-space: nowrap; /* Ngừng xuống dòng */
    overflow: hidden;    /* Ẩn phần văn bản vượt quá */
    scrollbar-width: none;  /* Ẩn thanh cuộn trong Firefox */
    text-overflow: ellipsis; /* Thêm dấu ba chấm khi văn bản bị cắt */
}
.game-lists::-webkit-scrollbar {
    height: 10px; /* Chiều cao của thanh cuộn ngang */
}

.game-lists::-webkit-scrollbar-thumb {
    background-color: #ccc;  /* Màu của phần cầm kéo thanh cuộn */
    border-radius: 10px;  /* Làm tròn các góc của thanh cuộn */
    border: 2px solid #2E3B8F; /* Đặt viền cho thanh cuộn */
}

.game-lists::-webkit-scrollbar-track {
    background-color: #2E3B8F; /* Màu nền của thanh cuộn */
    border-radius: 10px;
}
.game-lists .item-game .btn-play {
    display: flex;
    justify-content: center;  /* Căn giữa theo chiều ngang */
    align-items: center;      /* Căn giữa theo chiều dọc */
    margin-top: 10px;
}

.game-lists .item-game .btn-play img {
    max-width: 100%;          /* Đảm bảo ảnh không bị vượt ra ngoài */
    height: auto;             /* Giữ tỉ lệ ảnh */
}
.game-lists .item-game .img-play{
    width: 70px;
}
.footer{
    height: 80px;
    background: linear-gradient(to right, #46156C, #221D7F 53%, #022590);
    position: fixed;
    z-index: 20;
    width: 100%;
    max-width: 500px;
    padding: 10px 0;
    bottom: 0;
    border-top: 1px solid #7981FA;
    border-bottom: 1px solid #7981FA;
}
.game-lists.grid-mode {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* co giãn tối thiểu 100px, tối đa 1fr */
    gap: 16px;
    justify-content: center; /* căn giữa cả grid */
    overflow-x: hidden;
    max-width: 100%; /* tránh vượt khung cha */
}

/*.grid-mode .item-game {*/
/*    width: auto; !* hoặc width: 100%; để chiếm hết ô grid *!*/
/*    max-width: 130px; !* giới hạn tối đa để không quá to *!*/
/*    margin-left: auto;*/
/*    margin-right: auto; !* căn giữa *!*/
/*}*/




.grid-mode .item-game {
    min-width: unset;
    width: 100%; /* auto fill theo cột grid */
}
.list-operation{
    display: flex;
    justify-content: center;
}
.list-operation .item-operation{
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.list-operation .item-operation:hover{
    cursor: pointer;
}
.list-operation .item-operation img{
    max-width: 70%;
    display: block;
}
.game-lists .item-game .img-game{
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    height: auto !important;
}
.list-operation .item-operation p{
    margin:-8px 0 0 0 !important;
    text-align: center;
    padding: 2px 0;
    font-weight: bold;
}
.popup-lucky img{
    width: 12%;
    position: relative;
}
.show-spin-lucky .count-coin{
    color: #fff !important;
    position: absolute;
    top: 1%;
    left: 7.1%;
    font-size: 13px;
}
.popup-lucky {
    position: fixed; /* Đảm bảo phần tử cố định trên màn hình */
    right: 0px;  /* Khoảng cách từ bên phải của màn hình */
    bottom: 14vh !important; /* Khoảng cách từ dưới của màn hình */
    z-index: 999;
    width: 42%;
    height: 80px;

}
.grid-mode .img-game{
    width: 100% !important;
}

#infoModal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}
#infoModal-no-login {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}
.modal-inf-game {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

#infoModal-top {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

/* Nội dung popup */
#infoModal .modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #4655F5;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 95vh;
    flex-direction: column;
}
#infoModal-no-login .modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #4655F5;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 95vh;
    flex-direction: column;
}
.modal-inf-game .modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 450px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #4655F5;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 85vh;
    flex-direction: column;

}

.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
    transition: 0.3s ease;
}

.image-modal .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 36px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}


.modal-inf-game .modal-body{
    padding: 10px 0 !important;
    background-color: #010851;
}
.modal-inf-game .modal-body .header-modal-body{
    width: 40%;
    margin: auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
}
.modal-inf-game .modal-body .header-modal-body img{
    width: 100%;
    border-radius: 10px;

}
.modal-inf-game .modal-body .header-modal-body .icon-game{
    border-radius: 15px !important;
    width: 60%;
    margin-bottom: 10px !important;
}
.modal-inf-game .header-modal-body .btn-play{
    justify-content: center;
    align-items: center;
    display: flex;
}
.modal-inf-game .modal-body .header-modal-body img {
    width: 80%;
}
.modal-inf-game .modal-body .title-modal{

    text-align: center;
    font-size: 18px;
    margin-bottom: 7px !important;
}
.modal-inf-game .modal-body .content{
    background-color: #1A2060 !important;
    padding: 10px 15px !important;
    border-radius: 10px;
    margin: 15px 15px 20px 15px;
    max-height: 400px; /* hoặc chiều cao tùy ý */
    overflow-y: auto;
}
.modal-inf-game .modal-body .content * {
    margin: 5px 0 !important;
}
.modal-inf-game .modal-body .content ul{
    padding-left: 30px;
}


.modal-inf-game .modal-body .content{
    text-align: justify;
}
.modal-inf-game .list-image{
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    margin: 0 15px !important;
}
.modal-inf-game .list-image .item-image{
    flex: 0 0 70%;
    scroll-snap-align: start;
}
.list-image.is-two-items .item-image {
    flex: 1 1 auto !important;
}
.modal-inf-game .list-image .item-image img{
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
}
.modal-inf-game .list-image {
    scrollbar-width: thin;
    scrollbar-color: #4B8DF8 #1a237e; /* thumb / track */

}
.modal-inf-game .list-image {
    padding-bottom: 10px;
}

/* Cho Chrome, Edge, Safari */
.modal-inf-game ::-webkit-scrollbar {
    height: 8px;
}

.modal-inf-game ::-webkit-scrollbar-track {
    background: #1a237e;
    border-radius: 10px;
}

.modal-inf-game ::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #4B8DF8, #1A43C0);
    border-radius: 10px;
}

.modal-inf-game ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #1A43C0, #4B8DF8);
}



#infoModal-top .modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 450px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #4655F5;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 85vh;
    flex-direction: column;
}


/* Header popup */
#infoModal .modal-header {
    position: relative;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    background-color: #112EA8;
    padding: 15px 0;


}
/* Header popup */
#infoModal-no-login .modal-header {
    position: relative;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    background-color: #112EA8;
    padding: 15px 0;
}
.modal-inf-game .modal-header {
    position: relative;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(to right, #022590 0%, #1A43C0 100%);

    padding: 15px 0;
}

#infoModal-top .modal-header {
    position: relative;
    align-items: center;
    font-weight: bold;
    background-color: #1B3584;
    padding: 20px 0;

}
#infoModal-top .modal-body{
    padding: 0 !important;
    background-color: #1B3584;
}
#infoModal-top .content-body{
    padding: 10px 0;
}
#infoModal-top .content-body .list-game{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 10px 5px 10px !important;
}
.content-body .list-game .item-game{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.content-body .text-rules{
    padding: 0 15px;
}
.text-rules .text-blue{
    color: #00EEFF;
    font-weight: bold;
}
.text-rules p{
    margin: 0 !important;
    line-height: 1.4;
    padding: 3px 0;
    font-size: 15px;
}
.text-rules ul{
    margin: 0 !important;
}
.text-rules ul li{
    font-size: 15px;
    padding: 3px 0;
}
.text-rules .title-rules{
    margin: 0 !important;
    padding: 2px 0;
}


.reward-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: white;
    text-align: center;
    margin: 6px 0;
    border: 2px solid #899AF5;
    border-radius: 10px;
    overflow: hidden;

}

.reward-table thead{
    background: linear-gradient(to bottom, #2E60F8, #002EB9);
}


/* Chiều rộng thanh cuộn */
::-webkit-scrollbar {
    width: 6px;
}

/* Thanh cuộn chính */
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* Nền thanh cuộn */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Xóa nút mũi tên ↑ ↓ */
::-webkit-scrollbar-button {
    display: none !important;
    height: 0;
}


.reward-table thead th {
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    font-size: 15px;
    padding: 12px;
    border: 1px solid #1e2a63; /* giống ảnh gửi */
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
}
.reward-table tbody{
    background-color: #4456B3;
}
.reward-table tbody td {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #1e2a63; /* giống ảnh gửi */
    border-top: none;
    border-left: none;
}
.content-body .text-bonus{
    display: block;
    font-size: 14px;
    padding: 5px 0 3px 0;
}
.content-body .text-center{
    width: 85%;
    margin: auto !important;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}
.reward-table tbody tr:last-child td {
    border-bottom: none;
}
.modal-footer{
    text-align: center;
    background-color: #1B3584;
    padding: 15px 0;
}
.modal-footer .syntax{
    color: #FF4400;
    font-weight: bold;
    font-size: 18px;
}
.modal-footer p{
    margin: 2px 0 !important;
}
.modal-footer .btn-res{
    margin: 10px 0 5px 0;
    width: 30%;
}
.modal-footer .price{
    margin: 0 !important;
}
.content-body .item-game img{
    width: 60%;
}
.content-body .item-game p{
    white-space: wrap;
    font-size: 13px;
    text-align: center;
}
#infoModal .modal-header h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}
#infoModal-no-login .modal-header h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}
.modal-inf-game .modal-header h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}

/* Nút đóng */
#infoModal .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10%;

}
#infoModal-top .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #84A3FF;
    position: absolute;
    top: -3px;
    right: 10px;

}
#infoModal-no-login .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10%;

}
.modal-inf-game .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 10px;
    top: -5px;

}
#infoModal .close-btn:hover {
    color: #000;
}
#infoModal-no-login .close-btn:hover {
    color: #000;
}
#infoModal .modal-body{
    background-color: #010851;
    margin: 0 !important;
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
    padding: 10px;
}
#infoModal-no-login .modal-body{
    background: linear-gradient(90deg, #022590 0%, #1A43C0 100%);

    margin: 0 !important;
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
    padding: 10px;
}
#infoModal-no-login .modal-body .box-btn{
   display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
}
#infoModal-no-login .modal-body .box-btn a{
    display: contents;

}
#infoModal-no-login .modal-body .box-btn img{
    width: 30%;
}
#infoModal-no-login .modal-body .text-content .text-top{
    font-size: 18px;
    font-weight: bold;
}
#infoModal-no-login .modal-body .text-content{
    text-align: center;
}
#infoModal .modal-body .list-noti .item-noti{
    display: flex;
    flex-direction: row;
    background-color: #2C51C4;
    padding:5px;
    border-radius: 10px;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
#infoModal .modal-body .list-noti .item-noti:hover{
    cursor: pointer;
}
#infoModal .modal-body .list-noti .item-seen{
    background-color: #1B3584;
}
.list-noti .right-noti{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
}
.right-noti .icon-status{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 9%;
    align-items: end;
}
.right-noti .icon-status img{
    width: 42%;
}

.item-noti .left-noti{
    width: 30%;
}
.item-noti .left-noti img{
    width: 100%;
    display: block;
}
.sub-noti.full.hidden {
    display: none;
}
.sub-noti.short.hidden {
    display: none;
}

.img-footer_home{
    max-width: 65%!important;
}



#modal-gift-spin {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}
#modal-gift-spin .btn-success{
    position: absolute;
    left: 36%;
    top: 65%;
    width: 30%;
}
#modal-gift-spin .btn-success:hover{
    cursor: pointer;
}
#modal-coming-soon {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

#modal-no-gift-spin {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

/* Nội dung popup */
#modal-gift-spin .modal-content {
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 95vh;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    top: 20%;
}
#modal-coming-soon .modal-content {
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 95vh;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    top: 30%;
}
#modal-coming-soon .modal-header{
    height: 3vh;
}
#modal-no-gift-spin .modal-content {
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 95vh;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    top: 35%;
}


#modal-gift-spin .modal-header h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}
#modal-coming-soon .modal-header h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}
#modal-no-gift-spin .modal-header h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}

/* Nút đóng */
#modal-gift-spin .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 15%;

}
#modal-coming-soon .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 0px;
    top: 0%;

}
#modal-no-gift-spin .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 30px;
    top: 5%;

}
#modal-gift-spin .close-btn:hover {
    color: #000;
}
#modal-coming-soon .close-btn:hover {
    color: #000;
}
#modal-gift-spin .modal-body{

    margin: 0 !important;
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
}
#modal-coming-soon .modal-body{

    margin: 0 !important;
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
}
#modal-no-gift-spin .close-btn:hover {
    color: #000;
}
#modal-no-gift-spin .modal-body{

    margin: 0 !important;
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
}
#modal-no-gift-spin .modal-body img{
    width: 100%;
}
#modal-no-gift-spin .modal-body .text-coin{
    position: absolute;
    top: 50%;
    left: 20%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}
#modal-gift-spin .modal-body img{
    width: 100%;
}
#modal-coming-soon .modal-body img{
    width: 100%;
}
#modal-gift-spin .modal-body .text-coin{
    position: absolute;
    top: 44%;
    left: 15%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}
#modal-no-gift-spin .modal-body .content-fail{
    position: absolute;
    top: 28%;
    left: 8.5%;
    text-align: center;
    padding: 10px 0;
}
.content-fail .textAdd{
    display: block;
    margin-top: 4px;
}
#modal-coming-soon .modal-body .text-coin{
    position: absolute;
    top: 44%;
    left: 35%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}
#modal-gift-spin .text-coin .happy-coin{
    font-size: 20px;
    text-align: center;

}
#modal-coming-soon .text-coin .happy-coin{
    font-size: 20px;
    text-align: center;

}
#modal-gift-spin .text-coin .number-coin{
    text-align: center;
    color: #FFC300;
    font-size: 23px;
    font-weight: bold;
}
#modal-coming-soon .text-coin .number-coin{
    text-align: center;
    color: #FFC300;
    font-size: 23px;
    font-weight: bold;
}
#modal-no-gift-spin .text-coin .happy-coin{
    font-size: 18px;
    text-align: center;

}
#modal-no-gift-spin .text-coin .btn-register{
    width: 55%;
    margin: 20px  auto 0 auto;

}
#modal-no-gift-spin .text-coin img{
    width: 100%;

}
#modal-no-gift-spin .text-coin .number-coin{
    text-align: center;
    color: #FFC300;
    font-size: 23px;
    font-weight: bold;
}


#modal-gift-spin .close-btn{
    color: #84A3FF;
    font-size: 40px;
}
#modal-coming-soon .close-btn{
    color: #84A3FF;
    font-size: 40px;
}
#modal-coming-soon .close-btn:hover{
    cursor: pointer;
    color: #84A3FF;
}
#modal-no-gift-spin .close-btn{
    color: #84A3FF;
    font-size: 40px;
}
#modal-no-gift-spin .close-btn:hover{
    cursor: pointer;
    color: #84A3FF;
}


#game-iframe {
    width: 100%;
    max-width: 768px;
    height: 500px;
}



.text-noti p{
    margin: 0 !important;
}
.right-noti .title-noti{
    font-size: 20px;
    font-weight: bold;
    padding: 5px 0;
}
.right-noti .time-noti{
    font-size: 10px;
    padding: 3px 0;
}
.right-noti .sub-noti{
    font-size: 13px;
}
.right-noti .text-noti{
    width: 85%;
    flex: 1;
}
.modal-body {
    overflow-y: auto;
    max-height: 80vh;
    padding: 10px;

    /* Scroll đẹp */
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent; /* Firefox */
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(#0BA104, #18D00F);
    border-radius: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#lucky-mm{
    display: none;
}





#modal-gift-spin-login{
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}


/* Nội dung popup */
#modal-gift-spin-login .modal-content {
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    max-height: 95vh;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    top:-5%;
}


#modal-gift-spin-login .modal-header h5{
    text-align: center;
    margin: 0 !important;
    font-size: 18px;
}

/* Nút đóng */
#modal-gift-spin-login .close-btn {
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 15%;

}
#modal-gift-spin-login .close-btn:hover {
    color: #000;
}
#modal-gift-spin-login .modal-body{

    margin: 0 !important;
    overflow-y: auto;
}


#modal-gift-spin-login .modal-body img{
    width: 100%;
}
#modal-gift-spin-login .modal-body .text-coin{
    position: absolute;
    top: 44%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 20px;
}
#modal-gift-spin-login .text-coin .happy-coin{
    font-size: 20px;
    text-align: center;

}
#modal-gift-spin-login .text-coin img:hover{
    cursor: pointer;
}
#modal-gift-spin-login .text-coin img{
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
}
#modal-gift-spin-login .text-coin .money{
    text-align: center;
}
#modal-gift-spin-login .text-coin .number-coin{
    text-align: center;
    color: #FFC300;
    font-size: 23px;
    font-weight: bold;
}
.header-modal-body img{
    width: 100%;
}
#modal-gift-spin-login .text-coin .number-coin-login{
    text-align: center;
    color: #FFC300;
    font-size: 23px;
    font-weight: bold;
}
.btn-register{
    display: flex;
}
.img-wrapper{
    position: relative;
}
.icon-inf{
    position: absolute;
    top: -1px;
    right: -4px;
    width: 23% !important;
    object-fit: contain !important;
    cursor: pointer;
}

#modal-gift-spin-login .close-btn{
    color: #84A3FF;
    font-size: 40px;
}
#modal-gift-spin-login .close-btn:hover{
    cursor: pointer;
    color: #84A3FF;
}
#phone{
    margin-left: 5px;
}


.grid-mode .item-game {
    justify-self: center; /* Căn giữa từng item trong ô grid */
}
.icon-inf{
    position: absolute;
    top: -1px ;
    right: -4px ;
    width: 25% !important;
    object-fit: contain !important;
    cursor: pointer;
}


@media (max-width: 768px) {
    .content::-webkit-scrollbar {
        display: none; /* Ẩn thanh cuộn trong Webkit (Chrome, Safari) */
    }
    .modal-inf-game .modal-body .content {
        max-height: 250px !important; /* hoặc chiều cao tùy ý */
    }
    .game-lists .item-game{
        width: 31%;
        min-width: 92px !important;
    }
    .game-lists .item-game img{
        width:100%;
        height: auto !important;
        object-fit: contain !important;
    }
    .footer{
        padding: 10px 0 5px 0 !important;
    }
    .reward-table thead th {
        font-size: 13px !important;
    }
    .reward-table tbody td{
        font-size: 13px !important;
    }
    .icon-inf{
        top: -2px !important;
        right: -3px !important;
    }
}
@media (max-width: 768px) {
    .game-lists .item-game{
        width: 31%;
        min-width: 92px !important;
    }
    .game-lists .item-game img{
        width:100%;
        height: auto !important;
        object-fit: contain !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 820px){
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: 1.3%;
        left: 18.1%;
        font-size: 13px;
    }
    .popup-lucky {
        width: 40%;
        right: -88px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 27%;
    }
}
@media screen and (min-width: 830px) and (max-width: 900px){
    .popup-lucky {
        width: 40%;
        right: -80px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 27%;
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: 1.9%;
        left: 18.9%;
        font-size: 13px;
    }
}
@media screen and (min-width: 900px) and (max-width: 1000px){
    .popup-lucky {
        width: 40%;
        right: -60px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 27%;
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: 5%;
        left: 18.9%;
        font-size: 13px;
    }
}
@media screen and (min-width: 1000px) and (max-width: 1100px){
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: 0.2%;
        left: 15.1%;
        font-size: 13px;
    }
    .popup-lucky {
        width: 36%;
        right: -20px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 22%;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1199px){
    .popup-lucky {
        width: 37%;
        right: -20px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 21%;
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: 1.9%;
        left: 14.7%;
        font-size: 13px;
    }
}


@media screen and (min-width: 1200px) and (max-width: 1399px){
    .popup-lucky {
        width: 40%;
        right: -30px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 17%;
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: 2% !important;
        left: 11.9% !important;
        font-size: 13px;
    }
}
@media screen and (min-width: 1400px) and (max-width: 1600px){
    .popup-lucky {
        width: 32%;
        right: 120px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 20%;
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: 5%;
        left: 14.1%;
        font-size: 13px;
    }
}
@media screen and (min-width: 1600px) and (max-width: 1800px){
    .popup-lucky {
        width: 41%;
        right: -20px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 13%;
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: 1.9%;
        left: 9.1%;
        font-size: 13px;
    }
}
@media screen and (min-width: 1800px) and (max-width: 2000px){
    .popup-lucky {
        width: 43%;
        right: -40px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .popup-lucky img{
        width: 10%;
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -0.3%;
        left: 6.9%;
        font-size: 13px;
    }
}

@media screen and (max-width: 767px) {
    .popup-lucky {
        width: 100px;
        right: -30px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }


    .popup-lucky img {
        width: 75%;
    }
    .category .view-all{
        font-size: 12px;
    }
    .game-lists.grid-mode {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

    }

    .grid-mode .item-game {
        width: 100%;
    }

    .game-lists .item-game .img-play {
        width: 65px;
    }
}
@media screen and (max-width: 767px) and (min-width: 400px){
    .game-lists::-webkit-scrollbar {
        display: none; /* Ẩn thanh cuộn trong Webkit (Chrome, Safari) */
    }


    header {
        max-width: 390px;
        padding: 3px 20px !important;
    }
    .game-lists.grid-mode{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));;
    }
    .grid-mode .img-game{
        width: 100% !important;
    }
    .game-lists .item-game{
        width: 29%;
    }
    .game-lists .item-game .img-game{
        width: 100%;
    }
    .game-lists .item-game .name-game{
        width: 102px;
    }
    .grid-mode .item-game {
        width: 100% !important;
    }
    .popup-lucky {
        right: 100px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -2%;
        left: 51.2%;
        font-size: 13px;
    }
}
@media screen and (max-width: 570px) and (min-width: 530px){
    .popup-lucky {
        right: -12px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -2%;
        left: 51.2%;
        font-size: 13px;
    }
}
/*@media screen and (max-width: 431px ) and (min-width: 400px) {*/
/*    .game-lists::-webkit-scrollbar {*/
/*        display: none; !* Ẩn thanh cuộn trong Webkit (Chrome, Safari) *!*/
/*    }*/
/*    header {*/
/*        max-width: 390px;*/
/*    }*/
/*}*/
@media screen and (max-width: 400px ) and (min-width: 370px) {
    .game-lists::-webkit-scrollbar {
        display: none; /* Ẩn thanh cuộn trong Webkit (Chrome, Safari) */
    }
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -2%;
        left: 51.2%;
        font-size: 13px;
    }
    header {
        max-width: 360px;
        padding: 3px 18px !important;
    }
    .game-lists .item-game .img-game{
        width: 100%;
    }
    .game-lists .item-game .name-game{
        width: 90px;
    }
    .grid-mode .img-game{
        width: 100% !important;
    }
    .grid-mode .item-game {
        width: 100% !important;
    }
    .popup-lucky {
        width: 100px;
        right: -28px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
    .header-right{
        margin-right: 10px !important;
    }
}
.sub-noti p{
    font-size: 13px ;
    text-align: justify;
    padding: 2px 0;
}

.container{
    box-shadow: none !important;
}
@media screen and (max-width: 450px ) and (min-width: 430px) {
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -2%;
        left: 51.2%;
        font-size: 13px;
    }
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 7.5%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 45% !important;
    }
    .content-fail span{
        font-size: 16px;
    }
}
@media screen and (max-width: 429px ) and (min-width: 400px) {
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 7%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 45% !important;
    }
    .content-fail span{
        font-size: 15px;
    }
}
@media screen and (max-width: 399px ) and (min-width: 390px) {
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 6%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 45% !important;
    }
    .content-fail span{
        font-size: 15px;
    }
}
@media screen and (max-width: 389px ) and (min-width: 380px) {
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 8%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 40% !important;
    }
    .content-fail span{
        font-size: 14px;
    }
}
@media screen and (max-width: 379px ) and (min-width: 370px) {
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 8%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 40% !important;
    }
    .content-fail span{
        font-size: 14px;
    }
}
@media screen and (max-width: 369px ) and (min-width: 360px) {
    .header-right{
        margin-right: 10px !important;
    }
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 6%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 40% !important;
    }
    .content-fail span{
        font-size: 14px;
    }
}
@media screen and (max-width: 359px ) and (min-width: 350px) {
    .header-right{
        margin-right: 10px !important;
    }
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 8%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 40% !important;
    }
    .content-fail span{
        font-size: 13px;
    }
}
@media screen and (max-width: 349px ) and (min-width: 340px) {
    .header-right{
        margin-right: 10px !important;
    }
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 7%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin{
        margin-right: 35px;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 40% !important;
    }
    .content-fail span{
        font-size: 13px;
    }
}
@media screen and (max-width: 339px ) and (min-width: 330px) {
    .header-right{
        margin-right: 10px !important;
    }
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 9%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 35% !important;
    }
    .content-fail span{
        font-size: 12px;
    }
    #modal-no-gift-spin .text-coin{
        margin-right: 35px;
    }
}
@media screen and (max-width: 329px ) and (min-width: 320px) {
    .header-right{
        margin-right: 10px !important;
    }
    #modal-no-gift-spin .modal-body .content-fail{
        position: absolute;
        top: 25%;
        left: 7%;
        text-align: center;
        padding: 10px 0;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 35% !important;
    }
    .content-fail span{
        font-size: 12px;
    }
    #modal-no-gift-spin .text-coin{
        margin-right: 15px;
    }
}
@media screen and (max-width: 500px ) and (min-width: 400px) {
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -2%;
        left: 51.2%;
        font-size: 13px;
    }
    .popup-lucky {
        width: 100px;
        right: -29px;
        bottom: 15vh !important; /* Khoảng cách từ dưới của màn hình */
    }
}

@media screen and (max-width: 767px) and (min-width: 436px) {
    header {
        max-width: 460px !important;
    }
}
@media screen and (max-width: 370px) and (min-width: 330px) {
    .game-lists::-webkit-scrollbar {
        display: none; /* Ẩn thanh cuộn trong Webkit (Chrome, Safari) */
    }
    header {
        max-width: 335px;
        padding: 3px 20px !important;
    }
    .game-lists .item-game .img-game{
        width: 100%;
    }
    .game-lists .item-game .name-game{
        width: 80px;
    }
    .grid-mode .img-game{
        width: 100% !important;
    }
    .game-lists .item-game .img-play{
        width: 55px;
    }
    .grid-mode .item-game {
        width: 100% !important;
    }
    .popup-lucky {

        right: -30px;
    }
}
@media screen and (max-width: 329px)  {
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -2%;
        left: 51.2%;
        font-size: 13px;
    }
    .game-lists::-webkit-scrollbar {
        display: none; /* Ẩn thanh cuộn trong Webkit (Chrome, Safari) */
    }
    header {
        max-width: 290px;
        padding: 3px 20px !important;
    }
    .main-content p{
        white-space: nowrap;
    }
    .grid-mode .img-game{
        width: 100% !important;
    }
    .game-lists .item-game .img-game{
        width: 100%;
    }
    .game-lists .item-game .name-game{
        width: 70px;
    }
    .grid-mode .item-game {
        width: 100% !important;
    }
    .game-lists .item-game .img-play{
        width: 50px;
    }
    .game-lists .item-game{
        width: 27%;
    }
}
@media (max-width: 500px) {
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -2%;
        left: 51.2%;
        font-size: 13px;
    }
    #modal-gift-spin .modal-body .text-coin{
        left: 11%;
        top: 41%;
        gap: 15px !important;
    }
    #modal-coming-soon .modal-body .text-coin{
        left: 33%;
    }
    #modal-gift-spin-login .text-coin img{
        padding: 0 !important;
    }
    #modal-no-gift-spin .modal-body .text-coin{
        left:17%;
    }
    #modal-no-gift-spin .text-coin .happy-coin{
        font-size: 17px !important;
        font-weight: bold;
    }
    #modal-no-gift-spin-login .text-coin img{
        padding: 0 !important;
    }
    #modal-no-gift-spin .text-coin .btn-register{
        width: 40%;
        margin: 20px  auto 0 auto;
    }
    #modal-no-gift-spin .close-btn{
        font-size: 30px;
    }

}


@media (max-width: 375px) {
    #modal-gift-spin .modal-body .text-coin{
        left: 8%;
        gap: 10px !important;
    }
    #modal-coming-soon .modal-body .text-coin{
        left: 32%;
    }
    #modal-gift-spin-login .text-coin img{
        padding: 0 !important;
    }


    #modal-no-gift-spin-login .text-coin img{
        padding: 0 !important;
    }
    #modal-no-gift-spin .close-btn{
        font-size: 30px;
    }
    #modal-no-gift-spin .modal-body .text-coin{
        left:13%;
    }
    #modal-no-gift-spin .modal-body .text-coin .btn-register{
        width: 40%;
    }

}
@media (max-width: 356px) {
    #modal-gift-spin-login .modal-body .text-coin{

        top: 39% !important;
    }
}
@media (max-width: 320px) {
    .show-spin-lucky .count-coin{
        color: #fff !important;
        position: absolute;
        top: -2%;
        left: 51.2%;
        font-size: 13px;
    }
    #modal-no-gift-spin .modal-body .text-coin{
        left:9%;
    }
    #modal-gift-spin .modal-body .text-coin{
        left: 2%;
        gap: 5px !important;
        top: 38%;
    }
    #modal-gift-spin .modal-body .number-coin{
        font-size: 18px;
    }
    #modal-no-gift-spin .modal-body .text-coin .btn-register{
        width: 35%;
    }
    #modal-gift-spin-login .modal-body .text-coin{
        top: 35% !important;
    }
    .modal-spin-lucky-block {
        top: 8% !important;
    }
    .popup-lucky {
        width: 100px;
        right: -30px;
        bottom: 15vh !important;
    }
    .game-lists .item-game .name-game {
        width: 100% !important;
    }

}
.modal-inf-game .modal-body .content::-webkit-scrollbar {
    width: 2px !important;
    background-color: transparent !important;
}

.modal-inf-game .modal-body .content::-webkit-scrollbar-thumb {
    background-color: #888 !important;
    border-radius: 2px !important;
}

.modal-inf-game .modal-body .content::-webkit-scrollbar-track {
    background: transparent !important;
}