.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;
}

.choices__list--dropdown .choices__item {
    white-space: nowrap; /* Ngăn không cho các số xuống dòng */
    text-align: center; /* Căn giữa các số */
}

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