/* ==========================================================================
   ส่วนประกอบที่เขียนขึ้นเอง: slider, gallery, lightbox, carousel, FAB, cookie consent
   ========================================================================== */
:root {
	--brand-1: #00b7e1;
	--brand-2: #0056dd;
	--call-1: #ff9a1f;
	--call-2: #ff6a00;
	--line-1: #06c755;
	--line-2: #04a845;
	--fab-bar-h: 0px;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10000;
	padding: 8px 14px;
	background: #fff;
	color: var(--brand-2);
	border-radius: 6px;
}

/* ---------- แถบข้อมูลติดต่อด้านบน ---------- */
.topbar-promo {
	width: 100%;
	background-image: linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 100%);
	text-align: center;
	padding: 12px 8px;
	color: #fff;
}
.topbar-promo-title {
	display: block;
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	text-transform: uppercase;
	word-spacing: -0.5px;
}
.topbar-promo-contact {
	font-size: 17px;
	margin-top: 2px;
}
.topbar-promo-contact a {
	color: #fff;
	text-decoration: underline;
}
.topbar-promo-line {
	display: inline-block;
	margin-left: 6px;
}

/* ---------- เมนูแอดมินใน nav ---------- */
#header .nav-admin > .dropdown-item {
	color: var(--brand-2);
}
#header .nav-admin .dropdown-menu .dropdown-item i {
	width: 20px;
	margin-right: 6px;
	text-align: center;
	opacity: .8;
}

/* ---------- 1. IMAGE SLIDER (ไม่มี pan / zoom) ---------- */
.hs-slider {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2 / 1;
	max-height: 800px;
	width: 100%;
	background: #0b1e3a;
	isolation: isolate;
}
.hs-track {
	position: absolute;
	inset: 0;
}
.hs-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease, visibility 0s linear .9s;
}
.hs-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .9s ease, visibility 0s;
	z-index: 1;
}
.hs-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hs-caption {
	position: absolute;
	left: 50%;
	bottom: 56px;
	transform: translateX(-50%);
	width: min(92%, 1100px);
	padding: 18px 24px;
	border-radius: 14px;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(2px);
	color: #fff;
	text-align: center;
	font-size: clamp(16px, 2.6vw, 34px);
	line-height: 1.45;
}
.hs-arrow,
.hs-toggle {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--brand-2);
	font-size: 18px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.hs-arrow:hover,
.hs-toggle:hover {
	background: #fff;
	transform: scale(1.06);
}
.hs-prev { left: 16px; top: 50%; margin-top: -23px; }
.hs-next { right: 16px; top: 50%; margin-top: -23px; }
.hs-toggle {
	right: 16px;
	bottom: 14px;
	width: 34px;
	height: 34px;
	font-size: 12px;
}
.hs-dots {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 18px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.hs-dot {
	width: 28px;
	height: 8px;
	padding: 0;
	border: 2px solid var(--brand-2);
	border-radius: 10px;
	background: rgba(255, 255, 255, .8);
	cursor: pointer;
	transition: width .3s, background .3s;
}
.hs-dot[aria-current="true"] {
	width: 44px;
	background: var(--brand-2);
}
.hs-single .hs-arrow,
.hs-single .hs-toggle,
.hs-single .hs-dots {
	display: none;
}
.hs-slider :focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 2px;
}
@media (max-width: 767px) {
	.hs-slider { aspect-ratio: 16 / 10; }
	.hs-arrow { width: 36px; height: 36px; margin-top: -18px; font-size: 14px; }
	.hs-prev { left: 8px; }
	.hs-next { right: 8px; }
	.hs-caption { bottom: 40px; padding: 10px 14px; }
	.hs-dots { bottom: 12px; }
	.hs-toggle { display: none; }
}

