/* =========================================================
   Siam IT Center v3 – CSS เสริม (โมเดิร์น โทนสดใส / vibrant)
   เฉดสดจากสีแบรนด์: น้ำเงินสด #2563EB · แดงคอรัล #F0445A · ทองอำพัน #FBB024
   ========================================================= */

:root {
	--s3-blue: #2563EB;
	--s3-blue-deep: #1E40AF;
	--s3-sky: #4F8DFF;
	--s3-gold: #FBB024;
	--s3-red: #F0445A;
	--s3-ink: #1B2A4A;
	--s3-mist: #EAF1FF;
}

/* พื้นหลังเพจ + เมชสีสันสดใส */
body {
	background:
		radial-gradient(55% 50% at 10% 0%, rgba(37,99,235,0.14) 0%, rgba(37,99,235,0) 60%),
		radial-gradient(48% 42% at 92% 2%, rgba(251,176,36,0.18) 0%, rgba(251,176,36,0) 55%),
		radial-gradient(40% 40% at 70% 18%, rgba(240,68,90,0.10) 0%, rgba(240,68,90,0) 60%),
		#ffffff;
	background-repeat: no-repeat;
}

/* ---------- Navbar แบบ glass ลอย ---------- */
.siam2-header { position: sticky; top: 0; z-index: 100; }
.siam2-navbar {
	max-width: 1240px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.74);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid rgba(226, 233, 246, 0.9);
	border-radius: 999px;
	box-shadow: 0 10px 34px rgba(37, 99, 235, 0.14);
}
.siam2-brand__logo img { border-radius: 10px; }
.siam2-brand__title a, .siam2-brand__title {
	text-decoration: none !important;
	color: var(--s3-ink) !important;
	letter-spacing: -0.01em;
}
.siam2-brand__sub { margin: 0; }
.siam2-nav .wp-block-navigation-item__content {
	color: #35435c; border-radius: 999px; padding: 0.4rem 0.85rem;
	transition: background 0.18s ease, color 0.18s ease;
}
.siam2-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.siam2-nav .current-menu-item .wp-block-navigation-item__content {
	background: var(--s3-mist); color: var(--s3-blue);
}
.siam2-nav-cta .wp-block-button__link { box-shadow: 0 8px 20px rgba(37, 99, 235, 0.30); }

/* ---------- Eyebrow / badge / chip ---------- */
.siam2-pill-badge {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0;
	padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600;
	color: var(--s3-blue);
	background: var(--s3-mist);
	border: 1px solid #DCE7FF; border-radius: 999px;
}
.siam2-pill-badge .siam2-dot {
	width: 8px; height: 8px; border-radius: 999px; background: var(--s3-red);
	box-shadow: 0 0 0 4px rgba(240, 68, 90, 0.22);
}
.siam2-chip a, .wp-block-post-terms.siam2-chip a {
	display: inline-block; padding: 0.2rem 0.7rem; font-size: 0.78rem; font-weight: 600;
	color: var(--s3-blue); background: var(--s3-mist); border-radius: 999px; text-decoration: none;
}
.siam2-eyebrow { margin: 0; color: var(--s3-red) !important; }

