/*
 * CSS riêng của theme DN Studio, nạp sau cùng (cuối trang) để thắng các khối CSS cũ trong nội dung.
 * Các khối CSS tách từ nội dung (assets/css/blocks/) do script sinh lại – không sửa ở đó.
 */

/* Bootstrap (Advisor) vẽ viền focus xanh khi bấm chuột vào link (a:focus). Chỉ giữ viền khi dùng
   bàn phím (:focus-visible, màu Studio) để không mất khả năng điều hướng bằng phím Tab. */
html body a:focus:not(:focus-visible),
html body button:focus:not(:focus-visible),
html body summary:focus:not(:focus-visible) {
	outline: none !important;
}
html body a:focus-visible,
html body button:focus-visible,
html body summary:focus-visible {
	outline: 3px solid #62b694 !important;
	outline-offset: 3px !important;
	border-radius: 4px;
}

/* Nút Zalo nổi luôn hiển thị, kể cả khi còn nằm trong <p> do wpautop (rule ẩn <p> sau footer của dn-hf-v1). */
html body #dn-studio-root#dn-studio-root footer.footer ~ p:has(> a.floating-zalo) {
	display: contents !important;
}
html body #dn-studio-root#dn-studio-root a.floating-zalo {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Một font thương hiệu cho toàn bộ vỏ: link menu trước đây kế thừa Open Sans của Advisor,
   còn "Dịch vụ"/"Bảng giá" dùng Be Vietnam Pro nên trông đậm, tối hơn hẳn. */
html body #dn-studio-root#dn-studio-root .topbar,
html body #dn-studio-root#dn-studio-root .site-header,
html body #dn-studio-root#dn-studio-root .site-header a,
html body #dn-studio-root#dn-studio-root .site-header summary,
html body #dn-studio-root#dn-studio-root .site-header button,
html body #dn-studio-root#dn-studio-root .mobile-nav,
html body #dn-studio-root#dn-studio-root .mobile-nav a,
html body #dn-studio-root#dn-studio-root footer.footer,
html body #dn-studio-root#dn-studio-root footer.footer a {
	font-family: "Be Vietnam Pro", "Be Vietnam Pro Fallback", "Be Vietnam Pro Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Mọi mục menu desktop cùng độ đậm, màu, đường cơ sở. */
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav > a,
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav > p > a,
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav summary {
	font-weight: 500 !important;
	color: #18333c !important;
	letter-spacing: 0 !important;
	transition: color .15s ease;
}
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav > a:hover,
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav > p > a:hover,
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav summary:hover,
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav details[open] > summary,
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav a[aria-current="page"] {
	color: #167a53 !important;
}

/* Menu mobile: mục có dropdown và link thường cùng độ đậm, màu. */
html body #dn-studio-root#dn-studio-root .mobile-nav summary,
html body #dn-studio-root#dn-studio-root .mobile-nav > a,
html body #dn-studio-root#dn-studio-root .mobile-nav > p > a {
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #18333c !important;
	letter-spacing: 0 !important;
}

/* Mũi tên dropdown: nhỏ, nhạt, căn giữa theo chữ, xoay khi mở. */
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav summary > span {
	display: inline-block !important;
	font-size: 11px !important;
	line-height: 1 !important;
	opacity: .55;
	transform: translateY(-2px);
	transition: transform .15s ease;
}
html body #dn-studio-root#dn-studio-root .site-header .desktop-nav details[open] > summary > span {
	transform: translateY(1px) rotate(180deg);
}

/*
 * Cỡ chữ tối thiểu cho trang Studio (trang chủ 60% chữ chỉ 11–12px, đo 30/10/2026).
 * Không áp cho header/footer/topbar/menu mobile và thân bài viết (.dn-standardized-content, đã 16px).
 */
