.flex_center {
    justify-content: center;
}

.d_flex {
    display: flex !important;
}

.bodyHomeDon {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: auto;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.boxContainHomeDon,
.boxBlogFooter {
    width: 100%;
}

.contentBlogFooter, 
.boxContentHomeDon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 1170px;
    margin-right: auto;
    margin-left: auto;
    height: auto;
    max-width: 95%;
    gap: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.box_breadcrumb {
    background: #eaebef !important;
}

.box_breadcrumb .content_breadcrumb {
    width: 1170px;
    margin-right: auto;
    margin-left: auto;
    max-width: 95%;
}

.box_breadcrumb .link_breadcrumb, 
.box_breadcrumb .txt_breadcrumb {
    color: #043379 !important;
}
.h1_HomeDon {
    color: #ff9408;
    font-size: 30px;
    line-height: 35px;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
    text-transform: uppercase;
    text-align: center;
}

.boxContentBlog {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
}
.boxPhuLuc {
    width: 30%;
    position: sticky;
    top: 70px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-radius: 5px;
}
.conten_pl {
    border: 2px dashed #4c5bd4;
    padding: 15px;
    float: left;
    margin-top: 0;
    width: 100%;
    border-radius: 5px;
}
.table_of_contents {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tt_phu_luc {
    height: 40px;
    width: 100%;
    margin: 0 auto;
    background: url(/assets/images/phu-luc.png);
    background-size: 100% 100%;
    background-position: center;
    color: #fff;
    text-align: center;
    font-size: 16px;
    line-height: 19px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
}
.box_phuluc {
    width: 100%;
    padding: 0;
    margin: 0;
    height: auto;
    overflow-y: scroll;
    max-height: 420px;
}
.conten_pl li {
    padding: 5px 0;
    float: left;
    width: 100%;
}
.conten_pl li a {
    color: #333;
    font-size: 17px;
    line-height: 22px;
    font-weight: 700;
}
.conten_pl li .ul_h2 {
    color: #4C5BD4;
}
.boxPhuLuc .table_of_contents .ul_h2 {
    font-size: 15px;
}
.conten_pl li .ul_h3 {
    color: #307df1;
}
.boxPhuLuc .table_of_contents .ul_h3 {
    padding-left: 15px;
    font-size: 15px;
}
.boxContainBlog {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 15px;
}
.contentBlog h2, .contentBlog h2 span {
    margin: 0 !important;
    color: #4C5BD4;
    font-size: 21px !important;
    font-weight: 500 !important;
    font-family: Roboto-Medium, sans-serif !important;
    width: 100%;
}
.contentBlog h3, .contentBlog h3 span {
    font-size: 19px !important;
    font-weight: 700;
    color: #307df1;
}
.contentBlog h4, .contentBlog h4 span {
    font-size: 18px !important;
    font-weight: 600;
    color: #4f4f4f;
}
.contentBlog, .contentBlog h2, 
.contentBlog h3, 
.contentBlog h4, 
.contentBlog p {
    margin-bottom: 6px !important;
    margin-top: 6px !important;
    line-height: 26px !important;
    letter-spacing: 0.02em;
    word-break: break-word;
    font-family: Roboto-Regular, sans-serif !important;
    font-size: 17px !important;
}
.contentBlog figure, .contentBlog figure img, .contentBlog img {
    float: left;
    width: 100%;
    height: auto !important;
}
.contentBlog figcaption {
    text-align: center;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-style: italic;
    padding: 5px 0;
    text-indent: 0;
    color: #888;
    float: left;
    width: 100%;
    margin-top: 5px;
}
.contentBlog blockquote {
    float: left;
    width: 100%;
    border-left: 5px solid #4c5bd4;
    margin: 0 0 12px;
    font-style: italic;
}
.contentBlog blockquote p {
    text-indent: 20px;
}
.content_detail img {
    display: block;
    width: 100%;
    height: auto !important;
}
.contentBlog a {
    color: #4C5BD4;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
}
.contentBlog p, .contentBlog p span, .contentBlog p span span {
    font-size: 17px !important;
    line-height: 26px;
    text-align: justify;
    font-family: Roboto-Regular, sans-serif !important;
    margin: 0 !important;
    text-indent: 20px;
}

p:has(a#xt) {
    text-align: center;
}

.contentBlog table {
    width: 100% !important;
    border: #d3d3d3 1px dotted;    
    margin: 10px 0;
}
.contentBlog table th, .contentBlog table td {
    border: #d3d3d3 1px dotted;
    padding: 5px;
}
.contentBlog table th p, .contentBlog table td p {
    margin: 0 !important;
    text-indent: unset;
}
.contentBlog ol, .contentBlog ul {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}
.contentBlog ul li {
    display: list-item;
    unicode-bidi: isolate;
    list-style: disc;
}
.contentBlog ol li {
    display: list-item;
    unicode-bidi: isolate;
    list-style: decimal;
}
.contentBlog li span {
    margin: 0 !important;
}
.contentBlog li::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: auto !important;
}
.boxContentBlog .contentBlog {
    width: 100%;
    margin-top: 0 !important;
}
.contentBlog.limitContentBlog {
    max-height: 550px;
    overflow: hidden;
}
.boxContentBlog iframe[src*="youtube.com"]{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16/9;
    float: left;
    margin: 5px 0 10px 0;
}
.boxContentBlog #xt {
    display: inline-block;
    font-size: 16px;
    text-align: center;
    background: linear-gradient(180deg, #00b8ff, #0792cc 95%, #5996ce);
    padding: 10px 20px;
    border-radius: 40px;
    text-indent: 0;
    color: #fff;
    margin: 5px auto;
}

.download, .download_timviec365 {
    padding: 4px 8px;
    background: #02b5e1;
    font-size: 15px;
    margin: 5px 0;
    text-indent: 0;
    color: #fff !important;
}

.download:before, .download_timviec365:before {
    content: '';
    margin-right: 5px;
    background: url(/assets/images/download.png) left center no-repeat;
    background-position: left 3px;
    width: 18px;
    height: 18px;
    display: inline-block;
}

.boxListDon {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}
.box_loadmore_don {
    display: flex;
    justify-content: center;
}

.item_maudon {
    width: calc(100% / 4 - 12px);
    border: 1px solid #C6C6C6;
    background-color: #ffffff;
    border-radius: 10px;
    position: relative;
}
.box_top_maudon {
    border-radius: 10px 10px 0px 0px;
    position: relative;
}
.box_img_maudon {
    height: 350px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0;
}
.img_maudon {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0px 0px;
} 
.box_hover_maudon {
    overflow: hidden;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px 10px 0px 0px;
    display: none;
    opacity: 1;
    visibility: visible;
    justify-content: center;
    align-items: center;
}

.box_top_maudon:hover .box_hover_maudon {
    display: flex;
}

.box_btndon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    animation: ease_out 0.4s ease-in-out;
}

