/*
Theme Name: 84plus
Theme URI: https://example.com/84plus
Author: 84plus
Description: Custom multilingual theme with EN / JA / VI header.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 84plus
*/

:root {
	--header-height: 88px;
	--color-bg: #ffffff;
	--color-text: #14181f;
	--color-muted: #5b6472;
	--color-accent: #1f6feb;
	--color-border: #e6e9ee;
	--shadow-md: 0 8px 24px rgba(20, 24, 31, 0.08);
	--radius: 10px;
	--transition: 180ms ease;
}

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

/* In-page anchors: stop the sticky header covering the target section. */
html {
	scroll-padding-top: calc(var(--header-height) + 20px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Noto Sans", Roboto, sans-serif;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--color-text);
	color: #fff;
	border-radius: var(--radius);
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1200px;
	min-height: var(--header-height);
	margin: 0 auto;
	padding: 0 24px;
}

.site-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.site-header__brand img {
	display: block;
	max-height: 60px;
	width: auto;
}

.site-header__logo {
	display: flex;
	align-items: center;
}

.site-header__logo img {
	display: block;
	height: 60px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}

@media (max-width: 620px) {
	.site-header__logo img {
		height: 44px;
	}
}

/* ---------- Nav ---------- */

.site-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list > li > a {
	display: block;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-muted);
	border-radius: var(--radius);
	transition: color var(--transition), background var(--transition);
}

.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible {
	color: var(--color-text);
	background: #f3f5f8;
}

.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current_page_item > a {
	color: var(--color-accent);
	font-weight: 600;
}

/* ---------- Language switcher ---------- */

.lang-switcher {
	position: relative;
	margin-left: 8px;
}

.lang-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
}

.lang-switcher__toggle:hover {
	border-color: #cfd6e0;
	background: #f8f9fb;
}

.lang-switcher__caret {
	transition: transform var(--transition);
}

.lang-switcher__toggle[aria-expanded="true"] .lang-switcher__caret {
	transform: rotate(180deg);
}

.lang-switcher__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 180px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.lang-switcher.is-open .lang-switcher__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-switcher__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	font-size: 14px;
	border-radius: 8px;
	transition: background var(--transition);
}

.lang-switcher__item:hover,
.lang-switcher__item:focus-visible {
	background: #f3f5f8;
}

.lang-switcher__code {
	min-width: 26px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-muted);
}

.lang-switcher__item.is-active {
	color: var(--color-accent);
	font-weight: 600;
}

.lang-switcher__item.is-active .lang-switcher__code {
	color: var(--color-accent);
}

/* ---------- Mobile toggle ---------- */

.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
}

.site-header__toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
	.site-header__toggle {
		display: flex;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		margin-left: 0;
		padding: 12px 16px 20px;
		background: #fff;
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--shadow-md);
		display: none;
	}

	.site-nav.is-open {
		display: flex;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.site-nav__list > li > a {
		padding: 12px 14px;
		font-size: 16px;
	}

	.lang-switcher {
		margin: 8px 0 0;
		padding-top: 12px;
		border-top: 1px solid var(--color-border);
	}

	.lang-switcher__toggle {
		width: 100%;
		justify-content: space-between;
	}

	.lang-switcher__list {
		position: static;
		width: 100%;
		margin-top: 6px;
		box-shadow: none;
		transform: none;
	}
}

/* ---------- Main ---------- */

.site-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px;
}

/* Let the hero run full-bleed on the front page. */
.home .site-main {
	max-width: none;
	padding: 0;
}

/* Section-built pages carry their own inner containers, so the main wrapper
   must not box them in — otherwise every tinted section shows white gutters. */
.page-template-service .site-main,
.page-template-news .site-main,
.page-template-contacts .site-main,
.page-template-challenge .site-main,
.page-template-essential-oil-export .site-main,
.single .site-main {
	max-width: none;
	padding: 0;
}

/* ---------- Hero ---------- */

.hero {
	--hero-green: #5cba5f;
	--hero-green-strong: #3fa246;
	--hero-ink: #ffffff;
	--hero-muted: #b3c0b3;
	--hero-line: rgba(255, 255, 255, 0.12);

	position: relative;
	padding: clamp(52px, 6vw, 96px) 0 clamp(56px, 6.5vw, 104px);
	background:
		radial-gradient(900px 520px at 16% 16%, rgba(92, 186, 95, 0.16), transparent 62%),
		radial-gradient(760px 500px at 88% 80%, rgba(92, 186, 95, 0.10), transparent 66%),
		linear-gradient(180deg, #26311f 0%, #1a231b 100%);
	color: var(--hero-ink);
	overflow: hidden;
}

/* Luoi ke mo lam nen, mo dan o ria de khong cat ngang canh section. */
.hero__grid {
	position: absolute;
	inset: -1px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 68px 68px;
	-webkit-mask-image: radial-gradient(125% 105% at 50% 38%, #000 42%, transparent 100%);
	mask-image: radial-gradient(125% 105% at 50% 38%, #000 42%, transparent 100%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Content */

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hero-green);
}

.hero__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 2px;
	background: var(--hero-green);
}

.hero__title {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 52px);
	line-height: 1.34;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--hero-ink);
}

.hero__title-line {
	display: block;
}

.hero__title .is-accent {
	color: var(--hero-green);
}

.hero__lead {
	margin: 26px 0 0;
	max-width: 640px;
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 2;
	color: var(--hero-muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	border: 1px solid transparent;
	border-radius: 6px;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.hero__cta--primary {
	background: var(--hero-green-strong);
	box-shadow: 0 12px 26px rgba(63, 162, 70, 0.28);
}

.hero__cta--primary:hover,
.hero__cta--primary:focus-visible {
	background: #37903d;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(63, 162, 70, 0.34);
}

.hero__cta--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
}

.hero__cta--ghost:hover,
.hero__cta--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: #ffffff;
	transform: translateY(-2px);
}

.hero__cta svg {
	width: 18px;
	height: 18px;
	transition: transform 180ms ease;
}

.hero__cta:hover svg {
	transform: translateX(3px);
}

/* Proof cards — so le sang trai/phai nhu ban thiet ke. */

.hero__stats {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-stat {
	width: min(100%, 262px);
	padding: 20px 22px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--hero-line);
	border-radius: 14px;
}

.hero-stat--1 {
	align-self: flex-start;
	margin-left: 8%;
}

.hero-stat--2 {
	align-self: flex-end;
	margin-right: -6%;
}

.hero-stat--3 {
	align-self: flex-start;
}

.hero-stat__value {
	display: block;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--hero-green);
}

.hero-stat__label {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--hero-muted);
}

/* ---------- Vision & core values ---------- */

.vision {
	--vision-green: #4faf48;
	--vision-dark: #383638;

	padding: 52px 0 58px;
	background: #b8d8aa;
}

.vision__inner {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Green values bar */

.vision__values {
	position: relative;
	z-index: 2;
	width: min(100%, 880px);
	margin: 0 auto;
	padding: 28px 40px;
	background: var(--vision-green);
	border-radius: 26px;
	box-shadow: 0 14px 34px rgba(56, 54, 56, 0.18);
}

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

.vision-value {
	display: grid;
	justify-items: center;
	gap: 10px;
	text-align: center;
	color: #ffffff;
}

.vision-value svg {
	width: 30px;
	height: 30px;
}

.vision-value__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* White panels tucked under the green bar */

.vision__panels {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: -26px auto 0;
	padding: 62px 40px 46px;
	background: #ffffff;
	border-radius: 28px;
	box-shadow: 0 18px 40px rgba(56, 54, 56, 0.14);
}

.vision-panel {
	padding: 0 34px;
}

.vision-panel + .vision-panel {
	border-left: 1px solid #e4e8e4;
}

.vision-panel__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 800;
	color: var(--vision-dark);
}

.vision-panel__head svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--vision-green);
}

.vision-panel__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #55605a;
}

.vision-panel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vision-panel__list li {
	position: relative;
	padding-left: 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #55605a;
}

.vision-panel__list li + li {
	margin-top: 12px;
}

.vision-panel__list li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 7px;
	height: 7px;
	background: var(--vision-green);
	border-radius: 50%;
}

.vision-panel__list strong {
	color: var(--vision-dark);
	font-weight: 700;
}

/* Vision: tablet and below */

@media (max-width: 860px) {
	.vision {
		padding: 40px 0 46px;
	}

	.vision__values {
		padding: 24px 24px;
	}

	.vision__panels {
		grid-template-columns: 1fr;
		padding: 56px 28px 40px;
	}

	.vision-panel {
		padding: 0;
	}

	.vision-panel + .vision-panel {
		margin-top: 28px;
		padding-top: 28px;
		border-left: 0;
		border-top: 1px solid #e4e8e4;
	}
}

@media (max-width: 560px) {
	.vision__values-list {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.vision-value {
		grid-template-columns: 30px 1fr;
		justify-items: start;
		align-items: center;
		gap: 12px;
		text-align: left;
	}
}

/* Hero: tablet and below — mot cot, cac the so lieu xep ngang */

@media (max-width: 980px) {
	.hero__inner {
		grid-template-columns: 1fr;
	}

	.hero__stats {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 14px;
	}

	.hero-stat {
		flex: 1 1 200px;
		width: auto;
	}

	.hero-stat--1,
	.hero-stat--2,
	.hero-stat--3 {
		align-self: stretch;
		margin: 0;
	}
}

@media (max-width: 620px) {
	.hero {
		padding: 40px 0 46px;
	}

	.hero__eyebrow {
		font-size: 11px;
		letter-spacing: 0.16em;
	}

	.hero__cta {
		flex: 1 1 100%;
		justify-content: center;
	}

	.hero-stat {
		flex-basis: 100%;
	}
}

/* ---------- About G84 ---------- */

.about {
	--about-green: #4faf48;
	--about-ink: #1c1c1c;
	--about-body: #4a4a4a;
	--about-card: #2b2b2b;

	padding: clamp(48px, 5vw, 72px) 0;
	background: #ffffff;
	border-top: 1px solid #d9ead6;
}

.about__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Left column */

.about__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--about-green);
}

.about__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 2px;
	background: var(--about-green);
}

.about__title {
	margin: 0 0 28px;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.5;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--about-ink);
}

.about__title-line {
	display: block;
}

.about__text {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 2;
	color: var(--about-body);
}

.about__text:last-child {
	margin-bottom: 0;
}

/* Cum tu duoc nhan manh: chi in dam, khong gach chan. */
.about__text strong {
	font-weight: 700;
	color: var(--about-ink);
	text-decoration: none;
}

/* Right card */

.about__card {
	position: relative;
	margin: 0;
	padding: clamp(28px, 3vw, 44px);
	background: var(--about-card);
	border-radius: 16px;
	overflow: hidden;
}

.about__watermark {
	position: absolute;
	right: -18px;
	bottom: -46px;
	font-size: clamp(120px, 13vw, 190px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.06);
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.about__badge {
	position: relative;
	display: inline-block;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--about-green);
	border: 1px solid rgba(79, 175, 72, 0.55);
	border-radius: 8px;
}

.about__quote {
	position: relative;
	margin: 26px 0 0;
	font-size: clamp(18px, 1.8vw, 23px);
	line-height: 1.75;
	font-weight: 600;
	color: #ffffff;
}

.about__quote-line {
	display: block;
}

.about__points {
	position: relative;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.about-point {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 14px;
	line-height: 1.6;
	color: #d2d2d2;
}

.about-point + .about-point {
	margin-top: 18px;
}

.about-point__arrow {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--about-green);
}

@media (max-width: 980px) {
	.about__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.about {
		padding: 40px 0;
	}

	.about__eyebrow {
		font-size: 11px;
		letter-spacing: 0.16em;
	}
}

/* ---------- Challenges ---------- */

/* Nhip mau cua trang chu: trang -> xanh #dbe8d0 -> mint #eff4ea, lap lai.
   Khoi nay nam giua About (trang) va Core services (mint) nen lay tong xanh,
   trung tong voi khoi "Why choose G84" o xa phia duoi. */
.pains {
	--pain-green: #3fa246;
	--pain-ink: #1c1c1c;
	--pain-body: #55605a;

	padding: clamp(48px, 5vw, 72px) 0;
	background: #dbe8d0;
}

.pains__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Head */

.pains__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pain-green);
}

.pains__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 2px;
	background: var(--pain-green);
}

.pains__title {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 36px);
	line-height: 1.45;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--pain-ink);
}

.pains__title-line {
	display: block;
}

.pains__lead {
	margin: 20px 0 0;
	max-width: 780px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--pain-body);
}

/* Cards */

.pains__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: clamp(32px, 3.6vw, 48px) 0 0;
	padding: 0;
	list-style: none;
}

.pain-card {
	padding: 24px 22px 26px;
	background: #ffffff;
	border: 1px solid #cfe2c4;
	border-radius: 12px;
}

/* Dau "?" giu nguyen kich thuoc, tieu de xuong dong van thut vao cung mot le. */
.pain-card__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.pain-card__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	background: var(--pain-green);
	border-radius: 50%;
}

.pain-card__title {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	font-weight: 700;
	color: var(--pain-ink);
}

.pain-card__text {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--pain-body);
}

/* Closing */

.pains__closing {
	margin: clamp(28px, 3vw, 44px) 0 0;
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.8;
	font-weight: 700;
	text-align: center;
	color: var(--pain-ink);
}

.pains__closing .is-accent {
	color: var(--pain-green);
}

/* Challenges: tablet and below */

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

@media (max-width: 620px) {
	.pains {
		padding: 40px 0;
	}

	.pains__eyebrow {
		font-size: 11px;
		letter-spacing: 0.16em;
	}

	.pains__list {
		grid-template-columns: 1fr;
	}
}

/* ---------- Core services ---------- */

.core {
	--core-green: #4f9a45;
	--core-ink: #1c1c1c;
	--core-body: #5a655c;
	--core-line: #e5ece0;

	padding: clamp(48px, 5vw, 72px) 0;
	background: #eff4ea;
}

.core__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Head */

.core__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--core-green);
}

.core__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 2px;
	background: var(--core-green);
}

.core__title {
	margin: 0;
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.45;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--core-ink);
}

.core__title-line {
	display: block;
}

.core__lead {
	margin: 22px 0 0;
	max-width: 720px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--core-body);
}

/* Cards */

.core__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: clamp(36px, 4vw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

.core-card {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.4vw, 34px);
	background: #ffffff;
	border: 1px solid var(--core-line);
	border-radius: 14px;
}

.core-card__meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.core-card__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--core-green);
}

.core-card__title {
	margin: 0 0 12px;
	font-size: 19px;
	line-height: 1.6;
	font-weight: 800;
	color: var(--core-ink);
}

.core-card__title-line {
	display: block;
}

.core-card__subtitle {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 700;
	color: #55605a;
}

.core-card__text {
	flex: 1 0 auto;
	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--core-body);
}

.core-card__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.core-point {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 0;
	font-size: 14px;
	line-height: 1.6;
	color: #3e463f;
	border-bottom: 1px solid var(--core-line);
}

/* Duong ke tren cung nam o muc dau tien, khong o the <ul>, de van hien khi
   danh sach duoc trai phang vao luoi chung ben duoi. */
.core-point:first-child {
	border-top: 1px solid var(--core-line);
}

