/**
 * Khoác áo Phúc Xuyên cho khung đặt vé Vexere.
 *
 * ĐỌC TRƯỚC KHI SỬA
 *
 * Tệp này đè kiểu lên markup của Vexere — thứ ta không kiểm soát. Ba nguyên tắc
 * để nó sống lâu:
 *
 * 1. CHỈ MÀU, BO GÓC, CỠ CHỮ, KHOẢNG ĐỆM. Không đổi `display`, `position`,
 *    `float` hay thứ tự. Bố cục là của Vexere; đổi bố cục là ngày họ cập nhật
 *    thì trang vỡ chứ không chỉ lệch màu.
 *
 * 2. BÁM LỚP CÓ NGHĨA (`route-item`, `nl-price`, `nl-vehicle-type`), tránh
 *    `:nth-child` và tránh lớp tiện ích của Ant Design ngoài những chỗ buộc
 *    phải dùng. Lớp có nghĩa gắn với chức năng nên ít đổi hơn.
 *
 * 3. `!important` ở đâu là vì Ant Design ghi kiểu inline hoặc có độ ưu tiên rất
 *    cao. Không phải lười — đã thử không có nó trước.
 *
 * MÀU GỐC CỦA VEXERE là xanh #0060C4, dùng cho nút, liên kết, thanh trượt và ô
 * chọn. Gần như toàn bộ việc ở đây là đổi màu ấy sang đỏ thương hiệu #A61B16.
 *
 * Biến `--wp--preset--*` lấy từ theme; giá trị dự phòng viết kèm để tệp vẫn
 * đúng nếu chạy ở nơi chưa có bảng màu.
 */

#vexereSearchWidget {
	--px-brand: var( --wp--preset--color--brand, #a61b16 );
	--px-brand-hover: var( --wp--preset--color--brand-hover, #b84945 );
	--px-fg: var( --wp--preset--color--fg, #2f3037 );
	--px-fg-muted: var( --wp--preset--color--fg-muted, #5f5f74 );
	--px-line: var( --wp--preset--color--line, #dee1e7 );
	--px-surface: var( --wp--preset--color--surface, #f5f6f8 );
	--px-radius-lg: var( --wp--custom--radius--lg, 1rem );
	--px-radius-md: var( --wp--custom--radius--md, 0.5rem );

	/*
	 * Nút và ô nhập một dòng bo VIÊN THUỐC, cùng họ với nút "Chọn chuyến" và ô
	 * tìm vé của site (nghiệm thu TKT-001: "để hết về radius pill"). Khung, thẻ
	 * và ô nhiều dòng giữ md/lg — bo viên thuốc cho khối cao là thành bầu dục.
	 */
	--px-radius-pill: var( --wp--custom--radius--pill, 62.4375rem );

	font-family: var( --wp--preset--font-family--montserrat, Montserrat, "Segoe UI", system-ui, sans-serif );
}

/*
 * FONT: ÉP MONTSERRAT, CÓ `!important` (nghiệm thu TKT-001: "trang này có làm
 * lại font đc ko, ở đây nó đang bị loạn hết cả lên").
 *
 * Luật `font-family` ngay phía trên KHÔNG ĐỦ — đã đo trên demo5, 28/28 nút chữ
 * trong khung vẫn ra "Google Sans Custom". Vexere đè bằng hai đường:
 *
 * - App tự chèn một thẻ `<style>` với `#vexereSearchWidget, .ant-tooltip …
 *   { font-family: "Google Sans Custom" }`. Cùng độ ưu tiên với luật của ta
 *   nhưng chèn SAU, nên thắng.
 * - Nhiều phần tử mang `style="font-family: Google Sans Custom"` viết thẳng
 *   (từ `customFont` trong config nhà xe). Style inline thắng mọi luật ngoài
 *   không có `!important`.
 *
 * Kết quả là trang đặt vé chạy HAI họ font — Montserrat của site bao quanh
 * Google Sans của Vexere — đúng cái "loạn" khách thấy.
 *
 * Trừ font icon: khung dùng Font Awesome (`fas fa-map-marker-alt`); ép chữ lên
 * đó là icon thành ô vuông. Icon của Ant Design là SVG, không vướng.
 *
 * Kèm các hộp nổi Ant Design mà React đặt thẳng vào `<body>` (portal) — chúng
 * nằm ngoài `#vexereSearchWidget` nên không ăn luật trên.
 */
#vexereSearchWidget,
#vexereSearchWidget *:not( .fa ):not( .fas ):not( .far ):not( .fab ):not( [class*="fa-"] ),
.ant-modal-root *:not( .fa ):not( .fas ):not( .far ):not( .fab ):not( [class*="fa-"] ),
.ant-tooltip *,
.ant-popover *,
.ant-select-dropdown *,
.ant-picker-dropdown *,
.ant-notification *,
.ant-message * {
	font-family: var( --wp--preset--font-family--montserrat, Montserrat, "Segoe UI", system-ui, sans-serif ) !important;
}

/* ── Nền ────────────────────────────────────────────────────────────────── */

/*
 * Vexere sơn hai cột kết quả bằng xám #f8f8fa của riêng họ. Trang đã có nền
 * xám #f5f6f8 của thiết kế phủ hết bề ngang, nên hai lớp xám gần giống nhau
 * chồng lên nhau tạo ra một mảng chữ nhật nhạt hơn ở giữa — nhìn kỹ mới thấy,
 * nhưng thấy rồi thì không bỏ qua được.
 *
 * Cho hai khối ấy trong suốt để chỉ còn một tông xám duy nhất, đúng như Figma.
 *
 * ĐI KÈM: `.px-trips__body { display: flow-root }` trong phucxuyen-core. Không
 * có nó thì nền xám của trang chỉ cao 72px vì cột của Vexere là float, và mọi
 * thứ ở đây thành vô nghĩa.
 */
#vexereSearchWidget .route-container,
#vexereSearchWidget .search-result-left,
#vexereSearchWidget .route-sorting-container {
	background-color: transparent !important;
}

/* ── Thẻ chuyến ──────────────────────────────────────────────────────────── */

#vexereSearchWidget .route-item {
	background: #fff;
	border: 1px solid var( --px-line );
	border-radius: var( --px-radius-lg );
	box-shadow: none;
	overflow: hidden;
}

#vexereSearchWidget .route-item + .route-item {
	margin-block-start: 1rem;
}

/* Ảnh xe bo góc nhỏ, không vuông góc như mặc định. */
#vexereSearchWidget .nl-route-detail-image-container img {
	border-radius: var( --px-radius-md );
}

/* Tên loại xe: đậm, màu chữ chính. */
#vexereSearchWidget .nl-vehicle-type {
	color: var( --px-fg );
}

/*
 * Giờ đi/đến và tên bến.
 *
 * Tên bến là thẻ `<a class="depart-station … black-text">` — Vexere đặt lớp
 * `black-text` chính vì nó là liên kết nhưng phải trông như chữ thường. Luật
 * tô đỏ liên kết ở dưới phải chừa nó ra, nếu không cả cột giờ/bến đỏ rực.
 */
#vexereSearchWidget .hour,
#vexereSearchWidget .depart-station,
#vexereSearchWidget .black-text {
	color: var( --px-fg ) !important;
	font-weight: 700;
}

#vexereSearchWidget .depart-station,
#vexereSearchWidget .black-text {
	font-weight: 400;
}

#vexereSearchWidget .duration,
#vexereSearchWidget .nl-from-to-content .dot {
	color: var( --px-fg-muted );
}

/* ── Giá vé ─────────────────────────────────────────────────────────────── */

/*
 * Thiết kế để giá màu chữ chính #2f3037 chứ KHÔNG đỏ — đo trực tiếp từ ảnh
 * Figma. Bản thân Vexere cũng để `h6.nl-price` màu chữ thường; cái xanh nằm ở
 * `.nl-fare` bọc ngoài, nên phải trung hoà thẻ cha, không thì chữ nào không
 * được `.nl-price` phủ sẽ lòi ra màu xanh.
 */
#vexereSearchWidget .nl-fare,
#vexereSearchWidget .nl-fare-info {
	color: var( --px-fg ) !important;
}

/*
 * CỠ CHỮ GIÁ CHỈ TĂNG Ở MÀN RỘNG.
 *
 * Trên mobile Vexere đặt khối giá tuyệt đối ở góc phải thẻ; đẩy lên 20px là nó
 * loang sang đè tên loại xe. Thiết kế cũng chỉ quy định 20px cho bản desktop.
 */
#vexereSearchWidget .nl-price {
	color: var( --px-fg ) !important;
	margin: 0;
}

@media ( min-width: 768px ) {

	#vexereSearchWidget .nl-price {
		font-size: 1.25rem;
		font-weight: 700;
	}

	#vexereSearchWidget .nl-vehicle-type {
		font-size: 1rem;
		font-weight: 700;
	}
}

/* Giá gạch bỏ (khi có khuyến mãi) nhạt hơn hẳn. */
#vexereSearchWidget .nl-price-original,
#vexereSearchWidget .nl-fare del,
#vexereSearchWidget .nl-fare s {
	color: var( --px-fg-muted ) !important;
	font-weight: 400;
}

#vexereSearchWidget .num-available-seats {
	color: var( --px-fg-muted );
	font-size: var( --px-fs-body, 13px );
}

/* ── Nút và liên kết: xanh Vexere → đỏ Phúc Xuyên ───────────────────────── */

/*
 * NÚT "CHỌN CHỖ" KHÔNG PHẢI THẺ <button>.
 *
 * Vexere dựng nó bằng `div.button-container` bọc `div.btn-label` — không có
 * `.ant-btn` nào cả, nên mọi luật bám `.ant-btn` đều trượt. Đã kiểm tra trực
 * tiếp trên DOM thật ở demo trước khi viết đoạn này.
 *
 * Nền đỏ phải đặt trên `.button-container` (chỗ có sẵn viền), còn chữ trắng
 * phải đặt trên `.btn-label` vì màu chữ nằm ở đó chứ không kế thừa.
 */
#vexereSearchWidget .nl-action .button-container {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	border-radius: var( --px-radius-pill ) !important;
	cursor: pointer;
}

#vexereSearchWidget .nl-action .btn-label {
	color: #fff !important;
	font-weight: 600;
}

#vexereSearchWidget .nl-action .button-container:hover {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
}

/* Nút Ant Design thật, nếu Vexere có dùng ở màn khác (chọn ghế, thanh toán). */
#vexereSearchWidget .ant-btn-primary {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	border-radius: var( --px-radius-pill ) !important;
	color: #fff !important;
	font-weight: 600;
	text-shadow: none;
}

#vexereSearchWidget .ant-btn-primary:hover {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	color: #fff !important;
}

/* Liên kết dạng chữ: "Thông tin chi tiết", "Xoá lọc"… */
#vexereSearchWidget .ant-btn-link,
#vexereSearchWidget .btn-detail,
#vexereSearchWidget a:not( .black-text ) {
	color: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-btn-link:hover,
#vexereSearchWidget .black-text:hover,
#vexereSearchWidget a:hover {
	color: var( --px-brand-hover ) !important;
	text-decoration: none !important;
}

/*
 * `hover-orange-border` là lớp của Vexere cho viền cam khi rê chuột. Cam không
 * có trong bảng màu Phúc Xuyên; đổi sang đỏ để cả trang chỉ còn một tông nhấn.
 */
#vexereSearchWidget .hover-orange-border:hover {
	border-color: var( --px-brand ) !important;
}

/* ── Bộ lọc bên trái ────────────────────────────────────────────────────── */

#vexereSearchWidget .ant-card,
#vexereSearchWidget .filter-container,
#vexereSearchWidget .search-filter {
	background: #fff;
	border: 1px solid var( --px-line );
	border-radius: var( --px-radius-lg );
}

/* Thanh trượt giá / giờ / số chỗ. */
#vexereSearchWidget .ant-slider-track {
	background-color: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-slider-handle {
	background-color: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-slider:hover .ant-slider-track {
	background-color: var( --px-brand-hover ) !important;
}

#vexereSearchWidget .ant-slider-rail {
	background-color: var( --px-line ) !important;
}

/* Ô đánh dấu chuyên mục / điểm đón trả. */
#vexereSearchWidget .ant-checkbox-checked .ant-checkbox-inner {
	background-color: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-checkbox:hover .ant-checkbox-inner,
#vexereSearchWidget .ant-checkbox-input:focus + .ant-checkbox-inner {
	border-color: var( --px-brand ) !important;
}

/* Ô nhập trong bộ lọc. */
#vexereSearchWidget .ant-input,
#vexereSearchWidget .ant-input-affix-wrapper,
#vexereSearchWidget .ant-select-selector {
	border-color: var( --px-line ) !important;
	border-radius: var( --px-radius-pill ) !important;
}

/* Ô ghi chú nhiều dòng của Vexere cũng mang `.ant-input` — giữ bo góc thường. */
#vexereSearchWidget textarea.ant-input {
	border-radius: var( --px-radius-md ) !important;
}

/*
 * Ô có nút dính liền (ô tìm "Nhập điểm đón/trả" ở bộ lọc: `.ant-input-group` =
 * ô nhập + nút kính lúp). Bo viên thuốc CẢ CỤM như một hình: ô nhập tròn đầu
 * trái, nút tròn đầu phải, chỗ giáp nhau thẳng. Bo riêng từng cái là ra một
 * viên thuốc dính một ô vuông.
 */
#vexereSearchWidget .ant-input-group > .ant-input:first-child {
	border-end-end-radius: 0 !important;
	border-start-end-radius: 0 !important;
}

#vexereSearchWidget .ant-input-group-addon {
	background: transparent !important;
	border-radius: 0 var( --px-radius-pill ) var( --px-radius-pill ) 0 !important;
}

