header {
    position: relative;
}

section {
    padding-left: 40px;
    padding-right: 40px;
}

.opportunity-list:hover .opportunity-item {
    opacity: 0.5;
}

    .opportunity-list:hover .opportunity-item:hover {
        opacity: 1;
    }

.border-rtl{
    opacity:1 !important;
}
.border-ltr {
    opacity: 1 !important;
}

.the-last-border {
    margin-top: 30px;
}

.recruitment-wrapper {
    overflow: hidden;
}

    .recruitment-wrapper h1 {
        padding: 98px 0 76px 0;
    }

    .recruitment-wrapper h2 {
        padding: 121px 0 0;
        color: var(--black-color);
    }
.banner > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.btn-readmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 28px;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    padding: 6px 20px 6px 20px;
    width: fit-content;
    margin: 65px 0px 117px 0px;
    background: url("/assets/img/Careers/border.png") center no-repeat;
    background-size: 100% 100%;
}

    .btn-readmore svg {
        width: 14px;
        transition: .3s;
    }

    .btn-readmore:hover svg {
        transform: rotate(45deg);
        transition: .3s;
        margin-left: 10px;
    }


.banner {
    position: relative;
    overflow: hidden;

    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 43px 47px;
    min-height: 760px;
}

    .banner img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

.banner-multi-layers {
    position: absolute;
    right: 105px;
    bottom: 105px;
    width: 697px;
}

.banner-description {
    background-image: url("/assets/img/Careers/Vector-118-5-1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
    padding: 33px 15px 15px 0133px;
    color: var(--white-color);
    font-size: 28px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 48px;
    text-transform: uppercase;
}

.banner-group-img {
    position: absolute;
    top: 52px;
    left: 0;
    display: flex;
    align-items: center;
}

    .banner-group-img img:first-child {
        width: 167px;
        height: 192px;
        z-index: 1;
        left: -60px;
        position: absolute;
    }

    .banner-group-img img:last-child {
        width: 38px;
        height: 192px;
        z-index: 3;
        position: absolute;
        left: 70px;
    }

.coteccons-logo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 106px;
    height: auto;
}

    .coteccons-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.description {
    margin-top: 48px;
    margin-bottom: 33px;
}

    .description .description-content {
        font-size: 22px;
        font-weight: 300;
        line-height: 42px;
        width: 50%;
    }