.core-point::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 1.5px;
	margin-top: 10px;
	background: var(--core-green);
}

/* Ba the dung chung mot he hang: moi khoi (nhan, tieu de, dong phu, mo ta va
   tung gach dau dong) nam trong cung mot track, nen tat ca duong ke thang hang
   du mo ta dai ngan khac nhau hay muc bi xuong hai dong. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 981px) {
		.core__list {
			row-gap: 0;
		}

		.core-card {
			display: grid;
			grid-row: span var(--core-rows, 9);
			grid-template-rows: subgrid;
		}

		.core-card__points {
			display: contents;
		}
	}
}

/* Core services: tablet and below */

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

	.core-card__text {
		flex: 0 0 auto;
	}
}

@media (max-width: 680px) {
	.core {
		padding: 40px 0;
	}

	.core__eyebrow {
		font-size: 11px;
		letter-spacing: 0.16em;
	}

	.core__list {
		grid-template-columns: 1fr;
	}
}

/* ---------- How we work ---------- */

.how {
	--how-green: #4f9a45;
	--how-ink: #1c1c1c;
	--how-body: #5a655c;
	--how-line: #e3ebdd;

	padding: clamp(48px, 5vw, 72px) 0 clamp(36px, 3.6vw, 52px);
	background: #ffffff;
	border-top: 1px solid #d9ead6;
}

.how__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Head */

.how__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--how-green);
}

.how__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 2px;
	background: var(--how-green);
}

.how__title {
	margin: 0;
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.45;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--how-ink);
}

.how__title-line {
	display: block;
}

.how__lead {
	margin: 22px 0 0;
	max-width: 780px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--how-body);
}

/* Steps */

.how__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: clamp(26px, 2.8vw, 38px) 0 0;
	padding: 0;
	list-style: none;
}

/* Cot dau bam le voi tieu de; duong ke chi nam giua cac cot. */
.how-step {
	padding: 0 clamp(20px, 2.6vw, 40px);
}

.how-step:first-child {
	padding-left: 0;
}

.how-step + .how-step {
	border-left: 1px solid var(--how-line);
}

.how-step__title {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 800;
	color: var(--how-ink);
}

/* Icon dung truoc chu, inline de hai ve tieu de van chay lien nhau. */
.how-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-right: 10px;
	vertical-align: -10px;
	color: var(--how-green);
	background: #eef5ea;
	border-radius: 10px;
}

.how-step__icon svg {
	width: 19px;
	height: 19px;
}

.how-step__title .is-accent {
	color: var(--how-green);
}

.how-step__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--how-body);
}

/* How we work: tablet and below */

@media (max-width: 900px) {
	.how__steps {
		grid-template-columns: 1fr;
	}

	.how-step,
	.how-step:first-child {
		padding: 0;
	}

	.how-step + .how-step {
		margin-top: 28px;
		padding-top: 28px;
		border-left: 0;
		border-top: 1px solid var(--how-line);
	}
}

@media (max-width: 620px) {
	.how {
		padding: 40px 0 30px;
	}

	.how__eyebrow {
		font-size: 11px;
		letter-spacing: 0.16em;
	}
}

/* ---------- Why choose G84 ---------- */

/* Nen xanh dam hon han mint #eff4ea cua Core services / Insights: Insights nam
   ngay duoi, hai mau qua gan nhau se dinh thanh mot mang lien. */
.whyus {
	--why-green: #3fa246;
	--why-ink: #1c1c1c;
	--why-body: #55605a;
	--why-card: #2b2b2b;

	padding: clamp(48px, 5vw, 72px) 0;
	background: #dbe8d0;
}

.whyus__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Head */

.whyus__head {
	max-width: 760px;
	margin: 0 auto clamp(24px, 2.6vw, 36px);
	text-align: center;
}

.whyus__heading {
	margin: 0;
	font-size: clamp(23px, 2.6vw, 34px);
	line-height: 1.45;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--why-ink);
}

.whyus__lead {
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--why-body);
}

/* Hai cot: canh giua theo chieu doc nen the toi cao hon van can voi luoi ly do. */
.whyus__body {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

/* Reason cards */

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

.whyus-reason {
	padding: 22px 20px 24px;
	background: #ffffff;
	border: 1px solid #cfe2c4;
	border-radius: 10px;
}

.whyus-reason__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

/* O icon dung truoc tieu de; cung ngon ngu voi o icon trong panel Our stance,
   nhung dat tren the trang nen nen phai dam hon. */
.whyus-reason__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--why-green);
	background: #eaf3e4;
	border-radius: 9px;
}

.whyus-reason__icon svg {
	width: 20px;
	height: 20px;
}

.whyus-reason__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 700;
	color: var(--why-ink);
}

.whyus-reason__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--why-body);
}

/* Stance panel */

.whyus__stance {
	position: relative;
	padding: clamp(28px, 2.8vw, 38px) clamp(24px, 2.6vw, 34px);
	background: var(--why-card);
	border-radius: 14px;
	overflow: hidden;
}

/* Quang xanh mo o goc tren ben phai. */
.whyus__stance::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -70px;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, rgba(79, 175, 72, 0.30) 0%, rgba(79, 175, 72, 0.08) 45%, transparent 70%);
	pointer-events: none;
}

.whyus__stance-eyebrow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #6ec46f;
}

.whyus__stance-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	background: #6ec46f;
}

.whyus__stance-quote {
	position: relative;
	margin: 0 0 28px;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.8;
	font-weight: 600;
	color: #ffffff;
}

.whyus__stance-line {
	display: block;
}

.whyus__stance-points {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.whyus-point {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.whyus-point + .whyus-point {
	margin-top: 22px;
}

.whyus-point__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: #6ec46f;
	background: rgba(79, 175, 72, 0.16);
	border-radius: 8px;
}

.whyus-point__icon svg {
	width: 18px;
	height: 18px;
}

.whyus-point__body {
	display: block;
}

.whyus-point__title {
	display: block;
	margin-bottom: 6px;
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: 700;
	color: #ffffff;
}

.whyus-point__text {
	display: block;
	font-size: 13px;
	line-height: 1.85;
	color: #adb5ad;
}

/* Why us: tablet and below */

@media (max-width: 900px) {
	.whyus__body {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.whyus {
		padding: 40px 0;
	}

	.whyus__reasons {
		grid-template-columns: 1fr;
	}
}

/* ---------- Insights ---------- */

.insights {
	--ins-green: #3fa246;
	--ins-ink: #1c1c1c;
	--ins-body: #5a655c;
	--ins-muted: #77857a;

	padding: clamp(48px, 5vw, 72px) 0;
	background: #eff4ea;
}

.insights__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Head */

.insights__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ins-green);
}

.insights__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 2px;
	background: var(--ins-green);
}

.insights__title {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 36px);
	line-height: 1.45;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ins-ink);
}

.insights__title-line {
	display: block;
}

.insights__lead {
	margin: 20px 0 0;
	max-width: 780px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ins-body);
}

/* Cards */

.insights__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: clamp(32px, 3.6vw, 48px) 0 0;
	padding: 0;
	list-style: none;
}

.insights__list > li {
	display: flex;
}

/* Nap xanh o dinh the: dung border-top nen no tu bo tron theo border-radius. */
.insight-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 26px 26px 24px;
	background: #ffffff;
	border-top: 8px solid var(--ins-green);
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(35, 48, 31, 0.07);
	transition: transform var(--transition), box-shadow var(--transition);
}

.insight-card:hover,
.insight-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(35, 48, 31, 0.13);
}

/* line-height co dinh: ky tu toan rong nhu "・" lam hop dong cao them, khien
   nhan o cac the lech nhau vai pixel. */
.insight-card__category {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ins-muted);
}

/* Day tieu de gian ra de dong "doc tiep" o ba the deu nam mot muc. */
.insight-card__title {
	flex: 1 0 auto;
	margin: 0 0 22px;
	font-size: 16.5px;
	line-height: 1.7;
	font-weight: 700;
	color: var(--ins-ink);
}

.insight-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ins-muted);
	transition: color var(--transition);
}

.insight-card__more svg {
	width: 15px;
	height: 15px;
	transition: transform var(--transition);
}

.insight-card:hover .insight-card__more {
	color: var(--ins-green);
}

.insight-card:hover .insight-card__more svg {
	transform: translateX(3px);
}

/* Insights: tablet and below */

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

	.insight-card__title {
		flex: 0 0 auto;
	}
}

@media (max-width: 620px) {
	.insights {
		padding: 40px 0;
	}

	.insights__eyebrow {
		font-size: 11px;
		letter-spacing: 0.16em;
	}

	.insights__list {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ---------- Ecosystem ---------- */

.ecosystem {
	padding: 84px 0 92px;
	background: #ffffff;
}

.ecosystem__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.ecosystem__head {
	margin-bottom: 56px;
	text-align: center;
}

.ecosystem__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 36px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #23301f;
}

.ecosystem__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 16px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

.ecosystem__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

/* Card: arc-wrapped icon on top, text block below */

.eco-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.eco-card--1 {
	--tone: #4faf48;
	--tone-ink: #2f7c2a;
}

.eco-card--2 {
	--tone: #79bb64;
	--tone-ink: #4a8636;
}

.eco-card--3 {
	--tone: #b8d8aa;
	--tone-ink: #5c8a49;
}

.eco-card--4 {
	--tone: #98c787;
	--tone-ink: #547f42;
}

.eco-card__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 130px;
	height: 130px;
	margin-bottom: 22px;
}

.eco-card__arc {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.eco-card__icon {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	color: #46523f;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(35, 48, 31, 0.12);
}

.eco-card__icon svg {
	width: 40px;
	height: 40px;
}

.eco-card__body {
	width: 100%;
}

.eco-card__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 12px;
}

.eco-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--tone-ink);
}

.eco-card__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	font-size: 13px;
	font-weight: 800;
	color: #ffffff;
	background: var(--tone);
	border-radius: 50%;
}

.eco-card__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #55605a;
}

/* Ecosystem: 2 columns, then 1 */

@media (max-width: 860px) {
	.ecosystem {
		padding: 60px 0 68px;
	}

	.ecosystem__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px 28px;
	}
}

@media (max-width: 480px) {
	.ecosystem__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- News ---------- */

.news {
	--news-green: #4faf48;
	--news-ink: #16232f;

	padding: 56px 0 64px;
	background: #b8d8aa;
}

.news__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.news__head {
	margin-bottom: 48px;
	text-align: center;
}

.news__heading {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--news-green);
}

.news__subtitle {
	margin: 10px 0 0;
	font-size: clamp(15px, 1.6vw, 20px);
	font-weight: 600;
	color: var(--news-ink);
}

/* Carousel shell */

.news__carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.news__track {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 28px) / 3);
	gap: 28px;
	margin: 0;
	padding: 8px 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.news__track::-webkit-scrollbar {
	display: none;
}

/* Nav buttons */

.news__nav {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var(--news-green);
	background: #ffffff;
	border: 1px solid #e2e8e2;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(35, 48, 31, 0.12);
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.news__nav:hover {
	color: #ffffff;
	background: var(--news-green);
	border-color: var(--news-green);
}

.news__nav svg {
	width: 20px;
	height: 20px;
}

.news__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.news__nav[disabled]:hover {
	color: var(--news-green);
	background: #ffffff;
	border-color: #e2e8e2;
}

/* Card */

.news-card {
	scroll-snap-align: start;
}

.news-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(35, 48, 31, 0.12);
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.news-card__link:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(35, 48, 31, 0.18);
}

.news-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #eef3ee;
	overflow: hidden;
}

.news-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.news-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #b3c3b1;
}

.news-card__placeholder svg {
	width: 46px;
	height: 46px;
}

.news-card__arrow {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #ffffff;
	background: var(--news-green);
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(31, 122, 62, 0.4);
}

.news-card__arrow svg {
	width: 20px;
	height: 20px;
}

.news-card__title {
	margin: 0;
	padding: 18px 20px 22px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--news-ink);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news__empty {
	text-align: center;
	color: #7a857e;
}

/* News: fewer cards per view on smaller screens */

@media (max-width: 900px) {
	.news {
		padding: 44px 0 50px;
	}

	.news__track {
		grid-auto-columns: calc((100% - 24px) / 2);
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.news__track {
		grid-auto-columns: 82%;
	}

	.news__nav {
		display: none;
	}
}

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

.site-footer {
	background: #ffffff;
	color: #55605a;
	border-top: 1px solid #e6ebe4;
}

.site-footer__inner {
	display: grid;
	/* Thuong hieu | Dich vu | Cong ty lien quan | Giai phap — hai cot cuoi rong
	   hon vi nhan chu dai (ten phap nhan va ten giai phap day du). */
	grid-template-columns: 1.35fr 0.85fr 1.05fr 1.2fr;
	gap: 44px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 44px 24px 40px;
}

/* Logo dung ngang voi ten cong ty; ten dai thi tu xuong dong, van canh giua. */
.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.site-footer__logo {
	flex: 0 0 auto;
	display: inline-flex;
}

.site-footer__logo img {
	display: block;
	height: 64px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}

.site-footer__company {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: #23301f;
}

.site-footer__about {
	margin: 0;
	max-width: 42em;
}

.site-footer__about p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.85;
	color: #55605a;
	text-align: justify;
}

.site-footer__about p + p {
	margin-top: 10px;
}

.site-footer__title {
	margin: 0 0 18px;
	padding-bottom: 12px;
	font-size: 16px;
	font-weight: 800;
	color: #23301f;
	border-bottom: 2px solid #79bb64;
	display: inline-block;
}

.site-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links li + li {
	margin-top: 12px;
}

.site-footer__links a {
	position: relative;
	display: block;
	padding-left: 22px;
	font-size: 14px;
	line-height: 1.5;
	color: #55605a;
	transition: color 160ms ease, padding-left 160ms ease;
}

/* Chevron bullet, drawn from two borders so it scales with the text. */
.site-footer__links a::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 2px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #4faf48;
	border-right: 2px solid #4faf48;
	transform: rotate(45deg);
	transition: border-color 160ms ease;
}

.site-footer__links a:hover::before {
	border-color: #23301f;
}

.site-footer__links a:hover {
	color: #23301f;
	padding-left: 20px;
}

.site-footer__bar {
	border-top: 1px solid #e6ebe4;
}

.site-footer__bar p {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 24px;
	font-size: 13px;
	color: #8a948a;
	text-align: center;
}

/* Bon cot -> thuong hieu tren, ba cot link duoi -> mot cot. */
@media (max-width: 1040px) {
	.site-footer__inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	.site-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 860px) {
	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 700px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 36px 24px 32px;
	}
}

/* ---------- Contact form ---------- */

.contact {
	--contact-green: #4faf48;
	--contact-ink: #16232f;

	padding: 52px 0 62px;
	background: #ffffff;
}

.contact__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

.contact__layout {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: start;
}

.contact__heading {
	margin: 0;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--contact-green);
}

.contact__intro {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: #55605a;
}

.contact__alert {
	margin: 24px 0 0;
	padding: 14px 18px;
	font-size: 15px;
	border-radius: 10px;
}

.contact__alert--ok {
	color: #1c6b2c;
	background: #e7f4e8;
	border: 1px solid #b6dfb8;
}

.contact__alert--err {
	color: #a12a2a;
	background: #fbe9e9;
	border: 1px solid #f0c2c2;
}

