/*!
Theme Name: midolikit-nndp
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.1.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: midolikit-nndp
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

midolikit-nndp is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# Design Tokens — Nông Nghiệp Duy Phát
--------------------------------------------------------------*/
:root {
	/* --- Colors: Primary (Forest Green) --- */
	--c-primary:       #1B4332;
	--c-primary-dark:  #0F2B1E;
	--c-primary-mid:   #2D6A4F;
	--c-primary-light: #40916C;
	--c-primary-100:   #D1FAE5;
	--c-primary-50:    #ECFDF5;

	/* --- Colors: Accent (Amber) --- */
	--c-accent:        #B45309;
	--c-accent-light:  #D97706;
	--c-accent-50:     #FFFBEB;

	/* --- Colors: Neutrals --- */
	--c-gray-900: #1A1A18;
	--c-gray-800: #2E2E2B;
	--c-gray-700: #44443F;
	--c-gray-600: #5C5C56;
	--c-gray-500: #7A7A73;
	--c-gray-400: #A3A39C;
	--c-gray-300: #D1D1CB;
	--c-gray-200: #E8E8E3;
	--c-gray-100: #F4F4F1;
	--c-gray-50:  #FAFAF8;
	--c-white:    #FFFFFF;
	--c-bg:       #FAFAF8;

	/* --- Typography --- */
	--font-primary: 'Be Vietnam Pro', system-ui, sans-serif;
	--font-accent:  'Playfair Display', Georgia, serif;

	/* --- Layout --- */
	--header-h:  72px;
	--max-w:     1200px;
	--radius:    10px;
	--radius-lg: 14px;
	--radius-xl: 16px;

	/* --- Shadows --- */
	--shadow-sm: 0 1px 3px rgb(0 0 0 / .06);
	--shadow-md: 0 4px 12px rgb(0 0 0 / .08);
	--shadow-lg: 0 12px 32px rgb(0 0 0 / .1);

	/* --- Transitions --- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur:  220ms;
}

/* --- Breakpoints (for reference in media queries)
   Mobile:  < 768px
   Tablet:  768px – 1023px
   Desktop: >= 1024px
-------------------------------------------------- */

/*--------------------------------------------------------------
# Base Reset & Global
--------------------------------------------------------------*/
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-primary);
	font-size: 15px;
	color: var(--c-gray-700);
	background-color: var(--c-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	margin: 0;
}

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

a {
	color: var(--c-primary);
	text-decoration: none;
}

a:hover {
	color: var(--c-primary-mid);
}

/* --- Container --- */
.ctn {
	width: 100%;
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: 32px;
}

@media (max-width: 767px) {
	.ctn {
		padding-inline: 20px;
	}
}

/* --- Utility --- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	height: var(--header-h);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: background var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

.site-header.is-scrolled {
	background: rgba(255, 255, 255, .97);
	border-bottom-color: var(--c-gray-200);
	box-shadow: var(--shadow-sm);
}

.header-inner {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 32px;
}

/* Logo */
.header-logo { flex-shrink: 0; }

.header-logo .custom-logo { height: 48px; width: auto; display: block; }

.header-logo__text {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--c-primary-dark);
}

.header-logo__abbr {
	font-size: 22px;
	font-weight: 800;
	font-family: var(--font-primary);
	background: var(--c-primary);
	color: #fff;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px;
	letter-spacing: -.5px;
}

.header-logo__name {
	display: flex;
	flex-direction: column;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.4;
	color: var(--c-gray-800);
}

/* Desktop nav */
.main-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.main-nav__list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 28px;
}

.main-nav__list li { position: relative; }

.main-nav__list a {
	font-size: 14px;
	font-weight: 400;
	color: var(--c-gray-500);
	text-decoration: none;
	padding: 10px 8px;
	display: block;
	transition: color var(--dur) var(--ease);
	position: relative;
}

.main-nav__list a:hover,
.main-nav__list .current-menu-item > a,
.main-nav__list .current_page_item > a {
	color: var(--c-primary);
}

.main-nav__list .current-menu-item > a::after,
.main-nav__list .current_page_item > a::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 2px;
	background: var(--c-primary);
	border-radius: 1px;
}

/* Desktop dropdown sub-menu */
.main-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0,0,0,.10);
	border: 1px solid var(--c-gray-100);
	list-style: none;
	margin: 0;
	padding: 10px 0 6px;
	z-index: 200;
}

.main-nav__list .sub-menu .sub-menu {
	top: -6px;
	left: 100%;
}

.main-nav__list .sub-menu li { position: relative; }

.main-nav__list .sub-menu a {
	font-size: 13.5px;
	font-weight: 400;
	color: var(--c-gray-700);
	padding: 9px 18px;
	white-space: nowrap;
}

.main-nav__list .sub-menu a::after { display: none; }

.main-nav__list .sub-menu a:hover,
.main-nav__list .sub-menu .current-menu-item > a,
.main-nav__list .sub-menu .current_page_item > a {
	color: var(--c-primary);
	background: var(--c-gray-50);
}

.main-nav__list li:hover > .sub-menu,
.main-nav__list li:focus-within > .sub-menu {
	display: block;
}

.main-nav__list .sub-arrow {
	display: inline-flex;
	align-items: center;
	margin-left: 3px;
	vertical-align: middle;
	transition: transform var(--dur) var(--ease);
	line-height: 0;
}

.main-nav__list li:hover > a .sub-arrow,
.main-nav__list li:focus-within > a .sub-arrow {
	transform: rotate(180deg);
}

/* Header CTA */
.header-cta { flex-shrink: 0; }

/* Hamburger */
.hamburger {
	display: none;
	margin-left: auto;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--c-gray-800);
	border-radius: 6px;
	line-height: 0;
}

.hamburger__icon--close { display: none; }

.hamburger.is-open .hamburger__icon--open  { display: none; }
.hamburger.is-open .hamburger__icon--close { display: block; }

/* Mobile menu */
.mobile-menu {
	display: none;
	position: absolute;
	top: var(--header-h);
	left: 0; right: 0;
	background: rgba(255, 255, 255, .98);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--c-gray-200);
	box-shadow: var(--shadow-lg);
	padding: 8px 20px 20px;
	z-index: 99;
}

.mobile-menu.is-open { display: flex; flex-direction: column; }

.mobile-menu__list {
	list-style: none;
	margin: 0; padding: 0;
}

.mobile-menu__list a {
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: var(--c-gray-800);
	padding: 13px 0;
	border-bottom: 1px solid var(--c-gray-100);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .current_page_item > a {
	color: var(--c-primary);
	font-weight: 600;
}

.mobile-menu__cta { margin-top: 14px; }

/* Mobile sub-menu accordion */
.mobile-menu__list .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	border-bottom: 1px solid var(--c-gray-100);
}

.mobile-menu__list .menu-item-has-children > a {
	flex: 1;
	border-bottom: none;
}

.mobile-sub-toggle {
	flex-shrink: 0;
	background: none;
	border: none;
	border-bottom: none;
	cursor: pointer;
	padding: 0 10px;
	color: var(--c-gray-500);
	line-height: 0;
	transition: color var(--dur) var(--ease);
}

.mobile-sub-toggle svg {
	transition: transform var(--dur) var(--ease);
}

.mobile-sub-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.mobile-menu__list .sub-menu {
	display: none;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0 0 4px 16px;
	background: var(--c-gray-50);
}

.mobile-menu__list .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.mobile-menu__list .sub-menu a {
	font-size: 14px;
	color: var(--c-gray-600);
	padding: 10px 0;
	border-bottom: 1px solid var(--c-gray-100);
}

.mobile-menu__list .sub-menu li:last-child > a {
	border-bottom: none;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: var(--radius);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
	white-space: nowrap;
}

.btn--primary {
	background: var(--c-primary);
	color: #fff;
	border-color: var(--c-primary);
}

.btn--primary:hover {
	background: var(--c-primary-mid);
	border-color: var(--c-primary-mid);
	color: #fff;
}

.btn--outline {
	background: transparent;
	border-color: var(--c-primary);
	color: var(--c-primary);
}

.btn--outline:hover {
	background: var(--c-primary-50);
}