#vexereSearchWidget .ant-input-group-addon .ant-btn {
	border-color: var( --px-line ) !important;
	border-radius: 0 var( --px-radius-pill ) var( --px-radius-pill ) 0 !important;
	color: var( --px-fg-muted ) !important;
}

#vexereSearchWidget .ant-input-group-addon .ant-btn:hover {
	border-color: var( --px-brand ) !important;
	color: var( --px-brand ) !important;
}

/*
 * Hộp gợi ý khi KHÔNG CÓ CHUYẾN ("Chọn lại các tiêu chí đặt vé / Liên hệ tổng
 * đài…") còn xanh Vexere: nền #E5EFFB, viền #99BDED, icon xanh.
 *
 * Lớp của hộp là tên băm của styled-components (`sc-hfNCTQ CjVvB`) — đổi mỗi
 * lần Vexere build lại, bám vào là tuần sau hỏng. Bám theo CẤU TRÚC: hộp nào
 * chứa `.instruction-icon` (tên lớp do người viết đặt, ổn định).
 */
#vexereSearchWidget div:has( > div > .instruction-icon ) {
	background-color: var( --wp--preset--color--brand-subtle, #f6e8e8 ) !important;
	border-color: color-mix( in srgb, var( --px-brand ) 35%, #fff ) !important;
	border-radius: var( --px-radius-lg ) !important;
}

/*
 * Mọi icon trong hộp, không riêng `.instruction-icon` — icon tai nghe ở dòng
 * "Liên hệ tổng đài" nằm ngoài lớp ấy. Chỉ đổi đúng thuộc tính icon đang có:
 * tô `fill` lên icon nét (hoặc `stroke` lên icon khối) là icon bị bôi đặc.
 */
#vexereSearchWidget div:has( > div > .instruction-icon ) svg {
	color: var( --px-brand ) !important;
}

#vexereSearchWidget div:has( > div > .instruction-icon ) svg [fill]:not( [fill="none"] ) {
	fill: var( --px-brand ) !important;
}

#vexereSearchWidget div:has( > div > .instruction-icon ) svg [stroke]:not( [stroke="none"] ) {
	stroke: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-input:focus,
#vexereSearchWidget .ant-input-affix-wrapper-focused,
#vexereSearchWidget .ant-select-focused .ant-select-selector {
	border-color: var( --px-brand ) !important;
	box-shadow: none !important;
}

/* ── Dải "Sắp xếp theo" ─────────────────────────────────────────────────── */

/*
 * Cũng không phải Ant Design: `.route-sorting-condition` là div thường, mục
 * đang chọn thêm lớp `.current-sorting` và được tô xanh #0060C4, bo 2px.
 */
#vexereSearchWidget .route-sorting-condition.current-sorting {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	border-radius: var( --px-radius-md ) !important;
	color: #fff !important;
}

#vexereSearchWidget .route-sorting-condition:not( .current-sorting ):hover {
	color: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
#vexereSearchWidget .ant-radio-button-wrapper-checked {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	color: #fff !important;
}

#vexereSearchWidget .ant-tabs-ink-bar {
	background: var( --px-brand ) !important;
}

/* ── Nút "Xem thêm" cuối danh sách ──────────────────────────────────────── */

#vexereSearchWidget .ant-btn-default:hover {
	border-color: var( --px-brand ) !important;
	color: var( --px-brand ) !important;
}

/* ── Vòng quay chờ ──────────────────────────────────────────────────────── */

#vexereSearchWidget .ant-spin-dot-item {
	background-color: var( --px-brand ) !important;
}

/* ── Bước chọn ghế (mở ra ngay trong thẻ chuyến) ────────────────────────── */

/*
 * Bấm "Chọn chỗ" thì Vexere bung phần chọn ghế NGAY TRONG thẻ, không chuyển
 * trang. Nghĩa là mọi thứ ở đây vẫn nằm trong #vexereSearchWidget — kể cả hộp
 * thoại "Quy định nhà xe", vốn là `.ant-modal` nhưng được gắn vào trong widget
 * chứ không vào <body> như Ant Design mặc định.
 */

/* Dải bước 1–2–3. Ant Design đánh dấu bước đang chạy bằng `-process`. */
#vexereSearchWidget .ant-steps-item-process .ant-steps-item-icon,
#vexereSearchWidget .ant-steps-item-finish .ant-steps-item-icon {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-steps-item-process .ant-steps-item-title,
#vexereSearchWidget .ant-steps-item-finish .ant-steps-item-title {
	color: var( --px-brand ) !important;
}

/*
 * SỐ VÀ DẤU TÍCH PHẢI TRẮNG, VÌ NỀN VÒNG TRÒN ĐÃ ĐỎ.
 *
 * Ant Design mặc định để bước đã xong là nền TRẮNG, viền xanh, dấu tích xanh.
 * Tôi tô nền đỏ nhưng lại tô luôn `.ant-steps-icon` màu đỏ — thành đỏ trên đỏ,
 * dấu tích biến mất hẳn. Nền đặc thì icon phải là màu chữ ngược lại.
 */
#vexereSearchWidget .ant-steps-item-process .ant-steps-icon,
#vexereSearchWidget .ant-steps-item-finish .ant-steps-icon,
#vexereSearchWidget .ant-steps-item-finish .ant-steps-icon .anticon,
#vexereSearchWidget .ant-steps-item-finish .anticon-check {
	color: #fff !important;
}

/*
 * Đường nối giữa các bước. Ant Design vẽ nó bằng `::after` của `.ant-steps-item-tail`,
 * và tô xanh cho bước đã xong — không bắt riêng thì còn đúng một vạch xanh nằm
 * giữa hai vòng tròn đỏ.
 */
/*
 * VẠCH NHÌN THẤY LÀ `.ant-steps-item-title::after`, KHÔNG PHẢI `-tail::after`.
 *
 * Ant Design có hai chỗ vẽ đường nối; ở biến thể Vexere dùng, `-tail` bị ẩn và
 * vạch thật nằm trên `::after` của TIÊU ĐỀ bước. Tôi sửa `-tail` trước và
 * tưởng xong, vì phép quét màu của tôi đọc `getComputedStyle(e)` của phần tử
 * thật — **giả tử không nằm trong `querySelectorAll`, nên không bao giờ lộ ra**.
 * Chỉ ảnh chụp mới thấy. Từ đó quét phải đọc cả `::before`/`::after`.
 */
#vexereSearchWidget .ant-steps-item-finish .ant-steps-item-title::after,
#vexereSearchWidget .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after,
#vexereSearchWidget .ant-steps-item-finish .ant-steps-item-tail::after {
	background-color: var( --px-brand ) !important;
}

/* Tổng tiền ở chân bước chọn ghế — chỗ duy nhất giá được tô màu nhấn. */
#vexereSearchWidget .total-price {
	color: var( --px-brand ) !important;
	font-weight: 700;
}

/* Mũi tên xổ trong các ô chọn của bước đặt vé. */
#vexereSearchWidget .anticon-down,
#vexereSearchWidget .anticon-up {
	color: var( --px-brand ) !important;
}

/*
 * Nút "Tôi đã đọc và đồng ý" của hộp thoại quy định nhà xe.
 *
 * Vexere để nó là `.ant-btn-default` nhưng lại tô nền xanh, nên chữ giữ màu
 * đen mặc định của Ant — nền xanh chữ đen, tương phản kém. Ở đây tô lại nền đỏ
 * VÀ ép chữ trắng, coi như sửa luôn lỗi đó.
 */
#vexereSearchWidget .operator-notification-info-button-close,
#vexereSearchWidget .operator-notification-container .ant-btn {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	color: #fff !important;
	font-weight: 600;
}

#vexereSearchWidget .operator-notification-info-button-close:hover,
#vexereSearchWidget .operator-notification-container .ant-btn:hover {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	color: #fff !important;
}

#vexereSearchWidget .ant-modal-content {
	border-radius: var( --px-radius-lg ) !important;
}

/* ── Bước 2: chọn điểm đón trả ──────────────────────────────────────────── */

/*
 * Lần quét màu xanh trước chỉ chạy tới bước 1, nên sót cả bước này. Ở đây
 * Vexere dùng radio của Ant Design cho danh sách điểm đón/trả, và tô xanh cả
 * chấm radio lẫn tên bến đang chọn.
 */
#vexereSearchWidget .ant-radio-checked .ant-radio-inner {
	border-color: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-radio-inner::after {
	background-color: var( --px-brand ) !important;
}

#vexereSearchWidget .ant-radio-wrapper:hover .ant-radio-inner,
#vexereSearchWidget .ant-radio-input:focus + .ant-radio-inner {
	border-color: var( --px-brand ) !important;
}

/*
 * Tên bến của mục đang chọn, và mã ghế đã chọn ở bước 1.
 *
 * `.blue-text` là lớp Vexere tự đặt cho "chữ màu nhấn" — đúng chỗ để đổi, và
 * là cặp đối của `.black-text` ở trên (thứ phải giữ màu chữ thường).
 */
#vexereSearchWidget .ant-radio-wrapper-checked,
#vexereSearchWidget .ant-radio-wrapper-checked span,
#vexereSearchWidget .blue-text,
#vexereSearchWidget .blue-text b,
#vexereSearchWidget .list-seat-code {
	color: var( --px-brand ) !important;
}

/* ── Hộp "Quy Định Nhà Xe" phải nằm TRÊN tấm trượt ─────────────────────── */

/*
 * Hộp thoại quy định là `.ant-modal` với `z-index: 2000` mặc định của Ant, còn
 * tấm trượt đặt vé của mình ở 9998 — nên nó chìm hẳn xuống dưới, khách chỉ
 * thấy nửa trên thò ra sau lớp nền mờ và không bấm được nút đồng ý.
 *
 * Đây là hộp CHẶN: nó phải nằm trên cùng, kể cả trên khung đặt vé.
 *
 * Lỗi này không lộ ra trong mọi lần thử trước vì lần nào tôi cũng bấm "đã đọc
 * và đồng ý" bằng JS ngay khi nó hiện, để đi tiếp cho nhanh.
 */
#vexereSearchWidget .ant-modal-root,
#vexereSearchWidget .ant-modal-wrap,
#vexereSearchWidget .ant-modal-mask {
	z-index: 10050 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Màn thanh toán (/dopayment) — theo screenshot/4. Thanh toán.png

   Tên lớp đo trên DOM thật của một giao dịch thật, không suy từ tên.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Đồng hồ đếm ngược: thẻ trắng bo góc, số giờ là màu nhấn. */
#vexereSearchWidget .countdown-timer {
	background: #fff;
	border-radius: var( --px-radius-lg );
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
	padding: 1rem;
}

#vexereSearchWidget .time-section-countdown {
	color: var( --px-brand ) !important;
	font-size: 1.25rem;
	font-weight: 700;
}

/* Tiêu đề các khối. */
#vexereSearchWidget .payment-container-label,
#vexereSearchWidget .coupons-title,
#vexereSearchWidget .trip-info-label {
	color: var( --px-fg );
	font-size: var( --wp--preset--font-size--body-lg, 1.125rem );
	font-weight: 700;
}

/* Danh sách hình thức thanh toán và các khối cột phải: mỗi khối một thẻ trắng. */
#vexereSearchWidget .payment-panel-group,
#vexereSearchWidget .coupons-container,
#vexereSearchWidget .fare-detail-container,
#vexereSearchWidget .ticket-info-container {
	background: #fff;
	border-radius: var( --px-radius-lg );
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
	padding: 1rem;
}

#vexereSearchWidget .payment-method-container + .payment-method-container {
	border-block-start: 1px solid var( --px-line );
	padding-block-start: 0.75rem;
}

/*
 * NÚT "TÔI ĐÃ CHUYỂN KHOẢN" ĐANG MÀU VÀNG #FFD700, CHỮ XÁM.
 *
 * Vàng không có trong bảng màu Phúc Xuyên, và chữ xám trên vàng thì tương phản
 * kém. Đây là nút cuối cùng của cả luồng đặt vé — phải là màu nhấn, chữ trắng.
 */
#vexereSearchWidget .booking-btn.made-a-transfer {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	border-radius: var( --px-radius-pill ) !important;
	color: #fff !important;
	font-weight: 600;
}

#vexereSearchWidget .booking-btn.made-a-transfer:hover {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	color: #fff !important;
}

/* "Chuyển khoản sau": nút phụ, viền và chữ màu nhấn. */
#vexereSearchWidget .booking-btn.transfer-later {
	background: #fff !important;
	border-color: var( --px-brand ) !important;
	border-radius: var( --px-radius-pill ) !important;
	color: var( --px-brand ) !important;
	font-weight: 600;
}

#vexereSearchWidget .booking-btn.transfer-later:hover {
	background: var( --wp--preset--color--brand-subtle, #f6e8e8 ) !important;
	border-color: var( --px-brand ) !important;
	color: var( --px-brand ) !important;
}

/* Nút "Áp dụng" mã giảm giá. */
#vexereSearchWidget .coupons-container .ant-btn {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	border-radius: var( --px-radius-pill ) !important;
	color: #fff !important;
}

/* Nhãn nhóm hành khách. */
#vexereSearchWidget .group-title {
	color: var( --px-brand ) !important;
}

/* Số tiền phải trả và tổng tiền vé. */
#vexereSearchWidget .summary-of-fare-container,
#vexereSearchWidget .payment-info-container {
	font-size: var( --wp--preset--font-size--body, 1rem );
}

/*
 * Ô mã giảm giá tràn khỏi thẻ.
 *
 * `.coupon-input-container` rộng 294px trong khi thẻ cha chỉ 261px, nên nút
 * "Áp dụng" thò ra ngoài và bị cắt mất chữ. Lỗi này có sẵn của Vexere — chữ
 * trắng trên nền xanh cũng đã bị cắt — nhưng nền đỏ làm nó lộ hẳn, nên chữa
 * luôn. Chỉ ràng bề rộng, không đổi bố cục.
 */