html body #dn-studio-root#dn-studio-root :is(p, li, dd, figcaption):not(.site-header *):not(footer.footer *):not(.topbar *):not(.mobile-nav *):not(.dn-standardized-content *):not(.floating-zalo *):not(.detail-identity > p):not(.rates-brand-card > p) {
	font-size: 16px !important;
	line-height: 1.65 !important;
}
html body #dn-studio-root#dn-studio-root :is(td, th):not(.dn-standardized-content *) {
	font-size: 15px !important;
}
html body #dn-studio-root#dn-studio-root :is(label, summary, a.button, button.button, a.text-link, a.rates-category-link, a.detail-price-link, .filter-tab-btn):not(.site-header *):not(.mobile-nav *):not(footer.footer *) {
	font-size: 15px !important;
}
/* Chữ phụ: ghi chú, nguồn, meta – nhỏ hơn nhưng vẫn đọc được, đậm màu hơn. */
html body #dn-studio-root#dn-studio-root :is(.detail-note, .form-note, .pricing-source, .rates-help, .detail-source, .rates-category-meta, .hub-card-footer, .hub-card-subtag, .quote-result > p, .rates-notes > li, .detail-hours) {
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: #566661 !important;
}
/* Nhãn chữ in hoa giãn chữ (eyebrow). */
html body #dn-studio-root#dn-studio-root :is(.eyebrow, .hub-card-cat, .dropdown-title):not(.site-header *):not(.mobile-nav *) {
	font-size: 12.5px !important;
}
/* Đoạn mô tả nền sáng đang xám nhạt (độ tương phản thấp). Không thêm .about-copy: nằm trên nền tối. */
html body #dn-studio-root#dn-studio-root :is(.section-top > p, .process-step > p, .pricing-copy > p, .contact-copy > p, .hero-copy > p, .detail-intro > p, .rates-intro) {
	color: #46554f !important;
}

/* Mục "Trang chủ" làm header rộng hơn màn hình ở 992–1199px: số điện thoại chỉ còn icon, giảm khoảng cách menu. */
@media (min-width: 992px) and (max-width: 1199px) {
	html body #dn-studio-root#dn-studio-root .site-header .header-actions .header-phone span {
		display: none !important;
	}
	html body #dn-studio-root#dn-studio-root .site-header .desktop-nav,
	html body #dn-studio-root#dn-studio-root .site-header .desktop-nav > p {
		gap: 18px !important;
	}
}

/*
 * Giao diện đợt A (30/10/2026) – đo bằng axe-core + Playwright trên 9 trang tiêu biểu × 1366/390px.
 * Màu chữ đạt WCAG AA (≥ 4,5:1) trên mọi nền sáng của site: xanh #147a53 (4,63–5,33:1), xám #5f6d66 (4,72–5,43:1).
 * Nút/nền xanh giữ nguyên màu thương hiệu.
 */
html body #dn-studio-root#dn-studio-root :is(.eyebrow, a.text-link, .detail-price-link, .detail-zalo, .rates-category-link,
	.quote-label, .dn-cat-pill, .step-line > span, .rates-guide-grid > article > span, .dn-service-cta a, .dn-related-links a,
	.hero-copy .eyebrow, main section :is(p, li, div) > a:not([class]):not([style*="background"])):not(:is(.about, .rates-custom, .commitments-section, .service-card.featured, .detail-identity, footer) *) {
	color: #147a53 !important;
}
html body #dn-studio-root#dn-studio-root :is(.hero-assurance span, .hero-location, .trust-grid > div > span:not(.trust-number),
	.article-category span, .article-read, .faq-list details > p, .contact-phone small, .detail-assurance, .rates-unit,
	.rates-result-label, .rates-result > span, #rate-context, .quote-price span, .breadcrumbs .current, .service-index,
	.detail-audiences > div > span, .rates-category-top > span, .rates-package-price > span):not(:is(.about, .rates-custom, .commitments-section, .service-card.featured, .detail-identity, footer) *) {
	color: #5f6d66 !important;
}
/* Số trang trí cỡ lớn (≥ 24px): ngưỡng 3:1. */
html body #dn-studio-root#dn-studio-root .trust-grid .trust-number {
	color: #7a8781 !important;
}
/* Thẻ dịch vụ nổi bật (nền xanh đậm): tiêu đề đang là chữ đen trên nền xanh. */
html body #dn-studio-root#dn-studio-root .service-card.featured :is(h3, h3 a) {
	color: #fff !important;
}
html body #dn-studio-root#dn-studio-root .services-grid .service-card.featured .service-top span.service-index.service-index {
	color: #d6e6da !important;
}

