/* ==========================================================================
   LangGo Careers — Section quy trình tuyển dụng
   Tách khỏi homepage.css vì cả trang chủ lẫn trang Về chúng tôi đều dùng.
   Dùng lại biến :root và thang chữ (--fs-*) khai trong shell.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PROCESS SECTION — "Từ CV đến ngày nhận việc chỉ trong 7–10 ngày"
   Nền đỏ, 4 bước nối bằng gạch đứt, card trắng lộ trình Giảng viên,
   dưới cùng là dải trắng bo cong chứa dòng cam kết.
   -------------------------------------------------------------------------- */
.process-section {
    position: relative;
    /* Khoảng hở từ mép trên section xuống cụm nội dung (tiêu đề + 4 bước + card).
       Tăng --process-inner-top là đẩy cả cụm process-inner xuống thấp hơn. */
    padding: var(--process-inner-top) 0 0;
    /* KHÔNG dùng overflow: hidden. Banner trắng ở dưới cao 968px, phải chảy tiếp
       xuống sau lưng section FAQ chứ không dừng ở mép process — hidden sẽ cắt cụt
       đúng chỗ đó và để lộ một vệt ngang.
       overflow-x: clip vẫn chặn tràn ngang (khi --process-bg-width < 100%), còn
       overflow-y: visible mở đường cho banner đi xuống. Cặp clip + visible là hợp
       lệ, trong khi hidden luôn ép trục còn lại thành auto. */
    overflow-x: clip;
    overflow-y: visible;
    /* Cột dọc để dải trắng luôn tụt xuống sát đáy, kể cả khi section cao hơn
       nội dung (xem .process-commit { margin-top: auto }). */
    display: flex;
    flex-direction: column;

    /* Tỉ lệ thật của process-bg.png (1920x862). Đổi ảnh nền thì sửa ở đây. */
    --process-bg-ratio: 1920 / 862;
    --process-bg-width: 100%;
    /* Banner dưới nhô ngược lên dưới gầm banner trên bao nhiêu.
       Đáy banner đỏ bị khoét một cung trong suốt sâu 82px ở giữa, thuôn về 0 ở hai
       mép (đo trên process-bg.png 1920x862). Nâng banner trắng lên đúng ngần ấy thì
       nó lấp trọn chỗ khoét, thay vì để lộ nền trang có tông trắng khác.
       82/1920 = 4.27vw — dùng vw nên tỉ lệ giữ nguyên ở mọi bề ngang màn hình.
       An toàn vì .process-bg__top vẽ đè lên: nâng bao nhiêu cũng không xén phần đỏ. */
    --process-bg-overlap: 4.3vw;
    /* Cụm process-inner cách mép trên section bao nhiêu px */
    --process-inner-top: 110px;
    /* Card "Khối Giảng viên" thò xuống đè lên dải trắng bao nhiêu px */
    --process-card-overhang: 80px;
    /* Khoảng cách từ hàng 4 bước xuống card "Khối Giảng viên".
       Tăng số này là đẩy card xuống thấp hơn. */
    --process-card-gap: 150px;
}

/* Trang "Về chúng tôi" giữ nguyên khoảng hở cũ: nó nhúng section này trên nền
   trắng, không có ảnh nền nên không cần chừa chỗ như trang chủ. */
.process-section.process-section--on-white {
    --process-inner-top: 26px;
}

/* Ảnh nền hiển thị TRỌN VẸN, không cắt.
   Trước đây chiều cao section do nội dung quyết định nên hầu như luôn "lùn" hơn
   tỉ lệ ảnh, và object-fit: cover cắt mất đáy ảnh — đúng chỗ có đường cong trong
   suốt dẫn vào dải trắng. Nay ảnh giữ tỉ lệ gốc (height: auto) còn section được
   bảo đảm không bao giờ thấp hơn ảnh bằng min-height.

   Chỉ đặt sàn chiều cao khi section THẬT SỰ có ảnh nền. Trang "Về chúng tôi"
   nhúng lại section này với showProcessBackground => false — ở đó không có
   .process-bg nên đặt sàn sẽ chừa ra một mảng trống vô nghĩa.
   Trình duyệt không hỗ trợ :has() thì mất phần bảo đảm chiều cao, ảnh vẫn hiện
   đúng tỉ lệ chứ không bị kéo giãn — đây là suy giảm chấp nhận được. */
