/* ==========================================================================
   THÀNH PHẦN
   Mỗi khối tự đủ: không phụ thuộc thứ tự xuất hiện, không phụ thuộc khối bên
   cạnh. Tất cả đều phẳng — nền đặc, viền mảnh, bo 6px, không đổ bóng.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tiêu đề khối
   -------------------------------------------------------------------------- */

.dvs-td-khoi { margin-bottom: var(--s-5); max-width: 78ch; }
.dvs-nhan-khoi {
	margin: 0 0 10px;
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-primary-600);
}
.dvs-td { font-size: var(--t-2xl); margin: 0; }
.dvs-dan-khoi { margin: var(--s-2) 0 0; font-size: var(--t-lg); color: var(--c-muted); }
.dvs-nen-dam .dvs-dan-khoi { color: var(--c-on-dark-soft); }

.dvs-ghi-chu {
	margin: var(--s-3) 0 0;
	padding-left: var(--s-2);
	border-left: 3px solid var(--c-accent-400);
	font-size: var(--t-base);
	color: var(--c-muted);
}

.dvs-chu { font-size: var(--t-md); line-height: 1.85; }
.dvs-chu-2 { columns: 2; column-gap: var(--s-6); }
@media (max-width: 860px) { .dvs-chu-2 { columns: 1; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.dvs-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 52vw, 560px);
	padding: var(--s-8) 0;
	background: var(--c-primary-900);
	overflow: hidden;
}
.dvs-hero-nen { position: absolute; inset: 0; }
.dvs-hero-nen img { width: 100%; height: 100%; object-fit: cover; }
/* Lớp phủ đặc chứ không gradient.
   Ở mức 0.74, điểm ảnh sáng nhất của ảnh hoà ra khoảng rgb(77,100,89); chữ
   trắng trên nền đó vẫn đạt ~6.4:1. Đặc hơn nữa thì ảnh biến mất, nhạt hơn
   thì chữ tụt dưới ngưỡng AA ở vùng sáng. */
.dvs-hero-anh .dvs-hero-nen:after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(11, 46, 32, .74);
}
.dvs-hero-trong { position: relative; z-index: 1; }

.dvs-hero-nhan {
	display: inline-block;
	margin: 0 0 var(--s-2);
	padding: 6px 14px;
	border-radius: var(--r-pill);
	/* Vàng trên nền xanh đậm: 6.5:1. Đây là một trong hai chỗ duy nhất được
	   dùng vàng làm màu CHỮ. */
	background: rgba(217, 164, 65, .16);
	color: var(--c-accent-400);
	font-size: var(--t-sm);
	font-weight: 600;
}
.dvs-hero-td {
	margin: 0 0 var(--s-3);
	max-width: 20ch;
	font-size: var(--t-hero);
	line-height: 1.1;
	color: #fff;
}
.dvs-hero-dan {
	margin: 0 0 var(--s-4);
	max-width: 62ch;
	font-size: var(--t-lg);
	line-height: 1.7;
	color: var(--c-on-dark-soft);
}
.dvs-hero-nut { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.dvs-hero-so {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-6);
	margin: var(--s-6) 0 0;
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-on-dark-line);
}
.dvs-hero-so div { min-width: 118px; flex: 1 1 180px; max-width: 260px; }
.dvs-hero-so dt { display: block; margin: 0; font-size: var(--t-xl); font-weight: 700; color: var(--c-accent-400); line-height: 1.2; }
.dvs-hero-so dd { display: block; margin: 4px 0 0; font-size: var(--t-sm); color: var(--c-on-dark-soft); line-height: 1.5; }

@media (max-width: 640px) {
	.dvs-hero { min-height: 0; padding: var(--s-7) 0 var(--s-6); }
	.dvs-hero-td { max-width: none; }
	.dvs-hero-nut { flex-direction: column; align-items: stretch; }
	/* Trong khung dọc hẹp, cột 1fr tính đúng bề ngang nhưng nút vẫn co theo
	   độ dài chữ — phải ép width, không có cách nào khác. */
	.dvs-hero-nut .dvs-nut:not(.icon) { width: 100%; }
	.dvs-hero-so { gap: var(--s-3) var(--s-4); }
	.dvs-hero-so div { min-width: 44%; }
}

/* --------------------------------------------------------------------------
   Dải số liệu
   -------------------------------------------------------------------------- */

