/*!
 * ==========================================================
 * TUIDANAM TECHNICAL ARTICLE FRAMEWORK
 * Version: 2.2.0
 * ==========================================================
 *
 * Scope:
 * - .tdn-content
 * - .single-post .entry-content
 * - .single-product-page #tab-description
 *
 * Design direction:
 * - Technical leather reference
 * - Flat editorial surfaces
 * - Compact radius
 * - Clear information rails
 * - No decorative pill/card footprint
 */

/* =========================================================
   TOKENS
========================================================= */

:root {
	--tdn-accent: #3f5d4d;
	--tdn-accent-dark: #294537;
	--tdn-accent-light: #789082;
	--tdn-accent-soft: #e8eeea;
	--tdn-accent-pale: #f4f7f5;

	--tdn-text: #28302c;
	--tdn-heading: #1f2823;
	--tdn-muted: #66706a;

	--tdn-border: #d7ddd9;
	--tdn-border-strong: #aab5ae;

	--tdn-surface: #ffffff;
	--tdn-surface-soft: #f6f8f6;
	--tdn-surface-dark: #25322b;
	--tdn-surface-dark-soft: #314139;

	--tdn-success: #496c55;
	--tdn-success-soft: #edf4ef;
	--tdn-warning: #8a5a2b;
	--tdn-warning-soft: #fbf4ea;
	--tdn-danger: #844944;
	--tdn-danger-soft: #f8efee;

	--tdn-radius-xs: 2px;
	--tdn-radius-sm: 3px;
	--tdn-radius: 5px;

	--tdn-shadow-soft: 0 2px 8px rgba(24, 37, 30, 0.04);
	--tdn-shadow: 0 8px 26px rgba(24, 37, 30, 0.08);

	--tdn-prose-width: 900px;
	--tdn-prose-size: 1.03rem;
	--tdn-prose-leading: 1.88;
	--tdn-scroll-offset: 104px;
	--tdn-focus-ring: 0 0 0 3px rgba(63, 93, 77, 0.22);
}

/* =========================================================
   CONTENT SCOPE
========================================================= */

.tdn-content,
.single-post .entry-content,
.single-product-page #tab-description {
	position: relative;
	color: var(--tdn-text);
	font-size: 17px;
	line-height: 1.8;
}

.tdn-content *,
.single-post .entry-content *,
.single-product-page #tab-description * {
	box-sizing: border-box;
}

.tdn-content p,
.single-post .entry-content p,
.single-product-page #tab-description p {
	margin: 0 0 18px;
}

.tdn-content p:last-child,
.single-post .entry-content p:last-child,
.single-product-page #tab-description p:last-child {
	margin-bottom: 0;
}

.tdn-content strong,
.single-post .entry-content strong,
.single-product-page #tab-description strong {
	color: var(--tdn-heading);
}

.tdn-content a,
.single-post .entry-content a,
.single-product-page #tab-description a {
	color: var(--tdn-accent-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.tdn-content a:hover,
.single-post .entry-content a:hover,
.single-product-page #tab-description a:hover {
	color: var(--tdn-accent);
}

.tdn-content ul,
.tdn-content ol,
.single-post .entry-content ul,
.single-post .entry-content ol,
.single-product-page #tab-description ul,
.single-product-page #tab-description ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.tdn-content li,
.single-post .entry-content li,
.single-product-page #tab-description li {
	margin-bottom: 8px;
}

.tdn-content h2,
.single-post .entry-content h2,
.single-product-page #tab-description h2 {
	position: relative;
	margin: 0 0 24px;
	padding: 0 42px 12px 0;
	border-bottom: 1px solid var(--tdn-border-strong);
	color: var(--tdn-heading);
	font-size: clamp(25px, 2.8vw, 33px);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.015em;
}

.tdn-content h2::after,
.single-post .entry-content h2::after,
.single-product-page #tab-description h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 52px;
	height: 2px;
	background: var(--tdn-accent);
}

.tdn-content h3,
.single-post .entry-content h3,
.single-product-page #tab-description h3 {
	position: relative;
	margin: 30px 0 12px;
	padding-right: 42px;
	color: var(--tdn-heading);
	font-size: clamp(19px, 2vw, 22px);
	font-weight: 700;
	line-height: 1.42;
}

.tdn-content h4,
.single-post .entry-content h4,
.single-product-page #tab-description h4 {
	margin: 24px 0 10px;
	color: var(--tdn-heading);
	font-size: 18px;
	line-height: 1.45;
}

/* =========================================================
   INTRO
========================================================= */

.tdn-doc-intro {
	margin: 0 0 34px;
	padding: clamp(24px, 4vw, 38px);
	border: 1px solid var(--tdn-border-strong);
	border-left: 5px solid var(--tdn-accent);
	border-radius: var(--tdn-radius);
	background: var(--tdn-surface);
	box-shadow: var(--tdn-shadow-soft);
}

.tdn-content h2.tdn-doc-kicker,
.single-post .entry-content h2.tdn-doc-kicker,
.single-product-page #tab-description h2.tdn-doc-kicker {
	display: inline-block;
	width: auto;
	max-width: 100%;
	margin: 0 0 18px;
	padding: 0 0 8px;
	border: 0;
	border-bottom: 1px solid var(--tdn-border);
	background: transparent;
	color: var(--tdn-accent-dark);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tdn-content h2.tdn-doc-kicker::after,
.single-post .entry-content h2.tdn-doc-kicker::after,
.single-product-page #tab-description h2.tdn-doc-kicker::after {
	display: none;
}

.tdn-doc-lead {
	max-width: 980px;
	color: var(--tdn-text);
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.68;
}

/* =========================================================
   SUMMARY
========================================================= */

.tdn-doc-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: 28px;
	border-top: 1px solid var(--tdn-border);
	border-bottom: 1px solid var(--tdn-border);
}

.tdn-doc-summary-item {
	min-width: 0;
	padding: 17px 18px;
	border-right: 1px solid var(--tdn-border);
	background: transparent;
}

.tdn-doc-summary-item:last-child {
	border-right: 0;
}

.tdn-doc-summary-item:hover {
	background: var(--tdn-accent-pale);
}

.tdn-doc-summary-item strong {
	display: block;
	margin-bottom: 5px;
	color: var(--tdn-accent-dark);
	font-size: 16px;
}

.tdn-doc-summary-item span {
	display: block;
	color: var(--tdn-muted);
	font-size: 14px;
	line-height: 1.58;
}

/* =========================================================
   SECTIONS
========================================================= */

.tdn-doc-section {
	position: relative;
	margin: 34px 0;
	padding: clamp(25px, 4vw, 38px);
	border: 1px solid var(--tdn-border);
	border-top: 3px solid var(--tdn-border-strong);
	border-radius: var(--tdn-radius);
	background: var(--tdn-surface);
	box-shadow: var(--tdn-shadow-soft);
}

.tdn-doc-section.is-soft {
	background: var(--tdn-surface-soft);
}

.tdn-doc-section.is-highlight {
	border-color: var(--tdn-border-strong);
	border-top-color: var(--tdn-accent);
	background: var(--tdn-accent-pale);
}

.tdn-doc-section > :last-child {
	margin-bottom: 0;
}

/* =========================================================
   PROCESS
========================================================= */

.tdn-process .tdn-doc-section {
	padding-left: clamp(34px, 5vw, 58px);
}

