/*
Theme Name: VTG
Theme URI: https://bocso.vn
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 Bốc Số VTG (bocso.vn — plugin quản lý phòng khám 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 so với theme thương mại nhiều tính năng (Flatsome/UX Builder).
Version: 1.0.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 KHÔNG tự vẽ header/nav cho các trang do plugin Bốc Số VTG render
  (dashboard, đặt lịch, hồ sơ công khai...) — plugin đã tự in header riêng
  qua wp_body_open() và ẩn header theme bằng body class "bsv-no-theme-header"
  (xem BocSoVTG\Dashboard\Router). Header/nav trong theme CHỈ hiện ở các
  trang KHÔNG phải shortcode plugin (bài viết WordPress thường, trang tĩnh
  biên tập tay, trang 404/tìm kiếm).
- KHÔNG khai báo font-family cứng trong style.css thân trang — đặt 1 lần ở
  theme.json (--wp--preset--font-family--inter-tight) để mọi nơi (theme lẫn
  block editor) dùng chung 1 nguồn, khớp font Inter Tight plugin đang dùng.
- Bảng màu (--vtg-primary...) cố ý trùng giá trị với --bsv-primary trong
  assets/css/dashboard.css của plugin, để trang blog/tĩnh và dashboard nhìn
  đồng bộ thương hiệu dù là 2 stylesheet độc lập (theme không phụ thuộc
  ngược vào plugin, và ngược lại — tách rời hoàn toàn, đúng chuẩn WordPress).
*/

:root {
	--vtg-primary: #0d9488;
	--vtg-primary-dark: #0f766e;
	--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 boc-so-vtg tự chèn header riêng cho MỌI trang
   qua wp_body_open() (xem header.php + BocSoVTG\Dashboard\Router::
   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.bsv-page, gắn bởi Router::bodyClass()) —
   plugin TỰ chừa lề bên trong từng khối (.bsv-card, .bsv-header...), 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.bsv-page .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 > .bsv-news-back-wrap {
	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;
}