/*
Theme Name: ChieuCao Child
Theme URI: https://chieucao.net
Template: generatepress
Author: ChieuCao Team
Description: Child theme hiện đại, chuyên nghiệp cho chieucao.net
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.9
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: chieucao-child
*/

/* =============================================================
   FONTS
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

/* =============================================================
   DESIGN TOKENS
   ============================================================= */
:root {
	/* Brand */
	--green-50:  #f0fdf4;
	--green-100: #dcfce7;
	--green-200: #bbf7d0;
	--green-500: #22c55e;
	--green-600: #16a34a;
	--green-700: #15803d;
	--green-800: #166534;

	--amber-400: #fbbf24;
	--amber-500: #f59e0b;

	/* Neutrals */
	--gray-0:   #ffffff;
	--gray-50:  #f8fafc;
	--gray-100: #f1f5f9;
	--gray-200: #e2e8f0;
	--gray-300: #cbd5e1;
	--gray-400: #94a3b8;
	--gray-500: #64748b;
	--gray-600: #475569;
	--gray-700: #334155;
	--gray-800: #1e293b;
	--gray-900: #0f172a;

	/* Semantic */
	--color-primary:      var(--green-600);
	--color-primary-dark: var(--green-700);
	--color-primary-bg:   var(--green-50);
	--color-accent:       var(--amber-500);
	--color-text:         var(--gray-700);
	--color-text-muted:   var(--gray-500);
	--color-heading:      var(--gray-900);
	--color-border:       var(--gray-200);
	--color-bg:           var(--gray-50);
	--color-surface:      var(--gray-0);

	/* Typography */
	--font:         'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono:    ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;

	/* Spacing */
	--space-1:  .25rem;
	--space-2:  .5rem;
	--space-3:  .75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;

	/* Radius */
	--r-sm:  6px;
	--r-md:  12px;
	--r-lg:  20px;
	--r-xl:  28px;
	--r-full: 9999px;

	/* Shadow */
	--shadow-xs: 0 1px 2px rgba(0,0,0,.06);
	--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
	--shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
	--shadow-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
	--shadow-xl: 0 20px 25px rgba(0,0,0,.10), 0 8px 10px rgba(0,0,0,.06);

	/* Transition */
	--ease:      cubic-bezier(.4,0,.2,1);
	--t-fast:    150ms;
	--t-base:    200ms;
	--t-slow:    350ms;

	/* Layout */
	--container: 1220px;
	--gap:        clamp(1rem, 4vw, 2rem);
}

/* =============================================================
   RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.75;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--t-base) var(--ease); }
a:hover { color: var(--color-primary-dark); }

/* =============================================================
   BASE TYPOGRAPHY
   ============================================================= */
h1,h2,h3,h4,h5,h6 {
	font-family: var(--font);
	font-weight: 800;
	line-height: 1.25;
	color: var(--color-heading);
	letter-spacing: -.025em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.625rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1.25rem; }
ul, ol { margin: 0 0 1.25rem 1.5rem; }
li > ul, li > ol { margin-bottom: 0; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: .875rem; }

/* =============================================================
   CONTAINER
   ============================================================= */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gap);
}

/* =============================================================
   SCREEN READER
   ============================================================= */
.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; z-index: 99999;
	clip: auto; clip-path: none; height: auto; width: auto; overflow: visible;
	background: var(--color-primary); color: #fff;
	padding: .75rem 1.5rem; border-radius: var(--r-sm);
	font-weight: 700; box-shadow: var(--shadow-xl);
	outline: 3px solid #fff;
}

/* =============================================================
   FOCUS
   ============================================================= */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: .625rem 1.375rem;
	font-family: var(--font); font-size: .9375rem; font-weight: 700; line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--r-sm);
	transition: all var(--t-base) var(--ease);
	white-space: nowrap; text-decoration: none;
	cursor: pointer; -webkit-appearance: none;
}
.btn svg { flex-shrink: 0; transition: transform var(--t-base) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
	background: var(--color-primary); color: #fff !important;
	box-shadow: 0 1px 3px rgba(22,163,74,.3);
}
.btn--primary:hover {
	background: var(--color-primary-dark);
	box-shadow: 0 6px 20px rgba(22,163,74,.4);
	transform: translateY(-2px);
}

.btn--ghost {
	background: rgba(255,255,255,.15);
	color: #fff !important;
	border-color: rgba(255,255,255,.3);
	backdrop-filter: blur(4px);
}
.btn--ghost:hover {
	background: rgba(255,255,255,.25);
	border-color: rgba(255,255,255,.5);
}