.tdn-process .tdn-doc-section::before {
	content: "";
	position: absolute;
	top: 38px;
	bottom: 38px;
	left: 20px;
	width: 2px;
	background: var(--tdn-border-strong);
}

.tdn-process .tdn-doc-section > h2:first-child::before {
	content: "";
	position: absolute;
	top: 7px;
	left: calc(clamp(34px, 5vw, 58px) * -1 + 11px);
	width: 16px;
	height: 16px;
	border: 3px solid var(--tdn-accent-soft);
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-accent);
	box-shadow: 0 0 0 1px var(--tdn-border-strong);
}

.tdn-process .tdn-doc-section:first-of-type::before,
.tdn-process .tdn-doc-conclusion::before,
.tdn-process .tdn-doc-bespoke::before {
	display: none;
}

/* =========================================================
   CARDS
========================================================= */

.tdn-doc-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 24px 0 4px;
}

.tdn-doc-card {
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
}

.tdn-doc-card:hover {
	border-color: var(--tdn-accent-light);
	background: var(--tdn-accent-pale);
}

.tdn-doc-card h3 {
	margin-top: 0;
	margin-bottom: 10px;
	color: var(--tdn-accent-dark);
	font-size: 19px;
}

.tdn-doc-card p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   CHECKLIST
========================================================= */

.tdn-doc-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 22px 0 8px;
	padding: 0;
	border-top: 1px solid var(--tdn-border);
	list-style: none;
}

.tdn-doc-checklist li {
	position: relative;
	margin: 0;
	padding: 13px 14px 13px 42px;
	border-bottom: 1px solid var(--tdn-border);
	background: var(--tdn-surface);
	line-height: 1.58;
}

.tdn-doc-checklist li::before {
	content: "✓";
	position: absolute;
	top: 14px;
	left: 12px;
	display: inline-grid;
	width: 19px;
	height: 19px;
	border: 1px solid var(--tdn-accent-light);
	border-radius: var(--tdn-radius-xs);
	background: transparent;
	color: var(--tdn-accent-dark);
	font-size: 12px;
	font-weight: 800;
	place-items: center;
}

/* =========================================================
   CALLOUTS
========================================================= */

.tdn-doc-note,
.tdn-doc-insight,
.tdn-doc-decision,
.tdn-doc-warning,
.tdn-doc-experience,
.tdn-doc-linkbox {
	margin: 24px 0;
	padding: 20px 22px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
}

.tdn-doc-note {
	border-left: 4px solid var(--tdn-accent);
	background: var(--tdn-surface-soft);
}

.tdn-doc-insight {
	position: relative;
	padding-left: 54px;
	border-color: var(--tdn-border-strong);
}

.tdn-doc-insight::before {
	content: "i";
	position: absolute;
	top: 20px;
	left: 18px;
	display: inline-grid;
	width: 24px;
	height: 24px;
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-accent);
	color: #fff;
	font-family: Georgia, serif;
	font-size: 14px;
	font-weight: 700;
	place-items: center;
}

.tdn-doc-quote {
	margin: 28px 0;
	padding: 22px 24px;
	border: 0;
	border-left: 3px solid var(--tdn-accent);
	background: var(--tdn-surface-soft);
	color: var(--tdn-text);
	font-size: 19px;
	font-style: italic;
	line-height: 1.65;
}

.tdn-doc-decision {
	border-left: 5px solid var(--tdn-accent);
	background: var(--tdn-accent-pale);
}

.tdn-doc-warning {
	border-color: rgba(138, 90, 43, 0.32);
	border-left: 5px solid var(--tdn-warning);
	background: var(--tdn-warning-soft);
}

.tdn-doc-warning strong {
	color: #714016;
}

.tdn-doc-experience {
	border-color: rgba(73, 108, 85, 0.32);
	border-left: 5px solid var(--tdn-success);
	background: var(--tdn-success-soft);
}

.tdn-doc-experience strong {
	color: #405735;
}

/* =========================================================
   COMPARISON / MYTH REALITY
========================================================= */

.tdn-doc-comparison,
.tdn-doc-myth-reality {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 24px 0;
}

.tdn-doc-comparison > div,
.tdn-doc-myth-reality > div {
	min-width: 0;
	padding: 22px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
}

.tdn-doc-comparison h3,
.tdn-doc-myth-reality h3 {
	margin-top: 0;
	color: var(--tdn-accent-dark);
}

.tdn-doc-myth-reality .is-myth {
	border-top: 4px solid var(--tdn-danger);
	background: var(--tdn-danger-soft);
}

.tdn-doc-myth-reality .is-reality {
	border-top: 4px solid var(--tdn-success);
	background: var(--tdn-success-soft);
}

/* =========================================================
   STATUS LABELS
========================================================= */

.tdn-doc-card.is-recommended,
.tdn-doc-comparison > .is-recommended,
.tdn-doc-card.is-consider,
.tdn-doc-comparison > .is-consider,
.tdn-doc-card.is-not-suitable,
.tdn-doc-comparison > .is-not-suitable {
	position: relative;
	padding-top: 54px;
}

.tdn-doc-card.is-recommended::before,
.tdn-doc-comparison > .is-recommended::before,
.tdn-doc-card.is-consider::before,
.tdn-doc-comparison > .is-consider::before,
.tdn-doc-card.is-not-suitable::before,
.tdn-doc-comparison > .is-not-suitable::before {
	position: absolute;
	top: 17px;
	left: 18px;
	display: inline-flex;
	min-height: 24px;
	padding: 4px 9px;
	border: 1px solid currentColor;
	border-radius: var(--tdn-radius-xs);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
}

.tdn-doc-card.is-recommended::before,
.tdn-doc-comparison > .is-recommended::before {
	content: "Phù hợp khi";
	background: var(--tdn-success-soft);
	color: var(--tdn-success);
}

.tdn-doc-card.is-consider::before,
.tdn-doc-comparison > .is-consider::before {
	content: "Cần cân nhắc";
	background: var(--tdn-accent-soft);
	color: var(--tdn-accent-dark);
}

.tdn-doc-card.is-not-suitable::before,
.tdn-doc-comparison > .is-not-suitable::before {
	content: "Không phù hợp khi";
	background: var(--tdn-danger-soft);
	color: var(--tdn-danger);
}

/* =========================================================
   DECISION TREE
========================================================= */

.tdn-doc-decision-tree {
	margin: 28px 0;
	padding: 0;
	list-style: none;
	counter-reset: tdn-decision-step;
}

.tdn-doc-decision-tree > li {
	position: relative;
	margin: 0 0 16px;
	padding: 19px 20px 19px 60px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
	counter-increment: tdn-decision-step;
}

.tdn-doc-decision-tree > li::before {
	content: counter(tdn-decision-step, decimal-leading-zero);
	position: absolute;
	top: 18px;
	left: 16px;
	display: inline-grid;
	width: 30px;
	height: 26px;
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	place-items: center;
}

.tdn-doc-decision-tree > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(100% + 1px);
	left: 30px;
	width: 1px;
	height: 16px;
	background: var(--tdn-border-strong);
}

.tdn-doc-decision-tree h3 {
	margin: 0 0 6px;
	font-size: 18px;
}

.tdn-doc-decision-tree > li > strong {
	display: inline-block;
	margin: 0 0 6px;
	color: var(--tdn-heading);
	font-size: 17px;
	line-height: 1.35;
}

