/* ==========================================================================
   Trai Giong Thu Ha — soft light skin (site.css)
   Loaded AFTER style/combine.css
   ========================================================================== */

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

:root{
	--tgh-green: #1a8f63;
	--tgh-green-dark: #157a54;
	--tgh-green-soft: #eef8f3;
	--tgh-gold: #e8a428;
	--tgh-gold-light: #f0b84a;
	--tgh-gold-dark: #c98c16;
	--tgh-bg: #f5f7f6;
	--tgh-surface: #ffffff;
	--tgh-ink: #24332c;
	--tgh-muted: #66756d;
	--tgh-border: #e3ebe6;
	--tgh-gray: #6b7280;
	--tgh-gray-mid: #5b6470;
	--tgh-gray-dark: #4b5563;
	--tgh-gray-deep: #3f4654;
	--tgh-radius: 10px;
	--tgh-radius-sm: 8px;
	--tgh-shadow: 0 10px 28px rgba(36,51,44,.08);
	--tgh-shadow-sm: 0 4px 14px rgba(36,51,44,.06);
	--tgh-transition: .22s ease;
	--tgh-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--tgh-fs: 15px;
}

html{ scroll-behavior: smooth; }
body{
	color: var(--tgh-ink);
	background: var(--tgh-bg);
	font-family: var(--tgh-font);
	font-size: var(--tgh-fs);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a{ transition: color var(--tgh-transition), background-color var(--tgh-transition); }
img{ max-width: 100%; height: auto; }

::selection{ background: var(--tgh-green-soft); color: var(--tgh-ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
.navicon:focus-visible{
	outline: 2px solid var(--tgh-gold);
	outline-offset: 2px;
}

.visually-hidden{
	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{
	position: absolute;
	left: 8px; top: -60px;
	background: var(--tgh-green);
	color: #fff;
	padding: 10px 14px;
	border-radius: var(--tgh-radius-sm);
	z-index: 10000;
	transition: top .2s ease;
	font-size: .9em;
	font-family: var(--tgh-font);
}
.skip-link:focus{ top: 8px; }

/* ==========================================================================
   HEADER — refined light bar
   ========================================================================== */
.site-header{
	position: sticky;
	top: 0;
	z-index: 500;
	background: #fff;
	box-shadow: 0 4px 18px rgba(36,51,44,.07);
}
.site-header__accent{
	height: 3px;
	background: linear-gradient(90deg, var(--tgh-green) 0%, var(--tgh-gold) 55%, var(--tgh-green) 100%);
}
.site-header__bar,
.top_bg.contaner_header{
	background: #fff !important;
	padding: 0;
}

.site-header__inner,
.topbar__inner{
	display: flex !important;
	align-items: center;
	gap: 14px;
	flex-wrap: nowrap;
	padding: 12px 0;
	position: relative;
	overflow: visible !important;
}
.site-header .wrap,
.site-header__bar .wrap{ overflow: visible !important; }

.brand,
.topbar__inner .brand,
.header .logo{
	display: flex !important;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	float: none !important;
	margin: 0 !important;
	flex: 0 1 auto;
	min-width: 0;
	position: static !important;
	order: 2;
	transition: transform .3s ease;
}
.brand:hover,
.brand:focus-visible{
	transform: translateY(-1px);
}
.brand__mark{
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 28% 22%, rgba(240,184,74,.55), transparent 52%),
		linear-gradient(145deg, #fff 0%, #e8f7ef 55%, var(--tgh-green-soft) 100%);
	border: 1px solid rgba(26,143,99,.28);
	box-shadow:
		0 0 0 0 rgba(26,143,99,.22),
		0 6px 18px rgba(26,143,99,.18);
	overflow: visible;
	animation: brandPulse 2.8s ease-in-out infinite;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.brand__mark::before{
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 16px;
	background: conic-gradient(from 0deg, var(--tgh-green), var(--tgh-gold), var(--tgh-green-light, #2db87a), var(--tgh-green));
	opacity: .55;
	z-index: 0;
	animation: brandRing 3.2s linear infinite;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	-webkit-mask-composite: xor;
	padding: 2px;
	pointer-events: none;
}
.brand__mark::after{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 62%);
	transform: translateX(-120%) skewX(-12deg);
	animation: brandSheen 2.6s ease-in-out infinite;
	pointer-events: none;
	z-index: 2;
}
.brand img,
.brand__logo{
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	position: relative;
	z-index: 1;
	animation: brandFloat 2.4s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(26,143,99,.25));
}
.brand__text{
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1.12;
	min-width: 0;
}
.brand__name{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 7px;
	min-width: 0;
}
.brand__line{
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tgh-green-dark) !important;
	white-space: nowrap;
	opacity: .92;
	animation: brandLineGlow 2.8s ease-in-out infinite;
}
.brand__accent{
	font-size: 1.38rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	white-space: nowrap;
	background: linear-gradient(
		92deg,
		#0f6b47 0%,
		var(--tgh-green) 22%,
		#2ecc71 42%,
		var(--tgh-gold) 68%,
		#ffe082 85%,
		var(--tgh-gold-light) 100%
	);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	animation: brandGradient 2.8s ease-in-out infinite;
	position: relative;
	filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 2px 10px rgba(232,164,40,.35));
}
.brand__accent::before{
	content: "Thu Hà";
	position: absolute;
	inset: 0;
	background: inherit;
	background-size: inherit;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: blur(6px);
	opacity: .45;
	z-index: -1;
	animation: brandGradient 2.8s ease-in-out infinite;
}
.brand__accent::after{
	content: "";
	position: absolute;
	left: -2%;
	right: -2%;
	bottom: -4px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--tgh-gold), #ffe082, var(--tgh-gold), transparent);
	background-size: 200% 100%;
	transform: scaleX(.5);
	opacity: .75;
	animation: brandUnderline 2.8s ease-in-out infinite;
}
.brand__tag,
.brand__text small{
	color: var(--tgh-muted);
	font-size: .72rem;
	font-weight: 500;
	white-space: nowrap;
	letter-spacing: .02em;
	animation: brandTagFade 3s ease-in-out infinite;
}
.brand:hover .brand__accent,
.brand:focus-visible .brand__accent{
	animation-duration: 1.6s;
	filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)) drop-shadow(0 3px 14px rgba(232,164,40,.55));
}
.brand:hover .brand__accent::after,
.brand:focus-visible .brand__accent::after{
	transform: scaleX(1);
	opacity: 1;
	animation-duration: 1.2s;
}
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark{
	border-color: rgba(232,164,40,.55);
	box-shadow:
		0 0 0 4px rgba(232,164,40,.12),
		0 10px 24px rgba(26,143,99,.22);
	transform: scale(1.04);
	animation: none;
}