/* ---------- 2. GALLERY (justified grid) ---------- */
.jg-gallery {
	--row-h: 160px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.jg-gallery::after {
	content: "";
	flex-grow: 999999;
}
.jg-item {
	position: relative;
	display: block;
	flex-grow: calc(var(--w) / var(--h));
	flex-basis: calc(var(--row-h) * var(--w) / var(--h));
	aspect-ratio: var(--w) / var(--h);
	overflow: hidden;
	border-radius: 10px;
	background: #e9eef5;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
.jg-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jg-item::after {
	content: "\f00e";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 26px;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s;
}
.jg-item:hover::after,
.jg-item:focus-visible::after {
	opacity: 1;
}
@media (max-width: 575px) {
	.jg-gallery { --row-h: 110px; gap: 4px; }
}

/* ---------- LIGHTBOX ---------- */
.lb-open,
.lb-open body {
	overflow: hidden;
}
.lb {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 10, 20, .92);
	padding: 56px 64px;
}
.lb[hidden] {
	display: none;
}
.lb-figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lb-img {
	max-width: 100%;
	max-height: calc(100vh - 150px);
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
	transition: opacity .2s;
}
.lb.is-loading .lb-img {
	opacity: .3;
}
.lb-caption {
	margin-top: 10px;
	color: #e8eef7;
	font-size: 15px;
	text-align: center;
}
.lb-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	color: #fff;
}
.lb-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}
.lb-btn:hover {
	background: rgba(255, 255, 255, .28);
}
.lb-prev,
.lb-next {
	position: absolute;
	top: 50%;
	margin-top: -22px;
}
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-single .lb-prev,
.lb-single .lb-next {
	display: none;
}
@media (max-width: 575px) {
	.lb { padding: 56px 8px; }
	.lb-prev, .lb-next { top: auto; bottom: 14px; margin: 0; }
	.lb-prev { left: calc(50% - 56px); }
	.lb-next { right: calc(50% - 56px); }
	.lb-img { max-height: calc(100vh - 190px); }
}

/* ---------- 3. CENTER CAROUSEL ---------- */
.cs-carousel {
	position: relative;
}
.cs-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 14px max(16px, calc(50% - 150px));
	-webkit-overflow-scrolling: touch;
}
.cs-track::-webkit-scrollbar {
	display: none;
}
.cs-item {
	flex: 0 0 300px;
	scroll-snap-align: center;
	margin: 0;
	transition: transform .35s, opacity .35s;
	opacity: .75;
	transform: scale(.94);
}
.cs-item.is-center {
	opacity: 1;
	transform: scale(1);
}
.cs-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .38);
}
.cs-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.cs-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c5cfdd;
	cursor: pointer;
}
.cs-dot[aria-current="true"] {
	background: var(--brand-2);
	transform: scale(1.25);
}
@media (max-width: 575px) {
	.cs-item { flex-basis: 78vw; }
	.cs-track { padding-left: 11vw; padding-right: 11vw; gap: 12px; }
}

/* ---------- FAQ (AEO) ---------- */
.faq-list .accordion-button {
	font-weight: 600;
	color: var(--brand-2);
}
.faq-list .accordion-button:not(.collapsed) {
	background: #eef5ff;
	box-shadow: none;
}
.faq-answer {
	color: #444;
	line-height: 1.7;
}