.tdn-doc-decision-tree p {
	margin: 0;
}

/* =========================================================
   TABLE
========================================================= */

.tdn-doc-table-wrap {
	width: 100%;
	margin: 24px 0;
	overflow-x: auto;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
	-webkit-overflow-scrolling: touch;
}

.tdn-doc-table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--tdn-surface);
}

.tdn-doc-table-wrap .tdn-doc-table {
	min-width: 680px;
}

.tdn-doc-table caption {
	padding: 13px 16px;
	color: var(--tdn-muted);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	caption-side: top;
}

.tdn-doc-table th,
.tdn-doc-table td {
	padding: 15px 17px;
	border-right: 1px solid var(--tdn-border);
	border-bottom: 1px solid var(--tdn-border);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.tdn-doc-table th {
	background: var(--tdn-accent-soft);
	color: var(--tdn-accent-dark);
	font-weight: 700;
}

.tdn-doc-table tr:last-child td {
	border-bottom: 0;
}

.tdn-doc-table th:last-child,
.tdn-doc-table td:last-child {
	border-right: 0;
}

.tdn-doc-table tbody tr:hover {
	background: var(--tdn-accent-pale);
}

/* =========================================================
   LINKBOX / PRODUCT LIST
========================================================= */

.tdn-doc-linkbox {
	border-left: 4px solid var(--tdn-accent-light);
}

.tdn-doc-linkbox p:last-child {
	margin-bottom: 0;
}

.tdn-doc-product-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.tdn-doc-product-list li {
	margin: 0;
	padding: 15px 16px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface-soft);
}

/* =========================================================
   BESPOKE CTA
========================================================= */

.tdn-doc-bespoke {
	margin: 36px 0;
	padding: clamp(28px, 5vw, 44px);
	border: 1px solid var(--tdn-border-strong);
	border-left: 5px solid var(--tdn-accent);
	border-radius: var(--tdn-radius);
	background: var(--tdn-surface-dark);
	color: #eef2ef;
	box-shadow: var(--tdn-shadow);
}

.tdn-doc-bespoke h2,
.tdn-doc-bespoke h3,
.tdn-doc-bespoke strong {
	color: #fff;
}

.tdn-doc-bespoke h2::after {
	background: var(--tdn-accent-light);
}

.tdn-doc-bespoke a {
	color: #c9d6ce;
	text-decoration-color: rgba(201, 214, 206, 0.72);
}

.tdn-doc-bespoke a:hover {
	color: #fff;
}

.tdn-doc-bespoke .tdn-doc-comparison > div,
.tdn-doc-bespoke .tdn-doc-decision {
	background: var(--tdn-surface);
	color: var(--tdn-text);
}

.tdn-doc-bespoke .tdn-doc-comparison h3,
.tdn-doc-bespoke .tdn-doc-decision h3 {
	color: var(--tdn-heading);
}

.tdn-doc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.tdn-doc-button,
.tdn-doc-hotline a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--tdn-accent);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-accent);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.tdn-doc-button:hover,
.tdn-doc-hotline a:hover {
	border-color: var(--tdn-accent-dark);
	background: var(--tdn-accent-dark);
}

.tdn-doc-button.is-outline {
	border-color: rgba(255, 255, 255, 0.38);
	background: transparent;
}

/* =========================================================
   STORE
========================================================= */

.tdn-doc-store {
	margin: 36px 0;
	padding: clamp(27px, 5vw, 44px);
	border: 1px solid var(--tdn-border-strong);
	border-radius: var(--tdn-radius);
	background: var(--tdn-surface);
	box-shadow: var(--tdn-shadow-soft);
}

.tdn-doc-store-layout {
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(24px, 4vw, 42px);
	align-items: center;
	margin-top: 24px;
}

.tdn-doc-store-media,
.tdn-doc-store-content {
	min-width: 0;
}

.tdn-doc-store-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 24px;
}

.tdn-doc-address {
	width: 100%;
	padding: 20px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
}

.tdn-doc-address h3 {
	margin-top: 0;
	color: var(--tdn-accent-dark);
}

.tdn-doc-hotline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

/* =========================================================
   CONCLUSION
========================================================= */

.tdn-doc-conclusion {
	margin: 36px 0;
	padding: clamp(26px, 4vw, 38px);
	border: 1px solid var(--tdn-border);
	border-top: 3px solid var(--tdn-accent);
	border-radius: var(--tdn-radius);
	background: var(--tdn-accent-pale);
}

.tdn-doc-conclusion h2 {
	margin-top: 0;
}

/* =========================================================
   FIGURE / IMAGE
========================================================= */

.tdn-doc-image {
	margin: 30px 0;
	text-align: center;
}

.tdn-content figure,
.tdn-content .wp-caption,
.single-post .entry-content figure,
.single-post .entry-content .wp-caption,
.single-product-page #tab-description figure,
.single-product-page #tab-description .wp-caption {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 30px auto;
	padding: 7px;
	overflow: hidden;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
}

.tdn-content img,
.single-post .entry-content img,
.single-product-page #tab-description img {
	max-width: 100%;
	height: auto;
}

.tdn-content figure img,
.tdn-content .wp-caption img,
.tdn-doc-image img,
.single-post .entry-content figure img,
.single-post .entry-content .wp-caption img,
.single-product-page #tab-description figure img,
.single-product-page #tab-description .wp-caption img {
	display: block;
	margin: 0 auto;
	border-radius: var(--tdn-radius-xs);
	box-shadow: none;
}

.tdn-content figcaption,
.tdn-content .wp-caption-text,
.single-post .entry-content figcaption,
.single-post .entry-content .wp-caption-text,
.single-product-page #tab-description figcaption,
.single-product-page #tab-description .wp-caption-text {
	display: block;
	width: 100%;
	max-width: 760px;
	margin: 11px auto 0;
	padding: 0 4px 2px;
	color: var(--tdn-muted);
	font-size: 14px;
	line-height: 1.58;
	text-align: center;
}

/* =========================================================
   SPLIT LAYOUT
========================================================= */

.tdn-doc-split {
	display: grid;
	grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
	margin-top: 28px;
}

.tdn-doc-split.is-reverse {
	grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
}

.tdn-doc-split.is-reverse .tdn-doc-split-media {
	order: 2;
}

.tdn-doc-split.is-reverse .tdn-doc-split-content {
	order: 1;
}

.tdn-doc-split-media,
.tdn-doc-split-content {
	min-width: 0;
}

.tdn-doc-split-media .gallery,
.tdn-doc-split-media .tdn-doc-image,
.tdn-doc-split-media figure,
.tdn-doc-split-media .wp-caption {
	width: 100%;
	max-width: 470px !important;
	margin: 0 auto !important;
}

.tdn-doc-split-media img {
	display: block;
	width: 100%;
	margin: 0 auto !important;
	object-fit: contain;
}

.tdn-doc-split-content > :first-child {
	margin-top: 0;
}

.tdn-doc-split-content > :last-child {
	margin-bottom: 0;
}

/* =========================================================
   VIDEO
========================================================= */

.tdn-doc-video-split {
	grid-template-columns: 300px minmax(0, 1fr);
	margin-top: clamp(34px, 5vw, 56px);
	padding-top: clamp(28px, 4vw, 42px);
	border-top: 1px solid var(--tdn-border);
}

.tdn-doc-video-short {
	position: relative;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 9 / 16;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: #111;
	box-shadow: var(--tdn-shadow-soft);
}

