/*
 * TKT-013 — dải ba cam kết bị "díu" trên tablet và mobile.
 *
 * Ở màn hẹp `.px-trust` xếp thẻ thành một cột (hoặc hai cột) nhưng `gap: 0`
 * của bản desktop vẫn giữ nguyên: ba thẻ dính liền nhau, tiêu đề thẻ dưới sát
 * đoạn mô tả thẻ trên. Desktop (ba cột, ngăn bằng đường kẻ dọc) không đổi.
 */
@media ( max-width: 64rem ) {
	.px-trust {
		row-gap: var( --wp--preset--spacing--md );
	}

	.px-trust__body {
		gap: 0.375rem;
	}

	.px-trust__title {
		line-height: 1.4;
	}

	.px-trust__text {
		line-height: 1.6;
	}
}

@media ( max-width: 40rem ) {
	.px-trust {
		row-gap: 0;
	}

	/* Một cột: mỗi thẻ cách thẻ trước bằng một đường kẻ ngang và khoảng thở. */
	.px-trust__card {
		gap: 0.75rem;
		padding-block: var( --wp--preset--spacing--sm );
		padding-inline: 0;
	}

	.px-trust__card:first-child {
		padding-block-start: 0;
	}

	.px-trust__card:last-child {
		padding-block-end: 0;
	}

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

/*
 * TKT-013 — banner trên mobile: ảnh đứng riêng, KHÔNG cắt; tiêu đề xuống dưới.
 *
 * Banner của khách là ảnh in sẵn chữ (slogan, hotline). Trên màn hẹp nó bị
 * `object-fit: cover` cắt ngang — mất mép chữ — và tiêu đề trang (chữ trắng) đè
 * ngay lên chữ trong ảnh nên hai thứ rối vào nhau. Từ 768px trở xuống:
 *
 * - ảnh hiện nguyên tỉ lệ gốc, rộng hết chiều ngang, không lớp phủ tối;
 * - tiêu đề trang thành đoạn chữ ĐEN nằm dưới ảnh.
 *
 * Desktop giữ nguyên bố cục ảnh nền + chữ trắng.
 *
 * `!important` có chủ đích: cỡ ảnh nằm trong thuộc tính style của chính thẻ
 * (`aspect-ratio`, `object-fit`) và lớp màu chữ preset của WordPress cũng
 * `!important`.
 */
@media ( max-width: 48rem ) {
	/* 1. Banner dạng cover có H1: trang thông tin, điều khoản, văn phòng, tra cứu… */
	main .wp-block-cover.px-banner-tkt006,
	main .wp-block-cover:has( h1 ) {
		aspect-ratio: auto !important;
		display: block;
		min-height: 0 !important;
		overflow: visible;
		padding: 0 !important;
	}

	/*
	 * `min-height` là chỗ khoảng trống phát sinh: phucxuyen.css đặt
	 * `.wp-site-blocks main .wp-block-cover:has( > … > h1 ) { min-height: 16rem !important }`
	 * (và 20rem/28rem ở màn rộng) — độ ưu tiên cao hơn selector trên, nên cover vẫn cao
	 * 256px dù ảnh banner 16:5 chỉ cao ~123px, thừa ~130px dưới tiêu đề. Selector
	 * này cố ý dài hơn mọi luật ấy.
	 */
	.wp-site-blocks main .wp-block-cover.px-banner-tkt006:has( > .wp-block-cover__inner-container > h1 ),
	.wp-site-blocks .wp-block-cover.px-banner-tkt006:has( > .wp-block-cover__inner-container > h1 ) {
		min-height: 0 !important;
	}

	main .wp-block-cover.px-banner-tkt006 > .wp-block-cover__background,
	main .wp-block-cover:has( h1 ) > .wp-block-cover__background {
		display: none;
	}

	main .wp-block-cover.px-banner-tkt006 > img.wp-block-cover__image-background,
	main .wp-block-cover:has( h1 ) > img.wp-block-cover__image-background {
		aspect-ratio: auto !important;
		display: block;
		height: auto !important;
		inset: auto;
		object-fit: contain !important;
		position: static;
		width: 100%;
	}

	main .wp-block-cover.px-banner-tkt006 > .wp-block-cover__inner-container,
	main .wp-block-cover:has( h1 ) > .wp-block-cover__inner-container {
		padding-block: var( --wp--preset--spacing--md ) 0;
		width: 100%;
	}

	main .wp-block-cover.px-banner-tkt006 h1,
	main .wp-block-cover:has( h1 ) h1 {
		color: var( --px-fg-title, #000 ) !important;
		font-size: 1.5rem !important;
		line-height: 1.3;
		margin: 0;
		text-shadow: none;
	}

	/* 2. Banner ảnh tĩnh (Giới thiệu, Dịch vụ, landing): bỏ khung cắt 16:5. */
	main .px-page-banner img,
	body.px-landing main .wp-block-image.alignfull > img {
		aspect-ratio: auto !important;
		height: auto !important;
		object-fit: contain !important;
		width: 100%;
	}

	/*
	 * 3. Slider trang chủ: khung theo tỉ lệ ảnh đầu tiên (`--px-hero-ratio` do
	 * khối đặt), mặc định 16:5 — tỉ lệ banner 1920×600 của khách — thay cho 4:3.
	 * Ảnh `contain` nên không mất mép; ảnh khác tỉ lệ có dải trắng thay vì bị cắt.
	 */
	.px-hero__track {
		aspect-ratio: var( --px-hero-ratio, 16 / 5 );
		max-height: none;
	}

	.px-hero__media {
		object-fit: contain !important;
	}
}

/* ---- Nút và khung phóng to banner (assets/banner-zoom.js) ---- */

.px-bz__open {
	display: none;
}

@media ( max-width: 48rem ) {
	.px-banner-tkt006,
	.px-page-banner,
	body.px-landing .wp-block-image.alignfull,
	.px-hero--slider {
		position: relative;
	}

	.px-bz__open {
		align-items: center;
		background: rgb( 255 255 255 / 0.92 );
		border: 0;
		border-radius: 50%;
		box-shadow: 0 1px 4px rgb( 0 0 0 / 0.3 );
		color: var( --wp--preset--color--fg, #000 );
		cursor: pointer;
		display: inline-flex;
		height: 2.75rem;
		inset-block-start: 0.5rem;
		inset-inline-end: 0.5rem;
		justify-content: center;
		padding: 0;
		position: absolute;
		width: 2.75rem;
		z-index: 3;
	}
}

html.px-bz-open {
	overflow: hidden;
}

.px-bz {
	background: rgb( 0 0 0 / 0.96 );
	display: flex;
	flex-direction: column;
	inset: 0;
	position: fixed;
	z-index: 100000;
}

.px-bz__close {
	background: #fff;
	border: 0;
	border-radius: 50%;
	color: #000;
	cursor: pointer;
	font-size: 1.75rem;
	height: 2.75rem;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	line-height: 1;
	padding: 0;
	position: absolute;
	width: 2.75rem;
	z-index: 2;
}

/* `pinch-zoom` để trình duyệt tự lo cử chỉ chụm hai ngón. */
.px-bz__scroll {
	-webkit-overflow-scrolling: touch;
	align-items: center;
	display: flex;
	flex: 1;
	overflow: auto;
	touch-action: pan-x pan-y pinch-zoom;
}

.px-bz__img {
	flex: none;
	height: auto;
	max-width: none;
	width: 260vw;
}

.px-bz__hint {
	color: #fff;
	font-size: 0.875rem;
	inset-block-end: 1rem;
	inset-inline: 0;
	margin: 0;
	pointer-events: none;
	position: absolute;
	text-align: center;
}