.contact-form {
	margin-top: 32px;
}

.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__field {
	margin: 0 0 20px;
}

.contact-form__field label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--contact-ink);
}

.contact-form__req {
	color: var(--contact-green);
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	padding: 13px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--contact-ink);
	background: #fbfcfb;
	border: 1px solid #d9e0d6;
	border-radius: 10px;
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
	color: #9aa49a;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--contact-green);
	box-shadow: 0 0 0 3px rgba(79, 175, 72, 0.16);
}

.contact-form__field textarea {
	resize: vertical;
	min-height: 140px;
}

.contact-form__actions {
	margin: 28px 0 0;
}

.contact-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 34px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	background: var(--contact-green);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(79, 175, 72, 0.28);
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
	background: #3f9439;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(79, 175, 72, 0.36);
}

.contact-form__submit svg {
	width: 20px;
	height: 20px;
	transition: transform 180ms ease;
}

.contact-form__submit:hover svg {
	transform: translateX(3px);
}

.contact-info {
	position: relative;
	overflow: hidden;
	padding: 40px 36px;
	background: #f1f6ef;
	border: 1px solid #e0e9dc;
	border-radius: 20px;
}

.contact-info__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--contact-green);
}

.contact-info__heading {
	margin: 0 0 16px;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.25;
	color: #16281a;
}

.contact-info__intro {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.7;
	color: #4c5a4a;
}

.contact-info__company {
	margin: 0 0 26px;
	padding-bottom: 22px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: #16281a;
	border-bottom: 1px solid #dbe6d6;
}

.contact-info__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.contact-info__item + .contact-info__item {
	margin-top: 22px;
}

.contact-info__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: #ffffff;
	background: var(--contact-green);
	border-radius: 14px;
	box-shadow: 0 8px 18px rgba(79, 175, 72, 0.3);
}

.contact-info__icon svg {
	width: 24px;
	height: 24px;
}

.contact-info__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 4px;
}

.contact-info__label {
	font-size: 15px;
	font-weight: 700;
	color: #16281a;
}

.contact-info__value {
	font-size: 14.5px;
	line-height: 1.55;
	color: #4c5a4a;
	transition: color 160ms ease;
}

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

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

@media (max-width: 560px) {
	.contact {
		padding: 40px 0 48px;
	}
}

/* ---------- Contacts map ---------- */

.map {
	--map-green: #4faf48;

	padding: 52px 0 60px;
	background: #eef6ec;
}

.map__inner {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	align-items: center;
	gap: 56px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.map__heading {
	margin: 0 0 20px;
	font-size: clamp(26px, 3.4vw, 44px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--map-green);
}

.map__text {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.7;
	color: #46543f;
}

.map__text:last-child {
	margin-bottom: 0;
}

.map__frame {
	margin: 0;
}

.map__frame iframe {
	display: block;
	width: 100%;
	height: 440px;
	border-radius: 18px;
	border: 3px solid var(--map-green);
	box-shadow: 0 16px 36px rgba(35, 48, 31, 0.16);
}

.map__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--map-green);
	transition: color 160ms ease;
}

.map__cta:hover {
	color: #2f7c2a;
}

.map__cta svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 900px) {
	.map {
		padding: 40px 0 46px;
	}

	.map__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.map__frame iframe {
		height: 340px;
	}
}

/* ---------- Challenges of going international ---------- */

.challenge {
	padding: 56px 0 64px;
	background:
		radial-gradient(120% 70% at 50% -10%, #eef5ea 0%, #ffffff 62%),
		#ffffff;
}

.challenge__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.challenge__head {
	margin-bottom: 40px;
}

.challenge__heading {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: #383638;
}

/* Second line picks up the brand green, like the reference headline. */
.challenge__heading-alt {
	display: block;
	color: #4faf48;
}

.challenge__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 18px;
	background: #79bb64;
	border-radius: 3px;
}

/* Bento grid: wide feature cell on the first row, three cells under it. */

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

.challenge-card {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 18px;
	padding: 22px;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-radius: 22px;
	box-shadow: 0 10px 26px rgba(56, 54, 56, 0.05);
	transition: transform var(--transition), box-shadow var(--transition);
}

.challenge-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(79, 175, 72, 0.16);
}

.challenge-card--feature {
	grid-column: span 2;
	flex-direction: column;
	padding: 30px 30px 0;
	background: linear-gradient(150deg, #4faf48 0%, #79bb64 58%, #98c787 100%);
	border-color: transparent;
}

.challenge-card__title {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: #383638;
}

.challenge-card--feature .challenge-card__title {
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.3;
	color: #ffffff;
}

.challenge-card__num {
	flex: none;
	min-width: 28px;
	padding: 3px 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-align: center;
	color: #4faf48;
	background: #eef5ea;
	border-radius: 999px;
}

.challenge-card--feature .challenge-card__num {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.24);
}

/* Art plate: tinted panel that keeps every scene on the same footprint. */

.challenge-card__art {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: linear-gradient(160deg, #f2f8ef 0%, #e6f1e2 100%);
	border-radius: 16px;
}

.challenge-card--feature .challenge-card__art {
	flex: 1;
	align-items: flex-end;
	margin-top: 26px;
	padding: 22px 22px 0;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 20px 20px 0 0;
}

.challenge-card__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 200px;
}

.challenge-card--feature .challenge-card__svg {
	max-height: 260px;
}

/* Challenges: 2 columns, then a single stack */

@media (max-width: 980px) {
	.challenge {
		padding: 44px 0 50px;
	}

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

	.challenge-card--feature {
		grid-column: span 2;
	}
}

@media (max-width: 620px) {
	.challenge__heading {
		max-width: none;
	}

	.challenge__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.challenge-card--feature {
		grid-column: auto;
		padding: 24px 24px 0;
	}

	.challenge-card__title {
		font-size: 16px;
	}
}

/* ---------- Service: hero banner ---------- */

.svchero {
	--svc-green: #6fbf6d;
	--svc-green-strong: #3fa246;
	--svc-muted: #b3c0b3;

	position: relative;
	padding: clamp(52px, 6vw, 92px) 0 clamp(56px, 6.5vw, 100px);
	background:
		radial-gradient(900px 520px at 18% 20%, rgba(92, 186, 95, 0.14), transparent 62%),
		radial-gradient(760px 500px at 88% 82%, rgba(92, 186, 95, 0.09), transparent 66%),
		linear-gradient(180deg, #2a3327 0%, #1c231c 100%);
	color: #ffffff;
	overflow: hidden;
}

/* Luoi ke mo lam nen, mo dan o ria de khong cat ngang canh section. */
.svchero__grid {
	position: absolute;
	inset: -1px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(125% 105% at 40% 40%, #000 45%, transparent 100%);
	mask-image: radial-gradient(125% 105% at 40% 40%, #000 45%, transparent 100%);
	pointer-events: none;
}

.svchero__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.svchero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 26px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--svc-green);
}

.svchero__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 2px;
	background: var(--svc-green);
}

.svchero__title {
	margin: 0;
	max-width: 20em;
	font-size: clamp(28px, 3.9vw, 54px);
	line-height: 1.32;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.svchero__title-line {
	display: block;
}

.svchero__title .is-accent {
	color: var(--svc-green);
}

.svchero__lead {
	margin: 28px 0 0;
	max-width: 640px;
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 2;
	color: var(--svc-muted);
}

.svchero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-top: 38px;
}

.svchero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 32px;
	font-size: 15px;
	font-weight: 700;
	border: 1px solid transparent;
	border-radius: 4px;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

