/**
 * NHÁNH TUYỂN DỤNG — danh sách · chi tiết  (T-701.2 · T-702.1)
 *
 * Hai màn đi chung một file, cùng lý do với `page/project.css`: card vị trí,
 * nhãn hạn nộp, khối ứng tuyển chung một bộ da; `inc/enqueue.php` nạp ở cả
 * `is_post_type_archive('job')` lẫn `is_singular('job')`.
 *
 * Nguồn số đo: ảnh `docs/potaco-layout/jobs/job-list-pc.png` (PC, tỉ lệ ≈1,63
 * về container 1200) · `job-list-sp.png` (SP 375, có chú thích: item 92 ·
 * spacing 12 · accordion header 56 · expired item 72) · spec pixel single-job.
 * Màu/cỡ chữ TỪ TOKEN; chỗ ảnh lệch token ghi ở `spec/archive-job/1-wireframe.md`
 * §0.4 — đáng chú ý: nhãn "Còn N ngày" dùng `--c-warning`, không dùng cam thương
 * hiệu cho chữ 14px.
 *
 * ⚠️ Banner → nội dung: 40px do `components.css` §8b lo (`--hero-gap`). File này
 *    KHÔNG tự đệm trên cho khối đầu tiên dưới banner (CLAUDE.md §5). CSS của
 *    banner (`.page-hero*`) cũng ở `components.css` — component chung; khối
 *    `usps` trong banner đã gỡ (CR 2026-09-18, C-02b v2).
 *
 * ⚠️ `.card--job` ghi đè phần base của `components.css` §card (`.card__facts`,
 *    `.card__deadline` bản đầu là pill nền nhạt). Ghi đè ở đây thay vì sửa
 *    base vì chỉ có card tuyển dụng dùng hai class đó.
 */

/* =========================================================================
 * 1. TOOLBAR — tiêu đề (trái) + bộ đếm (phải), một hàng mọi khổ
 * ====================================================================== */

.job-toolbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
}

.job-toolbar__heading {
	margin: 0;
	font-size: var(--fs-h2);
	text-transform: uppercase;
}

/* "Đang tuyển 5 vị trí" — số cam to, chữ lớn ≥20px nên `--c-accent` đạt 3:1. */
.job-toolbar__count {
	flex: 0 0 auto;
	margin: 0;
	padding-top: 6px;
	font-size: var(--fs-body);
	color: var(--c-text-muted);
	white-space: nowrap;
}

.job-toolbar__count strong {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-accent);
}

/* =========================================================================
 * 2. DANH SÁCH — hàng ngang, cách nhau 12
 * ====================================================================== */

.job-list__items {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* =========================================================================
 * 3. CARD `row` — [tên + badge / 4 meta] … [nút] (ảnh PC)
 * ====================================================================== */

.card--job {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sp-4) var(--sp-6);
	height: auto;
	padding: var(--sp-5) var(--sp-6);
	overflow: visible;   /* base `.card` ẩn tràn — bóng hover bị xén nếu giữ */
}

.card--job .card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
	padding: 0;
}

.card--job .card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}

.card--job .card__title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--c-heading);
}

/* Badge hình thức: pill navy nhạt, cùng hàng với tên (ảnh). */
.card--job .card__tag {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--c-primary);
	background: var(--c-primary-50);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

/* 4 meta có icon, một hàng gap 32 ở PC; ghi đè base (cột dọc, min-height). */
.card--job .card__facts {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-8);
	min-height: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.card--job .card__fact {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
}

.card--job .card__fact-icon {
	flex: 0 0 auto;
	color: var(--c-text-muted);
}

/* Nhãn hạn nộp: KHÔNG pill (ghi đè base), màu theo trạng thái. */
.card--job .card__deadline {
	align-self: auto;
	padding: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	background: none;
	border-radius: 0;
	color: var(--c-text-muted);
}

.card--job .card__deadline--warning,
.card--job .card__deadline--warning .card__fact-icon {
	color: var(--c-warning);
	font-weight: var(--fw-semi);
}

