/* =====================================================================
 * [legal_docs] – "Hồ sơ pháp lý": slider 4 cột (bộ chạy: destination-slider), không nút, không chấm
 * Màu: chỉ dùng biến :root (--hg-primary, --hg-text, --hg-button, --green-natural)
 * ===================================================================== */
.ld.vl-media { display: block; } /* bỏ kiểu khung ảnh của vehicle-list */
.ld .ld-slider.ds-slider { --ds-cols: 4; --ds-gap: 20px; }
.ld .ds-nav, .ld .fts-dots { display: none !important; }
.ld-item { display: flex; }
.ld .ds-track > .ld-item { flex: 0 0 calc((100% - (var(--ds-cols) - 1) * var(--ds-gap)) / var(--ds-cols)); }

.ld .ld-card {
	position: relative;
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	aspect-ratio: 3 / 5;
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background: color-mix(in srgb, var(--hg-text) 8%, #fff) !important;
	box-shadow: 0 10px 14px -8px color-mix(in srgb, var(--hg-text) 30%, transparent);
	cursor: zoom-in;
	transition: transform .2s, box-shadow .2s;
}
.ld .ld-card:hover { transform: translateY(-3px); box-shadow: 0 14px 18px -10px color-mix(in srgb, var(--hg-text) 38%, transparent); }
.ld .ld-card:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }
.ld .ld-card img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: top center;
	transition: transform .5s;
}
.ld .ld-card:hover img { transform: scale(1.04); }

/* Chữ trên nền chuyển tối ở đáy ảnh */
.ld .ld-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 48px 12px 14px;
	background: linear-gradient(to top, color-mix(in srgb, var(--hg-text) 90%, transparent) 0%, color-mix(in srgb, var(--hg-text) 55%, transparent) 55%, transparent 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
}
.ld .ld-cap { border-radius: 0 0 16px 16px; }
.ld .ds-viewport { padding: 8px 0 26px; margin: -8px 0 -26px; }

/* ---------- Responsive ---------- */
@media (min-width: 550px) and (max-width: 849px) { .ld .ld-slider.ds-slider { --ds-cols: 3; --ds-gap: 14px; } }
@media (max-width: 549px) {
	.ld .ld-slider.ds-slider { --ds-cols: 1.6; --ds-gap: 12px; }
	.ld .ld-cap { padding: 40px 10px 12px; font-size: 13px; }
}