:root {
	/*
	 * Đường dẫn tương đối so với chính tệp CSS này, nên không cần PHP chèn thêm
	 * gì và cũng không hỏng khi site đổi tên miền.
	 */
	--px-icon-calendar: url( "icons/calendar.svg" );
	--px-icon-chevron: url( "icons/chevron-down.svg" );
}

/**
 * Giao diện cho phần tính năng riêng: ô tìm vé và hộp thoại tài khoản.
 *
 * Mọi màu, khoảng cách, bo góc đều lấy từ biến của theme. Không viết mã màu ở
 * đây — đổi tông cho khách là đổi ở preset, không phải sửa file này.
 */

/* -------------------------------------------------------------------------
   MỘT HỌ FONT DUY NHẤT: MONTSERRAT

   Đo trên demo5 (16/9/2026) còn hai chỗ lọt font khác:

   1. Theme nền nd-base khai hai họ `display` (Be Vietnam Pro — tiêu đề) và
      `body` (Inter — nút lõi `wp-element-button`, …). Bộ cài `inc/fonts.php`
      chỉ thay họ trong global styles của NGƯỜI DÙNG, nên biến
      `--wp--preset--font-family--display/body` của theme vẫn trỏ font cũ —
      nút "Đặt vé ngay" ở trang chủ ra Inter. Trỏ cả hai biến về Montserrat
      thì mọi chỗ gọi họ của theme đổi theo, kể cả chỗ chưa ai phát hiện.
      `html:root` để thắng khối `:root` của global styles bất kể thứ tự nạp.

   2. Trang có khung Vexere: CSS Ant Design của họ nạp lúc chạy và đặt
      `body { font-family: -apple-system, "Segoe UI", … }` — header, thanh tìm
      và mọi thứ kế thừa `body` rời Montserrat. `html body` (0,0,2) thắng
      `body` (0,0,1) của họ mà không cần `!important`.
   ------------------------------------------------------------------------- */

html:root {
	--wp--preset--font-family--montserrat: Montserrat, sans-serif;
	--wp--preset--font-family--display: var( --wp--preset--font-family--montserrat );
	--wp--preset--font-family--body: var( --wp--preset--font-family--montserrat );
}

html body,
html body .editor-styles-wrapper {
	font-family: var( --wp--preset--font-family--montserrat, Montserrat, sans-serif );
}

html body :where( button, input, select, textarea, optgroup ) {
	font-family: inherit;
}

/* -------------------------------------------------------------------------
   Ô tìm vé
   ------------------------------------------------------------------------- */

#tim-ve {
	scroll-margin-block-start: 8rem;
}

.px-search {
	--px-search-radius: var( --wp--custom--radius--lg, 1rem );

	position: relative;
	z-index: 2;
	margin-inline: auto;
	max-width: var( --wp--custom--container--content, 68rem );
}

/* Đè lên mép dưới của banner, đúng như thiết kế. */
.px-search--overlap {
	margin-block-start: calc( var( --wp--preset--spacing--xl, 3rem ) * -1 );
}

.px-search__form {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --px-search-radius );
	box-shadow: 0 0.75rem 2.5rem rgb( 18 26 43 / 0.12 );
	padding: var( --wp--preset--spacing--sm );
}

.px-search__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr 1fr;
	align-items: center;
	gap: var( --wp--preset--spacing--2-xs );
}

.px-search__field {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--2-xs );
	padding: var( --wp--preset--spacing--2-xs ) var( --wp--preset--spacing--xs );
	min-width: 0;
}

/* Vạch ngăn giữa các ô, trừ ô đầu. */
.px-search__field + .px-search__field,
.px-search__swap + .px-search__field {
	border-inline-start: 1px solid var( --wp--preset--color--line );
}

.px-search__icon {
	color: var( --wp--preset--color--brand );
	flex: none;
	line-height: 0;
}

.px-search__control {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	flex: 1;
}

.px-search__label {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	line-height: 1.2;
}

.px-search__select,
.px-search__date {
	appearance: none;
	background: transparent;
	border: 0;
	color: var( --wp--preset--color--fg );
	font: inherit;
	font-weight: 600;
	padding: 0;
	width: 100%;
}

.px-search__select:focus-visible,
.px-search__date:focus-visible {
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: 2px;
}

.px-search__swap {
	background-color: var( --wp--preset--color--canvas );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--brand );
	cursor: pointer;
	display: grid;
	place-items: center;
	height: 2.5rem;
	width: 2.5rem;
}

@media ( hover: hover ) {
	.px-search__swap:hover {
		background-color: var( --wp--preset--color--brand-subtle );
	}
}

.px-search__swap:focus-visible {
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: 3px;
}

.px-search__actions {
	display: flex;
	justify-content: center;
	margin-block-start: var( --wp--preset--spacing--xs );
}

/*
 * Số đo lấy từ Figma: nút 190×36, đệm ngang 40, icon 20, cách chữ 8.
 * Đệm ngang KHÔNG lấy từ thang spacing của theme — thang đó nhảy 32 rồi 48,
 * không có 40, mà 40 mới là con số thiết kế vẽ.
 */
.px-search__submit {
	align-items: center;
	background-color: var( --wp--preset--color--brand );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg-on-brand );
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	gap: 0.5rem;
	line-height: 1;
	min-height: 2.25rem;
	padding-block: 0;
	padding-inline: 2.5rem;
}

.px-search__submit:hover {
	filter: brightness( 1.08 );
}

@media ( max-width: 48rem ) {
	.px-search--overlap {
		margin-block-start: var( --wp--preset--spacing--sm );
	}

	.px-search__row {
		grid-template-columns: 1fr;
	}

	.px-search__field + .px-search__field,
	.px-search__swap + .px-search__field {
		border-inline-start: 0;
		border-block-start: 1px solid var( --wp--preset--color--line );
	}

	.px-search__swap {
		justify-self: end;
	}

	.px-search__submit {
		width: 100%;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   Hộp thoại tài khoản
   ------------------------------------------------------------------------- */

body.px-auth-open {
	overflow: hidden;
}

.px-auth {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var( --wp--preset--spacing--sm );
}

.px-auth[hidden] {
	display: none;
}

.px-auth__scrim {
	position: absolute;
	inset: 0;
	background-color: rgb( 10 10 10 / 0.55 );
}

.px-auth__dialog {
	position: relative;
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	box-shadow: 0 1.5rem 4rem rgb( 18 26 43 / 0.28 );
	max-height: calc( 100vh - var( --wp--preset--spacing--lg ) );
	overflow-y: auto;
	padding: var( --wp--preset--spacing--md );
	/* Figma: hộp thoại 480 tổng, lề trong 24, nên lòng trong đúng 432. */
	box-sizing: border-box;
	width: min( 30rem, 100% );
}

.px-auth__head {
	align-items: center;
	border-block-end: 1px solid var( --wp--preset--color--line );
	display: flex;
	justify-content: space-between;
	margin-block-end: var( --wp--preset--spacing--sm );
	padding-block-end: var( --wp--preset--spacing--2-xs );
}

.px-auth__title {
	font-size: var( --wp--preset--font-size--h-3 );
	margin: 0;
}

.px-auth__close {
	background: none;
	border: 0;
	color: var( --wp--preset--color--fg-muted );
	cursor: pointer;
	line-height: 0;
	padding: var( --wp--preset--spacing--3-xs );
}

.px-auth__providers {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
}

.px-auth__provider {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	background-color: var( --wp--preset--color--canvas );
	color: var( --wp--preset--color--fg );
	font: inherit;
	font-weight: 600;
	padding: var( --wp--preset--spacing--2-xs );
}

.px-auth__provider[disabled] {
	cursor: not-allowed;
	opacity: 0.55;
}

.px-auth__divider {
	color: var( --wp--preset--color--fg-muted );
	display: grid;
	font-size: var( --wp--preset--font-size--caption );
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var( --wp--preset--spacing--2-xs );
	margin-block: var( --wp--preset--spacing--sm );
}

.px-auth__divider::before,
.px-auth__divider::after {
	background-color: var( --wp--preset--color--line );
	content: "";
	height: 1px;
}

.px-auth__label {
	display: block;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	margin-block-end: 0.25rem;
}

.px-auth__input {
	background-color: var( --wp--preset--color--canvas );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg );
	font: inherit;
	padding: var( --wp--preset--spacing--2-xs );
	padding-inline: var( --wp--preset--spacing--sm );
	width: 100%;
}

.px-auth__input:focus-visible {
	border-color: var( --wp--preset--color--brand );
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: 1px;
}

.px-auth__step > * + * {
	margin-block-start: var( --wp--preset--spacing--2-xs );
}

.px-auth__submit {
	background-color: var( --wp--preset--color--brand );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg-on-brand );
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	margin-block-start: var( --wp--preset--spacing--sm );
	padding: var( --wp--preset--spacing--2-xs );
	width: 100%;
}

.px-auth__submit[disabled] {
	cursor: progress;
	opacity: 0.6;
}

.px-auth__lead,
.px-auth__hint,
.px-auth__aside,
.px-auth__legal {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0;
}

.px-auth__lead--strong {
	color: var( --wp--preset--color--fg );
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
}

.px-auth__check {
	align-items: start;
	display: grid;
	font-size: var( --wp--preset--font-size--caption );
	gap: var( --wp--preset--spacing--3-xs );
	grid-template-columns: auto 1fr;
}

.px-auth__link {
	background: none;
	border: 0;
	color: var( --wp--preset--color--brand );
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

.px-auth__error {
	background-color: var( --wp--preset--color--brand-subtle );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--caption );
	margin-block-end: var( --wp--preset--spacing--2-xs );
	padding: var( --wp--preset--spacing--2-xs );
}

.px-auth__legal {
	border-block-start: 1px solid var( --wp--preset--color--line );
	margin-block-start: var( --wp--preset--spacing--sm );
	padding-block-start: var( --wp--preset--spacing--2-xs );
	text-align: center;
}

.px-auth__legal a {
	color: var( --wp--preset--color--brand );
}


/* -------------------------------------------------------------------------
   Banner có nút xem video
   ------------------------------------------------------------------------- */

.px-hero__figure {
	margin: 0;
	position: relative;
}

.px-hero__poster {
	display: block;
	width: 100%;
}

.px-hero__play {
	position: absolute;
	inset: 0;
	margin: auto;
	height: 4.5rem;
	width: 4.5rem;
	display: grid;
	place-items: center;
	padding-inline-start: 0.25rem; /* tam giác lệch phải, kéo lại cho cân */
	background-color: rgb( 255 255 255 / 0.92 );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	box-shadow: 0 0.5rem 1.75rem rgb( 10 10 10 / 0.35 );
	color: var( --wp--preset--color--brand );
	cursor: pointer;
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.px-hero__play:hover,
.px-hero__play:focus-visible {
	background-color: var( --wp--preset--color--canvas );
	transform: scale( 1.07 );
}

@media ( prefers-reduced-motion: reduce ) {
	.px-hero__play {
		transition: none;
	}

	.px-hero__play:hover,
	.px-hero__play:focus-visible {
		transform: none;
	}
}

/* Lớp phủ trình phát */

body.px-video-open {
	overflow: hidden;
}

.px-video {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var( --wp--preset--spacing--sm );
}

.px-video[hidden] {
	display: none;
}

.px-video__scrim {
	position: absolute;
	inset: 0;
	background-color: rgb( 8 8 10 / 0.82 );
}

.px-video__frame {
	position: relative;
	width: min( 79rem, 100% );
	aspect-ratio: 16 / 9;
	background-color: #000;
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	overflow: hidden;
}

.px-video__player {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

.px-video__close {
	position: absolute;
	inset-block-start: var( --wp--preset--spacing--2-xs );
	inset-inline-end: var( --wp--preset--spacing--2-xs );
	z-index: 1;
	display: grid;
	place-items: center;
	height: 2.5rem;
	width: 2.5rem;
	background-color: rgb( 8 8 10 / 0.6 );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: #fff;
	cursor: pointer;
}

.px-video__close:hover,
.px-video__close:focus-visible {
	background-color: rgb( 8 8 10 / 0.9 );
}

/* -------------------------------------------------------------------------
   Hộp thoại tài khoản — ba bước OTP
   ------------------------------------------------------------------------- */

.px-auth__back {
	background: none;
	border: 0;
	color: var( --wp--preset--color--fg-muted );
	cursor: pointer;
	line-height: 0;
	margin-inline-end: var( --wp--preset--spacing--3-xs );
	padding: var( --wp--preset--spacing--3-xs );
}

/* Tiêu đề chiếm hết khoảng giữa để nút đóng luôn nằm sát mép phải. */
.px-auth__title {
	flex: 1;
}

.px-auth__lead--center {
	text-align: center;
}

.px-auth__lead--center strong {
	color: var( --wp--preset--color--fg );
}

/* Sáu ô mã xác thực */

/*
 * Khoảng hở phải đủ rộng: sáu gạch chân sát nhau quá thì đọc thành một đường
 * liền, không còn ra sáu ô như thiết kế.
 */
.px-auth__code {
	display: grid;
	gap: var( --wp--preset--spacing--sm );
	grid-template-columns: repeat( 6, 1fr );
	margin-block: var( --wp--preset--spacing--sm );
}

@media ( max-width: 24rem ) {
	.px-auth__code {
		gap: var( --wp--preset--spacing--2-xs );
	}
}

.px-auth__digit {
	background: transparent;
	border: 0;
	border-block-end: 2px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--fg );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 600;
	padding-block-end: var( --wp--preset--spacing--3-xs );
	text-align: center;
	width: 100%;
}

.px-auth__digit:focus-visible {
	border-block-end-color: var( --wp--preset--color--brand );
	outline: none;
}

/*
 * Ô đã điền đổi màu gạch chân, đúng như thiết kế.
 *
 * Dấu hiệu là `data-filled` do JavaScript đặt, KHÔNG phải `:placeholder-shown`:
 * Chrome coi placeholder chỉ gồm khoảng trắng như không có, nên
 * `:not( :placeholder-shown )` khớp cả sáu ô ngay khi vừa mở và cả sáu gạch
 * đều đỏ. Đã thử và đã dính.
 */
.px-auth__digit[data-filled] {
	border-block-end-color: var( --wp--preset--color--brand );
}

.px-auth__resend {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	margin-block-start: var( --wp--preset--spacing--2-xs );
	text-align: center;
}

.px-auth__resend strong {
	color: var( --wp--preset--color--brand );
}

/* Mã vùng + số điện thoại */

.px-auth__phone {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	grid-template-columns: 7rem 1fr;
}

.px-auth__submit[disabled] {
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--fg-muted );
	cursor: not-allowed;
	opacity: 1;
}

/*
 * Ba nút mạng xã hội giữ đúng màu thương hiệu của Figma dù đang tắt: để khách
 * nhận ra chúng tồn tại và sẽ dùng được, chứ không tưởng là ba nút hỏng.
 * Đây là màu của Google, Facebook và Apple — không phải màu của nhà xe — nên
 * viết thẳng hex ở đây là đúng chỗ, palette của preset không nên với tới.
 */
.px-auth__provider--google {
	background-color: #1a73e8;
	border-color: #1a73e8;
	color: #fff;
}

.px-auth__provider--facebook {
	border-color: #1877f2;
	color: #1877f2;
}

.px-auth__provider--apple {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

.px-auth__provider[disabled] {
	opacity: 0.45;
}

/* -------------------------------------------------------------------------
   Icon lấy từ Figma
   ------------------------------------------------------------------------- */

.px-icon {
	display: block;
	flex: none;
}

/* Figma chỉ có chevron hướng xuống; mũi tên quay lui là nó xoay 90 độ. */
.px-icon--left {
	transform: rotate( 90deg );
}

/* Ba icon của ô tìm vé vẽ theo cỡ 24 nhưng nét mảnh, canh lại cho cân dòng. */
.px-search__icon .px-icon {
	height: 1.5rem;
	width: 1.5rem;
}

/* -------------------------------------------------------------------------
   Nút trong hộp thoại — cao 48 như Figma
   ------------------------------------------------------------------------- */

.px-auth__provider {
	align-items: center;
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
	justify-content: center;
	min-height: 3rem;
	padding-inline: var( --wp--preset--spacing--sm );
}

.px-auth__logo {
	display: block;
	flex: none;
	height: 1.25rem;
	width: 1.25rem;
}

.px-auth__submit {
	min-height: 3rem;
}

/* Ô mã vùng: cờ bên trái, mũi tên bên phải, select trong suốt nằm giữa. */

.px-auth__dial {
	align-items: center;
	background-color: var( --wp--preset--color--canvas );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	display: flex;
	gap: var( --wp--preset--spacing--3-xs );
	padding-inline: var( --wp--preset--spacing--2-xs );
}

.px-auth__dial-select {
	background: transparent;
	border: 0;
	flex: 1;
	min-width: 0;
	padding-inline: 0;
	appearance: none;
}

.px-auth__dial-select:focus-visible {
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: 2px;
}

.px-auth__flag {
	height: 1.25rem;
	width: 1.25rem;
}

.px-auth__caret {
	color: var( --wp--preset--color--fg-muted );
}

/* -------------------------------------------------------------------------
   Trang danh sách chuyến
   ------------------------------------------------------------------------- */

.px-trips__top {
	background-color: var( --wp--preset--color--canvas );
	padding-block: var( --wp--preset--spacing--sm );
}

.px-trips__crumb,
.px-trips__top > form {
	margin-inline: auto;
	max-width: var( --wp--custom--container--wide, 82rem );
	padding-inline: var( --wp--preset--spacing--sm );
}

.px-trips__crumb {
	align-items: center;
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
	margin-block-end: var( --wp--preset--spacing--2-xs );
}

.px-trips__back {
	text-decoration: none;
	align-items: center;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg );
	display: flex;
	flex: none;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.px-trips__route {
	align-items: center;
	display: flex;
	font-size: var( --wp--preset--font-size--body-lg );
	font-weight: 600;
	gap: var( --wp--preset--spacing--3-xs );
	margin: 0;
}

.px-trips__route-arrow {
	color: var( --wp--preset--color--brand );
}

.px-trips__count {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0;
}

/* Thanh tìm trên trang kết quả: nút nằm cùng hàng, không nằm dưới. */

.px-search--inline {
	align-items: stretch;
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
	max-width: none;
}

/*
 * Figma: cả thanh cao 62, bằng đúng hàng trường bên trong. Nên biến thể này bỏ
 * đệm dọc của thẻ — đệm ấy chỉ dành cho ô tìm ở trang chủ, nơi thẻ còn ôm thêm
 * nút bên dưới.
 */
.px-search--inline .px-search__form {
	flex: 1;
	min-width: 0;
	padding-block: 0;
}

/*
 * Nút trên thanh tìm của trang kết quả cao bằng cả hàng trường (Figma 120×62),
 * nên KHÔNG bo tròn kiểu viên thuốc như nút ở trang chủ — bo viên thuốc ở chiều
 * cao ấy thì nó thành hình bầu dục to đùng.
 */
.px-search--inline .px-search__submit {
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	flex: none;
	justify-content: center;
	min-width: 7.5rem;
	padding-inline: var( --wp--preset--spacing--md );
}

/*
 * `flow-root` KHÔNG PHẢI TRANG TRÍ — bỏ đi là nền xám biến mất gần hết.
 *
 * Khung đặt vé của Vexere dựng cột trái/phải bằng float (lớp tachyons `fr-l`,
 * `db-l`), mà `#vexereSearchWidget` không có clearfix nào. Hệ quả: chính thẻ ấy
 * cao **0px**, nên khối này chỉ cao bằng phần đệm — đo được 72px — trong khi
 * kết quả tìm chuyến bên dưới dài hơn 4400px và nằm hết trên nền trắng của
 * `body`.
 *
 * `display: flow-root` dựng một BFC nên khối này ôm trọn mọi float bên trong,
 * không cắt xén gì (khác `overflow: hidden`, thứ sẽ cắt các danh sách xổ của
 * bộ lọc).
 */
.px-trips__body {
	background-color: var( --wp--preset--color--surface );
	display: flow-root;
	padding-block: var( --wp--preset--spacing--md ) var( --wp--preset--spacing--xl );
}

.px-trips__notice {
	background-color: var( --wp--preset--color--brand-subtle );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0 auto var( --wp--preset--spacing--2-xs );
	max-width: var( --wp--custom--container--wide, 82rem );
	padding: var( --wp--preset--spacing--2-xs );
}

.px-trips__grid {
	display: grid;
	gap: var( --wp--preset--spacing--md );
	grid-template-columns: 22rem 1fr;
	margin-inline: auto;
	max-width: var( --wp--custom--container--wide, 82rem );
	padding-inline: var( --wp--preset--spacing--sm );
}

/* --- Cot loc --- */

.px-trips__filters {
	align-self: start;
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	display: grid;
	gap: var( --wp--preset--spacing--md );
	padding: var( --wp--preset--spacing--sm );
}

.px-filter__title {
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.px-filter__check {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	gap: var( --wp--preset--spacing--2-xs );
	padding-block: 0.25rem;
}

.px-filter__check[hidden] {
	display: none;
}

.px-filter__box {
	align-items: center;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	display: flex;
	gap: var( --wp--preset--spacing--3-xs );
	margin-block-end: var( --wp--preset--spacing--2-xs );
	padding-inline: var( --wp--preset--spacing--2-xs );
}

.px-filter__box input {
	background: transparent;
	border: 0;
	flex: 1;
	font: inherit;
	font-size: var( --wp--preset--font-size--caption );
	min-width: 0;
	padding-block: var( --wp--preset--spacing--2-xs );
}

.px-filter__box .px-icon {
	color: var( --wp--preset--color--fg-muted );
}

/* --- Thanh truot kep --- */

.px-range {
	display: grid;
	position: relative;
}

/*
 * Hai input range chồng lên nhau để thành thanh trượt hai đầu. Thanh phải
 * `pointer-events: none`, chỉ mở lại cho nút kéo — nếu không, thanh nằm trên
 * nuốt hết cú bấm của thanh nằm dưới và một đầu sẽ không kéo được.
 */
.px-range input[type="range"] {
	appearance: none;
	background: transparent;
	grid-area: 1 / 1;
	height: 1.25rem;
	margin: 0;
	pointer-events: none;
	width: 100%;
}

.px-range::before {
	align-self: center;
	background-color: var( --wp--preset--color--line );
	border-radius: 2px;
	content: "";
	grid-area: 1 / 1;
	height: 4px;
}

.px-range input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	background-color: var( --wp--preset--color--brand );
	border: 2px solid var( --wp--preset--color--canvas );
	border-radius: 50%;
	cursor: pointer;
	height: 1.25rem;
	pointer-events: auto;
	width: 1.25rem;
}

.px-range input[type="range"]::-moz-range-thumb {
	background-color: var( --wp--preset--color--brand );
	border: 2px solid var( --wp--preset--color--canvas );
	border-radius: 50%;
	cursor: pointer;
	height: 1.25rem;
	pointer-events: auto;
	width: 1.25rem;
}

.px-range__value {
	color: var( --wp--preset--color--fg-muted );
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	justify-content: space-between;
	margin: var( --wp--preset--spacing--2-xs ) 0 0;
}

/* --- Cot ket qua --- */

.px-trips__label {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--2-xs );
	justify-content: space-between;
	margin-block-end: var( --wp--preset--spacing--2-xs );
}