.box-image {
    margin-top: 45px;
    margin-bottom: 33px;
}

    .box-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center center;
        position: relative;
        z-index: 2;
    }

        .box-image img.small-img {
            width: 314px;
            height: 356px;
            float: left;
            margin-left: 35px;
            transition: 1s;
        }

            .box-image img.small-img:hover {
                transition: 1s;
                transform: scale(1.05) !important;
            }

    .box-image .content-multi-layers {
        position: absolute;
        left: 12px;
        bottom: -12px;
    }

        .box-image .content-multi-layers img:first-child {
            width: 183px;
            height: 330px;
            z-index: 3;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .box-image .content-multi-layers img:last-child {
            width: 433px;
            height: 329px;
            z-index: 1;
            position: absolute;
            left: 0;
            bottom: 0;
        }


.section-building-feaure {
    background-image: url('/assets/img/Careers/Group-15266.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-left: 40px;
    padding-right: 0px;
}

    .section-building-feaure .section-building-feaure-content {
        min-height: 100vh;
    }

        .section-building-feaure .section-building-feaure-content .section-building-feaure-top {
            min-height: calc((100vh) * 0.8073);
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 6.12% 21.31% 5.83% 8.7% 10.55% 13.27% 12.54% 11.06% 10.62%;
            grid-template-rows: 19.27% 6.88% 19.88% 27.06% 26.91%;
            grid-gap: 0px;
        }

    .section-building-feaure [class^="item"] {
        width: 100%;
        height: 100%;
        position: relative;
        opacity: 1!important;
    }
    .section-building-feaure [class^="item"] img {
        width: 100%;
        height: 100%;
        position: relative;
        opacity: 1 !important;
        position: absolute
    }
        .section-building-feaure [class^="item"] .image-building-feature {

            height: 100%;
            position: relative;
            opacity: 1 !important;

        }
    .section-building-feaure .item1 {
        background-color: #4CB3F8;
        grid-column: 7 / 8;
        grid-row: 1 / 3;
    }

    .section-building-feaure .item2 {
        background-image: url('/assets/img/Careers/Rectangle-369.png');
        grid-column: 5 / 7;
        grid-row: 2 / 4;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        border-color: #EF8563;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .section-building-feaure [class^="item"] .content {
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        color: #FFFFFF;
    }

    .section-building-feaure [class^="item"] .item-counter {
        font-family: "Raleway", Sans-serif;
        font-size: 6vw;
        font-weight: 600;
        line-height: 1em;
        height: fit-content;
        gap: 5px;
        
    }

    .section-building-feaure [class^="item"] .item-unit {
        font-family: "Lexend Deca", Sans-serif;
        font-size: 14px;
        font-weight: 300;
        text-transform: uppercase;
        line-height: 14px;
        height: fit-content;
    }

    .section-building-feaure .item3 {
        grid-column: 7 / 10;
        grid-row: 3 / 5;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        background-color: #F5BA42;
        position: relative; 
        overflow: hidden;
    }

        .section-building-feaure .item3 img {
            position: absolute;
            width: 100%; 
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: contain;
        }

    .section-building-feaure .item4 {
        background-color: #E86042;
        grid-column: 6 / 7;
        grid-row: 4 / 5;
    }

    .section-building-feaure .item5 {
        grid-column: 4 / 6;
        grid-row: 4 / 6;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-color: #E96042;
    }

    .section-building-feaure .item6 {
        grid-column: 7 / 9;
        grid-row: 5 / 6;
        background-color: #00BBB4;
        position: relative;
        overflow: hidden;
        background-image: url('/assets/img/Careers/Group-16111.png');
    }

        .section-building-feaure .item6 .background-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }


    .section-building-feaure .item7 {
        grid-column: 6 / 7;
        grid-row: 5 / 6;
        background-image: url('/assets/img/Careers/Group-15290.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .section-building-feaure .item8 {
        grid-column: 2 / 4;
        grid-row: 5 / 6;
        background-image: url('/assets/img/Careers/Rectangle-391.png');
        background-size: 100% 100%;
    }

    .section-building-feaure .item9 {
        grid-column: 1 / 4;
        grid-row: 1 / 4;
    }

        .section-building-feaure .item9 img {
            margin: 15% 0% 0% 0%;
        }

        .section-building-feaure .item9 div {
            color: #8FF9A7;
            font-size: 4.5rem;
            font-weight: 700;
        }

    .section-building-feaure .section-building-feaure-content .section-building-feaure-bottom {
        min-height: calc((100vh)*0.1927);
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 6.12% 21.31% 5.83% 8.7% 10.55% 13.27% 12.54% 11.06% 10.62%;
        grid-template-rows: 100%;
        grid-gap: 0px;
    }

    .section-building-feaure .item10 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
/*        background-image: url('https://www.coteccons.vn/wp-content/uploads/2022/09/image-117-1-scaled-e1664260237443.jpg');
        background-position: center center;*/
        background-repeat: no-repeat;
        background-size: 100% 100% !important;
    }

    .section-building-feaure .item11 {
        background-color: #29C66F;
        grid-column: 3 / 5;
        grid-row: 1 / 2;
    }

    .section-building-feaure .item12 {
        background-color: #264ABC;
        grid-column: 5 / 7;
        grid-row: 1 / 2;
    }

    .section-building-feaure .logo {
        grid-column: 7 / 10;
        grid-row: 1 / 2;
    }

    .section-building-feaure .logo img {

        width: 80%;
    }

.opportunity h2 {
    padding-bottom: 43px;
}

.opportunity-list {
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.opportunity-item {
    padding: 20px 0px 20px 0px;
    display: flex;
    position: relative;
    align-items: center;
    transition: opacity 0.5s ease;
}

    .opportunity-item .id {
        width: 10%;
        line-height: 1.3em;
        font-size: 16px;
        font-weight: 300;
        color: var(--black-color);
    }

    .opportunity-item .title {
        width: 49.985%;
        font-size: 20px;
        font-weight: 500;
        line-height: 32px;
    }

    .opportunity-item .date-and-location {
        font-size: 14px;
        font-weight: 300;
        line-height: 24px;
        width: 37.015%;
        display: flex;
        align-items: center;
        gap: 161px;
    }

    .opportunity-item .btn-apply {
        width: 2.981%;
        color: #1B1B1B00;
        border-color: #1B1B1B00;
        padding: 0;
        text-align: right;
    }

        .opportunity-item .btn-apply svg {
            width: 16px;
            height: 16px;
        }


.application-form {
    background-color: #F5BA42;
    padding: 82px 0px 074px 0px;
}

.application-form-content {
    width: 664px;
    margin: auto;
    max-width: 90%;
}

    .application-form .application-form-content h2 {
        font-size: 54px;
        font-weight: 300;
        text-transform: uppercase;
        line-height: 65px;
        margin-bottom: 16px;
        color: white;
    }

    .application-form .application-form-content form {
        display: flex;
        flex-direction: column;
        gap: 21px;
    }

.application-form-content form .form-item {
    width: 100%;
    display: flex;
    align-items: center;
}

@media (max-width: 575px) {
    .application-form-content form .form-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.application-form .form-item label {
    color: white;
    line-height: 1.4em;
    font-weight: 300;
}

@media (min-width: 576px) {
    .application-form .form-item label {
        min-width: 180px;
    }
}

.application-form .form-item label[for="firstName"],
.application-form .form-item label[for="lastName"],
.application-form .form-item label[for="email"],
.application-form .form-item label[for="phone"],
.application-form .form-item label[for="resume"],
.application-form .form-item label[for="resumeFile"],
.application-form .form-item label[for="jobPosition"],
.application-form .form-item label[for="jobPositionOther"],
.application-form .form-item label[for="content"] {
    text-transform: uppercase;
}

.application-form .form-item.required label::after {
    content: "*";
    color: #B86054;
    margin-left: 0.5rem;
}

.application-form .form-item input,
.application-form .form-item select,
.application-form .form-item textarea {
    width: 100%;
    background-color: #FFFFFF59;
    color: var(--gray-1);
    height: 40px;
    border: unset;
    outline: unset;
}

/* Select (Vị trí ứng tuyển): quy tắc chung ở trên đã cho cùng nền hổ phách mờ với các ô nhập;
   giữ nguyên mũi tên mặc định của trình duyệt (không đặt appearance: none — bỏ mũi tên thì
   phải tự vẽ lại bằng ảnh nền, thêm nợ bảo trì mà không được gì).
   Riêng danh sách option khi bung ra do HĐH vẽ nền trắng — đặt màu chữ đậm để đọc được,
   thay vì kế thừa màu nhạt của ô đang đóng. */
.application-form .form-item select option {
    color: #1B1B1B;
    background-color: #FFFFFF;
}

    .application-form .form-item input#resume {
        /* background-color: transparent !important;
        padding-left: 0 !important; */
    }

    .application-form .form-item input#resume::placeholder {
        color: #1B1B1B !important;
        opacity: 0.6;
    }

.application-form .form-item textarea {
    height: auto;
}

.application-form .btn-submit-career {
    background: url("/assets/img/Careers/border.png") center no-repeat !important;
    background-size: 100% 100% !important;
    margin: 0;
    border: none !important;
    color: #1B1B1B !important;
}

@media (min-width: 576px) {
    .application-form .btn-submit-career {
        margin-left: 180px;
    }
}

@media (max-width: 1024px) {
    .description .description-content {
        width: 86%;
    }

    .box-image img.small-img {
        width: 80%;
        max-width: 100%;
        height: 270px;
    }

    .box-image .content-multi-layers {
        zoom: 0.8;
        bottom: -30px;
    }

    .opportunity-list {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        align-items: start;
    }

    .opportunity-item .date-and-location {
        flex-flow: column;
        gap: 0;
        align-items: start;
    }
}

@media (max-width: 768px) {

    .banner-multi-layers {
        width: 55%;
    }
    .banner img {
        height: 100%;
        object-position: 38% center;
    }
    .banner {
        min-height: 512px;
    }

    .banner-description {
        font-size: 18px;
        line-height: 22px;
    }

    .section-building-feaure {
        overflow: hidden;
        padding: 0;
    }

        .section-building-feaure .section-building-feaure-content .section-building-feaure-top {
            grid-template-columns: 12% 13% 25% 13% 37%;
            grid-template-rows: 20% 15% 5% 20% 20% 20%;
            grid-template-areas:
                "l01 l02 l02 l02 l03"
                "l04 l04 l04 l05 l03"
                "l04 l04 l04 l05 l03"
                "l06 l06 l06 l07 l07"
                "l08 l08 l09 l07 l07"
                "l08 l08 l10 l11 l11";
        }

        .section-building-feaure .item1 {
            grid-area: l05;
        }

        .section-building-feaure .item8 {
            grid-area: l02;
        }

        .section-building-feaure .item4 {
            grid-area: l10;
        }

        .section-building-feaure .item5 {
            grid-area: l03;
        }

        .section-building-feaure .item6 {
            grid-area: l11;
        }

        .section-building-feaure .item7 {
            grid-area: l09;
        }

        .section-building-feaure .item9 div {
            margin-top: -4rem;
            font-size: 3.5rem;
            line-height: 5rem;
            padding: 0 1rem;
        }

        .section-building-feaure .item9 img {
            width: 50%;
            margin: 3rem 0 1rem 1rem !important;
        }

        .section-building-feaure .item10 {
            grid-area: l04;
        }

        .section-building-feaure .item2 {
            grid-area: l06;
        }

        .section-building-feaure .item3 {
            grid-area: l07;
        }

        .section-building-feaure .item14 {
            grid-area: l08;
            background-image: url('/assets/img/Careers/Frame-16019.jpg');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100% !important;
        }

        .section-building-feaure .section-building-feaure-content .section-building-feaure-bottom {
            display: flex;
        }

        .section-building-feaure .item13 img {
            object-fit: scale-down;
        }

        .section-building-feaure [class^="item"] .item-counter {
            font-size: 4rem;
        }

        .section-building-feaure [class^="item"] .item-unit {
            font-size: 0.6rem;
        }
}

@media (max-width: 430px) {
    section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .banner-description {
        font-size: 18px;
        line-height: 22px;
        padding: 18px 0px 30px 80px;
    }

    .recruitment-wrapper h1 {
        font-size: 38px;
        line-height: 65px;
        padding: 76px 0px 16px 0px;
    }
    .coteccons-logo {
        left: 0;
    }
    .recruitment-wrapper h2 {
        font-size: 40px !important;
    }

    .opportunity-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .coteccons-logo {
        width: 50px;
        height: 50px;
    }

    .banner-multi-layers {
        right: 50px;
        bottom: 50px;
        width: 77vw;
    }

    .banner-group-img {
        zoom: 0.6;
    }

    .description .description-content {
        font-size: 20px;
        line-height: 32px;
        width: 100%;
    }

    .box-image img.small-img {
        margin-bottom: 100px;
    }

    .box-image .content-multi-layers {
        margin: 0 0 50px 20px;
    }

    .opportunity-item .date-and-location,
    .opportunity-item .btn-apply {
        display: none;
    }

    .opportunity-item .title {
        width: 90%;
    }
}
/* ── Phân trang danh sách tuyển dụng ── */
.recruitment-wrapper .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0;
}

