/* ============================================================
   Kien Hop FDE — 1:1 Figma build for Flatsome
   File: assets/css/khfde.css  (enqueued from functions.php)

   Design tokens (from Figma):
     Brand brown   #603913      Gold accent   #fccd35
     Gold deep     #c3922e      Gold light    #ffdd70
     Body text     #454545      Muted/dark    #0e100f
     Cream bg      #fff4ea      Light grey    #cccccc
   Container: 1408px content width inside a 1920px frame
              -> on 1920 the side gutter is 256px; we cap at 1408.
   Font in Figma: "Euclid Circular A". Falls back to theme font.
   ============================================================ */

:root {
	--khf-brown: #603913;
	--khf-brown-dark: #4d2d0f;
	--khf-gold: #fccd35;
	--khf-gold-deep: #c3922e;
	--khf-gold-light: #ffdd70;
	--khf-text: #454545;
	--khf-dark: #0e100f;
	--khf-cream: #fff4ea;
	--khf-grey: #cccccc;
	--khf-max: 1408px;
}

/* Optional Euclid Circular A — only used if the font files are dropped
   into assets/fonts/. Harmless if absent (browser falls back). */
@font-face {
	font-family: "Euclid Circular A";
	src: url("https://cloud88.ca/FDE/wp-content/themes/flatsome-child/assets/fonts/EuclidCircularA-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Euclid Circular A";
	src: url("https://cloud88.ca/FDE/wp-content/themes/flatsome-child/assets/fonts/EuclidCircularA-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Euclid Circular A";
	src: url(".https://cloud88.ca/FDE/wp-content/themes/flatsome-child/assets/fonts/EuclidCircularA-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Euclid Circular A";
	src: url("https://cloud88.ca/FDE/wp-content/themes/flatsome-child/assets/fonts/EuclidCircularA-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

.khf {
	--kfont: "Euclid Circular A", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-family: var(--kfont);
	color: var(--khf-text);
}
.khf *,
.khf *::before,
.khf *::after { box-sizing: border-box; }

.khf p { margin: 0; }

/* Shared inner container */
.khf-container {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding-inline: 24px;
}

/* Shared button styles ------------------------------------- */
.khf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border-radius: 8px;
	padding: 16px 32px;
	font-size: 24px;
	font-weight: 500;
	line-height: normal;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
	text-decoration: none;
}
.khf-btn:active { transform: translateY(1px); }
.khf-btn__icon {
	width: 40px;
	height: 40px;
	flex: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.khf-btn__icon--arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
/* solid brown w/ gold text */
.khf-btn--brown { background: var(--khf-brown); color: var(--khf-gold); }
.khf-btn--brown:hover { background: var(--khf-brown-dark); color: var(--khf-gold); }
/* outline gold (on dark) */
.khf-btn--ghost-gold { border-color: var(--khf-gold); color: var(--khf-gold); background: transparent; }
.khf-btn--ghost-gold:hover { background: var(--khf-gold); color: var(--khf-brown); }
/* solid gold w/ brown text */
.khf-btn--gold { background: var(--khf-gold); color: var(--khf-brown); }
.khf-btn--gold:hover { background: var(--khf-gold-light); color: var(--khf-brown); }
/* brown w/ gold border + gold text */
.khf-btn--brown-bordered { background: var(--khf-brown); color: var(--khf-gold); border-color: var(--khf-gold); }
.khf-btn--brown-bordered:hover { background: var(--khf-brown-dark); }

/* Section heading (gold-deep, bold, large) ----------------- */
.khf-h2 {
	color: var(--khf-gold-deep);
	font-size: 44px;
	line-height: 1.6;
	font-weight: 700;
	margin: 0;
}
.khf-eyebrow { text-transform: uppercase; }

/* ============================================================
   HERO BANNER  (node 2:15)  — homepage / product pages
   Full-bleed dark photo, top menu, headline + CTA, scroll cue
   ============================================================ */
.khf-hero {
	position: relative;
	min-height: 948px;
	display: flex;
	align-items: center;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	background-color:#FFF4EA;
}
.khf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
/* 	background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75)); */
	z-index: 1;
}
.khf-hero > * { position: relative; z-index: 2; }
.khf-hero__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding-inline: 24px;
	width: 100%;
}
.khf-hero__content { max-width: 970px; }
.khf-hero__title {
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 32px;
}
.khf-hero__desc {
	color: var(--khf-grey);
	font-size: 20px;
	line-height: 1.6;
	text-align: justify;
	margin: 0 0 32px;
}
.khf-hero__scroll {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 64px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--khf-grey);
	font-size: 18px;
}
.khf-hero__scroll svg { width: 40px; height: 40px; animation: khf-bounce 1.8s infinite; }
@keyframes khf-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* Small banner variant (About / Contact) — node 26:42845 etc */
.khf-hero--slim { min-height: 380px; }
.khf-hero--slim .khf-hero__title { margin-bottom: 0; }

/* ============================================================
   SITE HEADER / MENU  (node 4:4) — overlaid transparent nav
   Implemented as a standalone bar so it can sit over the hero.
   ============================================================ */
.khf-nav {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 10;
	height: 128px;
	display: flex;
	align-items: center;
}
.khf-nav__inner {
	max-width: 1504px;
	margin-inline: auto;
	width: 100%;
	padding: 0 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.khf-nav__logo { height: 70px; display: flex; align-items: center; }
.khf-nav__logo img { height: 70px; width: auto; display: block; }
.khf-nav__links {
	display: flex;
	align-items: center;
	gap: 32px;
}
.khf-nav__links a {
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
.khf-nav__links a:hover { color: var(--khf-gold); }
.khf-nav__icon { width: 40px; height: 40px; color: #fff; flex: none; }
.khf-nav__lang {
	border: 1px solid #fff;
	border-radius: 8px;
	padding: 8px 4px;
	min-width: 48px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}
.khf-nav__toggle { display: none; }

/* ============================================================
   ABOUT (intro) section  (node 5:161)
   ============================================================ */
.khf-about { padding: 128px 0; }
.khf-about__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	gap: 64px;
	align-items: flex-end;
}
.khf-about__text { flex: 1 1 auto; }
.khf-about__title {
	color: var(--khf-gold-deep);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 32px;
}
.khf-about__body { font-size: 20px; line-height: 1.6; text-align: justify; margin: 0 0 32px; }
.khf-about__body p { margin: 0 0 1em; }
.khf-about__media { flex: 0 0 539px; }
.khf-about__media img {
	width: 539px;
	height: 558px;
	max-width: 100%;
	object-fit: cover;
	border-radius: 50% / 12%;        /* arch-like mask approximation */
	border-radius: 280px 280px 16px 16px;
}

/* ============================================================
   NUMBER / stats strip  (node 9:12187) — sits on dark band
   ============================================================ */
.khf-stats {
	background: var(--khf-brown);
	background-size: cover;
	background-position: center;
}
.khf-stats__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding: 64px 24px;
	display: flex;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.khf-stat { flex: 1 1 220px; }
.khf-stat__label {
	border-bottom: 1px solid #fff;
	padding-bottom: 24px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	text-transform: uppercase;
}
.khf-stat__num {
	color: var(--khf-gold);
	font-size: 60px;
	font-weight: 300;
	line-height: 1.6;
	margin-top: 16px;
}
.khf-stat__unit { color: var(--khf-grey); font-size: 20px; line-height: 1.6; }

/* ============================================================
   PRODUCT showcase  (node 13:18264)
   ============================================================ */
.khf-products { padding: 128px 0; }
.khf-products__inner { max-width: var(--khf-max); margin-inline: auto; padding-inline: 24px; }
.khf-products__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 64px;
}
.khf-products__head .khf-h2 { flex: 1 1 auto; }

/* category cards row */
.khf-cats {
	display: flex;
	gap: 24px;
	align-items: stretch;
	margin-bottom: 64px;
}
.khf-cat {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	text-decoration: none;
}
.khf-cat__img {
	width: 100%;
	height: 198px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--khf-cream);
}
.khf-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.khf-cat__title {
	color: var(--khf-brown);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}
.khf-cats__arrow { display: flex; align-items: center; color: var(--khf-brown); flex: none; }
.khf-cats__arrow svg { width: 48px; height: 48px; }

/* big feature banners */
.khf-feature {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 548px;
	display: flex;
	align-items: center;
	margin-bottom: 64px;
}
.khf-feature:last-child { margin-bottom: 0; }
.khf-feature--light { background: linear-gradient(180deg, #fff4ea 44%, #fdd5ae); }
.khf-feature__media { position: absolute; inset: 0; }
.khf-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.khf-feature__inner {
	position: relative;
	z-index: 2;
	max-width: var(--khf-max);
	margin-inline: auto;
	padding: 48px;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}
.khf-feature__content { max-width: 592px; }
.khf-feature--dark .khf-feature__content { max-width: 802px; }
.khf-feature__title { font-size: 44px; font-weight: 700; line-height: 1.6; margin: 0 0 16px; }
.khf-feature--light .khf-feature__title { color: var(--khf-brown); }
.khf-feature--dark .khf-feature__title { color: var(--khf-gold); }
.khf-feature__body { font-size: 20px; line-height: 1.6; text-align: justify; }
.khf-feature--light .khf-feature__body { color: var(--khf-text); }
.khf-feature--dark .khf-feature__body { color: #fff; }
.khf-feature__body ul { margin: 8px 0 0; padding-left: 30px; list-style: disc; }
.khf-feature__body li { margin-bottom: 4px; }
.khf-feature--dark::before {
	content: "";
	position: absolute; inset: 0;
	background: rgba(14,16,15,.65);
	z-index: 1;
}
.khf-feature--dark .khf-feature__inner { z-index: 2; }

/* ============================================================
   ADVANTAGES  (node 22:30336) — 6 white cards on cream
   ============================================================ */
.khf-adv { padding: 96px 0 128px; }
.khf-adv__inner { max-width: var(--khf-max); margin-inline: auto; padding-inline: 24px; }
.khf-adv__title { text-align: center; margin-bottom: 48px; }
.khf-adv__grid {
	display: flex;
	gap: 24px;
	justify-content: space-between;
	flex-wrap: wrap;
}
.khf-advcard {
	flex: 1 1 0;
	min-width: 180px;
	background: #fff;
	border-radius: 16px;
	padding: 32px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	box-shadow: 0 4px 2px rgba(0,0,0,.1);
	text-align: center;
}
.khf-advcard img { width: 128px; height: 128px; object-fit: contain; }
.khf-advcard__title {
	color: var(--khf-brown);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
}

/* ============================================================
   OPERATIONS  (node 75:6149) — text + 3 cream cards
   ============================================================ */
.khf-ops { padding: 128px 0; }
.khf-ops__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	gap: 80px;
	align-items: center;
}
.khf-ops__intro { flex: 0 0 451px; }
.khf-ops__title { color: var(--khf-gold-deep); font-size: 44px; font-weight: 700; line-height: 1.6; margin: 0 0 32px; }
.khf-ops__body { font-size: 20px; line-height: 1.6; text-align: justify; }
.khf-ops__cards { flex: 1 1 auto; display: flex; gap: 32px; }
.khf-opscard {
	flex: 1 1 0;
	background: var(--khf-cream);
	border-radius: 16px;
	padding: 48px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.khf-opscard img { width: 100px; height: 100px; }
.khf-opscard__title {
	color: var(--khf-brown);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.6;
	padding-bottom: 16px;
}
.khf-opscard__desc { color: var(--khf-text); font-size: 20px; line-height: 1.6; text-align: justify; }
.khf-opscard__link { margin-top: auto; color: var(--khf-brown); font-size: 18px; font-weight: 500; text-decoration: none; }
.khf-opscard__link:hover { text-decoration: underline; }

/* ============================================================
   FOOTER  (node 26:30456)
   ============================================================ */
.khf-footer {
	background: var(--khf-brown);
	border-radius: 16px 16px 0 0;
	color: #fff;
	margin-top: 0;
}
.khf-footer__inner { max-width: var(--khf-max); margin-inline: auto; padding: 57px 48px; }
.khf-footer__top {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	border-bottom: 1px solid var(--khf-gold);
	padding-bottom: 32px;
	flex-wrap: wrap;
}
.khf-footer__about { flex: 1 1 514px; max-width: 514px; }
.khf-footer__org { font-size: 20px; font-weight: 600; line-height: 1.6; color: #fff; }
.khf-footer__about ul { margin: 8px 0 0; padding-left: 24px; list-style: disc; color: var(--khf-grey); font-size: 16px; line-height: 1.6; }
.khf-footer__cols { display: flex; gap: 80px; flex-wrap: wrap; }
.khf-footer__col-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	border-bottom: 1px solid #fff;
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.khf-footer__list { display: flex; flex-direction: column; gap: 4px; }
.khf-footer__list a { color: var(--khf-grey); font-size: 16px; text-decoration: none; }
.khf-footer__list a:hover { color: #fff; }
.khf-footer__social { display: flex; gap: 16px; margin-top: 32px; }
.khf-footer__social a { width: 40px; height: 40px; color: var(--khf-gold); }
.khf-footer__social svg { width: 100%; height: 100%; }
.khf-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	color: var(--khf-grey);
	font-size: 18px;
}

/* ============================================================
   ABOUT — STRATEGIC DIRECTION  (node 26:55154) — text + arch image
   ============================================================ */
.khf-strategy { padding: 0 0 0; }
.khf-strategy__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding: 0 24px;
	display: flex;
	gap: 64px;
	align-items: center;
}
.khf-strategy__text { flex: 1 1 0; }
.khf-strategy__title {
	color: var(--khf-gold-deep);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 32px;
}
.khf-strategy__sub {
	color: var(--khf-brown);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 16px;
}
.khf-strategy__body { font-size: 20px; line-height: 1.6; text-align: justify; }
.khf-strategy__body p { margin: 0 0 1em; }
.khf-strategy__body strong { color: var(--khf-brown); }
.khf-strategy__media { flex: 0 0 671px; max-width: 50%; }
.khf-strategy__media img {
	width: 100%;
	height: 548px;
	object-fit: cover;
	border-radius: 16px 120px 16px 16px;
}

/* ============================================================
   ABOUT — ORG CHART  (node 26:61185)
   ============================================================ */
.khf-org { padding: 96px 0 64px; }
.khf-org__inner { max-width: var(--khf-max); margin-inline: auto; padding-inline: 24px; }
.khf-org__title { text-align: center; margin-bottom: 48px; }
.khf-org__tree { display: flex; flex-direction: column; align-items: center; }
.khf-org__ceo {
	background: var(--khf-brown);
	color: #fff;
	border-radius: 8px;
	padding: 16px 32px;
	font-size: 36px;
	font-weight: 500;
	text-align: center;
	width: 453px;
	max-width: 100%;
}
.khf-org__connector { width: 100%; position: relative; height: 99px; }
.khf-org__connector::before {
	content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 49px;
	background: var(--khf-brown); transform: translateX(-50%);
}
.khf-org__connector::after {
	content: ""; position: absolute; top: 49px; left: 12.5%; right: 12.5%; height: 2px;
	background: var(--khf-brown);
}
.khf-org__row { display: flex; justify-content: space-between; gap: 24px; width: 100%; }
.khf-org__node { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; }
.khf-org__node::before {
	content: ""; width: 2px; height: 49px; background: var(--khf-brown);
}
.khf-org__card {
	border: 2px solid var(--khf-brown);
	border-radius: 16px;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	width: 100%;
}
.khf-org__card-title {
	border-bottom: 1px solid var(--khf-brown);
	padding-bottom: 16px;
	color: var(--khf-brown);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	width: 100%;
}
.khf-org__card-meta { color: var(--khf-text); font-size: 20px; line-height: 1.6; }

/* ============================================================
   CONTACT / QUOTE form  (node 26:30392)  — moved from style.css
   ============================================================ */
.khfde-contact {
	background: linear-gradient(180deg, #ffdd70 0%, #fccd35 46.154%, #c3922e 100%);
	padding: 96px 0;
}
.khfde-contact .khfde-contact__inner { max-width: var(--khf-max); margin: 0 auto; padding: 0 24px; }
.khfde-contact__head { text-align: center; margin-bottom: 64px; }
.khfde-contact__title { color: var(--khf-brown); font-size: 44px; line-height: 1.6; font-weight: 700; margin: 0 0 16px; text-transform: uppercase; }
.khfde-contact__subtitle { color: var(--khf-text); font-size: 20px; line-height: 1.6; margin: 0; }
.khfde-contact__form .khfde-row { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
.khfde-contact__form .khfde-row:last-child { margin-bottom: 0; }
.khfde-contact__form .khfde-col { flex: 1 1 0; min-width: 0; }
.khfde-contact__form .khfde-col--wide { flex: 2 1 0; }
.khfde-contact__form .khfde-col--full { flex: 1 1 100%; }
.khfde-contact__form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%; background: rgba(255,255,255,.5); border: none; border-radius: 8px;
	padding: 16px 32px; font-size: 24px; font-weight: 500; line-height: normal;
	color: var(--khf-dark); box-shadow: none; margin: 0; -webkit-appearance: none; appearance: none;
	transition: background .2s ease;
}
.khfde-contact__form .wpcf7-form-control:not(.wpcf7-submit)::placeholder { color: var(--khf-dark); opacity: 1; }
.khfde-contact__form .wpcf7-form-control:not(.wpcf7-submit):focus { outline: none; background: rgba(255,255,255,.75); }
.khfde-contact__form textarea.wpcf7-form-control { height: 180px; resize: vertical; }
.khfde-contact__form .khfde-select { position: relative; }
.khfde-contact__form .khfde-select select {
	padding-right: 64px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%230e100f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 32px center; background-size: 24px 24px; cursor: pointer;
}
.khfde-contact__submit { display: flex; justify-content: center; }
.khfde-contact__form .wpcf7-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 16px;
	width: 453px; max-width: 100%; background: var(--khf-brown); color: var(--khf-gold);
	border: none; border-radius: 8px; padding: 16px 72px 16px 32px; font-size: 24px; font-weight: 500;
	line-height: normal; cursor: pointer; transition: background .2s ease, transform .15s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23fccd35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 32px center; background-size: 24px 24px;
}
.khfde-contact__form .wpcf7-submit:hover { background-color: var(--khf-brown-dark); }
.khfde-contact__form .wpcf7-submit:active { transform: translateY(1px); }
.khfde-contact__form .wpcf7-not-valid-tip { color: #b00020; font-size: 14px; margin-top: 6px; }
.khfde-contact__form .wpcf7-response-output { border-radius: 8px; margin: 24px 0 0; font-size: 16px; }
.khfde-contact__form .wpcf7-spinner { margin: 0 0 0 12px; }

/* ============================================================
   WooCommerce alignment (Product / Product List pages)
   Brand the Woo output so it matches the Figma styling.
   ============================================================ */
.khf-shop .price { color: var(--khf-gold-deep) !important; font-weight: 700; }
.khf-shop .button,
.khf-shop .single_add_to_cart_button {
	background: var(--khf-brown) !important;
	color: var(--khf-gold) !important;
	border-radius: 8px !important;
}
.khf-shop .button:hover,
.khf-shop .single_add_to_cart_button:hover { background: var(--khf-brown-dark) !important; }
.khf-shop .woocommerce-loop-product__title,
.khf-shop .product_title { color: var(--khf-brown) !important; font-weight: 700 !important; }

/* ============================================================
   PRODUCT category strip (nodes 13:18264 head + 78:6220)
   Reused on Product + Product List pages above Woo output.
   ============================================================ */
.khf-prodintro { padding: 96px 0; }
.khf-prodintro__inner { max-width: var(--khf-max); margin-inline: auto; padding-inline: 24px; }
.khf-prodintro__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 32px; margin-bottom: 48px;
}
.khf-prodintro__head .khf-h2 { flex: 1 1 auto; }
/* divider sits inside the container (not full-bleed); no bottom padding */
.khf-prodintro--bordered { padding-bottom: 0; }
.khf-prodintro--bordered .khf-prodintro__inner { border-bottom: 2px solid var(--khf-brown); }
.khf-prodintro__title-center { text-align: center; margin-bottom: 48px; }

/* category cards reuse .khf-cats / .khf-cat from the homepage */

/* ============================================================
   WOOCOMMERCE archive (Product List) — branded grid + sidebar
   Targets default Woo/Flatsome markup inside .khf-shop.
   ============================================================ */
.khf-shop .woocommerce { max-width: var(--khf-max); margin-inline: auto; padding-inline: 24px; }

/* product cards -> white rounded card w/ brown title underline */
.khf-shop ul.products li.product,
.khf-shop .products .product {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 8px rgba(0,0,0,.15);
	padding: 32px 28px;
	text-align: center;
}
.khf-shop ul.products li.product img { border-radius: 8px; margin-bottom: 16px; }
.khf-shop ul.products li.product .woocommerce-loop-product__title {
	padding-bottom: 16px; border-bottom: 1px solid var(--khf-brown);
	font-size: 24px; text-align: left;
}
.khf-shop ul.products li.product .price { display: block; text-align: left; margin-top: 8px; }
.khf-shop ul.products li.product .button { margin-top: 16px; }

/* sidebar category filter -> card w/ shadow */
.khf-shop .widget,
.khf-shop .shop-sidebar .widget {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(0,0,0,.15);
	padding: 16px;
	overflow: hidden;
}
.khf-shop .widget-title,
.khf-shop .widget .widget-title {
	color: var(--khf-brown); font-size: 28px; font-weight: 600;
	display: flex; align-items: center; gap: 13px; margin-bottom: 8px;
}
.khf-shop .product-categories li a { color: var(--khf-text); font-size: 20px; }
.khf-shop .product-categories li { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.08); }

/* pagination -> circular page tokens */
.khf-shop .woocommerce-pagination ul { border: none; display: flex; gap: 16px; justify-content: center; }
.khf-shop .woocommerce-pagination ul li { border: none; }
.khf-shop .woocommerce-pagination ul li a,
.khf-shop .woocommerce-pagination ul li span {
	width: 48px; height: 48px; line-height: 48px; padding: 0; border-radius: 50%;
	font-size: 24px; color: var(--khf-grey); background: transparent;
	display: flex; align-items: center; justify-content: center;
}
.khf-shop .woocommerce-pagination ul li span.current,
.khf-shop .woocommerce-pagination ul li a:hover {
	background: var(--khf-brown); color: var(--khf-gold);
}

/* single product (node 32:79433 styling cues) */
.khf-shop.single-product .product_title { font-size: 40px; }
.khf-shop.single-product div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--khf-brown); }

/* ============================================================
   CONTACT page  (node 78:6324) — HQ info (left) + form (right)
   ============================================================ */
/* (static .khf-contact block removed — Contact page now uses [khfde_contact_section]) */
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
	.khf-h2, .khf-about__title, .khf-ops__title, .khf-feature__title, .khfde-contact__title { font-size: 34px; }
	.khf-hero__title { font-size: 32px; }
	.khf-cats { flex-wrap: wrap; }
	.khf-cat { flex: 1 1 40%; }
	.khf-cats__arrow { display: none; }
	.khf-ops__inner { flex-direction: column; gap: 40px; }
	.khf-ops__intro { flex: 1 1 100%; }
	.khf-ops__cards { flex-wrap: wrap; }
	.khf-opscard { flex: 1 1 40%; }
}

@media (max-width: 1100px) {
	.khf-strategy__inner { flex-direction: column; gap: 40px; align-items: stretch; }
	.khf-strategy__media { flex: 1 1 100%; max-width: 100%; }
	.khf-org__row { flex-wrap: wrap; }
	.khf-org__node { flex: 1 1 45%; }
}

@media (max-width: 849px) {
	/* nav collapses */
	.khf-nav__links { display: none; }
	.khf-nav__toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 48px; height: 48px; border: 1px solid #fff; border-radius: 8px;
		background: transparent; color: #fff; cursor: pointer;
	}
	.khf-nav__toggle svg { width: 28px; height: 28px; }
	.khf-nav__inner.is-open .khf-nav__links {
		display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
		position: absolute; top: 100%; right: 0; left: 0;
		background: var(--khf-brown); padding: 24px 48px;
	}
	.khf-hero { min-height: 40vh; }
	.khf-hero__title { font-size: 26px; }
	.khf-about__inner { flex-direction: column; align-items: stretch; gap: 40px; }
	.khf-about__media { flex: 1 1 100%; }
	.khf-about__media img { width: 100%; height: auto; }
	.khf-feature__inner { flex-direction: column; align-items: flex-start; padding: 32px; }
	.khf-products, .khf-about, .khf-ops { padding: 64px 0; }
	.khf-adv { padding: 48px 0 64px; }
	.khf-advcard { flex: 1 1 40%; }
	.khf-footer__top { flex-direction: column; gap: 32px; }
	.khf-footer__cols { gap: 40px; }
}