#vexereSearchWidget .coupons-content,
#vexereSearchWidget .coupon-input-container,
#vexereSearchWidget .coupon-input-container .input-container {
	max-width: 100%;
	min-width: 0;
}

#vexereSearchWidget .coupons-container .ant-btn {
	flex: none;
	padding-inline: 0.75rem;
	white-space: nowrap;
}

/* Vexere ràng bo góc 4px cho khối này, phải ép mới thắng. */
#vexereSearchWidget .payment-panel-group {
	border-radius: var( --px-radius-lg ) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Màn trạng thái sau đặt vé (/bookingsuccess, /paymentsuccess, /booking)

   Tên lớp lấy từ DOM thật của một mã đặt chỗ trên production, và từ chính
   bundle `app.proWNX2.0.js` cho những trạng thái chưa dựng lại được.

   LƯU Ý VỀ BỐ CỤC: Vexere dựng HAI CỘT (trái 830 trạng thái + hành động, phải
   356 thông tin thanh toán và chuyến đi). Thiết kế `screenshot/5` vẽ MỘT thẻ
   căn giữa. Ở đây chỉ khoác màu và bo góc; gộp hai cột thành một là đổi bố cục,
   chưa làm cho tới khi chốt với designer.
   ═══════════════════════════════════════════════════════════════════════════ */

#vexereSearchWidget .booking-success-confirm-title {
	background: transparent !important;
	color: var( --px-fg );
	font-size: var( --wp--preset--font-size--h-3, 1.25rem );
	font-weight: 700;
}

/* Hai cột nội dung, mỗi khối là một thẻ trắng như phần còn lại của luồng. */
#vexereSearchWidget .cancel-ticket-body,
#vexereSearchWidget .booking-success-checking,
#vexereSearchWidget .booking-success-payment-step-container,
#vexereSearchWidget .left-container > .white-bg {
	background: #fff !important;
	border-radius: var( --px-radius-lg );
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
	padding: 1rem;
}

#vexereSearchWidget .booking-success-notice-title,
#vexereSearchWidget .note-title {
	color: var( --px-fg );
	font-weight: 700;
}

#vexereSearchWidget .note-row,
#vexereSearchWidget .booking-success-payment-step {
	color: var( --px-fg-muted );
}

/* Vạch nối các bước hướng dẫn chuyển khoản. */
#vexereSearchWidget .booking-success-checking-line {
	background-color: var( --px-brand ) !important;
}

/* Hai nút cuối: "Về trang chủ" và "Đặt khứ hồi". */
#vexereSearchWidget .homepage-btn .ant-btn,
#vexereSearchWidget .book-return-container .ant-btn {
	border-radius: var( --px-radius-pill ) !important;
	font-weight: 600;
}

#vexereSearchWidget .homepage-btn .ant-btn {
	background: var( --px-brand ) !important;
	border-color: var( --px-brand ) !important;
	color: #fff !important;
}

#vexereSearchWidget .book-return-container .ant-btn {
	background: #fff !important;
	border-color: var( --px-brand ) !important;
	color: var( --px-brand ) !important;
}

/*
 * Vé đã huỷ: Vexere để tiêu đề màu mặc định. Thiết kế có token `error` riêng
 * (#e23620) — dùng đúng token thay vì để nó lẫn với chữ thường.
 */
#vexereSearchWidget .canceled-ticket-title {
	color: var( --wp--preset--color--error, #e23620 ) !important;
	font-weight: 700;
}

/* ── Trạng thái ĐẶT CHỖ THÀNH CÔNG (đo trên giao dịch thật) ─────────────── */

/*
 * Cấu trúc thật, khác hẳn trạng thái "vé đã huỷ":
 *
 *   .booking-success-notice-title   ← icon tròn + "Đặt chỗ thành công"
 *   .white-bg.booking-success-body
 *     .payment-instruction          ← hướng dẫn chuyển khoản + mã QR
 *   .bottom-actions-container
 *     .cancel-ticket-button-container + .book-return-container
 */
#vexereSearchWidget .booking-success-notice-title {
	align-items: center;
	color: var( --px-fg );
	font-size: var( --wp--preset--font-size--h-3, 1.25rem );
	font-weight: 700;
	gap: 0.5rem;
}

/* Vòng tròn tích: dùng token `success` của thiết kế, không để màu mặc định. */
#vexereSearchWidget .booking-success-notice-title .anticon-check-circle {
	color: var( --wp--preset--color--success, #019a64 ) !important;
}

#vexereSearchWidget .booking-success-body {
	background: #fff !important;
	border-radius: var( --px-radius-lg );
	box-shadow: 0 1px 3px rgb( 18 26 43 / 0.08 );
}

/*
 * "Hướng dẫn thanh toán" đang là xanh đậm #144299 của Vexere.
 *
 * Màn này có tới BỐN sắc xanh khác nhau — #144299 tiêu đề, #2474e5 các liên kết
 * ("Tự nhập thông tin", "Sao chép liên kết", "Tạo yêu cầu"), #2f80ed ("Xem tất
 * cả") và #8ebbf5 viền khung QR. Phép quét theo danh sách mã màu cứng của tôi
 * bỏ sót hết; phải quét theo KÊNH MÀU (B trội hơn R) mới lộ ra.
 */
#vexereSearchWidget .payment-instruction-title {
	color: var( --px-brand ) !important;
	font-weight: 700;
}

/* Hai nút cuối màn: "Huỷ vé" và nút phụ. */
#vexereSearchWidget .cancel-ticket-button-container .ant-btn {
	background: #fff !important;
	border-color: var( --px-brand ) !important;
	border-radius: var( --px-radius-pill ) !important;
	color: var( --px-brand ) !important;
	font-weight: 600;
}

/*
 * CÒN LẠI, CHƯA LÀM ĐƯỢC: bốn đoạn chữ xanh trong khối hướng dẫn nằm trong
 * những `<div>` KHÔNG CÓ CLASS, nên không có chỗ bám. Mã đặt chỗ dùng để dò đã
 * hết hạn ngay sau đó nên chưa kịp lấy đường dẫn của chúng. Cần một giao dịch
 * còn hạn nữa; đừng đoán bằng `:nth-child`.
 *
 * Ảnh minh hoạ của Vexere là `route-no-schedule.png` từ CDN của họ. Thiết kế có
 * hình riêng (`success 1`, đã tải về `phucxuyen-core/assets/img/`), nhưng thay
 * `src` là sửa DOM React — để lại cho tới khi chốt cách làm.
 */

/*
 * Ô nút rỗng cạnh "Huỷ vé".
 *
 * `.book-return-container` ("Đặt khứ hồi") LUÔN được kết xuất, nhưng ở một số
 * trạng thái Vexere để nhãn rỗng — ra một khung viền trắng không chữ, trông
 * như lỗi dựng. Không phải lỗi của mình, nhưng khách nhìn vào thì vẫn là lỗi.
 *
 * `:has( .ant-btn:empty )` chỉ ẩn khi nút THẬT SỰ không có nội dung. Vexere
 * điền nhãn vào lúc nào thì nút tự hiện lại — không cần sửa gì thêm, và cũng
 * không cần đụng vào DOM.
 */
#vexereSearchWidget .book-return-container:has( .ant-btn:empty ),
#vexereSearchWidget .book-return-container:has( .ant-btn > span:empty:only-child ) {
	display: none;
}

/*
 * VEXERE ĐẶT MÀU NỀN BẰNG STYLE INLINE trên các nút này —
 * `style="background-color: rgb(255, 199, ...)"`, một sắc vàng. Style inline
 * thắng mọi luật ngoài, nên `!important` ở đây là bắt buộc chứ không phải lười.
 */
#vexereSearchWidget .homepage-btn .ant-btn,
#vexereSearchWidget .book-return-container .ant-btn {
	text-transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NGHIỆM THU TKT-003 — "từ trang đặt vé đến hết flow vé là nó cứ bị lung tung
   loạn hết lên về UI", "font size mỗi chỗ một kiểu"

   ĐO TRƯỚC KHI SỬA (demo5, 16/9/2026): trang danh sách chuyến có 8 cặp cỡ/độ
   đậm khác nhau (10 · 14 · 16 · 17 · 20px), trang trạng thái vé có 14 cặp
   (12 · 14 · 15 · 16 · 18 · 20 · 22px) — mỗi khối Vexere tự đặt một cỡ.

   MỘT THANG DUY NHẤT, khớp thang của site sau TKT-002:
     12px  nhãn phụ   (Thông tin toàn chuyến, Họ tên, 2h30')
     13px  chữ thân   (tên bến, điều kiện lọc, giá trị, nút phụ)
     16px  nhấn trong thẻ (giờ đi/đến, loại xe)
     18px  tiêu đề khối và giá  (Bộ lọc tìm kiếm, Thông tin thanh toán, Từ 320.000 đ)

   CÁCH LÀM: đặt nền 13px cho MỌI phần tử có chữ trong từng vùng, rồi nâng
   riêng mấy lớp tiêu đề. Liệt kê từng lớp một thì Vexere thêm một dòng mới là
   lòi ra một cỡ lạ; đặt nền thì dòng mới tự về 13px. `!important` vì Vexere đặt
   cỡ bằng style inline ở nhiều chỗ (nút trạng thái: `font-size: 16px`).

   Chừa icon font (Font Awesome) và chấm tròn `.dot` — ép cỡ chữ lên icon là
   icon phình to.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * TKT-004 mục 21 ("các trang trong phần đặt vé, chỉnh lại font chữ + size đồng
 * bộ với toàn trang"): khai ở `:root` chứ không chỉ trong widget, vì thanh
 * "Kết quả · Sắp xếp theo" và hộp chọn ghế `.px-vx__*` nằm NGOÀI widget. Khối
 * dàn theo Figma ở dưới (trang danh sách chuyến, màn thanh toán, vexere-modal.css)
 * từng viết cứng 14/16/20/24px và đè lên thang này — đo demo5 ngày 25/9/2026:
 * tên bến 16px, giá 24px, nhãn lọc 14px. Nay mọi cỡ ở đó đều gọi bốn biến này.
 */
:root,
#vexereSearchWidget {
	--px-fs-label: 12px;
	--px-fs-body: 13px;
	--px-fs-strong: 16px;
	--px-fs-title: 18px;
}

/* ── Nền 13px ───────────────────────────────────────────────────────────── */

#vexereSearchWidget .search-result-left :where( *:not( [class*="fa"] ):not( .dot ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ),
#vexereSearchWidget .route-sorting-container :where( *:not( [class*="fa"] ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ),
#vexereSearchWidget .route-item :where( *:not( [class*="fa"] ):not( .dot ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ),
#vexereSearchWidget .payment-container :where( *:not( [class*="fa"] ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ),
#vexereSearchWidget .countdown-timer :where( *:not( [class*="fa"] ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ),
#vexereSearchWidget .ticket-info-wrapper :where( *:not( [class*="fa"] ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ),
#vexereSearchWidget .booking-success-wrapper :where( *:not( [class*="fa"] ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ),
#vexereSearchWidget .right-container :where( *:not( [class*="fa"] ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ),
#vexereSearchWidget .left-container :where( *:not( [class*="fa"] ):not( svg ):not( path ):not( .ant-steps-item-icon ):not( .ant-steps-icon ) ) {
	font-size: var( --px-fs-body ) !important;
	line-height: 1.5;
}

/* ── 12px: nhãn phụ ─────────────────────────────────────────────────────── */

#vexereSearchWidget .info-label,
#vexereSearchWidget .duration,
#vexereSearchWidget .filter-group-current-values *,
#vexereSearchWidget .stage-trip,
#vexereSearchWidget .stage-trip *,
#vexereSearchWidget .group-title,
#vexereSearchWidget .canceled {
	font-size: var( --px-fs-label ) !important;
}

/* ── 16px: nhấn trong thẻ chuyến ────────────────────────────────────────── */

#vexereSearchWidget .route-item .hour,
#vexereSearchWidget .route-item .nl-vehicle-type,
#vexereSearchWidget .fare-value,
#vexereSearchWidget .time-section-countdown {
	font-size: var( --px-fs-strong ) !important;
	font-weight: 700 !important;
}

/* ── 18px: tiêu đề khối và giá ──────────────────────────────────────────── */

#vexereSearchWidget .route-filters-top > div:first-child,
#vexereSearchWidget .trip-info-label,
#vexereSearchWidget .payment-container-label,
#vexereSearchWidget .coupons-title,
#vexereSearchWidget .booking-success-confirm-title,
#vexereSearchWidget .booking-success-notice-title,
#vexereSearchWidget .canceled-ticket-title,
#vexereSearchWidget .payment-instruction-title,
#vexereSearchWidget .route-item .nl-price,
#vexereSearchWidget .route-item .nl-price * {
	font-size: var( --px-fs-title ) !important;
	font-weight: 700 !important;
	line-height: 1.4;
}

/* Nhãn "Đã hủy" nằm TRONG `.trip-info-label` — giữ cỡ nhãn phụ. */
#vexereSearchWidget .trip-info-label .canceled {
	font-size: var( --px-fs-label ) !important;
}

/* Tiêu đề nhóm lọc và nhãn "Sắp xếp theo": 13px đậm. */
#vexereSearchWidget .filter-group-title,
#vexereSearchWidget .route-sorting-label {
	color: var( --px-fg ) !important;
	font-weight: 700 !important;
}

/* ── Nút ────────────────────────────────────────────────────────────────── */

