/* ============================================================
   NVE — lớp CSS riêng cho WordPress
   ------------------------------------------------------------
   Bản thiết kế gốc (*.dc.html) dùng inline style và KHÔNG có một
   media query nào — nghĩa là chỉ đúng trên desktop, còn trên
   điện thoại sẽ tràn ngang. File này bù phần đó.

   Vì inline style có độ ưu tiên cao hơn class, các rule dưới đây
   buộc phải dùng !important. Đây là chủ ý, không phải cẩu thả.

   KHÔNG sửa file *.dc.html gốc — thiết kế là bất biến (nguyên tắc 1
   trong ke-hoach-claude-design-to-wordpress.md). Muốn đổi thiết kế
   thì sửa trên Claude Design rồi chạy lại tools/transform.py.
   ============================================================ */

/* ---------- Nền tảng ---------- */

/* ============================================================
   ĐẦU TRANG — dark premium (mini-bar + navbar kính mờ tối)
   Chiều cao: mini-bar 34px + navbar 66px = 100px.
   ============================================================ */

:root {
	--topbar-h: 34px;
	--nav-h: 66px;
}

/* Trang chủ để hero trôi lên dưới header trong suốt (không chừa chỗ).
   Các trang khác chừa đúng chiều cao header để nội dung không bị che. */
body {
	padding-top: calc(var(--topbar-h) + var(--nav-h));
}
body.home,
body.page-template-front-page {
	padding-top: 0;
}

.nve-header-shell {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* --- Mini-bar liên hệ --- */
.nve-topbar {
	height: var(--topbar-h);
	background: var(--topbar-bg);
	color: var(--topbar-text);
	font-size: 14.5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nve-topbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	height: 100%;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.nve-topbar-right {
	display: flex;
	align-items: center;
	gap: 26px;
	white-space: nowrap;
}
.nve-topbar-link,
.nve-topbar-hours {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--topbar-text);
	text-decoration: none;
	transition: color 160ms ease;
}
.nve-topbar-link:hover { color: #fff; opacity: 0.85; }
.nve-topbar-link strong { color: #fff; font-weight: 800; }
.nve-topbar-muted { opacity: 0.85; }
.nve-topbar .nve-icon { opacity: 0.7; }

/* --- Navbar kính mờ tối --- */
.nve-navbar {
	height: var(--nav-h);
	background: var(--navbar-bg);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	border-bottom: 1px solid var(--navbar-border);
	transition: background 260ms ease, border-color 260ms ease;
}
/* Khi cuộn xuống (main.js gắn .is-scrolled): nền đặc hơn cho dễ đọc. */
.nve-header-shell.is-scrolled .nve-navbar {
	background: var(--navbar-bg-solid);
	border-bottom-color: rgba(255, 255, 255, 0.14);
}
.nve-navbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	height: 100%;
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Thương hiệu */
.nve-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	flex-shrink: 0;
}
.nve-brand-logo {
	height: 40px;
	width: auto;
	display: block;
	border-radius: 6px;
	background: #fff;
	padding: 3px;
}
.nve-brand-text {
	display: flex;
	flex-direction: column;
	align-items: center;   /* 2 dòng căn giữa cho cân đối */
	text-align: center;
	line-height: 1.18;
}
.nve-brand-name {
	font-weight: 800;
	font-size: 15.5px;
	letter-spacing: 0.01em;
	color: var(--orange-600);   /* tên thương hiệu: CAM */
	white-space: nowrap;
}
.nve-brand-tag {
	display: block;
	width: 100%;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--brand-tag-green);   /* dòng phụ: XANH LÁ đậm (giữ như bản gốc) */
	/* Giãn chữ đều 2 mép để dòng dưới rộng bằng dòng tên phía trên. */
	text-align: justify;
	text-align-last: justify;
}

/* Link menu desktop: chữ sáng, gạch cam trượt ra khi hover/đang xem. */
.nve-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	font-size: 17px;
	font-weight: 600;
	color: var(--navbar-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 160ms ease;
}
.nve-nav-link::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--orange-400);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms var(--ease-out);
}
.nve-nav-link:hover,
.nve-nav-link.is-current {
	color: var(--orange-600);
}
.nve-nav-link:hover::after,
.nve-nav-link.is-current::after,
.nve-dv-wrap:hover .nve-nav-link::after {
	transform: scaleX(1);
}
.nve-nav-caret {
	font-size: 11px;
	opacity: 0.7;
	transition: transform 220ms var(--ease-out);
}
.nve-dv-wrap:hover .nve-nav-caret {
	transform: rotate(180deg);
}