.tdn-doc-video-short iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.tdn-doc-video-split .fluid-width-video-wrapper {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
}

/* =========================================================
   PROSE
========================================================= */

.tdn-doc-prose {
	width: 100%;
	max-width: var(--tdn-prose-width);
	margin-inline: auto;
	color: var(--tdn-text);
	font-size: var(--tdn-prose-size);
	line-height: var(--tdn-prose-leading);
	letter-spacing: 0.006em;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.tdn-doc-prose > :first-child {
	margin-top: 0;
}

.tdn-doc-prose > :last-child {
	margin-bottom: 0;
}

.tdn-doc-prose p {
	margin: 0 0 1.25rem;
}

.tdn-doc-prose :where(h2, h3, h4) {
	max-width: 24ch;
	text-wrap: balance;
}

.tdn-doc-prose li {
	margin: 0.42rem 0;
	line-height: 1.82;
}

.tdn-doc-prose li::marker {
	color: var(--tdn-accent-dark);
	font-weight: 700;
}

.tdn-doc-prose code {
	padding: 0.12em 0.34em;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-surface-soft);
}

.tdn-doc-prose pre {
	max-width: 100%;
	margin: 1.75rem 0;
	padding: 18px;
	overflow: auto;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: #1f2823;
	color: #eef2ef;
	line-height: 1.65;
}

/* =========================================================
   FIGURE NUMBERING
========================================================= */

.tdn-content.has-figure-numbering {
	counter-reset: tdn-figure;
}

.tdn-content.has-figure-numbering figure:has(figcaption),
.tdn-content.has-figure-numbering .wp-caption:has(.wp-caption-text) {
	counter-increment: tdn-figure;
}

.tdn-content.has-figure-numbering figcaption::before,
.tdn-content.has-figure-numbering .wp-caption-text::before {
	content: "Hình " counter(tdn-figure) " — ";
	color: var(--tdn-heading);
	font-weight: 700;
}

/* =========================================================
   READING PROGRESS / HEADING LINK
========================================================= */

.tdn-doc-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: var(--tdn-reading-progress, 0%);
	height: 2px;
	background: var(--tdn-accent);
	pointer-events: none;
}

.tdn-doc-heading-link {
	position: absolute;
	top: 2px;
	right: 0;
	display: inline-grid;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--tdn-radius-xs);
	background: transparent;
	color: var(--tdn-muted);
	font: inherit;
	font-size: 16px;
	cursor: pointer;
	opacity: 0;
	place-items: center;
}

.tdn-content :where(h2, h3):hover .tdn-doc-heading-link,
.single-post .entry-content :where(h2, h3):hover .tdn-doc-heading-link,
.single-product-page #tab-description :where(h2, h3):hover .tdn-doc-heading-link,
.tdn-doc-heading-link:focus-visible {
	opacity: 1;
}

.tdn-doc-heading-link:hover {
	border-color: var(--tdn-border);
	background: var(--tdn-accent-soft);
	color: var(--tdn-accent-dark);
}

/* =========================================================
   TOC
   Technical index panel with a distinct section wrapper.
========================================================= */

.tdn-toc {
	--tdn-toc-progress: 0%;
	margin: 34px 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--tdn-border);
	border-top: 3px solid var(--tdn-accent);
	border-radius: var(--tdn-radius);
	background: var(--tdn-surface);
	color: var(--tdn-text);
	box-shadow: var(--tdn-shadow-soft);
}

.tdn-toc__details {
	overflow: hidden;
	border: 0;
	background: transparent;
}

.tdn-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	gap: 18px;
	padding: 15px 18px;
	background: var(--tdn-surface-soft);
	cursor: pointer;
	list-style: none;
	transition: background-color 0.18s ease;
}

.tdn-toc__summary:hover {
	background: var(--tdn-accent-pale);
}

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

.tdn-toc__summary-main {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 13px;
}

/*
 * Không dùng pseudo text "CHỈ MỤC" nữa.
 * Nội dung tiêu đề lấy trực tiếp từ markup PHP để tránh lặp.
 */
.tdn-toc__summary-main::before {
	display: none;
	content: none;
}

.tdn-toc__badge {
	display: inline-grid;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid var(--tdn-border-strong);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
	color: var(--tdn-accent-dark);
	place-items: center;
}

.tdn-toc__badge svg {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor;
}