/* ---------- FLOATING ACTION BUTTON (แสดงตลอด ไม่ต้องกด toggle) ---------- */
.fab-contact {
	position: fixed;
	right: 18px;
	bottom: 22px;
	z-index: 1040;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.fab-contact-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 18px 7px 7px;
	border-radius: 999px;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
	transition: transform .2s ease, box-shadow .2s ease;
	font-family: 'Noto Sans Thai', sans-serif;
}
.fab-contact-item:hover,
.fab-contact-item:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.fab-call { background: linear-gradient(135deg, var(--call-1), var(--call-2)); }
.fab-line { background: linear-gradient(135deg, var(--line-1), var(--line-2)); }
.fab-contact-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	font-size: 20px;
	flex-shrink: 0;
}
.fab-line .fab-contact-icon {
	font-size: 25px;
}
.fab-call .fab-contact-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .8);
	animation: fab-pulse 2s ease-out infinite;
}
@keyframes fab-pulse {
	from { transform: scale(1); opacity: .9; }
	to { transform: scale(1.6); opacity: 0; }
}
.fab-contact-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.fab-contact-label {
	font-size: 12px;
	opacity: .92;
}
.fab-contact-value {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .2px;
}
@media (max-width: 575px) {
	:root { --fab-bar-h: 64px; }
	body { padding-bottom: var(--fab-bar-h); }
	.fab-contact {
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: row;
		gap: 0;
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
	}
	.fab-contact-item {
		flex: 1;
		justify-content: center;
		margin: 0 4px;
		padding: 6px 10px;
		box-shadow: none;
	}
	.fab-contact-icon { width: 34px; height: 34px; font-size: 16px; }
	.fab-line .fab-contact-icon { font-size: 20px; }
	.fab-contact-value { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.fab-call .fab-contact-icon::after { animation: none; }
	.hs-slide, .cs-item, .fab-contact-item { transition: none; }
}

/* ---------- COOKIE CONSENT ---------- */
.cc-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(16px + var(--fab-bar-h));
	z-index: 1050;
	display: flex;
	justify-content: center;
}
.cc-banner[hidden] {
	display: none;
}
.cc-banner-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 1100px;
	padding: 16px 20px;
	border-radius: 16px;
	background: #fff;
	color: #333;
	box-shadow: 0 12px 40px rgba(10, 30, 60, .25);
	border: 1px solid #e3e9f2;
}
.cc-title {
	display: block;
	color: var(--brand-2);
	margin-bottom: 4px;
}
.cc-banner-text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}
.cc-banner-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.cc-visible .fab-contact {
	visibility: hidden;
}
.cc-option {
	padding: 12px 0;
	border-bottom: 1px solid #eef1f5;
}
.cc-option:last-child {
	border-bottom: 0;
}
@media (max-width: 767px) {
	.cc-banner { left: 8px; right: 8px; bottom: 8px; }
	.cc-banner-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
	.cc-banner-actions { flex-wrap: wrap; }
	.cc-banner-actions .btn { flex: 1; }
}

/* ---------- FOOTER ---------- */
#footer.site-footer {
	margin: 0;
	padding: 0;
	border: 0;
	background: linear-gradient(180deg, #0b1f3f 0%, #07152c 100%);
	box-shadow: none;
	color: #b9c6db;
	font-size: 15px;
}
#footer.site-footer p,
#footer.site-footer li,
#footer.site-footer span,
#footer.site-footer dt {
	color: inherit;
}
#footer.site-footer .sf-cta,
#footer.site-footer .sf-cta p {
	color: #fff;
}
.site-footer a {
	color: #dbe6f7;
	text-decoration: none;
	transition: color .2s;
}
.site-footer a:hover,
.site-footer a:focus-visible {
	color: #fff;
	text-decoration: none;
}

/* แถบชวนติดต่อ */
.sf-cta {
	background: linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 100%);
	color: #fff;
}
.sf-cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	padding: 28px 0;
}
.sf-cta-title {
	margin: 0 0 4px;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}
.sf-cta-text {
	margin: 0;
	opacity: .9;
	font-size: 14px;
}
.sf-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sf-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
	transition: transform .2s, box-shadow .2s;
}
.sf-btn:hover,
.sf-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}
.sf-btn i { font-size: 1.2em; }
.sf-btn-call { background: linear-gradient(135deg, var(--call-1), var(--call-2)); }
.sf-btn-line { background: linear-gradient(135deg, var(--line-1), var(--line-2)); }

