/*
Theme Name: Thầy Khôi - Giáo Viên Đào Tạo Lái Xe
Theme URI: https://example.com/thay-khoi-driving
Author: Thầy Khôi
Author URI: https://example.com
Description: Theme WordPress chuyên nghiệp dành cho giáo viên đào tạo lái xe THẦY KHÔI – GIÁO VIÊN ĐÀO TẠO LÁI XE. Landing page chuyển đổi cao, quản trị dễ dùng qua Customizer và CPT Khóa học, hỗ trợ tiếng Việt đầy đủ, responsive mobile-first.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thaykhoi
Tags: education, custom-logo, custom-menu, featured-images, translation-ready, right-sidebar, full-width-template, theme-options

Thầy Khôi - Giáo Viên Đào Tạo Lái Xe là theme dựng riêng cho trung tâm đào tạo lái xe. Theme bao gồm: trang chủ dạng landing page đầy đủ (hero, lợi ích, khóa học, giới thiệu giáo viên, quy trình học, thư viện ảnh, cảm nhận, FAQ, CTA), custom post type "Khóa học", trang liên hệ với form gửi email qua wp_mail(), thanh CTA cố định trên mobile, tối ưu Core Web Vitals và SEO cơ bản (Open Graph, canonical, breadcrumb, JSON-LD).
*/

/* ==========================================================================
/* ==========================================================================
   1. RESET & BIẾN GỐC
   ========================================================================== */

:root {
	--tk-navy: #0b1f33;
	--tk-blue: #123f67;
	--tk-accent: #f5a623;
	--tk-accent-dark: #dd8f10;
	--tk-white: #ffffff;
	--tk-bg-light: #f5f7fa;
	--tk-text: #253449;
	--tk-muted: #6b7788;
	--tk-border: #e3e8ef;
	--tk-shadow-sm: 0 2px 8px rgba(11, 31, 51, 0.06);
	--tk-shadow: 0 10px 30px rgba(11, 31, 51, 0.10);
	--tk-shadow-lg: 0 20px 50px rgba(11, 31, 51, 0.16);
	--tk-radius: 14px;
	--tk-radius-lg: 22px;
	--tk-font: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tk-container: 1200px;
	--tk-header-h: 84px;
	--tk-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/*
	 * Thang z-index — dùng biến để thứ tự vẽ luôn nhất quán, không bao giờ
	 * phụ thuộc vào việc ai ghi số lớn hơn ai.
	 *
	 * Lỗi đã gặp: `.tk-site-header` dùng z-index 900 trong khi `.tk-overlay`
	 * dùng 1000. Vì header là `position: sticky` + `z-index` nên nó TẠO RA
	 * STACKING CONTEXT; mọi phần tử con (kể cả drawer `.tk-nav` z-index 1001)
	 * đều bị kẹt bên trong và không thể vượt lên overlay của `body`. Kết quả:
	 * mở menu trên điện thoại thì toàn bộ màn hình bị lớp phủ tối phủ lên,
	 * không bấm được link nào (đã kiểm chứng bằng `elementFromPoint`).
	 *
	 * Nguyên tắc: header PHẢI cao hơn overlay, drawer cao hơn overlay,
	 * và drawer/toggle không được bị kẹt trong stacking context của header.
	 */
	--tk-z-base: 1;
	--tk-z-mobile-cta: 950;
	--tk-z-overlay: 1000;
	--tk-z-header: 1001;
	--tk-z-drawer: 1002;
	--tk-z-nav-toggle: 1003;
	--tk-z-lightbox: 1100;
	--tk-z-skip-link: 9999;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--tk-header-h) + 16px);
	/*
	 * `clip` thay vì `hidden` để chặn tràn ngang mà không phá vỡ position: sticky.
	 * Lưu ý: KHÔNG đặt `overflow-x: hidden` lên body — thuộc tính này biến body
	 * thành scroll container, khiến header `position: sticky` mất tác dụng
	 * (đã kiểm chứng: header trượt lên khỏi viewport khi cuộn).
	 */
	overflow-x: clip;
}

/*
 * Khoá cuộn trang khi mở menu trên mobile.
 * Phải khoá trên <html> vì trình duyệt cuộn theo documentElement, không phải body.
 */
html.tk-scroll-locked {
	overflow: hidden;
}

body {
	margin: 0;
	font-family: var(--tk-font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--tk-text);
	background: var(--tk-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--tk-blue);
	text-decoration: none;
	transition: color 0.25s var(--tk-ease);
}

