/*
 * Govii Webapp — Phase 1 app shell.
 * Toàn bộ selector nằm trong .govii-app để không xung đột với theme/plugin khác.
 */

.govii-app {
	/* Bảng token màu chữ/nền/viền — Phase 6.1 chuẩn hoá tương phản. Mọi màu chữ xám
	   phải lấy từ đây, KHÔNG hard-code xám lẻ và KHÔNG dùng opacity để làm nhạt.
	   Tỉ lệ tương phản trên nền trắng (WCAG): primary 16.3:1, secondary 10.5:1,
	   muted 6.5:1 (trước là #6B7A72 chỉ 4.5:1 — nguồn gốc lỗi "chữ quá nhạt"),
	   nav-inactive 7.4:1, disabled 3.8:1 (vẫn đọc được, chỉ nhạt hơn muted để phân biệt). */
	--govii-primary: #22D80E;            /* --primary  (brand) */
	--govii-primary-dark: #1AA80B;       /* --success / nav active */
	--govii-primary-pressed: #158A09;    /* --primary-pressed */
	--govii-primary-soft: rgba(34, 216, 14, 0.12);
	/* Chữ/icon TRÊN nền xanh brand sáng (#22D80E). Trắng chỉ đạt ~1.9:1 (chói, khó đọc),
	   nên foreground mặc định của nút xanh đặc là near-black = --govii-text: ~10.4:1 —
	   vừa dễ đọc vừa sang, đúng yêu cầu C16.1. Dùng token này cho MỌI bề mặt xanh đặc. */
	--govii-on-primary: #14231A;         /* on bright-green ~10.4:1 (was white ~1.9:1) */
	--govii-text: #14231A;               /* --text-primary   16.3:1 */
	--govii-text-secondary: #35423B;     /* --text-secondary 10.5:1 */
	--govii-text-muted: #566159;         /* --text-muted      6.5:1 (was #6B7A72) */
	--govii-text-disabled: #79857D;      /* --text-disabled   3.8:1 (đọc được) */
	--govii-nav-inactive: #4C594F;       /* --nav-inactive    7.4:1 */
	--govii-bg: #FFFFFF;                  /* --surface */
	--govii-bg-soft: #F3FBF1;             /* --surface-muted */
	--govii-border: #D2DDD4;             /* --border (was #E3ECE4, quá nhạt) */
	--govii-border-strong: #BCCCC0;      /* --border-strong: viền nút chọn được (pill) */
	--govii-nav-height: 64px;
	--govii-danger: #C6402C;             /* --error */
	--govii-danger-bg: #FDECEA;
	--govii-warning: #9A6A08;            /* --warning: badge "sắp hết chỗ" */
	--govii-warning-bg: rgba(230, 160, 20, 0.16);
	--govii-forest: #0B5A3C;             /* trust surface for the compact Points balance */
	--govii-cream: #F2E8DA;              /* warm secondary surface */
	--govii-sun: #F6C14A;                /* small Points/reward accent */

	/* Design tokens (Auth & Account UX/UI Redesign V1) — spacing/radius/shadow/motion
	   formalized from the scale already in use across the app (search-btn, sheet, modal…)
	   rather than inventing new ad hoc values. Reused by the auth screen + guest card;
	   the rest of the stylesheet is left as-is (out of scope — no booking/home changes). */
	--govii-space-1: 4px;
	--govii-space-2: 8px;
	--govii-space-3: 12px;
	--govii-space-4: 16px;
	--govii-space-5: 20px;
	--govii-space-6: 24px;
	--govii-space-7: 32px;
	--govii-radius-sm: 10px;
	--govii-radius-md: 12px;
	--govii-radius-lg: 16px;
	--govii-radius-xl: 20px;
	--govii-shadow-card: 0 1px 3px rgba(20, 35, 26, 0.08), 0 12px 32px rgba(20, 35, 26, 0.10);
	--govii-control-height: 48px;
	--govii-motion-fast: 150ms;
	--govii-motion-base: 220ms;
	--govii-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

	all: initial;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* Chiều cao khung phải XÁC ĐỊNH (height) chứ không chỉ min-height: có định chiều cao
	   thì .govii-app__main (flex:1, overflow-y:auto) mới cuộn NỘI BỘ, còn header/bottom
	   nav đứng yên. Nếu chỉ min-height, nội dung dài sẽ đẩy cả khung cao lên và bottom
	   nav trôi khỏi màn hình (bug "mất thanh điều hướng" trên máy nhỏ).
	   iOS Safari: khai báo 100vh TRƯỚC làm nền, 100dvh SAU để trình duyệt hỗ trợ dvh ghi
	   đè — dvh trừ đúng thanh địa chỉ động nên chiều cao không nhảy khi thanh Safari thu
	   gọn. Giữ min-height 100dvh làm sàn cho môi trường nhúng hiếm gặp không cấp chiều cao. */
	height: 100vh;
	height: 100dvh;
	min-height: 100dvh;
	max-width: 480px;
	margin: 0 auto;
	background: var(--govii-bg);
	color: var(--govii-text);
	/* Khoá giao diện sáng: nếu không set, iOS/macOS ở chế độ tối tự "hạ tông" chữ và ô
	   nhập khiến chữ đen bị mờ, tương phản thấp trên Safari. */
	color-scheme: light;
	font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	/* Chặn Safari tự phóng to chữ khi xoay ngang; làm nét chữ đồng nhất giữa các máy. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--govii-border);
}

.govii-app *,
.govii-app *::before,
.govii-app *::after {
	box-sizing: border-box;
	font-family: inherit;
}

.govii-app :where(button) {
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	font-size: inherit;
	/* Bỏ bo góc/gradient/đổ bóng mặc định của nút trên iOS Safari để nút render giống
	   hệt nhau trên mọi thiết bị. */
	-webkit-appearance: none;
	appearance: none;
	/* iOS Safari tô chữ nút/liên kết bằng màu hệ thống nhạt hơn `color` đã set nên
	   nhãn nút (pill ngày, hàng Tài khoản) trông "mờ" trên iPhone dù đúng màu trên
	   Chrome — ép text-fill theo currentColor để màu chữ đúng token trên mọi máy. */
	-webkit-text-fill-color: currentColor;
}

/* Liên kết trong app (hàng Tài khoản, hotline) cũng cần ép fill giống nút — iOS
   Safari mặc định tô <a> bằng màu link hệ thống/mờ. */
.govii-app :where(a) {
	-webkit-text-fill-color: currentColor;
}

/* === Phase 6.1.2 — chống đè màu nút từ Elementor Global Kit ===
   NGUYÊN NHÂN GỐC (xác minh trực tiếp trên govii.vn): theme Elementor bơm rule
   `.elementor-kit-13 button { color:#F0F1F5 }` (độ đặc hiệu 0,1,1) từ
   /wp-content/uploads/elementor/css/post-13.css, đè MỌI chữ <button> của app
   thành gần-trắng. Rule reset nút ở trên dùng :where() nên độ đặc hiệu = 0 và
   THUA; các rule màu theo component (.govii-app__date-pill, __nav-item,
   __account-item…) chỉ (0,1,0) nên cũng THUA. Vì thế pill ngày, bottom nav và
   hàng Tài khoản bị mờ trên live dù đúng token trong QA harness (harness không
   nạp CSS Elementor). Lỗi này KHÔNG phải Safari-only — reproduce trên mọi engine.
   Elementor chỉ set `color` (không set -webkit-text-fill-color) nên rule
   `:where(button){ -webkit-text-fill-color: currentColor }` ở trên vẫn bám đúng
   currentColor — ta chỉ cần giành lại `color`.
   CÁCH SỬA: đặt lại màu chữ MẶC ĐỊNH cho mọi nút trong app ở (0,1,1) — hoà độ
   đặc hiệu với Elementor và THẮNG theo thứ tự nạp (govii-app.css nạp SAU
   post-13.css, đã verify link order trên live). Các trạng thái KHÔNG dùng màu
   mặc định (nav inactive, CTA nền xanh, nút link, hàng đăng xuất) được nâng
   specificity riêng bên dưới để rule mặc định không nuốt. */
.govii-app button {
	color: var(--govii-text);
}

/* Bottom nav khi KHÔNG active: chữ mờ có chủ đích (de-emphasize) nhưng vẫn đọc
   được — nav-inactive #4C594F ~7.4:1. Không phải trạng thái disabled. Item
   .is-active vẫn xanh nhờ rule (0,2,0) riêng, không bị :not() này chạm tới. */
.govii-app__nav-item:not(.is-active) {
	color: var(--govii-nav-inactive);
}

/* Nút hành động chính trên nền Primary xanh sáng (#22D80E): foreground là near-black
   (--govii-on-primary ~10.4:1), KHÔNG phải trắng (~1.9:1, chói/khó đọc) — quyết định
   C16.1. Nâng lên (0,2,0) để thắng cả rule mặc định (0,1,1) lẫn Elementor. Icon/spinner
   trong nút kế thừa currentColor nên cũng thành near-black. Trạng thái :disabled của các
   nút này đã là (0,2,0) với màu muted riêng nên :not(:disabled) không đụng vào. */
.govii-app__search-btn:not(:disabled),
.govii-app__booking-cta:not(:disabled),
.govii-app__auth-cta:not(:disabled) {
	color: var(--govii-on-primary);
}

/* === C17.1 — chống Elementor kit đè MÀU KHI TƯƠNG TÁC (hover/active/focus) ===
   NGUYÊN NHÂN GỐC (Founder live QA): Elementor bơm rule TRẠNG THÁI
   `.elementor-kit-* button:hover|:active|:focus { color:#fff; background-color:#36DB1138 }`
   độ đặc hiệu (0,2,1) — CAO HƠN rule màu bình thường của app (0,2,0). Nên KHI NHẤN nút xanh:
   chữ/icon nhảy về TRẮNG + nền xanh nhạt đi. Các rule :hover/:active của app chỉ đặt
   `background`, không đặt `color`, nên không chặn được phần màu chữ.
   CÁCH SỬA: ghim foreground (và nền cho control không có hiệu ứng nhấn riêng) ở (0,3,0)
   STATELESS — không kèm pseudo, nên THẮNG cả (0,2,1) của Elementor ở MỌI trạng thái. Icon
   dùng currentColor + -webkit-text-fill-color nên đi theo. Chỉ CSS trong .govii-app. */

/* (a) Mọi nút NỀN XANH ĐẶC: chữ + icon luôn near-black ở mọi trạng thái. */
.govii-app .govii-app__search-btn:not(:disabled),
.govii-app .govii-app__booking-cta:not(:disabled),
.govii-app .govii-app__auth-cta:not(:disabled),
.govii-app .govii-app__date-pill.is-active,
.govii-app .govii-app__filter-chip.is-active,
.govii-app .govii-app__seatsel-seat.is-selected,
.govii-app .govii-app__install-cta,
.govii-app .govii-app__install-sheet-ack,
.govii-app .govii-app__gxu-login:not(:disabled),
.govii-app .govii-app__gxu-retry:not(:disabled),
.govii-app .govii-app__reward-redeem:not(:disabled),
.govii-app .govii-app__reward-retry:not(:disabled),
.govii-app .govii-app__reward-chip.is-active {
	color: var(--govii-on-primary);
	-webkit-text-fill-color: var(--govii-on-primary);
}

/* (b) Nút OUTLINE "Lấy vị trí": chữ + icon giữ xanh primary-dark mọi trạng thái (Elementor
   ép trắng sẽ làm mất chữ trên nền sáng). */
.govii-app .govii-app__locate-action:not(:disabled) {
	color: var(--govii-primary-dark);
	-webkit-text-fill-color: var(--govii-primary-dark);
}

/* (c) Control KHÔNG có hiệu ứng nhấn riêng (chip/toggle/ghế/install): giữ NỀN xanh đặc khi
   hover/active, không để Elementor phủ #36DB1138 làm nhạt. (Các CTA có darken-on-press
   riêng ở (0,3,0) nên không nằm ở đây.) */
.govii-app .govii-app__date-pill.is-active,
.govii-app .govii-app__filter-chip.is-active,
.govii-app .govii-app__seatsel-seat.is-selected,
.govii-app .govii-app__install-cta,
.govii-app .govii-app__install-sheet-ack,
.govii-app .govii-app__reward-chip.is-active {
	background: var(--govii-primary);
	border-color: var(--govii-primary);
}

/* Nút dạng liên kết ("Quên mã PIN?"…): chữ xanh primary-dark, không phải màu
   thân chữ mặc định. */
.govii-app .govii-app__link-btn {
	color: var(--govii-primary-dark);
}

/* Hàng nguy hiểm (Đăng xuất): giữ đỏ cảnh báo, không để rule mặc định phủ đen. */
.govii-app .govii-app__account-item--danger {
	color: var(--govii-danger);
}

/* Chuẩn hoá mọi ô nhập: bỏ style native của iOS Safari (viền trong, bo góc, nền
   gradient) để ô nhập đồng nhất; giữ màu chữ đúng token thay vì để iOS làm mờ. */
.govii-app :where(input, textarea, select) {
	-webkit-appearance: none;
	appearance: none;
	color: var(--govii-text);
	-webkit-text-fill-color: var(--govii-text);
	background-clip: padding-box;
}

.govii-app :where(input, textarea)::placeholder {
	color: var(--govii-text-muted);
	-webkit-text-fill-color: var(--govii-text-muted);
	opacity: 1;
}

/* === Chống Elementor Global Kit ép BO TRÒN (radius) nút/ô nhập ===
   Cùng gốc với vụ màu chữ ở trên: `.elementor-kit-13 button` (và input) trên live
   set `border-radius: 100px`, biến ô Điểm đi/Điểm đến và nút thành viên thuốc (oval)
   dù component chỉ khai 12px ở (0,1,0) nên THUA. Ta giành lại radius đúng ý ở (0,2,0)
   + !important cho từng control booking để trên production chúng là field bo góc mềm,
   KHÔNG phải pill. Pill ngày (date-pill) CỐ Ý tròn nên không nằm trong danh sách này. */
.govii-app .govii-app__field {
	border-radius: 12px !important;
}

.govii-app .govii-app__date-input {
	border-radius: 10px !important;
}

.govii-app .govii-app__search-btn {
	border-radius: 12px !important;
}

