/* ============================================================
   JobBoard — public stylesheet. Mobile-first (thiết kế từ 360px lên).
   Phụ thuộc: tokens.css (nạp trước). Chỉ dùng token ngữ nghĩa tầng 2.
   ============================================================ */

body {
  font-size:var(--text-base);
  line-height:var(--lh-base);
}

a {
  color:var(--brand-fg);
  text-underline-offset:2px;
  transition:color var(--dur-fast) var(--ease-out);
}
a:hover { color:var(--brand-fg-hover); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:var(--z-header);
  background:color-mix(in srgb, var(--bg-canvas) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-default);
}
@supports not (backdrop-filter:blur(1px)) {
  .site-header { background:var(--bg-canvas); }
}

.site-header__bar {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-4);
  min-height:56px;
  max-width:1200px; margin:0 auto;
}

.site-header__logo {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-weight:var(--fw-bold); font-size:var(--text-lg);
  letter-spacing:var(--tracking-tight);
  color:var(--fg-strong); text-decoration:none;
  min-height:var(--tap);
}
.site-header__logo:hover { color:var(--fg-strong); }
/* Tên sàn dài; ở 360px nó ngắt thành 2 dòng lệch. Thu chữ và cắt gọn thay vì
   để header cao gấp đôi. */
@media (max-width:420px) {
  .site-header__logo {
    font-size:var(--text-base); line-height:1.25;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}
/* Dấu nhận diện: chấm thương hiệu thay cho logo chữ trần */
.site-header__logo::before {
  content:""; width:26px; height:26px; flex:none;
  border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--green-500), var(--green-700));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

.site-header__search {
  display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap; flex:none;
  min-height:var(--tap-dense); padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--border-default); border-radius:var(--r-full);
  background:var(--bg-subtle); color:var(--fg-muted);
  font-size:var(--text-md); font-weight:var(--fw-medium);
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.site-header__search:hover {
  background:var(--bg-hover); border-color:var(--border-strong); color:var(--fg-default);
}
.site-header__nav { display:flex; align-items:center; gap:var(--sp-3); flex:none; }
.site-header__employer {
  display:inline-flex; align-items:center; min-height:var(--tap);
  font-size:var(--text-md); font-weight:var(--fw-medium); white-space:nowrap;
}
/* 360px: logo + ô tìm đã kín hàng. Lối vào NTD còn ở khối cuối trang chủ + footer. */
@media (max-width:480px) { .site-header__employer { display:none; } }

/* ============================================================
   Khung trang
   ============================================================ */
.site-main {
  padding:var(--sp-5) var(--sp-4) var(--sp-9);
  max-width:760px; margin:0 auto;
}

.site-footer {
  border-top:1px solid var(--border-default);
  background:var(--bg-subtle);
  padding:var(--sp-7) var(--sp-4);
  color:var(--fg-muted); font-size:var(--text-md);
}
.site-footer__links {
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  max-width:1200px; margin:0 auto var(--sp-4);
}
.site-footer__links a {
  color:var(--fg-muted); text-decoration:none;
  min-height:var(--tap-dense); display:inline-flex; align-items:center;
}
.site-footer__links a:hover { color:var(--brand-fg); text-decoration:underline; }
.site-footer__note {
  max-width:1200px; margin:0 auto;
  color:var(--fg-subtle); font-size:var(--text-sm);
}

/* ============================================================
   Nút — biến thể + trạng thái đầy đủ
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap); padding:0 var(--sp-5);
  background:var(--brand-bg); color:var(--brand-on);
  border:1px solid transparent; border-radius:var(--r-md);
  font-size:var(--text-base); font-weight:var(--fw-semibold); font-family:inherit;
  line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:hover  { background:var(--brand-bg-hover); color:var(--brand-on); box-shadow:var(--shadow-sm); }
.btn:active { background:var(--brand-bg-active); transform:translateY(1px); box-shadow:none; }
.btn[disabled], .btn[aria-disabled="true"] {
  background:var(--bg-muted); color:var(--fg-disabled);
  cursor:not-allowed; box-shadow:none; transform:none;
}

/* .btn--primary được dùng 15 chỗ trong markup nhưng trước đây không có rule nào */
.btn--primary { background:var(--brand-bg); color:var(--brand-on); }
.btn--primary:hover { background:var(--brand-bg-hover); }

.btn--ghost {
  background:transparent; color:var(--brand-fg);
  border-color:var(--brand-border); box-shadow:none;
}
.btn--ghost:hover { background:var(--brand-bg-subtle); color:var(--brand-fg-hover); border-color:var(--brand-fg); }
.btn--ghost:active { background:var(--brand-bg-subtle); }

