/* หน้า เกี่ยวกับเรา / สินค้าและบริการ / ติดต่อเรา
   (page-about.php, page-service.php, page-contact.php, widget-gallery.php, widget-cta.php, js/pages.js) */

.pg {
	--pg-primary: #174EBD;
	--pg-sky: #5A88E3;
	--pg-accent: #F1AE2D;
	--pg-ink: #0f172a;
	--pg-text: #475569;
	--pg-muted: #64748b;
	--pg-soft: #f4f7fd;
	--pg-border: #e2e8f0;
	--pg-radius: 20px;
	--pg-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
	--pg-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
	position: relative;
	font-family: 'Sarabun', sans-serif;
	color: var(--pg-text);
}

.pg p {
	margin: 0 !important;
	color: var(--pg-text);
	line-height: 1.75 !important;
}

.pg h1,
.pg h2,
.pg h3 {
	margin: 0;
	color: var(--pg-ink);
	font-family: 'Sarabun', sans-serif;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

.pg h1,
.pg h2 {
	text-wrap: balance;
}

.pg a {
	transition: color 0.2s ease;
}

/* กันคำไทยถูกตัดกลางคำในหัวข้อ เช่น "ทุกขั้น|ตอน" */
.pg-nowrap {
	white-space: nowrap;
}

.pg-section {
	padding: 88px 0;
}

/* ลิงก์ภายในหน้า (#oem, #packing) ไม่ให้ถูก header ที่ติดด้านบนบัง */
section.pg[id] {
	scroll-margin-top: 90px;
}

.pg-section--soft {
	background: var(--pg-soft);
}

.pg-section--tight {
	padding: 24px 0 88px;
}

/* ---- หัวข้อ ---- */
.pg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(23, 78, 189, 0.08);
	color: var(--pg-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.pg-grad {
	background: linear-gradient(90deg, #174EBD, #2fa6f5);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pg-head {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.pg-head h2 {
	margin-top: 14px;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.3;
}

.pg-head p {
	margin-top: 12px !important;
	font-size: 17px;
}

/* ---- ปุ่ม ---- */
.pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pg-btn:hover {
	transform: translateY(-2px);
}

.pg-btn:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.4);
	outline-offset: 2px;
}

.pg-btn--primary {
	background: linear-gradient(135deg, #2563eb, #174EBD);
	color: #FFF !important;
	box-shadow: 0 10px 24px rgba(23, 78, 189, 0.3);
}

.pg-btn--line {
	background: #06C755;
	color: #FFF !important;
	box-shadow: 0 10px 24px rgba(6, 199, 85, 0.28);
}

.pg-btn--ghost {
	background: #FFF;
	border-color: var(--pg-border);
	color: var(--pg-ink) !important;
}

.pg-btn--ghost:hover {
	border-color: var(--pg-primary);
	color: var(--pg-primary) !important;
}

.pg-btn--white {
	background: #FFF;
	color: var(--pg-primary) !important;
}

.pg-btn--outline-white {
	border-color: rgba(255, 255, 255, 0.6);
	color: #FFF !important;
}

.pg-btn--outline-white:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ---- ไอคอน ---- */
.pg-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: linear-gradient(135deg, #3b82f6, #174EBD);
	color: #FFF;
	font-size: 21px;
	box-shadow: 0 8px 18px rgba(23, 78, 189, 0.22);
}

.pg-icon--gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 8px 18px rgba(245, 158, 11, 0.25); }
.pg-icon--green { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 8px 18px rgba(5, 150, 105, 0.22); }
.pg-icon--pink { background: linear-gradient(135deg, #f472b6, #db2777); box-shadow: 0 8px 18px rgba(219, 39, 119, 0.22); }
.pg-icon--sky { background: linear-gradient(135deg, #38bdf8, #0284c7); box-shadow: 0 8px 18px rgba(2, 132, 199, 0.22); }
.pg-icon--line { background: #06C755; box-shadow: 0 8px 18px rgba(6, 199, 85, 0.25); font-size: 26px; }
.pg-icon--messenger { background: linear-gradient(135deg, #00c6ff, #0068ff); box-shadow: 0 8px 18px rgba(0, 104, 255, 0.25); font-size: 24px; }
.pg-icon--facebook { background: #1877F2; box-shadow: 0 8px 18px rgba(24, 119, 242, 0.25); }
.pg-icon--phone { background: linear-gradient(135deg, #ffa24c, #ff6a00); box-shadow: 0 8px 18px rgba(255, 106, 0, 0.25); }

/* ---- Hero ---- */
.pg-hero {
	padding: 48px 0 104px;
	overflow: hidden;
	background:
		radial-gradient(circle at 85% 15%, rgba(56, 189, 248, 0.18), transparent 40%),
		radial-gradient(circle at 10% 90%, rgba(23, 78, 189, 0.1), transparent 45%),
		linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
}

.pg-hero--compact {
	padding-bottom: 72px;
}

.pg-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}

.pg-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	color: var(--pg-muted);
	font-size: 14px;
}

.pg-crumb a {
	color: var(--pg-muted) !important;
	text-decoration: none !important;
}

.pg-crumb a:hover {
	color: var(--pg-primary) !important;
}

.pg-crumb i.fa-chevron-right {
	font-size: 10px;
	opacity: 0.6;
}

.pg-hero__title {
	margin-top: 16px !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.22 !important;
}

.pg-hero__sub {
	margin-top: 14px !important;
	color: var(--pg-ink) !important;
	font-size: 18px;
	font-weight: 700;
}

.pg-hero__lead {
	max-width: 580px;
	margin-top: 14px !important;
	font-size: 18px;
}

.pg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.pg-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	color: var(--pg-ink);
	font-weight: 600;
}

.pg-hero__badges i {
	margin-right: 6px;
	color: #16a34a;
}

.pg-quicknav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.pg-quicknav a {
	padding: 8px 16px;
	border: 1px solid var(--pg-border);
	border-radius: 999px;
	background: #FFF;
	color: var(--pg-ink) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pg-quicknav a:hover {
	border-color: var(--pg-primary);
	color: var(--pg-primary) !important;
	transform: translateY(-1px);
}

/* ภาพซ้อนใน hero */
.pg-collage {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	height: 480px;
}

.pg-collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow-lg);
}

.pg-collage img:first-child {
	grid-row: span 2;
}

.pg-collage__badge {
	position: absolute;
	left: -24px;
	bottom: 32px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 18px;
	background: #FFF;
	box-shadow: var(--pg-shadow-lg);
}

.pg-collage__badge .pg-icon {
	width: 44px;
	height: 44px;
	font-size: 18px;
	box-shadow: none;
}

.pg-collage__badge > div > strong {
	display: block;
	color: var(--pg-ink);
	font-size: 16px;
	line-height: 1.3;
}

.pg-collage__badge > div > span {
	color: var(--pg-muted);
	font-size: 13.5px;
}

/* ---- จุดเด่น (ทับขอบล่าง hero) ---- */
.pg-highlights {
	position: relative;
	z-index: 2;
	margin-top: -60px;
}

.pg-highlights__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.pg-highlight {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px;
	border-radius: 18px;
	background: #FFF;
	box-shadow: var(--pg-shadow);
}

.pg-highlight .pg-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	font-size: 19px;
}

.pg-highlight > div > strong {
	display: block;
	color: var(--pg-ink);
	font-size: 18px;
	line-height: 1.35;
}

.pg-highlight > div > span {
	display: block;
	margin-top: 3px;
	color: var(--pg-muted);
	font-size: 14.5px;
	line-height: 1.5;
}

/* ---- ภาพ + ข้อความ ---- */
.pg-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

.pg-split__media {
	position: relative;
	isolation: isolate;
}

.pg-split__media::before {
	content: "";
	position: absolute;
	inset: 28px -22px -22px 28px;
	z-index: -1;
	border-radius: 28px;
	background: linear-gradient(135deg, rgba(23, 78, 189, 0.14), rgba(47, 166, 245, 0.14));
}

.pg-split__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: var(--pg-shadow-lg);
}

.pg-split h2 {
	margin: 14px 0 18px;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.3;
}

.pg-split p + p {
	margin-top: 14px !important;
}

.pg-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.pg-checks--single {
	grid-template-columns: 1fr;
}

.pg-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--pg-ink);
	font-weight: 600;
	line-height: 1.55;
}

.pg-checks i {
	margin-top: 4px;
	color: #16a34a;
}

/* ---- การ์ดจุดเด่น ---- */
.pg-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.pg-feature {
	padding: 30px 28px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	background: #FFF;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pg-feature:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--pg-shadow-lg);
}

.pg-feature h3 {
	margin: 20px 0 8px;
	font-size: 19px;
	line-height: 1.4;
}

.pg-feature p {
	font-size: 15.5px;
}

/* ---- พื้นหลังเข้ม ---- */
.pg-dark {
	overflow: hidden;
	background:
		radial-gradient(circle at 90% 10%, rgba(56, 189, 248, 0.16), transparent 40%),
		linear-gradient(160deg, #0b1a3a 0%, #13306b 100%);
}

.pg-dark h2,
.pg-dark h3 {
	color: #FFF;
}

.pg-dark p,
.pg-dark .pg-checks li {
	color: #cbd5e1 !important;
}

.pg-dark .pg-eyebrow {
	background: rgba(255, 255, 255, 0.1);
	color: #93c5fd;
}

.pg-dark .pg-split__media::before {
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(241, 174, 45, 0.18));
}

.pg-dark .pg-checks i {
	color: #4ade80;
}

/* ---- แกลเลอรี (widget-gallery.php) ---- */
.pg-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}

.pg-gallery a {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 16px;
	background: #e2e8f0;
}

.pg-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.pg-gallery__zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.38);
	color: #FFF;
	font-size: 22px;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.pg-gallery a:hover img,
.pg-gallery a:focus-visible img {
	transform: scale(1.07);
}

.pg-gallery a:hover .pg-gallery__zoom,
.pg-gallery a:focus-visible .pg-gallery__zoom {
	opacity: 1;
}

/* ---- การ์ดบริการ ---- */
.pg-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.pg-service {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--pg-radius);
	background: #FFF;
	box-shadow: var(--pg-shadow);
	scroll-margin-top: 110px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pg-service:hover {
	transform: translateY(-4px);
	box-shadow: var(--pg-shadow-lg);
}

.pg-service__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e2e8f0;
}

