/* Điện thoại, máy bảng trên toàn site: không để lớp phủ, chữ hay nút nổi che ảnh và nội dung. */

/* Banner đầu trang: ảnh rõ ở trên, chữ nằm trên dải nền riêng ở dưới.
   Bản gốc xếp ảnh dưới lớp nền tối và đặt chữ đè lên ảnh; lớp banner trang trí chỉ dùng cho màn hình lớn. */
@media (max-width: 1023px) {
	section.relative.aspect-square {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
		background: #2a2114;
	}
	section.relative.aspect-square:has(> .-z-20:not([src=""])) > picture,
	section.relative.aspect-square > img[src=""] {
		display: none;
	}
	section.relative.aspect-square > picture {
		display: block;
	}
	section.relative.aspect-square > .-z-20:not([src=""]),
	section.relative.aspect-square > picture img {
		position: relative;
		inset: auto;
		z-index: 0;
		display: block;
		width: 100%;
		height: auto;
		max-height: 460px;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		object-position: center 20%;
		filter: none;
	}
	section.relative.aspect-square > div.-z-20 {
		aspect-ratio: 4 / 3;
	}
	section.relative.aspect-square > div.-z-20 img {
		object-position: center 15%;
	}
	section.relative.aspect-square > div:not(.-z-20) {
		height: auto;
	}
	section.relative.aspect-square > div:not(.-z-20):has(h1, p) {
		padding-block: 20px;
	}
	section.relative.aspect-square > div:not(.-z-20):not(:has(h1, p)) {
		display: none;
	}
	section.relative.aspect-square > div:not(.-z-20) .text-justify {
		text-align: left;
	}
	section.relative.aspect-square > div:not(.-z-20) .grid.mt-10 {
		margin-top: 12px;
		padding: 0 16px;
	}
	section.relative.aspect-square > div:not(.-z-20) > div[class*="w-[93%]"] {
		width: 100%;
	}
}

@media (max-width: 1023px) {
	/* Cột hẹp căn đều hai bên tạo khoảng trắng lớn giữa các chữ */
	.text-justify {
		text-align: left;
	}

	/* Mũi tên slider nằm dưới slider, không đè lên ảnh và chữ */
	:has(> [class*="cs-prev-"]) {
		padding-bottom: 46px;
	}
	[class*="cs-prev-"],
	[class*="cs-next-"] {
		top: auto;
		right: auto;
		bottom: 0;
		translate: none;
		transform: none;
	}
	[class*="cs-prev-"] {
		left: calc(50% - 42px);
	}
	[class*="cs-next-"] {
		left: calc(50% + 6px);
	}

	/* Bảng giá vừa màn hình, không bị cắt cột bên phải */
	.wp-datatable-container col {
		width: auto;
	}
	.wp-datatable-container th,
	.wp-datatable-container td {
		padding: 10px;
		font-size: 14px;
	}

	/* Trang dịch vụ, mục Nhiệm vụ: hai ảnh đặt cạnh nhau thay vì chồng lên nhau */
	.aspect-\[661\/796\] {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		aspect-ratio: auto;
	}
	.aspect-\[661\/796\] img {
		position: static;
		width: 100%;
		height: 100%;
		border: 0;
		object-fit: cover;
	}
}

/* Nút liên hệ nổi: thanh ngang dưới đáy thay cho cột nút tròn đè lên nội dung */
@media (max-width: 1024px) {
	body:has(.fab-container) {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}
	body .fab-container {
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: row;
		gap: 0;
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
		background: #2a2114;
		border-top: 2px solid #c9a055;
	}
	body .fab-container .contact-item {
		flex: 1 1 0;
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		width: auto;
		min-width: 0;
		height: 52px;
		padding: 0 2px;
		border: 0;
		border-radius: 0;
		background: none !important;
		background-image: none !important;
		box-shadow: none;
		text-align: center;
		animation: none;
	}
	body .fab-container .contact-item img {
		width: 26px;
		height: 26px;
	}
	body .fab-container .contact-item::before,
	body .fab-container .contact-item::after,
	body .fab-container .contact-item .wave-effect {
		animation: none;
	}
	body .fab-container .contact-item .contact-text {
		display: block !important;
		color: #f6e6b4 !important;
		font-size: 10px;
		line-height: 1.15;
		white-space: normal;
	}
}
@media (max-width: 359px) {
	body .fab-container .contact-item .contact-text {
		font-size: 8.5px;
	}
	body .fab-container .contact-item:nth-last-child(-n+2) {
		flex-grow: 1.3;
	}
}