/* ponytail: User phan hoi trang tuyen dung nhin "toi" - giu nguyen nen
   Navy (brand identity chinh thuc, khong doi), chi tang do sang cac
   bien mau chu mo/vien dung chung. Ghi de rieng o day (sau portal-
   shared.css trong thu tu <link>) nen CHI anh huong trang tuyen dung,
   khong dung o portal-shared.css de tranh anh huong toan site. */
:root {
    --vic-muted: #c7cbe0;
    --vic-faint: #9da2ba;
    --vic-border: rgba(182, 197, 255, 0.24);
    --vic-border-strong: rgba(182, 197, 255, 0.4);
}

.career-hero {
    position: relative;
    isolation: isolate;
    min-height: max(700px, calc(100svh - 94px));
    margin-top: -80px;
    overflow: hidden;
    display: grid;
    align-items: center;
    background: var(--vic-navy-900);
}

.career-video,
.career-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.career-video {
    z-index: 0;
    object-fit: cover;
    object-position: center 46%;
    filter: saturate(82%) contrast(105%);
}

.career-overlay {
    z-index: 1;
    background: rgba(4, 6, 28, 0.7);
}

.career-overlay::after {
    display: none;
}

.career-layout {
    position: relative;
    z-index: 2;
    padding-top: 150px;
    padding-bottom: 96px;
    display: block;
}

.career-copy {
    max-width: 940px;
}

.career-title {
    width: fit-content;
    max-width: 100%;
    margin: -0.08em 0 -0.12em;
    padding: 0.08em 0 0.16em;
    display: grid;
    row-gap: 0.14em;
    font-size: clamp(3.6rem, 7vw, 6.25rem);
    line-height: 1;
    overflow: visible;
}

.career-title span {
    display: block;
    padding: 0.05em 0 0.1em;
    line-height: 1.1;
    white-space: nowrap;
}

.career-principles {
    position: relative;
    padding: clamp(78px, 10vw, 138px) 0;
    background: var(--vic-navy-900);
}

.principles-heading {
    max-width: 690px;
    margin: 0 auto;
    text-align: center;
}

