/* =====================================================================
 * [family_album] – "Khoảnh khắc đáng nhớ": 1 ảnh lớn + 4 ảnh nhỏ (lightbox: vehicle-list.css)
 * Màu: chỉ dùng biến :root (--hg-primary, --hg-text, --hg-button, --green-natural)
 * ===================================================================== */
.fa-album.vl-media {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 14px;
}

.fa-album .fa-item {
	position: relative;
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	aspect-ratio: 3 / 2;
	border: 0 !important;
	border-radius: 10px;
	background: color-mix(in srgb, var(--hg-text) 8%, #fff) !important;
	box-shadow: none;
	overflow: hidden;
	cursor: pointer;
}
/* Ảnh 1: lớn, cao bằng 2 hàng ảnh nhỏ */
.fa-album .fa-item:first-child { grid-row: span 2; aspect-ratio: auto; }

.fa-album .fa-item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform .5s;
}
.fa-album .fa-item:hover img { transform: scale(1.05); }
.fa-album .fa-item:focus { outline: none; }
.fa-album .fa-item:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }

/* Ô cuối "+N" */
.fa-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, #000 40%, transparent);
	color: #fff;
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	transition: background .2s;
}
.fa-item:hover .fa-more { background: color-mix(in srgb, #000 55%, transparent); }

/* Ít ảnh hơn 5 → lưới tự co */
.fa-album.count-1 { grid-template-columns: 1fr; }
.fa-album.count-1 .fa-item:first-child { aspect-ratio: 16 / 9; }
.fa-album.count-2 { grid-template-columns: 2fr 1fr; }
.fa-album.count-3 { grid-template-columns: 2fr 1fr; }
.fa-album.count-2 .fa-item:first-child { grid-row: auto; aspect-ratio: 3 / 2; }

/* ---------- Responsive ---------- */
@media (min-width: 550px) and (max-width: 849px) {
	.fa-album.vl-media { gap: 10px; }
}
/* Điện thoại: ảnh lớn ở trên, 4 ảnh nhỏ 2 × 2 bên dưới */
@media (max-width: 549px) {
	.fa-album.vl-media,
	.fa-album.count-2,
	.fa-album.count-3 { grid-template-columns: 1fr 1fr; gap: 8px; }
	.fa-album .fa-item { border-radius: 8px; }
	.fa-album .fa-item:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
	.fa-album.count-2 .fa-item:first-child { grid-column: auto; aspect-ratio: 3 / 2; }
	.fa-more { font-size: 22px; }
}

/* =====================================================================
 * layout="marquee" – 2 cột ảnh tự chạy (trái lên, phải xuống)
 * ===================================================================== */
.fa-marquee.vl-media {
	--fa-gap: 16px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: var(--fa-gap);
	height: var(--fa-h, 560px);
	overflow: hidden;
	/* mờ dần ở mép trên / dưới */
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
	        mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
.fa-col { min-width: 0; }
.fa-track {
	display: flex;
	flex-direction: column;
	gap: var(--fa-gap);
	animation: fa-scroll var(--fa-speed, 40s) linear infinite;
	will-change: transform;
}
.fa-col.is-down .fa-track { animation-direction: reverse; }

@media (hover: hover) { .fa-marquee:hover .fa-track { animation-play-state: paused; } }

@keyframes fa-scroll { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--fa-gap) / 2)); } }

.fa-marquee .fa-item {
	position: relative;
	display: block;
	flex: none;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	border: 0 !important;
	border-radius: 20px;
	background: color-mix(in srgb, var(--hg-text) 30%, transparent) !important;
	box-shadow: none;
	overflow: hidden;
	cursor: pointer;
}
.fa-marquee .fa-item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform .5s;
}
.fa-marquee .fa-item:hover img { transform: scale(1.05); }
.fa-marquee .fa-item:focus { outline: none; }
.fa-marquee .fa-item:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Khách tắt hiệu ứng chuyển động → đứng yên */
/*@media (prefers-reduced-motion: reduce) { .fa-track { animation: none; } }*/

@media (min-width: 550px) and (max-width: 849px) {
	.fa-marquee.vl-media { --fa-gap: 12px; height: min(var(--fa-h, 560px), 480px); }
	.fa-marquee .fa-item { border-radius: 16px; }
}
@media (max-width: 549px) {
	.fa-marquee.vl-media { --fa-gap: 10px; height: min(var(--fa-h, 560px), 380px); }
	.fa-marquee .fa-item { border-radius: 14px; }
}