/* =====================================================================
 * [family_tours] – nút lọc + sắp xếp (lưới & thẻ tour lấy từ tour-list.css)
 * Màu: chỉ dùng biến :root (--hg-primary, --hg-text, --hg-button, --green-natural)
 * ===================================================================== */
.ftl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

/* ---------- Nút lọc ---------- */
.ftl-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ftl .ftl-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 0;
	height: 38px;
	margin: 0;
	padding: 0 16px 0 12px;
	border: 1px solid color-mix(in srgb, var(--hg-text) 16%, transparent) !important;
	border-radius: 999px;
	background: #fff !important;
	box-shadow: none;
	color: var(--hg-text) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
}
.ftl .ftl-chip:hover { border-color: var(--hg-primary) !important; color: var(--hg-primary) !important; }
.ftl .ftl-chip.is-active { border-color: var(--hg-primary) !important; background: var(--hg-primary) !important; color: #fff !important; }
.ftl .ftl-chip:focus { outline: none; }
.ftl .ftl-chip:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }

.ftl-chip-icon { display: inline-flex; flex: none; width: 22px; height: 22px; color: var(--hg-primary); }
.ftl-chip-icon svg, .ftl-chip-icon img { display: block; width: 100% !important; height: 100% !important; margin: 0; object-fit: contain; }
.ftl-chip.is-active .ftl-chip-icon { color: #fff; }
.ftl-chip.is-active .ftl-chip-icon img { filter: brightness(0) invert(1); } /* icon ảnh → trắng khi đang chọn */

/* ---------- Sắp xếp ---------- */
/* ---------- Sắp xếp (menu tự làm – thay ô chọn mặc định của trình duyệt) ---------- */
.ftl-sort { position: relative; flex: none; }
.ftl .ftl-sort-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0 34px 0 12px;
	border: 1px solid color-mix(in srgb, var(--hg-text) 16%, transparent) !important;
	border-radius: 10px;
	background: #fff !important;
	box-shadow: none;
	color: var(--hg-text) !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.ftl .ftl-sort-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border: solid color-mix(in srgb, var(--hg-text) 55%, transparent);
	border-width: 0 1.6px 1.6px 0;
	transform: rotate(45deg);
	transition: transform .2s, margin .2s;
}
.ftl .ftl-sort.is-open .ftl-sort-btn::after { margin-top: -1px; transform: rotate(-135deg); }
.ftl .ftl-sort-btn:hover, .ftl .ftl-sort.is-open .ftl-sort-btn { border-color: var(--hg-primary) !important; }
.ftl .ftl-sort.is-open .ftl-sort-btn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hg-primary) 12%, transparent); }
.ftl .ftl-sort-btn:focus { outline: none; }
.ftl .ftl-sort-btn:focus-visible { border-color: var(--hg-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hg-primary) 12%, transparent); }
.ftl-sort-btn svg { flex: none; width: 18px; height: 18px; color: var(--hg-primary); }
.ftl-sort-current { color: var(--hg-primary); font-weight: 600; }

.ftl-sort-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	min-width: 100%;
	margin: 6px 0 0;
	padding: 6px;
	border: 1px solid color-mix(in srgb, var(--hg-text) 12%, transparent);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px color-mix(in srgb, var(--hg-text) 16%, transparent);
	list-style: none;
	animation: ftlMenuIn .16s ease-out;
}
.ftl-sort-menu[hidden] { display: none; }
@keyframes ftlMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ftl-sort-menu li {
	position: relative;
	margin: 0;
	margin-left: unset !important;
	padding: 9px 34px 9px 12px;
	border-radius: 8px;
	color: var(--hg-text);
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.ftl-sort-menu li:hover, .ftl-sort-menu li:focus { outline: none; background: color-mix(in srgb, var(--hg-primary) 8%, #fff); color: var(--hg-primary); }
.ftl-sort-menu li[aria-selected="true"] { color: var(--hg-primary); font-weight: 600; }
.ftl-sort-menu li[aria-selected="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 5px;
	height: 10px;
	margin-top: -7px;
	border: solid var(--hg-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Đang tải */
.ftl.is-loading .ctl-grid { opacity: .45; pointer-events: none; }

/* Dòng "Phù hợp với" trên thẻ */
.ctl-card-meta .is-audience { align-items: center; }
.ctl-card-meta .is-audience .ctl-icon { margin-top: -1px; }

/* ---------- Màn hình nhỏ ---------- */
@media (max-width: 1099px) {
	.ftl-bar { flex-direction: column; align-items: stretch; gap: 12px; }
	.ftl-sort { align-self: flex-end; }
}
@media (max-width: 849px) {
	/* Nút lọc cuộn ngang, không xuống dòng */
	.ftl-chips { flex-wrap: nowrap; margin: 0 -15px; padding: 2px 15px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.ftl-chips::-webkit-scrollbar { display: none; }
}
@media (max-width: 549px) {
	.ftl .ftl-chip { height: 36px; padding: 0 14px 0 10px; font-size: 13px; }
	.ftl-chip-icon { width: 20px; height: 20px; }
	.ftl-sort { align-self: stretch; }
	.ftl .ftl-sort-btn { width: 100%; }
	.ftl-sort-menu { left: 0; right: auto; }
}