/*
 * "Thông tin chi tiết" đang 17px — to hơn cả tên xe. Về 13px như mọi liên kết
 * phụ; "Chọn chỗ" 13px đậm, cao 36px.
 */
#vexereSearchWidget .route-item .btn-label {
	font-weight: 600 !important;
	padding-inline: 1rem;
}

#vexereSearchWidget .nl-action .button-container {
	align-items: center;
	display: inline-flex;
	min-height: 2.25rem;
}

/*
 * NÚT "ĐẶT KHỨ HỒI" RỖNG CHỮ — nguyên nhân thật (ảnh 3 của khách).
 *
 * Nhãn KHÔNG rỗng: DOM có `<span>Đặt khứ hồi</span>`. Nút là `.ant-btn-primary`
 * nên luật chung "nút primary chữ trắng" ở trên tô `<span>` bên trong thành
 * TRẮNG, trong khi nút này mình lại cho nền trắng viền đỏ → trắng trên trắng.
 * Bản trước đoán là "Vexere để nhãn rỗng" và viết luật ẩn nút khi `:empty` —
 * luật ấy không bao giờ khớp, nên khung trắng vẫn nằm đó. Đo lại bằng
 * `getComputedStyle` của `<span>` mới ra: `color: rgb(255, 255, 255)`.
 *
 * Chữa: nút phụ nền trắng thì MỌI con của nó ăn màu đỏ.
 */
#vexereSearchWidget .book-return-container .ant-btn,
#vexereSearchWidget .book-return-container .ant-btn *,
#vexereSearchWidget .cancel-ticket-button-container .ant-btn,
#vexereSearchWidget .cancel-ticket-button-container .ant-btn *,
#vexereSearchWidget .booking-btn.transfer-later,
#vexereSearchWidget .booking-btn.transfer-later * {
	color: var( --px-brand ) !important;
}

#vexereSearchWidget .book-return-container .ant-btn:hover,
#vexereSearchWidget .cancel-ticket-button-container .ant-btn:hover {
	background: var( --px-brand ) !important;
}

#vexereSearchWidget .book-return-container .ant-btn:hover *,
#vexereSearchWidget .cancel-ticket-button-container .ant-btn:hover * {
	color: #fff !important;
}

/* Bốn nút cuối luồng: cùng cỡ chữ, cùng chiều cao 44px, không viết hoa. */
#vexereSearchWidget .homepage-btn .ant-btn,
#vexereSearchWidget .book-return-container .ant-btn,
#vexereSearchWidget .cancel-ticket-button-container .ant-btn,
#vexereSearchWidget .booking-btn {
	font-size: 14px !important;
	font-weight: 600 !important;
	height: 2.75rem !important;
	text-transform: none !important;
}

#vexereSearchWidget .homepage-btn .ant-btn *,
#vexereSearchWidget .book-return-container .ant-btn *,
#vexereSearchWidget .cancel-ticket-button-container .ant-btn *,
#vexereSearchWidget .booking-btn * {
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* "Xem thêm" cuối danh sách chuyến còn xanh #2f80ed của Vexere. */
#vexereSearchWidget .load-more-route-item,
#vexereSearchWidget .load-more-route-item * {
	color: var( --px-brand ) !important;
	font-size: var( --px-fs-body ) !important;
	font-weight: 600 !important;
}

#vexereSearchWidget .load-more-route-item {
	border-color: var( --px-brand ) !important;
	border-radius: var( --px-radius-pill ) !important;
	height: 2.75rem !important;
}

#vexereSearchWidget .load-more-route-item:hover {
	background: var( --px-brand ) !important;
}

#vexereSearchWidget .load-more-route-item:hover * {
	color: #fff !important;
}

/* ── "Bộ lọc tìm kiếm" và "Sắp xếp theo" lệch nhau (ảnh 4) ──────────────── */

/*
 * Đo: dải sắp xếp cao 42px, tâm ở y=267; dòng tiêu đề bộ lọc cao 25px, tâm ở
 * y=278 — lệch 11px, nhìn là thấy. Cho dòng bộ lọc cao đúng 42px và canh giữa
 * theo chiều dọc; hai khối cùng mép trên nên tâm trùng nhau.
 */
/*
 * Nguyên nhân gốc của độ lệch: cột trái `.search-result-left` có sẵn
 * `padding-top: 20px`, cột phải thì không — hai cột cùng mép trên (y=246)
 * nhưng dòng tiêu đề bộ lọc bị đẩy xuống 20px.
 */
#vexereSearchWidget .search-result-left {
	padding-block-start: 0 !important;
}

#vexereSearchWidget .route-filters-top {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-block: 0 0.75rem !important;
	min-height: 2.625rem;
	padding-block: 0 !important;
}

#vexereSearchWidget .route-sorting-container {
	align-items: center;
	margin-block: 0 0.75rem !important;
	min-height: 2.625rem;
	padding-block: 0 !important;
}

#vexereSearchWidget .route-sorting-condition {
	align-items: center;
	border-radius: var( --px-radius-pill ) !important;
	display: inline-flex;
	min-height: 2rem;
	padding-inline: 0.875rem !important;
}

/* ── Cột thông tin thanh toán xuống dòng linh tinh (ảnh 2, ảnh 5) ────────── */

/*
 * Mỗi `.row` là nhãn trái / giá trị phải, Vexere chia đôi bề ngang. Cột phải
 * chỉ 356px nên "Cần thanh toán trước", "Chưa thanh toán", "Tổng tiền vé" đều
 * gãy làm hai dòng ở cỡ 16px. Về 13px, nhãn KHÔNG xuống dòng, giá trị lấy phần
 * còn lại và canh phải — xuống dòng (nếu có) chỉ xảy ra ở giá trị dài như tên
 * phương thức thanh toán.
 */
#vexereSearchWidget .payment-info-container .row {
	align-items: baseline;
	display: flex !important;
	gap: 1rem;
	justify-content: space-between;
	padding-block: 0.25rem;
}

#vexereSearchWidget .payment-info-container .row > div {
	width: auto !important;
}

#vexereSearchWidget .payment-info-container .row > div:first-child {
	color: var( --px-fg-muted );
	flex: none;
	white-space: nowrap;
}

#vexereSearchWidget .payment-info-container .row > .right {
	flex: 1 1 auto;
	text-align: end;
}

#vexereSearchWidget .summary-of-fare-container .info-label {
	color: var( --px-fg ) !important;
	font-size: var( --px-fs-body ) !important;
	font-weight: 700 !important;
	white-space: nowrap;
}

#vexereSearchWidget .summary-of-fare-container .fare-value {
	font-size: var( --px-fs-strong ) !important;
}

#vexereSearchWidget .summary-of-fare-container .short-summary {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

/* Thẻ trắng của cột phải: cùng bo góc, cùng đệm, giữa các khối cách đều. */
#vexereSearchWidget .payment-info-container,
#vexereSearchWidget .summary-of-fare-container,
#vexereSearchWidget .booking-trip-info-detail,
#vexereSearchWidget .column-ticket-info {
	background: #fff !important;
	padding-inline: 1rem !important;
}

#vexereSearchWidget .payment-info-container {
	border-radius: var( --px-radius-lg ) var( --px-radius-lg ) 0 0;
}

#vexereSearchWidget .summary-of-fare-container {
	border-radius: 0 0 var( --px-radius-lg ) var( --px-radius-lg );
}

#vexereSearchWidget .booking-trip-info-detail,
#vexereSearchWidget .column-ticket-info {
	border-radius: var( --px-radius-lg );
	padding-block: 0.75rem !important;
}

#vexereSearchWidget .right-container > .trip-info-label,
#vexereSearchWidget .ticket-info-wrapper .trip-info-label {
	margin-block: 1.25rem 0.625rem !important;
}

#vexereSearchWidget .column-ticket-info .value {
	color: var( --px-fg );
	font-weight: 500;
}

#vexereSearchWidget .row-divider {
	margin-block: 0.5rem;
}

/* ── Màn thanh toán: danh sách hình thức ────────────────────────────────── */

/*
 * Tên hình thức thanh toán đậm 13px, mô tả nhạt 13px — không còn 16/17px trộn
 * lẫn. Đoạn điều khoản dưới danh sách về 12px như mọi dòng chú thích.
 */
#vexereSearchWidget .payment-method-container {
	padding-block: 0.625rem;
}

#vexereSearchWidget .payment-method-container label,
#vexereSearchWidget .payment-method-container .ant-radio-wrapper {
	font-weight: 700 !important;
}

#vexereSearchWidget .payment-common > div:not( .booking-btn ):first-child,
#vexereSearchWidget .payment-common > p {
	color: var( --px-fg-muted );
	font-size: var( --px-fs-label ) !important;
}

/* Hai nút cuối màn thanh toán nằm trên cùng một hàng, cùng chiều cao. */
#vexereSearchWidget .booking-btn {
	align-items: center;
	display: inline-flex !important;
	justify-content: center;
	line-height: 1 !important;
}

/* ── Màn trạng thái vé ──────────────────────────────────────────────────── */

#vexereSearchWidget .booking-success-confirm-title {
	letter-spacing: 0;
	text-transform: none !important;
}

#vexereSearchWidget .bottom-actions-container {
	gap: 1rem;
	margin-block-start: 0.5rem;
}

/* ── Chống gãy dòng sau khi đổi cỡ chữ ──────────────────────────────────── */

/*
 * "Bộ lọc tìm kiếm" nằm trong ô Vexere đặt cứng 143px — ở 18px nó gãy làm hai
 * dòng. Cho ô giãn theo chữ, "Xóa lọc" vẫn đẩy sang phải.
 */
#vexereSearchWidget .route-filters-top > div:first-child {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 0.75rem;
	justify-content: space-between;
	white-space: nowrap;
	width: auto !important;
}

/* "Xóa lọc" nằm TRONG ô tiêu đề; giữ cỡ chữ thân, không đậm. */
#vexereSearchWidget .route-filters-top > div:first-child a {
	font-size: var( --px-fs-body ) !important;
	font-weight: 400 !important;
}

/* "Chọn chỗ": khung Vexere rộng cố định 93px, chữ đậm gãy thành "Chọn / chỗ". */
#vexereSearchWidget .nl-action .button-container {
	width: auto !important;
}

#vexereSearchWidget .nl-action .btn-label {
	white-space: nowrap;
}

/* Vexere viết hoa bằng style inline trên cả nút lẫn thẻ con. */
#vexereSearchWidget .homepage-btn .ant-btn *,
#vexereSearchWidget .book-return-container .ant-btn *,
#vexereSearchWidget .cancel-ticket-button-container .ant-btn *,
#vexereSearchWidget .booking-btn * {
	text-transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANG DANH SÁCH CHUYẾN THEO MẪU — screenshot/Danh sách chuyến.png, Figma
   frame `126:70086`. Chỉ áp trong `.px-trips__body` (trang kết quả của block
   phucxuyen/trip-list), không chạm các màn đặt vé/thanh toán khác.

   ĐÂY LÀ CHỖ DUY NHẤT TỆP NÀY ĐỔI BỐ CỤC CỦA VEXERE (xem nguyên tắc 1 ở đầu
   tệp). Mẫu đòi: bộ lọc 394px, cách danh sách 40px, cả cụm rộng bằng container
   của header; thẻ chuyến ảnh 160 × 160, giá 24px, nút "Xem chỗ ngồi" viên
   thuốc. Không đổi bố cục thì không ra được mẫu. Mọi luật đổi bố cục nằm trong
   `min-width: 62rem` — dưới mức ấy Vexere tự chuyển sang bố cục di động của
   họ, để nguyên.

   ĐO TRÊN DOM THẬT (demo5, khung 1920): Vexere tự bó khung 1200px, cột lọc
   300px có sẵn `padding-left: 15px`, thẻ chuyến thụt 15px trong cột phải.
   ═══════════════════════════════════════════════════════════════════════════ */

.px-trips__body .px-booking {
	box-sizing: border-box;
	margin-inline: auto;
	position: relative;
	width: min( var( --wp--custom--container--wide, 82rem ), 100% - 2 * var( --wp--preset--spacing--sm, 1rem ) );
}