/* Nut chinh dao mau: nen trang, chu xanh. */
.svchero__cta--primary {
	color: var(--svc-green-strong);
	background: #ffffff;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.svchero__cta--primary:hover,
.svchero__cta--primary:focus-visible {
	background: #f1f7f0;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

.svchero__cta--ghost {
	color: #ffffff;
	background: var(--svc-green-strong);
}

.svchero__cta--ghost:hover,
.svchero__cta--ghost:focus-visible {
	background: #37903d;
	transform: translateY(-2px);
}

.svchero__cta svg {
	width: 18px;
	height: 18px;
	transition: transform 180ms ease;
}

.svchero__cta:hover svg {
	transform: translateX(3px);
}

@media (max-width: 620px) {
	.svchero {
		padding: 40px 0 46px;
	}

	.svchero__eyebrow {
		font-size: 11px;
		letter-spacing: 0.16em;
	}

	.svchero__cta {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ---------- Service: solutions we provide ---------- */

.solutions {
	padding: 56px 0 64px;
	background: #b8d8aa;
}

.solutions__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 40%) 76px minmax(0, 1fr);
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Title disc inside its dotted ring */

.solutions__disc {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: min(100%, 380px);
	justify-self: center;
}

.solutions__ring {
	position: absolute;
	inset: -36px;
	border: 3px dashed rgba(56, 54, 56, 0.3);
	border-radius: 50%;
}

.solutions__core {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 22px;
	width: 100%;
	height: 100%;
	padding: 44px;
	text-align: center;
	background: radial-gradient(120% 120% at 32% 18%, #ffffff 0%, #eef3ea 100%);
	border-radius: 50%;
	box-shadow: 0 24px 48px rgba(35, 48, 31, 0.2), inset 0 0 0 1px #e6ede1;
}

.solutions__heading {
	margin: 0;
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #23301f;
}

.solutions__dots {
	display: flex;
	gap: 12px;
}

.solutions__dots i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.solutions__dots i:nth-child(1) { background: #4faf48; }
.solutions__dots i:nth-child(2) { background: #383638; }
.solutions__dots i:nth-child(3) { background: #79bb64; }
.solutions__dots i:nth-child(4) { background: #98c787; }

/* Dotted arc between the disc and the cards */

.solutions__wire {
	align-self: stretch;
	width: 100%;
	min-height: 520px;
}

/* Bubble cards */

.solutions__list {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.solutions-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 34px 20px 20px;
	color: #ffffff;
	background: var(--tone);
	border-radius: 999px;
	box-shadow: 0 14px 30px rgba(35, 48, 31, 0.18);
	transition: transform var(--transition), box-shadow var(--transition);
}

/* Cards 2 and 3 sit further out, following the bulge of the arc. */
.solutions-card--2,
.solutions-card--3 {
	margin-left: 52px;
}

.solutions-card--1 { --tone: #4faf48; }
.solutions-card--2 { --tone: #383638; }
.solutions-card--3 { --tone: #79bb64; }
.solutions-card--4 { --tone: #98c787; color: #23301f; }

.solutions-card:hover {
	transform: translateX(6px);
	box-shadow: 0 18px 38px rgba(35, 48, 31, 0.26);
}

.solutions-card__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	color: var(--tone);
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.26);
}

.solutions-card--4 .solutions-card__icon {
	color: #4d8a41;
}

.solutions-card__icon svg {
	width: 34px;
	height: 34px;
}

.solutions-card__index {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	opacity: 0.7;
}

.solutions-card__title {
	margin: 0;
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 800;
	line-height: 1.35;
}

.solutions-card__text {
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	opacity: 0.86;
}

/* Node marker sitting on the arc, stubbed into the card */

.solutions-card__node {
	position: absolute;
	top: 50%;
	left: -42px;
	width: 26px;
	height: 26px;
	background: #ffffff;
	border-radius: 50%;
	transform: translateY(-50%);
	box-shadow: 0 0 0 4px var(--tone), 0 0 0 9px rgba(255, 255, 255, 0.55);
}

.solutions-card__node::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: 16px;
	height: 3px;
	margin-left: 9px;
	background: var(--tone);
	border-radius: 3px;
	transform: translateY(-50%);
}

/* Solutions: stack the disc over the cards, drop the arc */

@media (max-width: 1040px) {
	.solutions {
		padding: 44px 0 50px;
	}

	.solutions__inner {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.solutions__wire {
		display: none;
	}

	.solutions__disc {
		width: min(100%, 320px);
	}

	.solutions-card--2,
	.solutions-card--3 {
		margin-left: 0;
	}

	.solutions-card__node {
		display: none;
	}
}

@media (max-width: 620px) {
	.solutions__core {
		padding: 30px;
	}

	.solutions-card {
		gap: 14px;
		padding: 16px 20px;
		border-radius: 26px;
	}

	.solutions-card__icon {
		width: 58px;
		height: 58px;
		box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.26);
	}

	.solutions-card__icon svg {
		width: 26px;
		height: 26px;
	}

	.solutions-card__text {
		font-size: 14px;
	}
}

/* Card 01 links down to its detail section. */

.solutions-card--link {
	cursor: pointer;
}

.solutions-card__link {
	color: inherit;
	text-decoration: none;
}

/* Stretched hit area — the whole bubble becomes the link. */
.solutions-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.solutions-card__link:focus-visible {
	outline: none;
}

.solutions-card--link:has(.solutions-card__link:focus-visible) {
	outline: 3px solid #23301f;
	outline-offset: 4px;
}

.solutions-card--link .solutions-card__title::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.75;
	transition: transform var(--transition);
}

.solutions-card--link:hover .solutions-card__title::after {
	transform: translateY(1px) rotate(45deg);
}

/* ---------- Service: export brand positioning steps ---------- */

.exports {
	padding: 56px 0 64px;
	background: #ffffff;
}

.exports__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.exports__head {
	margin-bottom: 52px;
	text-align: center;
}

.exports__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #383638;
}

.exports__dots {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
}

.exports__dots i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.exports__dots i:nth-child(1) { background: #4faf48; }
.exports__dots i:nth-child(2) { background: #79bb64; }
.exports__dots i:nth-child(3) { background: #98c787; }
.exports__dots i:nth-child(4) { background: #383638; }

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

/* Step card: outlined panel with a folded colour corner */

.exports-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 340px;
	padding: 34px 26px 96px;
	overflow: hidden;
	text-align: center;
	background: #ffffff;
	border: 2px solid var(--tone);
	border-radius: 30px 30px 30px 30px;
	box-shadow: 0 14px 30px rgba(56, 54, 56, 0.08);
	transition: transform var(--transition), box-shadow var(--transition);
}

.exports-card--1 { --tone: #4faf48; }
.exports-card--2 { --tone: #79bb64; }
.exports-card--3 { --tone: #98c787; }
.exports-card--4 { --tone: #383638; }

.exports-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 40px rgba(56, 54, 56, 0.16);
}

.exports-card__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: 22px;
	color: #383638;
	background: #f4f8f1;
	border-radius: 50%;
}

.exports-card__icon svg {
	width: 32px;
	height: 32px;
}

.exports-card__title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	color: #23301f;
}

.exports-card__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: #5f6b5c;
}

/* Folded ribbon in the bottom-right corner */

.exports-card__step {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 6px;
	width: 74%;
	height: 92px;
	padding: 0 20px 16px;
	color: #ffffff;
	background: var(--tone);
	clip-path: polygon(46% 0, 100% 0, 100% 100%, 0 100%);
}

.exports-card__step b {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* Steps: 2 columns, then a single stack */

@media (max-width: 1000px) {
	.exports {
		padding: 44px 0 50px;
	}

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

@media (max-width: 560px) {
	.exports__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.exports-card {
		min-height: 0;
		padding: 28px 22px 88px;
	}
}

/* ---------- Service: target customer database ---------- */

.cusdata {
	padding: 56px 0 66px;
	background: #b8d8aa;
}

.cusdata__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.cusdata__head {
	margin-bottom: 56px;
	text-align: center;
}

.cusdata__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #23301f;
}

.cusdata__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

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

.cusdata-card {
	position: relative;
}

.cusdata-card--1 { --tone: #4faf48; }
.cusdata-card--2 { --tone: #383638; }
.cusdata-card--3 { --tone: #79bb64; }

/* Hexagon: tone-coloured plate with a white face inset inside it */

.cusdata-card__hex {
	position: relative;
	z-index: 1;
	aspect-ratio: 1 / 1.02;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	filter: drop-shadow(0 16px 26px rgba(35, 48, 31, 0.22));
	transition: transform var(--transition);
}

.cusdata-card:hover .cusdata-card__hex {
	transform: translateY(-6px);
}

.cusdata-card__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12% 19%;
	text-align: center;
	background: linear-gradient(180deg, #ffffff 0%, #f3f8f0 100%);
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.cusdata-card__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	color: var(--tone);
	background: #f0f6ec;
	border-radius: 50%;
}

.cusdata-card__icon svg {
	width: 26px;
	height: 26px;
}

.cusdata-card__index {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--tone);
}

.cusdata-card__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.45;
	color: #23301f;
}

/* Chevrons pointing on from the right-hand tip */

.cusdata-card__chevron {
	position: absolute;
	top: 50%;
	right: -5%;
	width: 22%;
	height: 46%;
	background: var(--tone);
	transform: translateY(-50%);
	clip-path: polygon(0 0, 46% 0, 100% 50%, 46% 100%, 0 100%, 54% 50%);
}

.cusdata-card__chevron--ghost {
	right: -14%;
	height: 36%;
	opacity: 0.42;
}

/* Database: 2 columns, then a single centred stack */

@media (max-width: 1000px) {
	.cusdata {
		padding: 44px 0 50px;
	}

	.cusdata__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 48px;
	}
}

@media (max-width: 680px) {
	.cusdata__grid {
		grid-template-columns: 1fr;
		gap: 28px;
		max-width: 340px;
		margin: 0 auto;
	}

	.cusdata-card__chevron {
		display: none;
	}

	.cusdata-card__title {
		font-size: 15px;
	}
}

/* ---------- Service: customer outreach plan ---------- */

.plan {
	padding: 56px 0 64px;
	background: #ffffff;
}

.plan__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.plan__head {
	margin-bottom: 52px;
	text-align: center;
}

.plan__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #383638;
}

.plan__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

.plan__stage {
	position: relative;
}

/* Looping centrepiece the four capsules sit around */

.plan__loop {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 220px;
	height: 220px;
	transform: translate(-50%, -50%);
}

.plan__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 44px 170px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cards run clockwise: 01 02 on top, 03 bottom-right, 04 bottom-left. */
.plan-card--3 { order: 4; }
.plan-card--4 { order: 3; }

.plan-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 30px 14px 14px;
	background: #ffffff;
	border: 2px solid var(--tone);
	border-radius: 999px;
	box-shadow: 0 12px 26px rgba(56, 54, 56, 0.08);
	transition: transform var(--transition), box-shadow var(--transition);
}

/* Mirrored cards put the disc on the outer edge, like the reference. */
.plan-card--mirror {
	flex-direction: row-reverse;
	padding: 14px 14px 14px 30px;
	text-align: right;
}

.plan-card--1 { --tone: #4faf48; --ink: #3c8a37; }
.plan-card--2 { --tone: #79bb64; --ink: #4d8a41; }
.plan-card--3 { --tone: #383638; --ink: #383638; }
.plan-card--4 { --tone: #98c787; --ink: #55793f; }

.plan-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(56, 54, 56, 0.14);
}

.plan-card__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--tone);
	background: radial-gradient(120% 120% at 30% 24%, #ffffff 0%, #f1f5ee 100%);
	border-radius: 50%;
	box-shadow: 0 10px 22px rgba(56, 54, 56, 0.14);
}

.plan-card__body {
	min-width: 0;
}

.plan-card__title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--ink);
}

/* Plan: drop the loop and run one capsule per row */

@media (max-width: 900px) {
	.plan {
		padding: 44px 0 50px;
	}

	.plan__loop {
		display: none;
	}

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

	.plan-card--3,
	.plan-card--4 {
		order: 0;
	}

	.plan-card--mirror {
		flex-direction: row;
		padding: 14px 30px 14px 14px;
		text-align: left;
	}
}

@media (max-width: 560px) {
	.plan-card__num {
		width: 74px;
		height: 74px;
		font-size: 26px;
	}

	.plan-card__title {
		font-size: 15px;
	}
}

/* ---------- Service: sales & marketing team ---------- */

.sales {
	padding: 56px 0 66px;
	background: #b8d8aa;
}

.sales__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.sales__head {
	margin-bottom: 56px;
	text-align: center;
}

.sales__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #23301f;
}

.sales__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

.sales__stage {
	position: relative;
}

/* Dotted cross the four discs point into */

.sales__cross {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 130px;
	height: 130px;
	transform: translate(-50%, -50%);
}

/* Column-major: 01 and 02 fill the left column, 03 and 04 the right. */
.sales__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 44px 140px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sales-card {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Left-hand column reads outward: text first, disc against the centre. */
.sales-card--1,
.sales-card--2 {
	flex-direction: row-reverse;
	text-align: right;
}

.sales-card--1 { --tone: #4faf48; --ink: #2f7d2b; }
.sales-card--2 { --tone: #383638; --ink: #383638; }
.sales-card--3 { --tone: #79bb64; --ink: #4d8a41; }
.sales-card--4 { --tone: #55793f; --ink: #55793f; }

.sales-card__disc {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 158px;
	height: 158px;
	overflow: hidden;
	background: radial-gradient(120% 120% at 32% 24%, #ffffff 0%, #eef3ea 100%);
	border-radius: 50%;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.45), 0 18px 34px rgba(35, 48, 31, 0.24);
	transition: transform var(--transition);
}

.sales-card:hover .sales-card__disc {
	transform: translateY(-6px);
}

/* Quarter wedge, square corner sitting on the middle of the disc */
.sales-card__wedge {
	position: absolute;
	width: 50%;
	height: 50%;
	background: var(--tone);
}

.sales-card--1 .sales-card__wedge { right: 0; bottom: 0; }
.sales-card--2 .sales-card__wedge { right: 0; top: 0; }
.sales-card--3 .sales-card__wedge { left: 0; bottom: 0; }
.sales-card--4 .sales-card__wedge { left: 0; top: 0; }

.sales-card__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	color: #383638;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(35, 48, 31, 0.14);
}

.sales-card__icon svg {
	width: 30px;
	height: 30px;
}

.sales-card__body {
	flex: 1;
	min-width: 0;
	padding: 20px 24px;
	background: #ffffff;
	border: 2px solid var(--tone);
	border-radius: 20px;
	box-shadow: 0 12px 26px rgba(35, 48, 31, 0.12);
}

.sales-card__index {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--ink);
}

.sales-card__title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.45;
	color: #23301f;
	text-align: justify;
	text-justify: inter-word;
}

/* Team: drop the cross and stack the discs */

@media (max-width: 980px) {
	.sales {
		padding: 44px 0 50px;
	}

	.sales__cross {
		display: none;
	}

	.sales__grid {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 26px;
	}

	.sales-card--1,
	.sales-card--2 {
		flex-direction: row;
		text-align: left;
	}
}

@media (max-width: 560px) {
	.sales-card {
		gap: 16px;
	}

	.sales-card__disc {
		width: 118px;
		height: 118px;
		box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.45), 0 14px 26px rgba(35, 48, 31, 0.22);
	}

	.sales-card__icon {
		width: 52px;
		height: 52px;
	}

	.sales-card__icon svg {
		width: 26px;
		height: 26px;
	}

	.sales-card__title {
		font-size: 15px;
	}
}

/* ---------- Service: delivery process ---------- */

.flow {
	position: relative;
	overflow: hidden;
	padding: 56px 0 64px;
	background: #ffffff;
}

/* Soft wash behind the chain. */
.flow__swoosh {
	position: absolute;
	top: -10%;
	left: 50%;
	width: 78%;
	height: 120%;
	background: radial-gradient(closest-side, #f1f7ee 0%, rgba(241, 247, 238, 0) 100%);
	transform: translateX(-50%);
}

.flow__inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.flow__head {
	margin-bottom: 48px;
	text-align: center;
}

.flow__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #383638;
}

.flow__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

/* Two columns with a coloured spine running between them */

.flow__list {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
	list-style: none;
}

.flow-step {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0;
}

/* Each step owns its own row, so the two columns interleave. --tone paints the
   capsule and the icon, --ink the step name, which needs more contrast. */
.flow-step--1 { grid-row: 1; --tone: #98c787; --ink: #55793f; }
.flow-step--2 { grid-row: 2; --tone: #79bb64; --ink: #4a7d3c; }
.flow-step--3 { grid-row: 3; --tone: #57b34f; --ink: #3f7a38; }
.flow-step--4 { grid-row: 4; --tone: #4faf48; --ink: #357535; }
.flow-step--5 { grid-row: 5; --tone: #3d8b49; --ink: #2f6a35; }
.flow-step--6 { grid-row: 6; --tone: #2f6746; --ink: #2a5c33; }
.flow-step--7 { grid-row: 7; --tone: #383638; --ink: #383638; }

/* Odd steps hang on the left of the spine, even steps on the right. The small
   negative margin lets each disc cross the centre line, so consecutive discs
   sit shoulder to shoulder instead of stacking in one column. */
.flow-step--left {
	grid-column: 1;
	margin-right: -17px;
	text-align: left;
}

.flow-step--right {
	grid-column: 2;
	flex-direction: row-reverse;
	margin-left: -17px;
	text-align: right;
}

/* Rows overlap so the discs form a continuous chain. */
.flow-step + .flow-step {
	margin-top: -34px;
}

.flow-step__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	min-width: 0;
	min-height: 100px;
	padding: 20px 32px;
	background: #ffffff;
	border: 2px solid var(--tone);
	border-radius: 999px;
	box-shadow: 0 12px 26px rgba(35, 48, 31, 0.1);
}

/* The capsule end runs deep under the disc, whose white ring hides the join. */
.flow-step--left .flow-step__panel {
	margin-right: -46px;
	padding-right: 78px;
}

.flow-step--right .flow-step__panel {
	margin-left: -46px;
	padding-left: 78px;
}

.flow-step__name {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 6px;
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink);
}

.flow-step--right .flow-step__name {
	flex-direction: row-reverse;
}

.flow-step__count {
	font-size: 12px;
	letter-spacing: 0.14em;
	opacity: 0.6;
}

.flow-step__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5f6b5c;
}

/* Icon disc sitting on the spine */

.flow-step__icon {
	position: relative;
	z-index: 2;
	flex: none;
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
	color: var(--tone);
	background: radial-gradient(120% 120% at 32% 24%, #ffffff 0%, #f2f6ef 100%);
	border-radius: 50%;
	box-shadow: 0 0 0 8px #ffffff, 0 14px 28px rgba(35, 48, 31, 0.24);
}

.flow-step__icon svg {
	width: 42px;
	height: 42px;
}

/* Process: unwind the chain into a single column */

@media (max-width: 900px) {
	.flow {
		padding: 44px 0 50px;
	}

	.flow__list {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.flow-step--left,
	.flow-step--right {
		grid-column: 1;
		flex-direction: row;
		margin: 0;
		text-align: left;
	}

	.flow-step--1 { grid-row: auto; }
	.flow-step--2 { grid-row: auto; }
	.flow-step--3 { grid-row: auto; }
	.flow-step--4 { grid-row: auto; }
	.flow-step--5 { grid-row: auto; }
	.flow-step--6 { grid-row: auto; }
	.flow-step--7 { grid-row: auto; }

	.flow-step + .flow-step {
		margin-top: 0;
	}

	.flow-step__icon {
		order: -1;
		z-index: 2;
		width: 76px;
		height: 76px;
		margin-right: -56px;
		box-shadow: 0 0 0 5px #ffffff, 0 10px 20px rgba(35, 48, 31, 0.22);
	}

	.flow-step__icon svg {
		width: 30px;
		height: 30px;
	}

	/* Drop the desktop overlap — it would push the text off the panel here. */
	.flow-step--left .flow-step__panel,
	.flow-step--right .flow-step__panel {
		min-height: 88px;
		margin: 0;
		padding: 18px 26px 18px 70px;
		border: 2px solid var(--tone);
		border-radius: 999px;
	}

	.flow-step--right .flow-step__name {
		flex-direction: row;
	}
}

@media (max-width: 560px) {
	.flow-step__icon {
		width: 62px;
		height: 62px;
		margin-right: -46px;
	}

	.flow-step__icon svg {
		width: 26px;
		height: 26px;
	}

	.flow-step--left .flow-step__panel,
	.flow-step--right .flow-step__panel {
		padding: 16px 20px 16px 58px;
	}

	.flow-step__name {
		font-size: 14px;
	}

	.flow-step__text {
		font-size: 14px;
	}
}

/* ---------- Service: closing call to action ---------- */

.cta {
	padding: 52px 0 64px;
	background: #ffffff;
}

.cta__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.cta__panel {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 40px;
	overflow: hidden;
	padding: 56px 60px;
	background:
		radial-gradient(90% 120% at 88% 10%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(135deg, #2f6746 0%, #4faf48 58%, #79bb64 100%);
	border-radius: 30px;
	box-shadow: 0 26px 50px rgba(35, 48, 31, 0.28);
}

.cta__heading {
	margin: 0 0 28px;
	font-size: clamp(21px, 2.2vw, 31px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.cta__button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 30px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #23301f;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 14px 26px rgba(20, 30, 18, 0.22);
	transition: transform var(--transition), box-shadow var(--transition);
}

.cta__button:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px rgba(20, 30, 18, 0.28);
}

.cta__button svg {
	width: 18px;
	height: 18px;
	transition: transform var(--transition);
}

.cta__button:hover svg {
	transform: translateX(4px);
}

.cta__button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 4px;
}

/* Abstract stand-in for the product shot */

.cta__art {
	position: relative;
	min-height: 270px;
}

.cta-card {
	position: absolute;
	border-radius: 22px;
}

.cta-card--back {
	top: 14px;
	right: 22px;
	width: 250px;
	height: 158px;
	background: rgba(255, 255, 255, 0.24);
	transform: rotate(-6deg);
}

.cta-card--front {
	top: 54px;
	right: 62px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 272px;
	padding: 20px;
	background: #ffffff;
	box-shadow: 0 20px 36px rgba(20, 30, 18, 0.26);
}

.cta-card__avatar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: #4faf48;
	background: #eef5ea;
	border-radius: 50%;
}

.cta-card__avatar svg {
	width: 24px;
	height: 24px;
}

.cta-card__lines i {
	display: block;
	height: 8px;
	background: #e6ece2;
	border-radius: 4px;
}

.cta-card__lines i:first-child {
	width: 72%;
	margin-bottom: 8px;
}

.cta-card__lines i:last-child {
	width: 46%;
}

.cta-card__bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 46px;
}

.cta-card__bars b {
	flex: 1;
	background: #98c787;
	border-radius: 5px;
}

.cta-card__bars b:nth-child(1) { height: 42%; }
.cta-card__bars b:nth-child(2) { height: 66%; }
.cta-card__bars b:nth-child(3) { height: 100%; background: #4faf48; }
.cta-card__bars b:nth-child(4) { height: 54%; }

.cta-chip {
	position: absolute;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 14px 26px rgba(20, 30, 18, 0.24);
}

.cta-chip svg {
	width: 26px;
	height: 26px;
}

.cta-chip--target {
	top: 12px;
	left: 132px;
	color: #4faf48;
}

.cta-chip--check {
	right: 18px;
	bottom: 26px;
	color: #ffffff;
	background: #383638;
}

/* CTA: stack the panel */

@media (max-width: 900px) {
	.cta {
		padding: 40px 0 48px;
	}

	.cta__panel {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 42px 34px;
	}

	.cta__art {
		min-height: 240px;
	}
}

@media (max-width: 560px) {
	.cta__panel {
		padding: 32px 26px;
	}

	.cta__art {
		display: none;
	}

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

/* ---------- News listing page ---------- */

.newspage {
	padding: 48px 0 62px;
	background: #ffffff;
}

.newspage__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.newspage__head {
	margin-bottom: 44px;
}

.newspage__heading {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #383638;
}

.newspage__subtitle {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: #5f6b5c;
}

.newspage__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 18px;
	background: #4faf48;
	border-radius: 3px;
}

.newspage__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}

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

/* Post card */

.newspost {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-radius: 18px;
	box-shadow: 0 10px 24px rgba(56, 54, 56, 0.06);
	transition: transform var(--transition), box-shadow var(--transition);
}

.newspost:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(79, 175, 72, 0.16);
}

.newspost__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f2f7ef;
}

/* contain, not cover — the covers carry text right up to the edge, and their
   ratios run from 1.34 to 1.78, so cropping would cut words off. */
.newspost__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.newspost__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #b8d8aa;
}

.newspost__placeholder svg {
	width: 44px;
	height: 44px;
}

.newspost__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 24px;
}

.newspost__date {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #79bb64;
}

.newspost__title {
	margin: 10px 0 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	color: #23301f;
}

.newspost__title a:hover {
	color: #4faf48;
}

.newspost__excerpt {
	margin: 12px 0 20px;
	font-size: 14.5px;
	line-height: 1.65;
	color: #5f6b5c;
}

.newspost__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 800;
	color: #4faf48;
}

.newspost__more svg {
	width: 16px;
	height: 16px;
	transition: transform var(--transition);
}

.newspost__more:hover svg {
	transform: translateX(4px);
}

/* Latest rail */

.newspage__rail {
	position: sticky;
	top: calc(var(--header-height) + 20px);
	padding: 26px 24px;
	background: #f4f9f1;
	border-radius: 18px;
}

.newspage__rail-title {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 800;
	color: #23301f;
}

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

.newsrail__item + .newsrail__item {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #dfe9d9;
}

.newsrail__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #23301f;
}

.newsrail__title a:hover {
	color: #4faf48;
}

.newsrail__more {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #79bb64;
}

.newsrail__more:hover {
	color: #4faf48;
}

/* Pager */

.newspage__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
}

.newspage__pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: #23301f;
	background: #ffffff;
	border: 1px solid #dfe9d9;
	border-radius: 12px;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.newspage__pager .page-numbers:hover {
	border-color: #4faf48;
	color: #4faf48;
}

.newspage__pager .page-numbers.current {
	color: #ffffff;
	background: #4faf48;
	border-color: #4faf48;
}

.newspage__empty {
	font-size: 16px;
	color: #5f6b5c;
}

/* News page: rail under the grid, then one column */

@media (max-width: 1000px) {
	.newspage__layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.newspage__rail {
		position: static;
	}
}

@media (max-width: 620px) {
	.newspage {
		padding: 44px 0 60px;
	}

	.newspage__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* ---------- Single post ---------- */

.post-single {
	padding: 40px 0 58px;
	background: #ffffff;
}

.post-single__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}

.post-single__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #4faf48;
}

.post-single__back svg {
	width: 16px;
	height: 16px;
	transition: transform var(--transition);
}

.post-single__back:hover svg {
	transform: translateX(-4px);
}

.post-single__head {
	margin: 26px 0 30px;
}

.post-single__date {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #79bb64;
}

.post-single__title {
	margin: 12px 0 0;
	font-size: clamp(27px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: #23301f;
}

.post-single__hero {
	margin: 0 0 34px;
	overflow: hidden;
	border-radius: 18px;
}

.post-single__hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* Article body */

.post-single__content {
	font-size: 17px;
	line-height: 1.78;
	color: #3c4a3a;
}

.post-single__content > *:first-child {
	margin-top: 0;
}

.post-single__content p {
	margin: 0 0 22px;
}

.post-single__content h2,
.post-single__content h3,
.post-single__content h4 {
	margin: 40px 0 14px;
	font-weight: 800;
	line-height: 1.3;
	color: #23301f;
}

.post-single__content h2 { font-size: 26px; }
.post-single__content h3 { font-size: 21px; }
.post-single__content h4 { font-size: 18px; }

.post-single__content a {
	color: #4faf48;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.post-single__content a:hover {
	color: #2f6746;
}

.post-single__content ul,
.post-single__content ol {
	margin: 0 0 22px;
	padding-left: 24px;
}

.post-single__content li {
	margin-bottom: 8px;
}

.post-single__content img,
.post-single__content iframe,
.post-single__content video {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.post-single__content figure {
	margin: 30px 0;
}

.post-single__content figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: #77837a;
	text-align: center;
}

.post-single__content blockquote {
	margin: 30px 0;
	padding: 6px 0 6px 22px;
	border-left: 4px solid #98c787;
	font-size: 18px;
	color: #2f3d2d;
}

.post-single__content blockquote p:last-child {
	margin-bottom: 0;
}

.post-single__content table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 15px;
}

.post-single__content th,
.post-single__content td {
	padding: 12px 14px;
	border: 1px solid #e2ece0;
	text-align: left;
}

.post-single__content th {
	background: #f4f9f1;
	font-weight: 700;
	color: #23301f;
}

.post-single__content hr {
	margin: 36px 0;
	border: 0;
	border-top: 1px solid #e2ece0;
}

/* Prev / next */

.post-single__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 56px;
	padding-top: 34px;
	border-top: 1px solid #e2ece0;
}

.post-single__nav-link {
	display: block;
	padding: 18px 22px;
	background: #f4f9f1;
	border-radius: 14px;
	transition: background var(--transition);
}

.post-single__nav-link:hover {
	background: #e8f2e2;
}

.post-single__nav-link--next {
	text-align: right;
	grid-column: 2;
}

.post-single__nav-label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #79bb64;
}

.post-single__nav-title {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #23301f;
}

@media (max-width: 620px) {
	.post-single {
		padding: 32px 0 56px;
	}

	.post-single__content {
		font-size: 16px;
	}

	.post-single__nav {
		grid-template-columns: 1fr;
	}

	.post-single__nav-link--next {
		grid-column: 1;
		text-align: left;
	}
}

/* ---------- Documents ---------- */

.docs {
	padding: 34px 0 62px;
	background: #ffffff;
}

.docs__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.docs__panel {
	padding: 40px 44px 44px;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-radius: 26px;
	box-shadow: 0 18px 40px rgba(35, 48, 31, 0.08);
}

.docs__head {
	margin-bottom: 28px;
}

.docs__heading {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #23301f;
}

.docs__subtitle {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: #6b776a;
}

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

/* Tile */

.doc-tile__link {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 18px 20px;
	background: #f4f7f2;
	border: 1px solid transparent;
	border-radius: 16px;
	transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.doc-tile__link:hover {
	background: #4faf48;
	border-color: #4faf48;
	transform: translateY(-2px);
}

.doc-tile__link:focus-visible {
	outline: 3px solid #4faf48;
	outline-offset: 3px;
}

.doc-tile__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: #383638;
	transition: color var(--transition);
}

.doc-tile__icon svg {
	width: 26px;
	height: 26px;
}

.doc-tile__body {
	flex: 1;
	min-width: 0;
}

.doc-tile__title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #23301f;
	transition: color var(--transition);
}

.doc-tile__meta {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: #7d887c;
	transition: color var(--transition);
}

/* Square marker on the right, like the checkbox in the reference */
.doc-tile__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	color: #9aa79a;
	background: #ffffff;
	border: 1px solid #dbe4d8;
	border-radius: 7px;
	transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.doc-tile__mark svg {
	width: 15px;
	height: 15px;
}

.doc-tile__link:hover .doc-tile__icon,
.doc-tile__link:hover .doc-tile__title {
	color: #ffffff;
}

.doc-tile__link:hover .doc-tile__meta {
	color: rgba(255, 255, 255, 0.82);
}

.doc-tile__link:hover .doc-tile__mark {
	color: #4faf48;
	background: #ffffff;
	border-color: #ffffff;
}

/* Documents: one tile per row */

@media (max-width: 860px) {
	.docs {
		padding: 24px 0 64px;
	}

	.docs__panel {
		padding: 30px 24px 32px;
		border-radius: 20px;
	}

	.docs__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.doc-tile__link {
		gap: 12px;
		padding: 16px;
	}

	.doc-tile__icon {
		width: 34px;
		height: 34px;
	}

	.doc-tile__title {
		font-size: 14.5px;
	}
}

/* ---------- Service: customer data management ---------- */

.lead {
	padding: 56px 0 64px;
	background: #b8d8aa;
}

.lead__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.lead__head {
	margin-bottom: 48px;
	text-align: center;
}

.lead__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #23301f;
}

.lead__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: #2f6746;
	border-radius: 3px;
}

.lead__stage {
	position: relative;
}

/* Badge nesting in the cross-shaped gap between the four cards */

.lead__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 176px;
	height: 176px;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #2f6746;
	background: #ffffff;
	border: 2px solid #2f6746;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	/* The ring matches the section background, so it reads as a gap. */
	box-shadow: 0 0 0 12px #b8d8aa, 0 18px 34px rgba(35, 48, 31, 0.18);
}

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

