/*
  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: 600;
	--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(18px, 15.71px + 0.476vw, 22px);
	--dg-lh-lead: 1.55;
	--dg-fw-lead: 400;
	--dg-ls-lead: 0em;
	--dg-fs-body: 17px;
	--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: #2e7d32;
	--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;

	/* 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;
	--dg-finder-w: 520px;
	--dg-finder-h: 480px;

	/* ả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;
	--dg-z-pop: 50;

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

	/* iPhone: chạm hai lần liền = PHÓNG TO trang (DESIGN §8) */
	a,
	button,
	input,
	select,
	textarea,
	label,
	summary {
		touch-action: manipulation;
	}

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

	/* Bộ icon phẳng: hình tô đặc, nét (nếu có) khai ngay trong file — DESIGN §30 */
	svg {
		fill: currentColor;
		inline-size: var(--dg-icon);
		block-size: var(--dg-icon);
		flex: 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"],
	input[type="time"],
	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).
	   align-items:start BẮT BUỘC: để stretch thì cột ngắn bị kéo cao bằng cột dài, nhận
	   một chiều cao XÁC ĐỊNH, và `.dg-card{block-size:100%}` bám vào đó — thẻ nổi bật ở
	   đầu trang lưu trữ phình thành hộp rỗng cao gần 2000px. Đã gặp thật (2026-09-19). */
	.dg-split {
		display: grid;
		gap: var(--dg-s-7);
		grid-template-columns: 1fr;
		align-items: start;
	}

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

	/* <a> cũng dùng class này, mà `a` toàn cục có gạch chân */
	.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);
		text-decoration: none;
		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);
	}

	/* Nhãn tài trợ: viên ĐẶC, không phải liên kết — không lẫn với chip danh mục viền */
	/* Chữ --dg-ink như .dg-tag-partner: --dg-accent-fg trên nền này 3,12:1, trượt AA (axe 2026-09-28) */
	.dg-chip--spon {
		background: var(--dg-accent-soft);
		color: var(--dg-ink);
		font-weight: 600;
	}

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

	/* Ba hạng đầu phân biệt bằng KÍCH CỠ, không chỉ màu — DESIGN §17 */
	.dg-rank--1,
	.dg-rank--2,
	.dg-rank--3 {
		min-inline-size: var(--dg-tap);
		block-size: var(--dg-tap);
		border-radius: var(--dg-r-full);
	}

	.dg-rank--1 {
		min-inline-size: calc(var(--dg-tap) + var(--dg-s-3));
		block-size: calc(var(--dg-tap) + var(--dg-s-3));
		background: var(--dg-accent);
		color: var(--dg-ink);
		font-size: var(--dg-fs-h3);
		box-shadow: 0 0 0 var(--dg-s-1) var(--dg-accent-soft);
	}

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

	/* Khu vực cùng hàng chip danh mục — DESIGN.md §16 */
	.dg-card .dg-chips {
		align-items: center;
	}

	.dg-card__region {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

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

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

	/* Ảnh giữ 1200/630: KHÔNG stretch. Đệm + kẹp 3 dòng giữ cột chữ thấp hơn ảnh — §10 */
	@media (min-width: 1024px) {
		.dg-card--hero {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: center;
		}

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

	/* row: ảnh trái thụt vào + bo góc riêng — DESIGN.md §16 */
	@media (min-width: 640px) {
		.dg-card--row {
			display: grid;
			grid-template-columns: var(--dg-card-thumb) minmax(0, 1fr);
			align-items: start;
		}

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

		.dg-card--row .dg-card__media--logo {
			border: 1px solid var(--dg-line);
		}
	}

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

	/* Hồ sơ chưa có ảnh đại diện: logo contain trong khung 1200/630 — DESIGN.md §10 */
	.dg-card__media--logo {
		background: #ffffff;
		border-block-end: 1px solid var(--dg-line);
	}

	.dg-card__media--logo img {
		object-fit: contain;
		padding: var(--dg-s-4);
	}

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

	.dg-fields__name {
		flex: 1;
	}

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

	/* relative, không static: bảng Danh mục định vị theo header (§12) */
	.dg-header[data-sticky="none"] {
		position: relative;
	}

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

	/* Cột ba chứa CỤM nút, không phải một nút */
	.dg-header__in {
		display: grid;
		grid-template-columns: var(--dg-tap) minmax(0, 1fr) auto;
		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__acts {
		display: flex;
		align-items: center;
		gap: var(--dg-s-1);
		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;
		}

		/* auto ở cụm phải: chưa gán menu thì nút tìm vẫn về mép phải */
		.dg-header__aside {
			display: flex;
			align-items: center;
			gap: var(--dg-s-4);
			margin-inline-start: auto;
		}
	}

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

	/* Thanh ngang KHÔNG BAO GIỜ tràn: mục thừa ẩn — danh mục đã ở nút Danh mục (§12) */
	@media (max-width: 1279px) {
		.dg-header__nav .dg-menu > :nth-child(n+6) {
			display: none;
		}
	}

	.dg-header__nav .dg-menu > :nth-child(n+8) {
		display: none;
	}

	/* ------------------------------------------------- nút Danh mục — DESIGN §12
	   Chỉ từ 1024px. Mở bằng :hover/:focus-within như menu con: 0 byte JS */
	.dg-cats {
		display: none;
	}

	.dg-cats__btn {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-2);
		min-block-size: var(--dg-tap);
		padding-inline: var(--dg-s-3);
		border-radius: var(--dg-r);
		background: var(--dg-chip-bg);
		color: var(--dg-ink);
		font-size: var(--dg-fs-menu);
		font-weight: 600;
		white-space: nowrap;
		text-decoration: none;
	}

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

	.dg-cats:is(:hover, :focus-within) .dg-cats__btn {
		background: var(--dg-brand-soft);
		color: var(--dg-brand-fg);
	}

	.dg-cats:is(:hover, :focus-within) .dg-menu__caret {
		transform: rotate(180deg);
	}

	/* Thả từ mép dưới HEADER (khối định vị), kín bề ngang, cuộn riêng khi dài */
	.dg-cats__panel {
		position: absolute;
		inset: 100% 0 auto;
		max-block-size: calc(100vh - var(--dg-header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-block: var(--dg-s-5) var(--dg-s-6);
		background: var(--dg-surface);
		border-block-end: 1px solid var(--dg-line);
		box-shadow: var(--dg-shadow-lg);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dg-t) var(--dg-ease), visibility var(--dg-t);
	}

	.dg-cats:is(:hover, :focus-within) .dg-cats__panel {
		opacity: 1;
		visibility: visible;
	}

	.dg-cats__h {
		margin-block: var(--dg-s-5) var(--dg-s-2);
	}

	.dg-cats__az {
		columns: var(--dg-tile);
		column-gap: var(--dg-s-6);
	}

	.dg-cats__az a {
		display: flex;
		justify-content: space-between;
		gap: var(--dg-s-3);
		padding-block: var(--dg-s-2);
		color: var(--dg-ink);
		text-decoration: none;
	}

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

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

	/* stretch: vùng rê chuột kéo tới sát mép bảng, đi xuống không bị đóng giữa chừng */
	@media (min-width: 1024px) {
		.dg-cats {
			display: flex;
			align-self: stretch;
			align-items: center;
		}
	}

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

	/* Lưới danh mục ĐẦU bảng trượt: 2 cột, không số đếm (§12) */
	.dg-mcats {
		margin-block-end: var(--dg-s-5);
	}

	.dg-mcats .dg-fields {
		grid-template-columns: 1fr 1fr;
		gap: var(--dg-s-2);
	}

	.dg-mcats .dg-fields a {
		gap: var(--dg-s-2);
		padding-inline: var(--dg-s-3);
		font-size: var(--dg-fs-menu);
	}

	.dg-mcats .dg-head__more {
		margin-block-start: var(--dg-s-2);
	}

	/* ------------------------------------------------- thanh tìm kiếm đầu trang
	   Mở trong header, display:none — KHÔNG hoạt cảnh: DESIGN §12 */
	.dg-find {
		display: none;
		padding-block-end: var(--dg-s-4);
	}

	.dg-find.is-open {
		display: block;
	}

	/* ------------------------------------------------- công cụ tìm kiếm (thanh)
	   Chỉ THANH ở đây: nó hiện ngay khi trang tải nên CSS phải có sẵn, không thì nhảy
	   khung. Tấm gợi ý ở finder.css, nạp trễ cùng finder.js.
	   data-surface đặt trên __bar và __panel, KHÔNG trên <form>: khối [data-surface]
	   không-layer tô nền cả form thành hình chữ nhật trắng sau thanh bo tròn. */
	.dg-finder {
		position: relative;
		inline-size: 100%;
		text-align: start;
	}

	.dg-finder__bar {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-1);
		padding: var(--dg-s-2);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
		box-shadow: var(--dg-shadow);
	}

	.dg-finder__seg {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--dg-s-2);
		flex: 1 1 0;
		min-inline-size: 0;
		padding-inline: var(--dg-s-3);
		border-radius: var(--dg-r);
		color: var(--dg-ink-2);
	}

	.dg-finder__seg:focus-within,
	.dg-finder__seg.is-active {
		background: var(--dg-chip-bg);
	}

	/* Rule trong @layer components thắng input[type=search] của @layer base */
	.dg-finder__input {
		flex: 1;
		min-inline-size: 0;
		min-block-size: var(--dg-field-h);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--dg-ink);
		font-size: var(--dg-fs-body);
	}

	/* Mốc focus là nền của cả ô (focus-within ở trên), không phải viền quanh chữ */
	.dg-finder__input:focus-visible {
		outline: 0;
	}

	.dg-finder__input::-webkit-search-cancel-button {
		display: none;
	}

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

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

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

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

	.dg-finder__go {
		min-block-size: var(--dg-field-h);
	}

	.dg-finder--lg .dg-finder__input,
	.dg-finder--lg .dg-finder__go {
		min-block-size: calc(var(--dg-field-h) + var(--dg-s-2));
	}

	@media (min-width: 768px) {
		.dg-finder__bar {
			flex-direction: row;
			align-items: center;
			padding: var(--dg-s-1);
			border-radius: var(--dg-r-full);
		}

		.dg-finder__seg {
			padding-inline: var(--dg-s-4);
			border-radius: var(--dg-r-full);
		}

		.dg-finder__seg:first-child {
			flex-grow: 1.4;
		}

		.dg-finder__seg + .dg-finder__seg::before {
			content: "";
			position: absolute;
			inset-block: var(--dg-s-3);
			inset-inline-start: 0;
			border-inline-start: 1px solid var(--dg-line);
		}

		.dg-finder__go {
			padding-inline: var(--dg-s-5);
			border-radius: var(--dg-r-full);
		}
	}

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

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

	/* 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. */
	/* Nút tròn đủ vùng chạm, token nút + chip nên đúng cả dải sáng lẫn tối — DESIGN §30 */
	.dg-social {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--dg-s-2);
	}

	.dg-social a {
		display: inline-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-chip-bg);
		color: var(--dg-ink-2);
		transition: background-color var(--dg-t) var(--dg-ease), color var(--dg-t) var(--dg-ease);
	}

	.dg-social a:hover {
		background: var(--dg-btn-bg);
		color: var(--dg-btn-fg);
	}

	/* Bề ngang PHẢI cố định: <svg><use> của sprite không mang viewBox, `auto` là SVG nhận 300px
	   mặc định — hai logo cách nhau nửa màn hình (đo 2026-10-01). Logo mạng xã hội đã vuông (§30). */
	.dg-social svg {
		inline-size: var(--dg-icon-social);
		block-size: var(--dg-icon-social);
	}

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

		/* Chỉ còn khối Theo dõi (ô bản tin gỡ 2026-10-01) — DESIGN §32 */
		.dg-footer__wide {
			text-align: start;
		}

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

		.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
	   Khung trải ngang đáy, xuyên chuột: về đầu trang + mục lục sát TRÁI, hotline PHẢI.
	   Từ 1024px dồn về góc phải. DESIGN §20 */
	.dg-dock {
		position: fixed;
		inset: auto var(--dg-s-2) var(--dg-s-6);
		z-index: var(--dg-z-dock);
		justify-content: space-between;
		align-items: flex-end;
		pointer-events: none;
	}

	.dg-dock,
	.dg-dock__nav {
		display: flex;
		gap: var(--dg-s-2);
	}

	.dg-dock__nav {
		flex-direction: column;
	}

	@media (min-width: 1024px) {
		.dg-dock {
			inset: auto var(--dg-s-4) var(--dg-s-4) auto;
			flex-direction: column;
		}

		.dg-dock [data-dg-sheet] {
			display: none;
		}
	}

	.dg-dock__btn {
		pointer-events: auto;
		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-brand-fg);
		border: 1px solid var(--dg-brand-fg);
		box-shadow: var(--dg-shadow);
	}

	/* Hai thang nhấn — DESIGN §20 */
	.dg-dock__btn:hover {
		background: var(--dg-brand);
		color: var(--dg-on-brand);
		border-color: transparent;
	}

	.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[hidden] {
		display: none;
	}

	/* --------------------------------------------------- tấm mục lục điện thoại
	   display:flex CHỈ trong [open], ở gốc là đè display:none của <dialog> — §20 */
	.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;
		}
	}
}