﻿body {
    background-color:#f7f7f9
}
.i-list #collapseHuongDanDangKyThucTap {
    padding-top: 10px;
    color: rgba(0,0,0,.8)
}
.i-list #collapseHuongDanDangKyThucTap p + p {
    margin-top: 10px;
}
.i-list .item-content .collapse p, .i-list .item-content .collapse li {
    margin-top: 10px
}
label.error {
    font-size: 13px;
    color: #f00;
    margin-top: 5px;
}
.i-register-form .form-files-list{
    border-top:none;
    padding:15px 0 0
}
.list-cv-created, .list-file-upload {
    border-top: 1px dashed #d9d9d9;
    padding: 15px 0;
}

.form-files-area.st2 .list-cv-created {
    border-top:none;
    border-bottom: 1px dashed #d9d9d9;
}
.form-files-area.st2 .list-file-upload {
    border-top: none;
    padding: 0 0 15px
}

.hidden {
    display: none
}
.i-section-wrapper.teacher .i-table .twatch{margin-top:0}

.modal-textarea-buttons .modal-save-review-and-approve {
    background-color: #059340;width:120px !important;color:#fff
}
.modal-textarea-buttons .modal-save-review-and-reject {
    background-color: #f8d7da;width:160px !important
}
.i-position-list-job .item{position:relative}
.lnk-abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 2;
}
.i-position-list-job .item .item-button {
    z-index:3
}

.item-timeline .item-timeline-detail {
    padding: 9px 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 50px
}
@media screen and (min-width:768px){
    .item-timeline .item-timeline-detail{
        flex-wrap: nowrap
    }
}
.item-timeline .sts-2 {
    color: #808080
}
.item-timeline .sts-1 {color:#DA0000}
.item-timeline .sts-1::before{
    top:18px !important;
    background-image:url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5.5" fill="white" stroke="%23C0151B"/><circle cx="6.0015" cy="5.99955" r="4.15385" fill="%23FFC5C5"/><circle cx="6.0015" cy="5.99955" r="3.65385" stroke="%23FAFCFF" stroke-opacity="0.25"/></svg>') !important
}
    .item-timeline .sts-1 .item-timeline-detail {
        background: #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .item-timeline .sts-1 .item-timeline-status, .dot-processing .item-timeline-status {
        color: #059340;
        position: relative;
        padding-left: 20px;
        margin-left: 5px;
    }
.item-timeline .sts-1 .item-timeline-status::before, .dot-processing .item-timeline-status::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" fill="none"><rect width="2.923" height="8.768" x=".928" y="5.064" fill="%23059340" fill-opacity=".4" rx="1.461"><animate attributeName="height" dur="1s" repeatCount="indefinite" values="8.76769;12;8.76769"></animate><animate attributeName="y" dur="1s" repeatCount="indefinite" values="5.06409;1;5.06409"></animate></rect><rect width="2.923" height="11.69" x="5.8" y="2.142" fill="%23059340" fill-opacity=".7" rx="1.461"><animate attributeName="height" begin="0.2s" dur="1s" repeatCount="indefinite" values="11.6903;14;11.6903"></animate><animate attributeName="y" begin="0.2s" dur="1s" repeatCount="indefinite" values="2.1416;0;2.1416"></animate></rect><rect width="2.923" height="13.639" x="10.67" y=".193" fill="%23059340" rx="1.461"><animate attributeName="height" begin="0.4s" dur="1s" repeatCount="indefinite" values="13.6386;11;13.6386"></animate><animate attributeName="y" begin="0.4s" dur="1s" repeatCount="indefinite" values="0.193237;3;0.193237"></animate></rect></svg>') no-repeat
}
.item-timeline .sts-1 .item-timeline-status::before {
    top: 5px;
}
        .dot-processing .item-timeline-status::before {
            top: 3px;
        }
    .item-timeline .sts-1 + .sts-1 .item-timeline-detail {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
.item-timeline>div:not(.sts-1) + .sts-1 .item-timeline-detail {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.item-timeline .sts-1:not(.sts-1 + .sts-1):not(:has(+ .sts-1))
{
    border-radius:4px
}

.item-timeline .group-23 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-left:20px;
    padding: 0 10px 0 0px;
    background: #fff;
}
.item-timeline .group-23 .timeline-step {
    margin-left: -20px
}

.item-timeline .group-23 .item-timeline-detail {
    background: none
}

.item-timeline .group-23 .timeline-right {
    padding: 0 10px 10px;
}
@media screen and (min-width:768px) {
    .item-timeline .group-23 {
        flex-wrap: nowrap
    }
    .item-timeline .group-23 .timeline-right{
        padding:0
    }
}

.i-section-top-bottom {
    border-top: dashed 1px #F2CA50;
    padding: 15px 0 0;
    margin-top: 15px;
}
.i-section-top-bottom .i-section-top-register{
    background:#FFECB1;
    color:#723F00;
    border-radius:4px;
    padding:5px 12px;margin-left:10px
}

.dot-processing .title {
    margin-bottom: 20px;
}
.dot-processing .timeline {
    color: #DA0000;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px
}
@media screen and (min-width:768px) {
    .dot-processing .timeline {
        flex-wrap: nowrap
    }
}
.dot-processing .item-timeline{
    margin-bottom:10px
}
.dot-processing .bottom {
    border-top: dashed 1px #D9D9D9;
    padding:10px 0;margin-top:10px;
}
.dot-processing .timeline-right .item-button {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease;
    border: none;
    border-radius: 4px;
    width: 160px;
    height: 32px;
    background-color: #DA0000;
    color: #fff;
    gap: 8px;
}
.dot-processing .bottom .item-button {
    background: #E9E9E9;
    border-radius: 4px;
    color: #000;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    padding:6px 20px
}
.i-section-top-left-action{
    display:flex;
    gap:15px
}
.i-section-top-cancel {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease;
    border-radius: 60px;
    width: 191px;
    height: 36px;
    background-color: #fff;
    color: #723F00;
    border: none;
}
    .i-section-top-cancel:hover, .i-section-top-bottom .i-section-top-register:hover, .col-action button:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
    }
.i-section-top-cancel svg{
    margin-right:10px
}
.col-action{
    display:flex;
    flex-wrap:wrap;
    gap:5px 8px;
    justify-content:space-around
}
.col-action button {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 5px 8px;
    height:30px
}
.col-action button span{
    margin-left:8px
}
@media screen and (min-width:768px) {
    .col-action{
        justify-content:center
    }
    .col-action button span {
        display: none
    }
}
.btn-confirm-apply-successed {
    background: #DEFBDF;
    color:#059340
}
.btn-cancel-apply {
    background: #FEF0F0;
    color: #F46A6A
}
.btn-reapply {
    background: #FFECD7;
    color: #FF6A00
}