/* Cỡ chữ tối thiểu 12px (có chữ 7–9px ở footer, menu thả xuống, thẻ bài viết). */
html body #dn-studio-root#dn-studio-root :is(.footer-bottom, .footer-bottom span, .footer-bottom a, .service-dropdown > p,
	.article-category, .article-category span, .article-read, .rates-category-top > span, .filter-tab-count, .service-index,
	.about-values > article > span, .rates-guide-grid > article > span, .hero-assurance span, .hero-note span, .quote-price span,
	.contact-phone small, .contact-details a, .contact-zalo, .contact-zalo span, .detail-assurance, .detail-identity-top span,
	.detail-identity-foot, .breadcrumbs a, .breadcrumbs span, .trust-grid > div > span:not(.trust-number), .floating-zalo span) {
	font-size: max(12px, 1em) !important;
}
html body #dn-studio-root#dn-studio-root :is(.footer-bottom, .footer-bottom span, .footer-bottom a) {
	font-size: 13px !important;
}
html body #dn-studio-root#dn-studio-root .topbar span {
	font-size: 12px !important;
}

/* /bang-gia-dich-vu/: breadcrumb float trái đẩy cả lưới hero thụt vào 130px và dính vào nhãn. */
html body #dn-studio-root#dn-studio-root .rates-hero .breadcrumbs {
	float: none !important;
	margin-bottom: 18px !important;
}
html body #dn-studio-root#dn-studio-root .rates-hero {
	display: flow-root !important;
}

/* Kho icon SVG bị wpautop bọc trong <p> tạo khoảng trắng 26px trên header (/lien-he/, /gioi-thieu/). */
html body #dn-studio-root#dn-studio-root > p:has(> svg.svg-library) {
	margin: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Vùng bấm trên điện thoại ≥ 44px (nút gọi ở header chỉ 17×17px). */
@media (max-width: 991px) {
	html body #dn-studio-root#dn-studio-root .site-header .header-phone {
		min-width: 44px !important;
		min-height: 44px !important;
		justify-content: center !important;
		align-items: center !important;
	}
	html body #dn-studio-root#dn-studio-root .site-header .header-phone svg {
		width: 22px !important;
		height: 22px !important;
	}
}
@media (max-width: 760px) {
	html body #dn-studio-root#dn-studio-root :is(.service-card a.text-link, .service-card h3 a) {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
	/* Khối số liệu trang Giới thiệu: số ở trên, chữ ở dưới thay vì ép 2 cột chật. */
	html body #dn-studio-root#dn-studio-root section.trust-strip .trust-grid > div {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 6px !important;
	}
	html body #dn-studio-root#dn-studio-root section.trust-strip .trust-grid > div > br {
		display: none !important;
	}
}
/* Mục 60: menu mobile.
 * (1) Mục menu phải là hàng full width. Trước đây inline-flex làm 3 link Về chúng tôi/Kiến thức/Liên hệ
 *     (wpautop gom chung 1 thẻ <p> trong shell-header.html) dồn thành 1 dòng; lỗi có từ 2.0.10-a.
 * (2) 761–991px: dn-hf-v1 ẩn menu desktop và hiện nút ☰ tới 991px, nhưng studio-master.min.css ép
 *     .mobile-nav{display:none!important} từ 761px nên bấm ☰ không ra menu. */
@media (max-width: 991px) {
	html body #dn-studio-root#dn-studio-root .mobile-nav :is(a, summary) {
		min-height: 44px !important;
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}
@media (min-width: 761px) and (max-width: 991px) {
	html body #dn-studio-root#dn-studio-root .mobile-nav:not([hidden]) {
		display: block !important;
	}
}

