/* start css spinner */
.spinner-border,
.spinner-grow {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border-radius: 50%;
    animation: 0.75s linear infinite spinner-border;

}

.spinner-border {
    /* --bs-spinner-width: 2rem; */
    /* --bs-spinner-height: 2rem; */
    --bs-spinner-vertical-align: -0.125em;
    /* --bs-spinner-border-width: 0.25em; */
    --bs-spinner-animation-speed: 0.75s;
    --bs-spinner-animation-name: spinner-border;
    border: 0.2em solid currentcolor;
    border-right-color: transparent;
}

.spinner-border-sm {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-border-width: 0.2em;
}


@keyframes spinner-border {
    to {
        transform: rotate(1turn)
    }
}

/* end css spinner */

.form-index .text-danger {
    justify-items: center;
    border: 1px solid #ff000045;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: #ff00001a;
}

.display-none {
    display: none;
}

.btn {
    background: linear-gradient(180deg, #005489 0%, #007FCF 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 9px 15px;
    text-decoration: none;
    cursor: pointer;
    order-radius: 50px;
}


input {
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px solid #ccc;
}

.form-index .register-guide,
.form-index .form-register {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    height: 100%;
    background-color: #ffffff;
}

.form-index .register-guide .box-title,
.form-index .form-register .box-title {
    color: #fff;
    background: #005489;
    padding: 20px 30px;
    text-transform: uppercase;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
}

.form-index .register-guide .box-title h1,
.form-index .register-guide .box-title p,
.form-index .form-register .box-title h1,
.form-index .form-register .box-title p {
    margin-bottom: 0;
}

.form-index .register-guide .box-title p,
.form-index .form-register .box-title p {
    font-size: .875rem;
    text-transform: none;
}

.form-index .register-guide .box-title .title,
.form-index .form-register .box-title .title {
    margin-right: 30px;
}

.form-index .register-guide .box-title .icon-container,
.form-index .form-register .box-title .icon-container {
    margin-right: 10px;
}

.form-register .title-card {
    border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
    padding-bottom: 15px;
    padding-top: 10px;
}



.form-register .title {
    text-align: justify;
    font-size: 1rem;
}

.form-index .step .col-step {
    background-color: #ffffff !important;
}


.form-index .step p.title-step {
    color: #503D38;
    font-size: 1rem;
}

.form-index .step p span,
.form-index .note-form span {
    color: #005aaa;
    font-weight: bold;
}

.form-register .card-header-form:after {
    content: "";
    position: absolute;
    padding: 0 25px;
    border-bottom: 1px solid #e5e5e5;
    width: 90%;
    left: 5%;
    bottom: 0;
}

.form-index .otp-row .otp-input {
    width: 42px !important;
    height: 42px;
    text-align: center;
    margin: 0 6px;
    font-size: 18px;
    border: 1px solid #D9D9D9 !important;
    border-radius: 10px;
    justify-items: center;
    font-weight: 600;
    background-color: #ffff !important;
}

.form-index .otp-row .otp-input::placeholder {
    text-align: center !important;
    /* Center-align placeholder text */
    color: #ccc;
    /* Optional: Set placeholder color */
}

.form-index .otp-row {
    display: flex;
    margin-bottom: 20px;
    margin-left: 10px;
}

.form-index .otp-row .otp-input:first-child {
    margin-left: 0;
}

.form-index .otp-row .otp-input:last-child {
    margin-right: 0;
}

.form-index .step:after {
    content: "";
    position: absolute;
    padding: 0 25px;
    border-bottom: 1px solid #e5e5e5;
    width: 90%;
    left: 5%;
    bottom: 0;
}

.form-index .form-wrapper .note-form {
    font-weight: bold;
}

.form-index .form-wrapper .row {
    margin-bottom: 20px;
}

.form-index .form-wrapper .row p {
    font-size: 1rem;
}

.form-index .form-wrapper input {
    width: 100%;
    overflow: visible;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
}

.form-index .form-wrapper select {
    width: 100%;
    overflow: visible;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
    height: 100% !important;
    appearance: none;
    background: transparent url(/img/arrow_select.png) no-repeat top 4px right;
    padding-right: 30px;
}

.form-index .form-wrapper textarea {
    width: 100%;
    overflow: visible;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
}

.form-wrapper {
    margin-top: 10px;
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.form-index .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.form-index .form-create .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}


.form-index .form-wrapper .dflex-center {
    display: flex;
    justify-content: right;
}

.form-index .form-wrapper .dflex-center .btn-a {
    padding: 10px 20px;
    display: inline-table;
    border-radius: 50px;
    margin: 20px;
    border: none;
    outline: none;
    background: #FFC114;
    box-shadow: 0px 2px 0px 0px #0591FF1A !important;
    color: #000000E0 !important;
}

.form-index .form-wrapper .note {
    position: relative;
    padding-top: 20px;
}

.form-index .form-wrapper .note .notice {
    font-size: 0.75rem;
    font-style: italic;
    color: #333333;
}

.form-index .form-wrapper .note::after {
    content: "";
    position: absolute;
    border-top: 1px solid #e5e5e5;
    width: 100%;
    top: 0;
    left: 0;
}

.card-header-custom {
    background-color: #005489;
    color: #FFFFFF;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.card-header-form {
    background-color: #FFFFFF;
    color: #005489;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom: none;
    margin-bottom: -20px;
}

.card-header-otp {
    background-color: #FFFFFF;
    color: #005489;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.form-creater .top-header {
    background-color: #FFFFFF;
    color: #005489;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom: none;
    margin-bottom: -20px;
    justify-items: center;
}

.card {
    border-radius: 10px;
}


.step-row {
    margin: 15px 5px 10px 20px;
    font-family: Arial !important;
}


span.field-validation-error {
    font-size: 12px;
}

.block-form label {
    margin-top: .7rem !important;
}

.block-form select,
.block-form input,
.block-form textarea {
    margin-bottom: unset !important;
}

.block-form {
    background-color: #ffff;
    border-radius: 10px;
}


.text-box {
    background-color: #ffff !important;
    border: solid 1px #D9D9D9 !important;
    border-radius: 8px;
    height: 32px;
}

label,
.col-input label {
    color: #000000E0 !important;
    font-family: Arial !important;
    font-size: .95rem;
}

.title {
    text-align: justify;
}

.main-form {
    background-color: #f5f5f5;
}

.form-index .btn-create {
    margin-bottom: 20px;
    border-radius: 50px;
    border: none;
    background: #FFC114;
    color: #000000E0;
}


.form-index .btn-continue {
    margin-bottom: 20px;
    border-radius: 50px;
    border: none;
    background: #FFC114;
    color: #000000E0;
}

.form-index .form-otp .btn-continue,
.form-index .form-create .btn-continue {
    float: right;
    /*margin-right: 20px;*/
    font-size: 0.9rem;
    font-weight: 600;
}

.form-index .form-otp .btn-continue:hover,
.form-index .form-create .btn-continue:hover,
.form-index .btn-create:hover,
.list-trasoat .btn-search:hover {
    border: none;
    background: #f8c32e9e;
}

.form-index .form-otp .btn-return,
.form-index .form-create .btn-return,
.modal-confirm .modal-dialog .btn-return {
    border-radius: 50px;
    color: #000000E0;
    float: right;
    margin-right: 5px;
    border: 1px solid #D9D9D9;
    background: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.form-index .form-otp .btn-return:hover,
.form-index .form-create .btn-return:hover,
.modal-confirm .modal-dialog .btn-return:hover {
    /*border: none;*/
    background: #dbdbdb;
}

.form-index .btn-return:focus,
.form-index .btn-return:active {
    box-shadow: none;
    outline: none;
    border: 1px solid #dbdbdb !important;
}

.form-index .btn-continue:focus,
.form-index .btn-create:focus,
.form-index .btn-continue:active,
.form-index .btn-create:active {
    outline: none;
    /* Loại bỏ đường viền outline khi nhấp */
    border: none;
    /* Đảm bảo không hiển thị đường viền */
    box-shadow: none;
    /* Loại bỏ hiệu ứng bóng nếu có */
}

.list-trasoat .btn-search {
    margin-bottom: 10px;
    border-radius: 50px;
    border: none;
    background: #FFC114;
    color: #000000E0;
}

.form-index .btn-upload {
    width: 100%;
    background: none;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
}

.form-index .btn-upload .fa-cloud-upload {
    color: #D9D9D9;
    font-size: 40px;
}

.form-index .btn-upload p {
    color: #373a3c;
}

.form-index .form-create .file-item {
    display: inline-block;
    overflow: hidden;
}

.form-index .form-create .file-item span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    /*width: 90%;*/
}

.top-tiltle {
    font-size: 30px;
    font-weight: 650;
    color: #005AAA;
    padding-bottom: 20px;
}


/* .otp-row {
    display:
        /*flex;
    margin-bottom: 20px;
    margin-left: 20px;
}*/

.card-otp {
    background-color: #ffff;
    max-width: 399px;
}

.form-otp {
    justify-items: center;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    /* Đối với Firefox */
}

.breadcrumb-wrap {
    background: #e5e5e5;
    position: relative;
}

.breadcrumb-wrap .breadcrumb {
    font-size: .75rem;
    font-weight: 500;
    position: relative;
    margin: 0;
    padding: 10px 0;
    background: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.breadcrumb-wrap li {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-wrap li a {
    color: #333;
    line-height: 1.5rem;
}

/* border: 2px solid #ffff; */

.breadcrumb-wrap li a:hover {
    text-decoration: underline !important;
}

.breadcrumb-wrap li+li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: #333333;
    padding: 0px 10px;
}

.list-trasoat .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    border: 2px solid #ffff;
}

.list-trasoat .data-table {
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #D9D9D9;
    width: 100%;
    border: 2px solid #ffff;
}

.list-trasoat .data-table th,
.list-trasoat .data-table td {
    border: none !important;
    padding: 8px;
    font-size: 14px;
    align-content: center;
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 500px) {
    .list-trasoat .table-responsive {
        overflow-x: auto !important;
        /* Force horizontal scroll */
    }

    .list-trasoat .data-table {
        width: 100% !important;
        /* Force table to take full width */
    }

    .top-tiltle {
        font-size: 20px;
    }
}

.list-trasoat .data-table th,
.list-trasoat .data-table td {
    border: none !important;
    padding: 8px;
    font-size: 14px;
    align-content: center;
    text-align: left;
}

.list-trasoat .data-table tr:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.list-trasoat .row-list {
    align-items: end;
}

.list-trasoat .form-list {
    background-color: #ffff;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.05);
}

.list-trasoat .form-list .row-list input {
    padding: 6px 15px;
    font-size: 0.85rem;
    background-color: #ffff;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    height: 32px;
    width: 100%;
    font-size: 13px;
}

.list-trasoat .form-list .row-list .input-currency {
    width: 15%;
    position: absolute;
    left: 85%;
    border-radius: 0px 10px 10px 0px;
    padding: 0px;
    text-align: center
}

.list-trasoat .fa-calendar {
    position: absolute;
    right: 10px;
    top: 30px;
}

.form-index .form-create .input-currency {
    width: 80px;
    position: absolute;
    right: 0px;
    border-radius: 0;
    /*text-align: center;*/
    border: none;
    background: none;
    border-left: 1px solid #D9D9D9;
}

/*@media (max-width: 400px) {
    .form-index .form-create .input-currency {
        width: 20%;
        position: absolute;
        left: 70%;
   }
 }*/
.form-index .form-create .fa-calendar {
    position: absolute;
    right: 25px;
    top: 10px;
}


.text-align-center {
    text-align: center !important;
}

.list-trasoat a,
.list-trasoat a:hover {
    color: #000000E0;
    text-decoration: none;
}


.form-index .form-register {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    height: 100%;
    background-color: #ffffff;
}

.form-index .register-guide .box-title,
.form-index .form-register .box-title {
    color: #fff;
    background: #005489;
    padding: 20px 30px;
    text-transform: uppercase;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
}

.form-index .register-guide .box-title h1,
.form-index .register-guide .box-title p,
.form-index .form-register .box-title h1,
.form-index .form-create .box-title h1,
.form-index .form-create .box-title p,
.form-index .form-register .box-title p {
    margin-bottom: 0;
}

.form-index .register-guide .box-title p,
.form-index .form-register .box-title p {
    font-size: .875rem;
    text-transform: none;
}

.form-index .register-guide .box-title .title,
.form-index .form-register .box-title .title {
    margin-right: 30px;
}

.form-index .register-guide .box-title .icon-container,
.form-index .form-register .box-title .icon-container {
    margin-right: 10px;
}

.form-index .form-create {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    height: 100%;
    background-color: #ffffff;
}

.form-create .title-card {
    border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
    padding-bottom: 15px;
    padding-top: 10px;
}

.form-index .step,
.form-index .form-wrapper {
    padding: 20px 25px;
    position: relative;
    background-color: #ffffff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.form-create .title {
    text-align: justify;
    font-size: 1rem;
    color: #000000E0;
}

.form-index .form-create .form-wrapper {
    padding: 20px 25px;
    position: relative;
    background-color: #ffffff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.red {
    color: red;
}

.form-index .form-create .box-title p {}

.modal-dialog {
    width: 90%;
    max-width: 90%;
    margin: 30px auto;
}

/* Styles for medium to large screens */
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 90% !important;
        margin: 30px auto;
    }
}

