/* =========================================================
   Candidate Search - extracted from source stylesheet
   Chỉ giữ các rule liên quan tới class/id xuất hiện trong search.ejs
   ========================================================= */

button {

    background: transparent;

    border: transparent;

}

.banner_search_candidate {

    background-image: url("/assets/images/banner_candidate_home_1520.webp");

    height: 444px;

    background-size: auto;

    display: flex;

    align-items: center;

    justify-content: center;

}

.main_search {

    display: flex;

    width: 1180px;

    height: 60px;

    position: relative;

    border-radius: 56px;

}

.main_search_category {

    width: 30%;

    display: flex;

    border-top-left-radius: 56px;

    border-bottom-left-radius: 56px;

    background: #FFF;

}

#btn_choose_cate {

    width: 100%;

    border: transparent;

    border-top-left-radius: 56px;

    border-bottom-left-radius: 56px;

    background: #fff;

    border-right: 1px solid #ccc;

    font-size: 20px;

}

.box_search_cate {

    position: absolute;

    top: 80px;

    width: 330px;

    height: 510px;

    background: #FFF;

    border-radius: 20px;

    display: flex;

    flex-direction: column;

    padding: 20px 15px;

    box-shadow: 1px 0px 5px 1px;

    z-index: 1;

    gap: 15px;

}

.box_search_cate_head {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.sub_main_search .show_title,

.box_search_cate .show_title {

    font-size: 20px;

    line-height: 120%;

    font-weight: 600;

}

.btn_close_sub {

    border-radius: 50%;

    background: #EBEEF1;

    width: 28px;

    height: 28px;

}

.inp_search_name_cate {

    display: flex;

    align-items: center;

    position: relative;

    padding: 10px;

    border: 1px solid #4C5BD4;

    border-radius: 25px;

    width: 100%;

    margin-bottom: 10px;

}

.box_search_cate_main {

    overflow: hidden;

    height: 100%
}

.search_check_box {

    padding: 10px;

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 15px;

    overflow: auto;

    height: calc(100% - 60px);

}

.search_check_box .item_check_box {

    position: relative;

    padding-left: 32px;

    cursor: pointer;

    font-size: 22px;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.item_radio {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}

.banner_search_candidate .checkmark {

    position: absolute;

    left: 0;

    height: 22px;

    width: 22px;

    border-radius: 6px;

    border: 1px solid #A3A2A2;

}

.search_check_box .name_label {

    font-size: 14px;

}

.main_search_keyword_category {

    display: flex;

    width: 60%;

}

.main_search_keyword {

    display: flex;

    align-items: center;

    width: 70%;

    position: relative;

}

.main_inp_keyword {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    padding-left: 15px;

    background: #fff;

}

#inp_key {

    font-size: 20px;

    line-height: 120%;

    background: none;

    border: none;

    width: calc(100% - 38px);

    padding-left: 15px;

}

.sub_main_search_keyword {

    width: 545px;

    height: 572px;

    border-radius: 20px;

    background: #FFF;

    position: absolute;

    top: 80px;

    z-index: 1;

    box-shadow: 1px 0px 5px 1px;

    padding: 15px;

    overflow: hidden;

}

.sub_list_keyword {

    padding-left: 45px;

    margin-top: 16px;

    height: calc(100% - 50px);

    overflow: auto;

    gap: 15px;

    display: flex;

    flex-direction: column;

}

.item_keyword {

    font-size: 16px;

    display: flex;

    gap: 10px;

    align-items: center;

}

.main_search_city {

    display: flex;

    align-items: center;

    border-left: 1px solid #ccc;

    width: 25%;

    padding-left: 10px;

    background: #fff;

}

#txt_name_city {

    font-size: 20px;

}

.box_search_city {

    width: 450px;

    height: 480px;

    position: absolute;

    top: 80px;

    right: 162px;

    background: #FFF;

    border-radius: 20px;

    padding: 20px 15px;

    display: flex;

    flex-direction: column;

    box-shadow: 1px 0px 5px 1px;

    z-index: 1;

    overflow: hidden;

}

.box_search_city .box_search_cate_head {

    justify-content: end;

}

#btn_choose_city {

    display: flex;

    align-items: center;

    width: 100%;

    height: 100%;

    padding: 0;

    border: transparent;

    background: transparent;

    border-right: 1px solid #ccc;

}

.main_search_btn_search {

    background: #FFF600;

    display: flex;

    width: 15%;

    height: 100%;

    border-top-right-radius: 56px;

    border-bottom-right-radius: 56px;

}

.box_search_city_main,

.box_search_city_bottom {

    display: flex;

    flex-wrap: wrap;

    border-bottom: 1px solid #ccc;

}

.box_search_city_main {

    border-top: 1px solid #ccc;

    margin-top: 15px;

    height: calc(100% - 80px);

}

.box_search_city_left {

    width: 50%;

    border-right: 1px solid #ccc;

    height: 100%;

}

.box_search_city_right {

    width: 50%;

    height: 100%;

}