.dvs-so-hang {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-3);
	margin: 0;
}
.dvs-so-o { padding-left: var(--s-2); border-left: 3px solid var(--c-accent-400); }
.dvs-so-o dt { display: block; margin: 0; font-size: var(--t-2xl); font-weight: 700; color: #fff; line-height: 1.1; }
.dvs-so-o dd { display: block; margin: 6px 0 0; font-size: var(--t-base); color: var(--c-on-dark-soft); }
@media (max-width: 860px) { .dvs-so-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Thẻ công nghệ
   -------------------------------------------------------------------------- */

.dvs-cn-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 980px) { .dvs-cn-luoi { grid-template-columns: minmax(0, 1fr); } }

.dvs-cn-the {
	display: flex;
	flex-direction: column;
	padding: var(--s-4);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
}
.dvs-nen-trang .dvs-cn-the { background: var(--c-panel); border-color: var(--c-primary-100); }
.dvs-cn-ten { margin: 0 0 6px; font-size: var(--t-xl); }
.dvs-cn-ten a { color: var(--c-ink); }
.dvs-cn-ten a:hover { color: var(--c-primary-700); }
.dvs-cn-mo { margin: 0 0 var(--s-3); font-size: var(--t-base); color: var(--c-muted); }

.dvs-cn-bang { margin: 0 0 var(--s-3); font-size: var(--t-sm); }
.dvs-cn-bang th, .dvs-cn-bang td { padding: 9px 0; border-bottom: 1px solid var(--c-line-dam); }
.dvs-cn-bang th { width: 46%; font-weight: 500; color: var(--c-muted); }
.dvs-cn-bang td { color: var(--c-ink); font-weight: 600; text-align: right; }
.dvs-cn-bang tr:last-child th, .dvs-cn-bang tr:last-child td { border-bottom: 0; }

.dvs-cn-gia { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-2); font-size: var(--t-sm); }
.dvs-cn-gia-nhan { color: var(--c-muted); }
.dvs-vach { display: inline-flex; gap: 4px; }
.dvs-vach-o { width: 26px; height: 6px; border-radius: 3px; background: var(--c-line-dam); }
.dvs-vach-o.day { background: var(--c-accent-500); }

.dvs-cn-hop { margin: 0 0 var(--s-3); font-size: var(--t-sm); color: var(--c-body); line-height: 1.6; }
.dvs-cn-hop span { display: block; color: var(--c-muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }

.dvs-cn-xem {
	margin-top: auto;
	padding-top: var(--s-2);
	font-weight: 600;
	font-size: var(--t-base);
	color: var(--c-primary-600);
}
.dvs-cn-xem:after { content: " →"; }

/* --------------------------------------------------------------------------
   Thẻ nhóm nguyên liệu
   -------------------------------------------------------------------------- */

/* Sáu thẻ chia hết cho cả ba và hai, nên không còn hàng cuối lẻ ô ở bất kỳ
   khổ màn hình nào. Ba cột cũng cho thẻ rộng hơn, ảnh đọc được hơn hẳn so với
   năm cột chật. */
.dvs-nl-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 900px) { .dvs-nl-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dvs-nl-luoi { grid-template-columns: minmax(0, 1fr); } }

.dvs-nl-the {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	overflow: hidden;
}
/* Tỉ lệ khung đặt trên chính thẻ <img>, không đặt trên hộp bọc.
   Đặt aspect-ratio cho hộp rồi cho ảnh height:100% là một vòng lặp: chiều cao
   hộp phụ thuộc nội dung, còn phần trăm của ảnh lại phụ thuộc chiều cao hộp,
   nên trình duyệt bỏ qua cả hai và ảnh giữ tỉ lệ gốc. Ảnh dọc khi đó cao gấp
   đôi ảnh ngang nằm ngay cạnh. */
.dvs-nl-anh { display: block; background: var(--c-primary-100); }
.dvs-nl-anh img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dvs-the-trong { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--c-primary-100); }
.dvs-nl-chu { padding: var(--s-2) var(--s-2) var(--s-3); }
.dvs-nl-chu h3 { margin: 0 0 4px; font-size: var(--t-md); line-height: 1.35; }
.dvs-nl-chu h3 a { color: var(--c-ink); }
.dvs-nl-chu h3 a:hover { color: var(--c-primary-700); }
.dvs-nl-so { margin: 0; font-size: var(--t-xs); color: var(--c-muted); }

/* --------------------------------------------------------------------------
   Quy trình
   -------------------------------------------------------------------------- */

/* Quy trình luôn có năm bước, mà năm thì không chia hết cho hai hay bốn: lưới
   bốn cột để bước thứ năm đứng một mình cạnh ba ô trống. Nên chỉ dùng hai bố
   cục không bao giờ lẻ ô — một hàng ngang đủ năm bước khi màn hình rộng, và
   dòng thời gian dọc khi hẹp. */
