/* Style CSS Copyrigth 2024 by BusX */

/* ฟอนต์ทุกน้ำหนักอยู่ใน family เดียว เบราว์เซอร์จะได้ไม่ปลอมตัวหนา (faux bold) */
@font-face {
	font-family: 'SukhumvitSet-Text';
	src: url('../fonts/SukhumvitSet-Light.ttf');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SukhumvitSet-Text';
	src: url('../fonts/SukhumvitSet-Text.ttf');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SukhumvitSet-Text';
	src: url('../fonts/SukhumvitSet-Medium.ttf');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SukhumvitSet-Text';
	src: url('../fonts/SukhumvitSet-SemiBold.ttf');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SukhumvitSet-Text';
	src: url('../fonts/SukhumvitSet-Bold.ttf');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =============================================================
   Design Tokens - แหล่งความจริงเดียวของทั้งเว็บ
   แก้ที่นี่ที่เดียว สี / ระยะห่าง / ความกว้าง / จำนวนคอลัมน์
   เปลี่ยนตามทั้งเว็บทันที
   ============================================================= */
:root {
	/* Brand - น้ำเงิน Van 49 โทนสว่างขึ้นจากกรมท่าเดิม */
	--brand-050: #eef4fd;
	--brand-100: #dce8fa;
	--brand-200: #b9d0f4;
	--brand-300: #8fb4ec;
	--brand-500: #2563b8;
	--brand-600: #1d51a0;
	--brand-700: #17427f;

	/* Accent - ส้มจากสีรถ ใช้เน้นจุดเดียว ไม่ใช้เป็นพื้นใหญ่
	   300 = ส้มสว่าง สำหรับวางบนพื้นเข้ม เช่น ตัวหนังสือบนแบนเนอร์
	   700 = ส้มเข้ม สำหรับตัวหนังสือบนพื้นขาว ให้ผ่าน contrast */
	--accent-050: #fff4ea;
	--accent-300: #ff9d42;
	--accent-500: #f47b20;
	--accent-600: #dd6a12;
	--accent-700: #b4530b;

	/* Sea - สีทะเลจากภาพบางแสน ใช้เป็นสีรอง */
	--sea-500: #12a3b8;

	/* Neutral */
	--ink-900: #14202e;
	--ink-700: #3d4d61;
	--ink-500: #74869b;
	--ink-300: #a8b4c2;
	--line: #e6ebf2;
	--white: #ffffff;
	--surface: #ffffff;
	--surface-2: #f5f8fc;

	/* Status */
	--green: #06c755;
	--blue: #1877f2;

	/* Layout knobs - ปรับ Layout ทั้งเว็บจากตรงนี้ */
	--container: 1140px;
	--section-py: 56px;
	--gap: 24px;
	--gap-sm: 16px;
	--hero-h: 380px;
	--header-h: 116px;

	/* Overlay ทับรูป - ดรอปสีภาพลงเป็นเฉดดำ
	   --scrim-rgb        สีม่าน ใช้ร่วมกันทุกรูป
	   --hero-tint-alpha  ความเข้มม่านที่คลุมทั้งแบนเนอร์ (0 = ไม่คลุม)
	   --hero-scrim-alpha ความเข้มฝั่งที่มีตัวหนังสือ ให้อ่านออก */
	--scrim-rgb: 0, 0, 0;
	--hero-tint-alpha: 0.1;
	--hero-scrim-alpha: 0.46;

	/* จำนวนคอลัมน์ของแต่ละ section - เปลี่ยนเลขแล้ว grid ปรับตาม */
	--cols-services: 3;
	--cols-destinations: 3;
	--cols-news: 4;
	--cols-faqs: 2;
	--cols-gallery: 3;

	/* Shape */
	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 20px;
	--pill: 999px;

	/* Elevation - เงาบาง ไม่ทึบ */
	--shadow-sm: 0 1px 2px rgba(20, 32, 46, 0.04), 0 1px 3px rgba(20, 32, 46, 0.06);
	--shadow-md: 0 6px 18px rgba(20, 32, 46, 0.08);
	--shadow-lg: 0 18px 44px rgba(20, 32, 46, 0.12);
	--transition: 0.25s ease;

	/* Font Sizes */
	--fs-xs: 12px;
	--fs-sm: 14px;
	--fs-md: 16px;
	--fs-lg: 18px;
	--fs-xl: 20px;

	/* Font Weights - ตรงกับไฟล์ฟอนต์จริงใน assets/fonts */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--fs-title: 32px;
	--fw-title: 700;

	--fs-sub: 22px;
	--fw-sub: 700;

	--fc-title: var(--ink-900);
	--fc-sub: var(--ink-700);

	@media (max-width: 992px) {
		--section-py: 44px;
		--hero-h: 330px;
		--fs-title: 26px;
		--fs-sub: 20px;
	}

	@media (max-width: 768px) {
		--section-py: 36px;
		--gap: 16px;
		--hero-h: 280px;
		--fs-title: 22px;
		--fs-sub: 18px;
	}

	@media (max-width: 576px) {
		--hero-h: 250px;
	}

	@media (max-width: 400px) {
		--fs-title: 20px;
		--fs-sub: 16px;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'SukhumvitSet-Text', sans-serif;
	font-size: var(--fs-md);
	font-weight: var(--fw-normal);
	line-height: 1.65;
	color: var(--ink-700);
	background-color: var(--surface);
	-webkit-font-smoothing: antialiased;
}

/* ลิงก์ที่กระโดดมาหา section ต้องไม่มุดใต้ header ที่ปักอยู่ */
section[id],
div[id],
main[id] {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* โฟกัสด้วยคีย์บอร์ดต้องเห็นชัด */
:focus-visible {
	outline: 3px solid var(--brand-300);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background-color: var(--brand-100);
	color: var(--ink-900);
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

h1,
h2,
h3,
h4,
h5 {
	color: var(--ink-900);
	line-height: 1.35;
}

img {
	max-width: 100%;
}

/* ความกว้างของทุก container มาจาก --container ตัวเดียว */
.container,
.container-fluid {
	max-width: var(--container);
	width: 100%;
	margin-inline: auto;
}

.text-color {
	color: var(--brand-500);
}

.bg-gray {
	background-color: var(--surface-2);
}

/* Home sections - shared header */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 28px;

	h2 {
		position: relative;
		font-size: var(--fs-title);
		font-weight: var(--fw-title);
		color: var(--fc-title);
		margin: 0;
		padding-bottom: 12px;

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 48px;
			height: 3px;
			border-radius: var(--pill);
			background-color: var(--accent-500);
		}
	}

	.section-desc {
		font-size: var(--fs-sm);
		color: var(--ink-700);
		margin: 6px 0 0;
	}

	.view-all {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding-bottom: 14px;
		color: var(--brand-600);
		text-decoration: none;
		font-size: var(--fs-sm);
		font-weight: var(--fw-semibold);
		white-space: nowrap;
		transition: var(--transition);

		i {
			font-size: var(--fs-xs);
			transition: var(--transition);
		}

		&:hover {
			color: var(--accent-700);

			i {
				transform: translateX(3px);
			}
		}
	}

	@media (max-width: 576px) {
		& {
			gap: 8px;
			margin-bottom: 20px;
		}
	}
}

/* Button - ปุ่มหลักของเว็บ ใช้ได้ทั้ง <a> และ <button> */
.route-button {
	display: block;
	width: 100%;
	padding: 12px 20px;
	border: 1px solid var(--brand-500);
	border-radius: var(--pill);
	background-color: var(--brand-500);
	color: var(--white);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition);

	&:hover {
		background-color: var(--brand-600);
		border-color: var(--brand-600);
		color: var(--white);
	}
}

/* Language Switcher - shared by .navbar-top (desktop) and anywhere else it's reused */
.card-language {
	display: flex;
	align-items: center;
	gap: 2px;

	.btn-language {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 4px 10px;
		border-radius: var(--pill);
		color: var(--ink-700);
		font-size: var(--fs-sm);
		font-weight: var(--fw-medium);
		text-decoration: none;
		transition: var(--transition);

		img {
			width: 18px;
			height: 18px;
			border-radius: 50%;
			object-fit: cover;
		}

		&:hover {
			background-color: var(--brand-050);
			color: var(--brand-600);
		}

		&.active {
			/* background-color: var(--brand-050); */
			color: var(--brand-600);
			font-weight: var(--fw-semibold);
		}
	}

	.text-span {
		color: var(--line);
	}
}

/* Site Header - top utility bar + main navbar, stays pinned while scrolling */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background-color: var(--white);
	box-shadow: var(--shadow-sm);
}

