/* ==========================================================================
BỐ CỤC — một trục lề duy nhất cho cả site
Mọi thứ nhìn thấy trên trang phải bắt đầu ở cùng một đường dọc: đầu trang,
breadcrumb, dải nội dung, chân trang. Trước đây site có ba trục lệch nhau
(khối tự dựng, .row.page-wrapper của theme, hàng width="custom") nên chữ
nhảy ngang vài chục pixel mỗi khi đổi khối.
========================================================================== */
.dvs-bo {
width: 100%;
max-width: var(--bo);
margin: 0 auto;
padding-left: var(--rang);
padding-right: var(--rang);
}
.dvs-dai { padding-top: var(--dai-doc); padding-bottom: var(--dai-doc); }
.dvs-dai-mong { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.dvs-nen-trang { background: var(--c-surface); }
.dvs-nen-panel { background: var(--c-panel); }
.dvs-nen-dam { background: var(--c-primary-900); }
.dvs-nen-vang { background: var(--c-accent-100); }
/* Dải nền tối: đảo toàn bộ màu chữ một lần, đừng sơn lại từng phần tử. */
.dvs-nen-dam,
.dvs-nen-dam p,
.dvs-nen-dam li,
.dvs-nen-dam dd { color: var(--c-on-dark-soft); }
.dvs-nen-dam h1, .dvs-nen-dam h2, .dvs-nen-dam h3,
.dvs-nen-dam h4, .dvs-nen-dam dt, .dvs-nen-dam strong { color: #fff; }
.dvs-nen-dam a { color: var(--c-accent-400); }
.dvs-nen-dam a:hover { color: var(--c-accent-100); }
.dvs-nen-dam .dvs-nhan-khoi { color: var(--c-accent-400); }
/* --------------------------------------------------------------------------
Gỡ đệm thừa của theme mẹ trên trang dựng bằng khối
-------------------------------------------------------------------------- */
.dvs-trang-khoi #content,
.dvs-trang-khoi .page-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; }
.dvs-trang-khoi #content > .row,
.dvs-trang-khoi .page-wrapper > .row { max-width: none; margin: 0; }
.dvs-trang-khoi #content .large-12.col { padding: 0; }
/* Trang thường vẫn cần khoảng thở, nhưng lấy từ thang cách chứ không từ theme. */
.dvs2026:not(.dvs-trang-khoi) #content .page-wrapper { padding: var(--s-6) 0 var(--s-8); }
/* --------------------------------------------------------------------------
Kéo hàng/cột của theme mẹ về ĐÚNG trục lề của .dvs-bo
Theme mẹ dựng .row rộng 1190px với cột đệm 15px, còn .dvs-bo rộng 1220px với
đệm var(--rang). Hai công thức khác nhau nên thân bài viết lệch khỏi đầu
trang và breadcrumb khoảng 10px ở khổ tablet — đủ để mắt thấy chữ nhảy ngang
khi cuộn qua ranh giới giữa hai khối.
-------------------------------------------------------------------------- */
.dvs2026 #content .row,
.dvs2026 .page-wrapper > .row,
.dvs2026 .blog-wrapper > .row { max-width: var(--bo); margin-left: auto; margin-right: auto; }
.dvs2026 #content .row > .col,
.dvs2026 .page-wrapper > .row > .col,
.dvs2026 .blog-wrapper > .row > .col { padding-left: var(--rang); padding-right: var(--rang); }
/* --------------------------------------------------------------------------
Đầu trang của theme mẹ
-------------------------------------------------------------------------- */
.dvs2026 #masthead,
.dvs2026 .header-wrapper { border-bottom: 1px solid var(--c-line); }
.dvs2026 .header-main { background: #fff; }
.dvs2026 .header-bottom { display: none; }
.dvs2026 .header-main .nav > li > a {
font-size: var(--t-base);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--c-ink);
}
.dvs2026 .header-main .nav > li > a:hover,
.dvs2026 .header-main .nav > li.current-menu-item > a { color: var(--c-primary-600); }
.dvs2026 .nav-line-bottom > li > a:before { background: var(--c-primary-600); }
.dvs2026 .header-main .nav .dvs-icon { flex: 0 0 auto; margin-right: 6px; opacity: .75; }
.dvs2026 .header-main .nav > li > a { display: flex; align-items: center; }
.dvs2026 .nav-dropdown > li > a .dvs-icon { display: none; }
.dvs2026 .nav-dropdown {
border: 1px solid var(--c-line);
border-radius: var(--r);
padding: 8px;
box-shadow: none;
}
.dvs2026 .nav-dropdown > li > a {
font-size: var(--t-base);
padding: 10px 12px;
border-radius: 4px;
text-transform: none;
color: var(--c-body);
}
.dvs2026 .nav-dropdown > li > a:hover { background: var(--c-panel); color: var(--c-primary-700); }
/* --------------------------------------------------------------------------
Breadcrumb
-------------------------------------------------------------------------- */
.dvs-breadcrumb { background: var(--c-panel); border-bottom: 1px solid var(--c-line); }
.dvs-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 6px;
margin: 0;
padding: 11px 0;
list-style: none;
font-size: var(--t-sm);
color: var(--c-muted);
}
.dvs-breadcrumb li { margin: 0; display: flex; align-items: center; }
.dvs-breadcrumb li + li:before {
content: "";
width: 5px; height: 5px;
margin-right: 8px;
border-right: 1.5px solid var(--c-line-dam);
border-bottom: 1.5px solid var(--c-line-dam);
transform: rotate(-45deg);
}
.dvs-breadcrumb a { color: var(--c-muted); }
.dvs-breadcrumb a:hover { color: var(--c-primary-700); }
.dvs-breadcrumb [aria-current] { color: var(--c-ink); font-weight: 500; }
/* --------------------------------------------------------------------------
Đầu trang tự dựng
-------------------------------------------------------------------------- */
.dvs-dau-trang { padding: var(--s-6) 0 var(--s-4); }
.dvs-dau-trang .dvs-tieu-de { margin: 0 0 var(--s-2); }
.dvs-dau-trang .dvs-dan { font-size: var(--t-lg); color: var(--c-muted); margin: 0; max-width: 74ch; }
.dvs-nhan-hang { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-2); }
.dvs-nhan {
display: inline-block;
padding: 5px 12px;
border-radius: var(--r-pill);
background: var(--c-primary-600);
color: #fff;
font-size: var(--t-xs);
font-weight: 600;
}
.dvs-nhan:hover { background: var(--c-primary-800); color: #fff; text-decoration: none; }
.dvs-nhan-phu { background: var(--c-panel); color: var(--c-primary-700); }
.dvs-nhan-phu:hover { background: var(--c-primary-100); color: var(--c-primary-800); }
.dvs-ghi-cong {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: var(--s-3) 0 0;
padding-top: var(--s-2);
border-top: 1px solid var(--c-line);
font-size: var(--t-sm);
color: var(--c-muted);
}
.dvs-ghi-cong a { color: var(--c-primary-700); font-weight: 600; }
/* --------------------------------------------------------------------------
Thân bài
-------------------------------------------------------------------------- */
/* Nhân chốt: nội dung chạy hết khổ trang, KHÔNG bó về cột hẹp.
Bù lại bằng giãn dòng 1.85 và khoảng cách đoạn rộng, vì dòng dài mà khít
nhau thì mắt lạc dòng khi xuống hàng. */
.dvs-than { font-size: var(--t-md); line-height: 1.85; }
.dvs-than > p { margin-bottom: var(--s-3); }
.dvs-than h2 { margin: var(--s-7) 0 var(--s-2); scroll-margin-top: 96px; }
.dvs-than h3 { margin: var(--s-5) 0 var(--s-1); }
.dvs-than ul, .dvs-than ol { margin-bottom: var(--s-3); }
.dvs-than li { line-height: 1.75; }
.dvs-than img { border-radius: var(--r); margin: var(--s-3) 0; }
.dvs-than table { margin-bottom: var(--s-4); }
.dvs-than > *:first-child { margin-top: 0; }
/* --------------------------------------------------------------------------
Lưới dùng lại
-------------------------------------------------------------------------- */
.dvs-luoi-2, .dvs-luoi-3, .dvs-luoi-4 { display: grid; gap: var(--s-3); }
.dvs-luoi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dvs-luoi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dvs-luoi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dvs-cot-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dvs-cot-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dvs-cot-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
.dvs-luoi-4, .dvs-cot-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dvs-luoi-3, .dvs-cot-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.dvs-luoi-2, .dvs-luoi-3, .dvs-luoi-4,
.dvs-cot-2, .dvs-cot-3, .dvs-cot-4 { grid-template-columns: minmax(0, 1fr); }
}
/* --------------------------------------------------------------------------
Chân trang
-------------------------------------------------------------------------- */
.dvs2026 .footer-wrapper { background: var(--c-primary-900); }
.dvs2026 #footer .widget > .widget-title,
.dvs2026 #footer .widget-title {
color: #fff;
font-size: var(--t-base);
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
}
.dvs2026 #footer, .dvs2026 #footer p, .dvs2026 #footer li { color: var(--c-on-dark-soft); }
.dvs2026 #footer a { color: var(--c-on-dark-soft); }
.dvs2026 #footer a:hover { color: var(--c-accent-400); }
.dvs2026 .absolute-footer { background: var(--c-primary-900); border-top: 1px solid var(--c-on-dark-line); }
.dvs2026 .absolute-footer, .dvs2026 .absolute-footer a { color: rgba(255,255,255,.66); font-size: var(--t-sm); }
/* Widget của theme mẹ hay tự đặt nền trắng ở chân trang tối — gỡ sạch. */
.dvs2026 #footer .widget,
.dvs2026 #footer .widget-area { background: transparent; }
/* Khoảng cuối trang phải chừa chỗ cho thanh hành động dính đáy, nếu không
nó che mất dòng bản quyền. */
@media (max-width: 849px) {
.dvs2026 .absolute-footer { padding-bottom: 76px; }
}
/* ==========================================================================
Chân trang tự dựng
========================================================================== */
.dvs2026 #footer .dvs-ct { padding: var(--s-8) 0 var(--s-4); color: var(--c-on-dark-soft); }
.dvs2026 #footer .dvs-ct-dau {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-6);
padding-bottom: var(--s-5);
margin-bottom: var(--s-5);
border-bottom: 1px solid var(--c-on-dark-line);
}
.dvs2026 #footer .dvs-ct-thuong-hieu { max-width: 56ch; }
.dvs2026 #footer .dvs-ct-ten { margin: 0 0 8px; font-size: var(--t-xl); font-weight: 700; color: #fff; }
.dvs2026 #footer .dvs-ct-mo { margin: 0; font-size: var(--t-base); line-height: 1.7; }
.dvs2026 #footer .dvs-ct-goi { flex: 0 0 auto; text-align: right; }
.dvs2026 #footer .dvs-ct-hotline { display: block; font-size: var(--t-3xl); font-weight: 700; line-height: 1.1; color: var(--c-accent-400); }
.dvs2026 #footer .dvs-ct-hotline:hover { color: var(--c-accent-100); text-decoration: none; }
.dvs2026 #footer .dvs-ct-gio { margin: 4px 0 var(--s-2); font-size: var(--t-sm); }
/* Bốn cột phải cao bằng nhau dù số dòng khác nhau: dùng grid chứ không float. */
.dvs2026 #footer .dvs-ct-cot {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-4);
align-items: start;
}
.dvs2026 #footer .dvs-ct-td {
margin: 0 0 var(--s-2);
font-size: var(--t-sm);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: #fff;
}
.dvs2026 #footer .dvs-ct-o ul { margin: 0; padding: 0; list-style: none; }
.dvs2026 #footer .dvs-ct-o li { margin: 0 0 9px; font-size: var(--t-base); line-height: 1.6; }
.dvs2026 #footer .dvs-ct-o a { color: var(--c-on-dark-soft); }
.dvs2026 #footer .dvs-ct-o a:hover { color: var(--c-accent-400); }
.dvs2026 #footer .dvs-ct-dc li { margin-bottom: 14px; }
.dvs2026 #footer .dvs-ct-dc-ten { display: block; color: #fff; font-weight: 600; }
.dvs2026 #footer .dvs-ct-duoi {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-2) var(--s-4);
margin-top: var(--s-6);
padding-top: var(--s-3);
border-top: 1px solid var(--c-on-dark-line);
}
.dvs2026 #footer .dvs-ct-mxh { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin: 0; padding: 0; list-style: none; }
.dvs2026 #footer .dvs-ct-mxh li { margin: 0; }
.dvs2026 #footer .dvs-ct-mxh a { display: inline-block; padding: 12px 0; font-size: var(--t-sm); font-weight: 600; color: var(--c-on-dark-soft); }
.dvs2026 #footer .dvs-ct-mxh a:hover { color: var(--c-accent-400); }
.dvs2026 #footer .dvs-ct-ban-quyen { margin: 0; font-size: var(--t-sm); color: rgba(255,255,255,.62); }
/* Luật trong media query phải mang ĐÚNG tiền tố của luật nó định đè.
Viết .dvs-ct-cot trong khi luật desktop là .dvs2026 #footer .dvs-ct-cot thì
media query không có tác dụng gì, và lỗi chỉ lộ ra ở một khổ màn hình. */
@media (max-width: 980px) {
.dvs2026 #footer .dvs-ct-dau { flex-direction: column; }
.dvs2026 #footer .dvs-ct-goi { text-align: left; }
.dvs2026 #footer .dvs-ct-cot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
}
@media (max-width: 560px) {
.dvs2026 #footer .dvs-ct-cot { grid-template-columns: minmax(0, 1fr); }
.dvs2026 #footer .dvs-ct-duoi { flex-direction: column; align-items: flex-start; }
.dvs2026 #footer .dvs-ct-hotline { font-size: var(--t-2xl); }
}
/* Khối gọi ở đầu trang */
.dvs-hd-goi { display: inline-flex; align-items: center; gap: 10px; color: var(--c-ink); }
.dvs-hd-goi:hover { text-decoration: none; color: var(--c-primary-700); }
.dvs-hd-goi .dvs-icon { color: var(--c-primary-600); flex: 0 0 auto; }
.dvs-hd-goi small { display: block; font-size: var(--t-xs); color: var(--c-muted); line-height: 1.2; }
.dvs-hd-goi strong { display: block; font-size: var(--t-md); font-weight: 700; line-height: 1.25; }
/* Dải bản quyền của theme mẹ để trống vì chân trang tự dựng đã có dòng đó —
để nguyên là một dải màu cao 60px không chữ. */
.dvs2026 .absolute-footer { display: none; }
.dvs2026 #footer .footer-1, .dvs2026 #footer .footer-2 { padding: 0; border: 0; }
.dvs2026 #footer .section-content > .row { max-width: none; margin: 0; }
.dvs2026 #footer .col { padding: 0; }
/* --------------------------------------------------------------------------
Nút biểu tượng ở đầu trang (mở menu, tìm kiếm)
Theme mẹ sơn chúng bằng màu primary nên trên nền trắng chúng thành hai ô
vuông xanh đặc, nặng hơn cả logo. Ở đây chúng chỉ là biểu tượng.
-------------------------------------------------------------------------- */
.dvs2026 .header-button .button.icon,
.dvs2026 .nav-icon .button.icon,
.dvs2026 .header-search .button.icon {
background: transparent !important;
border: 0;
color: var(--c-ink) !important;
width: 44px;
height: 44px;
min-width: 44px;
border-radius: var(--r);
box-shadow: none;
}
.dvs2026 .header-button .button.icon:hover,
.dvs2026 .header-search .button.icon:hover { background: var(--c-panel) !important; }
.dvs2026 .header-button .button.icon .icon-menu,
.dvs2026 .header-search .button.icon .icon-search { font-size: 20px; }
/* Ngăn kéo menu trên điện thoại */
.dvs2026 .mfp-content .mobile-sidebar { background: #fff; }
.dvs2026 .off-canvas-left .mfp-content { width: min(320px, 86vw); }
.dvs2026 .nav-sidebar > li > a {
padding: 14px 0;
font-size: var(--t-md);
font-weight: 600;
color: var(--c-ink);
text-transform: none;
letter-spacing: 0;
}
.dvs2026 .nav-sidebar li a { min-height: 48px; display: flex; align-items: center; }
.dvs2026 .nav-sidebar .children a { font-size: var(--t-base); font-weight: 400; color: var(--c-body); }
.dvs2026 .nav-sidebar > li { border-bottom: 1px solid var(--c-line); }
.dvs2026 .nav-sidebar .toggle { min-width: 44px; min-height: 44px; color: var(--c-muted); }
/* Nút trong chân trang: luật màu chữ của #footer (0,2,1) đè lên .dvs-nut-vang
(0,1,0), làm chữ trên nút vàng thành trắng mờ — 2.25:1. */
.dvs2026 #footer .dvs-nut-vang { color: var(--c-ink); }
.dvs2026 #footer .dvs-nut-vang:hover { color: var(--c-ink); }
.dvs2026 #footer .dvs-nut-vien-sang { color: #fff; }
/* --------------------------------------------------------------------------
Đầu trang phải nằm trên ĐÚNG trục lề của nội dung
Theme mẹ dựng hàng đầu trang rộng 1190px với đệm cột 15px, trong khi .dvs-bo
rộng 1220px với đệm var(--rang). Ở khung 1440px, logo bắt đầu ở 140 còn chữ
trong thân trang bắt đầu ở 138 — lệch 2px, đủ để mắt thấy logo không thẳng
hàng với tiêu đề ngay bên dưới nó.
-------------------------------------------------------------------------- */
.dvs2026 .header-main .flex-row,
.dvs2026 .header-top .flex-row,
.dvs2026 .header-bottom .flex-row,
.dvs2026 #top-bar .flex-row {
max-width: var(--bo);
margin-left: auto;
margin-right: auto;
padding-left: var(--rang);
padding-right: var(--rang);
}
/* Hai ô biểu tượng ở rìa phải được lùi ra sát trục, không để đệm mặc định của
theme mẹ đẩy chúng vào trong. */
.dvs2026 .header-main .flex-row > .flex-right > .nav > li:last-child > a.icon,
.dvs2026 .header-main .flex-row > .flex-right > .nav > li:last-child > .header-button > a.icon { margin-right: -10px; }
/* Ảnh đại diện bài viết cao 776px ở khung 1440 là chiếm trọn màn hình đầu tiên
trước khi đọc được chữ nào. Ghim tỉ lệ 16:7. */
.dvs-anh-bai img {
width: 100%;
height: auto;
aspect-ratio: 16 / 7;
object-fit: cover;
max-height: 420px;
}
/* --------------------------------------------------------------------------
Menu đầu trang ở khổ màn hình trung gian (850–1300px)
Sáu mục menu cộng logo, khối gọi và ô tìm kiếm vừa đúng ở 1440px nhưng tràn
ở 1180px: hai mục cuối rơi xuống hàng thứ hai và đè lên nội dung, vì hàng
đầu trang có chiều cao cố định. Không cho hàng xuống dòng, và thu gọn dần.
-------------------------------------------------------------------------- */
.dvs2026 .header-main .flex-row { flex-wrap: nowrap; }
.dvs2026 .header-main .flex-row > .flex-col { min-width: 0; }
.dvs2026 .header-main ul.nav { flex-wrap: nowrap; }
@media (max-width: 1340px) {
.dvs2026 .header-main .nav > li > a { font-size: var(--t-sm); }
.dvs2026 .header-main .nav > li { margin: 0 4px; }
.dvs2026 .header-main .nav .dvs-icon { margin-right: 4px; }
}
@media (max-width: 1150px) {
/* Khối gọi nhường chỗ cho menu; số điện thoại vẫn còn ở thanh trên và ở
thanh hành động dính đáy.
Phải viết tới `ul.nav > li.header-block` (0,3,2) chứ không phải
`.header-block` (0,3,0): luật canh tâm `ul.nav > li { display: flex }`
ở trên có trọng số (0,3,1) nên nó thắng, và khối gọi vẫn hiện — bị bóp
còn 47px, chữ xuống bốn dòng và tràn xuống đè lên hero. */
.dvs2026 .header-main ul.nav > li.header-block { display: none; }
}
@media (max-width: 980px) {
.dvs2026 .header-main .nav .dvs-icon { display: none; }
}
/* Thanh trên: khẩu hiệu bên trái, số điện thoại và email bên phải. */
.dvs2026 #top-bar { font-size: var(--t-sm); }
.dvs2026 #top-bar .nav > li > a { font-size: var(--t-sm); color: rgba(255,255,255,.88); }
.dvs2026 #top-bar .nav > li > a:hover { color: var(--c-accent-400); }
/* Theme mẹ đặt chữ thanh trên ở 10.1px — dưới ngưỡng đọc được trên điện thoại.
Luật .nav-small của nó có trọng số cao hơn nên phải ghi đè có tiền tố. */
.dvs2026 #top-bar .html_topbar_left,
.dvs2026 #top-bar .nav.nav-small > li,
.dvs2026 #top-bar .nav > li,
.dvs2026 #top-bar .nav > li > a { font-size: var(--t-sm); }
.dvs2026 #top-bar .html_topbar_left { color: rgba(255,255,255,.88); }
/* Dưới 720px thì ẩn cả thanh trên, đừng chỉ ẩn chữ trong nó: giấu chữ mà giữ
thanh là để lại một dải xanh đậm cao 20px không mang thông tin gì. Số điện
thoại vẫn nằm ở thanh hành động dính đáy. */
@media (max-width: 720px) {
.dvs2026 #top-bar { display: none; }
}
/* Mọi thứ trong hàng đầu trang canh giữa theo chiều dọc: menu, khối gọi và ô
tìm kiếm đang lệch nhau 5–8px vì mỗi cột tự canh theo chiều cao riêng. */
.dvs2026 .header-main .flex-row,
.dvs2026 .header-main ul.nav { align-items: center; }
/* KHÔNG biến thành hộp flex.
Menu con là phần tử position:absolute không đặt top/bottom, nên nó lấy vị
trí tĩnh từ chính . Khi là hộp flex có align-items:center, vị trí
tĩnh đó bị canh giữa theo chiều dọc — menu con nhảy lên nửa chiều cao của
chính nó (−82px) và phủ ngược lên đầu trang. Thẻ bên trong đã tự là
flex canh giữa rồi, nên không cần gì thêm. */
/* Mục menu kéo cao bằng hàng đầu trang để menu con mở đúng mép dưới của đầu
trang, không cắt ngang nó. Chữ vẫn nằm giữa vì thẻ bên trong tự canh. */
.dvs2026 .header-main ul.header-nav-main { align-self: stretch; height: 100%; }
.dvs2026 .header-main ul.header-nav-main > li { align-self: stretch; }
.dvs2026 .header-main ul.header-nav-main > li > a { height: 100%; }
/* Khối gọi nằm trong một đã kéo cao nên phải tự canh giữa. Ở ĐÂY dùng
flex được vì này không chứa menu con — luật cấm ở trên chỉ áp cho mục
có dropdown. `height:100%` không ăn vì chiều cao của là giá trị dùng
từ align-self:stretch chứ không phải chiều cao xác định. */
.dvs2026 .header-main li.header-block { display: flex; align-items: center; }
.dvs2026 .header-main ul.nav > li > .nav-dropdown { top: 100%; }
/* --------------------------------------------------------------------------
Trang ngắn phải đẩy chân trang xuống đáy màn hình
Theme mẹ sơn `html` bằng màu chân trang (#0b2e20). Trên trang ngắn — kết quả
tìm kiếm rỗng, trang 404, trang chính sách ngắn — thân trang không cao bằng
khung nhìn, và phần còn lại lộ ra một mảng xanh đậm trống trơn cao cả nghìn
pixel. Dựng bố cục cột để chân trang luôn nằm ở đáy.
-------------------------------------------------------------------------- */
html { background: var(--c-surface) !important; }
.dvs2026 #wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.dvs2026 #wrapper > #main { flex: 1 0 auto; }
.dvs2026 #wrapper > .footer-wrapper { flex: 0 0 auto; }
/* --------------------------------------------------------------------------
Canh tâm dọc cho hàng đầu trang
Hai nguyên nhân cộng lại làm bốn cụm trong hàng đầu trang nằm ở bốn độ cao
khác nhau (logo 103, menu 99, khối gọi 92, ô tìm 92 — trong khi tâm hàng là
103,5):
1. Luật lề chung `ul, ol { margin: 0 0 var(--s-2) }` ở base.css rò vào mọi
danh sách điều hướng của theme mẹ. Mỗi `ul.nav` vì thế mang thêm 16px lề
dưới, và vì cột bọc nó là `display:block` nên phần lề đó đẩy cả cụm lên
lệch khỏi tâm.
2. Các cột `.flex-col` của theme mẹ là khối chứ không phải hộp flex, nên
`align-items: center` của hàng chỉ canh được cái cột, không canh được
thứ nằm trong cột.
Sửa cả hai: gỡ lề khỏi danh sách điều hướng, và cho mỗi cột tự canh giữa
những gì nó chứa.
-------------------------------------------------------------------------- */
.dvs2026 .header-main ul,
.dvs2026 .header-top ul,
.dvs2026 .header-bottom ul,
.dvs2026 #top-bar ul,
.dvs2026 #masthead .nav { margin: 0; padding-left: 0; }
.dvs2026 .header-main ul > li,
.dvs2026 #top-bar ul > li { margin-bottom: 0; }
.dvs2026 #masthead .flex-row > .flex-col,
.dvs2026 #top-bar .flex-row > .flex-col {
display: flex;
align-items: center;
align-self: stretch;
}
/* Cột giữa và cột phải phải đẩy nội dung về đúng phía của nó sau khi đổi
sang flex. */
.dvs2026 #masthead .flex-row > .flex-right,
.dvs2026 #top-bar .flex-row > .flex-right { justify-content: flex-end; }
.dvs2026 #masthead .flex-row > .flex-center,
.dvs2026 #top-bar .flex-row > .flex-center { justify-content: center; }
/* Khối pháp nhân ở chân trang */
.dvs2026 #footer .dvs-ct-phap-nhan p { margin: 0 0 4px; font-size: var(--t-sm); color: rgba(255,255,255,.7); }
.dvs2026 #footer .dvs-ct-phap-nhan p strong { color: rgba(255,255,255,.9); }
.dvs2026 #footer .dvs-ct-ban-quyen { margin-top: 8px; }