/*
  VTG DGTH — content.css
  Nạp ở: trang tin, lưu trữ, bài viết, trang tĩnh, tìm kiếm, 404, hồ sơ và bảng xếp hạng.

  Hai vùng:
    @layer components   mọi rule nhắm class .dg-*
    NGOÀI MỌI @layer    rule nhắm THẺ TRẦN trong .dg-entry — xem chú thích ở cuối file
*/

@layer components {
	/* ---------------------------------------------------- đầu trang & đường dẫn */
	.dg-crumbs {
		margin-block-end: var(--dg-s-5);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-crumbs ol {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dg-s-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dg-crumbs li + li::before {
		content: "/";
		color: var(--dg-line);
		margin-inline-end: var(--dg-s-1);
	}

	.dg-crumbs a {
		color: var(--dg-ink-2);
		text-decoration: none;
	}

	.dg-crumbs a:hover {
		color: var(--dg-brand-fg);
	}

	.dg-crumbs [aria-current] {
		color: var(--dg-ink);
	}

	.dg-pagehead {
		max-inline-size: var(--dg-content);
		margin-block-end: var(--dg-s-7);
	}

	.dg-pagehead__title {
		margin-block-end: var(--dg-s-3);
		text-wrap: pretty;
	}

	.dg-empty {
		padding-block: var(--dg-s-7);
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-lead);
	}

	/* ------------------------------------------------------------ cột phụ phải */
	.dg-aside {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-5);
	}

	.dg-aside__title {
		font-size: var(--dg-fs-eyebrow);
		font-weight: var(--dg-fw-eyebrow);
		letter-spacing: var(--dg-ls-eyebrow);
		text-transform: uppercase;
		color: var(--dg-ink-2);
		padding-block-end: var(--dg-s-2);
		border-block-end: 2px solid var(--dg-brand-fg);
	}

	/* Khung xếp thẻ phải có gap: viền của các thẻ dính vào nhau trông như lỗi kẻ đôi. */
	.dg-aside__list,
	.dg-list,
	.dg-newscol {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-4);
	}

	.dg-list {
		gap: var(--dg-s-5);
	}

	/* Khối hồ sơ ở đầu trang danh mục tin — ngăn với phần tin bằng một đường kẻ */
	.dg-catbrands {
		margin-block-end: var(--dg-s-7);
		padding-block-end: var(--dg-s-7);
		border-block-end: 1px solid var(--dg-line);
	}

	.dg-list__title {
		font-size: var(--dg-fs-h3);
		margin-block-start: var(--dg-s-2);
	}

	.dg-newscol__title {
		font-size: var(--dg-fs-h4);
		padding-block-end: var(--dg-s-2);
		border-block-end: 2px solid var(--dg-brand-fg);
	}

	.dg-newscol__title a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dg-s-2);
		color: inherit;
		text-decoration: none;
	}

	.dg-newscol__title svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
		color: var(--dg-brand-fg);
	}

	/* -------------------------------------------------------------- phân trang */
	.dg-pager {
		margin-block-start: var(--dg-s-7);
	}

	.dg-pager ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dg-s-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dg-pager a,
	.dg-pager span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-inline-size: var(--dg-tap);
		min-block-size: var(--dg-tap);
		padding-inline: var(--dg-s-3);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		color: var(--dg-ink);
		font-size: var(--dg-fs-small);
		font-weight: 600;
		text-decoration: none;
	}

	.dg-pager a:hover {
		border-color: var(--dg-brand-fg);
		color: var(--dg-brand-fg);
	}

	.dg-pager .current {
		background: var(--dg-brand);
		border-color: var(--dg-brand);
		color: var(--dg-on-brand);
	}

	.dg-pager .dots {
		border-color: transparent;
	}

	/* ------------------------------------------------- trang kết quả tìm kiếm */
	.dg-kinds {
		display: flex;
		gap: var(--dg-s-1);
		margin-block: var(--dg-s-6) var(--dg-s-4);
		border-block-end: 1px solid var(--dg-line);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dg-kinds__tab {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-2);
		min-block-size: var(--dg-tap);
		padding-inline: var(--dg-s-3);
		color: var(--dg-ink-2);
		font-weight: 500;
		text-decoration: none;
		white-space: nowrap;
	}

	.dg-kinds__tab:hover {
		color: var(--dg-ink);
	}

	.dg-kinds__tab[aria-current] {
		color: var(--dg-brand-fg);
		box-shadow: inset 0 -2px 0 0 var(--dg-brand-fg);
	}

	.dg-kinds__n {
		padding-inline: var(--dg-s-2);
		border-radius: var(--dg-r-full);
		background: var(--dg-chip-bg);
		font-size: var(--dg-fs-eyebrow);
		font-variant-numeric: tabular-nums;
	}

	.dg-active {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dg-s-2);
		margin-block-end: var(--dg-s-5);
		font-size: var(--dg-fs-small);
	}

	.dg-active__label {
		color: var(--dg-ink-2);
	}

	/* ------------------------------------------- công bố quan hệ thương mại */
	/* Dùng ở CẢ trang hồ sơ lẫn trang bảng xếp hạng — content.css là file duy nhất
	   cả hai cùng nạp. Màu phụ, không phải màu cảnh báo: đây là thông tin, không phải lỗi */
	.dg-partner {
		margin-block-start: var(--dg-s-4);
		padding: var(--dg-s-2) var(--dg-s-3);
		border-radius: var(--dg-r-sm);
		background: var(--dg-accent-soft);
		font-size: var(--dg-fs-eyebrow);
		color: var(--dg-ink-2);
	}

	.dg-top__disc {
		margin-block: 0 var(--dg-s-5);
	}

	/*
	 * Nhãn ngay cạnh tên mục — công bố phải ở chỗ đưa ra lời khẳng định. DESIGN §18.
	 *
	 * Chữ TRUNG TÍNH trên nền màu phụ, giống hệt `.dg-partner` ngay trên nó. Đo trên
	 * nền `--dg-accent-soft`: `--dg-accent-fg` 3,11:1 và `--dg-warn` 4,26:1 — cả hai
	 * TRƯỢT AA ở cỡ 13px. `--dg-ink` cho 16,7:1. Nền vàng đã đủ làm tín hiệu.
	 */
	.dg-tag-partner {
		display: inline-block;
		margin-inline-start: var(--dg-s-2);
		padding-inline: var(--dg-s-2);
		border-radius: var(--dg-r-full);
		background: var(--dg-accent-soft);
		color: var(--dg-ink);
		font-size: var(--dg-fs-eyebrow);
		font-weight: 500;
		vertical-align: middle;
	}

	.dg-weights {
		inline-size: 100%;
		margin-block: var(--dg-s-3);
		border-collapse: collapse;
		font-size: var(--dg-fs-small);
	}

	.dg-weights :is(th, td) {
		padding: var(--dg-s-2) 0;
		border-block-end: 1px solid var(--dg-line);
		text-align: start;
	}

	/* Cột số: nhắm :last-child chứ không phải `td + td` — dòng thân dùng
	   <th scope="row"> cho tên tiêu chí, nên cặp ô là th+td, không phải td+td */
	.dg-weights :is(th, td):last-child {
		inline-size: 5rem;
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	.dg-weights tbody th {
		font-weight: 400;
	}

	.dg-method__when {
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-small);
	}

	/*
	 * TRANG KẾT QUẢ — vỏ chiếm 356px trên màn 911px, chỉ còn chỗ cho 1,7 kết quả.
	 * H1 52px lặp lại đúng thứ ô tìm kiếm ngay dưới đã hiện, nên hạ xuống h3.
	 * Hai cột từ 1280px: dưới mốc đó thẻ CAO HƠN một cột (đo: 361px so với 216px).
	 * Số đo đầy đủ ở DESIGN §23.
	 */
	.search .dg-pagehead {
		margin-block-end: var(--dg-s-4);
	}

	.search .dg-pagehead__title {
		font-size: var(--dg-fs-h3);
	}

	/* Thẻ hàng ngang bó sát: bỏ sapo rồi thì 84px đệm+khe cho 146px nội dung là thừa.
	   Mọi danh sách dùng .dg-card--row đều để QUÉT tiêu đề, không để đọc — DESIGN §23 */
	.dg-card--row .dg-card__body {
		gap: var(--dg-s-2);
		padding: var(--dg-s-4);
	}

	/* Hàng tab và hàng chip lọc nói về CÙNG một thứ — cho chung một hàng, tiết kiệm 43px.
	   Dưới 900px xếp chồng: chip lọc dài hơn tab, ép chung hàng là vỡ. */
	.dg-resbar {
		margin-block: var(--dg-s-6) var(--dg-s-5);
		border-block-end: 1px solid var(--dg-line);
	}

	.dg-resbar .dg-kinds {
		margin-block: 0;
		border-block-end: 0;
		min-inline-size: 0;
	}

	.dg-resbar .dg-active {
		margin-block-end: var(--dg-s-3);
	}

	@media (min-width: 900px) {
		.dg-resbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--dg-s-5);
		}

		.dg-resbar .dg-active {
			margin-block-end: 0;
		}
	}

	@media (min-width: 1280px) {
		.search .dg-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		.search .dg-list > * {
			align-self: start;
			block-size: auto;
		}
	}

	/* Kết quả trên điện thoại: thẻ hàng gọn (ảnh 128px trái, vẫn 1200/630), bỏ breadcrumb,
	   tab chia đều. Số đo ở DESIGN §23 */
	@media (max-width: 639px) {
		.search .dg-crumbs {
			display: none;
		}

		.search .dg-list {
			gap: var(--dg-s-3);
		}

		.search .dg-card--row {
			display: grid;
			grid-template-columns: calc(var(--dg-s-8) * 2) minmax(0, 1fr);
			align-items: start;
			block-size: auto;
		}

		.search .dg-card--row .dg-card__media {
			margin-block-start: var(--dg-s-3);
			margin-inline-start: var(--dg-s-3);
			border-radius: var(--dg-r);
		}

		.search .dg-card--row .dg-card__body {
			gap: var(--dg-s-1);
			padding: var(--dg-s-3);
		}

		.search .dg-card--row .dg-card__title {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			font-size: var(--dg-fs-body);
			line-height: var(--dg-lh-body);
		}

		.search .dg-kinds__tab {
			flex: 1 0 auto;
			justify-content: center;
			gap: var(--dg-s-1);
			padding-inline: var(--dg-s-2);
			font-size: var(--dg-fs-small);
		}

		.search .dg-kinds__n {
			padding-inline: var(--dg-s-1);
		}

		/* Chip "Từ khoá" lặp đúng thứ ô tìm kiếm ngay trên đang hiện (kèm ✕) — chỉ còn nó
		   thì bỏ cả hàng "Đang lọc" */
		.search .dg-chip--kw,
		.search .dg-active:not(:has(.dg-chip--x:not(.dg-chip--kw))) {
			display: none;
		}
	}

	/* Lời nhắn trước danh sách — §23 */
	.dg-searchnote {
		display: flex;
		align-items: flex-start;
		gap: var(--dg-s-2);
		margin-block: 0 var(--dg-s-4);
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-small);
	}

	.dg-searchnote--hint {
		padding: var(--dg-s-3) var(--dg-s-4);
		border-radius: var(--dg-r);
		background: var(--dg-brand-soft);
		color: var(--dg-ink);
	}

	.dg-searchnote svg {
		flex: none;
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
		margin-block-start: 2px;
		color: var(--dg-brand-fg);
	}

	.dg-searchnote a {
		color: var(--dg-brand-fg);
		font-weight: 600;
	}

	.dg-chip--x svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
	}

	.dg-active__reset {
		font-weight: 600;
	}

	.dg-empty__tips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dg-s-3);
		margin-block-start: var(--dg-s-4);
	}

	/* --------------------------------------------------------- ô tìm kiếm rời */
	.dg-searchform {
		display: flex;
		gap: var(--dg-s-2);
		max-inline-size: var(--dg-narrow);
		margin-block-start: var(--dg-s-5);
	}

	/* ------------------------------------------------------------- đầu bài viết */
	/* Không chặn bề ngang: đầu bài nằm trong .dg-article__main nên tự rộng đúng bằng cột
	   đọc, thẳng mép với ảnh và thân bài bên dưới. */
	.dg-post__head {
		margin-block-end: var(--dg-s-5);
	}

	.dg-post__title {
		text-wrap: pretty;
	}

	.dg-post__lead {
		margin-block-start: var(--dg-s-4);
	}

	/* Công bố tài trợ + nhãn bài tổng hợp. Nằm NGOÀI .dg-entry nên không ăn được .dg-note — DESIGN §25 */
	.dg-post__spon,
	.dg-post__note {
		margin-block-start: var(--dg-s-4);
		padding: var(--dg-s-3) var(--dg-s-4);
		border-inline-start: 3px solid var(--dg-accent);
		border-radius: var(--dg-r-sm);
		background: var(--dg-accent-soft);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-post__head .dg-chips {
		margin-block-end: var(--dg-s-3);
	}

	.dg-post__upd {
		margin-block-start: var(--dg-s-3);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-post__thumb {
		margin-block-end: var(--dg-s-6);
	}

	.dg-post__thumb img {
		inline-size: 100%;
		aspect-ratio: var(--dg-ratio-share);
		object-fit: cover;
		border-radius: var(--dg-r-lg);
	}

	.dg-post__thumb figcaption {
		margin-block-start: var(--dg-s-2);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	/* ---------------------------------------------------- hàng công cụ đầu bài
	   Dưới 1024px: tác giả + ngày CHỒNG ở cột trái, nút chia sẻ 44px ở cột phải cao đúng
	   hai dòng đó. Hàng flex cũ đẩy nút xuống một hàng riêng, tốn ~50px trước ảnh (§20) */
	.dg-tools {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--dg-s-1) var(--dg-s-2);
		margin-block-start: var(--dg-s-5);
		padding-block: var(--dg-s-3);
		border-block: 1px solid var(--dg-line);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-tools__bit {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
	}

	.dg-tools svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
	}

	.dg-tools__upd {
		color: var(--dg-accent-fg);
		font-weight: 600;
	}

	/* Không khe giữa ba nút: 3 × 44px + khe thì cột ngày ở màn 375px còn dưới 200px,
	   "Cập nhật 3 tháng 9, 2026" rớt dòng. Icon 18px giữa ô 44px đã tự cách nhau. */
	.dg-tools__share {
		display: inline-flex;
		align-items: center;
		grid-area: 1 / 2 / span 2;
		margin-inline-start: auto;
	}

	.dg-tools__sh {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: var(--dg-tap);
		block-size: var(--dg-tap);
		border-radius: var(--dg-r);
		color: var(--dg-ink-2);
	}

	/* Chuột không cần ô 44px — về lại hàng một dòng như cũ */
	@media (min-width: 1024px) {
		.dg-tools {
			display: flex;
			flex-wrap: wrap;
			gap: var(--dg-s-2) var(--dg-s-4);
		}

		.dg-tools__sh {
			inline-size: var(--dg-tap-sm);
			block-size: var(--dg-tap-sm);
		}
	}

	.dg-tools__sh:hover {
		background: var(--dg-chip-bg);
		color: var(--dg-brand-fg);
	}

	/* Zalo + chép liên kết là <button> in kèm hidden; display:inline-flex ở trên đè [hidden] */
	.dg-tools__sh[hidden] {
		display: none;
	}

	.dg-tools__share {
		position: relative;
	}

	.dg-tools__msg:not(:empty) {
		position: absolute;
		inset-block-start: calc(100% + var(--dg-s-2));
		inset-inline-end: 0;
		z-index: 2;
		inline-size: max-content;
		max-inline-size: 80vw;
		padding: var(--dg-btn-pad-sm);
		border-radius: var(--dg-r);
		background: var(--dg-ink);
		color: var(--dg-surface);
		font-size: var(--dg-fs-small);
		box-shadow: var(--dg-shadow);
	}

	/* ---------------- khung bài: mục lục TRÁI, cột đọc PHẢI · 1024–1279 cột hẹp (§20) */
	/* minmax(0,…) — 1fr có sàn min-content: bảng cột % làm tràn ngang cả trang (§20) */
	.dg-article {
		display: grid;
		gap: var(--dg-s-6);
		grid-template-columns: minmax(0, 1fr);
	}

	/* Mặc định ẩn CẢ cột, không chỉ mục lục bên trong: cột rỗng vẫn chiếm một hàng lưới (§20) */
	.dg-article__side {
		display: none;
	}

	@media (min-width: 1024px) {
		.dg-article {
			--dg-toc-w: min(var(--dg-cell), var(--dg-aside));
			grid-template-columns: var(--dg-toc-w) minmax(0, 1fr);
			align-items: start;
		}

		/* Mục lục không khung: MỘT kẻ dọc ở mép phải cột, dài hết bài (§20) */
		.dg-article:not(.dg-article--solo) {
			background: linear-gradient(var(--dg-line) 0 0) no-repeat var(--dg-toc-w) / 1px 100%;
		}

		.dg-article__side {
			display: block;
			position: sticky;
			inset-block-start: calc(var(--dg-header-h) + var(--dg-s-4));
			transition: inset-block-start var(--dg-t-slow) var(--dg-ease);
		}

		/* header ẩn → lên sát mép (§19) */
		body:has(.dg-header.is-hidden, .dg-header[data-sticky="none"]) .dg-article__side {
			inset-block-start: var(--dg-s-4);
		}
	}

	@media (min-width: 1280px) {
		.dg-article {
			--dg-toc-w: var(--dg-aside);
			gap: var(--dg-s-7);
		}
	}

	/* Không mục lục: MỘT cột — thiếu dòng cột thì bài rơi vào ô mục lục (§20) */
	.dg-article--solo {
		grid-template-columns: minmax(0, 1fr);
		max-inline-size: calc(var(--dg-wide) - var(--dg-aside) - var(--dg-s-7));
		margin-inline: auto;
	}

	/* ---------- mục lục · gập/cắt dòng CHỈ ở .dg-toc, tấm dock dùng danh sách trần (§20) */
	/* đệm phải bằng của mục: mũi tên thẳng mép chữ, không dí vào kẻ dọc */
	.dg-toc__sum {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dg-s-2);
		padding-inline-end: var(--dg-s-3);
		min-block-size: var(--dg-tap-sm);
		font-size: var(--dg-fs-eyebrow);
		font-weight: var(--dg-fw-eyebrow);
		letter-spacing: var(--dg-ls-eyebrow);
		text-transform: uppercase;
		color: var(--dg-ink-2);
		cursor: pointer;
		list-style: none;
	}

	.dg-toc__sum::-webkit-details-marker {
		display: none;
	}

	.dg-toc__caret {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
		transition: transform var(--dg-t) var(--dg-ease);
	}

	.dg-toc[open] .dg-toc__caret {
		transform: rotate(180deg);
	}

	.dg-toc__list,
	.dg-toc__sub {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dg-toc__list {
		margin-block-start: var(--dg-s-3);
	}

	/* relative: page.js cần offsetTop theo danh sách */
	.dg-toc .dg-toc__list {
		position: relative;
		max-block-size: calc(100dvh - var(--dg-header-h) - var(--dg-s-8) - var(--dg-s-8));
		margin-block-start: var(--dg-s-2);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.dg-toc .dg-toc__item span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.dg-toc .dg-toc__item--h3 span {
		-webkit-line-clamp: 1;
	}

	.dg-toc .dg-toc__item a.is-active span {
		-webkit-line-clamp: none;
	}

	.dg-toc .is-live .dg-toc__sub {
		display: none;
	}

	.dg-toc .is-live .dg-toc__item:is(:has(a.is-active), :focus-within) > .dg-toc__sub {
		display: block;
	}

	/* H2 của nhóm đang đọc */
	.dg-toc__item:has(.dg-toc__sub a.is-active) > a {
		color: var(--dg-ink);
		border-color: var(--dg-ink-2);
	}

	.dg-toc__item a {
		display: block;
		padding: var(--dg-s-2) var(--dg-s-3);
		border-inline-start: 3px solid var(--dg-line);
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-small);
		line-height: var(--dg-lh-small);
		text-decoration: none;
	}

	.dg-toc__item--h3 a {
		padding-inline-start: var(--dg-s-5);
		font-size: var(--dg-fs-eyebrow);
	}

	.dg-toc__item a:hover {
		color: var(--dg-ink);
		border-color: var(--dg-ink-2);
	}

	.dg-toc__item a.is-active {
		color: var(--dg-brand-fg);
		border-color: var(--dg-brand-fg);
		font-weight: 600;
	}

	/* Mục lục TRONG thân bài — chỉ dưới 1024px, gập sẵn sau đoạn đầu. Toc::inline(), §20.
	   Phải đứng SAU `.dg-toc .dg-toc__list`: cùng độ cụ thể, bỏ trần cao để khỏi cuộn lồng. */
	.dg-toc--in {
		padding: 0 var(--dg-s-3) var(--dg-s-1);
		border-radius: var(--dg-r-lg);
		background: var(--dg-surface-2);
	}

	.dg-toc--in .dg-toc__sum {
		min-block-size: var(--dg-tap);
		padding-inline-end: 0;
	}

	.dg-toc--in .dg-toc__list {
		max-block-size: none;
	}

	.dg-toc--in .dg-toc__item a {
		padding-block: var(--dg-s-3);
	}

	.dg-entry .dg-toc--in a {
		text-decoration: none;
	}

	@media (min-width: 1024px) {
		.dg-toc--in {
			display: none;
		}
	}

	/* iPad dọc: tấm dock thành ngăn kéo trái (§20) */
	@media (min-width: 768px) and (max-width: 1023px) {
		.dg-sheet {
			inset: 0 auto 0 0;
			inline-size: calc(var(--dg-aside) + var(--dg-s-8));
			max-inline-size: 100%;
			block-size: 100dvh;
			max-block-size: 100dvh;
			margin: 0;
			border-block-start: 0;
			border-inline-end: 3px solid var(--dg-brand-fg);
			border-radius: 0 var(--dg-r-lg) var(--dg-r-lg) 0;
		}
	}

	/* -------------------------------------- chân bài: tác giả + chip — DESIGN §20 */
	.dg-author {
		display: flex;
		gap: var(--dg-s-4);
		max-inline-size: var(--dg-content);
		margin-block-start: var(--dg-s-7);
		padding: var(--dg-s-5);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
	}

	.dg-author :is(.dg-ph, .dg-author__img) {
		flex: none;
		inline-size: var(--dg-s-8);
		block-size: var(--dg-s-8);
		border-radius: var(--dg-r-full);
		object-fit: cover;
	}

	/* Trang Ban biên tập — DESIGN §31 */
	.dg-team {
		margin-block-start: var(--dg-s-7);
	}

	.dg-team .dg-author {
		margin: 0;
	}

	.dg-author .dg-ph__ch {
		font-size: var(--dg-fs-h3);
	}

	.dg-author__name {
		margin: 0;
		font-size: var(--dg-fs-h4);
		font-weight: 600;
	}

	.dg-author__job,
	.dg-author__bio {
		margin: var(--dg-s-2) 0 0;
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-small);
		line-height: var(--dg-lh-small);
	}

	.dg-author__more {
		display: inline-block;
		margin-block-start: var(--dg-s-3);
		font-size: var(--dg-fs-small);
	}

	/* -------------------------------------------------------- chân bài: chip */
	.dg-terms {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dg-s-3) var(--dg-s-6);
		margin-block-start: var(--dg-s-6);
		padding-block-start: var(--dg-s-5);
		border-block-start: 1px solid var(--dg-line);
	}

	.dg-terms__row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dg-s-3);
	}

	.dg-terms__label {
		font-size: var(--dg-fs-eyebrow);
		font-weight: var(--dg-fw-eyebrow);
		letter-spacing: var(--dg-ls-eyebrow);
		text-transform: uppercase;
		color: var(--dg-ink-2);
	}

	/* Dải liên quan tự có đệm --dg-section. Hạ đệm đáy của bài xuống, nhưng KHÔNG
	   về 0: hàng chip sẽ dính thẳng vào nền của dải. */
	.dg-section:has(+ .dg-related) {
		padding-block-end: var(--dg-s-7);
	}

	/* ------------------------------------------------------------ thân bài viết */
	/* Cột đọc chặn ở --dg-content — DESIGN §20 */
	.dg-entry {
		font-size: var(--dg-fs-body);
		line-height: var(--dg-lh-read);
		max-inline-size: var(--dg-content);
	}

	.dg-entry > * + * {
		margin-block-start: var(--dg-s-5);
	}

	.dg-entry > :is(h2, h3, h4) {
		margin-block-start: var(--dg-s-8);
		text-wrap: pretty;
	}

	.dg-entry :is(h2, h3, h4) {
		scroll-margin-block-start: calc(var(--dg-header-h) + var(--dg-s-5));
	}

	.dg-entry a {
		text-decoration: underline;
	}

	.dg-entry .wp-block-image figcaption,
	.dg-entry figcaption {
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
		text-align: center;
	}

	/* Cách trên/dưới rộng hơn đoạn thường — DESIGN §20 */
	.dg-entry blockquote {
		margin-block: var(--dg-s-6);
		padding-inline-start: var(--dg-s-5);
		border-inline-start: 3px solid var(--dg-brand-fg);
		font-size: var(--dg-fs-lead);
		color: var(--dg-ink);
	}

	.dg-entry :is(pre, code) {
		font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
		font-size: var(--dg-fs-small);
	}

	.dg-entry pre {
		padding: var(--dg-s-4);
		background: var(--dg-surface-2);
		border-radius: var(--dg-r);
		overflow-x: auto;
	}

	.dg-entry code:not(pre code) {
		padding: 2px var(--dg-s-1);
		background: var(--dg-chip-bg);
		border-radius: var(--dg-r-sm);
	}

	/* Bảng trong bài luôn cuộn được: thân bài không bao giờ đẩy trang tràn ngang. */
	.dg-entry .wp-block-table {
		overflow-x: auto;
	}

	.dg-entry :is(th, td) {
		padding: var(--dg-s-3);
		border: 1px solid var(--dg-line);
		text-align: start;
	}

	.dg-entry th {
		background: var(--dg-surface-2);
		font-weight: 600;
	}

	.dg-entry .wp-block-separator {
		border: 0;
		border-block-start: 1px solid var(--dg-line);
	}

	/* ------------------------------------------------- trang dải (page-band)
	   Lưới ba làn: content · wide · full. Block lõi chỉ cần class alignwide /
	   alignfull là tự nhảy làn, không cần margin âm và không tràn ngang. */
	.dg-band {
		padding-block: var(--dg-section);
	}

	/* Trang dải tự chặn cột bằng lưới — DESIGN §20 */
	.dg-entry--band {
		max-inline-size: none;
		display: grid;
		grid-template-columns:
			[full-start] minmax(var(--dg-gutter), 1fr)
			[wide-start] minmax(0, calc((var(--dg-wide) - var(--dg-content)) / 2))
			[content-start] min(var(--dg-content), 100% - var(--dg-gutter) * 2) [content-end]
			minmax(0, calc((var(--dg-wide) - var(--dg-content)) / 2)) [wide-end]
			minmax(var(--dg-gutter), 1fr) [full-end];
	}

	.dg-entry--band > * {
		grid-column: content;
	}

	.dg-entry--band > .alignwide {
		grid-column: wide;
	}

	.dg-entry--band > .alignfull {
		grid-column: full;
		max-inline-size: none;
	}

	/* Hộp lưu ý — block Nhóm với class .dg-note gõ tay. Điện thoại đệm nhỏ — DESIGN §20 */
	.dg-entry .dg-note {
		padding: var(--dg-s-4);
		background: var(--dg-brand-soft);
		border-inline-start: 3px solid var(--dg-brand-fg);
		border-radius: var(--dg-r);
	}

	@media (min-width: 640px) {
		.dg-entry .dg-note {
			padding: var(--dg-s-5);
		}
	}

	/* =============================================================================
	   DÙNG CHUNG trang bảng xếp hạng (list.css) + trang hồ sơ (profile.css): khối điểm,
	   thanh tiêu chí, ưu/nhược. Để ở đây vì hai trang đó đều nạp content.css — nhân đôi
	   vào hai file là hai bản sẽ lệch nhau.
	   ========================================================================== */
	/* Thẻ thông tin có viền — trang hồ sơ VÀ trang Liên hệ (page-contact.php) cùng dùng */
	.dg-infocard {
		padding: var(--dg-s-5);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
		background: var(--dg-surface);
	}

	.dg-infocard .dg-aside__title {
		margin-block-end: var(--dg-s-4);
	}

	.dg-scorebox {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dg-s-1);
		padding: var(--dg-s-4);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		background: var(--dg-surface);
		min-inline-size: var(--dg-scorebox);
	}

	.dg-scorebox__label {
		font-size: var(--dg-fs-eyebrow);
		font-weight: var(--dg-fw-eyebrow);
		letter-spacing: var(--dg-ls-eyebrow);
		text-transform: uppercase;
		color: var(--dg-ink-2);
	}

	.dg-bars {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-4);
	}

	/* auto-fit: có cả ưu lẫn nhược thì 2 cột, chỉ một khối thì kín hàng — không trống nửa phải */
	.dg-pcs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--dg-cell)), 1fr));
		gap: var(--dg-s-4);
		margin-block-start: var(--dg-s-5);
	}

	.dg-pc {
		padding: var(--dg-s-4);
		border-radius: var(--dg-r);
		background: var(--dg-surface-2);
	}

	.dg-pc__title {
		display: flex;
		align-items: center;
		gap: var(--dg-s-2);
		margin-block-end: var(--dg-s-3);
		font-size: var(--dg-fs-eyebrow);
		font-weight: var(--dg-fw-eyebrow);
		letter-spacing: var(--dg-ls-eyebrow);
		text-transform: uppercase;
	}

	.dg-pc__title svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
	}

	.dg-pc.is-pro .dg-pc__title {
		color: var(--dg-ok);
	}

	.dg-pc.is-con .dg-pc__title {
		color: var(--dg-warn);
	}

	.dg-pc__list {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-2);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--dg-fs-small);
		line-height: var(--dg-lh-body);
	}

	.dg-pc__list li {
		position: relative;
		padding-inline-start: var(--dg-s-4);
	}

	.dg-pc__list li::before {
		content: "";
		position: absolute;
		inset-block-start: 0.55em;
		inset-inline-start: 0;
		inline-size: var(--dg-s-2);
		block-size: 2px;
		background: currentColor;
		opacity: 0.5;
	}
}