a:hover {
	color: var(--tk-accent-dark);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-weight: 800;
	line-height: 1.25;
	color: var(--tk-navy);
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p {
	margin: 0 0 1.1em;
}

ul, ol {
	padding-left: 1.25em;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}

::selection {
	background: var(--tk-accent);
	color: var(--tk-navy);
}

/* ==========================================================================
   1.1 ACCESSIBLE FOCUS RING
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--tk-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.tk-field input:focus,
.tk-field select:focus,
.tk-field textarea:focus {
	outline: 3px solid var(--tk-accent);
	outline-offset: 1px;
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}

/* ==========================================================================
   2. LAYOUT HELPERS
   ========================================================================== */

.tk-container {
	width: 100%;
	max-width: var(--tk-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.tk-section {
	padding: clamp(56px, 8vw, 100px) 0;
}

.tk-section--light {
	background: var(--tk-bg-light);
}

.tk-section--navy {
	background: var(--tk-navy);
	color: rgba(255, 255, 255, 0.82);
}

.tk-section--navy h1,
.tk-section--navy h2,
.tk-section--navy h3 {
	color: var(--tk-white);
}

.tk-section-head {
	max-width: 760px;
	margin: 0 auto clamp(32px, 4vw, 56px);
	text-align: center;
}

.tk-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tk-accent-dark);
	margin-bottom: 14px;
}

.tk-section--navy .tk-eyebrow {
	color: var(--tk-accent);
}

.tk-section-head p {
	font-size: 1.06rem;
	color: var(--tk-muted);
	margin-bottom: 0;
}

.tk-section--navy .tk-section-head p {
	color: rgba(255, 255, 255, 0.72);
}

.tk-grid {
	display: grid;
	gap: 28px;
}

.tk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.tk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	border: 2px solid transparent;
	font-weight: 800;
	font-size: 0.95rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	cursor: pointer;
	transition: transform 0.25s var(--tk-ease), box-shadow 0.25s var(--tk-ease), background-color 0.25s var(--tk-ease), color 0.25s var(--tk-ease), border-color 0.25s var(--tk-ease);
}

.tk-btn:hover {
	transform: translateY(-2px);
}

.tk-btn--primary {
	background: var(--tk-accent);
	color: var(--tk-navy);
	box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35);
}

.tk-btn--primary:hover {
	background: var(--tk-accent-dark);
	color: var(--tk-white);
	box-shadow: 0 12px 28px rgba(245, 166, 35, 0.42);
}

.tk-btn--navy {
	background: var(--tk-navy);
	color: var(--tk-white);
	box-shadow: var(--tk-shadow-sm);
}

.tk-btn--navy:hover {
	background: var(--tk-blue);
	color: var(--tk-white);
	box-shadow: var(--tk-shadow);
}

.tk-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--tk-white);
}

.tk-btn--outline:hover {
	background: var(--tk-white);
	color: var(--tk-navy);
	border-color: var(--tk-white);
}

.tk-btn--ghost {
	background: transparent;
	border-color: var(--tk-border);
	color: var(--tk-navy);
}

.tk-btn--ghost:hover {
	border-color: var(--tk-accent);
	color: var(--tk-accent-dark);
}

.tk-btn--lg {
	padding: 17px 34px;
	font-size: 1.02rem;
}

.tk-btn--block {
	width: 100%;
}

.tk-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ==========================================================================
   4. FORM
   ========================================================================== */

.tk-field {
	margin-bottom: 18px;
}

.tk-field label {
	display: block;
	margin-bottom: 7px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--tk-navy);
}

.tk-field label .tk-req {
	color: #d64545;
}

.tk-field input[type="text"],
.tk-field input[type="tel"],
.tk-field input[type="email"],
.tk-field select,
.tk-field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--tk-border);
	border-radius: 10px;
	background: #fff;
	color: var(--tk-text);
	/* 16px cố định: rem sẽ bị kéo xuống 15.5px ở mobile và iOS sẽ tự zoom. */
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.2s var(--tk-ease), box-shadow 0.2s var(--tk-ease);
	-webkit-appearance: none;
	appearance: none;
}

.tk-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	padding-right: 42px;
}

.tk-field input:focus,
.tk-field select:focus,
.tk-field textarea:focus {
	border-color: var(--tk-accent);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}

.tk-field textarea {
	min-height: 140px;
	resize: vertical;
}

.tk-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

.tk-alert {
	padding: 14px 18px;
	border-radius: 10px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 0.94rem;
}

.tk-alert--success {
	background: #e8f7ee;
	color: #1c6b3c;
	border: 1px solid #b7e3c9;
}

.tk-alert--error {
	background: #fdecec;
	color: #9b2c2c;
	border: 1px solid #f5c2c2;
}

/* ==========================================================================
   4.1 SEARCH FORM
   ========================================================================== */

.tk-search-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
	width: 100%;
}

.tk-search-form input[type="search"],
.tk-search-form input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--tk-border);
	border-radius: 10px;
	background: #fff;
	color: var(--tk-text);
	font-size: 16px;
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
}

.tk-search-form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.tk-search-form input:focus {
	border-color: var(--tk-accent);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}

.tk-search-form .tk-btn {
	flex: 0 0 auto;
	height: 50px;
	white-space: nowrap;
}

/* WordPress core search block (widget Tìm kiếm) — cùng style với form trên. */
.wp-block-search {
	max-width: 100;
}

.wp-block-search__inside-wrapper {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--tk-border);
	border-radius: 10px;
	background: #fff;
	color: var(--tk-text);
	font-size: 16px;
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
}

.wp-block-search__input:focus {
	border-color: var(--tk-accent);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}

.wp-block-search__button {
	flex: 0 0 auto;
	height: 50px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--tk-navy);
	color: #fff;
	font-family: inherit;
	font-size: 0.94rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.wp-block-search__button:hover {
	background: #14314d;
}

.wp-block-search__button svg {
	display: none;
}