.btn--light {
	background: #fff;
	color: var(--c-primary);
}

.btn--light:hover {
	background: var(--c-gray-100);
}

.btn--small  { padding: 8px 16px; font-size: 13px; }
.btn--full   { width: 100%; }

/* Body padding for fixed header */
body { padding-top: var(--header-h); }

/* Responsive header */
@media (max-width: 1023px) {
	.main-nav,
	.header-cta { display: none; }

	.hamburger { display: flex; }

	.header-logo .custom-logo { height: 38px; }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/* --- Wrapper --- */
.site-footer {
	background: var(--c-primary-dark);
	color: rgba(255 255 255 / .75);
	padding-block: 64px 0;
	font-size: 14px;
}

/* --- Grid: 4 col → 2 col → 1 col --- */
.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 40px 48px;
	padding-bottom: 48px;
}

@media (max-width: 1023px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
}

@media (max-width: 767px) {
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Column --- */
.footer-col--brand { max-width: 280px; }

/* --- Logo --- */
.footer-logo { margin-bottom: 16px; }

.footer-logo__img {
	height: 46px;
	width: auto;
	display: block;
	/* Invert to white on dark background if logo is dark */
	filter: brightness(0) invert(1) opacity(.85);
}

.footer-logo__text {
	font-family: var(--font-accent);
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.01em;
}

/* --- Description --- */
.footer-desc {
	font-size: 13px;
	line-height: 1.65;
	color: rgba(255 255 255 / .5);
}

/* --- Heading --- */
.footer-heading {
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255 255 255 / .7);
	margin-bottom: 16px;
}

/* --- Links list (products / support) --- */
.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-links a {
	color: rgba(255 255 255 / .45);
	text-decoration: none;
	font-size: 13px;
	transition: color var(--dur) var(--ease);
}

.footer-links a:hover { color: #fff; }

/* --- Contact list --- */
.footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba(255 255 255 / .5);
	line-height: 1.5;
}

.footer-contact li svg {
	flex-shrink: 0;
	margin-top: 3px;
	opacity: .6;
}

.footer-contact a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.footer-contact a:hover { color: #fff; }

/* --- Bottom bar --- */
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 24px 20px;
	border-top: 1px solid rgba(255 255 255 / .08);
	flex-wrap: wrap;
}

.footer-copy {
	font-size: 12px;
	color: rgba(255 255 255 / .3);
}

/* --- Social links --- */
.footer-social {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.footer-social__btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: rgba(255, 255, 255, .12);
	transition: background .2s var(--ease);
}

.footer-social__btn:hover {
	background: rgba(255, 255, 255, .25);
}

.footer-social__btn img { display: block; }

@media (max-width: 767px) {
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/*--------------------------------------------------------------
# Homepage Sections
--------------------------------------------------------------*/

/* --- Shared section helpers --- */
.section-header {
	text-align: center;
	margin-bottom: 40px;
}

.section-eyebrow {
	font-family: var(--font-accent);
	font-size: 15px;
	color: var(--c-primary-light);
	font-style: italic;
	margin-bottom: 6px;
}

.section-title {
	font-family: var(--font-accent);
	font-size: clamp(26px, 3.5vw, 32px);
	font-weight: 600;
	color: var(--c-gray-900);
	line-height: 1.3;
	margin: 0 0 10px;
}

.section-desc {
	font-size: 15px;
	color: var(--c-gray-500);
	max-width: 560px;
	margin-inline: auto;
}

.section-header--row .section-desc { margin-inline: 0; }

/* --- Hero --- */
.section-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	background: var(--c-primary-dark) center 35%/cover no-repeat;
	overflow: hidden;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		rgba(10,28,20,.92) 0%,
		rgba(10,28,20,.82) 38%,
		rgba(10,28,20,.45) 68%,
		rgba(10,28,20,.15) 100%);
}

.hero-texture {
	position: absolute;
	inset: 0;
	opacity: .025;
	background-image: radial-gradient(circle, #fff 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	padding-top: 120px;
	padding-bottom: 100px;
}

/* .hero-content { max-width: 600px; } */

.hero-title {
	font-family: var(--font-accent);
	font-size: clamp(36px, 5.5vw, 64px);
	font-weight: 600;
	color: #fff;
	line-height: 1.1;
	margin: 0 0 20px;
}

.hero-eyebrow {
	font-family: var(--font-accent);
	font-size: 15px;
	color: var(--c-primary-100);
	font-style: italic;
	margin-bottom: 14px;
	opacity: .9;
}

.hero-subtitle {
	font-size: 17px;
	color: rgba(255,255,255,.62);
	line-height: 1.75;
	margin: 0 0 36px;
	max-width: 480px;
}

.hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.btn--lg { padding: 14px 28px; font-size: 15px; }

.btn--outline-light {
	background: transparent;
	border-color: rgba(255 255 255 / .5);
	color: #fff;
}

.btn--outline-light:hover {
	background: rgba(255 255 255 / .1);
	border-color: #fff;
	color: #fff;
}

.hero-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: rgba(255 255 255 / .6);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.hero-badge__arrow { font-size: 20px; opacity: .5; }

@media (max-width: 1023px) {
	.hero-badge { display: none; }
	.hero-inner { justify-content: flex-start; }
}

@media (max-width: 767px) {
	.section-hero { min-height: 80vh; }
	.hero-inner { padding-top: 100px; padding-bottom: 60px; }
	.hero-title { font-size: 32px; }
	.hero-subtitle { font-size: 15px; }
	.hero-actions { flex-direction: column; }
	.btn--lg { width: 100%; justify-content: center; }
}

@media (min-width: 768px) {
	.section-hero { background-attachment: fixed; }
}

/* --- Stats --- */
.section-stats {
	background: #fff;
	border-bottom: 1px solid var(--c-gray-200);
}

.stats-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	text-align: center;
}

.stat-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 28px 20px;
	border-right: 1px solid var(--c-gray-200);
}

.stat-item:last-child { border-right: none; }

.stat-number {
	font-family: var(--font-primary);
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 800;
	color: var(--c-primary);
	line-height: 1;
}

.stat-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-gray-700);
	margin-top: 4px;
}

.stat-sub {
	font-size: 12px;
	color: var(--c-gray-400);
}

@media (max-width: 767px) {
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stat-item:nth-child(2) { border-right: none; }
	.stat-item:nth-child(-n+2) { border-bottom: 1px solid var(--c-gray-200); }
	.stat-item { padding: 20px 12px; }
}

/* --- Categories --- */
.section-categories { padding-block: 80px; }

.categories-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.category-card__inner {
	display: block;
	position: relative;
	height: 220px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	transition: transform .3s var(--ease);
}

.category-card__inner:hover { transform: translateY(-3px); }

/* Gradient background set inline via data-gradient (or fallback) */
.category-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.category-card__img-overlay {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .6;
}

.category-card__gradient-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.08) 55%, transparent 100%);
}

.category-card__body {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 18px 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.category-card__info { display: flex; flex-direction: column; gap: 3px; }

.category-card__name {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.2;
}

.category-card__count {
	font-size: 12px;
	color: rgba(255,255,255,.6);
}

.category-card__cta {
	font-size: 13px;
	color: rgba(255,255,255,.7);
	font-weight: 500;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.section-categories { padding-block: 48px; }
	.category-card__inner { height: 160px; }
	.category-card__name { font-size: 17px; }
}

/* --- Featured Products --- */
.section-featured-products {
	padding-block: 0 80px;
	background: #fff;
}

.products-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.product-card {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.product-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.product-card__inner { display: block; text-decoration: none; flex: 1; }

.product-card__img-wrap {
	position: relative;
	height: 180px;
	overflow: hidden;
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-card__img--placeholder {
	background: linear-gradient(135deg, var(--c-primary), var(--c-primary-mid));
	width: 100%;
	height: 100%;
}

.product-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.product-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--c-primary-50);
	color: var(--c-primary);
}

.product-card__body { padding: 16px 18px 18px; }

.product-card__cat-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	margin-bottom: 8px;
}

.product-card__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--c-gray-900);
	margin: 0 0 4px;
}