/* Top Utility Bar - social channels + language, sits above the main navbar */
.navbar-top {
	background-color: var(--brand-050);
	border-bottom: 1px solid var(--line);

	.container-fluid {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.navbar-top-brand {
		display: inline-flex;

		img {
			width: 64px;
			height: auto;
		}
	}

	.navbar-top-right {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.navbar-top-social {
		display: flex;
		align-items: center;
		gap: 8px;

		a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: var(--white);
			color: var(--brand-500);
			font-size: 15px;
			line-height: 1;
			transition: var(--transition);

			&:hover {
				background-color: var(--brand-500);
				color: var(--white);
			}
		}
	}

	/* Hamburger - โชว์เฉพาะ mobile */
	.navbar-toggler {
		display: none;
		border: none !important;
		box-shadow: none !important;
		padding: 4px 8px;
		color: var(--ink-900);
		font-size: 24px;
		line-height: 1;
	}

	@media (max-width: 991px) {
		& {
			.navbar-toggler {
				display: inline-flex;
			}
		}
	}

	@media (max-width: 576px) {
		& {
			.navbar-top-brand img {
				width: 48px;
			}

			.navbar-top-right {
				gap: 6px;
			}
		}
	}
}

/* Main Navbar - พื้นขาว ตัวหนังสือเข้ม active ขีดเส้นใต้สีส้ม */
.navbar {
	background-color: var(--white);
	padding-top: 4px;
	padding-bottom: 4px;

	.navbar-nav {
		gap: 4px;
	}

	.nav-link {
		position: relative;
		padding: 10px 14px;
		color: var(--ink-700);
		font-size: var(--fs-sm);
		font-weight: var(--fw-medium);
		transition: var(--transition);

		&::after {
			content: "";
			position: absolute;
			left: 14px;
			right: 14px;
			bottom: 4px;
			height: 2px;
			border-radius: var(--pill);
			background-color: var(--accent-500);
			transform: scaleX(0);
			transform-origin: left;
			transition: var(--transition);
		}

		&:hover {
			color: var(--brand-600);
		}

		&.active,
		&.show {
			color: var(--brand-600);
			font-weight: var(--fw-semibold);

			&::after {
				transform: scaleX(1);
			}
		}
	}

	.navbar-action {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	@media (max-width: 991px) {
		& {
			padding-top: 0;
			padding-bottom: 0;

			.navbar-collapse {
				padding-bottom: 10px;
			}

			.nav-link {
				padding: 10px 4px;

				&::after {
					left: 4px;
					right: auto;
					width: 24px;
				}
			}

			.navbar-action {
				margin-top: 8px;
			}
		}
	}
}

/* =============================================================
   Hero Banner - ภาพเต็มความกว้าง + ข้อความทับด้านซ้าย
   ============================================================= */
.hero-banner {
	position: relative;
	background-color: var(--brand-700);

	.hero-media {
		position: relative;
		height: var(--hero-h);

		.owl-carousel,
		.owl-stage-outer,
		.owl-stage,
		.owl-item,
		.hero-banner-item {
			height: 100%;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

		/* ชั้นบน = ไล่เฉดฝั่งซ้ายให้ตัวหนังสืออ่านออก
		   ชั้นล่าง = ม่านสีแบรนด์คลุมทั้งภาพ ดรอปสีแบนเนอร์ลง */
		/* owl-carousel ตั้ง z-index: 1 ไว้ ม่านต้องสูงกว่านั้นถึงจะเห็น */
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 2;
			pointer-events: none;
			background:
				linear-gradient(100deg,
					rgba(var(--scrim-rgb), var(--hero-scrim-alpha)) 0%,
					rgba(var(--scrim-rgb), calc(var(--hero-scrim-alpha) * 0.62)) 40%,
					rgba(var(--scrim-rgb), 0) 78%),
				rgba(var(--scrim-rgb), var(--hero-tint-alpha));
		}
	}

	.hero-content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: var(--hero-h);
		z-index: 3;
		display: flex;
		align-items: center;
		pointer-events: none;

		.hero-body {
			max-width: 560px;
			pointer-events: auto;
		}

		.hero-title {
			font-size: 44px;
			font-weight: var(--fw-bold);
			color: var(--white);
			margin: 0 0 14px;

			span {
				color: var(--accent-300);
			}
		}

		.hero-text {
			font-size: var(--fs-lg);
			color: rgba(255, 255, 255, 0.88);
			margin: 0;
		}
	}

	.owl-nav {

		button.disabled {
			display: none !important;
		}

		button.owl-prev,
		button.owl-next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 42px;
			height: 42px;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.22) !important;
			color: var(--white) !important;
			font-size: var(--fs-lg);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: var(--transition);

			&:hover {
				background-color: var(--white) !important;
				color: var(--brand-600) !important;
			}
		}

		button.owl-prev {
			left: 20px;
		}

		button.owl-next {
			right: 20px;
		}

		@media (max-width: 992px) {
			& {
				display: none;
			}
		}
	}

	.owl-dots {
		position: absolute;
		/* ยกให้พ้นการ์ดค้นหาที่ลอยขึ้นมาทับขอบล่างแบนเนอร์ */
		bottom: 64px;
		right: 24px;
		display: flex;
		gap: 8px;

		/* แบนเนอร์รูปเดียวไม่ต้องโชว์จุด */
		&:has(.owl-dot:only-child) {
			display: none;
		}

		.owl-dot {
			span {
				background-color: rgba(255, 255, 255, 0.45) !important;
			}

			&.active span {
				background-color: var(--accent-500) !important;
			}
		}
	}

	@media (max-width: 1200px) {
		& {
			.hero-content .hero-title {
				font-size: 38px;
			}
		}
	}

	@media (max-width: 992px) {
		& {
			.hero-content .hero-title {
				font-size: 32px;
			}

			.hero-content .hero-text {
				font-size: var(--fs-md);
			}
		}
	}

	@media (max-width: 768px) {
		& {
			.hero-media {
				&::after {
					background:
						linear-gradient(180deg,
							rgba(var(--scrim-rgb), 0) 0%,
							rgba(var(--scrim-rgb), var(--hero-scrim-alpha)) 100%),
						rgba(var(--scrim-rgb), var(--hero-tint-alpha));
				}
			}

			/* เว้นล่างให้พ้นการ์ดค้นหาที่ลอยทับ 28px (.form-search .search-card) + ระยะหายใจ */
			.hero-content {
				align-items: flex-end;
				padding-bottom: 52px;

				.hero-body {
					max-width: 100%;
					text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
				}

				.hero-title {
					font-size: 28px;
				}
			}
		}
	}

	@media (max-width: 576px) {
		& {
			.hero-content {
				.hero-title {
					font-size: 24px;
				}

				.hero-text {
					font-size: var(--fs-sm);
					padding-bottom: 10px;
				}
			}
		}
	}
}