.pg-service__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.pg-service:hover .pg-service__media img {
	transform: scale(1.05);
}

.pg-service__num {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--pg-primary);
	font-weight: 800;
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.15);
}

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

.pg-service h3 {
	font-size: 20px;
	line-height: 1.4;
}

.pg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.pg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	background: #eef3fd;
	color: var(--pg-primary);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
}

.pg-chip--price { background: #fff5e1; color: #b45309; }
.pg-chip--green { background: #e7f8ee; color: #15803d; }

.pg-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.pg-list li {
	position: relative;
	margin-top: 8px;
	padding-left: 20px;
	color: var(--pg-text);
	font-size: 15.5px;
	line-height: 1.6;
}

.pg-list li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pg-sky);
}

.pg-service__note {
	margin-top: auto !important;
	padding-top: 16px;
	color: var(--pg-muted) !important;
	font-size: 13.5px;
}

/* ---- บริการเสริมแบบย่อ ---- */
.pg-minis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.pg-mini {
	padding: 24px 22px;
	border: 1px solid var(--pg-border);
	border-radius: 18px;
	background: #FFF;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pg-mini:hover {
	transform: translateY(-3px);
	box-shadow: var(--pg-shadow);
}

.pg-mini .pg-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	font-size: 19px;
}

.pg-mini h3 {
	margin: 16px 0 6px;
	font-size: 17px;
	line-height: 1.4;
}

