/* ============================================================
   recruit.css — Trang Tuyển dụng (trang 26) và
   Thông tin tuyển dụng (trang 27) file thiết kế.
   .job-card, .page-head, .form-grid, .field--file nằm ở common.css.
   ============================================================ */

/* ===== 1 · DANH SÁCH VỊ TRÍ (trang 26) ===== */
.recruit { padding-bottom: var(--sp-section); }
.recruit__list { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.job-card__info { min-width: 0; }
/* Trang 26 file thiết kế xếp địa điểm và mức lương thành hai dòng
   (design-system.html trình bày .job-card__meta nằm ngang) */
.recruit .job-card__meta { flex-direction: column; gap: 6px; }

/* ===== 2 · CHI TIẾT VỊ TRÍ (trang 27) ===== */
/* Nay là thẻ `img` chứ không còn ô chờ: khung 16/4.5 rất dẹt nên phải cover. */
.job-detail__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 4.5;
  border-radius: var(--r-md);
  background: var(--c-grey-light);
  object-fit: cover;
}

.job-detail__body {
  margin-top: clamp(26px, 3.4vw, 40px);
  font-size: var(--fs-sm);
  color: var(--c-body);
}
.job-detail__body h2 { font-size: var(--fs-body); font-weight: var(--fw-title); letter-spacing: .01em; }
.job-detail__body h2 + .job-detail__list { margin-top: 10px; }
.job-detail__list + h2 { margin-top: 26px; }

/* Gạch đầu dòng tròn — thiết kế dùng ký tự • đứng trước mỗi ý */
.job-detail__list li,
.job-detail__note li { position: relative; padding-left: 18px; line-height: 1.75; }
.job-detail__list li::before {
  content: "•"; position: absolute; left: 2px; top: 0; color: var(--c-body);
}
/* Nhóm thông tin cuối (thu nhập, giờ làm, địa điểm) dùng gạch ngang */
.job-detail__note { margin-top: 26px; }
.job-detail__note li::before {
  content: "-"; position: absolute; left: 2px; top: 0; color: var(--c-body);
}

/* ===== 3 · FORM ỨNG TUYỂN (trang 27) ===== */
.apply { padding-block: clamp(40px, 5.5vw, 70px) var(--sp-section); }
.apply__title { margin-bottom: clamp(24px, 3.2vw, 38px); }
.apply__col { display: grid; gap: clamp(16px, 1.8vw, 22px); align-content: start; }

/* Cột CV KÉO DÀI bằng cột trái thay vì chốt `min-height: 244px` như bản cũ.
   Con số cứng đó chỉ đúng ở một bề rộng: nhãn và ô nhập bên trái co giãn theo
   clamp() nên hai cột lệch đáy ở mọi khổ khác — đúng chỗ khoảng trống mà client
   chỉ ra. `1fr` cho ô thả ăn hết phần cao còn lại, tự khớp ở mọi khổ. */
.apply__col--cv { align-content: stretch; }
.apply__col--cv .field--file {
  display: grid; grid-template-rows: auto 1fr auto; height: 100%;
}
.apply__col--cv .field--file .field__drop { min-height: 190px; }

.apply__actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: clamp(6px, 1vw, 12px);
}
/* Cụm chữ bên trái giữ hàng nút khỏi trôi lơ lửng một mình ở góc phải, đồng
   thời trả lời sẵn câu hỏi "gửi CV đi thì dùng vào việc gì". */
.apply__assure {
  flex: 1 1 320px; min-width: 0;
  font-size: var(--fs-xs); color: var(--c-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.apply__assure .icon { width: 15px; height: 15px; flex: none; opacity: .7; }

/* Dòng trạng thái sau khi gửi: nền nhạt + viền để đọc ra là một THÔNG BÁO,
   `:not(:empty)` nên lúc chưa gửi nó không chiếm chỗ. */
.apply__note { font-size: var(--fs-xs); color: var(--c-primary); }
.apply__note:not(:empty) {
  flex: 1 1 320px;
  padding: 10px 14px; border-radius: var(--r-field);
  background: color-mix(in srgb, var(--c-primary) 8%, #fff);
  border: var(--bw) solid color-mix(in srgb, var(--c-primary) 35%, #fff);
}
.apply__note.is-error { color: #c0392b; }
.apply__note.is-error:not(:empty) {
  background: color-mix(in srgb, #c0392b 7%, #fff);
  border-color: color-mix(in srgb, #c0392b 35%, #fff);
}
/* Có thông báo rồi thì lời cam kết nhường chỗ — không để hai khối chữ chen nhau */
.apply__form:has(.apply__note:not(:empty)) .apply__assure { display: none; }

@media (max-width: 720px) {
  .job-detail__media { aspect-ratio: 16 / 7; }
  .apply__col--cv { align-content: start; }
  .apply__col--cv .field--file { height: auto; }
  .apply__actions { justify-content: stretch; }
  .apply__actions .btn { width: 100%; }
}

/* ===== HÀNG LỌC (phản hồi client 30/07/2026 — thiết kế R6 chưa vẽ) =====
   Cùng dáng với hàng lọc trang Dự án: ba ô nằm ngang, căn giữa trên danh sách.
   Ô select mặc định là width:100% (dựng cho sidebar dọc) nên phải ghim lại
   bề rộng, nếu không mỗi ô chiếm trọn một dòng. */
.recruit__filters {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: clamp(16px, 2vw, 22px);
}
.recruit__filters .re-select-main--field { flex: 0 1 300px; min-width: 220px; }
.recruit__filters .filter__reset { flex: none; }

/* Hàng lọc trên điện thoại — cùng cách xử lý với trang Dự án (project-page.css).
   Sau khi bỏ ô "Bộ phận" (yêu cầu client 30/07/2026) chỉ còn một ô select, nên
   grid `1fr auto` cho ô Địa điểm ăn hết bề ngang còn lại, nút reset bám mép phải. */
@media (max-width: 640px) {
  .recruit__filters {
    display: grid; grid-template-columns: 1fr auto; gap: 8px;
  }
  .recruit__filters .re-select-main--field { flex: initial; min-width: 0; }
  .recruit__filters .re-select__btn { padding: 0 10px; }
}

.recruit .pagination { margin-top: clamp(28px, 3.4vw, 44px); }