.recruitment-wrapper .pagination #pagination__career {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Nút phân trang là <button> để bấm được bằng bàn phím — gỡ style mặc định của trình duyệt. */
.recruitment-wrapper .pagination .pagination__item {
    width: 40px;
    height: 36px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: 0;
    font: inherit;
    color: var(--black-color);
}

.recruitment-wrapper .pagination .pagination__item.active,
.recruitment-wrapper .pagination .pagination__item:hover {
    color: var(--blue-vibrant1-500);
}

.recruitment-wrapper .pagination .pagination__item:focus-visible {
    outline: 2px solid var(--blue-vibrant1-500);
    outline-offset: 2px;
}

.recruitment-wrapper .pagination .pagination__item.disabled {
    color: #A2A09E;
    pointer-events: none;
}

/* Nút Trang trước / Trang kế có chữ nên rộng theo nội dung. */
.recruitment-wrapper .pagination .pagination__item.prev,
.recruitment-wrapper .pagination .pagination__item.next {
    width: auto;
    padding: 6px 16px;
    gap: 8px;
    font-weight: 600;
}

.recruitment-wrapper .pagination .pagination__ellipsis {
    color: #A2A09E;
    padding: 0 4px;
    user-select: none;
}

/* ===================================================================
   Ô "Hồ sơ (CV)" — wrapper tự dựng thay cho nút "Chọn tệp" của trình duyệt (#124)
   ===================================================================
   Vì sao phải lặp lại bộ thuộc tính của ô nhập: luật ở trên viết theo THẺ
   (.application-form .form-item input/select/textarea) nên không với tới <div>
   này. Không lặp thì ô CV rơi về mặc định của trình duyệt — nền trắng đục,
   viền xám — nằm giữa một hàng ô trong suốt không viền của nền hổ phách.

   Toàn bộ phần này trước đây là style NỘI TUYẾN trong Razor (52 khai báo).
   Inline luôn thắng stylesheet, nên không luật nào của trang chỉnh lại được,
   kể cả luật responsive bên dưới. */