.product-card__tag {
	font-size: 13px;
	color: var(--c-gray-500);
	margin: 0 0 14px;
}

.product-card__excerpt {
	font-size: 13px;
	color: var(--c-gray-500);
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__cta {
	display: flex;
	gap: 8px;
	padding: 0 18px 18px;
}

.product-card__cta .btn { flex: 1; }

@media (max-width: 1023px) {
	.products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.section-featured-products { padding-bottom: 56px; }
	.products-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (max-width: 560px) {
	.section-featured-products { padding-bottom: 56px; }
	.products-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* --- Commitments --- */
.section-commitments {
	padding-block: 80px;
	background: #fff;
}

.commitments-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.commitment-card {
	padding: 28px 24px;
	border-radius: var(--radius);
	border: 1px solid var(--c-gray-200);
	background: var(--c-gray-50);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.commitment-card:hover {
	border-color: var(--c-primary-light);
	box-shadow: var(--shadow-md);
}

.commitment-card__icon {
	color: var(--c-primary);
	margin-bottom: 14px;
	display: block;
}

.commitment-card__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-gray-900);
	margin: 0 0 6px;
}

.commitment-card__desc {
	font-size: 13px;
	color: var(--c-gray-500);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 1023px) {
	.commitments-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.section-commitments { padding-block: 56px; }
	.commitments-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Farm Story --- */
.section-farm-story {
	position: relative;
	overflow: hidden;
	padding-block: 100px 120px;
	background: linear-gradient(135deg, #1B4332 0%, #134E4A 100%);
}

.section-farm-story::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .05;
	background-image: radial-gradient(circle, #fff 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}

.farm-story-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.farm-story__text { order: 1; }
.farm-story__media { order: 2; }

.farm-story__eyebrow {
	font-family: var(--font-accent);
	font-size: 14px;
	color: var(--c-primary-100);
	font-style: italic;
	margin-bottom: 10px;
}

.farm-story__title {
	font-family: var(--font-accent);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
	margin: 0 0 16px;
}

.farm-story__body {
	font-size: 15px;
	color: rgba(255,255,255,.55);
	line-height: 1.8;
	margin-bottom: 28px;
}

.farm-story__body p { margin: 0 0 12px; }
.farm-story__body p:last-child { margin-bottom: 0; }

.farm-story__text .btn--outline {
	background: transparent;
	border-color: rgba(255,255,255,.4);
	color: #fff;
}

.farm-story__text .btn--outline:hover {
	background: rgba(255,255,255,.1);
	border-color: #fff;
}

/* 2×2 image grid */
.farm-story__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.farm-story__grid-img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.farm-story__grid-placeholder {
	height: 180px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Legacy single-image style */
.farm-story__img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: var(--radius-xl);
}

@media (max-width: 1023px) {
	.section-farm-story { padding-block: 64px; }
	.farm-story-inner { grid-template-columns: 1fr; gap: 40px; }
	.farm-story__text { order: 1; }
	.farm-story__media { order: 2; }
}

@media (max-width: 767px) {
	.section-farm-story { padding-block: 56px; }
	.farm-story__grid-img, .farm-story__grid-placeholder { height: 130px; }
}

/* --- Testimonials --- */
.section-testimonials {
	padding-block: 80px;
	background: #fff;
}

.testimonials-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.testimonial-card {
	background: var(--c-gray-50);
	border: 1px solid var(--c-gray-200);
	border-radius: var(--radius);
	padding: 28px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.testimonial-card__open-quote {
	font-size: 40px;
	color: var(--c-primary-100);
	font-family: var(--font-accent);
	line-height: 1;
	margin-bottom: 12px;
}

.testimonial-card__quote {
	font-size: 14px;
	color: var(--c-gray-600);
	line-height: 1.7;
	font-style: italic;
	margin: 0 0 20px;
	flex: 1;
	min-height: 60px;
}

.testimonial-card__footer {
	display: flex;
	align-items: center;
	gap: 10px;
}

.testimonial-card__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-primary-50);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	color: var(--c-primary);
	flex-shrink: 0;
}

.testimonial-card__meta { display: flex; flex-direction: column; gap: 2px; }

.testimonial-card__author {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-gray-900);
}

.testimonial-card__company {
	font-size: 11px;
	color: var(--c-gray-400);
}

@media (max-width: 1023px) {
	.testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 767px) {
	.section-testimonials { padding-block: 56px; }
	.testimonials-grid { grid-template-columns: 1fr; }
}

/* --- CTA --- */
.section-cta {
	background: transparent;
	padding-block: 80px;
}

.cta-inner {
	background: var(--c-primary);
	border-radius: var(--radius-xl);
	padding: 56px 48px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.cta-inner::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .06;
	background-image: radial-gradient(circle, #fff 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
}

.cta-text { position: relative; z-index: 1; }

.cta-title {
	font-family: var(--font-accent);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 600;
	color: #fff;
	margin: 0 0 8px;
	line-height: 1.2;
}

.cta-desc {
	font-size: 15px;
	color: rgba(255,255,255,.6);
	margin: 0;
	max-width: 480px;
}

.cta-actions {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.cta-actions .btn { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 1023px) {
	.cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 32px; }
}

@media (max-width: 767px) {
	.section-cta { padding-block: 48px; }
	.cta-inner { padding: 36px 24px; }
	.cta-actions { flex-direction: column; width: 100%; }
	.cta-actions .btn { width: 100%; justify-content: center; }
}

/*--------------------------------------------------------------
# Product Archive (archive-san-pham.php)
--------------------------------------------------------------*/

/* --- Hero banner --- */
.archive-hero {
	background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
	padding-block: 56px;
}

.archive-hero__inner { text-align: left; }

.archive-hero__title {
	font-family: var(--font-accent);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
}

.archive-hero__desc {
	font-size: 16px;
	color: rgba(255 255 255 / .7);
	margin: 0;
}

/* --- Layout --- */
.archive-layout { padding-block: 48px; background-color: var(--c-bg); }

/* --- Filter bar --- */
.archive-filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 32px;
	position: sticky;
	top: var(--header-h);
	background: var(--c-bg);
	padding-block: 12px;
	z-index: 10;
	border-bottom: 1px solid var(--c-gray-200);
}

.filter-btn {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 100px;
	border: 1px solid var(--c-gray-300);
	font-size: 13px;
	font-weight: 500;
	color: var(--c-gray-600);
	text-decoration: none;
	transition: all var(--dur) var(--ease);
	white-space: nowrap;
}

.filter-btn:hover,
.filter-btn.is-active {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

/* --- Pagination --- */
.archive-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
	flex-wrap: wrap;
}

.archive-pagination a.page-numbers,
.archive-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 10px;
	border-radius: var(--radius);
	border: 1px solid var(--c-gray-200);
	font-size: 14px;
	color: var(--c-gray-700);
	text-decoration: none;
	transition: all var(--dur) var(--ease);
}

.archive-pagination a.page-numbers:hover,
.archive-pagination span.page-numbers.current {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

/* --- Empty state --- */
.archive-empty {
	text-align: center;
	color: var(--c-gray-400);
	padding-block: 64px;
	font-size: 15px;
}

/* --- Wholesale block --- */
.wholesale-block {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--c-primary-50);
	border: 1px solid var(--c-primary-100);
	border-radius: var(--radius-lg);
	padding: 24px 28px;
	margin-top: 48px;
}

.wholesale-block__icon {
	flex-shrink: 0;
	color: var(--c-primary);
	margin-top: 2px;
}

.wholesale-block__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-gray-900);
	display: block;
	margin-bottom: 6px;
}

.wholesale-block__text {
	font-size: 14px;
	color: var(--c-gray-600);
	margin: 0;
	line-height: 1.65;
}

@media (max-width: 767px) {
	.archive-filter { top: var(--header-h); gap: 6px; }
	.filter-btn { padding: 6px 12px; font-size: 12px; }
}

/*--------------------------------------------------------------
# Product Single (single-san-pham.php)
--------------------------------------------------------------*/

/* --- Breadcrumb --- */
.breadcrumb {
	padding-block: 16px;
	font-size: 13px;
	color: var(--c-gray-400);
}

.breadcrumb a {
	color: var(--c-gray-500);
	text-decoration: none;
}

