/* ==========================================================================
   TRANG TUYEN DUNG (/tuyen-dung)
   Tach rieng file thay vi nhoi vao micfood.css — file do dang la cho hai may
   cung them block vao cuoi, da hai lan gay xung dot git kho go.

   Ban dau trang dung lai .mf-section/.mf-item san co, nhung ket qua qua nhat:
   ca trang chi co DUNG 1 anh (banner), hon 85% chieu cao la chu den tren nen
   trang, mau thuong hieu chiem chua toi 3% dien tich, va khoi CTA cuoi trang
   nhe hon ca phan noi dung o tren. File nay dung lai theo huong: hero manh co
   anh that + CTA, dai 3 anh thuc te, va dai dong xanh thuong hieu o cuoi.
   ========================================================================== */

:root {
    --td-blue: #1876BC;
    --td-blue-deep: #0E4E80;
    --td-navy: #236598;
    --td-green: #6CBE45;
    --td-ink: #1F2933;
}

/* --------------------------------------------------------------- HERO --- */
.td-hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0;
    min-height: 32rem;
    display: flex;
    align-items: center;
}
.td-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
}
/* Lop phu CHEO theo mau thuong hieu thay vi mot mang den phu deu: ben trai
   du toi de chu trang doc ro, ben phai trong dan de con nhin thay vung nuoi. */
.td-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(14, 78, 128, .92) 0%,
        rgba(24, 118, 188, .72) 42%,
        rgba(24, 118, 188, .30) 72%,
        rgba(24, 118, 188, .12) 100%);
}
.td-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.25fr .85fr;
    gap: 3rem;
    align-items: center;
}
.td-hero__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 1rem;
}
/* Pill ten vi tri — lay y tu poster: ten vi tri duoc doi xu nhu mot nhan
   thuong hieu chu khong phai mot dong tieu de thuong. */
.td-hero__pill {
    display: inline-block;
    background: var(--td-green);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    padding: .65rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 .5rem 1.25rem rgba(108, 190, 69, .35);
    margin: 0 0 1.25rem;
}
.td-hero__title {
    font-family: 'SVN-Gotham', sans-serif;
    font-size: clamp(2.25rem, 4.2vw, 3.6rem);
    font-weight: 700;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.td-hero__desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    max-width: 34rem;
    margin: 0 0 2rem;
}
.td-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}
.td-hero__photo {
    margin: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(4, 26, 45, .35);
}
.td-hero__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --------------------------------------------------------------- NUT ---- */
.td-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.75rem;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.td-btn:hover {
    transform: translateY(-2px);
}
.td-btn--green {
    background: var(--td-green);
    color: #fff;
    box-shadow: 0 .4rem 1rem rgba(108, 190, 69, .3);
}
.td-btn--green:hover {
    color: #fff;
    box-shadow: 0 .6rem 1.4rem rgba(108, 190, 69, .42);
}
/* Nut phu tren anh: vien TRANG DAC 2px. Ban truoc dung vien xam nhat 1px nen
   gan nhu vo hinh. */
.td-btn--ghost {
    background: rgba(255, 255, 255, .08);
    border: 2px solid #fff;
    color: #fff;
}
.td-btn--ghost:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.td-btn--ghost-light {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .85);
    color: #fff;
}
.td-btn--ghost-light:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ------------------------------------------------------- CHU DUNG CHUNG - */
.td-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--td-blue);
    margin: 0 0 .65rem;
}
.td-eyebrow--light {
    color: rgba(255, 255, 255, .85);
}
.td-h2 {
    font-family: 'SVN-Gotham', sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 500;
    color: #000;
    margin: 0 0 .85rem;
    text-wrap: balance;
}
.td-h2--light {
    color: #fff;
}
.td-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: #5B6B7A;
    margin: 0;
    max-width: 44rem;
}
.td-lead--light {
    color: rgba(255, 255, 255, .88);
}