.govii-app .govii-app__quick-item {
	border-radius: 12px !important;
}

/* ---------- Header ---------- */

.govii-app__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--govii-border);
	background: var(--govii-bg);
	position: sticky;
	top: 0;
	z-index: 2;
}

.govii-app__brand {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 17px;
}

/* Logo Govii chính thức trong header — cao 28px, tự suy rộng theo tỉ lệ gốc (1131×419),
   không kéo giãn, không bo góc (chặn rò rỉ Elementor img, §13). height/width dành sẵn ở
   <img> chống layout shift. */
.govii-app__logo {
	display: block;
	height: 28px;
	width: auto;
	max-width: 120px;
	border-radius: 0 !important;
}

.govii-app__tagline {
	flex: 1;
	font-size: 12px;
	color: var(--govii-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.govii-app__bell {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--govii-text);
	flex-shrink: 0;
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease);
}

@media (hover: hover) {
	.govii-app__bell:hover {
		background: var(--govii-bg-soft);
	}
}

.govii-app__bell:active {
	background: var(--govii-primary-soft);
	transform: scale(0.92);
}

.govii-app__bell:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

/* ---------- Main / screens ---------- */

.govii-app__main {
	flex: 1 1 auto;
	overflow-y: auto;
	position: relative;
	padding: 16px;
	padding-bottom: 24px;
}

.govii-app__screen {
	display: none;
}

.govii-app__screen.is-active {
	display: block;
	animation: govii-app-fade-in .18s ease-out;
}

@keyframes govii-app-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.govii-app__placeholder-card {
	background: var(--govii-bg-soft);
	border: 1px solid var(--govii-border);
	border-radius: 16px;
	padding: 20px;
}

.govii-app__placeholder-card h2 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__placeholder-card p {
	margin: 0;
	color: var(--govii-text-muted);
	font-size: 14px;
}

/* ---------- Loading state ---------- */

.govii-app__loading {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.75);
	z-index: 3;
}

.govii-app__main.is-loading .govii-app__loading {
	display: flex;
}

.govii-app__spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid var(--govii-border);
	border-top-color: var(--govii-primary);
	animation: govii-app-spin .7s linear infinite;
}

@keyframes govii-app-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Bottom navigation ---------- */

.govii-app__nav {
	display: flex;
	border-top: 1px solid var(--govii-border);
	background: var(--govii-bg);
	position: sticky;
	bottom: 0;
	z-index: 2;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.govii-app__nav-item {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 4px 8px;
	min-height: var(--govii-nav-height);
	background: transparent;
	/* Task 8B §25 — chặn rò `border-radius:100px` từ Elementor: nếu không, nền hover
	   (dính lại sau khi chạm trên thiết bị cảm ứng) hiện thành khối bo tròn/ô-van xanh
	   nhạt lớn ở tab đang chọn. Bỏ nền, radius 0, đánh dấu active bằng vạch trên. */
	border-radius: 0 !important;
	transition: color var(--govii-motion-fast) var(--govii-motion-ease);
	/* Tab chưa chọn KHÔNG phải trạng thái disabled — vẫn bấm được nên phải nhìn rõ.
	   Dùng token nav-inactive (7.4:1) thay cho muted (trước 4.5:1, icon nét mảnh +
	   nhãn 11px gần như tàng hình). Icon dùng stroke=currentColor nên đậm theo luôn. */
	color: var(--govii-nav-inactive);
}

.govii-app__nav-item span {
	font-size: 11px;
	font-weight: 600;
}

.govii-app__nav-item.is-active {
	color: var(--govii-primary-dark);
}

/* Vạch chỉ báo tab đang chọn — accent xanh gọn, nhất quán với brand (xanh làm điểm nhấn),
   thay cho khối nền pale-green nặng nề. */
.govii-app__nav-item.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--govii-primary);
}

/* §26 — hover chỉ trên thiết bị có con trỏ thật (tránh trạng thái dính sau khi chạm). */
@media (hover: hover) {
	.govii-app__nav-item:not(.is-active):hover {
		color: var(--govii-primary-dark);
	}
}

.govii-app__nav-item:active {
	color: var(--govii-primary-pressed);
}

.govii-app__nav-item:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: -3px;
	border-radius: 6px !important;
}

/* ==========================================================================
   Phase 2 — Trang chủ: tìm hành trình
   ========================================================================== */

/* ---------- Khối tìm hành trình ---------- */

.govii-app__search-card {
	background: var(--govii-bg);
	border: 1px solid var(--govii-border);
	border-radius: 16px;
	padding: 12px;
	margin-bottom: 16px;
}

/* Ô Điểm đi / Điểm đến — TRÔNG NHƯ FIELD BOOKING, không phải nút CTA: nền mờ, viền
   mảnh, bo góc mềm 12px (KHÔNG phải pill), chấm định vị bên trái + mũi ">" báo mở
   bộ chọn. Bo góc được giành lại ở (0,2,0) bên dưới để Elementor không ép thành oval. */
.govii-app__field {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 12px 14px;
	min-height: 60px;
	border-radius: 12px;
	border: 1px solid var(--govii-border);
	background: var(--govii-bg-soft);
}

.govii-app__field + .govii-app__field {
	margin-top: 8px;
}

/* Chấm định vị: điểm đi = chấm xanh đặc; điểm đến = vòng viền (giống pin đích). */
.govii-app__field-marker {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-left: 2px;
}

.govii-app__field-marker--from {
	background: var(--govii-primary);
}

.govii-app__field-marker--to {
	background: transparent;
	border: 2px solid var(--govii-text-muted);
}

.govii-app__field-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

.govii-app__field-caret {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--govii-text-muted);
}

.govii-app__field-label {
	font-size: 12px;
	color: var(--govii-text-muted);
}

.govii-app__field-value {
	font-size: 16px;
	font-weight: 600;
	color: var(--govii-text-muted);
	margin-top: 2px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.govii-app__field.has-value .govii-app__field-value {
	color: var(--govii-text);
}

.govii-app__field:disabled {
	/* Dùng màu chữ mờ tường minh thay vì opacity — trên iOS Safari opacity làm chữ đen
	   xỉn xuống khó đọc; token disabled (3.8:1) vẫn đọc được nhưng nhạt hơn muted để
	   phân biệt rõ enabled/disabled. */
	background: var(--govii-bg-soft);
	color: var(--govii-text-disabled);
	cursor: not-allowed;
}

.govii-app__field:disabled .govii-app__field-marker--to {
	border-color: var(--govii-text-disabled);
}

.govii-app__field:not(:disabled):focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__date-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.govii-app__date-pill {
	flex: 0 0 auto;
	padding: 10px 16px;
	min-height: 40px;
	border-radius: 999px;
	/* Pill chưa chọn (Ngày mai, Chọn ngày khác) là nút chọn được, KHÔNG phải disabled.
	   Viền mảnh #E3ECE4 cũ (1.2:1) khiến pill trông "trắng trơn" như đã khoá; dùng
	   viền đậm hơn + chữ 600 để nó đọc rõ là nút bấm được, phân biệt với disabled. */
	border: 1px solid var(--govii-border-strong);
	background: var(--govii-bg);
	color: var(--govii-text);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* Pill ngày bị khoá (vd. chưa đủ điều kiện) — khác hẳn trạng thái chọn được: nền mờ,
   chữ disabled vẫn đọc được, không dùng opacity. */
.govii-app__date-pill:disabled {
	background: var(--govii-bg-soft);
	border-color: var(--govii-border);
	color: var(--govii-text-disabled);
	cursor: not-allowed;
}

.govii-app__date-pill.is-active {
	background: var(--govii-primary);
	border-color: var(--govii-primary);
	color: var(--govii-on-primary);
}

.govii-app__date-input {
	margin-top: 8px;
	width: 100%;
	padding: 10px 12px;
	min-height: 44px;
	border-radius: 10px;
	border: 1px solid var(--govii-border);
	/* ≥16px để iPhone không auto-zoom khi focus. */
	font-size: 16px;
	color: var(--govii-text);
	background: var(--govii-bg);
}

.govii-app__search-btn {
	width: 100%;
	margin-top: 14px;
	padding: 14px;
	min-height: 50px;
	border-radius: 12px;
	background: var(--govii-primary);
	color: var(--govii-on-primary);
	font-size: 16px;
	font-weight: 700;
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease);
}

/* Trạng thái nhấn thống nhất cho các nút primary (Tìm phương án + Tiếp tục), giống
   auth-cta: hover đậm hơn, nhấn xuống dùng primary-pressed + thu nhẹ để có phản hồi. */
.govii-app__search-btn:not(:disabled):hover,
.govii-app__booking-cta:not(:disabled):hover {
	background: var(--govii-primary-dark);
}

.govii-app__search-btn:not(:disabled):active,
.govii-app__booking-cta:not(:disabled):active {
	background: var(--govii-primary-pressed);
	transform: scale(0.98);
}

.govii-app__search-btn:disabled {
	background: var(--govii-border);
	color: var(--govii-text-muted);
}

.govii-app__search-btn:not(:disabled):focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

/* ---------- Trang chủ: lời chào + tiện ích ---------- */

/* Lời chào gọn cho khách đã đăng nhập (JS bật/tắt qua [hidden]). Nhẹ, 1 hàng, không
   biến Home thành dashboard: tên bên trái + chip "Điểm" bấm được bên phải. */
.govii-app__home-greeting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.govii-app__home-greeting[hidden] {
	display: none;
}

.govii-app__home-hi {
	font-size: 15px;
	font-weight: 600;
	color: var(--govii-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.govii-app__home-points {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	min-height: 34px;
	border-radius: 999px;
	border: 1px solid var(--govii-primary);
	background: var(--govii-primary-soft);
	color: var(--govii-primary-dark);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.govii-app__home-points-dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--govii-primary-dark);
	transform: rotate(45deg);
}

.govii-app .govii-app__home-points {
	border-radius: 999px !important;
	color: var(--govii-primary-dark);
}

.govii-app__home-points:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__home-title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	color: var(--govii-text);
	letter-spacing: -0.01em;
}

/* Nhãn nhóm nhỏ ("Đi nhanh", "Các dịch vụ Govii"). */
.govii-app__section-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--govii-text-secondary);
}

/* Đi nhanh — 3 lối tắt bằng nhau, đủ cao để chạm thoải mái trên mobile. */
.govii-app__quick {
	margin-bottom: 20px;
}

/* C03 — a compact, read-only view of the nearest canonical Activity booking. */
.govii-app__next-trip {
	margin: 20px 0;
}

.govii-app__next-trip-label {
	margin: 0 0 8px;
	color: var(--govii-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.govii-app__next-trip-card {
	border: 1px solid var(--govii-border);
	border-radius: 14px;
	background: var(--govii-bg);
	padding: 14px;
}

.govii-app__next-trip-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.govii-app__next-trip-service {
	min-width: 0;
	color: var(--govii-text-muted);
	font-size: 12px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.govii-app__next-trip-route {
	margin: 0;
	color: var(--govii-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.govii-app__next-trip-when {
	margin: 4px 0 12px;
	color: var(--govii-text-secondary);
	font-size: 13px;
	font-weight: 500;
}

.govii-app__next-trip-cta {
	min-height: 44px;
	padding: 10px 0;
	border: 0;
	background: transparent;
	color: var(--govii-primary-dark);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	cursor: pointer;
}

.govii-app__next-trip-cta:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__next-trip-skeleton {
	height: 154px;
	border-radius: 14px;
	background: linear-gradient(90deg, #edf1ef 25%, #f7f9f8 38%, #edf1ef 60%);
	background-size: 400% 100%;
	animation: govii-app-pulse 1.35s ease infinite;
}

.govii-app__quick-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.govii-app__quick-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 6px;
	min-height: 72px;
	border-radius: 12px;
	border: 1px solid var(--govii-border);
	background: var(--govii-bg);
	color: var(--govii-text);
	text-align: center;
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), border-color var(--govii-motion-fast) var(--govii-motion-ease);
}

.govii-app__quick-item:hover {
	background: var(--govii-bg-soft);
	border-color: var(--govii-border-strong);
}

.govii-app__quick-item:active {
	background: var(--govii-primary-soft);
}

.govii-app__quick-item:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__quick-icon {
	display: inline-flex;
	color: var(--govii-primary-dark);
}

.govii-app__quick-label {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--govii-text);
}

/* Ảnh icon dịch vụ (helper ServiceAssets, Task 10B) — dùng chung cho mọi ô icon.
   border-radius:0 !important đè leak .elementor-kit-13 img{border-radius}. */
.govii-app__service-icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0 !important;
}

/* ---------- Kết quả (nối tiếp thẻ tìm kiếm — Task 10C §1) ---------- */

/* Vùng kết quả nằm NGAY TRONG .govii-app__search-card, ngay dưới nút "Tìm phương án".
   Khi rỗng (chưa tìm) không chiếm chỗ. Khi có nội dung, một đường kẻ MẢNH phía trên
   nối phương án với form — không phải divider cứng, không nền section khác, không card
   bao ngoài. Đây là điểm khác biệt "một mặt phẳng booking liền mạch" so với bản cũ. */
.govii-app__results:not(:empty) {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--govii-border);
}

.govii-app__results-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.govii-app__results-head-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.govii-app__results-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__route-summary {
	font-size: 12.5px;
	color: var(--govii-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* "Tìm lại" — nút chữ nhẹ (CTA lớn đã thu gọn). Giành lại bo góc + màu chữ rõ để
   Elementor không ép pill / làm chữ nhạt. */
.govii-app__research {
	flex: 0 0 auto;
	padding: 4px 6px;
	border: 0;
	background: transparent;
	border-radius: 8px !important;
	color: var(--govii-primary-dark) !important;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.govii-app__research:hover {
	text-decoration: underline;
}

.govii-app__research:focus-visible {
	outline: 2px solid var(--govii-primary);
	outline-offset: 2px;
}

.govii-app__result-skeleton {
	height: 60px;
	border-radius: 12px;
	background: var(--govii-bg-soft);
	margin-bottom: 8px;
	animation: govii-app-pulse 1.1s ease-in-out infinite;
}

@keyframes govii-app-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

/* ---------- Danh sách phương án (list-row, Task 10C §3/§12) ---------- */

.govii-app__option-list {
	display: flex;
	flex-direction: column;
}

/* Mỗi phương án là một HÀNG chọn được — cảm giác chọn mục trong danh sách, không phải
   card tiếp thị. border-radius:0 !important đè leak .elementor-kit-13 button{radius:100px}
   (nếu không sẽ thành viên thuốc oval). Đường phân cách mảnh giữa các hàng; hàng đầu không kẻ. */
.govii-app__option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 12px 2px;
	min-height: 60px;
	border: 0;
	border-top: 1px solid var(--govii-border);
	border-radius: 0 !important;
	background: transparent;
	color: var(--govii-text);
	cursor: pointer;
	transition: background var(--govii-motion-fast) var(--govii-motion-ease);
}

.govii-app__option:first-child {
	border-top: 0;
}

.govii-app__option:hover {
	background: var(--govii-bg-soft);
}

.govii-app__option:focus-visible {
	outline: 2px solid var(--govii-primary);
	outline-offset: -2px;
}

/* Ô icon phương án — kích thước dành sẵn chống layout shift. Ảnh lỗi → ô trung tính. */
.govii-app__option-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--govii-primary-soft);
	overflow: hidden;
}

.govii-app__option-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.govii-app__option-title {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--govii-text);
	overflow-wrap: anywhere;
}