.breadcrumb a:hover { color: var(--c-primary); }

/* --- Product layout: 2-col --- */
.product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	padding-bottom: 56px;
	align-items: start;
}

/* --- Gallery --- */
.product-gallery__main {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--c-gray-100);
	aspect-ratio: 4/3;
}

.product-gallery__main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity var(--dur) var(--ease);
}

.product-gallery__main-img--placeholder {
	background: var(--c-primary-100);
}

.product-detail-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.product-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.gallery-thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	background: none;
	transition: border-color var(--dur) var(--ease);
}

.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-thumb:hover,
.gallery-thumb.is-active { border-color: var(--c-primary); }

/* --- Product info panel --- */
.product-info__category {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--c-primary-light);
	margin: 0 0 10px;
}

.product-info__category a { color: inherit; text-decoration: none; }

.product-info__title {
	font-family: var(--font-accent);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	color: var(--c-gray-900);
	margin: 0 0 16px;
	line-height: 1.2;
}

.product-info__excerpt {
	font-size: 15px;
	color: var(--c-gray-600);
	line-height: 1.7;
	margin: 0 0 28px;
}

.product-info__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.product-info__cta .btn { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 1023px) {
	.product-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Tab bar --- */
.product-tabs-wrap {
	background: #fff;
	border-top: 1px solid var(--c-gray-200);
	border-bottom: 1px solid var(--c-gray-200);
	position: sticky;
	top: var(--header-h);
	z-index: 10;
}

.product-tabs {
	display: flex;
	gap: 0;
}

.product-tab {
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-gray-500);
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.product-tab:hover { color: var(--c-gray-900); }

.product-tab.is-active {
	color: var(--c-primary);
	border-bottom-color: var(--c-primary);
}

/* --- Tab panels --- */
.product-tab-panels { padding-block: 40px 56px; }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* --- Product description --- */
.product-description {
	font-size: 15px;
	line-height: 1.8;
	color: var(--c-gray-700);
	max-width: 760px;
}

.product-description p { margin: 0 0 16px; }
.product-description h2,
.product-description h3 { color: var(--c-gray-900); margin: 24px 0 12px; }

/* --- Specs table --- */
.specs-table {
	width: 100%;
	max-width: 600px;
	border-collapse: collapse;
	font-size: 14px;
}

.specs-table tr { border-bottom: 1px solid var(--c-gray-200); }
.specs-table tr:last-child { border-bottom: none; }

.specs-table th {
	width: 40%;
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	color: var(--c-gray-700);
	background: var(--c-gray-50);
}

.specs-table td {
	padding: 12px 16px;
	color: var(--c-gray-600);
}

/* --- Wholesale panel --- */
.product-wholesale {
	font-size: 15px;
	line-height: 1.75;
	color: var(--c-gray-700);
	max-width: 640px;
}

/* --- Related products --- */
.product-related {
	padding-block: 0 64px;
	border-top: 1px solid var(--c-gray-200);
	padding-top: 48px;
}

@media (max-width: 767px) {
	.product-tab { padding: 12px 14px; font-size: 13px; }
	.product-tab-panels { padding-block: 28px 40px; }
}

/*--------------------------------------------------------------
# Inner Pages — Shared
--------------------------------------------------------------*/

/* --- Page hero (shared by About + Contact) --- */
.page-hero {
	background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
	padding-block: 56px 48px;
}

.page-hero__inner { text-align: left; }

.page-hero__title {
	font-family: var(--font-accent);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 14px;
}

.page-hero__desc {
	font-size: 16px;
	color: rgba(255 255 255 / .75);
	max-width: 560px;
	margin-inline: 0;
	margin-bottom: 0;
}

/* --- Generic page content prose --- */
.page-content {
	font-size: 15px;
	line-height: 1.8;
	color: var(--c-gray-700);
}

.page-content p  { margin: 0 0 18px; }
.page-content h2 { font-family: var(--font-accent); font-size: 26px; color: var(--c-gray-900); margin: 32px 0 12px; }
.page-content h3 { font-size: 18px; font-weight: 700; color: var(--c-gray-900); margin: 24px 0 10px; }

/* --- Forms (shared) --- */
.form-group  { margin-bottom: 20px; max-width: 100%; }

.form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-gray-700);
	margin-bottom: 6px;
}

.form-required { color: #e53e3e; margin-left: 2px; }

/* Specificity 0,1,1 — beats the Underscores reset (input[type="text"], 0,1,1 same + earlier in file loses cascade) */
input.form-input,
textarea.form-textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--c-gray-300);
	border-radius: var(--radius);
	font-size: 14px;
	font-family: var(--font-primary);
	color: var(--c-gray-900);
	background: #fff;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	appearance: none;
}

input.form-input:focus,
textarea.form-textarea:focus {
	outline: none;
	border-color: var(--c-primary-light);
	box-shadow: 0 0 0 3px rgba(64 145 108 / .15);
}

textarea.form-textarea { resize: vertical; min-height: 120px; }

.form-row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.btn--full { width: 100%; justify-content: center; }

@media (max-width: 599px) {
	.form-row--2col { grid-template-columns: 1fr; }
}

/*--------------------------------------------------------------
# About Page
--------------------------------------------------------------*/

/* --- Intro section --- */
.about-intro { padding-block: 56px 40px; }

.about-intro__inner { max-width: 760px; }

/* --- Story section (2-col: image + text) --- */
.about-story {
	padding-block: 56px;
	background: var(--c-gray-50);
}

.about-story__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.about-story__img {
	width: 100%;
	border-radius: var(--radius-xl);
	object-fit: cover;
	aspect-ratio: 4/3;
}

.about-story__title {
	font-family: var(--font-accent);
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 700;
	color: var(--c-gray-900);
	margin: 0 0 16px;
	line-height: 1.25;
}

.about-story__body {
	font-size: 15px;
	line-height: 1.8;
	color: var(--c-gray-600);
}

.about-story__body p { margin: 0 0 14px; }
.about-story__body p:last-child { margin-bottom: 0; }

/* --- Stats strip --- */
.about-stats {
	background: var(--c-primary-dark);
	padding-block: 40px;
}

.about-stats .stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-stats .stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 20px;
	border-right: 1px solid rgba(255 255 255 / .12);
}

.about-stats .stat-item:last-child { border-right: none; }

.about-stats .stat-item__number {
	font-family: var(--font-accent);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	color: #fff;
	line-height: 1;
	margin-bottom: 6px;
}

.about-stats .stat-item__label {
	font-size: 13px;
	color: rgba(255 255 255 / .65);
	text-align: center;
}

@media (max-width: 1023px) {
	.about-story__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 767px) {
	.about-stats .stats-grid { grid-template-columns: repeat(2, 1fr); }
	.about-stats .stat-item { border-right: none; border-bottom: 1px solid rgba(255 255 255 / .12); }
	.about-stats .stat-item:nth-child(odd) { border-right: 1px solid rgba(255 255 255 / .12); }
	.about-stats .stat-item:nth-last-child(-n+2) { border-bottom: none; }
}

/*--------------------------------------------------------------
# Contact Page
--------------------------------------------------------------*/

/* --- Two-column layout: info + form --- */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.65fr;
	gap: 48px;
	padding-block: 60px 80px;
	align-items: start;
}

/* --- Contact info panel --- */
.contact-info__heading {
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 600;
	color: var(--c-gray-900);
	margin: 0 0 14px;
}

.contact-info__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Each contact item = its own white card */
.contact-info__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 16px;
	border-radius: var(--radius);
	border: 1px solid var(--c-gray-200);
	background: #fff;
}

/* Plain icon — no green box */
.contact-info__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--c-primary);
}

.contact-info__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--c-gray-400);
	margin-bottom: 3px;
}

.contact-info__value {
	font-size: 14px;
	color: var(--c-gray-900);
	font-weight: 600;
	text-decoration: none;
	display: block;
}

a.contact-info__value:hover { color: var(--c-primary); }

/* --- Social / Quick-channels card --- */
.contact-social {
	padding: 16px;
	border-radius: var(--radius);
	border: 1px solid var(--c-gray-200);
	background: #fff;
}