.btn--secondary {
  background:var(--bg-surface); color:var(--fg-default); border-color:var(--border-strong);
}
.btn--secondary:hover { background:var(--bg-hover); color:var(--fg-default); border-color:var(--border-strong); }

/* .btn--danger cũng là class mồ côi trong bản cũ */
.btn--danger { background:var(--danger-bg); color:var(--danger-on); }
.btn--danger:hover { background:var(--danger-bg-hover); color:var(--danger-on); }

.btn--sm { min-height:var(--tap-dense); padding:0 var(--sp-3); font-size:var(--text-md); }
.btn--lg { min-height:52px; padding:0 var(--sp-6); font-size:var(--text-lg); }
.btn--block { width:100%; }

.link-button {
  background:none; border:0; color:var(--brand-fg); text-decoration:underline;
  text-underline-offset:2px; cursor:pointer;
  padding:var(--sp-2) 0; min-height:var(--tap);
  font-size:inherit; font-family:inherit;
}
.link-button:hover { color:var(--brand-fg-hover); }

/* ============================================================
   Form
   ============================================================ */
input, select, textarea, button { font-family:inherit; font-size:var(--text-base); }

/* 16px tối thiểu cho input để iOS không tự phóng to */
input[type=search], input[type=email], input[type=password], input[type=text],
input[type=tel], input[type=file], input[type=number], input[type=date],
input[type=url], textarea, select,
.field__input {
  width:100%; min-height:var(--tap);
  padding:var(--sp-3);
  background:var(--bg-surface); color:var(--fg-default);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  font-size:var(--text-base);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
textarea { min-height:120px; resize:vertical; line-height:var(--lh-base); }
select {
  appearance:none; padding-right:var(--sp-8); cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
input:hover, textarea:hover, select:hover { border-color:var(--fg-subtle); }
input::placeholder, textarea::placeholder { color:var(--fg-subtle); }
input[disabled], textarea[disabled], select[disabled] {
  background:var(--bg-muted); color:var(--fg-disabled); cursor:not-allowed;
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"],
.field--invalid .field__input {
  border-color:var(--danger-bg);
  box-shadow:0 0 0 3px var(--danger-bg-subtle);
}

.field { display:grid; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.field__label { font-weight:var(--fw-semibold); font-size:var(--text-md); color:var(--fg-default); }
.field__hint  { font-weight:var(--fw-normal); color:var(--fg-muted); font-size:var(--text-md); }
.field--check { grid-template-columns:auto 1fr; align-items:start; gap:var(--sp-3); }
.field--check input {
  width:20px; height:20px; min-height:0; margin-top:2px;
  accent-color:var(--brand-bg); cursor:pointer; box-shadow:none;
}
.field-error {
  display:flex; align-items:center; gap:var(--sp-2);
  color:var(--danger-fg); font-size:var(--text-md); font-weight:var(--fw-medium);
  margin:0;
}
.chk {
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:var(--tap); cursor:pointer;
}
.chk input { width:20px; height:20px; min-height:0; accent-color:var(--brand-bg); box-shadow:none; }

/* ============================================================
   Alert / flash
   Bản cũ định nghĩa .alert--danger nhưng markup gọi .alert--error (7 chỗ)
   → mọi hộp lỗi render ra màu xám trung tính. Ở đây nhận cả hai tên.
   ============================================================ */
.alert {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border-default); border-left-width:3px;
  border-radius:var(--r-md);
  background:var(--bg-subtle);
  font-size:var(--text-md); line-height:var(--lh-md);
  margin-bottom:var(--sp-4);
}
.alert ul { margin:var(--sp-2) 0 0; padding-left:var(--sp-5); }
.alert--ok, .alert--success {
  background:var(--ok-bg-subtle); border-color:var(--ok-border);
  border-left-color:var(--ok-fg); color:var(--ok-fg);
}
.alert--error, .alert--danger {
  background:var(--danger-bg-subtle); border-color:var(--danger-border);
  border-left-color:var(--danger-bg); color:var(--danger-fg);
}
.alert--warn {
  background:var(--warn-bg-subtle); border-color:var(--warn-border);
  border-left-color:var(--warn-bg); color:var(--warn-fg);
}
.alert--flag, .alert--info {
  background:var(--info-bg-subtle); border-color:var(--info-border);
  border-left-color:var(--info-fg); color:var(--info-fg);
}

/* Flash sau POST-redirect-GET (VD "Báo tin đã tuyển xong") */
.flash {
  display:flex; align-items:center; gap:var(--sp-3);
  margin:0 0 var(--sp-5); padding:var(--sp-3) var(--sp-4);
  background:var(--ok-bg-subtle); color:var(--ok-fg);
  border:1px solid var(--ok-border); border-left:3px solid var(--ok-fg);
  border-radius:var(--r-md);
  font-size:var(--text-md); font-weight:var(--fw-medium);
  animation:flash-in var(--dur-slow) var(--ease-out);
}
@keyframes flash-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ============================================================
   Badge / chip
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:2px var(--sp-2);
  border:1px solid transparent; border-radius:var(--r-full);
  background:var(--bg-muted); color:var(--fg-muted);
  font-size:var(--text-sm); font-weight:var(--fw-medium); line-height:1.6;
  white-space:nowrap;
}
.badge--info   { background:var(--info-bg-subtle);   color:var(--info-fg);   border-color:var(--info-border); }
.badge--warn   { background:var(--warn-bg-subtle);   color:var(--warn-fg);   border-color:var(--warn-border); }
.badge--danger { background:var(--danger-bg-subtle); color:var(--danger-fg); border-color:var(--danger-border); }
.badge--ok     { background:var(--ok-bg-subtle);     color:var(--ok-fg);     border-color:var(--ok-border); }
.badge--brand  { background:var(--brand-bg-subtle);  color:var(--brand-fg);  border-color:var(--brand-border); }

/* ============================================================
   Trang chủ
   ============================================================ */
.home-hero {
  padding:var(--sp-7) 0 var(--sp-6);
  border-bottom:1px solid var(--border-subtle);
  margin-bottom:var(--sp-2);
}
.home-hero h1 {
  font-size:var(--text-3xl); line-height:var(--lh-3xl);
  margin-bottom:var(--sp-3);
  text-wrap:balance;
}
.home-hero > p { color:var(--fg-muted); font-size:var(--text-lg); line-height:var(--lh-lg); }

/* Grid, không flex: quy tắc chung `select { width:100% }` làm ô chọn tỉnh chiếm hết
   hàng và bóp ô từ khóa còn vài pixel. Cột từ khóa luôn là phần còn lại. */
.home-search {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,200px) auto;
  gap:var(--sp-2); margin-top:var(--sp-5);
}
/* ≤ 480px: từ khóa một hàng riêng, tỉnh + nút Tìm hàng dưới. */
@media (max-width:480px) {
  .home-search { grid-template-columns:minmax(0,1fr) auto; }
  .home-search input { grid-column:1 / -1; }
}

.section-title {
  font-size:var(--text-xl); line-height:var(--lh-xl);
  margin:var(--sp-7) 0 var(--sp-4);
}

/* ============================================================
   Danh sách việc + card
   ============================================================ */
.job-list__items { display:flex; flex-direction:column; gap:var(--sp-3); }

.job-card {
  display:block; position:relative;
  padding:var(--sp-4);
  background:var(--bg-surface);
  border:1px solid var(--border-default); border-radius:var(--r-lg);
  text-decoration:none; color:var(--fg-default);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.job-card:hover {
  border-color:var(--brand-border);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
  color:var(--fg-default);
}
.job-card:active { transform:translateY(0); box-shadow:var(--shadow-xs); }
.job-card:focus-visible { transform:translateY(-2px); }

.job-card__title {
  font-size:var(--text-lg); line-height:var(--lh-lg);
  margin:0 0 var(--sp-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  line-clamp:2; overflow:hidden;
}
.job-card:hover .job-card__title { color:var(--brand-fg); }

.job-card__salary {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-weight:var(--fw-bold); font-size:var(--text-lg);
  color:var(--brand-fg); margin:0 0 var(--sp-3);
  font-variant-numeric:tabular-nums;
}

.job-card__meta, .job-card__employer {
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  margin:var(--sp-1) 0; color:var(--fg-muted); font-size:var(--text-md);
}
.job-card__partner { font-size:var(--text-xs); }
.job-detail__partner { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }

/* S8-T1: khối "Việc làm từ doanh nghiệp đối tác" ở trang chủ */
.partner-block {
  margin:var(--sp-6) 0 0;
  padding:var(--sp-4);
  background:var(--brand-bg-subtle);
  border:1px solid var(--brand-border); border-radius:var(--r-xl);
}
.partner-block__title {
  display:flex; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-1); color:var(--brand-fg);
}
.partner-block__lead { margin:0 0 var(--sp-4); color:var(--fg-muted); font-size:var(--text-md); }
.partner-block__items { display:grid; gap:var(--sp-3); }
@media (min-width:640px) {
  .partner-block { padding:var(--sp-5); }
  .partner-block__items { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1280px) {
  .partner-block__items { grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* Lời mời NTD cuối trang chủ */
.employer-cta {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  margin:var(--sp-8) 0 0; padding:var(--sp-5);
  background:var(--bg-subtle);
  border:1px solid var(--border-default); border-radius:var(--r-lg);
}
.employer-cta p { margin:0; color:var(--fg-muted); }
.employer-cta__title { font-size:var(--text-xl); line-height:var(--lh-xl); margin:0 0 var(--sp-1); }

.job-card__verified, .job-card__stale {
  display:flex; align-items:center; gap:var(--sp-2);
  margin:var(--sp-3) 0 0; padding-top:var(--sp-3);
  border-top:1px solid var(--border-subtle);
  font-size:var(--text-sm);
}
.job-card__verified { color:var(--fg-subtle); }
.job-card__stale    { color:var(--warn-fg); font-weight:var(--fw-medium); }

/* Tin cũ: giảm nổi bật nhưng vẫn đọc được — không dùng opacity vì nó
   làm mờ luôn chữ và tụt tương phản dưới ngưỡng AA. */
.job-card--stale { background:var(--bg-subtle); border-style:dashed; }

.widen-notice {
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--warn-bg-subtle); border:1px solid var(--warn-border);
  border-left:3px solid var(--warn-bg);
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); font-size:var(--text-md);
  margin-bottom:var(--sp-4); color:var(--warn-fg);
}
.widen-notice a { align-self:flex-start; font-weight:var(--fw-semibold); }

.empty-state {
  display:grid; gap:var(--sp-3); justify-items:center;
  padding:var(--sp-9) var(--sp-4); text-align:center;
  color:var(--fg-muted);
  background:var(--bg-subtle); border:1px dashed var(--border-strong);
  border-radius:var(--r-lg);
}

/* ============================================================
   Bộ lọc — bottom sheet trên mobile, sidebar dính trên desktop
   ============================================================ */
.filter-sheet {
  background:var(--bg-surface);
  border:1px solid var(--border-default); border-radius:var(--r-lg);
  margin-bottom:var(--sp-5);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
.filter-sheet__toggle {
  list-style:none; cursor:pointer;
  padding:var(--sp-3) var(--sp-4); min-height:var(--tap);
  display:flex; align-items:center; gap:var(--sp-2);
  font-weight:var(--fw-semibold);
  transition:background var(--dur-fast) var(--ease-out);
}
.filter-sheet__toggle:hover { background:var(--bg-hover); }
.filter-sheet__toggle::-webkit-details-marker { display:none; }
.filter-sheet__toggle::after {
  content:""; margin-left:auto;
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur) var(--ease-out);
}
.filter-sheet[open] .filter-sheet__toggle::after { transform:rotate(-135deg) translate(-2px,-2px); }
.filter-sheet[open] .filter-sheet__toggle { border-bottom:1px solid var(--border-default); }

.filter-sheet__form { padding:var(--sp-4); display:grid; gap:var(--sp-4); }
.filter-sheet__form fieldset {
  border:1px solid var(--border-default); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4) var(--sp-4); margin:0;
}
.filter-sheet__form legend {
  padding:0 var(--sp-2); font-size:var(--text-md); font-weight:var(--fw-semibold);
  color:var(--fg-muted);
}
.filter-sheet__form label { display:block; }
.filter-sheet__form .chk { min-height:var(--tap); }
.filter-sheet__actions { display:flex; gap:var(--sp-2); }
.filter-sheet__actions .btn { flex:1; }

/* ============================================================
   Chi tiết tin
   ============================================================ */
.job-detail { padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
.job-detail h1 {
  font-size:var(--text-2xl); line-height:var(--lh-2xl);
  margin-bottom:var(--sp-3); text-wrap:balance;
}
.job-detail__salary {
  display:block; font-weight:var(--fw-bold);
  font-size:var(--text-2xl); color:var(--brand-fg);
  font-variant-numeric:tabular-nums; margin-bottom:var(--sp-3);
}
.job-detail__meta, .job-detail__verified {
  color:var(--fg-muted); font-size:var(--text-md);
}
.job-detail__verified {
  display:flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-2); color:var(--fg-subtle); font-size:var(--text-sm);
}

/* Bảng "thông tin nhanh" — class có trong markup, trước đây không có CSS.
   dt/dd là hai phần tử anh em nên xếp theo cặp nhãn | giá trị trên cùng một
   hàng; auto-fit sẽ tách rời cặp và đọc thành 4 ô rời rạc. */
.job-detail__facts {
  display:grid; grid-template-columns:max-content 1fr;
  gap:var(--sp-2) var(--sp-5);
  padding:var(--sp-4); margin:var(--sp-5) 0;
  background:var(--bg-subtle);
  border:1px solid var(--border-default); border-radius:var(--r-lg);
}
.job-detail__facts dt { font-size:var(--text-md); color:var(--fg-muted); }
.job-detail__facts dd { margin:0; font-weight:var(--fw-semibold); font-size:var(--text-md); }

.job-detail__apply { margin-top:var(--sp-7); }

.job-detail__related { margin-top:var(--sp-8); }
.job-detail__related h2 { font-size:var(--text-xl); margin-bottom:var(--sp-4); }

.job-detail__report {
  margin-top:var(--sp-7); padding-top:var(--sp-4);
  border-top:1px solid var(--border-subtle);
  font-size:var(--text-md); color:var(--fg-subtle);
}

/* Thanh hành động dính đáy — "Gọi ngay" là hành động chính của cả sản phẩm */
.sticky-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
  display:flex; gap:var(--sp-2);
  padding:var(--sp-3);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--bg-canvas) 92%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--border-default);
  box-shadow:var(--shadow-up);
}
@supports not (backdrop-filter:blur(1px)) { .sticky-bar { background:var(--bg-canvas); } }

