/**
 * Nút "Danh mục tour" nổi trên mobile + bảng chọn trượt từ dưới lên.
 * Floating mobile category button + bottom sheet. See inc/mobile-cat-nav.php.
 *
 * Chỉ hiện từ 900px trở xuống; desktop đã có menu ngang nên không cần.
 * Mobile only (<=900px) — desktop has the normal nav.
 */
.myct-catnav {
	--catnav-green: #02814f;
	--catnav-green-dark: #02663f;
	--catnav-ink: #16241d;
	--catnav-muted: #6b7c74;
	--catnav-line: #e3e9e6;
	/* JS nâng nút lên khi trang có thanh giá sticky (.myct-mobile-bar). */
	--catnav-lift: 0px;
	display: none;
}

@media ( max-width: 900px ) {
	.myct-catnav {
		display: block;
	}

	/* ---------- Nút nổi ---------- */
	/* Góc dưới bên PHẢI: góc trái đã là nút liên hệ của button-contact-vr. */
	.myct-catnav-fab {
		position: fixed;
		right: 14px;
		bottom: calc( 16px + var( --catnav-lift ) + env( safe-area-inset-bottom, 0px ) );
		z-index: 99998;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 11px 16px;
		border: 0;
		border-radius: 999px;
		background: var( --catnav-green );
		color: #fff;
		font: 700 13px/1 inherit;
		font-family: inherit;
		letter-spacing: .2px;
		cursor: pointer;
		box-shadow: 0 8px 22px -6px rgba( 2, 102, 63, .65 ), 0 2px 6px rgba( 0, 0, 0, .18 );
		/* Chỉ hiện sau khi khách bắt đầu cuộn — xem mobile-cat-nav.js. */
		opacity: 0;
		visibility: hidden;
		transform: translateY( 14px );
		transition: opacity .22s ease, transform .22s ease, visibility .22s;
	}
	.myct-catnav.is-ready .myct-catnav-fab {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.myct-catnav-fab i {
		font-size: 14px;
	}
	.myct-catnav-fab:active {
		background: var( --catnav-green-dark );
	}
	.myct-catnav-fab:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}
	/* Mở bảng rồi thì ẩn nút đi cho khỏi che nội dung bảng. */
	.myct-catnav.is-open .myct-catnav-fab {
		opacity: 0;
		visibility: hidden;
	}

	/* ---------- Lớp phủ ---------- */
	.myct-catnav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba( 10, 26, 19, .5 );
		opacity: 0;
		visibility: hidden;
		transition: opacity .24s ease, visibility .24s;
	}
	.myct-catnav.is-open .myct-catnav-backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* ---------- Bảng chọn ---------- */
	/* z-index cao hơn nút liên hệ (99999) để nó không đè lên bảng khi mở. */
	.myct-catnav-sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100001;
		max-height: 82vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: env( safe-area-inset-bottom, 0px );
		background: #fff;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -10px 40px rgba( 0, 0, 0, .28 );
		color: var( --catnav-ink );
		visibility: hidden;
		transform: translateY( 100% );
		transition: transform .28s cubic-bezier( .22, .61, .36, 1 ), visibility .28s;
	}
	.myct-catnav.is-open .myct-catnav-sheet {
		visibility: visible;
		transform: none;
	}

	.myct-catnav-head {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 16px 12px;
		border-bottom: 1px solid var( --catnav-line );
	}
	/* Vạch kéo nhỏ ở đỉnh bảng — tín hiệu quen thuộc của bottom sheet. */
	.myct-catnav-head::before {
		content: "";
		position: absolute;
		top: 7px;
		left: 50%;
		transform: translateX( -50% );
		width: 38px;
		height: 4px;
		border-radius: 999px;
		background: #d8e2dd;
	}
	.myct-catnav-title {
		font-size: 15px;
		font-weight: 700;
	}
	.myct-catnav-close {
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 1px solid var( --catnav-line );
		border-radius: 50%;
		background: #f4f8f6;
		color: var( --catnav-muted );
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
	}
	.myct-catnav-close:active {
		background: #e7efeb;
	}

	.myct-catnav-list {
		margin: 0;
		padding: 4px 0;
		list-style: none;
	}
	.myct-catnav-list li {
		margin: 0;
	}
	.myct-catnav-list a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 13px 16px;
		border-bottom: 1px solid #f1f5f3;
		color: var( --catnav-ink );
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}
	.myct-catnav-list a:active {
		background: #f4f8f6;
	}
	.myct-catnav-ico {
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		background: #eaf5ef;
		color: var( --catnav-green );
		font-size: 14px;
	}
	.myct-catnav-name {
		flex: 1 1 auto;
		min-width: 0;
	}
	.myct-catnav-count {
		flex: 0 0 auto;
		min-width: 24px;
		padding: 2px 7px;
		border-radius: 999px;
		background: #f0f4f2;
		color: var( --catnav-muted );
		font-size: 12px;
		font-weight: 700;
		text-align: center;
	}
	.myct-catnav-arrow {
		flex: 0 0 auto;
		color: #b9c6c0;
		font-size: 12px;
	}

	.myct-catnav-all {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 12px 16px 18px;
		padding: 12px;
		border-radius: 10px;
		background: var( --catnav-green );
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
	}
	.myct-catnav-all:active {
		background: var( --catnav-green-dark );
	}

	/* Khoá cuộn trang phía sau khi bảng đang mở. */
	body.myct-catnav-lock {
		overflow: hidden;
	}
}

/* Tôn trọng thiết lập giảm chuyển động của hệ thống. */
@media ( prefers-reduced-motion: reduce ) {
	.myct-catnav-fab,
	.myct-catnav-sheet,
	.myct-catnav-backdrop {
		transition: none;
	}
}