/**
 * DDG — posts.css (THEME-CORE)
 * Bài viết, archive bài viết, tìm kiếm, 404, mục lục (TOC).
 * Dùng biến --ddg-* của DESIGN (tokens.css) kèm giá trị fallback.
 * Component dùng chung (.ddg-cta-box, .ddg-btn, .ddg-breadcrumb) chỉ khai báo fallback trong :where()
 * (specificity 0) để components.css của DESIGN luôn thắng.
 * !important: không dùng.
 */

/* ------------------------------------------------------------------ *
 * Nền đọc
 * ------------------------------------------------------------------ */
.blog-single .ddg-post-header,
.blog-single .ddg-entry-content,
.blog-single .ddg-post-terms,
.blog-single .ddg-post-end,
.blog-single .ddg-author-box,
.blog-single .ddg-post-nav,
.blog-single .ddg-related {
	color: var(--ddg-ink-900, #14202e);
}

.ddg-post-header {
	margin-bottom: var(--ddg-space-6, 24px);
	text-align: left;
}

.ddg-post-header .entry-title {
	margin: var(--ddg-space-2, 8px) 0 var(--ddg-space-3, 12px);
	font-family: var(--ddg-font-display, inherit);
	line-height: var(--ddg-lh-heading, 1.25);
	color: var(--ddg-ink-900, #14202e);
	letter-spacing: 0;
	text-transform: none;
}

.ddg-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	margin: 0;
	font-size: var(--ddg-fs-14, 14px);
	line-height: 1.6;
	color: var(--ddg-ink-500, #5b6878);
	text-transform: none;
	letter-spacing: 0;
}

/* Flatsome ẩn .updated:not(.published) → hiện lại ngày cập nhật (specificity 0,2,1 > 0,2,0). */
.ddg-post-meta time.updated {
	display: inline;
}

.ddg-post-meta a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	padding-block: 10px; /* vùng chạm ≥ 44px mà không đổi bố cục dòng (UI-U-18) */
}

.ddg-meta-sep {
	color: var(--ddg-line, #c9d2dc);
}

/* Ảnh đại diện (LCP) */
.ddg-post-hero {
	margin: var(--ddg-space-4, 16px) 0 0;
}

.ddg-post-hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ddg-radius-md, 10px);
}

/* ------------------------------------------------------------------ *
 * Breadcrumb (fallback — DESIGN có thể style .ddg-breadcrumb)
 * ------------------------------------------------------------------ */
:where(.ddg-breadcrumb) {
	margin: 0 0 var(--ddg-space-2, 8px);
	font-size: var(--ddg-fs-14, 14px);
	color: var(--ddg-ink-500, #5b6878);
}

:where(.ddg-breadcrumb) p {
	margin: 0;
}

:where(.ddg-breadcrumb) a {
	display: inline-block;
	padding-block: 10px;
	color: inherit;
	text-decoration: none;
}

:where(.ddg-breadcrumb) a:hover {
	text-decoration: underline;
}

:where(.ddg-breadcrumb) .separator {
	margin-inline: 4px;
	color: var(--ddg-line, #c9d2dc);
}

:where(.ddg-breadcrumb) .last {
	color: var(--ddg-ink-700, #334155);
}

/* ------------------------------------------------------------------ *
 * Nội dung bài
 * ------------------------------------------------------------------ */
.ddg-entry-content {
	padding-top: var(--ddg-space-2, 8px); /* Flatsome .entry-content đặt 1.5em → khoảng trống thừa dưới dòng meta */
	font-size: var(--ddg-fs-16, 16px);
	line-height: var(--ddg-lh-body, 1.7);
	text-align: left;
	overflow-wrap: break-word;
}

@media (min-width: 850px) {
	.ddg-entry-content {
		font-size: 17.5px;
	}
}

/* Tiêu đề và nội dung chảy tự nhiên theo khung cột bài viết — KHÔNG giới hạn max-width riêng
 * cho heading/đoạn văn (độ rộng đọc do chính cột nội dung + sidebar quyết định).
 * text-wrap chỉ tối ưu điểm ngắt dòng, không thu hẹp khối. */
.ddg-entry-content > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6, .ddg-toc, .ddg-cta-box) {
	max-width: none;
}

/* pretty (không balance): dòng đầu chạy hết khung, chỉ tránh 1 từ mồ côi ở dòng cuối. */
.ddg-entry-content :is(h2, h3, h4),
.ddg-post-header .entry-title,
.ddg-archive-title {
	text-wrap: pretty;
}

.ddg-entry-content :is(p, li) {
	text-wrap: pretty;
}

.ddg-entry-content :is(h2, h3, h4) {
	margin-top: 1.6em;
	margin-bottom: 0.6em;
	line-height: var(--ddg-lh-heading, 1.3);
	color: var(--ddg-ink-900, #14202e);
}

/* Heading có neo TOC không bị header sticky che. */
.ddg-entry-content :is(h2, h3, h4)[id],
.single-product :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--ddg-header-sticky-h, 80px) + 16px);
}

