.register-edutrade {
    background-color: #ffffff5b;
    width: 100%;
    max-width: 900px;
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #eee;
    font-size:16px;
}

.register-edutrade .content-register1 {
    /*background-color: azure;*/
    background-position: center;
    background-size: cover;
    height: 600px; 
    border-radius: 10px 0 0 10px;
    justify-content: center;
    align-items: center;
    padding:10px;
}

.content-register1 img{
    width:100%;
    height:100% !important;
}


.tag-name{
    font-style: bold;
    font-weight: 300;
}

.register-edutrade .content-register2 {
    padding: 0px 0px 0px 20px;
}
.mb-3{
    width:100%;
    margin-top:5px;
    margin-bottom:0px !important;
}
.register-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px; 
    text-align: center;
}
.register-header h2{
    font-size:18px;
    margin:10px 0px;
}

.register-button {
    margin-top: 10px;
    width: 100%;
    border-radius: 5px; 
    height: 40px;
    background-color: #47df93;
    color: #fff;
    border: none;
    text-transform: uppercase;
}

.register-button:hover {
    background-color: #22c581;
    color: #fff;
    font-style: bold;
}
p.register{
    margin:0px auto !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}
.card {
    display: none; 
    padding: 5px 15px;
    box-shadow: 0 4px 8px rgba(38, 228, 133, 0.87);
    margin-bottom: 7px;
}
.card.show {
    display: block;
    cursor: pointer;
}
.checkbox-label {
    background-color: #1ca64b;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin-top: 7px;
}
.checkbox-label:hover {
    background-color: #049808;
}
.inpcheck{
    transform: scale(2);
    margin-top: 9px !important;
}
.spancheck{
    margin-left: 27px;
}
.inforeg{
    font-size: 14px;
    margin-top: 10px;
}
.inforeg p{
    margin-bottom:0px !important;
}
.link-register{
    color: #0dd894;
}

/* scroll */
#part_right .register-form {
    max-height: 600px;
    padding: 0px 20px !important;
    overflow-y: auto;    
}

.register-form::-webkit-scrollbar {
    width: 3px;
}

.register-form::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

.register-form::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
}

.register-form::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.register-form::-webkit-scrollbar-button {
    display: none;
}
.ulyeucau{
    margin-bottom:0px !important;
}
.ulyeucau li{margin:0px;}
/* infoRegister */
.requirement-text {
    font-size: 13px;
    font-weight: 300;
    margin-top: 3px;
}

.requirement-text.invalid {
    color: red; 
}

.requirement-text.valid {
    color: green;
}

.error-text {
    font-size: 13px;
    color: red;
    font-weight: 300;
    margin-top: 3px;
}

/* identification */

.custom-border {
    border: 2px dashed #47df93; 
    border-radius: 7px; 
    padding: 10px; 
    background-color: #f9f9f9;
    font-size: 14px;
    font-weight: 300; 
}

.upload-section1 {
    align-items: center;
    gap: 100px;
    margin-top: 5px;
}
.upload-section1 .upload-a{
    color: #22c581;
    font-size: 14px;
    font-weight: 500;
}

.upload-section2 {
    align-items: center;
    gap: 110px;
}

.upload-section2 .upload-a{
    color: #22c581;
    font-size: 14px;
    font-weight: 500;
}

.link-register{
    color: #333;
    font-size: 16px;
    font-weight: 700;
}

.upload-section2 {
    text-align: center;
    margin-bottom: 15px;
}

.upload-section2 p {
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
}

