/*
  VTG DGTH — main.css · nạp ở MỌI trang.

  Mục lục:
    TOKEN         khai :root và [data-surface] — NGOÀI mọi @layer
    reset         chuẩn hoá trình duyệt
    base          thẻ trần: chữ, liên kết, ảnh, ô nhập
    layout        .dg-wrap · .dg-section · .dg-grid · .dg-bleed
    components    nút · chip · điểm số · thẻ · header · bảng trượt · tìm kiếm ·
                  chân trang · dock · tấm mục lục
    utility       trợ năng và vài lớp phụ

  Hai luật không được quên:
  1. Mọi con số phải đến từ var(--dg-*). Ngoại lệ ghi ở DESIGN.md §9.
  2. Khối :root và [data-surface] để NGOÀI @layer — thẻ <style> của Tokens.php
     phải ghi đè được, và CSS block lõi của WordPress cũng không nằm trong layer nào.
*/

/* ============================================================ TOKEN — cấu hình được
   Mặc định dưới đây phải KHỚP TỪNG CHỮ SỐ với src/Tokens.php.
   Lệch nhau thì giao diện tự đổi lúc ai đó bấm Lưu ở Customizer. */
:root {
	/* bề ngang & chiều cao */
	--dg-shell: 1280px;
	--dg-wide: 1280px;
	--dg-content: 760px;
	--dg-narrow: 560px;
	--dg-aside: 320px;
	--dg-header-h: 68px;
	--dg-header-h-m: 56px;
	--dg-logo-h: 34px;
	--dg-logo-h-m: 28px;
	--dg-flogo-h: 40px;
	--dg-flogo-h-m: 32px;

	/* font */
	--dg-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* thang chữ — 11 vai trò */
	--dg-fs-hero: clamp(40px, 26.29px + 2.857vw, 64px);
	--dg-lh-hero: 1.08;
	--dg-fw-hero: 700;
	--dg-ls-hero: -0.02em;
	--dg-fs-h1: clamp(32px, 20.57px + 2.381vw, 52px);
	--dg-lh-h1: 1.15;
	--dg-fw-h1: 700;
	--dg-ls-h1: -0.02em;
	--dg-fs-h2: clamp(26px, 18px + 1.667vw, 40px);
	--dg-lh-h2: 1.2;
	--dg-fw-h2: 700;
	--dg-ls-h2: -0.015em;
	--dg-fs-h3: 22px;
	--dg-lh-h3: 1.35;
	--dg-fw-h3: 700;
	--dg-ls-h3: -0.01em;
	--dg-fs-h4: 18px;
	--dg-lh-h4: 1.4;
	--dg-fw-h4: 600;
	--dg-ls-h4: 0em;
	--dg-fs-lead: clamp(17px, 15.29px + 0.357vw, 20px);
	--dg-lh-lead: 1.55;
	--dg-fw-lead: 400;
	--dg-ls-lead: 0em;
	--dg-fs-body: 16px;
	--dg-lh-body: 1.6;
	--dg-fw-body: 400;
	--dg-ls-body: 0em;
	--dg-fs-small: 14px;
	--dg-lh-small: 1.45;
	--dg-fw-small: 400;
	--dg-ls-small: 0em;
	--dg-fs-eyebrow: 13px;
	--dg-lh-eyebrow: 1.2;
	--dg-fw-eyebrow: 700;
	--dg-ls-eyebrow: 0.08em;
	--dg-fs-menu: 15px;
	--dg-lh-menu: 1.2;
	--dg-fw-menu: 500;
	--dg-ls-menu: 0em;
	--dg-fs-btn: 15px;
	--dg-lh-btn: 1.2;
	--dg-fw-btn: 600;
	--dg-ls-btn: 0em;

	/* chiều cao dòng cho cột đọc — dài hơn body vì mắt phải quay về đầu dòng */
	--dg-lh-read: 1.75;

	/* hai màu nhập tay */
	--dg-brand: #0b57d0;
	--dg-accent: #e0910f;
	--dg-on-brand: #ffffff;

	/* ------------------------------------------------ TOKEN — cố định
	   Không có control Customizer: đây là quyết định thiết kế, không phải tuỳ chọn. */

	/* khoảng cách — thang 8px, số cứng */
	--dg-s-1: 4px;
	--dg-s-2: 8px;
	--dg-s-3: 12px;
	--dg-s-4: 16px;
	--dg-s-5: 24px;
	--dg-s-6: 32px;
	--dg-s-7: 48px;
	--dg-s-8: 64px;
	--dg-section: clamp(48px, 6vw, 88px);
	--dg-gutter: clamp(16px, 4vw, 32px);

	/* bo góc */
	--dg-r-sm: 4px;
	--dg-r: 8px;
	--dg-r-lg: 14px;
	--dg-r-full: 999px;

	/* điều khiển */
	--dg-tap: 44px;
	--dg-tap-lg: 48px;
	--dg-tap-sm: 36px;
	--dg-field-h: 48px;
	--dg-btn-pad: 11px 20px;
	--dg-btn-pad-sm: 7px 14px;
	--dg-field-pad: 12px 16px;
	--dg-icon: 20px;
	--dg-icon-sm: 18px;
	--dg-icon-lg: 26px;
	--dg-icon-social: 24px;
	--dg-menu-w: 240px;
	--dg-stroke: 1.7;

	/* bề ngang tối thiểu của các ô tự xếp — lưới auto-fill và kệ cuộn đọc từ đây */
	--dg-cell: 240px;
	--dg-cell-sm: 200px;
	--dg-tile: 200px;
	--dg-dir-col: 220px;
	--dg-field-min: 200px;
	--dg-logo-box: 96px;
	--dg-logo-box-lg: 128px;
	--dg-logo-row: 140px;
	--dg-scorebox: 160px;

	/* ảnh — MỘT tỉ lệ cho mọi ô ảnh của bài và thẻ */
	--dg-ratio-share: 1200 / 630;
	--dg-ratio-square: 1 / 1;
	--dg-ratio-hero: 16 / 9;
	--dg-card-thumb: 260px;

	/* chuyển động */
	--dg-t: 160ms;
	--dg-t-slow: 280ms;
	--dg-ease: cubic-bezier(0.2, 0, 0.2, 1);

	/* tầng */
	--dg-z-header: 8000;
	--dg-z-panel: 8200;
	--dg-z-dock: 8500;

	/* bóng — chỉ hai cấp, dùng cho lớp nổi chứ không cho thẻ */
	--dg-shadow: 0 1px 2px rgb(13 17 23 / 6%), 0 8px 24px rgb(13 17 23 / 8%);
	--dg-shadow-lg: 0 2px 4px rgb(13 17 23 / 8%), 0 18px 48px rgb(13 17 23 / 16%);

	/* màu suy ra */
	--dg-brand-hi: color-mix(in oklab, var(--dg-brand) 62%, #fff);
	--dg-brand-lo: color-mix(in oklab, var(--dg-brand) 86%, #000);
	--dg-brand-soft: color-mix(in srgb, var(--dg-brand) 10%, transparent);
	--dg-accent-hi: color-mix(in oklab, var(--dg-accent) 70%, #fff);
	--dg-accent-soft: color-mix(in srgb, var(--dg-accent) 14%, transparent);
	--dg-ok: #16794a;
	--dg-warn: #a8600a;
	--dg-bad: #b3261e;
}

/* Dải sáng / dải tối. Đặt ở đâu cũng được, lồng nhau cũng được.
   Hai token chip khai lại NGUYÊN VĂN ở cả hai khối: var() trong một custom property
   được thay tại nơi KHAI, không phải nơi DÙNG. */
:root,
[data-surface="light"] {
	--dg-surface: #ffffff;
	--dg-surface-2: #f5f7fa;
	--dg-ink: #0d1117;
	--dg-ink-2: #55606e;
	--dg-line: #e2e7ee;
	--dg-brand-fg: var(--dg-brand);
	--dg-accent-fg: color-mix(in oklab, var(--dg-accent) 88%, #000);
	--dg-btn-bg: var(--dg-brand);
	--dg-btn-fg: var(--dg-on-brand);
	--dg-chip-bg: color-mix(in srgb, var(--dg-ink) 7%, var(--dg-surface));
	--dg-chip-bg-hi: color-mix(in srgb, var(--dg-brand) 14%, var(--dg-surface));
	color-scheme: light;
}

[data-surface="dark"] {
	--dg-surface: #0c1116;
	--dg-surface-2: #131a21;
	--dg-ink: #eef2f6;
	--dg-ink-2: #9aa7b4;
	--dg-line: #222c36;
	--dg-brand-fg: var(--dg-brand-hi);
	--dg-accent-fg: var(--dg-accent-hi);
	--dg-btn-bg: var(--dg-brand-hi);
	--dg-btn-fg: #0b1015;
	--dg-chip-bg: color-mix(in srgb, var(--dg-ink) 12%, var(--dg-surface));
	--dg-chip-bg-hi: color-mix(in srgb, var(--dg-brand-hi) 20%, var(--dg-surface));
	color-scheme: dark;
}

[data-surface] {
	background: var(--dg-surface);
	color: var(--dg-ink);
}

[data-surface="alt"] {
	background: var(--dg-surface-2);
}

@layer reset, base, layout, components, utility;

/* ==================================================================== reset */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd,
	ul,
	ol {
		margin: 0;
	}

	ul[class],
	ol[class] {
		padding: 0;
		list-style: none;
	}

	img,
	svg,
	video,
	iframe {
		display: block;
		max-inline-size: 100%;
	}

	img {
		block-size: auto;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
	}

	/* Safari vẫn tự vẽ nền mờ sau <button> dù đã background:none — appearance:none mới hết.
	   Ô tích và nút chọn PHẢI ở ngoài: appearance:none xoá luôn hình vẽ của chúng. */
	button,
	input:not([type="checkbox"], [type="radio"]),
	select,
	textarea {
		appearance: none;
		-webkit-appearance: none;
	}

	input[type="checkbox"],
	input[type="radio"] {
		accent-color: var(--dg-brand);
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
		flex: none;
	}

	button {
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	table {
		border-collapse: collapse;
		inline-size: 100%;
	}

	dialog {
		border: 0;
		padding: 0;
		max-inline-size: 100%;
		max-block-size: 100%;
		color: inherit;
		background: transparent;
	}

	:target {
		scroll-margin-block-start: calc(var(--dg-header-h) + var(--dg-s-5));
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* ===================================================================== base */
@layer base {
	html {
		scroll-behavior: smooth;
	}

	body {
		background: var(--dg-surface);
		color: var(--dg-ink);
		font-family: var(--dg-font);
		font-size: var(--dg-fs-body);
		font-weight: var(--dg-fw-body);
		line-height: var(--dg-lh-body);
		-webkit-font-smoothing: antialiased;
		overflow-wrap: break-word;
	}

	h1,
	h2,
	h3,
	h4 {
		text-wrap: balance;
		color: var(--dg-ink);
	}

	h1 {
		font-size: var(--dg-fs-h1);
		line-height: var(--dg-lh-h1);
		font-weight: var(--dg-fw-h1);
		letter-spacing: var(--dg-ls-h1);
	}

	h2 {
		font-size: var(--dg-fs-h2);
		line-height: var(--dg-lh-h2);
		font-weight: var(--dg-fw-h2);
		letter-spacing: var(--dg-ls-h2);
	}

	h3 {
		font-size: var(--dg-fs-h3);
		line-height: var(--dg-lh-h3);
		font-weight: var(--dg-fw-h3);
		letter-spacing: var(--dg-ls-h3);
	}

	h4 {
		font-size: var(--dg-fs-h4);
		line-height: var(--dg-lh-h4);
		font-weight: var(--dg-fw-h4);
	}

	p {
		text-wrap: pretty;
	}

	a {
		color: var(--dg-brand-fg);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	a:hover {
		text-decoration-color: currentColor;
	}

	:focus-visible {
		outline: 2px solid var(--dg-brand-fg);
		outline-offset: 2px;
		border-radius: var(--dg-r-sm);
	}

	svg {
		fill: none;
		stroke: currentColor;
		stroke-width: var(--dg-stroke);
		stroke-linecap: round;
		stroke-linejoin: round;
		inline-size: var(--dg-icon);
		block-size: var(--dg-icon);
		flex: none;
	}

	/* Logo mạng xã hội và sao: tô đặc, không nét */
	.dg-i--fill,
	.dg-social svg {
		fill: currentColor;
		stroke: none;
	}

	label {
		display: block;
		font-size: var(--dg-fs-small);
		font-weight: 500;
	}

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="number"],
	select,
	textarea {
		inline-size: 100%;
		min-block-size: var(--dg-field-h);
		padding: var(--dg-field-pad);
		background: var(--dg-surface);
		color: var(--dg-ink);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		transition: border-color var(--dg-t) var(--dg-ease);
	}

	textarea {
		min-block-size: calc(var(--dg-field-h) * 2.5);
		resize: vertical;
	}

	select {
		background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
		background-position: right var(--dg-s-4) center, calc(100% - var(--dg-s-3)) center;
		background-size: 6px 6px, 6px 6px;
		background-repeat: no-repeat;
		padding-inline-end: var(--dg-s-8);
	}

	input:focus,
	select:focus,
	textarea:focus {
		border-color: var(--dg-brand-fg);
		outline-offset: 0;
	}

	::placeholder {
		color: var(--dg-ink-2);
		opacity: 1;
	}

	hr {
		border: 0;
		border-block-start: 1px solid var(--dg-line);
		margin-block: var(--dg-s-7);
	}
}

/* =================================================================== layout */
@layer layout {
	/* Bốn tầng bề ngang. max-width đã cộng sẵn gutter — không cộng lại ở nơi dùng. */
	.dg-wrap {
		inline-size: 100%;
		margin-inline: auto;
		padding-inline: var(--dg-gutter);
	}

	.dg-wrap--shell {
		max-inline-size: calc(var(--dg-shell) + var(--dg-gutter) * 2);
	}

	.dg-wrap--wide {
		max-inline-size: calc(var(--dg-wide) + var(--dg-gutter) * 2);
	}

	.dg-wrap--content {
		max-inline-size: calc(var(--dg-content) + var(--dg-gutter) * 2);
	}

	.dg-wrap--narrow {
		max-inline-size: calc(var(--dg-narrow) + var(--dg-gutter) * 2);
	}

	.dg-section {
		padding-block: var(--dg-section);
	}

	.dg-section--tight {
		padding-block: var(--dg-s-7);
	}

	.dg-section + .dg-section[data-surface="light"] {
		border-block-start: 1px solid var(--dg-line);
	}

	/* Lưới thẻ: 1 → 2 → 3 → 4 cột. Chỉ lưới khai --4 mới lên 4 cột. */
	.dg-grid {
		display: grid;
		gap: var(--dg-s-5);
		grid-template-columns: 1fr;
	}

	.dg-grid--2,
	.dg-grid--3,
	.dg-grid--4 {
		gap: var(--dg-s-5);
	}

	@media (min-width: 640px) {
		.dg-grid--2,
		.dg-grid--3,
		.dg-grid--4 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 1024px) {
		.dg-grid--2,
		.dg-grid--3,
		.dg-grid--4 {
			gap: var(--dg-s-6);
		}

		.dg-grid--3,
		.dg-grid--4 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 1280px) {
		.dg-grid--4 {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	/* Cột chính + cột phụ. Cột phụ luôn ở PHẢI, trừ mục lục bài viết (content.css). */
	.dg-split {
		display: grid;
		gap: var(--dg-s-7);
		grid-template-columns: 1fr;
	}

	@media (min-width: 1024px) {
		.dg-split {
			grid-template-columns: minmax(0, 1fr) var(--dg-aside);
			gap: var(--dg-s-8);
		}
	}

	/* Tràn sang mép phải màn hình. clip chứ không hidden: hidden biến khối thành
	   khung cuộn và mọi phần tử position:sticky bên trong mất tác dụng. */
	.dg-bleed {
		overflow-x: clip;
	}

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

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

/* =============================================================== components */
@layer components {
	/* ------------------------------------------------------------ tiêu đề khối */
	.dg-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--dg-s-4);
		margin-block-end: var(--dg-s-6);
		flex-wrap: wrap;
	}

	.dg-head__title {
		margin: 0;
	}

	.dg-head__more {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
		font-size: var(--dg-fs-small);
		font-weight: 600;
		text-decoration: none;
		min-block-size: var(--dg-tap-sm);
	}

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

	.dg-head__more:hover svg {
		transform: translateX(2px);
	}

	.dg-eyebrow {
		display: block;
		font-size: var(--dg-fs-eyebrow);
		font-weight: var(--dg-fw-eyebrow);
		line-height: var(--dg-lh-eyebrow);
		letter-spacing: var(--dg-ls-eyebrow);
		text-transform: uppercase;
		color: var(--dg-accent-fg);
		margin-block-end: var(--dg-s-2);
	}

	.dg-lead {
		font-size: var(--dg-fs-lead);
		line-height: var(--dg-lh-lead);
		color: var(--dg-ink-2);
		text-wrap: pretty;
	}

	/* ------------------------------------------------------------------- nút */
	.dg-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--dg-s-2);
		min-block-size: var(--dg-tap);
		padding: var(--dg-btn-pad);
		border-radius: var(--dg-r);
		background: var(--dg-btn-bg);
		color: var(--dg-btn-fg);
		font-size: var(--dg-fs-btn);
		font-weight: var(--dg-fw-btn);
		line-height: var(--dg-lh-btn);
		text-decoration: none;
		border: 1px solid transparent;
		transition: transform var(--dg-t) var(--dg-ease), opacity var(--dg-t) var(--dg-ease), background-color var(--dg-t) var(--dg-ease);
	}

	.dg-btn:hover {
		transform: translateY(-1px);
		opacity: 0.92;
		color: var(--dg-btn-fg);
	}

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

	.dg-btn--ghost {
		background: transparent;
		color: var(--dg-ink);
		border-color: var(--dg-line);
	}

	.dg-btn--ghost:hover {
		border-color: var(--dg-brand-fg);
		color: var(--dg-brand-fg);
	}

	.dg-btn--soft {
		background: var(--dg-brand-soft);
		color: var(--dg-brand-fg);
	}

	.dg-btn--sm {
		min-block-size: var(--dg-tap-sm);
		padding: var(--dg-btn-pad-sm);
		font-size: var(--dg-fs-small);
		border-radius: var(--dg-r-sm);
	}

	.dg-btn--block {
		inline-size: 100%;
	}

	.dg-btn[disabled],
	.dg-btn[aria-disabled="true"] {
		opacity: 0.4;
		pointer-events: none;
	}

	.dg-iconbtn {
		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);
		flex: none;
	}

	.dg-iconbtn:hover {
		background: var(--dg-chip-bg);
	}

	.dg-iconbtn svg {
		inline-size: var(--dg-icon-lg);
		block-size: var(--dg-icon-lg);
	}

	@media (min-width: 1024px) {
		.dg-iconbtn svg {
			inline-size: var(--dg-icon);
			block-size: var(--dg-icon);
		}
	}

	/* --------------------------------------------------------- chip & huy hiệu */
	.dg-chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dg-s-2);
	}

	.dg-chip {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
		padding: 4px var(--dg-s-3);
		border-radius: var(--dg-r-full);
		background: var(--dg-chip-bg);
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-eyebrow);
		font-weight: 500;
		line-height: var(--dg-lh-small);
		text-decoration: none;
		transition: background-color var(--dg-t) var(--dg-ease), color var(--dg-t) var(--dg-ease);
	}

	.dg-chip:hover,
	.dg-chip.is-current {
		background: var(--dg-chip-bg-hi);
		color: var(--dg-brand-fg);
	}

	.dg-chip--brand {
		background: var(--dg-brand);
		color: var(--dg-on-brand);
	}

	.dg-chip--brand:hover {
		background: var(--dg-brand-lo);
		color: var(--dg-on-brand);
	}

	/* Huy hiệu chỉ chứa CHỮ SỐ được xuống 11px (DESIGN.md §2). Có chữ thì về 13px. */
	.dg-rank {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-inline-size: var(--dg-tap-sm);
		block-size: var(--dg-tap-sm);
		padding-inline: var(--dg-s-2);
		border-radius: var(--dg-r);
		background: var(--dg-ink);
		color: var(--dg-surface);
		font-size: var(--dg-fs-h4);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		flex: none;
	}

	.dg-rank--1 {
		background: var(--dg-accent-fg);
		color: #ffffff;
	}

	.dg-rank--2,
	.dg-rank--3 {
		background: var(--dg-brand);
		color: var(--dg-on-brand);
	}

	.dg-verified {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
		font-size: var(--dg-fs-eyebrow);
		font-weight: 600;
		color: var(--dg-ok);
	}

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

	/* --------------------------------------------------------------- điểm số */
	.dg-score {
		display: inline-flex;
		align-items: baseline;
		gap: 2px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		color: var(--dg-ink);
		line-height: 1;
	}

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

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

	.dg-score--lg .dg-score__val {
		font-size: var(--dg-fs-h1);
	}

	.dg-score--sm .dg-score__val {
		font-size: var(--dg-fs-h4);
	}

	.dg-stars {
		display: inline-flex;
		gap: 2px;
		vertical-align: middle;
	}

	.dg-star {
		position: relative;
		display: inline-block;
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
	}

	.dg-star svg {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
	}

	.dg-star__bg {
		color: var(--dg-line);
	}

	.dg-star__fg {
		color: var(--dg-accent-fg);
		clip-path: inset(0 calc(100% - var(--dg-star-fill, 0%)) 0 0);
	}

	/* Thanh tiêu chí: nhãn trái, thanh phải, số cuối hàng */
	.dg-bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--dg-s-1) var(--dg-s-3);
		align-items: center;
		font-size: var(--dg-fs-small);
	}

	.dg-bar__track {
		grid-column: 1 / -1;
		block-size: var(--dg-s-2);
		border-radius: var(--dg-r-full);
		background: var(--dg-chip-bg);
		overflow: hidden;
	}

	.dg-bar__fill {
		display: block;
		block-size: 100%;
		border-radius: var(--dg-r-full);
		background: var(--dg-brand-fg);
	}

	.dg-bar__num {
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	/* ------------------------------------------------------------------- thẻ
	   MỌI biến thể đều là HỘP CÓ VIỀN. overflow:hidden là điều kiện để góc ảnh
	   bo theo góc thẻ; thiếu nó thì ảnh vuông góc chìa ra ngoài viền bo. */
	.dg-card {
		position: relative;
		display: flex;
		flex-direction: column;
		background: var(--dg-surface);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
		overflow: hidden;
		block-size: 100%;
		transition: border-color var(--dg-t) var(--dg-ease), transform var(--dg-t) var(--dg-ease);
	}

	.dg-card:hover {
		border-color: color-mix(in srgb, var(--dg-brand) 45%, var(--dg-line));
	}

	.dg-card__media {
		position: relative;
		display: block;
		aspect-ratio: var(--dg-ratio-share);
		background: var(--dg-surface-2);
		overflow: hidden;
	}

	.dg-card__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		transition: transform var(--dg-t-slow) var(--dg-ease);
	}

	.dg-card:hover .dg-card__media img {
		transform: scale(1.03);
	}

	.dg-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-3);
		padding: var(--dg-s-5);
		flex: 1;
	}

	.dg-card__title {
		font-size: var(--dg-fs-h4);
		line-height: var(--dg-lh-h4);
		font-weight: 600;
		margin: 0;
	}

	.dg-card__title a {
		color: inherit;
		text-decoration: none;
	}

	/* Cả thẻ bấm được, nhưng chữ vẫn chọn copy được và chỉ có MỘT liên kết trong cây
	   trợ năng — không lồng <a> trong <a>. */
	.dg-card__title a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

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

	.dg-card__excerpt {
		font-size: var(--dg-fs-small);
		line-height: var(--dg-lh-body);
		color: var(--dg-ink-2);
		margin: 0;
	}

	.dg-card__meta {
		display: flex;
		align-items: center;
		gap: var(--dg-s-2);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
		margin-block-start: auto;
	}

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

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

	.dg-card__meta > * + *::before {
		content: "·";
		margin-inline-end: var(--dg-s-2);
	}

	/* Chip trên thẻ nằm TRÊN lớp phủ của tiêu đề, nếu không nó không bấm được */
	.dg-card .dg-chip,
	.dg-card__meta a {
		position: relative;
		z-index: 1;
	}

	/* hero: ảnh trái, chữ phải. KHÔNG sapo — thẻ đã to sẵn */
	.dg-card--hero .dg-card__title {
		font-size: var(--dg-fs-h3);
		line-height: var(--dg-lh-h3);
		font-weight: 700;
	}

	@media (min-width: 1024px) {
		.dg-card--hero {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: stretch;
		}

		.dg-card--hero .dg-card__media {
			block-size: 100%;
			aspect-ratio: auto;
		}

		.dg-card--hero .dg-card__body {
			justify-content: center;
			padding: var(--dg-s-7);
		}
	}

	/* row: ảnh trái cỡ cố định, chữ phải */
	@media (min-width: 640px) {
		.dg-card--row {
			display: grid;
			grid-template-columns: var(--dg-card-thumb) minmax(0, 1fr);
			align-items: stretch;
		}

		.dg-card--row .dg-card__media {
			block-size: 100%;
			aspect-ratio: auto;
		}
	}

	/* text: không ảnh */
	.dg-card--text .dg-card__body {
		gap: var(--dg-s-2);
	}

	/* panel: ngày TRÊN tiêu đề */
	.dg-card--panel .dg-card__meta {
		order: -1;
		margin-block-start: 0;
	}

	/* brand: logo vuông trên nền trắng, contain — ảnh logo cắt mép là mất chữ */
	.dg-card--brand .dg-card__media {
		aspect-ratio: var(--dg-ratio-square);
		background: #ffffff;
		border-block-end: 1px solid var(--dg-line);
	}

	.dg-card--brand .dg-card__media img {
		object-fit: contain;
		padding: var(--dg-s-5);
	}

	.dg-card--brand .dg-card__body {
		align-items: flex-start;
		text-align: start;
	}

	/* Ô danh mục / lối tắt — trang chủ và trang 404 dùng chung */
	.dg-fields {
		display: grid;
		gap: var(--dg-s-3);
		grid-template-columns: repeat(auto-fill, minmax(var(--dg-tile), 1fr));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dg-fields a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dg-s-3);
		min-block-size: var(--dg-tap-lg);
		padding: var(--dg-s-3) var(--dg-s-4);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		color: var(--dg-ink);
		font-weight: 500;
		text-decoration: none;
		transition: border-color var(--dg-t) var(--dg-ease), background-color var(--dg-t) var(--dg-ease);
	}

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

	.dg-fields__n {
		font-size: var(--dg-fs-small);
		font-variant-numeric: tabular-nums;
		color: var(--dg-ink-2);
	}

	.dg-fields svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
		color: var(--dg-ink-2);
	}

	/* Ô trống khi bài chưa có ảnh — lưới không bao giờ thủng một lỗ trắng */
	.dg-ph {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		block-size: 100%;
		background: linear-gradient(135deg, var(--dg-surface-2), var(--dg-chip-bg));
		color: color-mix(in srgb, var(--dg-ink) 28%, transparent);
	}

	.dg-ph__ch {
		font-size: var(--dg-fs-h1);
		font-weight: 700;
		line-height: 1;
	}

	/* ---------------------------------------------------------------- header
	   MỘT DOM, HAI BỐ CỤC, đổi ở đúng một mốc 1024px. Năm phần tử — nút menu,
	   logo, menu chính, menu phụ, nút tìm — phải là con TRỰC TIẾP của .dg-header__in. */
	.dg-header {
		position: sticky;
		inset-block-start: 0;
		z-index: var(--dg-z-header);
		background: var(--dg-surface);
		border-block-end: 1px solid var(--dg-line);
		transition: transform var(--dg-t-slow) var(--dg-ease);
	}

	.dg-header[data-sticky="none"] {
		position: static;
	}

	.dg-header.is-hidden {
		transform: translateY(-100%);
	}

	.dg-header__in {
		display: grid;
		grid-template-columns: var(--dg-tap) minmax(0, 1fr) var(--dg-tap);
		align-items: center;
		gap: var(--dg-s-2);
		min-block-size: var(--dg-header-h-m);
	}

	.dg-brand {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-2);
		justify-self: center;
		text-decoration: none;
		color: var(--dg-ink);
		font-weight: 700;
		font-size: var(--dg-fs-h4);
		letter-spacing: -0.01em;
	}

	.dg-brand img {
		block-size: var(--dg-logo-h-m);
		inline-size: auto;
		max-inline-size: none;
	}

	.dg-header__nav,
	.dg-header__aside {
		display: none;
	}

	.dg-header__search {
		justify-self: end;
	}

	@media (min-width: 1024px) {
		.dg-header__in {
			display: flex;
			gap: var(--dg-s-5);
			min-block-size: var(--dg-header-h);
		}

		.dg-header__burger {
			display: none;
		}

		.dg-brand {
			justify-self: auto;
			margin-inline-end: var(--dg-s-2);
		}

		.dg-brand img {
			block-size: var(--dg-logo-h);
		}

		.dg-header__nav {
			display: block;
			margin-inline-end: auto;
		}

		.dg-header__aside {
			display: flex;
			align-items: center;
			gap: var(--dg-s-4);
		}
	}

	/* menu ngang */
	.dg-menu {
		display: flex;
		align-items: center;
		gap: var(--dg-s-1);
	}

	.dg-menu__item {
		position: relative;
	}

	.dg-menu__link {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
		min-block-size: var(--dg-tap);
		padding-inline: var(--dg-s-3);
		color: var(--dg-ink);
		font-size: var(--dg-fs-menu);
		font-weight: var(--dg-fw-menu);
		line-height: var(--dg-lh-menu);
		text-decoration: none;
		border-radius: var(--dg-r);
	}

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

	.dg-menu__item.is-current > .dg-menu__link {
		color: var(--dg-brand-fg);
		box-shadow: inset 0 -2px 0 0 var(--dg-brand-fg);
		border-radius: 0;
	}

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

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

	/* bảng thả xuống */
	.dg-sub {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		min-inline-size: var(--dg-menu-w);
		padding: var(--dg-s-2);
		background: var(--dg-surface);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		box-shadow: var(--dg-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(var(--dg-s-2));
		transition: opacity var(--dg-t) var(--dg-ease), transform var(--dg-t) var(--dg-ease), visibility var(--dg-t);
		z-index: 1;
	}

	.dg-menu__item:hover > .dg-sub,
	.dg-menu__item:focus-within > .dg-sub {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.dg-menu__item:hover > .dg-menu__link .dg-menu__caret {
		transform: rotate(180deg);
	}

	.dg-sub .dg-menu__link {
		inline-size: 100%;
		min-block-size: var(--dg-tap-sm);
		padding-block: var(--dg-s-2);
		justify-content: space-between;
	}

	.dg-sub .dg-menu__link:hover {
		background: var(--dg-chip-bg);
	}

	.dg-sub__item > .dg-sub {
		inset-block-start: calc(var(--dg-s-2) * -1);
		inset-inline-start: 100%;
	}

	.dg-sub .dg-menu__caret {
		transform: rotate(-90deg);
	}

	/* ------------------------------------------------- bảng trượt điện thoại */
	.dg-panel {
		position: fixed;
		inset: 0;
		z-index: var(--dg-z-panel);
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		background: var(--dg-surface);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform var(--dg-t-slow) var(--dg-ease), visibility var(--dg-t-slow);
	}

	.dg-panel.is-open {
		transform: none;
		visibility: visible;
	}

	.dg-panel__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dg-s-3);
		min-block-size: var(--dg-header-h-m);
		padding-inline: var(--dg-gutter);
		border-block-end: 1px solid var(--dg-line);
	}

	.dg-panel__body {
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--dg-s-4) var(--dg-gutter) var(--dg-s-8);
	}

	.dg-mnav__row {
		display: flex;
		align-items: center;
		gap: var(--dg-s-2);
		border-block-end: 1px solid var(--dg-line);
	}

	.dg-mnav__link {
		flex: 1;
		display: flex;
		align-items: center;
		min-block-size: var(--dg-tap-lg);
		color: var(--dg-ink);
		font-size: var(--dg-fs-lead);
		font-weight: 500;
		text-decoration: none;
	}

	.dg-mnav__item--sub .dg-mnav__link {
		font-size: var(--dg-fs-body);
		font-weight: 400;
		color: var(--dg-ink-2);
		padding-inline-start: var(--dg-s-4);
	}

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

	.dg-mnav__toggle[aria-expanded="true"] .dg-mnav__caret {
		transform: rotate(180deg);
	}

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

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

	/* --------------------------------------------------------- tấm tìm kiếm
	   Nền TỐI cố định bất kể tông header — ô tìm phải nổi hẳn khỏi trang phía sau. */
	.dg-find {
		position: fixed;
		inset: 0;
		z-index: var(--dg-z-panel);
		display: grid;
		place-items: start center;
		padding: var(--dg-gutter);
		padding-block-start: clamp(var(--dg-s-8), 12vh, 180px);
		background: rgb(6 9 12 / 78%);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dg-t) var(--dg-ease), visibility var(--dg-t);
	}

	.dg-find.is-open {
		opacity: 1;
		visibility: visible;
	}

	.dg-find__box {
		inline-size: 100%;
		max-inline-size: var(--dg-content);
	}

	.dg-find__title {
		color: #ffffff;
		margin-block-end: var(--dg-s-4);
	}

	.dg-find__form {
		display: flex;
		gap: var(--dg-s-2);
	}

	.dg-find__form input[type="search"] {
		min-block-size: calc(var(--dg-field-h) + var(--dg-s-2));
		border-radius: var(--dg-r);
	}

	.dg-find__close {
		position: absolute;
		inset-block-start: var(--dg-gutter);
		inset-inline-end: var(--dg-gutter);
		color: #ffffff;
	}

	.dg-find .dg-chips {
		margin-block-start: var(--dg-s-5);
	}

	.dg-find .dg-chip {
		background: rgb(255 255 255 / 12%);
		color: #ffffff;
	}

	.dg-find .dg-chip:hover {
		background: rgb(255 255 255 / 22%);
	}

	/* ------------------------------------------------------------ chân trang */
	.dg-footer {
		margin-block-start: auto;
	}

	.dg-footer__top {
		padding-block: var(--dg-s-8);
	}

	.dg-footer__cols {
		display: grid;
		gap: var(--dg-s-6);
		grid-template-columns: 1fr;
		text-align: center;
	}

	.dg-fcol__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);
		margin-block-end: var(--dg-s-3);
		border-block-end: 1px solid var(--dg-line);
	}

	/* Điện thoại: liên kết chảy ngang rồi xuống dòng — xếp dọc trên màn hẹp đẩy
	   khối đăng ký xuống quá xa. */
	.dg-fmenu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--dg-s-2) var(--dg-s-4);
	}

	.dg-fmenu a {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--dg-tap-sm);
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-small);
		text-decoration: none;
	}

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

	.dg-footer__wide {
		display: grid;
		gap: var(--dg-s-6);
		margin-block-start: var(--dg-s-8);
		padding-block-start: var(--dg-s-6);
		border-block-start: 1px solid var(--dg-line);
		text-align: center;
	}

	.dg-sub__head {
		font-size: var(--dg-fs-h4);
		font-weight: 600;
		margin-block-end: var(--dg-s-2);
	}

	.dg-sub__desc {
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
		margin-block-end: var(--dg-s-4);
	}

	.dg-subform {
		display: flex;
		gap: var(--dg-s-2);
		flex-wrap: wrap;
	}

	.dg-subform input[type="email"] {
		flex: 1 1 var(--dg-field-min);
	}

	.dg-subform__note {
		display: flex;
		align-items: flex-start;
		gap: var(--dg-s-2);
		flex-basis: 100%;
		font-size: var(--dg-fs-eyebrow);
		line-height: var(--dg-lh-small);
		font-weight: 400;
		color: var(--dg-ink-2);
		text-align: start;
	}

	.dg-subform__msg {
		flex-basis: 100%;
		font-size: var(--dg-fs-small);
		text-align: start;
	}

	.dg-subform__msg.is-ok {
		color: var(--dg-ok);
	}

	.dg-subform__msg.is-bad {
		color: var(--dg-bad);
	}

	/* Khe 16px dựng bằng padding trên thẻ <a>, không phải gap: cái đệm đó gánh
	   luôn vùng chạm ngang. */
	.dg-social {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.dg-social a {
		display: inline-flex;
		align-items: center;
		block-size: var(--dg-tap);
		padding-inline: var(--dg-s-2);
		color: var(--dg-ink-2);
	}

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

	.dg-social svg {
		block-size: var(--dg-icon-social);
		inline-size: auto;
	}

	.dg-footer__bottom {
		padding-block: var(--dg-s-6);
		border-block-start: 1px solid var(--dg-line);
	}

	.dg-footer__bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--dg-s-4);
		text-align: center;
	}

	.dg-flogo img {
		block-size: var(--dg-flogo-h-m);
		inline-size: auto;
	}

	.dg-legal {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.dg-legal li {
		display: flex;
		align-items: center;
	}

	.dg-legal li + li::before {
		content: "|";
		color: var(--dg-line);
		margin-inline: var(--dg-s-2);
	}

	.dg-legal a {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--dg-tap);
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-body);
		text-decoration: none;
	}

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

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

	.dg-footer__note {
		font-size: var(--dg-fs-eyebrow);
		color: var(--dg-ink-2);
		margin-block-start: var(--dg-s-3);
		max-inline-size: var(--dg-content);
		margin-inline: auto;
	}

	@media (min-width: 1024px) {
		.dg-footer__cols {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			text-align: start;
			gap: var(--dg-s-8);
		}

		.dg-fmenu {
			flex-direction: column;
			justify-content: flex-start;
			gap: 0;
		}

		.dg-footer__wide {
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			text-align: start;
		}

		.dg-social {
			justify-content: flex-end;
		}

		.dg-footer__bar {
			flex-direction: row;
			justify-content: space-between;
			text-align: start;
		}

		.dg-flogo img {
			block-size: var(--dg-flogo-h);
		}

		.dg-legal a {
			min-block-size: var(--dg-s-5);
		}
	}

	/* ------------------------------------------------------------- dock nổi
	   Cụm PHẢI ở mọi trang, mọi khổ màn. Cụm TRÁI (mục lục) chỉ dưới 1024px.
	   Đều là nút ở GÓC nên KHÔNG cộng body{padding-bottom}. */
	.dg-dock {
		position: fixed;
		inset-block-end: var(--dg-s-4);
		z-index: var(--dg-z-dock);
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-2);
	}

	.dg-dock--main {
		inset-inline-end: var(--dg-s-4);
	}

	.dg-dock--toc {
		inset-inline-start: var(--dg-s-4);
	}

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

	.dg-dock__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: var(--dg-tap);
		block-size: var(--dg-tap);
		border-radius: var(--dg-r-full);
		background: var(--dg-surface);
		color: var(--dg-ink);
		border: 1px solid var(--dg-line);
		box-shadow: var(--dg-shadow);
	}

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

	.dg-dock__btn svg {
		inline-size: var(--dg-icon-lg);
		block-size: var(--dg-icon-lg);
	}

	.dg-dock__btn--brand {
		background: var(--dg-brand);
		color: var(--dg-on-brand);
		border-color: transparent;
	}

	.dg-dock__btn--brand:hover {
		color: var(--dg-on-brand);
	}

	.dg-dock__btn[hidden] {
		display: none;
	}

	/* --------------------------------------------------- tấm mục lục điện thoại
	   display:flex CHỈ đặt trong [open]: khai ở rule gốc là đè mất display:none
	   mà trình duyệt gán cho <dialog> đang đóng. */
	.dg-sheet {
		position: fixed;
		inset: auto 0 0;
		inline-size: 100%;
		max-block-size: 80dvh;
		background: var(--dg-surface);
		color: var(--dg-ink);
		border-start-start-radius: var(--dg-r-lg);
		border-start-end-radius: var(--dg-r-lg);
		border-block-start: 3px solid var(--dg-brand-fg);
	}

	.dg-sheet[open] {
		display: flex;
		flex-direction: column;
	}

	.dg-sheet::backdrop {
		background: rgb(6 9 12 / 55%);
	}

	.dg-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dg-s-3);
		padding: var(--dg-s-3) var(--dg-s-4);
		border-block-end: 1px solid var(--dg-line);
	}

	.dg-sheet__title {
		font-size: var(--dg-fs-small);
		font-weight: 600;
		color: var(--dg-ink-2);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dg-sheet__body {
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--dg-s-3) var(--dg-s-2) var(--dg-s-6);
	}

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

/* ================================================================== utility */
@layer utility {
	.dg-sr {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* top:-100px là vị trí đỗ ngoài màn hình, không phải khoảng cách thị giác */
	.dg-skip {
		position: absolute;
		inset-block-start: -100px;
		inset-inline-start: var(--dg-s-4);
		z-index: 10000;
		padding: var(--dg-s-3) var(--dg-s-4);
		background: var(--dg-brand);
		color: var(--dg-on-brand);
		border-radius: var(--dg-r);
	}

	.dg-skip:focus {
		inset-block-start: var(--dg-s-2);
	}

	.dg-shell {
		display: flex;
		flex-direction: column;
		min-block-size: 100dvh;
	}

	.dg-clamp-2,
	.dg-clamp-3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.dg-clamp-2 {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.dg-clamp-3 {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.dg-nums {
		font-variant-numeric: tabular-nums;
	}

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

	.dg-center {
		text-align: center;
	}

	body.is-locked {
		overflow: hidden;
	}

	@media (min-width: 1024px) {
		.dg-only-m {
			display: none !important;
		}
	}

	@media (max-width: 1023px) {
		.dg-only-d {
			display: none !important;
		}
	}
}