/**
 * Khung đặt vé — bottom sheet dựng theo Figma "Đặt vé" (126:70864) và
 * "Chọn điểm đón trả" (126:71460), cùng ba ảnh `screenshot/1..3`.
 *
 * SỐ ĐO GỐC, khung thiết kế 1920×1080:
 *
 *   Popup          1918 × 860 @ y=220    → sát đáy, cao ≈ 80vh, bo trên 16
 *     Breadcrumb   1918 × 89   ✕ 40×40 @ 24,24 · chặng 16/24 @ 80,32 · kẻ dưới
 *     Dải bước     1918 × 80   cụm căn giữa: vòng 32 · cách 8 · chữ 16/24,
 *                              giữa hai bước: 16 · vạch 98 · 16 · kẻ dưới
 *     Thân         1918 × 690  nền #fafafa
 *       b1  cột ghế 720 @ x=240 · panel 680 (lề 20) @ x=960
 *       b2  hai thẻ 690 @ x=260 và x=970
 *       b3  thẻ liên hệ 918 @ x=260 · thẻ tóm tắt 440 @ x=1218
 *   Thanh đáy      1920 × 72   nền trắng, bóng lên trên; cụm căn giữa cách 24:
 *                              "N chỗ ngồi | ghế" 16 · giá 24/32 đậm · nút
 *                              viên thuốc đệm 10/48, chữ 14/20 đậm vừa
 *
 * Khối của Vexere đặt `position: fixed` khớp từng ô (xem vexere-modal.js);
 * CSS này quyết định kích thước ô và khoác áo nội dung bên trong.
 * Font luôn là Montserrat (khách yêu cầu), Figma dùng Inter/Be Vietnam Pro.
 */