.process-section:has(> .process-bg) {
    /* min-height CHỨ KHÔNG phải aspect-ratio: aspect-ratio ấn định chiều cao nên
       nội dung dài hơn là bị overflow: hidden cắt cụt (card "Khối Giảng viên" mất
       nửa dưới, dòng cam kết biến mất). min-height chỉ kéo section cao lên khi
       cần, còn nội dung dài hơn thì section vẫn tự giãn như bình thường.
       Section trải hết bề ngang cửa sổ nên 100vw chính là bề ngang ảnh. */
    min-height: calc(100vw / (1920 / 862));
}

/* Ảnh nền dùng thẻ <img> thật (không dùng background-image) */
.process-bg {
    position: absolute;
    /* Phủ hết section: hai banner xếp nối tiếp từ đỉnh xuống, banner trên trước
       rồi banner dưới ngay sau. Banner dưới cao hơn phần section còn lại nên nó
       tràn xuống dưới — cố ý, để nền chạy liền sang FAQ.
       FAQ nằm sau trong DOM và cũng là positioned nên nội dung FAQ vẫn vẽ đè lên
       nền này; FAQ hiện cũng không có ảnh nền riêng (chưa có file faq-bg.*). */
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    /* Căn giữa theo chiều ngang khi --process-bg-width nhỏ hơn 100% */
    align-items: center;
}

.process-bg img {
    width: min(100%, var(--process-bg-width));
    /* height: auto + không object-fit: cover = ảnh hiện đủ, không cắt cạnh nào.
       flex: none để flex đừng bóp ảnh lại khi tổng chiều cao 2 banner vượt section. */
    height: auto;
    flex: none;
    display: block;
}

/* Banner trên vẽ ĐÈ lên banner dưới. Thiếu dòng này thì banner dưới — vốn đục hoàn
   toàn và đứng sau trong DOM — sẽ phủ mất phần đỏ mỗi khi --process-bg-overlap > 0,
   làm cung cong ở đáy banner đỏ bị cắt phẳng. Cùng thủ pháp với .why-bg__top. */
.process-bg__top {
    position: relative;
    z-index: 1;
}

/* Banner dưới nằm SÁT NGAY DƯỚI banner trên, không bám đáy section.
   Nó chui lên dưới gầm banner trên đúng --process-bg-overlap để lấp chỗ khoét cong.
   Chưa thả file process-bg-bottom.* thì thẻ này không được render và banner trên
   giữ nguyên như cũ. */
.process-bg__bottom {
    margin-top: calc(var(--process-bg-overlap) * -1);
}

.process-inner {
    position: relative;
    /* Trên .process-commit để card thò xuống nằm ĐÈ lên dải trắng */
    z-index: 2;
    width: 100%;
    max-width: 1293px;
    margin-inline: auto;
    padding-inline: 20px;
}

.process-heading {
    margin: 0 0 32px;
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
}

/* ---------- 4 bước ---------- */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Gạch đứt nối sang bước kế tiếp — chạy từ tâm pill này sang tâm pill kế tiếp,
   nằm DƯỚI pill (z-index 0) nên nhìn ra đúng đoạn nằm giữa 2 pill dù pill rộng
   hẹp khác nhau. 154px = 120 (ảnh) + 12 (margin) + 22 (nửa chiều cao pill). */
.process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 154px;
    left: 50%;
    width: 100%;
    border-top: 2px dashed rgba(255, 255, 255, .75);
}

.process-step__art {
    display: grid;
    place-items: end center;
    height: 120px;
}

.process-step__art img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    display: block;
}

.process-step__pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Cao cố định để 4 pill (1 dòng và 2 dòng) cùng nằm trên một đường ngang */
    height: 44px;
    margin-top: 12px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 3px 10px rgba(87, 0, 0, .25);
}

/* Icon kèm gạch dọc ngăn cách với chữ — gạch là border-right của chính icon */
.process-step__pill i {
    flex: 0 0 auto;
    align-self: stretch;
    display: grid;
    place-items: center;
    margin-block: 3px;
    padding-right: 8px;
    border-right: 1px solid rgba(0, 0, 0, .18);
    font-size: 13px;
    color: var(--brand);
}

.process-step__caption {
    margin: 16px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 1);
}

/* ---------- Card lộ trình Giảng viên ---------- */
.process-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 957px;
    /* Design ghi cao 305px; dùng min-height để màn hẹp nội dung không bị cắt */
    min-height: 305px;
    /* margin-bottom âm: kéo dải trắng lên, card thò xuống đè lên nó mà KHÔNG
       làm section cao thêm (section cao thêm = ảnh nền bị phóng/cắt nhiều hơn) */
    margin: var(--process-card-gap) auto calc(var(--process-card-overhang) * -1);
    padding: 28px 32px;
    border-radius: 35px;
    border: 1px solid rgba(207, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
    box-shadow: 5px 5px 13px 0px rgba(88, 0, 0, 0.25);
}