@media ( min-width: 62rem ) {

	/*
	 * Bề rộng 1200px nằm NGAY TRÊN `#vexereSearchWidget`, không ở lớp con — đo
	 * cả chuỗi tổ tiên từ `.search-result-container` lên: mọi lớp đều 1200 vì
	 * kế thừa từ gốc. Mở gốc rồi cho từng lớp giữa trải 100%.
	 */
	.px-trips__body #vexereSearchWidget,
	.px-trips__body #vexereSearchWidget .w-100,
	.px-trips__body #vexereSearchWidget .clearfix,
	.px-trips__body #vexereSearchWidget .clearfix > div,
	.px-trips__body #vexereSearchWidget [class*="company-id-"],
	.px-trips__body #vexereSearchWidget > div,
	.px-trips__body #vexereSearchWidget .search-results-container,
	.px-trips__body #vexereSearchWidget .searchResults,
	.px-trips__body #vexereSearchWidget .search-result-container {
		max-width: none !important;
		width: 100% !important;
	}

	.px-trips__body #vexereSearchWidget .search-result-container {
		align-items: flex-start;
		gap: 2.5rem;
	}

	/* ── Cột lọc: thẻ trắng 394px (Figma 126:70170) ────────────────────── */

	.px-trips__body #vexereSearchWidget .search-result-left {
		flex: none;
		padding: 0 !important;
		width: 24.625rem !important;
	}

	.px-trips__body #vexereSearchWidget .route-filters {
		width: 100% !important;
	}

	/*
	 * Mẫu không có dòng "Bộ lọc tìm kiếm / Xóa lọc": thẻ lọc bắt đầu ngang hàng
	 * "Kết quả: … chuyến". Ẩn cả dòng; bỏ tích từng ô là về trạng thái đầu.
	 */
	.px-trips__body #vexereSearchWidget .route-filters-top {
		display: none !important;
	}

	.px-trips__body #vexereSearchWidget .filters-container {
		background: #fff !important;
		border: 1px solid var( --wp--preset--color--line-soft, #edeef2 ) !important;
		border-radius: var( --px-radius-lg ) !important;
		box-shadow: 0 2px 4px 0 rgb( 0 0 0 / 0.1 );
		box-sizing: border-box;
		margin: 0 !important;
		padding: 1rem !important;
		width: 100% !important;
	}

	.px-trips__body #vexereSearchWidget .filter-group {
		margin: 0;
		width: 100% !important;
	}

	.px-trips__body #vexereSearchWidget .filter-group + .filter-group {
		margin-block-start: 2rem;
	}

	/* Tiêu đề nhóm: 16/24 đậm vừa. Vexere ghi `margin-top: 20/30px` inline. */
	.px-trips__body #vexereSearchWidget .filter-group-title {
		color: var( --px-fg ) !important;
		font-size: var( --px-fs-body, 13px ) !important;
		font-weight: 600 !important;
		line-height: 1.5rem !important;
		margin: 0 0 0.875rem !important;
	}

	/* Ô tích: 20 × 20, bo 4, viền #b0b0b0; nhãn 14/20. */
	.px-trips__body #vexereSearchWidget .ant-checkbox-wrapper,
	.px-trips__body #vexereSearchWidget .ant-tree-treenode {
		align-items: center;
		display: flex;
		gap: 0.5rem;
	}

	.px-trips__body #vexereSearchWidget .ant-checkbox-wrapper > span:last-child,
	.px-trips__body #vexereSearchWidget .ant-tree-title,
	.px-trips__body #vexereSearchWidget .ant-tree-title * {
		color: var( --px-fg ) !important;
		font-size: var( --px-fs-body, 13px ) !important;
		line-height: 1.25rem !important;
		padding: 0;
	}

	.px-trips__body #vexereSearchWidget .ant-checkbox,
	.px-trips__body #vexereSearchWidget .ant-tree-checkbox {
		margin: 0 !important;
		top: 0;
	}

	.px-trips__body #vexereSearchWidget .ant-checkbox-inner,
	.px-trips__body #vexereSearchWidget .ant-tree-checkbox-inner {
		border-color: #b0b0b0;
		border-radius: 4px;
		height: 1.25rem;
		width: 1.25rem;
	}

	.px-trips__body #vexereSearchWidget .ant-checkbox-inner::after,
	.px-trips__body #vexereSearchWidget .ant-tree-checkbox-inner::after {
		left: 30%;
	}

	.px-trips__body #vexereSearchWidget .ant-tree-checkbox-checked .ant-tree-checkbox-inner {
		background-color: var( --px-brand ) !important;
		border-color: var( --px-brand ) !important;
	}

	/* Mẫu là danh sách phẳng: bỏ tam giác mở cây và phần thụt đầu dòng. */
	.px-trips__body #vexereSearchWidget .ant-tree {
		background: transparent !important;
		margin: 0 !important;
	}

	.px-trips__body #vexereSearchWidget .ant-tree-switcher,
	.px-trips__body #vexereSearchWidget .ant-tree-indent {
		display: none !important;
	}

	.px-trips__body #vexereSearchWidget .ant-tree-treenode {
		padding: 0 0 0.75rem !important;
	}

	.px-trips__body #vexereSearchWidget .ant-tree-node-content-wrapper {
		line-height: 1.25rem;
		min-height: 0;
		padding: 0;
	}

	.px-trips__body #vexereSearchWidget .ant-tree-node-content-wrapper:hover {
		background: transparent;
	}

	/* Thanh trượt: vạch 4px, hai núm tròn 20px đỏ có bóng nhẹ. */
	.px-trips__body #vexereSearchWidget .ant-slider {
		height: 1.25rem;
		margin: 0 0.625rem;
		padding: 0.5rem 0;
	}

	.px-trips__body #vexereSearchWidget .ant-slider-rail,
	.px-trips__body #vexereSearchWidget .ant-slider-track {
		border-radius: 0.75rem;
		height: 4px;
	}

	.px-trips__body #vexereSearchWidget .ant-slider-handle {
		border: 0 !important;
		box-shadow: 0 1px 2px 0 rgb( 48 70 115 / 0.1 ), 0 1px 2px 0 rgb( 18 26 43 / 0.06 ) !important;
		height: 1.25rem;
		margin-top: -0.5rem;
		width: 1.25rem;
	}

	.px-trips__body #vexereSearchWidget .filter-group-current-values {
		display: flex;
		justify-content: space-between;
		margin-block-start: 1rem;
	}

	.px-trips__body #vexereSearchWidget .filter-group-current-values div {
		color: #131316 !important;
		font-size: var( --px-fs-label, 12px ) !important;
		line-height: 1.25rem !important;
	}

	/*
	 * Ô "Nhập điểm đón": một khung viền bo 8, cao 40, kính lúp nằm TRONG khung
	 * bên phải (Figma box 360 × 40). Vexere dựng ô nhập + nút dính liền — bỏ
	 * viền của từng phần, vẽ viền lên cụm.
	 */
	.px-trips__body #vexereSearchWidget .ant-input-search {
		margin: 0 0 0.875rem !important;
		width: 100%;
	}

	.px-trips__body #vexereSearchWidget .ant-input-search .ant-input-group {
		background: #fff;
		border: 1px solid var( --px-line );
		border-radius: 0.5rem;
		display: flex;
		overflow: hidden;
	}

	.px-trips__body #vexereSearchWidget .ant-input-search .ant-input-group:focus-within {
		border-color: var( --px-brand );
	}

	.px-trips__body #vexereSearchWidget .ant-input-search .ant-input {
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: var( --px-fg );
		flex: 1;
		font-size: var( --px-fs-body, 13px ) !important;
		height: 2.375rem;
		padding: 0.5rem 0.75rem;
	}

	.px-trips__body #vexereSearchWidget .ant-input-search .ant-input::placeholder {
		color: var( --px-fg-muted );
	}

	.px-trips__body #vexereSearchWidget .ant-input-search .ant-input-group-addon {
		background: transparent !important;
		border: 0 !important;
		display: flex;
		width: auto;
	}

	.px-trips__body #vexereSearchWidget .ant-input-search .ant-input-group-addon .ant-btn {
		align-items: center;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		color: #74748e !important;
		display: flex;
		height: 2.375rem;
		justify-content: center;
		width: 2.75rem;
	}

	/*
	 * Kính lúp `search-01` của Figma (asset node 126:70218: khung 24, nét 1.5,
	 * #74748e) thay cho icon Ant Design. Icon gốc chỉ ẩn, nút vẫn là nút của
	 * Vexere nên bấm vẫn lọc.
	 */
	.px-trips__body #vexereSearchWidget .ant-input-search .anticon-search {
		display: none !important;
	}

	.px-trips__body #vexereSearchWidget .ant-input-search .ant-input-search-button::before {
		background-color: #74748e;
		content: "";
		height: 1.5rem;
		mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.36 -1.36 24 24' fill='none'%3E%3Cpath d='M5.03033 16.25L0.53033 20.75' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M2.53033 9.75C2.53033 4.77944 6.55977 0.75 11.5303 0.75C16.5009 0.75 20.5303 4.77944 20.5303 9.75C20.5303 14.7206 16.5009 18.75 11.5303 18.75C6.55977 18.75 2.53033 14.7206 2.53033 9.75Z' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
		-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.36 -1.36 24 24' fill='none'%3E%3Cpath d='M5.03033 16.25L0.53033 20.75' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M2.53033 9.75C2.53033 4.77944 6.55977 0.75 11.5303 0.75C16.5009 0.75 20.5303 4.77944 20.5303 9.75C20.5303 14.7206 16.5009 18.75 11.5303 18.75C6.55977 18.75 2.53033 14.7206 2.53033 9.75Z' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
		width: 1.5rem;
	}

	/* ── Cột kết quả ───────────────────────────────────────────────────── */

	.px-trips__body #vexereSearchWidget .search-result-right {
		background: transparent !important;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
	}

	/*
	 * Dải "Sắp xếp theo" của Vexere (bốn nút ngang) nhường chỗ cho hàng
	 * "Kết quả · Sắp xếp theo [ô chọn]" của mẫu, do vexere-results.js vẽ ĐÈ
	 * đúng chỗ này. Giữ dải gốc làm chỗ đứng cao 40px và vẫn bấm được bằng JS;
	 * chỉ ẩn khỏi mắt.
	 */
	.px-trips__body.has-px-vxbar #vexereSearchWidget .route-sorting-container {
		height: 2.5rem;
		margin: 0 0 1.5rem !important;
		min-height: 0;
		overflow: hidden;
		visibility: hidden;
	}

	/*
	 * Giữa dải sắp xếp và thẻ đầu, Vexere chèn khối lọc di động rỗng (10px) và
	 * đệm trên 15px của `.route-container` — thẻ đầu tụt 25px so với mẫu (mẫu:
	 * hàng Kết quả 40 + khoảng 24 rồi tới thẻ).
	 */
	.px-trips__body #vexereSearchWidget .mobile-route-current-filter-container {
		display: none !important;
	}

	.px-trips__body #vexereSearchWidget .route-container {
		padding: 0 !important;
	}

	/* ── Thẻ chuyến (Figma 126:70425: 1006 × 191) ─────────────────────── */

	.px-trips__body #vexereSearchWidget .route-item {
		background: #fff;
		border: 0 !important;
		border-radius: var( --px-radius-lg );
		box-shadow: 0 1px 4px 1px rgb( 0 0 0 / 0.08 );
		margin: 0 0 1rem !important;
		width: 100% !important;
	}

	.px-trips__body #vexereSearchWidget .route-item + .route-item {
		margin-block-start: 0;
	}

	.px-trips__body #vexereSearchWidget .route-item-main-content {
		padding: 1rem !important;
	}

	.px-trips__body #vexereSearchWidget .nl-route-detail-container-content,
	.px-trips__body #vexereSearchWidget .nl-route-detail-container-content > div {
		gap: 1rem;
		width: 100% !important;
	}

	.px-trips__body #vexereSearchWidget .nl-route-detail-image-container {
		margin: 0 !important;
		border-radius: 0.5rem;
		flex: none;
		height: 10rem;
		overflow: hidden;
		width: 10rem !important;
	}

	.px-trips__body #vexereSearchWidget .nl-route-detail-image-container img {
		border-radius: 0.5rem;
		height: 100% !important;
		max-width: none;
		object-fit: cover;
		width: 100% !important;
	}

	/*
	 * Nửa phải của thẻ: khối thông tin chiếm phần trái, giá + chỗ trống + nút
	 * canh phải. Vexere đặt giá và nút bằng `position` riêng; ở đây cố định
	 * chúng vào góc của nửa phải cho khớp mẫu.
	 */
	.px-trips__body #vexereSearchWidget .nl-route-detail-right-container {
		flex: 1 1 auto;
		min-height: 10rem;
		min-width: 0;
		position: relative;
		width: auto !important;
	}

	.px-trips__body #vexereSearchWidget .nl-vehicle-type-container {
		margin: 0;
		padding: 0;
	}

	.px-trips__body #vexereSearchWidget .nl-route-detail-info {
		padding-block-start: 0 !important;
		padding-inline-end: 15rem;
		width: auto !important;
	}

	/* Tên xe: 18/26 đậm vừa, #131316. */
	.px-trips__body #vexereSearchWidget .route-item .nl-vehicle-type {
		color: #131316 !important;
		font-size: var( --px-fs-strong, 16px ) !important;
		font-weight: 600 !important;
		line-height: 1.625rem !important;
		margin: 0 0 0.75rem;
	}

	/*
	 * Hành trình: ghim xám 24px · giờ 16/24 đậm vừa · tên bến 16/24 thường,
	 * giữa hai mốc là vạch đứt 40px kèm thời lượng 14/20 xám.
	 * Icon `location-01` và vạch đứt lấy nguyên từ Figma (asset của node
	 * 80:42395 và 80:42400), nhúng thẳng làm mask.
	 */
	.px-trips__body #vexereSearchWidget .nl-from-to {
		margin: 0 !important;
	}

	.px-trips__body #vexereSearchWidget .nl-from-to > svg,
	.px-trips__body #vexereSearchWidget .nl-from-to .dot {
		display: none !important;
	}

	.px-trips__body #vexereSearchWidget .nl-from-to-content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	/*
	 * Vexere đặt mốc đi/đến `position: absolute` ở đỉnh và đáy một khung cao
	 * 74px, nên vạch thời lượng 40px của mẫu bị hai mốc đè lên. Trả về dòng chảy
	 * thường: mốc đi 24 · thời lượng 40 · mốc đến 24.
	 */
	.px-trips__body #vexereSearchWidget .nl-from-to-content {
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Vexere đẩy dòng thời lượng xuống bằng `top: 25px` — trả về 0. */
	.px-trips__body #vexereSearchWidget .route-item .duration {
		inset: auto !important;
	}

	.px-trips__body #vexereSearchWidget .nl-from-to .content {
		inset: auto !important;
		position: static !important;
		align-items: center;
		display: flex;
		gap: 0.5rem;
		height: 1.5rem;
		white-space: nowrap;
	}

	.px-trips__body #vexereSearchWidget .nl-from-to .content::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' fill='%23000'/%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' fill='%23000'/%3E%3C/svg%3E" ) center / contain no-repeat;
		width: 1.5rem;
	}

	.px-trips__body #vexereSearchWidget .route-item .nl-from-to .hour {
		margin: 0 !important;
		width: auto !important;
		color: var( --px-fg ) !important;
		font-size: var( --px-fs-strong, 16px ) !important;
		font-weight: 600 !important;
		line-height: 1.5rem !important;
	}

	.px-trips__body #vexereSearchWidget .nl-from-to .nl-dib,
	.px-trips__body #vexereSearchWidget .nl-from-to .depart-station {
		color: var( --px-fg ) !important;
		font-size: var( --px-fs-body, 13px ) !important;
		font-weight: 400 !important;
		line-height: 1.5rem !important;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.px-trips__body #vexereSearchWidget .route-item .duration {
		align-items: center;
		color: var( --px-fg-muted ) !important;
		display: flex;
		font-size: var( --px-fs-label, 12px ) !important;
		height: 2.5rem;
		line-height: 1.25rem !important;
		margin: 0;
		padding-inline-start: 2.5rem;
		position: relative;
	}

	.px-trips__body #vexereSearchWidget .route-item .duration::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;
	}

	/* Mẫu không có "Thông tin chi tiết" trên thẻ; chi tiết xem trong bước chọn chỗ. */
	.px-trips__body #vexereSearchWidget .route-detail-button-container {
		display: none !important;
	}

	/* Giá: 24/32 đậm, giá gốc (khi có khuyến mãi) 16 gạch ngang xám, cách 16. */
	.px-trips__body #vexereSearchWidget .nl-fare-info {
		inset-block-start: 2.6875rem;
		inset-inline-end: 0;
		position: absolute;
		text-align: end;
		width: auto !important;
	}

	.px-trips__body #vexereSearchWidget .nl-fare {
		align-items: center;
		display: flex;
		gap: 1rem;
		justify-content: flex-end;
	}

	.px-trips__body #vexereSearchWidget .route-item .nl-price,
	.px-trips__body #vexereSearchWidget .route-item .nl-price * {
		color: var( --px-fg ) !important;
		font-size: var( --px-fs-title, 18px ) !important;
		font-weight: 700 !important;
		line-height: 2rem !important;
	}

	.px-trips__body #vexereSearchWidget .route-item .nl-price {
		align-items: baseline;
		display: flex;
		gap: 0.3em;
		margin: 0;
		white-space: nowrap;
	}

	/*
	 * "Từ" giữ lại, chỉ thu nhỏ: giá hiển thị là giá THẤP NHẤT của chuyến (ghế
	 * đầu/giữa/cuối giá khác nhau), bỏ chữ ấy là nói sai giá với khách.
	 */
	.px-trips__body #vexereSearchWidget .route-item .nl-price > span:first-child {
		color: var( --px-fg-muted ) !important;
		font-size: var( --px-fs-label, 12px ) !important;
		font-weight: 400 !important;
	}

	.px-trips__body #vexereSearchWidget .route-item .nl-price-original,
	.px-trips__body #vexereSearchWidget .route-item .nl-fare del,
	.px-trips__body #vexereSearchWidget .route-item .nl-fare s {
		color: var( --px-fg-muted ) !important;
		font-size: var( --px-fs-body, 13px ) !important;
		font-weight: 400 !important;
		line-height: 1.5rem !important;
	}

	/* Chỗ trống và nút: canh phải, nút sát đáy thẻ. */
	.px-trips__body #vexereSearchWidget .nl-detail-and-action {
		align-items: flex-end;
		display: flex !important;
		flex-direction: column;
		gap: 1rem;
		inset-block: 5.4375rem 0;
		inset-inline-end: 0;
		justify-content: space-between;
		position: absolute;
		width: auto !important;
	}

	.px-trips__body #vexereSearchWidget .num-available-seats,
	.px-trips__body #vexereSearchWidget .num-available-seats * {
		color: var( --px-fg-muted ) !important;
		font-size: var( --px-fs-body, 13px ) !important;
		line-height: 1.25rem !important;
	}

	/*
	 * Nút "Xem chỗ ngồi" (Vexere ghi "Chọn chỗ"): viên thuốc đỏ, đệm 10/48,
	 * chữ 14/20 đậm vừa. Đổi CHỮ bằng giả tử, không sửa DOM của React: nhãn gốc
	 * thu về cỡ 0, `::after` in chữ mới. Phần tử bấm vẫn là `.btn-label` thật
	 * nên sự kiện của Vexere không đổi.
	 */
	.px-trips__body #vexereSearchWidget .nl-action .button-container {
		background: var( --px-brand ) !important;
		border: 0 !important;
		border-radius: var( --px-radius-pill ) !important;
		display: inline-flex;
		min-height: 0;
		width: auto !important;
	}

	.px-trips__body #vexereSearchWidget .nl-action .button-container:hover {
		background: var( --px-brand ) !important;
	}

	.px-trips__body #vexereSearchWidget .route-item .nl-action .btn-label {
		align-items: center;
		display: inline-flex;
		font-size: 0 !important;
		height: 2.5rem;
		justify-content: center;
		line-height: 1 !important;
		padding: 0 3rem !important;
		white-space: nowrap;
	}

	.px-trips__body #vexereSearchWidget .route-item .nl-action .btn-label::after {
		color: #fff;
		content: "Xem chỗ ngồi";
		font-size: var( --px-fs-body, 13px );
		font-weight: 600;
		line-height: 1.25rem;
	}

	/* Ghi chú "Vé chặng thuộc chuyến …" dưới thẻ. */
	.px-trips__body #vexereSearchWidget .notify-trip {
		padding: 0 1rem 0.75rem;
	}

	.px-trips__body #vexereSearchWidget .stage-trip,
	.px-trips__body #vexereSearchWidget .stage-trip * {
		color: var( --px-fg-muted ) !important;
		font-size: 0.75rem !important;
	}

	/* "Xem thêm": Vexere bọc bằng div nền #f8f8fa inline — cho trong suốt. */
	.px-trips__body #vexereSearchWidget div:has( > .load-more-route-item ) {
		background: transparent !important;
		padding-block-start: 0.5rem;
	}
}