.card--job .card__deadline--urgent,
.card--job .card__deadline--urgent .card__fact-icon {
	color: var(--c-error);
	font-weight: var(--fw-semi);
}

/*
 * Nút "XEM CHI TIẾT →" — `<span>` mang class .btn, không có hover riêng.
 * Base `.card__link` (components.css) đặt chữ navy và đứng SAU `.btn--primary`
 * nên thắng → chữ navy trên nền navy; ép lại màu chữ ở đây.
 */
.card--job .card__link {
	margin: 0;
	color: var(--c-text-invert);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	white-space: nowrap;
}

.card--job:hover .card__link {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

	.card--job:hover {
		border-color: var(--c-border-strong);
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}

	.card--job:hover .card__link.btn--primary {
		background: var(--c-primary-hover);
	}
}

/* ---- Nhóm hết hạn: mờ, không "sống dậy" khi hover ---- */

.card--job-expired {
	opacity: .6;
}

.card--job-expired .card__title,
.card--job-expired .card__tag {
	color: var(--c-text-muted);
}

.card--job-expired .card__tag {
	background: var(--c-bg-alt);
}

.card--job-expired .card__link.btn--primary {
	background: var(--c-bg-alt);
	color: var(--c-text-muted);
}

@media (hover: hover) and (pointer: fine) {

	.card--job-expired:hover {
		opacity: .8;
		box-shadow: none;
		transform: none;
	}

	.card--job-expired:hover .card__link.btn--primary {
		background: var(--c-border);
	}
}

/* =========================================================================
 * 4. KHỐI "ĐÃ HẾT HẠN" — <details open>, header 56 nền xám
 * ====================================================================== */

.job-expired {
	margin-top: var(--sp-4);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.job-expired__summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 56px;
	padding: 0 var(--sp-6);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--c-heading);
	background: var(--c-bg-alt);
	cursor: pointer;
	list-style: none;
	transition: background var(--transition);
}

.job-expired__summary::-webkit-details-marker {
	display: none;
}

.job-expired__summary:hover {
	background: var(--c-border);
}

.job-expired__summary:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: -2px;
}

.job-expired__chevron {
	flex: 0 0 auto;
	transition: transform var(--transition);
}

.job-expired:not([open]) .job-expired__chevron {
	transform: rotate(-90deg);
}

/* Thẻ bên trong khối: bỏ viền riêng, ngăn bằng kẻ dưới. */
.job-expired .job-list__items {
	gap: 0;
}

.job-expired .card--job {
	border: 0;
	border-top: var(--border-w) solid var(--c-border);
	border-radius: 0;
}

.job-expired .card--job:hover {
	box-shadow: none;
	transform: none;
}

/* =========================================================================
 * 5. RESPONSIVE
 * ====================================================================== */

/* 768–991 (nội suy, GĐ-J02): meta wrap 2 hàng, nút vẫn phải. */
@media (max-width: 991px) {

	.card--job .card__facts {
		gap: var(--sp-2) var(--sp-6);
	}
}