.principles-heading h2 {
    margin: 0;
    color: var(--vic-white);
    font-family: var(--font-display);
    font-size: clamp(2.05rem, 4.7vw, 4.3rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    text-wrap: balance;
}

/* Tren desktop, cho tieu de gon 1 dong ma KHONG giam font-size (dung
   nguyen kich thuoc goc). Do that (script Playwright) cho thay o
   4.3rem, tieu de can ~1171px de vua 1 dong - chi nhinh hon 1160px
   (--portal-width mac dinh) ~11px, nen chi can noi rong container cua
   rieng section nay 1 chut (khong dung shrink font/cat chu). */
@media (min-width: 721px) {
    .career-principles {
        --portal-width: 1220px;
    }

    .principles-heading {
        max-width: none;
    }

    .principles-heading h2 {
        white-space: nowrap;
    }
}

.principles-grid {
    margin-top: clamp(42px, 6vw, 70px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--vic-border);
}

.principle {
    position: relative;
    min-height: 260px;
    padding: 32px clamp(22px, 3vw, 38px) 12px;
    border-left: 1px solid var(--vic-border);
}

.principle:first-child {
    border-left: 0;
    padding-left: 0;
}

.principle-number {
    display: block;
    color: var(--vic-cyan);
    font-family: var(--font-display);
    /* Phong to thanh diem nhan thi giac (thay vi caption nho mo nhat
       truoc do) - dong bo voi phong cach to/dam dung o cac phan khac
       trong trang. Opacity giam de khong lan at tieu de vang ben duoi. */
    font-size: clamp(2.2rem, 3.6vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    opacity: 0.32;
}

.principle h3 {
    /* ponytail: 62px cu tao khoang trong vo nghia giua so va tieu de -
       rut gon con 14px. min-height du cho toi da 2 dong (vd "Theo duoi
       gia tri dai han") de doan mo ta duoi luon bat dau cung 1 hang
       giua 3 cot, bat ke tieu de 1 hay 2 dong. */
    margin: 14px 0 14px;
    min-height: 2.3em;
    color: var(--vic-gold);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.3vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.principle p {
    margin: 0;
    color: var(--vic-muted);
    font-size: 0.96rem;
}

.career-openings {
    padding: clamp(78px, 10vw, 138px) 0;
    border-top: 1px solid var(--vic-border);
    background: var(--vic-navy-900);
}

.openings-heading h2 {
    margin: 0;
    color: var(--vic-white);
    font-family: var(--font-display);
    font-size: clamp(2.05rem, 4.7vw, 4.3rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.jobs-grid {
    margin-top: clamp(36px, 5vw, 58px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.job-card {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid var(--vic-border-strong);
    border-radius: var(--portal-radius);
    background: #090c2c;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    transition:
        border-color 280ms ease,
        box-shadow 320ms ease,
        transform 320ms var(--ease-out);
}

.job-card:hover {
    border-color: rgba(69, 201, 219, 0.48);
    box-shadow: 0 30px 84px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
}

.job-card-header,
.job-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.job-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #34d399;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.job-status > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.09), 0 0 18px rgba(52, 211, 153, 0.48);
}

.job-card time {
    color: var(--vic-faint);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.job-card-body {
    margin-top: clamp(42px, 6vw, 68px);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    align-items: end;
    gap: clamp(42px, 7vw, 94px);
}

/* The danh sach: khong bao .job-card-body (chi trang chi tiet moi dung
   grid 2 cot), can margin-top rieng nho hon - khoang trang cu qua lon
   so voi luong chu con lai sau khi rut gon teaser. */
.job-card > .job-card-copy {
    margin-top: clamp(20px, 3vw, 30px);
}

.job-team {
    margin: 0 0 12px;
    color: var(--vic-gold);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.job-card h3 {
    margin: 0;
    color: var(--vic-white);
    font-family: var(--font-display);
    /* ponytail: clamp do bang that (658px cot desktop) voi nhieu ten vi
       tri mau khac nhau (kip "Truong phong Kinh doanh", "Senior Product
       Manager"...) de con 1 dong on dinh cho cac post tuong lai, thay vi
       chi vua khop voi "Content Creator". */
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.job-card-copy > p:last-child {
    max-width: 690px;
    margin: 24px 0 0;
    color: var(--vic-muted);
    font-size: 1rem;
    line-height: 1.7;
    white-space: pre-line;
}

/* Teaser 1 dong tren the danh sach - mo ta day du chi hien o trang chi tiet. */
.job-card:not(.job-detail) .job-card-copy > p:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* Trang chi tiet: mo ta day du parse thanh heading/list that (xem
   renderJdBody() trong vi-tri/script.js) thay vi 1 khoi chu lien tuc. */
.jd-body {
    max-width: 690px;
    margin: 24px 0 0;
    color: var(--vic-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.jd-block + .jd-block {
    margin-top: 24px;
}

.jd-body p {
    margin: 0;
    white-space: pre-line;
}

.jd-heading {
    margin: 0 0 10px;
    color: var(--vic-white);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.jd-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

.jd-list li::marker {
    color: var(--vic-cyan);
}

/* Luoi 2x2: nhan nho phia tren, gia tri dam ngay ben duoi - doc tu
   nhien thay vi list ngang co label/value cach xa nhau + qua nhieu
   divider (moi hang 1 duong ke truoc do). */
.job-stats {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--vic-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 18px;
    column-gap: 20px;
    list-style: none;
}

/* The danh sach: khong nam trong .job-card-body (grid 2 cot chi trang
   chi tiet dung) nen can margin-top rieng - khong anh huong .job-stats
   long trong .job-card-body o trang chi tiet (align qua grid o do). */
.job-card > .job-stats {
    margin-top: clamp(18px, 3vw, 28px);
}

.job-stats li {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.job-stats span {
    color: var(--vic-faint);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.job-stats strong {
    color: var(--vic-white);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
}

.job-stat-highlight strong {
    color: var(--vic-orange);
}

.job-card-footer {
    margin-top: clamp(20px, 3vw, 28px);
    justify-content: flex-end;
}

@property --jd-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.job-card-footer a {
    position: relative;
    min-height: 48px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 999px;
    color: #061029;
    background: linear-gradient(135deg, var(--vic-orange), var(--vic-cyan));
    box-shadow: 0 8px 22px rgba(243, 154, 24, 0.22), 0 8px 22px rgba(69, 201, 219, 0.18);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition:
        box-shadow 240ms ease,
        transform 240ms var(--ease-out);
}

/* Vien "star-border" - 1 diem sang trang quay quanh vien pill (nen da
   la gradient cam-cyan ro net nen vien dung trang de tao do tuong phan,
   khong lap lai chinh mau nen). Ky thuat padding + mask-composite: chi
   ve phan ring, conic-gradient quay qua bien --jd-border-angle. */
.job-card-footer a::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--jd-border-angle),
        rgba(255, 255, 255, 0.12) 0deg,
        rgba(255, 255, 255, 0.12) 288deg,
        #ffffff 324deg,
        rgba(255, 255, 255, 0.12) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: jd-border-spin 3.2s linear infinite;
    pointer-events: none;
}

@keyframes jd-border-spin {
    to {
        --jd-border-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .job-card-footer a::before {
        animation: none;
    }
}

.job-card-footer a:hover {
    box-shadow: 0 12px 30px rgba(243, 154, 24, 0.34), 0 12px 30px rgba(69, 201, 219, 0.28);
    transform: translateY(-2px);
}

/* Form ung tuyen - hien ra khi bam "Ung tuyen vi tri" */
.job-apply-form {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--vic-border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.job-apply-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.job-apply-row label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--vic-faint);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.job-apply-row input {
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--vic-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--vic-white);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.job-apply-row input:focus {
    outline: none;
    border-color: var(--vic-cyan);
}

.job-apply-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.job-apply-status {
    font-size: 0.82rem;
    color: var(--vic-faint);
}

.job-apply-status.is-ok { color: var(--vic-cyan); }
.job-apply-status.is-error { color: #ff6b6b; }

/* Trang chi tiet 1 vi tri - /tuyen-dung/vi-tri/ */
.career-detail-section {
    padding: clamp(140px, 15vw, 180px) 0 clamp(78px, 10vw, 138px);
    background: var(--vic-navy-900);
}

.job-detail-loading {
    color: var(--vic-faint);
    font-size: 0.95rem;
}

.job-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--vic-faint);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: color 200ms ease;
}

.job-detail-back:hover {
    color: var(--vic-cyan);
}

.job-detail {
    max-width: 980px;
    margin: 0 auto;
    /* ponytail: .job-card mac dinh overflow:hidden (clip goc bo tron) -
       nhung overflow khac visible tren bat ky ancestor nao cung pha vo
       position:sticky cua .job-stats ben trong. The chi tiet khong co
       phan tu nao chan sat mep can clip nen tat an toan. */
    overflow: visible;
}

.job-detail:hover {
    transform: none;
    border-color: var(--vic-border-strong);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

/* Mo ta day du cao hon han meta list - can dau (start) thay vi can day
   (end, hop ly cho ban teaser ngan tren the danh sach) de meta khong bi
   day lech xuong day. */
.job-detail .job-card-body {
    align-items: start;
}

/* Cot meta o trang chi tiet hep hon nhieu so voi be ngang the danh sach
   (chi ~300-425px, chia doi con ~150-200px/o) - luoi 2x2 bi wrap gia
   tri dai ("Toan thoi gian"). Doi ve 1 cot, du khoang trong doc de dan. */
.job-detail .job-stats {
    grid-template-columns: 1fr;
}

/* Cot meta ket thuc som hon nhieu so voi mo ta dai ben trai, de trong
   mang lon phia duoi khi cuon - dinh theo khi cuon (chi ap dung tu
   721px, duoi do trang chi tiet chuyen 1 cot don, sticky khong hop ly). */
@media (min-width: 721px) {
    .job-detail .job-stats {
        position: sticky;
        top: 100px;
        align-self: start;
    }
}

.job-apply-wrap {
    margin-top: clamp(38px, 5vw, 58px);
    padding-top: 28px;
    border-top: 1px solid var(--vic-border);
}

.job-apply-wrap h4 {
    margin: 0 0 20px;
    color: var(--vic-white);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.job-detail-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 0;
    display: grid;
    gap: 20px;
    justify-items: start;
    color: var(--vic-muted);
}

@media (max-width: 720px) {
    .career-hero {
        min-height: auto;
        margin-top: -66px;
    }

    .career-video {
        object-position: 58% center;
    }

    .career-overlay {
        background: rgba(4, 6, 28, 0.74);
    }

    .career-layout {
        padding-top: 142px;
        padding-bottom: 72px;
    }

    .career-title {
        font-size: clamp(2.25rem, 10.5vw, 3.35rem);
        letter-spacing: -0.065em;
        row-gap: 0.16em;
    }

    .principles-grid {
        grid-template-columns: 1fr;
    }

    .principle,
    .principle:first-child {
        min-height: auto;
        padding: 26px 0 30px;
        border-left: 0;
        border-bottom: 1px solid var(--vic-border);
    }

    .jobs-grid {
        grid-template-columns: 1fr;
    }

    .job-card {
        padding: 26px 24px;
    }

    .job-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .job-card-body {
        margin-top: 42px;
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .job-card h3 {
        font-size: clamp(1.8rem, 9.2vw, 2.6rem);
        line-height: 1.03;
    }
}