/* =============================================================================
 * SIDEBAR NGỮ CẢNH — bài viết & archive (inc/sidebar.php, template-parts/posts/layout-right-sidebar.php)
 *                    + trang sản phẩm (woocommerce/content-single-product.php → .ddg-product-layout)
 * Desktop ≥1024px: 2 cột (nội dung co giãn + sidebar 340px), khối cuối dính.
 * Dưới 1024px: sidebar xếp dưới nội dung, ẩn khối trùng với nội dung (CTA/bài liên quan/mục lục đã có trong bài).
 * ========================================================================== */

/* ---------- Lưới layout trang sản phẩm ---------- */
.ddg-product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ddg-space-8, 32px);
}

.ddg-product-layout__main {
	min-width: 0;
}

/* Neo mục lục "Trong trang này" không bị header dính che. */
#ddg-pricing-title,
#san-pham-lien-quan,
#ddg-product-posts-title,
.ddg-product-content :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--ddg-header-sticky-h, 80px) + 16px);
}

@media (min-width: 1024px) {
	.ddg-product-layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		column-gap: var(--ddg-space-12, 48px);
		align-items: stretch;
		padding-top: var(--ddg-space-4, 16px);
	}

	.ddg-product-layout__aside {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.ddg-product-layout__aside > .ddg-sb {
		flex: 1 1 auto;
	}

	/* Mục lục đã có ở sidebar → ẩn mục lục trong mô tả sản phẩm. */
	.ddg-has-sidebar-toc .ddg-product-content .ddg-toc {
		display: none;
	}
}

@media (min-width: 1280px) {
	.ddg-product-layout {
		grid-template-columns: minmax(0, 1fr) 360px;
	}
}

/* ---------- Lưới layout ---------- */
.ddg-blog-layout {
	align-items: stretch;
}

.ddg-blog-layout > .ddg-blog-layout__main,
.ddg-blog-layout > .ddg-blog-layout__aside {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 1024px) {
	.ddg-blog-layout > .ddg-blog-layout__main {
		flex: 1 1 0;
		max-width: calc(100% - 340px);
		min-width: 0;
	}

	.ddg-blog-layout > .ddg-blog-layout__aside {
		flex: 0 0 340px;
		max-width: 340px;
		display: flex;
		flex-direction: column;
	}

	.ddg-blog-layout__aside > .ddg-sidebar-area,
	.ddg-blog-layout__aside .ddg-sb {
		flex: 1 1 auto;
		height: 100%;
	}
}

@media (min-width: 1280px) {
	.ddg-blog-layout > .ddg-blog-layout__main {
		max-width: calc(100% - 360px);
	}

	.ddg-blog-layout > .ddg-blog-layout__aside {
		flex-basis: 360px;
		max-width: 360px;
	}
}