.dvs-qt {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dvs-qt-buoc { margin: 0; padding: var(--s-3); background: var(--c-panel); border-radius: var(--r); }
.dvs-nen-panel .dvs-qt-buoc { background: #fff; }

/* Dưới 1100px: mỗi bước là một dòng, số bên trái, chữ bên phải. Vừa không lẻ
   ô, vừa gọn hơn hẳn so với xếp năm thẻ dọc. */
@media (max-width: 1100px) {
	.dvs-qt { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
	.dvs-qt-buoc {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: var(--s-3);
		align-items: start;
		padding: var(--s-3);
	}
	.dvs-qt-buoc p.dvs-qt-so { grid-row: 1 / span 3; margin: 0; }
	.dvs-qt-buoc .dvs-qt-ten { grid-column: 2; margin-bottom: 4px; }
	.dvs-qt-buoc p.dvs-qt-mo { grid-column: 2; }
	.dvs-qt-buoc p.dvs-qt-tg { grid-column: 2; margin-top: 8px; }
}

/* Một <p> mang class riêng phải viết p.<class>: luật .dvs-qt .dvs-qt-mo (0,2,1)
   sẽ thắng .dvs-qt-so (0,1,0) và làm số thứ tự ra màu chữ thường. */
p.dvs-qt-so {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	margin: 0 0 var(--s-2);
	border-radius: var(--r);
	background: var(--c-primary-600);
	color: #fff;
	font-size: var(--t-lg);
	font-weight: 700;
	line-height: 1;
}
.dvs-qt-ten { margin: 0 0 6px; font-size: var(--t-md); }
p.dvs-qt-mo { margin: 0; font-size: var(--t-base); color: var(--c-muted); line-height: 1.65; }
p.dvs-qt-tg {
	margin: var(--s-2) 0 0;
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--c-accent-700);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   Bảng so sánh
   -------------------------------------------------------------------------- */

.dvs-bang-ss { background: #fff; border-radius: var(--r); overflow: hidden; }
.dvs-bang-ss thead th:nth-child(2) { background: var(--c-primary-600); }
.dvs-bang-ss tbody th { width: 18%; background: var(--c-panel); }
.dvs-bang-ss td:first-of-type { background: rgba(226, 239, 233, .45); }

/* --------------------------------------------------------------------------
   Hỏi đáp
   -------------------------------------------------------------------------- */

.dvs-hd { border-top: 1px solid var(--c-line); }
.dvs-hd-muc { border-bottom: 1px solid var(--c-line); }
.dvs-hd-muc summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-3) 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--c-ink);
}
.dvs-hd-muc summary::-webkit-details-marker { display: none; }
/* Dấu cộng/trừ vẽ bằng hai gạch, không cần thư viện icon cũng không cần JS. */
.dvs-hd-muc summary:after {
	content: "";
	position: relative;
	flex: 0 0 auto;
	width: 16px; height: 16px;
	margin-top: 6px;
	background:
		linear-gradient(var(--c-primary-600), var(--c-primary-600)) center/16px 2px no-repeat,
		linear-gradient(var(--c-primary-600), var(--c-primary-600)) center/2px 16px no-repeat;
	transition: transform .18s ease;
}
.dvs-hd-muc[open] summary:after {
	background: linear-gradient(var(--c-primary-600), var(--c-primary-600)) center/16px 2px no-repeat;
}
.dvs-hd-dap { padding: 0 0 var(--s-3); font-size: var(--t-base); line-height: 1.8; color: var(--c-body); max-width: 88ch; }
.dvs-hd-dap p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Mục lục
   -------------------------------------------------------------------------- */

.dvs-muc-luc {
	margin: 0 0 var(--s-5);
	padding: var(--s-3);
	background: var(--c-panel);
	border-left: 4px solid var(--c-primary-600);
	border-radius: 0 var(--r) var(--r) 0;
}
.dvs-ml-tieu-de {
	margin: 0 0 10px;
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-primary-700);
}
.dvs-muc-luc ol { margin: 0; padding-left: 1.25em; font-size: var(--t-base); }
.dvs-muc-luc li { margin-bottom: 5px; line-height: 1.55; }
.dvs-muc-luc a { color: var(--c-body); }
.dvs-muc-luc a:hover { color: var(--c-primary-700); }
.dvs-muc-luc-doi ol { columns: 2; column-gap: var(--s-6); }
@media (max-width: 760px) { .dvs-muc-luc-doi ol { columns: 1; } }

/* --------------------------------------------------------------------------
   Thanh neo trong trang
   -------------------------------------------------------------------------- */

.dvs-neo {
	position: sticky;
	top: 0;
	z-index: 30;
	background: #fff;
	border-bottom: 1px solid var(--c-line);
}
.dvs-neo ul {
	display: flex;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.dvs-neo ul::-webkit-scrollbar { display: none; }
.dvs-neo li { margin: 0; flex: 0 0 auto; }
.dvs-neo a {
	display: block;
	padding: 14px 0;
	font-size: var(--t-base);
	font-weight: 600;
	color: var(--c-muted);
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}
.dvs-neo a:hover, .dvs-neo a.dang-xem { color: var(--c-primary-700); border-bottom-color: var(--c-primary-600); text-decoration: none; }

/* --------------------------------------------------------------------------
   Ô có biểu tượng
   -------------------------------------------------------------------------- */

.dvs-o-luoi { display: grid; gap: var(--s-3); }
.dvs-o { padding: var(--s-3); background: var(--c-panel); border-radius: var(--r); }
.dvs-nen-panel .dvs-o { background: #fff; }
.dvs-nen-dam .dvs-o { background: rgba(255,255,255,.06); }
.dvs-o-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	margin-bottom: var(--s-2);
	border-radius: var(--r);
	background: var(--c-primary-600);
	color: #fff;
}
.dvs-o-ten { margin: 0 0 6px; font-size: var(--t-md); }
.dvs-o-mo { margin: 0; font-size: var(--t-base); color: var(--c-muted); line-height: 1.7; }
.dvs-nen-dam .dvs-o-mo { color: var(--c-on-dark-soft); }

/* --------------------------------------------------------------------------
   Thẻ bài viết
   -------------------------------------------------------------------------- */

.dvs-the-bai {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	overflow: hidden;
	color: var(--c-ink);
}
.dvs-the-bai:hover { border-color: var(--c-primary-500); text-decoration: none; color: var(--c-primary-800); }
.dvs-the-anh { display: block; background: var(--c-primary-100); }
.dvs-the-anh img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.dvs-the-anh .dvs-the-trong { aspect-ratio: 3 / 2; }
.dvs-the-chu { display: block; padding: 14px var(--s-2) var(--s-2); font-size: var(--t-base); font-weight: 600; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Khối cuối bài
   -------------------------------------------------------------------------- */

.dvs-cuoi-khoi { margin-top: var(--s-8); }
.dvs-cuoi-khoi > h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }

.dvs-silo-hang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 700px) { .dvs-silo-hang { grid-template-columns: minmax(0, 1fr); } }

