/* ==========================================================================
   Tuyển dụng (tuyen-dung.dc.html) + Chi tiết vị trí (chi-tiet-tuyen-dung.dc.html)
   ========================================================================== */

/* ---------- Danh sách vị trí ---------- */
.hc-jobs { padding: var(--space-12) 0 var(--space-20); }
.hc-jobs__in { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--space-8); }
.hc-jobs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.hc-jobs__titles { display: flex; flex-direction: column; gap: var(--space-2); }
.hc-jobs__eyebrow { font-family: var(--font-ui); font-size: var(--size-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand); }
.hc-jobs__h2 { margin: 0; font-family: var(--font-display); font-size: var(--size-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.hc-jobs__table { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.hc-jobs__th, .hc-jobs__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 150px; }
.hc-jobs__th { gap: var(--space-5); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-ui); font-size: var(--size-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.hc-jobs__row { gap: var(--space-3) var(--space-5); align-items: center; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.hc-jobs__title { font-family: var(--font-display); font-size: var(--size-title); font-weight: var(--weight-bold); color: var(--text-primary); }
.hc-jobs__title:hover { color: var(--primary); text-decoration: none; }
.hc-jobs__dept { font-size: 14px; color: var(--text-muted); }
.hc-jobs__loc { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--text-muted); }
.hc-jobs__act { display: flex; justify-content: flex-end; }
@media (max-width: 759px) {
	.hc-jobs__th { display: none; }
	.hc-jobs__row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Chi tiết vị trí ---------- */
.hc-jd { padding: var(--space-12) 0 var(--space-20); }
.hc-jd__grid { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-12); align-items: start; }
.hc-jd__main { display: flex; flex-direction: column; gap: var(--space-9); min-width: 0; }
.hc-jd__back { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 14px; font-weight: var(--weight-semibold); color: var(--primary); }
.hc-jd__back:hover { color: var(--primary); }

/* Nội dung (Gutenberg): H2 = nhóm (Mô tả công việc / Yêu cầu ứng viên), H3 = tiêu đề khối, list = các ý có dấu tick */
.hc-jd__content > * { margin: 0; }
.hc-jd__content h2 { margin: var(--space-9) 0 0; padding-bottom: var(--space-3); border-bottom: 2px solid var(--primary); font-family: var(--font-display); font-size: var(--size-h2); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-transform: uppercase; }
.hc-jd__content > h2:first-child, .hc-jd__content > :first-child h2:first-child { margin-top: 0; }
.hc-jd__content h3, .hc-jd__content h4 { margin: var(--space-6) 0 0; font-family: var(--font-display); font-size: var(--size-title); font-weight: var(--weight-bold); line-height: var(--leading-body); }
.hc-jd__content h3 + ul, .hc-jd__content h4 + ul { margin-top: var(--space-3); }
.hc-jd__content ul, .hc-jd__content ol { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.hc-jd__content li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); margin: 0; min-height: calc(1.6em + 4px); font-size: var(--size-ui); line-height: 1.6; color: var(--text-primary); text-wrap: pretty; }
.hc-jd__content li::before { content: ""; width: 16px; height: 16px; margin-top: 5px; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hc-jd__content p { margin: var(--space-3) 0 0; font-size: var(--size-ui); line-height: 1.6; }
.hc-jd__content h2 + *, .hc-jd__content h2 + h3, .hc-jd__content h2 + h4 { margin-top: var(--space-6); }

/* Cột phải */
.hc-jd__aside { position: sticky; top: 112px; display: flex; flex-direction: column; gap: var(--space-5); }
.hc-jd__info { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8) var(--space-6); border-radius: var(--radius-md); background: var(--surface-subtle); }
.hc-jd__info-t { font-family: var(--font-display); font-size: var(--size-h3); font-weight: var(--weight-bold); }
.hc-jd__facts { display: flex; flex-direction: column; }
.hc-jd__fact { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.hc-jd__fact-ic { color: var(--primary); padding-top: 2px; }
.hc-jd__fact > div { display: flex; flex-direction: column; gap: 2px; }
.hc-jd__fact-k { font-size: var(--size-body); color: var(--text-muted); }
.hc-jd__fact-v { font-family: var(--font-ui); font-size: 15px; font-weight: var(--weight-semibold); }
.hc-jd__others { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.hc-jd__others-t { font-family: var(--font-ui); font-size: var(--size-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.hc-jd__other { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-family: var(--font-ui); font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.hc-jd__other:hover { color: var(--primary); text-decoration: none; }
@media (max-width: 979px) {
	.hc-jd__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Modal ứng tuyển (Dialog 560px) ---------- */
.hc-apply__box { display: flex; flex-direction: column; gap: var(--space-5); }
.hc-apply__box .hc-modal__close { top: 16px; right: 16px; }
.hc-apply__title { padding-right: var(--space-8); font-family: var(--font-display); font-size: var(--size-h2); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-transform: uppercase; }
.hc-apply__pos { display: flex; flex-direction: column; gap: 4px; }
.hc-apply__cap { font-family: var(--font-ui); font-size: var(--size-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.hc-apply__name { font-family: var(--font-display); font-size: var(--size-h3); font-weight: var(--weight-bold); color: var(--primary); }
/* Vị trí đã hiện ở tiêu đề → ẩn ô nhập (vẫn gửi kèm form) */
.hc-apply .hc-cf7-pos { display: none; }
.hc-apply__box:has(.hc-cf7.sent) .hc-apply__pos { display: none; }