/* ===== Modern UI: หน้าติดต่อเรา / สรุปสั้น + FAQ (AEO) / นโยบาย ===== */
:root {
	--m-primary: #099F00;
	--m-primary-dark: #067a00;
	--m-primary-soft: #e9f7e8;
	--m-ink: #1f2933;
	--m-muted: #6b7280;
	--m-line: #e5e7eb;
	--m-radius: 18px;
	--m-shadow: 0 18px 40px -20px rgba(16, 24, 40, .35);
}

/* ----- ปุ่ม ----- */
.contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 999px;
	font-family: 'Maitree', serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.contact-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.contact-btn--tel  { background: linear-gradient(135deg, #ffa31a, #ff6a00); color: #FFF !important; box-shadow: 0 10px 24px -10px #ff6a00; }
.contact-btn--line { background: linear-gradient(135deg, #22d34a, #06b329); color: #FFF !important; box-shadow: 0 10px 24px -10px #06b329; }
.contact-btn--outline { border: 2px solid var(--m-primary); color: var(--m-primary) !important; background: #FFF; }
.contact-btn--outline:hover { background: var(--m-primary); color: #FFF !important; }

.aeo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--m-primary-soft);
	color: var(--m-primary-dark);
	font-family: 'Maitree', serif;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 12px;
}

/* ----- หน้าติดต่อเรา ----- */
.contact-modern {
	padding: 50px 0 30px;
	background:
		radial-gradient(1200px 400px at 10% -10%, #dff5dc 0, transparent 60%),
		radial-gradient(900px 400px at 110% 10%, #fff1dc 0, transparent 55%),
		#f7f9f7;
}

.contact-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 34px;
	border-radius: 24px;
	background: #FFF;
	box-shadow: var(--m-shadow);
	margin-bottom: 26px;
}

.contact-hero__text h2 {
	font-size: 32px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--m-ink);
	margin: 0 0 10px;
}

.contact-hero__lead {
	font-size: 17px;
	line-height: 28px !important;
	color: #4b5563;
	max-width: 640px;
	margin-bottom: 22px !important;
}

.contact-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.contact-hero__qr {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 16px 18px 14px;
	border-radius: 18px;
	border: 2px dashed #b9e5b5;
	background: #fbfffb;
	text-decoration: none !important;
	font-family: 'Maitree', serif;
	transition: transform .2s ease;
}

.contact-hero__qr:hover { transform: translateY(-3px); }
.contact-hero__qr-code { display: block; padding: 8px; background: #FFF; border-radius: 10px; }
.contact-hero__qr-code img, .contact-hero__qr-code canvas { display: block; width: 150px; height: 150px; }
.contact-hero__qr span { font-size: 13px; color: var(--m-muted); margin-top: 6px; }
.contact-hero__qr strong { font-size: 17px; color: #06b329; }

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 40px;
}

.contact-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px;
	border-radius: var(--m-radius);
	background: #FFF;
	border: 1px solid var(--m-line);
	text-decoration: none !important;
	color: var(--m-ink) !important;
	font-family: 'Maitree', serif;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	overflow: hidden;
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--m-shadow);
	border-color: transparent;
}

.contact-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #FFF;
	margin-bottom: 10px;
}

.is-tel  .contact-card__icon { background: linear-gradient(135deg, #ffa31a, #ff6a00); }
.is-line .contact-card__icon { background: linear-gradient(135deg, #22d34a, #06b329); font-size: 28px; }
.is-fb   .contact-card__icon { background: linear-gradient(135deg, #3b8bff, #1658d6); }
.is-mail .contact-card__icon { background: linear-gradient(135deg, #8b95a7, #4b5563); }
.is-map  .contact-card__icon { background: linear-gradient(135deg, #ff5a5f, #d7000b); }

.contact-card__label { font-size: 14px; color: var(--m-muted); }
.contact-card__value { font-size: 20px; font-weight: 700; word-break: break-word; }
.contact-card__action {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--m-primary);
}
.contact-card__action i { transition: transform .2s ease; }
.contact-card:hover .contact-card__action i { transform: translateX(4px); }

.contact-steps h2 {
	text-align: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--m-ink);
	margin-bottom: 20px;
}

.contact-steps ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	counter-reset: none;
}

.contact-steps li {
	position: relative;
	padding: 24px 22px;
	border-radius: var(--m-radius);
	background: rgba(255, 255, 255, .7);
	border: 1px solid var(--m-line);
	font-family: 'Maitree', serif;
}

.contact-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--m-primary);
	color: #FFF;
	font-weight: 700;
	margin-bottom: 10px;
}

.contact-steps li strong { display: block; font-size: 18px; color: var(--m-ink); margin-bottom: 4px; }
.contact-steps li p { font-size: 15px; color: var(--m-muted); }


/* ----- สรุปสั้น + FAQ (AEO) ----- */
.aeo-section { background: #FFF; padding: 50px 0; }

.aeo-summary {
	height: 100%;
	padding: 28px;
	border-radius: 22px;
	background: linear-gradient(160deg, #f1faf0, #FFF 70%);
	border: 1px solid #d7efd4;
}

.aeo-summary h2 {
	font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--m-ink);
	margin: 0 0 10px;
}

.aeo-answer {
	font-size: 17px;
	line-height: 28px !important;
	color: #374151;
	margin-bottom: 18px !important;
}

.aeo-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 14px;
	margin: 0;
	font-family: 'Maitree', serif;
	font-size: 15px;
}

.aeo-facts dt { color: var(--m-muted); font-weight: 400; }
.aeo-facts dd { margin: 0; color: var(--m-ink); font-weight: 700; }
.aeo-facts a { color: var(--m-primary-dark); }

.aeo-title { font-size: 26px; font-weight: 700; color: var(--m-ink); margin-bottom: 16px; }

.aeo-faq details {
	border: 1px solid var(--m-line);
	border-radius: 14px;
	background: #FFF;
	margin-bottom: 10px;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.aeo-faq details[open] { border-color: #b9e5b5; box-shadow: 0 10px 24px -16px rgba(9, 159, 0, .6); }

.aeo-faq summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 16px 52px 16px 18px;
	font-family: 'Maitree', serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--m-ink);
}

.aeo-faq summary::-webkit-details-marker { display: none; }

.aeo-faq summary::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--m-primary-soft);
	color: var(--m-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}

.aeo-faq details[open] summary::after { content: "−"; }
.aeo-faq__answer { padding: 0 18px 16px; }
.aeo-faq__answer p { font-size: 16px; line-height: 26px !important; color: #4b5563; }

/* ----- หน้านโยบาย ----- */
.policy-section { background: #f7f9f7; padding: 50px 0; }

.policy-nav {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	border-radius: 18px;
	background: #FFF;
	border: 1px solid var(--m-line);
	font-family: 'Maitree', serif;
}

.policy-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	color: #374151;
	text-decoration: none !important;
	font-size: 15px;
}

.policy-nav a i { width: 18px; color: var(--m-muted); }
.policy-nav a:hover { background: #f3f4f6; }
.policy-nav a.active { background: var(--m-primary-soft); color: var(--m-primary-dark); font-weight: 700; }
.policy-nav a.active i { color: var(--m-primary); }

.policy-content {
	padding: 34px;
	border-radius: 22px;
	background: #FFF;
	box-shadow: var(--m-shadow);
	font-family: 'Maitree', serif;
}

.policy-content h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--m-ink);
	margin: 30px 0 10px;
	padding-top: 20px;
	border-top: 1px solid #f0f0f0;
}

.policy-content p,
.policy-content li {
	font-size: 16px;
	line-height: 28px !important;
	color: #374151;
}

.policy-content p { margin-bottom: 10px !important; }
.policy-content ul { padding-left: 22px; margin-bottom: 10px; }
.policy-content a { color: var(--m-primary-dark); text-decoration: underline; }
.policy-content table { font-size: 15px; }
.policy-content th { background: #f3f4f6; }

.policy-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding-bottom: 14px;
	margin-bottom: 18px !important;
	border-bottom: 1px solid var(--m-line);
	color: var(--m-muted) !important;
	font-size: 14px !important;
}

/* ----- responsive ----- */
@media (max-width: 991px) {
	.contact-steps ol { grid-template-columns: 1fr; gap: 10px; }
	.contact-steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; }
	.contact-steps__num { grid-row: 1 / 3; margin: 0; }
	.policy-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 767px) {
	.contact-modern { padding: 24px 0 10px; }
	.contact-hero { flex-direction: column; align-items: stretch; padding: 22px; text-align: center; }
	.contact-hero__text h2 { font-size: 26px; }
	.contact-hero__cta { justify-content: center; }
	.contact-hero__cta .contact-btn { flex: 1 1 auto; justify-content: center; }
	.contact-hero__qr { align-self: center; }
	.contact-grid { grid-template-columns: 1fr; gap: 10px; }
	.contact-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 0; align-items: center; padding: 14px 16px; }
	.contact-card__icon { grid-row: 1 / 4; width: 48px; height: 48px; margin: 0; }
	.contact-card__value { font-size: 17px; }
	.contact-card__action { margin-top: 2px; font-size: 13px; }
	.policy-content { padding: 22px 18px; }
}


/* ----- แกลเลอรีผลงาน ----- */
.work-section {
	padding: 60px 0;
	background:
		radial-gradient(800px 300px at 50% 0%, #e7f6e5 0, transparent 70%),
		#f6f8f6;
}

.work-head {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 30px;
}

.work-head h2 {
	font-size: 32px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--m-ink);
	margin: 0 0 8px;
}

.work-head p {
	font-size: 16px;
	color: var(--m-muted) !important;
}

.work-head__stats {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.work-head__stats span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #FFF;
	border: 1px solid var(--m-line);
	font-family: 'Maitree', serif;
	font-size: 14px;
	color: #374151;
}

.work-head__stats i { color: var(--m-primary); }

.work-gallery__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.work-gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	background: #e5e7eb;
	box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4);
	animation: work-in .4s ease both;
}

.work-gallery__item[hidden] { display: none; }

@keyframes work-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.work-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.work-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(6, 122, 0, .65));
	opacity: 0;
	transition: opacity .3s ease;
}