.dvs-silo-the {
	display: block;
	padding: var(--s-3);
	background: var(--c-panel);
	border-radius: var(--r);
	border-left: 4px solid var(--c-primary-600);
	color: var(--c-ink);
}
.dvs-silo-the:hover { background: var(--c-primary-100); text-decoration: none; }
.dvs-silo-nhan {
	display: block;
	margin-bottom: 4px;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-primary-600);
}
.dvs-silo-ten { display: block; font-size: var(--t-lg); font-weight: 700; margin-bottom: 4px; }
.dvs-silo-mo { display: block; font-size: var(--t-base); color: var(--c-muted); line-height: 1.65; }
.dvs-silo-gon { border-left-width: 3px; }
.dvs-silo-gon .dvs-silo-ten { font-size: var(--t-md); margin: 0; }

.dvs-bai-tru-dan { margin: -8px 0 var(--s-3); font-size: var(--t-base); color: var(--c-muted); }

/* --------------------------------------------------------------------------
   Dải mời liên hệ
   -------------------------------------------------------------------------- */

.dvs-cta { margin-top: var(--s-8); background: var(--c-primary-900); border-radius: var(--r); }
.dvs-dai .dvs-cta, .dvs-trang-khoi .dvs-cta { border-radius: 0; margin-top: 0; }
.dvs-cta-trong {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	max-width: var(--bo);
	margin: 0 auto;
	padding: var(--s-6) var(--rang);
}
.dvs-cta-chu { max-width: 60ch; }
.dvs-cta-chu h2 { margin: 0 0 8px; color: #fff; font-size: var(--t-xl); }
.dvs-cta-chu p { margin: 0; color: var(--c-on-dark-soft); font-size: var(--t-base); }
.dvs-cta-nut { display: flex; flex-wrap: wrap; gap: var(--s-2); flex: 0 0 auto; }
@media (max-width: 900px) {
	.dvs-cta-trong { flex-direction: column; align-items: flex-start; }
	.dvs-cta-nut { width: 100%; }
	.dvs-cta-nut .dvs-nut:not(.icon) { flex: 1 1 220px; }
}

/* --------------------------------------------------------------------------
   Cụm liên hệ nổi
   -------------------------------------------------------------------------- */

.dvs-cum { position: fixed; right: 16px; bottom: 16px; z-index: 120; }
.dvs-cum-nut {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-primary-600);
	color: #fff;
	cursor: pointer;
}
.dvs-cum-nut:hover { background: var(--c-primary-800); }
.dvs-cum-dong { display: none; }
.dvs-cum[data-dong="0"] .dvs-cum-mo { display: none; }
.dvs-cum[data-dong="0"] .dvs-cum-dong { display: block; }