.ddg-entry-content p,
.ddg-entry-content li {
	text-align: left;
}

.ddg-entry-content a:not(.ddg-btn) {
	color: var(--ddg-brand-700, #1d4f86);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ddg-entry-content a:not(.ddg-btn):hover {
	color: var(--ddg-brand-900, #0e2a47);
}

.ddg-entry-content img {
	max-width: 100%;
	height: auto;
}

.ddg-entry-content figure,
.ddg-entry-content .wp-caption {
	max-width: 100%;
	margin: var(--ddg-space-6, 24px) 0;
}

.ddg-entry-content figcaption,
.ddg-entry-content .wp-caption-text {
	margin-top: var(--ddg-space-2, 8px);
	font-size: var(--ddg-fs-14, 14px);
	color: var(--ddg-ink-500, #5b6878);
}

.ddg-entry-content blockquote {
	margin: var(--ddg-space-6, 24px) 0;
	padding: var(--ddg-space-3, 12px) var(--ddg-space-4, 16px);
	border-left: 3px solid var(--ddg-brand-600, #2a64a8);
	background: var(--ddg-surface-2, #f4f6f9);
	font-style: normal;
}

/* Bảng: bọc cuộn ngang (PHP bọc <table> trong .ddg-table-wrap). */
.ddg-entry-content .ddg-table-wrap {
	max-width: 100%;
	margin: var(--ddg-space-6, 24px) 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ddg-line, #e2e7ee);
	border-radius: var(--ddg-radius-sm, 6px);
}

.ddg-entry-content .ddg-table-wrap table {
	width: 100%;
	min-width: 520px;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--ddg-fs-14, 15px);
	line-height: 1.55;
}

.ddg-entry-content .ddg-table-wrap :is(th, td) {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ddg-line, #e2e7ee);
	text-align: left;
	vertical-align: top;
}

.ddg-entry-content .ddg-table-wrap th {
	background: var(--ddg-surface-2, #f4f6f9);
	font-weight: 600;
}

.ddg-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: var(--ddg-space-6, 24px) 0;
}

.ddg-page-links a,
.ddg-page-links > .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--ddg-line, #e2e7ee);
	border-radius: var(--ddg-radius-sm, 6px);
}

/* ------------------------------------------------------------------ *
 * Mục lục (TOC) — không JS; mobile thu gọn chiều cao, không CLS
 * ------------------------------------------------------------------ */
.ddg-toc {
	margin: var(--ddg-space-6, 24px) 0;
	border: 1px solid var(--ddg-line, #e2e7ee);
	border-radius: var(--ddg-radius-md, 10px);
	background: var(--ddg-surface-2, #f6f8fb);
	font-size: var(--ddg-fs-16, 16px);
	line-height: 1.5;
}

.ddg-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 10px var(--ddg-space-4, 16px);
	font-weight: 600;
	color: var(--ddg-ink-900, #14202e);
	cursor: pointer;
	list-style: none;
}

.ddg-toc__summary::-webkit-details-marker {
	display: none;
}

.ddg-toc__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--ddg-dur-1, 150ms) var(--ddg-ease, ease);
}

.ddg-toc__details[open] > .ddg-toc__summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

.ddg-toc__summary:focus-visible {
	outline: 3px solid var(--ddg-brand-600, #2a64a8);
	outline-offset: -3px;
	border-radius: var(--ddg-radius-md, 10px);
}

.ddg-toc__list,
.ddg-toc__sub {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ddg-toc;
}

.ddg-toc__list {
	padding: 0 var(--ddg-space-4, 16px) var(--ddg-space-3, 12px);
}

.ddg-toc__list > li {
	counter-increment: ddg-toc;
	margin: 0;
}

.ddg-toc__list > li > a::before {
	content: counter(ddg-toc) ". ";
	color: var(--ddg-ink-500, #5b6878);
}

.ddg-toc__sub {
	padding-left: var(--ddg-space-6, 24px);
}

.ddg-toc__sub > li {
	margin: 0;
}

.ddg-toc a {
	display: block;
	padding: 6px 0;
	color: var(--ddg-ink-700, #334155);
	text-decoration: none;
}

.ddg-toc a:hover,
.ddg-toc a:focus-visible {
	color: var(--ddg-brand-700, #1d4f86);
	text-decoration: underline;
}

.ddg-entry-content .ddg-toc li {
	margin-bottom: 0;
	text-align: left;
}

@media (max-width: 849px) {
	/* Mở sẵn nhưng giới hạn chiều cao, cuộn trong khung (không đẩy nội dung dài xuống). */
	.ddg-toc__list {
		max-height: 15rem;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ddg-toc a {
		padding: 9px 0;
	}
}

/* ------------------------------------------------------------------ *
 * CTA box + nút (fallback — DESIGN components.css thắng)
 * ------------------------------------------------------------------ */
:where(.ddg-cta-box) {
	margin: var(--ddg-space-8, 32px) 0;
	padding: var(--ddg-space-4, 16px) var(--ddg-space-6, 24px);
	border: 1px solid var(--ddg-line, #dfe6ee);
	border-left: 4px solid var(--ddg-brand-600, #2a64a8);
	border-radius: var(--ddg-radius-md, 10px);
	background: var(--ddg-brand-100, #eef4fb);
}

:where(.ddg-cta-box) :where(.ddg-cta-box__title) {
	margin: 0 0 4px;
	font-size: var(--ddg-fs-18, 18px);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ddg-brand-900, #0e2a47);
}

:where(.ddg-cta-box) :where(.ddg-cta-box__text) {
	margin: 0 0 var(--ddg-space-3, 12px);
	font-size: var(--ddg-fs-16, 16px);
	color: var(--ddg-ink-700, #334155);
}

:where(.ddg-cta-box__actions) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ddg-space-2, 8px);
}

/* Nút: specificity (0,0,1) = thắng rule thẻ a/button của Flatsome (nạp trước) nhưng thua .ddg-btn của DESIGN (0,1,0). */
:is(a, button):where(.ddg-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--ddg-radius-pill, 999px);
	font-size: var(--ddg-fs-16, 16px);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

:is(a, button):where(.ddg-btn--primary) {
	background: var(--ddg-brand-700, #1d4f86);
	color: #fff;
}

:is(a, button):where(.ddg-btn--call) {
	background: var(--ddg-call, #0f7a3d);
	color: #fff;
}

:is(a, button):where(.ddg-btn--zalo) {
	background: var(--ddg-zalo, #0068ff);
	color: #fff;
}

:is(a, button):where(.ddg-btn):hover {
	filter: brightness(0.92);
	color: #fff;
}

:is(a, button):where(.ddg-btn):focus-visible {
	outline: 3px solid var(--ddg-brand-600, #2a64a8);
	outline-offset: 2px;
}

:is(a, button):where(.ddg-btn) svg {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Hộp CTA trong nội dung: chữ kế thừa cỡ đọc; nút không bị gạch chân của link nội dung. */
.ddg-entry-content .ddg-cta-box p {
	text-align: left;
}

@media (max-width: 549px) {
	.ddg-cta-box__actions .ddg-btn {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Cuối bài: chuyên mục/thẻ, chia sẻ, CTA + form, tác giả, bài trước/sau
 * ------------------------------------------------------------------ */
.ddg-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: var(--ddg-space-6, 24px) 0 0;
	padding-top: var(--ddg-space-4, 16px);
	border-top: 1px solid var(--ddg-line, #e2e7ee);
	font-size: var(--ddg-fs-14, 14px);
	color: var(--ddg-ink-500, #5b6878);
	text-align: left;
	text-transform: none;
}

.ddg-post-terms a {
	display: inline-block;
	padding-block: 10px;
	color: var(--ddg-ink-700, #334155);
}

.ddg-post-share {
	margin: var(--ddg-space-4, 16px) 0;
	text-align: left;
}

.ddg-post-end {
	margin: var(--ddg-space-8, 32px) 0;
}

.ddg-author-box {
	display: flex;
	gap: var(--ddg-space-4, 16px);
	align-items: flex-start;
	margin: var(--ddg-space-8, 32px) 0;
	padding: var(--ddg-space-4, 16px);
	border: 1px solid var(--ddg-line, #e2e7ee);
	border-radius: var(--ddg-radius-md, 10px);
	background: var(--ddg-surface, #fff);
}

.ddg-author-box__media {
	flex: none;
}

.ddg-author-box__avatar {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.ddg-author-box__logo {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.ddg-author-box__body > p {
	margin: 0;
}

.ddg-author-box__label {
	font-size: var(--ddg-fs-12, 12px);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ddg-ink-500, #5b6878);
}

.ddg-author-box__name {
	font-size: var(--ddg-fs-18, 18px);
	font-weight: 600;
	color: var(--ddg-ink-900, #14202e);
}

.ddg-author-box__bio {
	margin-top: 4px;
	font-size: var(--ddg-fs-16, 15px);
	line-height: 1.6;
	color: var(--ddg-ink-700, #334155);
}

.ddg-author-box__link {
	display: inline-block;
	padding-block: 10px;
	font-weight: 600;
	color: var(--ddg-brand-700, #1d4f86);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ddg-post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ddg-space-3, 12px);
	margin: var(--ddg-space-8, 32px) 0;
}

@media (min-width: 550px) {
	.ddg-post-nav {
		grid-template-columns: 1fr 1fr;
	}

	.ddg-post-nav__link--next {
		grid-column: 2;
		text-align: right;
	}
}

.ddg-post-nav__link {
	display: block;
	padding: var(--ddg-space-3, 12px) var(--ddg-space-4, 16px);
	border: 1px solid var(--ddg-line, #e2e7ee);
	border-radius: var(--ddg-radius-md, 10px);
	color: var(--ddg-ink-900, #14202e);
	text-decoration: none;
}

.ddg-post-nav__link:hover {
	border-color: var(--ddg-brand-600, #2a64a8);
}

.ddg-post-nav__label {
	display: block;
	font-size: var(--ddg-fs-12, 13px);
	color: var(--ddg-ink-500, #5b6878);
}

.ddg-post-nav__title {
	display: block;
	font-weight: 600;
	line-height: 1.4;
}

/* ------------------------------------------------------------------ *
 * Lưới card bài viết (related / archive / 404): 1 → 2 → 3 cột
 * ------------------------------------------------------------------ */
.ddg-related {
	margin: var(--ddg-space-12, 48px) 0 var(--ddg-space-8, 32px);
}

.ddg-related__title,
.ddg-404__heading {
	margin: 0 0 var(--ddg-space-4, 16px);
	font-family: var(--ddg-font-display, inherit);
	font-size: var(--ddg-fs-24, 24px);
	line-height: var(--ddg-lh-heading, 1.3);
	color: var(--ddg-ink-900, #14202e);
	text-transform: none;
}

.ddg-post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ddg-space-4, 16px);
	margin: 0 0 var(--ddg-space-6, 24px);
}

@media (min-width: 550px) {
	.ddg-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ddg-space-6, 24px) var(--ddg-space-4, 16px);
	}
}

@media (min-width: 850px) {
	.ddg-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ddg-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ddg-line, #e2e7ee);
	border-radius: var(--ddg-radius-md, 10px);
	background: var(--ddg-surface, #fff);
	transition: box-shadow var(--ddg-dur-2, 200ms) var(--ddg-ease, ease);
}

.ddg-post-card:hover {
	box-shadow: var(--ddg-shadow-1, 0 4px 16px rgba(15, 27, 45, 0.08));
}

.ddg-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ddg-surface-2, #eef2f6);
}

.ddg-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.ddg-post-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 16px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 30%, transparent 30% 60%, rgba(255, 255, 255, 0.08) 60%),
		linear-gradient(160deg, var(--ddg-brand-900, #0e2a47), var(--ddg-brand-600, #2a64a8));
	color: #fff;
	font-family: var(--ddg-font-display, inherit);
	font-size: var(--ddg-fs-18, 18px);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
}

.ddg-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: var(--ddg-space-3, 12px) var(--ddg-space-4, 16px) var(--ddg-space-4, 16px);
	text-align: left;
}

.ddg-post-card__cat {
	font-size: var(--ddg-fs-12, 12px);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ddg-brand-700, #1d4f86);
}

.ddg-post-card__title {
	margin: 0;
	font-family: var(--ddg-font-sans, inherit);
	font-size: var(--ddg-fs-18, 17px);
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
}

.ddg-post-card__title a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ddg-ink-900, #14202e);
	text-decoration: none;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Cả card bấm được qua tiêu đề (vùng chạm lớn). */
.ddg-post-card {
	position: relative;
}

.ddg-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ddg-post-card__title a:hover,
.ddg-post-card__title a:focus-visible {
	color: var(--ddg-brand-700, #1d4f86);
	text-decoration: underline;
}

.ddg-post-card:focus-within {
	outline: 3px solid var(--ddg-brand-600, #2a64a8);
	outline-offset: 2px;
}

.ddg-post-card__title a:focus-visible {
	outline: none;
}

.ddg-post-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: var(--ddg-fs-14, 15px);
	line-height: 1.6;
	color: var(--ddg-ink-700, #3f4b5b);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.ddg-post-card__date {
	margin-top: auto;
	padding-top: 4px;
	font-size: var(--ddg-fs-14, 13px);
	color: var(--ddg-ink-500, #5b6878);
}

/* ------------------------------------------------------------------ *
 * Archive: tiêu đề, mô tả, phân trang
 * ------------------------------------------------------------------ */
.ddg-archive-header {
	padding-top: var(--ddg-space-6, 24px);
	text-align: left;
}

.ddg-archive-title {
	margin: 0 0 var(--ddg-space-2, 8px);
	font-family: var(--ddg-font-display, inherit);
	font-size: var(--ddg-fs-30, 30px);
	line-height: var(--ddg-lh-heading, 1.25);
	color: var(--ddg-ink-900, #14202e);
	text-transform: none;
	letter-spacing: 0;
}

@media (min-width: 850px) {
	.ddg-archive-title {
		font-size: var(--ddg-fs-40, 38px);
	}
}

.ddg-archive-page {
	margin: 0 0 var(--ddg-space-2, 8px);
	font-size: var(--ddg-fs-14, 14px);
	color: var(--ddg-ink-500, #5b6878);
}

.ddg-archive-desc {
	margin: 0 0 var(--ddg-space-4, 16px);
	font-size: var(--ddg-fs-16, 16px);
	line-height: var(--ddg-lh-body, 1.7);
	color: var(--ddg-ink-700, #334155);
	text-align: left;
}

.ddg-pagination {
	margin: var(--ddg-space-6, 24px) 0 var(--ddg-space-8, 32px);
}

.ddg-pagination .nav-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ddg-pagination .nav-pagination > li {
	margin: 0;
}

.ddg-pagination .page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	line-height: 1;
}

.ddg-no-results {
	padding: var(--ddg-space-6, 24px) 0;
}

.ddg-no-results__title {
	margin-bottom: var(--ddg-space-2, 8px);
	font-size: var(--ddg-fs-24, 24px);
}

/* ------------------------------------------------------------------ *
 * 404
 * ------------------------------------------------------------------ */
.ddg-404__inner {
	max-width: 1080px;
	padding-block: var(--ddg-space-8, 32px) var(--ddg-space-12, 48px);
}

.ddg-404__hero {
	max-width: 720px;
	margin: 0 0 var(--ddg-space-8, 32px);
}

.ddg-404__code {
	margin: 0;
	font-family: var(--ddg-font-display, inherit);
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var(--ddg-brand-100, #dbe6f3);
}

.ddg-404__title {
	margin: var(--ddg-space-2, 8px) 0;
	font-family: var(--ddg-font-display, inherit);
	font-size: var(--ddg-fs-30, 30px);
	line-height: var(--ddg-lh-heading, 1.25);
	color: var(--ddg-ink-900, #14202e);
	text-transform: none;
}

.ddg-404__text {
	margin: 0 0 var(--ddg-space-4, 16px);
	font-size: var(--ddg-fs-16, 16px);
	line-height: var(--ddg-lh-body, 1.7);
	color: var(--ddg-ink-700, #334155);
}

.ddg-404__search {
	display: flex;
	gap: var(--ddg-space-2, 8px);
	max-width: 560px;
	margin: 0;
}

.ddg-404__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 var(--ddg-space-4, 16px);
	border: 1px solid var(--ddg-line, #cfd8e3);
	border-radius: var(--ddg-radius-sm, 6px);
	font-size: 16px;
	box-shadow: none;
}

.ddg-404__search .ddg-btn {
	flex: none;
	min-height: 48px;
	border-radius: var(--ddg-radius-sm, 6px);
}

.ddg-404__section {
	margin: 0 0 var(--ddg-space-8, 32px);
}

.ddg-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ddg-space-3, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.ddg-cat-grid__item {
	margin: 0;
}

.ddg-cat-grid__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--ddg-line, #e2e7ee);
	border-radius: var(--ddg-radius-md, 10px);
	background: var(--ddg-surface, #fff);
	color: var(--ddg-ink-900, #14202e);
	text-decoration: none;
}

.ddg-cat-grid__link:hover {
	border-color: var(--ddg-brand-600, #2a64a8);
}

.ddg-cat-grid__img,
.ddg-cat-grid__placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ddg-cat-grid__placeholder {
	background: linear-gradient(160deg, var(--ddg-brand-100, #e6eef8), var(--ddg-surface-2, #f4f6f9));
}

.ddg-cat-grid__name {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 8px 12px;
	font-weight: 600;
	line-height: 1.35;
}

.ddg-404__home a {
	display: inline-block;
	padding-block: 10px;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.ddg-post-card,
	.ddg-toc__summary::after {
		transition: none;
	}
}