.btn--outline {
	background: transparent;
	color: var(--color-primary) !important;
	border-color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: #fff !important; }

.btn--sm { padding: .4rem .875rem; font-size: .875rem; }
.btn--lg { padding: .875rem 2rem; font-size: 1rem; }

/* =============================================================
   BADGES
   ============================================================= */
.badge {
	display: inline-flex; align-items: center;
	font-size: .75rem; font-weight: 700; line-height: 1;
	padding: .3rem .7rem;
	border-radius: var(--r-full);
	text-transform: uppercase; letter-spacing: .04em;
	transition: all var(--t-base) var(--ease);
}
.badge--cat {
	background: var(--green-100);
	color: var(--green-700);
}
.badge--cat:hover { background: var(--color-primary); color: #fff; }
.badge--tag {
	background: var(--gray-100);
	color: var(--gray-600);
	border: 1px solid var(--gray-200);
}
.badge--tag:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.badge--sm { font-size: .6875rem; padding: .2rem .55rem; }

/* =============================================================
   META ITEMS
   ============================================================= */
.meta-item {
	display: inline-flex; align-items: center; gap: var(--space-1);
	font-size: .8125rem; color: var(--color-text-muted); font-weight: 500;
}
.meta-item svg { opacity: .7; flex-shrink: 0; }

/* =============================================================
   AUTHOR MINI
   ============================================================= */
.author-mini {
	display: flex; align-items: center; gap: var(--space-2);
}
.author-mini__avatar {
	width: 28px; height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.author-mini__name { font-size: .8125rem; font-weight: 600; color: var(--gray-600); }

/* =============================================================
   BREADCRUMB
   ============================================================= */
.breadcrumb { margin-bottom: var(--space-4); }
.breadcrumb__list {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
	list-style: none; margin: 0; padding: 0;
	font-size: .8125rem;
}
.breadcrumb__item a { color: var(--gray-500); font-weight: 500; }
.breadcrumb__item a:hover { color: var(--color-primary); }
.breadcrumb__item--sep { color: var(--gray-400); }
.breadcrumb__item--current { color: var(--gray-400); font-weight: 500; }

.breadcrumb--light .breadcrumb__item a { color: rgba(255,255,255,.65); }
.breadcrumb--light .breadcrumb__item a:hover { color: #fff; }
.breadcrumb--light .breadcrumb__item--sep,
.breadcrumb--light .breadcrumb__item--current { color: rgba(255,255,255,.45); }

/* =============================================================
   SECTION HEADER
   ============================================================= */
.section-header {
	display: flex; align-items: center; gap: var(--space-4);
	margin-bottom: var(--space-8);
}
.section-header__title {
	font-size: 1.375rem; font-weight: 800; white-space: nowrap;
}
.section-header__line {
	flex: 1; height: 2px;
	background: linear-gradient(to right, var(--green-200), transparent);
	border-radius: var(--r-full);
}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
	background: var(--gray-900);
	padding: .5rem 0;
	font-size: .8125rem;
}
.topbar__inner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.topbar__text { color: rgba(255,255,255,.6); }
.topbar__links {
	display: flex; gap: var(--space-4);
}
.topbar__links a {
	color: rgba(255,255,255,.6);
	font-weight: 500;
	transition: color var(--t-base) var(--ease);
}
.topbar__links a:hover { color: var(--green-400, #4ade80); }

/* ================================================================
   HEADER MAIN
   ================================================================ */
.header-main {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 0;
	z-index: 1000;
}
.header-main__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding-block: .875rem;
}

/* Branding */
.site-branding__text {
	display: block;
	text-decoration: none;
}
.site-branding__name {
	display: block;
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: 1.1;
	background: linear-gradient(135deg, var(--green-600), #0d9488);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.site-branding__tagline {
	display: block;
	font-size: .75rem;
	color: var(--gray-500);
	font-weight: 500;
	margin-top: 2px;
	-webkit-text-fill-color: var(--gray-500);
}
.site-branding .custom-logo { height: 48px; width: auto; }

/* Primary Nav */
.primary-nav { margin-left: auto; }
.primary-nav__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0; padding: 0;
	gap: 0;
}
.primary-nav__list li { position: relative; }
.primary-nav__list > li > a {
	display: flex; align-items: center;
	font-size: .9375rem; font-weight: 700;
	color: var(--gray-700);
	padding: .625rem .875rem;
	border-radius: var(--r-sm);
	transition: all var(--t-base) var(--ease);
	position: relative;
}
.primary-nav__list > li > a::after {
	content: '';
	position: absolute;
	bottom: 2px; left: 50%;
	transform: translateX(-50%);
	width: 0; height: 2.5px;
	background: var(--color-primary);
	border-radius: var(--r-full);
	transition: width var(--t-base) var(--ease);
}
.primary-nav__list > li > a:hover,
.primary-nav__list > li.current-menu-item > a,
.primary-nav__list > li.current-page-ancestor > a {
	color: var(--color-primary);
	background: var(--green-50);
}
.primary-nav__list > li > a:hover::after,
.primary-nav__list > li.current-menu-item > a::after,
.primary-nav__list > li.current-page-ancestor > a::after {
	width: calc(100% - 1.75rem);
}

/* Dropdown */
.primary-nav__list ul {
	position: absolute; top: calc(100% + 6px); left: 0;
	min-width: 220px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-xl);
	list-style: none; margin: 0; padding: .5rem;
	opacity: 0; pointer-events: none;
	transform: translateY(-6px);
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
	z-index: 100;
}
.primary-nav__list li:hover > ul,
.primary-nav__list li:focus-within > ul {
	opacity: 1; pointer-events: auto; transform: translateY(0);
}
.primary-nav__list ul li a {
	display: block;
	padding: .5rem .875rem;
	font-size: .875rem; font-weight: 600;
	color: var(--gray-700);
	border-radius: var(--r-sm);
	transition: all var(--t-fast) var(--ease);
}
.primary-nav__list ul li a:hover {
	background: var(--green-50);
	color: var(--color-primary);
}

/* Header Actions */
.header-actions {
	display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-2);
}
.header-actions__search {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	background: var(--gray-100);
	border: 1px solid var(--color-border);
	border-radius: var(--r-sm);
	color: var(--gray-600);
	transition: all var(--t-base) var(--ease);
}
.header-actions__search:hover {
	background: var(--green-50);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Mobile Toggle */
.mobile-toggle {
	display: none; flex-direction: column; gap: 5px; justify-content: center;
	width: 40px; height: 40px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--r-sm);
	padding: .5rem;
	transition: all var(--t-base) var(--ease);
}
.mobile-toggle__bar {
	display: block; height: 2px; width: 100%;
	background: var(--gray-700);
	border-radius: var(--r-full);
	transition: all var(--t-base) var(--ease);
}
.mobile-toggle:hover { border-color: var(--color-primary); }
.mobile-toggle:hover .mobile-toggle__bar { background: var(--color-primary); }
.mobile-toggle[aria-expanded="true"] .mobile-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] .mobile-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-toggle[aria-expanded="true"] .mobile-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Search Overlay */
.search-overlay {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(15,23,42,.85);
	backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
	padding: var(--gap);
	animation: fadeIn var(--t-base) var(--ease);
}
.search-overlay[hidden] { display: none; }
.search-overlay__inner {
	width: 100%; max-width: 680px;
	position: relative;
}
.search-overlay__form {
	display: flex;
	background: var(--color-surface);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-xl);
	overflow: hidden;
}
.search-overlay__input {
	flex: 1;
	border: none; outline: none;
	padding: 1.125rem 1.5rem;
	font-size: 1.125rem; font-family: var(--font);
	color: var(--color-heading);
	background: transparent;
}
.search-overlay__btn {
	background: var(--color-primary);
	border: none;
	color: #fff;
	padding: 0 1.5rem;
	display: flex; align-items: center;
	transition: background var(--t-base) var(--ease);
}
.search-overlay__btn:hover { background: var(--color-primary-dark); }
.search-overlay__close {
	position: absolute; top: -3.5rem; right: 0;
	width: 40px; height: 40px;
	background: rgba(255,255,255,.15);
	border: none; border-radius: 50%;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background var(--t-base) var(--ease);
}
.search-overlay__close:hover { background: rgba(255,255,255,.25); }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ================================================================
   HERO (front page)
   ================================================================ */