.dvs-cum-ds {
	display: none;
	position: absolute;
	right: 0;
	bottom: 62px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
}
.dvs-cum[data-dong="0"] .dvs-cum-ds { display: block; }
.dvs-cum-ds li { margin: 0 0 8px; }
.dvs-cum-muc {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 8px 8px 8px 14px;
	border-radius: var(--r-pill);
	background: #fff;
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	font-size: var(--t-sm);
	font-weight: 600;
}
.dvs-cum-muc:hover { text-decoration: none; border-color: var(--c-primary-500); }
.dvs-cum-o {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: var(--r-pill);
	color: #fff;
	flex: 0 0 auto;
}
.dvs-cum-xanh .dvs-cum-o { background: var(--c-primary-600); }
.dvs-cum-lam  .dvs-cum-o { background: #0068ff; }
.dvs-cum-vang .dvs-cum-o { background: var(--c-accent-500); color: var(--c-ink); }

.dvs-cum-nen { position: fixed; inset: 0; z-index: 119; background: rgba(16, 26, 21, .34); }

/* --------------------------------------------------------------------------
   Thanh hành động dính đáy (chỉ điện thoại)
   -------------------------------------------------------------------------- */

.dvs-thanh { display: none; }
@media (max-width: 849px) {
	.dvs-thanh {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 118;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		background: #fff;
		border-top: 1px solid var(--c-line);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.dvs-thanh-muc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 58px;
		font-size: var(--t-xs);
		font-weight: 600;
		color: var(--c-ink);
	}
	.dvs-thanh-muc:hover { text-decoration: none; }
	.dvs-thanh-muc + .dvs-thanh-muc { border-left: 1px solid var(--c-line); }
	.dvs-thanh-xanh { color: var(--c-primary-700); }
	.dvs-thanh-lam  { color: #0059d6; }
	.dvs-thanh-vang { background: var(--c-accent-400); color: var(--c-ink); }
	/* Hai nút nổi cùng lúc là thừa; nhường chỗ cho thanh. */
	.dvs-cum { display: none; }
}

/* --------------------------------------------------------------------------
   Lên đầu trang
   -------------------------------------------------------------------------- */

.dvs-len {
	position: fixed;
	right: 16px;
	bottom: 78px;
	z-index: 117;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	background: #fff;
	color: var(--c-primary-700);
	cursor: pointer;
}
.dvs-len:hover { background: var(--c-panel); }
@media (max-width: 849px) { .dvs-len { bottom: 72px; right: 12px; } }

/* Khi con trỏ đang ở trong biểu mẫu thì mọi thứ nổi đều biến mất — không thì
   chúng che đúng ô nhập cuối cùng của form. */
.dvs-dang-nhap-form .dvs-cum,
.dvs-dang-nhap-form .dvs-thanh,
.dvs-dang-nhap-form .dvs-len { display: none; }

/* --------------------------------------------------------------------------
   Vùng bấm phủ cả thẻ

   Một liên kết trong tiêu đề thẻ chỉ cao bằng dòng chữ — khoảng 22px, quá nhỏ
   cho ngón tay. Thay vì bọc thêm thẻ <a> quanh ảnh (thành hai liên kết cùng
   trỏ một nơi), cho liên kết tiêu đề trải một lớp phủ trong suốt lên cả thẻ.
   -------------------------------------------------------------------------- */

.dvs-nl-the, .dvs-cn-the, .dvs-the-bai, .dvs-silo-the { position: relative; }

.dvs-nl-chu h3 a:after,
.dvs-cn-ten a:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dvs-nl-the:hover, .dvs-cn-the:hover { border-color: var(--c-primary-500); }
.dvs-nl-the:focus-within, .dvs-cn-the:focus-within { border-color: var(--c-primary-600); }

/* .dvs-cn-xem giờ là chữ chứ không phải liên kết — giữ nguyên dáng mũi tên. */
.dvs-cn-xem { display: block; }
.dvs-cn-the:hover .dvs-cn-xem { color: var(--c-primary-800); }

/* Ô biểu tượng ở đầu trang của theme mẹ chỉ 35px. Nâng lên 44px — đây là
   ngưỡng thấp nhất mà ngón tay cái bấm trúng ổn định. */
.dvs2026 .header-main .nav > li > a.icon,
.dvs2026 .nav .icon > a,
.dvs2026 .header-button .button.icon {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Liên kết chữ đứng riêng (breadcrumb, chân trang, danh sách) cần đệm dọc để
   thành vùng chạm dùng được, nhưng không được kéo giãn nút biểu tượng tròn —
   Flatsome dùng chung class .button cho cả hai. */
@media (max-width: 849px) {
	.dvs2026 #footer .dvs-ct-o li a,
	.dvs2026 .dvs-so-do-o a,
	.dvs2026 .dvs-breadcrumb a { display: inline-block; padding: 10px 0; }
	.dvs2026 #footer .dvs-ct-o li { margin-bottom: 0; }
	.dvs2026 #footer .dvs-ct-hotline { padding: 8px 0; }
}

/* Liên kết logo: ảnh cao 24px trên điện thoại nên vùng bấm cũng chỉ 24px. */
.dvs2026 #logo a { display: flex; align-items: center; min-height: 44px; }

/* Nhãn silo ở đầu bài: mặc định chỉ cao 32px, dưới ngưỡng chạm 44px. */
.dvs-nhan { padding: 11px 16px; }

/* --------------------------------------------------------------------------
   Hộp E-E-A-T: ai viết, dựa vào đâu, cập nhật khi nào
   -------------------------------------------------------------------------- */

.dvs-eeat {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--s-3);
	align-items: start;
}
.dvs-eeat-anh img { width: 64px; height: 64px; border-radius: var(--r-pill); object-fit: cover; }
.dvs-eeat-dong { margin: 0 0 6px; font-size: var(--t-base); line-height: 1.65; color: var(--c-body); }
.dvs-eeat-dong:last-child { margin-bottom: 0; }
.dvs-eeat-dong strong { color: var(--c-ink); }
.dvs-eeat-nguon { color: var(--c-muted); }
@media (max-width: 560px) {
	.dvs-eeat { grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-2); }
	.dvs-eeat-anh img { width: 52px; height: 52px; }
}

/* --------------------------------------------------------------------------
   Khối kinh nghiệm thực tế
   -------------------------------------------------------------------------- */

.dvs-kn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 860px) { .dvs-kn { grid-template-columns: minmax(0, 1fr); } }