.tdn-toc__heading {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.tdn-toc__summary-label {
	display: block;
	color: var(--tdn-accent);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.tdn-toc__title {
	display: block;
	overflow: hidden;
	color: var(--tdn-heading);
	font-size: 18px;
	font-weight: 750;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tdn-toc__chevron {
	position: relative;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-surface);
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease;
}

.tdn-toc__summary:hover .tdn-toc__chevron {
	border-color: var(--tdn-accent-light);
	background: var(--tdn-accent-soft);
}

.tdn-toc__chevron::before,
.tdn-toc__chevron::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--tdn-accent);
	transform: translate(-50%, -50%);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.tdn-toc__chevron::before {
	width: 12px;
	height: 1.5px;
}

.tdn-toc__chevron::after {
	width: 1.5px;
	height: 12px;
}

.tdn-toc__details[open] .tdn-toc__chevron::after {
	opacity: 0;
	transform: translate(-50%, -50%) scaleY(0);
}

.tdn-toc__body {
	border-top: 1px solid var(--tdn-border);
	background: var(--tdn-surface);
}

.tdn-toc__progress {
	display: grid;
	grid-template-columns: auto minmax(120px, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	background: var(--tdn-surface-soft);
}

.tdn-toc__progress-label {
	color: var(--tdn-muted);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.4;
}

.tdn-toc__progress-track {
	display: block;
	overflow: hidden;
	height: 3px;
	border-radius: 999px;
	background: var(--tdn-border);
}

.tdn-toc__progress-bar {
	display: block;
	width: var(--tdn-toc-progress);
	height: 100%;
	border-radius: inherit;
	background: var(--tdn-accent);
	transition: width 0.12s linear;
}

.tdn-toc__progress-value {
	min-width: 36px;
	color: var(--tdn-accent-dark);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 750;
	line-height: 1;
	text-align: right;
}

.tdn-toc__description {
	display: none;
}

.tdn-toc__list {
	margin: 0;
	padding: 12px 18px 18px 22px;
	border-top: 1px solid var(--tdn-border);
	list-style: none;
	counter-reset: tdn-toc-item;
}

.tdn-toc__item {
	position: relative;
	margin: 0;
	counter-increment: tdn-toc-item;
}

.tdn-toc__item + .tdn-toc__item {
	border-top: 1px solid rgba(215, 221, 217, 0.72);
}

.tdn-toc__item::before {
	display: none;
	content: none;
}

.tdn-toc__item::after {
	display: none;
	content: none;
}

.tdn-toc__link {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 12px 10px 12px 0;
	color: var(--tdn-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.58;
	text-decoration: none;
	transition:
		padding-left 0.18s ease,
		color 0.18s ease,
		background-color 0.18s ease;
}

.tdn-toc__number {
	display: inline-grid;
	width: 48px;
	height: 34px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-surface-soft);
	color: var(--tdn-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	place-items: center;
}

.tdn-toc__label {
	min-width: 0;
}

.tdn-toc__item.is-active .tdn-toc__number,
.tdn-toc__link[aria-current="location"] .tdn-toc__number {
	border-color: var(--tdn-accent);
	background: var(--tdn-accent-soft);
	color: var(--tdn-accent-dark);
	font-size: 13px;
	font-weight: 900;
}


.tdn-toc__link:hover {
	padding-left: 6px;
	color: var(--tdn-accent-dark);
	text-decoration: none;
}



.tdn-toc__item.is-active::after {
	width: 3px;
	background: var(--tdn-accent);
}

.tdn-toc__item.is-active .tdn-toc__link,
.tdn-toc__link[aria-current="location"] {
	color: var(--tdn-accent-dark);
	font-weight: 750;
}

.tdn-toc__item.is-read:not(.is-active) .tdn-toc__link {
	color: #7c8580;
}

@media (max-width: 767px) {
	.tdn-toc {
		margin: 28px 0;
	}

	.tdn-toc__summary {
		min-height: 68px;
		gap: 12px;
		padding: 12px 14px;
	}

	.tdn-toc__badge {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}

	.tdn-toc__badge svg {
		width: 20px;
		height: 20px;
	}

	.tdn-toc__summary-label {
		font-size: 9px;
	}

	.tdn-toc__title {
		font-size: 16px;
	}

	.tdn-toc__progress {
		grid-template-columns: auto 1fr auto;
		gap: 9px;
		padding: 12px 14px;
	}

	.tdn-toc__list {
		padding: 8px 14px 14px;
	}




	.tdn-toc__link {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 11px;
	}

	.tdn-toc__number {
		width: 42px;
		height: 32px;
	}

	.tdn-toc__link {
		padding: 11px 8px 11px 0;
		font-size: 14px;
	}
}

/* =========================================================
   LIGHTBOX
   Responsive, iOS-safe and backdrop-click aware.
========================================================= */

.tdn-doc-lightbox {
	--tdn-lightbox-ink: #eef2ef;
	--tdn-lightbox-muted: #b9c3bd;
	--tdn-lightbox-line: rgba(220, 230, 224, 0.24);
	--tdn-lightbox-panel: #1f2a24;
	--tdn-lightbox-panel-soft: #29362f;
	--tdn-lightbox-accent: #789082;
	--tdn-lightbox-toolbar-height: 58px;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 100svh;
	overflow: hidden;
	grid-template-rows: auto minmax(0, 1fr);
	background:
		linear-gradient(rgba(17, 23, 20, 0.96), rgba(17, 23, 20, 0.96)),
		repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent 31px,
			rgba(255, 255, 255, 0.018) 32px
		);
	color: var(--tdn-lightbox-ink);
	overscroll-behavior: contain;
	touch-action: none;
}

.tdn-doc-lightbox.is-open {
	display: grid;
}

.tdn-doc-lightbox__toolbar {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	min-height: var(--tdn-lightbox-toolbar-height);
	gap: 14px;
	padding:
		max(10px, env(safe-area-inset-top))
		max(16px, env(safe-area-inset-right))
		10px
		max(20px, env(safe-area-inset-left));
	border-bottom: 1px solid var(--tdn-lightbox-line);
	background: var(--tdn-lightbox-panel);
}

.tdn-doc-lightbox__identity {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1 1 auto;
	gap: 12px;
	overflow: hidden;
}

.tdn-doc-lightbox__index {
	flex: 0 0 auto;
	color: var(--tdn-lightbox-accent);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tdn-doc-lightbox__title {
	display: block;
	min-width: 0;
	overflow: hidden;
	color: var(--tdn-lightbox-ink);
	font-size: 14px;
	font-weight: 680;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tdn-doc-lightbox-inner {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding:
		clamp(14px, 3vw, 34px)
		max(clamp(14px, 3vw, 34px), env(safe-area-inset-right))
		max(clamp(14px, 3vw, 34px), env(safe-area-inset-bottom))
		max(clamp(14px, 3vw, 34px), env(safe-area-inset-left));
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-x pan-y;
}

.tdn-doc-lightbox-image {
	display: block;
	width: auto;
	max-width: min(1180px, calc(100vw - 36px));
	height: auto;
	max-height: calc(100dvh - var(--tdn-lightbox-toolbar-height) - 98px);
	flex: 0 1 auto;
	margin: 0;
	border: 1px solid var(--tdn-lightbox-line);
	border-radius: var(--tdn-radius-xs);
	background: #111;
	box-shadow: 0 18px 56px rgba(0, 0, 0, 0.34);
	object-fit: contain;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}

.tdn-doc-lightbox-caption {
	width: min(880px, calc(100vw - 36px));
	flex: 0 0 auto;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--tdn-lightbox-line);
	color: var(--tdn-lightbox-muted);
	font-size: 13px;
	line-height: 1.58;
	text-align: center;
	overflow-wrap: anywhere;
}

.tdn-doc-lightbox-caption[hidden] {
	display: none !important;
}

.tdn-doc-lightbox-close {
	position: relative;
	z-index: 4;
	display: inline-grid;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	padding: 0;
	border: 1px solid var(--tdn-lightbox-line);
	border-radius: var(--tdn-radius-xs);
	background: rgba(255, 255, 255, 0.04);
	color: var(--tdn-lightbox-ink);
	font-size: 0;
	cursor: pointer;
	place-items: center;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.tdn-doc-lightbox-close::before,
.tdn-doc-lightbox-close::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

.tdn-doc-lightbox-close::before {
	transform: rotate(45deg);
}

.tdn-doc-lightbox-close::after {
	transform: rotate(-45deg);
}

.tdn-doc-lightbox-close:hover,
.tdn-doc-lightbox-close:focus-visible {
	border-color: var(--tdn-lightbox-accent);
	background: var(--tdn-lightbox-panel-soft);
}

.tdn-doc-lightbox-trigger {
	cursor: zoom-in;
}

html.tdn-lightbox-open,
body.tdn-lightbox-open {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* Desktop pointer devices: clicking the dark stage closes the viewer. */
@media (hover: hover) and (pointer: fine) {
	.tdn-doc-lightbox-inner {
		cursor: zoom-out;
	}

	.tdn-doc-lightbox-image,
	.tdn-doc-lightbox-caption {
		cursor: default;
	}
}

@media (max-width: 420px) {
	.tdn-doc-lightbox__title {
		max-width: calc(100vw - 78px);
	}

	.tdn-doc-lightbox-image {
		max-height: calc(100dvh - var(--tdn-lightbox-toolbar-height) - 74px);
	}

	.tdn-doc-lightbox-caption {
		max-height: 54px;
	}
}

@media (orientation: landscape) and (max-height: 560px) {
	.tdn-doc-lightbox {
		--tdn-lightbox-toolbar-height: 48px;
	}

	.tdn-doc-lightbox__toolbar {
		min-height: 48px;
		padding-top: max(5px, env(safe-area-inset-top));
		padding-bottom: 5px;
	}

	.tdn-doc-lightbox-close {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
	}

	.tdn-doc-lightbox-inner {
		gap: 6px;
		padding-top: 6px;
		padding-bottom: max(6px, env(safe-area-inset-bottom));
	}

	.tdn-doc-lightbox-image {
		max-height: calc(100dvh - 58px);
	}

	.tdn-doc-lightbox-caption {
		display: none;
	}
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.tdn-content :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
.single-post .entry-content :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
.single-product-page #tab-description :where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
.tdn-toc :where(a, button, summary):focus-visible,
.tdn-doc-lightbox :where(button):focus-visible {
	outline: 2px solid var(--tdn-accent);
	outline-offset: 3px;
	box-shadow: var(--tdn-focus-ring);
}

.tdn-content :where(h2, h3, h4)[id],
.single-post .entry-content :where(h2, h3, h4)[id],
.single-product-page #tab-description :where(h2, h3, h4)[id] {
	scroll-margin-top: var(--tdn-scroll-offset);
}

html.tdn-smooth-scroll {
	scroll-behavior: smooth;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
	.tdn-doc-summary,
	.tdn-doc-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tdn-doc-store-layout {
		grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
	}

	.tdn-doc-video-split {
		grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
	}
}

@media (max-width: 820px) {
	:root {
		--tdn-prose-size: 1rem;
		--tdn-prose-leading: 1.82;
		--tdn-scroll-offset: 92px;
	}

	.tdn-doc-split,
	.tdn-doc-split.is-reverse,
	.tdn-doc-video-split {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.tdn-doc-split.is-reverse .tdn-doc-split-media,
	.tdn-doc-split.is-reverse .tdn-doc-split-content {
		order: initial;
	}

	.tdn-doc-summary,
	.tdn-doc-cards,
	.tdn-doc-checklist,
	.tdn-doc-product-list,
	.tdn-doc-store-layout,
	.tdn-doc-comparison,
	.tdn-doc-myth-reality {
		grid-template-columns: 1fr;
	}

	.tdn-doc-summary-item {
		border-right: 0;
		border-bottom: 1px solid var(--tdn-border);
	}

	.tdn-doc-summary-item:last-child {
		border-bottom: 0;
	}

	.tdn-doc-section,
	.tdn-doc-store,
	.tdn-doc-bespoke,
	.tdn-doc-conclusion {
		padding: 24px 19px;
	}

	.tdn-process .tdn-doc-section {
		padding-left: 28px;
	}

	.tdn-process .tdn-doc-section::before,
	.tdn-process .tdn-doc-section > h2:first-child::before {
		display: none;
	}

	.tdn-doc-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.tdn-doc-button,
	.tdn-doc-hotline a {
		width: 100%;
	}

	.tdn-content h2,
	.single-post .entry-content h2,
	.single-product-page #tab-description h2,
	.tdn-content h3,
	.single-post .entry-content h3,
	.single-product-page #tab-description h3 {
		padding-right: 0;
	}

	.tdn-doc-heading-link {
		display: none;
	}
}

@media (max-width: 767px) {
	.tdn-toc__summary-main::before {
		display: none;
	}

	.tdn-toc__list {
		padding-left: 14px;
	}

	.tdn-doc-lightbox {
		--tdn-lightbox-toolbar-height: 56px;
	}

	.tdn-doc-lightbox__toolbar {
		min-height: 52px;
		padding: 8px 10px 8px 14px;
	}

	.tdn-doc-lightbox__index {
		display: none;
	}

	.tdn-doc-lightbox__title {
		font-size: 12px;
	}

	.tdn-doc-lightbox-inner {
		padding: 12px;
	}

	.tdn-doc-lightbox-image {
		max-width: 94vw;
		max-height: calc(100vh - 132px);
	}

	.tdn-doc-lightbox-caption {
		width: 94vw;
		margin-top: 12px;
		padding-top: 10px;
		font-size: 12px;
	}

	.tdn-content .tdn-product-comparison-table,
	.single-product-page #tab-description .tdn-product-comparison-table {
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.tdn-content .tdn-product-comparison-table table,
	.single-post .entry-content .tdn-product-comparison-table table,
	.single-product-page #tab-description .tdn-product-comparison-table table {
		display: block;
		width: 100%;
		min-width: 0;
		border: 0;
	}

		/* Fix caption bị bó chiều rộng khi table chuyển sang display:block trên mobile */
	.tdn-content .tdn-product-comparison-table caption,
	.single-post .entry-content .tdn-product-comparison-table caption,
	.single-product-page #tab-description .tdn-product-comparison-table caption {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 13px 16px;
		box-sizing: border-box;
		color: var(--tdn-muted);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.55;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: normal;
		caption-side: initial;
	}

	.tdn-content .tdn-product-comparison-table thead,
	.single-product-page #tab-description .tdn-product-comparison-table thead {
		display: none;
	}

	.tdn-content .tdn-product-comparison-table tbody,
	.tdn-content .tdn-product-comparison-table tr,
	.single-product-page #tab-description .tdn-product-comparison-table tbody,
	.single-product-page #tab-description .tdn-product-comparison-table tr {
		display: block;
	}

	.tdn-content .tdn-product-comparison-table tr,
	.single-product-page #tab-description .tdn-product-comparison-table tr {
		margin-bottom: 14px;
		border: 1px solid var(--tdn-border);
		border-radius: var(--tdn-radius-sm);
		background: var(--tdn-surface);
	}

	.tdn-content .tdn-product-comparison-table td,
	.single-product-page #tab-description .tdn-product-comparison-table td {
		display: block;
		width: 100%;
		border: 0;
		border-bottom: 1px solid var(--tdn-border);
	}

	.tdn-content .tdn-product-comparison-table td:last-child,
	.single-product-page #tab-description .tdn-product-comparison-table td:last-child {
		border-bottom: 0;
	}

	.tdn-content .tdn-product-comparison-table td::before,
	.single-product-page #tab-description .tdn-product-comparison-table td::before {
		display: block;
		margin-bottom: 5px;
		color: var(--tdn-accent-dark);
		font-size: 0.78rem;
		font-weight: 700;
		text-transform: uppercase;
		content: attr(data-label);
	}
}


