/*
Theme Name:        Linh Khí Đất Việt
Theme URI:         https://linhkhidatviet.com/
Author:            Linh Khí Đất Việt
Description:       Theme tuỳ biến cho Linh Khí Đất Việt — đá quý, ngọc bích, Phật ngọc, thạch đá trị liệu. Bố cục lấy cảm hứng từ cấu trúc khối yanyen.vn, kiến trúc danh mục theo rubystone.com.vn. Không phụ thuộc page builder.
Version:           1.0.0
Requires at least: 6.3
Tested up to:      6.8
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       linhkhi
Tags:              e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Mọi màu / cỡ chữ / khoảng cách đều đi qua biến. Muốn đổi tông thương hiệu
   chỉ sửa khối :root này (hoặc Customizer ghi đè --lk-primary).
   Tỉ lệ tương phản (WCAG 2.1) đã kiểm tra:
     --lk-ink      trên --lk-primary       8.26 : 1  (AAA)
     --lk-gold-700 trên #FFFFFF            5.06 : 1  (AA)  -> chữ vàng trên nền trắng
     #FFFFFF       trên --lk-gold-700      5.06 : 1  (AA)  -> nút vàng đậm chữ trắng
     --lk-gold-300 trên --lk-ink          10.52 : 1  (AAA) -> chữ vàng trên nền đen
     --lk-muted    trên --lk-cream         5.39 : 1  (AA)
   KHÔNG dùng --lk-primary (#D4AF37) cho chữ trên nền trắng (chỉ 2.1:1).
   ========================================================================== */
:root {
	/* --- Vàng thương hiệu --- */
	--lk-primary: #d4af37;          /* Vàng hoàng kim — nền, viền, icon */
	--primary-color: var(--lk-primary); /* alias theo yêu cầu brief */
	--lk-gold-50: #fbf7ec;          /* Nền kem rất nhạt */
	--lk-gold-100: #f5ecd2;         /* Nền khối nhấn */
	--lk-gold-200: #ecdca8;         /* Viền mảnh */
	--lk-gold-300: #e6c766;         /* Vàng sáng — chữ trên nền tối */
	--lk-gold-500: #d4af37;
	--lk-gold-700: #8a6a10;         /* Vàng đồng — chữ/nút trên nền sáng */
	--lk-gold-800: #7a5c0e;         /* Hover của gold-700 */
	--lk-gradient-gold: linear-gradient(135deg, #f3dc8a 0%, #d4af37 45%, #a8841f 100%);

	/* --- Trung tính --- */
	--lk-ink: #1c1a17;              /* Đen ấm — tiêu đề, nền footer */
	--lk-ink-soft: #2a2622;
	--lk-text: #4a4640;             /* Chữ thân bài 9.37:1 */
	--lk-muted: #6b655b;            /* Chữ phụ 5.77:1 */
	--lk-line: #e9e3d6;             /* Đường kẻ */
	--lk-bg: #ffffff;
	--lk-cream: var(--lk-gold-50);

	/* --- Trạng thái --- */
	--lk-sale: #b3261e;             /* Badge giảm giá 6.5:1 với chữ trắng */
	--lk-success: #2e6b3f;          /* Ngọc bích — còn hàng */
	--lk-jade: #2f6f55;             /* Màu phụ gợi ngọc bích */

	/* --- Typography --- */
	--lk-font-heading: "Playfair Display", "Times New Roman", serif;
	--lk-font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--lk-fs-xs: 0.75rem;    /* 12 */
	--lk-fs-sm: 0.875rem;   /* 14 */
	--lk-fs-base: 1rem;     /* 16 */
	--lk-fs-md: 1.125rem;   /* 18 */
	--lk-fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--lk-fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	--lk-fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
	--lk-fs-3xl: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);
	--lk-lh-tight: 1.25;
	--lk-lh-body: 1.7;

	/* --- Khoảng cách (thang 4px) --- */
	--lk-space-1: 0.25rem;
	--lk-space-2: 0.5rem;
	--lk-space-3: 0.75rem;
	--lk-space-4: 1rem;
	--lk-space-5: 1.5rem;
	--lk-space-6: 2rem;
	--lk-space-7: 3rem;
	--lk-space-8: 4rem;
	--lk-section-y: clamp(3rem, 2rem + 4vw, 5.5rem);

	/* --- Bố cục --- */
	--lk-container: 1240px;
	--lk-container-narrow: 820px;
	--lk-gutter: 16px;
	--lk-radius-sm: 4px;
	--lk-radius: 8px;
	--lk-radius-lg: 16px;
	--lk-shadow-sm: 0 1px 3px rgba(28, 26, 23, 0.08);
	--lk-shadow: 0 8px 24px rgba(28, 26, 23, 0.08);
	--lk-shadow-gold: 0 10px 30px rgba(138, 106, 16, 0.18);
	--lk-header-h: 84px;
	--lk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--lk-dur: 240ms;
}

@media (min-width: 768px) {
	:root { --lk-gutter: 24px; }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--lk-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--lk-bg);
	color: var(--lk-text);
	font-family: var(--lk-font-body);
	font-size: var(--lk-fs-base);
	line-height: var(--lk-lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--lk-space-4);
	color: var(--lk-ink);
	font-family: var(--lk-font-heading);
	font-weight: 600;
	line-height: var(--lk-lh-tight);
}
h1 { font-size: var(--lk-fs-3xl); }
h2 { font-size: var(--lk-fs-2xl); }
h3 { font-size: var(--lk-fs-xl); }
h4 { font-size: var(--lk-fs-lg); }
h5 { font-size: var(--lk-fs-md); }
h6 { font-size: var(--lk-fs-base); }

p { margin: 0 0 var(--lk-space-4); }

a {
	color: var(--lk-gold-700);
	text-decoration: none;
	transition: color var(--lk-dur) var(--lk-ease);
}
a:hover { color: var(--lk-gold-800); }

:focus-visible {
	outline: 2px solid var(--lk-gold-700);
	outline-offset: 2px;
}

ul, ol { margin: 0 0 var(--lk-space-4); padding-left: 1.25em; }
blockquote {
	margin: var(--lk-space-5) 0;
	padding: var(--lk-space-4) var(--lk-space-5);
	border-left: 3px solid var(--lk-primary);
	background: var(--lk-cream);
	font-style: italic;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--lk-space-3); border-bottom: 1px solid var(--lk-line); text-align: left; }

input, select, textarea, button { font: inherit; color: inherit; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], select, textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--lk-line);
	border-radius: var(--lk-radius-sm);
	background: #fff;
	transition: border-color var(--lk-dur);
}
input:focus, select:focus, textarea:focus { border-color: var(--lk-gold-700); outline: none; }

/* Trợ năng: ẩn chữ nhưng screen reader vẫn đọc */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 10000;
	width: auto; height: auto; clip: auto;
	padding: 0.75rem 1rem;
	background: var(--lk-ink); color: var(--lk-gold-300);
}

/* WordPress core classes */
.alignleft { float: left; margin: 0 var(--lk-space-5) var(--lk-space-4) 0; }
.alignright { float: right; margin: 0 0 var(--lk-space-4) var(--lk-space-5); }
.aligncenter { margin-inline: auto; }
.wp-caption-text, figcaption { font-size: var(--lk-fs-sm); color: var(--lk-muted); text-align: center; }
.sticky, .bypostauthor, .gallery-caption { /* bắt buộc khai báo theo Theme Review */ }

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