/* ── Hàng "Kết quả · Sắp xếp theo" (assets/vexere-results.js) ───────────── */

.px-vxbar {
	display: none;
}

@media ( min-width: 62rem ) {
	.px-trips__body.has-px-vxbar .px-vxbar {
		align-items: center;
		display: flex;
		gap: 1rem;
		height: 2.5rem;
		inset-block-start: 0;
		inset-inline: calc( 24.625rem + 2.5rem ) 0;
		justify-content: space-between;
		position: absolute;
		z-index: 5;
	}
}

.px-vxbar__count {
	color: var( --wp--preset--color--fg, #2f3037 );
	font-family: var( --wp--preset--font-family--montserrat, Montserrat, sans-serif );
	font-size: var( --px-fs-strong, 16px );
	font-weight: 600;
	line-height: 1.5rem;
	margin: 0;
}

.px-vxbar__sort {
	align-items: center;
	display: flex;
	gap: 1rem;
	position: relative;
}

.px-vxbar__label {
	color: #131316;
	font-size: var( --px-fs-body, 13px );
	line-height: 1.25rem;
}

.px-vxsort__button {
	align-items: center;
	background: #fff;
	border: 1px solid var( --wp--preset--color--line, #dee1e7 );
	border-radius: 0.5rem;
	box-sizing: border-box;
	color: #131316;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: var( --px-fs-body, 13px );
	height: 2.5rem;
	justify-content: space-between;
	line-height: 1.25rem;
	padding: 0.5rem 0.75rem;
	text-align: start;
	width: 13rem;
}

.px-vxsort__button:hover,
.px-vxsort__button[aria-expanded="true"] {
	border-color: var( --wp--preset--color--brand, #a61b16 );
}

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

/* Mũi tên `arrow-up-01` của Figma khi mở, lật xuống khi đóng. */
.px-vxsort__caret {
	color: #5c6c7e;
	flex: none;
	height: 1.5rem;
	transform: rotate( 180deg );
	transition: transform 0.2s ease;
	width: 1.5rem;
}

.px-vxsort__button[aria-expanded="true"] .px-vxsort__caret {
	transform: none;
}

.px-vxsort__list {
	background: #fff;
	border: 1px solid var( --wp--preset--color--line, #dee1e7 );
	border-radius: 0.5rem;
	box-shadow: 0 12px 32px rgb( 0 0 0 / 0.14 );
	inset-block-start: calc( 100% + 0.5rem );
	inset-inline-end: 0;
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	position: absolute;
	width: 13rem;
	z-index: 20;
}

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

.px-vxsort__option {
	border-radius: 0.375rem;
	color: #131316;
	cursor: pointer;
	font-size: var( --px-fs-body, 13px );
	line-height: 1.25rem;
	padding: 0.625rem 0.75rem;
}

.px-vxsort__option:hover,
.px-vxsort__option.is-active {
	background-color: var( --wp--preset--color--brand-subtle, #f6e8e8 );
	color: var( --wp--preset--color--brand, #a61b16 );
}

.px-vxsort__option[aria-selected="true"] {
	color: var( --wp--preset--color--brand, #a61b16 );
	font-weight: 600;
}

/*
 * MÀN HẸP: TRẢ CỠ CHỮ THẺ CHUYẾN VỀ NHỎ.
 *
 * Luật thang chữ TKT-003 đặt giá 18px, tên xe/giờ 16px cho MỌI bề rộng — đo lại
 * ở 390px thì giá đè lên tên xe, đúng cái bẫy đã ghi ở đầu tệp ("cỡ chữ giá chỉ
 * tăng ở màn rộng"): trên mobile Vexere đặt khối giá tuyệt đối ở góc thẻ.
 */
@media ( max-width: 767px ) {
	#vexereSearchWidget .route-item .nl-price,
	#vexereSearchWidget .route-item .nl-price * {
		font-size: 14px !important;
		line-height: 1.3 !important;
	}

	#vexereSearchWidget .route-item .nl-vehicle-type,
	#vexereSearchWidget .route-item .hour {
		font-size: 13px !important;
	}

	/*
	 * Lỗi CÓ SẴN trên demo5 trước đợt sửa này (đã chụp lại bản cũ ở 390px):
	 * khối giá tuyệt đối ở góc phải đè lên tên xe dài. Cho giá về dòng chảy
	 * thường, nằm dưới hành trình; tên bến dài thì cắt "…" thay vì tràn khỏi thẻ.
	 */
	#vexereSearchWidget .route-item .nl-fare-info {
		inset: auto !important;
		margin-block-start: 0.5rem;
		position: static !important;
		text-align: start;
	}

	#vexereSearchWidget .route-item .nl-route-detail-right-container {
		flex: 1 1 auto;
		min-width: 0;
	}

	#vexereSearchWidget .route-item .nl-from-to .nl-dib,
	#vexereSearchWidget .route-item .nl-from-to .depart-station {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#vexereSearchWidget .route-item .nl-from-to .content {
		min-width: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÀN THANH TOÁN & TRẠNG THÁI — dàn theo screenshot/4. Thanh toán.png

   ĐO TRÊN GIAO DỊCH CÒN HẠN (16/9/2026, 1920px): gốc widget bị Vexere bó
   `max-width: 1200px` và thực tế chỉ rộng 1088px, cộng một lớp nền xám
   #f8f8fa đệm 15px — nên cả màn hẹp hơn container của header.

   Mẫu (khung 1920): container thẳng mép header · đồng hồ đếm ngược một thẻ
   trắng trải hết · dưới là cột trái 920 và sidebar 486, cách 32.
   Sidebar theo THỨ TỰ: Thông tin liên hệ → Thông tin chuyến đi → mã giảm giá →
   tổng tiền; thẻ cách nhau 24.

   Vexere dựng ngược: mã giảm giá → thông tin thanh toán → (khối chung) chuyến
   đi + liên hệ. Đảo bằng `order` trong flex — khối chung được `display:
   contents` để các con của nó thành phần tử flex của sidebar. KHÔNG dời node.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Chỗ bó thật không nằm ở widget mà ở TEMPLATE: `main.px-pay` chứa
 * `.wp-block-post-content` là khối constrained, nhận `max-width` = content-size
 * 1088px. Mở khối ấy ra container rộng 82rem, bằng header.
 */
.px-pay .wp-block-post-content:has( .payment-section-wrapper, .booking-success-wrapper ) {
	box-sizing: border-box;
	margin-inline: auto !important;
	max-width: var( --wp--custom--container--wide, 82rem ) !important;
	width: 100%;
}

.px-booking:has( .payment-section-wrapper ),
.px-booking:has( .booking-success-wrapper ) {
	box-sizing: border-box;
	margin-inline: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.px-booking:has( .payment-section-wrapper ) #vexereSearchWidget,
.px-booking:has( .payment-section-wrapper ) #vexereSearchWidget > div,
.px-booking:has( .payment-section-wrapper ) #vexereSearchWidget .w-100,
.px-booking:has( .booking-success-wrapper ) #vexereSearchWidget,
.px-booking:has( .booking-success-wrapper ) #vexereSearchWidget > div,
.px-booking:has( .booking-success-wrapper ) #vexereSearchWidget .w-100 {
	max-width: none !important;
	width: 100% !important;
}

/* Lớp nền xám đệm 15px của Vexere quanh cả màn. */
#vexereSearchWidget div:has( > .countdown-timer ),
#vexereSearchWidget div:has( > .booking-success-wrapper ) {
	background: transparent !important;
	padding: 0 !important;
}

/* ── Đồng hồ đếm ngược: thẻ trắng trải hết, cách phần dưới 32 ────────────── */

#vexereSearchWidget .countdown-timer {
	border-radius: 1rem !important;
	box-shadow: none !important;
	margin: 0 0 2rem !important;
	padding: 1.5rem !important;
	text-align: center;
}

#vexereSearchWidget .countdown-timer .remaining-time {
	color: var( --px-fg ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	line-height: 1.5rem !important;
}

#vexereSearchWidget .countdown-timer .time-section-container {
	align-items: center;
	gap: 0.5rem;
	justify-content: center;
	margin-block-start: 0.25rem;
}

#vexereSearchWidget .countdown-timer .time-section-countdown {
	color: var( --px-brand, #a61b16 ) !important;
	font-size: var( --px-fs-title, 18px ) !important;
	line-height: 1.75rem !important;
}

/*
 * Vexere bó thẻ một chiều cao cố định nên hàng giờ tràn ra dưới mép trắng;
 * cho thẻ cao theo nội dung. Icon là <img> SVG đen — không đổi màu được bằng
 * `color`, nên ẩn ảnh và vẽ lại icon đồng hồ của Figma (icons/timer.svg)
 * bằng mask, tô màu thương hiệu như mẫu.
 */
#vexereSearchWidget .countdown-timer,
#vexereSearchWidget .countdown-timer .time-section-container {
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
}