/* Burger trên nền tối: viền sáng, chữ sáng. */
.nve-header-shell .nve-burger {
	color: var(--navbar-text);
	border-color: rgba(255, 255, 255, 0.2);
}
.nve-header-shell .nve-burger:hover {
	background: rgba(255, 255, 255, 0.08);
}

body.admin-bar .nve-header-shell { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .nve-header-shell { top: 46px; }
}

/* Chặn tràn ngang — layout gốc cố định 1280px. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

img, svg, video, iframe {
	max-width: 100%;
}

/* Link bỏ qua điều hướng — cho người dùng bàn phím / trình đọc màn hình. */
.nve-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--forest-900);
	color: #fff;
	border-radius: 0 0 var(--radius-md) 0;
}
.nve-skip-link:focus {
	left: 0;
	top: 0;
}

/* Viền focus thấy rõ — thiết kế gốc không khai báo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--orange-500);
	outline-offset: 2px;
}

.nve-icon {
	display: inline-block;
	vertical-align: middle;
}

/* Icon trên nền tối: bản gốc dùng <img> + filter:invert(1).
   Nay là SVG inline nên chỉ cần đặt màu chữ. */
.nve-topbar .nve-icon,
.nve-footer .nve-icon {
	color: currentColor;
}

/* Mega-menu mở được bằng bàn phím.
   CSS gốc chỉ có .nve-dv-wrap:hover .nve-dv-panel — người dùng dùng phím Tab
   không mở được menu. Class .is-focus do main.js gắn khi có phần tử con nhận focus. */
.nve-dv-wrap.is-focus .nve-dv-panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* ---------- Nút mở menu (chỉ hiện trên mobile) ---------- */

.nve-burger {
	display: none;
	margin-left: auto;
	padding: 8px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	color: var(--ink-900);
	cursor: pointer;
	line-height: 0;
}
.nve-burger:hover {
	background: var(--bg-2);
}

/* ---------- Menu mobile ---------- */

.nve-mobile-nav {
	position: fixed;
	inset: calc(var(--topbar-h) + var(--nav-h)) 0 0 0;
	z-index: 99;
	background: var(--surface-page);
	overflow-y: auto;
	padding: 20px 24px 60px;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 250ms var(--ease-out), visibility 250ms;
}
.nve-mobile-nav.is-open {
	transform: translateX(0);
	visibility: visible;
}
body.admin-bar .nve-mobile-nav {
	top: calc(32px + var(--topbar-h) + var(--nav-h));
}
.nve-mobile-nav a {
	display: block;
	padding: 13px 4px;
	font-size: 18px;
	font-weight: 600;
	color: var(--ink-900);
	border-bottom: 1px solid var(--line);
}
.nve-mobile-nav a:hover {
	color: var(--orange-600);
}
.nve-mobile-nav .nve-mobile-group {
	margin-top: 22px;
}
.nve-mobile-nav .nve-mobile-group > span {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--orange-600);
	margin-bottom: 6px;
}
.nve-mobile-nav .nve-mobile-group a {
	font-weight: 500;
	font-size: 17px;
	padding-left: 12px;
}

/* Khoá cuộn nền khi menu mobile đang mở. */
body.nve-nav-open {
	overflow: hidden;
}

/* ============================================================
   BĂNG CHUYỀN TRANG CHỦ
   ------------------------------------------------------------
   Bản thiết kế dùng React để đổi slide. Trên WordPress thay bằng
   CSS + một đoạn JS nhỏ trong main.js.

   Mọi slide đều nằm trong HTML (để Google đọc được đủ nội dung),
   chỉ slide đang xem là hiển thị.
   ============================================================ */

