/* Bảng việc làm lấy dữ liệu từ Manatal.
 *
 * Tách khỏi jobs-blocks.css: phần kia là bố cục tĩnh của trang việc làm, phần này
 * là danh sách động. Tách ra thì sửa danh sách không sợ đụng vào hero và các khối
 * giới thiệu đã chốt.
 */

.jb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}

/* ── Khoảng cách với hero ───────────────────────────────────────── */

/* Khối danh sách thừa hưởng padding chung của .lp-section (clamp 76–118px). Đầu mục
   "Các vị trí đang tuyển" đã bị bỏ nên khoảng trắng đó không còn ngăn cách gì, chỉ
   đẩy danh sách việc làm xuống dưới màn hình đầu tiên. Giảm còn một nửa. */
.cnk-landing-page .jobs-listing { padding-top: clamp(38px, 4.5vw, 59px); }

@media (max-width: 900px) {
  .cnk-landing-page .jobs-listing { padding-top: 36px; }
}

/* ── Ô tìm kiếm và bộ lọc ───────────────────────────────────────── */

.jb-search {
  padding: 20px 22px;
  border: 1px solid #dde5ea;
  border-radius: 10px;
  background: #fff;
}

.jb-search__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.jb-search__head h3 { margin: 0; color: #12294a; font-size: 20px; }
.jb-search__head p { margin: 0; color: #5b6670; font-size: 14px; }
.jb-search__head strong { color: #b3341f; font-size: 16px; }
.jb-search__xoa { margin-left: auto; color: #5b6670; font-size: 13px; text-decoration: underline; }

.jb-search__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}

.jb-filter { display: grid; gap: 5px; min-width: 0; }
.jb-filter > span { color: #3c464e; font-size: 12.5px; font-weight: 700; }

.jb-filter input,
.jb-filter select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #cfd8de;
  border-radius: 6px;
  background: #fff;
  color: #23292e;
  font: inherit;
  font-size: 14px;
}

.jb-filter input:focus,
.jb-filter select:focus { outline: 2px solid #2c6485; outline-offset: 1px; border-color: #2c6485; }

.jb-search__nut {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 6px;
  background: #a52020;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.jb-search__nut:hover { background: #8c1c1c; }

/* ── Dải ngành ──────────────────────────────────────────────────── */

.jb-nganh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.jb-nganh__nhan { color: #5b6670; font-size: 13px; font-weight: 700; }

.jb-nganh__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #dbe4ea;
  border-radius: 20px;
  background: #fff;
  color: #12294a;
  font-size: 13px;
  text-decoration: none;
}

.jb-nganh__chip b { color: #7c8892; font-size: 12px; font-weight: 700; }
.jb-nganh__chip:hover { border-color: #12294a; }
.jb-nganh__chip.la-chon { background: #12294a; border-color: #12294a; color: #fff; }
.jb-nganh__chip.la-chon b { color: rgba(255, 255, 255, .75); }

.jb-tieu-de-nganh { margin: 18px 0 0; color: #12294a; font-size: 20px; }

/* ── Thẻ vị trí ─────────────────────────────────────────────────── */

.jb-list { display: grid; margin-top: 18px; border: 1px solid #dde5ea; border-radius: 10px; background: #fff; overflow: hidden; }

.jb-card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border-bottom: 1px solid #e9eef2;
}

.jb-card:last-child { border-bottom: 0; }
.jb-card:hover { background: #fbfcfe; }

.jb-card__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: #f2f6fa;
  color: #2c6485;
}

.jb-card__icon svg { width: 26px; height: 26px; }

.jb-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jb-card__head h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.jb-card__head h3 a { color: #12294a; text-decoration: none; }
.jb-card__head h3 a:hover { color: #b3341f; text-decoration: underline; }
.jb-card__khi { flex: 0 0 auto; color: #7c8892; font-size: 12.5px; white-space: nowrap; }

.jb-card__noi { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: #5b6670; font-size: 13.5px; }
.jb-card__noi svg { width: 15px; height: 15px; flex: 0 0 15px; }
.jb-card__phu { color: #7c8892; }
.jb-card__mo { margin: 7px 0 0; color: #5b6670; font-size: 13.5px; line-height: 1.6; }

.jb-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.jb-card__tags span {
  padding: 3px 10px;
  border: 1px solid #dbe4ea;
  border-radius: 20px;
  background: #f6f9fb;
  color: #4a5560;
  font-size: 12px;
}

/* ── Nút trên thẻ ───────────────────────────────────────────────── */

.jb-card__hanh-dong { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }

.jb-card__xem,
.jb-card__ung-tuyen {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.jb-card__xem { border: 1px solid #12294a; background: #fff; color: #12294a; }
.jb-card__xem:hover { background: #12294a; color: #fff !important; }

/* !important cho màu chữ: theme đặt màu cho mọi thẻ <a> ở độ ưu tiên cao hơn, nuốt
   mất color:#fff — đo trên bản live ra chữ #202124 trên nền #6e1313, gần như không
   đọc nổi. Đây là nút, không phải link trong câu văn, nên ép màu là đúng. */
.jb-card__ung-tuyen { border: 1px solid #a52020; background: #a52020; color: #fff !important; }
.jb-card__ung-tuyen:hover { background: #8c1c1c; border-color: #8c1c1c; }

/* Mô tả đầy đủ nằm sẵn trong trang cho Google đọc, chỉ ẩn khỏi mắt người dùng. */
.jb-card__day { display: none; }

/* ── Phân trang ─────────────────────────────────────────────────── */

.jb-trang { display: flex; justify-content: center; margin-top: 20px; }
.jb-trang .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  margin: 0 3px;
  padding: 0 8px;
  border: 1px solid #dde5ea;
  border-radius: 6px;
  color: #12294a;
  font-size: 14px;
  text-decoration: none;
}

.jb-trang .page-numbers.current { background: #a52020; border-color: #a52020; color: #fff; font-weight: 700; }
.jb-trang .page-numbers:hover:not(.current) { border-color: #12294a; }
.jb-trang .dots { border: 0; }

.jb-trong,
.jb-loi {
  margin-top: 18px;
  padding: 22px;
  border: 1px dashed #cdd8e0;
  border-radius: 10px;
  color: #5b6670;
  background: #fbfcfd;
}

/* ── Cột phải ───────────────────────────────────────────────────── */

.jb__ben { display: grid; gap: 14px; position: sticky; top: 96px; }

.jb-cta { padding: 18px 20px; border: 1px solid #e4e9ee; border-radius: 10px; background: #fff; }
.jb-cta h3 { margin: 0 0 8px; color: #12294a; font-size: 16px; line-height: 1.35; }
.jb-cta p { margin: 0 0 14px; color: #5b6670; font-size: 13.5px; line-height: 1.6; }

.jb-cta__nut {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.jb-cta--do { border-color: #f0d7d7; background: #fdf6f6; }
.jb-cta--do .jb-cta__nut { background: #a52020; }
.jb-cta--xanh { border-color: #d3e6da; background: #f5faf7; }
.jb-cta--xanh .jb-cta__nut { background: #1f7a4d; }
.jb-cta--lam { border-color: #d6e3f0; background: #f5f9fd; }
.jb-cta--lam .jb-cta__nut { background: #1d4f9c; }
.jb-cta--cam { border-color: #f2e0cd; background: #fdf9f4; }
.jb-cta--cam .jb-cta__nut { background: #c2701c; }

/* ── Màn hẹp ────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .jb { grid-template-columns: 1fr; }
  .jb__ben { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .jb-search__grid { grid-template-columns: 1fr; }
  .jb__ben { grid-template-columns: 1fr; }
  .jb-card { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .jb-card__icon { width: 46px; height: 46px; }
  .jb-card__icon svg { width: 21px; height: 21px; }
  .jb-card__head { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Tên vị trí là lối vào chính trên điện thoại nhưng chỉ cao 23px — dưới ngưỡng bấm
     trúng bằng ngón tay. */
  .jb-card__head h3 a { display: inline-flex; align-items: center; min-height: 32px; }
}


/* ── Popup mô tả công việc ──────────────────────────────────────── */

.jb-popup { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
.jb-popup[hidden] { display: none; }
.jb-popup__nen { position: absolute; inset: 0; background: rgba(9, 22, 40, .62); }

.jb-popup__hop {
  position: relative;
  width: min(720px, 100%);
  max-height: min(84vh, 780px);
  overflow-y: auto;
  padding: 28px 30px 26px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(9, 22, 40, .32);
}

.jb-popup__hop:focus { outline: none; }

.jb-popup__dong {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f8;
  color: #4a5560;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.jb-popup__dong:hover { background: #e3eaef; color: #12294a; }

.jb-popup__hop h3 { margin: 0 40px 6px 0; color: #12294a; font-size: 22px; line-height: 1.3; }
.jb-popup__noi { margin: 0 0 16px; color: #5b6670; font-size: 14px; }
.jb-popup__noi[hidden] { display: none; }
.jb-popup__mo { color: #33414c; font-size: 14.5px; line-height: 1.75; }
.jb-popup__mo p { margin: 0 0 12px; }

.jb-popup__chan {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e6ecf1;
}

.jb-popup__ung-tuyen,
.jb-popup__gui {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.jb-popup__ung-tuyen { background: #a52020; color: #fff !important; }
.jb-popup__ung-tuyen:hover { background: #8c1c1c; }
.jb-popup__gui { border: 1px solid #12294a; color: #12294a !important; }
.jb-popup__gui:hover { background: #12294a; color: #fff !important; }

/* Khoá cuộn nền khi popup mở, tránh cảnh cuộn nhầm trang phía sau. */
body.jb-khoa-cuon { overflow: hidden; }

@media (max-width: 600px) {
  .jb-popup { padding: 0; }
  .jb-popup__hop { max-height: 100vh; height: 100vh; width: 100%; border-radius: 0; padding: 24px 20px; }
}


/* ── Quy trình: hàng ngang 6 bước ───────────────────────────────── */

/* Markup dùng .lp-steps > article.lp-step, trong khi CSS sẵn có của theme nhắm
   .jobs-process__grid > li — hai bên không gặp nhau nên 6 bước đang xếp dọc. Viết lại
   theo đúng lớp có thật trong trang. */

.cnk-landing-page .jobs-process .lp-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 0;
  list-style: none;
}

.cnk-landing-page .jobs-process .lp-step {
  position: relative;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  text-align: center;
}

/* Nét đứt nối các bước, vẽ ngang qua tâm vòng số. */
.cnk-landing-page .jobs-process .lp-step + .lp-step::before {
  content: "";
  position: absolute;
  top: 27px;
  right: 67%;
  left: -33%;
  border-top: 1px dashed #8fa9b8;
}

.cnk-landing-page .jobs-process .lp-index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--lp-blue, #2c6485);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.cnk-landing-page .jobs-process .lp-step:nth-child(3n) .lp-index { background: #a52020; }
.cnk-landing-page .jobs-process .lp-step h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; }
.cnk-landing-page .jobs-process .lp-step p { margin: 0; color: var(--lp-gray, #5b6670); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 1080px) {
  .cnk-landing-page .jobs-process .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 0; }
  .cnk-landing-page .jobs-process .lp-step:nth-child(4)::before { display: none; }
}

@media (max-width: 700px) {
  /* Hàng ngang trên điện thoại thì chữ bé như hạt gạo — chuyển sang từng dòng, số
     nằm bên trái để vẫn đọc được thứ tự. */
  .cnk-landing-page .jobs-process .lp-steps { grid-template-columns: 1fr; gap: 22px; }
  .cnk-landing-page .jobs-process .lp-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 4px 14px;
    padding: 0;
    text-align: left;
  }
  .cnk-landing-page .jobs-process .lp-step::before { display: none; }
  .cnk-landing-page .jobs-process .lp-index { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .cnk-landing-page .jobs-process .lp-step h3 { align-self: end; }
}

/* ── FAQ: căn giữa, thu gọn ─────────────────────────────────────── */

.cnk-landing-page .jobs-faq { padding: clamp(48px, 5vw, 70px) 0; }
.cnk-landing-page .jobs-faq .lp-section__head { margin-bottom: 22px; text-align: center; }
.cnk-landing-page .jobs-faq .lp-section__head-main { margin-inline: auto; }
.cnk-landing-page .jobs-faq .lp-section__head h2 { margin-bottom: 8px; }
.cnk-landing-page .jobs-faq .lp-section__head p { margin: 0 auto; max-width: 620px; }

.cnk-landing-page .jobs-faq .lp-faq { max-width: 760px; margin-inline: auto; }
.cnk-landing-page .jobs-faq .lp-faq summary { padding: 14px 0; }
.cnk-landing-page .jobs-faq .lp-faq details p { margin: 0 0 14px; }