/*
Theme Name:   Dịch Vụ Cần Thơ
Theme URI:    https://dichvu.cantho.us
Description:  Giao diện cho dichvu.cantho.us — nền kem, chữ đen đậm, điểm nhấn cam. Theme con của Hello Elementor, giữ nguyên khả năng dựng trang bằng Elementor.
Author:       Dịch Vụ Cần Thơ
Template:     hello-elementor
Version:      1.0.0
Text Domain:  dichvu-cantho
*/

/* ===========================================================================
   1. BẢNG MÀU VÀ BIẾN
   Mọi màu, khoảng cách, bo góc đều khai báo ở đây. Sửa một chỗ, đổi cả site.
   Đừng viết mã màu trực tiếp trong component — sẽ không đổi theme được nữa.
   =========================================================================== */

:root {
	/* Nền */
	--dv-kem:          #F7F4EF;  /* nền trang */
	--dv-kem-dam:      #EFEAE1;  /* nền khối xen kẽ */
	--dv-trang:        #FFFFFF;  /* nền thẻ */

	/* Chữ */
	--dv-muc:          #0E0E0E;  /* tiêu đề, chữ chính */
	--dv-xam:          #6B6660;  /* chữ phụ */
	--dv-xam-nhat:     #9A948C;  /* nhãn, chú thích */

	/* Cam — màu thương hiệu */
	--dv-cam:          #F4650C;
	--dv-cam-dam:      #D9550A;  /* trạng thái hover */
	--dv-cam-nhat:     #FDE8D7;  /* nền nhạt */

	/* Đen — thẻ tương phản */
	--dv-den:          #121212;
	--dv-den-nhat:     #1E1E1E;

	/* Đường kẻ */
	--dv-vien:         #E4DED4;
	--dv-vien-dam:     #D3CBBE;

	/* Trạng thái pháp lý của dịch vụ — dùng cho nhãn vai trò */
	--dv-xanh:         #2E7D4F;  /* trọn gói */
	--dv-vang:         #B8860B;  /* cùng đối tác */
	--dv-do:           #C0392B;  /* hướng dẫn & chuẩn bị hồ sơ */

	/* Phông */
	--dv-font:         'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--dv-font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

	/* Bo góc */
	--dv-bo:           14px;
	--dv-bo-lon:       22px;
	--dv-bo-tron:      999px;

	/* Khoảng cách dọc giữa các khối */
	--dv-khoang:       clamp(64px, 9vw, 120px);

	/* Bề rộng nội dung */
	--dv-rong:         1240px;
	--dv-rong-chu:     720px;  /* bề rộng tối đa của đoạn văn, để dễ đọc */
}

/* ===========================================================================
   2. NỀN TẢNG
   =========================================================================== */

html { scroll-behavior: smooth; }