@media (max-width: 560px) {
	.khf-cat { flex: 1 1 100%; }
	.khf-advcard { flex: 1 1 100%; }
	.khf-opscard { flex: 1 1 100%; }
	.khf-hero__title { font-size: 22px; }
	.khf-h2, .khf-about__title, .khf-ops__title, .khf-feature__title, .khfde-contact__title { font-size: 28px; }
	.khf-stat__num { font-size: 44px; }
	.khf-btn { font-size: 18px; padding: 14px 24px; }
}

/* ============================================================
   [khfde_countdown] — animated count-up counter element
   ============================================================ */
.khf-countdown {
	--khf-cd-color: #CCC;
	width: 100%;
	padding: 24px 0;
}
.khf-countdown__inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.khf-countdown--center .khf-countdown__inner { align-items: center; text-align: center; }
.khf-countdown--left   .khf-countdown__inner { align-items: flex-start; text-align: left; }
.khf-countdown--right  .khf-countdown__inner { align-items: flex-end; text-align: right; }

.khf-countdown__title {
	color: #FFF;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 160%; /* 38.4px */
	margin: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid #FFF;
}
.khf-countdown--center .khf-countdown__title { align-self: stretch; }
.khf-countdown--left   .khf-countdown__title { align-self: stretch; }
.khf-countdown--right  .khf-countdown__title { align-self: stretch; }