/* ---------- Khung sidebar ---------- */
.ddg-sb {
	display: flex;
	flex-direction: column;
	gap: var(--ddg-space-6, 24px);
	font-family: var(--ddg-font-sans);
	color: var(--ddg-ink-700, #3f3b51);
}

.ddg-sb__static {
	display: flex;
	flex-direction: column;
	gap: var(--ddg-space-6, 24px);
}

.ddg-sb__block {
	box-sizing: border-box;
	padding: 20px;
	background: var(--ddg-surface, #fff);
	border: 1px solid var(--ddg-line, #dfe3ea);
	border-radius: var(--ddg-radius-lg, 16px);
}

.ddg-sb .ddg-sb__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	font-family: var(--ddg-font-sans);
	font-size: var(--ddg-fs-12, 12px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ddg-ink-700, #3f3b51);
}

.ddg-sb .ddg-sb__title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ddg-line, #dfe3ea);
}

.ddg-sb ul,
.ddg-sb ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ddg-sb li {
	margin: 0;
}

.ddg-sb a {
	text-decoration: none;
}

.ddg-sb__more {
	margin: 12px 0 0;
	font-size: var(--ddg-fs-14, 14px);
}

.ddg-sb__more-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--ddg-brand-600, #3666a3);
}

.ddg-sb__more-link:hover {
	color: var(--ddg-brand-900, #1f1a33);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- CTA ---------- */
.ddg-sb__block--cta {
	background: linear-gradient(160deg, var(--ddg-brand-900, #1f1a33) 0%, var(--ddg-brand-700, #352d52) 100%);
	border-color: transparent;
	color: var(--ddg-on-dark, #d5d2e0);
	box-shadow: var(--ddg-shadow-2);
}

.ddg-sb__cta-title {
	margin: 0 0 8px;
	font-family: var(--ddg-font-display);
	font-size: var(--ddg-fs-24, 22px);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-wrap: balance;
}

.ddg-sb__cta-text {
	margin: 0 0 16px;
	font-size: var(--ddg-fs-14, 14px);
	line-height: 1.6;
	color: var(--ddg-on-dark, #d5d2e0);
}

.ddg-sb__cta-actions {
	display: grid;
	gap: 10px;
}

.ddg-sb__cta-actions .ddg-btn {
	justify-content: center;
	margin: 0;
}

.ddg-sb__block--cta .ddg-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
	background: transparent;
}

.ddg-sb__block--cta .ddg-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

/* CTA sản phẩm: mẫu đang xem */
.ddg-sb__product {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 12px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--ddg-radius-md, 10px);
	background: rgba(255, 255, 255, 0.06);
}

.ddg-sb__product-thumb {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: var(--ddg-radius-sm, 6px);
	object-fit: cover;
}

.ddg-sb__product-name {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ddg-sb__product-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ddg-champagne-300, #d8c59e);
}

/* ---------- Quy trình thi công ---------- */
.ddg-sb__steps {
	display: grid;
	gap: 0;
	counter-reset: none;
}

.ddg-sb__step {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 12px;
	padding-bottom: 14px;
}

.ddg-sb__step:last-child {
	padding-bottom: 0;
}

/* Đường nối giữa các bước */
.ddg-sb__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 34px;
	bottom: 2px;
	left: 15px;
	width: 2px;
	border-radius: 1px;
	background: var(--ddg-line, #dfe3ea);
}

.ddg-sb__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ddg-brand-100, #e9eff8);
	font-size: 14px;
	font-weight: 700;
	color: var(--ddg-brand-700, #352d52);
}

.ddg-sb__step-body {
	display: grid;
	gap: 2px;
	padding-top: 5px;
}

.ddg-sb__step-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ddg-ink-900, #1a1726);
}

.ddg-sb__step-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ddg-ink-500, #5f5b70);
}

/* ---------- Danh sách có ảnh (sản phẩm / bài viết) ---------- */
.ddg-sb__list {
	display: grid;
	gap: 4px;
}

.ddg-sb__link {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	margin: 0 -8px;
	padding: 8px;
	border-radius: var(--ddg-radius-md, 10px);
	color: var(--ddg-ink-900, #1a1726);
	transition: background-color var(--ddg-dur-1, 150ms) var(--ddg-ease, ease);
}

.ddg-sb__link:hover {
	background: var(--ddg-surface-2, #f6f7fa);
}

.ddg-sb__media {
	display: block;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: var(--ddg-radius-sm, 6px);
	background: var(--ddg-surface-glass, #edf1f6);
}

.ddg-sb__thumb {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1; /* ảnh cũ không có size thumbnail vuông (vd 280×188) vẫn lấp đầy khung vuông trên mobile */
	object-fit: cover;
}

.ddg-sb__thumb--empty {
	background: linear-gradient(135deg, var(--ddg-surface-glass, #edf1f6), var(--ddg-brand-100, #e9eff8));
}

.ddg-sb__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.ddg-sb__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ddg-sb__link:hover .ddg-sb__name {
	color: var(--ddg-brand-600, #3666a3);
}

.ddg-sb__meta {
	font-size: 13px;
	color: var(--ddg-ink-500, #5f5b70);
}

.ddg-sb__list--product .ddg-sb__meta {
	justify-self: start;
	padding: 2px 8px;
	border-radius: var(--ddg-radius-pill, 999px);
	background: var(--ddg-brand-100, #e9eff8);
	color: var(--ddg-brand-700, #352d52);
	font-weight: 600;
}

/* ---------- Danh sách link (bảng giá) ---------- */
.ddg-sb__links {
	display: grid;
}

.ddg-sb__links li + li {
	border-top: 1px solid var(--ddg-line, #dfe3ea);
}

.ddg-sb__links a {
	position: relative;
	display: block;
	padding: 11px 0 11px 22px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ddg-ink-900, #1a1726);
}

.ddg-sb__links a::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 2px;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--ddg-brand-600, #3666a3);
	border-right: 2px solid var(--ddg-brand-600, #3666a3);
	transform: rotate(45deg);
}

.ddg-sb__links a:hover {
	color: var(--ddg-brand-600, #3666a3);
}

/* ---------- Danh sách term (chuyên mục / danh mục sản phẩm) ---------- */
.ddg-sb__terms {
	display: grid;
}

.ddg-sb__terms li + li {
	border-top: 1px solid var(--ddg-line, #dfe3ea);
}

.ddg-sb__terms a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 6px 0;
	font-size: 15px;
	color: var(--ddg-ink-900, #1a1726);
}

.ddg-sb__terms a:hover,
.ddg-sb__terms a[aria-current="page"] {
	color: var(--ddg-brand-600, #3666a3);
}

.ddg-sb__terms a[aria-current="page"] {
	font-weight: 700;
}

.ddg-sb__count {
	flex: 0 0 auto;
	min-width: 28px;
	padding: 1px 8px;
	border-radius: var(--ddg-radius-pill, 999px);
	background: var(--ddg-surface-2, #f6f7fa);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	text-align: center;
	color: var(--ddg-ink-500, #5f5b70);
}

/* ---------- Liên hệ ---------- */
.ddg-sb__contact {
	display: grid;
	gap: 12px;
}

.ddg-sb__contact li {
	display: grid;
	gap: 2px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ddg-ink-900, #1a1726);
}

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

.ddg-sb__contact-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -10px 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--ddg-brand-600, #3666a3);
}

.ddg-sb__contact-link:hover {
	color: var(--ddg-brand-900, #1f1a33);
}

.ddg-sb__contact-link .ddg-icon,
.ddg-sb__contact-link svg {
	display: none;
}

/* ---------- Khối dính: mục lục + liên hệ nhanh ---------- */
.ddg-sb__sticky {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ddg-sb__block--toc {
	padding: 16px 16px 12px;
}

.ddg-sb__toc {
	max-height: calc(100vh - var(--ddg-header-sticky-h, 80px) - 200px);
	margin: 0 -4px;
	padding: 0 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.ddg-sb__toc-item a {
	display: block;
	padding: 7px 0 7px 12px;
	border-left: 2px solid var(--ddg-line, #dfe3ea);
	font-size: 14px;
	line-height: 1.45;
	color: var(--ddg-ink-700, #3f3b51);
}

.ddg-sb__toc-item--h3 a {
	padding-left: 26px;
	font-size: 13.5px;
	color: var(--ddg-ink-500, #5f5b70);
}

.ddg-sb__toc-item a:hover {
	color: var(--ddg-brand-600, #3666a3);
}

.ddg-sb__toc-item a[aria-current="location"] {
	border-left-color: var(--ddg-brand-600, #3666a3);
	font-weight: 600;
	color: var(--ddg-brand-900, #1f1a33);
}

/* Mục cố định của trang sản phẩm (bảng giá, form, liên quan) — tách khỏi heading mô tả bằng vạch mảnh. */
.ddg-sb__toc-item--h2:not(.ddg-sb__toc-item--section) + .ddg-sb__toc-item--section,
.ddg-sb__toc-item--h3 + .ddg-sb__toc-item--section {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--ddg-line, #dfe3ea);
}

.ddg-sb__toc-item--section a {
	font-weight: 600;
	color: var(--ddg-ink-900, #1a1726);
}

.ddg-sb__block--quick {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
	gap: 8px;
	padding: 12px;
}

.ddg-sb__block--quick .ddg-btn .ddg-icon {
	--ddg-icon-size: 18px;
}

.ddg-sb__block--quick .ddg-btn {
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding-inline: 8px;
	white-space: nowrap;
}

.ddg-sb__block--quick .ddg-sb__quick-quote {
	grid-column: 1 / -1;
}

/* Nút Messenger chỉ icon (nhãn ẩn cho trình đọc màn hình) */
.ddg-sb__icon-btn.ddg-btn {
	--ddg-btn-bg: var(--ddg-surface, #fff);
	--ddg-btn-bg-hover: var(--ddg-surface-2, #f6f7fa);
	--ddg-btn-fg: var(--ddg-messenger, #0866ff);
	--ddg-btn-bd: var(--ddg-line, #dfe3ea);
	--ddg-btn-bd-hover: var(--ddg-messenger, #0866ff);
	width: 44px;
	padding: 0;
}

/* Trang sản phẩm: khối dính có 2 hàng nút → mục lục thấp hơn để cả khối luôn nằm trong màn hình. */
.ddg-sb--product .ddg-sb__toc {
	max-height: calc(100vh - var(--ddg-header-sticky-h, 80px) - 240px);
}

/* Dock liên hệ nổi (components.css) nhường chỗ khi đè lên sidebar — class do assets/js/sidebar.js bật/tắt. */
@media (min-width: 1024px) {
	.ddg-dock {
		transition: opacity var(--ddg-dur-2, 240ms) var(--ddg-ease, ease), visibility 0s linear 0s;
	}

	.ddg-dock.ddg-dock--yield {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--ddg-dur-2, 240ms) var(--ddg-ease, ease), visibility 0s linear var(--ddg-dur-2, 240ms);
	}
}

/* ---------- Desktop: sticky ---------- */
@media (min-width: 1024px) {
	.ddg-sb__sticky {
		position: sticky;
		top: calc(var(--ddg-header-sticky-h, 80px) + 16px);
	}

	/* Mục lục đã có ở sidebar → ẩn mục lục trong nội dung để không trùng. */
	.ddg-has-sidebar-toc .ddg-entry-content > .ddg-toc {
		display: none;
	}
}

/* ---------- Dưới 1024px: xếp dưới nội dung, bỏ khối trùng ---------- */
@media (max-width: 1023px) {
	.ddg-blog-layout__aside {
		margin-top: var(--ddg-space-6, 24px);
	}

	/* Bài viết / sản phẩm đã có CTA + form + bài liên quan + mục lục trong nội dung và thanh liên hệ cố định. */
	.ddg-sb--post .ddg-sb__block--cta,
	.ddg-sb--post .ddg-sb__block--posts,
	.ddg-sb--product .ddg-sb__block--cta,
	.ddg-sb--product .ddg-sb__block--posts,
	.ddg-sb--product-archive .ddg-sb__block--cta,
	.ddg-sb__sticky {
		display: none;
	}

	.ddg-sb__static {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
		align-items: start;
	}

	.ddg-sb__list--product {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ddg-sb__list--product .ddg-sb__link {
		grid-template-columns: 1fr;
		margin: 0;
		padding: 0;
	}

	.ddg-sb__list--product .ddg-sb__media {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ddg-sb__link {
		transition: none;
	}
}