.application-form .form-item .custom-file-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0;
    /* width:100% là BẮT BUỘC, không thừa: dưới 576px .form-item đổi sang
       flex-direction:column làm .flex-fill mất tác dụng, ô CV co lại bằng bề
       rộng nội dung trong khi mọi ô khác vẫn tràn hàng. */
    width: 100%;
    height: 40px;
    background-color: #FFFFFF59;
    color: var(--gray-1);
    border: unset;
    outline: unset;
}

    .application-form .form-item .custom-file-wrapper input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* Giấu input gốc: đây chính là cách thoát khỏi việc trình duyệt vẽ nhãn
           nút theo ngôn ngữ MÁY thay vì ngôn ngữ TRANG. */
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .application-form .form-item .custom-file-wrapper .btn-choose-file {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 15px;
        background-color: #FFFFFF8C;
        border-right: 1px solid #FFFFFF8C;
        white-space: nowrap;
        z-index: 1;
    }

    .application-form .form-item .custom-file-wrapper .js-file-name {
        padding-left: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 1;
    }

    /* Input bị giấu bằng opacity:0 nên vòng focus do trình duyệt vẽ cũng vô hình.
       Không có luật này thì người đi bằng Tab mất dấu hoàn toàn khi tới ô CV —
       bước lùi so với trước khi giấu input. */
    .application-form .form-item .custom-file-wrapper:focus-within {
        outline: 2px solid var(--href-color);
        outline-offset: 2px;
    }