/* number + prefix/suffix + unit pill all sit on one baseline */
.khf-countdown__main {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	line-height: 1;
}
.khf-countdown--center .khf-countdown__main { justify-content: center; }
.khf-countdown--right  .khf-countdown__main { justify-content: flex-end; }

.khf-countdown__num,
.khf-countdown__prefix,
.khf-countdown__suffix {
	color: #FCCD35;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 64px;
	font-weight: 300;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}
.khf-countdown__prefix { margin-right: -4px; }

/* the unit "box" / pill after the number */
.khf-countdown__unit {
	align-self: center;
	display: inline-flex;
	align-items: center;
	background: var(--khf-cd-color);
	color: var(--khf-brown);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 14px;
	border-radius: 8px;
	white-space: nowrap;
}

.khf-countdown__subtitle {
	color: #FFF;
	text-align: justify;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; /* 32px */
	margin: 0;
}

@media (max-width: 560px) {
	.khf-countdown__num,
	.khf-countdown__prefix,
	.khf-countdown__suffix { font-size: 40px; }
	.khf-countdown__title { font-size: 18px; }
	.khf-countdown__unit { font-size: 16px; padding: 6px 12px; }
	.khf-countdown__subtitle { font-size: 16px; }
}

/* ============================================================
   [khfde_imgtabs] — image-tab slider (top) + content panel (below)
   ============================================================ */