.dvs-kn-muc {
	padding: var(--s-3);
	background: var(--c-panel);
	border-left: 4px solid var(--c-accent-400);
	border-radius: 0 var(--r) var(--r) 0;
}
.dvs-nen-panel .dvs-kn-muc { background: #fff; }
.dvs-kn-khi {
	margin: 0 0 6px;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-accent-700);
}
.dvs-kn-muc h3 { margin: 0 0 8px; font-size: var(--t-md); }
.dvs-kn-noi { font-size: var(--t-base); line-height: 1.75; color: var(--c-body); }
.dvs-kn-noi p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Nhãn nguồn của một con số
   -------------------------------------------------------------------------- */

.dvs-nguon-so {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: -8px 0 var(--s-4);
	font-size: var(--t-sm);
	color: var(--c-muted);
}
.dvs-nguon-so span {
	padding: 3px 10px;
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: var(--t-xs);
	letter-spacing: .03em;
}
.dvs-nguon-nganh span  { background: var(--c-panel); color: var(--c-primary-700); }
.dvs-nguon-xuong span  { background: var(--c-primary-600); color: #fff; }
.dvs-nguon-thu span    { background: var(--c-accent-100); color: var(--c-accent-700); }

/* Hộp E-E-A-T ở đầu bài viết: tách khỏi tiêu đề bằng một đường mảnh. */
.dvs-dau-eeat {
	margin-top: var(--s-4);
	padding-top: var(--s-3);
	border-top: 1px solid var(--c-line);
}

/* Danh sách bước trong thân bài viết: đánh số bằng counter để con số nằm trong
   một ô vuông màu, thay cho dấu chấm tròn mặc định. */
.dvs-than ol.dvs-buoc-bai {
	counter-reset: dvs-buoc;
	list-style: none;
	padding-left: 0;
	margin-bottom: var(--s-4);
}
.dvs-than ol.dvs-buoc-bai > li {
	position: relative;
	counter-increment: dvs-buoc;
	padding-left: 46px;
	margin-bottom: var(--s-2);
	line-height: 1.75;
}
.dvs-than ol.dvs-buoc-bai > li:before {
	content: counter(dvs-buoc);
	position: absolute;
	left: 0;
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--r);
	background: var(--c-primary-600);
	color: #fff;
	font-size: var(--t-base);
	font-weight: 700;
	line-height: 1;
}

/* Hỏi đáp nằm giữa thân bài, không có dải nền riêng. */
.dvs-hd-bai { margin: var(--s-3) 0 var(--s-5); border-top: 1px solid var(--c-line); }

/* Tiêu đề khối là liên kết (trang tổng hợp bài): hộp chữ chỉ cao 39px, thiếu
   vài pixel so với ngưỡng chạm. Cho nó đệm dọc thay vì phóng to cỡ chữ. */
.dvs-td a { display: inline-block; padding: 4px 0; }


/* --------------------------------------------------------------------------
   Thẻ "nguyên liệu khác" — ô thứ sáu của lưới nhóm nguyên liệu
   -------------------------------------------------------------------------- */

.dvs-nl-them { background: var(--c-primary-900); border-color: var(--c-primary-900); }
.dvs-nl-them:hover { border-color: var(--c-accent-400); }

.dvs-nl-them-trong {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--s-4);
	color: var(--c-on-dark-soft);
}
.dvs-nl-them-trong:hover { text-decoration: none; color: var(--c-on-dark-soft); }