/* Cards run clockwise: 01 02 on top, 03 bottom-right, 04 bottom-left. */
.lead-card--3 { order: 4; }
.lead-card--4 { order: 3; }

.lead-card {
	display: flex;
	flex-direction: column;
	min-height: 250px;
	padding: 34px 40px;
	color: #23301f;
	background: #ffffff;
	border: 2px solid #2f6746;
	border-radius: 20px;
	box-shadow: 0 14px 30px rgba(35, 48, 31, 0.14);
}

.lead-card--1 { --tone: #4faf48; }
.lead-card--2 { --tone: #3d8b49; }
.lead-card--3 { --tone: #2f6746; }
.lead-card--4 { --tone: #383638; }

/* Text hugs the middle, and the inner padding keeps it clear of the badge. */
.lead-card--1,
.lead-card--4 {
	text-align: right;
	padding-right: 106px;
}

.lead-card--2,
.lead-card--3 {
	text-align: left;
	padding-left: 106px;
}

.lead-card__num {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--tone);
}

.lead-card__title {
	margin: 14px 0 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.35;
	color: #23301f;
}

.lead-card__text {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: #4a5648;
}

/* Customer data: badge on top, cards in one column */

@media (max-width: 900px) {
	.lead {
		padding: 44px 0 50px;
	}

	.lead__badge {
		position: static;
		width: 132px;
		height: 132px;
		margin: 0 auto 28px;
		font-size: 21px;
		transform: none;
		box-shadow: 0 0 0 8px #b8d8aa, 0 14px 26px rgba(35, 48, 31, 0.18);
	}

	.lead__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.lead-card {
		min-height: 0;
	}

	.lead-card--3 { order: 3; }
	.lead-card--4 { order: 4; }

	.lead-card--1,
	.lead-card--2,
	.lead-card--3,
	.lead-card--4 {
		padding: 26px 28px;
		text-align: left;
	}
}

/* ---------- Solution landing pages ---------- */

.spage__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Anh nen do tung trang truyen vao qua bien --hero-image, phu lop xanh dam
   ben tren cho chu doc duoc. */
.spage__hero {
	display: flex;
	align-items: center;
	min-height: 420px;
	padding: 52px 0;
	background-color: #23301f;
	background-image:
		linear-gradient(100deg, rgba(24, 48, 33, 0.86) 0%, rgba(24, 48, 33, 0.62) 55%, rgba(24, 48, 33, 0.42) 100%),
		var(--hero-image, none);
	background-position: center;
	background-size: cover;
}

.spage__title {
	max-width: 24ch;
	margin: 0;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-shadow: 0 2px 18px rgba(12, 24, 15, 0.45);
}

.spage__lead {
	max-width: 62ch;
	margin: 18px 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
}

/* Nut tai tai lieu */

.spage__download {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 30px;
	padding: 15px 30px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}

.spage__download:hover {
	color: #23301f;
	background: #ffffff;
	transform: translateY(-2px);
}

.spage__download svg {
	width: 18px;
	height: 18px;
}

.spage__download-size {
	padding-left: 12px;
	border-left: 1px solid currentColor;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
	opacity: 0.75;
}

@media (max-width: 560px) {
	.spage__hero {
		min-height: 0;
	}

	.spage__download {
		flex-wrap: wrap;
		gap: 8px 10px;
		padding: 14px 22px;
	}

	.spage__download-size {
		padding-left: 0;
		border-left: 0;
	}
}

.spage__block {
	padding: 52px 0;
	background: #ffffff;
}

.spage__block--tint {
	background: #f4f9f1;
}

.spage__heading {
	margin: 0 0 14px;
	font-size: clamp(23px, 2.6vw, 32px);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: #23301f;
}

.spage__heading::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: 16px;
	background: #4faf48;
	border-radius: 3px;
}

.spage__subheading {
	margin: 40px 0 20px;
	font-size: 19px;
	font-weight: 800;
	color: #23301f;
}

.spage__paragraph {
	max-width: 78ch;
	margin: 22px 0 0;
	font-size: 16px;
	line-height: 1.75;
	color: #4a5648;
}

/* Market trends */

.spage-trends {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.spage-trend {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px 14px 16px;
	background: #ffffff;
	border: 2px solid #b8d8aa;
	border-radius: 999px;
	transition: border-color var(--transition), transform var(--transition);
}

.spage-trend:hover {
	border-color: #4faf48;
	transform: translateY(-2px);
}

.spage-trend__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: #4faf48;
	background: #f0f6ec;
	border-radius: 50%;
}

.spage-trend__icon svg {
	width: 21px;
	height: 21px;
}

.spage-trend__title {
	font-size: 15px;
	font-weight: 700;
	color: #23301f;
}

/* Buying factors */

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

.spage-factor {
	padding: 24px 22px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(35, 48, 31, 0.08);
}

.spage-factor__num {
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: #79bb64;
}

.spage-factor__title {
	margin: 10px 0 0;
	font-size: 17px;
	font-weight: 800;
	color: #23301f;
}

.spage-factor__text {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: #5f6b5c;
}

/* Opportunity / challenge cards */

.spage-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.spage-card {
	padding: 28px 26px;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-left: 4px solid #4faf48;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(35, 48, 31, 0.07);
}

.spage-cards--risk .spage-card {
	border-left-color: #383638;
}

.spage-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	color: #23301f;
}

.spage-card__text {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: #5f6b5c;
}

/* Closing contact panel */

.spage__contact {
	padding: 18px 0 62px;
	background: #ffffff;
}

.spage__contact-panel {
	padding: 48px 52px;
	text-align: center;
	background: #b8d8aa;
	border-radius: 26px;
}

.spage__contact-heading {
	margin: 0;
	font-size: clamp(23px, 2.6vw, 32px);
	font-weight: 800;
	color: #23301f;
}

.spage__contact-text {
	max-width: 60ch;
	margin: 14px auto 0;
	font-size: 16px;
	line-height: 1.7;
	color: #2f3d2d;
}

.spage__contact-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	padding: 16px 30px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
	background: #2f6746;
	border-radius: 999px;
	transition: transform var(--transition), background var(--transition);
}