.khf-imgtabs { width: 100%; }

/* --- top: the tab slider --- */
.khf-imgtabs__slider {
	display: flex;
	align-items: center;
	gap: 12px;
}
.khf-imgtabs__viewport {
	flex: 1 1 auto;
	overflow: hidden;
}
.khf-imgtabs__track {
	display: flex;
	gap: 0;
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}
.khf-imgtabs__item {
	flex: 0 0 25%;        /* JS overrides per `visible`; this is the 4-up default */
	max-width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 12px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--khf-text);
	text-align: center;
	opacity: 0.6;
	transition: opacity 0.25s ease;
}
.khf-imgtabs__item:hover { opacity: 0.85; }
.khf-imgtabs__item.is-active { opacity: 1; }

.khf-imgtabs__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: var(--khf-cream);
	border: 2px solid transparent;
	transition: border-color 0.25s ease;
}
.khf-imgtabs__item.is-active .khf-imgtabs__thumb {
	border-color: var(--khf-gold);
}
.khf-imgtabs__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.khf-imgtabs__caption {
	color: #603913;
	text-align: center;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 25px;
	font-weight: 700;
	line-height: 160%; /* 44.8px */
}
.khf-imgtabs__item.is-active .khf-imgtabs__caption {
	color: var(--khf-gold-deep);
	font-weight: 700;
}

/* prev / next arrows */
.khf-imgtabs__nav {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 8px;
	border: 1px solid var(--khf-grey);
	background: #fff;
	color: var(--khf-brown);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.khf-imgtabs__nav:hover:not(:disabled) {
	background: var(--khf-gold);
	border-color: var(--khf-gold);
}
.khf-imgtabs__nav:disabled { opacity: 0.35; cursor: default; }

/* --- below: the content panels --- */
.khf-imgtabs__panels { margin-top: 32px; }
.khf-imgtabs__panel {
	display: none;
	background: url(https://cloud88.ca/FDE/wp-content/uploads/2026/06/Group-8.png) no-repeat 100% / cover;
	padding: 68px 68px 68px 68px;
}
/* flex lives on .is-active (NOT the base rule) so hidden tabs stay hidden */
.khf-imgtabs__panel.is-active { display: flex; }
.khf-imgtabs__panel.is-active .img.has-hover { width: 50% !important; }
.khf.khf-imgtabs:before {
    content: '';
    background: url(https://cloud88.ca/FDE/wp-content/uploads/2026/06/pattern-1.png);
    display: block;
    position: absolute;
    width: 400px;
    height: 400px;
    left: -15%;
    bottom: -19%;
    z-index: -1;
}

/* text column inside a panel */
/* .content-tab-image { width: 50%; } */
.content-tab-image h3 {
	color: #603913;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 35px;
	font-weight: 700;
	line-height: 160%; /* 70.4px */
}
.content-tab-image p {
	color: #454545;
	text-align: justify;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 20px;
	font-weight: 400;
	line-height: 160%; /* 32px */
}

@media (max-width: 850px) {
	.khf-imgtabs__caption { font-size: 16px; }
	.khf-imgtabs__nav { width: 38px; height: 38px; font-size: 20px; }
}

/* --- UX Builder edit view only (stacked tabs, each with an editable body) --- */
.khf-imgtab-edit {
	border: 1px dashed var(--khf-grey);
	border-radius: 8px;
	margin-bottom: 16px;
}
.khf-imgtab-edit__title {
	background: var(--khf-cream);
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 16px;
	font-weight: 700;
	padding: 10px 16px;
	border-bottom: 1px dashed var(--khf-grey);
	border-radius: 8px 8px 0 0;
}
.khf-imgtab-edit__body { padding: 16px; }

/* ============================================================
   [khfde_orgchart] — organisation chart (Sơ đồ tổ chức)
   ------------------------------------------------------------
   CEO box on top, a CSS-drawn connector tree, then a row of
   department boxes. Connectors are pure CSS so the layout adapts
   to any number of boxes. --khf-org-gap (connector length) can be
   overridden inline by the shortcode.
   ============================================================ */
.khf-orgchart {
	--khf-orgchart-gap: 40px;      /* vertical connector length */
	--khf-orgchart-colgap: 32px;   /* horizontal gap between boxes */
	width: 100%;
	padding: 96px 0 0px;
}
.khf-orgchart__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.khf-orgchart__title {
	margin: 0;
	color: var(--khf-gold-deep);
	text-align: center;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-orgchart__tree {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* top (CEO) box + the line dropping from it */
.khf-orgchart__top {
	position: relative;
	display: flex;
	justify-content: center;
	padding-bottom: var(--khf-orgchart-gap);
}
.khf-orgchart__top::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: var(--khf-orgchart-gap);
	background: var(--khf-brown);
}
.khf-orgchart__ceo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 320px;
	padding: 16px 32px;
	border-radius: 8px;
	background: var(--khf-brown);
	color: #fff;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}

/* row of department boxes */
.khf-orgchart__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: var(--khf-orgchart-colgap);
	width: 100%;
}
.khf-orgchart__node {
	position: relative;
	flex: 1 1 0;
	max-width: 320px;
	display: flex;
	margin-left: 0 !important;
	padding-top: var(--khf-orgchart-gap);
}
/* horizontal bar — extends half the gap each side so the line stays
   continuous across the flex gap between boxes */
.khf-orgchart__node::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--khf-orgchart-colgap) / -2);
	width: calc(100% + var(--khf-orgchart-colgap));
	height: 2px;
	background: var(--khf-brown);
}
.khf-orgchart__node:first-child::before { left: 50%; width: calc(50% + var(--khf-orgchart-colgap) / 2); }
.khf-orgchart__node:last-child::before  { width: calc(50% + var(--khf-orgchart-colgap) / 2); }
.khf-orgchart__node:only-child::before  { display: none; }
/* vertical dropper into each box */
.khf-orgchart__node::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: var(--khf-orgchart-gap);
	background: var(--khf-brown);
}