.sticky-bar__btn {
  flex:1; min-height:52px;
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  border:1px solid var(--brand-border); border-radius:var(--r-md);
  background:var(--bg-surface); color:var(--brand-fg);
  text-decoration:none; font-weight:var(--fw-semibold); font-size:var(--text-base);
  transition:background var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.sticky-bar__btn:hover  { background:var(--brand-bg-subtle); color:var(--brand-fg); }
.sticky-bar__btn:active { transform:translateY(1px); }
.sticky-bar__btn--call {
  background:var(--brand-bg); color:var(--brand-on); border-color:transparent;
  box-shadow:var(--shadow-sm);
}
.sticky-bar__btn--call:hover { background:var(--brand-bg-hover); color:var(--brand-on); }

/* ============================================================
   Ứng tuyển
   ============================================================ */
.apply-form { display:grid; gap:var(--sp-4); }
.apply-form .field { margin-bottom:0; }
.apply-form__note { color:var(--fg-muted); font-size:var(--text-md); }

.apply-confirm {
  display:grid; gap:var(--sp-3);
  border:1px solid var(--ok-border); border-radius:var(--r-lg);
  padding:var(--sp-6); background:var(--ok-bg-subtle);
  animation:flash-in var(--dur-slow) var(--ease-out);
}
.apply-confirm h2 { margin-top:0; color:var(--ok-fg); font-size:var(--text-xl); }

/* ============================================================
   Phân trang
   ============================================================ */
.pager { display:flex; gap:var(--sp-3); margin-top:var(--sp-7); }
.pager__link {
  min-height:var(--tap); display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:0 var(--sp-5);
  background:var(--bg-surface); color:var(--fg-default);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  text-decoration:none; font-weight:var(--fw-medium);
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.pager__link:hover { background:var(--bg-hover); border-color:var(--fg-subtle); color:var(--fg-default); }
.pager__link:last-child { margin-left:auto; }

/* ============================================================
   Trang tĩnh / lỗi / đã gỡ
   ============================================================ */
.coming-soon, .error-page, .gone-page {
  display:grid; gap:var(--sp-4); justify-items:center;
  padding:var(--sp-10) 0; text-align:center;
}
.error-page h1, .gone-page h1 { font-size:var(--text-2xl); }
.error-page__actions { display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }
.error-page__search { margin-top:var(--sp-6); display:grid; gap:var(--sp-2); width:100%; max-width:420px; }

.prose { max-width:68ch; padding-bottom:var(--sp-9); }
.prose h1 { font-size:var(--text-2xl); line-height:var(--lh-2xl); margin:var(--sp-5) 0 var(--sp-4); }
.prose h2 { font-size:var(--text-lg); margin:var(--sp-7) 0 var(--sp-3); }
.prose h3 { font-size:var(--text-base); margin:var(--sp-5) 0 var(--sp-2); }
.prose p, .prose li { line-height:1.7; color:var(--fg-default); }
.prose p { margin-bottom:var(--sp-4); }
.prose ul, .prose ol { padding-left:var(--sp-6); margin:0 0 var(--sp-4); }
.prose li { margin-bottom:var(--sp-2); }
.prose a { text-decoration:underline; }
.prose hr { border:0; border-top:1px solid var(--border-default); margin:var(--sp-7) 0; }

/* ============================================================
   NTD Lite (khu Employer) — mobile-first
   ============================================================ */
.ntd-notice { max-width:480px; display:grid; gap:var(--sp-4); }
.ntd-notice h1 { margin-top:var(--sp-4); font-size:var(--text-2xl); }

.ntd-resend, .ntd-post-form, .ntd-profile-form { display:grid; gap:var(--sp-4); max-width:520px; }
.ntd-logout { margin-left:0; }

/* Thanh điều hướng NTD: đẩy nhóm nav + nút Thoát về bên phải header. */
.ntd-nav {
  margin-left:auto; flex:none;
  display:flex; align-items:center; gap:var(--sp-3);
  font-size:var(--text-md);
}
.ntd-nav a { min-height:var(--tap); display:inline-flex; align-items:center; white-space:nowrap; }
/* Ở màn hẹp logo đã trỏ về /ntd rồi — bỏ link trùng để header không xuống dòng. */
@media (max-width:520px) { .ntd-nav a.ntd-nav__home { display:none; } }

/* Thông tin của tôi: khối cố định (ops giữ) ở trên, form tự sửa ở dưới. */
.ntd-profile__fixed, .ntd-profile__edit { margin-bottom:var(--sp-6); }
.ntd-profile__dl {
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-3) 0 0;
  padding:var(--sp-4);
  background:var(--bg-subtle);
  border:1px solid var(--border-default);
  border-radius:var(--r-md);
}
.ntd-profile__dl dt { color:var(--fg-muted); }
.ntd-profile__dl dd { margin:0; font-weight:var(--fw-semibold); }
@media (max-width:520px) {
  .ntd-profile__dl { grid-template-columns:1fr; gap:var(--sp-1) 0; }
  .ntd-profile__dl dd { margin-bottom:var(--sp-3); }
}

.ntd-job-list, .ntd-application-list, .ntd-applications {
  list-style:none; padding:0; margin:0; display:grid; gap:var(--sp-3);
}
.ntd-job, .ntd-application {
  background:var(--bg-surface);
  border:1px solid var(--border-default); border-radius:var(--r-lg);
  padding:var(--sp-4);
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.ntd-job:hover, .ntd-application:hover { box-shadow:var(--shadow-sm); border-color:var(--border-strong); }
.ntd-job--urgent {
  border-color:var(--warn-border);
  box-shadow:inset 3px 0 0 var(--warn-bg), var(--shadow-xs);
}
.ntd-job__title {
  font-weight:var(--fw-semibold); font-size:var(--text-lg); display:block;
  margin-bottom:var(--sp-1);
}
.ntd-job__meta, .ntd-application .muted {
  color:var(--fg-muted); font-size:var(--text-md);
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
}
.ntd-job__confirm, .ntd-job__actions { margin-top:var(--sp-3); }
.ntd-actions, .ntd-value-q { display:flex; gap:var(--sp-2); margin:var(--sp-4) 0; flex-wrap:wrap; }

.ntd-application__head {
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-2);
}
.ntd-application__reply { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
.inline-form { display:inline-flex; gap:var(--sp-2); align-items:center; margin:0; flex-wrap:wrap; }

/* Phễu NTD — không bao giờ hiện số 0 đơn độc (§8.4) */
.ntd-funnel .funnel, .ntd-funnel ol, .funnel {
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr));
  gap:var(--sp-2);
}
.ntd-funnel .funnel li, .funnel li {
  background:var(--bg-subtle);
  border:1px solid var(--border-default); border-radius:var(--r-md);
  padding:var(--sp-3);
}
.funnel__label { display:block; font-size:var(--text-xs); color:var(--fg-subtle); margin-bottom:var(--sp-1); }
.funnel__value { font-weight:var(--fw-bold); font-size:var(--text-xl); font-variant-numeric:tabular-nums; }
.funnel__working {
  display:flex; align-items:center; gap:var(--sp-2);
  color:var(--brand-fg); font-size:var(--text-md); font-weight:var(--fw-medium);
  margin-top:var(--sp-3);
}
/* Chấm nhịp: dòng "chuyên viên đang lọc hồ sơ" phải trông như việc đang chạy thật */
.funnel__working::before {
  content:""; width:8px; height:8px; border-radius:var(--r-full);
  background:var(--brand-bg); flex:none;
  animation:pulse-dot 1.8s var(--ease-in-out) infinite;
}
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.75); } }

