/* ============================================================
   Pharma360 2026 – NHÀ TUYỂN DỤNG (Claude Code thêm 2026-11-04)
   Trang /nha-tuyen-dung/ (danh sách + tìm kiếm) và /nha-tuyen-dung/{seo}-{id}/ (chi tiết).
   Không có mockup riêng: dùng ngôn ngữ của các trang 2026 (hero xanh gradient, card trắng bo góc, chip, lưới).
   Token trong p360-base.css; card tin tuyển dụng dùng lại p360-jobs.css.
   ============================================================ */

/* ---------- Hero + tìm kiếm ---------- */
.p360-ntd-hero { background: var(--p360-hero-gradient-h); color: #fff; padding: var(--p360-sp-10) 0 var(--p360-sp-12); }
.p360-ntd-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--p360-sp-3); }
.p360-ntd-hero__title { font-size: var(--p360-fs-3xl); font-weight: 700; margin: 0; color: #fff; } /* base tô navy cho h1 → ép trắng trên nền xanh */
.p360-ntd-hero__sub { margin: 0; font-size: var(--p360-fs-md); opacity: 0.95; }
.p360-ntd-search { position: relative; display: flex; gap: var(--p360-sp-2); width: 100%; max-width: 760px; margin-top: var(--p360-sp-4); background: #fff; padding: 6px; border-radius: var(--p360-radius-pill); box-shadow: var(--p360-shadow-lg); }
.p360-ntd-search__icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--p360-primary); pointer-events: none; }
.p360-ntd-search .p360-input { border: 0; padding-left: 46px; min-height: 46px; box-shadow: none; }
.p360-ntd-search .p360-btn { min-width: 140px; }

/* ---------- Khung trang ---------- */
.p360-ntd { padding-top: var(--p360-sp-4); padding-bottom: var(--p360-sp-12); }
.p360-ntd-section { margin-top: var(--p360-sp-8); }
.p360-ntd-section__head { display: flex; align-items: baseline; gap: var(--p360-sp-4); flex-wrap: wrap; margin-bottom: var(--p360-sp-4); }
.p360-ntd-section__head h2 { margin: 0; font-size: var(--p360-fs-xl); font-weight: 700; color: var(--p360-text); }
.p360-ntd-section__head span { color: var(--p360-text-muted); font-size: var(--p360-fs-sm); }
.p360-ntd-grid { display: grid; gap: var(--p360-sp-4); }
.p360-ntd-grid--6 { grid-template-columns: repeat(6, 1fr); }
.p360-ntd-grid--4 { grid-template-columns: repeat(4, 1fr); }
.p360-ntd-empty { padding: var(--p360-sp-10) var(--p360-sp-6); text-align: center; color: var(--p360-text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--p360-sp-4); }
.p360-pagination__dots { border: 0 !important; min-width: 0 !important; color: var(--p360-text-muted) !important; }

/* ---------- Card NTD ---------- */
.p360-ntd-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: #fff; border: 1px solid var(--p360-border); border-radius: var(--p360-radius-lg); padding: var(--p360-sp-4); color: var(--p360-text); box-shadow: var(--p360-shadow-sm); transition: transform var(--p360-ease), box-shadow var(--p360-ease), border-color var(--p360-ease); min-height: 100%; }
.p360-ntd-card:hover { transform: translateY(-3px); box-shadow: var(--p360-shadow-lg); border-color: var(--p360-primary-200); color: var(--p360-text); }
.p360-ntd-card.is-hot { border-color: var(--p360-yellow); }
.p360-ntd-card__logo { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--p360-radius-md); background: #fff; border: 1px solid var(--p360-border); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.p360-ntd-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.p360-ntd-card__hot { position: absolute; top: 8px; left: 8px; background: var(--p360-red-dark); color: #fff; font-size: var(--p360-fs-xs); font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.p360-ntd-card__name { font-weight: 700; font-size: var(--p360-fs-base); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--p360-primary-dark); }
.p360-ntd-card:hover .p360-ntd-card__name { color: var(--p360-primary); }
.p360-ntd-card__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: auto; }
.p360-ntd-card__meta .p360-chip { font-size: var(--p360-fs-xs); padding: 3px 10px; }

