/* Component dùng chung "QUY TRÌNH ỨNG TUYỂN TẠI VNVC" – Views/Shared/_QuyTrinhUngTuyen.cshtml
   Giao diện chuẩn theo khối Quy trình của Trang chủ (requirement Trang chủ 4.6).
   Không phụ thuộc Bootstrap / CSS từng trang (.card, .col-lg-5…) để hiển thị giống nhau ở mọi trang. */

/* Font khai báo rõ (CSS chung của layout ép font cho từng thẻ) để mọi trang giống nhau */
.cmp-quytrinh {
    margin-top: 24px;
}

.cmp-quytrinh *,
.cmp-quytrinh *::before,
.cmp-quytrinh *::after {
    box-sizing: border-box;
}

/* PC 5 cột · tablet 2 cột · mobile 1 cột (giống .col-lg-5 của trang chủ) */
.cmp-quytrinh__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.cmp-quytrinh__card {
    display: flex;
    flex-direction: column;
    /* Căn đầu thẻ để "Bước N" thẳng hàng khi mô tả dài/ngắn khác nhau */
    justify-content: flex-start;
    align-items: center;
    padding: 20px 24px;
    margin: 10px;
    background: #034EA208;
    border-radius: 18px;
    overflow: hidden;
    text-align: center;
}

.cmp-quytrinh__icon-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    max-width: 100%;
}

.cmp-quytrinh__icon {
    height: 96px;
    max-width: 100%;
}

.cmp-quytrinh__step,
.cmp-quytrinh__title {
    color: #034EA2;
    line-height: 28px;
}

.cmp-quytrinh__desc {
    color: #000;
    width: 100%;
    margin-top: 8px;
    padding: 0;
}

/* Mỗi dòng mô tả theo Figma: desktop xuống dòng đúng vị trí; màn nhỏ để chữ tự xuống dòng */
.cmp-quytrinh__line {
    display: inline;
}

/* Desktop theo Figma: 5 thẻ bằng nhau cách nhau 12px, không padding ngang, không cắt chữ
   (khung mô tả 252px rộng hơn thẻ ~241px một chút như design). */
@media (min-width: 1200px) {
    .cmp-quytrinh__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 thẻ bằng nhau, không giãn theo dòng nowrap */
        gap: 12px;
    }

    .cmp-quytrinh__card {
        margin: 0;
        padding: 24px 0 20px;
        overflow: visible;
    }

    /* Khung icon cao 120px, icon căn đáy, cỡ riêng từng icon (--icon-cao) theo design */
    .cmp-quytrinh__icon-wrap {
        height: 120px;
        margin-bottom: 32px;
    }

    .cmp-quytrinh__icon {
        height: var(--icon-cao, 96px);
    }

    .cmp-quytrinh__desc {
        margin-top: 0;
    }

    /* 'section.' để thắng rule .cmp-quytrinh__more / __btn khai báo phía dưới file */
    section.cmp-quytrinh .cmp-quytrinh__more {
        margin-top: 16px;
        padding: 0;
    }

    section.cmp-quytrinh .cmp-quytrinh__btn {
        padding: 9px 48px; /* cỡ chữ 24px: typography.css */
    }
}

/* Màn ≥1280 (khung nội dung đủ 1267px như Figma): xuống dòng đúng vị trí design, dòng dài hơn thẻ
   được căn giữa (lấn đều 2 bên ≤6px, trong khe 12px). Màn nhỏ hơn: chữ tự xuống dòng. */
@media (min-width: 1280px) {
    .cmp-quytrinh__desc {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cmp-quytrinh__line {
        display: block;
        white-space: nowrap;
    }
}

/* Chế độ "chỉ 5 bước" (trang Việc làm, theo mockup): thẻ sát 2 lề, thẳng hàng các khối khác.
   Bỏ margin 10px quanh thẻ, khoảng cách giữa các thẻ dùng gap. */
.cmp-quytrinh--sat-le .cmp-quytrinh__grid {
    gap: 12px;
}

.cmp-quytrinh--sat-le .cmp-quytrinh__card {
    margin: 0;
}

.cmp-quytrinh--sat-le .cmp-quytrinh__more {
    margin-top: 24px;
    padding: 0;
}

/* Nút XEM THÊM → trang Quy trình tuyển dụng */
.cmp-quytrinh__more {
    display: flex;
    justify-content: flex-end;
    margin: 40px 0 16px;
    padding: 0 10px;
}

.cmp-quytrinh__btn {
    display: inline-block;
    background: #f2a23a;
    color: #fff;
    border-radius: 999px;
    padding: 12px 26px;
    text-decoration: none;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

    .cmp-quytrinh__btn:hover {
        color: #fff;
        text-decoration: none;
        filter: brightness(1.05);
    }

/* Máy tính bảng + điện thoại: 2 cột, thẻ thứ 5 nằm giữa (theo design mobile trang Quy trình tuyển dụng) */
@media (max-width: 991.98px) {
    .cmp-quytrinh__grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .cmp-quytrinh__grid > .cmp-quytrinh__card:last-child:nth-child(odd) {
            grid-column: 1 / -1;
            justify-self: center;
            width: calc(50% - 20px);
        }

    .cmp-quytrinh--sat-le .cmp-quytrinh__grid > .cmp-quytrinh__card:last-child:nth-child(odd) {
        width: calc(50% - 6px);
    }
}

/* Điện thoại: thẻ gọn, tên bước 1 dòng "Bước 1: ỨNG TUYỂN" */
@media (max-width: 767.98px) {
    .cmp-quytrinh__card {
        margin: 6px;
        padding: 12px 8px;
        justify-content: flex-start;
    }

    .cmp-quytrinh--sat-le .cmp-quytrinh__grid {
        gap: 10px;
    }

    .cmp-quytrinh--sat-le .cmp-quytrinh__card {
        margin: 0;
    }

    .cmp-quytrinh__icon {
        height: 64px;
    }

    .cmp-quytrinh__name {
        margin-top: 6px;
    }

        .cmp-quytrinh__name .cmp-quytrinh__step,
        .cmp-quytrinh__name .cmp-quytrinh__title {
            display: inline;
            line-height: 1.4;
        }

            .cmp-quytrinh__name .cmp-quytrinh__step::after {
                content: ":"; /* khoảng trắng sau ":" lấy từ khoảng trắng giữa 2 thẻ trong HTML */
            }

    .cmp-quytrinh__desc {
        line-height: 1.45;
        margin-top: 4px;
    }

    .cmp-quytrinh__more {
        justify-content: center; /* mobile: nút XEM THÊM canh giữa */
        margin-top: 20px;
    }
}

/* Điện thoại (Figma "Quy trình tuyển dụng Mobile"): tên bước 1 dòng "Bước N: TÊN"; mô tả xuống dòng theo từng câu
   (mỗi .cmp-quytrinh__line 1 khối, câu dài tự xuống dòng). Cỡ chữ: typography.css */
@media (max-width: 575.98px) {
    .cmp-quytrinh__name {
        white-space: nowrap;
    }

    .cmp-quytrinh__desc .cmp-quytrinh__line {
        display: block;
    }
}