.ntd-post-form__salary { display:flex; gap:var(--sp-2); }
.ntd-post-form__salary input { min-width:0; }
.ntd-post-form__radios { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin-bottom:var(--sp-2); }
.ntd-post-form__radios .chk { min-height:var(--tap); }
.ntd-post-form__pair { display:grid; gap:var(--sp-4); }
@media (min-width:520px) { .ntd-post-form__pair { grid-template-columns:1fr 1fr; } }
.ntd-post-form { max-width:640px; }

/* S8: nhãn "Đăng tin" trên header — ở màn hẹp đã có nút lớn trên dashboard. */
@media (max-width:520px) { .ntd-nav a.ntd-nav__post { display:none; } }

/* Dashboard: tiêu đề + nút đăng tin cùng hàng từ tablet trở lên */
.ntd-head {
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.ntd-head h1 { margin:0 0 var(--sp-1); }
.ntd-head__who {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  margin:0; color:var(--fg-muted); font-size:var(--text-md);
}

/* Tab lọc trạng thái — cuộn ngang ở 360px thay vì xuống dòng */
.ntd-tabs {
  display:flex; gap:var(--sp-2); overflow-x:auto;
  margin:var(--sp-4) 0; padding-bottom:var(--sp-1);
  scrollbar-width:thin;
}
.ntd-tabs__tab {
  display:inline-flex; align-items:center; gap:var(--sp-2); flex:none;
  min-height:var(--tap); padding:0 var(--sp-4);
  border:1px solid var(--border-default); border-radius:var(--r-full);
  background:var(--bg-surface); color:var(--fg-muted);
  font-size:var(--text-md); font-weight:var(--fw-medium); text-decoration:none;
}
.ntd-tabs__tab:hover { background:var(--bg-hover); color:var(--fg-default); }
.ntd-tabs__tab--active,
.ntd-tabs__tab--active:hover {
  background:var(--brand-bg-subtle); color:var(--brand-fg); border-color:var(--brand-border);
}
.ntd-tabs__count {
  min-width:1.5em; padding:0 var(--sp-1); text-align:center;
  border-radius:var(--r-full); background:var(--bg-muted);
  font-size:var(--text-xs); font-variant-numeric:tabular-nums;
}

.ntd-job__top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-2); }
.ntd-job__top .badge { flex:none; }
.ntd-job__actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.ntd-job__actions .ntd-job__confirm { margin-top:0; }