.work-gallery__zoom {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--m-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	opacity: 0;
	transform: scale(.7);
	transition: opacity .3s ease, transform .3s ease;
}

.work-gallery__item:hover img,
.work-gallery__item:focus-visible img { transform: scale(1.08); }
.work-gallery__item:hover::after,
.work-gallery__item:focus-visible::after { opacity: 1; }
.work-gallery__item:hover .work-gallery__zoom,
.work-gallery__item:focus-visible .work-gallery__zoom { opacity: 1; transform: scale(1); }
.work-gallery__item:focus-visible { outline: 3px solid var(--m-primary); outline-offset: 3px; }

.work-gallery__more { text-align: center; margin-top: 26px; }
.work-gallery__more .contact-btn { cursor: pointer; }
.work-gallery__count { font-weight: 400; opacity: .8; }

/* Lightbox */
.work-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 12, 9, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: work-fade .2s ease;
}

.work-lightbox[hidden] { display: none; }

@keyframes work-fade { from { opacity: 0; } to { opacity: 1; } }

.work-lightbox__figure {
	margin: 0;
	max-width: calc(100vw - 160px);
	text-align: center;
}

.work-lightbox__figure img {
	max-width: 100%;
	max-height: calc(100vh - 110px);
	border-radius: 10px;
	box-shadow: 0 30px 60px -20px #000;
	transition: opacity .2s ease;
}