/* ---------- CTA cuối danh sách ---------- */
.p360-ntd-cta { margin-top: var(--p360-sp-10); background: var(--p360-hero-gradient-h); color: #fff; border-radius: var(--p360-radius-xl); padding: var(--p360-sp-8); display: flex; align-items: center; justify-content: space-between; gap: var(--p360-sp-6); flex-wrap: wrap; }
.p360-ntd-cta h2 { margin: 0 0 6px; font-size: var(--p360-fs-xl); color: #fff; }
.p360-ntd-cta p { margin: 0; opacity: 0.95; }
.p360-ntd-cta__btns { display: flex; gap: var(--p360-sp-3); flex-wrap: wrap; }

/* ---------- Chi tiết: đầu trang ---------- */
.p360-ntd-admin a { color: var(--p360-red-dark); font-weight: 700; margin-left: 8px; }
.p360-ntd-head { display: flex; gap: var(--p360-sp-6); align-items: center; padding: var(--p360-sp-6) var(--p360-sp-8); margin-top: var(--p360-sp-4); }
.p360-ntd-head__logo { width: 180px; height: 180px; flex-shrink: 0; border: 1px solid var(--p360-border); border-radius: var(--p360-radius-lg); background: #fff; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; }
.p360-ntd-head__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.p360-ntd-head__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--p360-sp-3); }
.p360-ntd-head__name { margin: 0; font-size: var(--p360-fs-2xl); font-weight: 700; color: var(--p360-primary-dark); line-height: 1.25; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p360-ntd-head__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--p360-text-muted); font-size: var(--p360-fs-base); }
.p360-ntd-head__meta > * { display: inline-flex; align-items: center; gap: 6px; }
.p360-ntd-head__meta svg { width: 18px; height: 18px; color: var(--p360-primary); }
.p360-ntd-head__meta a { color: var(--p360-primary); font-weight: 600; }
.p360-ntd-head__actions { display: flex; flex-wrap: wrap; gap: var(--p360-sp-3); align-items: center; }