.contact-social__heading {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--c-gray-400);
	margin: 0 0 12px;
}

.contact-social__links { display: flex; gap: 8px; flex-wrap: wrap; }

.contact-social__btn {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: var(--c-gray-50);
	border: 1px solid var(--c-gray-200);
	transition: background .2s var(--ease), border-color .2s var(--ease);
}

.contact-social__btn:hover {
	background: var(--c-primary-50);
	border-color: var(--c-primary-100);
}

.contact-social__btn img { display: block; }

/* Map thumbnail with overlay */
.contact-map-thumb {
	border-radius: 12px;
	overflow: hidden;
	height: 160px;
	position: relative;
	border: 1px solid var(--c-gray-200);
}

.contact-map-thumb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .4;
}

.contact-map-thumb__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.contact-map-thumb__pin { font-size: 22px; }

.contact-map-thumb__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--c-gray-700);
	text-align: center;
	padding: 0 16px;
}

.contact-map-thumb__link {
	font-size: 12px;
	font-weight: 600;
	color: var(--c-primary);
	text-decoration: none;
}

.contact-map-thumb__link:hover { text-decoration: underline; }

/* --- Form column card --- */
.contact-form-col {
	background: #fff;
	border-radius: 16px;
	padding: 36px;
	border: 1px solid var(--c-gray-200);
	box-shadow: var(--shadow-sm);
}

/* CF7: make control wrappers block so inputs stretch full width */
.wpcf7-form-control-wrap { display: block; }

.contact-form-col__heading {
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 700;
	color: var(--c-gray-900);
	margin: 0 0 8px;
}

.contact-form-col__sub {
	font-size: 14px;
	color: var(--c-gray-500);
	margin: 0 0 28px;
}

/* --- Select dropdown (báo giá form) --- */
.form-select {
	width: 100%;
	padding: 10px 36px 10px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--c-gray-300);
	font-size: 14px;
	font-family: var(--font-primary);
	color: var(--c-gray-900);
	background: var(--c-gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-select:focus {
	border-color: var(--c-primary-light);
	box-shadow: 0 0 0 3px rgba(64 145 108 / .15);
}

/* Placeholder option — match input ::placeholder color */
.form-select:invalid,
.form-select option[value=""] {
	color: var(--c-gray-400);
}
.form-select option:not([value=""]) { color: var(--c-gray-900); }

/* --- Multi-select dropdown (Sản phẩm quan tâm) --- */
.form-label-note {
	font-weight: 400;
	color: var(--c-gray-400);
	font-size: 12px;
	margin-left: 4px;
}

/* Wrapper — positions trigger + panel */
.multi-select-wrap { position: relative; width: 100%; table-layout: fixed; }

/* Trigger — looks like the styled select but uses its own SVG arrow */
.ms-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
	gap: 8px;
	overflow: hidden; /* safety net */
	/* Override .form-select background arrow — we use .ms-trigger__icon instead */
	background-image: none;
	padding-right: 14px;
	min-width: 0;
}
.ms-trigger__text {
	flex: 1;      /* grow to fill available space */
	width: 0;
	min-width: 0; /* required: allows flex child to shrink below content width */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	color: var(--c-gray-400);
}
.ms-trigger--has-value .ms-trigger__text { color: var(--c-gray-900); }
.ms-trigger__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: var(--c-gray-400);
	transition: transform .2s;
}
.ms-trigger.is-open .ms-trigger__icon { transform: rotate(180deg); }
.ms-trigger.is-open {
	border-color: var(--c-primary-light);
	box-shadow: 0 0 0 3px rgba(64 145 108 / .15);
}

/* Dropdown panel */
.ms-panel {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 300;
	background: #fff;
	border: 1.5px solid var(--c-primary-100);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0 0 0 / .1);
	max-height: 220px;
	overflow-y: auto;
}
.ms-panel.is-open { display: block; }

/* Items inside the panel */
.ms-panel .wpcf7-checkbox { display: block; }
.ms-panel .wpcf7-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--c-gray-100);
	margin: 0;
	transition: background .15s;
}
.ms-panel .wpcf7-list-item:last-child { border-bottom: none; }
.ms-panel .wpcf7-list-item:hover { background: var(--c-gray-50); }