.work-lightbox.is-loading img { opacity: .3; }

.work-lightbox__figure figcaption {
	margin-top: 12px;
	font-family: 'Maitree', serif;
	font-size: 14px;
	color: #cfd8d2;
}

.work-lightbox__close,
.work-lightbox__nav {
	position: absolute;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #FFF;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}

.work-lightbox__close:hover,
.work-lightbox__nav:hover { background: rgba(255, 255, 255, .25); }

.work-lightbox__close { top: 18px; right: 18px; width: 46px; height: 46px; font-size: 20px; }
.work-lightbox__nav { top: 50%; width: 54px; height: 54px; margin-top: -27px; font-size: 20px; }
.work-lightbox__nav.is-prev { left: 20px; }
.work-lightbox__nav.is-next { right: 20px; }

@media (max-width: 991px) {
	.work-gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
	.work-section { padding: 40px 0; }
	.work-head h2 { font-size: 26px; }
	.work-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.work-gallery__item { border-radius: 10px; }
	.work-lightbox__figure { max-width: 100vw; padding: 0 8px; }
	.work-lightbox__nav { top: auto; bottom: 22px; margin: 0; width: 48px; height: 48px; }
	.work-lightbox__nav.is-prev { left: calc(50% - 60px); }
	.work-lightbox__nav.is-next { right: calc(50% - 60px); }
	.work-lightbox__figure img { max-height: calc(100vh - 170px); }
}

@media (prefers-reduced-motion: reduce) {
	.work-gallery__item, .work-gallery__item img { animation: none; transition: none; }
}

/* ----- หน้าแรก: ส่วนแนะนำบริการ ----- */
.intro-section {
	padding: 50px 0;
	background:
		radial-gradient(900px 360px at 0% 0%, #e3f5e0 0, transparent 60%),
		radial-gradient(700px 300px at 100% 20%, #fff3e2 0, transparent 60%),
		#FFF;
}

.intro-card {
	height: 100%;
	padding: 34px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .85);
	border: 1px solid #eef1ee;
	box-shadow: var(--m-shadow);
}

.intro-title {
	font-size: 34px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--m-ink);
	margin: 0 0 12px;
}

.intro-lead {
	font-size: 17px;
	line-height: 29px !important;
	color: #4b5563;
	margin-bottom: 18px !important;
}

.intro-tags {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.intro-tags a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--m-primary-soft);
	color: var(--m-primary-dark) !important;
	font-family: 'Maitree', serif;
	font-size: 14px;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.intro-tags a:hover { background: var(--m-primary); color: #FFF !important; transform: translateY(-2px); }

.intro-mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
	margin-top: 26px;
	height: 300px;
}

.intro-mosaic .intro-mosaic__item { aspect-ratio: auto; animation: none; }
.intro-mosaic .intro-mosaic__item:first-child { grid-row: 1 / 3; }

.intro-mosaic__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border-radius: 14px;
	background: linear-gradient(135deg, #099F00, #0bbf3a);
	color: #FFF !important;
	text-align: center;
	font-family: 'Maitree', serif;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease;
}

.intro-mosaic__more strong { font-size: 30px; line-height: 1.1; }
.intro-mosaic__more span { font-size: 13px; line-height: 1.4; opacity: .95; }
.intro-mosaic__more:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px #099F00; }

.intro-fb {
	height: 100%;
	padding: 18px;
	border-radius: 24px;
	background: #FFF;
	border: 1px solid #eef1ee;
	box-shadow: var(--m-shadow);
	overflow: hidden;
}

.intro-fb__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	font-family: 'Maitree', serif;
}