.box_search_city_right .default {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}

.box_search_city_right .default p {

    font-size: 12px;

    color: #ABABAB;

}

.search_inp_city {

    display: flex;

    padding: 15px 10px;

    border-bottom: 1px solid #ccc;

}

.search_inp_city .inp_search_name_city {

    background: transparent;

    border: transparent;

    font-size: 15px;

}

.box_search_city_main .search_check_box {

    height: calc(100% - 55px)
}

.box_search_city_bottom {

    display: flex;

    justify-content: space-between;

    padding: 10px 0;

}

.unselect_all {

    padding: 8px 25px;

    border-radius: 10px;

    font-size: 16px;

    line-height: 18px;

    width: fit-content;

    background: none;

    border: 1px solid #4C5BD4;

    color: #4C5BD4;

}

.box_search_city_bottom .selected {

    border: none;

    background: #4C5BD4;

    color: #fff;

    padding: 8px 25px;

    border-radius: 10px;

    font-size: 16px;

    line-height: 18px;

    width: fit-content;

}

.btn_search {

    background: transparent;

    border: transparent;

    font-size: 20px;

    width: 100%;

}

.item_check_box .checkmark:after {

    content: "";

    position: absolute;

    display: none;

}

.item_check_box .checkmark:after {

    left: 7px;

    top: 3px;

    width: 4px;

    height: 10px;

    border: solid #4C5BD4;

    border-radius: 3px;

    border-width: 0 3px 3px 0;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

}

.item_check_box input:checked~.checkmark:after {

    display: block;

}

.box_advanced_search {



    height: 100%;

    position: fixed;

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    width: 100%;

    z-index: 9999;

    float: left;

    background: rgba(0, 0, 0, .529);

    top: 0;

    right: 0;

}

.head_advanced_search {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px;

    background: #4c5bd4;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}

.main_advanced_search {

    width: 900px;

    margin: 19vh auto 0;

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.55);

    border-radius: 10px;

    background: #fff;

}

.title_advanced_search {

    color: #fff;

    font-size: 18px;

    line-height: 21px;

    font-weight: 400;

}

.body_advanced_search {

    padding: 30px 25px;

}

.box_item_advanced_search {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    justify-content: space-between;

    border-bottom: 2px solid #ccc;

    padding-bottom: 30px;

    margin-bottom: 30px;

}

#search_name_candidate {

    width: 100%;

    height: 40px;

    font-family: Roboto-Regular, sans-serif;

    font-size: 15px;

    line-height: 18px;

    color: #000;

    border: 1px solid #999 !important;

    border-radius: 8px;

    margin-bottom: 0 !important;

    background: #fff;

    text-indent: 5px;

}

.box_item_advanced_search .item-select {

    width: 30%;

}

.box_item_advanced_search .item-select .select2-container .select2-selection--single {

    height: 38px;

}

.box_item_advanced_search .item-select .select2-container .select2-selection__rendered {

    line-height: 38px;

}

.bottom_advanced_search {

    display: flex;

    justify-content: end;

    align-items: center;

}

.bottom_advanced_search button {

    width: 144px;

    height: 38px;

    background: #4c5bd4;

    border-radius: 5px;

    color: #fff;

    font-size: 16px;

}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* =========================
   TABLET + MOBILE
   <= 1024px
   ========================= */

@media only screen and (max-width: 1024px) {
    .banner_search_candidate {
        height: auto;
        padding: 40px 30px;
        background-size: cover;
        background-position: center;
    }

    .main_search {
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        border-radius: 0;
    }

    /*
     * Mobile/tablet:
     * keyword + category xếp dọc
     */
    .main_search_keyword_category {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }

    .main_search_category,
    .main_search_keyword,
    .main_search_city {
        width: 100%;
        height: 40px;
        margin-bottom: 15px;
        padding: 0;
        background: transparent;
        border: 0;
    }

    /*
     * Desktop category button không sử dụng ở mobile,
     * mobile dùng #sl_cate_mb.
     */
    .main_search_category {
        border-radius: 0;
    }

    /*
     * Keyword
     */
    .main_inp_keyword {
        width: 100%;
        height: 40px;
        padding: 0 15px;
        border-radius: 30px;
        background: #fff;
    }

    #inp_key {
        width: calc(100% - 30px);
        height: 40px;
        padding-left: 10px;
        font-size: 16px;
    }

    .sub_main_search_keyword {
        display: none !important;
    }

    /*
     * Select category + city mobile
     */
    #sl_cate_mb,
    #sl_city_mb {
        width: 100%;
        height: 40px;
    }

    .main_search_category .select2-container,
    .main_search_city .select2-container {
        width: 100% !important;
    }

    .banner_search_candidate .select2-container .select2-selection--single {
        width: 100%;
        height: 40px;
        border-radius: 30px;
        border: none;
        background: #fff;
    }

    .banner_search_candidate .select2-container--default .select2-selection--single .select2-selection__rendered {
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        padding-right: 35px;
        font-size: 16px;
        color: #474747;
    }

    .banner_search_candidate .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
        top: 0;
        right: 10px;
    }

    /*
     * Không sử dụng popup category/city desktop
     * ở tablet/mobile.
     */
    .box_search_cate,
    .box_search_city {
        display: none !important;
    }

    /*
     * Search button
     */
    .main_search_btn_search {
        width: calc(100% - 52px);
        height: 40px;
        border-radius: 40px;
        overflow: hidden;
        background: #fff600;
    }

    .btn_search {
        width: 100%;
        height: 40px;
        font-size: 16px;
        border-radius: 40px;
    }

    /*
     * Advanced search
     */
    .main_advanced_search {
        width: calc(100% - 40px);
        max-width: 900px;
        margin: 8vh auto 0;
    }

    .body_advanced_search {
        padding: 20px;
    }

    .box_item_advanced_search {
        gap: 20px;
    }

    .box_item_advanced_search .item-select {
        width: calc(50% - 10px);
    }
}


