/* =============================================================================
   Typography chuẩn Web Tuyển Dụng (#269110) — 1 font, 6 cấp chữ.
   Selector có tiền tố 'html body' để thắng CSS component (partial tự nạp CSS trong body).
   Sửa cỡ chữ: chỉ đổi biến ở :root (desktop) và 2 breakpoint bên dưới.
   Không áp cho footer & các khối trang trí (timeline năm, quote lớn, fanpage).
   ============================================================================= */

:root {
    --td-font: Roboto, sans-serif;

    --td-fs-h1: 40px;    /* Tiêu đề trang */
    --td-fs-h2: 36px;    /* Tiêu đề khối */
    --td-fs-h3: 24px;    /* Tiêu đề thẻ */
    --td-fs-body: 20px;  /* Nội dung */
    --td-fs-meta: 16px;  /* Phụ: tag, pill, phân trang, nút */

    --td-fw-h1: 800;
    --td-fw-h2: 700;
    --td-fw-h3: 700;
    --td-fw-body: 400;
    --td-fw-strong: 700;
    --td-fw-meta: 500;
    --td-fw-button: 700;

    --td-lh-heading: 1.25;
    --td-lh-body: 1.5;
}

@media (max-width: 991.98px) {
    :root {
        --td-fs-h1: 32px;
        --td-fs-h2: 26px;
        --td-fs-h3: 20px;
        --td-fs-body: 18px;
        --td-fs-meta: 14px;
    }
}

/* Điện thoại: chữ mặc định 16px – chỗ nào nhỏ hơn chỉ làm khi được yêu cầu riêng (vd mô tả Đãi ngộ 14px) */
@media (max-width: 575.98px) {
    :root {
        --td-fs-h1: 26px;
        --td-fs-h2: clamp(14px, 4.4vw, 20px); /* tiêu đề khối 1 dòng (nowrap) */
        --td-fs-h3: 18px;
        --td-fs-body: 16px;
        --td-fs-meta: 16px;
    }
}

/* ----- Font chung: khai báo 1 lần cho cả web (không lặp font-family ở từng rule) -----
   '*' cho mọi phần tử; các thành phần thư viện tự đặt font riêng (Bootstrap tooltip/popover,
   daterangepicker, select2, jQuery UI, SweetAlert2, toast) được ghi đè bằng tiền tố 'html body'.
   Icon font (Font Awesome, icofont…) dùng class riêng nên không bị ảnh hưởng. */
* {
    font-family: var(--td-font);
}

html body .tooltip,
html body .popover,
html body .daterangepicker,
html body .select2-container,
html body .select2-dropdown,
html body .ui-widget,
html body .ui-widget input,
html body .ui-widget select,
html body .ui-widget textarea,
html body .ui-widget button,
html body .swal2-popup,
html body .jq-toast-wrap,
html body #toast-container {
    font-family: var(--td-font);
}

/* ----- Tiêu đề trang ----- */
html body .policy-title,
html body .policy-title .lh-chi-pc,
html body .header-text,
html body .header-text strong,
html body .header-text .qttd-chi-pc,
html body .moi-truong-tot-nhat-header,
html body .achievement__title {
    font-size: var(--td-fs-h1);
    font-weight: var(--td-fw-h1);
    line-height: var(--td-lh-heading);
}

/* ----- Tiêu đề khối ----- */
html body .cmp-tieude__text,
html body .section-tag__text,
html body .home-search__title,
html body .job__heading,
html body .cmp-luuy__title,
html body .achievement__subtitle,
html body .chien-luoc-left > h2,
html body .chien-luoc-right > h2,
html body .vnvc-info-header {
    font-size: var(--td-fs-h2);
    font-weight: var(--td-fw-h2);
    line-height: var(--td-lh-heading);
}