/* =============================================================
   Search / Reserve a Seat - การ์ดขาวลอยขึ้นทับ Hero
   ============================================================= */
.form-search {
	position: relative;
	padding: 0 0 var(--section-py);
	background-color: var(--surface);

	.search-card {
		position: relative;
		z-index: 3;
		margin-top: -46px;
		padding: 24px;
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
		background-color: var(--white);
		box-shadow: var(--shadow-lg);

		/* modal ของ BusX อยู่ใน stacking context z-index: 3 ตอนเปิดต้องยกการ์ดให้สูงกว่า .site-header (1030) */
		&:has(.modal-warpper.show, .modal-date.show, .modal-time.show, .modal-alert.show) {
			z-index: 10000;
		}
	}

	.box-centent {
		width: 100%;
		box-shadow: unset !important;

		.container-search .box-centent {
			padding: 0;
		}

		.form-search-trip {

			.card-origin,
			.card-destination,
			.card-departure,
			.card-return,
			.card-passenger {
				background-color: var(--white) !important;
			}
		}
	}

	@media (max-width: 768px) {
		& {
			.search-card {
				margin-top: -28px;
				padding: 20px 16px 24px;
				border-radius: var(--radius);
			}
		}
	}
}

/* =============================================================
   Our Services - 3 ทางลัด (เส้นทาง / เคาน์เตอร์ / พัสดุ)
   ============================================================= */
