/*
Theme Name: VTG
Theme URI: https://vietthai.group
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) — dùng chung cho mọi sản phẩm / plugin nội bộ của công ty. Chỉ dựa vào WordPress core (không page builder, không framework CSS/JS bên thứ 3). Ưu tiên tốc độ tải trên di động, bảo mật và khả năng mở rộng. Các plugin của VTG (Bốc Số, GDrive File Exchange, …) tự render header/dashboard riêng qua wp_body_open() và có thể ẩn header theme bằng body class.
Version: 1.2.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vtg
Tags: custom-logo, custom-menu, featured-images, translation-ready, block-styles

Copyright (C) 2024–2026 Việt Thái Group.
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

Ghi chú kiến trúc (đọc trước khi sửa / khi viết plugin mới):
- Theme KHÔNG tự vẽ header/nav cho các trang do plugin VTG render (dashboard,
  portal, form…). Plugin tự in header riêng qua hook wp_body_open() và có thể
  ẩn header theme bằng body class (ví dụ "vtg-no-theme-header" hoặc class
  riêng của plugin). Header/nav theme CHỈ hiện ở trang WordPress thông thường
  (bài viết, trang tĩnh, 404, tìm kiếm).
- Font-family khai báo 1 lần qua theme.json (--wp--preset--font-family--inter-tight)
  để theme + block editor + plugin dùng chung nguồn. Không hardcode font-family
  trong style.css thân trang.
- Bảng màu CSS variables (--vtg-primary, …) là nền tảng thương hiệu. Plugin
  có thể override bằng CSS riêng nếu sản phẩm cần bảng màu khác (ví dụ
  GDrive File Exchange dùng xanh #144787 + vàng #BF9C3F).
- Theme cố tình tách rời hoàn toàn khỏi mọi plugin — plugin không phụ thuộc
  theme và ngược lại. Đây là chuẩn WordPress đúng đắn.
*/

: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;
}

/* Admin bar đã tắt qua show_admin_bar filter — đảm bảo không còn khoảng trống thừa */
html.wp-toolbar { padding-top: 0 !important; margin-top: 0 !important; }
body.admin-bar { margin-top: 0 !important; padding-top: 0 !important; }
#wpadminbar { display: none !important; }

/* Skip link — bắt buộc WCAG / Theme Review: ẩn đến khi focus bàn phím */
.vtg-skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 100000;
	padding: 8px 16px;
	background: var(--vtg-primary);
	color: #fff;
	text-decoration: none;
	border-radius: 0 0 6px 0;
}
.vtg-skip-link:focus,
.vtg-skip-link:focus-visible {
	left: 8px;
	top: 8px;
	color: #fff;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.vtg-page-links {
	margin-top: 24px;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}