/* Task 8B §5 — dòng phụ/meta xuống dòng tự nhiên, không tràn ngang ở 320px. */
.govii-app__option-sub {
	font-size: 13px;
	color: var(--govii-text-muted);
	overflow-wrap: anywhere;
}

.govii-app__option-meta {
	font-size: 12px;
	color: var(--govii-text-secondary);
	overflow-wrap: anywhere;
}

/* Cột phải (giá + chevron) có KHÔNG GIAN ĐƯỢC BẢO VỆ: không co dưới nội dung của mình,
   nhưng cũng giới hạn bề rộng để phần chữ bên trái luôn còn chỗ (§5). */
.govii-app__option-right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	max-width: 45%;
	text-align: right;
}

.govii-app__option-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--govii-primary-dark);
	white-space: nowrap;
}

.govii-app__option-chevron {
	font-size: 20px;
	line-height: 1;
	color: var(--govii-text-muted);
}

/* Priority 2+3 — chạm vào hàng phương án phải thấy PHẢN HỒI NGAY: nền xanh nhạt +
   con trỏ khoá, hàng bị disabled nên không chạm lặp được. */
.govii-app__option.is-pending {
	background: var(--govii-primary-soft);
	cursor: progress;
}

.govii-app__option.is-pending .govii-app__option-title {
	color: var(--govii-primary-dark);
}

/* Chevron biến thành spinner (tái dùng keyframe govii-app-spin có sẵn) — tín hiệu
   "đang chuẩn bị chuyến" rõ ràng mà không đổi layout. */
.govii-app__option.is-pending .govii-app__option-chevron {
	width: 16px;
	height: 16px;
	border: 2px solid var(--govii-primary-soft);
	border-top-color: var(--govii-primary-dark);
	border-radius: 50%;
	color: transparent;
	overflow: hidden;
	text-indent: -999px;
	animation: govii-app-spin 0.7s linear infinite;
}

/* ---------- Vùng nội dung Home thứ cấp (Task 10C §5–§9) ---------- */

.govii-app__zone {
	margin-top: 20px;
}

.govii-app__zone[hidden] {
	display: none;
}

.govii-app__zone-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

/* Ưu đãi — rail cuộn ngang (banner). overflow-x nội bộ, KHÔNG tràn app root. */
.govii-app__zone-body--rail {
	flex-direction: row;
	gap: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.govii-app__zone-body--rail::-webkit-scrollbar {
	display: none;
}

.govii-app__zone-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 12px;
	min-height: 60px;
	border: 1px solid var(--govii-border);
	border-radius: 12px !important;
	background: var(--govii-bg);
	color: var(--govii-text);
	cursor: pointer;
}

.govii-app__zone-item:hover {
	background: var(--govii-bg-soft);
}

.govii-app__zone-item-img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 10px !important;
}

.govii-app__zone-item-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.govii-app__zone-item-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--govii-text);
}

.govii-app__zone-item-sub {
	font-size: 12.5px;
	color: var(--govii-text-muted);
}

/* Banner ưu đãi — thẻ ngang trong rail, rộng cố định để nhìn được thẻ kế bên. */
.govii-app__promo-card {
	flex: 0 0 auto;
	width: 264px;
	max-width: 82vw;
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 0;
	border: 1px solid var(--govii-border);
	border-radius: 14px !important;
	background: var(--govii-bg);
	color: var(--govii-text);
	overflow: hidden;
	cursor: pointer;
}

.govii-app__promo-img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 0 !important;
}

.govii-app__promo-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
}

.govii-app__promo-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__promo-sub {
	font-size: 13px;
	color: var(--govii-text-muted);
}

/* ---------- Fallback (không có tuyến / không có phương tiện / lỗi) ---------- */

.govii-app__fallback-card {
	border: 1px dashed var(--govii-border);
	border-radius: 16px;
	padding: 20px;
	text-align: center;
}

.govii-app__fallback-card h3 {
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--govii-text);
}

.govii-app__fallback-card p {
	margin: 0;
	font-size: 14px;
	color: var(--govii-text-muted);
}

.govii-app__fallback-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.govii-app__fallback-btn {
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid var(--govii-border);
	background: var(--govii-bg-soft);
	color: var(--govii-text);
	font-size: 14px;
	font-weight: 600;
}

/* ---------- Bottom sheet chọn địa điểm ---------- */

.govii-app__sheet-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 35, 26, 0.45);
	z-index: 10;
}

/* Khi sheet chọn điểm mở: khoá cuộn nền (Task 8B §3 — "no page background scroll"). */
.govii-app--sheet-open .govii-app__main {
	overflow: hidden;
}

.govii-app__sheet[hidden],
.govii-app__sheet-overlay[hidden] {
	display: none;
}

/* Bottom sheet chọn điểm đi/đến (Task 8B §3 — sửa lỗi bàn phím iOS thật).
   NGUYÊN NHÂN GỐC: khi ô tìm kiếm focus, bàn phím iOS đẩy visualViewport co lại nhưng
   sheet `position:fixed; bottom:0` vẫn neo theo layout viewport → danh sách kết quả nằm
   KHUẤT sau bàn phím, không chạm chọn được.
   CÁCH SỬA: JS (govii-home-screen.js) theo dõi window.visualViewport và set 2 biến:
     --govii-kb-inset  = chiều cao bàn phím (nâng sheet lên trên bàn phím)
     --govii-vv-height = chiều cao vùng nhìn thấy thực (giới hạn max-height sheet)
   Header + ô tìm luôn hiển thị (flex 0 0 auto); chỉ .govii-app__sheet-list cuộn nội bộ
   (flex:1; min-height:0). Không hardcode chiều cao 1 dòng iPhone; safe-area vẫn tôn trọng. */
.govii-app__sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--govii-kb-inset, 0px);
	max-width: 480px;
	margin: 0 auto;
	max-height: 82vh;
	max-height: min(82dvh, calc(var(--govii-vv-height, 82vh) - 12px));
	display: flex;
	flex-direction: column;
	background: var(--govii-bg);
	border-radius: 20px 20px 0 0;
	z-index: 11;
	padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0));
	box-shadow: 0 -8px 24px rgba(20, 35, 26, 0.16);
	transition: bottom var(--govii-motion-fast) var(--govii-motion-ease);
}

/* Khi bàn phím đang mở, safe-area-inset-bottom = 0 và sheet đã được nâng bằng
   --govii-kb-inset; giảm padding đáy để tối đa hoá không gian danh sách. */
.govii-app__sheet.is-keyboard-open {
	padding-bottom: 8px;
}

.govii-app__sheet-handle {
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: var(--govii-border);
	margin: 6px auto 10px;
}

.govii-app__sheet-handle,
.govii-app__sheet-header,
.govii-app__sheet-search {
	flex: 0 0 auto;
}

.govii-app__sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.govii-app__sheet-header h3 {
	margin: 0;
	font-size: 17px;
	color: var(--govii-text);
}

.govii-app__sheet-close {
	width: 44px;
	height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	border-radius: 50%;
	color: var(--govii-text-muted);
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease);
}

@media (hover: hover) {
	.govii-app__sheet-close:hover {
		background: var(--govii-bg-soft);
	}
}

.govii-app__sheet-close:active {
	background: var(--govii-primary-soft);
	transform: scale(0.92);
}

.govii-app__sheet-close:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__sheet-search {
	margin-top: 8px;
}

.govii-app__sheet-search input {
	width: 100%;
	padding: 12px 14px;
	min-height: 46px;
	border-radius: 12px;
	border: 1px solid var(--govii-border);
	/* ≥16px để iPhone không auto-zoom khi focus. */
	font-size: 16px;
	color: var(--govii-text);
	background: var(--govii-bg-soft);
}

.govii-app__sheet-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	margin-top: 8px;
	padding-bottom: 8px;
}

.govii-app__sheet-heading {
	margin: 8px 4px 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--govii-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.govii-app .govii-app__sheet-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	text-align: left;
	padding: 12px 10px;
	min-height: 52px;
	border-radius: 10px !important;
}

.govii-app__sheet-item:hover {
	background: var(--govii-bg-soft);
}

.govii-app__sheet-item-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--govii-text);
}

.govii-app__sheet-item-area {
	max-width: 100%;
	margin-top: 1px;
	overflow: hidden;
	color: var(--govii-text-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.govii-app__sheet-item-price {
	margin-top: 2px;
	color: var(--govii-primary-dark);
	font-size: 13px;
	font-weight: 700;
}

/* Priority 1 — gợi ý điểm ĐANG có chuyến Govii phải NỔI mà không lố như quảng cáo:
   viền trái xanh mảnh (inset shadow, không đẩy layout) + nền xanh rất nhạt. */
.govii-app__sheet-item.is-govii-active {
	background: var(--govii-primary-soft);
	box-shadow: inset 3px 0 0 var(--govii-primary);
	border-radius: 10px !important;
}

/* Nhãn trạng thái "Có chuyến / Đang hoạt động": dấu chấm xanh + chữ xanh đậm, nhỏ,
   như tín hiệu thông tin — KHÔNG phải banner ưu đãi. */
.govii-app__sheet-item-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 700;
	color: var(--govii-primary-dark);
}

.govii-app__sheet-item-tag::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--govii-primary);
}

.govii-app .govii-app__sheet-retry {
	display: block;
	min-height: 44px;
	margin: 0 auto 12px;
	padding: 10px 16px;
	border: 1px solid var(--govii-border);
	border-radius: 10px !important;
	background: var(--govii-bg-soft);
	color: var(--govii-text);
	font-size: 14px;
	font-weight: 600;
}

.govii-app .govii-app__sheet-item:focus-visible,
.govii-app .govii-app__sheet-retry:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__sheet-item--current {
	font-size: 15px;
	font-weight: 600;
	color: var(--govii-primary-dark);
}

.govii-app__current-location {
	margin-bottom: 8px;
	padding: 4px;
	border: 1px solid var(--govii-border);
	border-radius: 8px;
	background: var(--govii-bg-soft);
}

.govii-app__current-location-title,
.govii-app__current-location-name,
.govii-app__current-location-meta,
.govii-app__current-location-address,
.govii-app__current-location-message {
	margin: 5px 8px;
}

.govii-app__current-location-title,
.govii-app__current-location-meta,
.govii-app__current-location-address,
.govii-app__current-location-message {
	font-size: 12px;
	color: var(--govii-text-muted);
}

.govii-app__current-location-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__current-location-confirm {
	width: calc(100% - 16px);
	min-height: 42px;
	margin: 8px;
	border: 0;
	border-radius: 8px;
	background: var(--govii-primary);
	color: var(--govii-on-primary);
	font-size: 14px;
	font-weight: 700;
}

.govii-app__current-location-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--govii-space-2);
	margin-top: var(--govii-space-3);
}

.govii-app__current-location-actions .govii-app__current-location-confirm,
.govii-app__current-location-actions .govii-app__sheet-retry {
	margin: 0;
	flex: 1 1 140px;
}

.govii-app__booking-detail-support {
	display: block;
	margin-top: var(--govii-space-5);
	padding: var(--govii-space-4);
	border: 1px solid var(--govii-border);
	border-radius: var(--govii-radius-md);
	background: var(--govii-bg-soft);
	color: var(--govii-text);
	text-decoration: none;
}

.govii-app__booking-detail-support-title,
.govii-app__booking-detail-support-copy {
	display: block;
	overflow-wrap: anywhere;
}

.govii-app__booking-detail-support-title { font-weight: 700; }
.govii-app__booking-detail-support-copy { margin-top: 4px; color: var(--govii-text-muted); font-size: 14px; line-height: 1.45; }

.govii-app__sheet-empty {
	text-align: center;
	color: var(--govii-text-muted);
	font-size: 14px;
	padding: 24px 12px;
}

.govii-app__sheet-skeleton {
	height: 48px;
	border-radius: 10px;
	background: var(--govii-bg-soft);
	margin-bottom: 8px;
	animation: govii-app-pulse 1.1s ease-in-out infinite;
}

/* ---------- Toast ---------- */

/* Task 8B §8 — hệ thống thông báo (toast) dùng chung: dễ đọc trên iPhone (font ≥15,
   padding thoải mái, xuống dòng được), nền tối để tương phản chắc chắn ở mọi màn hình,
   phân biệt trạng thái bằng dải màu bên trái theo bộ semantic (không dùng chữ trắng trên
   nền xanh sáng — tránh bẫy tương phản đã biết). Mặc định = trung tính/thông tin. */
.govii-app__toast {
	--govii-toast-accent: rgba(255, 255, 255, 0.55);
	position: fixed;
	left: 50%;
	bottom: calc(84px + env(safe-area-inset-bottom, 0));
	transform: translateX(-50%);
	width: max-content;
	max-width: min(92%, 420px);
	background: rgba(20, 35, 26, 0.96);
	color: #ffffff;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
	padding: 12px 16px;
	border-radius: 14px;
	border-left: 3px solid var(--govii-toast-accent);
	box-shadow: 0 8px 24px rgba(20, 35, 26, 0.28);
	z-index: 12;
	text-align: left;
	overflow-wrap: anywhere;
	animation: govii-app-toast-in var(--govii-motion-base) var(--govii-motion-ease);
}