.pg-mini p {
	font-size: 15px;
}

/* ---- ขั้นตอน ---- */
.pg-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.pg-step {
	position: relative;
	padding: 0 8px;
	text-align: center;
}

.pg-step__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: 0 auto;
	border-radius: 50%;
	background: #FFF;
	color: var(--pg-primary);
	font-size: 24px;
	box-shadow: 0 0 0 8px rgba(23, 78, 189, 0.08), var(--pg-shadow);
}

.pg-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 34px;
	left: calc(50% + 46px);
	right: calc(-50% + 46px);
	border-top: 2px dashed #c3d3f3;
}

.pg-step small {
	display: block;
	margin-top: 20px;
	color: var(--pg-sky);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.pg-step h3 {
	margin: 4px 0 8px;
	font-size: 18px;
}

.pg-step p {
	font-size: 15px;
}

/* ---- แถบชวนติดต่อ (widget-cta.php) ---- */
.pg-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	overflow: hidden;
	padding: 48px 56px;
	border-radius: 28px;
	background: linear-gradient(120deg, #174EBD 0%, #2f80ed 60%, #38bdf8 100%);
	box-shadow: 0 24px 60px rgba(23, 78, 189, 0.3);
}

.pg-cta::before,
.pg-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.pg-cta::before {
	top: -90px;
	right: -60px;
	width: 260px;
	height: 260px;
}

.pg-cta::after {
	bottom: -120px;
	right: 220px;
	width: 220px;
	height: 220px;
}

.pg-cta__text {
	position: relative;
	z-index: 1;
	max-width: 560px;
}

.pg-cta h2 {
	color: #FFF;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.3;
}

.pg-cta p {
	margin-top: 8px !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 17px;
}

.pg-cta__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---- การ์ดช่องทางติดต่อ ---- */
/* flex-wrap: 5 การ์ดจัดเป็น 3 + 2 อัตโนมัติ และยังเต็มแถวเมื่อบางช่องทางไม่ได้ตั้งค่า */
.pg-contact-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.pg-contact-card {
	display: flex;
	flex: 1 1 300px;
	flex-direction: column;
	padding: 28px 26px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	background: #FFF;
	color: inherit;
	text-decoration: none !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

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

.pg-contact-card .pg-icon {
	margin-bottom: 18px;
}

.pg-contact-card small {
	color: var(--pg-muted);
	font-size: 14px;
	font-weight: 600;
}

.pg-contact-card strong {
	margin-top: 2px;
	color: var(--pg-ink);
	font-size: 19px;
	line-height: 1.45;
	word-break: break-word;
}

.pg-contact-card__more {
	color: var(--pg-text);
	font-size: 15px;
}

.pg-contact-card__go {
	margin-top: auto;
	padding-top: 16px;
	color: var(--pg-primary);
	font-size: 15px;
	font-weight: 700;
}

.pg-contact-card__go i {
	margin-left: 4px;
	transition: transform 0.2s ease;
}

.pg-contact-card:hover .pg-contact-card__go i {
	transform: translateX(4px);
}

/* การ์ด QR Code LINE */
.pg-qr {
	max-width: 360px;
	margin-left: auto;
	padding: 30px 28px;
	border-radius: 24px;
	background: #FFF;
	box-shadow: var(--pg-shadow-lg);
	text-align: center;
}

.pg-qr__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--pg-ink);
	font-size: 18px;
	font-weight: 700;
}