.nve-slide-bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 600ms ease;
	pointer-events: none;
}
.nve-slide-bg.is-active { opacity: 1; }

.nve-slide-text {
	display: none;
}
.nve-slide-text.is-active {
	display: block;
	animation: nveSlideIn 520ms var(--ease-out);
}
/* Cụm ảnh phải đổi theo slide — xếp chồng, chỉ cụm active hiện. */
.nve-slide-side { display: none; }
.nve-slide-side.is-active {
	display: block;
	animation: nveSlideIn 520ms var(--ease-out);
}
@keyframes nveSlideIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Giữ chiều cao ổn định khi đổi slide, tránh trang giật lên xuống. */
.nve-home-hero .nve-slide-title { min-height: 180px; }
@media (max-width: 1024px) { .nve-home-hero .nve-slide-title { min-height: 0; } }

.nve-dot {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 6px 0;
	cursor: pointer;
}
.nve-dot::before {
	content: "";
	display: block;
	height: 5px;
	width: 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	transition: width 250ms var(--ease-out), background 250ms var(--ease-out);
}
.nve-dot.is-active::before {
	width: 38px;
	background: #ffffff;
}
.nve-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 999px;
}

/* Thẻ dịch vụ ở trang chủ: hiện mô tả khi rê chuột.
   (.svc-tile/.svc-detail có sẵn hiệu ứng trong helmet.css) */
.svc-tile .svc-detail { opacity: 0; }
.svc-tile:hover .svc-detail,
.svc-tile:focus-visible .svc-detail { opacity: 1; }

/* ============================================================
   CHÂN TRANG — dark premium
   ============================================================ */

/* Dải CTA: nền trắng/kem sạch, có đường kẻ trên ngăn với phần trước. */
.nve-footer-cta {
	background: var(--panel-grad);
	position: relative;
	overflow: hidden;
}
/* Chấm cam mờ trang trí góc phải cho có chiều sâu. */
.nve-footer-cta::before {
	content: "";
	position: absolute;
	right: -60px;
	top: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(231, 148, 57, 0.18), transparent 70%);
	pointer-events: none;
}
.nve-footer-cta-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.nve-footer-cta-inner { position: relative; z-index: 1; }
.nve-footer-cta-text { max-width: 640px; }
.nve-footer-cta-text h2 {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
	color: var(--panel-ink);
	text-wrap: balance;
}
.nve-footer-cta-text p {
	font-size: 17.5px;
	line-height: 1.6;
	margin: 10px 0 0;
	color: var(--panel-ink-soft);
}

/* Nút cam chuẩn — dùng lại cho CTA. */
.nve-btn-primary {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 28px;
	background: var(--orange-500);
	color: #fff;
	border-radius: 999px;
	font-size: 17.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
	box-shadow: 0 6px 18px rgba(231, 148, 57, 0.28);
}
.nve-btn-primary:hover {
	background: var(--orange-600);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(231, 148, 57, 0.36);
}
.nve-btn-primary:hover span {
	transform: translateX(3px);
	transition: transform 160ms ease;
	display: inline-block;
}

/* Footer: dải cam mảnh chạy trên đỉnh (đường chỉ thương hiệu). */
.nve-footer {
	position: relative;
}
.nve-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--orange-500);
}

/* Dải số liệu — kiểu dashboard, số rất lớn, căn trái, có vạch ngăn. */
.nve-footer-stats {
	border-bottom: 1px solid var(--footer-border);
}
.nve-footer-stats-grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: 44px 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.nve-fstat {
	padding: 4px 28px;
	border-left: 1px solid var(--footer-border);
}
.nve-fstat:first-child {
	border-left: 0;
	padding-left: 0;
}
.nve-fstat-num {
	font-family: var(--font-mono);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--orange-600);
}
.nve-fstat-label {
	font-size: 15px;
	color: var(--footer-muted);
	margin-top: 10px;
	line-height: 1.4;
}

/* Tiêu đề cột: chữ trắng + gạch cam ngắn phía dưới. */
.nve-footer-coltitle {
	position: relative;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--footer-heading);
	padding-bottom: 12px;
	margin-bottom: 18px;
}
.nve-footer-coltitle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 24px;
	height: 2px;
	background: var(--orange-400);
	border-radius: 2px;
}