/* ============================================================================
   NGOÀI MỌI @layer — bắt buộc.

   WordPress in CSS block lõi (wp-block-library và các khối riêng lẻ) NGOÀI mọi
   @layer, và những rule đó nhắm THẲNG vào thẻ trần:
       figure{margin:0 0 1em}  ·  ol,ul{…}  ·  h1:where(.wp-block-heading){…}
   Khai báo không-layer thắng MỌI khai báo có layer, bất kể thứ tự và specificity.

   Vì vậy: rule nhắm thẻ trần trong vùng nội dung phải nằm ở đây.
   Rule nhắm class .dg-* thì cứ để trong @layer ở trên.
   ========================================================================== */

.dg-entry figure {
	margin: 0;
}

.dg-entry > figure {
	margin-block: var(--dg-s-7) var(--dg-s-6);
}

.dg-entry img {
	block-size: auto;
	border-radius: var(--dg-r);
}

/* Cách đoạn ở ĐÂY, không trong @layer — §2.3. list-style: reset `ul[class]` xoá chấm
   của cả block Gutenberg. DESIGN §20 */
.dg-entry :is(ul, ol) {
	margin-block: 0 var(--dg-s-5);
	padding-inline-start: var(--dg-s-6);
	list-style: revert;
}

.dg-entry li + li {
	margin-block-start: var(--dg-s-2);
}