/* คอลัมน์หลัก */
.sf-main {
	padding-top: 56px;
	padding-bottom: 28px;
}
.sf-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: #fff !important;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
}
.sf-brand small {
	display: block;
	font-size: .8rem;
	font-weight: 500;
	color: #8fb3e8;
}
.sf-brand-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
	font-size: 22px;
	box-shadow: 0 8px 20px rgba(0, 120, 230, .35);
}
.sf-about {
	margin: 0 0 18px;
	line-height: 1.8;
}
.sf-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-badges li {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	color: #dbe6f7;
}
.sf-badges i { color: var(--brand-1); margin-right: 4px; }

.sf-heading {
	position: relative;
	margin: 6px 0 18px;
	padding-bottom: 10px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	color: #fff;
}
.sf-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
}
.sf-links {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-links li + li { margin-top: 10px; }
.sf-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sf-links a::before {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 11px;
	color: var(--brand-1);
	transition: transform .2s;
}
.sf-links a:hover::before { transform: translateX(3px); }

.sf-contact {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.sf-contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.sf-contact li + li { margin-top: 12px; }
.sf-contact i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
	color: var(--brand-1);
	flex-shrink: 0;
}
.sf-contact .fa-line { color: var(--line-1); font-size: 18px; }
.sf-contact small {
	display: block;
	font-size: 12px;
	color: #8195b5;
}
.sf-contact a { font-weight: 600; color: #fff; }
.sf-qr {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	font-size: 12px;
	line-height: 1.5;
	color: #b9c6db !important;
}
.sf-qr img {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	background: #fff;
	padding: 4px;
	flex-shrink: 0;
}

/* สถิติ */
.sf-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}
.sf-stat {
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
}
.sf-stat dt {
	font-size: 12px;
	font-weight: 400;
	color: #8195b5;
}
.sf-stat dd {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.sf-stat-main {
	background: linear-gradient(135deg, rgba(0, 183, 225, .22), rgba(0, 86, 221, .22));
	border-color: rgba(0, 183, 225, .3);
}
.sf-stat-main dd { font-size: 1.35rem; }

/* คำค้น */
.sf-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.sf-tags-label {
	margin-right: 4px;
	font-size: 13px;
	color: #8195b5;
}
.sf-tag {
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-size: 13px;
	color: #b9c6db !important;
}
.sf-tag:hover {
	background: rgba(0, 183, 225, .25);
	color: #fff !important;
}

/* แถบล่างสุด */
.sf-bottom {
	background: #050f20;
	font-size: 13px;
	color: #8195b5;
}
.sf-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	padding-top: 18px;
	padding-bottom: 18px;
}
.sf-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.sf-legal a,
.sf-legal button {
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	color: #a9b8d0;
	cursor: pointer;
}
.sf-legal a:hover,
.sf-legal button:hover {
	color: #fff;
}

@media (max-width: 767px) {
	.sf-cta-inner { padding: 22px 0; }
	.sf-cta-actions, .sf-cta-actions .sf-btn { width: 100%; }
	.sf-cta-actions .sf-btn { justify-content: center; }
	.sf-main { padding-top: 40px; }
	.sf-qr span { display: none; }
	.sf-bottom-inner { flex-direction: column; text-align: center; }
	.sf-legal { justify-content: center; }
}

/* ---------- หน้านโยบาย ---------- */
.policy-content {
	max-width: 900px;
	margin: 0 auto;
	line-height: 1.8;
	color: #444;
}
.policy-content h2 {
	font-size: 1.3rem;
	margin-top: 2rem;
	color: var(--brand-2);
}
.policy-content table {
	width: 100%;
	font-size: 14px;
}
.policy-meta {
	color: #777;
	font-size: 14px;
}

/* ---------- แอดมิน ---------- */
.admin-card {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 5px 20px #e1e1e1;
}
.admin-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}
.admin-tile {
	display: block;
	padding: 18px 12px;
	border-radius: 10px;
	text-align: center;
	color: #fff !important;
	background: linear-gradient(to bottom, #0055fb 0%, #0a02d3 100%);
	text-decoration: none !important;
	transition: transform .2s, box-shadow .2s;
}
.admin-tile i {
	display: block;
	font-size: 30px;
	margin-bottom: 6px;
}
.admin-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 20px #959595;
}
.admin-tile-danger {
	background: linear-gradient(to bottom, #e5484d 0%, #b3141a 100%);
}

/* ---------- การ์ดผลงาน ---------- */
.card-product {
	text-decoration: none !important;
}
.card-product-img {
	background-size: cover;
	background-position: center center;
	border-radius: 10px;
	transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.card-product:hover .card-product-img,
.card-product:focus-visible .card-product-img {
	transform: translateY(-8px);
	box-shadow: 0 4px 20px #00000082;
}
.card-product-shade {
	position: relative;
	width: 100%;
	padding-top: 65%;
	border-radius: 10px;
	background-image: linear-gradient(0deg, #000 3%, #FFF0 28%);
}
.card-product-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 8px 5% 8px;
	font-size: 110%;
	line-height: 130%;
}

/* ---------- หน้าแรก: ส่วนแนะนำ (intro) ---------- */
.intro {
	position: relative;
	padding: 56px 0 40px;
	background:
		radial-gradient(900px 420px at 100% 0%, rgba(0, 183, 225, .12), transparent 70%),
		radial-gradient(700px 380px at 0% 100%, rgba(0, 86, 221, .08), transparent 70%),
		#f7faff;
}
.intro-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff;
	color: var(--brand-2);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(0, 86, 221, .12);
}
.intro-title {
	margin: 16px 0 14px;
	font-size: clamp(1.55rem, 2.6vw, 2.35rem);
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: 0;
	color: #0b2a5b;
}
.intro-lead {
	margin-bottom: 22px;
	font-size: 1.05rem;
	line-height: 1.85;
	color: #4a5568;
}
.intro-highlights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}
.intro-highlights li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #e3ecfa;
	font-weight: 600;
	color: #1d3557;
}
.intro-highlights i {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
	color: #fff;
	font-size: 14px;
	flex-shrink: 0;
}
.intro-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.intro-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 22px 10px 12px;
	border-radius: 16px;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
	transition: transform .2s, box-shadow .2s;
}
.intro-btn:hover,
.intro-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}
.intro-btn > i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .22);
	font-size: 20px;
}
.intro-btn-line > i {
	font-size: 26px;
}
.intro-btn small {
	display: block;
	font-size: 12px;
	font-weight: 500;
	opacity: .9;
}
.intro-btn-call { background: linear-gradient(135deg, var(--call-1), var(--call-2)); }
.intro-btn-line { background: linear-gradient(135deg, var(--line-1), var(--line-2)); }

