.require-input { color: red !important; font-size: 14px; }
.bg-sign-in {
    background-color: white;
    background-image: url("../../images/login.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-size: cover;        /* Đảm bảo ảnh phủ kín cả div */
    background-position: center;   /* Căn giữa ảnh */
    background-repeat: no-repeat;  /* Không lặp lại ảnh */
}

.sign-in {
    background: #fff;
    box-shadow: 0 -12px 36px rgb(0 0 0 / 0%), 0 18px 36px rgb(0 0 0 / 8%), 0 30px 60px rgb(0 0 0 / 20%);
    border-radius: 35px;
    padding: 3rem;
}
p {
    font-size: 16px;
}
.sign-in .sign-in-title {
    font-size: 35px;
    font-weight: 500;
    margin: 0px 0px 20px;

}

.sign-in form textarea {
    border-radius: 8px !important;
}
/* Tùy chỉnh chiều cao, padding và màu sắc */
.custom-select-group .custom-select {
    height: 60px;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem; /* padding phù hợp cho icon */
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    appearance: none; /* Loại bỏ mặc định của trình duyệt */
    background-color: #fff;
    color: #495057;
}

/* Thêm biểu tượng mũi tên */
.custom-select-group .custom-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 16px;
}

/* Khi chọn vào `select` */
.custom-select-group .custom-select:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.sign-in .col-form-label{
    display: flex;
    align-items: center;
}
.input-group-text {
    border-radius: 30px 0 0 30px !important;
    background-color: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 0.375rem 1.25rem;
    font-size: 1.2rem;
}
.sign-in .form-control{
    transition: box-shadow .195s ease-in-out,border-color .195s ease-in-out;
    border-radius: 30px;
    border: 1px solid #e5e7eb !important;
    color: #0a2540;
    font-weight: 500;
    height: 60px;
    outline: none;
    padding: 0.8rem;
    font-size: 14px;
}

.btn-submit {
    width: 100%;
    margin: 1rem auto;
    display: block;
    transition: background-color .195s ease-in-out;
    background-color: #017BCF;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    color: #fff;
    outline: none;
    padding: 0.75rem 1.25rem;
}

@media only screen and (max-width: 1024px) {
    .bg-sign-in{background-size: 100% 100%;}
}
@media only screen and (max-width: 767px) {
    .sign-in{padding: 1rem;}
    .sign-in .img-fluid{display: block; margin: auto;}
    .sign-in .sign-in-title {font-size: 25px;margin: 15px 0px;text-align: center;}
}