.error {
    color: red;
    font-size: 0.8rem;
}

.user-info-list li {
    display: flex; /* Sử dụng Flexbox */
    align-items: center; /* Căn giữa dọc */
    margin-bottom: 20px; /* Tăng khoảng cách giữa các hàng */
}

.user-info-list li span {
    min-width: 200px; /* Độ rộng cố định cho cột đầu tiên */
    text-align: left; /* Căn trái */
    color: var(--default-text-color); /* Màu chữ cho span */
}

.user-info-list li strong {
    flex: 1; /* Cột thứ hai chiếm toàn bộ không gian còn lại */
    font-weight: bold;
    color: var(--default-text-color); /* Màu chữ cho strong */
    /* font-family: Arial, sans-serif; */
}

/* Responsive CSS cho mobile */
@media (max-width: 768px) {
    .user-info-list li {
        flex-direction: column; /* Hiển thị mỗi thành phần trên một hàng */
        align-items: flex-start; /* Căn trái */
        margin-bottom: 15px; /* Giảm khoảng cách giữa các hàng */
    }

    .user-info-list li span {
        min-width: auto; /* Loại bỏ độ rộng cố định */
        width: 100%; /* Chiếm toàn bộ chiều rộng */
        margin-bottom: 5px; /* Tạo khoảng cách giữa span và strong */
        font-size: 14px; /* Giảm kích thước chữ */
    }

    .user-info-list li strong {
        width: 100%; /* Chiếm toàn bộ chiều rộng */
        font-size: 16px; /* Kích thước chữ lớn hơn một chút để làm nổi bật */
    }
}

.footer {
    /* background-color: rgb(var(--primary-rgb)); */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    color: var(--default-text-color);
    /* font-family: "Saira", sans-serif; */
    /* font-size: 16px; */
}

.footer a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer p {
    margin: 5px 0;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .footer {
        flex-direction: column; /* Hiển thị các phần theo cột */
        text-align: center;
    }

    .footer img {
        max-width: 120px; /* Thu nhỏ logo trên mobile */
    }

    .footer-content p {
        font-size: 12px;
        padding: 0 10px;
    }
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(
        .input-group-btn
    ) {
    width: 100% !important;
}

.app-brand-text {
    flex-shrink: unset !important;
}

.main-menu .slide.active {
    border-radius: 5px; /* Bo tròn góc */
    background-color: var(
        --default-body-bg-color
    ); /* Màu nền nhạt để nổi bật */
}

.tab-pane .col-xl-12 {
    margin-top: var(--bs-gutter-y);
}

.row .col-12 {
    margin-top: 30px;
}

@media (min-width: 1024px) {
    .card.custom-card.login-card {
        width: 400px !important;
    }
}

@media (max-width: 768px) {
    .hidden-mobile {
        display: none;
    }
}

/* CSS cho Nganluong.vn */
ul.bankList {
    clear: both;
    height: 202px;
    width: 636px;
}
ul.bankList li {
    list-style-position: outside;
    list-style-type: none;
    cursor: pointer;
    float: left;
    margin-right: 0;
    padding: 5px 2px;
    text-align: center;
    width: 90px;
}
.list-content li {
    list-style: none outside none;
    margin: 0 0 10px;
}
.list-content li .boxContent {
    display: none;
    /* width: 636px; */
    /* border:1px solid #cccccc; */
    /* padding:10px;  */
}
.list-content li.active .boxContent {
    display: block;
}
.list-content li .boxContent ul {
    /* height:280px; */
}

i.VISA,
i.MASTE,
i.AMREX,
i.JCB,
i.VCB,
i.TCB,
i.MB,
i.VIB,
i.ICB,
i.EXB,
i.ACB,
i.HDB,
i.MSB,
i.NVB,
i.DAB,
i.SHB,
i.OJB,
i.SEA,
i.TPB,
i.PGB,
i.BIDV,
i.AGB,
i.SCB,
i.VPB,
i.VAB,
i.GPB,
i.SGB,
i.NAB,
i.BAB {
    width: 80px;
    height: 30px;
    display: block;
    background: url(https://www.nganluong.vn/webskins/skins/nganluong/checkout/version3/images/bank_logo.png)
        no-repeat;
}
i.MASTE {
    background-position: 0px -31px;
}
i.AMREX {
    background-position: 0px -62px;
}
i.JCB {
    background-position: 0px -93px;
}
i.VCB {
    background-position: 0px -124px;
}
i.TCB {
    background-position: 0px -155px;
}
i.MB {
    background-position: 0px -186px;
}
i.VIB {
    background-position: 0px -217px;
}
i.ICB {
    background-position: 0px -248px;
}
i.EXB {
    background-position: 0px -279px;
}
i.ACB {
    background-position: 0px -310px;
}
i.HDB {
    background-position: 0px -341px;
}
i.MSB {
    background-position: 0px -372px;
}
i.NVB {
    background-position: 0px -403px;
}
i.DAB {
    background-position: 0px -434px;
}
i.SHB {
    background-position: 0px -465px;
}
i.OJB {
    background-position: 0px -496px;
}
i.SEA {
    background-position: 0px -527px;
}
i.TPB {
    background-position: 0px -558px;
}
i.PGB {
    background-position: 0px -589px;
}
i.BIDV {
    background-position: 0px -620px;
}
i.AGB {
    background-position: 0px -651px;
}
i.SCB {
    background-position: 0px -682px;
}
i.VPB {
    background-position: 0px -713px;
}
i.VAB {
    background-position: 0px -744px;
}
i.GPB {
    background-position: 0px -775px;
}
i.SGB {
    background-position: 0px -806px;
}
i.NAB {
    background-position: 0px -837px;
}
i.BAB {
    background-position: 0px -868px;
}

ul.cardList li {
    cursor: pointer;
    float: left;
    margin-right: 0;
    padding: 5px 4px;
    text-align: center;
    width: 90px;
}

.form-check-input:checked + .form-check-label {
    border: 2px solid #007bff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    transition: all 0.3s ease;
}
.form-check-label:hover {
    background-color: #007bff;
    transform: scale(1.05);
}

/* @media (max-width: 576px) {
    .payment-image {
        width: 100px !important;
    }
} */

/* Áp dụng cho bảng DataTables với cuộn ngang hoặc dọc */

.dataTables_wrapper {
    scrollbar-color: #6c5ffc #f1f1f1;
}


.card-list-game:hover {
  border: 2px solid #666cff;
  box-shadow: 0 0 15px rgba(17, 1, 243, 0.5);
}