/* LHVB skeleton + loading states */
@keyframes lhvb-shimmer { 0% { background-position: 150% 0 } 100% { background-position: -50% 0 } }

:root {
	--lhvb-sk-base: color-mix(in srgb, currentColor 14%, transparent);
	--lhvb-sk-hi: color-mix(in srgb, #fff 55%, transparent);
	--lhvb-sk-bg: linear-gradient(100deg, var(--lhvb-sk-base) 30%, var(--lhvb-sk-hi) 50%, var(--lhvb-sk-base) 70%);
}

/* Lazy images: shimmer until Bricks swaps in the real source */
img.bricks-lazy-hidden {
	background-image: var(--lhvb-sk-bg);
	background-size: 300% 100%;
	animation: lhvb-shimmer 1.4s ease-in-out infinite;
}
img.bricks-lazy-load { transition: opacity .35s ease; }

/* Skeleton cards inserted while "Xem thêm" loads (shapes measured from a real card) */
.lhvb-skel { pointer-events: none; user-select: none; position: relative; }
.lhvb-skel > :not(.lhvb-sk-shape) { visibility: hidden !important; }
.lhvb-skel, .lhvb-skel * { animation: none !important; transition: none !important; }
.lhvb-skel .lhvb-sk-shape {
	position: absolute;
	display: block;
	visibility: visible;
	background-image: var(--lhvb-sk-bg);
	background-size: 300% 100%;
	animation: lhvb-shimmer 1.4s ease-in-out infinite !important;
	border-radius: 6px;
	z-index: 1;
}
.lhvb-skel .lhvb-sk-media { border-radius: 0; }

/* Load-more button busy state */
.lhvb-is-loading {
	position: relative;
	pointer-events: none;
	cursor: progress;
	color: transparent !important;
}
.lhvb-is-loading > * { visibility: hidden; }
.lhvb-is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-color: var(--lhvb-btn-fg, #fff) var(--lhvb-btn-fg, #fff) transparent transparent;
	animation: lhvb-spin .7s linear infinite;
}
@keyframes lhvb-spin { to { transform: rotate(360deg) } }

/* JetSmartFilters: dim + shimmer the results while filtering / paging */
.jet-filters-loading { position: relative; }
.jet-filters-loading > * { opacity: .45; transition: opacity .2s ease; }
.jet-filters-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: var(--lhvb-sk-bg);
	background-size: 300% 100%;
	animation: lhvb-shimmer 1.4s ease-in-out infinite;
	pointer-events: none;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	img.bricks-lazy-hidden, .lhvb-skel .lhvb-sk-shape, .jet-filters-loading::before { animation: none !important; }
	.lhvb-is-loading::after { animation-duration: 1.6s; }
}