#contents{
    background-color: #fff;
    padding: 0;
}

.qj-article{
    background: #fff;
}

.mt-2{
    margin-top: 20px;
}

.mt-3{
    margin-top: 30px;
}

.mt-4{
    margin-top: 40px;
}

.mt-5{
    margin-top: 50px;
}

.mt-6{
    margin-top: 60px;
}

@media only screen and (max-width: 1023px){
    .content_center{
        background-image: url(../../img/mobile/custom/banner-all.png);
        background-repeat: no-repeat;
        background-size: 100% 3400px;
    }

    .c2 .contents_m{
        padding: 0 30px;
    }

    /* #contents .contents_inline .contents_m .contents_box_custom.contents_box_search h2{
        font-size: 32px;
    }

    #contents .contents_inline .contents_m .contents_box_custom.contents_box_search h2::before {
        left: 0px;
        top: 20px;
    }

    #contents .contents_inline .contents_m .contents_box_custom.contents_box_search h2::after {
        left: 30px;
        top: 20px;
    } */
}

@media only screen and (max-width: 393px){
    .content_center{
        background-image: url(../../img/mobile/custom/banner-all.png);
        background-repeat: no-repeat;
        background-size: 100% 3450px;
    }

    .c2 .contents_m{
        padding: 0 30px;
    }
}

@media only screen and (max-width: 380px){
    .content_center{
        background-image: url(../../img/mobile/custom/banner-all.png);
        background-repeat: no-repeat;
        background-size: 100% 3500px;
    }

    .c2 .contents_m{
        padding: 0 30px;
    }
}