.dvs-nl-them-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	margin-bottom: var(--s-3);
	border-radius: var(--r);
	background: rgba(255, 255, 255, .1);
	color: var(--c-accent-400);
	flex: 0 0 auto;
}
.dvs-nl-them-ten { display: block; margin-bottom: 8px; font-size: var(--t-lg); font-weight: 700; color: #fff; }
.dvs-nl-them-mo { display: block; font-size: var(--t-base); line-height: 1.7; }
.dvs-nl-them-nut {
	display: block;
	margin-top: auto;
	padding-top: var(--s-3);
	font-size: var(--t-base);
	font-weight: 600;
	color: var(--c-accent-400);
}

/* ==========================================================================
   LƯỢT TINH CHỈNH THỊ GIÁC

   Vẫn giữ nguyên ngôn ngữ phẳng — mảng màu đặc, không gradient, không đổ bóng.
   Phần nâng lên nằm ở nhịp khoảng trắng, thang chữ ở màn hình rộng, và vài
   đường kẻ mảnh làm điểm tựa cho mắt.
   ========================================================================== */

/* Nhịp dải rộng hơn ở màn hình lớn: 88px trên khung 1440 là hơi chật so với
   khối nội dung 1220px. */
@media (min-width: 1200px) {
	:root { --dai-doc: 104px; }
}

/* Thang tiêu đề khối: 31px trên khung 1440 nhỏ so với bề ngang dòng. */
@media (min-width: 1200px) {
	.dvs-td { font-size: clamp(31px, 2.4vw, 38px); }
	.dvs-dan-khoi { font-size: clamp(18px, 1.3vw, 20.5px); }
}

/* Nhãn khối có một vạch ngắn dẫn vào — điểm tựa thị giác cho đầu mỗi dải,
   thay cho việc phải tô đậm hay phóng to. */
.dvs-nhan-khoi {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dvs-nhan-khoi:before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	background: var(--c-accent-400);
}
.dvs-nen-dam .dvs-nhan-khoi:before { background: var(--c-accent-400); }

/* Tiêu đề khối và câu dẫn giãn ra một chút */
.dvs-td-khoi { margin-bottom: var(--s-6); }
.dvs-dan-khoi { max-width: 72ch; }

/* --------------------------------------------------------------------------
   Thẻ: viền trên đổi màu khi trỏ vào, thay cho đổ bóng
   -------------------------------------------------------------------------- */

.dvs-nl-the, .dvs-cn-the, .dvs-the-bai {
	border-top: 3px solid transparent;
	transition: border-color .15s ease;
}
.dvs-nl-the:hover, .dvs-cn-the:hover, .dvs-the-bai:hover { border-top-color: var(--c-accent-400); }

.dvs-nl-chu { padding: var(--s-3) var(--s-3) var(--s-4); }
.dvs-nl-chu h3 { font-size: var(--t-lg); margin-bottom: 6px; }
.dvs-nl-so { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   Dải số liệu: thêm vạch ngăn giữa các ô
   -------------------------------------------------------------------------- */

@media (min-width: 861px) {
	.dvs-so-hang { gap: 0; }
	.dvs-so-o {
		padding: 0 var(--s-4);
		border-left: 1px solid var(--c-on-dark-line);
	}
	.dvs-so-o:first-child { padding-left: 0; border-left: 0; }
}
.dvs-so-o dt { letter-spacing: -0.015em; }

/* Số liệu ở hero cũng vậy */
@media (min-width: 861px) {
	.dvs-hero-so { gap: 0; }
	.dvs-hero-so div {
		flex: 1 1 0;
		max-width: none;
		padding: 0 var(--s-4);
		border-left: 1px solid var(--c-on-dark-line);
	}
	.dvs-hero-so div:first-child { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   Hero: cho ảnh lộ ra nhiều hơn một chút, và cân lại nhịp chữ
   -------------------------------------------------------------------------- */

/* 0.68 là mức thấp nhất còn giữ 4.5:1 cho chữ trắng trên vùng sáng nhất của
   kho ảnh site này; đo lại nếu đổi ảnh hero. */
.dvs-hero-anh .dvs-hero-nen:after { background: rgba(11, 46, 32, .68); }

.dvs-hero-td { letter-spacing: -0.02em; }
.dvs-hero-dan { max-width: 66ch; }
@media (min-width: 1200px) {
	.dvs-hero { min-height: clamp(520px, 46vw, 620px); }
	.dvs-hero-nhan { font-size: var(--t-base); padding: 8px 16px; }
}

/* --------------------------------------------------------------------------
   Bảng: thoáng hơn và có đường kẻ dẫn mắt
   -------------------------------------------------------------------------- */

.dvs2026 th, .dvs2026 td { padding: 14px 16px; }
.dvs2026 thead th { letter-spacing: .03em; font-size: var(--t-sm); text-transform: uppercase; }
.dvs-than table, .dvs-chu table { border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }

/* --------------------------------------------------------------------------
   Khối kinh nghiệm và hỏi đáp: nhấn nhẹ bằng đường kẻ
   -------------------------------------------------------------------------- */

.dvs-kn-muc { border-left-width: 3px; }
.dvs-hd-muc summary { padding: var(--s-3) 0; }
.dvs-hd-muc[open] summary { color: var(--c-primary-700); }

/* --------------------------------------------------------------------------
   Dải mời liên hệ: viền trên bằng màu nhấn
   -------------------------------------------------------------------------- */

.dvs-cta { border-top: 3px solid var(--c-accent-400); }

/* ---------- Ảnh mở đầu bài viết ---------- */
/* Đặt sau hộp E-E-A-T trong header bài, nên phải phá lề dưới của header. */
.dvs2026 .dvs-anh-mo {
	margin: var(--s-5) 0 0;
	position: relative;
}
.dvs2026 .dvs-anh-mo-hinh {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 2px;
	background: var(--c-line);
}
.dvs2026 .dvs-anh-cong {
	margin: var(--s-1) 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--c-muted);
	letter-spacing: .01em;
}
@media (max-width: 720px) {
	.dvs2026 .dvs-anh-mo { margin-top: var(--s-4); }
	.dvs2026 .dvs-anh-cong { font-size: 11.5px; }
}
.dvs2026 .dvs-anh-cong a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--c-line); }
.dvs2026 .dvs-anh-cong a:hover { color: var(--c-ink); border-bottom-color: currentColor; }

/* ---------- Hàng liên kết tầng giữa trong khối silo cuối bài ---------- */
.dvs2026 .dvs-silo-nhan-phu {
	margin: var(--s-5) 0 var(--s-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.dvs2026 .dvs-silo-buoc {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dvs2026 .dvs-silo-buoc li { margin: 0; }
.dvs2026 .dvs-silo-buoc a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--c-line);
	border-radius: 2px;
	font-size: var(--t-sm);
	line-height: 1.4;
	color: var(--c-ink);
	text-decoration: none;
	background: var(--c-surface);
}
.dvs2026 .dvs-silo-buoc a:hover {
	border-color: var(--c-primary-700);
	color: var(--c-primary-700);
}
@media (max-width: 560px) {
	.dvs2026 .dvs-silo-buoc { gap: var(--s-2); }
	.dvs2026 .dvs-silo-buoc a { padding: 8px 12px; }
}

/* ---------- Chia nhóm bài con trên trang trụ ---------- */
.dvs2026 .dvs-bai-tru-nhom {
	margin: var(--s-6) 0 var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 1px solid var(--c-line);
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.35;
}
.dvs2026 .dvs-bai-tru-nhom:first-of-type { margin-top: var(--s-4); }
.dvs2026 .dvs-bai-tru-so {
	margin-left: 8px;
	font-size: 13px;
	font-weight: 400;
	color: var(--c-muted);
}

/* Nhóm ít bài: thu hẹp lưới để hàng không hụt ô bên phải. */
@media (min-width: 900px) {
	.dvs2026 .dvs-luoi-4.dvs-luoi-hep-1 { grid-template-columns: minmax(0, 1fr); max-width: 25%; }
	.dvs2026 .dvs-luoi-4.dvs-luoi-hep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50%; }
	.dvs2026 .dvs-luoi-4.dvs-luoi-hep-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 75%; }
}