.pg-qr__head i {
	color: #06C755;
	font-size: 28px;
}

.pg-qr__code {
	width: 204px;
	height: 204px;
	margin: 18px auto 14px;
	padding: 14px;
	border: 1px solid var(--pg-border);
	border-radius: 18px;
}

.pg-qr__code img,
.pg-qr__code canvas {
	width: 100% !important;
	height: auto !important;
}

.pg-qr__id {
	color: var(--pg-ink);
	font-size: 22px;
	font-weight: 800;
}

.pg-qr p {
	margin-top: 4px !important;
	color: var(--pg-muted) !important;
	font-size: 14.5px;
}

.pg-qr .pg-btn {
	width: 100%;
	margin-top: 18px;
}

/* การ์ดทั่วไป */
.pg-card {
	padding: 36px;
	border-radius: 24px;
	background: #FFF;
	box-shadow: var(--pg-shadow);
}

.pg-card h2 {
	margin: 14px 0 10px;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.35;
}

/* แท็ก */
.pg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pg-tags .badge {
	margin: 0 !important;
	padding: 7px 14px;
	border-radius: 999px;
	background: #eef3fd !important;
	color: var(--pg-primary) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.pg-tags .badge:hover {
	background: var(--pg-primary) !important;
	color: #FFF !important;
}

/* ---- Lightbox (js/pages.js) ---- */
html.pg-lightbox-open {
	overflow: hidden;
}

.pg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(2, 6, 23, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.pg-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s;
}

.pg-lightbox__img {
	max-width: min(92vw, 1100px);
	max-height: 84vh;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	object-fit: contain;
}

.pg-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #FFF;
	font-size: 20px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.pg-lightbox__btn:hover,
.pg-lightbox__btn:focus-visible {
	background: rgba(255, 255, 255, 0.25);
	outline: none;
}

.pg-lightbox__close { top: 18px; right: 18px; }
.pg-lightbox__prev { top: 50%; left: 18px; transform: translateY(-50%); }
.pg-lightbox__next { top: 50%; right: 18px; transform: translateY(-50%); }

.pg-lightbox__count {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.75);
	font-family: 'Sarabun', sans-serif;
	font-size: 14px;
}

/* ---- เลื่อนถึงแล้วค่อยแสดง (js/pages.js) ----
   ใช้ animation (fill-mode: backwards) แทน transition เพื่อไม่ไปทับ transition ตอน hover ของการ์ดต่าง ๆ */
.js-reveal .reveal {
	opacity: 0;
}

.js-reveal .reveal.is-in {
	opacity: 1;
	animation: pg-reveal 0.7s ease backwards;
}

@keyframes pg-reveal {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
	.pg-section { padding: 64px 0; }
	.pg-section--tight { padding: 16px 0 64px; }
	.pg-hero { padding: 32px 0 88px; }
	.pg-hero--compact { padding-bottom: 56px; }
	.pg-hero__grid,
	.pg-split { grid-template-columns: 1fr; gap: 44px; }
	.pg-collage { height: 400px; }
	.pg-collage__badge { left: 16px; }
	.pg-highlights__grid { grid-template-columns: repeat(2, 1fr); }
	.pg-features,
	.pg-services { grid-template-columns: repeat(2, 1fr); }
	.pg-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.pg-step::after { display: none; }
	.pg-split__media { max-width: 520px; }
	.pg-qr { margin: 0 auto; }
	.pg-cta { padding: 40px; }
}