.process-card__title {
    margin: 0 0 22px;
    font-weight: 800;
    font-size: var(--fs-h3);
    line-height: 1.2;
    text-align: center;
    color: var(--brand);
}

.process-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.process-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Gạch đứt vàng nối giữa các bước Giảng viên — canh giữa icon 108px */
.process-node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 54px;
    left: calc(50% + 60px);
    width: calc(100% - 120px);
    border-top: 2px dashed #efc98f;
}

.process-node__icon {
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 1px solid #f0dcdc;
    background: #fff;
    box-shadow: 0 4px 14px rgba(87, 0, 0, .12);
    overflow: hidden;
}

.process-node__icon img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    display: block;
}

.process-node__label {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--brand);
}

/* ---------- Dải trắng bo cong + dòng cam kết ---------- */
.process-commit {
    position: relative;
    z-index: 1;
    /* auto thay cho 8px: man rat rong section co the cao hon noi dung (min-height
       theo anh nen), day trang phai bam day section chu khong lo lung giua chung.
       Khong con cho trong thi auto = 0, khong anh huong gi. */
    margin-top: auto;
    /* Chừa thêm đúng phần card thò xuống, nếu không card sẽ che mất dòng cam kết */
    padding: calc(28px + var(--process-card-overhang)) 20px 26px;
}

.process-commit p {
    margin: 0;
    font-weight: 800;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
}

@media (max-width: 991px) {
    .process-section { --process-inner-top: 64px; }

    /* Hai banner nền (1920x862 + banner trắng 968px) chỉ đúng ở bố cục rộng:
       thu về bề ngang mobile thì dải đỏ chỉ còn cao ~175px, phần còn lại của
       section rơi xuống nền trắng và chữ trắng biến mất. Trên mobile bỏ ảnh,
       thay bằng gradient đỏ của brand; dải trắng cuối section vẽ bằng CSS. */
    .process-bg { display: none; }

    .process-section {
        background: linear-gradient(180deg, #DB1F1F 0%, #9D0B0F 100%);
    }

    /* Sàn chiều cao theo tỉ lệ ảnh nền không còn ý nghĩa khi đã bỏ ảnh */
    .process-section:has(> .process-bg) { min-height: 0; }

    /* Trang "Về chúng tôi" nhúng section này trên nền trắng, không có ảnh nền —
       giữ nguyên nền trắng của trang, không tô gradient. */
    .process-section.process-section--on-white { background: none; }
    .process-section.process-section--on-white { --process-inner-top: 48px; }
    .process-heading { margin-bottom: 36px; }

    /* 4 bước giữ đúng 1 hàng như desktop, chỉ co lại theo bề ngang màn hình.
       Ba biến dưới đây vừa định cỡ ảnh/pill vừa dùng để tính lại vị trí gạch nối. */
    .process-section {
        --process-art-h: clamp(54px, 15vw, 110px);
        --process-pill-gap: clamp(6px, 1.8vw, 12px);
        --process-pill-h: clamp(30px, 8.4vw, 44px);
    }

    .process-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(4px, 1.6vw, 12px);
    }

    .process-step__art { height: var(--process-art-h); }
    .process-step__art img { max-height: 100%; }

    .process-step__pill {
        height: auto;
        min-height: var(--process-pill-h);
        margin-top: var(--process-pill-gap);
        gap: clamp(4px, 1.4vw, 8px);
        padding: 5px clamp(6px, 2vw, 14px);
        font-size: clamp(9px, 2.4vw, 13px);
    }

    .process-step__pill i {
        padding-right: clamp(4px, 1.4vw, 8px);
        font-size: clamp(8px, 2.2vw, 12px);
    }

    /* Gạch đứt nối 4 bước: canh lại theo chiều cao ảnh + nửa chiều cao pill */
    .process-step:not(:last-child)::after {
        top: calc(var(--process-art-h) + var(--process-pill-gap) + var(--process-pill-h) / 2);
    }

    .process-step__caption {
        margin-top: clamp(8px, 2.4vw, 16px);
        font-size: clamp(9px, 2.4vw, 14px);
    }
    .process-card { padding: 24px 20px 20px; }
    /* Man hep giu khoang cach vua phai, khong day card xuong sau nhu desktop */
    .process-section { --process-card-overhang: 48px; --process-card-gap: 96px; }
    /* Dải trắng bo cong: trước lấy từ banner dưới, giờ vẽ thẳng bằng CSS */
    .process-commit {
        margin-top: 48px;
        border-radius: 50% 50% 0 0 / 40px 40px 0 0;
        background: #fff;
    }

    .process-section--on-white .process-commit { background: none; }
}