/* Link chân trang: mờ nhẹ, sáng lên + dịch phải khi rê chuột. */
.nve-footer .nvho-ae64c6c {
	transition: color 160ms ease, transform 160ms ease;
}
.nve-footer a.nvho-ae64c6c:hover {
	color: var(--orange-600) !important;
	transform: translateX(3px);
}

@media (max-width: 900px) {
	/* Tin tức + chi tiết bài: về 1 cột trên màn nhỏ. */
	.nve-single-grid { grid-template-columns: 1fr !important; }
	.nve-single-side { position: static !important; }
	.nve-single-grid .nve-prose { max-width: 100% !important; }
	/* Chứng nhận ISO: 1 cột. */
	.nve-cert-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
	.nve-cert-card { flex-direction: column !important; text-align: center; }
	.nve-cert-card > div:first-child { width: 180px !important; }
}
@media (max-width: 768px) {
	.nve-footer-stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 28px 0;
		padding: 32px 20px;
	}
	.nve-fstat {
		padding: 0 18px;
	}
	.nve-fstat:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
	.nve-fstat-num { font-size: 32px; }
	.nve-footer-cta-inner {
		padding: 40px 20px;
	}
	.nve-footer-cta a {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
	}
	.nve-footer-cta-text h2 { font-size: 25px; }
}