@keyframes brandFloat{
	0%, 100%{ transform: translateY(0) scale(1); }
	50%{ transform: translateY(-4px) scale(1.03); }
}
@keyframes brandSheen{
	0%, 55%, 100%{ transform: translateX(-120%) skewX(-12deg); opacity: 0; }
	62%{ opacity: 1; }
	78%{ transform: translateX(120%) skewX(-12deg); opacity: 0; }
}
@keyframes brandGradient{
	0%, 100%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
}
@keyframes brandPulse{
	0%, 100%{ box-shadow: 0 0 0 0 rgba(26,143,99,.22), 0 6px 18px rgba(26,143,99,.18); }
	50%{ box-shadow: 0 0 0 6px rgba(26,143,99,.08), 0 8px 22px rgba(26,143,99,.24); }
}
@keyframes brandRing{
	to{ transform: rotate(360deg); }
}
@keyframes brandLineGlow{
	0%, 100%{ opacity: .88; letter-spacing: .12em; }
	50%{ opacity: 1; letter-spacing: .14em; color: var(--tgh-green) !important; }
}
@keyframes brandUnderline{
	0%, 100%{ background-position: 0% 50%; transform: scaleX(.45); opacity: .65; }
	50%{ background-position: 100% 50%; transform: scaleX(.85); opacity: .95; }
}
@keyframes brandTagFade{
	0%, 100%{ opacity: .78; }
	50%{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	.brand,
	.brand__logo,
	.brand__mark,
	.brand__mark::before,
	.brand__mark::after,
	.brand__line,
	.brand__accent,
	.brand__accent::before,
	.brand__accent::after,
	.brand__tag{
		animation: none !important;
	}
	.brand__accent::after{
		transform: scaleX(.7);
		opacity: .8;
	}
}

.site-search{
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	max-width: 340px;
	min-width: 140px;
	margin-left: auto;
	order: 3;
}
.site-search form{
	display: flex;
	align-items: center;
	width: 100%;
	background: var(--tgh-bg);
	border: 1px solid var(--tgh-border);
	border-radius: 999px;
	padding: 3px 3px 3px 14px;
	transition: border-color var(--tgh-transition), box-shadow var(--tgh-transition);
}
.site-search form:focus-within{
	border-color: var(--tgh-green);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(26,143,99,.12);
}
.site-search input[type="search"]{
	background: transparent;
	border: 0;
	outline: none;
	color: var(--tgh-ink);
	font-size: .9rem;
	font-family: var(--tgh-font);
	width: 100%;
	min-width: 0;
}
.site-search input[type="search"]::placeholder{ color: var(--tgh-muted); }
.site-search button.icon{
	border: 0;
	background: var(--tgh-green);
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.site-search button.icon:hover{ background: var(--tgh-green-dark); }
.site-search .c-search::before{ content: "\1F50D"; font-size: .8em; }

.topbar__cta{
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	order: 4;
}

.btn-cta{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border-radius: 999px;
	font-size: .86rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	font-family: var(--tgh-font);
	box-shadow: none !important;
	transition: background-color var(--tgh-transition), color var(--tgh-transition), box-shadow var(--tgh-transition);
}
.btn-cta__icon{ font-size: 1.05em; line-height: 1; }
.btn-cta--tel{
	background: var(--tgh-gold);
	color: #1a2e24;
	box-shadow: 0 4px 12px rgba(232,164,40,.28) !important;
}
.btn-cta--tel:hover{ background: var(--tgh-gold-light); color: #1a2e24; }
.btn-cta--zalo{
	background: var(--tgh-green-soft);
	color: var(--tgh-green-dark);
	border: 1px solid transparent;
	padding: 8px 12px;
}
.btn-cta--zalo img{ border-radius: 50%; background: #fff; width: 16px; height: 16px; }
.btn-cta--zalo:hover{ background: var(--tgh-green); color: #fff; }

/* Menu toggle — desktop hidden, mobile ALWAYS visible */
#smart_nav.nav-toggle,
button#smart_nav,
.site-header #smart_nav{
	display: none !important;
	appearance: none;
	-webkit-appearance: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 42px;
	padding: 0 10px;
	margin: 0;
	background: var(--tgh-green) !important;
	border: 0 !important;
	border-radius: 10px;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	float: none !important;
	z-index: 700;
	box-sizing: border-box;
	flex-shrink: 0;
	cursor: pointer;
	order: 1;
	box-shadow: 0 4px 12px rgba(26,143,99,.25);
}
.nav-toggle__bars{
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 18px;
}
.nav-toggle__bars i{
	display: block;
	width: 18px;
	height: 2px;
	background: #fff !important;
	border-radius: 2px;
}
.nav-toggle__text{
	display: none;
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	font-family: var(--tgh-font);
}

.mainnav,
.header_btm{
	background: #fff !important;
	border-top: 1px solid var(--tgh-border);
}
.mainnav .wrap{ overflow: visible; }

#nav_menu{
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	gap: 0;
	float: none !important;
	width: 100%;
	list-style: none;
}
#nav_menu > li{
	padding: 0;
	float: none !important;
	position: relative;
	flex: 1 1 auto;
	text-align: center;
	min-width: 0;
}
#nav_menu > li > a{
	float: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: auto !important;
	line-height: 1.3 !important;
	padding: 12px 6px !important;
	color: var(--tgh-ink) !important;
	font-weight: 600;
	font-size: .82rem;
	background: transparent !important;
	white-space: nowrap;
	text-transform: none;
	position: relative;
	font-family: var(--tgh-font);
}
#nav_menu .nav-caret{ font-size: .65em; opacity: .45; }
#nav_menu li:hover > a,
#nav_menu .active > a{ color: var(--tgh-green) !important; }
#nav_menu > li > a::after{
	content: "";
	position: absolute;
	left: 18%; right: 18%; bottom: 4px;
	height: 2px;
	background: var(--tgh-green);
	transform: scaleX(0);
	transition: transform var(--tgh-transition);
	border-radius: 2px;
}
#nav_menu > li:hover > a::after,
#nav_menu > li.active > a::after{ transform: scaleX(1); }
#nav_menu ul{
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: var(--tgh-radius-sm);
	min-width: 220px;
	z-index: 600;
	text-align: left;
	box-shadow: var(--tgh-shadow);
	overflow: hidden;
}
#nav_menu ul a{
	color: var(--tgh-ink) !important;
	padding: 10px 14px !important;
	font-weight: 500;
	font-size: .9rem;
	float: none !important;
	height: auto !important;
	line-height: 1.4 !important;
	background: transparent !important;
	white-space: normal;
}
#nav_menu ul a:hover{
	background: var(--tgh-green-soft) !important;
	color: var(--tgh-green) !important;
}