.px-vx {
	--px-vx-brand: var( --wp--preset--color--brand, #a61b16 );
	--px-vx-fg: var( --wp--preset--color--fg, #2f3037 );
	--px-vx-muted: var( --wp--preset--color--fg-muted, #5f5f74 );
	--px-vx-line: var( --wp--preset--color--line, #dee1e7 );
	--px-vx-surface: var( --wp--preset--color--surface, #f5f6f8 );

	color: var( --px-vx-fg );
	font-family: var( --wp--preset--font-family--montserrat, Montserrat, system-ui, sans-serif );
	inset: 0;
	position: fixed;
	z-index: 9998;
}

.px-vx__nen {
	animation: px-vx-hien 240ms ease-out;
	background: rgb( 18 26 43 / 0.5 );
	inset: 0;
	position: absolute;
}

/* ── Tấm trượt ─────────────────────────────────────────────────────────── */

.px-vx__khung {
	animation: px-vx-truot 280ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
	background: #fafafa;
	border-start-end-radius: 1rem;
	border-start-start-radius: 1rem;
	display: flex;
	flex-direction: column;
	height: min( 53.75rem, 80vh );
	inset-block-end: 0;
	inset-inline: 0;
	max-height: 100%;
	overflow: hidden;
	position: absolute;
}

@keyframes px-vx-truot {

	from {
		transform: translateY( 100% );
	}
}

@keyframes px-vx-hien {

	from {
		opacity: 0;
	}
}

/* ── Hàng chặng (89px, kẻ dưới) ────────────────────────────────────────── */

.px-vx__dau {
	align-items: center;
	background: #fff;
	border-block-end: 1px solid var( --px-vx-line );
	box-sizing: border-box;
	display: flex;
	flex: none;
	gap: 1rem;
	height: 5.5625rem;
	padding-inline: 1.5rem;
}

.px-vx__dong {
	background: var( --px-vx-surface );
	border: 0;
	border-radius: 62.4375rem;
	color: var( --px-vx-fg );
	cursor: pointer;
	display: grid;
	flex: none;
	height: 2.5rem;
	padding: 0;
	place-items: center;
	width: 2.5rem;
}

.px-vx__dong:hover {
	background: var( --px-vx-line );
}

.px-vx__dong:focus-visible {
	outline: 2px solid var( --px-vx-brand );
	outline-offset: 2px;
}

.px-vx__chang {
	align-items: center;
	color: var( --px-vx-fg );
	display: flex;
	font-size: var( --px-fs-strong, 16px );
	font-weight: 600;
	gap: 0.625rem;
	line-height: 1.5rem;
}

/* `arrow-right-02` của Figma, xám nhạt #b2b6c7. */
.px-vx__mui {
	color: #b2b6c7;
	height: 1.5rem;
	width: 1.5rem;
}

/* ── Ô dải bước (80px, kẻ dưới) ────────────────────────────────────────── */

/*
 * Ô luôn rỗng; `.steps-header` của Vexere đắp lên bằng position: fixed.
 * Đừng đặt `overflow`/`transform` vào đây — transform tạo containing block
 * mới và cắt mất khối fixed.
 */
.px-vx__buoc {
	background: #fff;
	border-block-end: 1px solid var( --px-vx-line );
	flex: none;
	height: 5rem;
}

/* ── Thân ──────────────────────────────────────────────────────────────── */

.px-vx__than {
	box-sizing: border-box;
	display: grid;
	flex: 1;
	gap: 0 1.25rem;
	grid-template-columns: minmax( 0, 45rem ) minmax( 0, 42.5rem );
	justify-content: center;
	min-height: 0;
	padding: 1.25rem 1.5rem;
}

.px-vx__trai,
.px-vx__cotphai {
	min-height: 0;
	min-width: 0;
}

.px-vx__cotphai {
	display: flex;
	flex-direction: column;
}

/* b2: hai thẻ Điểm đón / Điểm trả trải hết — không có cột phải. */
html.px-vx-b2 .px-vx__than {
	grid-template-columns: minmax( 0, 87.5rem );
}

html.px-vx-b2 .px-vx__cotphai {
	display: none;
}

/* b3: thẻ liên hệ 918 · thẻ tóm tắt 440, cách 40. */
html.px-vx-b3 .px-vx__than {
	gap: 0 2.5rem;
	grid-template-columns: minmax( 0, 57.375rem ) minmax( 0, 27.5rem );
}

/* ── Panel "Thông tin chi tiết" (b1, Figma _box 680 × 670) ─────────────── */

.px-vx__phai {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.px-vx__tieude {
	border-block-end: 1px solid var( --px-vx-line );
	color: var( --px-vx-fg );
	flex: none;
	font-size: var( --px-fs-title, 18px );
	font-weight: 600;
	line-height: 1.625rem;
	margin: 0;
	padding: 0.75rem 1rem;
}

.px-vx__cuon {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

/* Dải ảnh 200×150, cách 12, lề 12/16. `overflow-y: hidden` là bắt buộc —
   thiếu nó trình duyệt tự bật thanh cuộn dọc cho trục còn lại. */
.px-vx__anh {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0.75rem 1rem;
	scroll-snap-type: x mandatory;
}

.px-vx__anh img {
	aspect-ratio: 4 / 3;
	border-radius: 0.5rem;
	flex: 0 0 12.5rem;
	object-fit: cover;
	scroll-snap-align: start;
	width: 12.5rem;
}

/* Hàng tab 56px: đệm 16/24, chữ 16/24; tab chọn đỏ, gạch dưới 2px. */
.px-vx__tab {
	border-block-end: 1px solid var( --px-vx-line );
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
}

.px-vx__tab-nut {
	background: none;
	border: 0;
	border-block-end: 2px solid transparent;
	color: var( --px-vx-fg );
	cursor: pointer;
	font: inherit;
	font-size: var( --px-fs-body, 13px );
	line-height: 1.5rem;
	margin-block-end: -1px;
	padding: 1rem 1.5rem;
	white-space: nowrap;
}

.px-vx__tab-nut:hover {
	color: var( --px-vx-brand );
}

.px-vx__tab-nut.la-chon {
	border-block-end-color: var( --px-vx-brand );
	color: var( --px-vx-brand );
	font-weight: 600;
}

.px-vx__noidung {
	padding: 1.25rem 1rem;
}

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

.px-vx__ds li {
	border-block-end: 1px solid var( --px-vx-line );
	font-size: var( --px-fs-body, 13px );
	padding-block: 0.75rem;
}

.px-vx__ds li:last-child {
	border-block-end: 0;
}

/* Mốc đón/trả: "Điểm đón" 20/28 · tỉnh 14/20 xám · hàng giờ-chấm-bến thụt 24. */
.px-vx__diem + .px-vx__diem {
	border-block-start: 1px solid var( --px-vx-line );
	margin-block-start: 1rem;
	padding-block-start: 1rem;
}

.px-vx__diem-dau {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-block-end: 1.5rem;
}

.px-vx__diem-nhan {
	font-size: var( --px-fs-title, 18px );
	font-weight: 600;
	line-height: 1.75rem;
}

.px-vx__diem-tinh {
	color: var( --px-vx-muted );
	font-size: var( --px-fs-body, 13px );
	line-height: 1.25rem;
}

.px-vx__diem-hang {
	align-items: flex-start;
	display: flex;
	gap: 0.75rem;
	padding-inline-start: 1.5rem;
}

.px-vx__diem-cotgio {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 0.125rem;
}

.px-vx__diem-gio,
.px-vx__diem-ga {
	color: var( --px-vx-fg );
	font-size: var( --px-fs-body, 13px );
	font-weight: 600;
	line-height: 1.5rem;
}

.px-vx__diem-ngay {
	color: var( --px-vx-muted );
	font-size: var( --px-fs-label, 12px );
	font-weight: 500;
	line-height: 1.25rem;
}

.px-vx__diem-cham {
	background: var( --px-vx-fg );
	border-radius: 50%;
	flex: none;
	height: 0.5rem;
	margin-block-start: 0.5rem;
	width: 0.5rem;
}

.px-vx__thieu {
	color: var( --px-vx-muted );
	font-size: var( --px-fs-body, 13px );
	margin: 0;
	padding: 1rem;
}

/* ── Thẻ tóm tắt (b3, thiết kế màn 3: 440 bề rộng) ─────────────────────── */

.px-vx__tomtat {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
	overflow: hidden;
}

.px-vx__tomtat-khoi {
	padding: 1rem;
}

.px-vx__tomtat-khoi + .px-vx__tomtat-khoi {
	border-block-start: 1px solid var( --px-vx-line );
}

.px-vx__tomtat-xe,
.px-vx__tomtat-tieude {
	color: var( --px-vx-fg );
	font-size: var( --px-fs-title, 18px );
	font-weight: 600;
	line-height: 1.625rem;
	margin: 0 0 0.75rem;
}

.px-vx__tomtat-ghe {
	color: var( --px-vx-fg );
	font-size: var( --px-fs-body, 13px );
	line-height: 1.5rem;
	margin: 0;
}

.px-vx__hanhtrinh {
	display: flex;
	flex-direction: column;
}

/* Mốc: ghim `location-01` xám của Figma · giờ đậm vừa · bến thường. */
.px-vx__moc {
	align-items: center;
	display: flex;
	font-size: var( --px-fs-body, 13px );
	gap: 0.5rem;
	line-height: 1.5rem;
}

.px-vx__moc strong {
	font-weight: 600;
}

.px-vx__moc::before {
	background-color: #74748e;
	content: "";
	flex: none;
	height: 1.5rem;
	margin-inline-end: 0.5rem;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.25 -1.25 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.97035 20.5983C8.40618 20.8477 8.77055 21.0374 9.02787 21.1656L9.75 21.5L10.4721 21.1656C10.7294 21.0374 11.0938 20.8477 11.5297 20.5983C12.3996 20.1005 13.563 19.3601 14.7301 18.3907C17.0392 16.4727 19.5 13.5412 19.5 9.71803C19.5 4.35091 15.1348 0 9.75 0C4.36522 0 0 4.35091 0 9.71803C0 13.5412 2.46077 16.4727 4.76986 18.3907C5.93703 19.3601 7.10038 20.1005 7.97035 20.5983ZM9.75 5.75C7.54086 5.75 5.75 7.54086 5.75 9.75C5.75 11.9591 7.54086 13.75 9.75 13.75C11.9591 13.75 13.75 11.9591 13.75 9.75C13.75 7.54086 11.9591 5.75 9.75 5.75Z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.25 -1.25 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.97035 20.5983C8.40618 20.8477 8.77055 21.0374 9.02787 21.1656L9.75 21.5L10.4721 21.1656C10.7294 21.0374 11.0938 20.8477 11.5297 20.5983C12.3996 20.1005 13.563 19.3601 14.7301 18.3907C17.0392 16.4727 19.5 13.5412 19.5 9.71803C19.5 4.35091 15.1348 0 9.75 0C4.36522 0 0 4.35091 0 9.71803C0 13.5412 2.46077 16.4727 4.76986 18.3907C5.93703 19.3601 7.10038 20.1005 7.97035 20.5983ZM9.75 5.75C7.54086 5.75 5.75 7.54086 5.75 9.75C5.75 11.9591 7.54086 13.75 9.75 13.75C11.9591 13.75 13.75 11.9591 13.75 9.75C13.75 7.54086 11.9591 5.75 9.75 5.75Z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	width: 1.5rem;
}

.px-vx__lau {
	color: var( --px-vx-muted );
	font-size: var( --px-fs-body, 13px );
	height: 2.5rem;
	line-height: 2.5rem;
	padding-inline-start: 2.5rem;
	position: relative;
}

.px-vx__lau::before {
	background-image: linear-gradient( to bottom, #b2b6c7 0 2px, transparent 2px 8px );
	background-size: 1.5px 8px;
	content: "";
	inset-block: 0.0625rem;
	inset-inline-start: 0.75rem;
	position: absolute;
	width: 1.5px;
}

/* ── Thanh đáy (72px) ──────────────────────────────────────────────────── */

.px-vx__chan {
	align-items: center;
	background: #fff;
	box-shadow: 0 -4px 5px rgb( 0 0 0 / 0.1 );
	display: flex;
	flex: none;
	height: 4.5rem;
	justify-content: center;
	position: relative;
}

.px-vx__cum {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	height: 100%;
}

.px-vx__ghe {
	color: var( --px-vx-fg );
	font-size: var( --px-fs-body, 13px );
	line-height: 1.5rem;
	white-space: nowrap;
}

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

/* Ô giữ chỗ cho giá + nút của Vexere; JS đặt bề rộng theo nội dung thật. */
.px-vx__cho-tong {
	flex: none;
	height: 100%;
}

.px-vx__lui {
	align-items: center;
	background: none;
	border: 0;
	color: var( --px-vx-fg );
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var( --px-fs-body, 13px );
	gap: 0.25rem;
	inset-inline-start: 1.5rem;
	padding: 0.5rem 0.75rem;
	position: absolute;
}

.px-vx__lui:hover {
	color: var( --px-vx-brand );
}

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

/* ── Khối của Vexere khi được nâng lên khung ───────────────────────────── */

/*
 * `min-height: 0` VÀ `box-sizing` LÀ BẮT BUỘC: Vexere đặt `min-height` riêng
 * cho khối sơ đồ ghế, mà `min-height` thắng cả `height` lẫn `max-height`.
 */
.px-vx-noi {
	background: transparent !important;
	border: 0 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	min-height: 0 !important;
	opacity: 1;
	overflow: auto !important;
	padding: 0 !important;
	position: fixed !important;
	transition: opacity 160ms ease-out;
	z-index: 9999 !important;
}

.px-vx-noi.px-vx-thang {
	overflow: visible !important;
}

.px-vx-noi.px-vx-cho {
	opacity: 0;
}

.px-vx-chu {
	overflow: visible !important;
}

.px-vx-khoa,
.px-vx-khoa body {
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DẢI BƯỚC (Figma _label 1918 × 80)
   ═══════════════════════════════════════════════════════════════════════════ */

#vexereSearchWidget .steps-header.px-vx-noi {
	align-items: center;
	display: flex;
	justify-content: center;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps {
	align-items: center;
	display: flex;
	gap: 0;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item {
	flex: none !important;
	margin: 0 !important;
	overflow: visible !important;
	padding: 0 !important;
}

/* Giữa hai bước: 16 · vạch 98px #dee1e7 · 16 = 130px. */
#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item:not( :last-child ) {
	margin-inline-end: 8.125rem !important;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-container {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin: 0 !important;
	position: relative;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item:not( :last-child ) .ant-steps-item-container::after {
	background: var( --px-vx-line, #dee1e7 );
	content: "";
	height: 1px;
	inset-block-start: 50%;
	inset-inline-start: calc( 100% + 1rem );
	position: absolute;
	width: 6.125rem;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-tail,
#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-title::after {
	display: none !important;
}

/* Vòng 32px: đang làm đỏ, xong đỏ + dấu tích trắng, chưa tới xám #b2b6c7. */
#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-icon {
	align-items: center;
	background: #b2b6c7 !important;
	border: 0 !important;
	border-radius: 50%;
	display: flex;
	height: 2rem !important;
	justify-content: center;
	line-height: 1 !important;
	margin: 0 !important;
	width: 2rem !important;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-process .ant-steps-item-icon,
#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-finish .ant-steps-item-icon {
	background: var( --wp--preset--color--brand, #a61b16 ) !important;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-icon {
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	top: 0 !important;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-icon svg {
	height: 1rem;
	width: 1rem;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-content {
	display: flex;
	min-height: 0 !important;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-title {
	color: var( --wp--preset--color--fg, #2f3037 ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	font-weight: 400 !important;
	line-height: 1.5rem !important;
	padding: 0 !important;
	white-space: nowrap;
}

/*
 * Bước 3 thiết kế ghi "Điền thông tin hành khách"; Vexere ghi "Nhập thông tin".
 * Đổi CHỮ bằng giả tử, không sửa DOM: chữ gốc thu về cỡ 0, `::before` in chữ
 * mới (`::after` của tiêu đề đã bị Ant Design dùng làm vạch nối).
 */
#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item:nth-child( 3 ) .ant-steps-item-title {
	align-items: center;
	display: inline-flex;
	font-size: 0 !important;
	height: 1.5rem;
}

#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item:nth-child( 3 ) .ant-steps-item-title::before {
	content: "Điền thông tin hành khách";
	font-size: var( --px-fs-body, 13px );
	line-height: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THANH ĐÁY — chỉ giữ giá và nút của Vexere, căn trong ô giữ chỗ
   ═══════════════════════════════════════════════════════════════════════════ */

#vexereSearchWidget .steps-footer.px-vx-noi {
	align-items: center;
	display: flex;
}

#vexereSearchWidget .steps-footer.px-vx-noi .steps-footer-container {
	align-items: center;
	display: flex;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

/* "Số ghế" và "Quay lại" của Vexere: phần của mình đã thay ở thanh đáy. */
#vexereSearchWidget .steps-footer.px-vx-noi .steps-footer-left,
#vexereSearchWidget .steps-footer.px-vx-noi .total-label {
	display: none !important;
}

#vexereSearchWidget .steps-footer.px-vx-noi .steps-footer-right {
	align-items: center;
	display: flex;
	flex: none;
	gap: 1.5rem;
	margin: 0 !important;
	white-space: nowrap;
}

#vexereSearchWidget .steps-footer.px-vx-noi .total-price,
#vexereSearchWidget .steps-footer.px-vx-noi .total-price * {
	color: var( --wp--preset--color--fg, #2f3037 ) !important;
	font-size: var( --px-fs-title, 18px ) !important;
	font-weight: 700 !important;
	line-height: 2rem !important;
}

/* Nút: viên thuốc đệm 10/48, chữ 14/20 — chữ đổi theo bước như thiết kế. */
#vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary {
	/* Vexere ghim nút rộng 120px — chữ dài của thiết kế bị cắt. */
	min-width: max-content !important;
	width: auto !important;
	flex: none;
	align-items: center;
	border-radius: 62.4375rem !important;
	display: inline-flex;
	font-size: 0 !important;
	height: 2.5rem !important;
	justify-content: center;
	margin: 0 !important;
	padding: 0 3rem !important;
}

#vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary > span {
	font-size: 0 !important;
}

#vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary::after {
	color: #fff;
	font-size: var( --px-fs-body, 13px );
	font-weight: 600;
	line-height: 1.25rem;
	position: static !important;
	animation: none !important;
	box-shadow: none !important;
	display: inline !important;
	inset: auto !important;
	opacity: 1 !important;
}

html.px-vx-b1 #vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary::after {
	content: "Chọn điểm đón trả";
}

html.px-vx-b2 #vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary::after {
	content: "Điền thông tin hành khách";
}

html.px-vx-b3 #vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary::after {
	content: "Thanh toán ngay";
}

/* ═══════════════════════════════════════════════════════════════════════════
   BƯỚC 1 — sơ đồ ghế trong thẻ trắng, chú thích bên dưới
   ═══════════════════════════════════════════════════════════════════════════ */

#vexereSearchWidget .steps-content.px-vx-noi .nl-seat-template,
#vexereSearchWidget .steps-content.px-vx-noi .seat-template-col {
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Sơ đồ ghế trước, "Thông tin ghế" + chú thích sau (Vexere kết xuất ngược).
 * Đảo bằng `order` — `.seat-template-col` vốn là flex, không dời node.
 */
#vexereSearchWidget .steps-content.px-vx-noi .seat-template-col {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block: 2.5rem 1rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .tables-flex {
	order: 1;
}

/* Thẻ trắng quanh sơ đồ ghế (Figma _item 164 bề rộng, lề 16/24). */
#vexereSearchWidget .steps-content.px-vx-noi .seat-template {
	margin: 0 0 1.5rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .nl-coach {
	background: #fff !important;
	border: 0 !important;
	border-radius: 1rem !important;
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
	padding: 1rem 1.5rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .coach-container,
#vexereSearchWidget .steps-content.px-vx-noi .table-layout-sodoghe {
	background: transparent !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .seat-type-color {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: center;
	margin: 0 !important;
	max-width: 100%;
	order: 3;
	width: 40rem;
}

/* "Thông tin ghế" 16/24 — thiết kế có, Vexere không kết xuất. */
#vexereSearchWidget .steps-content.px-vx-noi .seat-type-color::before {
	color: var( --wp--preset--color--fg, #2f3037 );
	content: "Thông tin ghế";
	flex: 0 0 100%;
	font-size: var( --px-fs-strong, 16px );
	line-height: 1.5rem;
	padding-block-end: 0.5rem;
	text-align: center;
}

#vexereSearchWidget .steps-content.px-vx-noi .seat-type-color-item,
#vexereSearchWidget .steps-content.px-vx-noi .seat-type-info {
	align-items: center;
	display: flex;
	flex: none !important;
	gap: 0.75rem;
	margin: 0 !important;
	/* Vexere chia mỗi mục một phần trăm bề rộng — ba loại ghế gãy thành 2 hàng. */
	width: auto !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .seat-type-color-item-value-group-name,
#vexereSearchWidget .steps-content.px-vx-noi .seat-type-info-value {
	color: var( --wp--preset--color--fg, #2f3037 ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	font-weight: 400 !important;
	line-height: 1.5rem !important;
	white-space: nowrap;
}

#vexereSearchWidget .steps-content.px-vx-noi .seat-type-color-item-value-group-fare {
	color: var( --wp--preset--color--fg, #2f3037 ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	font-weight: 700 !important;
	line-height: 1.5rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .seat-type-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: center;
	margin: 0 !important;
	order: 4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BƯỚC 2 — hai thẻ Điểm đón / Điểm trả (Figma 126:72074, 690 × 650)
   ═══════════════════════════════════════════════════════════════════════════ */

#vexereSearchWidget .steps-content.px-vx-noi .nl-from-to-select,
#vexereSearchWidget .steps-content.px-vx-noi .pickup-transfer-container,
#vexereSearchWidget .steps-content.px-vx-noi .area-point-wrapper {
	box-sizing: border-box;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .area-point-wrapper {
	align-items: stretch;
	display: flex;
	gap: 1.25rem;
	justify-content: center;
}

/* Vexere kẻ một vạch dọc giữa hai cột — hai thẻ đã tách, bỏ vạch. */
#vexereSearchWidget .steps-content.px-vx-noi .area-point-wrapper > *:not( .from-container ):not( .to-container ) {
	display: none !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .from-container,
#vexereSearchWidget .steps-content.px-vx-noi .to-container {
	background: #fff;
	border: 0 !important;
	border-radius: 1rem;
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	margin: 0 !important;
	max-width: 43.125rem;
	min-height: 0;
	overflow: hidden;
	padding: 0 !important;
	width: auto !important;
}

/*
 * Tiêu đề thẻ: "Điểm đón" 20/28 đậm vừa, tên tỉnh 14/20 xám, kẻ dưới, cao 77.
 * Vexere ghi "Điểm đi"/"Điểm đến" và không có tên tỉnh — chữ thu về 0,
 * `::before` in nhãn thiết kế, `::after` in tỉnh lấy từ biến `--px-vx-tu`
 * (JS đặt từ tiêu đề trang).
 */
#vexereSearchWidget .steps-content.px-vx-noi .from-label,
#vexereSearchWidget .steps-content.px-vx-noi .to-label {
	border-block-end: 1px solid var( --wp--preset--color--line, #dee1e7 );
	display: flex;
	flex: none;
	flex-direction: column;
	font-size: 0 !important;
	gap: 0.25rem;
	margin: 0 !important;
	padding: 0.75rem 1rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .from-label::before,
#vexereSearchWidget .steps-content.px-vx-noi .to-label::before {
	color: var( --wp--preset--color--fg, #2f3037 );
	font-size: var( --px-fs-title, 18px );
	font-weight: 600;
	line-height: 1.75rem;
}

#vexereSearchWidget .steps-content.px-vx-noi .from-label::before {
	content: "Điểm đón";
}

#vexereSearchWidget .steps-content.px-vx-noi .to-label::before {
	content: "Điểm trả";
}

#vexereSearchWidget .steps-content.px-vx-noi .from-label::after,
#vexereSearchWidget .steps-content.px-vx-noi .to-label::after {
	color: var( --wp--preset--color--fg-muted, #5f5f74 );
	font-size: var( --px-fs-body, 13px );
	font-weight: 400;
	line-height: 1.25rem;
}

#vexereSearchWidget .steps-content.px-vx-noi .from-label::after {
	content: var( --px-vx-tu, "" );
}

#vexereSearchWidget .steps-content.px-vx-noi .to-label::after {
	content: var( --px-vx-den, "" );
}

/* Danh sách cuộn riêng trong từng thẻ. */
#vexereSearchWidget .steps-content.px-vx-noi .detail-address {
	flex: 1;
	margin: 0 !important;
	max-height: none !important;
	min-height: 0;
	overflow: auto !important;
	padding: 0 1rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .pickup-transfer-list-container,
#vexereSearchWidget .steps-content.px-vx-noi .pickup-transfer-list-container > div {
	margin: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .pickup-transfer-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

/* Mỗi dòng: ô tích 20 · cách 16 · giờ + tên bến, rồi ngày, ghi chú, địa chỉ. */
#vexereSearchWidget .steps-content.px-vx-noi .item-info {
	border-block-end: 1px solid var( --wp--preset--color--line, #dee1e7 );
	margin: 0 !important;
	padding: 1rem 0 !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .item-info > label {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	margin: 0 !important;
	width: 100%;
}

#vexereSearchWidget .steps-content.px-vx-noi .item-info input[type="radio"] {
	border-color: #b0b0b0 !important;
	height: 1.25rem !important;
	margin: 0.125rem 0 0 !important;
	width: 1.25rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .point-title,
#vexereSearchWidget .steps-content.px-vx-noi .point-title * {
	color: var( --wp--preset--color--fg, #2f3037 ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	font-weight: 600 !important;
	line-height: 1.5rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .point-title {
	flex: 1;
	min-width: 0;
}

/* Ngày dưới giờ ("15 th8"), thẳng cột với chữ. */
#vexereSearchWidget .steps-content.px-vx-noi .from-container .item-info > label::after,
#vexereSearchWidget .steps-content.px-vx-noi .to-container .item-info > label::after {
	color: var( --wp--preset--color--fg-muted, #5f5f74 );
	flex: 0 0 100%;
	font-size: var( --px-fs-body, 13px );
	font-weight: 500;
	line-height: 1.25rem;
	padding-inline-start: 2.25rem;
}

#vexereSearchWidget .steps-content.px-vx-noi .from-container .item-info > label::after {
	content: var( --px-vx-ngay-di, "" );
}

#vexereSearchWidget .steps-content.px-vx-noi .to-container .item-info > label::after {
	content: var( --px-vx-ngay-den, "" );
}

#vexereSearchWidget .steps-content.px-vx-noi .point-note,
#vexereSearchWidget .steps-content.px-vx-noi .full-address-row,
#vexereSearchWidget .steps-content.px-vx-noi .full-address-row * {
	color: var( --wp--preset--color--fg-muted, #5f5f74 ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	font-weight: 400 !important;
	line-height: 1.25rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .point-note,
#vexereSearchWidget .steps-content.px-vx-noi .full-address-row {
	margin: 0.25rem 0 0 !important;
	padding-inline-start: 2.25rem !important;
}

/* Thiết kế không có ghim trước địa chỉ; bỏ luôn dấu cách ` ` đi kèm ghim. */
#vexereSearchWidget .steps-content.px-vx-noi .full-address-row img {
	display: none !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .full-address-row > div {
	font-size: 0 !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .full-address-row .pickup-address {
	font-size: var( --px-fs-body, 13px ) !important;
}

/* Ô "Nhập điểm đón trả" hiện dưới dòng đang chọn: 320 × 44, nền xám nhạt. */
#vexereSearchWidget .steps-content.px-vx-noi .item-info input[type="text"],
#vexereSearchWidget .steps-content.px-vx-noi .item-info textarea {
	background: var( --wp--preset--color--surface, #f5f6f8 ) !important;
	border: 1px solid var( --wp--preset--color--line, #dee1e7 ) !important;
	border-radius: 0.5rem !important;
	box-sizing: border-box;
	font-size: var( --px-fs-body, 13px ) !important;
	height: 2.75rem;
	margin: 0.75rem 0 0 2.25rem !important;
	max-width: 20rem;
	padding: 0.75rem !important;
	width: calc( 100% - 2.25rem ) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BƯỚC 3 — thẻ "Thông tin liên hệ" (thiết kế màn 3)
   ═══════════════════════════════════════════════════════════════════════════ */

#vexereSearchWidget .steps-content.px-vx-noi .nl-customer-info-form {
	margin: 0 !important;
	padding: 0 !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .nl-customer-info-col {
	background: #fff !important;
	border-radius: 1rem;
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
	box-sizing: border-box;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .nl-customer-info-col::before {
	border-block-end: 1px solid var( --wp--preset--color--line, #dee1e7 );
	color: var( --wp--preset--color--fg, #2f3037 );
	content: "Thông tin liên hệ";
	display: block;
	font-size: var( --px-fs-title, 18px );
	font-weight: 600;
	line-height: 1.75rem;
	padding: 0.75rem 1rem;
}

/* Họ tên | Số điện thoại trên một hàng; Email và Ghi chú trải hết. */
#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	margin: 0 !important;
	padding: 1.5rem 1rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info > .form-group {
	margin: 0 !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info > .form-group:nth-child( n + 3 ) {
	grid-column: 1 / -1;
}

/*
 * Ô nhập kiểu thiết kế: khung viền bo 8, icon 24 bên trái, nhãn 12/18 nằm
 * TRONG khung phía trên giá trị 16/24. Dựng bằng khối bọc của Vexere
 * (`.customer-fullname` chứa nhãn + ô), không dời node.
 */
#vexereSearchWidget .steps-content.px-vx-noi .customer-fullname,
#vexereSearchWidget .steps-content.px-vx-noi .customer-phone,
#vexereSearchWidget .steps-content.px-vx-noi .customer-email,
#vexereSearchWidget .steps-content.px-vx-noi .customer-note {
	/* Vexere đẩy ô SĐT xuống bằng `margin-top: 16px` — hai ô cùng hàng lệch nhau. */
	margin: 0 !important;
	border: 1px solid var( --wp--preset--color--line, #dee1e7 );
	border-radius: 0.5rem;
	box-sizing: border-box;
	padding: 0.5rem 0.75rem 0.5rem 3rem !important;
	position: relative !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .customer-fullname:focus-within,
#vexereSearchWidget .steps-content.px-vx-noi .customer-phone:focus-within,
#vexereSearchWidget .steps-content.px-vx-noi .customer-email:focus-within,
#vexereSearchWidget .steps-content.px-vx-noi .customer-note:focus-within {
	border-color: var( --wp--preset--color--brand, #a61b16 );
}

#vexereSearchWidget .steps-content.px-vx-noi .customer-fullname::before,
#vexereSearchWidget .steps-content.px-vx-noi .customer-phone::before,
#vexereSearchWidget .steps-content.px-vx-noi .customer-email::before,
#vexereSearchWidget .steps-content.px-vx-noi .customer-note::before {
	background-color: #74748e;
	content: "";
	height: 1.5rem;
	inset-block-start: 1rem;
	inset-inline-start: 0.75rem;
	position: absolute;
	width: 1.5rem;
}

#vexereSearchWidget .steps-content.px-vx-noi .customer-fullname::before {
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='7.5' r='4.5' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.5 20.25c0-3.73 3.36-6.75 7.5-6.75s7.5 3.02 7.5 6.75' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='7.5' r='4.5' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.5 20.25c0-3.73 3.36-6.75 7.5-6.75s7.5 3.02 7.5 6.75' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

#vexereSearchWidget .steps-content.px-vx-noi .customer-phone::before {
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.25 -2.25 24 24' fill='none'%3E%3Cpath d='M5.51 2.09C4.99 1.37 4.08 1.33 3.56 1.88L1.99 3.53C1.65 3.88 1.48 4.28 1.5 4.68 1.58 6.19 2.23 9.63 6.11 13.71c4.06 4.28 7.81 4.4 9.24 4.26.28-.03.58-.19.86-.48l1.42-1.5c.61-.64.45-1.81-.37-2.28l-1.91-1.1c-.51-.3-1.11-.2-1.5.2l-.46.48s-1.05 1.1-3.9-1.9C6.64 8.39 7.68 7.29 7.68 7.29l.29-.3c.44-.47.51-1.26.09-1.86L5.51 2.09Z' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.25 -2.25 24 24' fill='none'%3E%3Cpath d='M5.51 2.09C4.99 1.37 4.08 1.33 3.56 1.88L1.99 3.53C1.65 3.88 1.48 4.28 1.5 4.68 1.58 6.19 2.23 9.63 6.11 13.71c4.06 4.28 7.81 4.4 9.24 4.26.28-.03.58-.19.86-.48l1.42-1.5c.61-.64.45-1.81-.37-2.28l-1.91-1.1c-.51-.3-1.11-.2-1.5.2l-.46.48s-1.05 1.1-3.9-1.9C6.64 8.39 7.68 7.29 7.68 7.29l.29-.3c.44-.47.51-1.26.09-1.86L5.51 2.09Z' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

#vexereSearchWidget .steps-content.px-vx-noi .customer-email::before {
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.25 -2.25 24 24' fill='none'%3E%3Cpath d='M4.75 5.75L8.53 8.27c1.34.9 3.1.9 4.44 0l3.78-2.52M4.75 18.75h12c2.21 0 4-1.79 4-4v-10c0-2.21-1.79-4-4-4h-12c-2.21 0-4 1.79-4 4v10c0 2.21 1.79 4 4 4Z' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.25 -2.25 24 24' fill='none'%3E%3Cpath d='M4.75 5.75L8.53 8.27c1.34.9 3.1.9 4.44 0l3.78-2.52M4.75 18.75h12c2.21 0 4-1.79 4-4v-10c0-2.21-1.79-4-4-4h-12c-2.21 0-4 1.79-4 4v10c0 2.21 1.79 4 4 4Z' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

#vexereSearchWidget .steps-content.px-vx-noi .customer-note::before {
	display: none;
}

#vexereSearchWidget .steps-content.px-vx-noi .customer-note {
	padding-inline-start: 0.75rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info .control-label {
	color: var( --wp--preset--color--fg-muted, #5f5f74 ) !important;
	font-size: var( --px-fs-label, 12px ) !important;
	font-weight: 400 !important;
	line-height: 1.125rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info .control-label .red {
	color: var( --wp--preset--color--brand, #a61b16 ) !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info .input-vxr {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #131316 !important;
	font-size: var( --px-fs-body, 13px ) !important;
	height: 1.5rem;
	line-height: 1.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info textarea.input-vxr {
	height: auto;
	min-height: 4.5rem;
	resize: vertical;
}

#vexereSearchWidget .steps-content.px-vx-noi .customer-note label {
	color: var( --wp--preset--color--fg-muted, #5f5f74 ) !important;
	font-size: var( --px-fs-label, 12px ) !important;
	line-height: 1.125rem !important;
	margin: 0 0 0.25rem !important;
}

#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info .error-ms {
	color: var( --wp--preset--color--error, #e23620 ) !important;
	font-size: var( --px-fs-label, 12px ) !important;
	margin: 0.25rem 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Radio / checkbox
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Ô chọn ở bước 2 là `<input type="radio">` THUẦN, class rỗng — luật
 * `.ant-radio-*` trượt hết. Thiết kế vẽ ô vuông bo 4, nền đỏ, tích trắng.
 * Chỉ áp trong hai cột điểm đón/trả: màn thanh toán dùng radio TRÒN.
 */
#vexereSearchWidget .from-container input[type="radio"],
#vexereSearchWidget .to-container input[type="radio"] {
	appearance: none;
	background: #fff;
	border: 1px solid #b0b0b0;
	border-radius: 0.25rem;
	cursor: pointer;
	display: inline-grid;
	flex: none;
	height: 1.25rem;
	place-content: center;
	width: 1.25rem;
}

#vexereSearchWidget .from-container input[type="radio"]:checked,
#vexereSearchWidget .to-container input[type="radio"]:checked {
	background: var( --wp--preset--color--brand, #a61b16 );
	border-color: var( --wp--preset--color--brand, #a61b16 );
}

#vexereSearchWidget .from-container input[type="radio"]:checked::before,
#vexereSearchWidget .to-container input[type="radio"]:checked::before {
	border-block-end: 2px solid #fff;
	border-inline-start: 2px solid #fff;
	content: "";
	height: 0.25rem;
	transform: rotate( -45deg ) translate( 1px, -1px );
	width: 0.5rem;
}

#vexereSearchWidget .from-container input[type="radio"]:focus-visible,
#vexereSearchWidget .to-container input[type="radio"]:focus-visible {
	outline: 2px solid var( --wp--preset--color--brand, #a61b16 );
	outline-offset: 2px;
}

#vexereSearchWidget input[type="radio"],
#vexereSearchWidget input[type="checkbox"] {
	accent-color: var( --wp--preset--color--brand, #a61b16 );
}

/* ── Màn hẹp ───────────────────────────────────────────────────────────── */

@media ( max-width: 60rem ) {

	.px-vx__khung {
		height: 92vh;
	}

	.px-vx__than,
	html.px-vx-b3 .px-vx__than {
		gap: 0.5rem;
		grid-template-columns: 1fr;
		grid-template-rows: 1.4fr 1fr;
		padding: 0.75rem;
	}

	html.px-vx-b2 .px-vx__than {
		grid-template-rows: 1fr;
	}

	.px-vx__buoc {
		height: 4.5rem;
	}

	/* Vexere chuyển dải bước sang dạng DỌC ở màn hẹp — ép lại hàng ngang. */
	#vexereSearchWidget .steps-header.px-vx-noi .ant-steps {
		flex-direction: row !important;
	}

	/*
	 * Thanh đáy màn hẹp: chỉ giá + nút. Dòng "N chỗ ngồi" và chữ "Quay lại"
	 * không đủ chỗ trên 390px (đo được cụm tràn khỏi mép trái, đè lên nút lùi).
	 */
	.px-vx__ghe {
		display: none;
	}

	.px-vx__lui {
		font-size: 0;
	}

	.px-vx__lui svg {
		height: 1.5rem;
		width: 1.5rem;
	}

	/* Dồn cụm sang phải, chừa mép trái cho nút lùi — căn giữa thì chạm nhau. */
	.px-vx__chan {
		justify-content: flex-end;
		padding-inline: 3rem 0.75rem;
	}

	#vexereSearchWidget .steps-footer.px-vx-noi .steps-footer-right {
		gap: 0.75rem;
	}

	/* Nhãn dài của thiết kế không vừa 390px cạnh giá — rút gọn ở màn hẹp. */
	html.px-vx-b1 #vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary::after,
	html.px-vx-b2 #vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary::after {
		content: "Tiếp tục";
	}

	/* Bước 3: nhường cả thân cho form; tóm tắt chuyến đã thấy ở bước trước. */
	html.px-vx-b3 .px-vx__than {
		grid-template-rows: 1fr;
	}

	html.px-vx-b3 .px-vx__cotphai {
		display: none;
	}

	/* Màn hẹp: bỏ chữ bước, chỉ còn vòng số và vạch ngắn. */
	#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item-title,
	#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item:nth-child( 3 ) .ant-steps-item-title::before {
		display: none;
	}

	#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item:not( :last-child ) {
		margin-inline-end: 4.5rem !important;
	}

	#vexereSearchWidget .steps-header.px-vx-noi .ant-steps-item:not( :last-child ) .ant-steps-item-container::after {
		inset-inline-start: calc( 100% + 0.75rem );
		width: 3rem;
	}

	#vexereSearchWidget .steps-content.px-vx-noi .area-point-wrapper {
		flex-direction: column;
	}

	#vexereSearchWidget .steps-content.px-vx-noi .detail-customer-info {
		grid-template-columns: 1fr;
	}

	.px-vx__dau {
		height: 4rem;
		padding-inline: 1rem;
	}

	.px-vx__lui {
		inset-inline-start: 0.25rem;
	}

	.px-vx__cum {
		gap: 0.75rem;
	}

	#vexereSearchWidget .steps-footer.px-vx-noi .ant-btn-primary {
		padding: 0 1.25rem !important;
	}

	#vexereSearchWidget .steps-footer.px-vx-noi .total-price,
	#vexereSearchWidget .steps-footer.px-vx-noi .total-price * {
		font-size: var( --px-fs-title, 18px ) !important;
	}
}