.badge--muted { background:var(--bg-muted); color:var(--fg-muted); border-color:var(--border-default); }

/* Đăng ký NTD: lời mời + form; hai cột từ desktop */
.ntd-signup { display:grid; gap:var(--sp-7); }
.ntd-signup__pitch h1 { font-size:var(--text-3xl); line-height:var(--lh-3xl); margin-bottom:var(--sp-3); text-wrap:balance; }
.ntd-signup__lead { color:var(--fg-muted); font-size:var(--text-lg); line-height:var(--lh-lg); }
.ntd-signup__points { list-style:none; padding:0; margin:var(--sp-5) 0; display:grid; gap:var(--sp-3); }
.ntd-signup__points li { display:flex; gap:var(--sp-3); align-items:flex-start; }
.ntd-signup__points .icon { color:var(--brand-fg); margin-top:3px; flex:none; }
.ntd-signup__form {
  padding:var(--sp-5);
  background:var(--bg-surface);
  border:1px solid var(--border-default); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.ntd-signup__form h2 { margin-top:0; }
@media (min-width:1024px) {
  .ntd-signup { grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:var(--sp-9); align-items:start; }
  .ntd-signup__pitch { position:sticky; top:calc(56px + var(--sp-6)); }
}
/* Honeypot: không display:none (một số bot bỏ qua ô ẩn kiểu đó) — đẩy ra ngoài màn hình. */
.ntd-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Khối magic-link — class có trong markup, trước đây không có CSS */
.magic-link {
  display:grid; gap:var(--sp-2);
  padding:var(--sp-4); margin:var(--sp-4) 0;
  background:var(--bg-subtle);
  border:1px solid var(--border-default); border-radius:var(--r-md);
}
.magic-link__url {
  width:100%; font-family:var(--font-mono); font-size:var(--text-sm);
  padding:var(--sp-2) var(--sp-3); min-height:var(--tap-dense);
}

/* Ô lương gợi ý — class mồ côi trong bản cũ */
.salary-box {
  padding:var(--sp-4); margin:var(--sp-4) 0;
  background:var(--brand-bg-subtle);
  border:1px solid var(--brand-border); border-radius:var(--r-md);
  font-size:var(--text-md);
}
.salary-box__stats {
  display:flex; gap:var(--sp-4); flex-wrap:wrap;
  margin-top:var(--sp-2); font-variant-numeric:tabular-nums;
  font-weight:var(--fw-semibold); color:var(--brand-fg);
}

/* ============================================================
   Điểm ngắt — bản cũ chỉ có một @media đổi padding, không có
   layout desktop thật. Từ đây site có 3 tầng bố cục.
   ============================================================ */

/* Tablet trở lên */
@media (min-width:640px) {
  .site-main { padding:var(--sp-7) var(--sp-6) var(--sp-10); }
  .home-hero h1 { font-size:var(--text-4xl); line-height:var(--lh-4xl); }
  .job-card { padding:var(--sp-5); }
  .job-list__items { gap:var(--sp-4); }
  .error-page__actions { flex-wrap:nowrap; }
}

/* Desktop: khung rộng ra, bộ lọc thành sidebar dính, thanh đáy biến mất */
@media (min-width:1024px) {
  .site-main { max-width:1200px; padding:var(--sp-8) var(--sp-6) var(--sp-11); }

  /* Trang danh sách: sidebar lọc + lưới card 2 cột */
  .job-index {
    display:grid; grid-template-columns:280px minmax(0,1fr);
    gap:var(--sp-7); align-items:start;
  }
  .job-index .filter-sheet {
    position:sticky; top:calc(56px + var(--sp-4));
    margin-bottom:0;
    max-height:calc(100vh - 56px - var(--sp-8)); overflow-y:auto;
  }
  /* Mở sẵn do app.js đặt [open] (xem chú thích ở đó) — người dùng vẫn gập lại
     được, nên vẫn giữ mũi tên chỉ trạng thái. */

  .job-list__items { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }

  /* Trang chi tiết: nội dung + cột hành động dính, bỏ thanh đáy mobile */
  .job-detail { padding-bottom:0; }
  .job-detail-layout {
    display:grid; grid-template-columns:minmax(0,1fr) 320px;
    gap:var(--sp-8); align-items:start;
  }
  .job-detail-layout__aside {
    position:sticky; top:calc(56px + var(--sp-4));
    display:grid; gap:var(--sp-3);
    padding:var(--sp-5);
    background:var(--bg-surface);
    border:1px solid var(--border-default); border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);
  }
  .sticky-bar { display:none; }

  .home-hero { padding:var(--sp-9) 0 var(--sp-8); }
  .home-hero h1 { max-width:24ch; }
  .home-search { max-width:720px; }
}

