.register-container {
    width: 90%;
    max-width: 400px;
    margin: 50px auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#form-register form {
    display: flex;
    flex-direction: column;
}

#form-register label {
    margin-top: 10px;
    font-weight: bold;
    display: block;
    width: 100%;
}

#form-register input, #form-register select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: block;
}

#form-register button {
    margin-top: 15px;
    padding: 10px;
    background-color: #d91a1a;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
}

#form-register button:hover {
    background-color: #b01515;
}

.section-blue {
    background-image: linear-gradient(#bee7ff, #fff);
    padding: 5px 0;
}

/* Alert Success */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Alert Error */
.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.error {
    color: red;
    font-size: 14px;
    margin-top: 4px;
    display: block;
}

.form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.btn-primary {
    background-color: #d91a1a;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.btn-primary:hover {
    background-color: #b01515;
}

.change-password-link {
    margin-top: 10px;
    margin-left: 15px;
    font-size: 16px;
    color: #007bff;
    text-decoration: underline;
}

.change-password-link:hover {
    text-decoration: underline;
}

.color-normal {
    color: #a10000;
}

.line-height-normal {
    line-height: 18px;
}

.bang-so-lo {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
}
.bang-so-lo th, .bang-so-lo td {
    border: none;
    text-align: center;
    /* padding: 8px; */
}
.bang-so-lo td:first-child {
    width: 40%;
}
.bang-so-lo .ball {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    color: black;
    font-weight: bold;
}
.bang-so-lo .gray {
    background: linear-gradient(to bottom, #dddddd, #b3b3b3);
}

.bang-so-lo .blue {
    background: linear-gradient(to bottom, #5dade2, #2874a6);
}

.bang-so-lo .green {
    background: linear-gradient(to bottom, #58d68d, #239b56);
}

.bang-so-lo .red {
    background: linear-gradient(to bottom, #e74c3c, #b03a2e);
    color: #000 !important
}

.bang-so-lo .yellow {
    background: linear-gradient(to bottom, #f7dc6f, #f1c40f);
}

.bang-so-lo .orange {
    background: linear-gradient(to bottom, #f5b041, #d68910);
}

.bang-so-lo .purple {
    background: linear-gradient(to bottom, #bb8fce, #8e44ad);
}

.title-with-icon {
background-image: url('https://file.minhchinh.com/template/images/100conso.png');
background-repeat: no-repeat;
background-position: left center;
background-size: 40px 40px;
padding-left: 50px;
height: 40px;
line-height: 40px;
display: inline-block;
}
.animal-icon {
background-image: url('https://file.minhchinh.com/template/images/100conso.png');
background-repeat: no-repeat;
background-size: 120px auto;
padding-left: 38px;
background-position: left center;
background-origin: content-box;
background-clip: content-box;
display: inline-block;
}

span.conso100 {
background-image: url(../images/100conso.png);
text-indent: -999px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
display: inline-block;
border: 0;
vertical-align: middle;
position: static;
text-align: center;
color: #000;
font: 700 16px / 30px "Times New Roman", Times, serif;
}

.conso100.giaima { height: 30px; background-position: -102px -318px; text-indent: -999px; overflow: hidden; }
.conso100.conchuot { background-position: 0% -21px; }
.conso100.contrau { background-position: -52px -21px; }
.conso100.concop { background-position: -102px -21px; }
.conso100.conmeonha { background-position: -150px -21px; }
.conso100.conmeorung { background-position: -202px -21px; }
.conso100.conrongnam { background-position: -252px -21px; }
.conso100.conrongbay { background-position: -302px -21px; }
.conso100.conran { background-position: -300px -71px; }
.conso100.conngua { background-position: 0% -71px; }
.conso100.conde { background-position: -52px -71px; }
.conso100.conkhi { background-position: -102px -71px; }
.conso100.conga { background-position: -150px -71px; }
.conso100.concho { background-position: -202px -71px; }
.conso100.conheo { background-position: -252px -71px; }
.conso100.ongtao { background-position: 0% -120px; }
.conso100.ongto { background-position: -52px -120px; }
.conso100.tientai { background-position: -102px -121px; }
.conso100.bavai { background-position: -150px -121px; }
.conso100.ongtroi { background-position: -200px -121px; }
.conso100.ongdia { background-position: -252px -119px; }
.conso100.thantai { background-position: -300px -121px; }
.conso100.trungvit { background-position: 0% -171px; }
.conso100.concatrang { background-position: -52px -171px; }
.conso100.conoc { background-position: -102px -171px; }
.conso100.convit { background-position: -149px -171px; }
.conso100.concong { background-position: -200px -171px; }
.conso100.contrung { background-position: -252px -171px; }
.conso100.convoi { background-position: -302px -171px; }
.conso100.contho { background-position: -52px -320px; }
.conso100.conong { background-position: 0% -219px; }
.conso100.conhac { background-position: -52px -219px; }
.conso100.conbuom { background-position: -102px -221px; }
.conso100.conret { background-position: -150px -221px; }
.conso100.cogai { background-position: -198px -218px; }
.conso100.conbocau { background-position: -250px -221px; }
.conso100.conech { background-position: -300px -220px; }
.conso100.cono { background-position: 0% -274px; }
.conso100.conrua { background-position: -52px -277px; }
.conso100.conluon { background-position: -153px -270px; }
.conso100.concaden { background-position: -198px -274px; }
.conso100.contom { background-position: -253px -274px; }
.conso100.connhen { background-position: -300px -270px; }
.conso100.connai { background-position: 2px -320px; }

/* pagination */
.pagination {
    display: flex;
    list-style: none;
    justify-content: center;
    gap: 6px;
    padding: 1rem 0;
    font-size: 14px;
}

.pagination li {
    display: inline-block;
}

.pagination li a,
.pagination li span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.pagination li a:hover {
    background: #f2f2f2;
    color: #000;
}

.pagination li.active span {
    background: #0079c1; /* đỏ đậm */
    color: #fff;
    font-weight: bold;
    border-color: #0079c1;
    cursor: default;
}

.pagination li.disabled span {
    background: #eee;
    color: #999;
    cursor: not-allowed;
}