/*
Theme Name: VTG Tuyển dụng Đắk Lắk
Theme URI: https://tuyendungdaklak.com
Author: Việt Thái Group
Author URI: https://vietthai.group
Description: Theme lõi tối giản của Việt Thái Group (VTG) — chỉ dùng WordPress core (không page builder, không framework CSS/JS bên thứ 3). Xây riêng để phục vụ hệ thống Tuyển dụng Đắk Lắk (tuyendungdaklak.com — plugin quản lý tuyển dụng nhúng bằng shortcode), ưu tiên tốc độ tải trên di động và giảm bề mặt tấn công bảo mật.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.2
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vtg

Ghi chú kiến trúc (đọc trước khi sửa):
- Theme này là "vỏ" cho plugin VTG Job Directory (vtg-job-directory) trên
  tuyendungdaklak.com. Plugin tự quản lý menu đứng, dock mobile, account pop
  và dashboard qua shortcode [vtg_dashboard], [vtg_job_list], …
- Header/nav theme tối giản: plugin chrome (sidebar/dock) đảm nhiệm điều hướng
  chính khi đã đăng nhập. Trang public (tìm việc, tin đơn, công ty) dùng
  bố cục full-width của theme.
- Font: Inter Tight (theme.json + assets/fonts) hoặc font chọn trong Customizer.
  Plugin có thể ghi đè typography qua Cài đặt VTG (Inter mặc định).
- Bảng màu (--vtg-primary #154787, accent #C09C40) khớp thương hiệu cổng việc
  Đắk Lắk / Việt Thái Group.
*/


:root {
	--vtg-primary: #154787;
	--vtg-primary-dark: #0f3a66;
	--vtg-bg: #f6f8fb;
	--vtg-surface: #fff;
	--vtg-border: #e2e8f0;
	--vtg-text: #1e293b;
	--vtg-muted: #64748b;
	--vtg-radius: 10px;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--vtg-bg);
	color: var(--vtg-text);
	line-height: 1.6;
	/* font-family: kế thừa từ theme.json (Inter Tight) — không khai báo lại ở đây. */
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--vtg-primary);
}

a:hover {
	color: var(--vtg-primary-dark);
}

/* ── Header — ĐÃ BỎ. Plugin vtg-job-directory tự chèn header riêng cho MỌI trang
   qua wp_body_open() (xem header.php + Vtg\JobDirectory\SidebarNav::
   renderGlobalHeader()), theme không vẽ header/nav của riêng mình nữa. ── */

/* ── Khung nội dung — FULL-WIDTH 100% trên mọi kích thước màn hình, mọi
   trang. Padding co giãn theo màn hình để nội dung không dính sát mép — CHỈ
   áp dụng cho trang thường (bài viết/trang tĩnh). ── */
.vtg-content {
	width: 100%;
	padding: 16px;
}

.vtg-content h1 {
	font-size: 26px;
	line-height: 1.3;
	margin-top: 0;
}

@media (min-width: 768px) {
	.vtg-content {
		padding: 24px 32px;
	}

	.vtg-content h1 {
		font-size: 32px;
	}
}

/* Trang shortcode plugin (body.vtg-dash, body.page-dashboard, gắn bởi plugin body class) —
   plugin TỰ chừa lề bên trong từng khối (.vtg-job-card, .vtg-sidebar...), không
   tự có padding ở khối bọc ngoài (.bsv) — nên .vtg-content không nên chừa
   thêm nhiều padding nữa, nếu không nội dung dashboard bị thụt vào 2 lần
   (padding theme + padding plugin cộng dồn). Giữ đúng 8px CỐ ĐỊNH mọi kích
   thước màn hình (mobile/iPad/desktop) — card viền/bo góc dính sát mép màn
   hình rất khó chạm/nhìn nên luôn chừa 1 khoảng nhỏ như nhau, không đổi
   theo breakpoint. Specificity 2 class thắng .vtg-content 1 class ở trên,
   không cần !important. */