@media only screen and (min-width: 1101px){
	#smart_nav.nav-toggle,
	button#smart_nav,
	.site-header #smart_nav{ display: none !important; }
	.mainnav{ display: block !important; }
}

@media only screen and (max-width: 1100px){
	.mainnav,
	.header_btm{ display: none !important; }
	#smart_nav.nav-toggle,
	button#smart_nav,
	.site-header #smart_nav{
		display: inline-flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
	.brand__text small,
	.brand__tag{ display: none; }
	.site-search{ max-width: 200px; }
	.nav-toggle__text{ display: inline; }
}

@media only screen and (max-width: 720px){
	.site-search{ display: none !important; }
	.btn-search-mobile{
		display: inline-flex !important;
	}
	.btn-cta--zalo .btn-cta__label,
	.btn-cta--tel .btn-cta__label{ display: none; }
	.btn-cta{ padding: 9px 10px; }
	.site-header__inner{ gap: 8px; padding: 10px 0; }
	.brand{ flex: 1 1 auto; min-width: 0; }
	.brand__mark{ width: 42px; height: 42px; border-radius: 12px; }
	.brand__logo,
	.brand img{ width: 28px; height: 28px; }
	.brand__line{
		font-size: .68rem;
		letter-spacing: .1em;
	}
	.brand__accent{
		font-size: 1.12rem;
	}
	.brand__name{
		gap: 4px;
		overflow: hidden;
	}
	.nav-toggle__text{ display: none; }
	#smart_nav.nav-toggle{ width: 42px; padding: 0; }
}

/* Mobile search button + panel */
.btn-search-mobile{
	display: none;
	appearance: none;
	-webkit-appearance: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--tgh-border);
	border-radius: 10px;
	background: var(--tgh-green-soft);
	color: var(--tgh-green);
	font-size: 1.15rem;
	cursor: pointer;
	flex-shrink: 0;
}
.btn-search-mobile:hover,
html.search-open .btn-search-mobile{
	background: var(--tgh-green);
	color: #fff;
	border-color: var(--tgh-green);
}
.mobile-search{
	display: none;
	background: #fff;
	border-bottom: 1px solid var(--tgh-border);
	padding: 10px 0 12px;
	box-shadow: 0 8px 20px rgba(36,51,44,.08);
}
.mobile-search.is-open,
.mobile-search:not([hidden]){
	display: block;
}
.mobile-search[hidden]{ display: none !important; }
.mobile-search__form{
	display: flex;
	gap: 8px;
	align-items: center;
}
.mobile-search__form input[type="search"]{
	flex: 1;
	min-width: 0;
	height: 44px;
	border: 1px solid var(--tgh-border);
	border-radius: 999px;
	padding: 0 16px;
	font-size: 1rem;
	font-family: var(--tgh-font);
	background: var(--tgh-bg);
	outline: none;
}
.mobile-search__form input[type="search"]:focus{
	border-color: var(--tgh-green);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(26,143,99,.12);
}
.mobile-search__form button{
	appearance: none;
	border: 0;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--tgh-green);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	font-family: var(--tgh-font);
	cursor: pointer;
	flex-shrink: 0;
}
.tgh-drawer__search{
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}
.tgh-drawer__search input{
	flex: 1;
	min-width: 0;
	height: 40px;
	border: 1px solid var(--tgh-border);
	border-radius: 8px;
	padding: 0 12px;
	font-family: var(--tgh-font);
}
.tgh-drawer__search button{
	appearance: none;
	border: 0;
	background: var(--tgh-green);
	color: #fff;
	border-radius: 8px;
	padding: 0 14px;
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================================================
   MOBILE DRAWER — body-level, high z-index
   ========================================================================== */
#drawer-backdrop.drawer-backdrop,
.drawer-backdrop{
	position: fixed !important;
	inset: 0;
	background: rgba(20,28,24,.45);
	z-index: 10040 !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility .22s ease;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
html.drawer-open #drawer-backdrop,
#drawer-backdrop.is-open,
.drawer-backdrop.is-open{
	opacity: 1 !important;
	visibility: visible !important;
}
#drawer-backdrop[hidden]{ display: none !important; }
html.drawer-open #drawer-backdrop[hidden],
#drawer-backdrop.is-open[hidden]{ display: block !important; }

#tgh-drawer.tgh-drawer,
.tgh-drawer{
	display: block !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	width: min(88vw, 330px) !important;
	max-width: 330px;
	z-index: 10050 !important;
	background: #fff !important;
	color: var(--tgh-ink);
	box-shadow: 8px 0 32px rgba(0,0,0,.18);
	transform: translate3d(-110%, 0, 0);
	transition: transform .28s ease;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--tgh-font);
	visibility: visible !important;
}
html.drawer-open #tgh-drawer,
#tgh-drawer.is-open,
.tgh-drawer.is-open{
	transform: translate3d(0, 0, 0) !important;
}

.tgh-drawer__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--tgh-green);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 2;
}
.tgh-drawer__head strong{ font-size: 1rem; font-weight: 600; }
.tgh-drawer__close{
	appearance: none;
	border: 0;
	background: rgba(255,255,255,.2);
	color: #fff;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.tgh-drawer__list{
	list-style: none;
	margin: 0;
	padding: 6px 0 16px;
}
.tgh-drawer__list > li{
	position: relative;
	border-bottom: 1px solid var(--tgh-border);
}
.tgh-drawer__list > li > a{
	display: block;
	padding: 14px 52px 14px 18px;
	color: var(--tgh-ink) !important;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}
.tgh-drawer__list > li > a:hover{
	background: var(--tgh-green-soft) !important;
	color: var(--tgh-green) !important;
}
.tgh-drawer__subtoggle{
	position: absolute;
	right: 10px;
	top: 9px;
	width: 34px;
	height: 34px;
	border: 1px solid var(--tgh-border);
	border-radius: 8px;
	background: #fff;
	color: var(--tgh-green);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}