#vexereSearchWidget .countdown-timer .time-section-container {
	display: flex !important;
	position: static !important;
}

#vexereSearchWidget .countdown-timer .time-section-img {
	align-items: center;
	display: flex !important;
	flex: none;
	height: 1.5rem !important;
	margin: 0 !important;
	position: static !important;
	width: 1.5rem !important;
}

#vexereSearchWidget .countdown-timer .time-section-img img {
	display: none !important;
}

#vexereSearchWidget .countdown-timer .time-section-img::before {
	background: var( --px-brand, #a61b16 );
	content: "";
	height: 1.5rem;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.25 -1.125 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.54304 2.79289C3.93357 2.40237 4.56673 2.40237 4.95726 2.79289L5.95726 3.79289C6.34778 4.18342 6.34778 4.81658 5.95726 5.20711C5.56673 5.59763 4.93357 5.59763 4.54304 5.20711L3.54304 4.20711C3.15252 3.81658 3.15252 3.18342 3.54304 2.79289ZM18.9573 2.79289C19.3478 3.18342 19.3478 3.81658 18.9573 4.20711L17.9573 5.20711C17.5667 5.59763 16.9336 5.59763 16.543 5.20711C16.1525 4.81658 16.1525 4.18342 16.543 3.79289L17.543 2.79289C17.9336 2.40237 18.5667 2.40237 18.9573 2.79289Z' fill='%23000'/%3E%3Cpath d='M15.9571 7.29289C16.3476 7.68342 16.3476 8.31658 15.9571 8.70711L13.5776 11.0866C13.6888 11.3696 13.75 11.6779 13.75 12C13.75 13.3807 12.6307 14.5 11.25 14.5C9.86929 14.5 8.75 13.3807 8.75 12C8.75 10.6193 9.86929 9.5 11.25 9.5C11.5721 9.5 11.8804 9.56121 12.1634 9.67239L14.5429 7.29289C14.9334 6.90237 15.5666 6.90237 15.9571 7.29289Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.25 1C8.25 0.447715 8.69772 0 9.25 0H13.25C13.8023 0 14.25 0.447715 14.25 1C14.25 1.55228 13.8023 2 13.25 2H12.25V2.5C12.25 3.05228 11.8023 3.5 11.25 3.5C10.6977 3.5 10.25 3.05228 10.25 2.5V2H9.25C8.69772 2 8.25 1.55228 8.25 1Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7273 4.2C7.69624 4.2 4.33436 7.24061 3.90317 11.1321C3.84387 11.6673 3.36091 12.0533 2.82444 11.9941C2.28798 11.9349 1.90116 11.4531 1.96046 10.9179C2.50155 6.03449 6.70376 2.25 11.7273 2.25C17.1246 2.25 21.5 6.61522 21.5 12C21.5 17.3848 17.1246 21.75 11.7273 21.75H0.977273C0.43754 21.75 0 21.3135 0 20.775C0 20.2365 0.43754 19.8 0.977273 19.8H11.7273C16.0451 19.8 19.5455 16.3078 19.5455 12C19.5455 7.69218 16.0451 4.2 11.7273 4.2ZM0 13.95C0 13.4115 0.43754 12.975 0.977273 12.975H3.90909C4.44882 12.975 4.88636 13.4115 4.88636 13.95C4.88636 14.4885 4.44882 14.925 3.90909 14.925H0.977273C0.43754 14.925 0 14.4885 0 13.95ZM0 17.3625C0 16.824 0.43754 16.3875 0.977273 16.3875H5.86364C6.40337 16.3875 6.84091 16.824 6.84091 17.3625C6.84091 17.901 6.40337 18.3375 5.86364 18.3375H0.977273C0.43754 18.3375 0 17.901 0 17.3625Z' fill='%23000'/%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 -1.125 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.54304 2.79289C3.93357 2.40237 4.56673 2.40237 4.95726 2.79289L5.95726 3.79289C6.34778 4.18342 6.34778 4.81658 5.95726 5.20711C5.56673 5.59763 4.93357 5.59763 4.54304 5.20711L3.54304 4.20711C3.15252 3.81658 3.15252 3.18342 3.54304 2.79289ZM18.9573 2.79289C19.3478 3.18342 19.3478 3.81658 18.9573 4.20711L17.9573 5.20711C17.5667 5.59763 16.9336 5.59763 16.543 5.20711C16.1525 4.81658 16.1525 4.18342 16.543 3.79289L17.543 2.79289C17.9336 2.40237 18.5667 2.40237 18.9573 2.79289Z' fill='%23000'/%3E%3Cpath d='M15.9571 7.29289C16.3476 7.68342 16.3476 8.31658 15.9571 8.70711L13.5776 11.0866C13.6888 11.3696 13.75 11.6779 13.75 12C13.75 13.3807 12.6307 14.5 11.25 14.5C9.86929 14.5 8.75 13.3807 8.75 12C8.75 10.6193 9.86929 9.5 11.25 9.5C11.5721 9.5 11.8804 9.56121 12.1634 9.67239L14.5429 7.29289C14.9334 6.90237 15.5666 6.90237 15.9571 7.29289Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.25 1C8.25 0.447715 8.69772 0 9.25 0H13.25C13.8023 0 14.25 0.447715 14.25 1C14.25 1.55228 13.8023 2 13.25 2H12.25V2.5C12.25 3.05228 11.8023 3.5 11.25 3.5C10.6977 3.5 10.25 3.05228 10.25 2.5V2H9.25C8.69772 2 8.25 1.55228 8.25 1Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7273 4.2C7.69624 4.2 4.33436 7.24061 3.90317 11.1321C3.84387 11.6673 3.36091 12.0533 2.82444 11.9941C2.28798 11.9349 1.90116 11.4531 1.96046 10.9179C2.50155 6.03449 6.70376 2.25 11.7273 2.25C17.1246 2.25 21.5 6.61522 21.5 12C21.5 17.3848 17.1246 21.75 11.7273 21.75H0.977273C0.43754 21.75 0 21.3135 0 20.775C0 20.2365 0.43754 19.8 0.977273 19.8H11.7273C16.0451 19.8 19.5455 16.3078 19.5455 12C19.5455 7.69218 16.0451 4.2 11.7273 4.2ZM0 13.95C0 13.4115 0.43754 12.975 0.977273 12.975H3.90909C4.44882 12.975 4.88636 13.4115 4.88636 13.95C4.88636 14.4885 4.44882 14.925 3.90909 14.925H0.977273C0.43754 14.925 0 14.4885 0 13.95ZM0 17.3625C0 16.824 0.43754 16.3875 0.977273 16.3875H5.86364C6.40337 16.3875 6.84091 16.824 6.84091 17.3625C6.84091 17.901 6.40337 18.3375 5.86364 18.3375H0.977273C0.43754 18.3375 0 17.901 0 17.3625Z' fill='%23000'/%3E%3C/svg%3E" ) center / contain no-repeat;
	width: 1.5rem;
}

/* ── Hai cột ───────────────────────────────────────────────────────────── */

#vexereSearchWidget .payment-section-wrapper,
#vexereSearchWidget .booking-success-wrapper {
	align-items: start;
	display: grid !important;
	gap: 2rem;
	grid-template-columns: minmax( 0, 1fr ) 30.375rem;
	width: 100% !important;
}

#vexereSearchWidget .payment-container,
#vexereSearchWidget .ticket-info-wrapper,
#vexereSearchWidget .booking-success-wrapper > .left-container,
#vexereSearchWidget .booking-success-wrapper > .right-container {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: auto !important;
}

/* ── Cột trái: MỘT thẻ trắng — tiêu đề có kẻ dưới, phương thức, điều khoản, nút ─ */

#vexereSearchWidget .payment-container {
	background: #fff;
	border-radius: 1rem;
	overflow: hidden;
}

#vexereSearchWidget .payment-container-label {
	border-block-end: 1px solid var( --px-line );
	color: var( --px-fg ) !important;
	font-size: var( --px-fs-title, 18px ) !important;
	font-weight: 600 !important;
	line-height: 1.75rem !important;
	margin: 0 !important;
	padding: 1rem 1.5rem !important;
}

#vexereSearchWidget .payment-panel-group {
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 1.5rem !important;
}

#vexereSearchWidget .payment-method-container {
	margin: 0 !important;
}

#vexereSearchWidget .payment-method-container + .payment-method-container {
	padding-block: 1rem !important;
}

#vexereSearchWidget .payment-method-note {
	color: var( --px-fg ) !important;
	padding: 0 1.5rem !important;
}

#vexereSearchWidget .payment-common {
	gap: 1rem;
	padding: 1rem 1.5rem 1.5rem !important;
}

#vexereSearchWidget .payment-common .booking-btn {
	flex: 1 1 0;
	margin: 0 !important;
	width: auto !important;
}

#vexereSearchWidget .payment-common .booking-btn.made-a-transfer {
	flex-grow: 2;
}

/* ── Sidebar: xếp lại thứ tự, mỗi thẻ một khối, cách 24 ────────────────── */

#vexereSearchWidget .ticket-info-wrapper,
#vexereSearchWidget .booking-success-wrapper > .right-container {
	display: flex !important;
	flex-direction: column;
}

#vexereSearchWidget .ticket-info-container {
	display: contents !important;
}

/*
 * Nhãn khối thành ĐẦU THẺ: nền trắng, bo trên 16, kẻ dưới, chữ 20/28.
 * Khối nội dung ngay sau nó là THÂN THẺ: bo dưới 16, đệm 16/24, cách thẻ
 * sau 24.
 */
#vexereSearchWidget .ticket-info-wrapper .trip-info-label,
#vexereSearchWidget .booking-success-wrapper > .right-container > .trip-info-label {
	background: #fff;
	border-block-end: 1px solid var( --px-line );
	border-radius: 1rem 1rem 0 0;
	color: var( --px-fg ) !important;
	font-size: var( --px-fs-title, 18px ) !important;
	font-weight: 600 !important;
	line-height: 1.75rem !important;
	margin: 0 !important;
	padding: 1rem 1.5rem !important;
}

#vexereSearchWidget .ticket-info-container > .booking-trip-info-detail,
#vexereSearchWidget .ticket-info-container > .column-ticket-info,
#vexereSearchWidget .booking-success-wrapper > .right-container > .booking-trip-info-detail,
#vexereSearchWidget .booking-success-wrapper > .right-container > .column-ticket-info {
	background: #fff !important;
	border-radius: 0 0 1rem 1rem !important;
	box-shadow: none !important;
	margin: 0 0 1.5rem !important;
	padding: 1rem 1.5rem !important;
}

/* 1–2: Thông tin liên hệ */
#vexereSearchWidget .ticket-info-container > .trip-info-label:nth-child( 3 ) { order: 1; }
#vexereSearchWidget .ticket-info-container > .column-ticket-info { order: 2; }

/* 3–4: Thông tin chuyến đi (thân thẻ nối tiếp xuống mã giảm giá và tổng tiền) */
#vexereSearchWidget .ticket-info-container > .trip-info-label:nth-child( 1 ) { order: 3; }

#vexereSearchWidget .ticket-info-container > .booking-trip-info-detail {
	border-radius: 0 !important;
	margin-block-end: 0 !important;
	order: 4;
}

/* 5: mã giảm giá — nằm trong thẻ chuyến đi, có kẻ trên như thiết kế */
#vexereSearchWidget .ticket-info-wrapper > .coupons-section {
	background: #fff;
	border-block-start: 1px solid var( --px-line );
	gap: 0.5rem;
	margin: 0 !important;
	order: 5;
	padding: 1rem 1.5rem !important;
}

#vexereSearchWidget .ticket-info-wrapper .coupons-title {
	color: var( --px-fg-muted ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	font-weight: 400 !important;
	line-height: 1.25rem !important;
}

#vexereSearchWidget .ticket-info-wrapper .coupons-container {
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* "Thông tin thanh toán" không có nhãn riêng trong thiết kế — tổng tiền đóng thẻ. */
#vexereSearchWidget .ticket-info-wrapper > .trip-info-label {
	display: none !important;
}

/* 6: tổng tiền — đáy thẻ chuyến đi */
#vexereSearchWidget .ticket-info-wrapper > .fare-detail-container {
	border-block-start: 1px solid var( --px-line );
	border-radius: 0 0 1rem 1rem !important;
	box-shadow: none !important;
	margin: 0 !important;
	order: 6;
	padding: 1rem 1.5rem !important;
}

#vexereSearchWidget .ticket-info-wrapper .payment-info-container,
#vexereSearchWidget .ticket-info-wrapper .summary-of-fare-container {
	padding-inline: 0 !important;
}