/* =========================
   MOBILE
   <= 600px
   ========================= */

@media only screen and (max-width: 600px) {
    .banner_search_candidate {
        padding: 20px 15px;
        background-size: cover;
    }

    .main_search {
        width: 100%;
    }

    .main_search_keyword_category {
        width: 100%;
    }

    .main_search_category,
    .main_search_keyword,
    .main_search_city {
        height: 42px;
        margin-bottom: 12px;
    }

    /*
     * Keyword
     */
    .main_inp_keyword {
        height: 42px;
        border-radius: 30px;
        padding: 0 15px;
    }

    #inp_key {
        height: 42px;
        font-size: 15px;
    }

    /*
     * Select2 mobile
     */
    .main_search_category .select2-container,
    .main_search_city .select2-container {
        width: 100% !important;
    }

    .banner_search_candidate .select2-container .select2-selection--single {
        height: 42px;
        border-radius: 30px;
    }

    .banner_search_candidate .select2-container--default .select2-selection--single .select2-selection__rendered {
        height: 42px;
        line-height: 42px;
        padding-left: 18px;
        padding-right: 35px;
        font-size: 15px;
    }

    .banner_search_candidate .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px;
        top: 0;
        right: 8px;
    }

    /*
     * Search
     */
    .main_search_btn_search {
        height: 42px;
    }

    .btn_search {
        height: 42px;
        font-size: 16px;
        font-weight: 500;
    }

    /*
     * Advanced search modal
     */
    .box_advanced_search {
        overflow-y: auto;
    }

    .main_advanced_search {
        width: calc(100% - 20px);
        margin: 20px auto;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    .head_advanced_search {
        padding: 12px 15px;
    }

    .title_advanced_search {
        font-size: 16px;
        line-height: 20px;
    }

    .body_advanced_search {
        padding: 15px;
    }

    .box_item_advanced_search {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .box_item_advanced_search .item-select {
        width: 100%;
    }

    #search_name_candidate {
        height: 40px;
        font-size: 14px;
    }

    .box_item_advanced_search .item-select .select2-container {
        width: 100% !important;
    }

    .box_item_advanced_search .item-select .select2-container .select2-selection--single {
        height: 40px;
    }

    .box_item_advanced_search .item-select .select2-container .select2-selection__rendered {
        line-height: 40px;
    }

    .bottom_advanced_search {
        width: 100%;
        justify-content: center;
    }

    .bottom_advanced_search button {
        width: 100%;
        height: 40px;
    }
}


/* =========================
   MOBILE NHỎ
   <= 480px
   ========================= */

@media only screen and (max-width: 480px) {
    .banner_search_candidate {
        padding: 15px 10px;
    }

    .main_search_category,
    .main_search_keyword,
    .main_search_city {
        margin-bottom: 10px;
    }

    .main_inp_keyword,
    .banner_search_candidate .select2-container .select2-selection--single,
    .main_search_btn_search,
    .btn_search {
        height: 40px;
    }

    #inp_key {
        height: 40px;
        font-size: 14px;
    }

    .banner_search_candidate .select2-container--default .select2-selection--single .select2-selection__rendered {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .banner_search_candidate .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
    }

    .btn_search {
        font-size: 15px;
    }

    .main_advanced_search {
        width: calc(100% - 16px);
        margin: 10px auto;
        max-height: calc(100vh - 20px);
    }

    .body_advanced_search {
        padding: 12px;
    }
}


/* =========================
   MOBILE RẤT NHỎ
   <= 375px
   ========================= */

@media only screen and (max-width: 375px) {
    .banner_search_candidate {
        padding: 12px 8px;
    }

    .main_inp_keyword {
        padding-left: 10px;
        padding-right: 10px;
    }

    #inp_key {
        font-size: 14px;
        padding-left: 7px;
    }

    .banner_search_candidate .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 15px;
        font-size: 14px;
    }

    .main_advanced_search {
        width: calc(100% - 10px);
    }
}