@media (min-width:1280px) {
  /* 3 cột chỉ khi chạy hết bề ngang (trang chủ). Trong .job-index đã mất
     280px cho sidebar nên giữ 2 cột, không bóp card xuống dưới 280px. */
  .job-list__items { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .job-index .job-list__items { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* In ấn — NTD hay in tin ra dán bảng tin nhà xưởng */
@media print {
  .site-header, .site-footer, .sticky-bar, .filter-sheet, .pager,
  .skip-link, .job-detail__report { display:none !important; }
  .site-main { max-width:none; padding:0; }
  .job-card, .ntd-job { break-inside:avoid; box-shadow:none; }
  a { color:inherit; text-decoration:none; }
}

/* ============================================================
   S9 — tài khoản người tìm việc, kho ứng viên, tỉnh/thành, hình thức
   ============================================================ */
.site-header__account {
  display:inline-flex; align-items:center; min-height:var(--tap);
  font-size:var(--text-md); font-weight:var(--fw-medium); white-space:nowrap;
}
/* ≤ 480px: thêm link "Đăng nhập" thì logo bị cắt — nút tìm việc chỉ còn icon (vẫn có aria-label). */
@media (max-width:480px) { .site-header__search-label { display:none; } }

.job-card__worktype {
  padding:0 var(--sp-2);
  border:1px solid var(--border-default); border-radius:var(--r-sm);
  font-size:var(--text-xs); line-height:1.6; white-space:nowrap;
}

.employer-cta--seeker { margin-top:var(--sp-4); }

/* Khu tài khoản người tìm việc — cùng nhịp với các màn NTD */
.account-page { max-width:480px; display:grid; gap:var(--sp-4); }
.account-page h1 { margin-top:var(--sp-4); font-size:var(--text-2xl); }
.account-form { display:grid; gap:var(--sp-4); max-width:520px; }
.account-form--wide { max-width:640px; }
.account-head {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin:var(--sp-4) 0;
}
.account-head h1 { margin:0; font-size:var(--text-2xl); }
.account-head p { margin:0; }
.account-card {
  display:grid; gap:var(--sp-3);
  margin:0 0 var(--sp-5); padding:var(--sp-5);
  background:var(--bg-surface);
  border:1px solid var(--border-default); border-radius:var(--r-lg);
}
.account-card h2 { margin:0; font-size:var(--text-xl); }
.account-forgot, .ntd-forgot { display:grid; gap:var(--sp-3); }
.account-forgot summary, .ntd-forgot summary { cursor:pointer; color:var(--fg-muted); min-height:var(--tap); display:flex; align-items:center; }

/* Form ứng tuyển khi chưa đăng nhập */
.apply-login__actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.apply-form__who { margin:0; color:var(--fg-muted); font-size:var(--text-md); }

/* NTD — bộ lọc kho ứng viên */
.ntd-talent-filter {
  display:grid; gap:var(--sp-3); align-items:end;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  margin:0 0 var(--sp-5);
}
.ntd-talent-filter .field { margin-bottom:0; }
.ntd-talent-filter__actions { display:flex; gap:var(--sp-2); }