.hero {
	position: relative;
	background: linear-gradient(150deg, var(--gray-900) 0%, #0d2e1a 50%, #093320 100%);
	overflow: hidden;
	padding: clamp(4rem, 10vw, 7rem) 0;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__blob {
	position: absolute; border-radius: 50%;
	filter: blur(80px); opacity: .18;
}
.hero__blob--1 {
	width: 500px; height: 500px;
	background: var(--green-500);
	top: -100px; left: -100px;
}
.hero__blob--2 {
	width: 400px; height: 400px;
	background: #14b8a6;
	bottom: -80px; right: -60px;
}
.hero__inner {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
.hero__label {
	display: inline-block;
	background: rgba(34,197,94,.15);
	border: 1px solid rgba(34,197,94,.25);
	color: #4ade80;
	font-size: .8125rem; font-weight: 700;
	padding: .35rem 1rem;
	border-radius: var(--r-full);
	letter-spacing: .04em; text-transform: uppercase;
	margin-bottom: var(--space-5);
}
.hero__title {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 900; line-height: 1.15;
	color: #fff; letter-spacing: -.03em;
	margin-bottom: var(--space-5);
}
.hero__title-accent {
	background: linear-gradient(90deg, #4ade80, #34d399);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.hero__desc {
	font-size: 1.0625rem; color: rgba(255,255,255,.7);
	max-width: 52ch; line-height: 1.8;
	margin-bottom: var(--space-8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.hero__stats {
	display: flex; flex-wrap: wrap; gap: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid rgba(255,255,255,.1);
}
.hero__stat-num {
	display: block;
	font-size: 2rem; font-weight: 900;
	color: #fff; letter-spacing: -.04em;
	line-height: 1;
}
.hero__stat-label {
	display: block;
	font-size: .8125rem; color: rgba(255,255,255,.5); font-weight: 500;
	margin-top: var(--space-1);
}

.hero__visual { flex-shrink: 0; }
.hero__visual-card {
	width: 220px; height: 290px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--r-xl);
	backdrop-filter: blur(12px);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	animation: float 4s ease-in-out infinite;
}
.hero__visual-inner svg { width: 180px; height: 240px; }

@keyframes float {
	0%,100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

/* ================================================================
   CATEGORY STRIP
   ================================================================ */
.cat-strip {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding: .875rem 0;
}
.cat-strip__list {
	display: flex; flex-wrap: wrap; gap: var(--space-2);
	list-style: none; margin: 0; padding: 0;
	align-items: center;
}
.cat-strip__link {
	display: flex; align-items: center; gap: var(--space-2);
	padding: .375rem 1rem;
	background: var(--gray-100);
	border: 1px solid var(--color-border);
	border-radius: var(--r-full);
	transition: all var(--t-base) var(--ease);
	color: var(--gray-700);
}
.cat-strip__link:hover {
	background: var(--green-100);
	border-color: var(--green-200);
	color: var(--color-primary);
}
.cat-strip__name { font-size: .875rem; font-weight: 700; }
.cat-strip__count {
	font-size: .75rem; color: var(--gray-400); font-weight: 500;
	background: var(--gray-0); padding: .1rem .4rem;
	border-radius: var(--r-full); border: 1px solid var(--gray-200);
}

/* ================================================================
   FEATURED POST
   ================================================================ */
.featured-post { padding: var(--space-10) 0 0; }
.featured-post__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--shadow-xl);
	border: 1px solid var(--color-border);
	transition: box-shadow var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.featured-post__card:hover {
	box-shadow: 0 30px 60px rgba(0,0,0,.14);
	transform: translateY(-4px);
}
.featured-post__img-wrap {
	display: block; position: relative;
	overflow: hidden; aspect-ratio: 4/3;
}
.featured-post__img-wrap img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--t-slow) var(--ease);
}
.featured-post__card:hover .featured-post__img-wrap img { transform: scale(1.05); }
.featured-post__img-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to right, transparent 60%, rgba(15,23,42,.15));
}
.featured-post__body {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	display: flex; flex-direction: column; justify-content: center;
}
.featured-post__meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-4);
}
.featured-post__title {
	font-size: clamp(1.375rem, 3vw, 2rem);
	font-weight: 900; line-height: 1.2;
	letter-spacing: -.03em; margin-bottom: var(--space-4);
}
.featured-post__title a { color: var(--color-heading); }
.featured-post__title a:hover { color: var(--color-primary); }
.featured-post__excerpt {
	color: var(--gray-500); font-size: .9375rem;
	line-height: 1.75; margin-bottom: var(--space-6);
}
.featured-post__footer {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}