/* Sidebar bài viết cũ (màu nội tuyến trong nội dung): chữ xám #94a3b8 (2,6:1) và nút trắng trên #14b8a6 (2,5:1). */
html body #dn-studio-root#dn-studio-root .sidebar-card p[style*="94a3b8"] {
	color: #5f6d66 !important;
}
html body #dn-studio-root#dn-studio-root .sidebar-card a[style*="14b8a6"] {
	background: #0f766e !important;
}

/* Đợt C: thanh liên hệ cố định ở đáy màn hình điện thoại (inc/contact-bar.php). */
.dn-contact-bar {
	display: none;
}
@media (max-width: 760px) {
	/* dn-hf-v1 ẩn mọi phần tử sau vỏ Studio (#dn-studio-root ~ *), nên cần selector có id. */
	html body #dn-studio-root ~ nav.dn-contact-bar,
	html body nav.dn-contact-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: grid !important;
		grid-template-columns: 1.25fr 1fr;
		gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid #dee5df;
		box-shadow: 0 -6px 18px rgba(17, 46, 56, .08);
		font-family: "Be Vietnam Pro", "Be Vietnam Pro Fallback", "Be Vietnam Pro Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif;
	}
	html body .dn-contact-bar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}
	html body .dn-contact-bar .icon {
		width: 20px;
		height: 20px;
		flex: none;
	}
	html body .dn-contact-bar__call {
		background: #147a53;
		color: #fff;
	}
	html body .dn-contact-bar__zalo {
		background: #fff;
		color: #147a53;
		border: 1.5px solid #147a53;
	}
	html body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	}
	/* Nút Zalo nổi trùng chức năng và đè lên thanh: ẩn trên điện thoại. */
	html body #dn-studio-root#dn-studio-root a.floating-zalo,
	html body #dn-studio-root#dn-studio-root footer.footer ~ p:has(> a.floating-zalo) {
		display: none !important;
	}
}

/* Đợt C: dòng giá + tin cậy ở hero trang dịch vụ (scratch/claude_hero_trust.py). */
html body #dn-studio-root#dn-studio-root .detail-assurance {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px 18px !important;
}
html body #dn-studio-root#dn-studio-root .detail-assurance .dn-assure {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	white-space: nowrap !important;
}
html body #dn-studio-root#dn-studio-root .detail-assurance strong {
	color: #18333c !important;
}

/* Thân bài viết: căn đều hai bên + giảm thụt danh sách (Mục 59, user chọn 30/10/2026).
 * Trước: chữ canh trái nên mép phải lởm chởm; ul/ol thụt 52px (margin-left 28px của Advisor
 * + padding-left 24px !important trong khối CSS nội dung), lồng nhau 80–104px.
 * Giữ nguyên phần tử đang căn giữa/phải: ô bảng, chú thích ảnh, khối có text-align nội tuyến. */