.govii-app__toast.is-success { --govii-toast-accent: #46E42F; }
.govii-app__toast.is-error   { --govii-toast-accent: #FF8A75; }
.govii-app__toast.is-warning { --govii-toast-accent: #F4C24B; }
.govii-app__toast.is-info    { --govii-toast-accent: #8FD8FF; }

@keyframes govii-app-toast-in {
	from { opacity: 0; transform: translate(-50%, 8px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Đăng nhập: dedicated auth screen (Auth & Account UX/UI Redesign V1) ----------
   Full-screen route bên trong .govii-app, KHÔNG phải modal — mirror đúng cơ chế đã có
   của .govii-app__booking-overlay (fixed → absolute ở desktop breakpoint) để nhất quán,
   nhưng ẩn/hiện header+main+nav bằng thuộc tính `hidden` thật (xem govii-app.js) thay vì
   chỉ z-index, để bottom nav không thể "lộ" ra và cũng bị loại khỏi tab order/AT. */

.govii-app__auth-overlay[hidden] {
	display: none;
}

.govii-app__auth-overlay {
	position: fixed;
	inset: 0;
	z-index: 25;
	display: flex;
	flex-direction: column;
	background: var(--govii-bg);
	animation: govii-app-fade-in var(--govii-motion-base) var(--govii-motion-ease);
}

.govii-app__auth-header {
	display: flex;
	align-items: center;
	gap: var(--govii-space-2);
	padding: var(--govii-space-3) var(--govii-space-2);
	border-bottom: 1px solid var(--govii-border);
	flex: 0 0 auto;
}

.govii-app__auth-back {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--govii-text);
	flex-shrink: 0;
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease);
}

@media (hover: hover) {
	.govii-app__auth-back:hover {
		background: var(--govii-bg-soft);
	}
}

.govii-app__auth-back:active {
	background: var(--govii-primary-soft);
	transform: scale(0.92);
}

.govii-app__auth-back:focus-visible,
.govii-app__auth-cta:focus-visible,
.govii-app__link-btn:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__auth-header-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__auth-body {
	flex: 1 1 auto;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: var(--govii-space-6) var(--govii-space-5) calc(var(--govii-space-5) + env(safe-area-inset-bottom, 0));
}

.govii-app__auth-heading {
	margin: 0 0 var(--govii-space-1);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--govii-text);
}

.govii-app__auth-subtext {
	margin: 0 0 var(--govii-space-6);
	font-size: 14px;
	color: var(--govii-text-muted);
}

.govii-app__auth-form {
	display: flex;
	flex-direction: column;
}

.govii-app__form-field {
	margin-bottom: var(--govii-space-4);
}

.govii-app__auth-cta {
	width: 100%;
	min-height: var(--govii-control-height);
	padding: 14px;
	border-radius: var(--govii-radius-md);
	background: var(--govii-primary);
	color: var(--govii-on-primary);
	font-size: 16px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--govii-space-2);
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease);
}

/* (0,3,0) để thắng Elementor `button:hover|:active` (0,2,1) — nếu để (0,2,0) thì nền nút
   sẽ bị Elementor phủ xanh nhạt khi nhấn (C17.1). */
.govii-app .govii-app__auth-cta:not(:disabled):hover {
	background: var(--govii-primary-dark);
}

.govii-app .govii-app__auth-cta:not(:disabled):active {
	background: var(--govii-primary-pressed);
	transform: scale(0.98);
}

.govii-app__auth-cta:disabled {
	background: var(--govii-border);
	color: var(--govii-text-muted);
}

.govii-app__btn-spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	/* Kế thừa màu chữ của nút (currentColor): trên nút xanh đặc là near-black, khi nút
	   ở trạng thái disabled/loading (nền xám) là muted — luôn nhìn thấy, không còn spinner
	   trắng chìm trên nền sáng (C16.1 §7). */
	border: 2px solid currentColor;
	border-top-color: transparent;
	opacity: 0.85;
	animation: govii-app-spin .7s linear infinite;
	flex: 0 0 auto;
}

.govii-app__auth-tagline {
	margin: var(--govii-space-6) 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--govii-text-muted);
}

.govii-app__pin-input {
	text-align: center;
	letter-spacing: 8px;
	font-size: 18px;
}

.govii-app__inline-error {
	display: flex;
	align-items: flex-start;
	gap: var(--govii-space-2);
	margin: -4px 0 var(--govii-space-4);
	padding: var(--govii-space-2) var(--govii-space-3);
	border-radius: var(--govii-radius-sm);
	background: var(--govii-danger-bg);
	color: var(--govii-danger);
	font-size: 13px;
	line-height: 1.4;
}

.govii-app__inline-error svg {
	flex: 0 0 auto;
	margin-top: 1px;
}

.govii-app__link-btn {
	display: block;
	width: 100%;
	margin-top: var(--govii-space-3);
	padding: var(--govii-space-2);
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--govii-primary-dark);
}

@media (prefers-reduced-motion: reduce) {
	.govii-app__auth-overlay {
		animation: none;
	}
	.govii-app__auth-cta:active,
	.govii-app__search-btn:not(:disabled):active,
	.govii-app__booking-cta:not(:disabled):active {
		transform: none;
	}
	.govii-app__option.is-pending .govii-app__option-chevron,
	.govii-app__point-skeleton {
		animation: none;
	}
}

/* ---------- Responsive: tablet / desktop ---------- */

@media (min-width: 600px) {
	.govii-app {
		margin: 24px auto;
		/* Ở desktop/tablet app là "khung điện thoại" căn giữa, chừa 24px trên+dưới. Vì gốc
		   .govii-app đặt height:100dvh (định chiều cao để main cuộn nội bộ), phải TRỪ đúng
		   48px lề tại đây — nếu không khung cao trọn 100dvh lại thêm 24px lề trên nên tràn
		   xuống 24px dưới viewport, overflow:hidden cắt mất bottom nav. Giữ cặp vh→dvh như gốc. */
		height: calc(100vh - 48px);
		height: calc(100dvh - 48px);
		min-height: calc(100dvh - 48px);
		border-radius: 20px;
		box-shadow: 0 1px 3px rgba(20, 35, 26, 0.08), 0 12px 32px rgba(20, 35, 26, 0.10);
		overflow: hidden;
	}

	.govii-app__sheet-overlay,
	.govii-app__sheet,
	.govii-app__toast,
	.govii-app__auth-overlay {
		position: absolute;
	}

	.govii-app__sheet {
		max-height: 70%;
	}

	.govii-app__booking-overlay,
	.govii-app__rewards-overlay {
		position: absolute;
	}
}

/* ==========================================================================
   Phase 3 — Luồng đặt chỗ (Đi chung / Xe khách)
   ========================================================================== */

.govii-app--booking-open .govii-app__nav {
	pointer-events: none;
}

.govii-app__booking-overlay[hidden] {
	display: none;
}

.govii-app__booking-overlay {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	background: var(--govii-bg);
}

.govii-app__booking-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 10px;
	border-bottom: 1px solid var(--govii-border);
}

/* Task 8B §6/§7/§23 — nút Back/Đóng đủ lớn để chạm (44×44), icon vẫn thanh mảnh, có
   trạng thái nhấn rõ. Cùng ngôn ngữ với auth-back/rewards-back/sheet-close (nhất quán). */
.govii-app__booking-back,
.govii-app__booking-close {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--govii-text);
	flex-shrink: 0;
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease);
}

@media (hover: hover) {
	.govii-app__booking-back:hover,
	.govii-app__booking-close:hover {
		background: var(--govii-bg-soft);
	}
}

.govii-app__booking-back:active,
.govii-app__booking-close:active {
	background: var(--govii-primary-soft);
	transform: scale(0.92);
}

.govii-app__booking-back:focus-visible,
.govii-app__booking-close:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__booking-close {
	font-size: 22px;
	line-height: 1;
}

.govii-app__booking-header-text {
	flex: 1;
	min-width: 0;
}

/* Task 8B §23 — tiêu đề bước là thông tin chính, cần nổi bật hơn nút back/close. */
.govii-app__booking-header-text h2 {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__booking-header-text p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--govii-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Task 8B §24 — tiến trình đọc được: nhãn "Bước X/Y" + thanh dày hơn, đánh dấu bước
   hiện tại (đậm) tách khỏi bước đã xong (nhạt) để biết đang ở đâu, không chỉ đã đi bao xa. */
.govii-app__booking-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 16px 12px;
}

.govii-app__booking-progress-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--govii-text-muted);
}

.govii-app__booking-progress-track {
	display: flex;
	gap: 5px;
}

.govii-app__booking-dot {
	flex: 1;
	height: 5px;
	border-radius: 999px;
	background: var(--govii-border);
	transition: background-color var(--govii-motion-base) var(--govii-motion-ease);
}

.govii-app__booking-dot.is-done {
	background: var(--govii-primary);
}

.govii-app__booking-dot.is-current {
	background: var(--govii-primary-dark);
}

.govii-app__booking-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 4px 16px 20px;
}

.govii-app__booking-footer {
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
	border-top: 1px solid var(--govii-border);
}

.govii-app__booking-cta {
	width: 100%;
	min-height: 50px;
	padding: 14px;
	border-radius: 12px;
	background: var(--govii-primary);
	color: var(--govii-on-primary);
	font-size: 16px;
	font-weight: 700;
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease);
}

.govii-app__booking-cta:disabled {
	background: var(--govii-border);
	color: var(--govii-text-muted);
}

/* ---------- Chip dùng chung (ngày / lọc giờ / hành lý) ---------- */

.govii-app__booking-date-row,
.govii-app__booking-filter-row,
.govii-app__luggage-list,
.govii-app__toggle-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px 0;
}

.govii-app__filter-chip {
	padding: 9px 14px;
	min-height: 40px;
	border-radius: 999px;
	border: 1px solid var(--govii-border);
	background: var(--govii-bg);
	color: var(--govii-text);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.govii-app__filter-chip.is-active {
	background: var(--govii-primary);
	border-color: var(--govii-primary);
	color: var(--govii-on-primary);
}

/* ---------- Danh sách chuyến ---------- */

.govii-app__trip-skeleton {
	height: 88px;
	border-radius: 14px;
	background: var(--govii-bg-soft);
	margin-bottom: 10px;
	animation: govii-app-pulse 1.1s ease-in-out infinite;
}

.govii-app__trip-card {
	display: block;
	width: 100%;
	text-align: left;
	border: 1px solid var(--govii-border);
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 10px;
	background: var(--govii-bg);
}

.govii-app__trip-card.is-selected {
	border-color: var(--govii-primary);
	box-shadow: 0 0 0 1px var(--govii-primary);
}

.govii-app__trip-card:disabled {
	/* Không dùng opacity phủ cả thẻ (Safari làm chữ xỉn khó đọc). Báo "hết chỗ" bằng
	   nền mờ + con trỏ khoá; nội dung vẫn đọc được, badge trạng thái "Hết chỗ" mới là
	   tín hiệu chính. */
	background: var(--govii-bg-soft);
	border-color: var(--govii-border);
	cursor: not-allowed;
}

.govii-app__trip-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.govii-app__trip-card-row strong {
	font-size: 17px;
	color: var(--govii-text);
}

.govii-app__trip-status {
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--govii-bg-soft);
	color: var(--govii-text-muted);
}

.govii-app__trip-status--available {
	background: rgba(34, 216, 14, 0.14);
	color: var(--govii-primary-dark);
}

.govii-app__trip-status--low {
	background: var(--govii-warning-bg);
	color: var(--govii-warning);
}

.govii-app__trip-status--full,
.govii-app__trip-status--suspended {
	background: var(--govii-border);
	color: var(--govii-text-muted);
}

.govii-app__trip-meta {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--govii-text-muted);
}

/* Nhãn TĨNH "sắp có" trên chuyến hết chỗ — không phải link/nút. Bỏ gạch chân + màu
   nhấn để không trông bấm được; giữ màu phụ để đọc như một ghi chú trạng thái. */
.govii-app__trip-waitlist {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--govii-text-muted);
}

/* ---------- Số khách / loại chỗ ---------- */

.govii-app__trip-summary-box {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--govii-bg-soft);
	margin: 10px 0;
}

.govii-app__trip-summary-box strong {
	font-size: 15px;
	color: var(--govii-text);
}

.govii-app__trip-summary-box span {
	font-size: 13px;
	color: var(--govii-text-muted);
}

.govii-app__seat-type-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0;
}

.govii-app__seat-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	min-height: 48px;
	border-radius: 12px;
	border: 1px solid var(--govii-border);
	background: var(--govii-bg);
	text-align: left;
}

.govii-app__seat-type.is-selected {
	border-color: var(--govii-primary);
	background: var(--govii-bg-soft);
}

.govii-app__seat-type:disabled {
	/* Ghế đã hết — nền mờ + con trỏ khoá thay cho opacity phủ, giữ chữ đọc được. */
	background: var(--govii-bg-soft);
	border-color: var(--govii-border);
	color: var(--govii-text-disabled);
	cursor: not-allowed;
}

.govii-app__seat-type-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--govii-text);
}

.govii-app__seat-type-meta {
	font-size: 12px;
	color: var(--govii-text-muted);
}

.govii-app__seat-stepper-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0;
}

.govii-app__seat-stepper {
	display: flex;
	align-items: center;
	gap: 14px;
}

.govii-app__stepper-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--govii-border);
	font-size: 18px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__stepper-btn:disabled {
	/* Màu mờ tường minh thay cho opacity 0.4 — trên Safari glyph +/− ở 0.4 gần như biến
	   mất; token disabled + nền soft vẫn cho thấy nút đang bị khoá mà vẫn đọc được. */
	background: var(--govii-bg-soft);
	color: var(--govii-text-disabled);
	border-color: var(--govii-border);
	cursor: not-allowed;
}