@media only screen and (min-width: 330px){
    .contents_inline {
        width: 100%;
    }

    .c2 .contents_m{
        width: 100%;
    }

    #contents .contents_inline .content-button{
        height: 50px;
        width: 280px;
        border-radius: 30px;
        border: none;
        text-align: center;
        background-color: #92cba2;
        color: white;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        position: relative;
    }

    #contents .contents_inline .content-button::before{
        position: absolute;
        content: url('../../img/custom/ic-more-green.png');
        right: 15px;
        top: 17px;
    }

    #contents .contents_inline .contents_m .contents_box_custom h2{
        font-size: 28px;
        font-weight: bold;
        color: #61493e;
        position: relative;
        z-index: 1;
    }

    #contents .contents_inline .contents_m .contents_box_custom h2::before,
    #contents .contents_inline .contents_m .contents_box_custom h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        z-index: -1; /* Place circles behind the text */
    }

    #contents .contents_inline .contents_m .contents_box_custom h2::before {
        background-color: #ffcc80; /* Orange circle */
        left: -5px;
        top: 15px;
    }

    #contents .contents_inline .contents_m .contents_box_custom h2::after {
        background-color: #80c7ff; /* Blue circle */
        left: 25px;
        top: 15px;
    }

    #contents .contents_inline .contents_m .contents_box_custom h3{
        border-left: none;
        font-size: 20px;
        padding: 0;
        margin: 0;
        color: #61493e;
    }

    #contents .contents_inline .contents_m .new_job{
        padding-top: 55px;
    }

    #contents .contents_inline .contents_m .new_job .body{
        overflow: auto;
    }

    /* Tùy chỉnh thanh cuộn ngang */
    #contents .contents_inline .contents_m .new_job .body::-webkit-scrollbar {
        height: 25px; 
    }

    #contents .contents_inline .contents_m .new_job .body::-webkit-scrollbar-track {
        background: #e6e6e6; 
        border-radius: 25px;
    }

    #contents .contents_inline .contents_m .new_job .body::-webkit-scrollbar-thumb {
        background: #b3b3b3;
        border-radius: 20px; 
        border: 6px solid #e6e6e6; 
        box-sizing: border-box; 
    }

    #contents .contents_inline .contents_m .new_job .body::-webkit-scrollbar-thumb:hover {
        background: #999; 
    }

    #contents .contents_inline .contents_m .new_job table{
        table-layout: fixed;
        width: 100%
    }

    #contents .contents_inline .contents_m .new_job table tr th:first-child{
        border-radius: 10px 0 0 0;
        border: none;
    }

    #contents .contents_inline .contents_m .new_job table tr th:last-child{
        border-radius: 0 10px 0 0;
        border: none;
    }

    #contents .contents_inline .contents_m .new_job table tr th{
        background-color: #da6d8a;
        color: white;
        text-align: center;
        height: 60px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        width: 130px;
    }

    #contents .contents_inline .contents_m .new_job table tr td{
        font-size: 12px;
        text-align: center;
        background-color: transparent;
        height: 60px;
        font-weight: 600;
        background-color: #fff;
    }

    #contents .contents_inline .contents_m .new_job table tr:nth-child(odd) {
        background-color: #fbf7f6; 
    }

    #contents .contents_inline .view-more{
        display: none;
    }

    #contents .contents_inline .contents_m .contents_box_search{
        background-color:  #fbf7f6;
        padding: 60px 15px;
        margin-top: 95px;
    }

    #contents .contents_inline .contents_m .contents_box_search .body {
        margin-top: 50px;
    }

    #contents .contents_inline .contents_m .contents_box_search #search{
        display: flex;
        gap: 30px;
        flex-direction: column;
        align-items: center;
    }
    
    #contents .contents_inline .contents_m .contents_box_search #search span{
        font-size: 18px;
        font-weight: 600;
        color: #61493e;
    }
    
    #contents .contents_inline .contents_m .contents_box_search #search label{
        display: block;
        width: 100%;
    }

    #contents .contents_inline .contents_m .contents_box_search #search input[name="free"]{
        height: 60px;
        border-radius: 7px;
        width: 100%;
        margin-top: 15px;
    }

    .line {
        margin-top: 10px;
        height: 12px;
        background: radial-gradient(1px 3px, #f3cdd8 80%, transparent 80%) 0 0 / 6px 100%;
    }

    #contents .contents_inline .contents_m .new_job_tokyo{
        margin-top: 110px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content{
        display: flex;
        flex-wrap: wrap;
        gap: 10px 5px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content p{
        flex-grow: 1;
        width: calc(33% - 5px);
        max-width: calc(33% - 5px);
        font-size: 12px;
        padding: 10px 5px;
        display: flex;
        justify-content: space-between;
        background-color: #fbf7f6;
        border-radius: 15px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(22){
        width: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(23){
        width: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(24){
        width: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(25){
        width: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(26){
        width: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(27){
        width: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    #contents .contents_inline .contents_m .job_tokyo_content span{
        padding: 1px 4px 1px 5px;
        background-color: #da6d8a;
        border-radius: 50%;
        letter-spacing: 0;
    }

    #contents .contents_inline .contents_m .job_tokyo_content span i{
        font-size: 12px;
        color: white;
    }

    .qj-article.article-pc{
        display: none;
    }

    .qj-article.article-mb{
        display: block;
    }

    .qj-article{
        background: transparent;
        height: auto;
        padding: 0 20px;
    }

    .qj-article .qj-article__ {
        padding: 0 0 75px;
        width: 100%;
    }
    
    .qj-article .qj-article__des__title{
        font-size: 28px;
        color: #61493e;
        position: relative;
        z-index: 1;
        margin: 80px 0 0 0;
        text-align: left;
    }

    .embed-articleListHorizntal--separate{
        margin-left: 0;
        margin-right: 0;
    }
    
    .qj-article .qj-article__des__title::before,
    .qj-article .qj-article__des__title::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        z-index: -1; /* Place circles behind the text */
    }
    
    .qj-article .qj-article__des__title::before {
        background-color: #ffcc80; /* Orange circle */
        left: -5px;
        top: 15px;
    }
    
    .qj-article .qj-article__des__title::after {
        background-color: #80c7ff; /* Blue circle */
        left: 25px;
        top: 15px;
    }
    
    .qj-article .embed-articleListHorizntal{
        flex-direction: column;
        gap: 25px;
    }
    
    .qj-article .embed-articleListHorizntal .qj-linkBtn{
        margin-top: 60px;
        border-radius: 30px;
        border: none;
        text-align: center;
        padding: 20px 100px;
        background-color: #92cba2;
        color: white;
        font-size: 16px;
        font-weight: 600;
        position: relative;
    }

    .qj-article .embed-articleListHorizntal .qj-linkBtn::before{
        position: absolute;
        content: url('../../img/custom/ic-more-green.png');
        right: 15px;
        top: 3px;
    }
    
    .qj-article .embed-articleListHorizntal .article-item{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        padding: 0;
        background: #fff;
        border-radius: 10px;
        padding: 15px 25px;
    }
    
    .qj-article .embed-articleListHorizntal .article-item p{
        font-size: 14px;
    }
    
    .qj-article .embed-articleListHorizntal .article-item a{
        text-decoration: none;
    }

    .qj-article .embed-articleListHorizntal .article-item .href-article-title{
        width: 100%;
    }
    
    .qj-article .embed-articleListHorizntal .article-item .article-category{
        padding: 2px 15px;
        background-color: #da6d8a;
        color: white;
        border-radius: 10px;
    }

    .qj-article .embed-articleListHorizntal .article-item .article-regist{
        white-space: nowrap;
    }
}

@media only screen and (min-width: 700px){

}

@media only screen and (min-width: 1024px){
    .content_center{
        padding: 0;
    }

    #contents .easySearchForm{
        margin: 0;
    }

    .contents_inline {
        width: 1020px;
    }

    .c2 .contents_m {
        width: 750px;
    }
    
    #contents .content_center{
        background-image: url('../../img/custom/background-image-content.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position: center top;
    }
    
    .content-footer{
        background-image: url('../../img/custom/background-image-article.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position: center top;
    }
    
    #contents .contents_inline .content-button{
        height: 60px;
        width: 250px;
    }

    #contents .contents_inline .content-button::before{
        right: 15px;
        top: 25px;
    }

    #contents .contents_inline .view-more{
        display: block;
        margin-top: 48px;
        text-align: right;
    }

    #contents .contents_inline .contents_m .contents_box_custom h2{
        font-size: 36px;
    }

    #contents .contents_inline .contents_m .contents_box_custom h2::before,
    #contents .contents_inline .contents_m .contents_box_custom h2::after {
        width: 40px;
        height: 40px;
    }

    #contents .contents_inline .contents_m .contents_box_custom h2::before {
      left: 0px;
      top: 20px;
    }

    #contents .contents_inline .contents_m .contents_box_custom h2::after {
      left: 35px;
      top: 20px;
    }

    #contents .contents_inline .contents_m .contents_box_custom h3{
        font-size: 24px;
    }

    .line {
        margin-top: 10px;
        height: 12px;
        background: radial-gradient(1px 3px, #f3cdd8 80%, transparent 80%) 0 0 / 6px 100%;
    }

    #contents .contents_inline .contents_m .contents_box_search{
        padding: 60px 60px;
        margin-top: 75px;
    }
   
    #contents .contents_inline .contents_m .contents_box_search h2{
        font-size: 36px;
    }
    
    #contents .contents_inline .contents_m .contents_box_search #search{
        gap: 20px;
        align-items: end;
    }
        
    #contents .contents_inline .contents_m .contents_box_search #search label{
        display: flex;
        flex-direction: row;
        gap: 30px;
        align-items: center;
        width: 100%;
    }

    #contents .contents_inline .contents_m .contents_box_search #search input[name="free"]{
        flex: 1;
        margin-top: 0px;
    }

    #contents .contents_inline .contents_m .new_job{
        padding-top: 80px;
    }

    #contents .contents_inline .contents_m .new_job table tr th{
        width: 90px;
    }

    #contents .contents_inline .contents_m .new_job table tr td{
        font-size: 14px;
        height: 55px;
    }

    #contents .contents_inline .contents_m .new_job_tokyo{
        margin-top: 70px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content{
        display: flex;
        flex-wrap: wrap;
        gap: 11.4px;
        margin-top: 20px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content p{
        flex-grow: 1;
        flex-basis: 177px;
        max-width: 177px;
        font-size: 14px;
        padding: 14.5px 20px;
        font-weight: bold;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(22){
        flex-basis: 177px;
        max-width: 177px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(23){
        flex-basis: 177px;
        max-width: 177px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(24){
        flex-basis: 177px;
        max-width: 177px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(25){
        flex-basis: 177px;
        max-width: 177px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(26){
        flex-basis: 177px;
        max-width: 177px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(27){
        flex-basis: 177px;
        max-width: 177px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content span{
        padding: 2px 5px 2px 7px;
        background-color: #da6d8a;
        border-radius: 50%;
    }

    #contents .contents_inline .contents_m .job_tokyo_content span i{
        font-size: 14px;
        color: white;
    }

    .qj-article.article-pc{
        display: block;
    }

    .qj-article.article-mb{
        display: none;
    }

    .qj-article{
        background: transparent;
        height: 565px;
    }

    .qj-article .qj-article__ {
        padding: 0 0 75px;
        width: 1020px;
    }
    
    .qj-article .qj-article__des__title{
        font-size: 36px;
        color: #61493e;
        position: relative;
        z-index: 1;
        margin: 80px 0 0 0;
        text-align: center;
    }
    
    .qj-article .qj-article__des__title::before,
    .qj-article .qj-article__des__title::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        z-index: -1; /* Place circles behind the text */
    }
    
    .qj-article .qj-article__des__title::before {
        left: 47%;
        top: 20px;
    }
    
    .qj-article .qj-article__des__title::after {
        left: 50.5%;
        top: 20px;
    }
    
    .qj-article .embed-articleListHorizntal{
        flex-direction: column;
        gap: 15px;
    }
    
    .qj-article .embed-articleListHorizntal .qj-linkBtn{
        margin-top: 60px;
        border-radius: 30px;
        border: none;
        text-align: center;
        padding: 20px 120px;
        background-color: #92cba2;
        color: white;
        font-size: 16px;
        font-weight: 600;
        position: relative;
    }
    
    .qj-article .embed-articleListHorizntal .article-item{
        padding: 15px 25px;
    }

    .qj-article .embed-articleListHorizntal .article-item .href-article-title{
        width: auto;
    }
}

@media only screen and (min-width: 1400px){
    #contents .content_center{
        background-size: auto;
        height: 2579px;
    }

    .content-footer{
        background-size: auto;
    }

    #contents .contents_inline {
        width: 1400px;
    }

    #contents .contents_inline .contents_m{
        width: 1010px;
    }

    #contents .contents_inline .content-button{
        height: 60px;
        width: 310px;
    }

    #contents .contents_inline .contents_m .new_job table tr th{
        width: 120px;
        font-size: 14px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content{
        gap: 10px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content p{
        flex-basis: 245px;
        max-width: 245px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(22){
        flex-basis: 245px;
        max-width: 245px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(23){
        flex-basis: 245px;
        max-width: 245px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(24){
        flex-basis: 245px;
        max-width: 245px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(25){
        flex-basis: 245px;
        max-width: 245px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(26){
        flex-basis: 245px;
        max-width: 245px;
    }

    #contents .contents_inline .contents_m .job_tokyo_content.job_tokyo_content_sub p:nth-child(27){
        flex-basis: 245px;
        max-width: 245px;
    }
}