html body #dn-studio-root#dn-studio-root .dn-standardized-content :is(p, li, dd):not(:is(td, th, figure, figcaption, .dn-article-image-box, .wp-caption) *):not([style*="text-align"]):not(.has-text-align-center):not(.has-text-align-right):not(.aligncenter) {
	text-align: justify !important;
	text-justify: inter-word;
}
html body #dn-studio-root#dn-studio-root .dn-standardized-content :is(ul, ol):not(:is(td, th, nav) *) {
	margin-left: 0 !important;
	padding-left: 22px !important;
}
html body #dn-studio-root#dn-studio-root .dn-standardized-content :is(ul, ol) :is(ul, ol) {
	padding-left: 20px !important;
}
/* Ảnh/figure hẹp hơn cột (ảnh cũ 576–768px, cột 808px) đang dính lề trái, trống bên phải tới 232px. */
html body #dn-studio-root#dn-studio-root .dn-standardized-content :is(figure, .wp-caption):not(:is(td, th) *) {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
}
html body #dn-studio-root#dn-studio-root .dn-standardized-content img:not(.emoji):not(.wp-smiley):not(:is(td, th, .alignleft, .alignright) img):not(.alignleft):not(.alignright) {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 2.0.17-a (Mục 62): header dính trên mobile/tablet không dùng làm mờ nền.
   Nền đã đục 96% (#fffffff5) nên lớp blur gần như không thấy, nhưng máy yếu phải vẽ lại lớp đó
   (PSI 31/10/2026: trang tải xong 0,84s mà 2,53s mới có khung hình đầu). */
@media (max-width: 991px) {
	html body #dn-studio-root#dn-studio-root .site-header {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* 2.0.19-a (Mục 64): Triệt tiêu khoảng trắng dư do thẻ <p> rác của wpautop sinh ra cuối main trước footer. */
html body #dn-studio-root#dn-studio-root main#noi-dung > p:empty,
html body #dn-studio-root#dn-studio-root main#noi-dung > p:has(> br:only-child),
html body #dn-studio-root#dn-studio-root main#noi-dung > p:last-child:not(:has(a, button, input, form, select)) {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
}

/* ==========================================================================
   2.0.23-a (Mục 68): Article Engine – Auto-TOC, Scroll Anchor & In-Article Expert Box
   ========================================================================== */
/* Căn lề neo tránh bị Fixed Header che khuất */
html body #dn-studio-root#dn-studio-root .dn-heading-anchor {
	scroll-margin-top: 96px !important;
}

/* Khối Mục Lục Bài Viết (Table of Contents) */
html body #dn-studio-root#dn-studio-root .dn-article-toc {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-left: 4px solid #09a223 !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	margin: 28px 0 34px 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	transition: all 0.2s ease !important;
	text-align: left !important;
}
html body #dn-studio-root#dn-studio-root .dn-article-toc :is(li, a, p, span, summary, h2, h3, nav) {
	text-align: left !important;
	text-justify: auto !important;
}
html body #dn-studio-root#dn-studio-root .dn-article-toc[open] {
	padding-bottom: 20px !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-summary {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	color: #0f172a !important;
	cursor: pointer !important;
	user-select: none !important;
	outline: none !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-icon {
	font-size: 18px !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-heading {
	flex: 1 !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-toggle {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #64748b !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-summary:hover .dn-toc-toggle {
	color: #09a223 !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-nav {
	margin-top: 14px !important;
	padding-top: 14px !important;
	border-top: 1px solid #edf2f7 !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-list {
	margin: 0 !important;
	padding-left: 22px !important;
	list-style-type: decimal !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-item {
	margin-bottom: 8px !important;
	line-height: 1.6 !important;
	font-size: 15px !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-item a {
	color: #1e293b !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	transition: color 0.15s ease !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-item a:hover {
	color: #09a223 !important;
	text-decoration: underline !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-sublist {
	margin: 6px 0 6px 0 !important;
	padding-left: 20px !important;
	list-style-type: circle !important;
}
html body #dn-studio-root#dn-studio-root .dn-toc-h3 a {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #475569 !important;
}

/* Khối Chuyên Gia Tư Vấn Giữa Bài (Native Editorial Box - Phương án 2) */
html body #dn-studio-root#dn-studio-root .dn-expert-box {
	background: #f0fdf4 !important;
	border: 1px solid #bbf7d0 !important;
	border-left: 4px solid #09a223 !important;
	border-radius: 8px !important;
	padding: 22px 26px !important;
	margin: 36px 0 !important;
	color: #1e293b !important;
	box-shadow: 0 4px 15px -2px rgba(9, 162, 35, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
	position: relative !important;
}
html body #dn-studio-root#dn-studio-root .dn-expert-box-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #dcfce7 !important;
	border: 1px solid #86efac !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #166534 !important;
	letter-spacing: 0.3px !important;
	margin-bottom: 12px !important;
}
html body #dn-studio-root#dn-studio-root .dn-badge-icon {
	font-size: 14px !important;
}
html body #dn-studio-root#dn-studio-root .dn-expert-box-title {
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #0f172a !important;
	margin: 0 0 10px 0 !important;
}
html body #dn-studio-root#dn-studio-root .dn-expert-box-desc {
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: #334155 !important;
	margin: 0 0 18px 0 !important;
}
html body #dn-studio-root#dn-studio-root .dn-expert-box-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 12px !important;
}
html body #dn-studio-root#dn-studio-root .dn-expert-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 10px 22px !important;
	border-radius: 50px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}