.tgh-drawer__list li.has-children > ul{
	display: none;
	background: #f7faf8;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tgh-drawer__list li.has-children.is-open > ul{ display: block; }
.tgh-drawer__list li.has-children > ul a{
	display: block;
	padding: 11px 18px 11px 28px;
	font-weight: 500;
	font-size: .9rem;
	color: var(--tgh-muted) !important;
}
.tgh-drawer__foot{
	padding: 16px 18px 28px;
	border-top: 1px solid var(--tgh-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tgh-drawer__foot a{
	color: var(--tgh-green);
	font-weight: 600;
	font-size: .92rem;
}
.tgh-drawer__tel{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: var(--tgh-gold);
	color: #1a2e24 !important;
	border-radius: 10px;
	font-weight: 700 !important;
}

html.drawer-open,
html.drawer-open body{ overflow: hidden; }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero{
	position: relative;
	overflow: hidden;
	background: var(--tgh-bg);
	line-height: 0;
}
.hero img{
	display: block;
	width: 100%;
	height: auto;
}

.image1_of_3{
	background: #fff;
	border-radius: var(--tgh-radius);
	box-shadow: var(--tgh-shadow-sm);
	transition: transform var(--tgh-transition), box-shadow var(--tgh-transition);
	overflow: hidden;
}
.image1_of_3:hover{ transform: translateY(-3px); box-shadow: var(--tgh-shadow); }
.image1_of_3 img{ width: 100%; }
.image1_of_3 span.tag{
	background: var(--tgh-green);
	color: #fff;
	border-radius: 999px;
	font-size: .95rem !important;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none !important;
	box-shadow: none;
}
.image1_of_3 span.tag:hover{ background: var(--tgh-green-dark); }

.top_main h1,
.top_main h2{
	font-size: 1.25rem;
	font-weight: 700;
	font-family: var(--tgh-font);
}
.top_main h1 a,
.top_main h2 a{ color: var(--tgh-ink) !important; }
.top_main a[href]:not(h1 a):not(h2 a){
	color: var(--tgh-green);
	border-color: var(--tgh-green);
	border-radius: 999px;
	font-weight: 600;
	font-size: .9rem;
}
.top_main a[href]:not(h1 a):not(h2 a):hover{
	background: var(--tgh-green);
	color: #fff;
}

.grid1_of_3{
	filter: none;
	box-shadow: var(--tgh-shadow-sm);
	border-radius: var(--tgh-radius);
	background: #fff;
	border: 1px solid var(--tgh-border);
	transition: transform var(--tgh-transition), box-shadow var(--tgh-transition);
}
.grid1_of_3:hover{
	transform: translateY(-4px);
	box-shadow: var(--tgh-shadow);
}
.grid1_of_3 .img{ border-radius: var(--tgh-radius) var(--tgh-radius) 0 0; }
.grid1_of_3 .img img{ transition: transform .35s ease; }
.grid1_of_3:hover .img img{ transform: scale(1.04); }
.grid1_of_3 h2{
	color: var(--tgh-ink) !important;
	font-weight: 600;
	font-size: .92rem !important;
	font-family: var(--tgh-font);
	line-height: 1.4;
}
.grid1_of_3 a:hover h2,
.grid1_of_3 a:hover h3{ color: var(--tgh-green) !important; }
.price{
	background: var(--tgh-green-soft);
	color: var(--tgh-green-dark);
	font-weight: 700;
	border-radius: 0 0 0 var(--tgh-radius);
}
.price1.bg{ background: var(--tgh-gold) !important; color: #fff; }

.grid1_of_2.bg{ background: var(--tgh-green-soft); border-radius: var(--tgh-radius); }
.date1 h4{ background: var(--tgh-green) !important; }
.date_text h4 a:hover{ color: var(--tgh-green) !important; }
.grid1_of_2 h2 a,
.date_text h4 a{ color: var(--tgh-ink); font-weight: 600; }

@media only screen and (max-width: 800px){
	.grid1_of_3{
		width: 48% !important;
		height: auto !important;
		min-height: 0;
		margin: 1% !important;
	}
	.grid1_of_3 .img{ height: auto !important; }
	.grid1_of_3 h2{ margin-left: 12px !important; margin-right: 12px; padding-bottom: 12px; }
}
@media only screen and (max-width: 520px){
	.grid1_of_3{
		width: 100% !important;
		float: none !important;
		margin: 0 0 14px !important;
	}
	.image1_of_3{ width: 100% !important; float: none !important; margin: 0 0 12px !important; }
}

/* ==========================================================================
   FOOTER — #f7f7f7 light gray
   ========================================================================== */
.site-footer{
	background: #f7f7f7;
	margin-top: 2.5em;
	font-family: var(--tgh-font);
	border-top: 1px solid #e8e8e8;
}
.footer_top{
	background: #f7f7f7 !important;
	border-top: 0;
	padding: 2.2em 0 1.5em;
}
.footer_top .footer{ float: none; width: auto; }
.footer_top .span_of_3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	float: none !important;
	width: 100% !important;
}
.footer_top .span1_of_3{
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}
.footer_top .span1_of_3 h3{
	color: var(--tgh-ink) !important;
	border-bottom: 2px solid var(--tgh-green);
	padding-bottom: 10px;
	margin: 0 0 12px;
	font-size: 1rem !important;
	font-weight: 700;
	line-height: 1.4;
}
.footer_top .span1_of_3 p,
.footer_top .span1_of_3 address,
.footer_top .span1_of_3 div{
	color: #555 !important;
	font-style: normal;
	line-height: 1.65;
	font-size: .9rem;
}
.footer_top .span1_of_3 a{ color: var(--tgh-green) !important; }
.footer_top .span1_of_3 a:hover{ color: var(--tgh-green-dark) !important; }
.footer_top .span1_of_3 img{ max-width: 100%; height: auto; }
.footer_top .footer-badges{ margin: 10px 0 0; }

.footer_mid{
	background: #f0f0f0 !important;
	border-top: 1px solid #e4e4e4;
	padding: 1.6em 0;
}
.footer_mid .footer{ float: none; }
.footer_mid .span_of_3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	float: none !important;
	width: 100% !important;
}
.footer_mid .span1_of_3{
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.footer_mid .h_footer{
	color: var(--tgh-ink) !important;
	font-size: .9rem !important;
	font-weight: 700;
	margin: 0 0 12px !important;
	padding: 0 0 8px !important;
	text-align: left !important;
	border-bottom: 1px solid #ddd;
}
.footer_mid dl.product_footer{ margin: 0; }
.footer_mid dl.product_footer dd{ margin: 0 0 8px; }
.footer_mid dl.product_footer dd a{
	color: #555 !important;
	font-size: .9rem;
}
.footer_mid dl.product_footer dd a:hover{ color: var(--tgh-green) !important; }
.footer_mid .fn{
	display: inline-block;
	margin: 0 8px 8px 0;
	vertical-align: middle;
}
.footer_mid .fn img{
	border-radius: 6px;
	background: #fff;
	padding: 4px;
	border: 1px solid #e5e5e5;
}

.footer_bg{
	background: #ebebeb !important;
	border-top: 1px solid #e0e0e0;
	padding: 1em 0;
}
.footer_bg .footer{ float: none; text-align: center; }
.footer_bg p{
	text-align: center;
	color: #666 !important;
	margin: 0;
	font-size: .86rem;
}

@media only screen and (max-width: 900px){
	.footer_top .span_of_3,
	.footer_mid .span_of_3{ grid-template-columns: 1fr; }
}

/* Support box — white + attractive motion */
@keyframes tgh-support-pulse {
	0%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,.14), 0 0 0 0 rgba(26,143,99,.35); }
	50% { box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 0 0 10px rgba(26,143,99,0); }
}
@keyframes tgh-support-bob {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(6px); }
}
@keyframes tgh-support-glow {
	0%, 100% { border-left-color: var(--tgh-green); }
	50% { border-left-color: var(--tgh-gold); }
}
div.support{
	background: #fff !important;
	color: var(--tgh-ink);
	border-radius: 0 16px 16px 0;
	box-shadow: 0 10px 28px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
	filter: none;
	padding: 12px 16px;
	border: 1px solid #ececec;
	border-left: 4px solid var(--tgh-green);
	transition: box-shadow .22s ease, transform .22s ease;
	animation: tgh-support-pulse 2.4s ease-in-out infinite, tgh-support-bob 3.2s ease-in-out infinite, tgh-support-glow 2.8s ease-in-out infinite;
	will-change: transform, box-shadow;
}
div.support:hover{
	animation-play-state: paused;
	box-shadow: 0 16px 40px rgba(26,143,99,.22), 0 4px 14px rgba(0,0,0,.1);
	transform: translateX(8px) scale(1.02);
}
.support_title{
	color: var(--tgh-green) !important;
	font-weight: 700;
	font-size: .9rem;
	animation: tgh-support-glow 2.8s ease-in-out infinite;
}
.support_phone a{
	color: var(--tgh-ink) !important;
	font-weight: 700;
}
.support_phone{ transition: transform var(--tgh-transition); }
.support_phone:hover{ transform: translateX(4px); }