/* ภาพแบบ mosaic: ภาพแรกใหญ่ 2x2 */
.intro-mosaic {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: clamp(110px, 12vw, 165px);
	gap: 10px;
}
.intro-mosaic::after,
.intro-strip::after {
	content: none;
}
.intro-mosaic-item,
.intro-strip-item {
	aspect-ratio: auto;
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(11, 42, 91, .14);
}
.intro-mosaic-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.intro-mosaic-item img,
.intro-strip-item img {
	transition: transform .4s ease;
}
.intro-mosaic-item:hover img,
.intro-strip-item:hover img {
	transform: scale(1.05);
}
.intro-badge {
	position: absolute;
	left: -14px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 14px;
	background: #fff;
	color: #0b2a5b;
	box-shadow: 0 12px 30px rgba(11, 42, 91, .2);
	pointer-events: none;
}
.intro-badge strong {
	font-size: 2rem;
	line-height: 1;
	color: var(--call-2);
}
.intro-badge span {
	font-size: 12px;
	line-height: 1.3;
	font-weight: 600;
}

/* บริการแบบการ์ด */
.intro-subtitle {
	margin: 56px 0 22px;
	text-align: center;
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight: 700;
	letter-spacing: 0;
	color: #0b2a5b;
}
.intro-services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.intro-service {
	padding: 22px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid #e6eef9;
	box-shadow: 0 6px 18px rgba(11, 42, 91, .06);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.intro-service:hover {
	transform: translateY(-4px);
	border-color: #bcd4f7;
	box-shadow: 0 14px 30px rgba(11, 42, 91, .12);
}
.intro-service-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: 14px;
	background: linear-gradient(135deg, #e6f7fc, #e3edff);
	color: var(--brand-2);
	font-size: 22px;
}
.intro-service h3 {
	margin: 0 0 6px;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	color: #0b2a5b;
}
.intro-service p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.7;
	color: #5a6678;
}