@media (max-width: 575px) {
	.pg-section { padding: 52px 0; }
	.pg-section--tight { padding: 8px 0 52px; }
	.pg-head { margin-bottom: 32px; }
	.pg-hero__lead { font-size: 17px; }
	.pg-hero__actions .pg-btn { flex: 1 1 auto; }
	.pg-collage { height: 320px; gap: 10px; }
	.pg-collage__badge { left: 10px; bottom: 12px; padding: 10px 14px; }
	.pg-highlights__grid,
	.pg-features,
	.pg-services,
	.pg-checks { grid-template-columns: 1fr; }
	.pg-steps { grid-template-columns: 1fr; }
	.pg-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.pg-split__media::before { inset: 16px -8px -12px 16px; }
	.pg-cta { padding: 32px 24px; border-radius: 22px; }
	.pg-cta__actions,
	.pg-cta__actions .pg-btn { width: 100%; }
	.pg-card { padding: 26px 22px; }
	.pg-lightbox__prev { left: 8px; }
	.pg-lightbox__next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.pg-btn,
	.pg-feature,
	.pg-service,
	.pg-gallery img,
	.pg-service__media img {
		transition: none;
	}
}

/* ---- ปุ่มติดต่อ 3 ช่องทาง (widget-btn-contact.php) ---- */
.cbtn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.cbtn {
	--cbtn-glow: rgba(23, 78, 189, 0.3);
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1 1 200px;
	align-items: center;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
	padding: 12px 14px 12px 12px;
	border-radius: 18px;
	container-type: inline-size;
	background-size: 170% 170%;
	background-position: 0% 50%;
	box-shadow: 0 10px 24px var(--cbtn-glow);
	color: #FFF !important;
	font-family: 'Sarabun', sans-serif;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.6s ease;
}

.cbtn:hover,
.cbtn:focus-visible {
	transform: translateY(-3px);
	background-position: 100% 50%;
	box-shadow: 0 16px 34px var(--cbtn-glow);
}

.cbtn:active {
	transform: translateY(-1px) scale(0.98);
}

.cbtn:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

.cbtn--phone {
	--cbtn-glow: rgba(255, 106, 0, 0.35);
	background-image: linear-gradient(135deg, #ffa24c, #ff5e00 55%, #ff8a00);
}

.cbtn--messenger {
	--cbtn-glow: rgba(140, 60, 255, 0.32);
	background-image: linear-gradient(135deg, #0099ff, #a033ff 60%, #ff5280);
}

.cbtn--line {
	--cbtn-glow: rgba(6, 199, 85, 0.32);
	background-image: linear-gradient(135deg, #22d36b, #06C755 50%, #00a844);
}

.cbtn__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.22);
	font-size: 19px;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cbtn--messenger .cbtn__icon { font-size: 22px; }
.cbtn--line .cbtn__icon { font-size: 24px; }

.cbtn:hover .cbtn__icon {
	transform: scale(1.1) rotate(-8deg);
}

.cbtn__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.cbtn__text small {
	font-size: 12.5px;
	font-weight: 500;
	opacity: 0.9;
}

.cbtn__text strong {
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cbtn__arrow {
	margin-left: auto;
	font-size: 14px;
	opacity: 0.75;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.cbtn:hover .cbtn__arrow {
	transform: translateX(4px);
	opacity: 1;
}

/* ปุ่มแคบ ซ่อนลูกศร ให้ข้อความแสดงครบ (ใช้ 2 class เพราะ Font Awesome ที่โหลดทีหลังกำหนด display ของ .fas) */
@container (max-width: 250px) {
	.cbtn .cbtn__arrow {
		display: none;
	}
}

/* แสงวิ่งผ่านปุ่มเป็นจังหวะ (เหลื่อมเวลากันทีละปุ่ม) */
.cbtn::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -80%;
	z-index: -1;
	width: 50%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-20deg);
	animation: cbtn-shine 6s ease-in-out infinite;
}

.cbtn--messenger::before { animation-delay: 0.9s; }
.cbtn--line::before { animation-delay: 1.8s; }

@keyframes cbtn-shine {
	0%, 72% { left: -80%; }
	88%, 100% { left: 140%; }
}

/* ไอคอนโทรศัพท์สั่น + วงคลื่น */
.cbtn--phone .cbtn__icon i {
	animation: cbtn-ring 3.2s ease-in-out infinite;
}

.cbtn--phone .cbtn__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	animation: cbtn-pulse 2.4s ease-out infinite;
}

@keyframes cbtn-ring {
	0%, 70%, 100% { transform: rotate(0); }
	74% { transform: rotate(-18deg); }
	78% { transform: rotate(18deg); }
	82% { transform: rotate(-14deg); }
	86% { transform: rotate(14deg); }
	90% { transform: rotate(-6deg); }
	94% { transform: rotate(0); }
}

@keyframes cbtn-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
	70%, 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

/* ทยอยแสดงทีละปุ่ม */
.cbtn.reveal:nth-child(2) { animation-delay: 0.08s; }
.cbtn.reveal:nth-child(3) { animation-delay: 0.16s; }

/* คลื่นตอนกด (js/pages.js) */
[data-ripple] .pg-ripple {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	pointer-events: none;
	transform: scale(0);
	animation: pg-ripple 0.6s ease-out forwards;
}

@keyframes pg-ripple {
	to {
		opacity: 0;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cbtn::before,
	.cbtn--phone .cbtn__icon i,
	.cbtn--phone .cbtn__icon::after {
		animation: none;
	}
}

/* ---- บริการของเรา หน้าแรก (page-main.php) ---- */
.home-svc {
	overflow: hidden;
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.14), transparent 35%),
		radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.3), transparent 40%),
		linear-gradient(135deg, #174EBD 0%, #2f6fe0 55%, #5A88E3 100%);
}