/* =========================================================
   RESPONSIVE HARDENING
   Prevent component overflow in narrow WordPress/WooCommerce layouts.
========================================================= */

.tdn-content,
.single-post .entry-content,
.single-product-page #tab-description,
.tdn-doc-section,
.tdn-doc-intro,
.tdn-doc-store,
.tdn-doc-bespoke,
.tdn-doc-conclusion,
.tdn-doc-split,
.tdn-doc-cards,
.tdn-doc-comparison,
.tdn-doc-myth-reality {
	min-width: 0;
	max-width: 100%;
}

.tdn-content :where(p, li, td, th, figcaption, .wp-caption-text),
.single-post .entry-content :where(p, li, td, th, figcaption, .wp-caption-text),
.single-product-page #tab-description :where(p, li, td, th, figcaption, .wp-caption-text) {
	overflow-wrap: anywhere;
	word-break: normal;
}

.tdn-content :where(iframe, video, embed, object),
.single-post .entry-content :where(iframe, video, embed, object),
.single-product-page #tab-description :where(iframe, video, embed, object) {
	max-width: 100%;
}

@media (max-width: 600px) {
	.tdn-content,
	.single-post .entry-content,
	.single-product-page #tab-description {
		font-size: 16px;
		line-height: 1.72;
	}

	.tdn-doc-intro,
	.tdn-doc-section,
	.tdn-doc-store,
	.tdn-doc-bespoke,
	.tdn-doc-conclusion {
		margin: 24px 0;
		padding: 20px 15px;
	}

	.tdn-content h2,
	.single-post .entry-content h2,
	.single-product-page #tab-description h2 {
		margin-bottom: 20px;
		padding-bottom: 10px;
		font-size: clamp(23px, 7vw, 29px);
	}

	.tdn-content h3,
	.single-post .entry-content h3,
	.single-product-page #tab-description h3 {
		font-size: 20px;
	}

	.tdn-doc-card,
	.tdn-doc-comparison > div,
	.tdn-doc-myth-reality > div,
	.tdn-doc-note,
	.tdn-doc-insight,
	.tdn-doc-decision,
	.tdn-doc-warning,
	.tdn-doc-experience,
	.tdn-doc-linkbox {
		padding: 17px 15px;
	}

	.tdn-doc-insight {
		padding-left: 48px;
	}

	.tdn-doc-insight::before {
		top: 17px;
		left: 14px;
	}

	.tdn-doc-checklist li {
		padding: 12px 10px 12px 39px;
	}

	.tdn-doc-checklist li::before {
		left: 10px;
	}

	.tdn-doc-decision-tree > li {
		padding: 17px 14px 17px 54px;
	}

	.tdn-doc-decision-tree > li::before {
		left: 13px;
	}

	.tdn-doc-table-wrap {
		max-width: 100%;
	}

	.tdn-doc-video-short {
		width: min(100%, 300px);
	}

	.tdn-doc-actions,
	.tdn-doc-hotline {
		width: 100%;
	}

	.tdn-doc-button,
	.tdn-doc-hotline a {
		white-space: normal;
		text-align: center;
	}

	.tdn-content figure,
	.tdn-content .wp-caption,
	.single-post .entry-content figure,
	.single-post .entry-content .wp-caption,
	.single-product-page #tab-description figure,
	.single-product-page #tab-description .wp-caption {
		width: 100%;
		padding: 5px;
	}

	.tdn-content figcaption,
	.tdn-content .wp-caption-text,
	.single-post .entry-content figcaption,
	.single-post .entry-content .wp-caption-text,
	.single-product-page #tab-description figcaption,
	.single-product-page #tab-description .wp-caption-text {
		font-size: 12px;
	}
}


