/**
 * DS Elements — Ảnh bài viết + dải số liệu
 */

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

.ds-pf {
	--ds-pf-ratio: 1.8;

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

	/* Dải số liệu xếp mấy cột là do bề rộng CỘT quyết định, không phải bề rộng
	   màn hình: cùng một màn 1440, widget này nằm ở cột giữa rộng 553px thì bốn
	   mục không đủ chỗ, mà nằm full width thì thừa chỗ. Media query theo viewport
	   không phân biệt được hai trường hợp đó, container query thì có. */
	container-type: inline-size;
}

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

/* --- Ảnh ---------------------------------------------------------------- */

.ds-pf__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--ds-radius-lg);
	background: var(--ds-color-surface);
}

.ds-pf__img {
	width: 100%;
	display: block;
	aspect-ratio: var(--ds-pf-ratio);
	object-fit: cover;
}

.ds-pf__caption {
	margin-top: var(--ds-space-3);
	color: var(--ds-color-muted);
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
	text-align: center;
}

/* --- Dải số liệu -------------------------------------------------------- */

/* Nằm đè lên đáy ảnh chứ không nối tiếp bên dưới: ảnh vẫn giữ đúng bo góc, và
   dải chỉ ăn vào phần ảnh ít thông tin nhất. */
.ds-pf__bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;

	padding: var(--ds-space-4) var(--ds-space-6);
	background: var(--ds-pf-bar-bg, var(--ds-color-brand));
}

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

.ds-pf__stat + .ds-pf__stat {
	border-left: 1px solid var(--ds-pf-divider-color, rgba(255, 255, 255, .18));
}

.ds-pf__stat-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--ds-pf-icon-color, var(--ds-color-accent));
	border: 1px solid currentColor;
	border-radius: var(--ds-radius-pill);
}

.ds-pf__stat-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.ds-pf__stat-icon i {
	font-size: 15px;
	line-height: 1;
}

.ds-pf__stat-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ds-pf__stat-value {
	color: var(--ds-pf-value-color, var(--ds-color-white));
	font-size: var(--ds-fs-h4);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
}

.ds-pf__stat-label {
	color: var(--ds-pf-label-color, var(--ds-color-on-dark-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* --- Cột hẹp ------------------------------------------------------------ */

/* Ngưỡng 900px, đo chứ không đoán: nhãn dài nhất ("Khách hàng tin tưởng") ở cỡ
   chữ small chiếm ~135px, cộng icon 32 + khe 12 + đệm ngang 32 là mỗi mục cần
   ~211px; bốn mục cộng đệm của dải thành ~900px. Đặt 700px thì ở bề rộng 772px
   nhãn thứ nhất và thứ ba vỡ hai dòng — đã đo đúng như vậy. */
@container (max-width: 900px) {
	.ds-pf__bar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ds-space-4) 0;
		padding: var(--ds-space-4);
	}

	/* Còn hai cột thì mục đầu mỗi hàng không được có vạch dọc bên trái. */
	.ds-pf__stat:nth-child(odd) {
		border-left: 0;
	}
}

@container (max-width: 420px) {
	.ds-pf__bar {
		padding: var(--ds-space-3);
	}

	.ds-pf__stat {
		gap: var(--ds-space-2);
		padding-inline: var(--ds-space-2);
	}

	.ds-pf__stat-icon {
		width: 28px;
		height: 28px;
	}

	.ds-pf__stat-icon svg,
	.ds-pf__stat-icon i {
		width: 13px;
		height: 13px;
		font-size: 13px;
	}
}