.our-services {
	padding: var(--section-py) 0;

	.section-content {
		display: grid;
		grid-template-columns: repeat(var(--cols-services), 1fr);
		gap: var(--gap);

		.service-card {
			display: flex;
			align-items: flex-start;
			gap: 16px;
			padding: 24px;
			border: 1px solid var(--line);
			border-radius: var(--radius);
			background-color: var(--white);
			text-decoration: none;
			color: inherit;
			transition: var(--transition);

			&:hover {
				border-color: var(--brand-200);
				box-shadow: var(--shadow-md);
				transform: translateY(-4px);

				.service-icon {
					background-color: var(--brand-500);
					color: var(--white);
				}
			}

			.service-icon {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 52px;
				height: 52px;
				border-radius: var(--radius-sm);
				background-color: var(--brand-050);
				color: var(--brand-500);
				transition: var(--transition);

				i {
					font-size: 24px;
				}
			}

			.service-body {
				display: flex;
				flex-direction: column;
				gap: 6px;

				.service-title {
					font-size: var(--fs-lg);
					font-weight: var(--fw-semibold);
					color: var(--ink-900);
				}

				.service-text {
					font-size: var(--fs-sm);
					color: var(--ink-700);
					line-height: 1.6;
				}
			}
		}

		@media (max-width: 992px) {
			& {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 576px) {
			& {
				grid-template-columns: 1fr;
			}
		}
	}
}

/* =============================================================
   Top Destinations - ใช้ภาพสถานที่ท่องเที่ยวจริง
   ============================================================= */
.destinations {
	padding: var(--section-py) 0;
	background-color: var(--surface-2);

	.section-content {
		display: grid;
		grid-template-columns: repeat(var(--cols-destinations), 1fr);
		gap: var(--gap);

		.route-card {
			display: flex;
			flex-direction: column;
			border: 1px solid var(--line);
			border-radius: var(--radius);
			background-color: var(--white);
			overflow: hidden;
			transition: var(--transition);

			&:hover {
				border-color: var(--brand-200);
				box-shadow: var(--shadow-md);
				transform: translateY(-4px);

				.route-image img {
					transform: scale(1.06);
				}
			}

			.route-image {
				position: relative;
				height: 190px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					transition: 0.5s ease;
				}

				.route-tag {
					position: absolute;
					left: 14px;
					bottom: 14px;
					z-index: 2;
					padding: 5px 12px;
					border-radius: var(--pill);
					background-color: rgba(255, 255, 255, 0.92);
					color: var(--brand-600);
					font-size: var(--fs-xs);
					font-weight: var(--fw-semibold);
				}

				&::after {
					content: "";
					position: absolute;
					inset: auto 0 0 0;
					height: 60%;
					background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0) 0%, rgba(var(--scrim-rgb), 0.45) 100%);
				}
			}

			.route-content {
				display: flex;
				flex-direction: column;
				flex: 1;
				padding: 18px 20px 20px;

				.route-path {
					display: flex;
					align-items: center;
					gap: 8px;
					font-size: var(--fs-md);
					font-weight: var(--fw-semibold);
					color: var(--ink-900);
					margin-bottom: 10px;

					i {
						color: var(--accent-500);
					}
				}

				.route-meta {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					gap: 10px;
					padding-bottom: 16px;
					margin-bottom: 16px;
					border-bottom: 1px solid var(--line);
					font-size: var(--fs-xs);
					color: var(--ink-700);

					.route-hours {
						display: flex;
						flex-direction: column;
						gap: 2px;

						.route-hours-label {
							font-size: var(--fs-xs);
						}

						.route-hours-time {
							display: inline-flex;
							align-items: center;
							gap: 6px;
							font-size: var(--fs-sm);
							font-weight: var(--fw-semibold);
							color: var(--ink-900);
						}
					}

					.route-price {
						color: var(--accent-700);
						font-weight: var(--fw-semibold);
						white-space: nowrap;
					}
				}

				/* หน้าตาปุ่มมาจาก .route-button ตัวกลาง เหลือแค่ตำแหน่งในการ์ด */
				.route-button {
					margin-top: auto;
				}
			}
		}

		@media (max-width: 992px) {
			& {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 576px) {
			& {
				grid-template-columns: 1fr;
			}
		}
	}
}

/* =============================================================
   News / Promotions
   ============================================================= */
.news-promotions {
	padding: var(--section-py) 0;
	background-color: var(--surface);

	.section-content {
		display: grid;
		grid-template-columns: repeat(var(--cols-news), 1fr);
		gap: var(--gap);

		.news-card {
			display: flex;
			flex-direction: column;
			color: inherit;
			text-decoration: none;
			background-color: var(--white);
			border: 1px solid var(--line);
			border-radius: var(--radius);
			overflow: hidden;
			transition: var(--transition);

			&:hover {
				border-color: var(--brand-200);
				box-shadow: var(--shadow-md);
				transform: translateY(-4px);

				.news-image img {
					transform: scale(1.06);
				}
			}

			.news-image {
				height: 170px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					transition: 0.5s ease;
				}
			}

			.news-content {
				padding: 16px 18px 20px;

				.news-date {
					display: inline-flex;
					align-items: center;
					gap: 6px;
					font-size: var(--fs-xs);
					color: var(--ink-700);
					margin-bottom: 6px;
				}

				.news-title {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					font-size: var(--fs-sm);
					font-weight: var(--fw-semibold);
					color: var(--ink-900);
					line-height: 1.55;
				}
			}
		}

		@media (max-width: 992px) {
			& {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 576px) {
			& {
				grid-template-columns: 1fr;
			}
		}
	}
}