/*
 * Màn trạng thái: liên hệ → chuyến đi → thanh toán, ba thẻ riêng.
 * Con của `.right-container` (đo trên mã thật): 1 nhãn thanh toán · 2 bảng
 * thanh toán · 3 tổng · 4 nhãn chuyến đi · 5 chi tiết chuyến · 6 nhãn liên hệ ·
 * 7 thông tin liên hệ. Dùng `:nth-child` — `:nth-of-type` đếm MỌI `div` nên
 * trượt vị trí (đã dính: nhãn chuyến đi treo lên trên thẻ liên hệ).
 */
#vexereSearchWidget .booking-success-wrapper > .right-container > .trip-info-label:nth-child( 6 ) { order: 1; }
#vexereSearchWidget .booking-success-wrapper > .right-container > .column-ticket-info { order: 2; }
#vexereSearchWidget .booking-success-wrapper > .right-container > .trip-info-label:nth-child( 4 ) { order: 3; }
#vexereSearchWidget .booking-success-wrapper > .right-container > .booking-trip-info-detail { order: 4; }
#vexereSearchWidget .booking-success-wrapper > .right-container > .trip-info-label:nth-child( 1 ) { order: 5; }

#vexereSearchWidget .booking-success-wrapper > .right-container > .payment-info-container {
	border-radius: 0 !important;
	margin: 0 !important;
	order: 6;
	padding: 1rem 1.5rem 0 !important;
}

#vexereSearchWidget .booking-success-wrapper > .right-container > .summary-of-fare-container {
	background: #fff;
	border-radius: 0 0 1rem 1rem;
	order: 7;
	padding: 0 1.5rem 1rem !important;
}

/* Hàng "nhãn · giá trị" trong thẻ liên hệ, đúng như thiết kế. */
#vexereSearchWidget .column-ticket-info:not( .booking-overall ) .table-info {
	align-items: baseline;
	column-gap: 1rem;
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	row-gap: 0.5rem;
}

#vexereSearchWidget .column-ticket-info:not( .booking-overall ) .table-info .row-divider {
	display: none !important;
}

#vexereSearchWidget .column-ticket-info:not( .booking-overall ) .table-info .info-label {
	color: var( --px-fg-muted ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	line-height: 1.5rem !important;
}

#vexereSearchWidget .column-ticket-info:not( .booking-overall ) .table-info .value {
	color: var( --px-fg ) !important;
	font-size: var( --px-fs-body, 13px ) !important;
	font-weight: 600 !important;
	line-height: 1.5rem !important;
	overflow-wrap: anywhere;
	text-align: end;
}

/* Màn hẹp: một cột, sidebar xuống dưới. */
@media ( max-width: 62rem ) {
	#vexereSearchWidget .payment-section-wrapper,
	#vexereSearchWidget .booking-success-wrapper {
		grid-template-columns: 1fr;
	}

	#vexereSearchWidget .payment-common {
		flex-direction: column;
	}
}

/* ── Tinh chỉnh sau khi đo trên giao dịch thật ─────────────────────────── */

/* Chân trang thanh toán cũng theo container rộng (trước: 1088px). */
.px-payfoot:has( ~ * ),
.px-payfoot {
	--wp--style--global--content-size: var( --wp--custom--container--wide, 82rem );
}

/* Thẻ chuyến đi: bỏ lớp đệm lồng thứ hai (16 + 16 = chữ thụt 40px). */
#vexereSearchWidget .booking-trip-info-detail .column-ticket-info.booking-overall {
	background: transparent !important;
	padding: 0 !important;
}

/*
 * Mã giảm giá: nhãn "Mã giảm giá" đã có ở trên — bỏ nhãn lặp "Nhập mã giảm
 * giá". Thẻ mã đã dùng và hàng nhập mã phải ở hai hàng riêng: Vexere mặc
 * định xếp ngang, khiến thẻ co lại khi hàng nhập chiếm 100% chiều rộng.
 */
#vexereSearchWidget .ticket-info-wrapper .coupon-input-container > .label {
	display: none !important;
}

#vexereSearchWidget .ticket-info-wrapper .coupons-content,
#vexereSearchWidget .ticket-info-wrapper .coupon-input-container {
	width: 100% !important;
}

#vexereSearchWidget .ticket-info-wrapper .coupons-content {
	align-items: stretch !important;
	flex-direction: column;
	gap: 0.75rem;
	overflow: visible;
}

#vexereSearchWidget .ticket-info-wrapper .coupons-content > .applied-coupon-container {
	flex: 0 0 auto;
	margin-inline-end: 0;
	max-width: 100%;
	width: fit-content;
}

#vexereSearchWidget .ticket-info-wrapper .applied-coupon-container > img {
	align-self: stretch;
	flex: 0 0 16px;
	height: auto !important;
	width: 16px !important;
}

#vexereSearchWidget .ticket-info-wrapper .applied-coupon-detail {
	min-width: 0;
}

#vexereSearchWidget .ticket-info-wrapper .applied-coupon-container .actions-container {
	gap: 0.5rem;
}

#vexereSearchWidget .ticket-info-wrapper .applied-coupon-container .status-container {
	max-width: none;
	width: auto;
}

#vexereSearchWidget .ticket-info-wrapper .applied-coupon-container .status-container,
#vexereSearchWidget .ticket-info-wrapper .applied-coupon-container .actions-container > a {
	flex-shrink: 0;
	white-space: nowrap;
}

#vexereSearchWidget .ticket-info-wrapper .coupons-content > .avail-coupons-container {
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
}

#vexereSearchWidget .ticket-info-wrapper .coupon-input-container .input-container {
	align-items: stretch;
	display: flex !important;
	gap: 0.5rem;
	margin-block-start: 0;
	padding: 0;
	width: 100% !important;
}

#vexereSearchWidget .ticket-info-wrapper .coupon-input-container .ant-input {
	border-radius: 0.5rem !important;
	flex: 1 1 0;
	font-size: var( --px-fs-body, 13px ) !important;
	height: 3rem;
	margin-inline-end: 0;
	min-width: 0;
	padding-inline: 1rem;
	width: 0;
}

#vexereSearchWidget .ticket-info-wrapper .coupon-input-container .ant-btn {
	border-radius: 0.5rem !important;
	flex: 0 0 clamp( 6rem, 30%, 9.125rem );
	font-size: var( --px-fs-body, 13px ) !important;
	height: 3rem !important;
	position: static;
	width: auto;
}

#vexereSearchWidget .ticket-info-wrapper .coupon-input-container .ant-btn[disabled] {
	opacity: 0.6;
}

/* "Tổng tiền vé": Vexere thụt `padding-left: 10px` inline. */
#vexereSearchWidget .summary-of-fare-container .info-label {
	padding-inline-start: 0 !important;
}

#vexereSearchWidget .ticket-info-wrapper .summary-of-fare-container .fare-value {
	color: var( --px-brand ) !important;
	font-size: var( --px-fs-title, 18px ) !important;
}

/*
 * Link "Liên hệ" ở đầu trang thanh toán: CSS Ant Design của Vexere nạp SAU
 * phucxuyen.css và tô mọi `a` xanh #1890ff. Đè lại ở tệp này (nạp sau Ant).
 */
.px-payhead__aside a {
	color: inherit !important;
}

.px-payhead__aside a:hover {
	color: var( --wp--preset--color--brand, #a61b16 ) !important;
}

/*
 * Lỗi CÓ SẴN của Vexere trên điện thoại (đã chụp bản gốc ở 390px): khung
 * hướng dẫn chuyển khoản là `.row` flex chia đôi 50/50 — nửa chữ chỉ còn 146px,
 * tiếng Việt vỡ từng từ. Màn hẹp: xếp dọc, mỗi nửa trải hết.
 */
@media ( max-width: 62rem ) {
	#vexereSearchWidget .payment-method-content .row {
		flex-direction: column !important;
		gap: 1rem;
	}

	#vexereSearchWidget .payment-method-content .row > * {
		max-width: none !important;
		width: 100% !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÀN TRẠNG THÁI TRONG MỘT JUMBOTRON TRẮNG — screenshot/5. Trạng thái thanh
   toán.png

   Mẫu: một thẻ trắng rộng bằng container, hình + tiêu đề ở trên, nội dung lồng
   bên trong. Thẻ ấy là HAI khối nối liền của template — `.px-paystatus` (block
   của mình) và `.wp-block-post-content` (chứa khung Vexere) — nên bo trên cho
   khối đầu, bo dưới cho khối sau, không khe giữa.

   Các thẻ con đã nằm trên nền trắng nên đổi bóng thành viền mảnh.
   ═══════════════════════════════════════════════════════════════════════════ */

.px-pay:has( .booking-success-wrapper ) > .px-paystatus,
.px-pay:has( .booking-success-wrapper ) > .wp-block-post-content {
	background: #fff;
	box-sizing: border-box;
	margin-inline: auto !important;
	max-width: var( --wp--custom--container--wide, 82rem ) !important;
	padding-inline: 2.5rem !important;
	width: 100%;
}

.px-pay:has( .booking-success-wrapper ) > .px-paystatus {
	border-radius: 1rem 1rem 0 0;
	margin-block: 0 !important;
	padding-block: 3rem 0.5rem;
}

.px-pay:has( .booking-success-wrapper ) > .wp-block-post-content {
	border-radius: 0 0 1rem 1rem;
	margin-block: 0 !important;
	padding-block: 0 2.5rem !important;
}

#vexereSearchWidget .booking-success-confirm-title {
	margin-block-end: 0.5rem !important;
	padding-block: 1rem 0 !important;
}

/*
 * HAI CỘT THẲNG ĐỈNH. Cột trái mở đầu bằng dòng "Đặt chỗ thành công" nên thẻ
 * trắng của nó tụt xuống so với cột phải. Không ẩn dòng ấy — nó là trạng thái
 * THẬT của Vexere (tiêu đề phía trên chỉ đoán theo tên trang). Cho
 * `.left-container` thành `display: contents` để các con của nó xếp thẳng
 * vào lưới: dòng trạng thái trải ngang cả hai cột ở hàng 1, thẻ trái và cột
 * phải cùng bắt đầu ở hàng 2. Hàng cuối `1fr` nuốt phần cột phải dài hơn,
 * không kéo giãn khoảng giữa thẻ trái và hàng nút.
 *
 * Chỉ áp khi có dòng trạng thái; màn vé huỷ không có dòng này thì giữ lưới cũ.
 */
#vexereSearchWidget .booking-success-wrapper:has( > .left-container > .booking-success-notice-title ) {
	grid-template-rows: auto auto auto 1fr;
	row-gap: 0;
}

#vexereSearchWidget .booking-success-wrapper:has( > .left-container > .booking-success-notice-title ) > .left-container {
	display: contents !important;
}

#vexereSearchWidget .booking-success-wrapper > .left-container > * {
	grid-column: 1;
	min-width: 0;
}

#vexereSearchWidget .booking-success-wrapper > .left-container > .booking-success-notice-title {
	display: flex;
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0 0 1rem !important;
}

#vexereSearchWidget .booking-success-wrapper:has( > .left-container > .booking-success-notice-title ) > .right-container {
	grid-column: 2;
	grid-row: 2 / 5;
}

/* Thẻ con trên nền trắng: viền mảnh thay bóng. */
.px-pay #vexereSearchWidget .booking-success-body,
.px-pay #vexereSearchWidget .left-container > .white-bg,
.px-pay #vexereSearchWidget .cancel-ticket-body {
	border: 1px solid var( --px-line );
	box-shadow: none !important;
}

/*
 * Cột phải là các MẢNH rời (nhãn + thân) ghép thành thẻ — viền từng mảnh:
 * nhãn viền đủ bốn cạnh, mảnh tiếp theo bỏ cạnh trên để không kẻ đôi.
 */
#vexereSearchWidget .booking-success-wrapper > .right-container > * {
	border-inline: 1px solid var( --px-line );
}

#vexereSearchWidget .booking-success-wrapper > .right-container > .trip-info-label {
	border: 1px solid var( --px-line );
}

#vexereSearchWidget .booking-success-wrapper > .right-container > .booking-trip-info-detail,
#vexereSearchWidget .booking-success-wrapper > .right-container > .column-ticket-info,
#vexereSearchWidget .booking-success-wrapper > .right-container > .summary-of-fare-container {
	border-block-end: 1px solid var( --px-line );
}

@media ( max-width: 62rem ) {
	.px-pay:has( .booking-success-wrapper ) > .px-paystatus,
	.px-pay:has( .booking-success-wrapper ) > .wp-block-post-content {
		padding-inline: 1rem !important;
	}

	#vexereSearchWidget .booking-success-wrapper:has( > .left-container > .booking-success-notice-title ) {
		grid-template-rows: none;
	}

	#vexereSearchWidget .booking-success-wrapper:has( > .left-container > .booking-success-notice-title ) > .right-container {
		grid-column: 1;
		grid-row: auto;
		margin-block-start: 1.5rem !important;
	}
}

/* Màn hẹp Vexere tô nền xám #f5f5f5 lên chính khung widget — lọt vào jumbotron. */
.px-booking:has( .booking-success-wrapper ) #vexereSearchWidget {
	background: transparent !important;
}

/*
 * Cùng lỗi 50/50 như khung chuyển khoản ở màn thanh toán: hướng dẫn QR và dòng
 * logo ngân hàng vỡ từng chữ ở 390px. Xếp dọc.
 */
@media ( max-width: 62rem ) {
	#vexereSearchWidget .payment-instruction .row {
		flex-direction: column !important;
		gap: 1rem;
	}

	#vexereSearchWidget .payment-instruction .row > * {
		max-width: none !important;
		width: 100% !important;
	}

	/* Dòng logo ngân hàng: cho xuống hàng thay vì tràn khỏi khung. */
	#vexereSearchWidget .payment-instruction .row div {
		flex-wrap: wrap;
		min-width: 0;
	}
}