/* Hide the real checkbox, show custom box */
.ms-panel .wpcf7-list-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ms-panel .wpcf7-list-item::before {
	content: '';
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	border-radius: 4px;
	border: 1.5px solid var(--c-gray-300);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .15s;
}
.ms-panel .wpcf7-list-item:has(input:checked)::before {
	background: var(--c-primary);
	border-color: var(--c-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.ms-panel .wpcf7-list-item:has(input:checked) {
	background: var(--c-primary-50);
}
.ms-panel .wpcf7-list-item-label {
	font-size: 13px;
	color: var(--c-gray-700);
}
.ms-panel .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label {
	color: var(--c-primary-dark);
	font-weight: 500;
}

/* --- CF7 submit button — force primary styles on <input type="submit"> --- */
/* wpcf7-submit = input[type="submit"], so reset rule (0,1,1) overrides .btn (0,1,0).
   Use !important to enforce design sizing. */
.wpcf7-submit {
	-webkit-appearance: none;
	appearance: none;
	background: var(--c-primary) !important;
	color: #fff !important;
	border: 1.5px solid var(--c-primary) !important;
	border-radius: var(--radius) !important;
	padding: 14px 28px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	width: 100% !important;
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wpcf7-submit:hover {
	background: var(--c-primary-mid) !important;
	border-color: var(--c-primary-mid) !important;
}

/* --- CF7 validation: chỉ hiện error sau khi click Submit (khi form có class .invalid) --- */
/* Ẩn error tip và red border khi user đang điền (blur ra field) */
.wpcf7-form:not(.invalid) .wpcf7-not-valid-tip {
	display: none !important;
}
.wpcf7-form:not(.invalid) input.wpcf7-not-valid,
.wpcf7-form:not(.invalid) select.wpcf7-not-valid,
.wpcf7-form:not(.invalid) textarea.wpcf7-not-valid {
	border-color: var(--c-gray-300) !important;
	box-shadow: none !important;
}
/* Khi đã submit và có lỗi (form.invalid), hiện đầy đủ */
.wpcf7-form.invalid .wpcf7-not-valid-tip {
	display: block;
	color: #dc3545;
	font-size: 12px;
	margin-top: 4px;
}
.wpcf7-form.invalid input.wpcf7-not-valid,
.wpcf7-form.invalid select.wpcf7-not-valid,
.wpcf7-form.invalid textarea.wpcf7-not-valid {
	border-color: #dc3545 !important;
}

/* --- Zalo note below submit --- */
.contact-form-zalo-note {
	font-size: 12px;
	color: var(--c-gray-400);
	text-align: center;
	margin-top: 12px;
}
.contact-form-zalo-note strong { color: var(--c-primary); }

/* --- Map embed (legacy full iframe, kept for backwards compat) --- */
.contact-map {
	width: 100%;
	height: 360px;
	overflow: hidden;
	display: none; /* replaced by thumbnail */
}

.contact-map__frame {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

@media (max-width: 1023px) {
	.contact-layout { grid-template-columns: 1fr; gap: 40px; }
	.contact-form-col { order: -1; }
	.contact-map-thumb { height: 140px; }
}

@media (max-width: 767px) {
	.contact-map { height: 260px; }
}

/*--------------------------------------------------------------
# Zalo Floating Chat Button
--------------------------------------------------------------*/
.zalo-float {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 9000;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #0068FF;
	color: #fff;
	text-decoration: none;
	border-radius: 100px;
	padding: 10px 18px 10px 10px;
	box-shadow: 0 4px 20px rgba(0 104 255 / .35);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	white-space: nowrap;
	max-width: 160px;
	overflow: hidden;
}

.zalo-float:hover {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0 104 255 / .45);
}

.zalo-float svg { flex-shrink: 0; }

.zalo-float__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
}

/* Bounce animation on load */
@keyframes zalo-bounce {
	0%,100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

.zalo-float {
	animation: zalo-bounce 2.4s ease-in-out 1.5s 3;
}

@media (max-width: 767px) {
	.zalo-float {
		bottom: 20px;
		right: 16px;
		padding: 10px;
		max-width: 48px;
		border-radius: 50%;
	}
	.zalo-float__label { display: none; }
}

/*--------------------------------------------------------------
# Button Variants — additional
--------------------------------------------------------------*/

/* Small button (used in product card CTA) */
.btn--small {
	padding: 7px 16px;
	font-size: 13px;
}

/* Outline dark (for light backgrounds) */
.btn--outline-dark {
	background: transparent;
	color: var(--c-primary);
	border: 2px solid var(--c-primary);
}

.btn--outline-dark:hover {
	background: var(--c-primary);
	color: #fff;
}

/*--------------------------------------------------------------
# Scroll-reveal utility (JS-driven)
--------------------------------------------------------------*/

/*
 * Elements with .reveal start invisible.
 * When IntersectionObserver adds .is-visible they animate in.
 * Delay variants: .reveal--d1 … .reveal--d4
 */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }
.reveal--d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Hero entrance animation ──────────────────────────────────── */
@keyframes hero-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow  { animation: hero-fade-up 0.6s var(--ease) 0.10s both; }
.hero-title    { animation: hero-fade-up 0.7s var(--ease) 0.25s both; }
.hero-subtitle { animation: hero-fade-up 0.6s var(--ease) 0.40s both; }
.hero-actions  { animation: hero-fade-up 0.6s var(--ease) 0.55s both; }

.page-hero--about .page-hero__eyebrow { animation: hero-fade-up 0.6s var(--ease) 0.10s both; }
.page-hero--about .page-hero__title   { animation: hero-fade-up 0.7s var(--ease) 0.25s both; }
.page-hero--about .page-hero__desc    { animation: hero-fade-up 0.6s var(--ease) 0.40s both; }

@media (min-width: 768px) {
	.page-hero--about { background-attachment: fixed; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-eyebrow,
	.hero-title,
	.hero-subtitle,
	.hero-actions,
	.page-hero--about .page-hero__eyebrow,
	.page-hero--about .page-hero__title,
	.page-hero--about .page-hero__desc { animation: none; }
}

/*--------------------------------------------------------------
# Product badge (shared — archive + single)
--------------------------------------------------------------*/
.product-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	background: var(--c-primary);
	color: #fff;
	line-height: 1.5;
}

/*--------------------------------------------------------------
# Print styles
--------------------------------------------------------------*/
@media print {
	.site-header,
	.site-footer,
	.zalo-float,
	.archive-filter,
	.product-tabs-wrap { display: none !important; }
	body { font-size: 12pt; color: #000; }
	a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; }
}

/* ============================================================
   BLOG — Article Card + Homepage Featured Section
   ============================================================ */

/* --- Section eyebrow (italic tagline above section title) --- */
.section-eyebrow {
	font-family: var(--font-accent);
	font-size: 14px;
	font-style: italic;
	color: var(--c-primary-light);
	margin: 0 0 8px;
}

/* --- Section: Blog Featured (homepage) --- */
.section-blog-featured {
	padding-block: 80px;
	background: var(--c-gray-50);
}

.articles-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.section-blog-featured__footer {
	text-align: center;
	margin-top: 36px;
}

/* --- Article Card --- */
.article-card {
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.article-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.article-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.article-card__img-wrap {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.article-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}

.article-card:hover .article-card__img {
	transform: scale(1.04);
}

.article-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
	opacity: 0.15;
}

.article-card__body {
	padding: 16px 18px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.article-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.article-card__cat {
	font-size: 11px;
	font-weight: 600;
	color: var(--c-primary);
	background: var(--c-primary-50);
	padding: 2px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

.article-card__date {
	font-size: 11px;
	color: var(--c-gray-400);
}

.article-card__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-gray-900);
	line-height: 1.45;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-card__excerpt {
	font-size: 13px;
	color: var(--c-gray-500);
	line-height: 1.65;
	flex: 1;
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-card__read-more {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-primary);
	margin-top: auto;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
	.articles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.section-blog-featured { padding-block: 56px; }
	.articles-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG — Archive page (home.php / category.php)
   ============================================================ */

/* Hero eyebrow for blog */
.archive-hero--blog {
	padding-block: 64px;
}

.archive-hero__eyebrow {
	font-family: var(--font-accent);
	font-size: 14px;
	font-style: italic;
	color: var(--c-primary-100);
	margin: 0 0 8px;
}

/* Count badge inside filter chip */
.filter-btn__count {
	display: inline-block;
	margin-left: 4px;
	font-size: 11px;
	opacity: 0.6;
}

/* Blog archive: sticky filter bar has white bg (not --c-bg) */
.archive-hero--blog ~ .archive-layout .archive-filter {
	background: var(--c-bg);
}

/* Pagination list wrapper from paginate_links type=list */
.archive-pagination a.page-numbers.prev,
.archive-pagination a.page-numbers.next {
	font-size: 16px;
}

.archive-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.archive-pagination ul li {
	display: contents;
}

@media (max-width: 767px) {
	.archive-hero--blog { padding-block: 48px; }
}

/* ============================================================
   BLOG — Single post (single.php)
   ============================================================ */

/* .single-post { padding-bottom: 80px; } */

/* Breadcrumb separator */
.breadcrumb__sep {
	margin-inline: 4px;
	opacity: 0.4;
}

.breadcrumb__current {
	color: var(--c-gray-500);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 320px;
	display: inline-block;
	vertical-align: middle;
}

/* Article header */
.single-post__header {
	max-width: 760px;
	margin: 0 auto;
	padding-block: 28px 32px;
}

.single-post__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.single-post__title {
	font-family: var(--font-accent);
	font-size: clamp(26px, 5vw, 42px);
	font-weight: 600;
	color: var(--c-gray-900);
	line-height: 1.25;
	margin: 0 0 16px;
}

.single-post__lead {
	font-size: 17px;
	font-weight: 500;
	color: var(--c-gray-700);
	line-height: 1.75;
	margin: 0;
}

/* Hero image */
.single-post__hero-img {
	max-width: 900px;
	margin: 0 auto 40px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 16/9;
}

.single-post__hero-img-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Prose body */
.single-post__body {
	max-width: 720px;
	margin: 0 auto;
}

.post-prose {
	font-size: 15px;
	color: var(--c-gray-700);
	line-height: 1.85;
}

.post-prose p  { margin: 0 0 20px; }

.post-prose h2 {
	font-family: var(--font-accent);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 600;
	color: var(--c-gray-900);
	margin: 36px 0 14px;
	line-height: 1.3;
}

.post-prose h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--c-gray-900);
	margin: 28px 0 10px;
}

.post-prose blockquote {
	border-left: 3px solid var(--c-primary);
	padding-left: 20px;
	margin: 28px 0;
	font-style: italic;
	color: var(--c-gray-600);
	font-size: 16px;
	line-height: 1.75;
}

.post-prose img {	width: 100%;
	border-radius: var(--radius);
	margin-block: 8px;
}

/* Related posts section */
.single-post__related-section {
	background: var(--c-gray-50);
	padding-block: 64px;
	margin-top: 56px;
}

.single-post__related-label {
	font-family: var(--font-accent);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 600;
	color: var(--c-gray-900);
	margin: 0 0 32px;
	line-height: 1.3;
}

/*--------------------------------------------------------------
# Archive Hero — dot texture + eyebrow (products & blog)
--------------------------------------------------------------*/

.archive-hero {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--header-h) + 48px);
	padding-bottom: 48px;
}

.archive-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .04;
	background-image: radial-gradient(circle, #fff 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}

.archive-hero .ctn { position: relative; z-index: 2; text-align: left; }

.archive-hero__eyebrow {
	font-family: var(--font-accent);
	font-size: 14px;
	color: var(--c-primary-100);
	font-style: italic;
	margin-bottom: 8px;
}

/*--------------------------------------------------------------
# Wholesale CTA Block (products archive bottom)
--------------------------------------------------------------*/

.wholesale-cta {
	background: var(--c-primary);
	border-radius: var(--radius-xl);
	padding: 40px 48px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 56px;
}

.wholesale-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .06;
	background-image: radial-gradient(circle, #fff 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
}

.wholesale-cta__body { position: relative; z-index: 2; }

.wholesale-cta__title {
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 14px;
}

.wholesale-cta__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wholesale-cta__item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: rgba(255 255 255 / .75);
}