body {
	background: var(--dv-kem);
	color: var(--dv-muc);
	font-family: var(--dv-font);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* Khoảng đệm hai bên trên điện thoại. Không có dòng này là chữ dính mép màn hình. */
.dv-vung {
	width: 100%;
	max-width: var(--dv-rong);
	margin-inline: auto;
	padding-inline: 20px;
}

.dv-khoi { padding-block: var(--dv-khoang); }
.dv-khoi--kem  { background: var(--dv-kem-dam); }
.dv-khoi--trang { background: var(--dv-trang); }

/* --- Tiêu đề ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dv-font);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--dv-muc);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.02em; }
h4 { font-size: 1.12rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; max-width: var(--dv-rong-chu); }
p:last-child { margin-bottom: 0; }

a { color: var(--dv-muc); text-decoration-color: var(--dv-cam); text-underline-offset: 3px; }
a:hover { color: var(--dv-cam); }

/* --- Nhãn chữ nhỏ in hoa, kiểu kỹ thuật ---------------------------------
   Đây là chi tiết làm nên cảm giác "hệ thống" của giao diện: chữ mono, in hoa,
   giãn chữ rộng, xám nhạt. Dùng cho nhãn mục, số thứ tự, chú thích ảnh.      */

.dv-nhan {
	font-family: var(--dv-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dv-xam-nhat);
	display: block;
	margin-bottom: 1.1rem;
}

.dv-nhan--cam { color: var(--dv-cam); }
.dv-nhan--sang { color: rgba(255,255,255,.55); }

/* ===========================================================================
   3. NÚT
   =========================================================================== */

.dv-nut {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border: 1px solid transparent;
	border-radius: var(--dv-bo-tron);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.dv-nut:hover { transform: translateY(-2px); }
.dv-nut:active { transform: translateY(0); }
.dv-nut:focus-visible { outline: 2px solid var(--dv-cam); outline-offset: 3px; }

.dv-nut--cam   { background: var(--dv-cam); color: #fff; }
.dv-nut--cam:hover { background: var(--dv-cam-dam); color: #fff; }

.dv-nut--den   { background: var(--dv-den); color: #fff; }
.dv-nut--den:hover { background: #000; color: #fff; }

.dv-nut--vien  { background: transparent; color: var(--dv-muc); border-color: var(--dv-vien-dam); }
.dv-nut--vien:hover { border-color: var(--dv-muc); color: var(--dv-muc); }

/* Liên kết văn bản có gạch chân — kiểu "See our method" trong ảnh mẫu */
.dv-lien-ket {
	font-size: 0.95rem;
	font-weight: 500;
	border-bottom: 1px solid var(--dv-vien-dam);
	padding-bottom: 3px;
	text-decoration: none;
}
.dv-lien-ket:hover { border-color: var(--dv-cam); }

/* ===========================================================================
   4. ĐẦU TRANG
   Thanh điều hướng dạng viên thuốc nổi trên nền kem.
   =========================================================================== */

.dv-dau-trang {
	position: sticky;
	top: 0;
	z-index: 900;
	padding-block: 16px;
	background: color-mix(in srgb, var(--dv-kem) 88%, transparent);
	backdrop-filter: blur(12px);
	transition: box-shadow .25s ease;
}

.dv-dau-trang.da-cuon { box-shadow: 0 1px 0 var(--dv-vien); }

.dv-dau-trang__trong {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.dv-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
	white-space: nowrap;
}
.dv-logo:hover { color: var(--dv-muc); }

/* Dấu hiệu tròn. Khai báo width/height cố định để trình duyệt chừa sẵn chỗ,
   không bị giật bố cục lúc ảnh tải xong. */
.dv-logo__dau { width: 44px; height: 44px; display: block; flex: none; }

/* Chỉ "CẦN THƠ" màu cam — dùng `>` để không ăn vào chính thẻ bọc chữ */
.dv-logo__chu > span { color: var(--dv-cam); }

/* Logo riêng đặt trong Tùy biến WordPress */
.custom-logo { max-height: 48px; width: auto; display: block; }

/* Khối menu giữa, bo tròn, nền trắng */
.dv-menu {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	background: var(--dv-trang);
	border: 1px solid var(--dv-vien);
	border-radius: var(--dv-bo-tron);
}

.dv-menu ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.dv-menu li { position: relative; }

.dv-menu a {
	display: block;
	padding: 9px 17px;
	border-radius: var(--dv-bo-tron);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s ease, color .16s ease;
}

.dv-menu a:hover,
.dv-menu .current-menu-item > a { background: var(--dv-kem-dam); color: var(--dv-muc); }

/* Menu con */
.dv-menu .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	min-width: 250px;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 8px;
	background: var(--dv-trang);
	border: 1px solid var(--dv-vien);
	border-radius: var(--dv-bo);
	box-shadow: 0 16px 44px rgba(14,14,14,.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.dv-menu li:hover > .sub-menu,
.dv-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dv-menu .sub-menu a { padding: 10px 14px; border-radius: 9px; }

.dv-dau-trang__phai { display: flex; align-items: center; gap: 12px; }

/* Nút ba gạch — chỉ hiện trên điện thoại */
.dv-burger {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: var(--dv-trang);
	border: 1px solid var(--dv-vien);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}
.dv-burger span {
	display: block; position: relative;
	width: 17px; height: 1.5px; background: var(--dv-muc);
	transition: transform .2s ease, opacity .2s ease;
}
.dv-burger span::before,
.dv-burger span::after {
	content: ''; position: absolute; left: 0;
	width: 17px; height: 1.5px; background: var(--dv-muc);
	transition: transform .2s ease;
}
.dv-burger span::before { top: -5.5px; }
.dv-burger span::after  { top: 5.5px; }

.dv-burger[aria-expanded="true"] span { background: transparent; }
.dv-burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.dv-burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* ===========================================================================
   5. KHỐI MỞ ĐẦU (HERO)
   =========================================================================== */

.dv-hero { padding-block: clamp(48px, 7vw, 88px) var(--dv-khoang); }

.dv-hero__luoi {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* Chưa có ảnh mở đầu thì chữ chiếm trọn chiều ngang, không để lại ô trống.
   `:only-child` nhận ra trường hợp khối ảnh không được in ra. */
.dv-hero__luoi > *:only-child { grid-column: 1 / -1; max-width: 900px; }

.dv-hero h1 { margin-bottom: 26px; }

.dv-hero__mo {
	font-size: 1.06rem;
	color: var(--dv-xam);
	max-width: 480px;
	margin-bottom: 34px;
}

.dv-hero__nut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.dv-hero__anh {
	position: relative;
	border-radius: var(--dv-bo-lon);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--dv-cam-nhat), var(--dv-kem-dam));
}
.dv-hero__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dải chân hero: "01 / 04" bên trái, các từ khóa bên phải */
.dv-hero__chan {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: 22px;
	border-top: 1px solid var(--dv-vien);
}
.dv-hero__chan .dv-nhan { margin: 0; }
.dv-hero__tu-khoa { display: flex; gap: 18px; flex-wrap: wrap; }

/* ===========================================================================
   6. ĐẦU MỤC — nhãn + tiêu đề + mô tả nằm cạnh nhau
   =========================================================================== */

.dv-dau-muc {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(24px, 4vw, 60px);
	align-items: end;
	margin-bottom: clamp(36px, 4.5vw, 56px);
}
.dv-dau-muc h2 { margin: 0; }
.dv-dau-muc p { color: var(--dv-xam); margin: 0; }

/* Cột số liệu bên phải (38 / 12 trong ảnh mẫu) */
.dv-so-lieu { display: flex; gap: 34px; }
.dv-so-lieu__o { padding-left: 20px; border-left: 1px solid var(--dv-vien-dam); }
.dv-so-lieu__so {
	display: block;
	font-size: 2.6rem; font-weight: 800; line-height: 1;
	letter-spacing: -0.04em; margin-bottom: 6px;
}
.dv-so-lieu__ten { font-size: 0.82rem; color: var(--dv-xam); line-height: 1.35; }

/* ===========================================================================
   7. THẺ DỊCH VỤ
   =========================================================================== */

.dv-luoi { display: grid; gap: 20px; }
.dv-luoi--2 { grid-template-columns: repeat(2, 1fr); }
.dv-luoi--3 { grid-template-columns: repeat(3, 1fr); }
.dv-luoi--4 { grid-template-columns: repeat(4, 1fr); }

.dv-the {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--dv-trang);
	border: 1px solid var(--dv-vien);
	border-radius: var(--dv-bo-lon);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dv-the:hover {
	transform: translateY(-4px);
	border-color: var(--dv-vien-dam);
	box-shadow: 0 18px 44px rgba(14,14,14,.07);
}

.dv-the__so {
	font-family: var(--dv-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	color: var(--dv-xam-nhat);
	margin-bottom: 42px;
}
.dv-the h3 { margin-bottom: 12px; }
.dv-the p { font-size: 0.94rem; color: var(--dv-xam); margin-bottom: 22px; }
.dv-the__chan { margin-top: auto; }

/* Hai biến thể tương phản — thẻ đen và thẻ cam, như bước 02 và 03 trong ảnh */
.dv-the--den {
	background: var(--dv-den);
	border-color: var(--dv-den);
}
.dv-the--den h3, .dv-the--den .dv-the__so { color: #fff; }
.dv-the--den p { color: rgba(255,255,255,.66); }

.dv-the--cam {
	background: var(--dv-cam);
	border-color: var(--dv-cam);
}
.dv-the--cam h3, .dv-the--cam .dv-the__so { color: #fff; }
.dv-the--cam p { color: rgba(255,255,255,.82); }

/* Nhãn nhỏ dạng viên thuốc trong thẻ */
.dv-vien-thuoc {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	background: transparent;
	border: 1px solid var(--dv-vien-dam);
	border-radius: var(--dv-bo-tron);
	font-size: 0.82rem;
	font-weight: 500;
}
.dv-the--den .dv-vien-thuoc,
.dv-the--cam .dv-vien-thuoc { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.1); }

/* ===========================================================================
   8. NHÃN VAI TRÒ PHÁP LÝ
   Mỗi trang dịch vụ phải hiện một trong ba nhãn này. Không phải trang trí —
   đây là cam kết nói thật với khách về việc nào mình được làm thay, việc nào
   pháp luật bắt họ tự đi. Xem tài liệu nghiên cứu pháp lý, Phần B.
   =========================================================================== */

.dv-vai-tro {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 17px;
	border-radius: var(--dv-bo-tron);
	font-size: 0.85rem;
	font-weight: 600;
}
.dv-vai-tro::before {
	content: '';
	width: 7px; height: 7px; border-radius: 50%;
	background: currentColor;
	flex: none;
}
.dv-vai-tro--tron-goi  { background: #E8F3EC; color: var(--dv-xanh); }
.dv-vai-tro--doi-tac   { background: #FBF2DC; color: var(--dv-vang); }
.dv-vai-tro--huong-dan { background: #FBE9E7; color: var(--dv-do); }

/* ===========================================================================
   9. THẺ NGƯỜI — ảnh chân dung, tên, vai trò, câu mô tả
   =========================================================================== */

.dv-nguoi {
	background: var(--dv-trang);
	border: 1px solid var(--dv-vien);
	border-radius: var(--dv-bo-lon);
	overflow: hidden;
}
.dv-nguoi__anh { aspect-ratio: 1 / 1; background: var(--dv-kem-dam); }
.dv-nguoi__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-nguoi__than { padding: 20px; }
.dv-nguoi__ten {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-size: 1.02rem; font-weight: 700; margin-bottom: 3px;
}
.dv-nguoi__ten::after {
	content: ''; width: 7px; height: 7px; border-radius: 50%;
	background: var(--dv-cam); flex: none;
}
.dv-nguoi__vai { font-size: 0.88rem; color: var(--dv-xam); margin-bottom: 16px; }
.dv-nguoi__cau {
	font-family: var(--dv-font-mono);
	font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--dv-xam-nhat); line-height: 1.7;
	padding-top: 14px; border-top: 1px solid var(--dv-vien);
}

/* ===========================================================================
   10. DẢI KÊU GỌI HÀNH ĐỘNG
   =========================================================================== */

.dv-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 5.5vw, 68px);
	background: var(--dv-cam);
	border-radius: var(--dv-bo-lon);
	color: #fff;
}
.dv-cta h2 { color: #fff; max-width: 15ch; }
.dv-cta p  { color: rgba(255,255,255,.88); max-width: 46ch; margin-bottom: 30px; }
.dv-cta .dv-nhan { color: rgba(255,255,255,.72); }

.dv-cta__hang { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dv-cta__chu-thich { font-size: 0.9rem; color: rgba(255,255,255,.85); padding-left: 22px; border-left: 1px solid rgba(255,255,255,.35); }

/* ===========================================================================
   11. NỘI DUNG BÀI VIẾT VÀ TRANG
   =========================================================================== */

.dv-noi-dung { max-width: 800px; }
.dv-noi-dung > * { max-width: 100%; }

.dv-noi-dung h2 { margin-top: 2.1em; padding-top: 0.5em; }
.dv-noi-dung h3 { margin-top: 1.6em; }
.dv-noi-dung ul, .dv-noi-dung ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.dv-noi-dung li { margin-bottom: 0.5em; }

.dv-noi-dung img,
.dv-noi-dung figure img {
	max-width: 100%; height: auto;
	border-radius: var(--dv-bo);
	display: block;
}
.dv-noi-dung figure { margin: 2em 0; }
.dv-noi-dung figcaption {
	font-family: var(--dv-font-mono);
	font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--dv-xam-nhat); margin-top: 11px;
}

.dv-noi-dung blockquote {
	margin: 2em 0; padding: 22px 28px;
	background: var(--dv-cam-nhat);
	border-left: 3px solid var(--dv-cam);
	border-radius: 0 var(--dv-bo) var(--dv-bo) 0;
}
.dv-noi-dung blockquote p:last-child { margin-bottom: 0; }

/* Bảng — dùng nhiều trong các trang pháp lý, phải đọc được trên điện thoại */
.dv-noi-dung table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.8em 0;
	font-size: 0.93rem;
	background: var(--dv-trang);
	border: 1px solid var(--dv-vien);
	border-radius: var(--dv-bo);
	overflow: hidden;
}
.dv-noi-dung th,
.dv-noi-dung td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--dv-vien); vertical-align: top; }
.dv-noi-dung th { background: var(--dv-kem-dam); font-weight: 700; font-size: 0.86rem; }
.dv-noi-dung tr:last-child td { border-bottom: none; }

/* Bọc bảng để cuộn ngang trên màn hình hẹp thay vì vỡ bố cục */
.dv-bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.8em 0; }
.dv-bang-cuon table { margin: 0; min-width: 540px; }

/* Đầu trang bài viết */
.dv-dau-bai { padding-block: clamp(40px, 5vw, 72px) 0; }
.dv-dau-bai h1 { max-width: 20ch; }
.dv-dau-bai__meta {
	display: flex; gap: 18px; flex-wrap: wrap;
	margin-top: 20px; padding-top: 18px;
	border-top: 1px solid var(--dv-vien);
	font-family: var(--dv-font-mono);
	font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--dv-xam-nhat);
}

.dv-anh-dai-dien { margin-block: clamp(28px, 4vw, 48px); border-radius: var(--dv-bo-lon); overflow: hidden; }
.dv-anh-dai-dien img { width: 100%; height: auto; display: block; }

/* ===========================================================================
   12. BIỂU MẪU
   Ô đồng ý xử lý dữ liệu là bắt buộc theo Luật 91/2025/QH15 — không bỏ.
   =========================================================================== */

.dv-form { display: grid; gap: 16px; max-width: 560px; }

.dv-form input[type="text"],
.dv-form input[type="email"],
.dv-form input[type="tel"],
.dv-form select,
.dv-form textarea {
	width: 100%;
	padding: 14px 17px;
	background: var(--dv-trang);
	border: 1px solid var(--dv-vien-dam);
	border-radius: var(--dv-bo);
	font-family: inherit;
	font-size: 0.97rem;
	color: var(--dv-muc);
	transition: border-color .16s ease, box-shadow .16s ease;
}
.dv-form input:focus,
.dv-form select:focus,
.dv-form textarea:focus {
	outline: none;
	border-color: var(--dv-cam);
	box-shadow: 0 0 0 3px var(--dv-cam-nhat);
}
.dv-form textarea { min-height: 130px; resize: vertical; }

.dv-dong-y {
	display: flex; align-items: flex-start; gap: 11px;
	font-size: 0.86rem; color: var(--dv-xam); line-height: 1.55;
}
.dv-dong-y input[type="checkbox"] {
	flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--dv-cam);
}

/* ===========================================================================
   13. CHÂN TRANG
   =========================================================================== */

.dv-chan-trang {
	margin-top: var(--dv-khoang);
	padding-block: clamp(44px, 5vw, 64px) 28px;
	background: var(--dv-trang);
	border-top: 1px solid var(--dv-vien);
}

.dv-chan-trang__luoi {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 36px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--dv-vien);
}

.dv-chan-trang h4 {
	font-family: var(--dv-font-mono);
	font-size: 0.72rem; font-weight: 500;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--dv-xam-nhat); margin-bottom: 18px;
}
.dv-chan-trang ul { list-style: none; margin: 0; padding: 0; }
.dv-chan-trang li { margin-bottom: 11px; }
.dv-chan-trang a { font-size: 0.93rem; color: var(--dv-xam); text-decoration: none; }
.dv-chan-trang a:hover { color: var(--dv-cam); }

/* Khối thông tin pháp nhân — bắt buộc công khai, đừng xóa */
.dv-phap-nhan { font-size: 0.88rem; color: var(--dv-xam); line-height: 1.85; margin-top: 16px; }
.dv-phap-nhan strong { color: var(--dv-muc); }

.dv-chan-trang__day {
	display: flex; justify-content: space-between; align-items: center;
	gap: 18px; flex-wrap: wrap; padding-top: 24px;
	font-size: 0.84rem; color: var(--dv-xam-nhat);
}

/* ===========================================================================
   14. MÀN HÌNH HẸP
   =========================================================================== */

@media (max-width: 1024px) {
	.dv-hero__luoi,
	.dv-dau-muc { grid-template-columns: 1fr; }
	.dv-dau-muc { align-items: start; }
	.dv-luoi--4 { grid-template-columns: repeat(2, 1fr); }
	.dv-luoi--3 { grid-template-columns: repeat(2, 1fr); }
	.dv-chan-trang__luoi { grid-template-columns: 1fr 1fr; }
}

/* Menu bảy mục tiếng Việt chiếm khoảng 750px. Cộng logo và nút kêu gọi thì
   thanh điều hướng cần chừng 1150px mới đủ chỗ. Hẹp hơn mốc này là nút bị đẩy
   ra ngoài màn hình và cả trang cuộn ngang được — nên chuyển sang menu thả
   xuống sớm, ở 1100px chứ không đợi tới cỡ điện thoại.

   Thêm mục vào menu thì phải đo lại mốc này. */
@media (max-width: 1100px) {
	.dv-burger { display: inline-flex; }

	.dv-menu {
		position: absolute;
		top: calc(100% + 10px);
		left: 20px; right: 20px;
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
		border-radius: var(--dv-bo-lon);
		box-shadow: 0 20px 56px rgba(14,14,14,.13);
		display: none;
	}
	.dv-menu.dang-mo { display: flex; }
	.dv-menu ul { flex-direction: column; align-items: stretch; gap: 1px; }
	.dv-menu a { padding: 13px 16px; border-radius: 10px; }

	.dv-menu .sub-menu {
		position: static;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: none; border-left: 2px solid var(--dv-vien);
		border-radius: 0; margin: 2px 0 6px 14px; padding: 0 0 0 8px;
	}
}

@media (max-width: 860px) {
	.dv-luoi--2, .dv-luoi--3, .dv-luoi--4 { grid-template-columns: 1fr; }
	.dv-so-lieu { gap: 24px; }
	.dv-cta__chu-thich { padding-left: 0; border-left: none; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.dv-chan-trang__luoi { grid-template-columns: 1fr; gap: 28px; }
	.dv-hero__nut { gap: 14px; }

	/* Nút trong thân trang trải hết chiều ngang cho dễ bấm bằng ngón tay.
	   KHÔNG áp cho nút trên thanh điều hướng — nút đó mà rộng 100% thì nó đẩy
	   logo và nút ba gạch văng ra khỏi màn hình. */
	.dv-hero__nut > .dv-nut,
	.dv-cta__hang > .dv-nut { width: 100%; justify-content: center; }
	.dv-hero__nut .dv-lien-ket { width: 100%; text-align: center; }

	.dv-nut-lien-he { padding-inline: 18px; }
}

/* Màn hình rất hẹp: giữ lại dấu hiệu tròn, bỏ phần chữ, để logo và nút điều
   hướng vẫn nằm gọn trên một hàng. */
@media (max-width: 430px) {
	.dv-logo__chu { display: none; }
	.dv-logo__dau { width: 40px; height: 40px; }
	.dv-chan-trang .dv-logo__chu { display: inline; }
}

/* ===========================================================================
   15. IN RA GIẤY
   Khách hay in các trang pháp lý và trang hướng dẫn thủ tục để mang theo.
   =========================================================================== */

@media print {
	.dv-dau-trang, .dv-chan-trang, .dv-cta, .dv-burger { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.dv-noi-dung { max-width: 100%; }
	a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* Tôn trọng lựa chọn giảm chuyển động của khách */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}