/**
 * DS Elements — Đầu bài viết
 */

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

.ds-ph {
	--ds-ph-avatar: 40px;
	--ds-ph-meta-gap: var(--ds-space-6);

	width: 100%;
	min-width: 0;
}

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

/* --- Tiêu đề ------------------------------------------------------------ */

/* Không viết hoa: token h1 quy định uppercase cho tiêu đề section, còn tên bài
   viết dài hai dòng mà viết hoa hết thì đọc rất mệt. */
.ds-ph__title {
	margin: 0;
	color: var(--ds-ph-title-color, var(--ds-color-heading));
	font-size: var(--ds-fs-h1);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h1);
}

.ds-ph__lead {
	margin: var(--ds-space-4) 0 0;
	color: var(--ds-ph-lead-color, var(--ds-color-body));
	font-size: var(--ds-fs-body);
	line-height: var(--ds-lh-body);
}

/* --- Hàng thông tin ------------------------------------------------------ */

.ds-ph__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-space-4) var(--ds-ph-meta-gap);
	margin-top: var(--ds-space-6);
}

.ds-ph__item {
	display: flex;
	align-items: center;
	gap: var(--ds-space-3);
	min-width: 0;
}

/* Vạch ngăn dựng bằng border của mục kế tiếp, không phải phần tử riêng — như
   vậy khi hàng xuống dòng thì vạch đi theo mục chứ không lơ lửng cuối dòng. */
.ds-ph__item + .ds-ph__item {
	padding-left: var(--ds-ph-meta-gap);
	border-left: 1px solid var(--ds-ph-divider-color, var(--ds-color-border));
}

.ds-ph__avatar {
	flex: 0 0 auto;
	width: var(--ds-ph-avatar);
	height: var(--ds-ph-avatar);
}

.ds-ph__avatar img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: var(--ds-radius-pill);
	object-fit: cover;
	background: var(--ds-color-surface);
}

.ds-ph__author-text,
.ds-ph__fact-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ds-ph__author-name {
	color: var(--ds-ph-author-color, var(--ds-color-heading));
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-tight);
}

.ds-ph__author-role,
.ds-ph__fact-label {
	color: var(--ds-ph-meta-color, var(--ds-color-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

.ds-ph__fact-value {
	color: var(--ds-ph-strong-color, var(--ds-color-heading));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-small);
}

/* Mẩu chỉ có một dòng (phút đọc, lượt xem) thì chữ nhạt như nhãn, không đậm —
   nếu không cả hàng toàn chữ đậm, mất trật tự thị giác. */
.ds-ph__fact--single .ds-ph__fact-value {
	color: var(--ds-ph-meta-color, var(--ds-color-muted));
	font-weight: var(--ds-fw-regular);
}

.ds-ph__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--ds-ph-icon-color, var(--ds-color-muted));
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-pill);
}

.ds-ph__icon svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.ds-ph__icon i {
	font-size: 13px;
	line-height: 1;
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 767px) {
	.ds-ph {
		--ds-ph-meta-gap: var(--ds-space-4);
	}

	/* Bỏ vạch ngăn: ở bề ngang này hàng luôn xuống dòng, vạch dính vào mục đầu
	   dòng dưới trông như gạch đầu dòng thừa. */
	.ds-ph__item + .ds-ph__item {
		padding-left: 0;
		border-left: 0;
	}

	.ds-ph__meta {
		gap: var(--ds-space-3) var(--ds-space-4);
	}
}