.signature-container {
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

.signature-canvas {
    border: 1px solid #aaa;
    border-radius: 5px;
    width: 100%;
    height: 200px;
}

.signature-info p {
    font-size: 13px;
    font-weight: 300;
    margin-top: 5px;
    margin-bottom: 5px;
}

.signature-info i {
    color: #666;
}

.upload-section2 {
    text-align: center;
    margin-bottom: 15px;
}

.upload-section2 p {
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
}

.upload-image {
    cursor: pointer;
    border-radius: 8px; /* Bo tròn 7px */
    width: 100%;
    max-width: 300px; /* Giới hạn kích thước bức ảnh */
    display: block;
    margin: auto;
    border: 2px dashed #22c581; /* Border 2px, nét đứt và màu xanh */
    box-sizing: border-box; /* Đảm bảo kích thước bao gồm border và padding */
    padding: 3px; /* Padding 3px mỗi chiều */
}


.upload-info p {
    font-size: 13px;
    font-weight: 300;
    margin-top: 5px;
    margin-bottom: 5px;
}

.upload-info i {
    color: #666;
}

/* Hide the file input */
.file-input {
    display: none;
}

.requirement-content {
    display: none;
}
.requirement-content.active {
    display: block;
}

/* contact */
.input-container {
    align-items: center; /* Căn giữa theo chiều dọc */
}

.input-container .form-control {
    margin-right: 10px;
}

.input-container .btn {
    padding:0px;
}

.requirement-text {
    font-size: 13px;
    color: #666;
    font-weight: 300;
    margin-top: 10px;
}

.required-indicator {
    color: red;
    margin-right: 5px;
}

.hidden {
    display: none;
}

.h2{
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.form-check{
    margin-top: 3px;
    margin-bottom: 5px;
}


.address-selects {
    gap: 10px; /* Khoảng cách giữa các thẻ select */
}

.select-group {
}

.select-group select {
    width: 100%; /* Chiều rộng của thẻ select chiếm toàn bộ phần tử chứa */
}

/* modal */
/* Modal container */
.modal-content {
    border-radius: 10px; /* Bo tròn góc modal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hiệu ứng bóng cho modal */
    transition: transform 0.3s ease-out; /* Hiệu ứng chuyển động khi mở/modal */
}

/* Header của modal */
.modal-header {
    background-color: #007bff; /* Màu nền cho header */
    color: #fff; /* Màu chữ cho header */
    border-bottom: none; /* Xóa đường viền dưới header */
    border-top-left-radius: 10px; /* Bo tròn góc trên trái */
    border-top-right-radius: 10px; /* Bo tròn góc trên phải */
}

/* Nội dung của modal */
.modal-body {
    background-color: #f9f9f9; /* Màu nền cho nội dung */
    color: #333; /* Màu chữ cho nội dung */
    font-size: 16px; /* Kích thước chữ cho nội dung */
    padding: 20px; /* Padding cho nội dung */
    text-align: center; /* Căn giữa nội dung */
}

/* Footer của modal */
.modal-footer {
    border-top: none; /* Xóa đường viền trên footer */
    padding: 10px 20px; /* Padding cho footer */
    background-color: #f1f1f1; /* Màu nền cho footer */
}

/* Nút đóng modal */
.btn-close {
    filter: invert(1); /* Đổi màu nút đóng cho phù hợp với nền tối */
}

/* Nút modal */
.btn {
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    transition: background-color 0.3s ease; 
}

/* Nút modal trong trạng thái hover */
.btn:hover {
    background-color: #19a53c; 
    color: #fff; 
}

#bth-successModal .modal-content {
    border: 2px solid #28a745;
}

#bth-successModal .modal-header {
    background-color: #28a745; 
}

#bth-successModal .modal-footer .btn-secondary {
    background-color: #28a745; 
    border: none; 
}

#bth-errorModal .modal-content {
    border: 2px solid #dc3545; 
}

#bth-errorModal .modal-header {
    background-color: #dc3545; 
}

#bth-errorModal .modal-footer .btn-secondary {
    background-color: #dc3545; 
    border: none; 
}

.requirement-content {
    display: none; 
}
.requirement-content.active {
    display: block; 
}

.step0info{color:blue;}
.step0error{color:red;}
.buoc0info{color:blue;}
.buoc0error{color:red;}