/* ------------------------------------------------------------- GIOI THIEU */
.td-intro {
    padding: 5.5rem 0;
}
.td-intro__inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 4rem;
    /* "start" chu khong phai "center": ba so lieu chi cao ~76px, canh giua mot
       cot chu cao ~190px thi chung lo lung giua khoang trong, tren va duoi deu
       ho ~57px. Neo len dau roi de danh sach tu keo dai cho can voi cot chu. */
    align-items: start;
}
.td-stats {
    /* Xep DOC thay vi dan ngang 3 o: dan ngang thi moi o chi rong ~171px voi
       chu nho, nam lot giua 545px nen nhin loang va troi noi. Xep doc thanh
       bang so lieu, cao gan bang cot chu ben trai nen hai cot can nhau. */
    margin: 0;
    padding: 0;
    list-style: none;
    /* Nhich xuong cho bang dong "Về chúng tôi" o cot trai, de con so dau tien
       thang hang voi tieu de chu khong phai voi dong nhan nho. */
    margin-top: 1.7rem;
    border-top: 3px solid var(--td-green);
}
.td-stats > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .95rem 0;
    border-bottom: 1px solid #E3E8EC;
}
.td-stats > li:last-child {
    border-bottom: none;
}
.td-stats strong {
    font-family: 'SVN-Gotham', sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--td-blue);
    line-height: 1.2;
    white-space: nowrap;
}
.td-stats span {
    font-size: .875rem;
    line-height: 1.45;
    color: #5B6B7A;
    text-align: right;
}

/* ------------------------------------------------------------ MO TA VIEC */
.td-job {
    padding: 5.5rem 0;
    background: #F3F8F1;
}
.td-job__head {
    text-align: center;
    margin-bottom: 2.75rem;
}
.td-job__head .td-lead {
    margin-left: auto;
    margin-right: auto;
}
/* MOT bang trang chia doi bang duong ke doc, khong phai hai the roi.
   Hai the roi thi hai cot bi ep cao bang nhau (400px) trong khi cot trai chi
   co 3 gach dau dong -> tho ra 123px trong o day, nhin nhu the bi rong mot
   nua; cot phai 4 dong chi tho 32px. Da thu align-items:start cho moi the cao
   theo noi dung nhung day lech 55px lai nhin nhu loi can chinh.
   Gop thanh mot bang thi cot ngan hon chi la khoang trang cuoi cot — chuyen
   binh thuong cua bo cuc hai cot — chu khong con la mot cai hop rong. */
.td-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 .6rem 1.9rem rgba(16, 58, 92, .08);
    overflow: hidden;
}
.td-card {
    padding: 2.5rem 2.6rem;
}
.td-card + .td-card {
    border-left: 1px solid #E6EDE4;
}
/* Icon nam NGANG voi tieu de thay vi mot minh mot dong: bo duoc ~70px chieu
   cao chet o dau moi cot va cho cum tieu de mot hinh khoi ro rang. */
.td-card__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.6rem;
}
.td-card__icon {
    flex: none;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    /* Nen DAC mau thuong hieu, icon trang — ban truoc dung nen mo 10% nen
       icon chi con la mot vet xam, khong dong gop gi ve mat nghia. */
    background: var(--td-blue);
    color: #fff;
    box-shadow: 0 .35rem .9rem rgba(24, 118, 188, .28);
}
.td-card--green .td-card__icon {
    background: var(--td-green);
    color: #fff;
    box-shadow: 0 .35rem .9rem rgba(108, 190, 69, .3);
}
.td-card__icon svg {
    width: 1.6rem;
    height: 1.6rem;
    stroke-width: 2;
}
.td-card__title {
    font-family: 'SVN-Gotham', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--td-navy);
    margin: 0;
}
.td-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.td-list > li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .8rem;
    line-height: 1.6;
    color: var(--td-ink);
}
.td-list > li:last-child {
    margin-bottom: 0;
}
.td-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--td-green);
}
.td-card--blue .td-list > li::before {
    background: var(--td-blue);
}

/* ---------------------------------------------------------------- ANH --- */
.td-gallery {
    padding: 0 0 5.5rem;
    background: #F3F8F1;
}
.td-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.td-gallery figure {
    margin: 0;
    border-radius: .875rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 .4rem 1.2rem rgba(16, 58, 92, .07);
}
.td-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.td-gallery figcaption {
    padding: .85rem 1rem;
    font-size: .875rem;
    line-height: 1.45;
    color: #5B6B7A;
}

/* ------------------------------------------------------------ UNG TUYEN - */
.td-apply {
    padding: 5.5rem 0;
    background: linear-gradient(120deg, var(--td-blue-deep) 0%, var(--td-blue) 100%);
}
/* Mot cot: cot phai truoc day chi de chua the QR, da bo. */
.td-apply__inner {
    display: block;
}
.td-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}
.td-contact > li {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .75rem;
    padding: 1.1rem 1.15rem;
}
.td-contact__label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    margin-bottom: .4rem;
}
.td-contact__value {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    text-decoration: none;
}
a.td-contact__value:hover {
    color: #fff;
    text-decoration: underline;
}
.td-apply__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