/* ================================================================
   POSTS SECTION & GRID
   ================================================================ */
.posts-section { padding: var(--space-12) 0 var(--space-16); }

.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.5rem);
}
.posts-grid--archive { grid-template-columns: repeat(3, 1fr); }

/* Post Card */
.post-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
.post-card:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-5px);
	border-color: var(--green-200);
}

.post-card__img-wrap {
	display: block; overflow: hidden; aspect-ratio: 16/10;
}
.post-card__img-wrap img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--t-slow) var(--ease);
}
.post-card:hover .post-card__img-wrap img { transform: scale(1.06); }

.post-card__img-wrap--placeholder {
	background: linear-gradient(135deg, var(--green-100), var(--gray-100));
	display: flex; align-items: center; justify-content: center;
}
.post-card__img-wrap--placeholder span { font-size: 3rem; opacity: .4; }

.post-card__body {
	padding: 1.25rem 1.375rem;
	display: flex; flex-direction: column; flex: 1;
}
.post-card__meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--space-2); margin-bottom: var(--space-3);
}
.post-card__title {
	font-size: 1.0625rem; font-weight: 800;
	line-height: 1.3; letter-spacing: -.02em;
	margin-bottom: var(--space-2); flex: 1;
}
.post-card__title a { color: var(--color-heading); }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__excerpt {
	font-size: .875rem; color: var(--gray-500); line-height: 1.7;
	margin-bottom: var(--space-4);
}
.post-card__footer {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: auto; padding-top: .875rem;
	border-top: 1px solid var(--gray-100);
}
.post-card__readmore {
	font-size: .875rem; font-weight: 700;
	color: var(--color-primary);
	display: inline-flex; align-items: center; gap: var(--space-1);
	transition: gap var(--t-base) var(--ease);
}
.post-card__readmore:hover { color: var(--color-primary-dark); gap: var(--space-2); }

/* ================================================================
   PAGINATION
   ================================================================ */
.posts-pagination {
	display: flex; justify-content: center;
	padding-top: var(--space-10);
}
.posts-pagination .page-numbers {
	display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.posts-pagination .page-numbers a,
.posts-pagination .page-numbers span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.75rem; height: 2.75rem; padding: 0 .875rem;
	font-size: .9375rem; font-weight: 700;
	border-radius: var(--r-sm);
	border: 1.5px solid var(--color-border);
	background: var(--color-surface);
	color: var(--gray-700);
	transition: all var(--t-base) var(--ease);
}
.posts-pagination .page-numbers a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: var(--green-50);
}
.posts-pagination .page-numbers .current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ================================================================
   PAGE HERO (blog page)
   ================================================================ */