/* ≤767 theo `job-list-sp.png`: item 92, pad 16, meta 2 hàng trái, nút phải. */
@media (max-width: 767px) {

	.job-toolbar {
		align-items: center;
		margin-bottom: var(--sp-4);
	}

	.job-toolbar__heading {
		font-size: var(--fs-h3);
	}

	.job-toolbar__count {
		padding-top: 0;
		font-size: var(--fs-sm);
	}

	.job-toolbar__count strong {
		font-size: var(--fs-h4);
	}

	/*
	 * Ảnh SP: tên + badge chiếm TRỌN hàng đầu, nút chỉ ngang hàng với meta.
	 * `display: contents` cho body để head/facts thành ô lưới trực tiếp.
	 */
	.card--job {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"head head"
			"facts link";
		gap: var(--sp-2) var(--sp-3);
		padding: var(--sp-3) var(--sp-4);
	}

	.card--job .card__body {
		display: contents;
	}

	.card--job .card__head {
		grid-area: head;
	}

	.card--job .card__facts {
		grid-area: facts;
	}

	.card--job .card__link {
		grid-area: link;
		align-self: center;
	}

	.card--job .card__title {
		font-size: var(--fs-body);
	}

	/* Chú thích ảnh SP: item 92px ⇒ meta 2 hàng, chữ 12, gap 12 (chữ 13 + gap 16 ra 3 hàng). */
	.card--job .card__facts {
		gap: var(--sp-1) var(--sp-3);
		font-size: var(--fs-xs);
	}

	.card--job .card__fact-icon {
		width: 16px;
		height: 16px;
	}

	.card--job .card__link.btn {
		min-height: 36px;
		padding: 0 12px;
		font-size: var(--fs-xs);
		letter-spacing: 0;
	}

	.card--job .card__link .btn__icon {
		display: none;
	}

	/* Item hết hạn ở SP: chỉ chevron › bên phải (ảnh), cao 72. */
	.job-expired .card--job {
		padding: var(--sp-3) var(--sp-4);
	}

	.job-expired .card--job .card__link.btn {
		width: 32px;
		min-height: 32px;
		padding: 0;
		font-size: 0;
		background: none;
		color: var(--c-text-muted);
	}

	.job-expired .card--job .card__link .btn__icon {
		display: inline-block;
		width: 20px;
		height: 20px;
	}
}

/* =========================================================================
 * 6. TRANG CHI TIẾT — khung 856 + 24 + 320, DOM theo thứ tự mobile
 *
 * Ảnh `job-detail-pc.png`: cột phải sticky, hai card cách 16. Ảnh SP: Thông
 * tin → Cách ứng tuyển → 01/02/03. DOM viết theo SP; PC dùng `order`.
 * ====================================================================== */

.job-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: start;
}

.job-layout__side {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

.job-layout__main {
	min-width: 0;
}

@media (min-width: 992px) {

	.job-layout {
		grid-template-columns: minmax(0, 856fr) 320px;
		gap: var(--sp-6);
	}

	.job-layout__main {
		order: 1;
	}

	.job-layout__side {
		order: 2;
		position: sticky;
		top: calc(var(--header-h) + var(--sp-6));
	}
}

@media (min-width: 992px) and (max-width: 1199px) {

	.job-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* ---- Banner hết hạn (không có ảnh — theo token alert warning) ---- */

.job-expired-banner {
	margin-bottom: var(--sp-6);
	padding: var(--sp-5) var(--sp-6);
	background: var(--c-warning-bg);
	border-left: 4px solid var(--c-warning);
	border-radius: var(--radius-md);
}

.job-expired-banner__title {
	margin: 0 0 var(--sp-1);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--c-warning);
}

.job-expired-banner__text {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-text);
}

.job-expired-banner__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-primary);
	text-decoration: none;
}

/* ---- Mục 01/02/03: ô số cam nhạt 48 + tiêu đề gạch cam ---- */

.job-section + .job-section {
	margin-top: var(--sp-12);
}

.job-section__head {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.job-section__num {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--c-accent);
	background: var(--c-accent-50);
	border-radius: var(--radius-md);
}

.job-section__title {
	margin: 0;
	padding-top: 6px;
	font-size: var(--fs-h3);
	text-transform: uppercase;
}

/* Thân mục thụt bằng ô số + gap để thẳng cột với tiêu đề. */
.job-section__body {
	padding-left: calc(48px + var(--sp-4));
	color: var(--c-text);
	line-height: var(--lh-body);
}

.job-section__body p {
	margin: 0 0 var(--sp-4);
}

.job-section__body ul {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-6);
	list-style: none;
}

.job-section__body li {
	position: relative;
	margin-bottom: var(--sp-2);
}

/* Chấm tròn cam 6px — ảnh vẽ chấm, không dấu tích (spec §0.2-c). */
.job-section__body li::before {
	content: "";
	position: absolute;
	top: .65em;
	left: calc(-1 * var(--sp-4));
	width: 6px;
	height: 6px;
	background: var(--c-accent);
	border-radius: 50%;
}