.khf-orgchart__box {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 32px 24px;
	border: 2px solid var(--khf-brown);
	border-radius: 16px;
	text-align: center;
}
/* arrowhead pointing down into the box */
.khf-orgchart__box::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -100%);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 9px solid var(--khf-brown);
}
.khf-orgchart__name {
	width: 100%;
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-orgchart__name--divided {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--khf-brown);
}
.khf-orgchart__count {
	color: var(--khf-text);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
}

/* medium screens: shrink type + gaps but keep the tree */
@media (max-width: 1100px) {
	.khf-orgchart__row { --khf-orgchart-colgap: 20px; }
	.khf-orgchart__title { font-size: 36px; }
	.khf-orgchart__ceo { font-size: 30px; min-width: 260px; }
	.khf-orgchart__name { font-size: 22px; }
	.khf-orgchart__count { font-size: 18px; }
	.khf-orgchart__box { padding: 24px 16px; }
}

/* small screens: stack into a single column, drop the tree connectors */
@media (max-width: 850px) {
	.khf-orgchart { padding: 56px 0 40px; }
	.khf-orgchart__inner { gap: 32px; }
	.khf-orgchart__title { font-size: 26px; }
	.khf-orgchart__top { padding-bottom: 0; }
	.khf-orgchart__top::after { display: none; }
	.khf-orgchart__ceo { font-size: 24px; min-width: 0; width: 100%; max-width: 360px; padding: 14px 24px; }
	.khf-orgchart__row { flex-direction: column; align-items: center; gap: 20px; }
	.khf-orgchart__node { max-width: 360px; width: 100%; padding-top: 0; }
	.khf-orgchart__node::before,
	.khf-orgchart__node::after,
	.khf-orgchart__box::after { display: none; }
	.khf-orgchart__name { font-size: 20px; }
	.khf-orgchart__count { font-size: 16px; }
}

/* --- UX Builder edit view (stacked preview) --- */
.khf-orgchart-edit {
	border: 1px dashed var(--khf-grey);
	border-radius: 8px;
	padding: 16px;
	text-align: center;
}
.khf-orgchart-edit__title {
	color: var(--khf-gold-deep);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 12px;
}
.khf-orgchart-edit__ceo {
	display: inline-block;
	background: var(--khf-brown);
	color: #fff;
	border-radius: 8px;
	padding: 8px 24px;
	font-weight: 600;
	margin-bottom: 16px;
}
.khf-orgchart-edit__items {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.khf-orgchart-edit__item {
	border: 2px solid var(--khf-brown);
	border-radius: 12px;
	padding: 12px 16px;
	min-width: 140px;
}
.khf-orgchart-edit__item strong { display: block; color: var(--khf-brown); }
.khf-orgchart-edit__item span { color: var(--khf-text); font-size: 13px; }

/* ============================================================
   [khfde_strategy] — strategic direction slider (Định hướng chiến lược)
   ------------------------------------------------------------
   Reusable UX Builder element. Uses the .khf-stratdir namespace —
   deliberately distinct from the static .khf-strategy section in
   pages/about.php so the two never collide.
   ============================================================ */
.khf-stratdir { width: 100%; padding: 64px 0; }
.khf-stratdir__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 64px;
}
.khf-stratdir__left {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}
.khf-stratdir__title {
	margin: 0;
	color: var(--khf-gold-deep);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-stratdir__viewport { width: 100%; }
/* only the active slide shows; arrows swap them */
.khf-stratdir__slide { display: none; flex-direction: column; gap: 16px; }
.khf-stratdir__slide.is-active { display: flex; animation: khf-stratdir-fade 0.35s ease; }
@keyframes khf-stratdir-fade { from { opacity: 0; } to { opacity: 1; } }
.khf-stratdir__sub {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--khf-brown);
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-stratdir__content {
	color: var(--khf-text);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 20px;
	line-height: 1.6;
	text-align: justify;
}
.khf-stratdir__content ul { margin: 0; padding-left: 0; list-style: disc; }
.khf-stratdir__content li { margin-bottom: 8px; }
.khf-stratdir__content li:last-child { margin-bottom: 0; }
.khf-stratdir__content p { margin: 0 0 12px; }
.khf-stratdir__content p:last-child { margin-bottom: 0; }
.khf-stratdir__content strong { color: var(--khf-brown); }

.khf-stratdir__nav { display: flex; gap: 16px; }
.khf-stratdir__arrow {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--khf-grey);
	border-radius: 8px;
	background: #fff;
	color: var(--khf-brown);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.khf-stratdir__arrow--prev { border-color: var(--khf-gold); } /* matches Figma's highlighted prev */
.khf-stratdir__arrow:hover:not(:disabled) { background: var(--khf-gold); border-color: var(--khf-gold); }
.khf-stratdir__arrow:disabled { opacity: 0.35; cursor: default; }

.khf-stratdir__media { flex: 0 0 auto; width: 50%; max-width: 671px; }
.khf-stratdir__media img {
	display: block;
	width: 100%;
	aspect-ratio: 671 / 548;
	object-fit: cover;
	/* notched corners: top-left 96px + bottom-right 128px chamfer (Figma node 26:61151) */
	clip-path: polygon(14.3% 0, 100% 0, 100% 76.6%, 80.9% 100%, 0 100%, 0 17.5%);
}

@media (max-width: 1100px) {
	.khf-stratdir__inner { flex-direction: column; align-items: stretch; gap: 40px; }
	.khf-stratdir__media { width: 100%; max-width: 100%; }
	.khf-stratdir__title { font-size: 36px; }
	.khf-stratdir__sub { font-size: 24px; }
}
@media (max-width: 600px) {
	.khf-stratdir { padding: 48px 0; }
	.khf-stratdir__title { font-size: 26px; }
	.khf-stratdir__content { font-size: 16px; }
}

/* --- UX Builder edit view --- */
.khf-stratdir-edit {
	border: 1px dashed var(--khf-grey);
	border-radius: 8px;
	padding: 16px;
}
.khf-stratdir-edit__title {
	color: var(--khf-gold-deep);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 12px;
}
.khf-stratdir-edit__item {
	border: 1px dashed var(--khf-grey);
	border-radius: 8px;
	margin-bottom: 12px;
}
.khf-stratdir-edit__sub {
	background: var(--khf-cream);
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-weight: 700;
	padding: 8px 16px;
	border-bottom: 1px dashed var(--khf-grey);
	border-radius: 8px 8px 0 0;
}
.khf-stratdir-edit__body { padding: 12px 16px; }

/* ============================================================
   [khfde_product_banner] — Product page hero (node 32:73342)
   ------------------------------------------------------------
   Light cream→peach gradient banner with notched bottom corners.
   Centered title + description, a product image, and a scroll cue.
   Optionally embeds [khfde_header] with a dark-on-light nav variant.
   ============================================================ */
.khf-pbanner {
	--pbn: 128px; /* bottom-corner notch size */
	position: relative;
	background: linear-gradient(180deg, #fff4ea 0%, #fff4ea 30%, #fcd7b2 100%);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pbn)), calc(100% - var(--pbn)) 100%, var(--pbn) 100%, 0 calc(100% - var(--pbn)));
}
.khf-pbanner__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding: 207px 24px 96px; /* header is no longer embedded -> balanced padding */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 40px;
}
.khf-pbanner__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: 1366px;
}
.khf-pbanner__title {
	margin: 0;
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-pbanner__desc {
	color: var(--khf-text);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 20px;
	line-height: 1.6;
}
.khf-pbanner__desc p { margin: 0; }
.khf-pbanner__media img {
	display: block;
	width: 522px;
	max-width: 70%;
	height: auto;
	margin-inline: auto;
}
.khf-pbanner__scroll {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--khf-brown);
	font-size: 18px;
	text-decoration: none;
}
.khf-pbanner__scroll svg { width: 40px; height: 40px; animation: khf-bounce 1.8s infinite; }