/* ----- Tiêu đề thẻ ----- */
html body .job-card__title,
html body .benefit-card__title,
html body .cmp-quytrinh__step,
html body .cmp-quytrinh__title,
html body .joblist__filter-heading,
html body .vieclam-lienhe__title,
html body .vieclam-lienhe__title a,
html body .vieclam-lienhe__card--fanpage,
html body .vieclam-lienhe__card--fanpage a,
html body .card-blue > h2,
html body .text-24,
html body .text-blue.font-weight-bold,
html body .contact-support .card-header,
html body .contact-support .card-row > strong,
html body .hot-line-phone-number,
html body .vnvc-info .center-col > a {
    font-size: var(--td-fs-h3);
    font-weight: var(--td-fw-h3);
    line-height: var(--td-lh-heading);
}

/* ----- Tên vòng phỏng vấn (Quy trình tuyển dụng – Vòng 1 / Vòng 2) ----- */
html body .step-content > h3 {
    font-size: var(--td-fs-h2);
    font-weight: var(--td-fw-strong);
    line-height: var(--td-lh-heading);
}

@media (min-width: 992px) {
    html body .step-content > h3 {
        font-size: 35px;
    }
}

/* ----- Nội dung ----- */
html body .policy-content,
html body .contact-note,
html body .contact-support .card-header > span,
html body .vnvc-info .label,
html body .text-20,
html body .text-24 ~ .list-unstyled > li,
html body .step-content > p,
html body .cmp-quytrinh__desc,
html body .cmp-luuy__box p,
html body .cmp-luuy__box li,
html body .job-card__row span,
html body .joblist__check-text,
html body .vieclam-lienhe__card li,
html body .vieclam-lienhe__card li a,
html body .card-blue li,
html body .card-blue li a,
html body .luong-thuong-text,
html body .chien-luoc-strategy-item p,
html body .chinh-sach-strategy-item p,
html body .chien-luoc-content,
html body .dao-tao-content,
html body .intro__content p,
html body .intro-link .pt-3,
html body .year-block__desc p,
html body .job-card__pill,
html body .cmp-timkiem__input,
html body .cmp-timkiem .select2-container .select2-selection__rendered,
html body .joblist__pill,
html body .joblist__pill-hot,
html body .year-block__desc {
    font-size: var(--td-fs-body);
    font-weight: var(--td-fw-body);
    line-height: var(--td-lh-body);
}

/* ----- Nội dung đậm ----- */
html body .cmp-luuy__box strong,
html body .cmp-luuy__lead strong,
html body .joblist__facet-title,
html body .achievement__content,
html body .moi-truong-tot-nhat-content,
html body .highlight,
html body .cmp-timkiem__btn,
html body .year-block__title {
    font-size: var(--td-fs-body);
    font-weight: var(--td-fw-strong);
}

/* ----- Phụ / meta (pill số lượng & nút sắp xếp theo design dùng cỡ Nội dung) ----- */
html body .joblist__page,
html body .home-hot__tab {
    font-size: var(--td-fs-meta);
    font-weight: var(--td-fw-meta);
}

html body .job-card__hot,
html body .joblist__filter-toggle,
html body .formation__more-text,
html body .btn-xem-tatca,
html body .cmp-quytrinh__btn {
    font-size: var(--td-fs-meta);
    font-weight: var(--td-fw-button);
}

/* Ngoại lệ theo design (desktop ≥1280): mô tả bước Quy trình giãn dòng 22px, nút XEM THÊM cỡ tiêu đề thẻ */
@media (min-width: 1280px) {
    html body .cmp-quytrinh__desc {
        line-height: 1.1;
    }

    html body .cmp-quytrinh__btn {
        font-size: var(--td-fs-h3);
    }
}

/* Ngoại lệ theo Figma (desktop ≥1200): thẻ Hotline / Email trang Quy trình tuyển dụng
   – tiêu đề 35/700; dòng 20/400, line-height 25px, cách nhau 5px */
@media (min-width: 1200px) {
    html body .card-blue > h2 {
        font-size: 35px;
    }

    html body .card-blue li,
    html body .card-blue li a {
        line-height: 25px;
    }

    html body .card-blue li + li {
        margin-top: 5px;
    }
}