html body #dn-studio-root#dn-studio-root .dn-btn-zalo {
	background: #0068ff !important;
	color: #ffffff !important;
	border: 1px solid #0068ff !important;
	box-shadow: 0 3px 10px rgba(0, 104, 255, 0.22) !important;
}
html body #dn-studio-root#dn-studio-root .dn-btn-zalo:hover {
	background: #0052cc !important;
	border-color: #0052cc !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}
html body #dn-studio-root#dn-studio-root .dn-btn-call {
	background: #ffffff !important;
	color: #1e293b !important;
	border: 1px solid #cbd5e1 !important;
}
html body #dn-studio-root#dn-studio-root .dn-btn-call:hover {
	background: #f0fdf4 !important;
	border-color: #09a223 !important;
	color: #09a223 !important;
	transform: translateY(-1px) !important;
}
html body #dn-studio-root#dn-studio-root .dn-expert-link-pricing {
	color: #09a223 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-left: 6px !important;
	transition: all 0.15s ease !important;
}
html body #dn-studio-root#dn-studio-root .dn-expert-link-pricing:hover {
	text-decoration: underline !important;
	color: #07821c !important;
}
html body #dn-studio-root#dn-studio-root .dn-expert-footer-note {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin-top: 16px !important;
	padding-top: 14px !important;
	border-top: 1px solid #dcfce7 !important;
	font-size: 13px !important;
	color: #15803d !important;
	font-weight: 500 !important;
}
@media (max-width: 768px) {
	html body #dn-studio-root#dn-studio-root .dn-expert-box {
		padding: 20px 18px !important;
	}
	html body #dn-studio-root#dn-studio-root .dn-expert-box-title {
		font-size: 18px !important;
	}
	html body #dn-studio-root#dn-studio-root .dn-expert-box-actions {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	html body #dn-studio-root#dn-studio-root .dn-expert-btn {
		width: 100% !important;
	}
	html body #dn-studio-root#dn-studio-root .dn-expert-link-pricing {
		text-align: center !important;
		margin: 6px 0 0 0 !important;
	}
	html body #dn-studio-root#dn-studio-root .dn-expert-footer-note {
		flex-direction: column !important;
		gap: 6px !important;
	}
}

/* ==========================================================================
   DN Studio: Native Single Post Layout (v2.0.27-a)
   Áp dụng cho bài viết đơn lẻ tự động hiển thị layout Studio 2 cột chuẩn mực
   ========================================================================== */
.single-post-page .post-hero-section {
	background: #f7f9f6 !important;
	border-bottom: 1px solid #e2e8de !important;
	padding: 44px 0 48px !important;
}
.single-post-page .post-breadcrumb {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: #64748b !important;
	margin-bottom: 18px !important;
}
.single-post-page .post-breadcrumb a {
	color: #475569 !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}
.single-post-page .post-breadcrumb a:hover {
	color: #167a53 !important;
}
.single-post-page .post-breadcrumb .breadcrumb-current {
	color: #167a53 !important;
	font-weight: 500 !important;
}
.single-post-page .dn-cat-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	color: #167a53 !important;
	background: #eaf5ee !important;
	border: 1px solid #c8e6d3 !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
}
.single-post-page .post-single-title {
	font-size: 36px !important;
	font-weight: 750 !important;
	line-height: 1.32 !important;
	color: #112e38 !important;
	letter-spacing: -0.7px !important;
	margin: 0 0 16px 0 !important;
	max-width: 960px !important;
}
@media (max-width: 768px) {
	.single-post-page .post-single-title {
		font-size: 24px !important;
		line-height: 1.35 !important;
	}
}
.single-post-page .dn-sapo {
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	margin: 0 0 20px 0 !important;
	max-width: 960px !important;
}
.single-post-page .dn-meta {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 13px !important;
	color: #64748b !important;
	flex-wrap: wrap !important;
}
.single-post-page .dn-meta .dn-av {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	background: #167a53 !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	border-radius: 50% !important;
}
.single-post-page .dn-meta strong {
	color: #167a53 !important;
	font-weight: 600 !important;
}
.single-post-page .dn-meta .dn-dot {
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: #cbd5e1 !important;
	display: inline-block !important;
}
.single-post-page .post-layout-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 320px !important;
	gap: 56px !important;
	padding: 44px 0 80px !important;
	max-width: 1248px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}
