/**
 * Vinpack — page-tuyendung.css
 * CSS CHỈ CỦA nội dung tuyển dụng: page-templates/tuyen-dung.php (trang danh
 * sách) VÀ single-vp_job.php (khối "Xem thêm vị trí khác") — dùng chung 1
 * file vì cùng CHỈ dùng .job-card/.job-grid, không phải hai khối markup khác
 * nhau (01/09/2026, khách: "chuyển tin tuyển dụng từ vinpack.vn").
 *
 * .proj-banner/.proj-banner-grid/.proj-section/.cta-box (banner + CTA cuối
 * trang danh sách) TÁI DÙNG NGUYÊN assets/css/page-duan.css — KHÔNG chép lại
 * ở đây, cùng nguyên tắc page-templates/doi-tac-khach-hang.php đã áp dụng
 * cho vp_project. .detail-header/.detail-breadcrumb/.detail-tag/.detail-title/
 * .detail-byline*/.detail-featured-img/.art-*/.detail-related (trang chi
 * tiết) TÁI DÙNG NGUYÊN assets/css/project-single.css — cùng lý do, hai loại
 * nội dung (dự án/tin tuyển dụng) đều là "bài viết dài + breadcrumb + tag +
 * byline", không có gì khác biệt về HÌNH THỨC để viết lại.
 *
 * File này CHỈ chứa những gì project-single.css/page-duan.css CHƯA có:
 *   - .job-card/.job-tag/.job-location/.job-link — thẻ tin tuyển dụng (không
 *     có ảnh, khác hẳn .proj-card/.news-card đều có ảnh — card dạng văn bản
 *     thuần, giống danh sách công việc thật hơn là card sản phẩm/tin tức).
 *   - .job-grid — lưới chứa .job-card, cột hẹp hơn .proj-grid/.news-grid vì
 *     .job-card không có ảnh nên tự nhiên thấp/gọn hơn, 4 cột vừa khít hơn 3.
 *   - .job-group-block/.job-group-title — tiêu đề từng nhóm trên trang danh
 *     sách (xem docblock page-templates/tuyen-dung.php lý do dùng ba khối có
 *     tiêu đề thay vì bộ lọc client-side).
 *   - .detail-location — dòng địa điểm làm việc, CHỈ có ở trang chi tiết tin
 *     tuyển dụng (trang dự án không có field tương đương).
 *
 * @package Vinpack
 */

/* ---------- 1. Lưới + thẻ tin tuyển dụng ---------- */
.job-group-block + .job-group-block{ margin-top:var(--sp-8); }
.job-group-title{
	font-size:22px;
	color:var(--navy);
	margin-bottom:var(--sp-5);
	padding-bottom:var(--sp-3);
	border-bottom:1px solid var(--border);
}
.job-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:22px;
}
.job-card{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid var(--border);
	border-radius:var(--r-lg);
	padding:var(--sp-5);
	text-decoration:none;
	transition:transform var(--dur-state) ease, box-shadow var(--dur-state) ease, border-color var(--dur-state) ease;
}
.job-card:hover{
	transform:translateY(-4px);
	box-shadow:0 18px 40px rgba(0,27,183,.1);
	border-color:transparent;
}
.job-tag{
	display:inline-block;
	align-self:flex-start;
	background:var(--bg-alt);
	color:var(--navy);
	font-size:11.5px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.4px;
	padding:5px 12px;
	border-radius:var(--r-pill);
	margin-bottom:var(--sp-3);
}
.job-card h3{
	font-size:17px;
	color:var(--navy);
	line-height:1.4;
	margin:0 0 var(--sp-3);
	flex:1;
}
.job-location{
	display:flex;
	align-items:flex-start;
	gap:6px;
	color:var(--text-muted);
	font-size:13px;
	line-height:1.5;
	margin:0 0 var(--sp-4);
}
.job-location svg{ flex-shrink:0; margin-top:2px; color:var(--text-muted); }
.job-link{
	font-family:var(--font-head);
	font-weight:700;
	font-size:14px;
	color:var(--cobalt);
	transition:gap var(--dur-state) ease;
}
.job-card:hover .job-link{ color:var(--navy); }

/* ---------- 2. Trang chi tiết — chỉ phần project-single.css chưa có ---------- */
.detail-location{
	display:flex;
	align-items:center;
	gap:7px;
	color:var(--text-muted);
	font-size:14.5px;
	margin:0 0 var(--sp-4);
}
.detail-location svg{ flex-shrink:0; color:var(--cobalt); }

@media(max-width:1100px){
	.job-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media(max-width:820px){
	.job-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:560px){
	.job-grid{ grid-template-columns:1fr; }
}