.page-hero {
	background: linear-gradient(135deg, var(--gray-900), #0a2016);
	padding: var(--space-16) 0;
	text-align: center;
}
.page-hero__inner { max-width: 700px; margin-inline: auto; }
.page-hero__title { color: #fff; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--space-3); }
.page-hero__sub { color: rgba(255,255,255,.65); font-size: 1.0625rem; }

/* ================================================================
   ARCHIVE HERO
   ================================================================ */
.archive-hero {
	position: relative;
	background: linear-gradient(150deg, #0f172a 0%, #0d2416 60%, #082010 100%);
	padding: clamp(3rem, 6vw, 5rem) 0;
	overflow: hidden;
}
.archive-hero__bg {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse at top right, rgba(22,163,74,.15) 0%, transparent 60%);
}
.archive-hero__inner { position: relative; z-index: 1; }
.archive-hero__type {
	display: inline-block;
	font-size: .75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--green-500, #22c55e);
	background: rgba(34,197,94,.12);
	border: 1px solid rgba(34,197,94,.2);
	padding: .25rem .75rem;
	border-radius: var(--r-full);
	margin-bottom: var(--space-3);
}
.archive-hero__title {
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin-bottom: var(--space-3);
}
.archive-hero__desc {
	color: rgba(255,255,255,.65); font-size: 1rem;
	max-width: 60ch; margin-bottom: var(--space-4);
}
.archive-hero__count {
	font-size: .875rem; color: rgba(255,255,255,.45);
}
.archive-hero__count strong { color: rgba(255,255,255,.7); }
.archive-hero__author {
	display: flex; align-items: center; gap: var(--space-4);
	margin-top: var(--space-5);
}
.archive-hero__avatar { width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); }
.archive-hero__author-info strong { display: block; color: #fff; font-size: 1.125rem; }
.archive-hero__author-info p { color: rgba(255,255,255,.6); margin: 0; font-size: .9375rem; }

/* ================================================================
   ARTICLE HERO
   ================================================================ */
.article-hero {
	position: relative;
	overflow: hidden;
}
.article-hero--has-image {
	padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}
.article-hero--no-image {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: linear-gradient(150deg, var(--gray-900) 0%, #0d2416 100%);
}
.article-hero__bg {
	position: absolute; inset: 0; z-index: 0;
}
.article-hero__bg img {
	width: 100%; height: 100%; object-fit: cover;
}
.article-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom,
		rgba(15,23,42,.6) 0%,
		rgba(15,23,42,.75) 50%,
		rgba(15,23,42,.92) 100%
	);
}
.article-hero__inner {
	position: relative; z-index: 1;
	max-width: 820px;
}
.article-hero .badge--cat { margin-bottom: var(--space-4); }
.article-hero__title {
	color: #fff;
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	font-weight: 900; line-height: 1.2;
	letter-spacing: -.03em;
	margin-bottom: var(--space-6);
}
.article-hero__meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--space-4) var(--space-6);
}
.article-hero__author {
	display: flex; align-items: center; gap: var(--space-3);
}
.article-hero__avatar {
	width: 44px; height: 44px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.25);
	object-fit: cover;
}
.article-hero__author-info { display: flex; flex-direction: column; }
.article-hero__author-name { font-size: .9375rem; font-weight: 700; color: #fff; }
.article-hero__author-role { font-size: .75rem; color: rgba(255,255,255,.5); }
.article-hero__meta-right {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
}
.article-hero__meta-right .meta-item { color: rgba(255,255,255,.55); }
.article-hero__meta-right .meta-item svg { opacity: .5; }

/* ================================================================
   ARTICLE LAYOUT (two-column)
   ================================================================ */
.article-layout { padding: var(--space-12) 0; }
.article-layout__inner {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

/* ================================================================
   ARTICLE CONTENT
   ================================================================ */
.article-content { min-width: 0; }

.article-intro {
	background: linear-gradient(135deg, var(--green-50), #f0fdfa);
	border-left: 4px solid var(--color-primary);
	padding: 1.25rem 1.5rem;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	margin-bottom: var(--space-8);
}
.article-intro p {
	font-size: 1.0625rem; line-height: 1.8;
	color: var(--gray-700); font-weight: 500;
	margin: 0;
}

/* Table of Contents */
.article-toc {
	background: var(--gray-50);
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	padding: 1.25rem 1.5rem;
	margin-bottom: var(--space-8);
}
.article-toc__title {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: 1rem; font-weight: 800;
	margin-bottom: var(--space-3);
	color: var(--color-heading);
}
.article-toc__list {
	margin: 0; padding: 0 0 0 1.25rem;
	font-size: .9rem;
}
.article-toc__list li { margin-bottom: var(--space-2); }
.article-toc__list a {
	color: var(--gray-600); font-weight: 500;
	transition: color var(--t-fast) var(--ease);
}
.article-toc__list a:hover { color: var(--color-primary); }

/* Article body typography */
.article-body { font-size: 1.0625rem; line-height: 1.85; color: var(--gray-700); }
.article-body h2 {
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	margin-top: 2.5rem; margin-bottom: 1rem;
	padding-left: 1rem;
	border-left: 4px solid var(--color-primary);
}
.article-body h3 {
	font-size: clamp(1.15rem, 2vw, 1.375rem);
	margin-top: 2rem; margin-bottom: .875rem;
	color: var(--gray-800);
}
.article-body h4 { font-size: 1.125rem; margin-top: 1.5rem; margin-bottom: .75rem; }
.article-body > *:first-child { margin-top: 0; }
.article-body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22,163,74,.35); }
.article-body a:hover { text-decoration-color: var(--color-primary); }
.article-body p { margin-bottom: 1.375rem; }
.article-body ul, .article-body ol { margin-bottom: 1.375rem; padding-left: 1.75rem; }
.article-body li { margin-bottom: .375rem; }

.article-body img { border-radius: var(--r-md); margin-block: 1.5rem; }
.article-body figure { margin-block: 2rem; }
.article-body figcaption { font-size: .875rem; color: var(--gray-500); text-align: center; margin-top: .5rem; font-style: italic; }

.article-body blockquote {
	border-left: 4px solid var(--color-primary);
	background: var(--green-50);
	padding: 1.25rem 1.5rem;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	margin: 2rem 0; font-style: normal;
}
.article-body blockquote p { font-size: 1.05rem; font-weight: 500; margin-bottom: 0; }

.article-body pre {
	background: var(--gray-900); color: #e2e8f0;
	padding: 1.5rem; border-radius: var(--r-md);
	overflow-x: auto; margin: 1.5rem 0;
	position: relative;
	font-size: .9rem;
}
.article-body code {
	background: var(--gray-100); color: var(--green-700);
	padding: .15em .45em; border-radius: 4px;
	font-family: var(--font-mono); font-size: .875em;
}
.article-body pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

.article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.article-body th { background: var(--gray-900); color: #fff; padding: .75rem 1rem; text-align: left; font-weight: 700; font-size: .9375rem; border: none; }
.article-body td { padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); font-size: .9375rem; border-left: none; border-right: none; border-top: none; }
.article-body tr:last-child td { border-bottom: none; }
.article-body tr:nth-child(even) td { background: var(--gray-50); }

.page-links { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 2rem; align-items: center; }
.page-links .page-links__label { font-weight: 700; color: var(--gray-600); }
.page-links a, .page-links span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.25rem; height: 2.25rem;
	background: var(--gray-100); border-radius: var(--r-sm);
	font-size: .875rem; font-weight: 700; color: var(--gray-700);
}
.page-links a:hover { background: var(--color-primary); color: #fff; }

/* Article Tags */
.article-tags {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-8);
}
.article-tags__label {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: .875rem; font-weight: 700; color: var(--gray-500);
}