/* =============================================================
   FAQs
   ============================================================= */
.faqs {
	padding: var(--section-py) 0;
	background-color: var(--surface-2);

	.section-content {
		display: grid;
		grid-template-columns: repeat(var(--cols-faqs), 1fr);
		gap: var(--gap-sm) var(--gap);
		align-items: start;

		.faq-item {
			border: 1px solid var(--line);
			border-radius: var(--radius);
			overflow: hidden;
			background: var(--white);
			transition: var(--transition);

			&:has(.faq-question[aria-expanded="true"]) {
				border-color: var(--brand-200);
				box-shadow: var(--shadow-md);
			}

			.faq-question {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 12px;
				width: 100%;
				padding: 18px 20px;
				border: none;
				background: var(--white);
				cursor: pointer;
				font-family: inherit;
				font-size: var(--fs-md);
				font-weight: var(--fw-semibold);
				color: var(--ink-900);
				text-align: start;

				.faq-icon {
					flex-shrink: 0;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 26px;
					height: 26px;
					border-radius: 50%;
					background-color: var(--brand-050);
					color: var(--brand-500);
					font-size: 13px;
					transition: var(--transition);
				}

				&[aria-expanded="true"] .faq-icon {
					background-color: var(--brand-500);
					color: var(--white);
					transform: rotate(180deg);
				}
			}

			.faq-answer {
				padding: 0 20px 20px;
				font-size: var(--fs-sm);
				color: var(--ink-700);
				line-height: 1.7;
			}
		}

		@media (max-width: 768px) {
			& {
				grid-template-columns: 1fr;
				gap: 12px;

				.faq-item {
					.faq-question {
						padding: 14px 16px;
						font-size: var(--fs-sm);
					}

					.faq-answer {
						padding: 0 16px 16px;
					}
				}
			}
		}
	}
}

/* =============================================================
   Gallery
   ============================================================= */
.gallery {
	padding: var(--section-py) 0;
	background-color: var(--surface);

	.card-content {
		.gallery-wrap {
			display: grid;
			grid-template-columns: repeat(var(--cols-gallery), 1fr);
			gap: var(--gap-sm);

			.gallery-item {
				border-radius: var(--radius);
				overflow: hidden;
				border: 1px solid var(--line);
				transition: var(--transition);

				a {
					display: block;
				}

				img {
					width: 100%;
					height: 220px;
					object-fit: cover;
					object-position: center;
					transition: 0.5s ease;
				}

				&:hover {
					box-shadow: var(--shadow-md);

					img {
						transform: scale(1.06);
					}
				}
			}

			@media (max-width: 768px) {
				& {
					grid-template-columns: repeat(2, 1fr);

					.gallery-item img {
						height: 180px;
					}
				}
			}

			@media (max-width: 480px) {
				& {
					grid-template-columns: 1fr;
				}
			}
		}
	}
}

/* Breadcrumb - shared across all inner page headers (.about, .contact-us, .timetables, .news, .news-detail) */
.text-header {
	h1 {
		color: var(--ink-900);
	}

	.breadcrumb-nav {
		margin-top: 8px;
		font-size: var(--fs-sm);
		color: var(--ink-700);

		a {
			color: var(--ink-700);
			text-decoration: none;

			&:hover {
				color: var(--brand-600);
				text-decoration: underline;
			}
		}

		span {
			margin: 0 4px;

			&:last-child {
				color: var(--brand-600);
				font-weight: var(--fw-medium);
				margin: 0 0 0 4px;
			}
		}
	}
}

.about {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: var(--container);
			width: 100%;
			padding: 0 0 var(--section-py);

			.text-header {
				margin: 44px 0 28px;

				h1 {
					font-weight: var(--fw-title);
					font-size: var(--fs-title);
				}
			}

			.content {
				display: flex;
				flex-direction: column;

				.content-card {
					background-color: var(--white);
					border: 1px solid var(--line);
					border-radius: var(--radius);
					padding: 28px;
					margin-bottom: var(--gap);

					p {
						font-size: var(--fs-md);
						color: var(--ink-700);
						line-height: 1.6;

						strong {
							font-weight: var(--fw-bold);
							color: var(--brand-500);
							margin-right: 5px;
							margin-left: 5px;
						}
					}

					.row-slogan {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
						gap: 20px;
						margin-top: 20px;

						.slogan {
							display: flex;
							flex-direction: column;
							align-items: center;
							text-align: center;

							strong {
								border: 1px solid var(--brand-500);
								padding: 10px 20px;
								border-radius: 50px;
								font-size: var(--fs-lg);
								color: var(--brand-500);
							}

							span {
								margin-top: 10px;
								font-size: var(--fs-md);
								font-weight: var(--fw-bold);
								color: var(--fc-title);
							}
						}

						@media (max-width: 576px) {
							& {
								grid-template-columns: 1fr;
							}
						}
					}

					h3 {
						font-size: 24px;
						color: var(--fc-title);
						margin-top: 10px;
						margin-bottom: 5px;
					}

					h4 {
						font-size: var(--fs-xl);
						color: var(--fc-title);
						margin-top: 20px;
						margin-bottom: 10px;
					}

					h5 {
						font-size: var(--fs-lg);
						color: var(--fc-title);
						margin-top: 15px;
						margin-bottom: 10px;
					}

					ul {
						list-style-type: disc;
						padding-left: 20px;
						margin-top: 10px;

						li {
							font-size: var(--fs-md);
							color: var(--fc-title);
							line-height: 1.6;
							margin-bottom: 5px;
						}
					}
				}
			}

			@media (max-width: 575px) {
				& {
					.text-header {
						margin: 28px 0 20px;
					}

					.content {
						.content-card {
							padding: 15px;

							h3 {
								font-size: var(--fs-xl);
							}

							h4 {
								font-size: var(--fs-lg);
							}

							h5 {
								font-size: var(--fs-md);
							}
						}
					}
				}
			}
		}
	}
}