.home-svc .pg-head h2 {
	color: #FFF;
}

.home-svc .pg-head p {
	color: rgba(255, 255, 255, 0.88) !important;
}

.home-svc .pg-eyebrow {
	background: rgba(255, 255, 255, 0.16);
	color: #FFF;
}

.home-svc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.home-svc__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: #FFF;
	box-shadow: 0 20px 40px rgba(8, 30, 80, 0.25);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-svc__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 28px 54px rgba(8, 30, 80, 0.32);
}

.home-svc__media {
	position: relative;
}

.home-svc__cover {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e2e8f0;
}

.home-svc__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.home-svc__card:hover .home-svc__cover img {
	transform: scale(1.06);
}

/* เงาไล่ระดับด้านล่างรูป ให้ป้ายจำนวนรูปอ่านง่าย */
.home-svc__cover::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.5), transparent);
	pointer-events: none;
}

.home-svc__num {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.15);
	color: #174EBD;
	font-weight: 800;
}

.home-svc__count {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #FFF;
	font-size: 13px;
	font-weight: 600;
}

/* รูปย่อมุมขวาล่าง กดเปิดรูปนั้นได้เลย */
.home-svc__thumbs {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	gap: 6px;
}

.home-svc__thumbs a {
	position: relative;
	display: block;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border: 2px solid #FFF;
	border-radius: 11px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.home-svc__thumbs a:hover {
	transform: translateY(-3px) scale(1.05);
}

.home-svc__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-svc__more span {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.62);
	color: #FFF;
	font-size: 14px;
	font-weight: 700;
}

.home-svc__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 22px;
}

.home-svc__body h3 {
	font-size: 20px;
	line-height: 1.4;
}

.home-svc__body p {
	margin-top: 6px !important;
	font-size: 15.5px;
}

.home-svc__body .pg-chips {
	margin-top: auto;
	padding-top: 14px;
}

/* การ์ดใบสุดท้ายเต็มความกว้าง รูปซ้าย รายการขวา */
.home-svc__card--wide {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: 1.1fr 1fr;
}

.home-svc__card--wide .home-svc__media,
.home-svc__card--wide .home-svc__cover {
	height: 100%;
}

.home-svc__card--wide .home-svc__cover {
	aspect-ratio: auto;
	min-height: 320px;
}

/* รูปไม่ดันความสูงการ์ด ให้ความสูงมาจากฝั่งข้อความ */
.home-svc__card--wide .home-svc__cover img {
	position: absolute;
	inset: 0;
}

.home-svc__card--wide .home-svc__body {
	justify-content: center;
	padding: 32px 34px;
}

.home-svc__card--wide .pg-chips {
	margin-top: 18px;
	padding-top: 0;
}

.home-svc__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 44px;
}

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

	.home-svc__card--wide {
		grid-template-columns: 1fr;
	}

	.home-svc__card--wide .home-svc__cover {
		aspect-ratio: 16 / 9;
		min-height: 0;
		height: auto;
	}

	.home-svc__card--wide .home-svc__body {
		padding: 22px;
	}
}