/* Social Share */
.social-share {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
	padding: var(--space-5) 0;
	border-top: 1px solid var(--color-border);
}
.social-share__label { font-size: .875rem; font-weight: 700; color: var(--gray-500); }
.social-share__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social-share__btn {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: .5rem 1rem;
	border-radius: var(--r-sm);
	font-size: .875rem; font-weight: 700;
	border: none; color: #fff;
	transition: all var(--t-base) var(--ease);
}
.social-share__btn--facebook { background: #1877f2; }
.social-share__btn--facebook:hover { background: #1565d8; color: #fff; box-shadow: 0 4px 12px rgba(24,119,242,.4); }
.social-share__btn--twitter { background: #000; }
.social-share__btn--twitter:hover { background: #333; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.social-share__btn--zalo { background: #0068ff; }
.social-share__btn--zalo:hover { background: #0055cc; color: #fff; box-shadow: 0 4px 12px rgba(0,104,255,.4); }

/* ================================================================
   ARTICLE SIDEBAR
   ================================================================ */
.article-sidebar__sticky { position: sticky; top: calc(var(--space-4) + 72px); display: flex; flex-direction: column; gap: var(--space-5); }

.author-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-lg);
	padding: 1.5rem;
	text-align: center;
}
.author-card__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--space-3); border: 3px solid var(--green-100); }
.author-card__name { font-size: 1.0625rem; font-weight: 800; margin-bottom: var(--space-2); }
.author-card__bio { font-size: .875rem; color: var(--gray-500); line-height: 1.65; margin-bottom: var(--space-3); }
.author-card__link { font-size: .875rem; font-weight: 700; color: var(--color-primary); }
.author-card__link:hover { color: var(--color-primary-dark); }

.related-posts {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-lg);
	padding: 1.25rem;
}
.related-posts__title {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: 1rem; font-weight: 800;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--green-100);
	color: var(--color-heading);
}
.related-posts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.related-posts__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.related-posts__img { width: 80px; height: 60px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden; }
.related-posts__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base) var(--ease); }
.related-posts__item:hover .related-posts__img img { transform: scale(1.07); }
.related-posts__info { flex: 1; min-width: 0; }
.related-posts__link { font-size: .875rem; font-weight: 700; color: var(--color-heading); line-height: 1.4; display: block; margin-bottom: var(--space-1); }
.related-posts__link:hover { color: var(--color-primary); }
.related-posts__date { font-size: .75rem; color: var(--gray-400); }

.sidebar-widgets > .widget {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	padding: 1.25rem;
	margin-bottom: var(--space-4);
}
.sidebar-widgets .widget-title {
	font-size: 1rem; font-weight: 800;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--green-100);
}

/* ================================================================
   POST NAVIGATION
   ================================================================ */
.post-nav { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-8) 0; }
.post-nav__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.post-nav__item {
	display: flex; flex-direction: column; gap: var(--space-2);
	padding: 1.25rem 1.5rem;
	background: var(--gray-50);
	border: 1.5px solid var(--color-border);
	border-radius: var(--r-md);
	transition: all var(--t-base) var(--ease);
}
.post-nav__item:hover { border-color: var(--color-primary); background: var(--green-50); box-shadow: var(--shadow-md); }
.post-nav__item--next { text-align: right; }
.post-nav__dir {
	display: flex; align-items: center; gap: var(--space-2);
	font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--color-primary);
}
.post-nav__item--next .post-nav__dir { justify-content: flex-end; }
.post-nav__title { font-size: .9375rem; font-weight: 700; color: var(--color-heading); line-height: 1.4; }

/* ================================================================
   COMMENTS
   ================================================================ */