.intro-fb__head strong { display: block; font-size: 17px; color: var(--m-ink); }
.intro-fb__head small { font-size: 13px; color: var(--m-muted); }

.intro-fb__icon {
	flex: 0 0 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, #3b8bff, #1658d6);
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.intro-fb .fb-page, .intro-fb .fb-page span, .intro-fb .fb-page iframe { max-width: 100% !important; }
.intro-fb .cc-placeholder { min-height: 420px; }

/* ----- ปุ่มติดต่อแบบมีลูกเล่น ----- */
.cta-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

.cta-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 10px 10px;
	border-radius: 18px;
	color: #FFF !important;
	text-decoration: none !important;
	overflow: hidden;
	isolation: isolate;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1.2), box-shadow .25s ease;
}

.cta-btn--tel  { background: linear-gradient(135deg, #ffa31a 0%, #ff6a00 100%); box-shadow: 0 12px 26px -14px #ff6a00; }
.cta-btn--line { background: linear-gradient(135deg, #22d34a 0%, #06b329 100%); box-shadow: 0 12px 26px -14px #06b329; }

/* แสงวิ่งผ่านปุ่มเป็นระยะ */
.cta-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	z-index: -1;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	animation: cta-shine 4s ease-in-out infinite;
}

.cta-btn:nth-child(2)::before { animation-delay: .6s; }
.cta-btn:nth-child(3)::before { animation-delay: 1.2s; }

@keyframes cta-shine {
	0%, 60% { left: -60%; }
	100%    { left: 130%; }
}

.cta-btn__icon {
	position: relative;
	flex: 0 0 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .22);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.cta-btn--line .cta-btn__icon { font-size: 26px; }

/* วงคลื่นรอบไอคอนโทรศัพท์ */
.cta-btn--tel .cta-btn__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	border: 2px solid rgba(255, 255, 255, .8);
	animation: cta-ring 1.8s ease-out infinite;
}

@keyframes cta-ring {
	from { transform: scale(1); opacity: .9; }
	to   { transform: scale(1.45); opacity: 0; }
}

.cta-btn__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
	font-family: 'Maitree', serif;
}

.cta-btn__text small { font-size: 13px; opacity: .9; }
.cta-btn__text strong { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cta-btn__arrow {
	margin-left: auto;
	font-size: 14px;
	opacity: .8;
	transition: transform .25s ease, opacity .25s ease;
}

.cta-btn:hover,
.cta-btn:focus-visible { transform: translateY(-4px); }
.cta-btn--tel:hover  { box-shadow: 0 18px 34px -12px #ff6a00; }
.cta-btn--line:hover { box-shadow: 0 18px 34px -12px #06b329; }
.cta-btn:hover .cta-btn__arrow { transform: translateX(4px); opacity: 1; }
.cta-btn:hover .cta-btn__icon i { animation: cta-wiggle .5s ease; }
.cta-btn:active { transform: translateY(-1px) scale(.97); }
.cta-btn:focus-visible { outline: 3px solid #ffd59a; outline-offset: 3px; }

@keyframes cta-wiggle {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-18deg); }
	40% { transform: rotate(14deg); }
	60% { transform: rotate(-10deg); }
	80% { transform: rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cta-btn::before, .cta-btn--tel .cta-btn__icon::after, .cta-btn:hover .cta-btn__icon i { animation: none; }
}

@media (max-width: 767px) {
	.intro-section { padding: 24px 0; }
	.intro-card { padding: 22px 18px; }
	.intro-title { font-size: 25px; }
	.intro-lead { font-size: 16px; line-height: 27px !important; }
	.cta-group { grid-template-columns: 1fr; gap: 10px; }
	.intro-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); height: 420px; }
	.intro-mosaic .intro-mosaic__item:first-child { grid-column: 1 / 3; grid-row: auto; }
}

/* ----- แบนเนอร์หน้าแรก ----- */
.home-banner { line-height: 0; background: #eef5ec; }
.home-banner a { display: block; }
.home-banner img { display: block; width: 100%; height: auto; }