/* Trang Chính sách nhân sự: chữ "TẠI" đổi dòng theo màn (máy tính cuối dòng 1, điện thoại đầu dòng 2) */
.csns-chi-mobile {
    display: none;
}

/* Ngoại lệ theo Figma "Chính sách nhân sự Mobile": tiêu đề Roboto Black 18, 2 dòng, giãn dòng ~21px;
   đoạn mở đầu canh đều (cỡ 16 – chuẩn chữ mobile) */
@media (max-width: 575.98px) {
    .csns-chi-pc {
        display: none;
    }

    .csns-chi-mobile {
        display: inline;
    }

    html body .csns-title + .policy-content-container .policy-content {
        font-size: 16px;
        line-height: 1.4;
        text-align: justify;
    }
}

/* Ngoại lệ theo Figma (điện thoại ≤440): thẻ Đãi ngộ & Phúc lợi – tiêu đề 16 đậm, mô tả 14 canh đều */
@media (max-width: 440px) {
    html body .luong-thuong-compact .benefit-card__title {
        font-size: 16px;
        line-height: 1.2;
    }

    html body .luong-thuong-compact .luong-thuong-text,
    html body .luong-thuong-compact .luong-thuong-text * {
        font-size: 14px;
        line-height: 16px;
        text-align: justify;
    }
}

/* Điện thoại: các chữ nhỏ còn sót (badge, nút, dải Fanpage, thông tin tin tuyển dụng, footer, form Nộp hồ sơ) → 16px
   theo chuẩn chữ mobile. Riêng mô tả Đãi ngộ giữ 14px (yêu cầu riêng, khối ≤440 phía trên). */
@media (max-width: 575.98px) {
    html body .cmp-fanpage__text,
    html body .cmp-fanpage__link,
    html body .cmp-timkiem .select2-selection__rendered,
    html body .joblist__btn-clear,
    html body .joblist__btn-apply,
    html body .recruitment__infor-inner > span,
    html body .recruitment__infor-text,
    html body .job-card__btn--mobile,
    html body .newjob-home__btn-more,
    html body .chien-luoc-item > p,
    html body .td-footer__est,
    html body .td-footer__slogan-1,
    html body .td-footer__slogan-2,
    html body .td-footer__note,
    html body .td-footer__contact-item,
    html body .td-footer__open-hours,
    html body .td-footer__open-note,
    html body .td-footer__policies a,
    html body .td-footer__company,
    html body .td-footer__company div,
    html body .td-footer__qr-text,
    html body .nophs-page .form-check-label,
    html body .nophs-page #UngTuyen .btn {
        font-size: 16px;
    }

    /* Còn bị CSS trang/plugin ép cỡ bằng !important hoặc ID → cần !important */
    html body .cmp-timkiem .select2-container .select2-selection__rendered,
    html body .vieclam-mobilebar__diadiem .select2-selection__rendered,
    html body .recruitment__infor-inner > span,
    html body .recruitment__infor-text,
    html body .nophs-page .btn,
    html body .nophs-page .form-check-label,
    html body .nophs-page .form-check-label * {
        font-size: 16px !important;
    }

    /* Thông tin tin tuyển dụng (Nơi làm việc, Mức lương…): cho xuống dòng để chữ 16px không tràn ngang */
    html body .recruitment__infor-inner {
        white-space: normal !important;
        flex-wrap: wrap;
    }

    /* Nội dung tin tuyển dụng (chi tiết công việc – HTML soạn từ CMS, có thể kèm cỡ chữ inline) */
    html body #ChiTietCongViec_I p,
    html body #ChiTietCongViec_I li {
        font-size: 16px !important;
    }
}

/* Ngoại lệ theo Figma (điện thoại): thẻ Quy trình – tên bước 16 đậm (1 dòng), mô tả 14 (xuống dòng như design) */
@media (max-width: 575.98px) {
    html body .cmp-quytrinh__step,
    html body .cmp-quytrinh__title {
        font-size: 16px;
    }

    html body .cmp-quytrinh__desc {
        font-size: 14px;
        line-height: 1.35;
    }
}