/* dark-on-light nav variant when the header is embedded in this banner */
.khf-pbanner .khf-nav__links a,
.khf-pbanner .khf-nav__icon,
.khf-pbanner .khf-nav__lang { color: var(--khf-brown); }
.khf-pbanner .khf-nav__lang { border-color: var(--khf-brown); }
.khf-pbanner .khf-nav__links a:hover { color: var(--khf-gold-deep); }
.category-page-row .khf-pbanner {
      width: 100vw;
      max-width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
}
body.khf-shop { overflow-x: clip; }

/* Transparent header overlaying the banner — mirrors the static /san-pham/
   (.page-id-10) treatment so shop / category / single-product pages match. */
body.khf-shop #masthead {
	background: transparent;
	position: absolute;
	width: 100%;
	height: 128px;
}
body.khf-shop #masthead .header-inner {
	border-radius: 0 0 16px 16px;
	background: #fff;
}

/* Hide the Flatsome shop/category page-title bar (breadcrumb strip) — our
   banner already shows the category name. Rendered outside #main so the
   woocommerce_show_page_title filter can't reach it. */
body.khf-shop .shop-page-title.category-page-title,
body.khf-shop .shop-page-title.page-title { display: none; }

/* Kill the top padding on the shop content row so the banner sits flush
   against the product grid (Flatsome adds default top padding here). */
body.khf-shop .category-page-row { padding-top: 0 !important; }

/* ============================================================
   LIVE WooCommerce shop/category grid — restyle Flatsome's
   .products / .product-small loop to match the Figma "04_Product
   List" card (256px image, brown name w/ underline, 2-line desc).
   Scoped to body.khf-shop so only shop/category/single are hit.
   ============================================================ */
/* two-column wrapper injected around the loop (woocommerce_before/after_shop_loop):
   .khf-shopwrap { <aside .khf-plist__side> + .khf-shopmain{ ul.products + pager } } */
body.khf-shop .category-page-row .khf-shopwrap {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	padding-top: 48px;
}
body.khf-shop .category-page-row .khf-shopmain { flex: 1 1 0; min-width: 0; }
body.khf-shop .category-page-row .products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 0;
}
body.khf-shop .category-page-row .products .product-small.col {
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.khf-shop .category-page-row .products .product-small .col-inner,
body.khf-shop .category-page-row .products .product-small .box {
	height: 100%;
}
body.khf-shop .category-page-row .products .product-small .box {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	padding: 32px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
/* image — square 256, centered, no zoom overlay */
body.khf-shop .category-page-row .products .product-small .box-image {
	width: 256px;
	max-width: 100%;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: 0;
}
body.khf-shop .category-page-row .products .product-small .box-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
body.khf-shop .category-page-row .products .product-small .box-text {
	width: 100%;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* product name — brown, bold, underlined divider */
body.khf-shop .category-page-row .products .product-small .name.product-title,
body.khf-shop .category-page-row .products .product-small .box-text .name {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
	text-transform: none;
}
body.khf-shop .category-page-row .products .product-small .name.product-title a,
body.khf-shop .category-page-row .products .product-small .name a {
	color: var(--khf-brown);
	text-decoration: none;
	 display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* injected short description (khfde_after_shop_loop_item_title) */
body.khf-shop .category-page-row .products .product-small .khf-loop-desc {
	margin: 0;
	color: var(--khf-text);
	font-size: 20px;
	line-height: 1.6;
	text-align: justify;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* hide Flatsome extras we don't want on the card (category label, price,
   rating, add-to-cart) — the Figma card is name + description only */
body.khf-shop .category-page-row .products .product-small .category,
body.khf-shop .category-page-row .products .product-small .price-wrapper,
body.khf-shop .category-page-row .products .product-small .star-rating,
body.khf-shop .category-page-row .products .product-small .add-to-cart-button,
body.khf-shop .category-page-row .products .product-small .button.ajax_add_to_cart,
body.khf-shop .category-page-row .products .product-small .add-to-cart-grid {
	display: none !important;
}
/* subtle lift on hover, like the static card */
body.khf-shop .category-page-row .products .product-small .box {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.khf-shop .category-page-row .products .product-small .box:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* WooCommerce pagination — match the Figma pager (48px rounded squares) */
body.khf-shop .category-page-row .woocommerce-pagination { margin-top: 48px; }
body.khf-shop .category-page-row .woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}
body.khf-shop .category-page-row .woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}
body.khf-shop .category-page-row .woocommerce-pagination ul li a,
body.khf-shop .category-page-row .woocommerce-pagination ul li span {
	width: 48px;
	height: 48px;
	min-width: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--khf-grey);
	color: var(--khf-brown);
	font-size: 20px;
	line-height: 1;
	padding: 0;
	background: #fff;
}
body.khf-shop .category-page-row .woocommerce-pagination ul li span.current {
	background: var(--khf-brown);
	color: var(--khf-gold);
	border-color: var(--khf-brown);
}

@media (max-width: 1100px) {
	body.khf-shop .category-page-row .khf-shopwrap { flex-direction: column; }
	body.khf-shop .category-page-row .khf-shopmain { width: 100%; }
	body.khf-shop .category-page-row .khf-shopwrap .khf-plist__side { flex-basis: auto; max-width: none; width: 100%; }
	body.khf-shop .category-page-row .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	body.khf-shop .category-page-row .products { grid-template-columns: 1fr; }
	body.khf-shop .category-page-row .products .product-small .box { padding: 24px; }
	body.khf-shop .category-page-row .products .product-small .name.product-title,
	body.khf-shop .category-page-row .products .product-small .box-text .name { font-size: 22px; }
}

/* Title-only variant (single product page): no desc/media/scroll, so tighten
   the vertical padding and drop the notch a touch. */
.khf-pbanner--title-only .khf-pbanner__inner { padding: 160px 24px 72px; gap: 0; }
.khf-pbanner--title-only .khf-pbanner__content { gap: 0; }

@media (max-width: 1100px) {
	.khf-pbanner__title { font-size: 32px; }
}
@media (max-width: 850px) {
	.khf-pbanner { --pbn: 48px; }
	.khf-pbanner__inner { padding: 150px 20px 64px; gap: 28px; }
	.khf-pbanner__title { font-size: 24px; }
	.khf-pbanner__desc { font-size: 16px; }
	.khf-pbanner__media img { max-width: 82%; }
	.khf-pbanner--title-only .khf-pbanner__inner { padding: 120px 20px 52px; }
}

/* ============================================================
   [khfde_contact_section] — Contact section (Figma node 78:6324)
   ------------------------------------------------------------
   Cream info card (TRỤ SỞ CHÍNH) + white form card (shadow) side by
   side, with a full-width map below. Reuses [khfde_contact_form_inline]
   for the form fields. Namespace .khf-csec is distinct from the static
   .khf-contact section in pages/contact.php.
   ============================================================ */
.khf-csec { padding: 96px 0; }
.khf-csec__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	gap: 32px;
	align-items: stretch;
}
/* .khf-csec__inner:after{
	content:'';
	width:100%;
	background: var(--khf-cream);
	min-height: 817px;
} */
.khf-csec {
    position: relative;
    z-index: 1;
}

.khf-csec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 817px;
    background: #FFF4EA;
    z-index: -1;
}
.khf-csec__info {
	flex: 1 1 0;
	min-width: 0;
/* 	background: var(--khf-cream); */
	border-radius: 16px;
	padding: 64px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.khf-csec__heading {
	margin: 0;
	color: var(--khf-gold-deep);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-csec__org {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--khf-brown);
	color: var(--khf-brown);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-csec__addr { margin: 0; color: var(--khf-text); font-size: 20px; line-height: 1.6; }
.khf-csec__rows { display: flex; flex-direction: column; gap: 16px; }
.khf-csec__row { display: flex; align-items: center; gap: 16px; }
.khf-csec__row svg { width: 40px; height: 40px; flex: none; color: var(--khf-brown); }
.khf-csec__row a { color: var(--khf-brown); font-size: 20px; font-weight: 600; text-decoration: none; }
.khf-csec__row a:hover { color: var(--khf-gold-deep); }
.khf-csec__social { display: flex; gap: 16px; margin-top: 8px; }
.khf-csec__social a {
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--khf-brown);
	border-radius: 8px;
	color: var(--khf-brown);
	transition: background 0.2s ease, color 0.2s ease;
}
.khf-csec__social a:hover { background: var(--khf-brown); color: var(--khf-gold); }
.khf-csec__social svg { width: 22px; height: 22px; }

/* white form card */
.khf-csec__formcard {
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
	border-radius: 16px;
	padding: 48px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.khf-csec__formtitle {
	margin: 0;
	color: var(--khf-gold-deep);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-csec__formsub { margin: 0; color: var(--khf-text); font-size: 20px; line-height: 1.6; text-align: justify; }
.khf-csec .wpcf7-form { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.khf-csec .khf-contact__field { margin: 0; }
.khf-csec .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	background: var(--khf-cream);
	border: 1px solid var(--khf-brown);
	border-radius: 16px;
	padding: 16px 32px;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 18px;
	line-height: normal;
	color: var(--khf-dark);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease;
}
.khf-csec .wpcf7-form-control:not(.wpcf7-submit)::placeholder { color: var(--khf-brown); opacity: 1; }
.khf-csec .wpcf7-form-control:not(.wpcf7-submit):focus { outline: none; border-color: var(--khf-brown-dark); }
.khf-csec textarea.wpcf7-form-control { height: 144px; resize: vertical; }
.khf-csec .wpcf7-submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background: var(--khf-brown);
	color: var(--khf-gold);
	border: none;
	border-radius: 8px;
	padding: 16px 56px 16px 32px;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23fccd35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 20px 20px;
}
.khf-csec .wpcf7-submit:hover { background: var(--khf-brown-dark); }

/* full-width map below the cards */
.khf-csec__map {
	max-width: var(--khf-max);
	margin: 48px auto 0;
	padding-inline: 24px;
}
.khf-csec__map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	border-radius: 16px;
}

@media (max-width: 1100px) {
	.khf-csec__inner { flex-direction: column; gap: 24px; }
	.khf-csec__heading, .khf-csec__formtitle { font-size: 32px; }
	.khf-csec__info, .khf-csec__formcard { padding: 40px; }
}
@media (max-width: 600px) {
	.khf-csec { padding: 56px 0; }
	.khf-csec__heading, .khf-csec__formtitle { font-size: 26px; }
	.khf-csec__info, .khf-csec__formcard { padding: 28px; }
	.khf-csec__map iframe { height: 300px; }
}

/* ============================================================
   [khfde_products] — product-type cards (Figma node 36:91745)
   Header (+ "Tìm hiểu thêm") then a row of cards: notched image +
   name + description.
   ============================================================ */
.khf-pcards { padding: 96px 0; }
.khf-pcards__inner { max-width: var(--khf-max); margin-inline: auto; padding-inline: 24px; }
.khf-pcards__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
}
.khf-pcards__title {
	margin: 0;
	color: var(--khf-gold-deep);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-pcards__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background: var(--khf-brown);
	color: var(--khf-gold);
	border-radius: 8px;
	padding: 16px 32px;
	font-size: 20px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s ease;
}
.khf-pcards__more:hover { background: var(--khf-brown-dark); color: var(--khf-gold); }
.khf-pcards__more svg { width: 24px; height: 24px; flex: none; }
.khf-pcards__grid { display: flex; gap: 40px; }
.khf-pcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.khf-pcard__img { width: 100%; aspect-ratio: 388 / 354; margin-bottom: 40px; }
.khf-pcard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* notched corners: top-left 96px + bottom-right 64px chamfer */
	clip-path: polygon(96px 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%, 0 96px);
}
.khf-pcard__name {
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--khf-brown);
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-pcard__desc { margin: 0; color: var(--khf-text); font-size: 18px; line-height: 1.6; text-align: justify; }
.khf-pcard--link { text-decoration: none; transition: transform 0.2s ease; }
.khf-pcard--link:hover { transform: translateY(-4px); }
.khf-pcard--link .khf-pcard__name { text-decoration: none; }