body.vtg-dash, body.page-dashboard .vtg-content {
	padding: 8px;
}

/* ── Khung đọc bài viết đơn (single.php) — RIÊNG khung này có bề rộng tối đa
   giới hạn lại (khác .vtg-content mặc định full-width) vì văn bản dài đọc dễ
   hơn khi không kéo dài hết màn hình. Giá trị --vtg-single-max-width đặt
   động theo Customizer (VTG — Bố cục), xem inc/customizer.php. ── */
.vtg-single {
	max-width: var(--vtg-single-max-width, 780px);
	margin-left: auto;
	margin-right: auto;
}

/* Ngày đăng bài — chữ nhỏ hơn văn bản thường, không cần nổi bật. */
.vtg-single-date {
	font-size: 13px;
	color: var(--vtg-muted);
	margin: 0 0 16px;
}

/* Nút "Quay lại" (component components/news-back-link.php của plugin
   boc-so-vtg) được CHÈN qua filter 'the_content' nên trong DOM luôn nằm
   SAU <h1>/.vtg-single-date (in trước bằng PHP, xem single.php) — dùng flex
   + order để hiển thị nó lên ĐẦU TIÊN, trên cả tiêu đề, mà không cần đổi
   thứ tự DOM thật (plugin không biết gì về theme, theme không đụng vào
   HTML plugin in ra — chỉ sắp xếp lại bằng CSS). order mặc định của mọi
   phần tử là 0, gán -1 cho đúng khối "Quay lại" để nó luôn lên trước. */
.vtg-single-article {
	display: flex;
	flex-direction: column;
}

.vtg-single-article > .vtg-jobs-back {
	order: -1;
	margin-bottom: 4px;
}

/* ── Cỡ chữ/độ đậm THÂN BÀI VIẾT — RIÊNG khối này, không đổi cỡ chữ UI
   chung toàn site (vẫn 15px, đúng chuẩn theme.json cho dashboard/nút/nhãn).
   15px hợp cho giao diện thao tác nhưng QUÁ NHỎ để đọc bài dài — tham khảo
   chuẩn các báo lớn (BBC 17-18px, NYTimes 17-19px, Medium 18-21px, WCAG
   khuyến nghị tối thiểu 16px cho văn bản đọc dài): thân bài luôn ≥16px,
   line-height thoáng hơn UI thường (1.7-1.75 so với 1.6 mặc định), weight
   400 (thường) — chỉ heading mới đậm, tránh cả trang "gào" đậm không cần
   thiết. Áp cho các thẻ trong nội dung the_content(), KHÔNG áp cho <h1>
   tiêu đề chính (đã có rule riêng .vtg-content h1 ở trên) hay nút
   "Quay lại"/ngày đăng (UI phụ, giữ nguyên cỡ nhỏ). ── */
.vtg-single-article :where(p, li, blockquote) {
	font-size: 16px;
	line-height: 1.7;
	font-weight: 400;
}

.vtg-single-article :where(h2, h3, h4) {
	font-weight: 700;
	line-height: 1.3;
}

.vtg-single-article h2 { font-size: 20px; }
.vtg-single-article h3 { font-size: 18px; }
.vtg-single-article h4 { font-size: 16px; }

@media (min-width: 768px) {
	.vtg-single-article :where(p, li, blockquote) {
		font-size: 17px;
		line-height: 1.75;
	}

	.vtg-single-article h2 { font-size: 22px; }
	.vtg-single-article h3 { font-size: 19px; }
}

@media (min-width: 1024px) {
	.vtg-single-article :where(p, li, blockquote) {
		font-size: 18px;
		line-height: 1.75;
	}

	.vtg-single-article h2 { font-size: 24px; }
	.vtg-single-article h3 { font-size: 20px; }
}

.vtg-card {
	background: var(--vtg-surface);
	border: 1px solid var(--vtg-border);
	border-radius: var(--vtg-radius);
	padding: 20px;
}