/* Styles for very large screens (if needed) */
@media (min-width: 1200px) {
    .modal-dialog {
        width: 45%;
        max-width: 45% !important;
    }
}

.modal-confirm .remove-button {
    display: none !important;
}

.modal-confirm .modal-dialog {
    top: 40%;
}

.modal-confirm ul li {
    padding: 10px 0px;
}

#loadingoverlay {
    position: fixed;
    top: 0;
    z-index: 1999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.form-create .note-p,
.form-register .note-p,
.form-otp .note-p {
    font-size: 0.8rem !important;
}

.file-list-item {
    border-bottom: 1px solid #D9D9D94D;
    /* Add border-bottom to all items */
    padding: 5px 0px;
}

.file-list-item:first-child {
    border-top: 1px solid #D9D9D94D;
    /* Add border-top only to the first item */
}

.main-form .col-1,
.main-form .col-2,
.main-form .col-3,
.main-form .col-4,
.main-form .col-5,
.main-form .col-6,
.main-form .col-7,
.main-form .col-8,
.main-form .col-9,
.main-form .col-10,
.main-form .col-11,
.main-form .col-11,
.main-form .col-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.main-form .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.main-form .col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.main-form .col-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
}

.main-form .col-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}

.main-form .col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.main-form .col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}

.main-form .col-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
}

.main-form .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.main-form .col-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
}

.main-form .col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
}

.main-form .col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.main-form .col-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
}

.main-form .col-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
}

.main-form .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}