.govii-app__stepper-count {
	min-width: 24px;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__price-line {
	font-size: 14px;
	font-weight: 600;
	color: var(--govii-primary-dark);
}

/* C18.4 private pricing states use dedicated DOM/classes so generic point-row
   and Elementor button rules cannot hide or recolour source-backed fares. */
.govii-app__private-zone-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.govii-app .govii-app__private-zone-item { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: center; width: 100%; min-height: 52px; gap: 12px; padding: 12px; border: 1px solid var(--govii-border); border-radius: 10px !important; background: var(--govii-bg); text-align: left; }
.govii-app .govii-app__private-zone-item:hover { background: var(--govii-bg-soft); }
.govii-app .govii-app__private-zone-item:focus-visible { outline: 2px solid var(--govii-primary-dark); outline-offset: 2px; }
.govii-app .govii-app__private-zone-item.is-selected { border-color: var(--govii-primary); background: var(--govii-primary-soft); color: var(--govii-text); }
.govii-app .govii-app__private-zone-name { display: block !important; min-width: 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 700; color: var(--govii-text) !important; -webkit-text-fill-color: var(--govii-text) !important; }
.govii-app .govii-app__private-zone-price { display: block !important; visibility: visible !important; opacity: 1 !important; min-width: max-content !important; max-width: 132px; overflow: visible !important; overflow-wrap: normal !important; white-space: nowrap !important; text-align: right; color: var(--govii-primary-dark) !important; -webkit-text-fill-color: var(--govii-primary-dark) !important; font-size: 14px !important; font-weight: 700 !important; }
.govii-app__selected-zone-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; padding: 10px 12px; border: 1px solid var(--govii-primary); border-radius: 10px; background: var(--govii-primary-soft); color: var(--govii-text); }
.govii-app__selected-zone-summary span { color: var(--govii-primary-dark); font-size: 14px; font-weight: 700; text-align: right; }
.govii-app__private-price-panel { display: grid; gap: 2px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--govii-border); border-radius: 10px; background: var(--govii-bg-soft); }
.govii-app__private-price-label { color: var(--govii-text-muted); font-size: 12px; font-weight: 700; }
.govii-app__private-price-value { color: var(--govii-primary-dark); font-size: 20px; line-height: 1.25; }
.govii-app__private-price-pending { color: var(--govii-text-secondary); font-size: 15px; line-height: 1.35; }
.govii-app__private-price-context { color: var(--govii-text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.govii-app__pickup-time-row { display: flex; align-items: stretch; gap: 8px; width: 100%; margin-bottom: 12px; }
.govii-app__pickup-time-row .govii-app__pickup-time-input { flex: 1 1 auto; min-width: 0; margin: 0; }
.govii-app .govii-app__pickup-now-btn { flex: 0 0 auto; min-width: 88px; min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 10px !important; color: var(--govii-primary-dark); background: var(--govii-bg-soft); }
.govii-app .govii-app__pickup-now-btn.is-active { border-color: var(--govii-primary); background: var(--govii-primary-soft); color: var(--govii-primary-dark); }
.govii-app__private-vehicle-preview { display: block; margin-top: 2px; color: var(--govii-primary-dark); font-size: 14px; font-weight: 700; }
@media (max-width: 280px) { .govii-app__pickup-time-row { flex-wrap: wrap; } .govii-app .govii-app__pickup-now-btn { flex-basis: 100%; } }

/* C18.5: submission feedback is a state, not a matching claim. */
.govii-app__submit-state { margin: 8px 0 16px; padding: 18px; border: 1px solid var(--govii-border); border-radius: 12px; background: var(--govii-bg-soft); }
.govii-app__submit-state h3 { margin: 4px 0 12px; color: var(--govii-text); font-size: 18px; }
.govii-app__submit-route { margin: 0 0 6px; color: var(--govii-text); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.govii-app__submit-line { margin: 3px 0; color: var(--govii-text-secondary); font-size: 14px; overflow-wrap: anywhere; }
.govii-app__submit-quote { display: block; margin-top: 8px; color: var(--govii-primary-dark); font-size: 20px; }
.govii-app__submit-progress { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--govii-text-muted); font-size: 14px; line-height: 1.4; }
.govii-app__submit-spinner { width: 22px; height: 22px; flex: 0 0 auto; border: 3px solid var(--govii-border); border-top-color: var(--govii-primary-dark); border-radius: 50%; animation: govii-app-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .govii-app__submit-spinner { animation: none; border-top-color: var(--govii-primary-dark); } }

/* ---------- Task 8B-R1: bộ chọn số chỗ trực quan (chỉ ánh xạ seatCount) ---------- */
.govii-app__seatsel {
	margin: 12px 0 4px;
}

.govii-app__seatsel-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__seatsel-help {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--govii-text-muted);
}

.govii-app__seatsel-count {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--govii-text);
}

.govii-app__seatsel-count b {
	color: var(--govii-primary-dark);
}

.govii-app__seatsel-cabin {
	position: relative;
	padding: 16px;
	border: 1.5px solid var(--govii-border-strong);
	/* Bo góc lớn = thân xe; nền trắng làm "sàn xe" để ghế nổi lên trên. Inset shadow nhẹ
	   tạo cảm giác lòng khoang, không cần ảnh render 3D. */
	border-radius: 22px;
	background: var(--govii-bg);
	box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(20, 35, 26, 0.05);
}

/* Xe con: khoang hẹp, bo góc trên nhiều hơn gợi kính lái; căn giữa cho cân đối. */
.govii-app__seatsel-cabin--car {
	max-width: 264px;
	margin: 0 auto;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

.govii-app__seatsel-cabin--car .govii-app__seatsel-rows {
	align-items: center;
}

/* Hàng tài xế — chỉ là mốc chỉ hướng, không bấm chọn được. */
.govii-app__seatsel-driver {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px dashed var(--govii-border);
}

.govii-app__seatsel-wheel {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50% !important;
	border: 2px solid var(--govii-nav-inactive);
	background: var(--govii-bg);
	flex: 0 0 auto;
}

.govii-app__seatsel-wheel::before {
	/* moay-ơ vô lăng ở giữa — gợi hình tay lái mà không cần ảnh xe trang trí. */
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--govii-nav-inactive);
	transform: translate(-50%, -50%);
}

.govii-app__seatsel-driver-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--govii-text-muted);
}

.govii-app__seatsel-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.govii-app__seatsel-row {
	display: flex;
	gap: 10px;
	justify-content: flex-start;
}

.govii-app__seatsel-cabin--car .govii-app__seatsel-row {
	max-width: 220px;
}

/* Lối đi giữa xe khách. */
.govii-app__seatsel-aisle {
	flex: 0 0 16px;
}

.govii-app__seatsel-grid--generic {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.govii-app__seatsel-seat {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	flex: 0 0 48px;
	padding: 0;
	border-radius: 13px !important; /* thắng bo tròn 100px của Elementor kit */
	border: 1.5px solid var(--govii-border);
	/* Ô trống = nền soft mờ để ghế "đã chọn" (nền xanh) nổi bật hơn khi quét nhanh. */
	background: var(--govii-bg-soft);
	color: var(--govii-nav-inactive);
	transition: background var(--govii-motion-fast) var(--govii-motion-ease),
		border-color var(--govii-motion-fast) var(--govii-motion-ease),
		color var(--govii-motion-fast) var(--govii-motion-ease),
		box-shadow var(--govii-motion-fast) var(--govii-motion-ease),
		transform var(--govii-motion-fast) var(--govii-motion-ease);
}

.govii-app__seatsel-cabin--car .govii-app__seatsel-seat,
.govii-app__seatsel-cabin--bus .govii-app__seatsel-seat {
	flex: 1 1 0;
}

/* Icon ghế phẳng — tô theo currentColor của nút nên đổi màu cùng trạng thái chọn. */
.govii-app__seatsel-seaticon {
	display: block;
	width: 27px;
	height: 27px;
}

@media (hover: hover) {
	.govii-app__seatsel-seat:not(.is-selected):hover {
		border-color: var(--govii-primary);
		color: var(--govii-primary-dark);
	}
}

.govii-app__seatsel-seat.is-selected {
	background: var(--govii-primary);
	border-color: var(--govii-primary-dark);
	color: var(--govii-on-primary);
	/* Nhấc nhẹ ghế đang chọn để có chiều sâu, phân biệt rõ với ô trống. */
	box-shadow: 0 3px 8px rgba(34, 216, 14, 0.28);
}

.govii-app__seatsel-seat:active {
	transform: scale(0.92);
}

.govii-app__seatsel-seat:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

/* ---------- Hành lý / form field dùng chung ---------- */

.govii-app__field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--govii-text);
	margin: 12px 0 6px;
}

.govii-app__textarea,
.govii-app__text-input {
	width: 100%;
	padding: 12px 14px;
	min-height: var(--govii-control-height, 44px);
	border-radius: 12px;
	border: 1px solid var(--govii-border);
	background: var(--govii-bg-soft);
	/* ≥16px để iPhone không auto-zoom khi focus ô nhập. */
	font-size: 16px;
	color: var(--govii-text);
	transition: border-color var(--govii-motion-fast, 150ms) ease, box-shadow var(--govii-motion-fast, 150ms) ease;
}

.govii-app__textarea {
	resize: vertical;
}

.govii-app__textarea:focus-visible,
.govii-app__text-input:focus-visible {
	outline: none;
	border-color: var(--govii-primary);
	box-shadow: 0 0 0 3px rgba(34, 216, 14, 0.18);
}

.govii-app__text-input.has-error {
	border-color: var(--govii-danger);
}

.govii-app__text-input.has-error:focus-visible {
	box-shadow: 0 0 0 3px rgba(198, 64, 44, 0.14);
}

@media (prefers-reduced-motion: reduce) {
	.govii-app__textarea,
	.govii-app__text-input {
		transition: none;
	}
}

/* ---------- Điểm đón / trả ---------- */
/* "Lấy vị trí" — MỘT component outline dùng chung ở Home + điểm đón cụ thể (C16 §16).
   Nút phụ (secondary), không phải CTA chính: nền trắng, viền + chữ + icon xanh brand
   (currentColor), bo góc theo token, cao đủ chạm. Không dùng màu/hex rời rạc. */
.govii-app__locate-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--govii-space-2);
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--govii-primary);
	border-radius: var(--govii-radius-md);
	background: var(--govii-bg);
	color: var(--govii-primary-dark);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color var(--govii-motion-fast) var(--govii-motion-ease),
		border-color var(--govii-motion-fast) var(--govii-motion-ease);
}
/* Chống Elementor Global Kit ép `border-radius:100px` (biến nút thành OVAL): giành lại
   bo góc VỪA 12px ở (0,2,0)+!important, khớp với ô Điểm đi bên cạnh → cặp hình chữ nhật
   bo mềm, không phải viên thuốc (theo yêu cầu Founder). */
.govii-app .govii-app__locate-action { border-radius: var(--govii-radius-md) !important; }
.govii-app__locate-action svg { flex: 0 0 auto; }
/* Home: "Lấy vị trí" đứng CÙNG HÀNG, bên phải ô Điểm đi (theo yêu cầu Founder) — ô Điểm đi
   co giãn chiếm phần còn lại, nút định vị giữ bề rộng tự nhiên và cao bằng ô để canh đều. */
.govii-app__from-row { display: flex; align-items: stretch; gap: var(--govii-space-2); margin-bottom: var(--govii-space-2); }
.govii-app__from-row .govii-app__field { flex: 1 1 auto; min-width: 0; }
.govii-app__from-row .govii-app__locate-action { flex: 0 0 auto; }
.govii-app__exact-field .govii-app__locate-action { margin-top: var(--govii-space-2); }
.govii-app__locate-action:not(:disabled):hover { background: var(--govii-primary-soft); }
.govii-app__locate-action:not(:disabled):active { background: var(--govii-primary-soft); border-color: var(--govii-primary-dark); }
.govii-app__locate-action:focus-visible { outline: 2px solid var(--govii-primary-dark); outline-offset: 2px; }
/* Disabled/đang xác định: vẫn đọc được (không mờ tịt) — viền + chữ muted, con trỏ chờ. */
.govii-app__locate-action:disabled { border-color: var(--govii-border-strong); color: var(--govii-text-muted); cursor: default; }
@media (prefers-reduced-motion: reduce) {
	.govii-app__locate-action { transition: none; }
}

.govii-app__focused-overlay {
	position: fixed;
	inset: 0;
	z-index: 10020;
	display: flex;
	flex-direction: column;
	background: #fff;
	min-height: 100dvh;
	padding-top: env(safe-area-inset-top, 0);
}
/* These transient full-screen surfaces must stay hidden in raw DOM and under
   WordPress/Elementor CSS until their owning interaction explicitly opens them. */
.govii-app__focused-overlay[hidden] { display: none !important; }
/* Header overlay toàn màn (Phương án di chuyển / Thông báo) — dùng chung ngôn ngữ với
   header app + các overlay khác (C16 §31): viền, chữ, icon-back đều theo token. */
.govii-app__focused-header { display: flex; align-items: center; gap: var(--govii-space-3); min-height: 58px; padding: 0 var(--govii-space-4); border-bottom: 1px solid var(--govii-border); background: var(--govii-bg); }
.govii-app__focused-header h2 { margin: 0; color: var(--govii-text); font-size: 18px; font-weight: 700; }
.govii-app__focused-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; border-radius: var(--govii-radius-sm); background: transparent; color: var(--govii-text-secondary); transition: background-color var(--govii-motion-fast) var(--govii-motion-ease); }
.govii-app__focused-back:not(:disabled):hover { background: var(--govii-bg-soft); }
.govii-app__focused-back:focus-visible { outline: 2px solid var(--govii-primary-dark); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .govii-app__focused-back { transition: none; } }
.govii-app__focused-body { flex: 1; overflow-y: auto; padding: var(--govii-space-4); padding-bottom: calc(var(--govii-space-6) + env(safe-area-inset-bottom, 0)); }
.govii-app__focused-body .govii-app__results-head { margin-top: 0; }
/* Empty state Thông báo dùng LẠI component empty-state chung (icon + title + copy),
   không còn là một dòng chữ trơ giữa trang (C16 §17, §24). */
.govii-app__notifications-empty { align-items: center; justify-content: center; }

.govii-app__section-title {
	margin: 16px 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__point-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0;
}

.govii-app__point-item {
	text-align: left;
	padding: 12px 14px;
	min-height: 48px;
	border-radius: 12px;
	border: 1px solid var(--govii-border);
	background: var(--govii-bg);
	font-size: 14px;
	color: var(--govii-text);
}