.dg-entry li > :is(ul, ol) {
	margin-block: var(--dg-s-2) 0;
}

.dg-entry li::marker {
	color: var(--dg-brand-fg);
	font-weight: 700;
}

.dg-entry .dg-note :is(ul, ol) {
	padding-inline-start: var(--dg-s-5);
}

/* Mục lục trong thân bài (Toc::inline) — gỡ lề + chấm mà ba rule trên gắn cho mọi ul/li */
.dg-entry .dg-toc :is(ul, li) {
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.dg-entry :is(h2, h3, h4) {
	margin-block-end: 0;
}

.dg-entry p {
	margin-block: 0 var(--dg-s-5);
}

/* Căn đều nướng sẵn từ trình soạn cũ — inline chỉ thua !important. Căn trái: §20 */
.dg-entry [style*="justify"] {
	text-align: start !important;
}

/* Nội dung <li> hay bị bọc trong <p> (nội dung nhập từ site cũ). Lề đáy 24px của đoạn
   văn thoát ra khỏi <li> rồi thu gọn với khe 8px của mục sau — khoảng cách giữa các mục
   phình thành 24px. Cắt lề đáy của phần tử CUỐI trong mục, đoạn lồng nhau vẫn giữ khe. */
.dg-entry li > :last-child {
	margin-block-end: 0;
}

/* Khe DƯỚI tiêu đề. Phải ở đây, sau rule `p` và `> figure`: cả ba cùng độ cụ thể (0,1,1)
   nên thứ tự quyết định. Để trong @layer thì `p{margin-block:0 …}` ngoài layer đè mất và
   khe tụt về 0 — trong khi figure vẫn giữ 48px, thành ra mỗi thứ một kiểu. DESIGN §20 */
.dg-entry :is(h2, h3, h4) + * {
	margin-block-start: var(--dg-s-5);
}

.dg-entry table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--dg-fs-small);
}