.px-trips__result-count {
	font-size: var( --wp--preset--font-size--body );
	margin: 0;
}

.px-trips__sort {
	align-items: center;
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	gap: var( --wp--preset--spacing--2-xs );
}

.px-trips__sort select {
	appearance: none;
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	font: inherit;
	padding: var( --wp--preset--spacing--2-xs ) var( --wp--preset--spacing--md ) var( --wp--preset--spacing--2-xs ) var( --wp--preset--spacing--sm );
}

.px-trips__sort .px-icon {
	color: var( --wp--preset--color--fg-muted );
	margin-inline-start: -2rem;
	pointer-events: none;
}

.px-trips__list {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-trip[hidden] {
	display: none;
}

.px-trip__note {
	background-color: var( --wp--preset--color--brand-subtle );
	border-radius: var( --wp--custom--radius--md, 0.5rem ) var( --wp--custom--radius--md, 0.5rem ) 0 0;
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0 0 -0.5rem auto;
	padding: var( --wp--preset--spacing--3-xs ) var( --wp--preset--spacing--2-xs ) var( --wp--preset--spacing--2-xs );
	width: fit-content;
}

.px-trip__card {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	display: grid;
	gap: var( --wp--preset--spacing--sm );
	grid-template-columns: 12rem 1fr auto;
	padding: var( --wp--preset--spacing--2-xs );
	position: relative;
}

.px-trip__media img,
.px-trip__media-empty {
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	display: block;
	width: 100%;
}

.px-trip__media-empty {
	aspect-ratio: 4 / 3;
	background-color: var( --wp--preset--color--surface );
}

.px-trip__main {
	min-width: 0;
}

.px-trip__rating {
	background-color: var( --wp--preset--color--accent );
	border-radius: var( --wp--custom--radius--sm, 0.25rem );
	color: var( --wp--preset--color--fg );
	display: inline-block;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	margin: 0 0 var( --wp--preset--spacing--3-xs );
	padding: 0 var( --wp--preset--spacing--3-xs );
}

.px-trip__name {
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.px-trip__timeline {
	display: grid;
	gap: var( --wp--preset--spacing--3-xs );
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-trip__timeline li {
	align-items: center;
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	gap: var( --wp--preset--spacing--2-xs );
}

.px-trip__timeline .px-icon {
	color: var( --wp--preset--color--brand );
}

.px-trip__timeline span {
	color: var( --wp--preset--color--fg-muted );
}

/*
 * Đoạn thời lượng thụt vào cho thẳng hàng với hai mốc trên dưới, và mang một
 * vạch dọc nối hai ghim — đúng như thiết kế vẽ.
 */
.px-trip__duration {
	color: var( --wp--preset--color--fg-muted );
	padding-inline-start: 2.5rem;
	position: relative;
}

.px-trip__duration::before {
	border-inline-start: 1px dashed var( --wp--preset--color--line );
	content: "";
	inset-block: -0.25rem;
	inset-inline-start: 0.6rem;
	position: absolute;
}

.px-trip__aside {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	justify-content: center;
	text-align: end;
}

.px-trip__was {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0;
	text-decoration: line-through;
}

.px-trip__price {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	margin: 0;
}

.px-trip__seats {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

/* Là thẻ <a> nên phải tự gỡ gạch chân mà theme đặt cho liên kết. */
.px-trip__cta {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	text-decoration: none;
	background-color: var( --wp--preset--color--brand );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg-on-brand );
	cursor: pointer;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	min-height: 2.25rem;
	padding-inline: var( --wp--preset--spacing--md );
}

.px-trip__cta:hover {
	filter: brightness( 1.08 );
}

.px-trips__empty {
	color: var( --wp--preset--color--fg-muted );
	padding-block: var( --wp--preset--spacing--xl );
	text-align: center;
}

@media ( max-width: 64rem ) {
	.px-trips__grid {
		grid-template-columns: 1fr;
	}

	.px-search--inline {
		flex-direction: column;
	}

	.px-trip__card {
		grid-template-columns: 1fr;
	}

	.px-trip__aside {
		align-items: stretch;
		text-align: start;
	}

	.px-trip__note {
		margin-inline: 0 auto;
	}
}

/* -------------------------------------------------------------------------
   Tra cứu vé
   ------------------------------------------------------------------------- */

.px-lookup {
	margin-inline: auto;
	max-width: var( --wp--custom--container--wide, 82rem );
	padding-block: var( --wp--preset--spacing--lg ) var( --wp--preset--spacing--xl );
	padding-inline: var( --wp--preset--spacing--sm );
}

.px-lookup__title {
	font-size: var( --wp--preset--font-size--h-1 );
	margin: 0 0 var( --wp--preset--spacing--md );
}

/* Hai ô cạnh nhau, nút bám mép phải — đúng như thiết kế. */
.px-lookup__form {
	align-items: end;
	display: grid;
	gap: var( --wp--preset--spacing--md );
	grid-template-columns: 1fr 1fr auto;
}

.px-lookup__field label {
	color: var( --wp--preset--color--fg-muted );
	display: block;
	font-size: var( --wp--preset--font-size--caption );
	margin-block-end: 0.25rem;
}

.px-lookup__field input {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	box-sizing: border-box;
	color: var( --wp--preset--color--fg );
	font: inherit;
	padding: var( --wp--preset--spacing--2-xs );
	padding-inline: var( --wp--preset--spacing--sm );
	width: 100%;
}

.px-lookup__field input:focus-visible {
	border-color: var( --wp--preset--color--brand );
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: 1px;
}

.px-lookup__submit {
	align-items: center;
	background-color: var( --wp--preset--color--brand );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg-on-brand );
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	justify-content: center;
	min-height: 2.75rem;
	padding-inline: var( --wp--preset--spacing--lg );
	text-decoration: none;
}

.px-lookup__submit:hover {
	filter: brightness( 1.08 );
}

.px-lookup__result {
	margin-block-start: var( --wp--preset--spacing--xl );
}

/* --- Trạng thái trống --- */

.px-empty {
	padding-block: var( --wp--preset--spacing--xl );
	text-align: center;
}

.px-empty__art {
	display: block;
	height: auto;
	margin: 0 auto var( --wp--preset--spacing--md );
	max-width: 25rem;
	width: 100%;
}

.px-empty__title {
	font-size: var( --wp--preset--font-size--body-lg );
	font-weight: 600;
	margin: 0;
}

.px-empty__lead {
	color: var( --wp--preset--color--fg-muted );
	margin: var( --wp--preset--spacing--3-xs ) 0 0;
}

/* --- Thẻ chi tiết vé --- */

.px-ticket {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	margin-inline: auto;
	max-width: var( --wp--custom--container--content, 68rem );
	padding: var( --wp--preset--spacing--md );
}

.px-ticket + .px-ticket {
	margin-block-start: var( --wp--preset--spacing--md );
}

.px-ticket__head {
	border-block-end: 1px solid var( --wp--preset--color--line );
	margin-block-end: var( --wp--preset--spacing--sm );
	padding-block-end: var( --wp--preset--spacing--2-xs );
}

.px-ticket__status {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--body-lg );
	font-weight: 700;
	margin: 0 0 var( --wp--preset--spacing--3-xs );
}

.px-ticket__code,
.px-ticket__booked {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0;
}

.px-ticket__code strong {
	color: var( --wp--preset--color--fg );
}

.px-ticket__route-name {
	font-weight: 600;
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.px-ticket__legs {
	display: grid;
	gap: var( --wp--preset--spacing--3-xs );
	list-style: none;
	margin: 0 0 var( --wp--preset--spacing--md );
	padding: 0;
}

.px-ticket__legs li {
	align-items: start;
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
}

.px-ticket__legs .px-icon {
	color: var( --wp--preset--color--brand );
	margin-block-start: 0.15rem;
}

.px-ticket__legs strong {
	min-width: 3.5rem;
}

.px-ticket__legs em {
	color: var( --wp--preset--color--fg-muted );
	display: block;
	font-size: var( --wp--preset--font-size--caption );
	font-style: normal;
}

/* Vạch nối hai mốc, giống thẻ chuyến ở trang danh sách. */
.px-ticket__duration {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	padding-inline-start: 2.25rem;
	position: relative;
}

.px-ticket__duration::before {
	border-inline-start: 1px dashed var( --wp--preset--color--line );
	content: "";
	inset-block: -0.35rem;
	inset-inline-start: 0.6rem;
	position: absolute;
}

.px-ticket__facts {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	margin: 0;
}

.px-ticket__facts dt {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
}

.px-ticket__facts dd {
	font-weight: 600;
	margin: 0;
}

.px-ticket__foot {
	align-items: center;
	border-block-start: 1px solid var( --wp--preset--color--line );
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--2-xs );
	justify-content: space-between;
	margin-block-start: var( --wp--preset--spacing--md );
	padding-block-start: var( --wp--preset--spacing--2-xs );
}

.px-ticket__total {
	margin: 0;
}

.px-ticket__total strong {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--h-3 );
}

.px-ticket__track {
	color: var( --wp--preset--color--brand );
	font-weight: 600;
}

@media ( max-width: 48rem ) {
	.px-lookup__form {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Trang tài khoản
   ------------------------------------------------------------------------- */

.px-account {
	background-color: var( --wp--preset--color--surface );
	padding-block: var( --wp--preset--spacing--lg ) var( --wp--preset--spacing--xl );
}

.px-account__grid {
	display: grid;
	gap: var( --wp--preset--spacing--md );
	grid-template-columns: 22rem 1fr;
	margin-inline: auto;
	max-width: var( --wp--custom--container--wide, 82rem );
	padding-inline: var( --wp--preset--spacing--sm );
}

.px-account__side {
	/*
	 * `stretch` chứ không phải `start`: thẻ bên trái cao bằng cột nội dung bên
	 * phải. Để `start` thì thẻ chỉ cao bằng danh sách menu của nó và bên dưới
	 * hở một mảng xám — hai cột trông như hai thứ rời nhau.
	 *
	 * Menu vẫn nằm trên đầu thẻ; phần dư đẩy xuống dưới bằng `margin-block-end:
	 * auto` ở dưới, không kéo giãn các mục menu ra cho đầy.
	 */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	overflow: hidden;
}

.px-account__card {
	padding: var( --wp--preset--spacing--md ) var( --wp--preset--spacing--sm );
	text-align: center;
}

.px-account__avatar {
	border-radius: 50%;
	height: 6rem;
	object-fit: cover;
	width: 6rem;
}

.px-account__name {
	font-size: var( --wp--preset--font-size--body-lg );
	font-weight: 700;
	margin: var( --wp--preset--spacing--2-xs ) 0 0;
}

.px-account__menu {
	display: grid;
}

.px-account__link {
	align-items: center;
	border-block-start: 1px solid var( --wp--preset--color--line );
	color: var( --wp--preset--color--fg );
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
	padding: var( --wp--preset--spacing--2-xs ) var( --wp--preset--spacing--sm );
	text-decoration: none;
}

.px-account__link:hover {
	background-color: var( --wp--preset--color--surface );
}

.px-account__link.is-current {
	background-color: var( --wp--preset--color--brand-subtle );
	color: var( --wp--preset--color--brand );
	font-weight: 600;
}

.px-account__link--out {
	color: var( --wp--preset--color--fg-muted );
}

.px-account__panel {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	padding: var( --wp--preset--spacing--md );
}

.px-account__title {
	font-size: var( --wp--preset--font-size--h-3 );
	margin: 0 0 var( --wp--preset--spacing--md );
}

.px-account__msg {
	background-color: var( --wp--preset--color--brand-subtle );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0 0 var( --wp--preset--spacing--2-xs );
	padding: var( --wp--preset--spacing--2-xs );
}

.px-account__msg.is-bad {
	color: var( --wp--preset--color--brand );
}

.px-account__cta {
	text-align: center;
}

.px-account__gate {
	margin-inline: auto;
	max-width: 30rem;
	padding-block: var( --wp--preset--spacing--xl );
	text-align: center;
}

.px-account__gate-title {
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.px-account__gate-lead {
	color: var( --wp--preset--color--fg-muted );
	margin: 0 0 var( --wp--preset--spacing--md );
}

/* --- Biểu mẫu nhãn trái, ô phải — đúng như Figma --- */

.px-form__row {
	align-items: center;
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	grid-template-columns: 10rem 1fr;
	margin: 0 0 var( --wp--preset--spacing--sm );
}

.px-form__label {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--body );
	padding: 0;
}

/*
 * Ô nhập ở trang này chỉ có gạch chân, không có khung — thiết kế vẽ vậy để
 * biểu mẫu đọc như một bảng thông tin chứ không như một tờ khai.
 */
.px-form__input {
	background: transparent;
	border: 0;
	border-block-end: 1px solid var( --wp--preset--color--line );
	border-radius: 0;
	color: var( --wp--preset--color--fg );
	font: inherit;
	padding: var( --wp--preset--spacing--3-xs ) 0;
	width: 100%;
}

.px-form__input:focus-visible {
	border-block-end-color: var( --wp--preset--color--brand );
	outline: none;
}

.px-form__input[readonly] {
	color: var( --wp--preset--color--fg-muted );
}

.px-form__hint {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	grid-column: 2;
	margin: 0.25rem 0 0;
}

.px-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--md );
}

.px-form__radio {
	align-items: center;
	display: flex;
	gap: var( --wp--preset--spacing--3-xs );
}

.px-form__dob {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	grid-template-columns: repeat( 3, 1fr );
}

.px-form__actions {
	display: flex;
	justify-content: flex-end;
	margin-block-start: var( --wp--preset--spacing--md );
}

/* --- Đơn hàng gửi --- */

.px-order + .px-order {
	border-block-start: 1px solid var( --wp--preset--color--line );
	margin-block-start: var( --wp--preset--spacing--md );
	padding-block-start: var( --wp--preset--spacing--md );
}