.comments-section { background: var(--gray-50); border-top: 1px solid var(--color-border); padding: var(--space-12) 0; }
.comments-wrap { max-width: 820px; }
.comments-area { background: transparent; padding: 0; }
.comments-title {
	font-size: 1.5rem; font-weight: 900;
	margin-bottom: var(--space-6);
	display: flex; align-items: center; gap: var(--space-3);
}
.comments-title::after {
	content: ''; flex: 1; height: 2px;
	background: linear-gradient(to right, var(--green-200), transparent);
	border-radius: var(--r-full);
}
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	padding: 1.25rem;
	margin-bottom: var(--space-4);
}
.comment-list .children { list-style: none; padding-left: 2rem; margin: var(--space-4) 0 0; }
.comment-author { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.comment-author .avatar { border-radius: 50%; }
.comment-author b { font-weight: 700; color: var(--color-heading); }
.comment-metadata { font-size: .8125rem; color: var(--gray-400); }
.comment-reply-link { font-size: .875rem; font-weight: 700; color: var(--color-primary); }
.comment-content p:last-child { margin-bottom: 0; }

.comment-respond {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-lg);
	padding: 1.75rem;
	margin-top: var(--space-8);
}
.comment-reply-title { font-size: 1.25rem; font-weight: 800; margin-bottom: var(--space-5); }
.comment-form label { font-size: .875rem; font-weight: 700; color: var(--gray-600); display: block; margin-bottom: var(--space-2); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; padding: .75rem 1rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--r-sm);
	font-family: var(--font); font-size: 1rem;
	color: var(--color-heading);
	background: var(--gray-50);
	transition: border-color var(--t-base) var(--ease);
	outline: none;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.comment-form textarea { resize: vertical; min-height: 130px; }
.comment-form .form-submit .submit {
	background: var(--color-primary); color: #fff; border: none;
	padding: .75rem 2rem; border-radius: var(--r-sm);
	font-family: var(--font); font-size: 1rem; font-weight: 700;
	cursor: pointer; transition: all var(--t-base) var(--ease);
}
.comment-form .form-submit .submit:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,.35); }

/* ================================================================
   READING PROGRESS BAR
   ================================================================ */
#reading-progress {
	position: fixed; top: 0; left: 0; z-index: 99999;
	width: 0%; height: 3px;
	background: linear-gradient(90deg, var(--green-500), var(--amber-400));
	border-radius: 0 var(--r-full) var(--r-full) 0;
	transition: width .1s linear;
}

/* ================================================================
   FOOTER WIDGETS
   ================================================================ */
.footer-widgets {
	background: var(--gray-900);
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.footer-widgets__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer-widgets__col .widget-title {
	color: #fff;
	font-size: .9375rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .08em;
	margin-bottom: 1.25rem;
	padding-bottom: .625rem;
	border-bottom: 2px solid rgba(34,197,94,.3);
}
.footer-widgets__col .widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets__col .widget ul li { padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.footer-widgets__col .widget ul li:last-child { border-bottom: none; }
.footer-widgets__col .widget ul li a {
	color: rgba(255,255,255,.6); font-size: .9375rem; font-weight: 500;
	display: flex; align-items: center; gap: var(--space-2);
	transition: all var(--t-base) var(--ease);
}
.footer-widgets__col .widget ul li a::before { content: '›'; color: var(--green-500); font-size: 1.1em; }
.footer-widgets__col .widget ul li a:hover { color: #fff; padding-left: var(--space-2); }
.footer-widgets__col p { color: rgba(255,255,255,.6); font-size: .9375rem; }

/* ================================================================
   FOOTER BOTTOM
   ================================================================ */
.footer-bottom { background: #060d14; padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.footer-bottom__inner {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--space-8) var(--space-12);
	flex-wrap: wrap;
	padding-bottom: var(--space-6);
	border-bottom: 1px solid rgba(255,255,255,.08);
	margin-bottom: var(--space-5);
}
.footer-logo { display: inline-block; }
.footer-logo__text {
	font-size: 1.375rem; font-weight: 900;
	background: linear-gradient(135deg, #4ade80, #34d399);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.footer-logo .custom-logo { height: 40px; width: auto; }
.footer-bottom__desc { color: rgba(255,255,255,.4); font-size: .875rem; margin-top: var(--space-3); max-width: 30ch; }
.footer-bottom__right { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-end; }

.footer-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: flex-end; }
.footer-nav__list a { font-size: .875rem; color: rgba(255,255,255,.55); font-weight: 500; transition: color var(--t-base) var(--ease); }
.footer-nav__list a:hover { color: #fff; }

.footer-social { display: flex; gap: var(--space-2); }
.footer-social__link {
	width: 38px; height: 38px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--r-sm);
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.55);
	transition: all var(--t-base) var(--ease);
}
.footer-social__link:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.footer-bottom__bar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: var(--space-3);
}
.footer-bottom__copy { font-size: .8125rem; color: rgba(255,255,255,.35); }
.footer-bottom__copy a { color: rgba(255,255,255,.4); }
.footer-bottom__copy a:hover { color: rgba(255,255,255,.7); }
.footer-legal { display: flex; gap: var(--space-4); }
.footer-legal a { font-size: .8125rem; color: rgba(255,255,255,.35); transition: color var(--t-base) var(--ease); }
.footer-legal a:hover { color: rgba(255,255,255,.65); }

/* ================================================================
   BACK TO TOP
   ================================================================ */
.back-to-top {
	position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 999;
	width: 48px; height: 48px;
	background: var(--color-primary);
	border: none; border-radius: 50%;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-xl);
	opacity: 0; transform: translateY(1rem);
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
	pointer-events: none;
}
.back-to-top:not([hidden]) { pointer-events: auto; }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--color-primary-dark); box-shadow: 0 8px 30px rgba(22,163,74,.5); transform: translateY(-3px); }