.product-page__inner{
	text-align: left !important;
	padding-top: 1em !important;
}
.product-page__intro{
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 12px;
	padding: 1em 1.2em;
	margin: 0 0 1.4em;
	color: var(--tgh-muted);
	font-size: .95rem;
	line-height: 1.65;
}
.product-page__grid{ margin-bottom: 1.4em; }

@media (prefers-reduced-motion: reduce){
	div.support,
	.support_title{
		animation: none !important;
	}
}

.facebook_chat_box{ border: 1px solid var(--tgh-border); }
.amp_fb_icon{ background: var(--tgh-gold); border-radius: 50%; }

.cd-breadcrumb li a,
.cd-breadcrumb li em{ color: var(--tgh-muted); font-size: .9rem; }
.cd-breadcrumb li.current em{ color: var(--tgh-green); font-weight: 600; }
.cd-breadcrumb li a:hover{ color: var(--tgh-green); }

.main_bg{ background: var(--tgh-bg); }
.det_nav li a{ background: var(--tgh-green) !important; box-shadow: none; }
.det_nav li a:hover{ background: var(--tgh-green-dark) !important; }
.left_sidebar h4{ background: var(--tgh-green) !important; font-weight: 600; }
.left_text p a:hover,
.span1_of_3 p a:hover,
.f_nav1 li a:hover,
.copy p a:hover{ color: var(--tgh-gold-dark) !important; }
.left_text span{ color: var(--tgh-green) !important; }

.registration_form input[type="submit"],
.btn form input[type="button"],
.contact-form input[type="submit"],
.btn_form form input[type="submit"],
.read_more a{
	background: var(--tgh-green) !important;
	border-color: var(--tgh-green) !important;
	border-radius: 999px !important;
	font-family: var(--tgh-font);
	font-weight: 600;
}
.registration_form input[type="submit"]:hover,
.btn form input[type="button"]:hover,
.contact-form input[type="submit"]:hover,
.btn_form form input[type="submit"]:hover,
.read_more a:hover{
	background: var(--tgh-green-dark) !important;
	border-color: var(--tgh-green-dark) !important;
}

@media (prefers-reduced-motion: reduce){
	.grid1_of_3, .image1_of_3, .support_phone, .grid1_of_3 .img img,
	.mobile-drawer, .drawer-backdrop, .home-product, .tgh-drawer{ transition: none !important; }
}

/* ==========================================================================
   NAV DROPDOWN — hide until hover (fix overlap)
   ========================================================================== */
#nav_menu > li > ul{
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	transform: translateX(-50%);
	min-width: 220px;
	z-index: 800;
}
#nav_menu > li:hover > ul,
#nav_menu > li:focus-within > ul{
	display: block !important;
}

/* ==========================================================================
   HOME — quick links + product grids (no float shift)
   ========================================================================== */