.px-order__title {
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.px-order__timeline {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	list-style: none;
	margin: 0;
	padding: 0 0 0 var( --wp--preset--spacing--sm );
}

.px-order__timeline li {
	border-inline-start: 2px solid var( --wp--preset--color--brand-subtle );
	padding-inline-start: var( --wp--preset--spacing--2-xs );
}

.px-order__timeline strong {
	color: var( --wp--preset--color--fg-muted );
	display: block;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 400;
}

/* --- Mã ưu đãi --- */

.px-vouchers {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	grid-template-columns: repeat( auto-fill, minmax( 16rem, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-voucher {
	border: 1px dashed var( --wp--preset--color--brand );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	padding: var( --wp--preset--spacing--2-xs );
}

.px-voucher__code {
	color: var( --wp--preset--color--brand );
	font-weight: 700;
	margin: 0;
}

.px-voucher__name {
	margin: 0.25rem 0 0;
}

.px-voucher__expiry {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0.25rem 0 0;
}

@media ( max-width: 64rem ) {
	.px-account__grid {
		grid-template-columns: 1fr;
	}

	.px-form__row {
		grid-template-columns: 1fr;
	}

	.px-form__hint {
		grid-column: 1;
	}
}

/* -------------------------------------------------------------------------
   Liên hệ và Hệ thống văn phòng
   ------------------------------------------------------------------------- */

.px-contact,
.px-offices {
	margin-inline: auto;
	max-width: var( --wp--custom--container--wide, 82rem );
	padding-block: var( --wp--preset--spacing--xl );
	padding-inline: var( --wp--preset--spacing--sm );
}

.px-contact__grid,
.px-offices__grid {
	display: grid;
	gap: var( --wp--preset--spacing--xl );
	grid-template-columns: 1fr 1fr;
}

.px-contact__brand,
.px-offices__brand {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	margin: 0 0 var( --wp--preset--spacing--md );
}

.px-contact__facts {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	list-style: none;
	margin: 0 0 var( --wp--preset--spacing--md );
	padding: 0;
}

.px-contact__facts li {
	align-items: center;
	color: var( --wp--preset--color--brand );
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	gap: var( --wp--preset--spacing--2-xs );
}

.px-contact__facts a {
	color: inherit;
}

/* --- Biểu mẫu --- */

.px-contact__pair {
	display: grid;
	gap: var( --wp--preset--spacing--md );
	grid-template-columns: 1fr 1fr;
}

.px-contact__form .nd-form__field {
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.px-contact__form .nd-form__label {
	color: var( --wp--preset--color--fg-muted );
	display: block;
	font-size: var( --wp--preset--font-size--caption );
	margin-block-end: 0.25rem;
}

.px-contact__form .nd-form__label span {
	color: var( --wp--preset--color--brand );
}

.px-contact__form .nd-form__input {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	box-sizing: border-box;
	color: var( --wp--preset--color--fg );
	font: inherit;
	font-size: var( --wp--preset--font-size--caption );
	padding: var( --wp--preset--spacing--2-xs );
	padding-inline: var( --wp--preset--spacing--sm );
	width: 100%;
}

.px-contact__form .nd-form__input:focus-visible {
	border-color: var( --wp--preset--color--brand );
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: 1px;
}

/*
 * Ô nhiều dòng KHÔNG bo viên thuốc: bán kính 999px trên một khối cao 7rem thành
 * hai đầu bán nguyệt, chữ dòng đầu và dòng cuối bị vòng cung cắt mất.
 */
.px-contact__form textarea.nd-form__input {
	border-radius: var( --wp--custom--radius--lg, 1rem );
	min-height: 7rem;
	resize: vertical;
}

.px-contact__consent {
	font-size: var( --wp--preset--font-size--caption );
	margin: var( --wp--preset--spacing--2-xs ) 0;
}

.px-contact__consent label {
	align-items: start;
	display: grid;
	gap: var( --wp--preset--spacing--3-xs );
	grid-template-columns: auto 1fr;
}

.px-contact__actions {
	margin: var( --wp--preset--spacing--md ) 0 0;
}

/* --- Bản đồ --- */

.px-contact__map,
.px-offices__map {
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	overflow: hidden;
	min-height: 24rem;
}

.px-contact__map iframe,
.px-offices__map iframe {
	border: 0;
	display: block;
	height: 100%;
	min-height: 24rem;
	width: 100%;
}

/* --- Danh sách văn phòng --- */

.px-offices__lead {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.px-offices__filters {
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	margin-block-end: var( --wp--preset--spacing--md );
}

.px-offices__select {
	appearance: none;
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg );
	font: inherit;
	font-size: var( --wp--preset--font-size--caption );
	padding: var( --wp--preset--spacing--2-xs );
	width: 100%;
}

/*
 * Danh sách cuộn trong khung như thiết kế, để bản đồ bên cạnh không bị đẩy
 * xuống khi nhà xe mở thêm văn phòng.
 */
.px-offices__list {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	list-style: none;
	margin: 0;
	max-height: 24rem;
	overflow-y: auto;
	padding: 0;
}

.px-office[hidden] {
	display: none;
}

.px-office + .px-office {
	border-block-start: 1px solid var( --wp--preset--color--line );
}

.px-office__button {
	align-items: start;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: var( --wp--preset--spacing--2-xs );
	padding: var( --wp--preset--spacing--2-xs );
	text-align: start;
	width: 100%;
}

.px-office__button:hover {
	background-color: var( --wp--preset--color--surface );
}

.px-office.is-current .px-office__button {
	background-color: var( --wp--preset--color--brand-subtle );
}

.px-office__button .px-icon {
	color: var( --wp--preset--color--brand );
	margin-block-start: 0.15rem;
}

.px-office__button strong {
	color: var( --wp--preset--color--brand );
	display: block;
	font-size: var( --wp--preset--font-size--caption );
}

.px-office__button em {
	color: var( --wp--preset--color--fg-muted );
	display: block;
	font-size: var( --wp--preset--font-size--caption );
	font-style: normal;
}

.px-offices__empty {
	color: var( --wp--preset--color--fg-muted );
	padding-block: var( --wp--preset--spacing--md );
	text-align: center;
}

@media ( max-width: 64rem ) {
	.px-contact__grid,
	.px-offices__grid {
		grid-template-columns: 1fr;
	}

	.px-contact__pair {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Tra cứu đơn hàng — khung quanh iframe của Vexere
   ------------------------------------------------------------------------- */

.px-shipment__lead {
	color: var( --wp--preset--color--fg-muted );
	margin: 0 0 var( --wp--preset--spacing--md );
}

/* Một ô nhập và nút — không phải hai ô như trang Tra cứu vé. */
.px-shipment__form {
	grid-template-columns: minmax( 0, 1fr ) auto;
}

/* Màn hẹp: nút gọn lại để ô nhập — thứ khách cần gõ vào — được phần rộng. */
@media ( max-width: 48rem ) {
	.px-shipment__form .px-lookup__submit {
		padding-inline: var( --wp--preset--spacing--md );
	}
}

/* -------------------------------------------------------------------------
   Tiện ích: chữ chỉ dành cho máy đọc

   Dùng cho những trang mà thiết kế cố ý không có tiêu đề nhìn thấy (banner đã
   mang sẵn chữ). Không dùng `display: none` hay `visibility: hidden` — cả hai
   đều giấu luôn khỏi trình đọc màn hình, tức là mất hẳn chứ không phải ẩn.
   ------------------------------------------------------------------------- */

.px-sr-only:not( :focus ):not( :active ) {
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* -------------------------------------------------------------------------
   Dải cam kết dịch vụ (Figma Trang chủ / Section 1)

   Ba thẻ bằng nhau, ngăn nhau bằng một đường kẻ dọc — kẻ bằng viền của thẻ
   thay vì thêm phần tử rỗng, để trình đọc màn hình không phải đọc qua ba ô
   trống vô nghĩa.
   ------------------------------------------------------------------------- */

.px-trust {
	display: grid;
	gap: 0;
	grid-template-columns: repeat( 3, 1fr );
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-trust__card {
	align-items: start;
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
	padding-inline: var( --wp--preset--spacing--md );
}

.px-trust__card + .px-trust__card {
	border-inline-start: 1px solid var( --wp--preset--color--line );
}

.px-trust__icon {
	align-items: center;
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border-radius: 50%;
	color: var( --wp--preset--color--brand );
	display: flex;
	flex: none;
	height: 3.5rem;
	justify-content: center;
	width: 3.5rem;
}

.px-trust__icon .px-icon {
	height: 2rem;
	width: 2rem;
}

.px-trust__body {
	display: grid;
	gap: 0.25rem;
}

.px-trust__title {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
}

.px-trust__text {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
}

/* -------------------------------------------------------------------------
   Chân trang

   KHÔNG GẠCH CHÂN. Thiết kế không gạch chân liên kết nào ở thanh điều hướng,
   chân trang hay thẻ bài viết — đó là những chỗ mà vị trí và ngữ cảnh đã nói rõ
   "đây là liên kết". Gạch chân chỉ giữ lại trong THÂN BÀI, nơi liên kết nằm lẫn
   giữa câu chữ và màu sắc thôi thì không đủ để phân biệt.
   ------------------------------------------------------------------------- */

/*
 * KHÔNG GẠCH CHÂN Ở ĐÂU CẢ, kể cả khi rê chuột. Thiết kế không gạch chân một
 * liên kết nào, và khách không thích hiệu ứng ấy.
 *
 * Nhưng liên kết vẫn phải có dấu hiệu khi trỏ tới, nếu không thì người dùng
 * không biết chỗ nào bấm được. Thay bằng ĐỔI MÀU sang đỏ thương hiệu.
 *
 * Viền focus thì GIỮ NGUYÊN, không đụng tới: người dùng bàn phím chỉ có mỗi cái
 * viền ấy để biết mình đang đứng ở đâu, và màu thôi thì không đủ.
 */
a {
	text-decoration: none;
}

a:hover {
	color: var( --wp--preset--color--brand );
	text-decoration: none;
}

/*
 * Focus thì GIỮ gạch chân. Khách chỉ chê hiệu ứng khi rê chuột; người dùng bàn
 * phím thì cần một dấu hiệu rõ ràng, và bỏ nốt ở đây là lấy đi thứ duy nhất họ
 * có ngoài viền focus.
 */

.px-footer__contact {
	display: grid;
	gap: var( --wp--preset--spacing--3-xs );
	list-style: none;
	margin: var( --wp--preset--spacing--2-xs ) 0;
	padding: 0;
}

.px-footer__contact li {
	align-items: center;
	color: var( --wp--preset--color--fg-muted );
	display: flex;
	/* 16px, cùng cỡ với các cột liên kết bên cạnh. */
	font-size: var( --wp--preset--font-size--body );
	gap: var( --wp--preset--spacing--3-xs );
}

.px-footer__contact a {
	color: inherit;
}

.px-footer__icon {
	color: var( --wp--preset--color--fg-muted );
	flex: none;
}

.px-footer__bct {
	margin-block-start: var( --wp--preset--spacing--2-xs );
}

.px-footer__social {
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-footer__social a {
	align-items: center;
	color: var( --wp--preset--color--fg );
	display: flex;
}

.px-footer__social a:hover {
	color: var( --wp--preset--color--brand );
}

.px-footer__social .px-footer__icon {
	color: inherit;
	height: 1.5rem;
	width: 1.5rem;
}

@media ( max-width: 64rem ) {
	.px-trust {
		grid-template-columns: repeat( 2, 1fr );
	}

	.px-trust__card + .px-trust__card {
		border-inline-start: 0;
	}
}

@media ( max-width: 40rem ) {
	.px-trust {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Khoảng cách giữa các khối cấp cao nhất

   WordPress tự sinh `:where(.wp-site-blocks) > * { margin-block-start: … }` từ
   `spacing.blockGap` của theme.json. Ở site này nó thừa: mọi section đã tự có
   padding trên dưới, nên margin ấy cộng thêm một khoảng trống nữa — rõ nhất là
   giữa đầu trang, thân trang và chân trang.
   ------------------------------------------------------------------------- */

:where( .wp-site-blocks ) > * {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   Bốn bước đặt vé (Figma Trang chủ / Section 2)

   Hai ảnh CHỒNG nhau: ảnh lớn 500×625 sát mép trái, ảnh nhỏ 400×500 đè lên góc
   dưới bên phải, tất cả nằm trong khung 784×625. Dùng phần trăm và aspect-ratio
   để co giãn được — 500/784 = 63.8%, 400/784 = 51%.
   ------------------------------------------------------------------------- */

.px-steps__media {
	aspect-ratio: 784 / 625;
	position: relative;
	width: 100%;
}

/*
 * KHÔNG đặt `height: 100%`. Đặt là hai tấm ảnh cao bằng nhau và bằng cả khung,
 * `aspect-ratio` bị vô hiệu — đúng cái làm chúng đứng cạnh nhau như hai tấm
 * chia đôi thay vì một tấm lớn có tấm nhỏ đè lên. Để bề rộng và tỉ lệ tự quyết
 * chiều cao: tấm lớn 500/625 phủ hết chiều cao khung, tấm nhỏ 400/500 chỉ cao
 * bằng 80% — và đó chính là chỗ tạo ra thế chồng lớp.
 *
 * `box-sizing: border-box` để viền trắng 6px của tấm nhỏ nằm TRONG kích thước,
 * không cộng thêm ra ngoài.
 */
.px-steps__media img {
	border-radius: var( --wp--custom--radius--lg, 1rem );
	box-sizing: border-box;
	display: block;
	object-fit: cover;
	position: absolute;
}

.px-steps__media-back {
	aspect-ratio: 500 / 625;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 63.8%;
}

/*
 * Viền trắng tách ảnh nhỏ khỏi ảnh lớn. Không có nó thì hai tấm ảnh cùng tông
 * dính vào nhau thành một mảng, đúng chỗ thiết kế muốn thấy rõ hai lớp.
 */
.px-steps__media-front {
	aspect-ratio: 400 / 500;
	border: 6px solid var( --wp--preset--color--surface-raised, #fff );
	inset-block-end: 0;
	inset-inline-end: 0;
	width: 51%;
}

.px-steps {
	counter-reset: px-step;
	display: grid;
	gap: var( --wp--preset--spacing--sm );
	list-style: none;
	margin: var( --wp--preset--spacing--2-xs ) 0 0;
	padding: 0;
}

.px-steps__item {
	counter-increment: px-step;
	display: grid;
	gap: 0.15rem;
	padding-inline-start: 3rem;
	position: relative;
}

/* Vòng tròn VIỀN đỏ mang số thứ tự, không phải nền đỏ đặc. */
.px-steps__item::before {
	align-items: center;
	border: 1.5px solid var( --wp--preset--color--brand );
	border-radius: 50%;
	color: var( --wp--preset--color--brand );
	content: counter( px-step );
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 700;
	height: 1.75rem;
	inset-block-start: 0;
	inset-inline-start: 0;
	justify-content: center;
	position: absolute;
	width: 1.75rem;
}

/* Đường nối dọc giữa các bước, dừng trước bước cuối. */
.px-steps__item:not( :last-child )::after {
	background-color: var( --wp--preset--color--brand );
	content: "";
	inset-block: 2rem -1rem;
	inset-inline-start: 0.845rem;
	opacity: 0.35;
	position: absolute;
	width: 1px;
}

.px-steps__title {
	color: var( --wp--preset--color--fg );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
}

.px-steps__text {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
}

/* -------------------------------------------------------------------------
   Thẻ bài viết (Figma Trang chủ / Section 5)

   Ảnh, tiêu đề, trích đoạn, rồi ngày đăng kèm icon lịch. KHÔNG có tên chuyên
   mục: thiết kế không vẽ, và bốn thẻ cùng một chuyên mục thì dòng ấy chỉ lặp
   lại đúng một chữ bốn lần.

   Icon lịch vẽ bằng `mask` thay vì `<img>`: ngày đăng do block `post-date` của
   WordPress sinh ra, không chèn thêm phần tử con vào trong được.
   ------------------------------------------------------------------------- */

/*
 * KHÔNG viền, KHÔNG khung. Đối chiếu ảnh thiết kế trong screenshot/Trang chủ.png:
 * thẻ bài viết chỉ là ảnh rồi chữ, đặt thẳng trên nền trắng. Tôi từng bọc thêm
 * viền và đệm — trông ra một cái hộp mà thiết kế không có.
 */
.px-news__card {
	background-color: transparent;
}

.px-news__card .wp-block-post-featured-image {
	margin-block-end: var( --wp--preset--spacing--2-xs );
}

.px-news__card .wp-block-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.px-news__card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.px-news__date {
	align-items: center;
	display: flex;
	gap: 0.35rem;
}

.px-news__date::before {
	background-color: currentColor;
	content: "";
	flex: none;
	height: 1rem;
	mask: var( --px-icon-calendar ) center / contain no-repeat;
	-webkit-mask: var( --px-icon-calendar ) center / contain no-repeat;
	width: 1rem;
}

/*
 * KHÔNG ĐỔI TỈ LỆ KHUNG THEO MÀN HÌNH. Trước đây màn hẹp dùng 784/560 cho gọn,
 * nhưng hai tấm ảnh bên trong là `position: absolute` nên khung KHÔNG tự cao
 * theo chúng: ảnh lớn (63.8% bề rộng, tỉ lệ 500/625) luôn cao bằng 0.797 lần bề
 * rộng khung, trong khi 784/560 chỉ cho 0.714 — thiếu đúng 8%, và ảnh tràn
 * xuống đè lên tiêu đề "Dễ dàng đặt vé trên Website".
 *
 * Đo trên màn 390px: khung 244px, ảnh lớn 273px, tràn 28px.
 *
 * 784/625 = 0.797 là con số khớp chính xác với chiều cao ảnh lớn, nên giữ
 * nguyên ở mọi cỡ màn.
 */

/*
 * Lớp phủ khi chưa cấu hình video: tấm banner ở cỡ lớn. Cùng khung với trình
 * phát nên khi có video thật thì bố cục không nhảy.
 */
.px-video__still {
	display: block;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Danh sách chọn điểm tự vẽ

   Lý do tồn tại nằm ở đầu assets/combo.js: danh sách của `<select>` do hệ điều
   hành vẽ nên CSS không với tới được khoảng đệm. Ở đây thì với tới được.
   ------------------------------------------------------------------------- */

.px-combo {
	position: relative;
}

/*
 * `<select>` gốc vẫn nằm trong biểu mẫu để mang giá trị khi gửi đi, chỉ ẩn khỏi
 * mắt. KHÔNG dùng `display: none` — trình duyệt bỏ qua trường bị ẩn kiểu ấy ở
 * một số thao tác, và ta cần nó vẫn là một trường thật.
 */
.px-combo__native {
	block-size: 1px;
	clip-path: inset( 50% );
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
}

.px-combo__button {
	background: none;
	border: 0;
	color: var( --wp--preset--color--fg );
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: var( --wp--preset--font-size--body );
	font-weight: 500;
	inline-size: 100%;
	padding: 0;
	text-align: start;
}

.px-combo__button:focus-visible {
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: 3px;
}

.px-combo__list {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.14 );
	inset-block-start: calc( 100% + 0.75rem );
	inset-inline-start: 0;
	list-style: none;
	margin: 0;
	max-block-size: 20rem;
	min-inline-size: 16rem;
	overflow-y: auto;
	padding: 0.5rem;
	position: absolute;
	z-index: 20;
}

/* Đây chính là khoảng đệm mà `<select>` không cho đặt. */
.px-combo__option {
	border-radius: var( --wp--custom--radius--sm, 0.375rem );
	cursor: pointer;
	font-size: var( --wp--preset--font-size--caption );
	padding: 0.625rem 0.75rem;
}

.px-combo__option:hover,
.px-combo__option:focus-visible {
	background-color: var( --wp--preset--color--brand-subtle );
	color: var( --wp--preset--color--brand );
	outline: none;
}

.px-combo__option[ aria-selected="true" ] {
	background-color: var( --wp--preset--color--brand-subtle );
	color: var( --wp--preset--color--brand );
	font-weight: 600;
}

.px-combo__group-title {
	color: var( --wp--preset--color--fg-muted );
	display: block;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 700;
	padding: 0.5rem 0.75rem 0.25rem;
}

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

/* Điểm trong một tỉnh thụt vào, để thấy rõ nó thuộc về tỉnh phía trên. */
.px-combo__group-list .px-combo__option {
	padding-inline-start: 1.5rem;
}

/* -------------------------------------------------------------------------
   Chiều cao dòng đi kèm từng cỡ chữ

   `settings.typography.fontSizes` của WordPress chỉ khai được CỠ chữ, không khai
   được chiều cao dòng. Mà trong Figma hai thứ ấy luôn đi thành cặp
   (`font-size/b3` = 14 luôn đi với `line-height/b3` = 20). Thiếu vế sau thì chữ
   đúng cỡ nhưng dãn dòng sai, và khối chữ cao thấp lung tung so với thiết kế.
   ------------------------------------------------------------------------- */

.has-h-1-font-size { line-height: 1.2; }
.has-h-2-font-size { line-height: 1.25; }
.has-h-3-font-size { line-height: 1.4; }
.has-body-lg-font-size { line-height: 1.4444; }
.has-body-font-size { line-height: 1.5; }
.has-small-font-size { line-height: 1.4286; }
.has-caption-font-size { line-height: 1.5; }

/* -------------------------------------------------------------------------
   Đầu trang: liên kết cùng MỘT màu

   Trước đó đầu trang hiện hai màu: nhóm bên trái (Tra cứu vé xe / Tra cứu đơn
   hàng / Dịch vụ) là các thẻ <a> trong đoạn văn nên ăn màu liên kết mặc định —
   đỏ; nhóm bên phải là block Navigation của WordPress, vốn đã được tô màu chữ
   thường. Cùng một hàng, hai màu, và thiết kế thì chỉ có một.

   CẨN THẬN VỚI SLUG "link": nếu đặt một ô màu tên `link` trong bảng màu,
   WordPress sinh ra `.has-link-color { color: … }` — trùng đúng cái lớp đánh dấu
   mà chính WordPress dùng cho màu liên kết của khối. Hệ quả: mọi khối có khai
   màu liên kết bị đổi màu CHỮ theo. Ở đây đã đổi slug thành `text-link`.
   ------------------------------------------------------------------------- */

.px-header__utility a,
.px-header__end .wp-block-navigation a {
	color: var( --wp--preset--color--fg );
}

.px-header__utility a:hover,
.px-header__end .wp-block-navigation a:hover {
	color: var( --wp--preset--color--brand );
}

/* Thanh đỏ trên cùng: chữ và liên kết đều trắng. */
.px-header__topbar,
.px-header__topbar p,
.px-header__topbar a {
	color: var( --wp--preset--color--fg-on-brand );
}

/*
 * Ô đổi ngôn ngữ của GTranslate trên thanh đỏ (inc/translate.php).
 *
 * GTranslate tự dựng một `<select class="gt_selector">` vào trong bọc của nó.
 * Mặc định là ô xám viền trắng của hệ điều hành — trên nền đỏ trông như lỗi.
 * Ở đây nó thành chữ trắng trần, mũi tên trắng, đọc liền một câu với nhãn
 * "Ngôn ngữ:" y như dòng chữ cũ trong thiết kế.
 */
.px-lang {
	align-items: center;
	display: flex;
	gap: 0.25rem;
	margin: 0;
}

.px-lang .gtranslate_wrapper {
	position: relative;
}

.px-lang .gt_selector {
	appearance: none;
	background: transparent;
	border: 0;
	color: var( --wp--preset--color--fg-on-brand );
	cursor: pointer;
	font: inherit;
	/*
	 * `<select>` mặc định rộng bằng lựa chọn DÀI NHẤT trong danh sách, nên mũi
	 * tên đứng cách xa chữ "Tiếng Việt" cả một khoảng. `field-sizing` co ô theo
	 * lựa chọn đang chọn (Chromium); trình duyệt chưa hỗ trợ thì nhờ nhãn đầu
	 * danh sách đã rút ngắn (inc/translate.php) nên khoảng hở cũng nhỏ.
	 */
	field-sizing: content;
	font-weight: 600;
	margin: 0;
	padding: 0 1.1rem 0 0;
}

/* Danh sách xổ do hệ điều hành vẽ trên nền trắng: chữ phải tối lại. */
.px-lang .gt_selector option {
	color: var( --wp--preset--color--fg );
}

.px-lang .gt_selector:focus-visible {
	outline: 2px solid var( --wp--preset--color--fg-on-brand );
	outline-offset: 2px;
}

.px-lang .gtranslate_wrapper::after {
	background-color: var( --wp--preset--color--fg-on-brand );
	content: "";
	height: 0.9rem;
	inset-block-start: 50%;
	inset-inline-end: 0;
	mask: var( --px-icon-chevron ) center / contain no-repeat;
	-webkit-mask: var( --px-icon-chevron ) center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	transform: translateY( -50% );
	width: 0.9rem;
}

/* Nút Đăng nhập vẫn là chữ trắng trên nền đỏ, không theo hai quy tắc trên. */
.px-header__cta .wp-block-button__link {
	color: var( --wp--preset--color--fg-on-brand );
}

/* -------------------------------------------------------------------------
   Sửa theo ảnh thiết kế trong screenshot/
   ------------------------------------------------------------------------- */

/*
 * Ô tìm vé ở TRANG CHỦ: hàng trường nằm trong một khung riêng có viền và bo góc
 * nhỏ, lồng bên trong thẻ trắng — thiết kế vẽ hai lớp như vậy.
 *
 * KHÔNG áp cho biến thể `--inline` ở trang kết quả: ở đó `.px-search__form` đã
 * là một thẻ có viền và bo góc 16px, thêm viền nữa vào trong là hai đường kẻ
 * song song cách nhau đúng 16px đệm — trông như lỗi dựng, và đúng là lỗi dựng.
 */
.px-search:not( .px-search--inline ) .px-search__row {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
}

/*
 * Ở biến thể inline, hàng trường lấp đầy thẻ luôn: bỏ đệm ngang của form để
 * không còn dải trống hai bên giữa viền thẻ và trường đầu tiên.
 */
.px-search--inline .px-search__form {
	padding-inline: 0;
}

/*
 * Nút đảo chiều nằm ĐÈ lên đường kẻ giữa hai trường, không nằm thành một cột
 * riêng — nên nó cần nền trắng để không bị đường kẻ cắt ngang.
 */
.px-search__swap {
	background-color: var( --wp--preset--color--surface-raised, #fff );
}

/*
 * Bước đặt vé: vòng tròn NỀN ĐỎ, số màu TRẮNG. Tôi từng đọc ảnh thiết kế ở cỡ
 * nhỏ rồi kết luận nhầm là vòng tròn viền — xem lại screenshot/Trang chủ.png ở
 * cỡ thật thì rõ là nền đặc.
 */
.px-steps__item::before {
	background-color: var( --wp--preset--color--brand );
	border: 0;
	color: var( --wp--preset--color--fg-on-brand );
}

/*
 * Ảnh nhỏ canh GIỮA theo chiều dọc, không dính đáy. Trong thiết kế mép trên của
 * nó cách mép trên ảnh lớn đúng bằng mép dưới cách mép dưới (≈11% mỗi bên), nên
 * hai tấm giao nhau ở phần giữa chứ không chồng ở góc.
 */
.px-steps__media-front {
	inset-block-end: auto;
	inset-block-start: 50%;
	transform: translateY( -50% );
}

/* -------------------------------------------------------------------------
   Header hai menu (nd/split-header)
   ------------------------------------------------------------------------- */

/*
 * RÀNG KÍCH THƯỚC LOGO. `nd/split-header` chỉ áp `logoWidth` cho tấm ảnh khai
 * thẳng trong block; khi rơi về nhánh `the_custom_logo()` thì ảnh ra đúng kích
 * thước gốc. Logo của Phúc Xuyên rộng 936px, nên header phình ra và kéo cả
 * trang rộng gấp đôi khung nhìn.
 *
 * Ràng ở CSS chứ không truyền `logoUrl` vào block: template part là HTML tĩnh,
 * không thay được token `{{ND_MEDIA:}}` (đã ghi ở DEBT-010), mà chép logo sang
 * thư mục plugin thì site có hai bản logo và Site Editor đổi một bản không ăn.
 */
.nd-split-header__logo img,
.nd-split-header__logo .custom-logo {
	block-size: auto;
	inline-size: 9.375rem;
	max-inline-size: 100%;
}

.px-header__hotline {
	align-items: center;
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	gap: 0.35rem;
	margin: 0;
}

.px-header__icon {
	flex: none;
}

/*
 * "Đăng nhập" là một mục trong menu phải chứ không phải nút riêng — block chia
 * đúng ba ô và không nhận khối con. Bắt theo `href` để vẽ thành viên thuốc đỏ:
 * bắt theo vị trí thì thêm bớt mục menu là hỏng.
 */
.nd-split-header__slot--right a[ href$="#dang-nhap" ] {
	background-color: var( --wp--preset--color--brand );
	border-radius: var( --wp--custom--radius--pill, 999px );
	color: var( --wp--preset--color--fg-on-brand );
	padding: 0.5rem 1.25rem;
}

.nd-split-header__slot--right a[ href$="#dang-nhap" ]:hover {
	background-color: var( --wp--preset--color--brand );
}

/* -------------------------------------------------------------------------
   Trang Tin tức

   `nd/post-loop` bố cục `grid` mặc định ba cột. Thiết kế của Phúc Xuyên
   (screenshot/Tin tức.png) là BỐN thẻ một hàng, nên đè lại ở đây thay vì sửa
   CSS của nền — nền còn phục vụ khách khác, ba cột là mặc định hợp lý của nó.
   ------------------------------------------------------------------------- */

@media ( min-width: 64rem ) {
	.px-news-section .nd-loop--grid .nd-loop__cols {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/*
 * Cột "Bài viết xem nhiều" đánh số theo thứ tự hiển thị. Đếm bằng CSS chứ không
 * viết số vào nội dung: thêm bớt bài thì số tự chạy lại.
 */
.px-news-ranked .nd-loop__cols {
	counter-reset: px-rank;
}

.px-news-ranked .nd-loop__cols > * {
	counter-increment: px-rank;
}

/* -------------------------------------------------------------------------
   Trang Tin tức — chỉnh theo screenshot/Tin tức.png
   ------------------------------------------------------------------------- */

/*
 * TIÊU ĐỀ MỤC LÀ CHỮ KÈM ĐƯỜNG KẺ, không phải nhãn nền đen. Mặc định của
 * `nd/post-loop` là một nhãn tô nền — hợp lý cho khách khác, nhưng thiết kế của
 * Phúc Xuyên vẽ chữ thường rồi một đường kẻ mảnh chạy hết chiều ngang cột.
 */
.px-news-section .nd-loop__head {
	/*
	 * Đường kẻ NẰM DƯỚI tiêu đề và chạy hết chiều ngang cột, không phải một
	 * vạch nối bên cạnh chữ. Màu lấy ô `fg-disabled` vì đó chính là
	 * neutral-500 (#9EA0B6) mà thiết kế chỉ định cho đường kẻ này — cùng một
	 * mã màu, chỉ khác tên vai trò.
	 */
	border-block-end: 1px solid var( --wp--preset--color--fg-disabled );
	margin-block-end: var( --wp--preset--spacing--md );
	padding-block-end: var( --wp--preset--spacing--2-xs );
}

.px-news-section .nd-loop__head-label {
	background: none;
	color: var( --wp--preset--color--fg );
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	letter-spacing: 0;
	padding: 0;
	text-transform: none;
}

/* Nhãn chuyên mục: chữ đỏ, nằm trên tiêu đề. */
.px-news-section .nd-loop__kicker {
	color: var( --wp--preset--color--brand );
}

/* Ngày đăng kèm icon lịch, giống thẻ tin ở trang chủ. */
.px-news-section .nd-loop__meta time::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1rem;
	margin-inline-end: 0.35rem;
	mask: var( --px-icon-calendar ) center / contain no-repeat;
	-webkit-mask: var( --px-icon-calendar ) center / contain no-repeat;
	vertical-align: -0.2rem;
	width: 1rem;
}

/* -------------------------------------------------------------------------
   Cột "Bài viết xem nhiều"

   Thiết kế: KHÔNG có ảnh, thay vào đó là một số thứ tự trong vòng tròn xám.
   Số do CSS đếm nên thêm bớt bài là nó tự chạy lại.
   ------------------------------------------------------------------------- */

.px-news-ranked .nd-loop__item {
	counter-increment: px-rank;
	gap: var( --wp--preset--spacing--2-xs );
}

.px-news-ranked .nd-loop {
	counter-reset: px-rank;
}

.px-news-ranked .nd-loop__media {
	display: none;
}

.px-news-ranked .nd-loop__body {
	display: grid;
	gap: 0.25rem;
	grid-template-columns: auto 1fr;
}

.px-news-ranked .nd-loop__body::before {
	align-items: center;
	background-color: var( --wp--preset--color--surface );
	border-radius: 50%;
	color: var( --wp--preset--color--fg-muted );
	content: counter( px-rank );
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	grid-row: 1 / span 3;
	height: 1.75rem;
	justify-content: center;
	width: 1.75rem;
}

/* Cột này không có ngày trong thiết kế. */
.px-news-ranked .nd-loop__meta {
	display: none;
}

/*
 * Thứ tự trong thân thẻ: chuyên mục · tiêu đề · trích đoạn · NGÀY.
 * `_card.php` in dòng meta trước trích đoạn (hợp lý cho layout khác), còn thiết
 * kế đặt ngày xuống cuối. Đổi bằng `order` thay vì sửa file dùng chung của nền.
 */
.px-news-section .nd-loop__body {
	display: flex;
	flex-direction: column;
}

.px-news-section .nd-loop__kicker { order: 1; }
.px-news-section .nd-loop__title { order: 2; }
.px-news-section .nd-loop__excerpt { order: 3; }
.px-news-section .nd-loop__meta { order: 4; }

/*
 * ĐẶT SAU quy tắc `order` phía trên, cố ý. Quy tắc ấy đặt
 * `.px-news-section .nd-loop__body { display: flex }`, mà cột xếp hạng cần lưới
 * hai cột để con số nằm BÊN TRÁI khối chữ. Cùng độ ưu tiên thì cái sau thắng,
 * nên thứ tự trong file này là một phần của lời giải, không phải ngẫu nhiên.
 */
.px-news-ranked .nd-loop__body {
	column-gap: var( --wp--preset--spacing--2-xs );
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	row-gap: 0.25rem;
}

.px-news-ranked .nd-loop__body::before {
	grid-column: 1;
	grid-row: 1 / span 3;
}

.px-news-ranked .nd-loop__title,
.px-news-ranked .nd-loop__excerpt {
	grid-column: 2;
}

/* Thiết kế không ghi chuyên mục ở cột này — chỉ số thứ tự, tiêu đề, trích đoạn. */
.px-news-ranked .nd-loop__kicker {
	display: none;
}

/*
 * Cắt trích đoạn còn hai dòng ở cả hai cột dưới. Không cắt thì cột phải hẹp làm
 * chữ đổ xuống bảy tám dòng, và hai cột lệch nhau cả màn hình — thiết kế cho
 * chúng kết thúc gần ngang nhau.
 */
.px-news-section .nd-loop--list .nd-loop__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.px-news-ranked .nd-loop__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/*
 * ĐẦU TRANG KHÔNG CÓ ĐỆM HAI BÊN. Nhóm ngoài cùng của header ăn phải khoảng đệm
 * toàn cục, nên dải đỏ trên cùng bị thụt vào 38px mỗi bên thay vì chạy sát mép
 * màn hình như thiết kế. Phần thụt vào là việc của hai nhóm bên trong — cả hai
 * đều đã `constrained` và tự lo lấy.
 */
.px-header {
	/*
	 * KHÔNG ĐỆM QUANH ĐẦU TRANG.
	 *
	 * Ngang: nhóm ngoài cùng ăn phải khoảng đệm toàn cục nên dải đỏ thụt vào
	 * 38px mỗi bên thay vì chạy sát mép. Phần thụt vào là việc của hai nhóm bên
	 * trong, cả hai đều đã `constrained`.
	 *
	 * Dọc: `.nd-header` của nền thêm 20px trên và 20px dưới — 40px trong tổng
	 * 121px chiều cao đầu trang. Đầu trang vốn không cần đệm dọc: thanh đỏ và
	 * hàng menu đều tự có chiều cao riêng, và đầu trang lại dính khi cuộn nên
	 * mỗi pixel thừa là một pixel che mất nội dung suốt cả trang.
	 */
	padding-block: 0;
	padding-inline: 0;
}

/*
 * CHÂN TRANG: LIÊN KẾT MÀU CHỮ THƯỜNG, không phải đỏ thương hiệu. Cả khối chân
 * trang là chữ xám đen trên nền xám nhạt; tô đỏ từng liên kết làm cả vùng lấm
 * tấm và kéo mắt khỏi chỗ đáng nhìn.
 */
.px-footer a {
	color: var( --wp--preset--color--fg );
}

.px-footer a:hover {
	color: var( --wp--preset--color--brand );
}

/*
 * Cột "Bài viết xem nhiều" bỏ ảnh, nên phải bỏ luôn CỘT dành cho ảnh. Bố cục
 * `list` của nền chia thẻ thành hai cột (ảnh 14rem · chữ 1fr); giấu ảnh bằng
 * `display: none` thì khối chữ rơi vào đúng cột 14rem và bị bóp lại còn hơn
 * một phần ba chiều rộng, phần còn lại bỏ trống.
 */
.px-news-ranked .nd-loop__item {
	grid-template-columns: minmax( 0, 1fr );
}

/* Ảnh trong danh sách theo tỉ lệ 3:2 như thiết kế (215×140). */
.px-news-section .nd-loop--list .nd-loop__media {
	aspect-ratio: 3 / 2;
}

/* -------------------------------------------------------------------------
   Trang chi tiết bài viết (screenshot/Chi tiết tin tức.png)
   ------------------------------------------------------------------------- */

.px-crumbs__list {
	color: var( --wp--preset--color--fg-muted );
	display: flex;
	flex-wrap: wrap;
	font-size: var( --wp--preset--font-size--caption );
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 var( --wp--preset--spacing--2-xs );
	padding: 0;
}

/*
 * Dấu › vẽ bằng `::before` của mục SAU, không phải phần tử riêng: trình đọc màn
 * hình không phải đọc một loạt ký tự trang trí xen giữa các mốc.
 */
.px-crumbs__item + .px-crumbs__item::before {
	color: var( --wp--preset--color--icon-faint );
	content: "›";
	margin-inline-end: 0.5rem;
}

.px-crumbs a {
	color: inherit;
}

.px-crumbs a:hover {
	color: var( --wp--preset--color--brand );
}

.px-crumbs [ aria-current="page" ] {
	color: var( --wp--preset--color--fg );
}

/* --- Ngày đăng và nút chia sẻ --- */

.px-postmeta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--2-xs );
	justify-content: space-between;
}

.px-postmeta__date {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
}

.px-postmeta__share {
	align-items: center;
	color: var( --wp--preset--color--fg-muted );
	display: flex;
	font-size: var( --wp--preset--font-size--caption );
	gap: var( --wp--preset--spacing--2-xs );
	margin: 0;
}

.px-postmeta__fb {
	align-items: center;
	background-color: var( --wp--preset--color--text-link );
	border-radius: 50%;
	color: var( --wp--preset--color--fg-on-brand );
	display: flex;
	height: 1.75rem;
	justify-content: center;
	width: 1.75rem;
}

/* --- Mục lục --- */

.px-toc {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	padding: var( --wp--preset--spacing--md );
}

.px-toc__head {
	align-items: center;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	list-style: none;
}

/* Bỏ tam giác mặc định của <summary> trên WebKit. */
.px-toc__head::-webkit-details-marker {
	display: none;
}

.px-toc__title {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
}

.px-toc__toggle {
	color: var( --wp--preset--color--fg-muted );
}

.px-toc__list {
	list-style: none;
	margin: var( --wp--preset--spacing--2-xs ) 0 0;
	padding: 0;
}

.px-toc__item {
	border-block-start: 1px solid var( --wp--preset--color--line );
}

.px-toc__item a {
	color: var( --wp--preset--color--fg );
	display: block;
	font-size: var( --wp--preset--font-size--small );
	padding: 0.75rem 0 0.75rem 1rem;
}

.px-toc__item a:hover {
	color: var( --wp--preset--color--brand );
}

/* --- Thẻ tag --- */

.px-article__tags {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
}

.px-article__tags a {
	color: var( --wp--preset--color--fg );
}

/* --- Cột phải --- */

.px-aside-list .nd-loop__item {
	grid-template-columns: minmax( 0, 7rem ) minmax( 0, 1fr );
}

.px-aside-list .nd-loop__media {
	aspect-ratio: 3 / 2;
}

.px-aside-list .nd-loop__kicker {
	display: none;
}

@media ( max-width: 64rem ) {
	.px-article {
		flex-wrap: wrap;
	}
}

/* -------------------------------------------------------------------------
   Cỡ chữ trong thân bài viết

   Tiêu đề mục TRONG BÀI không cùng cỡ với tiêu đề mục ngoài trang. `styles.
   elements.h2` của preset đặt mọi `<h2>` về 32px — đúng cho tiêu đề khối
   ("Ưu đãi đặc biệt dành cho bạn"), nhưng trong một bài viết thì 32px bằng
   đúng cỡ tiêu đề bài, và người đọc không còn phân biệt được đâu là tên bài,
   đâu là tên mục.

   Thiết kế dùng Heading/H6 (20/28) cho tiêu đề mục trong bài. Chặn phạm vi ở
   `.wp-block-post-content` nên không đụng tới tiêu đề khối ở các trang khác.
   ------------------------------------------------------------------------- */

.wp-block-post-content h2 {
	font-size: var( --wp--preset--font-size--h-3 );
	line-height: 1.4;
	margin-block-start: var( --wp--preset--spacing--md );
}

.wp-block-post-content h3 {
	font-size: var( --wp--preset--font-size--body-lg );
	line-height: 1.4444;
}

/* Mục trong mục lục cùng cỡ với chữ thân bài, như thiết kế. */
.px-toc__item a {
	font-size: var( --wp--preset--font-size--body );
}

/* Tiêu đề bài ở cột phải: 16px đậm, không phải 20px. */
.px-aside-list .nd-loop__title,
.px-news-ranked .nd-loop__title {
	font-size: var( --wp--preset--font-size--body );
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Khối bài nổi bật (mosaic) — chỉnh theo screenshot/Tin tức.png
   ------------------------------------------------------------------------- */

/*
 * Thẻ lớn dùng cỡ 20px như mọi tiêu đề thẻ khác, không phải 28px. 28px là mặc
 * định của `nd/post-loop` — hợp lý cho khách khác, nhưng nó nằm ngoài thang chữ
 * của Phúc Xuyên (40 · 32 · 20 · 18 · 16 · 14 · 12) nên trông lạc.
 */
.px-news-section .nd-loop__item--lead .nd-loop__title {
	font-size: var( --wp--preset--font-size--h-3 );
	line-height: 1.4;
}

.px-news-section .nd-loop__item--wide .nd-loop__title,
.px-news-section .nd-loop__item--small .nd-loop__title {
	font-size: var( --wp--preset--font-size--body );
	line-height: 1.4;
}

/*
 * Nhãn chuyên mục trên ảnh là CHỮ THƯỜNG mờ, không phải nhãn tô nền đỏ. Thiết
 * kế đặt nó ngay trên tiêu đề, cùng một khối chữ trắng đè lên ảnh tối — thêm
 * một mảng đỏ ở đó là thêm một thứ tranh chỗ với tiêu đề.
 */
.px-news-section .nd-loop__badge {
	background: none;
	border-radius: 0;
	color: var( --wp--preset--color--fg-on-brand );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 400;
	opacity: 0.85;
	padding: 0;
	position: static;
	text-transform: none;
}

/*
 * BÁN KÍNH BO GÓC CỦA THẺ TIN LÀ 16px Ở MỌI CHỖ. Trang chủ trước dùng 8px
 * (radius md) còn khối của nền dùng bán kính riêng, nên ba nơi ba kiểu. Thiết
 * kế dùng Radius/lg = 16px cho tất cả.
 */
.px-news-section .nd-loop__media,
.px-news-section .nd-loop__item--lead,
.px-news-section .nd-loop__item--wide,
.px-news-section .nd-loop__item--small {
	border-radius: var( --wp--custom--radius--lg, 1rem );
	overflow: hidden;
}

/*
 * `nd/post-loop` gạch chân tiêu đề bài khi rê chuột
 * (`.nd-loop__title a:hover` trong style.css của nền). Đó là mặc định hợp lý
 * của nền và khách khác có thể vẫn muốn, nên đè ở đây thay vì sửa nền — độ ưu
 * tiên 0,3,1 so với 0,2,1 nên thắng mà không cần `!important`.
 */
.px-news-section .nd-loop__title a:hover {
	color: var( --wp--preset--color--brand );
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Đầu trang dính khi cuộn

   nd-base đã bật `settings.position.sticky` trong theme.json, nên WordPress cho
   phép đặt sticky ngay trong trình soạn thảo. NHƯNG đặt lên nhóm BÊN TRONG
   template part thì không ăn: phần tử sticky chỉ dính trong phạm vi cha nó, mà
   cha ở đây (`<header>`) chỉ cao đúng bằng chính nó — dính được 0 pixel.

   Nên đặt lên chính `<header>`. Làm ở CSS để mọi template đều có, chứ không
   phải sửa từng file template của nền.
   ------------------------------------------------------------------------- */

.wp-site-blocks > header {
	background-color: var( --wp--preset--color--canvas );
	position: sticky;
	inset-block-start: 0;
	/* Trên lớp phủ video (z-index 2) nhưng dưới bảng trượt của menu (90). */
	z-index: 20;
}

/*
 * Thanh quản trị của WordPress cũng `position: fixed` ở đỉnh màn hình, nên đầu
 * trang phải tụt xuống đúng chiều cao của nó — không thì hai thứ chồng lên nhau
 * và người quản trị mất một nửa thanh điều hướng.
 */
.admin-bar .wp-site-blocks > header {
	inset-block-start: var( --wp-admin--admin-bar--height, 32px );
}

/*
 * Neo trong bài phải chừa chỗ cho đầu trang dính. Không có dòng này thì bấm một
 * mục trong mục lục sẽ nhảy tới đúng tiêu đề — rồi tiêu đề ấy nằm KHUẤT sau đầu
 * trang, và người đọc tưởng liên kết hỏng.
 */
.wp-block-post-content :is( h2, h3 ),
[ id ] {
	/*
	 * 6rem = 96px: cao hơn đầu trang dính (81px) một chút để tiêu đề không dán
	 * sát mép dưới của nó. Trước để 8.5rem theo chiều cao cũ 121px, nay đầu
	 * trang thấp đi thì con số ấy chừa thừa hơn nửa khoảng trống.
	 */
	scroll-margin-block-start: 6rem;
}

/*
 * Hàng menu thẳng hàng với mọi khối khác. `nd/split-header` là block `alignfull`
 * và tự đệm 24px hai bên, nên nội dung của nó bắt đầu ở x=40 trong khi thanh đỏ,
 * đường dẫn và thân trang đều bắt đầu ở x=64. Lệch 24px, đủ để nhìn ra.
 *
 * Ràng về đúng bề rộng nội dung thay vì bỏ đệm, để trên màn hẹp vẫn còn khoảng
 * thở ở hai mép.
 */
.nd-split-header__bar {
	margin-inline: auto;
	max-inline-size: var( --wp--custom--container--wide, 82rem );
	padding-inline: 0;
}

@media ( max-width: 88rem ) {
	.nd-split-header__bar {
		padding-inline: var( --wp--preset--spacing--sm );
	}
}

/* -------------------------------------------------------------------------
   Dải logo đối tác
   ------------------------------------------------------------------------- */

/*
 * Khe giữa các ô: thiết kế để ~8px, mặc định của khối là 2rem. Khe rộng ăn mất
 * bề ngang của từng ô, mà bề ngang mới là thứ quyết định logo to hay bé — ảnh
 * bị giới hạn bởi bề rộng ô chứ không bởi chiều cao.
 */
.nd-partner-slider {
	--nd-partner-gap: 0.5rem;
}

/* Mỗi ô là một thẻ nền sáng bo góc, như thiết kế. */
.nd-partner-slider__slide {
	background-color: var( --wp--preset--color--surface );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
}

/*
 * Ẩn nút cuộn khi cả sáu logo đã hiện đủ — thiết kế không có nút, và một nút
 * bấm vào không xảy ra gì thì thà không có. Dưới ngưỡng này dải cuộn thật nên
 * nút vẫn cần.
 */
@media ( min-width: 64rem ) {
	.nd-partner-slider__arrow {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Trang Liên hệ — hàng thông tin liên hệ
   ------------------------------------------------------------------------- */

/*
 * CHỮ MÀU THƯỜNG, CHỈ ICON MÀU ĐỎ. Trước đó tôi tô đỏ cả dòng, nên số điện
 * thoại, địa chỉ và email đều đỏ — ba dòng đỏ liền nhau đọc rất mệt, và thiết
 * kế chỉ tô đỏ mỗi icon.
 */
/*
 * CẢ BA DÒNG MÀU ĐỎ — icon lẫn chữ. Tôi từng đổi chữ về màu thường vì nghĩ ba
 * dòng đỏ liền nhau khó đọc, nhưng đối chiếu lại bản Figma của trang Liên hệ
 * thì đúng là đỏ cả cụm. Thiết kế thắng phán đoán của tôi.
 */
.px-contact__facts li {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--body );
	gap: var( --wp--preset--spacing--2-xs );
	line-height: 1.5;
}

.px-contact__facts .px-icon {
	flex: none;
}

/* Giãn dòng rộng hơn, đúng nhịp của thiết kế. */
.px-contact__facts {
	gap: var( --wp--preset--spacing--2-xs );
	margin-block-end: var( --wp--preset--spacing--md );
}

/*
 * MŨI TÊN CHO Ô CHỌN. `.px-offices__select` đặt `appearance: none` để bỏ giao
 * diện mặc định của hệ điều hành — nhưng bỏ luôn cả mũi tên xổ xuống, nên ô
 * chọn trông hệt một ô nhập chữ và không ai biết bấm được.
 *
 * Vẽ lại bằng `mask` để mũi tên ăn theo `color`, đổi màu khi focus mà không
 * phải nạp hai tệp ảnh.
 */
.px-offices__field {
	position: relative;
}

.px-offices__select {
	padding-inline: var( --wp--preset--spacing--sm ) 2.5rem;
}

.px-offices__field::after {
	background-color: var( --wp--preset--color--fg-muted );
	content: "";
	height: 1.25rem;
	inset-block-start: 50%;
	inset-inline-end: 0.75rem;
	mask: var( --px-icon-chevron ) center / contain no-repeat;
	-webkit-mask: var( --px-icon-chevron ) center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	transform: translateY( -50% );
	width: 1.25rem;
}

/*
 * Ô chọn ở trang văn phòng sau khi `assets/combo.js` nâng lên (TKT-001).
 *
 * Nút combo mặc định không khung — nó sinh ra để nằm trong thanh tìm vé, nơi
 * khung là của cả thanh. Ở đây nút đứng một mình nên mượn lại đúng hình của
 * `.px-offices__select`: viền mảnh, bo viên thuốc, chừa chỗ bên phải cho mũi
 * tên `::after` của `.px-offices__field` (vẫn nằm đúng chỗ vì combo được chèn
 * vào bên trong bọc ấy).
 */
.px-offices__field .px-combo__button {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 400;
	padding-block: var( --wp--preset--spacing--2-xs );
	padding-inline: var( --wp--preset--spacing--sm ) 2.5rem;
}

.px-offices__field .px-combo__button[ aria-expanded="true" ],
.px-offices__field .px-combo__button:focus-visible {
	border-color: var( --wp--preset--color--brand );
	outline: none;
}

/* Danh sách xổ ngay dưới ô và rộng bằng ô, không hụt sang hai bên. */
.px-offices__field .px-combo__list {
	inline-size: 100%;
	inset-block-start: calc( 100% + 0.25rem );
	min-inline-size: 0;
}

/* Nhóm tỉnh bị trang ẩn đi (lọc phường theo tỉnh) phải biến mất thật. */
.px-combo [hidden] {
	display: none;
}

/*
 * Danh sách văn phòng: icon NHỎ và màu chữ thường, không phải đỏ. Đối chiếu bản
 * Figma của trang Hệ thống văn phòng: chỉ TÊN văn phòng là đỏ, còn icon định vị
 * là nét mảnh màu tối — khác hẳn trang Liên hệ, nơi cả cụm là đỏ.
 */
.px-office__button .px-icon {
	color: var( --wp--preset--color--fg );
	height: 1.25rem;
	width: 1.25rem;
}

/*
 * Cột "Thanh toán dễ dàng với": sáu thẻ trắng xếp 3×2, đúng thiết kế.
 *
 * Sáu ảnh này CẮT RA TỪ BẢN KẾT XUẤT chân trang ở 3× của Figma, không phải tải
 * theo node: trong file, các logo ấy là vector đã bị tách thành từng mảnh path
 * rời — tải về được hai chục mảnh vụn chứ không được một logo nào nguyên.
 * Nếu nhà xe có file gốc của các logo này thì thay vào sẽ nét hơn.
 */
.px-footer__pay {
	display: grid;
	gap: 0.375rem;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	list-style: none;
	margin: var( --wp--preset--spacing--2-xs ) 0 0;
	max-width: 13rem;
	padding: 0;
}

.px-footer__pay img {
	display: block;
	height: auto;
	width: 100%;
}

/*
 * Dòng văn phòng đang chọn KHÔNG tô nền. Thiết kế vẽ mọi dòng phẳng như nhau;
 * mảng hồng ở dòng đầu là do khối tự chọn sẵn văn phòng thứ nhất để có chỗ đặt
 * bản đồ — trạng thái nội bộ, không phải thứ người xem cần thấy ngay khi mở
 * trang. Đánh dấu bằng icon đỏ, đủ để nhận ra sau khi bấm mà không tạo một
 * mảng màu thiết kế không có.
 */
.px-office.is-current .px-office__button {
	background-color: transparent;
}

.px-office.is-current .px-icon {
	color: var( --wp--preset--color--brand );
}

/*
 * Trang tài khoản: bỏ đệm quanh dải nền. Dải xám chạy sát mép màn hình và ôm
 * sát hai thẻ, không chừa viền trắng ở đâu cả.
 */
.px-account {
	/* 60px trên và dưới, đúng khoảng cách khách yêu cầu. */
	padding-block: 3.75rem;
}

.px-account__grid {
	padding-inline: 0;
}

/* Màn hẹp vẫn cần khoảng thở, nếu không thẻ dính sát mép kính. */
@media ( max-width: 88rem ) {
	.px-account__grid {
		padding-inline: var( --wp--preset--spacing--sm );
	}
}

/*
 * Cột liên kết ở chân trang: mỗi liên kết một dòng, KHOẢNG CÁCH 16px giữa các
 * dòng đúng như Figma đo.
 *
 * Dùng `<ul>` + `gap` thay vì một đoạn văn ngăn bằng `<br>`: với `<br>` thì
 * khoảng cách giữa các dòng là `line-height`, mà `line-height` vừa phải bó sát
 * chữ vừa phải tạo khoảng cách — không thể cùng lúc làm cả hai. Tách thành danh
 * sách thì chiều cao dòng bó sát chữ, còn 16px là `gap` riêng. Đây cũng là đánh
 * dấu đúng: một cột liên kết vốn là một danh sách.
 */
.px-footer__links {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-footer__links li {
	font-size: var( --wp--preset--font-size--body );
	line-height: 1;
}

/*
 * Nút và ô nhập KHÔNG tự thừa kế phông từ trang — trình duyệt cho chúng phông
 * hệ thống. Không khai lại thì mọi `<button>` rơi về Arial, và chữ trong đó
 * lệch hẳn với phần còn lại của site.
 */
button,
input,
select,
textarea {
	font-family: inherit;
}


/*
 * Menu bám đầu thẻ, khoảng dư dồn xuống đáy — không kéo giãn từng mục ra cho
 * kín chiều cao.
 */
.px-account__menu {
	margin-block-end: auto;
}

/* -------------------------------------------------------------------------
   Liên kết tài khoản mạng xã hội (trang Tài khoản)
   ------------------------------------------------------------------------- */

.px-social {
	border-block-start: 1px solid var( --wp--preset--color--line );
	margin-block-start: var( --wp--preset--spacing--md );
	padding-block-start: var( --wp--preset--spacing--md );
}

.px-social__title {
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

.px-social__row {
	align-items: center;
	display: flex;
	gap: var( --wp--preset--spacing--2-xs );
	justify-content: space-between;
	padding-block: 0.5rem;
}

.px-social__row + .px-social__row {
	border-block-start: 1px solid var( --wp--preset--color--line );
}

.px-social__name {
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
}

.px-social__state {
	color: var( --wp--preset--color--success );
	font-size: var( --wp--preset--font-size--caption );
}

.px-social__link {
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	color: var( --wp--preset--color--fg-on-brand );
	font-size: var( --wp--preset--font-size--caption );
	padding: 0.5rem 1rem;
}

/* Màu thương hiệu của từng nhà cung cấp — người dùng nhận ra nút bằng màu. */
.px-social__link--google {
	background-color: #db4437;
}

.px-social__link--facebook {
	background-color: #1877f2;
}

.px-social__link:hover {
	color: var( --wp--preset--color--fg-on-brand );
	filter: brightness( 0.92 );
}

/*
 * TIÊU ĐỀ THẺ TIN KHÔNG ĐỆM TRÊN. `.nd-loop__title` mang sẵn `margin-top: 24px`
 * — cộng với khoảng cách giữa ảnh và thân thẻ thành 36px, đủ để chữ trông như
 * rơi khỏi tấm ảnh của nó. Khoảng cách trong thân thẻ để `gap` lo, một chỗ duy
 * nhất, đều nhau giữa nhãn · tiêu đề · trích đoạn · ngày.
 */
.px-news-section .nd-loop__title {
	margin-block: 0;
}

.px-news-section .nd-loop__body {
	gap: 0.5rem;
}

/*
 * Đề mục chân trang cách danh sách bên dưới 20px, đúng khoảng Figma đo. Cỡ chữ
 * 20px đặt ở pattern (`fontSize: h-3`) chứ không ở đây, để trình soạn thảo cũng
 * thấy đúng cỡ.
 */
.px-footer h2 {
	margin-block-end: 1.25rem;
}

/*
 * CHÂN TRANG LUÔN Ở ĐÁY MÀN HÌNH, kể cả trên trang ngắn.
 *
 * Trang Tài khoản trên màn cao 1300px chỉ dài 733px, để lại 567px trắng bên
 * dưới chân trang — trông như trang bị cắt dở. Cho `.wp-site-blocks` cao tối
 * thiểu bằng màn hình rồi đẩy phần thân giãn ra, chân trang tự tụt xuống đáy.
 *
 * `flex: 1 0 auto` chứ không phải `flex: 1`: `flex: 1` đặt `flex-basis: 0` và
 * làm phần thân co lại dưới chiều cao nội dung thật của nó trên trang dài.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main,
.wp-site-blocks > .entry-content,
.wp-site-blocks > .wp-block-group:not( .px-footer ) {
	flex: 1 0 auto;
}

.wp-site-blocks > header,
.wp-site-blocks > footer {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   Liên kết trông như NÚT thì không đổi màu chữ khi rê chuột

   Luật chung `a:hover { color: brand }` hợp lý với liên kết chữ, nhưng sai hẳn
   với những liên kết có nền màu: chữ trắng hoá đỏ trên nền xanh (nút chia sẻ
   Facebook), hoặc đỏ trên đỏ (nút Đăng nhập) — vừa xấu vừa mất tương phản.
   Những chỗ ấy khai màu tường minh, kể cả trạng thái rê chuột.
   ------------------------------------------------------------------------- */

.px-postmeta__fb,
.px-postmeta__fb:hover,
.px-postmeta__fb:focus-visible {
	color: var( --wp--preset--color--fg-on-brand );
}

/*
 * Nút "Đăng nhập" ở đầu trang. Không có luật này thì chữ ăn màu chữ thường
 * (#2f3037) trên nền đỏ — đo được là vậy, và đó là lỗi tương phản chứ không chỉ
 * là xấu. Độ ưu tiên phải cao hơn luật màu liên kết của thanh điều hướng.
 */
.nd-split-header .nd-split-header__slot--right a[ href$="#dang-nhap" ],
.nd-split-header .nd-split-header__slot--right a[ href$="#dang-nhap" ]:hover,
.nd-split-header .nd-split-header__slot--right a[ href$="#dang-nhap" ]:focus-visible {
	color: var( --wp--preset--color--fg-on-brand );
}

/* -------------------------------------------------------------------------
   Đầu trang trên màn hẹp
   ------------------------------------------------------------------------- */

@media ( max-width: 48rem ) {
	/*
	 * Thanh đỏ chỉ giữ hotline, và giữ đúng MỘT dòng. Trên màn 390px, thêm dòng
	 * "Ngôn ngữ: Tiếng Việt" đẩy thanh từ 18px lên 68px — gần bằng cả hàng menu,
	 * cho một thông tin không ai bấm. Số tổng đài thì ngược lại: đó là thứ khách
	 * cần nhất khi mở điện thoại.
	 */
	.px-header__topbar .wp-block-group > *:not( .px-header__hotline ):not( .px-lang ) {
		display: none;
	}

	/*
	 * NGOẠI LỆ: ô đổi ngôn ngữ (GTranslate, TKT-001) ở lại. Nó không còn là dòng
	 * chữ tĩnh nữa mà là cách DUY NHẤT để khách nước ngoài đọc được site — mà
	 * khách du lịch thì mở bằng điện thoại. Xuống một dòng riêng, gọn: thanh cao
	 * thêm chừng 20px, không phải 50px như dòng chữ cũ bị ngắt đôi.
	 */
	.px-header__topbar .wp-block-group:has( > .px-lang ) {
		justify-content: center;
		row-gap: 0;
	}

	.px-header__hotline {
		flex-wrap: nowrap;
		justify-content: center;
		white-space: nowrap;
	}
}

/* -------------------------------------------------------------------------
   Màn hẹp — bớt khoảng trống
   ------------------------------------------------------------------------- */

@media ( max-width: 48rem ) {
	/*
	 * Đệm dọc của các khối trên trang chủ để 48px cho màn rộng. Trên điện thoại,
	 * 48px dưới cộng 48px trên của khối kế tiếp thành gần 100px trống giữa hai
	 * khối — người dùng phải vuốt qua một khoảng trắng dài mới tới nội dung sau.
	 * Trên màn hẹp, nửa khoảng ấy là đủ để mắt nhận ra ranh giới.
	 */
	.wp-site-blocks .wp-block-group.alignfull {
		padding-block: var( --wp--preset--spacing--md );
	}

	/*
	 * Nút đảo chiều KHÔNG chiếm một hàng riêng. Khi ba trường xếp dọc, để nút
	 * nằm thành hàng thứ tư là thêm 40px trống giữa "Điểm xuất phát" và
	 * "Nơi đến" — đúng khoảng trắng trông rất trống trải.
	 *
	 * Cho nó nằm ĐÈ lên đường ranh giữa hai trường ấy, y như bố cục màn rộng.
	 */
	.px-search__row {
		position: relative;
	}

	.px-search__swap {
		background-color: var( --wp--preset--color--surface-raised, #fff );
		inset-block-start: calc( 54px - 1.25rem );
		inset-inline-end: var( --wp--preset--spacing--2-xs );
		margin: 0;
		position: absolute;
		z-index: 1;
	}

	/* Ô tìm vé bớt đệm để không chiếm gần hết màn hình đầu tiên. */
	.px-search__form {
		padding: var( --wp--preset--spacing--2-xs );
	}
}

/* -------------------------------------------------------------------------
   Trang thanh toán — header rút gọn
   ------------------------------------------------------------------------- */

/*
 * Trang `/dopayment` cố tình KHÔNG dùng đầu trang chính: thiết kế bỏ hẳn thanh
 * đỏ và menu, chỉ còn logo, chữ "Thanh toán" và hai mục bên phải. Bớt lối ra
 * ngay lúc khách sắp trả tiền là chủ ý, không phải quên.
 */
.px-payhead {
	padding-block: var( --wp--preset--spacing--2-xs );
}

/* Vạch dọc ngăn logo với nhãn, đúng như thiết kế. */
.px-payhead__label {
	border-inline-start: 1px solid var( --wp--preset--color--line );
	margin: 0;
	padding-inline-start: var( --wp--preset--spacing--xs );
}

.px-payhead__aside {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--small );
}

.px-payfoot p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Dải hai bước ở luồng thanh toán

   Màu đo bằng pixel từ screenshot/5. Trạng thái thanh toán.png:
     bước đã xong  #a61b16   nhãn  #9ea0b6   nền trang  #f4f4f4
   Bước "đang thực hiện" ở màn 4 là hổ phách #f59e0b.
   ------------------------------------------------------------------------- */

.px-paysteps {
	background-color: var( --wp--preset--color--canvas );
	padding-block: var( --wp--preset--spacing--sm );
}

.px-paysteps__list {
	align-items: flex-start;
	display: flex;
	list-style: none;
	margin: 0 auto;
	max-width: 40rem;
	padding: 0;
}

/*
 * Mỗi bước chiếm một nửa; đường nối là `::before` của bước SAU, kéo ngược sang
 * trái. Làm vậy thì bước cuối không thừa một đoạn kẻ chìa ra ngoài.
 */
.px-paysteps__item {
	align-items: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	text-align: center;
}

.px-paysteps__item + .px-paysteps__item::before {
	background: var( --wp--preset--color--line );
	content: "";
	height: 2px;
	inset-block-start: 0.6875rem; /* giữa vòng tròn 22px */
	inset-inline-end: 50%;
	position: absolute;
	width: 100%;
}

/*
 * ĐƯỜNG NỐI LUÔN ĐỎ, KHÔNG PHẢI CHỜ BƯỚC SAU XONG.
 *
 * Tôi để xám cho tới khi bước hai hoàn tất, nhưng SVG `Divider` xuất từ Figma
 * ghi rõ `stroke="#A61B16"` nét 2 ngay ở màn Thanh toán — tức khách đã đi tới
 * bước ấy thì vạch đã đỏ. Nét 2px cũng lấy từ đó.
 */
.px-paysteps__item + .px-paysteps__item::before {
	background: var( --wp--preset--color--brand );
}

.px-paysteps__dot {
	align-items: center;
	background: var( --wp--preset--color--line );
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: none;
	height: 1.375rem;
	justify-content: center;
	position: relative;
	width: 1.375rem;
	z-index: 1;
}

.px-paysteps__item--xong .px-paysteps__dot {
	background: var( --wp--preset--color--brand );
}

/* Đang thực hiện: chấm hổ phách, không có icon bên trong — đúng thiết kế màn 4. */
.px-paysteps__item--dang .px-paysteps__dot {
	background: var( --wp--preset--color--warning, #f59e0b );
}

.px-paysteps__item--hong .px-paysteps__dot {
	background: var( --wp--preset--color--error, #e23620 );
}

.px-paysteps__nhan {
	color: var( --wp--preset--color--fg );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
}

.px-paysteps__item:not( .px-paysteps__item--xong ) .px-paysteps__nhan {
	color: var( --wp--preset--color--fg-muted );
}

/* -------------------------------------------------------------------------
   Thẻ trạng thái thanh toán (trang paymenterror)
   ------------------------------------------------------------------------- */

.px-paystate {
	background: var( --wp--preset--color--canvas );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	margin-inline: auto;
	max-width: 55rem;
	padding: var( --wp--preset--spacing--xl ) var( --wp--preset--spacing--md );
	text-align: center;
}

.px-paystate__ghichu {
	color: var( --wp--preset--color--fg-muted );
	margin-inline: auto;
	max-width: 34rem;
}

/* -------------------------------------------------------------------------
   Khối trạng thái đặt trên khung Vexere

   Số đo Figma (node 126:72790, "Trạng thái thanh toán"):
     hình minh hoạ 200×200 căn giữa · tiêu đề cách hình 24px
   ------------------------------------------------------------------------- */

.px-paystatus {
	text-align: center;
}

.px-paystatus__hinh {
	display: block;
	height: auto;
	margin-inline: auto;
	max-width: 12.5rem; /* 200px */
	width: 100%;
}

.px-paystatus__tieude {
	font-size: var( --wp--preset--font-size--h-2 );
	margin-block: var( --wp--preset--spacing--xs ) 0;
}

.px-paystatus__ma {
	align-items: baseline;
	color: var( --wp--preset--color--fg-muted );
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-block: var( --wp--preset--spacing--2-xs ) 0;
}

.px-paystatus__ma-so {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--body-lg );
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   Banner đầu trang con — to hơn theo nghiệm thu TKT-001

   Ba trang dùng chung một khuôn `wp:cover`: Liên hệ, Hệ thống văn phòng, Tra
   cứu đơn hàng. Khách chỉ nêu hai trang, nhưng đổi hai bỏ một là ba trang cùng
   khuôn lại cao thấp khác nhau — nên đổi cả ba.

   LỆCH CÓ CHỦ Ý KHỎI FIGMA: thiết kế vẽ banner cao 196px (đo trên
   screenshot/Liên hệ.png, khung 1920). Pattern cũ để 14rem = 224px. Khách vẫn
   muốn to hơn nữa, nên lên 20rem = 320px. Con số này do tôi chọn, không có
   trong yêu cầu — muốn cao/thấp hơn chỉ cần đổi một giá trị bên dưới.

   `!important` là bắt buộc: block cover ghi `min-height` bằng style INLINE,
   mà style inline thắng mọi luật ngoài.
   ------------------------------------------------------------------------- */

/*
 * KHÔNG ràng thêm `.alignwide`: pattern từng ghi `"align":"wide"` trong comment
 * nhưng HTML là `class="alignfull"` (pattern đã sửa cho khớp, nhưng các trang
 * đã cấp phát vẫn mang comment cũ). Trang thật kết xuất theo HTML, nên viết
 * `.alignwide` là luật không bắt được phần tử nào — im lặng.
 *
 * Nhận diện banner bằng DẤU HIỆU của nó — cover chứa H1 tiêu đề trang — chứ
 * không bắt mọi cover trong `main`: cover chèn vào bài viết sau này không phải
 * banner, ép nó cao 20rem là sai.
 */
.wp-site-blocks main .wp-block-cover:has( > .wp-block-cover__inner-container > h1 ) {
	min-height: 20rem !important;
}

@media ( max-width: 48rem ) {

	.wp-site-blocks main .wp-block-cover:has( > .wp-block-cover__inner-container > h1 ) {
		min-height: 12rem !important;
	}
}

/* =========================================================================
   NGHIỆM THU TKT-002 — Feedback ngày 14/9
   Mỗi khối dưới đây ghi số mục trong bảng feedback của khách.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Mục 9 — MỘT cơ chế hover cho toàn trang

   Đo trên trang thật trước khi sửa: nút lõi của WordPress (`wp-element-button`)
   rê chuột ra NỀN TÍM #4528d5 — đó là `--wp--custom--color--brand-hover` mặc
   định của theme nền nd-base, preset Phúc Xuyên chưa từng đè. Cộng thêm luật
   chung `a:hover { color: brand }` là chữ đỏ trên nền tím (ảnh chụp của khách,
   trang 404). Các nút tự dựng thì mỗi nút một kiểu: sáng lên 8%, tối đi 8%,
   đổi nền.

   Quy ước từ nay, ở MỌI trang:
   1. Nút nền đỏ   → nền đỏ primary #A61B16 (đổi từ `brand-strong` theo TKT-009
      feedback #2), chữ vẫn trắng — thường, hover và active cùng một màu.
   2. Nút viền đỏ  → lấp nền đỏ, chữ trắng.
   3. Liên kết chữ → đổi sang đỏ thương hiệu, không gạch chân (đã có từ trước).
   4. Thẻ ảnh (tin tức, ưu đãi, dịch vụ) → ảnh phóng nhẹ 1.04, tiêu đề đổi đỏ.
   Tất cả chuyển trong 0.2s.
   ------------------------------------------------------------------------- */

:root {
	/* TKT-009 feedback #2: nút bấm giữ MỘT màu primary #A61B16 ở cả ba trạng thái. */
	--wp--custom--color--brand-hover: var( --wp--preset--color--brand, #a61b16 );
	--px-hover-fill: var( --wp--preset--color--brand, #a61b16 );
	--px-hover-speed: 0.2s;
}

.wp-element-button,
.wp-block-button__link,
.px-search__submit,
.px-trip__cta,
.px-lookup__submit,
.px-auth__submit,
.px-hero__nav,
.nd-split-header__slot--right a[ href$="#dang-nhap" ] {
	transition: background-color var( --px-hover-speed ) ease, border-color var( --px-hover-speed ) ease, color var( --px-hover-speed ) ease;
}

.wp-element-button:hover,
.wp-element-button:focus,
.wp-element-button:focus-visible,
.wp-element-button:active,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible,
.wp-block-button__link:active,
.px-search__submit:hover,
.px-search__submit:focus-visible,
.px-search__submit:active,
.px-trip__cta:hover,
.px-trip__cta:active,
.px-lookup__submit:hover,
.px-lookup__submit:active,
.px-auth__submit:not( [disabled] ):hover,
.px-auth__submit:not( [disabled] ):active,
.nd-split-header .nd-split-header__slot--right a[ href$="#dang-nhap" ]:hover,
.nd-split-header .nd-split-header__slot--right a[ href$="#dang-nhap" ]:active {
	background-color: var( --px-hover-fill );
	border-color: var( --px-hover-fill );
	color: var( --wp--preset--color--fg-on-brand );
	filter: none;
}

.is-style-outline > .wp-block-button__link:hover,
.is-style-outline > .wp-block-button__link:focus-visible,
.is-style-outline > .wp-block-button__link:active {
	background-color: var( --wp--preset--color--brand );
	border-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--fg-on-brand );
}

.px-news-section .nd-loop__media img,
.px-promo img,
.px-info-card__media img {
	transition: transform 0.4s ease;
}

.px-news-section .nd-loop__item:hover .nd-loop__media img,
.px-promo .wp-block-column:hover img,
.px-info-card:hover .px-info-card__media img {
	transform: scale( 1.04 );
}

.px-news-section .nd-loop__item:hover .nd-loop__title a {
	color: var( --wp--preset--color--brand );
}

@media ( prefers-reduced-motion: reduce ) {
	.px-news-section .nd-loop__media img,
	.px-promo img,
	.px-info-card__media img {
		transition: none;
	}

	.px-news-section .nd-loop__item:hover .nd-loop__media img,
	.px-promo .wp-block-column:hover img,
	.px-info-card:hover .px-info-card__media img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Mục 2 — Banner trang chủ dạng slideshow ảnh + video

   Mọi slide chồng trong CÙNG một ô lưới và chỉ đổi `opacity` — không đo bề
   rộng, không nhảy bố cục. Chiều cao theo tỉ lệ 16:7 (1440px → 630px, cao hơn
   gần gấp rưỡi banner 16:5 cũ, đúng tinh thần banner Lelam) nhưng không vượt
   quá màn hình trừ đầu trang, để ô tìm vé đè ở mép dưới vẫn lộ ra ngay.
   ------------------------------------------------------------------------- */

.px-hero--slider {
	overflow: hidden;
	position: relative;
}

.px-hero__track {
	aspect-ratio: 16 / 7;
	display: grid;
	max-height: calc( 100svh - 8rem );
	min-height: 16rem;
	width: 100%;
}

.px-hero__slide {
	grid-area: 1 / 1;
	margin: 0;
	min-height: 0;
	opacity: 0;
	position: relative;
	transition: opacity 0.8s ease, visibility 0s linear 0.8s;
	visibility: hidden;
}

.px-hero__slide.is-active {
	opacity: 1;
	transition: opacity 0.8s ease, visibility 0s;
	visibility: visible;
}

.px-hero__media {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.px-hero__nav {
	align-items: center;
	background-color: rgb( 255 255 255 / 0.8 );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg );
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	inset-block-start: 50%;
	justify-content: center;
	padding: 0;
	position: absolute;
	transform: translateY( -50% );
	width: 2.75rem;
	z-index: 2;
}

.px-hero__nav:hover,
.px-hero__nav:focus-visible {
	background-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--fg-on-brand );
}

.px-hero__nav--prev {
	inset-inline-start: var( --wp--preset--spacing--sm );
}

.px-hero__nav--next {
	inset-inline-end: var( --wp--preset--spacing--sm );
}

.px-icon--right {
	transform: rotate( -90deg );
}

/*
 * Chấm chỉ báo nằm trên mép dưới banner nhưng CAO HƠN ô tìm vé đè lên (ô ấy
 * lấn lên 48px), nếu không thì chấm bị che mất.
 */
.px-hero__dots {
	display: flex;
	gap: 0.5rem;
	inset-block-end: calc( var( --wp--preset--spacing--xl, 3rem ) + 1rem );
	inset-inline-start: 50%;
	position: absolute;
	transform: translateX( -50% );
	z-index: 2;
}

.px-hero__dot {
	background-color: rgb( 255 255 255 / 0.55 );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	cursor: pointer;
	height: 0.5rem;
	padding: 0;
	transition: width var( --px-hover-speed ) ease, background-color var( --px-hover-speed ) ease;
	width: 0.5rem;
}

.px-hero__dot[aria-current="true"] {
	background-color: var( --wp--preset--color--fg-on-brand );
	width: 1.75rem;
}

.px-hero__play {
	z-index: 1;
}

/* `.px-video__player` đặt `display: block` nên thắng `[hidden]` của trình duyệt. */
.px-video__player[hidden] {
	display: none;
}

@media ( max-width: 48rem ) {
	.px-hero__track {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.px-hero__nav {
		display: none;
	}

	.px-hero__dots {
		inset-block-end: var( --wp--preset--spacing--2-xs );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.px-hero__slide,
	.px-hero__slide.is-active {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Mục 3 — Ảnh ưu đãi cao hơn

   Khung đổi từ 464:200 sang 3:2 (sửa trong nội dung trang chủ bằng bộ cài
   `inc/revision.php`). KÍCH THƯỚC ẢNH CHUẨN để nhà xe thiết kế: 900 × 600 px.
   Ảnh ưu đãi đang dùng là 624 × 269 nên bị cắt hai bên cho tới khi thay ảnh
   đúng cỡ.
   ------------------------------------------------------------------------- */

.px-promo .wp-block-image {
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Mục 4 — Nút "Đặt vé ngay" dưới bốn bước đặt vé
   ------------------------------------------------------------------------- */

.px-steps-cta {
	margin-block-start: var( --wp--preset--spacing--md ) !important;
}

.px-steps-cta .wp-block-button__link {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	padding: 0.75rem 2rem;
}

/* -------------------------------------------------------------------------
   Mục 5, 12, 13 — Thẻ tin tức: ẩn tác giả, tiêu đề cân nhau, viết hoa

   Tên tác giả là tài khoản quản trị ("nguyenbahoangnam"), không phải thông tin
   cho khách. Ẩn cả dấu chấm giữa đi kèm, còn lại mỗi ngày đăng.

   TIÊU ĐỀ CÂN NHAU: dành sẵn chỗ cho đúng BA dòng dù bài chỉ cần hai, và cắt
   dấu … nếu dài hơn — nên dòng ngày đăng của bốn thẻ luôn nằm cùng một hàng.
   Chiều cao dành sẵn tính bằng `lh` nên đổi cỡ chữ không phải tính lại.
   ------------------------------------------------------------------------- */

.px-news-section .nd-loop__author,
.px-news-section .nd-loop__sep {
	display: none;
}

.px-news-section .nd-loop__title {
	text-transform: uppercase;
}

.px-news-section .nd-loop--grid .nd-loop__title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	font-size: var( --wp--preset--font-size--h-3 );
	-webkit-line-clamp: 3;
	line-height: 1.4;
	min-height: 3lh;
	overflow: hidden;
}

/* Trích đoạn cũng giữ đủ hai dòng để hàng ngày đăng thẳng nhau. */
.px-news-section .nd-loop--grid .nd-loop__excerpt {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	min-height: 2lh;
	overflow: hidden;
}

.px-news-section .nd-loop__item--lead .nd-loop__title,
.px-news-section .nd-loop__item--wide .nd-loop__title,
.px-news-section .nd-loop__item--small .nd-loop__title,
.px-news-section .nd-loop--list .nd-loop__title {
	font-size: var( --wp--preset--font-size--h-3 );
}

.px-news-section .nd-loop__item--small .nd-loop__title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Mục 11 — Trang Tin tức: tìm kiếm và phân trang
   ------------------------------------------------------------------------- */

.px-news-archive {
	scroll-margin-block-start: 6rem;
}

.px-news-archive__head {
	align-items: center;
	border-block-end: 1px solid var( --wp--preset--color--line );
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--sm );
	justify-content: space-between;
	margin-block-end: var( --wp--preset--spacing--md );
	padding-block-end: 0.75rem;
}

.px-news-archive__title {
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	margin: 0;
}

.px-news-archive__search {
	display: flex;
	flex: 0 1 24rem;
	position: relative;
}

.px-news-archive__search input {
	background-color: var( --wp--preset--color--canvas );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	box-sizing: border-box;
	color: var( --wp--preset--color--fg );
	font: inherit;
	font-size: var( --wp--preset--font-size--body );
	min-height: 2.5rem;
	padding: 0.5rem 3rem 0.5rem 1rem;
	width: 100%;
}

.px-news-archive__search input:focus-visible {
	border-color: var( --wp--preset--color--brand );
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: -1px;
}

.px-news-archive__search button {
	align-items: center;
	background-color: var( --wp--preset--color--brand );
	border: 0;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg-on-brand );
	cursor: pointer;
	display: flex;
	height: 2rem;
	inset-block-start: 0.25rem;
	inset-inline-end: 0.25rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	width: 2rem;
}

.px-news-archive__search button:hover {
	background-color: var( --px-hover-fill );
}

.px-news-archive__search button .px-icon {
	height: 1rem;
	width: 1rem;
}

.px-news-archive__note {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--body );
	margin: 0 0 var( --wp--preset--spacing--sm );
}

.px-news-archive__note a {
	color: var( --wp--preset--color--brand );
	margin-inline-start: 0.5rem;
}

.px-pager {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-block-start: var( --wp--preset--spacing--md );
}

.px-pager a,
.px-pager span {
	align-items: center;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	box-sizing: border-box;
	color: var( --wp--preset--color--fg );
	display: inline-flex;
	font-size: var( --wp--preset--font-size--body );
	height: 2.5rem;
	justify-content: center;
	min-width: 2.5rem;
	padding-inline: 0.75rem;
}

.px-pager a:hover {
	border-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--brand );
}

.px-pager [aria-current="page"] {
	background-color: var( --wp--preset--color--brand );
	border-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--fg-on-brand );
	font-weight: 600;
}

.px-pager .dots {
	border-color: transparent;
}

/* -------------------------------------------------------------------------
   Mục 6 — Chân trang: logo to hơn, icon mạng xã hội nhỏ lại

   Logo 150px → 200px. Icon mạng xã hội 24px → 18px, khoảng cách giữa chúng
   thu theo cho cân.
   ------------------------------------------------------------------------- */

.px-footer .wp-block-site-logo img {
	height: auto !important;
	max-width: none;
	width: 12.5rem !important;
}

.px-footer__social {
	gap: 0.875rem;
}

.px-footer__social .px-footer__icon {
	height: 1.125rem;
	width: 1.125rem;
}

/* -------------------------------------------------------------------------
   Mục 14 — Form liên hệ: lỗi hiển thị vỡ bố cục ô đồng ý

   nd-core chèn dòng báo lỗi NGAY SAU ô nhập. Với ô đồng ý, ô nhập nằm trong
   `<label>` dạng lưới hai cột (ô tick | chữ), nên dòng lỗi chiếm cột chữ và
   đẩy câu đồng ý xuống hàng dưới ở cột ô tick — đúng ảnh khách chụp. Ghim từng
   phần tử vào ô lưới của nó, dòng lỗi xuống hàng hai trải hết hai cột.

   Dòng lỗi mặc định của nd-core 16px, to hơn cả nhãn ô 12px: đưa về 12px,
   màu báo lỗi.
   ------------------------------------------------------------------------- */

.px-contact__consent label {
	align-items: center;
	cursor: pointer;
}

.px-contact__consent input[type="checkbox"] {
	accent-color: var( --wp--preset--color--brand );
	grid-column: 1;
	grid-row: 1;
	height: 1rem;
	margin: 0;
	width: 1rem;
}

.px-contact__consent label > span:not( .nd-form__error ) {
	grid-column: 2;
	grid-row: 1;
}

.px-contact__consent .nd-form__error {
	grid-column: 1 / -1;
	grid-row: 2;
}

.px-contact__consent a {
	color: var( --wp--preset--color--brand );
}

.px-contact__form .nd-form__error {
	color: var( --wp--preset--color--error, #e23620 );
	display: block;
	font-size: var( --wp--preset--font-size--caption );
	margin-block-start: 0.25rem;
}

.px-contact__form .nd-form__input[aria-invalid="true"] {
	border-color: var( --wp--preset--color--error, #e23620 );
}

.px-contact__form .nd-form__message {
	font-size: var( --wp--preset--font-size--body );
	margin-block-start: var( --wp--preset--spacing--2-xs );
}

.px-contact__form .nd-form__message--error {
	color: var( --wp--preset--color--error, #e23620 );
}

.px-contact__form .nd-form__message--success {
	color: var( --wp--preset--color--success, #019a64 );
}

/* -------------------------------------------------------------------------
   Mục 16 — Hộp thoại đăng nhập: cỡ chữ và viền tràn

   Ô nhập thiếu `box-sizing: border-box`: rộng 100% CỘNG đệm hai bên nên tràn
   10px, hộp thoại mọc thanh cuộn ngang và viền focus bị cắt (đo được
   scrollWidth 490 trong clientWidth 480). Viền focus cũng vẽ vào trong thay vì
   lấn ra ngoài để không bao giờ bị khung cắt.

   Cỡ chữ theo thang mới: tiêu đề 18, nút và ô nhập 13, chú thích 12; nút cao
   44px cho cân với chữ nhỏ hơn.
   ------------------------------------------------------------------------- */

.px-auth__dialog {
	overflow-x: hidden;
	width: min( 26.5rem, 100% );
}

.px-auth__dialog *,
.px-auth__dialog *::before,
.px-auth__dialog *::after {
	box-sizing: border-box;
}

.px-auth__title {
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
}

.px-auth__provider,
.px-auth__submit,
.px-auth__input {
	font-size: var( --wp--preset--font-size--body );
	min-height: 2.75rem;
}

.px-auth__input {
	padding-block: 0.5rem;
	padding-inline: 1rem;
}

.px-auth__input:focus-visible {
	outline-offset: -2px;
}

.px-auth__providers {
	gap: 0.625rem;
}

.px-auth__submit {
	margin-block-start: var( --wp--preset--spacing--2-xs );
}

.px-auth__divider {
	margin-block: 0.875rem;
}

/* -------------------------------------------------------------------------
   Mục 7, 8, 10 — Trang thông tin: Giới thiệu, Dịch vụ, Chính sách

   Motif lấy từ trang thông tin của LD và Lelam mà khách chỉ định: banner, rồi
   hai cột — menu các trang cùng nhóm bên trái (dính khi cuộn), nội dung bên
   phải.
   ------------------------------------------------------------------------- */

.px-info {
	align-items: start;
	box-sizing: border-box;
	display: grid;
	gap: var( --wp--preset--spacing--lg );
	grid-template-columns: 17rem minmax( 0, 1fr );
	margin-inline: auto !important;
	max-width: var( --wp--custom--container--wide, 82rem );
	padding-block: var( --wp--preset--spacing--xl );
	padding-inline: var( --wp--preset--spacing--sm );
}

.px-info > * {
	margin-block: 0 !important;
}

.px-info-nav {
	background-color: var( --wp--preset--color--surface );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	padding: var( --wp--preset--spacing--sm );
	position: sticky;
	top: 6rem;
}

.px-info-nav__title {
	color: var( --wp--preset--color--fg );
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.px-info-nav ul {
	display: grid;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-info-nav ul ul {
	border-inline-start: 1px solid var( --wp--preset--color--line );
	margin: 0.125rem 0 0.25rem 1rem;
	padding-inline-start: 0.5rem;
}

.px-info-nav a {
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	color: var( --wp--preset--color--fg );
	display: block;
	font-size: var( --wp--preset--font-size--body );
	line-height: 1.4;
	padding: 0.5rem 0.75rem;
}

.px-info-nav a:hover {
	background-color: var( --wp--preset--color--canvas );
	color: var( --wp--preset--color--brand );
}

.px-info-nav a[aria-current="page"],
.px-info-nav a[aria-current="page"]:hover {
	background-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--fg-on-brand );
	font-weight: 600;
}

.px-info-nav a.is-ancestor {
	color: var( --wp--preset--color--brand );
	font-weight: 600;
}

.px-info__body {
	font-size: var( --wp--preset--font-size--body );
	line-height: 1.7;
	min-width: 0;
}

.px-info__body > * {
	margin-block: 0;
}

.px-info__body > * + * {
	margin-block-start: 1rem;
}

.px-info__body h2 {
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

.px-info__body h3 {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	line-height: 1.4;
}

.px-info__body > * + h3 {
	margin-block-start: 2rem;
}

.px-info__body ul {
	padding-inline-start: 1.25rem;
}

.px-info__body li + li {
	margin-block-start: 0.375rem;
}

.px-info__body li::marker {
	color: var( --wp--preset--color--brand );
}

.px-info__body a {
	color: var( --wp--preset--color--brand );
}

.px-info__img img {
	border-radius: var( --wp--custom--radius--lg, 1rem );
	width: 100%;
}

.px-info__callout {
	background-color: var( --wp--preset--color--brand-subtle );
	border-inline-start: 3px solid var( --wp--preset--color--brand );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	padding: 0.75rem 1rem;
}

.px-info__table {
	overflow-x: auto;
}

.px-info__table table {
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--body );
	width: 100%;
}

.px-info__table th,
.px-info__table td {
	border: 1px solid var( --wp--preset--color--line );
	padding: 0.625rem 0.875rem;
	text-align: start;
}

.px-info__table thead {
	border: 0;
}

.px-info__table thead th {
	background-color: var( --wp--preset--color--brand );
	border-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--fg-on-brand );
	font-weight: 600;
}

.px-info__table td:last-child,
.px-info__table th:last-child {
	text-align: center;
	width: 6rem;
}

.px-info__table tbody tr:nth-child( even ) {
	background-color: var( --wp--preset--color--surface );
}

/* Thẻ dẫn sang trang con (Dịch vụ, Điều kiện gửi hàng). */
.px-info-cards {
	display: grid;
	gap: var( --wp--preset--spacing--sm );
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
}

.px-info__body > .px-info-cards {
	margin-block-start: var( --wp--preset--spacing--md );
}

.px-info-card {
	background-color: var( --wp--preset--color--canvas );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color var( --px-hover-speed ) ease, box-shadow var( --px-hover-speed ) ease;
}

/* `.px-info__body a` tô đỏ mọi liên kết trong thân trang; thẻ là liên kết nhưng chữ phải màu thường. */
.px-info__body .px-info-card,
.px-info__body .px-info-card:hover {
	color: var( --wp--preset--color--fg );
}

.px-info-card:hover {
	border-color: var( --wp--preset--color--brand );
	box-shadow: 0 0.5rem 1.5rem rgb( 18 26 43 / 0.08 );
}

.px-info-card__media {
	aspect-ratio: 16 / 10;
	background-color: var( --wp--preset--color--surface );
	overflow: hidden;
}

.px-info-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.px-info-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1rem;
}

.px-info-card__title {
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 700;
	line-height: 1.4;
}

.px-info-card:hover .px-info-card__title {
	color: var( --wp--preset--color--brand );
}

.px-info-card__text {
	color: var( --wp--preset--color--fg-muted );
	flex: 1;
	font-size: var( --wp--preset--font-size--body );
	line-height: 1.6;
}

.px-info-card__more {
	color: var( --wp--preset--color--brand );
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
}

@media ( max-width: 56rem ) {
	.px-info {
		grid-template-columns: 1fr;
	}

	.px-info-nav {
		position: static;
	}
}

/* =========================================================================
   NGHIỆM THU TKT-003 — Feedback luồng đặt vé
   Phần nằm trên markup của site. Phần đè lên khung Vexere ở plugin
   phucxuyen-vexere-skin.
   ========================================================================= */

/* -------------------------------------------------------------------------
   "Mấy trang mà có cái banner ở đầu anh tăng kích thước banner nhé"

   Lần hai tăng: 20rem (320px) → 28rem (448px) ở màn rộng, 12rem → 16rem trên
   điện thoại. Áp cho mọi trang con có banner — Liên hệ, Hệ thống văn phòng,
   Tra cứu đơn hàng và các trang thông tin mới của TKT-002 — vì chúng dùng
   chung một khuôn `wp:cover` chứa H1.
   ------------------------------------------------------------------------- */

.wp-site-blocks main .wp-block-cover:has( > .wp-block-cover__inner-container > h1 ),
.wp-site-blocks .wp-block-cover:has( > .wp-block-cover__inner-container > h1 ) {
	min-height: 28rem !important;
}

@media ( max-width: 48rem ) {

	.wp-site-blocks main .wp-block-cover:has( > .wp-block-cover__inner-container > h1 ),
	.wp-site-blocks .wp-block-cover:has( > .wp-block-cover__inner-container > h1 ) {
		min-height: 16rem !important;
	}
}

/* -------------------------------------------------------------------------
   Lịch chọn ngày tự vẽ (assets/datepicker.js)

   Ảnh 1 của khách: lịch native của trình duyệt ra tiếng Anh, font hệ thống,
   ngày dạng tháng/ngày/năm. Lịch này tiếng Việt, Montserrat, dd/mm/yyyy, cùng
   bo góc và màu nhấn với danh sách chọn điểm ngay bên cạnh.
   ------------------------------------------------------------------------- */

.px-date {
	position: relative;
}

.px-date__native {
	block-size: 1px;
	clip-path: inset( 50% );
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
}

.px-date__button {
	background: none;
	border: 0;
	color: var( --wp--preset--color--fg );
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: var( --wp--preset--font-size--body );
	font-weight: 500;
	inline-size: 100%;
	padding: 0;
	text-align: start;
}

.px-date__button:focus-visible {
	outline: 2px solid var( --wp--preset--color--brand );
	outline-offset: 3px;
}

.px-date__panel {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	box-shadow: 0 12px 32px rgb( 0 0 0 / 0.14 );
	inset-block-start: calc( 100% + 0.75rem );
	inset-inline-end: 0;
	padding: 0.75rem;
	position: absolute;
	width: 18.5rem;
	z-index: 30;
}

.px-date__panel[hidden] {
	display: none;
}

.px-date__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-block-end: 0.5rem;
}

.px-date__title {
	color: var( --wp--preset--color--fg );
	font-size: var( --wp--preset--font-size--body );
	font-weight: 700;
}

.px-date__nav {
	align-items: center;
	background: none;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg );
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 1.125rem;
	height: 2rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 2rem;
}

.px-date__nav:hover:not( [disabled] ) {
	border-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--brand );
}

.px-date__nav[disabled] {
	cursor: not-allowed;
	opacity: 0.35;
}

.px-date__grid {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

.px-date__grid th {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	padding-block: 0.25rem;
	text-align: center;
}

.px-date__grid td {
	padding: 1px;
	text-align: center;
}

.px-date__day {
	background: none;
	border: 1px solid transparent;
	border-radius: var( --wp--custom--radius--pill, 62.4375rem );
	color: var( --wp--preset--color--fg );
	cursor: pointer;
	font: inherit;
	font-size: var( --wp--preset--font-size--body );
	height: 2.25rem;
	padding: 0;
	width: 2.25rem;
}

.px-date__day.is-outside {
	color: var( --wp--preset--color--fg-disabled, #9ea0b6 );
}

.px-date__day.is-today {
	border-color: var( --wp--preset--color--brand );
	font-weight: 700;
}

.px-date__day:hover:not( [disabled] ),
.px-date__day:focus-visible {
	background-color: var( --wp--preset--color--brand-subtle );
	color: var( --wp--preset--color--brand );
	outline: none;
}

.px-date__day[aria-pressed="true"],
.px-date__day[aria-pressed="true"]:hover {
	background-color: var( --wp--preset--color--brand );
	border-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--fg-on-brand );
	font-weight: 700;
}

.px-date__day[disabled] {
	cursor: not-allowed;
	opacity: 0.35;
	text-decoration: line-through;
}

.px-date__foot {
	border-block-start: 1px solid var( --wp--preset--color--line );
	display: flex;
	justify-content: flex-end;
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
}

.px-date__today {
	background: none;
	border: 0;
	color: var( --wp--preset--color--brand );
	cursor: pointer;
	font: inherit;
	font-size: var( --wp--preset--font-size--body );
	font-weight: 600;
	padding: 0.25rem 0.5rem;
}

@media ( max-width: 48rem ) {
	.px-date__panel {
		inset-inline: 0 auto;
	}
}

/* =========================================================================
   TRANG DANH SÁCH CHUYẾN — dựng lại theo screenshot/Danh sách chuyến.png
   và Figma frame `126:70086` (1920 × 1868).

   Số đo lấy từ Figma ở khung 1920, container 1440. Site đang dùng container
   rộng 82rem (1312px) cho đầu trang và chân trang, nên ở đây KHÔNG kéo ra 1440:
   mép trái thanh tìm, bộ lọc và mép phải danh sách phải thẳng hàng với logo và
   nút Đăng nhập — đó là điều Figma thể hiện (container thẳng mép header).

   Font là Montserrat ở mọi chỗ. Figma trộn Be Vietnam Pro và Inter ở vài nhãn;
   khách yêu cầu giữ Montserrat, nên chỉ lấy cỡ, độ đậm, chiều cao dòng.
   Phần khung Vexere nằm ở plugin phucxuyen-vexere-skin.
   ========================================================================= */

/* --- Section 4: điều hướng + thanh tìm (Figma: pt 30, gap 24, pb 16) --- */

.px-trips__top {
	background-color: var( --wp--preset--color--canvas );
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-block: 1.875rem 1rem;
}

/*
 * Cùng một bề rộng với khung kết quả bên dưới và với header: 82rem, chừa lề
 * 16px mỗi bên chỉ khi màn hẹp hơn thế. Luật cũ cộng thêm đệm 16px VÀO TRONG
 * 82rem nên thanh tìm lệch vào 16px so với logo và bộ lọc.
 */
.px-trips__crumb,
.px-trips__top > form {
	box-sizing: border-box;
	margin-block: 0;
	margin-inline: auto;
	max-width: none;
	padding-inline: 0;
	width: min( var( --wp--custom--container--wide, 82rem ), 100% - 2 * var( --wp--preset--spacing--sm, 1rem ) );
}

.px-trips__crumb {
	align-items: flex-start;
	gap: 1rem;
}

/* Nút quay lại: viên thuốc nền xám 56 × 44, không viền. */
.px-trips__back {
	background-color: var( --wp--preset--color--surface );
	border: 0;
	color: var( --wp--preset--color--fg );
	height: 2.75rem;
	width: 3.5rem;
}

.px-trips__back:hover {
	background-color: var( --wp--preset--color--line );
	color: var( --wp--preset--color--fg );
}

.px-trips__back .px-icon,
.px-trips__back svg {
	height: 1.5rem;
	width: 1.5rem;
}

.px-trips__crumb > div {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

/* "Hà Nội → Quảng Ninh": 16/24 đậm, mũi tên xám nhạt, cách chữ 10px. */
/* Tiêu đề trang kết quả: cỡ title 18px của site (TKT-004 mục 21). */
.px-trips__route {
	color: var( --wp--preset--color--fg );
	font-size: var( --wp--preset--font-size--h-3, 1.125rem );
	font-weight: 700;
	gap: 0.625rem;
	line-height: 1.5rem;
}

.px-trips__route-arrow {
	color: var( --wp--preset--color--icon-faint, #b2b6c7 );
	height: 1.5rem;
	width: 1.5rem;
}

.px-trips__count {
	color: var( --wp--preset--color--fg-muted );
	font-size: 0.75rem;
	line-height: 1.125rem;
}

.px-trips__count:empty {
	display: none;
}

/*
 * Thanh tìm: ba ô viền riêng sát nhau, ô đầu bo trái 16, ô cuối bo phải 16, cao
 * 62; nút "Tìm kiếm" 120 × 62 bo 8, cách thanh 12px. Nút đảo chiều là vòng
 * tròn nền xám đè đúng lên đường ranh giữa ô 1 và ô 2.
 */
.px-trips__top .px-search--inline {
	align-items: stretch;
	gap: 0.75rem;
}

.px-trips__top .px-search--inline .px-search__form {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.px-trips__top .px-search--inline .px-search__row {
	gap: 0;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	height: 100%;
	position: relative;
}

.px-trips__top .px-search--inline .px-search__field {
	background-color: var( --wp--preset--color--canvas );
	border: 1px solid var( --wp--preset--color--line );
	box-sizing: border-box;
	gap: 1rem;
	min-height: 3.875rem;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
}

.px-trips__top .px-search--inline .px-search__field + .px-search__field,
.px-trips__top .px-search--inline .px-search__swap + .px-search__field {
	border-inline-start: 0;
	min-height: 3.875rem;
	padding-block: 0.5rem;
	padding-inline: 1rem 0.5rem;
}

.px-trips__top .px-search--inline .px-search__row > .px-search__field:first-child {
	border-radius: 1rem 0 0 1rem;
}

/* Ô "Nơi đến" thụt trái 32px để chừa chỗ cho nút đảo chiều. */
.px-trips__top .px-search--inline .px-search__swap + .px-search__field {
	padding-inline-start: 2rem;
}

.px-trips__top .px-search--inline .px-search__row > .px-search__field:last-child {
	border-radius: 0 1rem 1rem 0;
}

.px-trips__top .px-search--inline .px-search__icon .px-icon {
	height: 1.5rem;
	width: 1.5rem;
}

.px-trips__top .px-search--inline .px-search__control {
	gap: 0.125rem;
}

.px-trips__top .px-search--inline .px-search__label {
	color: var( --wp--preset--color--fg-muted );
	font-size: 0.75rem;
	line-height: 1.125rem;
}

.px-trips__top .px-search--inline .px-combo__button,
.px-trips__top .px-search--inline .px-date__button {
	color: #131316;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5rem;
}

.px-trips__top .px-search--inline .px-search__swap {
	background-color: var( --wp--preset--color--line );
	border: 0;
	color: var( --wp--preset--color--fg );
	height: 2.25rem;
	inset-block-start: 50%;
	inset-inline-start: calc( 100% / 3 - 1.125rem );
	padding: 0.375rem;
	position: absolute;
	transform: translateY( -50% );
	width: 2.25rem;
	z-index: 1;
}

@media ( hover: hover ) {
	.px-trips__top .px-search--inline .px-search__swap:hover {
		background-color: var( --wp--preset--color--line-strong, #c9ccd8 );
	}
}

.px-trips__top .px-search--inline .px-search__submit {
	align-self: stretch;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	justify-content: center;
	line-height: 1.25rem;
	min-height: 3.875rem;
	min-width: 0;
	padding: 0.625rem 1.5rem;
	width: 7.5rem;
}

/* --- Section 3: nền xám, cách thanh tìm 40px, đáy 60px --- */

.px-trips__body {
	padding-block: 2.5rem 3.75rem;
}

@media ( max-width: 48rem ) {
	.px-trips__top .px-search--inline .px-search__row {
		grid-template-columns: 1fr;
	}

	.px-trips__top .px-search--inline .px-search__field,
	.px-trips__top .px-search--inline .px-search__field + .px-search__field,
	.px-trips__top .px-search--inline .px-search__swap + .px-search__field {
		border: 1px solid var( --wp--preset--color--line );
		border-radius: 0;
		padding-inline: 1rem 0.5rem;
	}

	.px-trips__top .px-search--inline .px-search__field + .px-search__field,
	.px-trips__top .px-search--inline .px-search__swap + .px-search__field {
		border-block-start: 0;
	}

	.px-trips__top .px-search--inline .px-search__row > .px-search__field:first-child {
		border-radius: 1rem 1rem 0 0;
	}

	.px-trips__top .px-search--inline .px-search__row > .px-search__field:last-child {
		border-radius: 0 0 1rem 1rem;
	}

	.px-trips__top .px-search--inline .px-search__swap {
		inset-block-start: calc( 3.875rem - 1.125rem );
		inset-inline: auto 1rem;
		transform: none;
	}

	.px-trips__top .px-search--inline .px-search__submit {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   Tab "Mã ưu đãi" — screenshot/Xem mã ưu đãi.png

   Ô nhập + nút căn giữa đầu khung; hai mục "Áp dụng / Không áp dụng" gạch chân
   đỏ; thẻ mã hai cột: mức giảm 32px đỏ, nút "Sử dụng" viên thuốc viền đỏ, kẻ
   đứt ngăn phần điều kiện.
   ------------------------------------------------------------------------- */

.px-coupons__apply {
	align-items: stretch;
	display: flex;
	margin: 0 auto var( --wp--preset--spacing--sm );
	max-width: 36rem;
}

/*
 * Ô và nút lệch nhau 2px (TKT-004 mục 27): cùng `height: 3rem` nhưng ô nhập
 * tính content-box (+2px viền), nút tính border-box. Ép cả hai border-box.
 */
.px-coupons__apply input,
.px-coupons__apply button {
	box-sizing: border-box;
	margin: 0;
}

.px-coupons__apply input {
	background: #fff;
	border: 1px solid var( --wp--preset--color--line );
	border-end-start-radius: var( --wp--custom--radius--md, 0.5rem );
	border-inline-end: 0;
	border-start-start-radius: var( --wp--custom--radius--md, 0.5rem );
	color: var( --wp--preset--color--fg );
	flex: 1 1 auto;
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	height: 3rem;
	min-width: 0;
	padding-inline: 1.25rem;
}

.px-coupons__apply input:focus {
	border-color: var( --wp--preset--color--brand );
	outline: none;
}

.px-coupons__apply button {
	background: var( --wp--preset--color--brand );
	border: 0;
	border-end-end-radius: var( --wp--custom--radius--md, 0.5rem );
	border-start-end-radius: var( --wp--custom--radius--md, 0.5rem );
	color: #fff;
	cursor: pointer;
	flex: none;
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	font-weight: 600;
	height: 3rem;
	padding-inline: 2.5rem;
}

.px-coupons__apply button:hover {
	background: var( --px-hover-fill, var( --wp--preset--color--brand-strong ) );
}

.px-coupons__note {
	background: var( --wp--preset--color--brand-subtle );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	color: var( --wp--preset--color--brand );
	margin: 0 auto var( --wp--preset--spacing--sm );
	max-width: 36rem;
	padding: 0.625rem 1rem;
	text-align: center;
}

.px-coupons__tabs {
	border-block-end: 1px solid var( --wp--preset--color--line );
	display: flex;
	margin-block-end: var( --wp--preset--spacing--sm );
}

.px-coupons__tab {
	border-block-end: 2px solid transparent;
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	margin-block-end: -1px;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
}

.px-coupons__tab:hover {
	color: var( --wp--preset--color--brand );
}

.px-coupons__tab.is-current {
	border-block-end-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--brand );
	font-weight: 600;
}

.px-coupons {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat( auto-fill, minmax( min( 22rem, 100% ), 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-coupon {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	display: flex;
	flex-direction: column;
}

.px-coupon p {
	margin: 0;
}

.px-coupon__head {
	align-items: flex-start;
	border-block-end: 1px dashed var( --wp--preset--color--line );
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-inline: 0.25rem;
	padding: 1.25rem 1.25rem 1.5rem;
}

.px-coupon__value {
	color: var( --wp--preset--color--brand );
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
}

.px-coupon__name {
	color: var( --wp--preset--color--fg );
	margin-block-start: 0.5rem !important;
}

.px-coupon__use {
	border: 1px solid var( --wp--preset--color--brand );
	border-radius: var( --wp--custom--radius--pill, 999px );
	color: var( --wp--preset--color--brand );
	flex: none;
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	font-weight: 600;
	padding: 0.5rem 1.5rem;
	text-decoration: none;
	white-space: nowrap;
}

.px-coupon__use:hover {
	background: var( --px-hover-fill, var( --wp--preset--color--brand-strong ) );
	border-color: var( --px-hover-fill, var( --wp--preset--color--brand-strong ) );
	color: #fff;
}

.px-coupon__body {
	display: grid;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem 1.5rem;
}

.px-coupon__cond {
	color: var( --wp--preset--color--fg-muted );
	margin-block-end: 0.25rem !important;
}

.px-coupon__meta {
	color: var( --wp--preset--color--fg );
}

.px-coupon__code {
	color: var( --wp--preset--color--brand );
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Mã hết hạn: cùng khuôn, bạc màu — vẫn đọc được điều kiện cũ. */
.px-coupons.is-expired .px-coupon__value,
.px-coupons.is-expired .px-coupon__code {
	color: var( --wp--preset--color--fg-muted );
}

@media ( max-width: 36rem ) {
	.px-coupons__apply button {
		padding-inline: 1.25rem;
	}

	.px-coupons__tab {
		flex: 1 1 0;
		padding-inline: 0.5rem;
		text-align: center;
		white-space: nowrap;
	}

	.px-coupon__value {
		font-size: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
   Tab "Mã đặt vé" và "Đơn hàng" — screenshot/trạng thái vé trống.png,
   trạng thái gửi hàng trống.png (Figma 131:92476, 131:92985)

   Khung không đệm: thanh tiêu đề 58px kẻ dưới chạy sát mép khung; hàng lọc
   đệm 16; thân chứa danh sách hoặc trạng thái trống có hình 200px.
   ------------------------------------------------------------------------- */

.px-account__panel--ma-dat-ve,
.px-account__panel--don-hang {
	overflow: visible;
	padding: 0;
}

.px-orders__title {
	border-block-end: 1px solid var( --wp--preset--color--line );
	font-size: var( --wp--preset--font-size--h-3, 1.125rem );
	font-weight: 600;
	line-height: 1.625rem;
	margin: 0;
	padding: 1rem 1.5rem;
	text-transform: none;
}

.px-orders__filter {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	justify-content: space-between;
	padding: 1rem;
}

.px-orders__search,
.px-orders__date {
	align-items: center;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 0.25rem;
	color: var( --wp--preset--color--fg-muted );
	display: flex;
	gap: 0.5rem;
	height: 2.75rem;
	padding-inline: 1rem;
}

.px-orders__search {
	flex: 0 1 21.75rem;
}

.px-orders__search:focus-within,
.px-orders__date:focus-within {
	border-color: var( --wp--preset--color--brand );
}

.px-orders__search svg,
.px-orders__date > svg {
	flex: none;
}

.px-orders__search input {
	background: none;
	border: 0;
	color: var( --wp--preset--color--fg );
	flex: 1 1 auto;
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	min-width: 0;
	outline: none;
	padding: 0;
}

.px-orders__search input::placeholder {
	color: var( --wp--preset--color--fg-muted );
}

.px-orders__range {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.px-orders__date {
	width: 8.75rem;
}

.px-orders__date .px-date {
	flex: 1 1 auto;
	min-width: 0;
	position: static;
}

.px-orders__range {
	position: relative;
}

.px-orders__date .px-date__button {
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	font-weight: 500;
	white-space: nowrap;
}

.px-orders__date .px-date__button.is-empty {
	color: var( --wp--preset--color--fg-muted );
	font-weight: 400;
}

.px-orders__to {
	color: var( --wp--preset--color--fg );
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	font-weight: 600;
}

.px-orders__body {
	padding: 0 1rem 1rem;
}

.px-orders__body .px-empty.has-art {
	padding-block: 2.625rem 3.5rem;
}

.px-empty.has-art .px-empty__art {
	height: auto;
	margin-block-end: 1.5rem;
	max-width: 100%;
	object-fit: contain;
	width: 12.5rem;
}

/* TKT-010: ảnh tra cứu 404×200 hiển thị đúng tỉ lệ gốc. */
.px-lookup .px-empty.has-art .px-empty__art {
	width: 25.25rem;
}

.px-orders__body .px-empty__title {
	font-size: var( --wp--preset--font-size--h-3, 1.125rem );
	font-weight: 600;
	line-height: 1.625rem;
}

.px-orders__body .px-empty__lead {
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	margin-block-start: 0.5rem;
}

.px-empty__cta {
	background: var( --wp--preset--color--brand );
	border-radius: 0.25rem;
	color: #fff;
	display: inline-block;
	font-size: var( --wp--preset--font-size--body, 0.8125rem );
	font-weight: 600;
	line-height: 1.5rem;
	margin-block-start: 1.5rem;
	padding: 0.625rem 1rem;
	text-decoration: none;
}

.px-empty__cta:hover {
	background: var( --px-hover-fill, var( --wp--preset--color--brand-strong ) );
	color: #fff;
}

@media ( max-width: 48rem ) {
	.px-orders__search {
		flex-basis: 100%;
	}

	.px-orders__range {
		flex: 1 1 100%;
	}

	.px-orders__date {
		flex: 1 1 0;
		width: auto;
	}
}

/* =========================================================================
   BA MÀN 18/9/2026 — Giới thiệu, Dịch vụ, Landing
   Phối cảnh: Downloads/phucxuyen-page/*.png. Pattern ở
   nd-presets/phucxuyen/patterns/{about-*,services-*,consult,how-to-book-single}.php.

   Chỉ dùng token màu (`--wp--preset--color--*`) và thang khoảng cách của
   theme; không mã màu cứng — đổi màu thương hiệu là mọi khối đổi theo.
   ========================================================================= */

/* Chữ nhấn đỏ trong tiêu đề: "Hành trình của <niềm tin>". */
.px-accent {
	color: var( --wp--preset--color--brand );
}

/* Đoạn văn liền nhau không cách dòng, cỡ 16 như phối cảnh. */
.px-prose p {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* Banner ảnh in sẵn chữ: sát header, không khe. */
.px-page-banner {
	margin-block: 0;
}

.px-page-banner img {
	display: block;
	width: 100%;
}

.px-rounded-img img {
	border-radius: var( --wp--custom--radius--lg, 1rem );
	display: block;
	width: 100%;
}

/* "Dễ dàng đặt vé trên Website" ở landing: chữ thường, không đậm. */
.px-heading-light {
	font-weight: 500;
}

/* --- Hành trình của niềm tin: ảnh tràn mép phải, mờ dần vào nền --- */

.px-story {
	overflow-x: clip;
}

@media ( min-width: 48.875rem ) {
	.px-bleed-end .wp-block-image {
		--px-wide: min( var( --wp--style--global--wide-size, 82rem ), 100vw - var( --wp--style--root--padding-left, 1rem ) - var( --wp--style--root--padding-right, 1rem ) );
		margin: 0;
		width: calc( 100% + ( 100vw - var( --px-wide ) ) / 2 );
	}

	.px-bleed-end .wp-block-image img {
		-webkit-mask-image: linear-gradient( to right, transparent 0, black 30% );
		mask-image: linear-gradient( to right, transparent 0, black 30% );
	}
}

/* --- Bốn bước / bốn giá trị: biến thể cỡ lớn và biến thể trên nền đỏ --- */

.px-steps--lg {
	gap: 1.5rem;
}

.px-steps--lg .px-steps__item {
	gap: 0.5rem;
	padding-inline-start: 4rem;
}

.px-steps--lg .px-steps__item::before {
	font-size: 0.875rem;
	height: 2.5rem;
	width: 2.5rem;
}

.px-steps--lg .px-steps__item:not( :last-child )::after {
	inset-block: 3rem -1.25rem;
	inset-inline-start: 1.25rem;
}

.px-steps--lg .px-steps__title {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
}

.px-steps--lg .px-steps__text {
	font-size: 1rem;
	line-height: 1.5;
}

.px-steps--on-brand .px-steps__item::before {
	background-color: var( --wp--preset--color--fg-on-brand );
	color: var( --wp--preset--color--brand );
}

.px-steps--on-brand .px-steps__item:not( :last-child )::after {
	background-color: var( --wp--preset--color--fg-on-brand );
	opacity: 0.5;
}

.px-steps--on-brand .px-steps__title {
	color: var( --wp--preset--color--fg-on-brand );
	font-weight: 700;
}

.px-steps--on-brand .px-steps__text {
	color: var( --wp--preset--color--fg-on-brand );
	opacity: 0.85;
}

/* --- Điều chúng tôi đặt lên hàng đầu: ảnh làm lớp nền kín dải đỏ --- */

.px-values {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.px-values > .px-values__bg {
	inset: 0;
	margin: 0;
	max-width: none;
	position: absolute;
	z-index: -1;
}

.px-values > .px-values__bg img {
	height: 100%;
	object-fit: cover;
	object-position: left center;
	width: 100%;
}

.px-values__cols {
	margin-block: 0;
	min-height: 28rem;
}

.px-values p {
	font-size: 1rem;
	line-height: 1.6;
}

/* Hẹp: xe trong ảnh không còn chỗ; phủ màu thương hiệu, chữ chiếm trọn bề ngang. */
@media ( max-width: 61.99rem ) {
	.px-values > .px-values__bg img {
		opacity: 0.25;
	}

	.px-values__cols > .wp-block-column:first-child {
		display: none;
	}

	.px-values__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.px-values__cols {
		min-height: 0;
	}
}

/* --- Đi cùng bạn: hai ảnh chồng lệch (khung 700×545 của phối cảnh) --- */

.px-duo {
	aspect-ratio: 700 / 545;
	position: relative;
	width: 100%;
}

.px-duo img {
	border-radius: var( --wp--custom--radius--lg, 1rem );
	box-sizing: border-box;
	display: block;
	object-fit: cover;
	position: absolute;
}

.px-duo__back {
	aspect-ratio: 356 / 376;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 51%;
}

.px-duo__front {
	aspect-ratio: 424 / 410;
	border: 6px solid var( --wp--preset--color--surface-raised, #fff );
	inset-block-end: 0;
	inset-inline-end: 0;
	width: 60.6%;
}

/* --- 19 năm không chỉ là một con số: dải đỏ chấm bi --- */

.px-stats {
	background-image:
		radial-gradient( color-mix( in srgb, var( --wp--preset--color--fg-on-brand ) 14%, transparent ) 1px, transparent 1.5px ),
		linear-gradient( 180deg, var( --wp--preset--color--brand ), var( --wp--preset--color--brand-strong, var( --wp--preset--color--brand ) ) );
	background-size: 1.25rem 1.25rem, auto;
}

.px-stats__row {
	margin-block: 0;
}

.px-stats__num {
	font-size: var( --wp--preset--font-size--h-1, 2.5rem );
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.px-stats__label {
	font-size: 1rem;
	margin: 0.25rem 0 0;
	opacity: 0.9;
}

@media ( max-width: 48.8rem ) {
	.px-stats__row {
		display: grid !important;
		gap: var( --wp--preset--spacing--sm );
		grid-template-columns: 1fr 1fr;
	}

	.px-stats__num {
		font-size: var( --wp--preset--font-size--h-2, 2rem );
	}
}

/* --- Đăng ký nhận tư vấn (block phucxuyen/consult) --- */

.px-consult {
	background-color: var( --wp--preset--color--surface );
	background-image: var( --px-consult-bg, none );
	background-position: center;
	background-size: cover;
	padding-block: var( --wp--preset--spacing--xl );
	padding-inline: var( --wp--style--root--padding-left, 1rem ) var( --wp--style--root--padding-right, 1rem );
}

.px-consult__inner {
	align-items: stretch;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax( 0, 28.25rem ) minmax( 0, 1fr );
	margin-inline: auto;
	max-width: var( --wp--style--global--wide-size, 82rem );
}

.px-consult__inner:not( :has( .px-consult__media ) ) {
	grid-template-columns: minmax( 0, 1fr );
}

.px-consult__media img {
	aspect-ratio: 1;
	border-radius: var( --wp--custom--radius--lg, 1rem );
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.px-consult__card {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	box-shadow: 0 0.5rem 2rem color-mix( in srgb, var( --wp--preset--color--fg ) 8%, transparent );
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	justify-content: center;
	padding: 2.5rem;
}

/* `.px-consult` đứng trước: luật `.wp-block-post-content h2` (TKT-002, cỡ h-3)
   mạnh hơn một lớp đơn. */
.px-consult .px-consult__title {
	color: var( --wp--preset--color--fg );
	font-size: var( --wp--preset--font-size--h-2, 2rem );
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.px-consult .px-consult__title span {
	color: var( --wp--preset--color--brand );
	display: block;
}

.px-consult__lead {
	color: var( --wp--preset--color--fg-muted );
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.px-consult__form {
	display: grid;
	max-width: none;
	gap: 1rem;
	grid-template-columns: 1fr 1fr;
	margin-block-start: 0.5rem;
}

.px-consult__form .nd-form__field {
	margin: 0;
}

.px-consult__form .nd-form__input {
	background-color: var( --wp--preset--color--surface );
	border: 1px solid transparent;
	border-radius: 0.25rem;
	box-sizing: border-box;
	color: var( --wp--preset--color--fg );
	font-size: 0.875rem;
	height: 3rem;
	padding-inline: 1rem;
	width: 100%;
}

.px-consult__form .nd-form__input::placeholder {
	color: var( --wp--preset--color--fg-muted );
}

.px-consult__form .nd-form__input:focus {
	border-color: var( --wp--preset--color--brand );
	outline: none;
}

.px-consult__select select {
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, currentColor 50% ), linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position: right 1.25rem center, right 0.9rem center;
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem;
	cursor: pointer;
	padding-inline-end: 2.5rem;
}

.px-consult__select select:invalid,
.px-consult__select select:has( option[value=""]:checked ) {
	color: var( --wp--preset--color--fg-muted );
}

.px-consult__consent,
.px-consult__actions,
.px-consult__form .nd-form__message {
	grid-column: 1 / -1;
	margin: 0;
}

.px-consult__consent label {
	align-items: flex-start;
	color: var( --wp--preset--color--fg-muted );
	display: flex;
	font-size: var( --wp--preset--font-size--caption, 0.75rem );
	gap: 0.5rem;
	line-height: 1.5;
}

.px-consult__consent input {
	accent-color: var( --wp--preset--color--brand );
	flex: none;
	margin-block-start: 0.15rem;
}

.px-consult__consent a {
	color: var( --wp--preset--color--brand );
}

.px-consult__submit {
	background-color: var( --wp--preset--color--brand );
	border: 0;
	border-radius: 0.25rem;
	color: var( --wp--preset--color--fg-on-brand );
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
}

.px-consult__submit:hover,
.px-consult__submit:focus-visible {
	background-color: var( --px-hover-fill, var( --wp--preset--color--brand-strong ) );
}

@media ( max-width: 61.99rem ) {
	.px-consult__inner {
		grid-template-columns: minmax( 0, 1fr );
	}

	.px-consult__media {
		margin-inline: auto;
		max-width: 28.25rem;
		width: 100%;
	}
}

@media ( max-width: 36rem ) {
	.px-consult__card {
		padding: 1.5rem;
	}

	.px-consult .px-consult__title {
		font-size: 1.5rem;
	}

	.px-consult__form {
		grid-template-columns: 1fr;
	}
}

/* --- Dịch vụ của Phúc Xuyên: thẻ dịch vụ --- */

.px-service-card {
	height: 100%;
}

.px-service-card > * {
	margin-block: 0;
}

.px-service-card__img {
	width: 100%;
}

.px-service-card__img img {
	border-radius: var( --wp--custom--radius--lg, 1rem );
	display: block;
	width: 100%;
}

.px-service-card__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	margin-block-start: 0.5rem;
	padding-inline: 0.5rem;
	text-transform: none;
}

.px-service-card__text {
	line-height: 1.5;
	padding-inline: 0.5rem;
}

/* Nút dồn xuống đáy thẻ: sáu thẻ một hàng nút thẳng nhau dù mô tả dài ngắn. */
.px-service-card__actions {
	margin-block-start: auto;
	padding: 0.5rem 0.5rem 0;
}

.px-service-card__btn .wp-block-button__link {
	border-radius: 0.25rem;
	font-size: var( --wp--preset--font-size--caption, 0.75rem );
	font-weight: 600;
	padding: 0.625rem 1rem;
}

/* Đoạn dẫn ngay trên danh sách bước cỡ lớn: 16px như phối cảnh (thân trang là 13). */
.wp-block-column:has( > .px-steps--lg ) > p {
	font-size: 1rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Hộp thoại đăng nhập Firebase (email + mật khẩu) — inc/views/auth-dialog-firebase.php
   ------------------------------------------------------------------------- */

/* Thông báo thành công/đang chờ: cùng khuôn ô lỗi, tông xanh "thành công". */
.px-auth__notice {
	background-color: color-mix( in srgb, var( --wp--preset--color--success, #019a64 ) 10%, transparent );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	color: var( --wp--preset--color--success, #019a64 );
	font-size: var( --wp--preset--font-size--caption );
	margin-block-end: var( --wp--preset--spacing--2-xs );
	padding: var( --wp--preset--spacing--2-xs );
}

.px-auth__row-end {
	margin: -0.25rem 0 0;
	text-align: end;
}

.px-auth__switch {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--small );
	margin: 0;
	text-align: center;
}

.px-auth__switch .px-auth__link {
	font-weight: 600;
}

.px-auth__pair {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr 1fr;
}

.px-auth__hint--small {
	font-size: var( --wp--preset--font-size--caption );
	margin: 0.35rem 0 0;
}

.px-auth__submit[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

/* Nhắc xác minh email ở trang tài khoản — nằm trên nội dung tab. */
.px-account__verify {
	margin-block-end: var( --wp--preset--spacing--sm );
}

/* -------------------------------------------------------------------------
   Kết quả tra cứu đơn hàng gửi — screenshot/trạng thai hàng hóa đã có.png và
   chi tiết hàng hóa.png.

   Trước đây phần này là iframe của Vexere nên CSS chỉ chạm được cái khung; nay
   kết quả là markup của mình (xem inc/shipments.php).
   ------------------------------------------------------------------------- */

.px-ship {
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--lg, 1rem );
	display: grid;
	gap: var( --wp--preset--spacing--md );
	padding: var( --wp--preset--spacing--md );
}

.px-ship__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Thẻ trạng thái: xanh khi đã giao xong, còn lại là màu thương hiệu. */
.px-ship__status {
	background-color: var( --wp--preset--color--brand );
	border-radius: var( --wp--custom--radius--pill, 999px );
	color: var( --wp--preset--color--fg-on-brand );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	margin: 0;
	padding: 0.375rem 1rem;
}

.px-ship__status.is-done {
	background-color: var( --wp--preset--color--success, #019a64 );
}

.px-ship__at {
	color: var( --wp--preset--color--fg-muted );
	margin: 0;
}

.px-ship__code {
	color: var( --wp--preset--color--fg-muted );
	margin: 0 0 0 auto;
}

.px-ship__code strong {
	color: var( --wp--preset--color--fg );
	letter-spacing: 0.02em;
}

/*
 * Bốn bước nằm ngang, đường nối chạy qua các chấm. Đường vẽ bằng `::before` của
 * từng bước (trừ bước đầu) nên không cần phần tử rỗng nào.
 */
.px-ship__steps {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-ship__step {
	color: var( --wp--preset--color--fg-muted );
	display: grid;
	gap: 0.35rem;
	justify-items: center;
	position: relative;
	text-align: center;
}

.px-ship__step + .px-ship__step::before {
	background-color: var( --wp--preset--color--line );
	content: "";
	height: 2px;
	inset-inline-end: 50%;
	inset-inline-start: -50%;
	position: absolute;
	top: 0.6875rem;
}

.px-ship__step.is-done + .px-ship__step.is-done::before {
	background-color: var( --wp--preset--color--accent );
}

/* Dấu tích nằm giữa chấm nhờ flex — không căn bằng toạ độ tuyệt đối nữa. */
.px-ship__dot {
	align-items: center;
	background-color: var( --wp--preset--color--surface-raised, #fff );
	border: 2px solid var( --wp--preset--color--line );
	border-radius: 50%;
	color: var( --wp--preset--color--fg-on-brand );
	display: flex;
	height: 1.5rem;
	justify-content: center;
	position: relative;
	width: 1.5rem;
	z-index: 1;
}

.px-ship__dot .px-icon {
	display: block;
}

/* Cam của dải bước là token `accent` — đúng màu trong mẫu chi tiết hàng hóa. */
.px-ship__step.is-done .px-ship__dot {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
}



.px-ship__step.is-done .px-ship__step-label {
	color: var( --wp--preset--color--fg );
	font-weight: 600;
}

.px-ship__step-at {
	font-size: var( --wp--preset--font-size--caption );
}

.px-ship__cols {
	border-block: 1px solid var( --wp--preset--color--line );
	display: grid;
	gap: var( --wp--preset--spacing--md );
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	padding-block: var( --wp--preset--spacing--sm );
}

.px-ship__col + .px-ship__col {
	border-inline-start: 1px solid var( --wp--preset--color--line );
	padding-inline-start: var( --wp--preset--spacing--md );
}

.px-ship__col-title {
	align-items: center;
	display: flex;
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 600;
	gap: 0.5rem;
	margin: 0 0 var( --wp--preset--spacing--2-xs );
}

/* Icon đầu đề cột (hộp hàng, ghim vị trí) — xám như trong thiết kế. */
.px-ship__icon {
	color: var( --wp--preset--color--icon-muted, #74748e );
	flex: none;
}

/* Dòng thời gian: icon tích tròn xanh bên trái, nối nhau bằng một vạch dọc. */
.px-ship__events {
	display: grid;
	gap: var( --wp--preset--spacing--sm );
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-ship__events li {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1.25rem minmax( 0, 1fr );
	position: relative;
}

.px-ship__event-icon {
	color: var( --wp--preset--color--text-link, #0966ff );
	display: block;
	height: 1.25rem;
	width: 1.25rem;
}

/* Vạch nối chạy từ icon này xuống icon dưới; mốc cuối không có vạch. */
.px-ship__events li:not( :last-child )::before {
	background-color: var( --wp--preset--color--line );
	content: "";
	inset-block: 1.5rem -1.25rem;
	inset-inline-start: 0.5625rem;
	position: absolute;
	width: 1px;
}

.px-ship__event-body {
	display: grid;
	gap: 0.15rem;
}

.px-ship__event-body strong {
	color: var( --wp--preset--color--fg-muted );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 400;
}

.px-ship__facts {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.px-ship__facts > div {
	align-items: baseline;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
}

.px-ship__facts dt {
	color: var( --wp--preset--color--fg-muted );
}

/* Số điện thoại văn phòng: màu chữ thường như mẫu, không xanh như liên kết. */
.px-ship__facts dd a {
	color: inherit;
}

.px-ship__facts dd {
	font-weight: 600;
	margin: 0;
	overflow-wrap: anywhere;
	text-align: end;
}

/* Còn nợ cước thì tô màu thương hiệu — khách cần thấy ngay. */
.px-ship__due {
	color: var( --wp--preset--color--brand );
}

.px-ship__error {
	background-color: var( --wp--preset--color--brand-subtle );
	border-radius: var( --wp--custom--radius--md, 0.5rem );
	color: var( --wp--preset--color--brand );
	padding: var( --wp--preset--spacing--2-xs );
}

@media ( max-width: 48rem ) {
	.px-ship__cols {
		grid-template-columns: 1fr;
	}

	.px-ship__col + .px-ship__col {
		border-block-start: 1px solid var( --wp--preset--color--line );
		border-inline-start: 0;
		padding-block-start: var( --wp--preset--spacing--sm );
		padding-inline-start: 0;
	}

	.px-ship__code {
		margin-inline-start: 0;
		width: 100%;
	}

	.px-ship__steps {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.px-ship__step {
		gap: 0.25rem;
		grid-template-columns: 1.375rem auto;
		justify-items: start;
		padding-block: 0.35rem;
		text-align: start;
	}

	.px-ship__step-at {
		grid-column: 2;
	}

	/*
	 * Màn hẹp: bốn bước xếp dọc, đường nối thành đoạn dọc nối chấm trên xuống
	 * chấm dưới. Khe giữa hai chấm đúng bằng 0,7rem (đệm 0,35rem mỗi bước).
	 */
	.px-ship__step + .px-ship__step::before {
		height: 0.7rem;
		inset-block-start: -0.7rem;
		inset-inline: 0.625rem auto;
		top: auto;
		width: 2px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NGHIỆM THU TKT-004 (góp ý 21–24/9/2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Mục 19 — "check lại biến xem những chỗ nào đang không phải màu đen thì chuyển
 * về màu đen". Chữ xám của site đều đi qua MỘT biến `fg-muted` (#5f5f74, 72 chỗ
 * trong tệp này, thêm skin Vexere). Trỏ biến ấy về màu chữ chính là đổi một
 * lượt, kể cả đoạn văn đặt màu "Chữ phụ" trong trình soạn thảo
 * (`.has-fg-muted-color`). `html:root` để thắng `:root` của global styles bất kể
 * thứ tự nạp — cùng cách với họ font ở đầu tệp.
 *
 * TRỪ chữ gợi ý trong ô nhập và nút tắt: đen hết thì "Nhập mã khuyến mãi",
 * "Từ ngày" trông như giá trị đã điền. Khai lại biến ngay trên phần tử ấy.
 */
html:root {
	--px-fg-placeholder: #5f5f74;
	--wp--preset--color--fg-muted: var( --wp--preset--color--fg, #2f3037 );
}

.px-orders__search input,
.px-orders__date .px-date__button.is-empty,
.px-consult__form .nd-form__input,
.px-auth__submit[disabled],
#vexereSearchWidget .ant-input {
	--px-fg-muted: var( --px-fg-placeholder );
	--wp--preset--color--fg-muted: var( --px-fg-placeholder );
}

:where( input, textarea )::placeholder {
	color: var( --px-fg-placeholder );
}

/*
 * Mục 18 — trang Dịch vụ: "cân lại khoảng cách để không bị xô lệch, fixed cứng
 * space của title và mô tả". Tiêu đề giữ chỗ đủ 2 dòng, mô tả đủ 3 dòng: thẻ có
 * tiêu đề một dòng ("Dịch vụ xe Chuyển phát nhanh liên tỉnh") vẫn chừa khoảng
 * như thẻ hai dòng, nên ba mô tả và ba nút trên một hàng thẳng nhau. Dài hơn
 * thì thẻ tự giãn — không cắt chữ.
 */
.px-service-card__title {
	min-block-size: calc( 2 * 1.45em );
}

.px-service-card__text {
	min-block-size: calc( 3 * 1.5em );
}

/*
 * Mục 22 — trang Tin tức, khối bốn tin nổi bật: "tăng kích thước cả phần này để
 * khối bên phải được tăng height". Lưới mosaic của nd-core lấy chiều cao theo
 * sàn 24rem của ô lớn, nên mỗi hàng bên phải chỉ ~190px — ảnh ngang bị cắt còn
 * một dải. Nâng sàn lên 35rem: mỗi hàng bên phải ~276px. Chỉ màn rộng; dưới
 * 782px nd-core đã xếp một cột.
 */
@media ( min-width: 782px ) {
	.wp-block-nd-post-loop.nd-loop--mosaic .nd-loop__item--lead {
		min-block-size: 35rem;
	}
}

/*
 * Landing — "Vì sao lựa chọn Phúc Xuyên" bốn ảnh 2 × 2 (pattern
 * `phucxuyen/landing-usp`, Figma Section 7, 298:28180). Ảnh bo 24px, số thứ tự
 * tròn 40px nền thương hiệu đặt góc trên trái ảnh, tiêu đề 20/28 đậm, mô tả
 * 16/24. Số là CSS counter: đổi chỗ thẻ trong trình soạn thảo thì số tự đúng.
 */
/* Câu dẫn rộng bằng lưới (Figma 1440), không bó ở khổ nội dung; cân hai dòng khi phải xuống dòng. */
.px-usp .px-usp__lead {
	max-width: var( --wp--style--global--wide-size );
	text-wrap: balance;
}

.px-usp .px-usp__grid {
	counter-reset: px-usp;
}

.px-usp .px-usp__card {
	counter-increment: px-usp;
	min-width: 0;
}

.px-usp .px-usp__media {
	margin: 0;
	position: relative;
}

.px-usp .px-usp__media img {
	border-radius: 1.5rem;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.px-usp .px-usp__media::after {
	align-items: center;
	background-color: var( --wp--preset--color--brand );
	border-radius: 50%;
	color: var( --wp--preset--color--fg-on-brand );
	content: counter( px-usp );
	/* Số chỉ để trang trí: máy đọc màn hình bỏ qua ở trình duyệt hỗ trợ. */
	content: counter( px-usp ) / "";
	display: flex;
	font-size: 1rem;
	font-weight: 700;
	height: 2.5rem;
	inset-block-start: 1.25rem;
	inset-inline-start: 1.25rem;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	width: 2.5rem;
}

.px-usp .px-usp__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	margin-block-start: var( --wp--preset--spacing--sm );
}

.px-usp .px-usp__text {
	font-size: 1rem;
	line-height: 1.5;
	margin-block-start: var( --wp--preset--spacing--2-xs );
}

@media ( max-width: 781px ) {
	.px-usp .px-usp__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.px-usp .px-usp__media img {
		border-radius: 1rem;
	}

	.px-usp .px-usp__media::after {
		font-size: 0.875rem;
		height: 2rem;
		inset-block-start: 0.75rem;
		inset-inline-start: 0.75rem;
		width: 2rem;
	}

	.px-usp .px-usp__title {
		font-size: 1.125rem;
	}

	.px-usp .px-usp__text {
		font-size: 0.875rem;
	}
}