.job-section__body > :last-child {
	margin-bottom: 0;
}

/* Nút "Xem thêm" — chỉ <768 (JS gỡ khi không cần); mặc định ẩn. */
.job-section__more {
	display: none;
}

/* ---- Card Thông tin tuyển dụng: khung trắng, header xám, 5 dòng có icon ---- */

.info-table-card {
	overflow: hidden;
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
}

.info-table__title {
	margin: 0;
	padding: var(--sp-4) var(--sp-6);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--c-heading);
	background: var(--c-bg-alt);
	border-bottom: var(--border-w) solid var(--c-border);
}

.info-table--card {
	padding: 0 var(--sp-6);
}

.info-table--card .info-table__row {
	grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: center;
	min-height: 44px;
	padding: var(--sp-2) 0;
	box-sizing: border-box;
}

.info-table--card .info-table__row:last-child {
	border-bottom: 0;
}

.info-table--card .info-table__icon-cell {
	display: inline-flex;
	color: var(--c-primary);
}

.info-table--card .info-table__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	color: var(--c-text);
}

/* Vạch dọc 1px giữa nhãn và giá trị (ảnh). */
.info-table--card .info-table__value {
	position: relative;
	padding-left: var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.info-table--card .info-table__value::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 20px;
	background: var(--c-border);
	transform: translateY(-50%);
}

/* ---- Card Cách ứng tuyển: cam nhạt ---- */

.job-apply {
	padding: var(--sp-6);
	background: var(--c-accent-50);
	border-radius: var(--radius-lg);
}

.job-apply__title {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--c-heading);
}

.job-apply__title-icon {
	color: var(--c-accent);
}

.job-apply__label {
	margin: 0 0 var(--sp-1);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.job-apply__label--phone {
	margin-top: var(--sp-5);
}

.job-apply__email {
	display: inline-block;
	margin-bottom: var(--sp-4);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--c-heading);
	text-decoration: none;
	word-break: break-all;
}

.job-apply__subject-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.job-apply__subject {
	min-width: 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

.job-apply__copy {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-heading);
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition);
}

.job-apply__copy:hover {
	border-color: var(--c-border-strong);
	background: var(--c-bg-alt);
}

.job-apply__copy.is-copied {
	color: var(--c-success);
	border-color: var(--c-success);
}

.job-apply__feedback {
	display: block;
	margin: calc(-1 * var(--sp-3)) 0 var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-success);
}

.job-apply__feedback[hidden] {
	display: none;
}

.job-apply__btn {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
}

.job-apply__phone-row {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.job-apply__phone-icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--c-primary);
	background: var(--c-primary-50);
	border-radius: 50%;
}

.job-apply__phone-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.job-apply__phone {
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--c-heading);
	text-decoration: none;
}

.job-apply__hours {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

.job-apply__note {
	display: flex;
	gap: var(--sp-2);
	margin: var(--sp-5) 0 0;
	padding: var(--sp-3);
	font-size: var(--fs-xs);
	line-height: var(--lh-body);
	color: var(--c-heading);
	background: var(--c-bg-alt);
	border-radius: var(--radius-md);
}

.job-apply__note-icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--c-success);
}

/* ---- Vị trí khác: nền xám, lưới 3 card compact ---- */

.job-others {
	margin-top: var(--sp-16);
	padding: var(--sp-12) 0;
	background: var(--c-bg-alt);
}

.job-others__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.job-others__title {
	margin: 0;
	font-size: var(--fs-h3);
	text-transform: uppercase;
}

/* Icon đồng hồ trong banner đổi cam khi sắp hết hạn — chữ giữ trắng (spec §0.4-3). */
.single-job .page-hero__meta-item.is-warning .page-hero__meta-icon,
.single-job .page-hero__meta-item.is-urgent .page-hero__meta-icon {
	color: var(--c-accent);
}

.job-others__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-top: -10px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-primary);
	text-decoration: none;
}