.box_btndon .btn {
    border-radius: 4px;
    background: #fff;
    min-width: 173px;
    min-height: 42px;
    padding: 5px 20px;
    width: fit-content;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
    font-size: 16px;
    line-height: 14px;
}

.box_btndon .btn_review_maudon {
    border: 1px solid #4C5BD4;
    color: #4C5BD4;
}

.btn_review_maudon:hover {
    color: #FFF;
    background: #4C5BD4;
    transform: scale(1.03) !important;
}

.box_btndon .btn_link_maudon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    border: 1px solid #ff9254;
    background: linear-gradient(270deg, #F88C00 0%, #dd6b4e 100%) !important;
}

.btn_link_maudon:hover {
    color: #FFF;
    background: linear-gradient(270deg, #dd6b4e 0%, #F88C00 100%) !important;
    transform: scale(1.03) !important;
}

.box_datadon {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 6px;
    gap: 5px;
}

.boxNewFree {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px;
    position: absolute;
    top: 0;
    width: 100%;
    padding: 6px;
    z-index: 9;
}
.infoFree {
    background: linear-gradient(81.84deg, #00968b 0, #56ae8b 100%);
    box-shadow: 0 0 4px rgb(0 0 0 / 25%);
    border-radius: 30px;
    padding: 3px 8px;
    font-size: 13px;
    line-height: 15px;
    color: #fff;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
}

.box_content_maudon {
    padding: 10px;
    border-radius: 0px 0px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    border-top: 1px solid #C6C6C6;
}

.name_maudon {
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
    color: #4C5BD4;
    cursor: pointer;
}

.box_nganh {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.tt_danh_muc {
    text-align: center;
    font-size: 28px;
}

.box_ir {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
}

.box_nganh .box_ir a {
    border-radius: 15px;
    background: #ffedd8;
    color: #fd1616;
    display: inline-block;
    font-size: 17px;
    line-height: 34px;
    width: calc((100% - (23px * 3))/4);
    text-align: center;
    height: 36px;
    vertical-align: middle;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    border: 1px dashed #fd1616;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.box_nganh a:hover {
    background: #fd1616;
    color: #fff;
}

.box_hoso {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.box_hoso .box_note {
    border: 1px dashed #555;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 20px;
}

.box_note ul {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.box_infor_hoso, .box_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.box_hoso .box_note li {
    font-size: 16px;
    line-height: 19px;
    color: #515151;
    width: calc((100% - 40px)/3);
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

.box_hoso .box_note li::before {
    content: '\2022';
    color: #0684fe;
    font-weight: 700;
    display: inline-block;
    width: 1em;
}

.box_item {
    display: flex;
    gap: 20px;
}

.item {
    width: calc((100% - 40px)/3);
    display: flex;
}

.box_list .item .hsxv_img {
    width: 100%;
    text-align: center;
}

.item .ir {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.item h3 {
    display: flex;
    justify-content: start;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #ff9408;
    font-family: 'Roboto-Medium';
}

.box_list .ef p {
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #474747;
    text-align: justify;
}

.btn_loadmore_blog, .btn_loadmore_don {
    background: linear-gradient(90deg, #ff685a, #ff7149 29.89%, #ff8426 55.21%, #ff9606);
    border-radius: 30px;
    font-size: 16px;
    line-height: 19px;
    color: #fff;
    text-align: center;
    margin: auto;
    cursor: pointer;
    padding: 10px 25px;
    border: none;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
}

.btn_loadmore_don:hover {
    background: linear-gradient(270deg, #dd6b4e 0%, #F88C00 100%);
    transform: scale(1.04);
    z-index: 1;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: scroll;
}
#popupViewDon .main_popup {
    padding: 15px;
    width: 1000px;
    max-width: 95%;
    height: 950px;
    max-height: calc(100vh - 50px);
    overflow: hidden;
    gap: 10px;
    border-radius: 8px;
    animation: zoom 0.2s ease-in-out;
    display: flex;
    background: #f7f7f7;
    position: relative;
}
.popupViewDon .poup_left {
    width: 64.2%;
    overflow-y: auto;
    position: relative;
    padding: 0;
    margin-top: 10px;
}
.popupViewDon .list_imgdon, .popupViewDon .list_imgdon > * {
    width: 100%;
}
.popupViewDon .plus_zoom_don {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    display: none;
}
#popupViewDon .poup_left {
    background: #FFF;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px;
}
#popupViewDon .poup_right {
    background: #FFF;
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 8px;
}
.popupViewDon .poup_right {
    flex: 1;
    overflow-y: auto;
}
#popupViewDon .form_check {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.popupViewDon .title_maudon {
    font-size: 24px;
    line-height: 30px;
    display: block;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #4c5bd4;
}
#popupViewDon .box_btn_view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#popupViewDon .title_color {
    color: #4a4a4a;
    text-align: justify;
    line-height: 1.5;
    font-size: 18px;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
}
.popupViewDon .list_color_don {
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.popupViewDon .color_don {
    width: 35px;
    height: 35px;
    background-color: currentColor;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
}
#popupViewDon .list_color_don .color_don.active:before {
    content: "";
    background: url(/assets/images/ic_active.png);
    width: 12px;
    height: 11px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.popupViewDon .don-submit {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#popupViewDon .don-submit .add_mau {
    color: #FFF;
    background-color: #4c5bd4;
    padding: 12px 24px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    line-height: 19px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
}
#popupViewDon .don-submit .cancel {
    color: #4c5bd4;
    border: 1px solid #4c5bd4 !important;
    background-color: #FFF;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    line-height: 19px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
}
#popupViewDon .poup_left::-webkit-scrollbar,
#popupViewDon .poup_right::-webkit-scrollbar {
    width: 4px;
    background-color: transparent;
}
#popupViewDon .poup_left::-webkit-scrollbar-thumb,
#popupViewDon .poup_right::-webkit-scrollbar-thumb {
    background: #e5fdff;
    border-radius: 4px;
}
#popupViewDon .poup_left::-webkit-scrollbar-thumb {
    background: #4c5bd4;
}
.popupViewDon .poup_left:hover .plus_zoom_don {
    display: block;
}
#popupViewDon .don-submit .add_mau:hover {
    background-color: #535eb7;
}
.close_popup img {
    cursor: pointer;
}
.popupPreviewDon {
    background: url(/assets/images/bg_zom_cv.png) no-repeat;
    background-size: 100% 100%;
}
.popupPreviewDon .main_popup {
    width: 765px;
    max-width: 80%;
    margin: 0 auto;
    background-color: transparent;
    border-radius: 15px;
    height: 100%;
    margin-top: 6vh;
    position: relative;
}
.popupPreviewDon .close_zoom_don {
    height: 25px;
    width: 25px;
    margin-left: 8px;
    position: absolute;
    cursor: pointer;
    top: 0;
    right: -30px;
    transform: unset;
}
.popupPreviewDon .box_img_don {
    max-height: 95%;
    overflow: auto;
}
.popupPreviewDon .img_zoomdon {
    max-width: 1000px;
    width: 100%;
}
.boxShareDon, 
.boxTinhNang {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.boxMxh {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.btnSaveDon {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}
.txt_TinhNang {
    line-height: 19px;
    font-size: 16px;
    color: #474747;
}
.countColor {
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
    color: #4c5bd4;
}
.addDonAi {
    color: #FFF;
    background-color: #ff9254;
    padding: 12px 24px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    line-height: 19px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    font-weight: 500;
    font-family: Roboto-Medium, sans-serif;
}

@media screen and (max-width: 1024px) {
    .item_maudon {
        width: calc(100% / 3 - 10px);
    }

    .box_hoso .box_note li {
        width: calc((100% - 60px) / 2);
    }
}

@media screen and (max-width: 768px) {
    .item_maudon {
        width: calc(100% / 2 - 8px);
    }

    .box_nganh .box_ir a {
        width: calc((100% - (23px * 2)) / 3);
    }
    .h1_HomeDon {
        font-size: 26px;
        line-height: 32px;
    }

    #popupViewDon > div {
        flex-direction: column;
        overflow-y: auto;
    }
    #popupViewDon > div > * {
        width: 100%;
    }
    #popupViewDon > div > *:nth-child(2) {
        overflow-y: unset;
    }
    #popupViewDon .form_check {
        gap: 5px;
    }
    #popupViewDon .box_btn_view {
        gap: 15px;
    }
    #popupViewDon .cancel {
        margin-top: 10px;
    }
    .popupViewDon .close_ppdon {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .boxContentBlog {
        flex-direction: column;
    }
    
    .boxPhuLuc {
        position: unset;
    }

    .boxPhuLuc, .boxContainBlog, .item_maudon {
        width: 100%;
    }

    .box_nganh .box_ir a {
        width: calc((100% - 23px) / 2);
        font-size: 15px;
    }

    .box_note ul {
        flex-direction: column;
    }

    .box_hoso .box_note li {
        width: 100%;
    }

    .box_item {
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
    .h1_HomeDon {
        font-size: 22px;
        line-height: 30px;
    }
}