/**
 * Trang kết quả tìm kiếm
 * ---------------------------------------------------------------------------
 * Chỉ nạp khi is_search(). main.css của Webflow không có kiểu nào cho
 * .page-numbers (phân trang do paginate_links() của WordPress sinh ra), nên
 * mặc định nó hiện thành danh sách chấm đầu dòng.
 *
 * Kiểu dưới đây bám theo ngôn ngữ thiết kế sẵn có của .button-oval:
 * bo tròn 100rem, xanh --_brand---dark-blue, hover chuyển --_brand---dark-green,
 * transition .3s.
 */

/* ------------------------------------------------------------------ */
/* Phân trang                                                          */
/* ------------------------------------------------------------------ */

.wl-search-pagination {
	margin-top: 3rem;
}

ul.page-numbers {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

ul.page-numbers li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-numbers {
	justify-content: center;
	align-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 .875rem;
	border: 1px solid var(--_brand---border);
	border-radius: 100rem;
	color: var(--_brand---dark-grey);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;

	/*
	 * main.css đặt `a { text-decoration: underline }` cho mọi thẻ a, và thẻ con
	 * không huỷ được gạch chân do cha vẽ — phải tắt ngay tại đây.
	 */
	text-decoration: none;
	transition: all .3s;
	display: flex;
}

a.page-numbers:hover {
	border-color: var(--_brand---dark-green);
	color: var(--_brand---dark-green);
	text-decoration: none;
}

/* Trang đang xem: tô đặc như nút chính. */
.page-numbers.current {
	background-color: var(--_brand---dark-blue);
	border-color: var(--_brand---dark-blue);
	color: #fff;
	cursor: default;
}

/* Nút "Trang trước / Trang sau" rộng hơn vì có chữ. */
.page-numbers.prev,
.page-numbers.next {
	padding: 0 1.25rem;
}

/* Dấu ba chấm khi nhiều trang: không phải nút, bỏ viền. */
.page-numbers.dots {
	border-color: #0000;
	color: var(--_brand---border);
	cursor: default;
}

@media (max-width: 767px) {
	.page-numbers {
		min-width: 2.5rem;
		height: 2.5rem;
		padding: 0 .625rem;
		font-size: .9375rem;
	}

	/* Màn hình hẹp: giấu chữ số ở giữa, chỉ giữ trước/sau và trang hiện tại. */
	.page-numbers.prev,
	.page-numbers.next {
		padding: 0 1rem;
	}
}

/* ------------------------------------------------------------------ */
/* Danh sách kết quả                                                   */
/* ------------------------------------------------------------------ */

.wl-search-result {
	border-bottom: 1px solid var(--_brand---medium-grey);
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
}

.wl-search-result:last-of-type {
	border-bottom: 0;
}

.wl-search-result a {
	text-decoration: none;
	transition: color .3s;
}

.wl-search-result a:hover {
	color: var(--_brand---dark-green);
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Ảnh đại diện trong danh sách                                        */
/* ------------------------------------------------------------------ */

/*
 * Bài có ảnh thì xếp hai cột: ảnh trái, chữ phải. Bài không có ảnh giữ nguyên
 * một cột như cũ (không gắn class has-thumb) nên không tạo ô trống lệch hàng.
 */
.wl-search-result.has-thumb {
	grid-column-gap: 1.5rem;
	grid-template-columns: 15rem 1fr;
	align-items: start;
	display: grid;
}

.wl-search-thumb {
	border-radius: 1rem;
	overflow: hidden;
	display: block;
	aspect-ratio: 16 / 9;
	background-color: var(--_brand---light-grey, #f4f4f4);
}

.wl-search-thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
	transition: transform .4s;
}

.wl-search-result.has-thumb:hover .wl-search-thumb img {
	transform: scale(1.04);
}

/* Hẹp thì xếp dọc, ảnh chiếm trọn bề ngang. */
@media (max-width: 767px) {
	.wl-search-result.has-thumb {
		grid-row-gap: 1rem;
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wl-search-thumb img {
		transition: none;
	}

	.wl-search-result.has-thumb:hover .wl-search-thumb img {
		transform: none;
	}
}