/* ตัวอักษรไล่เฉดสดใส */
.siam2-grad-text {
	background: linear-gradient(95deg, #2563EB 0%, #4F8DFF 45%, #FBB024 105%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

.siam2-btn-lg .wp-block-button__link { font-size: 1.05rem; padding: 0.95rem 1.9rem; }

/* ---------- Hero ---------- */
.siam2-hero__trust { margin-top: 1.1rem; }
.siam2-bento .siam2-bento__card { box-shadow: 0 14px 34px rgba(37, 99, 235, 0.16); }
.siam2-bento .siam2-bento__wide { grid-column: 1 / -1; gap: 1rem; }
.siam2-bento__brand { transform: translateY(-8px); }
.siam2-bento__gold { transform: translateY(8px); }
.siam2-bento__icon {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 14px; color: var(--s3-blue);
	background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(251,176,36,0.20));
}

/* ---------- Stats ---------- */
.siam2-stats {
	background: #ffffff; border: 1px solid #E2E9F6;
	box-shadow: 0 14px 34px rgba(37, 99, 235, 0.10);
}
.siam2-stat { flex: 1 1 180px; text-align: center; }
.siam2-stat__num {
	margin: 0; font-family: 'Anuphan', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em;
	background: linear-gradient(120deg, #2563EB, #4F8DFF);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.siam2-stat:nth-child(2) .siam2-stat__num { background: linear-gradient(120deg, #FB9D24, #FBB024); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.siam2-stat:nth-child(3) .siam2-stat__num { background: linear-gradient(120deg, #F0445A, #FF6B7E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.siam2-stat:nth-child(4) .siam2-stat__num { background: linear-gradient(120deg, #FB8C3C, #FBB024); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.siam2-stat__label { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--s3-ink); opacity: 0.7; }

/* ---------- Services Bento Grid ---------- */
.siam2-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.siam2-svc-card {
	border: 1px solid #E2E9F6; box-shadow: 0 8px 26px rgba(37, 99, 235, 0.09);
	transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column;
}
.siam2-svc-card:hover { transform: translateY(-5px); box-shadow: 0 26px 54px rgba(37, 99, 235, 0.20); }
.siam2-svc-card--wide { grid-column: span 2; }
.siam2-svc-card--brand, .siam2-svc-card--gold { border: none; }
.siam2-svc-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 15px; margin-bottom: 1rem; color: var(--s3-blue);
	background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(79,141,255,0.20));
}
/* ไอคอนสลับสีให้สดใส */
.siam2-svc-grid .siam2-svc-card:nth-of-type(3) .siam2-svc-icon { color: var(--s3-gold); background: linear-gradient(135deg, rgba(251,176,36,0.16), rgba(255,209,102,0.26)); }
.siam2-svc-grid .siam2-svc-card:nth-of-type(4) .siam2-svc-icon { color: var(--s3-red); background: linear-gradient(135deg, rgba(240,68,90,0.14), rgba(255,107,126,0.24)); }
.siam2-svc-grid .siam2-svc-card:nth-of-type(5) .siam2-svc-icon { color: var(--s3-blue); background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(79,141,255,0.22)); }
.siam2-svc-icon--ghost { color: #fff; background: rgba(255,255,255,0.20); }
.siam2-svc-icon--ink { color: #7a4d00; background: rgba(255,255,255,0.45); }
.siam2-svc-link a { font-weight: 700; text-decoration: none; color: var(--s3-blue); }
.siam2-svc-link a:hover { color: var(--s3-red); }
.siam2-svc-link--light a { color: #fff; }
.siam2-svc-link--ink a { color: #7a4d00; }
.siam2-svc-card .wp-block-heading { margin-bottom: 0.4rem; }
.siam2-svc-link { margin-top: auto; padding-top: 0.6rem; }

/* ---------- Post cards ---------- */
.siam2-card {
	border: 1px solid #E2E9F6; box-shadow: 0 8px 26px rgba(37, 99, 235, 0.09);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.siam2-card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(37, 99, 235, 0.18); }
.siam2-card .wp-block-post-title a { text-decoration: none; }
.siam2-link-more a { font-weight: 700; text-decoration: none; color: var(--s3-blue); white-space: nowrap; }
.siam2-link-more a:hover { color: var(--s3-red); }

/* ---------- หน้าเนื้อหา ---------- */
.siam2-page-hero .wp-block-post-title, .siam2-page-hero h1 { letter-spacing: -0.02em; }
.entry-content figure.wp-block-image img, .wp-block-post-content figure.wp-block-image img { border-radius: 16px; }
.wp-block-table table { border-radius: 14px; overflow: hidden; border-collapse: separate; }
.wp-block-table thead { background: var(--s3-blue); color: #fff; }
.siam2-404 {
	background: linear-gradient(120deg, #2563EB, #4F8DFF 50%, #FBB024);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Footer ---------- */
.siam2-footer {
	background: linear-gradient(155deg, #1E40AF 0%, #2563EB 70%, #3B82F6 100%);
	border-radius: 32px 32px 0 0; color: #fff;
}
.siam2-footer .wp-block-site-title a { color: #fff !important; text-decoration: none; }
.siam2-footer a { color: var(--s3-mist); text-decoration: none; }
.siam2-footer a:hover { color: var(--s3-gold); }
.siam2-foot-nav .wp-block-navigation-item__content { color: var(--s3-mist); }
.siam2-foot-nav .wp-block-navigation-item__content:hover { color: var(--s3-gold); }
.siam2-foot-list { list-style: none; padding: 0; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.siam2-svc-grid { grid-template-columns: repeat(2, 1fr); }
	.siam2-svc-card--wide { grid-column: span 2; }
}
@media (max-width: 781px) {
	.siam2-navbar { border-radius: 22px; }
	.siam2-bento__brand, .siam2-bento__gold { transform: none; }
	.siam2-stat { flex-basis: 45%; }
}
@media (max-width: 600px) {
	.siam2-svc-grid { grid-template-columns: 1fr; }
	.siam2-svc-card--wide { grid-column: span 1; }
	.siam2-stat { flex-basis: 100%; }
	.siam2-footer { border-radius: 22px 22px 0 0; }
}
.siam2-nav .wp-block-navigation__responsive-container-open,
.siam2-nav .wp-block-navigation__responsive-container-close { color: var(--s3-blue); }