.wholesale-cta__check {
	color: var(--c-primary-100);
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
	margin-top: 1px;
}

.wholesale-cta__actions {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	text-align: center;
}

@media (max-width: 767px) {
	.wholesale-cta { flex-direction: column; padding: 32px 24px; }
	.wholesale-cta__actions { width: 100%; }
	.wholesale-cta__actions .btn { width: 100%; justify-content: center; }
}

/*--------------------------------------------------------------
# Product Detail — hero bg, price notice
--------------------------------------------------------------*/

.product-hero-bg {
	background: var(--c-gray-50);
}

.product-hero-bg .breadcrumb {
	background: transparent;
	padding-top: calc(var(--header-h) + 16px);
}

.product-price-notice {
	background: var(--c-primary-50);
	border: 1px solid var(--c-primary-100);
	border-radius: var(--radius);
	padding: 14px 18px;
	margin-bottom: 20px;
}

.product-price-notice__main {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-primary);
}

.product-price-notice__sub {
	font-size: 12px;
	color: var(--c-primary-light);
	margin-top: 2px;
}

/*--------------------------------------------------------------
# Page Hero — eyebrow + dot texture (About, Contact, etc.)
--------------------------------------------------------------*/

.page-hero {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--header-h) + 52px);
	padding-bottom: 52px;
}

.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .04;
	background-image: radial-gradient(circle, #fff 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}

.page-hero .ctn { position: relative; z-index: 2; text-align: left; }

.page-hero__eyebrow {
	font-family: var(--font-accent);
	font-size: 14px;
	color: var(--c-primary-100);
	font-style: italic;
	margin-bottom: 8px;
}

/* About hero — full-bleed photo with overlay */
.page-hero--about {
	min-height: 52vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center 40%;
	/* photo set inline; gradient overlay via ::after */
}

.page-hero--about::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(10,28,20,.9) 0%, rgba(10,28,20,.72) 55%, rgba(10,28,20,.3) 100%);
	z-index: 1;
}

.page-hero--about::before { z-index: 2; } /* dot on top of photo overlay */

.page-hero--about .ctn { z-index: 3; } /* content above both layers */

.page-hero--about .page-hero__title { line-height: 1.12; }

/*--------------------------------------------------------------
# About Page — New sections
--------------------------------------------------------------*/

/* ── Company Story ─────────────────────────────────────── */
.about-company-story {
	padding-block: 80px;
	background: #fff;
}

.about-company-story__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.about-company-story__eyebrow {
	font-family: var(--font-accent);
	font-size: 14px;
	color: var(--c-primary-light);
	font-style: italic;
	margin-bottom: 10px;
}

.about-company-story__title {
	font-family: var(--font-accent);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 600;
	color: var(--c-gray-900);
	line-height: 1.28;
	margin-bottom: 20px;
}

.about-company-story__body {
	font-size: 15px;
	color: var(--c-gray-600);
	line-height: 1.85;
	margin-bottom: 16px;
}

.about-company-story__mini-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 28px;
}

.about-mini-stat {
	text-align: center;
	padding: 18px 8px;
	border-radius: var(--radius);
	background: var(--c-primary-50);
	border: 1px solid var(--c-primary-100);
}

.about-mini-stat__number {
	font-size: 26px;
	font-weight: 800;
	color: var(--c-primary);
	font-family: var(--font-primary);
	line-height: 1.1;
}

.about-mini-stat__label {
	font-size: 12px;
	color: var(--c-gray-500);
	margin-top: 4px;
}

.about-company-story__img-wrap {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.about-company-story__img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}

/* ── Mission & Vision ──────────────────────────────────── */
.about-mission-vision {
	padding-block: 80px;
	background: var(--c-gray-50);
}

.about-mv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 40px;
}

.about-mv-card {
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--c-gray-200);
}

.about-mv-card__img-wrap {
	height: 220px;
	overflow: hidden;
	position: relative;
}

.about-mv-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.about-mv-card__img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(10,28,20,.72) 100%);
}

.about-mv-card__heading {
	position: absolute;
	bottom: 18px;
	left: 22px;
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

.about-mv-card__body {
	padding: 24px 28px;
	font-size: 15px;
	color: var(--c-gray-600);
	line-height: 1.8;
	margin: 0;
}

/* ── Core Values ───────────────────────────────────────── */
.about-core-values {
	padding-block: 80px;
	background: #fff;
}

.about-values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.about-value-card {
	padding: 28px 24px;
	border-radius: var(--radius);
	border: 1px solid var(--c-gray-200);
	background: var(--c-gray-50);
	transition: all .3s var(--ease);
}

.about-value-card:hover {
	border-color: var(--c-primary-light);
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.about-value-card__icon {
	color: var(--c-primary);
	margin-bottom: 14px;
	display: block;
}

.about-value-card__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-gray-900);
	margin-bottom: 8px;
}

.about-value-card__desc {
	font-size: 13px;
	color: var(--c-gray-500);
	line-height: 1.65;
}

/* ── Farm Gallery ──────────────────────────────────────── */
.about-farm-gallery {
	padding-block: 60px 80px;
}

.about-farm-gallery__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 16px;
	margin-top: 40px;
}

.about-farm-gallery__main {
	border-radius: 16px;
	overflow: hidden;
}

.about-farm-gallery__main-img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}

.about-farm-gallery__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
}

.about-farm-gallery__side-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 16px;
}

.about-farm-gallery__side-wrap {
	overflow: hidden;
	border-radius: 16px;
}

/* ── About responsive ──────────────────────────────────── */

/* Tablet: ≤1023px */
@media (max-width: 1023px) {
	.about-company-story {
		padding-block: 60px;
	}

	.about-company-story__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.about-company-story__img {
		height: 320px;
	}

	.about-mission-vision {
		padding-block: 60px;
	}

	.about-mv-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.about-core-values {
		padding-block: 60px;
	}

	.about-values-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.about-farm-gallery {
		padding-block: 48px 60px;
	}

	.about-farm-gallery__grid {
		grid-template-columns: 1fr;
	}

	.about-farm-gallery__side {
		grid-template-rows: unset;
		grid-template-columns: 1fr 1fr;
	}

	.about-farm-gallery__main-img {
		height: 360px;
	}

	.about-farm-gallery__side-img {
		height: 200px;
	}
}

/* Mobile: ≤767px */
@media (max-width: 767px) {
	.about-company-story {
		padding-block: 48px;
	}

	.about-company-story__inner {
		gap: 32px;
	}

	.about-company-story__mini-stats {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.about-mini-stat {
		padding: 14px 6px;
	}

	.about-mini-stat__number {
		font-size: 20px;
	}

	.about-company-story__img {
		height: 240px;
	}

	.about-mission-vision {
		padding-block: 48px;
	}

	.about-mv-card__img-wrap {
		height: 180px;
	}

	.about-core-values {
		padding-block: 48px;
	}

	.about-values-grid {
		grid-template-columns: 1fr;
	}

	.about-farm-gallery {
		padding-block: 40px 48px;
	}

	.about-farm-gallery__side {
		grid-template-columns: 1fr;
	}

	.about-farm-gallery__main-img {
		height: 260px;
	}

	.about-farm-gallery__side-img {
		height: 180px;
	}
}

�
/* --- Multi-select panel items (native form) --- */
.ms-panel__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--c-gray-100);
	font-size: 13px;
}
.ms-panel__item:last-child { border-bottom: none; }
.ms-panel__item:hover { background: var(--c-gray-50); }

.ms-panel__item input[type="checkbox"] {
	width: 17px;
	height: 17px;
	border-radius: 4px;
	flex-shrink: 0;
	accent-color: var(--c-primary);
	cursor: pointer;
}

.ms-panel__label {
	font-size: 13px;
	color: var(--c-gray-700);
}

.ms-panel__item:has(input:checked) {
	background: var(--c-primary-50);
}