/* ---------- Chi tiết: 2 cột ---------- */
.p360-ntd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--p360-sp-6); margin-top: var(--p360-sp-6); align-items: start; }
.p360-ntd-block { padding: var(--p360-sp-6) var(--p360-sp-8); margin-bottom: var(--p360-sp-5); }
.p360-ntd-block h2 { font-size: var(--p360-fs-lg); font-weight: 700; color: var(--p360-primary-dark); margin: 0 0 var(--p360-sp-4); padding-bottom: 10px; border-bottom: 2px solid var(--p360-primary-100); }
.p360-ntd-block .p360-prose { text-align: justify; }
.p360-ntd-block .p360-prose img { max-width: 100%; height: auto; border-radius: var(--p360-radius-md); }
.p360-ntd-gallery { display: grid; gap: var(--p360-sp-3); margin-top: var(--p360-sp-4); }
.p360-ntd-gallery--1 { grid-template-columns: 1fr; }
.p360-ntd-gallery--2 { grid-template-columns: 1fr 1fr; }
.p360-ntd-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.p360-ntd-gallery a { display: block; border-radius: var(--p360-radius-md); overflow: hidden; border: 1px solid var(--p360-border); aspect-ratio: 4 / 3; background: var(--p360-bg-inner); }
.p360-ntd-gallery img { width: 100%; height: 100%; object-fit: cover; }
.p360-ntd-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p360-sp-4); }
.p360-ntd-benefit { background: var(--p360-bg-section); border-radius: var(--p360-radius-md); padding: var(--p360-sp-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.p360-ntd-benefit__ico { width: 44px; height: 44px; border-radius: 50%; background: #fff4c7; color: var(--p360-yellow); display: inline-flex; align-items: center; justify-content: center; }
.p360-ntd-benefit__ico svg { width: 22px; height: 22px; }
.p360-ntd-benefit h3 { margin: 4px 0 0; font-size: var(--p360-fs-base); font-weight: 700; color: var(--p360-primary-dark); }
.p360-prose--sm { font-size: var(--p360-fs-sm); color: var(--p360-text-muted); }
.p360-ntd-source { font-size: var(--p360-fs-sm); color: var(--p360-text-muted); margin: var(--p360-sp-2) 0 0; }
/* Sidebar cố định khi cuộn (yêu cầu chủ dự án 04/11); dài hơn màn hình thì tự cuộn bên trong, ẩn thanh cuộn */
.p360-ntd-side { position: sticky; top: calc(var(--p360-header-h) + 16px); max-height: calc(100vh - var(--p360-header-h) - 24px); overflow-y: auto; scrollbar-width: none; padding: 6px; margin: -6px; }
.p360-ntd-side::-webkit-scrollbar { display: none; }
body.p360-has-topbar .p360-ntd-side { top: calc(var(--p360-header-h) + var(--p360-topbar-h) + 16px); max-height: calc(100vh - var(--p360-header-h) - var(--p360-topbar-h) - 24px); }
.p360-ntd-info { padding: var(--p360-sp-5) var(--p360-sp-6); }
.p360-ntd-info h3 { margin: 0 0 var(--p360-sp-3); font-size: var(--p360-fs-md); color: var(--p360-primary-dark); }
.p360-ntd-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: var(--p360-fs-sm); }
.p360-ntd-info dt { color: var(--p360-text-muted); font-weight: 600; white-space: nowrap; }
.p360-ntd-info dd { margin: 0; color: var(--p360-text); word-break: break-word; }
.p360-ntd-side__banner { display: block; margin-top: var(--p360-sp-4); border-radius: var(--p360-radius-lg); overflow: hidden; box-shadow: var(--p360-shadow-md); }
.p360-ntd-side__banner img { width: 100%; display: block; }
.p360-ntd-jobs { padding: 0 var(--p360-sp-6); }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .p360-ntd-grid--6 { grid-template-columns: repeat(4, 1fr); }
  .p360-ntd-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .p360-ntd-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  .p360-ntd-layout { grid-template-columns: 1fr; }
  .p360-ntd-side { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
  .p360-ntd-grid--6, .p360-ntd-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .p360-ntd-head { flex-direction: column; text-align: center; }
  .p360-ntd-head__name, .p360-ntd-head__meta, .p360-ntd-head__actions { justify-content: center; }
}
@media (max-width: 767px) {
  .p360-ntd-hero { padding: var(--p360-sp-6) 0 var(--p360-sp-8); }
  .p360-ntd-hero__title { font-size: var(--p360-fs-2xl); }
  .p360-ntd-search { flex-direction: column; border-radius: var(--p360-radius-lg); padding: 10px; }
  .p360-ntd-search .p360-btn { width: 100%; }
  .p360-ntd-search__icon { top: 33px; left: 24px; transform: none; } /* ô xếp dọc: icon bám vào ô nhập (dòng đầu) */
  .p360-ntd-grid--6, .p360-ntd-grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--p360-sp-3); }
  .p360-ntd-benefits, .p360-ntd-gallery--2, .p360-ntd-gallery--3 { grid-template-columns: 1fr; }
  .p360-ntd-head { padding: var(--p360-sp-5) var(--p360-sp-4); }
  .p360-ntd-head__logo { width: 120px; height: 120px; }
  .p360-ntd-block { padding: var(--p360-sp-5) var(--p360-sp-4); }
  .p360-ntd-jobs { padding: 0 var(--p360-sp-3); }
  .p360-ntd-cta { padding: var(--p360-sp-5); }
  .p360-ntd-cta__btns .p360-btn { width: 100%; }
}