/* ==========================================================================
   dichvusay.com 2026 — NỀN TẢNG
   Thẻ, biến, chữ, nút, bảng. Không có luật bố cục nào ở file này.

   Ba thang số, mọi giá trị trong site phải lấy từ đây:
     --t-*  cỡ chữ (7 bậc, co giãn theo khung nhìn)
     --s-*  khoảng cách (bội số 8px)
     --c-*  màu

   Ngôn ngữ thị giác: PHẲNG. Mảng màu đặc, không gradient, không đổ bóng,
   không viền nổi. Ngăn cách bằng khoảng trắng và đổi màu nền. Bo góc 6px.

   Tương phản đã đo, tất cả đạt WCAG AA trở lên:
     ink #101A15 trên trắng .............. 17.0:1
     body #33413A trên trắng ............. 10.4:1
     muted #5A6A63 trên trắng ............. 6.3:1   trên panel #F1F7F4 ... 6.0:1
     trắng trên primary-600 #1B6B49 ....... 6.6:1
     trắng trên primary-900 #0B2E20 ...... 15.7:1
     ink trên accent-400 #D9A441 .......... 7.5:1
     accent-400 trên primary-900 .......... 6.5:1
   Vàng #D9A441 CHỈ làm nền nút, hoặc chữ trên nền xanh đậm. Đặt làm chữ nhỏ
   trên nền sáng chỉ đạt 3.0:1, và đặt trên ảnh có lớp phủ cũng chỉ ~3.4:1.
   ========================================================================== */

:root {
	--c-primary-900: #0b2e20;
	--c-primary-800: #12402d;
	--c-primary-700: #17573c;
	--c-primary-600: #1b6b49;
	--c-primary-500: #2a8a5f;
	--c-primary-100: #e2efe9;
	--c-primary-50:  #f1f7f4;

	--c-accent-700: #8a5e10;
	--c-accent-600: #a9761b;
	--c-accent-500: #c68a22;
	--c-accent-400: #d9a441;
	--c-accent-100: #f7ebd3;

	--c-ink:     #101a15;
	--c-body:    #33413a;
	--c-muted:   #5a6a63;
	--c-line:    #e3eae6;
	--c-line-dam:#c9d8d1;
	--c-surface: #ffffff;
	--c-panel:   #f1f7f4;

	--c-on-dark:      #ffffff;
	--c-on-dark-soft: rgba(255, 255, 255, 0.82);
	--c-on-dark-line: rgba(255, 255, 255, 0.18);

	/* Cỡ chữ co giãn: bậc nhỏ gần như cố định, bậc lớn co theo khung nhìn.
	   Không bậc nào xuống dưới 12.5px — dưới mức đó là không đọc nổi trên điện thoại. */
	--t-xs:   12.5px;
	--t-sm:   13.5px;
	--t-base: 15.5px;
	--t-md:   clamp(16px, 1.05vw + 13.5px, 17.5px);
	--t-lg:   clamp(17.5px, 1.3vw + 14px, 20px);
	--t-xl:   clamp(20px, 1.6vw + 15px, 24px);
	--t-2xl:  clamp(23px, 2.4vw + 15px, 31px);
	--t-3xl:  clamp(27px, 3.4vw + 15px, 42px);
	--t-hero: clamp(31px, 4.6vw + 14px, 56px);

	--s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
	--s-5: 40px;  --s-6: 48px;  --s-7: 56px;  --s-8: 64px;
	--s-10: 80px; --s-12: 96px;

	--f-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	--r: 6px;
	--r-pill: 999px;

	--bo: 1220px;                 /* bề ngang khối nội dung */
	--rang: clamp(16px, 3.2vw, 28px); /* lề hai bên */
	--dai-doc: clamp(48px, 6.4vw, 88px); /* đệm trên dưới của một dải */
}

/* --------------------------------------------------------------------------
   Thẻ nền
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body.dvs2026 {
	font-family: var(--f-sans);
	font-size: var(--t-md);
	line-height: 1.75;
	color: var(--c-body);
	background: var(--c-surface);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Cùng lý do như luật <a>: nhóm chọn .dvs2026 h1 có trọng số (0,1,1) và đè
   lên mọi luật một-class như .dvs-hero-td, khiến tiêu đề hero ra màu mực trên
   nền xanh đậm. Bọc tổ tiên vào :where() để lớp thành phần luôn thắng. */
:where(.dvs2026) h1, :where(.dvs2026) h2, :where(.dvs2026) h3,
:where(.dvs2026) h4, :where(.dvs2026) h5, :where(.dvs2026) h6 {
	font-family: var(--f-sans);
	color: var(--c-ink);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.011em;
	margin: 0 0 var(--s-2);
	text-transform: none;
}