.spage__contact-button:hover {
	transform: translateY(-2px);
	background: #4faf48;
}

.spage__contact-button svg {
	width: 18px;
	height: 18px;
	transition: transform var(--transition);
}

.spage__contact-button:hover svg {
	transform: translateX(4px);
}

/* Essential oil: narrower screens */

@media (max-width: 980px) {
	.spage__hero {
		padding: 40px 0 44px;
	}

	.spage__block {
		padding: 40px 0;
	}

	.spage-factors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.spage-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.spage-factors {
		grid-template-columns: 1fr;
	}

	.spage-trend {
		width: 100%;
	}

	.spage__contact-panel {
		padding: 32px 24px;
	}

	.spage__contact-button {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Solution pages: extra blocks ---------- */

/* Product grid */

.spage-products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.spage-product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(35, 48, 31, 0.07);
	transition: transform var(--transition), box-shadow var(--transition);
}

.spage-product:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 32px rgba(79, 175, 72, 0.18);
}

.spage-product__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f7ef;
}

.spage-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spage-product__title {
	display: block;
	padding: 16px 18px 18px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #23301f;
}

/* Two-column split: challenges vs opportunities */

.spage-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.spage-split__col {
	padding: 28px 30px;
	background: #ffffff;
	border-radius: 18px;
	border-top: 5px solid #4faf48;
	box-shadow: 0 12px 26px rgba(35, 48, 31, 0.08);
}

.spage-split__col--risk {
	border-top-color: #383638;
}

.spage-split__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 800;
	color: #23301f;
}

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

.spage-list li {
	position: relative;
	padding-left: 24px;
	font-size: 14.5px;
	line-height: 1.7;
	color: #5f6b5c;
}

.spage-list li + li {
	margin-top: 14px;
}

.spage-list li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 2px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #4faf48;
	border-right: 2px solid #4faf48;
	transform: rotate(45deg);
}

.spage-split__col--risk .spage-list li::before {
	border-color: #383638;
}

/* Variants of the shared grids */

.spage-cards--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spage-factors--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Ticked reasons */

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

.spage-checks li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	font-size: 15px;
	line-height: 1.6;
	color: #23301f;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 10px 22px rgba(35, 48, 31, 0.07);
}

.spage-checks svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: #4faf48;
}

@media (max-width: 1000px) {
	.spage-products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.spage-factors--three {
		grid-template-columns: 1fr;
	}
}

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

	.spage-split,
	.spage-cards--pair,
	.spage-checks {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.spage-products {
		grid-template-columns: 1fr;
	}
}

/* ---------- Solution pages: stats, icon products, quote ---------- */

.spage-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.spage-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 26px;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-radius: 18px;
	box-shadow: 0 12px 26px rgba(35, 48, 31, 0.07);
}

.spage-stat__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	background: #f2f7ef;
	border-radius: 50%;
}

.spage-stat__icon img {
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.spage-stat__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #4a5648;
}

/* Product tiles that hold flat illustrations rather than photos */

.spage-products--icon {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.spage-products--icon .spage-product__media {
	aspect-ratio: 1 / 1;
	padding: 18px;
	background: #ffffff;
}

.spage-products--icon .spage-product__media img {
	object-fit: contain;
}

.spage-products--icon .spage-product__title {
	padding: 0 14px 18px;
	text-align: center;
	font-size: 14.5px;
}

/* Pull quote */

.spage-quote {
	position: relative;
	margin: 44px 0 0;
	padding: 34px 38px 34px 76px;
	background: #f4f9f1;
	border-left: 5px solid #4faf48;
	border-radius: 0 18px 18px 0;
}

.spage-quote::before {
	content: "\201C";
	position: absolute;
	top: 14px;
	left: 26px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 68px;
	line-height: 1;
	color: #98c787;
}

.spage-quote blockquote {
	margin: 0;
	font-size: 18px;
	font-style: italic;
	line-height: 1.7;
	color: #23301f;
}

.spage-quote figcaption {
	margin-top: 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #5f6b5c;
}

.spage-quote figcaption strong {
	display: block;
	font-size: 15px;
	color: #23301f;
}

@media (max-width: 1000px) {
	.spage-stats {
		grid-template-columns: 1fr;
	}

	.spage-products--icon {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.spage-products--icon {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.spage-quote {
		padding: 28px 22px 28px 22px;
		border-radius: 0 14px 14px 0;
	}

	.spage-quote::before {
		display: none;
	}

	.spage-quote blockquote {
		font-size: 16.5px;
	}
}

/* ---------- Solution pages: six-up products, notes, spaced heading ---------- */

.spage-products--six {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.spage-product__note {
	display: block;
	margin-top: -6px;
	padding: 0 14px 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #4d8a41;
	text-align: center;
}

.spage__heading--gap {
	margin-top: 52px;
}

@media (max-width: 1000px) {
	.spage-products--six {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.spage-products--six {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Solution pages: boxed list, mini heading, certification marks ---------- */

.spage__minihead {
	margin: 32px 0 16px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #4d8a41;
}

.spage-list--boxed {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;
	padding: 24px 28px;
	background: #f4f9f1;
	border-radius: 16px;
}

.spage-list--boxed li + li {
	margin-top: 0;
}

.spage-marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spage-marks li {
	display: grid;
	place-items: center;
	width: 92px;
	height: 68px;
	padding: 8px;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-radius: 12px;
}

.spage-marks img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 760px) {
	.spage-list--boxed {
		grid-template-columns: 1fr;
		padding: 20px 22px;
	}
}

/* ---------- Solution pages: import shares, portrait products ---------- */

.spage-shares {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spage-share {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px 12px 14px;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-radius: 999px;
	box-shadow: 0 8px 18px rgba(35, 48, 31, 0.06);
}

.spage-share img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.spage-share span {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #4faf48;
}

/* Portrait product photos */

.spage-products--tall {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.spage-products--tall .spage-product__media {
	aspect-ratio: 3 / 4;
}

.spage-products--tall .spage-product__title {
	padding-bottom: 8px;
}

.spage-products--tall .spage-product__note {
	margin-top: 0;
	text-align: left;
	color: #5f6b5c;
}

@media (max-width: 760px) {
	.spage-products--tall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Solution pages: three-up products ---------- */

.spage-products--trio {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spage-products--trio .spage-product__media {
	aspect-ratio: 16 / 10;
}

.spage-products--trio .spage-product__title {
	font-size: 17px;
}

.spage-list strong {
	color: #23301f;
}

@media (max-width: 760px) {
	.spage-products--trio {
		grid-template-columns: 1fr;
	}
}

/* ---------- Service: Japanese intro panel ---------- */

.jpintro {
	padding: 32px 0 8px;
	background: #f4f9f1;
}

.jpintro__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Cot chu rong hon cot anh, du cho tieu de nam gon tren 2 dong. */
.jpintro__panel {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
	gap: 44px;
	padding: 28px;
	background: #ffffff;
	border-radius: 26px;
	box-shadow: 0 18px 40px rgba(35, 48, 31, 0.08);
}

.jpintro__media {
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #eef4ea;
	border-radius: 18px;
}

/* Chi khoa ti le khi chua co anh, de o placeholder khong bi det. */
.jpintro__media--empty {
	aspect-ratio: 16 / 10;
}

/* height:auto — de anh tu quyet dinh chieu cao khung, khong bi cat mep nao. */
.jpintro__media img {
	display: block;
	width: 100%;
	height: auto;
}

.jpintro__placeholder {
	color: #b8d8aa;
}

.jpintro__placeholder svg {
	width: 64px;
	height: 64px;
}

.jpintro__body {
	padding: 8px 24px 8px 0;
}

/* Moi ve mot dong: ve dau den, ve sau xanh. */
.jpintro__heading {
	margin: 0;
	font-size: clamp(18px, 1.75vw, 25px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #23301f;
}

.jpintro__accent {
	display: block;
	color: #4faf48;
}

.jpintro__text {
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.85;
	color: #4a5648;
}

.jpintro__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
	padding: 14px 26px;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	background: #2f6746;
	border-radius: 999px;
	transition: background var(--transition), transform var(--transition);
}

.jpintro__button:hover {
	background: #4faf48;
	transform: translateY(-2px);
}

.jpintro__button svg {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.jpintro__button:hover svg {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.jpintro__panel {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 22px;
	}

	.jpintro__body {
		padding: 0 6px 10px;
	}
}

/* ---------- Service: Japanese service overview ---------- */

.soverview {
	padding: 52px 0 60px;
	background: #ffffff;
}

.soverview__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.soverview__head {
	max-width: 820px;
	margin: 0 auto 44px;
	text-align: center;
}

.soverview__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 16px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

.soverview__heading {
	margin: 0;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: #23301f;
}

.soverview__subtitle {
	margin: 18px 0 0;
	font-size: 15.5px;
	line-height: 1.85;
	color: #4a5648;
}

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

.soverview-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 34px 30px 32px;
	text-align: left;
	color: #ffffff;
	background: linear-gradient(160deg, #4faf48 0%, #3d8b49 100%);
	border-radius: 22px;
	box-shadow: 0 16px 34px rgba(35, 48, 31, 0.18);
	transition: transform var(--transition), box-shadow var(--transition);
}

.soverview-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 44px rgba(35, 48, 31, 0.28);
}

/* Icon dung ngang voi tieu de; tieu de dai thi xuong dong, van canh giua. */
.soverview-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin-bottom: 12px;
}

/* O vuong bo goc, nen trang mo de icon trang noi len nen xanh cua the. */
.soverview-card__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.16);
	border-radius: 14px;
}

.soverview-card__icon svg {
	width: 26px;
	height: 26px;
}

.soverview-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	color: #ffffff;
}

.soverview-card__sub {
	display: block;
	margin-top: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.8);
}

.soverview-card__text {
	/* margin-bottom giu khoang ho toi thieu voi nut ben duoi */
	margin: 16px 0 26px;
	font-size: 14.5px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.92);
}

.soverview-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 13px 26px;
	font-size: 14px;
	font-weight: 800;
	color: #2f6746;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 8px 18px rgba(20, 30, 18, 0.16);
	transition: transform var(--transition), color var(--transition);
}

.soverview-card__more:hover {
	color: #4faf48;
	transform: translateY(-2px);
}

.soverview-card__more svg {
	width: 16px;
	height: 16px;
	transition: transform var(--transition);
}

.soverview-card__more:hover svg {
	transform: translateX(4px);
}

@media (max-width: 820px) {
	.soverview {
		padding: 40px 0 46px;
	}

	.soverview__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.soverview-card {
		padding: 32px 24px 28px;
	}
}

/* ---------- Service: what each service covers ---------- */

.svcdetails {
	--svcd-green: #4faf48;
	--svcd-ink: #23301f;
	--svcd-body: #5f6b5c;

	padding: clamp(44px, 4.6vw, 66px) 0 clamp(48px, 5vw, 72px);
	background: #f4f9f1;
}

.svcdetails__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.svcdetail + .svcdetail {
	margin-top: clamp(48px, 5vw, 76px);
}

/* Head: so thu tu ben trai, dong tieng Anh va tieu de xep chong ben phai. */

.svcdetail__head {
	display: flex;
	align-items: flex-start;
	gap: clamp(14px, 1.6vw, 22px);
}

.svcdetail__num {
	flex: 0 0 auto;
	font-size: clamp(34px, 3.6vw, 46px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--svcd-green);
}

/* Day dong tieng Anh xuong ngang than so, dung sat mep tren. */
.svcdetail__heading {
	padding-top: clamp(10px, 1.4vw, 18px);
}

.svcdetail__sub {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #7d8a79;
}

.svcdetail__title {
	margin: 8px 0 0;
	font-size: clamp(21px, 2.4vw, 30px);
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--svcd-ink);
}

.svcdetail__lead {
	margin: 20px 0 0;
	max-width: 88ch;
	font-size: 15px;
	line-height: 1.95;
	color: var(--svcd-body);
}

/* Bon the con */

.svcdetail__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: clamp(24px, 2.6vw, 34px) 0 0;
	padding: 0;
	list-style: none;
}

.svcpoint {
	padding: 24px 26px 26px;
	background: #ffffff;
	border: 1px solid #e3ebdd;
	border-radius: 12px;
}

/* O vuong xanh nho truoc tieu de, ve bang pseudo-element. */
.svcpoint__title {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.55;
	font-weight: 800;
	color: var(--svcd-ink);
}

.svcpoint__title::before {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	margin-top: 7px;
	background: var(--svcd-green);
	border-radius: 3px;
}

.svcpoint__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--svcd-body);
}

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

@media (max-width: 560px) {
	.svcdetail__head {
		gap: 12px;
	}

	.svcdetail__heading {
		padding-top: 6px;
	}
}

/* ---------- Service: Japanese "why G84" rows ---------- */

/* Nen xanh dam hon khoi "支援形態" ngay tren va khoi flow trang ngay duoi. */
.jreasons {
	padding: 54px 0 62px;
	background: #b8d8aa;
}

.jreasons__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.jreasons__heading {
	margin: 0;
	font-size: clamp(25px, 2.9vw, 36px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-align: center;
	color: #23301f;
}

.jreasons__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 20px;
	background: #2f6746;
	border-radius: 3px;
}

/* Cau dinh vi: hai dong cung trong so, khong con kieu tieu de + phu de. */
.jreasons__subtitle {
	max-width: 60ch;
	margin: 0 auto 42px;
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.9;
	font-weight: 700;
	text-align: center;
	color: #23301f;
	word-break: auto-phrase;
	line-break: strict;
}

/* Moi y mot dong, khong bi ngat giua chung. */
.jreasons__subtitle span {
	display: block;
}

.jreasons__list {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jreason {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: #ffffff;
	border-bottom: 5px solid var(--tone);
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(35, 48, 31, 0.08);
	transition: transform var(--transition), box-shadow var(--transition);
}

.jreason:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(35, 48, 31, 0.14);
}