.govii-app__point-item.is-selected {
	border-color: var(--govii-primary);
	background: var(--govii-bg-soft);
	font-weight: 600;
}

/* Priority 4 — nút khu vực đón/trả có 2 dòng: tên thôn/xã cũ (đậm) + vùng phụ (mờ),
   để nhãn địa phương chi tiết đọc được ngay. */
.govii-app__point-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.govii-app__point-item-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--govii-text);
}

.govii-app__point-item-area {
	font-size: 12px;
	color: var(--govii-text-muted);
}

/* Priority 5 — nhãn nhỏ phía trên danh sách khu vực, tách bạch "chọn khu vực" với ô
   "điểm cụ thể" bên dưới. */
.govii-app__field-caption {
	margin: 4px 0 6px;
	font-size: 12px;
	color: var(--govii-text-muted);
}

/* Priority 5 — ô nhập điểm đón/trả CỤ THỂ nằm trong khung riêng, phân biệt rõ với
   lưới chọn khu vực ở trên. */
.govii-app__exact-field {
	padding: 10px 12px;
	border: 1px dashed var(--govii-border);
	border-radius: 12px;
	background: var(--govii-bg-soft);
	margin-top: 4px;
}

/* Priority 6 — khung chờ điểm đón/trả giữ nguyên chiều cao, không nhảy layout khi
   danh sách tải xong (tái dùng shimmer govii-app-pulse). */
.govii-app__point-skeleton {
	height: 48px;
	border-radius: 12px;
	background: var(--govii-bg-soft);
	margin-bottom: 8px;
	animation: govii-app-pulse 1.1s ease-in-out infinite;
}

.govii-app__note-field {
	margin-bottom: 4px;
}

/* ---------- Người đi ---------- */

.govii-app__toggle-row {
	margin-bottom: 8px;
}

.govii-app__passenger-box {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--govii-bg-soft);
	margin: 8px 0;
}

.govii-app__passenger-box strong {
	font-size: 15px;
	color: var(--govii-text);
}

.govii-app__passenger-box span {
	font-size: 13px;
	color: var(--govii-text-muted);
}

.govii-app__passenger-form {
	margin: 4px 0;
}

/* Gợi ý dưới nhãn khi khách chưa đăng nhập ở bước Người đi — mời đăng nhập điền nhanh
   hoặc tự nhập bên dưới. */
.govii-app__field-hint {
	font-size: 13px;
	line-height: 1.4;
	color: var(--govii-text-muted);
	margin: 0 0 8px;
}

.govii-app__notify-box {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--govii-border);
}

.govii-app__checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 14px;
	color: var(--govii-text);
}

.govii-app__checkbox-row input {
	width: 20px;
	height: 20px;
}

/* ---------- Kiểm tra & xác nhận ---------- */

.govii-app__review-box {
	border: 1px solid var(--govii-border);
	border-radius: 16px;
	padding: 18px;
	margin: 8px 0 16px;
}

.govii-app__review-kicker {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--govii-primary-dark);
}

.govii-app__review-box h3 {
	margin: 4px 0;
	font-size: 18px;
	color: var(--govii-text);
}

.govii-app__review-label {
	margin: 14px 0 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--govii-text-muted);
	text-transform: uppercase;
}

.govii-app__review-line {
	margin: 0;
	font-size: 14px;
	color: var(--govii-text);
}

.govii-app__review-total {
	display: block;
	margin-top: 4px;
	font-size: 20px;
	color: var(--govii-primary-dark);
}

.govii-app__review-notice {
	font-size: 13px;
	color: var(--govii-text-muted);
	text-align: center;
	margin: 0 0 16px;
}

/* ---------- Success mock ---------- */

.govii-app__success-box {
	text-align: center;
	padding: 24px 8px;
}

.govii-app__success-box h2 {
	font-size: 20px;
	color: var(--govii-text);
	margin: 0 0 12px;
}

.govii-app__success-description {
	margin: 0 auto 14px;
	max-width: 440px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--govii-text-muted);
}

.govii-app__success-summary {
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px solid var(--govii-border);
	border-radius: 12px;
	text-align: left;
	background: var(--govii-bg-soft);
}

.govii-app__success-summary p {
	margin: 4px 0;
	font-size: 14px;
	color: var(--govii-text);
}

/* The app template owns the document body; WordPress theme chrome is not rendered. */
body.govii-app-page {
	margin: 0;
	background: var(--govii-bg-soft);
}

.govii-app__success-code {
	font-size: 16px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__success-status {
	display: inline-block;
	margin: 6px 0 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(34, 216, 14, 0.14);
	color: var(--govii-primary-dark);
	font-size: 12px;
	font-weight: 700;
}

.govii-app__success-box .govii-app__search-btn,
.govii-app__success-box .govii-app__fallback-btn {
	margin-top: 12px;
}

/* ==========================================================================
   Tài khoản — Customer Login + PIN V1, redesigned Auth & Account UX/UI V1
   ========================================================================== */

.govii-app__account-body {
	animation: govii-app-fade-in 0.18s ease-out;
}

/* ---------- Guest: card gọn mời đăng nhập (thay danh sách bullet dài) ---------- */

.govii-app__account-guest-card {
	background: var(--govii-bg-soft);
	border: 1px solid var(--govii-border);
	border-radius: var(--govii-radius-lg);
	padding: var(--govii-space-6) var(--govii-space-5);
	margin-bottom: var(--govii-space-5);
	text-align: center;
}

.govii-app__account-guest-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--govii-space-3);
	border-radius: 50%;
	background: rgba(34, 216, 14, 0.12);
	color: var(--govii-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}

.govii-app__account-guest-card h2 {
	margin: 0 0 var(--govii-space-1);
	font-size: 18px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__account-guest-subtext {
	margin: 0 0 var(--govii-space-5);
	font-size: 14px;
	color: var(--govii-text-muted);
	line-height: 1.45;
}

.govii-app__account-guest-card .govii-app__auth-cta {
	max-width: 280px;
	margin: 0 auto;
}

/* ---------- PWA install / connectivity: compact utility, never a marketing banner ---------- */
.govii-app__install-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0; padding: 14px; border: 1px solid var(--govii-border); border-radius: var(--govii-radius-md); background: var(--govii-bg-soft); }
.govii-app__install-card[hidden] { display: none !important; pointer-events: none; }
.govii-app__install-card h2 { margin: 0 0 3px; font-size: 14px; line-height: 1.35; color: var(--govii-text); }
.govii-app__install-card p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--govii-text-muted); }
.govii-app__install-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; }
.govii-app .govii-app__install-cta { min-height: 40px; padding: 8px 12px; border-radius: 10px !important; background: var(--govii-primary); color: var(--govii-on-primary); font-size: 13px; font-weight: 700; }
.govii-app .govii-app__install-dismiss, .govii-app .govii-app__install-sheet-close { width: 36px; min-width: 36px; height: 36px; border-radius: 50% !important; color: var(--govii-text-muted); font-size: 24px; line-height: 1; }
.govii-app__offline-state { position: absolute; z-index: 30; right: 12px; bottom: calc(var(--govii-nav-height) + 12px + env(safe-area-inset-bottom, 0)); left: 12px; padding: 10px 12px; border-radius: 10px; background: #14231A; color: #fff; font-size: 13px; line-height: 1.4; box-shadow: var(--govii-shadow-card); }
.govii-app__install-overlay { position: absolute; z-index: 40; inset: 0; display: flex; align-items: flex-end; background: rgba(20, 35, 26, 0.4); }
.govii-app__install-overlay[hidden] { display: none !important; }
.govii-app__install-sheet { position: relative; width: 100%; padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0)); border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -12px 32px rgba(20,35,26,.16); }
.govii-app__install-sheet-close { position: absolute; top: 14px; right: 12px; }
.govii-app__install-sheet h2 { margin: 12px 38px 14px 0; font-size: 19px; color: var(--govii-text); }
.govii-app__install-sheet ol { margin: 0; padding-left: 22px; color: var(--govii-text-secondary); font-size: 15px; line-height: 1.75; }
.govii-app .govii-app__install-sheet-ack { display: block; width: 100%; min-height: 44px; margin-top: 18px; border-radius: 10px !important; background: var(--govii-primary); color: var(--govii-on-primary); font-weight: 700; }
@media (max-width: 375px) { .govii-app__install-card { align-items: flex-start; } .govii-app__install-actions { flex-direction: column-reverse; } }

/* ---------- Authenticated: hồ sơ tóm tắt ---------- */

.govii-app__account-profile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 4px 20px;
}

.govii-app__account-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--govii-primary);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
}

.govii-app__account-profile-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.govii-app__account-profile-info strong {
	font-size: 16px;
	color: var(--govii-text);
}

.govii-app__account-profile-info span {
	font-size: 13px;
	color: var(--govii-text-muted);
}

.govii-app__account-item-value {
	flex: 1 1 auto;
	margin-left: auto;
	margin-right: 8px;
	text-align: right;
	font-size: 14px;
	color: var(--govii-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.govii-app__account-item--danger {
	color: #C6402C;
}

.govii-app__account-group {
	margin-bottom: 20px;
}

.govii-app__account-group-title {
	margin: 0 0 6px;
	padding: 0 4px;
	font-size: 12px;
	font-weight: 700;
	/* Tiêu đề nhóm (VỀ GOVII, HỖ TRỢ) là nhãn cấu trúc — dùng secondary (10.5:1) cho
	   rõ, không dùng muted vốn dành cho chữ phụ. */
	color: var(--govii-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.govii-app__account-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--govii-border);
	background: var(--govii-bg);
	font-size: 15px;
	color: var(--govii-text);
	text-align: left;
	text-decoration: none;
	transition: background-color var(--govii-motion-fast, 150ms) ease;
}

.govii-app__account-item:focus-visible {
	outline: none;
	background: var(--govii-bg-soft);
	box-shadow: inset 0 0 0 2px var(--govii-primary);
}

@media (prefers-reduced-motion: reduce) {
	.govii-app__account-item {
		transition: none;
	}
}

.govii-app__account-group .govii-app__account-item:first-of-type {
	border-top: 1px solid var(--govii-border);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.govii-app__account-group .govii-app__account-item:last-of-type {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.govii-app__account-item:hover {
	background: var(--govii-bg-soft);
}

/* Priority 12 — hàng chỉ để đọc (Họ tên/SĐT): KHÔNG con trỏ tay, KHÔNG đổi nền khi
   rê/di, không chevron — để mắt và tay đều hiểu đây là thông tin, không phải nút. */
.govii-app__account-item--readonly {
	cursor: default;
}

.govii-app__account-item--readonly:hover {
	background: var(--govii-bg);
}

.govii-app__profile-editor-overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.42);display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));}
.govii-app__profile-editor{width:min(100%,430px);background:#fff;border-radius:8px;padding:20px;max-height:calc(100vh - 32px);overflow:auto;}
.govii-app__profile-editor h2{margin:0 0 18px;font-size:20px;}
.govii-app__profile-editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.govii-app__profile-editor-actions .govii-app__account-item{justify-content:center;border:1px solid var(--govii-border);border-radius:6px;}

.govii-app__location-info-overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.42);display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));}
.govii-app__location-info{width:min(100%,430px);background:#fff;border-radius:8px;padding:20px;max-height:calc(100vh - 32px);overflow:auto;color:var(--govii-text);}
.govii-app__location-info h2{margin:10px 0 14px;font-size:20px;}
.govii-app__location-info p{margin:0 0 12px;font-size:15px;line-height:1.55;}
.govii-app__location-info-note{color:var(--govii-text-muted);}
.govii-app__location-info-close{border:0;background:transparent;color:var(--govii-primary-dark);padding:4px 0;font:inherit;font-weight:700;cursor:pointer;}
.govii-app__location-info-close:focus-visible{outline:2px solid var(--govii-primary-dark);outline-offset:3px;}
.govii-app__auth-legal-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}
.govii-app__auth-legal-links .govii-app__account-item{min-height:auto;padding:0;border:0;color:var(--govii-primary-dark);font-size:13px;}
.govii-app__auth-legal-links .govii-app__account-chevron{display:none;}

.govii-app__account-chevron {
	color: var(--govii-text-muted);
	font-size: 18px;
}

/* ==========================================================================
   Phase 5 — Hoạt động (booking submit + danh sách/chi tiết)
   ========================================================================== */

/* Sub-navigation giữ các nhóm Activity có thể chạm rõ ràng, không phải heading
   tĩnh. Cuộn ngang trên màn nhỏ để không ép chữ/tràn card. */