/* แถบภาพผลงาน */
.intro-strip {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin-top: 28px;
}
.intro-strip-item {
	aspect-ratio: 3 / 4;
}

@media (max-width: 991px) {
	.intro { padding-top: 40px; }
	.intro-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.intro-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.intro-badge { left: 10px; }
}
@media (max-width: 575px) {
	.intro { padding: 32px 0 28px; }
	.intro-highlights { grid-template-columns: 1fr 1fr; gap: 8px; }
	.intro-highlights li { padding: 8px 10px; font-size: 14px; }
	.intro-cta { flex-direction: column; }
	.intro-btn { justify-content: flex-start; }
	.intro-mosaic { gap: 6px; grid-auto-rows: 26vw; }
	.intro-services { grid-template-columns: 1fr; gap: 12px; }
	.intro-service { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 16px; }
	.intro-service-icon { grid-row: span 2; width: 48px; height: 48px; margin: 0; font-size: 20px; }
	.intro-subtitle { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.intro-mosaic-item img, .intro-strip-item img, .intro-service, .intro-btn { transition: none; }
}

/* ---------- หน้าแรก: ผลงาน (works) ---------- */
.works {
	padding: 64px 0 56px;
	background: #fff;
}
.works-head {
	max-width: 760px;
	margin: 0 auto 32px;
	text-align: center;
}
.works-title {
	margin: 14px 0 10px;
	font-size: clamp(1.6rem, 2.8vw, 2.3rem);
	font-weight: 700;
	letter-spacing: 0;
	color: #0b2a5b;
}
.works-lead {
	margin: 0;
	line-height: 1.85;
	color: #5a6678;
}
.works-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.works-grid::after {
	content: none;
}
.works-item {
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(11, 42, 91, .12);
}
.works-item img {
	transition: transform .45s ease;
}
.works-item:hover img,
.works-item:focus-visible img {
	transform: scale(1.06);
}
.works-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	margin-top: 36px;
	padding: 26px 30px;
	border-radius: 22px;
	background:
		radial-gradient(500px 200px at 100% 0%, rgba(0, 183, 225, .35), transparent 70%),
		linear-gradient(120deg, #0b2a5b 0%, #0056dd 100%);
	color: #fff;
	box-shadow: 0 16px 40px rgba(0, 60, 160, .25);
}
.works-cta-title {
	margin: 0 0 4px;
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 700;
	color: #fff;
}
.works-cta-sub {
	margin: 0;
	max-width: 520px;
	font-size: .95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .85);
}
.works-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.works-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	border: 2px solid #cfe0f8;
	color: var(--brand-2) !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .2s, border-color .2s;
}
.works-more:hover {
	background: #eef5ff;
	border-color: var(--brand-2);
}
.works-more i { transition: transform .2s; }
.works-more:hover i { transform: translateX(4px); }

@media (max-width: 991px) {
	.works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
	.works { padding: 44px 0 40px; }
	.works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.works-item { border-radius: 12px; }
	.works-cta { padding: 20px; }
	.works-cta-actions, .works-cta-actions .intro-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.works-item img { transition: none; }
}