.jreason--1 { --tone: #4faf48; }
.jreason--2 { --tone: #3d8b49; }
.jreason--3 { --tone: #2f6746; }

/* Khoi mau cat cheo o canh phai, giong layout mau */
.jreason__step {
	flex: none;
	display: grid;
	place-content: center;
	width: 168px;
	padding: 24px 44px 24px 26px;
	text-align: center;
	color: #ffffff;
	background: var(--tone);
	clip-path: polygon(0 0, 100% 0, calc(100% - 42px) 100%, 0 100%);
}

.jreason__step b {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.24em;
}

.jreason__icon {
	display: grid;
	place-items: center;
	margin-top: 10px;
	color: #ffffff;
}

.jreason__icon svg {
	width: 40px;
	height: 40px;
}

/* Chua 42px cat cheo cua khoi mau, de chu khong sat vao canh nghieng. */
.jreason__body {
	padding: 24px 32px 24px 30px;
}

.jreason__title {
	margin: 0;
	font-size: 17.5px;
	font-weight: 800;
	line-height: 1.5;
	color: #23301f;
}

.jreason__text {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.85;
	color: #5f6b5c;
}

@media (max-width: 760px) {
	.jreasons {
		padding: 42px 0 48px;
	}

	.jreason {
		flex-wrap: wrap;
	}

	.jreason__step {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		width: 100%;
		padding: 14px 20px;
		clip-path: none;
	}

	.jreason__icon {
		margin-top: 0;
	}

	.jreason__icon svg {
		width: 30px;
		height: 30px;
	}

	.jreason__body {
		padding: 18px 22px 22px;
	}
}

/* ---------- Service: Japanese closing CTA ---------- */

/* Nen nhat de tach voi khoi FAQ trang o tren va chan trang trang o duoi. */
.ctaja {
	padding: 52px 0 64px;
	background: #f4f9f1;
}

.ctaja__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.ctaja__panel {
	padding: 56px 60px 58px;
	text-align: center;
	background:
		radial-gradient(90% 120% at 85% 8%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(135deg, #2f6746 0%, #4faf48 60%, #79bb64 100%);
	border-radius: 28px;
	box-shadow: 0 24px 48px rgba(35, 48, 31, 0.26);
}

.ctaja__eyebrow {
	display: inline-block;
	padding: 7px 18px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.ctaja__heading {
	max-width: 30ch;
	margin: 20px auto 0;
	font-size: clamp(21px, 2.3vw, 30px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.ctaja__text {
	max-width: 62ch;
	margin: 18px auto 0;
	font-size: 15px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.92);
}

.ctaja__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 34px;
}

.ctaja__button {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 16px 28px;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.4;
	border-radius: 999px;
	transition: transform var(--transition), background var(--transition), color var(--transition);
}

.ctaja__button svg {
	flex: none;
	width: 19px;
	height: 19px;
}

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

.ctaja__button--primary {
	color: #2f6746;
	background: #ffffff;
	box-shadow: 0 14px 26px rgba(20, 30, 18, 0.22);
}

.ctaja__button--primary:hover {
	color: #4faf48;
}

.ctaja__button--ghost {
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.85);
}

.ctaja__button--ghost:hover {
	color: #2f6746;
	background: #ffffff;
}

@media (max-width: 760px) {
	.ctaja {
		padding: 40px 0 48px;
	}

	.ctaja__panel {
		padding: 36px 24px 40px;
		border-radius: 22px;
	}

	.ctaja__actions {
		flex-direction: column;
	}

	.ctaja__button {
		justify-content: center;
	}
}

/* Dong tieng Anh phu duoi tieu de the, chi ban tieng Nhat dung toi. */
.solutions-card__sub {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.78);
}

.solutions-card--4 .solutions-card__sub {
	color: rgba(35, 48, 31, 0.6);
}

/* Chi 3 the: the cuoi doi sang tong dam de chu trang du tuong phan. */
.solutions__list--trio .solutions-card--3 {
	--tone: #2f6746;
}

/* ---------- Service: Japanese main support areas ---------- */

.jsupport {
	padding: 54px 0 62px;
	background: #ffffff;
}

.jsupport__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.jsupport__heading {
	margin: 0;
	font-size: clamp(25px, 2.9vw, 36px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-align: center;
	color: #23301f;
}

.jsupport__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 46px;
	background: #4faf48;
	border-radius: 3px;
}

.jsupport__list {
	display: grid;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Hang: khung vien mau bao quanh the trang, giong layout mau */
.jsupport-step {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 26px 30px;
	background: #ffffff;
	border: 3px solid var(--tone);
	border-radius: 22px;
	box-shadow: 0 14px 30px rgba(35, 48, 31, 0.1);
	transition: transform var(--transition), box-shadow var(--transition);
}

.jsupport-step:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 40px rgba(35, 48, 31, 0.16);
}

.jsupport-step--1 { --tone: #4faf48; }
.jsupport-step--2 { --tone: #3d8b49; }
.jsupport-step--3 { --tone: #2f6746; }
.jsupport-step--4 { --tone: #383638; }

.jsupport-step__num {
	flex: none;
	width: 104px;
	padding-right: 24px;
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	text-align: center;
	color: var(--tone);
	border-right: 2px solid #e6ece2;
}

.jsupport-step__body {
	flex: 1;
	min-width: 0;
}

.jsupport-step__title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--tone);
}

.jsupport-step__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsupport-step__rows li {
	position: relative;
	padding-left: 20px;
	font-size: 14.5px;
	line-height: 1.8;
	color: #5f6b5c;
}

.jsupport-step__rows li + li {
	margin-top: 10px;
}

.jsupport-step__rows li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 2px;
	width: 7px;
	height: 7px;
	background: var(--tone);
	border-radius: 50%;
}

.jsupport-step__rows b {
	color: #23301f;
}

.jsupport-step__rows b::after {
	content: "：";
	font-weight: 400;
	color: #97a394;
}

.jsupport-step__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	color: #ffffff;
	background: var(--tone);
	border-radius: 50%;
	box-shadow: 0 10px 22px rgba(35, 48, 31, 0.2);
}

.jsupport-step__icon svg {
	width: 42px;
	height: 42px;
}

@media (max-width: 900px) {
	.jsupport {
		padding: 42px 0 48px;
	}

	.jsupport-step {
		flex-wrap: wrap;
		gap: 18px;
		padding: 22px 24px;
	}

	.jsupport-step__num {
		width: auto;
		padding-right: 18px;
		font-size: 34px;
	}

	.jsupport-step__icon {
		width: 62px;
		height: 62px;
		order: -1;
		margin-left: auto;
	}

	.jsupport-step__icon svg {
		width: 30px;
		height: 30px;
	}

	.jsupport-step__body {
		flex-basis: 100%;
	}
}

/* ---------- Service: Japanese project steps ---------- */

/* Khoi ke tren/duoi cung mau trang tuy theo ngon ngu (ban Nhat la .jdeliv o
   duoi, ban Viet/Anh la .exports o tren), nen ke vach mong hai dau de cac khoi
   khong dinh lien thanh mot mang. */
.jsteps {
	padding: 54px 0 62px;
	background: #ffffff;
	border-top: 1px solid #e6ebe4;
	border-bottom: 1px solid #e6ebe4;
}

.jsteps__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.jsteps__heading {
	margin: 0;
	font-size: clamp(25px, 2.9vw, 36px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-align: center;
	color: #23301f;
}

.jsteps__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 46px;
	background: #4faf48;
	border-radius: 3px;
}

.jsteps__stage {
	position: relative;
}

/* Duong cong cham bi chay doc giua hai cot */
.jsteps__wire {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	width: 120px;
	height: 100%;
	transform: translateX(-50%);
}

.jsteps__list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 76px 1fr;
	row-gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jstep {
	display: contents;
}

.jstep--1 { --tone: #4faf48; }
.jstep--2 { --tone: #3d8b49; }
.jstep--3 { --tone: #2f6746; }
.jstep--4 { --tone: #383638; }

/* Vien nang noi dung */

.jstep__pill {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 26px 18px 18px;
	color: #ffffff;
	background: var(--tone);
	border-radius: 999px;
	box-shadow: 0 14px 30px rgba(35, 48, 31, 0.18);
}

.jstep--left .jstep__pill {
	grid-column: 1;
	grid-row: var(--row);
}

.jstep--right .jstep__pill {
	grid-column: 3;
	grid-row: var(--row);
	flex-direction: row-reverse;
	padding: 18px 18px 18px 26px;
	text-align: right;
}

.jstep--1 .jstep__pill,
.jstep--1 .jstep__node,
.jstep--1 .jstep__mark { grid-row: 1; }
.jstep--2 .jstep__pill,
.jstep--2 .jstep__node,
.jstep--2 .jstep__mark { grid-row: 2; }
.jstep--3 .jstep__pill,
.jstep--3 .jstep__node,
.jstep--3 .jstep__mark { grid-row: 3; }
.jstep--4 .jstep__pill,
.jstep--4 .jstep__node,
.jstep--4 .jstep__mark { grid-row: 4; }

.jstep__disc {
	flex: none;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	color: var(--tone);
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(20, 30, 18, 0.22);
}

.jstep__disc svg {
	width: 34px;
	height: 34px;
}

.jstep__body {
	min-width: 0;
}

.jstep__title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.45;
}

.jstep__text {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
}

/* Cham noi tren duong cong */

.jstep__node {
	grid-column: 2;
	justify-self: center;
	align-self: center;
	width: 26px;
	height: 26px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--tone), 0 0 0 9px #f4f9f1;
}

/* Nhan STEP o phia doi dien vien nang */

.jstep__mark {
	align-self: center;
	color: var(--tone);
}

.jstep--left .jstep__mark {
	grid-column: 3;
	padding-left: 12px;
	text-align: left;
}

.jstep--right .jstep__mark {
	grid-column: 1;
	padding-right: 12px;
	text-align: right;
}

.jstep__mark b {
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.22em;
}

.jstep__mark i {
	display: block;
	font-size: 46px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

/* Tu khoa ngan cua buoc, nam ngay duoi so thu tu. */
.jstep__mark em {
	display: block;
	margin-top: 4px;
	font-size: 19px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.4;
	color: #23301f;
}

@media (max-width: 900px) {
	.jsteps {
		padding: 42px 0 48px;
	}

	.jsteps__wire,
	.jstep__node {
		display: none;
	}

	.jsteps__list {
		grid-template-columns: 1fr;
		row-gap: 18px;
	}

	.jstep--left .jstep__pill,
	.jstep--right .jstep__pill {
		grid-column: 1;
		flex-direction: row;
		padding: 18px 24px 18px 18px;
		text-align: left;
		border-radius: 26px;
	}

	.jstep--left .jstep__mark,
	.jstep--right .jstep__mark {
		grid-column: 1;
		display: flex;
		align-items: baseline;
		gap: 10px;
		padding: 0;
		text-align: left;
	}

	.jstep__mark i {
		font-size: 26px;
	}

	.jstep--1 .jstep__mark { grid-row: 1; }
	.jstep--1 .jstep__pill { grid-row: 2; }
	.jstep--2 .jstep__mark { grid-row: 3; }
	.jstep--2 .jstep__pill { grid-row: 4; }
	.jstep--3 .jstep__mark { grid-row: 5; }
	.jstep--3 .jstep__pill { grid-row: 6; }
	.jstep--4 .jstep__mark { grid-row: 7; }
	.jstep--4 .jstep__pill { grid-row: 8; }
}

/* ---------- Service: Japanese deliverables ---------- */

.jdeliv {
	padding: 54px 0 64px;
	background: #dbe8d0;
}

.jdeliv__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

.jdeliv__subtitle {
	max-width: 760px;
	margin: 20px auto 48px;
	font-size: 15.5px;
	line-height: 1.85;
	text-align: center;
	color: #4a5648;
}

.jdeliv__stage {
	position: relative;
}

/* Vong cung 4 phan noi cac the vao tam */
.jdeliv__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 262px;
	height: 262px;
	transform: translate(-50%, -50%);
}

.jdeliv__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-content: center;
	gap: 4px;
	width: 150px;
	height: 150px;
	text-align: center;
	background: #2f6746;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 8px #dbe8d0, 0 16px 30px rgba(35, 48, 31, 0.24);
}

.jdeliv__heading {
	margin: 0;
	font-size: clamp(25px, 2.9vw, 36px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-align: center;
	color: #23301f;
}

.jdeliv__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

.jdeliv__badge-title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #ffffff;
}

.jdeliv__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Hai hang cao bang nhau: the deu nhau va tam dia tron trung voi khe ngang. */
	grid-auto-rows: 1fr;
	/* Khe vua du de bon cung o giua lo ra. */
	gap: 64px 110px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jdeliv-card {
	display: flex;
	flex-direction: column;
	padding: 30px 32px;
	background: #ffffff;
	border-radius: 26px;
	box-shadow: 0 16px 36px rgba(35, 48, 31, 0.12);
	transition: transform var(--transition), box-shadow var(--transition);
}

.jdeliv-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 46px rgba(35, 48, 31, 0.18);
}

.jdeliv-card--1 { --tone: #4faf48; }
.jdeliv-card--2 { --tone: #3d8b49; }
.jdeliv-card--3 { --tone: #2f6746; }
.jdeliv-card--4 { --tone: #383638; }


/* So + icon + tieu de nam chung mot hang. */
.jdeliv-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.jdeliv-card__mark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	color: var(--tone);
}

.jdeliv-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: #ffffff;
	background: var(--tone);
	border-radius: 14px;
}

.jdeliv-card__icon svg {
	width: 25px;
	height: 25px;
}

.jdeliv-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.5;
	color: #23301f;
}

.jdeliv-card__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jdeliv-card__rows li {
	position: relative;
	padding-left: 16px;
	font-size: 13.5px;
	line-height: 1.75;
	text-align: left;
	color: #5f6b5c;
}


.jdeliv-card__rows li + li {
	margin-top: 8px;
}

.jdeliv-card__rows li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 6px;
	background: var(--tone);
	border-radius: 50%;
}


@media (max-width: 1000px) {
	.jdeliv__ring,
	.jdeliv__badge {
		position: static;
		transform: none;
	}

	.jdeliv__ring {
		display: none;
	}

	.jdeliv__badge {
		margin: 0 auto 28px;
		box-shadow: 0 18px 34px rgba(35, 48, 31, 0.24);
	}

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

	.jdeliv-card {
		min-height: 0;
	}

}

/* ---------- Service: Japanese engagement models ---------- */

.jplan {
	padding: 54px 0 64px;
	background: #f4f9f1;
}

.jplan__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

.jplan__heading {
	margin: 0;
	font-size: clamp(25px, 2.9vw, 36px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-align: center;
	color: #23301f;
}

.jplan__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

.jplan__subtitle {
	max-width: 760px;
	margin: 20px auto 40px;
	font-size: 15.5px;
	line-height: 1.85;
	text-align: center;
	color: #4a5648;
}

/* Bang so sanh */

.jplan__tablewrap {
	overflow-x: auto;
	margin-bottom: 42px;
}

.jplan-table {
	width: 100%;
	min-width: 780px;
	border-collapse: separate;
	border-spacing: 0;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(35, 48, 31, 0.08);
}

.jplan-table th,
.jplan-table td {
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid #e6ece2;
}

.jplan-table tr:last-child th,
.jplan-table tr:last-child td {
	border-bottom: 0;
}

.jplan-table th {
	width: 148px;
	text-align: left;
	color: #ffffff;
	background: #2f6746;
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.jplan-table__label {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 700;
}

.jplan-table__label i {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
}

.jplan-table__label svg {
	width: 17px;
	height: 17px;
}

.jplan-table td {
	color: #4a5648;
}

.jplan-table__plan {
	display: block;
	font-size: 16px;
	font-weight: 800;
	color: #23301f;
}

.jplan-table__lead {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: #77837a;
}

/* Cot duoc de xuat */
.jplan-table td.is-pick {
	background: #e9f4e4;
}

.jplan-table tr:first-child td.is-pick {
	color: #ffffff;
	background: #4faf48;
}

.jplan-table tr:first-child td.is-pick .jplan-table__plan {
	color: #ffffff;
}

.jplan-table tr:first-child td.is-pick .jplan-table__lead {
	color: rgba(255, 255, 255, 0.85);
}

.jplan-stars {
	letter-spacing: 0.18em;
	color: #c6d3c2;
}

.jplan-star.is-on {
	color: #4faf48;
}

.jplan-table tr:first-child td.is-pick .jplan-star.is-on {
	color: #ffffff;
}

@media (max-width: 980px) {
	.jplan {
		padding: 42px 0 50px;
	}
}

/* Ghi chu ve chi phi, dat cuoi khoi ke hoach */

.jplan-note {
	margin-top: 34px;
	padding: 34px 40px 36px;
	text-align: center;
	background: #ffffff;
	border: 2px dashed #b8d8aa;
	border-radius: 20px;
}

.jplan-note__heading {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 800;
	color: #2f6746;
}

.jplan-note__text {
	max-width: 78ch;
	margin: 0 auto;
	font-size: 14.5px;
	line-height: 1.9;
	color: #5f6b5c;
	text-align: justify;
	text-justify: inter-character;
}

.jplan-note__text + .jplan-note__text {
	margin-top: 8px;
}

.jplan-note__button {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-top: 24px;
	padding: 16px 30px;
	font-size: 14.5px;
	font-weight: 800;
	color: #ffffff;
	background: #4faf48;
	border-radius: 999px;
	box-shadow: 0 12px 24px rgba(79, 175, 72, 0.28);
	transition: transform var(--transition), background var(--transition);
}

.jplan-note__button:hover {
	transform: translateY(-2px);
	background: #2f6746;
}

.jplan-note__button svg {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform var(--transition);
}

.jplan-note__button:hover svg {
	transform: translateX(4px);
}

@media (max-width: 620px) {
	.jplan-note {
		padding: 26px 22px 28px;
	}

	.jplan-note__button {
		width: 100%;
		justify-content: center;
		padding: 15px 20px;
		font-size: 13.5px;
	}
}

/* Che do banner: anh da chua san chu, hien tran ngang trong panel. */

.jpintro--banner .jpintro__panel {
	display: block;
	padding: 0;
	overflow: hidden;
	background: transparent;
	box-shadow: none;
}

.jpintro--banner .jpintro__media {
	aspect-ratio: auto;
	background: transparent;
	border-radius: 22px;
	box-shadow: 0 18px 40px rgba(35, 48, 31, 0.12);
}

.jpintro--banner .jpintro__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.jpintro__button--banner {
	display: inline-flex;
	margin: 26px auto 0;
}

.jpintro--banner .jpintro__panel {
	text-align: center;
}

/* ---------- Service: Japanese FAQ ---------- */

.jfaq {
	padding: 54px 0 64px;
	background: #ffffff;
}

.jfaq__inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 24px;
}

.jfaq__heading {
	margin: 0;
	font-size: clamp(25px, 2.9vw, 36px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-align: center;
	color: #23301f;
}

.jfaq__sub {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.28em;
	text-align: center;
	color: #79bb64;
}

.jfaq__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 44px;
	background: #4faf48;
	border-radius: 3px;
}

.jfaq__list {
	display: grid;
	gap: 12px;
}

/* Mot cau hoi */

.jfaq-item {
	overflow: hidden;
	background: #ffffff;
	border: 2px solid #e2ece0;
	border-radius: 16px;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.jfaq-item[open] {
	border-color: #b8d8aa;
	box-shadow: 0 12px 26px rgba(35, 48, 31, 0.08);
}

.jfaq-item__q {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 22px;
	list-style: none;
	cursor: pointer;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.65;
	color: #23301f;
	transition: background var(--transition);
}

/* An mui ten mac dinh cua <summary> */
.jfaq-item__q::-webkit-details-marker {
	display: none;
}

.jfaq-item__q::marker {
	content: "";
}

.jfaq-item__q:hover {
	background: #f4f9f1;
}

.jfaq-item__q:focus-visible {
	outline: 3px solid #4faf48;
	outline-offset: -3px;
}

.jfaq-item__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	font-size: 14px;
	font-weight: 800;
	color: #ffffff;
	background: #4faf48;
	border-radius: 9px;
}

.jfaq-item__mark--a {
	background: #2f6746;
}

.jfaq-item__text {
	flex: 1;
	min-width: 0;
	padding-top: 2px;
}

.jfaq-item__caret {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	color: #79bb64;
	transition: transform var(--transition);
}

.jfaq-item__caret svg {
	width: 18px;
	height: 18px;
}

.jfaq-item[open] .jfaq-item__caret {
	transform: rotate(180deg);
}

.jfaq-item__a {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0 22px 22px;
	border-top: 1px dashed #dfe9d9;
	margin-top: -2px;
	padding-top: 18px;
}

.jfaq-item__a p {
	margin: 2px 0 0;
	font-size: 14.5px;
	line-height: 1.95;
	color: #5f6b5c;
	text-align: justify;
	text-justify: inter-character;
}

@media (max-width: 620px) {
	.jfaq {
		padding: 42px 0 50px;
	}

	.jfaq-item__q {
		gap: 11px;
		padding: 16px 16px;
		font-size: 14.5px;
	}

	.jfaq-item__a {
		gap: 11px;
		padding: 16px 16px 18px;
	}
}

/* ---------- Service: Japanese pain points ---------- */

.jpain {
	padding: 52px 0 60px;
	background: #b8d8aa;
}

.jpain__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.jpain__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.015em;
	text-align: center;
	color: #23301f;
}

.jpain__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 44px;
	background: #2f6746;
	border-radius: 3px;
}

.jpain__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jpain-card {
	position: relative;
	padding: 30px 32px 30px 34px;
	background: #ffffff;
	border-left: 5px solid var(--tone);
	border-radius: 8px 18px 18px 8px;
	transition: transform var(--transition), box-shadow var(--transition);
}

.jpain-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(35, 48, 31, 0.12);
}

.jpain-card--1 { --tone: #4faf48; }
.jpain-card--2 { --tone: #3d8b49; }
.jpain-card--3 { --tone: #2f6746; }
.jpain-card--4 { --tone: #383638; }

.jpain-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.jpain-card__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: #ffffff;
	background: var(--tone);
	border-radius: 15px;
}

.jpain-card__icon svg {
	width: 26px;
	height: 26px;
}

.jpain-card__title {
	margin: 0;
	font-size: 17.5px;
	font-weight: 800;
	line-height: 1.55;
	color: #23301f;
}

.jpain-card__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.9;
	color: #5f6b5c;
	text-align: justify;
	text-justify: inter-character;
}

@media (max-width: 860px) {
	.jpain {
		padding: 42px 0 48px;
	}

	.jpain__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.jpain-card {
		padding: 26px 24px 26px 26px;
	}
}

/* ---------- About us ---------- */

.abt__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.abt__hero {
	display: flex;
	align-items: center;
	min-height: 380px;
	padding: 50px 0;
	background-color: #23301f;
	background-image:
		linear-gradient(100deg, rgba(24, 48, 33, 0.88) 0%, rgba(24, 48, 33, 0.66) 55%, rgba(24, 48, 33, 0.45) 100%),
		var(--hero-image, none);
	background-position: center;
	background-size: cover;
}

.abt__title {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.abt__lead {
	max-width: 60ch;
	margin: 18px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
}

/* Tieng Nhat mac dinh ngat dong o bat ky ky tu nao, de cat doi tu katakana.
   auto-phrase ngat theo cum tu; strict ap dung day du quy tac kinsoku. */
.abt__title,
.abt__lead,
.abt__heading,
.abt__contact-heading {
	word-break: auto-phrase;
	line-break: strict;
}

.abt__block {
	padding: 52px 0;
	background: #ffffff;
}

.abt__block--tint {
	background: #f4f9f1;
}

.abt__heading {
	margin: 0 0 18px;
	font-size: clamp(23px, 2.6vw, 32px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: #23301f;
}

.abt__heading--center {
	margin-bottom: 34px;
	text-align: center;
}

.abt__heading--center::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin: 16px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

.abt__paragraph {
	margin: 0 0 16px;
	font-size: 15.5px;
	line-height: 1.9;
	color: #4a5648;
	text-align: justify;
	text-justify: inter-character;
}

.abt__paragraph--center {
	max-width: 82ch;
	margin: 34px auto 0;
}

/* Gioi thieu: chu trai, anh phai */

.abt__intro {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 48px;
}

.abt__intro-media {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 18px 38px rgba(35, 48, 31, 0.16);
}

.abt__intro-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* So lieu */

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

.abt-stat {
	padding: 30px 28px;
	text-align: center;
	background: #ffffff;
	border-top: 5px solid var(--tone);
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(35, 48, 31, 0.08);
}

.abt-stat--1 { --tone: #4faf48; }
.abt-stat--2 { --tone: #3d8b49; }
.abt-stat--3 { --tone: #2f6746; }

.abt-stat__figure {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	margin: 0;
	color: var(--tone);
}

.abt-stat__number {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.abt-stat__plus {
	font-size: 24px;
	font-weight: 800;
}

.abt-stat__unit {
	margin-left: 4px;
	font-size: 16px;
	font-weight: 800;
}

.abt-stat__text {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: #5f6b5c;
}

/* Thong tin cong ty */

.abt-company {
	max-width: 720px;
	margin: 0 auto;
	padding: 32px 36px;
	background: #f4f9f1;
	border-radius: 20px;
}

.abt-company__name {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	color: #2f6746;
}

.abt-company__rows {
	margin: 0;
}

.abt-company__rows > div {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid #dfe9d9;
}

.abt-company__rows dt {
	font-size: 14px;
	font-weight: 800;
	color: #23301f;
}

.abt-company__rows dd {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: #5f6b5c;
}

/* CTA */

.abt__contact {
	padding: 18px 0 62px;
	background: #ffffff;
}

.abt__contact-panel {
	padding: 46px 50px;
	text-align: center;
	background:
		radial-gradient(90% 120% at 86% 8%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(135deg, #2f6746 0%, #4faf48 60%, #79bb64 100%);
	border-radius: 26px;
	box-shadow: 0 22px 44px rgba(35, 48, 31, 0.24);
}

.abt__contact-heading {
	margin: 0;
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 800;
	line-height: 1.35;
	color: #ffffff;
}

.abt__contact-text {
	max-width: 58ch;
	margin: 14px auto 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.92);
}

.abt__contact-button {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-top: 24px;
	padding: 16px 30px;
	font-size: 14.5px;
	font-weight: 800;
	color: #2f6746;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 14px 26px rgba(20, 30, 18, 0.22);
	transition: transform var(--transition), color var(--transition);
}

.abt__contact-button:hover {
	transform: translateY(-2px);
	color: #4faf48;
}

.abt__contact-button svg {
	width: 18px;
	height: 18px;
	transition: transform var(--transition);
}

.abt__contact-button:hover svg {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.abt__hero {
		min-height: 0;
		padding: 40px 0;
	}

	.abt__block {
		padding: 40px 0;
	}

	.abt__intro {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.abt-stats {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.abt-company {
		padding: 24px 22px;
	}

	.abt-company__rows > div {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.abt__contact-panel {
		padding: 32px 24px;
	}

	.abt__contact-button {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Home: clients and partners ---------- */

/* Nen nhat, tach voi khoi ecosystem trang o tren va khoi news #b8d8aa o duoi. */
.partner {
	padding: 54px 0 60px;
	background: #f4f9f1;
}

.partner__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.partner__head {
	max-width: 720px;
	margin: 0 auto 42px;
	text-align: center;
}

.partner__heading {
	margin: 0;
	font-size: clamp(24px, 2.8vw, 36px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: #23301f;
	word-break: auto-phrase;
	line-break: strict;
}

.partner__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: #4faf48;
	border-radius: 3px;
}

.partner__subtitle {
	margin: 18px 0 0;
	font-size: 15.5px;
	line-height: 1.8;
	color: #4a5648;
	word-break: auto-phrase;
	line-break: strict;
}

/* auto-fit thay vi auto-fill: voi 5 logo, cac cot trong bi thu lai nen hang
   logo trai deu ca be ngang thay vi de ho mot o cuoi hang. */
.partner__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.partner-logo {
	display: grid;
	place-items: center;
	height: 104px;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #e2ece0;
	border-radius: 16px;
	transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.partner-logo:hover {
	transform: translateY(-3px);
	border-color: #b8d8aa;
	box-shadow: 0 12px 24px rgba(35, 48, 31, 0.12);
}

/* min-*: 0 la bat buoc — kich thuoc toi thieu tu dong cua o luoi bang kich
   thuoc goc cua anh, no vo hieu hoa max-*: 100% va lam nhung logo cao (vd.
   Mynavi 252x216) tran ra khoi the. */
.partner-logo img {
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 700px) {
	.partner {
		padding: 42px 0 48px;
	}

	.partner__grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 14px;
	}

	.partner-logo {
		height: 86px;
		padding: 16px;
	}
}

/* Bo cuc 2:1 — ba hang ly do ben trai, anh minh hoa ben phai. */

.jreasons__stage {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	/* Anh kho doc nen keo cao bang cot noi dung ma gan nhu khong phai cat. */
	align-items: stretch;
	gap: 30px;
}

.jreasons__media {
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 16px 34px rgba(35, 48, 31, 0.16);
}

.jreasons__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 900px) {
	.jreasons__media {
		height: auto;
	}

	.jreasons__media img {
		height: auto;
	}
}

@media (max-width: 900px) {
	.jreasons__stage {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.jreasons__media {
		order: -1;
	}
}

/* ---------- Service: Japanese results ---------- */

.jresult {
	padding: 68px 0 76px;
	background: #ffffff;
}

.jresult__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Vach dung ben trai tieu de, giong bo cuc mau. */
.jresult__heading {
	margin: 0 0 34px;
	padding-left: 18px;
	font-size: clamp(23px, 2.6vw, 32px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: #23301f;
	border-left: 5px solid #4faf48;
	word-break: auto-phrase;
	line-break: strict;
}

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

.jresult-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 26px 30px;
	background: #f4f9f1;
	border: 2px solid #e2ece0;
	border-radius: 14px;
}

.jresult-card--accent {
	background: #ffffff;
	border-color: #4faf48;
	box-shadow: 0 12px 26px rgba(79, 175, 72, 0.16);
}

.jresult-card__figure {
	flex: none;
	margin: 0;
	font-size: clamp(38px, 4vw, 50px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #4faf48;
}

.jresult-card__figure span {
	font-size: 0.78em;
}

.jresult-card__label {
	margin: 0;
	line-height: 1.55;
}

.jresult-card__label b {
	display: block;
	font-size: 16px;
	font-weight: 800;
	color: #23301f;
}

.jresult-card__label span {
	display: block;
	font-size: 14.5px;
	color: #5f6b5c;
}

.jresult__quote {
	margin: 30px 0 0;
	font-size: 15.5px;
	line-height: 1.8;
	text-align: center;
	color: #4a5648;
	word-break: auto-phrase;
	line-break: strict;
}

@media (max-width: 760px) {
	.jresult {
		padding: 52px 0 58px;
	}

	.jresult__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.jresult-card {
		gap: 16px;
		padding: 22px 24px;
	}
}