.home-quick{
	background: #f7f7f7;
	padding: 1.4em 0 0.4em;
}
.home-quick__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.home-quick__item{
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--tgh-border);
	box-shadow: var(--tgh-shadow-sm);
	text-decoration: none;
}
.home-quick__item img{
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}
.home-quick__item span{
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	background: rgba(26,143,99,.92);
	color: #fff;
	font-weight: 600;
	font-size: .92rem;
	padding: 8px 16px;
	border-radius: 999px;
	white-space: nowrap;
}
.home-quick__item:hover span{ background: var(--tgh-gold); color: #1a2e24; }

.home-main{ padding-top: 8px !important; }
.home-section{ margin: 0 0 2em; }
.home-section__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 1em;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--tgh-green-soft);
}
.home-section__head h2{
	margin: 0;
	font-size: 1.3rem;
	font-weight: 700;
	font-family: var(--tgh-font);
}
.home-section__head h2 a{
	color: var(--tgh-ink) !important;
	border: 0 !important;
	padding: 0 !important;
	float: none !important;
	font-size: inherit !important;
}
.home-section__more{
	color: var(--tgh-green) !important;
	font-weight: 600;
	font-size: .9rem;
	border: 1px solid var(--tgh-green) !important;
	border-radius: 999px !important;
	padding: 6px 14px !important;
	float: none !important;
}
.home-section__more:hover{
	background: var(--tgh-green) !important;
	color: #fff !important;
}

.home-product-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	float: none !important;
	width: 100% !important;
}
.home-product{
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--tgh-shadow-sm);
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	position: relative;
	transition: transform .22s ease, box-shadow .22s ease;
}
.home-product:hover{
	transform: translateY(-3px);
	box-shadow: var(--tgh-shadow);
}
.home-product a{ display: block; text-decoration: none; color: inherit; }
.home-product__media{
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f0f3f1;
}
.home-product__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.home-product__empty{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--tgh-green);
	font-weight: 600;
}
.home-product__badge{
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--tgh-green);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}
.home-product h3{
	margin: 0;
	padding: 12px 12px 8px;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tgh-ink);
	min-height: 2.8em;
}
.home-product__price{
	display: inline-block;
	margin: 0 12px 14px;
	padding: 6px 12px;
	background: var(--tgh-green-soft);
	color: var(--tgh-green-dark);
	font-size: .82rem;
	font-weight: 700;
	border-radius: 999px;
}

.home-news{
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 20px;
	margin-top: 1em;
}
.home-news__featured{
	display: grid;
	gap: 16px;
}
.home-news__featured article{
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 12px;
	padding: 1.1em 1.2em;
}
.home-news__featured h2{
	margin: 0 0 8px;
	font-size: 1.1rem;
	font-weight: 700;
}
.home-news__featured h2 a{ color: var(--tgh-ink); }
.home-news__featured h2 a:hover{ color: var(--tgh-green); }
.home-news__featured p{ margin: 0; color: var(--tgh-muted); font-size: .92rem; }
.home-news__side{
	background: var(--tgh-green-soft);
	border-radius: 12px;
	padding: 1em;
}
.home-news__mini{
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(26,143,99,.15);
	align-items: flex-start;
}
.home-news__mini:last-child{ border-bottom: 0; }
.home-news__mini-thumb{
	display: block;
	flex: 0 0 88px;
	width: 88px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
}
.home-news__mini img,
.home-news__mini-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 10px;
	display: block;
}
.home-news__mini-body{ min-width: 0; flex: 1; }
.home-news__mini h3{ margin: 0 0 4px; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.home-news__mini h3 a{ color: var(--tgh-ink); }
.home-news__mini p{
	margin: 0;
	font-size: .85rem;
	color: var(--tgh-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media only screen and (max-width: 1024px){
	.home-quick__grid,
	.home-product-grid{ grid-template-columns: repeat(2, 1fr); }
	.home-news{ grid-template-columns: 1fr; }
}
@media only screen and (max-width: 720px){
	.home-news__mini{
		gap: 14px;
		padding: 14px 0;
	}
	.home-news__mini-thumb{
		flex-basis: 96px;
		width: 96px;
		border-radius: 12px;
	}
	.home-news__mini img,
	.home-news__mini-thumb img{
		border-radius: 12px;
	}
	.home-news__mini h3{ font-size: 1.02rem; line-height: 1.35; }
	.home-news__mini p{
		font-size: .9rem;
		-webkit-line-clamp: 3;
	}
	.home-news__side{ padding: 1em 1.05em; }
}
@media only screen and (max-width: 560px){
	.home-quick__grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
	.home-quick__item img{ height: 120px; }
	.home-quick__item span{ font-size: .78rem; padding: 6px 10px; bottom: 10px; }
	.home-product-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
	.home-section__head h2{ font-size: 1.1rem; }
	.home-news__mini{
		flex-direction: row;
		gap: 12px;
	}
	.home-news__mini-thumb{
		flex-basis: 84px;
		width: 84px;
		border-radius: 10px;
	}
	.home-news__mini img,
	.home-news__mini-thumb img{
		border-radius: 10px;
	}
}

/* ==========================================================================
   NEWS LIST + ARTICLE DETAIL — professional news layout
   ========================================================================== */
.news-page,
.article-page{
	background: var(--tgh-bg);
	padding-bottom: 2em;
}
.news-page__inner,
.article-page__inner{
	text-align: left !important;
	background: transparent;
	padding-top: 1em !important;
}
.news-breadcrumb{ margin-bottom: 1em; }

.news-page__head{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 1.4em;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--tgh-green);
	position: static !important;
	top: auto !important;
	z-index: auto !important;
	background: transparent !important;
	box-shadow: none !important;
}
.news-page__title{
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--tgh-ink);
	font-family: var(--tgh-font);
	line-height: 1.3;
	text-transform: none;
}
.news-cats{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	position: static !important;
}
.news-cats a{
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--tgh-border);
	color: var(--tgh-muted) !important;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	margin: 0 !important;
	float: none !important;
}
.news-cats a:hover{
	background: var(--tgh-green);
	border-color: var(--tgh-green);
	color: #fff !important;
}

.news-kicker{
	display: inline-block;
	background: var(--tgh-green-soft);
	color: var(--tgh-green-dark);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
	text-decoration: none;
}