/* Thẻ quy trình (nền trắng trên nền xanh nhạt): nổi lên + viền cam khi rê chuột. */
.nve-step-card {
	transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.nve-step-card:hover {
	transform: translateY(-6px);
	border-color: var(--orange-400) !important;
	box-shadow: 0 22px 46px rgba(231, 148, 57, 0.18) !important;
}
/* Đối tác: dải số liệu về 2 cột trên màn nhỏ. */
@media (max-width: 720px) {
	.nve-partner-stats { grid-template-columns: repeat(2, 1fr) !important; }
	.nve-process-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Trang văn bản chính sách (.nve-prose) ---------- */
.nve-prose { display: flex; flex-direction: column; gap: 34px; }
.nve-prose h2 {
	font-size: 26px;
	font-weight: 800;
	color: var(--ink-900);
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
.nve-prose h3 { font-size: 21px; font-weight: 700; color: var(--ink-900); margin: 0 0 10px; }
.nve-prose p { font-size: 18px; line-height: 1.8; color: var(--text-body); margin: 0 0 14px; }
.nve-prose p:last-child { margin-bottom: 0; }
.nve-prose ul, .nve-prose ol { font-size: 18px; line-height: 1.9; color: var(--text-body); margin: 0; padding-left: 20px; }
.nve-prose li { margin-bottom: 4px; }
.nve-prose a { color: var(--orange-600); font-weight: 600; }
/* Khối liên hệ nổi bật: dùng blockquote trong editor → viền cam trái, nền kem. */
.nve-prose blockquote {
	margin: 0;
	padding: 24px 28px;
	background: var(--bg-1);
	border-radius: 16px;
	border-left: 3px solid var(--orange-500);
}
.nve-prose blockquote p { margin: 0; }
/* Mỗi mục cách nhau đều — các <h2> tự tạo nhịp nhờ gap ở container. */
.nve-prose > h2 { margin-top: 6px; }

/* ---------- Form tư vấn: ô nhập focus + nút hover ---------- */
.nve-form .nvfo-c1e4d0a:focus {
	border-color: var(--orange-500);
	box-shadow: 0 0 0 3px rgba(231, 148, 57, 0.18);
}
.nve-form-submit { transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.nve-form-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(231, 148, 57, 0.46); }
.nvho-form-tel:hover .nve-form-tel-num { color: var(--orange-400); }

/* ---------- Slider chứng nhận ISO (2 tấm A4 xếp chồng) ---------- */
/* Tấm đang nổi (is-active): to, nổi bóng, phải-dưới. Tấm sau: nhỏ hơn, lệch trái-trên, mờ. */
.nve-cert-paper { left: 22%; top: 0; opacity: 1; z-index: 2; box-shadow: 0 24px 60px rgba(32,28,20,0.22); transform: scale(1); cursor: default; }
.nve-cert-paper:not(.is-active) { left: 0; top: 42px; opacity: 0.55; z-index: 1; box-shadow: 0 14px 34px rgba(32,28,20,0.14); transform: scale(0.92); }
.nve-cert-slider .nve-cert-prev:hover, .nve-cert-slider .nve-cert-next:hover { filter: brightness(0.95); }
@media (max-width: 900px) {
	.nve-cert-slider { flex-direction: column; gap: 20px !important; }
	.nve-cert-slider > div { grid-template-columns: 1fr !important; gap: 24px; }
	.nve-cert-stack { height: 420px !important; }
	.nve-cert-stack .nve-cert-paper { width: 58% !important; left: 21% !important; }
	.nve-cert-stack .nve-cert-paper:not(.is-active) { left: 8% !important; }
	.nve-cert-slider .nve-cert-info + div, .nve-cert-slider > div > div:last-child { margin-left: 0 !important; padding: 32px !important; }
}

/* ---------- FAQ accordion (thẻ <details> — không cần JS) ---------- */
.nve-faq-item > summary { list-style: none; }
.nve-faq-item > summary::-webkit-details-marker { display: none; }
/* Dấu +/− do ::before lo (span trong HTML để rỗng). */
.nve-faq-item > summary .nve-faq-sign::before { font-size: 24px; }
.nve-faq-item[open] > summary .nve-faq-sign::before { content: "−"; }
.nve-faq-item:not([open]) > summary .nve-faq-sign::before { content: "+"; }
.nve-faq-item > summary:hover span:first-child { color: var(--orange-600); }

/* ---------- Hero các trang (Giới thiệu, Liên hệ, Dự án...) ---------- */

/* Có ẢNH nền → lớp phủ xanh ĐẬM để chữ trắng đọc rõ (như bản gốc). */
.nve-pagehero {
	background-image:
		linear-gradient(120deg, rgba(12,59,34, 0.92), rgba(12,59,34, 0.72)),
		var(--pagehero-img, url("../images/stock/photo-1497436072909-60f360e1d4b1.jpg"));
	background-size: cover;
	background-position: center;
	color: #fff;
}

/* ---------- Câu hỏi thường gặp ---------- */

/* Bỏ mũi tên mặc định của trình duyệt (đã có mũi tên riêng). */
.nve-faq-item summary::-webkit-details-marker { display: none; }
.nve-faq-item summary::marker { content: ''; }
.nve-faq-item[open] .nve-faq-arrow { transform: rotate(180deg); }
.nve-faq-item summary:focus-visible {
	outline: 3px solid var(--orange-500);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ============================================================
   NỘI DUNG BÀI VIẾT (.nve-prose)
   ------------------------------------------------------------
   Người viết bài chỉ gõ chữ trong trình soạn thảo WordPress, không biết CSS.
   Các rule dưới đây bảo đảm bài viết luôn đúng phong cách thiết kế: cỡ chữ,
   khoảng cách, bảng, ảnh, trích dẫn — không cần người viết làm gì thêm.
   ============================================================ */

.nve-prose > * + * { margin-top: 1.15em; }

.nve-prose h2 {
	font-size: 26px;
	font-weight: 800;
	color: var(--ink-900);
	margin-top: 2em;
	margin-bottom: 0.6em;
	letter-spacing: -0.02em;
	line-height: 1.25;
}
.nve-prose h3 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink-900);
	margin-top: 1.7em;
	margin-bottom: 0.5em;
	line-height: 1.3;
}
.nve-prose h4 {
	font-size: 19px;
	font-weight: 700;
	color: var(--ink-900);
	margin-top: 1.5em;
	margin-bottom: 0.4em;
}

.nve-prose p { margin: 0 0 1.15em; }

.nve-prose a {
	color: var(--orange-600);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.nve-prose a:hover { color: var(--orange-700); }

.nve-prose ul,
.nve-prose ol {
	margin: 0 0 1.15em;
	padding-left: 1.4em;
}
.nve-prose li { margin-bottom: 0.5em; }
.nve-prose ul { list-style: disc; }
.nve-prose ol { list-style: decimal; }

.nve-prose img,
.nve-prose figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}
.nve-prose figure { margin: 1.8em 0; }
.nve-prose figcaption {
	font-size: 15.5px;
	color: var(--text-muted);
	text-align: center;
	margin-top: 10px;
	font-family: var(--font-mono);
}

.nve-prose blockquote {
	margin: 1.8em 0;
	padding: 20px 26px;
	background: var(--mint-100);
	border-left: 4px solid var(--forest-600);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: 18.5px;
	color: var(--forest-800);
}
.nve-prose blockquote p:last-child { margin-bottom: 0; }

/* Bảng số liệu quan trắc: cuộn ngang trên điện thoại thay vì tràn ra ngoài. */
.nve-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.8em 0;
	font-size: 17px;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}
.nve-prose table th,
.nve-prose table td {
	border: 1px solid var(--line);
	padding: 10px 14px;
	text-align: left;
}
.nve-prose table th {
	background: var(--bg-1);
	font-weight: 700;
	color: var(--ink-900);
}
.nve-prose table tr:nth-child(even) td { background: var(--bg-0); }

/* Số liệu, mã quy chuẩn (QCVN…) dùng font mono theo quy tắc thương hiệu. */
.nve-prose code {
	font-family: var(--font-mono);
	font-size: 0.92em;
	background: var(--bg-2);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}
.nve-prose pre {
	background: var(--bg-2);
	padding: 18px;
	border-radius: var(--radius-md);
	overflow-x: auto;
}
.nve-prose pre code { background: none; padding: 0; }

.nve-prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.4em 0;
}