.job-others__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card compact: pad 16, meta 2×2, mũi tên phải. */
.card--job-compact {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sp-3);
	height: 100%;
	padding: var(--sp-4);
}

.card--job-compact .card__title {
	font-size: var(--fs-body);
}

.card--job-compact .card__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-2) var(--sp-3);
	font-size: var(--fs-xs);
}

.card--job-compact .card__link--arrow {
	color: var(--c-primary);
	transition: transform var(--transition);
}

@media (hover: hover) and (pointer: fine) {

	.card--job-compact:hover .card__link--arrow {
		transform: translateX(4px);
	}
}

@media (min-width: 768px) and (max-width: 991px) {

	/* GĐ-B02: 3 cột ở 720 chật, xuống 2. */
	.job-others__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Thanh dính đáy <992: navy, 2 nút bằng nhau ---- */

.job-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--z-floating);
	display: none;
	min-height: 64px;
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--c-primary-800);
	transform: translateY(100%);
	transition: transform 200ms ease;
}

.job-sticky__btn {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 64px;
	padding: 0 var(--sp-4);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--c-text-invert);
	text-decoration: none;
	text-transform: uppercase;
}

.job-sticky__btn + .job-sticky__btn {
	border-left: var(--border-w) solid rgb(255 255 255 / 20%);
}

.job-sticky__phone-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	text-align: left;
}

.job-sticky__phone-text span {
	font-size: var(--fs-xs);
	font-weight: var(--fw-regular);
	text-transform: none;
	opacity: .85;
}

@media (max-width: 991px) {

	.job-sticky {
		display: flex;
	}

	.job-sticky.is-visible {
		transform: none;
	}

	/* Chừa chỗ cho thanh; ẩn cụm nút nổi khi thanh đang hiện (như sản phẩm). */
	body.single-job:has(.job-sticky.is-visible) {
		padding-bottom: 64px;
	}

	body.single-job:has(.job-sticky.is-visible) .floating-contact {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.job-sticky {
		transition: none;
	}
}

/* ---- SP ≤767 ---- */

@media (max-width: 767px) {

	/* Banner: 4 meta WRAP 2 hàng (ảnh SP), không xếp dọc như luật chung của component. */
	.single-job .page-hero__meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sp-2) var(--sp-4);
	}

	.job-layout {
		gap: var(--sp-6);
	}

	.job-section + .job-section {
		margin-top: var(--sp-10);
	}

	.job-section__num {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		font-size: 24px;
	}

	.job-section__title {
		padding-top: 4px;
		font-size: var(--fs-h4);
	}

	.job-section__body {
		padding-left: calc(40px + var(--sp-4));
		font-size: var(--fs-body);
	}

	/* Clamp 5 dòng + fade — chỉ khi JS đã xác nhận nội dung dài (GĐ-B01). */
	.job-section__body.is-clamped:not(.is-open) {
		position: relative;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}

	.job-section__body.is-clamped:not(.is-open)::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 40px;
		background: linear-gradient(to bottom, rgb(255 255 255 / 0%), var(--c-bg));
	}

	.job-section__more {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		min-height: 44px;
		margin-left: calc(40px + var(--sp-4));
		padding: 0;
		font: inherit;
		font-size: var(--fs-sm);
		font-weight: var(--fw-semi);
		color: var(--c-primary);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.job-section__more[hidden] {
		display: none;
	}

	.job-section__more svg {
		transition: transform var(--transition);
	}

	.job-section__more.is-open svg {
		transform: rotate(180deg);
	}

	.info-table--card {
		padding: 0 var(--sp-5);
	}

	.info-table__title {
		padding: var(--sp-3) var(--sp-5);
	}

	.job-apply {
		padding: var(--sp-5);
	}

	.job-apply__btn {
		min-height: 48px;
	}

	.job-others {
		margin-top: var(--sp-10);
		padding: var(--sp-8) 0;
	}

	.job-others__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-3);
	}

	.job-expired-banner {
		padding: var(--sp-4);
	}
}