/* หน้าติดต่อเรา (contact.php) */
.ct-hero,
.ct-body {
	--ct-primary: #157d53;
	--ct-primary-dark: #005f39;
	--ct-ink: #1d2939;
	--ct-muted: #667085;
	--ct-line: #e4e7ec;
	--ct-tel: #f26b00;
	--ct-line-green: #06c755;
	--ct-facebook: #1877f2;
}

/* ---------- hero ---------- */
.ct-hero {
	position: relative;
	padding: 72px 0 120px;
	background-size: cover;
	background-position: left center;
	color: #fff;
	isolation: isolate;
}
.ct-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, rgba(0, 76, 46, 0.95) 0%, rgba(0, 112, 66, 0.86) 55%, rgba(0, 140, 69, 0.6) 100%);
}
.ct-hero-inner { max-width: 760px; }
.ct-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.ct-hero-title {
	margin: 18px 0 12px;
	color: #fff;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.25;
}
.ct-hero-lead {
	margin: 0 0 20px !important;
	color: rgba(255, 255, 255, 0.88);
	font-size: 17px;
	line-height: 1.7 !important;
}
.ct-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
}
.ct-badges i { color: #7ee2a8; margin-right: 4px; }
.ct-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.ct-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 26px;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ct-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ct-btn-call {
	background: linear-gradient(135deg, #ff9a2e, var(--ct-tel));
	color: #fff;
	box-shadow: 0 10px 24px rgba(242, 107, 0, 0.35);
}
.ct-btn-call:hover { color: #fff; box-shadow: 0 14px 30px rgba(242, 107, 0, 0.45); }
.ct-btn-line {
	background: #fff;
	color: var(--ct-primary-dark);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
.ct-btn-line i { color: var(--ct-line-green); font-size: 22px; }
.ct-btn-line:hover { color: var(--ct-primary-dark); }

/* ---------- body ---------- */
.ct-body {
	position: relative;
	margin-top: -72px;
	padding: 0 0 64px;
	background: linear-gradient(to bottom, transparent 0, transparent 72px, #f4f6f5 72px);
}
.ct-card {
	position: relative;
	display: block;
	margin-bottom: 24px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--ct-line);
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
	color: var(--ct-ink);
}
.ct-card-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}
.ct-card-title {
	margin: 0;
	color: var(--ct-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}
.ct-card-sub { color: var(--ct-muted); font-size: 14px; }

.ct-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	color: #fff;
	font-size: 22px;
}
.ct-icon-phone { background: linear-gradient(135deg, #ff9a2e, var(--ct-tel)); }
.ct-icon-line { background: var(--ct-line-green); font-size: 28px; }
.ct-icon-facebook { background: var(--ct-facebook); }
.ct-icon-email { background: linear-gradient(135deg, #1f9d6b, var(--ct-primary-dark)); }
.ct-icon-map { background: linear-gradient(135deg, #ef4444, #b91c1c); }

/* เบอร์โทร */
.ct-tels {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.ct-tel {
	position: relative;
	flex: 1 1 190px;
	display: flex;
	flex-direction: column;
	padding: 14px 44px 14px 18px;
	border: 1px solid #fde3cc;
	border-radius: 14px;
	background: #fff8f1;
	color: var(--ct-ink);
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.ct-tel small { color: var(--ct-muted); font-size: 13px; }
.ct-tel strong { font-size: 22px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
.ct-tel i {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ct-tel);
	transition: transform 0.2s;
}
.ct-tel:hover {
	background: #ffefdf;
	border-color: #fbc896;
	color: var(--ct-ink);
	text-decoration: none;
	transform: translateY(-2px);
}
.ct-tel:hover i { transform: translate(4px, -50%); }

/* LINE / Facebook / Email */
.ct-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0 24px;
}
.ct-channel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}
.ct-channel:hover {
	transform: translateY(-4px);
	border-color: rgba(21, 125, 83, 0.35);
	box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
	color: var(--ct-ink);
	text-decoration: none;
}
.ct-channel .ct-icon { margin-bottom: 12px; }
.ct-channel-label {
	color: var(--ct-muted);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.ct-channel-value {
	max-width: 100%;
	color: var(--ct-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.ct-channel-cta {
	margin-top: 10px;
	color: var(--ct-primary);
	font-size: 14px;
	font-weight: 700;
}
.ct-channel-cta i { margin-left: 4px; transition: transform 0.2s; }
.ct-channel:hover .ct-channel-cta i { transform: translateX(4px); }

/* ที่อยู่ */
.ct-address {
	display: flex;
	align-items: center;
	gap: 16px;
}
.ct-address-text { font-size: 16px; line-height: 1.6; }

/* QR LINE */
.ct-qr {
	position: sticky;
	top: 24px;
	text-align: center;
}
.ct-qr-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(6, 199, 85, 0.12);
	color: #04883b;
	font-size: 14px;
	font-weight: 700;
}
.ct-qr-badge i { font-size: 18px; }
.ct-qr img {
	display: block;
	width: 100%;
	max-width: 260px;
	margin: 0 auto;
	border-radius: 14px;
}
.ct-qr-id { margin-top: 14px; font-size: 16px; color: var(--ct-muted); }
.ct-qr-id strong { color: var(--ct-ink); }
.ct-qr-note {
	margin: 10px 0 0 !important;
	color: var(--ct-muted);
	font-size: 14px;
	line-height: 1.6 !important;
}

/* เกี่ยวกับเรา */
.ct-about { margin-top: 8px; margin-bottom: 0; padding: 32px; }
.ct-about .ct-card-title { margin-bottom: 12px; }
.ct-about .ct-card-title i { color: var(--ct-primary); margin-right: 6px; }
.ct-about p {
	color: #475467;
	font-size: 16px;
	line-height: 1.85 !important;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
	.ct-qr { position: static; }
}
@media (max-width: 767.98px) {
	.ct-hero { padding: 48px 0 104px; }
	.ct-hero-title { font-size: 32px; }
	.ct-hero-lead { font-size: 15px; }
	.ct-badges { font-size: 14px; gap: 6px 14px; }
	.ct-hero-actions .ct-btn { flex: 1 1 auto; justify-content: center; font-size: 16px; padding: 12px 18px; }
	.ct-card { padding: 20px; border-radius: 18px; }
	.ct-about { padding: 22px; }
	.ct-tel strong { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.ct-btn, .ct-tel, .ct-channel, .ct-tel i, .ct-channel-cta i { transition: none; }
}