@media (prefers-reduced-motion: reduce) {
	html.tdn-smooth-scroll {
		scroll-behavior: auto;
	}

	.tdn-content *,
	.tdn-content *::before,
	.tdn-content *::after,
	.single-post .entry-content *,
	.single-post .entry-content *::before,
	.single-post .entry-content *::after,
	.single-product-page #tab-description *,
	.single-product-page #tab-description *::before,
	.single-product-page #tab-description *::after,
	.tdn-toc *,
	.tdn-toc *::before,
	.tdn-toc *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* =========================================================
   PRINT
========================================================= */

@media print {
	.tdn-doc-actions,
	.tdn-doc-button,
	.tdn-doc-hotline,
	.tdn-doc-reading-progress,
	.tdn-doc-heading-link,
	.tdn-doc-lightbox,
	.tdn-toc__progress {
		display: none !important;
	}

	.tdn-content,
	.single-post .entry-content,
	.single-product-page #tab-description {
		color: #000 !important;
		font-size: 11pt;
		line-height: 1.55;
	}

	.tdn-content *,
	.single-post .entry-content *,
	.single-product-page #tab-description * {
		box-shadow: none !important;
		text-shadow: none !important;
	}

	.tdn-doc-intro,
	.tdn-doc-section,
	.tdn-doc-store,
	.tdn-doc-bespoke,
	.tdn-doc-conclusion,
	.tdn-doc-card,
	.tdn-doc-comparison > div,
	.tdn-doc-note,
	.tdn-doc-insight,
	.tdn-doc-decision,
	.tdn-doc-warning,
	.tdn-doc-experience,
	.tdn-doc-myth-reality > div {
		border-color: #bbb !important;
		background: #fff !important;
		color: #000 !important;
	}
}

/* =========================================================
   READING EXPERIENCE 2.2
   Adds hierarchy, semantic icons and low-image reading anchors.
========================================================= */

/* Keep long technical prose at a readable measure on wide screens. */
.single-post .entry-content > .tdn-content {
	width: min(100%, 960px);
	margin-inline: auto;
}

.tdn-content > p,
.tdn-doc-section > p,
.tdn-doc-prose > p {
	max-width: 76ch;
}

/* Quick Answer is mandatory for long authority articles. */
.tdn-doc-quick-answer {
	position: relative;
	margin: 0 0 30px;
	padding: 54px clamp(20px, 4vw, 32px) 24px;
	border: 1px solid var(--tdn-border-strong);
	border-left: 5px solid var(--tdn-accent);
	border-radius: var(--tdn-radius);
	background:
		linear-gradient(135deg, var(--tdn-accent-pale), var(--tdn-surface));
	box-shadow: var(--tdn-shadow-soft);
}

.tdn-doc-quick-answer::before {
	content: "Trả lời nhanh";
	position: absolute;
	top: 17px;
	left: clamp(20px, 4vw, 32px);
	padding-left: 27px;
	color: var(--tdn-accent-dark);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.12em;
	line-height: 1.35;
	text-transform: uppercase;
}

.tdn-doc-quick-answer::after {
	content: "?";
	position: absolute;
	top: 14px;
	left: clamp(20px, 4vw, 32px);
	display: inline-grid;
	width: 19px;
	height: 19px;
	border: 1px solid var(--tdn-accent);
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 850;
	place-items: center;
}

.tdn-doc-quick-answer > :last-child {
	margin-bottom: 0;
}

/* Avoid a double container when Quick Answer is authored inside a section. */
.tdn-doc-section > .tdn-doc-quick-answer {
	margin-inline: 0;
	border: 0;
	border-left: 3px solid var(--tdn-accent);
	border-radius: 0;
	box-shadow: none;
}

/*
 * Technical section markers are assigned by the framework JavaScript.
 * They create visual anchors without altering the heading text or outline.
 */
.tdn-content h2[data-tdn-section-number],
.single-post .entry-content h2[data-tdn-section-number],
.single-product-page #tab-description h2[data-tdn-section-number] {
	padding-left: 58px;
}

.tdn-content h2[data-tdn-section-number]::before,
.single-post .entry-content h2[data-tdn-section-number]::before,
.single-product-page #tab-description h2[data-tdn-section-number]::before {
	content: attr(data-tdn-section-number);
	position: absolute;
	top: 2px;
	left: 0;
	display: inline-grid;
	width: 38px;
	height: 32px;
	border: 1px solid var(--tdn-border-strong);
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-surface-soft);
	color: var(--tdn-accent-dark);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.08em;
	place-items: center;
}

.tdn-content h3[data-tdn-subheading],
.single-post .entry-content h3[data-tdn-subheading],
.single-product-page #tab-description h3[data-tdn-subheading] {
	padding-left: 20px;
}

.tdn-content h3[data-tdn-subheading]::before,
.single-post .entry-content h3[data-tdn-subheading]::before,
.single-product-page #tab-description h3[data-tdn-subheading]::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 10px;
	height: 2px;
	background: var(--tdn-accent);
}

/* Semantic callouts share geometry and use distinct, restrained icons. */
.tdn-doc-note,
.tdn-doc-insight,
.tdn-doc-decision,
.tdn-doc-warning,
.tdn-doc-experience,
.tdn-doc-linkbox,
.tdn-doc-definition,
.tdn-doc-evidence {
	position: relative;
	padding-left: 64px;
}