@media (max-width: 1024px) {
	.single-post-page .post-layout-grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
		padding: 30px 16px 60px !important;
	}
}
.single-post-page .post-main-content {
	min-width: 0 !important;
}
.single-post-page .post-sidebar-col {
	min-width: 0 !important;
}
.single-post-page .detail-sidebar {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: 100% !important;
	pointer-events: auto !important;
}
.single-post-page .detail-sidebar-sticky {
	position: sticky !important;
	top: 100px !important;
}
@media (max-width: 1024px) {
	.single-post-page .detail-sidebar-sticky {
		position: static !important;
	}
}
.single-post-page .detail-quote {
	padding: 28px 24px 24px !important;
	border: 1px solid #dce5d9 !important;
	border-radius: 8px !important;
	background: #fbfcf8 !important;
	box-sizing: border-box !important;
}
.single-post-page .detail-quote > .eyebrow {
	display: block !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 1.3px !important;
	color: #167a53 !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
}
.single-post-page .detail-quote > h2 {
	font-size: 22px !important;
	font-weight: 750 !important;
	line-height: 1.4 !important;
	letter-spacing: -0.5px !important;
	color: #112e38 !important;
	margin: 0 0 12px 0 !important;
}
.single-post-page .detail-quote > p {
	font-size: 13.5px !important;
	line-height: 1.7 !important;
	color: #475569 !important;
	margin: 0 0 16px 0 !important;
}
.single-post-page .detail-price-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #167a53 !important;
	text-decoration: none !important;
	margin-bottom: 16px !important;
	transition: color 0.15s ease !important;
}
.single-post-page .detail-price-link:hover {
	color: #0d4653 !important;
}
.single-post-page .detail-price-link .icon {
	width: 16px !important;
	height: 16px !important;
}
.single-post-page .detail-quote .button {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;
	text-align: center !important;
	box-sizing: border-box !important;
	background: #167a53 !important;
	color: #ffffff !important;
	padding: 13px 18px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
	transition: background 0.2s ease !important;
	margin-bottom: 10px !important;
}
.single-post-page .detail-quote .button:hover {
	background: #116041 !important;
}
.single-post-page .detail-zalo {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	color: #167a53 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 11px 16px !important;
	text-decoration: none !important;
	border-radius: 6px !important;
	border: 1px solid #dce5d9 !important;
	background: #ffffff !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
	margin-bottom: 16px !important;
}
.single-post-page .detail-zalo:hover {
	border-color: #167a53 !important;
	background: #f1f7f3 !important;
}
.single-post-page .detail-zalo .icon {
	width: 17px !important;
	height: 17px !important;
}
.single-post-page .detail-call {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #112e38 !important;
	border-top: 1px solid #dce5d9 !important;
	padding-top: 16px !important;
	text-decoration: none !important;
}
.single-post-page .detail-call .icon {
	color: #167a53 !important;
	width: 18px !important;
	height: 18px !important;
}
.single-post-page .detail-hours {
	display: block !important;
	text-align: center !important;
	font-size: 12px !important;
	color: #64748b !important;
	margin-top: 6px !important;
}
.single-post-page .detail-service-nav {
	margin-top: 26px !important;
}
.single-post-page .detail-service-nav h2 {
	font-size: 13px !important;
	letter-spacing: 0.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	color: #112e38 !important;
	margin: 0 0 12px 0 !important;
}
.single-post-page .detail-service-nav p {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
.single-post-page .detail-service-nav a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 10px !important;
	border-bottom: 1px solid #e2e8de !important;
	border-left: 2px solid transparent !important;
	color: #465d50 !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	text-decoration: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
}
.single-post-page .detail-service-nav a:hover {
	background: #f1f7f3 !important;
	border-left-color: #167a53 !important;
	color: #112e38 !important;
}
.single-post-page .detail-service-nav a > .icon:first-child {
	width: 18px !important;
	height: 18px !important;
	color: #167a53 !important;
	flex-shrink: 0 !important;
}
.single-post-page .detail-service-nav a > span {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #18333c !important;
	flex-grow: 1 !important;
}
.single-post-page .detail-service-nav a > .icon:last-child {
	width: 14px !important;
	height: 14px !important;
	margin-left: auto !important;
	color: #90a294 !important;
	flex-shrink: 0 !important;
}
.single-post-page .detail-source {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #6b8274 !important;
	font-size: 11px !important;
	line-height: 1.6 !important;
	margin-top: 18px !important;
	text-decoration: none !important;
}
.single-post-page .detail-source .icon {
	width: 14px !important;
	height: 14px !important;
}
.single-post-page .post-cta-banner {
	background: linear-gradient(135deg, #092c35 0%, #0d4653 100%) !important;
	color: #ffffff !important;
	border-radius: 12px !important;
	padding: 32px 28px !important;
	margin-top: 48px !important;
	box-shadow: 0 10px 30px rgba(9, 44, 53, 0.12) !important;
}
.single-post-page .post-cta-banner .eyebrow {
	color: #86efac !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	margin-bottom: 8px !important;
	display: block !important;
}
.single-post-page .post-cta-banner h3 {
	color: #ffffff !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	margin: 0 0 10px !important;
}
.single-post-page .post-cta-banner p {
	color: #cbd5e1 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	margin-bottom: 20px !important;
}
.single-post-page .post-cta-btns {
	display: flex !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}
.single-post-page .post-cta-btns a.button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	font-size: 14px !important;
}
.single-post-page .post-cta-btns a.button-zalo,
.single-post-page .post-cta-btns a.button-outline {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #0068ff !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	border-radius: 6px !important;
	border: 1px solid #0068ff !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	font-size: 14px !important;
	box-shadow: 0 4px 12px rgba(0, 104, 255, 0.25) !important;
}
.single-post-page .post-cta-btns a.button-zalo:hover,
.single-post-page .post-cta-btns a.button-outline:hover {
	background: #0056d6 !important;
	border-color: #0056d6 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 16px rgba(0, 104, 255, 0.35) !important;
}
.single-post-page .post-cta-btns a.button-zalo svg,
.single-post-page .post-cta-btns a.button-outline svg {
	fill: none !important;
	stroke: currentColor !important;
}

/* --- Defensive Layout Grid & Alignment Rules --- */
.single-post-page .post-layout-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 320px !important;
	gap: 56px !important;
	padding: 44px 0 80px !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	align-items: start !important;
}
.single-post-page .post-main-content,
.single-post-page article.dn-standardized-content {
	grid-column: 1 !important;
	min-width: 0 !important;
	width: 100% !important;
}
.single-post-page .post-cta-banner {
	grid-column: 1 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.single-post-page .detail-sidebar.post-sidebar-col {
	grid-column: 2 / 3 !important;
	grid-row: 1 !important;
	width: 320px !important;
	min-width: 320px !important;
	height: 100% !important;
	position: static !important;
	align-self: stretch !important;
}
.single-post-page .detail-sidebar-sticky {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 100px !important;
}
@media (max-width: 1024px) {
	.single-post-page .post-layout-grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
		padding: 30px 16px 60px !important;
	}
	.single-post-page .post-main-content,
	.single-post-page article.dn-standardized-content,
	.single-post-page .post-cta-banner {
		grid-column: 1 !important;
	}
	.single-post-page .detail-sidebar.post-sidebar-col {
		grid-column: 1 !important;
		grid-row: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		position: static !important;
	}
}