/* ------------------------------------------------------------- MOBILE --- */
@media (max-width: 991px) {
    .td-hero__inner,
    .td-intro__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .td-cards,
    .td-gallery__grid {
        grid-template-columns: 1fr;
    }
    .td-card + .td-card {
        /* Mot cot thi hai phan xep tren duoi, duong ngan phai nam ngang. */
        border-left: none;
        border-top: 1px solid #E6EDE4;
    }
    .td-hero__photo {
        order: -1;
    }
}

@media (max-width: 767px) {
    .td-hero {
        padding: 3rem 0;
        min-height: 0;
    }
    .td-intro,
    .td-job,
    .td-apply {
        padding: 3rem 0;
    }
    .td-gallery {
        padding-bottom: 3rem;
    }
    .td-contact {
        grid-template-columns: 1fr;
    }
    .td-stats {
        /* Khong con khoang nhich cho dong nhan: o mot cot thi bang so lieu
           nam hang rieng phia duoi, khong phai thang hang voi tieu de nua. */
        margin-top: 0;
    }
    .td-stats > li {
        /* Xep doc va day het ve trai: de nhan canh phai thi cum nut noi
           (goi / Zalo / mail) bam o canh phai man hinh se de len chu — thay
           ro nhat o dong cuoi cung. Canh trai thi khong bao gio dung nhau. */
        display: block;
        padding: .8rem 0;
    }
    .td-stats strong {
        /* Phai dat lai display: ngoai mobile hai the nay la flex item nen tu
           tach dong; o day li la block, de nguyen thi "108 ha" va nhan dinh
           lien nhau tren cung mot dong (markup khong co khoang trang giua). */
        display: block;
        font-size: 1.375rem;
    }
    .td-stats span {
        display: block;
        margin-top: .15rem;
        text-align: left;
    }
    .td-card {
        padding: 1.75rem 1.35rem;
    }
    /* Hai nut chia deu mot hang thay vi xuong dong lech co nhau. */
    .td-hero__cta .td-btn,
    .td-apply__cta .td-btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: .9rem;
        padding-right: .9rem;
        font-size: .8125rem;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------- FORM UNG TUYEN - */
.td-form {
    padding: 5.5rem 0;
    background: #F7FAFC;
}
.td-form__head {
    text-align: center;
    margin-bottom: 2.5rem;
}
.td-form__head .td-lead {
    margin-left: auto;
    margin-right: auto;
}
.td-form__box {
    max-width: 44rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 1rem;
    padding: 2.25rem;
    box-shadow: 0 .6rem 1.9rem rgba(16, 58, 92, .08);
}
.td-field {
    margin-bottom: 1.25rem;
}
.td-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.td-field label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--td-navy);
    margin-bottom: .45rem;
}
.td-field label span {
    color: #D64545;
}
.td-field input[type="text"],
.td-field input[type="tel"],
.td-field input[type="email"],
.td-field input[type="file"],
.td-field select,
.td-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .9rem;
    font-family: inherit;
    font-size: .9375rem;
    color: var(--td-ink);
    background: #fff;
    border: 1px solid #CBD6E0;
    border-radius: .5rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.td-field textarea {
    resize: vertical;
    min-height: 6rem;
}
.td-field input:focus,
.td-field select:focus,
.td-field textarea:focus {
    outline: none;
    border-color: var(--td-blue);
    box-shadow: 0 0 0 3px rgba(24, 118, 188, .15);
}
.td-hint {
    display: block;
    margin-top: .4rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: #5B6B7A;
}
.td-err {
    display: block;
    margin-top: .35rem;
    font-size: .8125rem;
    color: #D64545;
}
.td-err:empty {
    display: none;
}
.td-form__submit {
    width: 100%;
    margin-top: .5rem;
}
.td-alert {
    max-width: 44rem;
    margin: 0 auto 1.25rem;
    padding: .9rem 1.1rem;
    border-radius: .5rem;
    font-size: .9375rem;
    line-height: 1.55;
}
.td-alert:empty {
    display: none;
}
.td-alert--ok {
    background: #E6F4EA;
    border: 1px solid #A8D5B5;
    color: #1E6B38;
}
.td-alert--loi {
    background: #FDECEC;
    border: 1px solid #F0B4B4;
    color: #A32020;
}
.td-alert--loi ul {
    margin: 0;
    padding-left: 1.2rem;
}

@media (max-width: 767px) {
    .td-form {
        padding: 3rem 0;
    }
    .td-form__box {
        padding: 1.5rem 1.25rem;
    }
    .td-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}