.news-featured{
	display: grid;
	grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
	column-gap: 28px;
	row-gap: 14px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 14px;
	overflow: hidden;
	padding: 20px 22px;
	margin-bottom: 1.4em;
	box-shadow: var(--tgh-shadow-sm);
}
.news-featured__media{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 220px;
	margin: 0;
	padding: 8px;
	border-radius: 12px;
	border: 1px solid var(--tgh-border);
	background:
		radial-gradient(circle at 28% 18%, rgba(240,184,74,.12), transparent 52%),
		linear-gradient(165deg, #f8fbf9 0%, #eef6f1 100%);
	overflow: hidden;
	flex-shrink: 0;
}
.news-featured__media img{
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 8px;
}
.news-featured__body{
	padding: 2px 4px 2px 22px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-left: 1px solid var(--tgh-border);
}
.news-featured__body .news-kicker{
	margin-bottom: 8px;
}
.news-featured__body h2{
	margin: 0 0 10px;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.35;
}
.news-featured__body h2 a{ color: var(--tgh-ink); text-decoration: none; }
.news-featured__body h2 a:hover{ color: var(--tgh-green); }
.news-featured__body p{
	margin: 0 0 14px;
	color: var(--tgh-muted);
	font-size: .95rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-readmore{
	display: inline-flex;
	align-items: center;
	color: #fff !important;
	background: var(--tgh-green);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	border: 0 !important;
	float: none !important;
}
.news-readmore:hover{ background: var(--tgh-green-dark); color: #fff !important; }
.news-readmore--sm{
	padding: 5px 12px;
	font-size: .8rem;
	background: transparent;
	color: var(--tgh-green) !important;
	border: 1px solid var(--tgh-green) !important;
}
.news-readmore--sm:hover{
	background: var(--tgh-green) !important;
	color: #fff !important;
}

.news-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 1.6em;
}
.news-card{
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--tgh-shadow-sm);
}
.news-card__media{
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--tgh-green-soft);
	flex-shrink: 0;
}
.news-card__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.news-card__body{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 14px 16px;
	flex: 1 1 auto;
	min-height: 0;
}
.news-card h3{
	margin: 0;
	padding: 0;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.4;
}
.news-card h3 a{ color: var(--tgh-ink); text-decoration: none; }
.news-card h3 a:hover{ color: var(--tgh-green); }
.news-card p{
	margin: 0;
	padding: 0;
	color: var(--tgh-muted);
	font-size: .85rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-list{
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 14px;
	overflow: hidden;
}
.news-list__item{
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--tgh-border);
	align-items: start;
}
.news-list__item:last-child{ border-bottom: 0; }
.news-list__thumb{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: var(--tgh-green-soft);
}
.news-list__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 10px;
	display: block;
}
.news-list__content{
	min-width: 0;
	padding-top: 2px;
}
.news-list__content h2{
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
}
.news-list__content h2 a{ color: var(--tgh-ink); text-decoration: none; }
.news-list__content h2 a:hover{ color: var(--tgh-green); }
.news-list__content p{
	margin: 0 0 10px;
	color: var(--tgh-muted);
	font-size: .9rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-paging{ margin-top: 1.4em; text-align: center; }

/* Article detail */
.article-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
}
.article{
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 14px;
	padding: 1.6em 1.8em 2em;
	box-shadow: var(--tgh-shadow-sm);
}
.article__header{ margin-bottom: 1.2em; }
.article__title{
	margin: 8px 0 12px;
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--tgh-ink);
	font-family: var(--tgh-font);
}
.article__meta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	color: var(--tgh-muted);
	font-size: .88rem;
}
.article__meta a{ color: var(--tgh-green); font-weight: 600; }
.article__hero{ margin: 0 0 1.2em; }
.article__hero-frame{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid var(--tgh-border);
	background:
		radial-gradient(circle at 28% 18%, rgba(240,184,74,.14), transparent 52%),
		linear-gradient(165deg, #f8fbf9 0%, #eef6f1 55%, #e8f2ec 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
	overflow: hidden;
}
.article__hero > img,
.article__hero .img_new_detail,
.article__hero-frame img,
#img_primary{
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(72vh, 760px);
	margin: 0 auto;
	object-fit: contain;
	object-position: center center;
	border-radius: 10px;
	background: transparent;
}
.article__thumbs{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.article__thumb{
	appearance: none;
	border: 2px solid transparent;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: #fff;
}
.article__thumb img{ display: block; width: 72px; height: 72px; object-fit: cover; }
.article__thumb.is-active,
.article__thumb:hover{ border-color: var(--tgh-green); }
.article__lead{
	font-size: 1.05rem;
	line-height: 1.7;
	color: #334039;
	background: var(--tgh-green-soft);
	border-left: 3px solid var(--tgh-green);
	padding: 14px 16px;
	margin: 0 0 1.4em;
	border-radius: 0 10px 10px 0;
}
.article__lead--cta strong{ color: #c0392b; }
.article__body{
	color: #24332c !important;
	font-size: 1.02rem;
	line-height: 1.8 !important;
}
.article__body img{ max-width: 100%; height: auto; border-radius: 8px; }
.article__body p{ margin: 0 0 1em; }
.article__footer{
	margin-top: 1.6em;
	padding-top: 1em;
	border-top: 1px solid var(--tgh-border);
}
.article__source{ margin-bottom: 10px; font-size: .92rem; }
.article__comments{ margin-top: 1.4em; }

.article-aside{
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 14px;
	padding: 1.1em;
	box-shadow: var(--tgh-shadow-sm);
	position: sticky;
	top: 90px;
}
.article-aside__title{
	margin: 0 0 12px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tgh-ink);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--tgh-green);
}
.article-aside__item{
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--tgh-border);
}
.article-aside__item:last-of-type{ border-bottom: 0; }
.article-aside__thumb{
	display: block;
	width: 88px;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: #f0f3f1;
	flex-shrink: 0;
}
.article-aside__thumb img,
.article-aside__placeholder{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	border-radius: 10px;
	display: block;
	background: #f0f3f1;
}
.article-aside__placeholder{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tgh-green-soft);
	color: var(--tgh-green);
	font-size: .8rem;
	font-weight: 700;
}
.article-aside__item h3{
	margin: 0;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.4;
}
.article-aside__item h3 a{ color: var(--tgh-ink); text-decoration: none; }
.article-aside__item h3 a:hover{ color: var(--tgh-green); }
.article-aside__cta{
	margin-top: 14px;
	padding: 14px;
	background: var(--tgh-green-soft);
	border-radius: 12px;
	text-align: center;
}
.article-aside__cta p{ margin: 0 0 8px; font-weight: 600; color: var(--tgh-ink); }
.article-aside__cta > a{
	display: block;
	color: var(--tgh-green);
	font-weight: 700;
	margin-bottom: 8px;
}
.article-aside__zalo{
	display: inline-flex !important;
	justify-content: center;
	background: var(--tgh-green);
	color: #fff !important;
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 600 !important;
}

