/**
 * DS Elements — Danh sách bài viết (dòng ngang)
 */

.elementor-widget-ds-post-list {
	width: 100%;
	min-width: 0;
}

.ds-pl {
	--ds-pl-padding: var(--ds-space-6);
	--ds-pl-row-gap: var(--ds-space-4);
	--ds-pl-thumb: 72px;
	--ds-pl-title-lines: 2;

	width: 100%;
	min-width: 0;
	padding: var(--ds-pl-padding);
	background: var(--ds-pl-bg, var(--ds-color-white));
	border: 1px solid var(--ds-pl-border, var(--ds-color-border));
	border-radius: var(--ds-pl-radius, var(--ds-radius-md));
}

.ds-pl *,
.ds-pl *::before,
.ds-pl *::after {
	box-sizing: border-box;
}

.ds-pl__heading {
	margin: 0 0 var(--ds-space-4);
	color: var(--ds-pl-heading-color, var(--ds-color-brand));
	font-size: var(--ds-fs-h4);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h4);
	text-transform: uppercase;
	letter-spacing: var(--ds-ls-nav);
}

/* Khoảng cách bằng padding chứ không bằng gap: có padding thì vạch ngăn mới nằm
   đúng giữa hai dòng. Dùng gap rồi thêm padding là cộng dồn, dòng cách nhau gấp
   đôi mà vạch vẫn dính sát mép trên. */
.ds-pl__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-pl__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-space-3);
	min-width: 0;
	padding-block: calc(var(--ds-pl-row-gap) / 2);
}

.ds-pl__item:first-child {
	padding-top: 0;
}

.ds-pl__item:last-child {
	padding-bottom: 0;
}

/* Vạch ngăn chỉ hiện khi có người đặt màu — mặc định để trống cho nhẹ mắt. */
.ds-pl__item + .ds-pl__item {
	border-top: 1px solid var(--ds-pl-divider-color, transparent);
}

.ds-pl__thumb {
	flex: 0 0 auto;
	display: block;
	width: var(--ds-pl-thumb);
	height: var(--ds-pl-thumb);
	overflow: hidden;
	background: var(--ds-color-surface);
	border-radius: var(--ds-pl-thumb-radius, var(--ds-radius-md));
}

.ds-pl__thumb img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.ds-pl__body {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-2);
	min-width: 0;
}

.ds-pl__title {
	margin: 0;
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-tight);

	/* Cắt dòng để mọi dòng cao xấp xỉ nhau; đặt 0 dòng thì bỏ giới hạn. */
	display: -webkit-box;
	-webkit-line-clamp: var(--ds-pl-title-lines);
	line-clamp: var(--ds-pl-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ds-pl__title a {
	color: var(--ds-pl-title-color, var(--ds-color-heading));
	text-decoration: none;
	transition: color var(--ds-transition);
}

.ds-pl__title a:hover {
	color: var(--ds-color-brand-light);
}

.ds-pl__date {
	color: var(--ds-pl-date-color, var(--ds-color-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
	font-variant-numeric: tabular-nums;
}