.nve-prose iframe {
	max-width: 100%;
	border-radius: var(--radius-lg);
}

/* Phân trang danh sách bài viết. */
.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-block;
	padding: 9px 15px;
	margin: 0 3px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	color: var(--ink-700);
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	background: var(--bg-2);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: #fff;
}

/* Chỉ hiện với trình đọc màn hình. */
.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;
	border: 0;
}

/* ---------- Form ---------- */

.nve-form textarea,
.nve-form input {
	font-family: var(--font-body);
}
.nve-form button[type="submit"] {
	transition: background 150ms var(--ease-out);
}

/* ============================================================
   RESPONSIVE
   Layout gốc: container 1280px, grid cố định repeat(3|4, 1fr),
   font hero 60px. Dưới đây ép về dạng xếp dọc theo từng ngưỡng.
   ============================================================ */

@media (max-width: 1280px) {
	[style*="max-width:1280px"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* ---------- Máy tính bảng ---------- */
@media (max-width: 1024px) {
	/* Lưới có class -> xếp dọc.
	 *
	 * Các quy tắc [style*="..."] bên dưới chỉ khớp khi chuỗi trong thuộc tính
	 * style trùng y hệt, nên không bắt được minmax(0,1fr) hay minmax(0,1.08fr).
	 * Dùng class là chắc chắn, không phụ thuộc cách viết style. */
	.nve-grid-2,
	.nve-home-hero-grid,
	.nve-form-grid {
		grid-template-columns: 1fr !important;
	}

	/* Ảnh trang trí bên phải băng chuyền: bỏ đi khi hết chỗ, để phần chữ
	 * (tiêu đề + nút bấm) được trọn chiều ngang. */
	.nve-hero-side {
		display: none !important;
	}

	/* Lưới 3 cột (dịch vụ, tin tức) -> 2 cột cho vừa máy tính bảng. */
	.nve-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Footer 4 cột -> 2 cột. Lưới này khai báo "2fr 1.2fr 1fr 1.2fr" nên
	 * không khớp bộ chọn [style*="repeat(4"] bên dưới. */
	.nve-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Ẩn menu desktop, hiện nút burger. */
	.nve-nav-desktop {
		display: none !important;
	}
	.nve-burger {
		display: block;
	}

	/* Grid 4 cột -> 2 cột. */
	[style*="grid-template-columns:repeat(4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Bố cục 2 cột (ảnh + chữ) -> xếp dọc. */
	[style*="grid-template-columns:1.05fr"],
	[style*="grid-template-columns:1.1fr"],
	[style*="grid-template-columns:1fr 1fr"],
	[style*="grid-template-columns:1.2fr"],
	[style*="grid-template-columns:0.9fr"] {
		grid-template-columns: 1fr !important;
	}

	/* Chữ hero nhỏ lại cho vừa màn hình. */
	[style*="font-size:60px"] { font-size: 40px !important; }
	[style*="font-size:48px"] { font-size: 34px !important; }
	[style*="font-size:40px"] { font-size: 30px !important; }
	[style*="font-size:36px"] { font-size: 28px !important; }

	/* Khoảng cách dọc bớt lại. */
	[style*="padding:96px"] { padding: 56px 0 !important; }
	[style*="padding:80px"] { padding: 48px 0 !important; }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 768px) {
	/* Lưới có class -> một cột (xem giải thích ở mốc 1024px). */
	/* MỌI lưới có class của theme -> một cột.
	 *
	 * Gom hết vào đây thay vì dò chuỗi [style*="..."]: các lưới khai báo bằng
	 * minmax() hay "2fr 1.2fr" không khớp bộ chọn chuỗi nào, và đó chính là
	 * nguyên nhân footer + form + băng chuyền từng tràn ngang trên điện thoại. */
	.nve-grid,
	.nve-grid-2,
	.nve-footer-grid,
	.nve-form-grid,
	.nve-grid-label,
	.nve-home-hero-grid,
	/* Ô Họ tên / Số điện thoại nằm cạnh nhau -> xếp dọc cho dễ bấm. */
	.nve-form-fields {
		grid-template-columns: 1fr !important;
	}

	/* Băng chuyền cao 700px chiếm trọn màn hình điện thoại -> hạ xuống. */
	.nve-home-hero {
		min-height: 520px !important;
	}

	/* Dải ảnh hoạt động: khung 200×356 quá to trên điện thoại. */
	.nve-home-gallery .nve-marquee > div {
		flex: 0 0 150px !important;
		height: 267px !important;
	}

	/* Mọi grid nhiều cột -> một cột. */
	[style*="grid-template-columns:repeat(2"],
	[style*="grid-template-columns:repeat(3"],
	[style*="grid-template-columns:repeat(4"],
	[style*="grid-template-columns:repeat(5"],
	[style*="grid-template-columns:repeat(6"] {
		grid-template-columns: 1fr !important;
	}

	/* Hàng ngang -> xuống dòng, tránh tràn. */
	[style*="display:flex"] {
		flex-wrap: wrap;
	}
	/* Trừ những chỗ buộc phải nằm ngang (icon + chữ cùng dòng). */
	[style*="white-space:nowrap"] {
		flex-wrap: nowrap;
	}

	[style*="font-size:60px"] { font-size: 30px !important; }
	[style*="font-size:48px"] { font-size: 27px !important; }
	[style*="font-size:40px"] { font-size: 25px !important; }
	[style*="font-size:36px"] { font-size: 25px !important; }
	[style*="font-size:34px"] { font-size: 24px !important; }

	[style*="max-width:1280px"] {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	[style*="padding:96px"] { padding: 40px 0 !important; }
	[style*="padding:80px"] { padding: 36px 0 !important; }

	/* Ảnh khối "Tổng quan" cao 520px -> thấp lại trên điện thoại. */
	[style*="height:520px"] { height: 280px !important; }
	[style*="height:480px"] { height: 260px !important; }
	[style*="height:440px"] { height: 240px !important; }

	/* Mini-bar: giấu giờ làm việc cho đỡ chật, giữ email + SĐT. */
	.nve-topbar {
		font-size: 13px;
	}
	.nve-topbar-hours {
		display: none !important;
	}
	.nve-topbar-inner {
		padding: 0 20px;
	}
	.nve-navbar-inner {
		padding: 0 20px;
	}
}

@media (max-width: 480px) {
	/* Rất hẹp: mini-bar chỉ còn số điện thoại (bỏ email). */
	.nve-topbar-inner > .nve-topbar-link:first-child {
		display: none !important;
	}
	.nve-topbar-right {
		width: 100%;
		justify-content: center;
	}
	[style*="font-size:60px"] { font-size: 26px !important; }
	[style*="font-size:48px"] { font-size: 26px !important; }
}

/* ---------- In ấn ---------- */
@media print {
	.nve-topbar,
	.nve-navbar,
	.nve-burger,
	.nve-mobile-nav,
	.nve-footer {
		display: none !important;
	}
	body {
		padding-top: 0;
	}
}

/* ---------- Giảm chuyển động (người dùng bật trong hệ điều hành) ---------- */
@media (prefers-reduced-motion: reduce) {
	/* Người dùng bật "giảm chuyển động" (Windows/macOS Accessibility).
	 *
	 * KHÔNG tắt sạch mọi hiệu ứng — nếu tắt hết thì trang trông như hỏng
	 * (băng chuyền đứng, hover không phản hồi). Thay vào đó chỉ:
	 *   - làm CHẬM & NHẸ các animation lặp vô hạn dễ gây khó chịu (marquee),
	 *   - giữ nguyên transition hover ngắn (đổi màu/độ mờ) vì chúng vô hại.
	 */

	/* Dải ảnh/logo chạy ngang: chậm lại đáng kể thay vì dừng hẳn. */
	.nve-marquee {
		animation-duration: 90s !important;
	}
	.nve-marquee-slow {
		animation-duration: 120s !important;
	}

	/* Bỏ hiệu ứng trượt vào của slide (dễ gây chóng mặt), nhưng slide vẫn đổi. */
	.nve-slide-text.is-active {
		animation: none !important;
	}

	/* Cuộn tới neo: nhảy thẳng, không cuộn mượt. */
	html {
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   Mega-menu Dịch vụ — bản thiết kế lại (icon + mô tả + cột CTA)
   ============================================================ */
/* Mega full-width: trải NGANG toàn màn hình (thoát khỏi container).
   Neo theo mép trái viewport bằng left:50% + margin-left:-50vw. */
.nve-dv-panel.nve-mega.nve-mega-full{
	position:absolute;
	top:calc(100% + 14px);
	left:50%;
	width:100vw; max-width:100vw;
	margin-left:-50vw;
	transform:translateY(6px);
	padding:0 24px;
	background:transparent; border:0; box-shadow:none; border-radius:0;
}
.nve-dv-wrap:hover .nve-dv-panel.nve-mega.nve-mega-full{
	transform:translateY(0);
}
/* Vùng nội dung bên trong bó 1280px, canh giữa, có nền/bo góc/đổ bóng. */
.nve-mega-inner{width:100%}
/* Link trong mega: rê chuột đổi nền mint + chữ xanh + chấm cam rõ hơn. */
.nve-mega-link{transition:background .15s ease,color .15s ease}
.nve-mega-link:hover{background:var(--mint-50,#eef7f1);color:var(--forest-700)}
.nve-mega-link:hover .nve-mega-dot{opacity:1;transform:scale(1.25)}
.nve-mega-link .nve-mega-dot{transition:opacity .15s ease,transform .15s ease}

/* Dropdown Tin tức / Tài liệu (icon + mô tả) — hover đổi nền + icon đổi màu. */
.nve-dd-link{transition:background .15s ease}
.nve-dd-link:hover{background:var(--mint-50,#eef7f1)}
.nve-dd-link .nve-dd-ic{transition:background .15s ease,color .15s ease}
.nve-dd-link:hover .nve-dd-ic{background:var(--orange-500);color:#fff}
.nve-dd-link:hover .nve-dd-ic svg{color:#fff}

/* Màn hình vừa: 3 cột danh mục + CTA hẹp hơn. */
@media (max-width:1200px){
	.nve-mega-inner{grid-template-columns:1fr 230px!important}
	.nve-mega-cats{column-count:3!important}
}
@media (max-width:980px){
	.nve-mega-cats{column-count:2!important}
}
/* Màn hình hẹp: 1 cột nội dung, CTA xuống dưới cùng. */
@media (max-width:720px){
	.nve-mega-inner{grid-template-columns:1fr!important}
	.nve-mega-cats{column-count:2!important}
	.nve-mega-inner>div:last-child{grid-column:1 / -1}
}