/* ---------- Đầu bài nằm trong <article> ---------- */
/* Từ khi H1 chuyển vào trong thẻ <article>, khối đầu bài thừa hưởng luôn phần
   đệm ngang của cột bài viết. Cộng thêm phần đệm của .dvs-bo là trục căn lề
   lệch ra 16px trên điện thoại và 28px trên máy tính. Bỏ phần đệm của .dvs-bo
   ở đúng chỗ này để mọi khối trong bài dùng chung một trục. */
.dvs2026 .article-inner .dvs-dau-bai > .dvs-bo {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Phân trang ---------- */
.dvs2026 .dvs-phan-trang {
	margin: var(--s-6) 0 0;
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-line);
}
.dvs2026 .dvs-phan-trang ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dvs2026 .dvs-phan-trang li { margin: 0; }
.dvs2026 .dvs-phan-trang a,
.dvs2026 .dvs-phan-trang .dvs-pt-nay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--c-line);
	border-radius: 2px;
	font-size: var(--t-sm);
	line-height: 1.2;
	text-decoration: none;
	color: var(--c-ink);
	background: var(--c-surface);
}
.dvs2026 .dvs-phan-trang a:hover {
	border-color: var(--c-primary-700);
	color: var(--c-primary-700);
}
.dvs2026 .dvs-phan-trang .dvs-pt-nay {
	border-color: var(--c-primary-700);
	background: var(--c-primary-700);
	color: #fff;
	font-weight: 600;
}
.dvs2026 .dvs-phan-trang .dvs-pt-cach {
	padding: 0 2px;
	color: var(--c-muted);
}
.dvs2026 .dvs-xem-het { margin: var(--s-4) 0 0; }
.dvs2026 .dvs-xem-het a {
	display: inline-block;
	padding: 11px 20px;
	border: 1px solid var(--c-line);
	border-radius: 2px;
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--c-ink);
	text-decoration: none;
	background: var(--c-surface);
}
.dvs2026 .dvs-xem-het a:hover { border-color: var(--c-primary-700); color: var(--c-primary-700); }
@media (max-width: 560px) {
	.dvs2026 .dvs-phan-trang .dvs-pt-lui a,
	.dvs2026 .dvs-phan-trang .dvs-pt-toi a { padding: 0 12px; }
}
/* paginate_links() của WordPress dùng lớp riêng; cho nó dùng chung kiểu trên. */
.dvs2026 .dvs-phan-trang .page-numbers.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--c-primary-700);
	border-radius: 2px;
	background: var(--c-primary-700);
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 600;
}
.dvs2026 .dvs-phan-trang .page-numbers.dots {
	padding: 0 2px;
	color: var(--c-muted);
}
/* Tiêu đề khối làm liên kết: nới vùng chạm theo chiều dọc mà không đổi nhịp chữ,
   vì padding dọc trên phần tử inline không làm cao thêm dòng. */
.dvs2026 .dvs-td a { padding-block: 4px; }