.timetables {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: var(--container);
			width: 100%;
			padding: 0 0 var(--section-py);

			.text-header {
				margin: 44px 0 28px;

				h1 {
					font-weight: var(--fw-title);
					font-size: var(--fs-title);
				}
			}

			.content {

				/* Ticket Counters */
				.ticket-counters {
					margin-bottom: var(--section-py);

					h3 {
						font-size: var(--fs-xl);
						font-weight: var(--fw-semibold);
						color: var(--fc-title);
						margin-bottom: 16px;
					}

					.counter-list {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						gap: var(--gap-sm);

						.counter-item {
							border: 1px solid var(--line);
							border-radius: var(--radius);
							background-color: var(--white);
							padding: 20px;
							transition: var(--transition);

							&:hover {
								border-color: var(--brand-200);
								box-shadow: var(--shadow-md);
							}

							.counter-station {
								font-size: 15px;
								font-weight: var(--fw-semibold);
								color: var(--ink-900);
								margin-bottom: 4px;
							}

							.counter-detail {
								font-size: 13px;
								color: var(--ink-700);
								margin-bottom: 8px;
							}

							.counter-contact {
								display: flex;
								flex-wrap: wrap;
								align-items: center;
								gap: 4px 12px;
								font-size: var(--fs-sm);
								font-weight: var(--fw-bold);
								color: var(--brand-500);

								a {
									color: inherit;
									text-decoration: none;

									&:hover {
										color: var(--brand-700);
										text-decoration: underline;
									}
								}
							}
						}
					}
				}

				/* Routes - 2 column card grid */
				.route-list {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 20px;

					.route-card {
						display: flex;
						flex-direction: column;
						border: 1px solid var(--line);
						border-radius: var(--radius);
						padding: 20px;

						.route-card-header {
							font-size: var(--fs-md);
							font-weight: var(--fw-bold);
							color: var(--ink-900);
							margin-bottom: 14px;
							padding-bottom: 12px;
							border-bottom: 1px solid var(--line);
						}

						.route-schedule-table {
							margin-bottom: 18px;
							border: 1px solid var(--line);
							border-radius: var(--radius-sm);
							overflow: hidden;

							table {
								width: 100%;
								border-collapse: collapse;
								text-align: center;

								thead {
									th {
										background-color: var(--brand-050);
										color: var(--brand-700);
										font-size: var(--fs-xs);
										font-weight: var(--fw-semibold);
										letter-spacing: 0.02em;
										padding: 10px 8px;
									}
								}

								tbody {
									tr:nth-child(even) {
										background-color: var(--surface-2);
									}

									td {
										border-top: 1px solid var(--line);
										font-size: 13px;
										font-weight: var(--fw-medium);
										color: var(--ink-900);
										padding: 10px 8px;
									}
								}
							}
						}

						.route-map {
							margin-bottom: 20px;

							.route-map-label {
								font-size: 13px;
								font-weight: var(--fw-bold);
								color: var(--ink-700);
								margin-bottom: 10px;
							}

							.route-points {
								list-style: none;
								margin: 0;
								padding: 0 0 0 16px;
								max-height: 100%;

								.route-point {
									position: relative;
									padding: 0 0 16px 16px;
									border-left: 2px solid var(--line);
									font-size: 13px;
									color: var(--ink-700);

									&::before {
										content: "";
										position: absolute;
										left: -5px;
										top: 2px;
										width: 8px;
										height: 8px;
										border-radius: 50%;
										background-color: #ccc;
									}

									&:last-child {
										border-left: 2px solid transparent;
										padding-bottom: 0;
									}

									&.point-origin,
									&.point-destination {
										font-weight: var(--fw-bold);
										color: var(--ink-900);

										&::before {
											left: -6px;
											width: 10px;
											height: 10px;
											background-color: var(--brand-500);
										}
									}
								}
							}
						}
					}

					@media (max-width: 768px) {
						& {
							grid-template-columns: 1fr;
						}
					}
				}
			}

			@media (max-width: 575px) {
				& {
					.text-header {
						margin: 28px 0 20px;
					}

					.content {
						.ticket-counters {
							.counter-list {
								grid-template-columns: 1fr;
							}
						}
					}
				}
			}
		}
	}
}