@media (max-width: 575px) {
	.home-svc__grid {
		grid-template-columns: 1fr;
	}

	.home-svc__actions .pg-btn {
		width: 100%;
	}
}

/* ---- บทความ (page-article-1.php) ---- */
.art-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1055;
	height: 4px;
	pointer-events: none;
}

.art-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #174EBD, #38bdf8, #F1AE2D);
	transform: scaleX(0);
	transform-origin: left center;
}

.art-hero {
	padding-bottom: 120px;
	text-align: center;
}

.art-hero .pg-crumb {
	justify-content: center;
}

.art-hero__title {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.art-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 24px;
	margin-top: 20px;
	color: #64748b;
	font-size: 15px;
	font-weight: 600;
}

.art-meta i {
	margin-right: 6px;
	color: #5A88E3;
}

.art {
	padding-bottom: 88px;
}

.art-cover {
	max-width: 1000px;
	margin: -88px auto 56px;
}

.art-cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18);
}

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

/* เนื้อหา */
.art-body {
	max-width: 760px;
	font-size: 17.5px;
}

.art-body > p {
	margin-bottom: 20px !important;
	line-height: 1.95 !important;
	color: #334155;
}

.art-body a {
	color: #174EBD;
	font-weight: 600;
	text-decoration: underline;
}

.art-lead {
	padding: 22px 26px;
	border-radius: 18px;
	background: linear-gradient(135deg, #eef4ff, #f8fbff);
	border-left: 5px solid #174EBD;
	color: #0f172a !important;
	font-size: 18.5px;
	font-weight: 600;
}

.art-body h2 {
	margin: 52px 0 22px;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.4;
	scroll-margin-top: 110px;
}

.art-body h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 12px;
	border-radius: 4px;
	background: linear-gradient(90deg, #174EBD, #38bdf8);
}

/* ข้อ ๆ แบบการ์ดมีตัวเลข */
.art-points {
	display: grid;
	gap: 16px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.art-point {
	display: flex;
	gap: 18px;
	padding: 22px 24px;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	background: #FFF;
	scroll-margin-top: 110px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.art-point:hover {
	transform: translateX(4px);
	border-color: transparent;
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.art-point__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, #3b82f6, #174EBD);
	box-shadow: 0 8px 18px rgba(23, 78, 189, 0.25);
	color: #FFF;
	font-size: 20px;
	font-weight: 800;
}

.art-points--check .art-point__num {
	background: linear-gradient(135deg, #34d399, #059669);
	box-shadow: 0 8px 18px rgba(5, 150, 105, 0.22);
}

.art-point h3 {
	margin: 2px 0 8px;
	font-size: 19px;
	line-height: 1.45;
}

.art-point p {
	color: #475569;
	font-size: 16.5px;
	line-height: 1.85 !important;
}

/* กล่องสรุป */
.art-callout {
	display: flex;
	gap: 16px;
	margin: 8px 0 32px;
	padding: 22px 24px;
	border-radius: 18px;
	background: #fff8e8;
	border: 1px solid #fde7b0;
}

.art-callout i {
	flex-shrink: 0;
	margin-top: 4px;
	color: #f59e0b;
	font-size: 24px;
}

.art-callout p {
	color: #78350f !important;
	font-weight: 600;
}

.art-figure {
	margin: 0 0 32px;
}

.art-figure img {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: 20px;
}

/* ปุ่มแชร์ */
.art-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid #e2e8f0;
}

.art-share strong {
	margin-right: 6px;
	color: #0f172a;
}

.art-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	color: #FFF !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.art-share__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.art-share__btn--facebook { background: #1877F2; }
.art-share__btn--line { background: #06C755; font-size: 19px; }

.art-share__copy {
	background: #0f172a;
}

.art-share__copy.is-copied {
	background: #16a34a;
}

/* แถบข้าง */
.art-aside {
	position: sticky;
	top: 110px;
	display: grid;
	gap: 18px;
}

.art-toc {
	padding: 22px;
	border-radius: 18px;
	background: #f4f7fd;
}

.art-toc > strong {
	display: block;
	margin-bottom: 12px;
	color: #0f172a;
	font-size: 16px;
}

.art-toc > strong i {
	margin-right: 6px;
	color: #5A88E3;
}

.art-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.art-toc li {
	counter-increment: toc;
}

.art-toc a {
	position: relative;
	display: block;
	padding: 9px 12px 9px 40px;
	border-radius: 10px;
	color: #475569 !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}

.art-toc a::before {
	content: counter(toc);
	position: absolute;
	top: 8px;
	left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #dbe5f8;
	color: #174EBD;
	font-size: 12px;
	font-weight: 800;
}

.art-toc a:hover,
.art-toc a.is-active {
	background: #FFF;
	color: #174EBD !important;
}

.art-toc a.is-active::before {
	background: #174EBD;
	color: #FFF;
}

.art-aside-cta {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 26px 22px;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	background: #FFF;
	text-align: center;
}

.art-aside-cta strong {
	margin-top: 8px;
	color: #0f172a;
	font-size: 17px;
}

.art-aside-cta p {
	margin-bottom: 6px !important;
	font-size: 15px;
}

.art-aside-cta .pg-btn {
	width: 100%;
	padding: 11px 16px;
	font-size: 15px;
}

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

	.art-body {
		max-width: none;
	}

	.art-aside {
		position: static;
	}

	.art-cover {
		margin-top: -72px;
	}
}

@media (max-width: 575px) {
	.art-hero {
		padding-bottom: 96px;
	}

	.art-body {
		font-size: 16.5px;
	}

	.art-lead {
		padding: 18px 18px;
		font-size: 17px;
	}

	.art-point {
		gap: 14px;
		padding: 18px;
	}

	.art-point__num {
		width: 40px;
		height: 40px;
		font-size: 17px;
	}

	.art-cover img {
		border-radius: 18px;
	}
}

/* ---- ส่วนแนะนำต่อจากแบนเนอร์ หน้าแรก (page-main.php) — ไม่ใช้ชื่อ .home-intro เพราะซ้ำกับคลาสของธีม Porto ---- */
.home-welcome {
	padding: 64px 0 72px;
	overflow: hidden;
	background:
		radial-gradient(circle at 95% 10%, rgba(56, 189, 248, 0.16), transparent 35%),
		radial-gradient(circle at 0% 100%, rgba(23, 78, 189, 0.08), transparent 40%),
		linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.home-welcome__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 48px;
	align-items: center;
}

.home-welcome__title {
	margin-top: 16px !important;
	font-size: clamp(26px, 2.8vw, 38px) !important;
	line-height: 1.35 !important;
	text-wrap: balance;
}

.home-welcome__lead {
	margin-top: 14px !important;
	font-size: 17.5px;
}

.home-welcome__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 26px;
	padding: 0;
	list-style: none;
}

.home-welcome__badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid #dbe5f8;
	border-radius: 999px;
	background: #FFF;
	color: #0f172a;
	font-size: 14.5px;
	font-weight: 600;
}

.home-welcome__badges i {
	color: #174EBD;
}

/* การ์ดเพจ Facebook */
.home-fb {
	padding: 16px;
	border-radius: 22px;
	background: #FFF;
	box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

.home-fb__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 4px 14px;
}

.home-fb__head strong {
	display: block;
	color: #0f172a;
	font-size: 16px;
	line-height: 1.3;
}

.home-fb__head small {
	color: #64748b;
	font-size: 13px;
}

.home-fb__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #1877F2;
	color: #FFF;
	font-size: 18px;
}

.home-fb__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569 !important;
	font-size: 14px;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}

