/* =====================================================================
 * [activity_gallery] – "Hình ảnh và video hoạt động" (lightbox: vehicle-list.css)
 * Màu: chỉ dùng biến :root (--hg-primary, --hg-text, --hg-button, --green-natural)
 * ===================================================================== */
.ag { --ag-cols: 5; --ag-gap: 16px; position: relative; }

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

/* ---------- Dải thẻ cuộn ngang ---------- */
.ag-viewport { position: relative; }
.ag .ag-track {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	gap: var(--ag-gap);
	padding: 4px 2px 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ag-track::-webkit-scrollbar { display: none; }
.ag .ag-item {
	display: flex;
	flex: 0 0 calc((100% - (var(--ag-cols) - 1) * var(--ag-gap)) / var(--ag-cols));
	flex-direction: column;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background: #fff !important;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--hg-text) 12%, transparent);
	color: var(--hg-text);
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	scroll-snap-align: start;
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
}
.ag .ag-item[hidden] { display: none; }
.ag .ag-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, var(--hg-text) 16%, transparent); }
.ag .ag-item:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }
.ag-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: color-mix(in srgb, var(--hg-text) 8%, #fff); }
.ag-media img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0; object-fit: cover; transition: transform .5s; }
.ag-item:hover .ag-media img { transform: scale(1.05); }
.ag .ag-cap { display: block; padding: 12px 12px 14px; color: var(--hg-text); font-size: 14px; font-weight: 600; line-height: 1.4; white-space: normal; }

/* Nút ‹ › */
.ag .ag-nav {
	position: absolute;
	top: calc(50% - 30px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--hg-text) 18%, transparent) !important;
	border-radius: 50%;
	background: #fff !important;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--hg-text) 15%, transparent);
	color: var(--hg-text) !important;
	cursor: pointer;
}
.ag .ag-nav[hidden] { display: none; }
.ag .ag-nav:hover { border-color: var(--hg-primary) !important; background: var(--hg-primary) !important; color: #fff !important; }
.ag .ag-nav svg { width: 18px; height: 18px; }
.ag .ag-nav.is-prev { left: -14px; }
.ag .ag-nav.is-next { right: -14px; }

.ag-empty { margin: 10px 0 0; color: color-mix(in srgb, var(--hg-text) 65%, #fff); font-size: 14px; }

/* ---------- Responsive ---------- */
@media (min-width: 850px) and (max-width: 1099px) { .ag { --ag-cols: 4; } }
@media (min-width: 550px) and (max-width: 849px) { .ag { --ag-cols: 3; --ag-gap: 14px; } }
@media (max-width: 849px) {
	.ag-tabs { flex-wrap: nowrap; margin: 0 -15px 16px; padding: 2px 15px 4px; overflow-x: auto; scrollbar-width: none; }
	.ag-tabs::-webkit-scrollbar { display: none; }
	.ag .ag-tab { flex: 0 0 auto; }
}
@media (max-width: 549px) {
	.ag { --ag-cols: 1.6; --ag-gap: 12px; }
	.ag .ag-nav { display: none; }
	.ag .ag-tab { height: 30px; padding: 0 13px; font-size: 13px; }
	.ag .ag-cap { padding: 10px 10px 12px; font-size: 13px; }
}