/* ===== Tiêu đề trang – 1 form chung cho mọi trang (.td-page-title) =====
   Figma PC (Quy trình 2:3483, Liên hệ 4:27, Chính sách nhân sự 1:16, Nộp hồ sơ 4:693): Roboto Black 40, line-height normal,
   xanh #0256B3, căn giữa. Tablet 32; điện thoại 20 (Figma "Quy trình tuyển dụng Mobile").
   Dùng cho h1 đầu các trang thông tin + tiêu đề đầu trang chủ / Việc làm (h2 – chỉ đồng bộ chữ, giữ vị trí).
   CSS riêng từng trang còn ghi cỡ/màu/khoảng cách khác nhau (kể cả trong <style> của view) → dùng !important để mọi trang ra cùng 1 kiểu. */
:root {
    --td-fs-page-title: 40px;
    --td-page-title-mt: 48px; /* cách header (hoặc banner) */
    --td-page-title-mb: 40px; /* cách nội dung bên dưới */
}

@media (max-width: 991.98px) {
    :root {
        --td-fs-page-title: 32px;
        --td-page-title-mt: 32px;
        --td-page-title-mb: 28px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --td-fs-page-title: 20px;
        --td-page-title-mt: 24px;
        --td-page-title-mb: 24px;
    }
}

html body .td-page-title,
html body .td-page-title strong,
html body .td-page-title span,
html body .home-search__title,
html body .job__heading {
    font-family: var(--td-font) !important;
    font-size: var(--td-fs-page-title) !important;
    font-weight: 900 !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    color: #0256B3 !important;
    text-transform: none !important;
}

html body .td-page-title,
html body .home-search__title,
html body .job__heading {
    text-align: center !important;
    text-wrap: balance;
}

    /* Dấu "&" nhỏ hơn chữ (Figma: 28 / 40) */
    html body .td-page-title .qttd-va {
        font-size: calc(var(--td-fs-page-title) * .7) !important;
    }

/* Khoảng cách tiêu đề h1 đầu trang: như nhau ở mọi trang → bỏ đệm riêng của khung chứa (mỗi trang một kiểu: 8 / 24 / 32px…) */
html body h1.td-page-title {
    margin: var(--td-page-title-mt) auto var(--td-page-title-mb) !important;
    padding: 0 !important;
}

html body .nophs-page:has(h1.td-page-title),
html body article.dlcn:has(> h1.td-page-title) {
    padding-top: 0 !important;
}

html body .qttd-page .col-12:has(> h1.td-page-title) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Quy trình tuyển dụng: khối các bước có lề trên riêng (24 / 15px) → bỏ để cách tiêu đề đúng --td-page-title-mb */
html body .qttd-page .row:has(> .col-12 > h1.td-page-title) ~ .cmp-quytrinh {
    margin-top: 0 !important;
}

/* Tiêu đề nằm ngay dưới banner + dải Fanpage (Trang chủ, Việc làm, Chính sách nhân sự): cùng khoảng cách ở mọi màn –
   cách dải Fanpage 24px, cách nội dung bên dưới 24px */
html body .home-search__title,
html body .job__heading,
html body .csns-title.td-page-title {
    margin: 0 auto 24px !important;
    padding: 0 !important;
}

html body .csns-title.td-page-title {
    margin-top: 24px !important;
}

html body .home-search:has(> .home-search__title),
html body .vieclam-bg--top:has(> .job__heading) {
    margin-top: 0 !important;
    padding-top: 24px !important;
}

/* Trang chủ: dải nền chứa khối tìm kiếm có lề/đệm trên riêng (8 / 24 / 40px) → bỏ, để tiêu đề cách dải Fanpage đúng 24px */
html body .home-band:has(> .col-12 > .home-search > .home-search__title) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}