.govii-app__activity-tabs {
	display: flex;
	gap: 8px;
	margin: 4px -4px 16px;
	padding: 0 4px 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.govii-app__activity-tabs::-webkit-scrollbar {
	display: none;
}

.govii-app__activity-tab {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 8px 13px;
	border: 1px solid var(--govii-border);
	border-radius: 999px;
	background: var(--govii-bg);
	color: var(--govii-text-secondary);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	touch-action: manipulation;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.govii-app__activity-tab:hover,
.govii-app__activity-tab:active {
	border-color: var(--govii-primary);
	color: var(--govii-primary-dark);
}

.govii-app__activity-tab.is-active {
	border-color: var(--govii-primary);
	background: var(--govii-primary);
	color: var(--govii-on-primary);
}

.govii-app__activity-tab:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__activity-tab-empty {
	margin: 0;
	padding: 20px 4px;
	color: var(--govii-text-muted);
	font-size: 14px;
}

/* Demand is intentionally quieter and structurally separate from Booking cards. */
.govii-app__demand-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--govii-border); }
.govii-app__demand-section-title { margin: 0; font-size: 17px; line-height: 1.35; color: var(--govii-text); }
.govii-app__demand-section-copy { margin: 4px 0 12px; color: var(--govii-text-muted); font-size: 13px; line-height: 1.45; }
.govii-app__demand-card { display: block; width: 100%; margin: 0 0 10px; padding: 14px; text-align: left; color: var(--govii-text); background: var(--govii-bg-soft); border: 1px solid var(--govii-border); border-radius: 10px; font: inherit; cursor: pointer; }
.govii-app__demand-card:focus-visible { outline: 3px solid rgba(34, 216, 14, .35); outline-offset: 2px; }
.govii-app__demand-card-kind { margin: 0 0 8px; color: var(--govii-text-muted); font-size: 12px; font-weight: 700; }
.govii-app__demand-card .govii-app__activity-pill { margin-bottom: 8px; }
.govii-app__demand-card-route { margin: 0; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.govii-app__demand-card-quantity { margin: 6px 0 0; color: var(--govii-text-secondary); font-size: 13px; }
.govii-app__activity-pill--received { background: var(--govii-bg-soft); color: var(--govii-text-secondary); border: 1px solid var(--govii-border-strong); }
.govii-app__demand-detail-message { margin: 18px 0 0; padding: 12px; color: var(--govii-text-secondary); background: var(--govii-bg-soft); border-left: 3px solid var(--govii-primary); line-height: 1.5; }

/* Nhãn trạng thái (pill). KHÔNG dùng opacity làm mờ chữ — mỗi tone có nền + màu chữ
   riêng đủ tương phản, và luôn kèm nhãn chữ nên không chỉ dựa vào màu (mục 18). */
.govii-app__activity-pill {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.govii-app__activity-pill--upcoming {
	background: rgba(34, 216, 14, 0.14);
	color: var(--govii-primary-dark);
}

.govii-app__activity-pill--completed {
	background: rgba(20, 35, 26, 0.07);
	color: var(--govii-text);
}

.govii-app__activity-pill--cancelled {
	background: var(--govii-danger-bg);
	color: var(--govii-danger);
}

.govii-app__activity-pill--unknown {
	background: rgba(86, 97, 89, 0.12);
	color: var(--govii-text-secondary);
}

.govii-app__booking-card {
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--govii-border);
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 12px;
	background: var(--govii-bg);
}

/* Card có thể chạm là 1 <button> — reset về khối căn trái, chiếm hết bề ngang, và có
   touch target ≥44px. Elementor đè màu chữ nút đã được rule (0,1,1) ở đầu file giành
   lại (var(--govii-text)); pill con là <span> nên giữ màu tone riêng. */
.govii-app__booking-card--tappable {
	display: block;
	width: 100%;
	max-width: 100%;
	text-align: left;
	min-height: 44px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.govii-app__booking-card--tappable:hover {
	border-color: var(--govii-primary);
}

.govii-app__booking-card--tappable:active {
	background: var(--govii-primary-soft, rgba(34, 216, 14, 0.12));
}

.govii-app__booking-card--tappable:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

/* === Phase 8B.3.1 — chống Elementor Global Kit đè bo góc nút lên card (lỗi TOÀN BỘ card) ===
   NGUYÊN NHÂN GỐC (xác minh verbatim từ /wp-content/uploads/elementor/css/post-13.css trên
   govii.vn): kit bơm `.elementor-kit-13 button{ color:#F0F1F5; border-radius:100px 100px 100px
   100px }` (độ đặc hiệu 0,1,1) và `.elementor-kit-13 button:hover{ background-color:#36DB1138 }`
   (0,2,1). Card danh sách là <button>, nên border-radius:100px của Elementor THẮNG
   `border-radius:14px` (0,1,0) của card; cộng với `overflow:hidden` trên card, bốn góc biến
   thành cung 100px CẮT CỤT nội dung: loại chuyến ở góc trên phải, điểm & tổng tiền ở hai góc
   dưới, nội dung bị bó trong hình bầu dục. Vì MỌI card đều là <button> nên lỗi xảy ra với tất
   cả booking (Phase 6.1.2 chỉ giành lại `color`, chưa giành `border-radius`). Harness QA không
   nạp Elementor nên trước đó không lộ. CÁCH SỬA: giành lại bo góc + nền tương tác ở (0,2,0)/
   (0,3,0) > Elementor để mọi card bo đúng 14px và không bị Elementor tô nền hover. */
.govii-app .govii-app__booking-card {
	border-radius: 14px;
}

.govii-app .govii-app__booking-card--tappable:hover {
	background: var(--govii-bg);
	border-color: var(--govii-primary);
}

.govii-app .govii-app__booking-card--tappable:active {
	background: var(--govii-primary-soft, rgba(34, 216, 14, 0.12));
}

/* Trạng thái (trái) ↔ loại chuyến (phải) trên một hàng gọn, không chiếm chiều cao thừa. */
.govii-app__booking-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

/* Loại chuyến: nhãn phụ nhẹ cạnh trạng thái — không phóng thành badge lớn (mục 11). */
.govii-app__booking-card-service {
	flex: 0 0 auto;
	color: var(--govii-text-muted);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* Tên chuyến = tiêu đề chính. Cắt tối đa 2 dòng, không tràn ngang dù text/URL dài. */
.govii-app__booking-card-trip {
	margin: 0;
	color: var(--govii-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	max-width: 100%;
	overflow: hidden;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Chuyến trống: nhãn dịu, không nổi ngang chuyến có tuyến thật (mục 9). */
.govii-app__booking-card-trip--empty {
	color: var(--govii-text-muted);
	font-weight: 600;
}

.govii-app__booking-card-when {
	margin: 4px 0 0;
	color: var(--govii-text-secondary);
	font-size: 13px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Chân "vé": điểm nhận (trái) ↔ tổng tiền trả (phải). Một đường kẻ mảnh duy nhất
   thay cho nhiều separator, giữ card thấp và dễ quét (mục 5/6/7). */
.govii-app__booking-card-summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--govii-border);
}

.govii-app__booking-card-points {
	color: var(--govii-primary-dark);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

/* Tổng tiền = anchor thị giác chính: đậm nhất, xanh đậm thương hiệu (không chói). */
.govii-app__booking-card-total {
	color: var(--govii-primary-dark);
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.govii-app__status-badge {
	display: inline-block;
	margin: 2px 0 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(34, 216, 14, 0.14);
	color: var(--govii-primary-dark);
	font-size: 12px;
	font-weight: 700;
}

.govii-app__empty-state {
	text-align: center;
	padding: 40px 16px;
}

.govii-app__empty-state p {
	color: var(--govii-text-muted);
	font-size: 14px;
	margin: 0 0 16px;
}

/* Biến thể cho cả một tab trống (vd. Điểm chưa kết nối backend) — canh giữa theo
   chiều dọc và giới hạn bề ngang để nội dung dễ đọc trên màn rộng. */
.govii-app__empty-state--full {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 55vh;
	max-width: 340px;
	margin: 0 auto;
}

.govii-app__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--govii-primary-soft, rgba(34, 216, 14, 0.12));
	color: var(--govii-primary-dark);
	margin-bottom: 16px;
}

.govii-app__empty-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--govii-text);
}

.govii-app__empty-state--full p {
	line-height: 1.5;
	margin-bottom: 20px;
}

.govii-app__empty-cta {
	width: auto;
	min-width: 200px;
	margin-top: 0;
}

/* Task 8B §6 — back là link chữ; vẫn đảm bảo vùng chạm ≥44px cao, có trạng thái nhấn. */
.govii-app__activity-back {
	display: inline-flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 10px 6px;
	min-height: 44px;
	border-radius: var(--govii-radius-sm);
	color: var(--govii-text);
	font-size: 14px;
	font-weight: 600;
	transition: color var(--govii-motion-fast) var(--govii-motion-ease), background-color var(--govii-motion-fast) var(--govii-motion-ease);
}

@media (hover: hover) {
	.govii-app__activity-back:hover {
		color: var(--govii-primary-dark);
	}
}

.govii-app__activity-back:active {
	background: var(--govii-primary-soft);
}

.govii-app__activity-back:focus-visible {
	outline: 2px solid var(--govii-primary-dark);
	outline-offset: 2px;
}

.govii-app__activity-detail-title,
.govii-app__review-line,
.govii-app__booking-detail {
	overflow-wrap: anywhere;
}

.govii-app__booking-detail .govii-app__activity-detail-title {
	margin-top: 12px;
	font-size: 20px;
	line-height: 1.35;
}

/* Màn hẹp (≤360px): siết padding + hạ nhẹ cỡ tiêu đề để card 2 giá trị chân không
   ép sát. Chân dùng flex nên tự co, không cần đổi cột. */
@media (max-width: 360px) {
	.govii-app__booking-card--tappable {
		padding: 12px;
	}
	.govii-app__booking-card-trip {
		font-size: 14.5px;
	}
}

/* Phase 9C — Điểm is customer-facing loyalty information, kept visually separate
 * from booking cards and protected from broad Elementor button typography/radius. */
.govii-app__loyalty { max-width: 640px; margin: 0 auto; min-width: 0; }
.govii-app__gxu-heading { margin: 0 0 16px; color: var(--govii-text); font-size: 24px; font-weight: 800; line-height: 1.2; }
.govii-app__gxu-hero, .govii-app__gxu-panel { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid rgba(16, 48, 43, 0.12); border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(16, 48, 43, 0.06); }
.govii-app__gxu-hero { padding: 20px; border-color: var(--govii-forest); background: var(--govii-forest); color: #fff; box-shadow: 0 10px 24px rgba(4, 63, 46, 0.18); }
.govii-app__gxu-eyebrow, .govii-app__gxu-support, .govii-app__gxu-history-title, .govii-app__gxu-transaction-label, .govii-app__gxu-transaction-meta { margin: 0; overflow-wrap: anywhere; }
.govii-app__gxu-eyebrow { color: rgba(255, 255, 255, 0.78); font-size: 13px; font-weight: 700; }
.govii-app__gxu-balance { margin: 6px 0 7px; color: var(--govii-sun); font-size: clamp(32px, 9vw, 42px); font-weight: 800; letter-spacing: 0; line-height: 1.08; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.govii-app__gxu-accent { display: block; width: 48px; height: 3px; margin: 0 0 10px; border-radius: 999px; background: var(--govii-sun); }
.govii-app__gxu-stats, .govii-app__gxu-support { color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.5; }
.govii-app__gxu-stats { margin: 0; font-variant-numeric: tabular-nums; }
.govii-app__gxu-support { margin-top: 8px; }

/* Compound selectors reclaim these controls from Elementor Global Kit rules. */
.govii-app .govii-app__gxu-cta, .govii-app .govii-app__gxu-login, .govii-app .govii-app__gxu-retry { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 18px; padding: 10px 16px; border: 1px solid transparent; border-radius: 12px !important; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: normal !important; line-height: 1.3; text-decoration: none; text-transform: none !important; -webkit-text-fill-color: currentColor; }
.govii-app .govii-app__gxu-cta[disabled] { color: #66736f; background: #edf1ef; border-color: #d8e0dd; cursor: not-allowed; opacity: 1; }
.govii-app .govii-app__gxu-login, .govii-app .govii-app__gxu-retry { color: var(--govii-on-primary); background: var(--govii-primary); border-color: var(--govii-primary); cursor: pointer; }
.govii-app .govii-app__gxu-login:hover, .govii-app .govii-app__gxu-login:focus-visible, .govii-app .govii-app__gxu-retry:hover, .govii-app .govii-app__gxu-retry:focus-visible { color: var(--govii-on-primary); background: var(--govii-primary-dark); border-color: var(--govii-primary-dark); -webkit-text-fill-color: currentColor; }
.govii-app .govii-app__gxu-login:focus-visible, .govii-app .govii-app__gxu-retry:focus-visible { outline: 3px solid rgba(34, 216, 14, 0.52); outline-offset: 3px; }
/* Task 8B §27 — phản hồi khi nhấn cho nút đăng nhập/thử lại (nhất quán cảm giác chạm toàn app). */
.govii-app .govii-app__gxu-login, .govii-app .govii-app__gxu-retry { transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease); }
.govii-app .govii-app__gxu-login:active, .govii-app .govii-app__gxu-retry:active { background: var(--govii-primary-pressed); border-color: var(--govii-primary-pressed); transform: scale(0.98); }
.govii-app__gxu-history { margin-top: 24px; }
.govii-app__gxu-history-title { margin-bottom: 10px; color: var(--govii-text); font-size: 18px; font-weight: 800; }
.govii-app__gxu-transactions { margin: 0; padding: 0; list-style: none; }
.govii-app__gxu-transaction { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(16, 48, 43, 0.11); }
.govii-app__gxu-transaction-glyph { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: rgba(34, 216, 14, 0.14); color: var(--govii-primary-dark); font-weight: 800; }
.govii-app__gxu-transaction--spend .govii-app__gxu-transaction-glyph { background: rgba(16, 48, 43, 0.1); color: var(--govii-text); }
.govii-app__gxu-transaction--redemption .govii-app__gxu-transaction-glyph { background: rgba(230, 160, 20, 0.16); color: #8A5D07; }
.govii-app__gxu-transaction--redemption .govii-app__gxu-transaction-amount { color: #8A5D07; font-size: 12px; white-space: normal; text-align: right; }
.govii-app__gxu-transaction-content { min-width: 0; }
.govii-app__gxu-transaction-label { color: var(--govii-text); font-size: 14px; font-weight: 700; line-height: 1.35; }
.govii-app__gxu-transaction-meta { margin-top: 3px; color: var(--govii-text-muted); font-size: 12px; line-height: 1.35; }
.govii-app__gxu-transaction-amount { color: var(--govii-primary-dark); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.govii-app__gxu-transaction--spend .govii-app__gxu-transaction-amount { color: var(--govii-text); }
.govii-app__gxu-panel { padding: 24px; text-align: center; }
.govii-app__gxu-panel-title { margin: 0 0 8px; color: var(--govii-text); font-size: 18px; font-weight: 800; }
.govii-app__gxu-panel-copy { margin: 0; color: var(--govii-text-muted); font-size: 14px; line-height: 1.5; }
.govii-app__gxu-empty-title { margin: 0 0 6px; color: var(--govii-text); font-size: 15px; font-weight: 800; }
.govii-app__gxu-empty-copy { margin: 0; color: var(--govii-text-muted); font-size: 14px; line-height: 1.5; }
.govii-app__gxu-skeleton-line { border-radius: 8px; background: linear-gradient(90deg, #edf1ef 25%, #f7f9f8 38%, #edf1ef 60%); background-size: 400% 100%; animation: govii-app-pulse 1.35s ease infinite; }
.govii-app__gxu-skeleton-line--small { width: 38%; height: 14px; }
.govii-app__gxu-skeleton-line--balance { width: 72%; height: 44px; margin: 12px 0; }
.govii-app__gxu-skeleton-line--stats { width: 82%; height: 14px; }
@media (max-width: 360px) { .govii-app__gxu-hero, .govii-app__gxu-panel { padding: 18px; } .govii-app__gxu-transaction { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; } .govii-app__gxu-transaction-glyph { width: 28px; height: 28px; } }

/* The existing catalog entry stays visually prominent on the compact balance surface. */
.govii-app .govii-app__gxu-cta--action { margin-top: 14px; color: var(--govii-text); background: var(--govii-sun); border-color: var(--govii-sun); -webkit-text-fill-color: var(--govii-text); }
.govii-app .govii-app__gxu-cta--action:hover, .govii-app .govii-app__gxu-cta--action:focus-visible { color: var(--govii-text); background: #f9ce69; border-color: #f9ce69; -webkit-text-fill-color: var(--govii-text); }
.govii-app .govii-app__gxu-cta--action:focus-visible { outline: 3px solid rgba(34, 216, 14, 0.52); outline-offset: 3px; }

/* C09 keeps accounting and reward-request streams visually and semantically separate. */
.govii-app__gxu-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.govii-app .govii-app__gxu-filter { min-height: 40px; padding: 8px 12px; border: 1px solid var(--govii-border-strong); border-radius: 10px !important; background: #fff; color: var(--govii-text-secondary); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0 !important; line-height: 1.2; text-transform: none !important; -webkit-text-fill-color: currentColor; }
.govii-app .govii-app__gxu-filter.is-active { border-color: var(--govii-forest); background: var(--govii-cream); color: var(--govii-forest); }
.govii-app .govii-app__gxu-filter:focus-visible { outline: 3px solid rgba(34, 216, 14, 0.52); outline-offset: 2px; }
.govii-app__gxu-how { margin-top: 24px; padding: 16px; border: 1px solid rgba(11, 90, 60, 0.15); border-radius: 12px; background: var(--govii-cream); }
.govii-app__gxu-how-copy { margin: 0; color: var(--govii-text-secondary); font-size: 14px; line-height: 1.5; }

/* ==========================================================================
   Phase 9D1 — Rewards catalog ("Đổi quà"), READ-ONLY. Full-screen secondary
   overlay opened from the Điểm hero; NOT a bottom-nav screen. The signature is a
   category-tinted "denomination token" that leads every card with its point cost,
   turning the blank-image catalog into a coherent voucher/token wall. Every <button>
   below reclaims typography + radius from the Elementor Global Kit at .govii-app
   specificity (0,2,0) so it can never inherit oval/near-white styling.
   ========================================================================== */
.govii-app__rewards-overlay[hidden] { display: none; }
.govii-app__rewards-overlay { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--govii-bg); }

.govii-app__rewards-header { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-bottom: 1px solid var(--govii-border); }
/* Task 8B §6/§7 — vùng chạm 44×44 nhất quán với booking/auth/sheet, có trạng thái nhấn. */
.govii-app .govii-app__rewards-back { box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50% !important; background: transparent; color: var(--govii-text); -webkit-text-fill-color: currentColor; cursor: pointer; flex-shrink: 0; transition: background-color var(--govii-motion-fast) var(--govii-motion-ease), transform var(--govii-motion-fast) var(--govii-motion-ease); }
@media (hover: hover) { .govii-app .govii-app__rewards-back:hover { background: var(--govii-bg-soft); } }
.govii-app .govii-app__rewards-back:active { background: var(--govii-primary-soft); transform: scale(0.92); }
.govii-app .govii-app__rewards-back:focus-visible { outline: 2px solid var(--govii-primary-dark); outline-offset: 2px; }
.govii-app__rewards-header-text { flex: 1; min-width: 0; }
.govii-app__rewards-header-text h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--govii-text); }
.govii-app__rewards-balance { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--govii-primary-dark); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.govii-app__rewards-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0)); }

/* Category filter chips — only rendered when ≥2 real categories exist. */
.govii-app__reward-chips { display: flex; gap: 8px; margin-bottom: 14px; padding-bottom: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.govii-app__reward-chips::-webkit-scrollbar { display: none; }
.govii-app .govii-app__reward-chip { box-sizing: border-box; flex: 0 0 auto; min-height: 36px; padding: 7px 14px; border: 1px solid var(--govii-border-strong); border-radius: 999px !important; background: #fff; color: var(--govii-text-secondary); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: normal !important; text-transform: none !important; -webkit-text-fill-color: currentColor; white-space: nowrap; cursor: pointer; }
.govii-app .govii-app__reward-chip.is-active { background: var(--govii-primary); border-color: var(--govii-primary); color: var(--govii-on-primary); -webkit-text-fill-color: var(--govii-on-primary); }
.govii-app .govii-app__reward-chip:focus-visible { outline: 3px solid rgba(34, 216, 14, 0.5); outline-offset: 2px; }

/* Grid — mobile-first 2-up; drops to 1-up only when a phone is too narrow for two. */
.govii-app__reward-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 359px) { .govii-app__reward-grid { grid-template-columns: minmax(0, 1fr); } }

.govii-app__reward-card { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; border: 1px solid rgba(16, 48, 43, 0.12); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 4px 14px rgba(16, 48, 43, 0.05); }
.govii-app__reward-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 0; }
.govii-app__reward-name { margin: 0; color: var(--govii-text); font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.govii-app__reward-value { margin: 0; color: var(--govii-text-muted); font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.govii-app__reward-eligibility { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.govii-app__reward-eligibility--ok { color: var(--govii-primary-dark); }
.govii-app__reward-eligibility--short { color: var(--govii-text-secondary); }
.govii-app__reward-tick { font-weight: 800; }

/* Denomination token — fixed-ratio frame so image-present and image-blank cards keep
 * identical dimensions (no layout shift). Blank → the cost IS the tile; image → cost
 * becomes a corner badge over the photo. */
.govii-app__reward-token { position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--govii-text); }
.govii-app__reward-token--detail { aspect-ratio: 16 / 10; border-radius: 16px; margin-bottom: 14px; }
.govii-app__reward-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.govii-app__reward-glyph { position: absolute; top: 8px; right: 8px; opacity: 0.22; }
.govii-app__reward-cost { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.govii-app__reward-cost-num { font-size: clamp(22px, 8vw, 30px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.govii-app__reward-token--detail .govii-app__reward-cost-num { font-size: 34px; }
.govii-app__reward-cost-unit { margin-top: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.82; }
.govii-app__reward-cost--badge { position: absolute; left: 8px; bottom: 8px; flex-direction: row; align-items: baseline; gap: 3px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 4px rgba(16, 48, 43, 0.18); }
.govii-app__reward-cost--badge .govii-app__reward-cost-num { font-size: 15px; color: var(--govii-text); }
.govii-app__reward-cost--badge .govii-app__reward-cost-unit { margin-top: 0; font-size: 10px; color: var(--govii-text-muted); }

/* Category theming — only the two audited values get bespoke tints; neutral otherwise. */
.govii-app__reward-card--small .govii-app__reward-token.is-noimage, .govii-app__reward-detail.govii-app__reward-card--small .govii-app__reward-token.is-noimage { background: linear-gradient(150deg, rgba(34, 216, 14, 0.16), rgba(34, 216, 14, 0.05)); color: var(--govii-primary-dark); }
.govii-app__reward-card--big .govii-app__reward-token.is-noimage, .govii-app__reward-detail.govii-app__reward-card--big .govii-app__reward-token.is-noimage { background: linear-gradient(150deg, rgba(230, 160, 20, 0.22), rgba(230, 160, 20, 0.07)); color: #8A5D07; }
.govii-app__reward-card--other .govii-app__reward-token.is-noimage, .govii-app__reward-detail.govii-app__reward-card--other .govii-app__reward-token.is-noimage { background: linear-gradient(150deg, rgba(16, 48, 43, 0.10), rgba(16, 48, 43, 0.04)); color: var(--govii-text); }

.govii-app .govii-app__reward-cta { box-sizing: border-box; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 12px; padding: 8px 12px; border: 1px solid var(--govii-border-strong); border-radius: 10px !important; background: #fff; color: var(--govii-primary-dark); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal !important; text-transform: none !important; text-decoration: none; -webkit-text-fill-color: currentColor; cursor: pointer; }
.govii-app .govii-app__reward-cta:hover, .govii-app .govii-app__reward-cta:focus-visible { background: var(--govii-bg-soft); border-color: var(--govii-primary-dark); }
.govii-app .govii-app__reward-cta:focus-visible { outline: 3px solid rgba(34, 216, 14, 0.5); outline-offset: 2px; }

/* Detail panel — swapped in over the list (no separate DOM overlay). */
.govii-app__reward-detail { box-sizing: border-box; max-width: 460px; margin: 0 auto; padding: 18px; border: 1px solid rgba(16, 48, 43, 0.12); border-radius: 18px; background: #fff; box-shadow: 0 6px 20px rgba(16, 48, 43, 0.06); }
.govii-app__reward-detail-name { margin: 0 0 4px; color: var(--govii-text); font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.govii-app__reward-detail-value { margin: 0 0 14px; color: var(--govii-text-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.govii-app__reward-facts { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.govii-app__reward-fact-term { margin: 0; color: var(--govii-text-muted); font-size: 13px; font-weight: 600; }
.govii-app__reward-fact-desc { margin: 0; color: var(--govii-text); font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.govii-app__reward-detail .govii-app__reward-eligibility { font-size: 14px; }
.govii-app__reward-detail-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--govii-bg-soft); color: var(--govii-text-secondary); font-size: 12.5px; line-height: 1.45; }
.govii-app .govii-app__reward-redeem { box-sizing: border-box; width: 100%; min-height: 46px; margin-top: 18px; padding: 11px 16px; border: 1px solid var(--govii-primary); border-radius: 12px !important; background: var(--govii-primary); color: var(--govii-on-primary); font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: normal !important; text-transform: none !important; -webkit-text-fill-color: var(--govii-on-primary); cursor: pointer; }
.govii-app .govii-app__reward-redeem:hover, .govii-app .govii-app__reward-redeem:focus-visible { background: var(--govii-primary-dark); border-color: var(--govii-primary-dark); }
.govii-app .govii-app__reward-redeem:disabled { cursor: not-allowed; opacity: .5; }
.govii-app .govii-app__reward-redeem:focus-visible { outline: 3px solid rgba(34, 216, 14, .52); outline-offset: 3px; }
.govii-app__reward-redemption-panel { text-align: left; }

/* States — empty / error share the panel shell; retry reclaimed from Elementor. */
.govii-app__reward-state { max-width: 420px; margin: 32px auto 0; padding: 28px 24px; text-align: center; border: 1px solid rgba(16, 48, 43, 0.12); border-radius: 16px; background: #fff; }
.govii-app__reward-state-title { margin: 0 0 8px; color: var(--govii-text); font-size: 17px; font-weight: 800; }
.govii-app__reward-state-copy { margin: 0; color: var(--govii-text-muted); font-size: 14px; line-height: 1.5; }
.govii-app .govii-app__reward-retry { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; padding: 10px 22px; border: 1px solid var(--govii-primary); border-radius: 12px !important; background: var(--govii-primary); color: var(--govii-on-primary); font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: normal !important; text-transform: none !important; -webkit-text-fill-color: currentColor; cursor: pointer; }
.govii-app .govii-app__reward-retry:hover, .govii-app .govii-app__reward-retry:focus-visible { background: var(--govii-primary-dark); border-color: var(--govii-primary-dark); }
.govii-app .govii-app__reward-retry:focus-visible { outline: 3px solid rgba(34, 216, 14, 0.52); outline-offset: 3px; }

/* C07: compact, in-detail request flow. It remains part of the owned booking detail. */
.govii-app__booking-service-requests { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--govii-border); }
.govii-app__booking-service-requests-title { margin: 0 0 10px; color: var(--govii-text); font-size: 15px; font-weight: 800; }
.govii-app__booking-service-request { margin: 0 0 10px; padding: 10px; border: 1px solid var(--govii-border); border-radius: 8px; background: var(--govii-bg-soft); }
.govii-app__booking-service-request strong, .govii-app__booking-service-request p { display: block; margin: 0 0 5px; overflow-wrap: anywhere; }
.govii-app__booking-service-request-form { margin-top: 12px; }
.govii-app__booking-service-request-form label { display: block; margin: 12px 0 5px; color: var(--govii-text); font-size: 13px; font-weight: 700; }
.govii-app__booking-service-request-form textarea.govii-app__input { min-height: 80px; resize: vertical; }
.govii-app__booking-service-request-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.govii-app .govii-app__booking-service-request-type { min-height: 42px; padding: 8px; border: 1px solid var(--govii-border-strong); border-radius: 8px !important; background: #fff; color: var(--govii-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.govii-app .govii-app__booking-service-request-type.is-selected { border-color: var(--govii-primary-dark); background: var(--govii-primary-soft); color: var(--govii-primary-dark); }
.govii-app__booking-service-request-warning, .govii-app__booking-service-request-success { margin: 12px 0 0; padding: 10px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.govii-app__booking-service-request-warning { background: #fff4dc; color: #6b4d00; }
.govii-app__booking-service-request-success { background: var(--govii-primary-soft); color: var(--govii-primary-dark); font-weight: 700; }

/* Loading skeleton grid — reuses the shared govii-app-pulse shimmer. */
.govii-app__reward-card--skeleton { padding-bottom: 12px; }
.govii-app__reward-skeleton-token { width: 100%; aspect-ratio: 1 / 1; }
.govii-app__reward-skeleton-line { height: 12px; margin: 10px 12px 0; border-radius: 7px; }
.govii-app__reward-skeleton-line--name { width: 70%; }
.govii-app__reward-skeleton-line--meta { width: 45%; }
.govii-app__reward-skeleton-token, .govii-app__reward-skeleton-line { background: linear-gradient(90deg, #edf1ef 25%, #f7f9f8 38%, #edf1ef 60%); background-size: 400% 100%; animation: govii-app-pulse 1.35s ease infinite; }

.govii-app__mobility-live-card { margin: 12px 0; }
.govii-app__mobility-live-panel { padding: 14px; border: 1px solid var(--govii-border); border-radius: 8px; background: var(--govii-bg-soft); }
.govii-app__mobility-live-panel h4 { margin: 0 0 8px; text-transform: capitalize; }
.govii-app__mobility-live-panel p { margin: 4px 0 0; color: var(--govii-text-secondary); font-size: 13px; }