.vtg-empty {
	text-align: center;
	color: var(--vtg-muted);
	padding: 40px 16px;
}

/* ── Phân trang (danh sách bài viết) ── */
.vtg-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.vtg-pagination a,
.vtg-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--vtg-border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--vtg-text);
	font-size: 14px;
}

.vtg-pagination .current {
	background: var(--vtg-primary);
	border-color: var(--vtg-primary);
	color: #fff;
	font-weight: 700;
}

/* ── Footer — cấu hình qua Customizer (VTG — Chân trang): logo, menu (vị trí
   'footer'), text. Mobile-first: mặc định 3 HÀNG xếp dọc, từ 768px chuyển
   sang 1 HÀNG chia 3 CỘT ĐỀU NHAU (flex:1 mỗi cột). Cột nào không có nội
   dung thì PHP (footer.php) không in ra, flex tự co giãn phần còn lại —
   không để lại khoảng trống của cột rỗng. ── */
.vtg-site-footer {
	border-top: 1px solid var(--vtg-border);
	padding: 24px 16px;
	color: var(--vtg-muted);
	font-size: 13px;
}

.vtg-site-footer a {
	color: var(--vtg-muted);
}

.vtg-footer-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

.vtg-footer-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vtg-footer-col--logo img {
	max-height: 40px;
	width: auto;
	margin: 0 auto;
}

.vtg-footer-col--menu nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	margin: 0;
	padding: 0;
}

.vtg-footer-col--menu nav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	text-decoration: none;
}

.vtg-footer-col--text p {
	margin: 0;
}

@media (min-width: 768px) {
	.vtg-footer-grid {
		flex-direction: row;
		align-items: center;
	}

	.vtg-footer-col {
		flex: 1;
	}

	.vtg-footer-col--logo {
		justify-content: flex-start;
	}

	.vtg-footer-col--text {
		justify-content: flex-end;
		text-align: right;
	}
}

/* ── [accordion]/[accordion-item] — tương thích ngược nội dung bài viết cũ,
   xem inc/shortcodes.php + assets/js/accordion.js. ── */
.vtg-accordion-item {
	border: 1px solid var(--vtg-border);
	border-radius: var(--vtg-radius);
	margin-bottom: 8px;
	overflow: hidden;
}

.vtg-accordion-item__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 40px;
	padding: 12px 16px;
	background: var(--vtg-surface);
	border: none;
	text-align: left;
	font-size: 15px;
	font-weight: 600;
	color: var(--vtg-text);
	cursor: pointer;
}

/* Dấu +/- đổi theo trạng thái aria-expanded — 1 dấu "+" xoay 45° thành "×"
   khi mở, không cần ảnh/icon font riêng. */
.vtg-accordion-item__title::after {
	content: "+";
	flex-shrink: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--vtg-primary);
	transition: transform 0.15s ease;
}

.vtg-accordion-item__title[aria-expanded="true"]::after {
	transform: rotate(45deg);
}

.vtg-accordion-item__content {
	padding: 0 16px 16px;
	font-size: 15px;
}

.vtg-accordion-item__content p:first-child {
	margin-top: 0;
}

.vtg-accordion-item__content p:last-child {
	margin-bottom: 0;
}

/* Vùng chạm tối thiểu 40px — chuẩn mobile-first chung của dự án (khớp
   DASHBOARD_STANDARDS.md của plugin), input font-size >=15px chống iOS Safari
   tự zoom khi focus (dùng cho ô tìm kiếm mặc định của WordPress nếu có). */
input[type="search"],
input[type="text"] {
	min-height: 40px;
	font-size: 15px;
}

/* Bỏ outline mặc định xấu, thay bằng focus ring rõ ràng — giữ khả năng tiếp
   cận (accessibility), không dùng outline: none trơ trọi. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--vtg-primary);
	outline-offset: 2px;
}