/* --------------------------------------------------------------------------
   MOBILE (<=767px) — 4 bước chuyển sang TIMELINE DỌC
   Ép 4 bước nằm ngang trên màn 390px thì mỗi bước chỉ còn ~90px và chữ phải tụt
   xuống 9–10px. Ở đây đổi trục: mỗi bước là một hàng [icon tròn | pill + mô tả].

   Đường nối là MỘT gạch đứt liền mạch chạy suốt cột icon (.process-steps::before)
   chứ không phải 3 đoạn rời gắn vào từng bước — đoạn rời không bao giờ khớp khi
   các bước cao thấp khác nhau (mô tả 1 hay 2 dòng). Icon nằm trong vòng tròn
   trắng đục, cùng kiểu .process-node__icon, nên gạch chạy sau lưng mà không lộ
   qua phần trong suốt của ảnh minh hoạ.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .process-steps {
        position: relative;
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 420px;
        margin-inline: auto;
    }

    /* Gạch đứt dọc liền mạch, từ tâm icon đầu tới tâm icon cuối (42px = nửa icon) */
    .process-steps::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 42px;
        bottom: 42px;
        left: 41px;
        border-left: 2px dashed rgba(255, 255, 255, .6);
    }

    .process-step {
        display: grid;
        grid-template-columns: 84px 1fr;
        grid-template-areas:
            "art pill"
            "art caption";
        align-items: center;
        column-gap: 16px;
        text-align: left;
    }

    /* Timeline đã có gạch liền mạch — bỏ 3 đoạn nối rời của bố cục ngang */
    .process-step:not(:last-child)::after { display: none; }

    .process-step__art {
        position: relative;
        z-index: 1;
        grid-area: art;
        grid-row: 1 / 3;
        place-items: center;
        width: 84px;
        height: 84px;
        border-radius: 50%;
        border: 1px solid #f0dcdc;
        background: #fff;
        box-shadow: 0 4px 14px rgba(87, 0, 0, .18);
        overflow: hidden;
    }

    .process-step__art img {
        width: 58px;
        height: 58px;
        max-height: none;
    }

    .process-step__pill {
        grid-area: pill;
        justify-self: start;
        align-self: end;
        height: auto;
        min-height: 0;
        margin-top: 0;
        padding: 8px 16px;
        font-size: 15px;
    }

    .process-step__pill i { font-size: 13px; padding-right: 8px; }

    .process-step__caption {
        grid-area: caption;
        align-self: start;
        margin-top: 6px;
        font-size: 14px;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   MOBILE (<=600px) — lộ trình "Khối Giảng viên" giữ 1 hàng ngang
   4 nhãn đều rất ngắn (Demo / Training / Pass / Nhận lớp) nên hàng ngang vẫn
   đọc tốt; icon co theo viewport bằng --process-node-size, gạch nối vàng tính
   lại theo đúng biến đó nên không cần tắt như trước.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .process-section {
        --process-node-size: clamp(46px, 14vw, 108px);
        /* Kéo card lên gần cụm 4 bước và giảm phần thò xuống dải trắng */
        --process-card-gap: 48px;
        --process-card-overhang: 32px;
    }

    .process-card {
        /* Design khoá 305px cho bố cục desktop; trên mobile nội dung chỉ cao
           ~150px nên phần dư biến thành khoảng trống trên/dưới. */
        min-height: 0;
        padding: 20px 14px 16px;
        border-radius: 24px;
    }
    .process-card__title { margin-bottom: 16px; font-size: clamp(16px, 4.4vw, 22px); }

    .process-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(4px, 1.6vw, 8px);
    }

    .process-node__icon {
        width: var(--process-node-size);
        height: var(--process-node-size);
    }

    .process-node__icon img { width: 62%; height: 62%; }

    .process-node__label {
        margin-top: clamp(6px, 2vw, 12px);
        font-size: clamp(9px, 2.6vw, 13px);
    }

    .process-node:not(:last-child)::after {
        top: calc(var(--process-node-size) / 2);
        left: calc(50% + var(--process-node-size) / 2 + 3px);
        width: calc(100% - var(--process-node-size) - 6px);
    }
}