.ms-panel__item:has(input:checked) .ms-panel__label {
	color: var(--c-primary-dark);
	font-weight: 500;
}
/*--------------------------------------------------------------
# Hero text-align — center on tablet & mobile
--------------------------------------------------------------*/
@media (max-width: 1023px) {
	.archive-hero__inner,
	.archive-hero .ctn,
	.page-hero__inner,
	.page-hero .ctn {
		text-align: center;
	}

	.page-hero__desc {
		margin-inline: auto;
	}
}

/* --- Google Maps embed (contact left column) --- */
.contact-map-embed {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--c-gray-200);
}

.contact-map-embed__frame {
	width: 100%;
	height: 200px;
	border: none;
	display: block;
}

/* ── Contact toast ──────────────────────────────────────── */
.contact-toast {
	position: fixed;
	top: 28px;
	right: 28px;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--c-primary);
	color: #fff;
	padding: 14px 18px;
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	max-width: 340px;
	transform: translateY(-16px);
	opacity: 0;
	pointer-events: none;
	transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.contact-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.contact-toast--error {
	background: #c0392b;
}

.contact-toast__icon {
	flex-shrink: 0;
	margin-top: 1px;
}

@media (max-width: 600px) {
	.contact-toast {
		left: 16px;
		right: 16px;
		top: 16px;
		max-width: none;
	}
}

/* Hide CF7 default response output — toast replaces it */
.wpcf7 .wpcf7-response-output {
	display: none !important;
}

/* --- Multi-select panel items (native form) --- */
.ms-panel__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--c-gray-100);
	font-size: 13px;
}
.ms-panel__item:last-child { border-bottom: none; }
.ms-panel__item:hover { background: var(--c-gray-50); }

.ms-panel__item input[type="checkbox"] {
	width: 17px;
	height: 17px;
	border-radius: 4px;
	flex-shrink: 0;
	accent-color: var(--c-primary);
	cursor: pointer;
}

.ms-panel__label {
	font-size: 13px;
	color: var(--c-gray-700);
}

.ms-panel__item:has(input:checked) {
	background: var(--c-primary-50);
}

.ms-panel__item:has(input:checked) .ms-panel__label {
	color: var(--c-primary-dark);
	font-weight: 500;
}

/* ============================================================
   TEAM SECTION — Org chart
   ============================================================ */

.section-team {
	padding-block: 80px;
	background: var(--c-gray-50);
}

/* ── Connector color token ── */
:root { --t-line: #74C69D; --t-conn: 34px; }

/* ============================================================
   Desktop / Tablet tree
   ============================================================ */

/* Hide accordion on desktop, show tree */
.t-accordion { display: none; }

.t-tree-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.t-tree {
	min-width: 840px;
	max-width: 980px;
	margin: 0 auto;
	padding: 8px 0 16px;
}

/* ── Branch ── */
.t-branch {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* ── Vertical stem ── */
.t-stem {
	width: 2px;
	height: var(--t-conn);
	background: var(--t-line);
	flex-shrink: 0;
}

/* ── Children row ── */
.t-children {
	display: flex;
	width: 100%;
}

.t-children-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	min-width: 96px;
}

/* Half-bar connector technique:
   Each column draws its portion of the horizontal bar.
   Together they form a continuous bar across all siblings. */
.t-children-col::before {
	content: '';
	position: absolute;
	top: 0;
	height: 2px;
	background: var(--t-line);
}

/* Only child — no bar needed (single-child uses straight line path) */
.t-children--1 .t-children-col::before { display: none; }

/* First child: right half only */
.t-children-col:first-child::before { left: 50%; right: 0; }

/* Last child: left half only */
.t-children-col:last-child::before { left: 0; right: 50%; }

/* Middle children: full width */
.t-children-col:not(:first-child):not(:last-child)::before { left: 0; right: 0; }

/* ── Cards ── */
.t-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
}

/* CEO */
.t-card--ceo .t-card__avatar--ceo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 3px solid #D97706;
	background: #F0F7F4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-primary-light);
	flex-shrink: 0;
}

.t-card__badge--ceo {
	background: #D97706;
	color: #fff;
	padding: 5px 16px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	white-space: nowrap;
}

/* Manager */
.t-card__avatar--manager {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 2.5px solid var(--c-primary-100);
	background: var(--c-primary-50);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-primary-light);
	flex-shrink: 0;
}

.t-card__badge--manager {
	background: var(--c-primary);
	color: #fff;
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
	text-align: center;
	white-space: nowrap;
	line-height: 1.4;
}

/* Avatar with real photo */
.t-card__avatar--img {
	overflow: hidden;
	padding: 0;
}

.t-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* Shared name */
.t-card__name {
	font-size: 11px;
	color: var(--c-gray-500);
	text-align: center;
	line-height: 1.4;
}

/* Dept card */
.t-card--dept {
	padding: 12px 10px 10px;
	border-radius: 10px;
	border: 1.5px solid var(--c-primary-100);
	background: #fff;
	box-shadow: 0 1px 4px rgba(0 0 0 / .05);
	width: 88px;
	flex-shrink: 0;
}

.t-card__icon-wrap {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-primary-50);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-primary);
	margin-bottom: 4px;
}

.t-card__role {
	font-size: 11px;
	font-weight: 600;
	color: var(--c-gray-700);
	text-align: center;
	line-height: 1.3;
	white-space: nowrap;
}

/* ============================================================
   Mobile accordion  (<768px)
   ============================================================ */

@media (max-width: 767px) {
	.section-team { padding-block: 56px; }
	.t-tree-wrap  { display: none; }
	.t-accordion  { display: block; }

	.t-accordion__ceo {
		display: flex;
		justify-content: center;
		padding-bottom: 24px;
	}

	.t-accordion__item {
		border: 1px solid var(--c-gray-200);
		border-radius: 0;
		background: #fff;
		margin-top: -1px; /* collapse borders */
	}

	.t-accordion__item:first-of-type { border-radius: 12px 12px 0 0; }
	.t-accordion__item:last-of-type  { border-radius: 0 0 12px 12px; margin-bottom: 0; }

	.t-accordion__summary {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 16px;
		cursor: pointer;
		list-style: none;
		user-select: none;
	}

	.t-accordion__summary::-webkit-details-marker { display: none; }

	.t-accordion__avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--c-primary-50);
		border: 2px solid var(--c-primary-100);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		color: var(--c-primary-light);
	}

	.t-accordion__avatar--img {
		overflow: hidden;
		padding: 0;
	}

	.t-accordion__avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
		display: block;
	}

	.t-accordion__label {
		display: flex;
		flex-direction: column;
		gap: 2px;
		flex: 1;
		min-width: 0;
	}

	.t-accordion__role {
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .05em;
		color: var(--c-primary);
	}

	.t-accordion__name {
		font-size: 13px;
		font-weight: 600;
		color: var(--c-gray-800);
	}

	.t-accordion__chevron {
		color: var(--c-gray-400);
		flex-shrink: 0;
		transition: transform .2s;
	}

	.t-accordion__item[open] .t-accordion__chevron {
		transform: rotate(180deg);
	}

	.t-accordion__depts {
		padding: 0 16px 14px;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.t-accordion__depts .t-card--dept {
		flex-direction: row;
		min-width: unset;
		white-space: normal;
		text-align: left;
	}
}

/* --- Product quick specs (2-col card grid in product info col) --- */
.product-quick-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 20px;
}

.product-quick-spec {
	padding: 12px 14px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid var(--c-gray-200);
}

.product-quick-spec__label {
	font-size: 11px;
	color: var(--c-gray-400);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 3px;
}

.product-quick-spec__value {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-gray-800);
}

/* --- Product description section (below hero) --- */
.product-description-wrap {
	padding-block: 48px 80px;
}

.product-description-wrap .product-description {
	max-width: 800px;
}

@media (max-width: 767px) {
	.product-quick-specs { grid-template-columns: 1fr 1fr; }
	.product-description-wrap { padding-block: 32px 56px; }
}
/* =====================================================
   WordPress Admin Bar — fixed header offset fix
   Khi đăng nhập, admin bar cao 32px (desktop) / 46px (mobile)
   nên site-header cần dịch xuống tương ứng.
   ===================================================== */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}