@media (max-width: 1100px) {
	.khf-pcards__title { font-size: 32px; }
	.khf-pcards__grid { flex-wrap: wrap; }
	.khf-pcard { flex: 1 1 45%; }
}
@media (max-width: 600px) {
	.khf-pcards { padding: 56px 0; }
	.khf-pcards__head { flex-direction: column; align-items: flex-start; }
	.khf-pcards__title { font-size: 26px; }
	.khf-pcard { flex: 1 1 100%; }
	.khf-pcard__name { font-size: 22px; }
}

/* ============================================================
   [khfde_service] — full-width service banner (Figma node 36:91747)
   Dark photo with notched corners + overlay; title + text + button.
   ============================================================ */
.khf-svc { padding: 0 24px; }
.khf-svc__card {
	--svcn: 128px; /* corner chamfer */
	position: relative;
	max-width: var(--khf-max);
	margin-inline: auto;
	background-color: var(--khf-dark);
	background-size: cover;
	background-position: center;
	clip-path: polygon(var(--svcn) 0, 100% 0, 100% calc(100% - var(--svcn)), calc(100% - var(--svcn)) 100%, 0 100%, 0 var(--svcn));
}
.khf-svc__card::before { content: ""; position: absolute; inset: 0; background: rgba(14, 16, 15, 0.65); }
.khf-svc__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding: 128px;
}
.khf-svc__text { display: flex; flex-direction: column; gap: 16px; max-width: 802px; }
.khf-svc__title {
	margin: 0;
	color: var(--khf-gold);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-svc__desc { color: #fff; font-size: 20px; line-height: 1.6; text-align: justify; }
.khf-svc__desc p { margin: 0; }
.khf-svc__desc ul { margin: 8px 0 0; padding-left: 30px; list-style: disc; }
.khf-svc__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background: var(--khf-gold);
	color: var(--khf-brown);
	border-radius: 8px;
	padding: 16px 32px;
	font-size: 24px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
}
.khf-svc__btn:hover { background: var(--khf-gold-light); color: var(--khf-brown); }
.khf-svc__btn svg { width: 24px; height: 24px; flex: none; }

@media (max-width: 1100px) {
	.khf-svc__content { padding: 64px; }
	.khf-svc__title { font-size: 32px; }
}
@media (max-width: 850px) {
	.khf-svc__card { --svcn: 48px; }
	.khf-svc__content { flex-direction: column; align-items: flex-start; padding: 40px 28px; gap: 24px; }
	.khf-svc__title { font-size: 26px; }
	.khf-svc__desc { font-size: 16px; }
}

/* ============================================================
   [khfde_productlist] — static product-list layout (Figma 04 / 36:91826)
   Left filter sidebar + 3-column product card grid + pagination.
   Pure layout (no WooCommerce).
   ============================================================ */
.khf-plist { padding: 64px 0; }
.khf-plist__inner {
	max-width: var(--khf-max);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	gap: 32px;
	align-items: flex-start;
}
/* sidebar */
.khf-plist__side { flex: 0 0 334px; max-width: 334px; display: flex; flex-direction: column; gap: 32px; }
.khf-plist__results { padding-bottom: 32px; border-bottom: 1px solid var(--khf-text); }
.khf-plist__results h2 {
	margin: 0;
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-plist__results p { margin: 0; color: var(--khf-text); font-size: 20px; line-height: 1.6; }
.khf-plist__filter {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.khf-plist__filterhead {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 28px;
	font-weight: 600;
}
.khf-plist__filterhead svg { width: 30px; height: 30px; flex: none; }
.khf-plist__opt {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 13px;
	padding: 20px 27px;
	color: var(--khf-text);
	font-size: 20px;
	cursor: pointer;
}
.khf-plist__opt .box { width: 28px; height: 28px; flex: none; border: 2px solid var(--khf-grey); border-radius: 6px;margin-right:0; }
.khf-plist__opt input { display: none; }
.khf-plist__opt input:checked + .box { background: var(--khf-brown); border-color: var(--khf-brown); }

/* product grid */
.khf-plist__main { flex: 1 1 0; min-width: 0; }
.khf-plist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.khf-pcardb {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.khf-pcardb__img { width: 256px; max-width: 100%; aspect-ratio: 1 / 1; }
.khf-pcardb__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.khf-pcardb__content { width: 100%; padding: 0 28px; display: flex; flex-direction: column; gap: 16px; }
.khf-pcardb__name {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--khf-brown);
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
}
.khf-pcardb__desc { margin: 0; color: var(--khf-text); font-size: 20px; line-height: 1.6; text-align: justify; }
.khf-pcardb--link { text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.khf-pcardb--link:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.khf-pcardb--link .khf-pcardb__name { text-decoration: none; }

/* pagination */
.khf-plist__pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 48px; }
.khf-plist__pager a,
.khf-plist__pager span {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--khf-grey);
	color: var(--khf-brown);
	font-size: 20px;
	text-decoration: none;
}
.khf-plist__pager .is-active { background: var(--khf-brown); color: var(--khf-gold); border-color: var(--khf-brown); }
.khf-plist__pager .dots { border-color: transparent; }
.khf-plist__pager svg { width: 22px; height: 22px; }

@media (max-width: 1100px) {
	.khf-plist__inner { flex-direction: column; }
	.khf-plist__side { flex-basis: auto; max-width: none; width: 100%; }
	.khf-plist__grid { grid-template-columns: repeat(2, 1fr); }
	.khf-plist__results h2 { font-size: 32px; }
}
@media (max-width: 600px) {
	.khf-plist { padding: 48px 0; }
	.khf-plist__grid { grid-template-columns: 1fr; }
	.khf-plist__results h2 { font-size: 26px; }
	.khf-pcardb__name { font-size: 22px; }
	.khf-plist__pager { gap: 8px; flex-wrap: wrap; }
}

/* ============================================================
   Product List — PHÂN LOẠI strip as a drag slider, no rounded tiles
   (scoped to .khf-prodintro so the homepage .khf-cats is unchanged)
   ============================================================ */
.khf-prodintro .khf-cats {
	--cats-gap: 24px;
	flex-wrap: nowrap;
	gap: var(--cats-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}
.khf-prodintro .khf-cats::-webkit-scrollbar { display: none; }
.khf-prodintro .khf-cats.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.khf-prodintro .khf-cat {
	flex: 0 0 calc((100% - 3 * var(--cats-gap)) / 4); /* 4 per view, scrolls if more */
	scroll-snap-align: start;
}
.khf-prodintro .khf-cat__img { border-radius: 0; }

@media (max-width: 1100px) {
	.khf-prodintro .khf-cat { flex-basis: calc((100% - 2 * var(--cats-gap)) / 2.5); }
}
@media (max-width: 600px) {
	.khf-prodintro .khf-cats { --cats-gap: 16px; }
	.khf-prodintro .khf-cat { flex-basis: calc((100% - 1 * var(--cats-gap)) / 1.5); }
}

/* category strip: arrows flanking the slider (Product List) */
.khf-cats-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 64px; }
.khf-prodintro .khf-cats { margin-bottom: 0; }
.khf-cats-wrap .khf-cats { flex: 1 1 auto; min-width: 0; }
.khf-cats__nav {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 4px;            /* Figma: rounded square (~3.75px), not a circle */
	border: 1px solid var(--khf-grey);
	background: #fff;
	color: var(--khf-grey);        /* Figma: grey chevron #CCCCCC */
	cursor: pointer;
	display: none; /* shown only when the strip overflows (JS adds .has-nav) */
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.khf-cats__nav svg { width: 20px; height: 20px; }
.khf-cats-wrap.has-nav .khf-cats__nav { display: inline-flex; }
.khf-cats__nav:hover:not(:disabled) { color: var(--khf-brown); border-color: var(--khf-brown); }
.khf-cats__nav:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 600px) { .khf-cats__nav { width: 40px; height: 40px; } .khf-cats__nav svg { width: 18px; height: 18px; } }

/* ============================================================
   SINGLE PRODUCT DETAIL — brand styling for the native WooCommerce
   single-product page (product.php / content-single-product.php).
   Scoped under body.khf-shop.single-product so it never leaks to
   the archive/shop pages.
   ============================================================ */
body.khf-shop.single-product div.product { color: var(--khf-text); }

/* Product title */
body.khf-shop.single-product .product-title,
body.khf-shop.single-product .product_title {
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-weight: 700;
	line-height: 1.4;
}

/* Divider under the title -> gold */
body.khf-shop.single-product .product-title + .is-divider,
body.khf-shop.single-product .is-divider.small {
	background-color: var(--khf-gold);
	height: 3px;
}

/* Price */
body.khf-shop.single-product .price,
body.khf-shop.single-product .price ins,
body.khf-shop.single-product .price .amount {
	color: var(--khf-brown);
	font-weight: 700;
}
body.khf-shop.single-product .price del .amount { color: var(--khf-grey); font-weight: 400; }

/* Add-to-cart / primary buttons -> brand brown w/ gold text */
body.khf-shop.single-product .single_add_to_cart_button,
body.khf-shop.single-product .button.alt {
	background: var(--khf-brown);
	color: var(--khf-gold);
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background 0.2s ease, color 0.2s ease;
}
body.khf-shop.single-product .single_add_to_cart_button:hover,
body.khf-shop.single-product .button.alt:hover {
	background: var(--khf-brown-dark);
	color: var(--khf-gold);
}

/* Quantity box */
body.khf-shop.single-product .quantity input.qty {
	border: 1px solid var(--khf-grey);
	border-radius: 6px;
	color: var(--khf-text);
}

/* Product tabs (Description / Additional info / Reviews) */
body.khf-shop.single-product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--khf-gold);
}
body.khf-shop.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--khf-brown); }
body.khf-shop.single-product .woocommerce-tabs .panel h2 { color: var(--khf-brown); }

