/* Sub-banner — การ์ดลัดใต้สไลด์หน้าแรก (โหลดไฟล์นี้หลัง style.css และไฟล์ breakpoint ทั้งหมด) */
#sub-banner {
	--sb-rgb: 94, 100, 168;
	--sb-ink: #1f2133;
	--sb-muted: #6b6e80;
	position: relative;
	z-index: 3;
	padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	background: transparent;
	box-shadow: none;
}
#sub-banner .container.sb-wrap { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important; padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5) !important; }
#sub-banner .ico { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; fill: currentColor; }
#sub-banner .sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.5rem); margin-top: clamp(-4.5rem, -5vw, -2.5rem); }
#sub-banner .sb-1 { --c: #534ab7; --c-rgb: 83, 74, 183; }
#sub-banner .sb-2 { --c: #1d9e75; --c-rgb: 29, 158, 117; }
#sub-banner .sb-3 { --c: #ba7517; --c-rgb: 186, 117, 23; }
#sub-banner .sb-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(.8rem, 1.2vw, 1.1rem);
	min-width: 0;
	padding: clamp(1rem, 1.6vw, 1.4rem) clamp(1rem, 1.8vw, 1.6rem);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.7);
	border-radius: 18px;
	color: var(--sb-ink);
	background: rgba(255,255,255,.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 22px 40px -22px rgba(var(--sb-rgb), .55), 0 2px 6px rgba(0,0,0,.05);
	transition: transform .25s, box-shadow .25s;
}
#sub-banner .sb-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c); }
#sub-banner .sb-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(var(--c-rgb), .07); transition: transform .35s; }
#sub-banner .sb-card:hover, #sub-banner .sb-card:focus-visible { color: var(--sb-ink); transform: translateY(-4px); box-shadow: 0 28px 48px -22px rgba(var(--c-rgb), .6), 0 2px 6px rgba(0,0,0,.05); }
#sub-banner .sb-card:hover::after { transform: scale(1.6); }
#sub-banner .sb-card:focus-visible { outline: 3px solid rgba(var(--c-rgb), .35); outline-offset: 2px; }
#sub-banner .sb-ic { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: clamp(46px, 4.2vw, 58px); height: clamp(46px, 4.2vw, 58px); border-radius: 15px; font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: #fff; background: var(--c); box-shadow: 0 10px 20px -8px rgba(var(--c-rgb), .75); transition: transform .25s; }
#sub-banner .sb-card:hover .sb-ic { transform: rotate(-6deg) scale(1.05); }
#sub-banner .sb-text { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
#sub-banner .sb-text strong { font-size: clamp(1rem, .8rem + .45vw, 1.2rem); font-weight: 600; line-height: 1.25; color: var(--c); }
#sub-banner .sb-text small { margin-top: .15rem; font-size: .86rem; line-height: 1.35; color: var(--sb-muted); }
#sub-banner .sb-go { position: relative; z-index: 1; font-size: .95rem; color: rgba(var(--c-rgb), .5); transition: transform .25s, color .25s; }
#sub-banner .sb-card:hover .sb-go { color: var(--c); transform: translateX(4px); }
/* ยกปุ่มเลื่อนสไลด์และจุดบอกตำแหน่งขึ้น ไม่ให้การ์ดทับ */
#BannerSlider.with-sub-banner .carousel-indicators { margin-bottom: clamp(3rem, 5.5vw, 5.25rem); }
#BannerSlider.with-sub-banner .carousel-control-prev, #BannerSlider.with-sub-banner .carousel-control-next { bottom: calc(clamp(2.5rem, 5vw, 4.5rem) + 1.25rem) !important; }
/* Tablet */
@media (max-width: 991.98px) {
	#sub-banner .sb-card { flex-direction: column; text-align: center; gap: .6rem; }
	#sub-banner .sb-go { display: none; }
}
/* Mobile: การ์ดเล็ก 3 ช่อง ไม่ลอยทับสไลด์ */
@media (max-width: 575.98px) {
	#sub-banner { padding-top: .75rem; }
	#sub-banner .sb-grid { gap: .5rem; margin-top: 0; }
	#sub-banner .sb-card { padding: .85rem .4rem .75rem; border: 1px solid rgba(var(--sb-rgb), .1); border-radius: 14px; box-shadow: 0 10px 22px -16px rgba(var(--sb-rgb), .6); }
	#sub-banner .sb-ic { width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem; }
	#sub-banner .sb-text strong { font-size: .82rem; }
	#sub-banner .sb-text small { display: none; }
	#BannerSlider.with-sub-banner .carousel-indicators { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	#sub-banner * , #sub-banner *::after { transition: none !important; }
}