@media only screen and (max-width: 980px){
	.news-featured{
		grid-template-columns: 132px minmax(0, 1fr);
		column-gap: 20px;
		padding: 16px 18px;
		align-items: start;
	}
	.news-featured__media{
		max-width: none;
		margin: 0;
		padding: 6px;
	}
	.news-featured__body{
		padding: 0 0 0 16px;
		border-left: 1px solid var(--tgh-border);
	}
	.news-featured__body h2{ font-size: 1.15rem; }
	.news-featured__body p{ -webkit-line-clamp: 3; margin-bottom: 12px; }
	.news-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.news-card__body{ padding: 12px 12px 14px; gap: 6px; }
	.news-list__item{ grid-template-columns: 120px minmax(0, 1fr); }
	.article-layout{ grid-template-columns: 1fr; }
	.article-aside{ position: static; }
}
@media only screen and (max-width: 640px){
	.news-page__title{ font-size: 1.4rem; }
	.news-featured{
		grid-template-columns: 92px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 10px;
		padding: 14px;
		align-items: start;
	}
	.news-featured__media{
		padding: 5px;
		border-radius: 10px;
	}
	.news-featured__body{
		padding: 0 0 0 12px;
		border-left: 1px solid var(--tgh-border);
		min-width: 0;
	}
	.news-featured__body .news-kicker{
		margin-bottom: 6px;
	}
	.news-featured__body h2{
		font-size: 1.02rem;
		margin-bottom: 8px;
		line-height: 1.35;
	}
	.news-featured__body p{
		-webkit-line-clamp: 2;
		font-size: .86rem;
		line-height: 1.5;
		margin-bottom: 12px;
	}
	.news-featured__body .news-readmore{
		padding: 7px 12px;
		font-size: .82rem;
	}
	.news-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.news-card__body{ padding: 10px 10px 12px; }
	.news-card h3{ font-size: .88rem; }
	.news-card p{ font-size: .8rem; -webkit-line-clamp: 2; }
	.news-list__item{
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 12px;
		padding: 12px;
	}
	.news-list__content h2{ font-size: .95rem; }
	.article{ padding: 1.1em; }
	.article__title{ font-size: 1.35rem; }
	.article__hero-frame{
		padding: 6px;
		border-radius: 12px;
	}
	.article__hero > img,
	.article__hero .img_new_detail,
	.article__hero-frame img,
	#img_primary{
		max-height: min(68vh, 560px);
		border-radius: 8px;
	}
}

/* Prevent any leftover page header from sticking like site header */
.news-page header,
.article-page header.article__header,
.main .site-header.container{
	position: static !important;
	top: auto !important;
	z-index: auto !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-page{
	padding-bottom: 2.5em;
}
.contact-page__inner{
	padding-top: 1.2em;
	padding-bottom: 1em;
}
.contact-page__nav{
	margin: 0 0 14px;
}
.contact-page .contact-breadcrumb,
.contact-page ol.cd-breadcrumb.contact-breadcrumb{
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	white-space: nowrap;
	overflow: hidden;
}
.contact-page .contact-breadcrumb li,
.contact-page .contact-breadcrumb li.current{
	display: inline-flex !important;
	align-items: center;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap;
}
.contact-page .contact-breadcrumb li::after,
.contact-page .contact-breadcrumb li::before,
.contact-page .contact-breadcrumb li > *::before,
.contact-page .contact-breadcrumb li > *::after{
	display: none !important;
	content: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.contact-page .contact-breadcrumb li + li::before{
	content: "/" !important;
	display: inline-block !important;
	margin: 0 8px !important;
	color: #aab4ad !important;
	font-size: 13px !important;
	font-style: normal !important;
	width: auto !important;
	height: auto !important;
}
.contact-page .contact-breadcrumb li a,
.contact-page .contact-breadcrumb li em{
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--tgh-muted) !important;
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
}
.contact-page .contact-breadcrumb li.current em{
	color: var(--tgh-green) !important;
	font-weight: 700 !important;
}
.contact-page__head{
	margin: 0 0 1.6em;
	max-width: 48em;
}
.contact-page__title,
.contact-page h1.contact-page__title,
.contact-page .content_info h1{
	margin: 0 0 10px !important;
	color: var(--tgh-ink) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	font-family: var(--tgh-font) !important;
	opacity: 1 !important;
	-webkit-text-fill-color: var(--tgh-ink) !important;
	text-shadow: none !important;
	text-transform: none !important;
}
.contact-page__lead{
	margin: 0;
	color: var(--tgh-muted);
	font-size: 16px;
	line-height: 1.6;
}
.contact-page__grid{
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, .9fr);
	gap: 22px;
	align-items: start;
}
.contact-page__map{
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--tgh-border);
	box-shadow: var(--tgh-shadow-sm);
	min-height: 320px;
}
.contact-page__map iframe{
	display: block;
	width: 100% !important;
	height: 100%;
	min-height: 420px;
	border: 0 !important;
}
.contact-page__info{
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.contact-card{
	background: #fff;
	border: 1px solid var(--tgh-border);
	border-radius: 14px;
	padding: 18px 18px 16px;
	box-shadow: var(--tgh-shadow-sm);
}
.contact-card__title{
	margin: 0 0 12px !important;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--tgh-green);
	color: var(--tgh-ink) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}
.contact-card__list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.contact-card__list li{
	display: grid;
	gap: 3px;
}
.contact-card__label{
	display: block;
	color: var(--tgh-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.contact-card__value{
	color: var(--tgh-ink);
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
}
.contact-card__value a{
	color: var(--tgh-green) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.contact-card__value a:hover{ color: var(--tgh-green-dark) !important; }
.contact-card__sep{
	margin: 0 4px;
	color: var(--tgh-muted);
}
.contact-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.contact-action{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--tgh-green-soft);
	color: var(--tgh-green-dark) !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	border: 1px solid transparent;
	transition: background var(--tgh-transition), color var(--tgh-transition);
}
.contact-action img{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
}
.contact-action:hover{
	background: var(--tgh-green);
	color: #fff !important;
}
.contact-action--call{
	background: var(--tgh-green);
	color: #fff !important;
}
.contact-action--call:hover{
	background: var(--tgh-green-dark);
}

@media only screen and (max-width: 900px){
	.contact-page__grid{ grid-template-columns: 1fr; }
	.contact-page__map iframe{ min-height: 300px; }
}
@media only screen and (max-width: 640px){
	.contact-page__title,
	.contact-page h1.contact-page__title{ font-size: 22px !important; }
	.contact-page__lead{ font-size: 15px; }
	.contact-card{ padding: 16px; }
	.contact-page__map iframe{ min-height: 260px; }
}