.tdn-doc-note::before,
.tdn-doc-insight::before,
.tdn-doc-decision::before,
.tdn-doc-warning::before,
.tdn-doc-experience::before,
.tdn-doc-linkbox::before,
.tdn-doc-definition::before,
.tdn-doc-evidence::before {
	position: absolute;
	top: 19px;
	left: 20px;
	display: inline-grid;
	width: 28px;
	height: 28px;
	border: 1px solid currentColor;
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-surface);
	font-family: inherit;
	font-size: 13px;
	font-style: normal;
	font-weight: 850;
	line-height: 1;
	place-items: center;
}

.tdn-doc-note::before {
	content: "i";
	color: var(--tdn-accent-dark);
}

.tdn-doc-insight::before {
	content: "◇";
	color: var(--tdn-accent-dark);
}

.tdn-doc-decision::before {
	content: "✓";
	color: var(--tdn-success);
}

.tdn-doc-warning::before {
	content: "!";
	color: var(--tdn-warning);
}

.tdn-doc-experience::before {
	content: "✦";
	color: var(--tdn-success);
}

.tdn-doc-linkbox::before {
	content: "↗";
	color: var(--tdn-accent-dark);
}

.tdn-doc-definition,
.tdn-doc-evidence {
	margin: 24px 0;
	padding-top: 20px;
	padding-right: 22px;
	padding-bottom: 20px;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
}

.tdn-doc-definition {
	border-left: 5px solid var(--tdn-accent-light);
	background: var(--tdn-accent-pale);
}

.tdn-doc-definition::before {
	content: "Aa";
	color: var(--tdn-accent-dark);
	font-size: 10px;
}

.tdn-doc-evidence {
	border-left: 5px solid var(--tdn-success);
	background: var(--tdn-success-soft);
}

.tdn-doc-evidence::before {
	content: "E";
	color: var(--tdn-success);
}

:where(
	.tdn-doc-note,
	.tdn-doc-insight,
	.tdn-doc-decision,
	.tdn-doc-warning,
	.tdn-doc-experience,
	.tdn-doc-linkbox,
	.tdn-doc-definition,
	.tdn-doc-evidence
) > :last-child {
	margin-bottom: 0;
}

/* Definition/specification structures for articles and product descriptions. */
.tdn-doc-spec-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 24px 0;
	overflow: hidden;
	border: 1px solid var(--tdn-border);
	border-radius: var(--tdn-radius-sm);
	background: var(--tdn-surface);
}

.tdn-doc-spec-grid > div {
	min-width: 0;
	padding: 16px 18px;
	border-right: 1px solid var(--tdn-border);
	border-bottom: 1px solid var(--tdn-border);
}

.tdn-doc-spec-grid > div:nth-child(2n) {
	border-right: 0;
}

.tdn-doc-spec-grid > div:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.tdn-doc-spec-grid :where(dt, strong) {
	display: block;
	margin-bottom: 5px;
	color: var(--tdn-accent-dark);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.tdn-doc-spec-grid :where(dd, p) {
	margin: 0;
	color: var(--tdn-text);
	font-size: 14px;
	line-height: 1.65;
}

.tdn-doc-key-points {
	margin: 24px 0;
	padding: 0;
	border-top: 1px solid var(--tdn-border);
	list-style: none;
	counter-reset: tdn-key-point;
}

.tdn-doc-key-points > li {
	position: relative;
	margin: 0;
	padding: 15px 12px 15px 54px;
	border-bottom: 1px solid var(--tdn-border);
	counter-increment: tdn-key-point;
}

.tdn-doc-key-points > li::before {
	content: counter(tdn-key-point, decimal-leading-zero);
	position: absolute;
	top: 14px;
	left: 10px;
	display: inline-grid;
	width: 30px;
	height: 25px;
	border: 1px solid var(--tdn-border-strong);
	border-radius: var(--tdn-radius-xs);
	background: var(--tdn-surface-soft);
	color: var(--tdn-accent-dark);
	font-size: 10px;
	font-weight: 850;
	place-items: center;
}

/*
 * Product knowledge sections correspond to the LCAS product order:
 * specification → usage → material → craftsmanship → evidence → FAQ.
 * The classes only present existing content; they do not manufacture claims.
 */
.tdn-product-authority :where(
	.tdn-product-specification,
	.tdn-product-usage,
	.tdn-product-material,
	.tdn-product-craftsmanship,
	.tdn-product-evidence,
	.tdn-product-related-knowledge
) {
	margin: 30px 0;
	padding: clamp(22px, 4vw, 34px);
	border: 1px solid var(--tdn-border);
	border-top: 3px solid var(--tdn-border-strong);
	border-radius: var(--tdn-radius);
	background: var(--tdn-surface);
	box-shadow: var(--tdn-shadow-soft);
}

.tdn-product-authority :where(
	.tdn-product-material,
	.tdn-product-craftsmanship
) {
	border-top-color: var(--tdn-accent);
	background: var(--tdn-accent-pale);
}

.tdn-product-authority .tdn-product-evidence {
	border-top-color: var(--tdn-success);
	background: var(--tdn-success-soft);
}

.tdn-content :where(ul, ol) li::marker,
.single-post .entry-content :where(ul, ol) li::marker,
.single-product-page #tab-description :where(ul, ol) li::marker {
	color: var(--tdn-accent);
	font-weight: 800;
}

.tdn-doc-section,
.tdn-doc-card,
.tdn-doc-comparison > div,
.tdn-doc-myth-reality > div {
	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		box-shadow 180ms ease;
}

.tdn-doc-section:hover {
	border-color: var(--tdn-border-strong);
	box-shadow: var(--tdn-shadow);
}

@media (max-width: 820px) {
	.tdn-content h2[data-tdn-section-number],
	.single-post .entry-content h2[data-tdn-section-number],
	.single-product-page #tab-description h2[data-tdn-section-number] {
		padding-left: 50px;
	}

	.tdn-content h2[data-tdn-section-number]::before,
	.single-post .entry-content h2[data-tdn-section-number]::before,
	.single-product-page #tab-description h2[data-tdn-section-number]::before {
		width: 34px;
		height: 29px;
	}
}

@media (max-width: 600px) {
	.tdn-doc-quick-answer {
		padding: 51px 15px 19px;
	}

	.tdn-doc-quick-answer::before,
	.tdn-doc-quick-answer::after {
		left: 15px;
	}

	.tdn-doc-note,
	.tdn-doc-insight,
	.tdn-doc-decision,
	.tdn-doc-warning,
	.tdn-doc-experience,
	.tdn-doc-linkbox,
	.tdn-doc-definition,
	.tdn-doc-evidence {
		padding: 52px 15px 17px;
	}

	.tdn-doc-note::before,
	.tdn-doc-insight::before,
	.tdn-doc-decision::before,
	.tdn-doc-warning::before,
	.tdn-doc-experience::before,
	.tdn-doc-linkbox::before,
	.tdn-doc-definition::before,
	.tdn-doc-evidence::before {
		top: 15px;
		left: 15px;
	}

	.tdn-doc-spec-grid {
		grid-template-columns: 1fr;
	}

	.tdn-doc-spec-grid > div,
	.tdn-doc-spec-grid > div:nth-child(2n),
	.tdn-doc-spec-grid > div:nth-last-child(-n + 2) {
		border-right: 0;
		border-bottom: 1px solid var(--tdn-border);
	}

	.tdn-doc-spec-grid > div:last-child {
		border-bottom: 0;
	}
}