/* ================================================================
   NO POSTS
   ================================================================ */
.no-posts { text-align: center; padding: var(--space-16); color: var(--gray-500); }
.no-posts p { font-size: 1.0625rem; margin-bottom: var(--space-5); }

/* ================================================================
   FORMS (global)
   ================================================================ */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], textarea, select {
	width: 100%; padding: .75rem 1rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--r-sm);
	font-family: var(--font); font-size: 1rem;
	color: var(--color-heading);
	background: var(--color-surface);
	outline: none;
	transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
textarea { resize: vertical; }
label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: var(--space-2); color: var(--gray-600); }

/* ================================================================
   WP BLOCKS
   ================================================================ */
.wp-block-image img { border-radius: var(--r-md); }
.wp-block-image figcaption { font-size: .875rem; color: var(--gray-500); text-align: center; margin-top: var(--space-2); }
.wp-block-quote {
	border-left: 4px solid var(--color-primary);
	background: var(--green-50); padding: 1.25rem 1.5rem;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	margin: 2rem 0;
}
.wp-block-quote p { font-weight: 500; margin-bottom: 0; }
.wp-block-table table { border-radius: var(--r-md); overflow: hidden; }
.alignwide { margin-inline: -2rem; }
.alignfull { margin-inline: calc(-50vw + 50%); max-width: 100vw; }

/* ================================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ================================================================ */
@media (max-width: 1024px) {
	.posts-grid { grid-template-columns: repeat(2, 1fr); }
	.posts-grid--archive { grid-template-columns: repeat(2, 1fr); }
	.featured-post__card { grid-template-columns: 1fr; }
	.featured-post__img-wrap { aspect-ratio: 16/7; }
	.article-layout__inner { grid-template-columns: 1fr; }
	.article-sidebar { display: none; } /* hide sidebar on tablet, show only content */
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { display: none; }
	.post-nav__inner { grid-template-columns: 1fr; }
	.post-nav__item--next { text-align: left; }
	.post-nav__item--next .post-nav__dir { justify-content: flex-start; }
}

/* ================================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {
	.topbar { display: none; }

	.primary-nav { display: none; }
	.primary-nav.is-open {
		display: block;
		position: fixed; inset: 0; z-index: 9998;
		background: var(--gray-900);
		overflow-y: auto;
		padding: 5rem 1.5rem 2rem;
		animation: slideIn var(--t-slow) var(--ease);
	}
	@keyframes slideIn { from { opacity:0; transform:translateX(100%); } to { opacity:1; transform:translateX(0); } }
	.primary-nav__list { flex-direction: column; gap: var(--space-1); }
	.primary-nav__list > li > a {
		font-size: 1.125rem; padding: 1rem 1.25rem;
		color: rgba(255,255,255,.85);
		border-radius: var(--r-md);
	}
	.primary-nav__list > li > a:hover { background: rgba(255,255,255,.08); color: #fff; }
	.primary-nav__list > li > a::after { display: none; }
	.primary-nav__list ul {
		position: static; opacity: 1; pointer-events: auto; transform: none;
		background: rgba(255,255,255,.05); border: none; border-radius: var(--r-md);
		padding: .5rem; margin-top: var(--space-1); box-shadow: none;
	}
	.primary-nav__list ul a { color: rgba(255,255,255,.65); }
	.primary-nav__list ul a:hover { background: rgba(255,255,255,.08); color: #fff; }

	.mobile-toggle { display: flex; }

	.posts-grid, .posts-grid--archive { grid-template-columns: 1fr; }

	.featured-post__body { padding: 1.25rem; }
	.featured-post__title { font-size: 1.375rem; }

	.footer-widgets__grid { grid-template-columns: 1fr 1fr; }
	.footer-bottom__inner { flex-direction: column; }
	.footer-bottom__right { align-items: flex-start; }
	.footer-nav__list { justify-content: flex-start; }
	.footer-bottom__bar { flex-direction: column; gap: var(--space-2); }

	.article-hero--has-image { padding: 3rem 0 2.5rem; }
	.article-hero__title { font-size: 1.625rem; }

	.back-to-top { bottom: 1rem; right: 1rem; width: 44px; height: 44px; }
}

/* ================================================================
   RESPONSIVE — SMALL (≤ 480px)
   ================================================================ */
@media (max-width: 480px) {
	.hero { padding: 3rem 0; }
	.hero__actions { flex-direction: column; }
	.hero__stats { gap: var(--space-5); }
	.featured-post__footer { flex-direction: column; align-items: flex-start; }
	.footer-widgets__grid { grid-template-columns: 1fr; }
	.cat-strip__list { gap: var(--space-1); }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
	.topbar, .header-main, .footer-widgets, .footer-bottom,
	.back-to-top, #reading-progress, .social-share,
	.post-nav, .comments-section, .related-posts,
	.author-card, .article-sidebar { display: none !important; }
	body { font-size: 12pt; background: #fff; color: #000; }
	a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
	.article-hero { padding: 1rem 0; background: #fff; }
	.article-hero__title { color: #000; }
}