.home-fb__link:hover {
	background: #1877F2;
	color: #FFF !important;
}

.home-fb .consent-embed {
	margin: 0 auto;
}

/* ---- โรงงานของเรา หน้าแรก (page-main.php) ---- */
.home-factory__head {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 48px;
	align-items: end;
	margin-bottom: 36px;
}

.home-factory__head h2 {
	margin: 14px 0 14px;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.3;
}

.home-factory__aside .pg-checks {
	margin: 0 0 20px;
}

/* แกลเลอรีแบบ bento: รูปแรกใหญ่ 2x2 */
.home-factory__bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 190px;
	gap: 14px;
}

.home-factory__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 18px;
	background: #e2e8f0;
}

.home-factory__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.home-factory__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.home-factory__item:hover img,
.home-factory__item:focus-visible img {
	transform: scale(1.06);
}

.home-factory__item:hover .pg-gallery__zoom,
.home-factory__item:focus-visible .pg-gallery__zoom {
	opacity: 1;
}

.home-factory__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.55);
	color: #FFF;
	font-size: 22px;
	font-weight: 700;
}

@media (max-width: 991px) {
	.home-welcome__grid,
	.home-factory__head {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.home-fb {
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
	}

	.home-factory__bento {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 160px;
	}
}

@media (max-width: 575px) {
	.home-welcome {
		padding: 44px 0 52px;
	}

	.home-factory__bento {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 140px;
		gap: 10px;
	}
}