:where(.dvs2026) h1 { font-size: var(--t-3xl); }
:where(.dvs2026) h2 { font-size: var(--t-2xl); }
:where(.dvs2026) h3 { font-size: var(--t-xl); }
:where(.dvs2026) h4 { font-size: var(--t-lg); }
:where(.dvs2026) h5, :where(.dvs2026) h6 { font-size: var(--t-md); }

:where(.dvs2026) p { margin: 0 0 var(--s-2); }
:where(.dvs2026) strong, :where(.dvs2026) b { font-weight: 600; color: var(--c-ink); }

/* :where() để luật này có độ ưu tiên gần bằng 0.
   Viết .dvs2026 a (0,1,1) thì nó thắng mọi luật một-class như .dvs-nut-vang
   (0,1,0), và chữ trên nút vàng ra màu xanh lá. Bọc phần chọn tổ tiên vào
   :where() giữ được phạm vi mà không mang theo trọng số. */
:where(.dvs2026) a { color: var(--c-primary-600); text-decoration: none; }
:where(.dvs2026) a:hover { color: var(--c-primary-800); text-decoration: underline; }

/* Ổ chạm và vòng nét đứt khi đi bằng bàn phím. Flatsome bỏ outline mặc định,
   phải trả lại — nếu không thì duyệt site bằng Tab là đi trong bóng tối. */
.dvs2026 a:focus-visible,
.dvs2026 button:focus-visible,
.dvs2026 input:focus-visible,
.dvs2026 textarea:focus-visible,
.dvs2026 select:focus-visible,
.dvs2026 summary:focus-visible {
	outline: 3px solid var(--c-accent-500);
	outline-offset: 2px;
	border-radius: 3px;
}

.dvs2026 img { max-width: 100%; height: auto; display: block; }

.dvs2026 ul, .dvs2026 ol { margin: 0 0 var(--s-2); padding-left: 1.15em; }
.dvs2026 li { margin-bottom: 6px; }

/* Flatsome đặt dt/dd thành inline-block và ép chữ hoa cho cả <dl>. Mọi danh
   sách định nghĩa trong theme này đều xếp dọc và giữ nguyên chữ thường. */
.dvs2026 dl { margin: 0; }
.dvs2026 dt, .dvs2026 dd { display: block; margin: 0; text-transform: none; letter-spacing: 0; }

.dvs2026 hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-5) 0; }