@media (max-width: 960px) {
    .register-edutrade{
        width:unset;
    }
    .content-register1 {
        display:none;
    }
    .register-edutrade .content-register2{
        max-width: 100%;
        width: 100%;
        flex: auto;
        padding:0px;
        
    }
    #part_right .register-form{
        max-height: unset;
        overflow: hidden;
        padding: 0px 5px;
    }
}
/*----------Step1-------------*/
p.psteph1{margin:0px 30px;}
p.pbuoch1{margin:0px 30px;}
.clsochon{
    cursor: pointer;
    /*margin-top: 10px;
    margin-bottom: 15px;*/
    padding: 5px !important;
}
.cltuchon{padding:0px !important;}
.chontk{cursor: default;}
.btnmaso{
    margin-left:10px;
    cursor: pointer;
    background-color: #049808ff;
    font-size: 16px;
    padding: 3px 2px;
    color: #fff;
}
.timaxn{
    
}
.input_tkgd_mgd{
    width: 100px !important;
    height: 27px !important;
    margin-left: -3px !important;
    border-radius: 0px;
    display: unset;
}
.input_tkgd_mxn{
    width:78px !important;
    height: 27px !important;
    border-radius: 0px;
    display: unset;
}
.rowstep1{
    margin-left:0px !important;
    margin-right:0px !important;
}
.rowbuoc1{
    margin-left:0px !important;
    margin-right:0px !important;
}
#bth-confirm-password-section{
    /*margin-top:15px;*/
    margin-bottom:15px;
}
.passtkgd{width:100% !important;}
.step1info{color:blue;}
.step1error{color:red;}
.buoc1info{color:blue;}
.buoc1error{color:red;}
ul.passreq{
    margin-top:5px;
    margin-bottom:5px !important;
    list-style: none !important;
    padding-left: 0px !important;
}
ul.passreq li{
    margin: 0px 0px;
    color: #f90606;
}
ul.passreq p{
    margin: 5px 0px 5px -30px;
    color: blue;
}
/*----------Step2-------------*/
p.psteph2{margin:0px 30px;}
p.pbuoch2{margin:0px 30px;}
.rowstep2{
    margin-left:0px !important;
    margin-right:0px !important;
}
.rowbuoc2 .mb-3{margin-bottom:10px;}
.rowbuoc2{
    margin-left:0px !important;
    margin-right:0px !important;
}
.rowstep2 .mb-3{margin-bottom:10px;}
.inpput2{width:100% !important;}
.btnxm{float:right;width:110px;padding: 5.5px;}
.inpsdt2{
    width:calc(100% - 125px) !important;
    display:unset;
}
.pinfosdt{
    margin: 10px 0px !important;
    padding: 10px;
    border: 1px solid #d98b1b;
    border-style: dashed solid;
    color: #d98b1b;
}
.pinfostep2{    
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: underline;
    text-underline-position: under;
} 
.step2info{color:blue;}
.step2error{color:red;}

/*----------Step3-------------*/
.colmt,.colms,.colcd,.colck{
    margin-top:20px;
}
@media (max-width: 960px) {
    .colmt,.colms,.colcd,.colck{
        min-height:190px !important;
    }
}
.spantcol{
    color:#049808;
    cursor: pointer;
}
.tcol_left{
    float: left;
    max-width:140px;
}
.tcol_left p{margin:0px !important;}
.tcol_right{ 
    float: right;
} 
.tcol_right a{cursor: point;}
.timg_above{
    float: left;
    border: 2px dashed #f9c203;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
    height:155px;
    overflow: hidden;
}
.timg_above img{width:100%}
#reg_step_3 .modal{position:fixed !important;}
.step3info{color:blue;}
.step3error{color:red;}

/*----------Step4-------------*/
p.psteph4{margin:0px 30px;}
.rowstep4{
    margin-left:0px !important;
    margin-right:0px !important;
}
.colstep4_left{padding-left:0px !important;margin-bottom:10px;}
.colstep4_right{padding-right:0px !important;margin-bottom:10px;}
.inpput4{width:100% !important;}
#sel_chondiachi label{cursor:pointer;}
#inp_cccd_id{background-color:#eee;}
.pinfostep4{    
    margin-bottom: 0px !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: underline;
    text-underline-position: under;
}
.step4info{color:blue;}
.step4error{color:red;}
.step4error ul,.step4error ul li{margin-bottom:5px !important;}

/*----------Step5-------------*/
.tablehd{
    width:100% !important;
    border: 1px solid #cbcbcb;
    color:#000;
    margin-bottom: 10px;
    margin-top: 0px;
}
.tablehd tr{
    border: 1px solid #cbcbcb;
}
#tabledk h1{font-size:16px;}
tr.clhead{
    background-color: #6fc750;
    color: #fff;
    font-weight: 600;
}
tr.clhead:hover{
    background-color: #6fc750 !important;
    color: #fff !important;
}
.tablehd td{
    border: 1px solid #cbcbcb !important;
    padding:6px !important;
}
.spdongy{cursor: pointer;}
.step5info{color:blue;}
.step5error{color:red;}

#inp_login,#inp_password,#inp_forgot,#inp_doipass{width:100% !important;}
.btnlogin,.btnquenmk{width:100% !important;} 
.loginerror,.quenmkerror,.doimkerror{
    padding:10px;
    color:red;
}
.rowlogin{
    margin-top:10px;
    margin-bottom:10px;
}