/* Section headings (Related products, etc.) */
body.khf-shop.single-product .related > h2,
body.khf-shop.single-product .up-sells > h2,
body.khf-shop.single-product section.related h2 {
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-weight: 700;
}

/* Breadcrumb tint */
body.khf-shop.single-product .breadcrumbs a { color: var(--khf-gold-deep); }

/* ------------------------------------------------------------
   "Liên hệ ngay" CTA (shown when the product has no price) + popup
   ------------------------------------------------------------ */
.khf-contact-now {
	margin: 8px 0 24px;
}
.khf-contact-now__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--khf-brown);
	color: var(--khf-gold);
	border: 1px solid var(--khf-gold);
	border-radius: 8px;
	padding: 14px 28px;
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.khf-contact-now__btn:hover { background: var(--khf-brown-dark); color: var(--khf-gold); }
.khf-contact-now__btn svg { width: 20px; height: 20px; }

/* Modal overlay */
.khf-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(14, 16, 15, 0.6);
}
.khf-modal.is-open { display: flex; }
.khf-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
	padding: 40px;
}
.khf-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--khf-cream);
	color: var(--khf-brown);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}
.khf-modal__close:hover { background: var(--khf-gold-light); }
.khf-modal__title {
	margin: 0 0 6px;
	color: var(--khf-brown);
	font-family: "EuclidCircularAVN", var(--kfont);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
}
.khf-modal__product {
	margin: 0 0 20px;
	color: var(--khf-gold-deep);
	font-size: 16px;
	font-weight: 600;
}
.khf-modal .khf-contact__field { margin-bottom: 14px; }
.khf-modal .wpcf7-form-control {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--khf-grey);
	border-radius: 8px;
	font-size: 16px;
	color: var(--khf-text);
	background: #fff;
}
.khf-modal textarea.wpcf7-form-control { min-height: 96px; resize: vertical; }
.khf-modal .khf-contact__send {
	width: 100%;
	margin-top: 4px;
	padding: 14px;
	background: var(--khf-brown);
	color: var(--khf-gold);
	border: none;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
}
.khf-modal .khf-contact__send:hover { background: var(--khf-brown-dark); }
.khf-modal__prod {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 4px 0 16px;
	padding: 12px;
	background: var(--khf-cream);
	border: 1px solid var(--khf-grey);
	border-radius: 8px;
}
.khf-modal__prod-media { flex: none; }
.khf-modal__prod-thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.khf-modal__prod-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.khf-modal__prod-name {
	color: var(--khf-brown);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
}
.khf-modal__prod-desc {
	color: var(--khf-text);
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 600px) {
	.khf-modal__dialog { padding: 28px 20px; }
	.khf-modal__title { font-size: 22px; }
	.khf-modal__prod-thumb { width: 56px; height: 56px; }
}