.dvs2026 blockquote {
	margin: var(--s-4) 0;
	padding: var(--s-3);
	background: var(--c-panel);
	border-left: 4px solid var(--c-primary-600);
	border-radius: 0 var(--r) var(--r) 0;
	font-style: normal;
}
.dvs2026 blockquote p:last-child { margin-bottom: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Nút
   -------------------------------------------------------------------------- */

.dvs-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;           /* 48px là ngưỡng vùng chạm dùng được một tay */
	padding: 12px 26px;
	border: 2px solid transparent;
	border-radius: var(--r);
	font-size: var(--t-base);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dvs-nut:hover { text-decoration: none; }

.dvs-nut-vang        { background: var(--c-accent-400); color: var(--c-ink); }
.dvs-nut-vang:hover  { background: var(--c-accent-500); color: var(--c-ink); }

.dvs-nut-xanh        { background: var(--c-primary-600); color: #fff; }
.dvs-nut-xanh:hover  { background: var(--c-primary-800); color: #fff; }

.dvs-nut-vien        { background: transparent; color: var(--c-primary-700); border-color: var(--c-primary-600); }
.dvs-nut-vien:hover  { background: var(--c-primary-600); color: #fff; }

/* Viền mảnh alpha thấp trên ảnh nền trông như chưa vẽ xong; 0.9 là mức nhìn
   thấy rõ ở mọi vùng sáng tối của ảnh hero. */
.dvs-nut-vien-sang       { background: rgba(11, 46, 32, .35); color: #fff; border-color: rgba(255,255,255,.9); }
.dvs-nut-vien-sang:hover { background: #fff; color: var(--c-primary-900); border-color: #fff; }

/* Flatsome dùng chung class .button cho cả nút chữ lẫn nút biểu tượng tròn.
   Mọi luật width cho nút phải chừa .icon ra, nếu không nút tròn bị kéo giãn. */
.dvs2026 .dvs-hero-nut .dvs-nut:not(.icon) { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Bảng
   -------------------------------------------------------------------------- */

.dvs2026 table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.dvs2026 th, .dvs2026 td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}
.dvs2026 thead th {
	background: var(--c-primary-900);
	color: #fff;
	font-weight: 600;
	border-bottom: 0;
}
.dvs2026 tbody th { font-weight: 600; color: var(--c-ink); }

/* Bảng rộng phải tự cuộn trong hộp của nó; để nó đẩy thân trang là cả site
   trượt ngang trên điện thoại. */
.dvs-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dvs-cuon > table { min-width: 620px; }

/* --------------------------------------------------------------------------
   Ô nhập
   -------------------------------------------------------------------------- */

.dvs2026 input[type=text], .dvs2026 input[type=email], .dvs2026 input[type=tel],
.dvs2026 input[type=number], .dvs2026 input[type=search], .dvs2026 textarea,
.dvs2026 select {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	/* 16px là bắt buộc: dưới mức đó Safari trên iOS tự phóng to trang khi
	   người dùng chạm vào ô, và không có cách nào lấy lại tỉ lệ cũ. */
	font-size: 16px;
	font-family: var(--f-sans);
	color: var(--c-ink);
	background: #fff;
	border: 1px solid var(--c-line-dam);
	border-radius: var(--r);
	box-shadow: none;
}
.dvs2026 textarea { min-height: 132px; line-height: 1.6; }
.dvs2026 input::placeholder, .dvs2026 textarea::placeholder {
	color: var(--c-muted);   /* 6.3:1 — gợi ý vẫn phải đọc được */
	opacity: 1;
}
.dvs2026 input:focus, .dvs2026 textarea:focus, .dvs2026 select:focus {
	border-color: var(--c-primary-600);
}

/* --------------------------------------------------------------------------
   Liên kết trong thân bài

   Ở giữa một đoạn văn dài, chữ chỉ đổi màu thì người đọc quét nhanh sẽ không
   nhận ra đó là liên kết. Gạch chân ngay từ đầu, và để gạch chân chạy dưới
   đường chân chữ thay vì cắt ngang phần bụng chữ có dấu tiếng Việt.
   -------------------------------------------------------------------------- */

.dvs-than a:not(.dvs-nut),
.dvs-chu a:not(.dvs-nut),
.dvs-hd-dap a:not(.dvs-nut),
.dvs-kn-noi a:not(.dvs-nut) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--c-primary-500);
}
.dvs-than a:not(.dvs-nut):hover,
.dvs-chu a:not(.dvs-nut):hover,
.dvs-hd-dap a:not(.dvs-nut):hover,
.dvs-kn-noi a:not(.dvs-nut):hover { text-decoration-color: var(--c-primary-800); }

/* Bảng thông số 6 dòng đọc nhanh hơn khi dòng chẵn có nền — vẫn là mảng màu
   đặc nên không phá ngôn ngữ phẳng. */
.dvs-than tbody tr:nth-child(even),
.dvs-chu tbody tr:nth-child(even) { background: var(--c-primary-50); }
.dvs-nen-panel .dvs-chu tbody tr:nth-child(even) { background: #fff; }

/* --------------------------------------------------------------------------
   Bản in

   Khách hay in bảng thông số để dán ở xưởng. Bỏ mọi thứ điều hướng, trả chữ về
   đen trên trắng, và in kèm địa chỉ đích của mỗi liên kết.
   -------------------------------------------------------------------------- */

@media print {
	.dvs-breadcrumb, .dvs-neo, .dvs-cum, .dvs-thanh, .dvs-len, .dvs-cta,
	#masthead, .header-wrapper, #top-bar, .footer-wrapper, .dvs-muc-luc,
	.dvs-cuoi-khoi, .dvs-hero-nut, .dvs-eeat-anh { display: none !important; }

	.dvs2026, .dvs-than { color: #000; font-size: 11.5pt; line-height: 1.5; }
	.dvs-hero, .dvs-nen-dam { background: #fff !important; }
	.dvs-hero-td, .dvs-hero-dan, .dvs-hero-nhan, .dvs-hero-so dt, .dvs-hero-so dd,
	.dvs-nen-dam, .dvs-nen-dam h2, .dvs-nen-dam h3, .dvs-nen-dam p { color: #000 !important; }

	.dvs-dai { padding: 12pt 0; }
	.dvs-bo { max-width: none; padding: 0; }

	table { page-break-inside: avoid; }
	thead th { background: #eee !important; color: #000 !important; }
	h2, h3 { page-break-after: avoid; }

	.dvs-than a:after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
	.dvs-than a[href^="#"]:after { content: ""; }
}