.news {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: var(--container);
			width: 100%;
			padding: 0 0 var(--section-py);

			.text-header {
				margin: 44px 0 28px;

				h1 {
					font-weight: var(--fw-title);
					font-size: var(--fs-title);
				}
			}

			.content {
				.news-list {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 24px;

					.news-card {
						display: flex;
						flex-direction: column;
						height: 100%;
						border: 1px solid var(--line);
						border-radius: var(--radius);
						overflow: hidden;
						text-decoration: none;
						color: inherit;
						background-color: var(--white);
						transition: var(--transition);

						&:hover {
							box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
							transform: translateY(-4px);

							.news-image img {
								transform: scale(1.05);
							}
						}

						.news-image {
							height: 180px;
							flex-shrink: 0;
							overflow: hidden;

							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center;
								transition: var(--transition);
							}
						}

						.news-content {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding: 16px 18px 18px;

							.news-date {
								display: block;
								font-size: var(--fs-xs);
								color: var(--ink-700);
								margin-bottom: 6px;
							}

							.news-title {
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								font-size: 15px;
								font-weight: var(--fw-bold);
								color: var(--ink-900);
								line-height: 1.5;
								min-height: 3em;
							}
						}
					}

					@media (max-width: 768px) {
						& {
							grid-template-columns: repeat(2, 1fr);
						}
					}

					@media (max-width: 576px) {
						& {
							grid-template-columns: 1fr;
						}
					}
				}

				.detail {
					font-size: var(--fs-md);
					margin-bottom: 0px;
					color: var(--fc-title);
				}
			}

			@media (max-width: 575px) {
				& {
					.text-header {
						margin: 28px 0 20px;
					}

					.content {
						.news-list {
							.news-card {
								.news-image {
									height: 160px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.news-detail {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: var(--container);
			width: 100%;
			padding: 0 0 var(--section-py);

			.text-header {
				margin: 44px 0 28px;

				h1 {
					font-weight: var(--fw-title);
					font-size: var(--fs-title);
				}
			}

			.content {
				.content-image {
					text-align: center;
					margin-bottom: 20px;

					img {
						max-width: 100%;
						height: auto;
						border-radius: var(--radius-sm);
					}
				}

				.content-detail {
					font-size: var(--fs-md);
					line-height: 1.8;
					color: var(--ink-900);
					margin-bottom: 0px;

					p {
						margin-bottom: 15px;
					}

					img {
						max-width: 100%;
						height: auto !important;
					}

					a {
						color: var(--brand-500);
						text-decoration: none;
						margin: 0 5px;
					}
				}

				.content-meta {
					display: flex;
					flex-direction: column;
					gap: 10px;
					font-size: var(--fs-sm);
					color: var(--ink-900);

					.time,
					.views {
						display: flex;
						align-items: center;

						i {
							margin-right: 5px;
						}
					}
				}
			}

			@media (max-width: 575px) {
				& {
					.text-header {
						margin: 28px 0 20px;
					}

					.content {
						.content-detail {
							font-size: var(--fs-sm);
							line-height: 1.6;
						}

						.content-meta {
							font-size: var(--fs-xs);

							.time,
							.views {
								i {
									margin-right: 3px;
								}
							}
						}
					}
				}
			}
		}
	}
}

/* =============================================================
   Footer - โทนสว่าง อ่านง่าย ไม่ทึบ
   ============================================================= */
.container-footer {
	position: relative;
	width: 100%;

	/* Popular Routes - ลิงก์เส้นทางแบบ pill */
	.card-popular-routes {
		padding: var(--section-py) 0;
		background-color: var(--surface);
		border-top: 1px solid var(--line);

		.container {
			.card-wapper {
				width: 100%;

				.card-header {
					padding-bottom: 20px;

					h2 {
						position: relative;
						font-size: var(--fs-title);
						font-weight: var(--fw-title);
						color: var(--fc-title);
						margin: 0;
						padding-bottom: 12px;

						&::after {
							content: "";
							position: absolute;
							left: 0;
							bottom: 0;
							width: 48px;
							height: 3px;
							border-radius: var(--pill);
							background-color: var(--accent-500);
						}
					}
				}

				.card-content {
					.card-link {
						height: 100%;

						a {
							display: flex;
							align-items: center;
							gap: 10px;
							height: 100%;
							padding: 14px 18px;
							border: 1px solid var(--line);
							border-radius: var(--radius-sm);
							background-color: var(--white);
							text-decoration: none;
							transition: var(--transition);

							&::before {
								content: "";
								flex-shrink: 0;
								width: 8px;
								height: 8px;
								border-radius: 50%;
								background-color: var(--accent-500);
							}

							&:hover {
								border-color: var(--brand-200);
								background-color: var(--brand-050);
								transform: translateY(-2px);
							}

							.card-text {
								text-align: start;

								strong {
									font-size: var(--fs-sm);
									font-weight: var(--fw-semibold);
									color: var(--ink-900);
								}
							}
						}
					}
				}
			}
		}
	}

	/* Footer body */
	.card-footer {
		background-color: var(--surface-2);
		border-top: 1px solid var(--line);

		.container {
			.card-wapper {
				width: 100%;
				padding: 52px 0 0;

				h2 {
					font-size: var(--fs-lg);
					font-weight: var(--fw-semibold);
					color: var(--ink-900);
					margin: 0 0 12px;
				}

				a {
					color: var(--ink-700);
					text-decoration: none;
					transition: var(--transition);

					&:hover {
						color: var(--brand-600);
					}
				}

				.card-content-left {
					h2:nth-of-type(2) {
						margin-top: 24px;
					}

					strong {
						font-size: var(--fs-sm);
						font-weight: var(--fw-semibold);
						color: var(--ink-900);
					}

					a {
						display: block;
						font-size: var(--fs-sm);
						margin-top: 6px;
						line-height: 1.7;
					}
				}

				.card-content-center {
					.card-menu {
						a {
							display: block;
							font-size: var(--fs-sm);
							margin-top: 8px;
						}
					}

					@media (max-width: 767px) {
						& {
							margin-top: 28px;
						}
					}
				}

				.card-content-right {

					.card-payment-channel,
					.card-download {
						.card-header {
							h2 {
								margin-bottom: 12px;
							}
						}

						.card-content {
							.card-list {
								display: flex;
								flex-wrap: wrap;
								align-items: center;
								gap: 8px;
							}
						}
					}

					.card-payment-channel {
						.card-content {
							.card-list {
								img {
									width: auto;
									height: 32px;
									padding: 4px 6px;
									border: 1px solid var(--line);
									border-radius: 6px;
									background-color: var(--white);
								}
							}
						}
					}

					.card-download {
						.card-header {
							h2 {
								margin-top: 24px;
							}
						}

						.card-content {
							.card-list {
								a {
									display: inline-flex;
									align-items: center;
									justify-content: center;

									img {
										width: auto;
										height: 40px;
									}

									&:hover {
										opacity: 0.85;
									}
								}
							}
						}
					}

					@media (max-width: 991px) {
						& {
							margin-top: 28px;
						}
					}
				}

				.card-bottom {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					gap: 6px 10px;
					margin-top: 44px;
					padding: 18px 0;
					border-top: 1px solid var(--line);

					.card-copyright {
						display: flex;
						align-items: center;
						gap: 5px;

						span {
							font-size: var(--fs-sm);
							color: var(--ink-700);
						}

						a {
							font-size: var(--fs-sm);
							font-weight: var(--fw-semibold);
							color: var(--ink-700);
						}
					}

					.card-referral {
						display: flex;
						align-items: center;

						span {
							font-size: var(--fs-sm);
							color: var(--ink-700);
						}

						a {
							font-size: var(--fs-sm);
							color: var(--ink-700);

							&:last-child {
								color: var(--accent-700);
								font-weight: var(--fw-semibold);
							}
						}
					}

					@media (max-width: 622px) {
						& {
							flex-direction: column;
							text-align: center;
						}
					}
				}
			}
		}
	}
}

.contact-us {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: var(--container);
			width: 100%;
			padding: 0 0 var(--section-py);

			.text-header {
				margin: 44px 0 28px;

				h1 {
					font-weight: var(--fw-title);
					font-size: var(--fs-title);
				}
			}

			.content {
				.contact-info {
					.contact-company {
						border: 1px solid var(--line);
						border-radius: var(--radius);
						background-color: var(--white);
						box-shadow: var(--shadow-sm);
						padding: 24px;

						h3 {
							font-weight: var(--fw-bold);
							font-size: var(--fs-xl);
							margin-top: 10px;
							color: var(--brand-500);
						}

						p {
							font-size: var(--fs-md);
							line-height: 1.5;
						}
					}

					.contact-social {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						grid-gap: 15px;
						margin-top: 20px;

						.social-item {
							border-radius: var(--radius);
							overflow: hidden;
							margin-bottom: 15px;
							transition: var(--transition);

							&:hover {
								transform: translateY(-3px);
								box-shadow: var(--shadow-md);
							}

							&:nth-child(1) {
								background-color: var(--brand-500);
								border: 1px solid var(--brand-500);
							}

							&:nth-child(2) {
								background-color: var(--green);
								border: 1px solid var(--green);
							}

							&:nth-child(3) {
								background-color: var(--blue);
								border: 1px solid var(--blue);
							}

							a {
								display: flex;
								flex-direction: column;
								align-items: center;
								text-decoration: none;
								padding: 15px;

								i {
									font-size: 30px;
									color: var(--white);
									margin-top: 10px;
								}

								p {
									color: var(--white);
									margin: 0;
									font-size: var(--fs-md);
								}
							}
						}
					}
				}

				.contact-form {
					border: 1px solid var(--line);
					border-radius: var(--radius);
					background-color: var(--white);
					box-shadow: var(--shadow-sm);
					padding: 24px;

					h3 {
						font-weight: var(--fw-bold);
						font-size: var(--fs-xl);
						color: var(--brand-500);
						margin-bottom: 20px;
					}

					.form {
						.form-floating {
							margin-bottom: 15px;

							.form-control:focus {
								border-color: var(--brand-500);
								box-shadow: unset;
							}

							&.company {
								position: absolute;
								left: -9999px;
								top: -9999px;
								height: 0;
								overflow: hidden;
							}

							&.callback {
								display: flex;
								flex-wrap: wrap;
								align-items: center;
								justify-content: space-between;
								gap: 8px 16px;
								margin-top: 15px;
								margin-bottom: 15px;

								.callback-label {
									float: none;
									width: auto;
									margin: 0;
									font-size: var(--fs-md);
									line-height: 1.5;
								}

								.callback-options {
									display: flex;
									gap: 20px;

									.form-check {
										margin: 0;
									}
								}

								.form-check-label {
									font-size: var(--fs-md);
								}

								.form-check-input:checked {
									background-color: var(--brand-500);
									border-color: var(--brand-500);

									&:focus {
										box-shadow: 0 0 0 0.25rem var(--brand-100);
									}
								}
							}

							textarea.form-control {
								height: 100px;
							}

							label::after {
								background-color: unset !important;
							}
						}

					}
				}
			}

			@media (max-width: 768px) {
				& {
					.content {
						.contact-info {
							.contact-social {
								grid-template-columns: 1fr 1fr;
							}
						}
					}
				}
			}

			@media (max-width: 575px) {
				& {
					.text-header {
						margin: 28px 0 20px;
					}

					.content {
						.contact-info {
							.contact-company {
								h3 {
									font-size: var(--fs-lg);
								}

								p {
									font-size: var(--fs-sm);
								}
							}

							.contact-social {
								grid-template-columns: 1fr;

								.social-item {
									a {
										p {
											font-size: var(--fs-sm);
										}
									}
								}
							}
						}

						.contact-form {
							h3 {
								font-size: var(--fs-lg);
							}

							.form {
								.form-floating {
									textarea.form-control {
										height: 80px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}