/*
  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;
	}

	/* --------------------------------------------------------- ô 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 */
	.dg-post__head {
		max-inline-size: var(--dg-content);
		margin-block-end: var(--dg-s-6);
	}

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

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

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

	.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-7);
	}

	.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 */
	.dg-tools {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dg-s-2) var(--dg-s-4);
		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;
	}

	.dg-tools__share {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
		margin-inline-start: auto;
	}

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

	.dg-tools__sh svg {
		fill: currentColor;
		stroke: none;
	}

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

	/* ------------------------------------- khung bài: mục lục TRÁI, cột đọc PHẢI */
	.dg-article {
		display: grid;
		gap: var(--dg-s-6);
		grid-template-columns: 1fr;
	}

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

		.dg-article__side {
			position: sticky;
			inset-block-start: calc(var(--dg-header-h) + var(--dg-s-4));
			max-block-size: calc(100dvh - var(--dg-header-h) - var(--dg-s-8));
			overflow-y: auto;
		}
	}

	/* Bài không mục lục chặn đúng bằng bề ngang cột bài của bài CÓ mục lục,
	   để hai loại bài trông như nhau. */
	.dg-article--solo {
		max-inline-size: calc(var(--dg-wide) - var(--dg-aside) - var(--dg-s-7));
		margin-inline: auto;
	}

	/* ------------------------------------------------------------------ mục lục */
	.dg-toc {
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		padding: var(--dg-s-3) var(--dg-s-4);
	}

	.dg-toc__sum {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dg-s-2);
		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 {
		margin: 0;
		padding: 0;
		list-style: none;
		margin-block-start: var(--dg-s-3);
	}

	.dg-toc__item a {
		display: block;
		padding: var(--dg-s-2) var(--dg-s-3);
		border-inline-start: 2px 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;
	}

	/* Điện thoại: mục lục gập ở đầu bài bị ẩn hẳn — dock đã lo việc đó.
	   Để cả hai là hai lối vào cho cùng một thứ. */
	@media (max-width: 1023px) {
		.dg-article__side .dg-toc {
			display: none;
		}
	}

	/* -------------------------------------------------------- chân bài: chip */
	.dg-terms {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-3);
		margin-block-start: var(--dg-s-7);
		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 */
	.dg-entry {
		font-size: var(--dg-fs-body);
		line-height: var(--dg-lh-read);
	}

	.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 > h2 + *,
	.dg-entry > h3 + *,
	.dg-entry > h4 + * {
		margin-block-start: var(--dg-s-4);
	}

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

	/* Căn đều CHỈ đoạn văn và mục danh sách — căn đều một tiêu đề hai dòng là hở
	   toác chữ giữa các từ. Block nào tự khai căn lề trong trình soạn thảo thì bị
	   loại trừ hẳn, để class has-text-align-* của lõi tự lo. */
	.dg-entry :is(p, li):not([class*="has-text-align"]) {
		text-align: justify;
	}

	.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;
	}

	.dg-entry blockquote {
		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);
	}

	.dg-entry--band {
		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 trong trình soạn thảo */
	.dg-entry .dg-note {
		padding: var(--dg-s-5);
		background: var(--dg-brand-soft);
		border-inline-start: 3px solid var(--dg-brand-fg);
		border-radius: var(--dg-r);
	}
}

/* ============================================================================
   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);
}

.dg-entry :is(ul, ol) {
	margin-block: 0;
	padding-inline-start: var(--dg-s-6);
}

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

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

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

.dg-entry p {
	margin-block: 0;
}

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