/**
 * DS Elements — Thân bài viết
 *
 * Style ở đây phải chọn được cả thẻ do trình soạn thảo WordPress sinh ra, tức
 * là thẻ trần không có class. Nên đây là chỗ duy nhất trong bộ này dùng bộ chọn
 * thẻ, và luôn kèm .ds-pct ở đầu để không rò ra ngoài widget.
 */

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

.ds-pct {
	--ds-pct-para-gap: var(--ds-space-4);
	--ds-pct-anchor: 100px;

	width: 100%;
	min-width: 0;
	color: var(--ds-pct-body-color, var(--ds-color-body));
	font-size: var(--ds-fs-body);
	line-height: var(--ds-lh-body);
}

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

/* --- Tiêu đề trong bài --------------------------------------------------- */

/* scroll-margin-top: khoảng chừa khi trình duyệt nhảy tới #id từ mục lục.
   Thiếu nó thì tiêu đề nằm sát mép trên và bị header dính che mất. */
.ds-pct__h2,
.ds-pct__h3 {
	scroll-margin-top: var(--ds-pct-anchor);
}

.ds-pct__h2 {
	display: flex;
	align-items: baseline;
	gap: var(--ds-space-3);
	margin: var(--ds-space-12) 0 var(--ds-space-4);
	color: var(--ds-pct-h2-color, var(--ds-color-brand));
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h3);
}

.ds-pct > .ds-pct__h2:first-child {
	margin-top: 0;
}

.ds-pct__num {
	flex: 0 0 auto;
	color: var(--ds-pct-num-color, var(--ds-color-brand));
	font-variant-numeric: tabular-nums;
}

.ds-pct--no-num .ds-pct__num {
	display: none;
}

.ds-pct__h3 {
	margin: var(--ds-space-8) 0 var(--ds-space-3);
	color: var(--ds-pct-h3-color, var(--ds-color-heading));
	font-size: var(--ds-fs-h4);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-h4);
}

/* --- Chữ ---------------------------------------------------------------- */

.ds-pct p {
	margin: 0 0 var(--ds-pct-para-gap);
}

.ds-pct > *:last-child {
	margin-bottom: 0;
}

.ds-pct a {
	color: var(--ds-pct-link-color, var(--ds-color-brand-light));
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ds-pct strong,
.ds-pct b {
	color: var(--ds-color-heading);
	font-weight: var(--ds-fw-semibold);
}

.ds-pct ul,
.ds-pct ol {
	margin: 0 0 var(--ds-pct-para-gap);
	padding-left: var(--ds-space-6);
}

.ds-pct li {
	margin-bottom: var(--ds-space-2);
}

.ds-pct li::marker {
	color: var(--ds-color-brand-light);
}

.ds-pct blockquote {
	margin: var(--ds-space-8) 0;
	padding: var(--ds-space-4) var(--ds-space-6);
	border-left: 3px solid var(--ds-color-brand-light);
	background: var(--ds-color-surface);
	border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
	color: var(--ds-color-heading);
}

.ds-pct blockquote p:last-child {
	margin-bottom: 0;
}

/* --- Ảnh và bảng --------------------------------------------------------- */

.ds-pct img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ds-pct-img-radius, var(--ds-radius-md));
}

.ds-pct figure {
	margin: var(--ds-space-8) 0;
}

.ds-pct figcaption {
	margin-top: var(--ds-space-3);
	color: var(--ds-color-muted);
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

/* Bảng rộng hơn cột thì cuộn trong khung của nó, không đẩy cả trang tràn ngang.
   Bọc bằng phần tử riêng thì tốt hơn nhưng trình soạn thảo không sinh ra. */
.ds-pct table {
	width: 100%;
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 var(--ds-pct-para-gap);
	font-size: var(--ds-fs-small);
}

.ds-pct th,
.ds-pct td {
	padding: var(--ds-space-3);
	border: 1px solid var(--ds-color-border);
	text-align: left;
}

.ds-pct th {
	background: var(--ds-color-surface);
	color: var(--ds-color-brand);
	font-weight: var(--ds-fw-semibold);
}

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

@media (max-width: 767px) {
	.ds-pct__h2 {
		margin-top: var(--ds-space-8);
	}
}