/**
 * Genovet child theme — design tokens + layout primitives.
 *
 * Bảng màu và nhịp bố cục lấy cấu trúc từ site tham chiếu (vettech.vn):
 * container theo vw, mỗi section có eyebrow in hoa + tiêu đề lớn ở giữa.
 * Giá trị màu để sẵn ở một chỗ — đổi brand chỉ sửa khối :root này.
 *
 * Đường dẫn ảnh/font luôn relative để độc lập môi trường (README §9.1):
 *   background-image: url( "../img/hero.webp" );
 */

:root {
	/*
	 * Màu lấy từ bảng màu toàn cục của Astra (Tuỳ chỉnh > Global > Màu sắc),
	 * để chỉ có MỘT nơi đổi brand. Giá trị hex phía sau là dự phòng khi biến
	 * của Astra chưa có (ví dụ trong trình soạn thảo khối).
	 */
	--gnv-primary: var(--ast-global-color-0, #124a94);
	--gnv-accent: var(--ast-global-color-1, #f9313b);
	--gnv-text: var(--ast-global-color-2, #1a1a1a);
	--gnv-text-muted: var(--ast-global-color-3, #6d6e73);
	--gnv-surface: var(--ast-global-color-4, #eef5ff);
	--gnv-white: var(--ast-global-color-5, #fff);
	--gnv-primary-dark: var(--ast-global-color-7, #0d3a75);
	--gnv-border: #e2e8f0;

	/* Khung: container theo viewport như site tham chiếu, không cố định px */
	--gnv-container: 76vw;
	--gnv-container-max: 1700px;

	/* Nhịp dọc */
	--gnv-section-y: clamp(3rem, 6vw, 6rem);
	--gnv-gap: clamp(1rem, 2vw, 2rem);

	/* Chữ — font phải self-host vào assets/fonts/ (README §3.4) */
	--gnv-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gnv-title: clamp(1.75rem, 3vw, 2.5rem);

	--gnv-radius: 8px;
	--gnv-shadow: 0 4px 24px rgb(18 74 148 / 8%);
}

@media screen and (max-width: 1500px) {
	:root {
		--gnv-container: 88vw;
	}
}

@media screen and (max-width: 1050px) {
	:root {
		--gnv-container: 86vw;
	}
}

@media screen and (max-width: 600px) {
	:root {
		--gnv-container: 94vw;
	}
}

/* --------------------------------------------------------------------------
 * Layout primitives
 * -------------------------------------------------------------------------- */

.gnv-container {
	width: var(--gnv-container);
	max-width: var(--gnv-container-max);
	margin-inline: auto;
}

.gnv-section {
	padding-block: var(--gnv-section-y);
}

.gnv-section--tint {
	background-color: var(--gnv-surface);
}

/* Mẫu tiêu đề dùng lại ở mọi section: nhãn nhỏ in hoa + tiêu đề lớn. */
.gnv-section__head {
	margin-bottom: var(--gnv-gap);
	text-align: center;
}

.gnv-eyebrow {
	margin: 0 0 0.5rem;
	color: var(--gnv-accent);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gnv-section__title {
	margin: 0;
	color: var(--gnv-primary);
	font-size: var(--gnv-title);
	line-height: 1.25;
}

/*
 * Số cột đặt bằng CLASS, không bao giờ bằng style inline.
 *
 * LỖI ĐÃ SỬA 18/09/2026: 8 template ghi style="--gnv-cols:4" thẳng vào thẻ.
 * Style inline có độ ưu tiên cao nhất nên mọi media query bên dưới vô hiệu —
 * lưới 4 cột giữ nguyên 4 cột ở cả màn 320px, chữ vỡ từng từ và cột cuối tràn
 * khỏi màn hình. Class thì media query ghi đè được, vì cùng độ ưu tiên và đứng
 * sau trong file.
 *
 * Thêm biến thể mới = thêm một class ở đây, KHÔNG dùng style.
 */
.gnv-grid {
	display: grid;
	gap: var(--gnv-gap);
	grid-template-columns: repeat(var(--gnv-cols, 3), minmax(0, 1fr));
}

.gnv-grid--2 {
	--gnv-cols: 2;
}

.gnv-grid--3 {
	--gnv-cols: 3;
}

.gnv-grid--4 {
	--gnv-cols: 4;
}

/* Lưới 4 cột hạ xuống 3 trước, không nhảy thẳng xuống 2. */
@media screen and (max-width: 1200px) {
	.gnv-grid--4 {
		--gnv-cols: 3;
	}
}

@media screen and (max-width: 900px) {
	.gnv-grid,
	.gnv-grid--3,
	.gnv-grid--4 {
		--gnv-cols: 2;
	}
}

@media screen and (max-width: 600px) {
	.gnv-grid,
	.gnv-grid--2,
	.gnv-grid--3,
	.gnv-grid--4 {
		--gnv-cols: 1;
	}
}

/* Ảnh hero: không lazy-load, xem TemplateProvider::hero_image_attrs(). */
.gnv-hero {
	display: block;
	width: 100%;
	height: auto;
}

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

.gnv-btn {
	display: inline-block;
	padding: 0.75em 1.75em;
	border: 2px solid transparent;
	border-radius: var(--gnv-radius);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gnv-btn--primary {
	background-color: var(--gnv-primary);
	color: var(--gnv-white);
}

.gnv-btn--primary:hover,
.gnv-btn--primary:focus {
	background-color: var(--gnv-primary-dark);
	color: var(--gnv-white);
}

.gnv-btn--accent {
	background-color: var(--gnv-accent);
	color: var(--gnv-white);
}

.gnv-btn--accent:hover,
.gnv-btn--accent:focus {
	filter: brightness(0.9);
	color: var(--gnv-white);
}

.gnv-btn--ghost {
	border-color: var(--gnv-primary);
	color: var(--gnv-primary);
}

.gnv-btn--ghost:hover,
.gnv-btn--ghost:focus {
	background-color: var(--gnv-primary);
	color: var(--gnv-white);
}

/* --------------------------------------------------------------------------
 * Hero trang chủ
 * -------------------------------------------------------------------------- */

.gnv-hero-section {
	position: relative;
	display: grid;
	align-items: center;
	/*
	 * Chiều cao theo BỀ NGANG màn hình (vw) chứ không theo chiều cao (vh).
	 * Dùng vh thì trên màn rộng-thấp hero bị dẹt thành dải 4.6:1, ảnh nền bị
	 * cắt mất hơn nửa chiều cao. Theo vw thì tỉ lệ ổn định hơn nhiều, nên vùng
	 * an toàn của ảnh rộng gần gấp rưỡi. Xem CAU-TRUC-NOI-DUNG.md §12.
	 */
	min-height: clamp(420px, 36vw, 780px);
	background-color: var(--gnv-primary);
	color: var(--gnv-white);
	isolation: isolate;
}

.gnv-hero-section__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

/*
 * Các ảnh xếp chồng đúng một chỗ, chỉ ảnh mang .is-active hiện. Chuyển bằng
 * opacity chứ không bằng display: opacity chạy trên GPU nên mượt và không bắt
 * trình duyệt tính lại bố cục.
 */
/*
 * Các ảnh xếp chồng đúng một chỗ; ảnh đang hiện nằm ở translateX(0), các ảnh
 * khác chờ ngoài khung. Khung cha có overflow: hidden nên chúng không lòi ra.
 *
 * Dùng transform chứ không dùng `left` hay `margin`: transform chạy trên GPU,
 * không bắt trình duyệt tính lại bố cục, nên trượt mượt cả trên máy yếu. Đây
 * cũng đúng là cách Swiper và Slick làm bên trong — không cần tải thư viện.
 */
.gnv-hero-section__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateX(100%);
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.gnv-hero-section__img.is-active {
	transform: translateX(0);
}

/*
 * Lớp tạm để JavaScript đặt ảnh ra ngoài khung mà không kèm hiệu ứng, trước
 * khi cho nó trượt vào. Thiếu bước này thì ảnh trượt từ vị trí cũ sang, sai
 * hướng.
 */
.gnv-hero-section__img.khong-hieu-ung {
	transition: none;
}
/*
 * Dải tối phủ lên ảnh, đậm bên trái nơi có chữ và nhạt dần sang phải.
 *
 * Làm bằng CSS chứ KHÔNG nung vào ảnh: dải này bám theo khung hiển thị nên
 * luôn nằm đúng dưới chữ ở mọi bề ngang màn hình, kể cả khi ảnh bị cắt mạnh
 * trên điện thoại. Nung vào ảnh thì chỉ đúng ở một tỉ lệ duy nhất.
 *
 * Nhờ có dải này, ảnh nền giữ nguyên độ sáng thật thay vì phải làm mờ 35% như
 * trước — ảnh hiện rõ mà chữ vẫn tương phản đủ.
 */
.gnv-hero-section__bg::after {
	position: absolute;
	inset: 0;
	content: "";
	background-image: linear-gradient(
		90deg,
		rgb(10 42 88 / 92%) 0%,
		rgb(10 42 88 / 78%) 38%,
		rgb(10 42 88 / 38%) 72%,
		rgb(10 42 88 / 22%) 100%
	);
}

/*
 * Màn hẹp: chữ trải gần hết bề ngang nên dải ngang không còn tác dụng. Đổi
 * sang phủ đều, đậm hơn ở dưới nơi có nút.
 */
@media screen and (max-width: 900px) {
	.gnv-hero-section__bg::after {
		background-image: linear-gradient(
			180deg,
			rgb(10 42 88 / 72%) 0%,
			rgb(10 42 88 / 86%) 100%
		);
	}
}

/*
 * Máy bật "giảm chuyển động": đổi ảnh bằng MỜ DẦN thay vì trượt ngang.
 *
 * Mờ dần không phải chuyển động nên an toàn với người nhạy cảm, mà vẫn cho
 * thấy ảnh đã đổi — tốt hơn cả hai thái cực: trượt 1 giây (gây khó chịu) và
 * nhảy tức thì (trông như lỗi).
 *
 * JavaScript gắn class .khong-truot lên hero và KHÔNG đặt transform inline khi
 * chế độ này bật, nên không có gì ghi đè phần dưới đây.
 */
.gnv-hero-section.khong-truot .gnv-hero-section__img {
	transform: none;
	opacity: 0;
	transition: opacity 0.35s ease-in-out;
}

.gnv-hero-section.khong-truot .gnv-hero-section__img.is-active {
	opacity: 1;
}

.gnv-hero-section__inner {
	padding-block: var(--gnv-section-y);
}

.gnv-hero-section__title {
	margin: 0 0 0.5em;
	color: var(--gnv-white);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.15;
	max-width: 20ch;
}

.gnv-hero-section__lead {
	margin: 0 0 1.5em;
	max-width: 60ch;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.gnv-hero-section__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Banner đầu trang trong
 * -------------------------------------------------------------------------- */

.gnv-banner {
	padding-block: clamp(2rem, 4vw, 3.5rem);
	background-color: var(--gnv-primary);
	color: var(--gnv-white);
}

.gnv-banner__title {
	margin: 0 0 0.35em;
	color: var(--gnv-white);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.gnv-crumbs {
	font-size: 0.9375rem;
	opacity: 0.85;
}

.gnv-crumbs a {
	color: var(--gnv-white);
	text-decoration: none;
}

.gnv-crumbs a:hover,
.gnv-crumbs a:focus {
	text-decoration: underline;
}

.gnv-crumbs__sep {
	margin-inline: 0.5em;
}

/* --------------------------------------------------------------------------
 * Khối giới thiệu 2 cột
 * -------------------------------------------------------------------------- */

.gnv-about {
	display: grid;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
	grid-template-columns: 1fr 1fr;
}

.gnv-about__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gnv-radius);
	box-shadow: var(--gnv-shadow);
}

.gnv-about__lead {
	color: var(--gnv-text-muted);
	line-height: 1.75;
}

@media screen and (max-width: 900px) {
	.gnv-about {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Card
 * -------------------------------------------------------------------------- */

.gnv-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	background-color: var(--gnv-white);
	border: 1px solid var(--gnv-border);
	border-radius: var(--gnv-radius);
	transition: box-shadow 0.2s, transform 0.2s;
}

.gnv-card:hover {
	box-shadow: var(--gnv-shadow);
	transform: translateY(-2px);
}

.gnv-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.gnv-card__media--portrait {
	aspect-ratio: 1 / 1;
}

.gnv-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gnv-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
}

.gnv-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.4;
}

.gnv-card__title a {
	color: var(--gnv-primary);
	text-decoration: none;
}

.gnv-card__title a:hover,
.gnv-card__title a:focus {
	color: var(--gnv-accent);
}

.gnv-card__desc,
.gnv-card__role,
.gnv-card__date {
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.9375rem;
}

.gnv-card__role {
	font-weight: 600;
	color: var(--gnv-accent);
}

.gnv-card__tag {
	align-self: flex-start;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background-color: var(--gnv-surface);
	color: var(--gnv-primary);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.gnv-card__meta {
	display: grid;
	gap: 0.25rem 0.75rem;
	grid-template-columns: auto 1fr;
	margin: auto 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--gnv-border);
	font-size: 0.875rem;
}

.gnv-card__meta dt {
	color: var(--gnv-text-muted);
}

.gnv-card__meta dd {
	margin: 0;
	font-weight: 600;
}

/* Card đánh giá */

.gnv-card--quote {
	padding: 1.5rem;
	background-color: var(--gnv-surface);
	border-color: transparent;
}

.gnv-card__stars {
	margin: 0 0 0.5rem;
	color: #f5a623;
	font-size: 1.125rem;
	letter-spacing: 0.1em;
}

.gnv-card__quote {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	color: var(--gnv-text);
	font-style: italic;
	line-height: 1.7;
}

.gnv-card__cite {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
}

.gnv-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.gnv-card__cite-text {
	display: flex;
	flex-direction: column;
	font-size: 0.9375rem;
}

.gnv-card__cite-text span {
	color: var(--gnv-text-muted);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
 * Phần đuôi section
 * -------------------------------------------------------------------------- */

.gnv-section__more {
	margin: var(--gnv-gap) 0 0;
	text-align: center;
}

.gnv-empty {
	padding: 3rem 0;
	color: var(--gnv-text-muted);
	text-align: center;
}

/* --------------------------------------------------------------------------
 * Khối thông tin liên hệ
 * -------------------------------------------------------------------------- */

.gnv-info {
	padding: 1.5rem;
	background-color: var(--gnv-surface);
	border-radius: var(--gnv-radius);
}

.gnv-info__label {
	margin: 0 0 0.35rem;
	color: var(--gnv-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gnv-info__value {
	margin: 0;
	color: var(--gnv-text);
	line-height: 1.6;
}

.gnv-info__value a {
	color: var(--gnv-primary);
	text-decoration: none;
}

.gnv-info__value a:hover,
.gnv-info__value a:focus {
	text-decoration: underline;
}

.gnv-card--branch {
	background-color: var(--gnv-white);
}

/* --------------------------------------------------------------------------
 * Nội dung soạn thảo
 * -------------------------------------------------------------------------- */

.gnv-prose {
	max-width: 80ch;
	line-height: 1.8;
}

.gnv-prose h2,
.gnv-prose h3 {
	margin-top: 1.75em;
	color: var(--gnv-primary);
}

.gnv-prose__cover {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 2rem;
	border-radius: var(--gnv-radius);
}

/* --------------------------------------------------------------------------
 * Form liên hệ
 * -------------------------------------------------------------------------- */

.gnv-contact__intro .gnv-section__head {
	margin-bottom: 1.5rem;
}

.gnv-form {
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 900px;
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background-color: var(--gnv-white);
	border-radius: var(--gnv-radius);
	box-shadow: var(--gnv-shadow);
}

.gnv-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.gnv-form__field--wide,
.gnv-form__actions {
	grid-column: 1 / -1;
}

.gnv-form label {
	color: var(--gnv-text);
	font-size: 0.9375rem;
	font-weight: 600;
}

/*
 * min-height và line-height là bắt buộc, không phải trang trí.
 *
 * `appearance: none` (đặt ở khối mũi tên <select> phía dưới) gỡ luôn cách trình
 * duyệt tự tính chiều cao ô chọn. Thiếu min-height thì hộp co lại thấp hơn dòng
 * chữ và cắt cụt phần dưới — dấu nặng, dấu mũ tiếng Việt mất hẳn.
 */
.gnv-form input,
.gnv-form select,
.gnv-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7em 0.9em;
	border: 1px solid var(--gnv-border);
	border-radius: var(--gnv-radius);
	background-color: var(--gnv-white);
	color: var(--gnv-text);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.gnv-form input:focus,
.gnv-form select:focus,
.gnv-form textarea:focus {
	border-color: var(--gnv-primary);
	outline: 2px solid var(--gnv-primary);
	outline-offset: 1px;
}

.gnv-form textarea {
	resize: vertical;
}

/* Bẫy bot: ẩn khỏi mắt người nhưng vẫn nằm trong DOM cho bot điền vào. */
.gnv-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gnv-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0.5rem 0 0;
}

.gnv-form__hint {
	color: var(--gnv-text-muted);
	font-size: 0.875rem;
}

.gnv-notice {
	max-width: 900px;
	margin: 0 auto 1rem;
	padding: 0.9em 1.2em;
	border-left: 4px solid;
	border-radius: var(--gnv-radius);
	font-weight: 500;
}

.gnv-notice--success {
	border-color: #1b7f3b;
	background-color: #eaf7ee;
	color: #14622d;
}

.gnv-notice--error {
	border-color: var(--gnv-accent);
	background-color: #fdeef0;
	color: #a81b23;
}

@media screen and (max-width: 700px) {
	.gnv-form {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Trang chi tiết
 * -------------------------------------------------------------------------- */

.gnv-detail {
	display: grid;
	align-items: start;
	gap: clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.gnv-detail--portrait {
	grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
}

.gnv-detail__main {
	max-width: none;
}

.gnv-detail__lead {
	margin-top: 0;
	color: var(--gnv-text-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

.gnv-detail__portrait {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 1.25rem;
	border-radius: var(--gnv-radius);
}

.gnv-detail__aside {
	position: sticky;
	top: 1.5rem;
}

.gnv-specs {
	padding: 1.5rem;
	background-color: var(--gnv-surface);
	border-radius: var(--gnv-radius);
}

.gnv-specs__title {
	margin: 0 0 1rem;
	color: var(--gnv-primary);
	font-size: 1.125rem;
}

.gnv-specs__list {
	display: grid;
	gap: 0.85rem;
	margin: 0;
}

.gnv-specs__list dt {
	color: var(--gnv-text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.gnv-specs__list dd {
	margin: 0.15rem 0 0;
	color: var(--gnv-text);
	font-weight: 600;
}

.gnv-specs__cta {
	margin: 1.5rem 0 0;
}

.gnv-specs__cta .gnv-btn {
	display: block;
	text-align: center;
}

.gnv-post-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	color: var(--gnv-text-muted);
	font-size: 0.9375rem;
}

@media screen and (max-width: 900px) {
	.gnv-detail,
	.gnv-detail--portrait {
		grid-template-columns: 1fr;
	}

	.gnv-detail__aside {
		position: static;
	}

	/* Trên mobile đưa ảnh chân dung lên trước phần tiểu sử. */
	.gnv-detail--portrait .gnv-detail__aside {
		order: -1;
	}
}

/* --------------------------------------------------------------------------
 * Thanh thông tin trên header
 * -------------------------------------------------------------------------- */

/* Các lớp dưới đây do shortcode [gnv_info] / [gnv_hotline] sinh ra, dùng trong
   hàng "Trên Header" của Astra. Thanh tự viết đã gỡ ngày 2026-09-17. */

.gnv-topbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnv-topbar__item {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.gnv-topbar__label {
	/* currentColor: trên thanh đậm của child theme thì ra trắng, khi shortcode
	   chạy trong hàng Astra nền sáng thì tự thành màu chữ của hàng đó. */
	color: currentColor;
	opacity: 0.65;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.gnv-topbar__value {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

a.gnv-topbar__value:hover,
a.gnv-topbar__value:focus {
	text-decoration: underline;
}

.gnv-topbar__phone {
	padding: 0.4em 1.1em;
	border-radius: 999px;
	background-color: var(--gnv-accent);
	color: var(--gnv-white);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.gnv-topbar__phone:hover,
.gnv-topbar__phone:focus {
	color: var(--gnv-white);
	filter: brightness(0.9);
}

/* --------------------------------------------------------------------------
 * Canh khung header trùng với khung nội dung
 *
 * Header của Astra đặt layout width = full (bỏ giới hạn 1200px, đủ chỗ cho
 * logo + menu 7 mục + ô tìm kiếm trên một dòng). Ở đây bó phần bên trong về
 * đúng --gnv-container để logo thẳng hàng với nội dung các section bên dưới.
 * -------------------------------------------------------------------------- */

.site-primary-header-wrap,
.site-above-header-wrap,
.site-below-header-wrap {
	width: var(--gnv-container);
	max-width: var(--gnv-container-max);
	margin-inline: auto;
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
 * Footer
 * -------------------------------------------------------------------------- */

/*
 * Footer nền SÁNG.
 *
 * Trước 18/09/2026 footer dùng --gnv-primary, đúng bằng màu khối CTA ngay phía
 * trên: hai khối dính thành một mảng xanh liền, và logo (xanh lá + navy) chìm
 * hẳn. Nền sáng vừa tách bạch hai khối mà không cần đường kẻ, vừa cho logo
 * hiện đúng màu thật.
 */
.gnv-footer {
	padding-block: clamp(2.5rem, 5vw, 4rem) 0;
	background-color: var(--gnv-surface);
	color: var(--gnv-text);
}

.gnv-footer__grid {
	display: grid;
	gap: clamp(1.75rem, 3vw, 3.5rem);
	grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.gnv-footer__col--brand {
	max-width: 34ch;
}

.gnv-footer__logo img {
	max-width: 190px;
	height: auto;
	margin-bottom: 0.9rem;
}

.gnv-footer__title {
	margin: 0 0 0.5rem;
	color: var(--gnv-primary);
	font-size: 1.125rem;
	font-weight: 700;
}

.gnv-footer__slogan {
	margin: 0 0 0.75rem;
	color: var(--gnv-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gnv-footer__about {
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.gnv-footer__heading {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--gnv-primary);
	color: var(--gnv-primary);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gnv-footer__list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.gnv-footer__list a {
	color: var(--gnv-text);
	text-decoration: none;
	transition: color 0.2s;
}

.gnv-footer__list a:hover,
.gnv-footer__list a:focus {
	color: var(--gnv-primary);
	text-decoration: underline;
}

.gnv-footer__list--plain {
	color: var(--gnv-text-muted);
}

.gnv-footer__phone {
	font-size: 1.0625rem;
	font-weight: 700;
}

.gnv-footer__list a.gnv-footer__phone {
	color: var(--gnv-primary);
}

/* Thanh bản quyền, ngăn với phần trên bằng một đường mảnh. */
.gnv-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--gnv-border);
}

.gnv-footer__copy {
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.875rem;
}

.gnv-footer__bar-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.gnv-footer__bar-links a {
	color: var(--gnv-text-muted);
	text-decoration: none;
}

.gnv-footer__bar-links a:hover,
.gnv-footer__bar-links a:focus {
	color: var(--gnv-primary);
	text-decoration: underline;
}

@media screen and (max-width: 1050px) {
	.gnv-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.gnv-footer__col--brand {
		grid-column: 1 / -1;
		max-width: none;
	}
}

@media screen and (max-width: 600px) {
	.gnv-footer__grid {
		grid-template-columns: 1fr;
	}

	.gnv-footer__bar {
		justify-content: flex-start;
	}
}
/* --------------------------------------------------------------------------
 * 404 và tìm kiếm
 * -------------------------------------------------------------------------- */

.gnv-404 {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

.gnv-404__code {
	margin: 0;
	color: var(--gnv-surface);
	font-size: clamp(4rem, 14vw, 9rem);
	font-weight: 800;
	line-height: 1;
}

.gnv-404__text {
	margin: 0 0 1.5rem;
	color: var(--gnv-text-muted);
	font-size: 1.125rem;
}

.gnv-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

/* Mặc định: form đứng một mình (trang 404, trang kết quả tìm kiếm). */

.gnv-search {
	display: flex;
	gap: 0.5rem;
	margin-inline: auto;
	max-width: 480px;
}

.gnv-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.7em 0.9em;
	border: 1px solid var(--gnv-border);
	border-radius: var(--gnv-radius);
	background-color: var(--gnv-white);
	color: var(--gnv-text);
	font: inherit;
	font-size: 1rem;
}

.gnv-search__input::placeholder {
	color: var(--gnv-text-muted);
	opacity: 1;
}

.gnv-search__input:focus {
	border-color: var(--gnv-primary);
	outline: 2px solid var(--gnv-primary);
	outline-offset: 1px;
}

/* Ngoài header: nút chữ. Icon chỉ dùng trong header nên mặc định giấu đi. */
.gnv-search__icon {
	display: none;
}

.gnv-search__submit {
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: var(--gnv-radius);
	background-color: var(--gnv-primary);
	color: var(--gnv-white);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.gnv-search__submit:hover,
.gnv-search__submit:focus {
	background-color: var(--gnv-primary-dark);
}

/* --------------------------------------------------------------------------
 * Biến thể trong header: ô tìm kiếm luôn hiện, dạng viên thuốc
 *
 * Astra bản free luôn dựng kiểu slide-search (form bị ẩn, bấm icon mới trượt
 * ra). LayoutProvider gắn thêm class .gnv-search-inline để phần dưới ghi đè
 * trạng thái ẩn và định vị đó.
 *
 * Màu lấy từ currentColor (màu chữ của header) nên dùng được cả khi header nền
 * trắng lẫn khi đổi sang nền đậm, không phải sửa CSS mỗi lần đổi màu.
 * -------------------------------------------------------------------------- */

/* Gỡ trạng thái ẩn + định vị tuyệt đối của slide-search. */
.ast-search-menu-icon.gnv-search-inline .gnv-search {
	position: relative;
	visibility: visible;
	top: auto;
	right: auto;
	left: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
	background-color: transparent;
	opacity: 1;
	transform: none;
}

/*
 * Astra vẽ khung 2px quanh form cho kiểu slide-search:
 *   .ast-desktop .ast-header-search .slide-search .search-form { border: 2px solid ... }
 * Ở đây viền nằm trên chính ô nhập rồi nên khung ngoài là thừa. Class
 * slide-search phải giữ để JS live search của Astra hoạt động, nên gỡ khung
 * bằng selector có độ ưu tiên cao hơn thay vì bỏ class.
 */
.ast-desktop .ast-header-search .ast-search-menu-icon.gnv-search-inline .gnv-search.search-form,
.ast-search-menu-icon.gnv-search-inline .gnv-search.search-form {
	border: 0;
	background-color: transparent;
	box-shadow: none;
}

/* Icon kính lúp của Astra dùng để bật/tắt — không cần khi form đã hiện sẵn. */
.ast-search-menu-icon.gnv-search-inline .ast-search-icon {
	display: none;
}

.ast-search-menu-icon .gnv-search__input {
	/* Astra đã sinh width: 520px từ thiết lập Header > Tìm kiếm > Độ rộng.
	   max-width giữ cho ô không tràn ra ngoài header trên màn hình hẹp. */
	max-width: 100%;
	height: auto;
	padding: 0.6em 3.2em 0.6em 1.2em;
	/* Dự phòng cho trình duyệt chưa hỗ trợ color-mix. */
	border: 1px solid rgb(0 0 0 / 14%);
	border-radius: 999px;
	background-color: rgb(0 0 0 / 4%);
	color: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.ast-search-menu-icon .gnv-search__input {
		border-color: color-mix(in srgb, currentColor 22%, transparent);
		background-color: color-mix(in srgb, currentColor 6%, transparent);
	}
}

.ast-search-menu-icon .gnv-search__input::placeholder {
	color: currentColor;
	opacity: 0.55;
}

.ast-search-menu-icon .gnv-search__input:focus {
	border-color: var(--gnv-primary);
	outline: 2px solid var(--gnv-primary);
	outline-offset: 0;
}

/* Nút gửi là một nút icon tròn nằm trong ô nhập, sát mép phải. */
.ast-search-menu-icon .gnv-search__submit {
	position: absolute;
	top: 50%;
	right: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--gnv-primary);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s;
}

.ast-search-menu-icon .gnv-search__submit:hover,
.ast-search-menu-icon .gnv-search__submit:focus {
	background-color: var(--gnv-accent);
}

/* Trong header hiện icon, giấu chữ nhưng vẫn để trình đọc màn hình đọc được. */
.ast-search-menu-icon .gnv-search__submit-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Trong header thì hiện icon (mặc định bên dưới đã giấu nó). */
.ast-search-menu-icon .gnv-search__icon {
	display: block;
}

/* --------------------------------------------------------------------------
 * Block pattern
 * -------------------------------------------------------------------------- */

.gnv-pattern-duo .wp-block-column,
.gnv-pattern-quad .wp-block-column {
	border-radius: var(--gnv-radius);
}

.gnv-faq {
	max-width: 900px;
	margin-inline: auto;
}

.gnv-faq__item {
	margin-bottom: 0.75rem;
	padding: 1rem 1.25rem;
	background-color: var(--gnv-surface);
	border-radius: var(--gnv-radius);
}

.gnv-faq__item summary {
	color: var(--gnv-primary);
	cursor: pointer;
	font-weight: 600;
}

.gnv-faq__item[open] summary {
	margin-bottom: 0.5rem;
}

.gnv-cta-banner {
	border-radius: var(--gnv-radius);
}

/* --------------------------------------------------------------------------
 * Tiếp cận (accessibility)
 * -------------------------------------------------------------------------- */

/* Chỉ hiện viền focus khi điều hướng bằng bàn phím, không hiện khi bấm chuột. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--gnv-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/*
	 * NGOẠI LỆ DUY NHẤT: ảnh nền hero.
	 *
	 * Quy tắc `*` ở trên tắt mọi hiệu ứng, kể cả hiệu ứng mờ dần thay thế mà
	 * JavaScript chuyển sang khi máy bật giảm chuyển động — kết quả là ảnh nhảy
	 * phựt, trông như lỗi.
	 *
	 * Mờ dần theo opacity không gây khó chịu như trượt ngang: nó không dịch
	 * chuyển vật thể nên không ảnh hưởng người nhạy cảm với chuyển động. Đây là
	 * cách thay thế được khuyến nghị cho hiệu ứng trượt, không phải vi phạm.
	 *
	 * Chỉ áp cho .khong-truot — tức đúng trường hợp JS đã chuyển sang mờ dần.
	 */
	.gnv-hero-section.khong-truot .gnv-hero-section__img {
		transition-duration: 0.35s !important;
	}
}

/* --------------------------------------------------------------------------
 * Header co giãn theo bề ngang màn hình
 *
 * Header một dòng phải chứa logo (~240px) + menu 7 mục + ô tìm kiếm. Màn hình
 * càng hẹp thì càng phải nhường chỗ, nếu không mục cuối của menu rớt xuống
 * dòng hai. Các mốc dưới đây tính cho màn 1366px và 1280px.
 * -------------------------------------------------------------------------- */

/*
 * Ô tìm kiếm co giãn theo bề ngang màn hình.
 *
 * Trước đây ô có độ rộng CỐ ĐỊNH (Astra sinh width:400px) nên khi cửa sổ hẹp
 * lại là hết chỗ và menu rớt xuống dòng hai.
 *
 * Bản đầu tôi đổi cả hàng header sang flex — sai, vì nó phá hình học lưới của
 * Astra và làm menu đè lên logo khi menu nằm ở ô giữa. Ở đây giữ nguyên lưới
 * của Astra, chỉ cho riêng ô nhập co giãn bằng clamp(): tối thiểu 180px, theo
 * 22% bề ngang màn hình, tối đa 520px.
 *
 * Mọi rule đều giới hạn trong #ast-desktop-header để không đụng header mobile.
 */
/*
 * CHỈNH 18/09/2026 — menu tăng từ 5 lên 8 mục (thêm Dịch vụ, Danh mục phép thử,
 * Quy trình) nên logo + menu đã chiếm gần hết hàng header; ô tìm kiếm rộng tới
 * 520px bị đẩy tràn khỏi mép phải màn hình. Hạ trần xuống 300px và giảm hệ số
 * theo viewport. Ô vẫn đủ rộng để đọc được từ khoá đang gõ.
 */
#ast-desktop-header .ast-header-search .ast-search-menu-icon,
#ast-desktop-header .ast-header-search .ast-search-menu-icon .search-field {
	width: clamp(150px, 13vw, 260px);
	min-width: 0;
	max-width: 100%;
}

/*
 * KHÔNG đặt overflow: hidden lên .site-primary-header-wrap.
 *
 * Đã thử ngày 18/09/2026 để chặn ô tìm kiếm tràn — và nó cắt mất menu con của
 * "Dịch vụ" và "Quy trình", vì ul.sub-menu nằm bên trong wrap này. Chặn tràn
 * phải làm bằng cách cho từng phần tử co lại (min-width: 0), không phải cắt
 * cụt cả khối.
 */
#ast-desktop-header .ast-builder-menu-1 {
	min-width: 0;
}

/* Menu không xuống dòng và không bị bóp méo. */
#ast-desktop-header .main-header-menu {
	flex-wrap: nowrap;
}

#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	white-space: nowrap;
}

/* Màn hẹp dần: bóp khoảng cách menu cho ô tìm kiếm có chỗ thở. */
@media screen and (max-width: 1500px) {
	#ast-desktop-header .ast-builder-menu-1 .menu-item > .menu-link {
		padding-inline: 0.7em;
	}
}

@media screen and (max-width: 1300px) {
	#ast-desktop-header .ast-builder-menu-1 .menu-item > .menu-link {
		padding-inline: 0.5em;
		font-size: 0.9375rem;
	}
}

/* --------------------------------------------------------------------------
 * Khi [gnv_info] / [gnv_hotline] chạy trong component HTML của Astra
 *
 * Astra bọc nội dung shortcode trong .ast-custom-html. Ở đó không có
 * .gnv-topbar bao ngoài, nên phải tự lo phần dàn hàng ngang và khoảng cách.
 * Màu thì đã bám currentColor nên tự đúng theo màu chữ của hàng.
 * -------------------------------------------------------------------------- */

.ast-custom-html .gnv-topbar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.3;
}

.ast-custom-html .gnv-topbar__item {
	display: flex;
	flex-direction: column;
}

.ast-custom-html .gnv-topbar__phone {
	display: inline-block;
	line-height: 1.3;
}

/*
 * Nút gọi trong hàng Astra: giữ nền đỏ nên chữ phải trắng, không dùng
 * currentColor như hai phần trên.
 */
.ast-custom-html .gnv-topbar__phone,
.ast-custom-html .gnv-topbar__phone:hover,
.ast-custom-html .gnv-topbar__phone:focus {
	color: #fff;
}

/*
 * Nút hamburger.
 *
 * Starter content của Astra đặt màu nút là var(--ast-global-color-5) = trắng,
 * hợp với header nền đậm lúc đầu. Header giờ nền trắng nên nút vô hình. Đặt
 * thẳng ở đây thay vì qua Customizer, vì thiết lập tương ứng không sinh ra CSS
 * ở bản Astra free.
 */
#ast-mobile-header .main-header-menu-toggle,
#ast-mobile-header .ast-mobile-menu-trigger-minimal,
#ast-mobile-header .ast-mobile-menu-trigger-fill {
	color: var(--gnv-text);
	border-color: var(--gnv-text);
}

#ast-mobile-header .main-header-menu-toggle svg,
#ast-mobile-header .ast-mobile-menu-trigger-minimal svg {
	fill: currentColor;
}

#ast-mobile-header .main-header-menu-toggle:hover,
#ast-mobile-header .main-header-menu-toggle:focus {
	color: var(--gnv-primary);
	border-color: var(--gnv-primary);
}


/* --------------------------------------------------------------------------
 * Bảng tra cứu chỉ tiêu xét nghiệm
 * -------------------------------------------------------------------------- */

.gnv-lead {
	max-width: 68ch;
	margin: 0 0 2rem;
	color: var(--gnv-text-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.gnv-note {
	max-width: 80ch;
	margin: 1.5rem 0 0;
	color: var(--gnv-text-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.gnv-tests {
	margin-block: 1.5rem;
}

.gnv-tests__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 1rem;
	background-color: var(--gnv-surface);
	border-radius: var(--gnv-radius);
}

.gnv-tests__search {
	flex: 1 1 22rem;
	margin: 0;
}

.gnv-tests__filter {
	flex: 0 1 12rem;
	margin: 0;
}

/*
 * Chiều cao tối thiểu 44px: vừa đủ cho chữ có dấu tiếng Việt (dấu nặng, dấu
 * mũ) không bị khuyết, vừa đạt cỡ vùng bấm khuyến nghị trên cảm ứng.
 * line-height mặc định của <select> không tuân theo giá trị đặt bằng CSS trên
 * mọi trình duyệt, nên dùng min-height thay vì trông cậy vào line-height.
 */
.gnv-tests__input,
.gnv-tests__select {
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.85rem;
	background-color: #fff;
	border: 1px solid var(--gnv-border, #d6dbe3);
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/*
 * Mũi tên mặc định của <select> nằm sát mép phải và mỗi trình duyệt vẽ một
 * kiểu. Tắt nó đi rồi tự vẽ bằng SVG nền: cách mép 0.9rem, cùng màu với chữ
 * phụ, giống nhau trên mọi máy. Chừa padding-right đủ rộng để chữ dài không
 * chạm vào mũi tên.
 */
.gnv-tests__select,
.gnv-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236d6e73' d='M1.41 0 6 4.59 10.59 0 12 1.42 6 7.42 0 1.42z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 11px 8px;
}

/* IE/Edge cũ vẫn vẽ mũi tên riêng, ẩn đi để không thành hai mũi tên. */
.gnv-tests__select::-ms-expand,
.gnv-form select::-ms-expand {
	display: none;
}

.gnv-tests__input:focus,
.gnv-tests__select:focus {
	outline: 2px solid var(--gnv-primary);
	outline-offset: 1px;
}

.gnv-tests__count {
	flex: 0 0 auto;
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Bảng rộng hơn khung thì cuộn ngang trong khối, không đẩy vỡ cả trang. */
.gnv-scroll {
	overflow-x: auto;
	border-radius: var(--gnv-radius);
}

/*
 * Bảng tra cứu dùng chung nền tảng .gnv-table (bề rộng, viền, đầu bảng, biến
 * thể thẻ trên điện thoại). Dưới đây CHỈ là phần riêng của nó.
 */

/* Đầu bảng dính khi cuộn 76 dòng. */
.gnv-tests__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}

.gnv-tests__row:hover {
	background-color: color-mix(in srgb, var(--gnv-primary) 7%, #fff);
}

@supports not (background-color: color-mix(in srgb, red 50%, #fff)) {
	.gnv-tests__row:hover {
		background-color: var(--gnv-surface);
	}
}

/* Ô rỗng trên điện thoại thì ẩn hẳn, không để lại nhãn cột trơ trọi. */
@media screen and (max-width: 782px) {
	.gnv-tests__table td:empty {
		display: none;
	}
}
.gnv-tests__name {
	font-weight: 600;
}

.gnv-tests__name a {
	color: var(--gnv-primary);
	text-decoration: none;
}

.gnv-tests__name a:hover,
.gnv-tests__name a:focus {
	text-decoration: underline;
}

.gnv-tests__abbr {
	display: block;
	margin-top: 0.15rem;
	color: var(--gnv-text-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.gnv-tests__time {
	white-space: nowrap;
}

.gnv-tests__empty {
	margin: 1rem 0 0;
	padding: 1rem;
	background-color: var(--gnv-surface);
	border-radius: var(--gnv-radius);
	color: var(--gnv-text-muted);
}

/* --------------------------------------------------------------------------
 * Chi tiết: ghi chú thông số, khối liên quan
 * -------------------------------------------------------------------------- */

.gnv-specs__note {
	display: block;
	margin-top: 0.35rem;
	color: var(--gnv-text-muted);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
}

.gnv-specs__group {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
}

.gnv-related {
	margin-top: 1.25rem;
	padding: 1.5rem;
	background-color: var(--gnv-surface);
	border-radius: var(--gnv-radius);
}

.gnv-related__title {
	margin: 0 0 0.85rem;
	color: var(--gnv-primary);
	font-size: 1.125rem;
}

.gnv-related__list {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.5rem;
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
 * Gói dịch vụ
 * -------------------------------------------------------------------------- */

.gnv-grid--3 {
	--gnv-cols: 3;
}

.gnv-packages__group + .gnv-packages__group {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.gnv-packages__heading {
	margin: 0 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--gnv-primary);
	color: var(--gnv-primary);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.gnv-packages__heading a {
	color: inherit;
	text-decoration: none;
}

.gnv-packages__heading a:hover,
.gnv-packages__heading a:focus {
	text-decoration: underline;
}

.gnv-card--package {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
}

.gnv-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

.gnv-card__meta li {
	padding: 0.2rem 0.6rem;
	background-color: var(--gnv-surface);
	border-radius: 999px;
	color: var(--gnv-primary);
	font-size: 0.8125rem;
	font-weight: 600;
}

.gnv-card__who {
	margin: 0.85rem 0 0;
	color: var(--gnv-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
 * Khối kêu gọi hành động
 * -------------------------------------------------------------------------- */

.gnv-cta {
	padding-block: clamp(2rem, 4vw, 3.5rem);
	background-color: var(--gnv-primary);
	color: var(--gnv-white);
}

.gnv-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.gnv-cta__text {
	flex: 1 1 26rem;
}

.gnv-cta__title {
	margin: 0;
	color: var(--gnv-white);
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	line-height: 1.25;
}

.gnv-cta__note,
.gnv-cta__perks {
	margin: 0.75rem 0 0;
	color: color-mix(in srgb, var(--gnv-white) 82%, transparent);
	font-size: 0.9375rem;
	line-height: 1.65;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.gnv-cta__note,
	.gnv-cta__perks {
		color: #dbe4f2;
	}
}

.gnv-cta__perks {
	font-size: 0.875rem;
}

.gnv-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.gnv-cta .gnv-btn--ghost {
	border-color: var(--gnv-white);
	color: var(--gnv-white);
}

.gnv-cta .gnv-btn--ghost:hover,
.gnv-cta .gnv-btn--ghost:focus {
	background-color: var(--gnv-white);
	color: var(--gnv-primary);
}

/* --------------------------------------------------------------------------
 * Thẻ nhóm dịch vụ (trang /dich-vu/)
 * -------------------------------------------------------------------------- */

.gnv-card--group {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border-top: 4px solid var(--gnv-accent);
}

.gnv-card--group .gnv-card__title {
	margin: 0;
	font-size: 1.25rem;
}

.gnv-card__count {
	margin: 0.4rem 0 0.85rem;
	color: var(--gnv-accent);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.gnv-card--group .gnv-card__text {
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * Bảng dữ liệu dùng chung (quy trình, lấy mẫu, chất lượng, nhân sự)
 * -------------------------------------------------------------------------- */

.gnv-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.gnv-table th,
.gnv-table td {
	padding: 0.75rem 0.85rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--gnv-border, #e4e8ee);
}

.gnv-table thead th {
	background-color: var(--gnv-primary);
	color: var(--gnv-white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gnv-table tbody th {
	font-weight: 600;
	color: var(--gnv-primary);
}

.gnv-table tbody tr:nth-child(even) {
	background-color: var(--gnv-surface);
}

/* Dòng được trỏ tới bằng liên kết neo: làm nổi để khách thấy ngay mình ở đâu. */
.gnv-table tbody tr:target {
	outline: 3px solid var(--gnv-accent);
	outline-offset: -3px;
}

.gnv-table__strong {
	font-weight: 600;
	white-space: nowrap;
}

@media screen and (max-width: 782px) {
	.gnv-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.gnv-table,
	.gnv-table tbody,
	.gnv-table tr,
	.gnv-table th,
	.gnv-table td {
		display: block;
		width: auto;
	}

	.gnv-table tbody tr {
		margin-bottom: 0.85rem;
		padding: 0.85rem;
		background-color: var(--gnv-surface);
		border-radius: var(--gnv-radius);
	}

	.gnv-table th,
	.gnv-table td {
		padding: 0.2rem 0;
		border-bottom: 0;
	}

	.gnv-table__strong {
		white-space: normal;
	}

	.gnv-table td::before {
		display: block;
		color: var(--gnv-text-muted);
		content: attr(data-label);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}
}

/* --------------------------------------------------------------------------
 * Quy trình năm bước
 * -------------------------------------------------------------------------- */

.gnv-steps {
	display: grid;
	gap: var(--gnv-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	counter-reset: gnv-step;
}

.gnv-steps__item {
	position: relative;
	padding: 1.5rem 1.25rem;
	background-color: var(--gnv-surface);
	border-radius: var(--gnv-radius);
	border-top: 4px solid var(--gnv-primary);
}

.gnv-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.75rem;
	background-color: var(--gnv-primary);
	border-radius: 50%;
	color: var(--gnv-white);
	font-size: 0.9375rem;
	font-weight: 700;
}

.gnv-steps__title {
	margin: 0 0 0.5rem;
	color: var(--gnv-primary);
	font-size: 1.0625rem;
	line-height: 1.3;
}

.gnv-steps__text {
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

@media screen and (max-width: 1100px) {
	.gnv-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 600px) {
	.gnv-steps {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Hệ thống chất lượng
 * -------------------------------------------------------------------------- */

.gnv-levels {
	display: grid;
	gap: 0.85rem;
}

.gnv-levels__item {
	display: grid;
	align-items: start;
	gap: 0.25rem 1.5rem;
	padding: 1.25rem 1.5rem;
	background-color: var(--gnv-surface);
	border-left: 4px solid var(--gnv-primary);
	border-radius: var(--gnv-radius);
	grid-template-columns: 6rem minmax(0, 1fr);
}

.gnv-levels__tag {
	grid-row: span 2;
	margin: 0;
	color: var(--gnv-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gnv-levels__title {
	margin: 0;
	color: var(--gnv-primary);
	font-size: 1.0625rem;
}

.gnv-levels__text {
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

@media screen and (max-width: 600px) {
	.gnv-levels__item {
		grid-template-columns: 1fr;
	}

	.gnv-levels__tag {
		grid-row: auto;
	}
}

.gnv-codes {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.gnv-codes__item {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.6rem 0.85rem;
	background-color: #fff;
	border-radius: 6px;
}

.gnv-codes__code {
	flex: 0 0 auto;
	color: var(--gnv-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.gnv-codes__name {
	font-size: 0.9375rem;
}

.gnv-card--principle,
.gnv-card--value,
.gnv-card--vision,
.gnv-card--equip {
	padding: 1.5rem;
}

.gnv-card--principle .gnv-card__title,
.gnv-card--value .gnv-card__title,
.gnv-card--equip .gnv-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.gnv-card--vision .gnv-card__title {
	margin: 0 0 0.75rem;
	font-size: 1.375rem;
}

.gnv-card--principle .gnv-card__text,
.gnv-card--value .gnv-card__text,
.gnv-card--vision .gnv-card__text,
.gnv-card--equip .gnv-card__text {
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.gnv-deflist {
	display: grid;
	gap: 1rem;
	margin: 0;
}

.gnv-deflist dt {
	color: var(--gnv-primary);
	font-size: 1rem;
	font-weight: 700;
}

.gnv-deflist dd {
	margin: 0.25rem 0 0;
	color: var(--gnv-text-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.gnv-deflist--split {
	gap: 0;
	grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
}

.gnv-deflist--split dt,
.gnv-deflist--split dd {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--gnv-border, #e4e8ee);
}

.gnv-deflist--split dd {
	margin: 0;
	color: var(--gnv-text);
}

@media screen and (max-width: 600px) {
	.gnv-deflist--split {
		grid-template-columns: 1fr;
	}

	.gnv-deflist--split dt {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

.gnv-list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding-left: 1.2rem;
	line-height: 1.65;
}

.gnv-equip + .gnv-equip {
	margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.gnv-equip__heading {
	margin: 0 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--gnv-primary);
	color: var(--gnv-primary);
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

/* --------------------------------------------------------------------------
 * Chống tràn ngang — sửa theo kết quả tools/kiem-tra-layout.html 18/09/2026
 * -------------------------------------------------------------------------- */

/*
 * Logo do Astra sinh ở 257px. Trên màn 320px, logo + padding 2×20px + nút menu
 * 45px = 342px > 320px, tràn 24px trên MỌI trang. Thu logo theo bề ngang màn.
 */
.site-header .custom-logo-link img,
.site-header .astra-logo-svg,
header .custom-logo-link img,
header .astra-logo-svg {
	width: auto;
	max-width: min(257px, 52vw);
	height: auto;
}

@media screen and (min-width: 1201px) {
	.site-header .custom-logo-link img,
	.site-header .astra-logo-svg,
	header .custom-logo-link img,
	header .astra-logo-svg {
		max-width: 200px;
	}
}

/*
 * Chuỗi dài không có dấu cách (email, URL, mã SOP) đẩy rộng khối chứa nó và
 * làm tràn cả trang. Bắt gặp ở trang Liên hệ: thẻ <a> chứa email kéo trang
 * rộng thêm 18–53px trên điện thoại.
 */
.gnv-container,
.gnv-card,
.gnv-info__value,
.gnv-specs__list dd,
.gnv-table td,
.gnv-table th,
.gnv-prose {
	overflow-wrap: anywhere;
}

/* Tiêu đề dài cũng phải ngắt được, không đẩy vỡ khung. */
.gnv-banner__title,
.gnv-section__title,
.gnv-hero-section__title,
.gnv-card__title {
	overflow-wrap: anywhere;
}

/*
 * Vùng bấm trên thiết bị cảm ứng: WCAG 2.5.8 yêu cầu tối thiểu 24×24px. Liên
 * kết trong bảng và trong danh sách vốn chỉ cao bằng một dòng chữ (~21px).
 * Chỉ áp cho liên kết đứng riêng, không áp cho liên kết nằm giữa câu văn.
 */
@media screen and (max-width: 768px) {
	.gnv-tests__name a,
	.gnv-info__value a,
	.gnv-specs__group a,
	.gnv-related__list a,
	.gnv-codes__item a,
	.gnv-card__title a,
	.gnv-crumbs a,
	.gnv-packages__heading a,
	.site-footer a,
	.gnv-footer a {
		display: inline-block;
		min-height: 24px;
		padding-block: 2px;
		line-height: 1.5;
	}
}

/*
 * Thẻ <a> bọc logo bị co lại còn 20px vì nó là hộp inline, trong khi ảnh bên
 * trong cao hơn nhiều — vùng bấm đo được nhỏ hơn hẳn phần nhìn thấy.
 */
.custom-logo-link {
	display: inline-block;
	line-height: 0;
}

/* --------------------------------------------------------------------------
 * Phân trang bảng tra cứu
 * -------------------------------------------------------------------------- */

.gnv-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	background-color: var(--gnv-surface);
	border-radius: var(--gnv-radius);
}

.gnv-pager[hidden] {
	display: none;
}

.gnv-pager__range {
	margin: 0;
	color: var(--gnv-text-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.gnv-pager__nums {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.gnv-pager__num {
	min-width: 40px;
	min-height: 40px;
	padding: 0 0.6rem;
	background-color: #fff;
	border: 1px solid var(--gnv-border, #d6dbe3);
	border-radius: 6px;
	color: var(--gnv-primary);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
}

.gnv-pager__num:hover,
.gnv-pager__num:focus {
	border-color: var(--gnv-primary);
	background-color: var(--gnv-surface);
}

.gnv-pager__num.is-active {
	background-color: var(--gnv-primary);
	border-color: var(--gnv-primary);
	color: var(--gnv-white);
}

.gnv-pager__gap {
	align-self: center;
	padding-inline: 0.15rem;
	color: var(--gnv-text-muted);
}

/*
 * Nút gửi tìm kiếm trong menu mobile.
 *
 * Astra có bộ rule riêng cho .ast-mobile-header-content với độ ưu tiên (0,3,0),
 * cao hơn rule chung `.ast-search-menu-icon .gnv-search__submit` (0,2,0) nên nút
 * bị trả về hình vuông, dính sát mép phải và cao tràn cả ô — lòi hẳn ra ngoài
 * viên thuốc bo tròn. Ghi đè bằng selector cùng cấp độ ưu tiên; child theme nạp
 * sau Astra nên thắng.
 */
.ast-mobile-header-content .ast-search-menu-icon .gnv-search__submit,
.ast-desktop-header-content .ast-search-menu-icon .gnv-search__submit {
	position: absolute;
	top: 50%;
	right: 5px;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--gnv-primary);
	color: #fff;
	transform: translateY(-50%);
}

.ast-mobile-header-content .ast-search-menu-icon .gnv-search__submit:hover,
.ast-mobile-header-content .ast-search-menu-icon .gnv-search__submit:focus,
.ast-desktop-header-content .ast-search-menu-icon .gnv-search__submit:hover,
.ast-desktop-header-content .ast-search-menu-icon .gnv-search__submit:focus {
	background-color: var(--gnv-accent);
}

/* Ô nhập trong menu mobile: chừa chỗ cho nút, chữ không chui xuống dưới nút. */
.ast-mobile-header-content .ast-search-menu-icon .gnv-search__input {
	padding-right: 3.2em;
}

/*
 * Nút viền trong hero: nền tối nên phải viền trắng, giống nút trong khối CTA.
 * Bản mặc định của .gnv-btn--ghost là viền xanh, đặt lên nền xanh đậm sẽ không
 * nhìn thấy gì.
 */
.gnv-hero-section .gnv-btn--ghost {
	border-color: var(--gnv-white);
	color: var(--gnv-white);
}

.gnv-hero-section .gnv-btn--ghost:hover,
.gnv-hero-section .gnv-btn--ghost:focus {
	background-color: var(--gnv-white);
	color: var(--gnv-primary);
}

/* --------------------------------------------------------------------------
 * Điều hướng trình chiếu hero
 *
 * Nằm ngoài .gnv-hero-section__bg (khối đó có z-index: -1) và trên .gnv-container
 * về thứ tự xếp lớp, để bấm được. Ẩn sẵn bằng thuộc tính hidden trong HTML,
 * JavaScript bỏ hidden khi chạy được — tắt JS thì không có nút chết.
 * -------------------------------------------------------------------------- */

.gnv-hero-nav[hidden],
.gnv-hero-cham[hidden] {
	display: none;
}

.gnv-hero-nav__nut {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid rgb(255 255 255 / 55%);
	border-radius: 50%;
	background-color: rgb(10 42 88 / 35%);
	color: var(--gnv-white);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s, border-color 0.2s;
}

.gnv-hero-nav__nut:hover,
.gnv-hero-nav__nut:focus-visible {
	border-color: var(--gnv-white);
	background-color: var(--gnv-accent);
}

.gnv-hero-nav__nut--truoc {
	left: clamp(0.5rem, 2vw, 1.75rem);
}

.gnv-hero-nav__nut--sau {
	right: clamp(0.5rem, 2vw, 1.75rem);
}

/* Chấm chỉ số: cho biết có bao nhiêu ảnh và đang ở ảnh nào. */
.gnv-hero-cham {
	position: absolute;
	bottom: clamp(0.85rem, 2vw, 1.5rem);
	left: 50%;
	z-index: 2;
	display: flex;
	gap: 0.5rem;
	transform: translateX(-50%);
}

/*
 * Chấm chỉ số: vạch nhìn thấy chỉ dày 6px nhưng NÚT cao 26px để đạt cỡ vùng
 * bấm tối thiểu (WCAG 2.5.8). Vạch vẽ bằng ::before nên thay đổi bề dày không
 * ảnh hưởng vùng bấm.
 */
.gnv-hero-cham__nut {
	position: relative;
	width: 30px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width 0.2s;
}

.gnv-hero-cham__nut::before {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 6px;
	border-radius: 999px;
	background-color: rgb(255 255 255 / 45%);
	content: "";
	transform: translateY(-50%);
	transition: background-color 0.2s;
}

.gnv-hero-cham__nut:hover::before,
.gnv-hero-cham__nut:focus-visible::before {
	background-color: rgb(255 255 255 / 75%);
}

.gnv-hero-cham__nut.is-active {
	width: 46px;
}

.gnv-hero-cham__nut.is-active::before {
	background-color: var(--gnv-white);
}
@media screen and (max-width: 600px) {
	.gnv-hero-nav__nut {
		width: 40px;
		height: 40px;
	}
}

/*
 * Điện thoại vẫn chạy trình chiếu, chỉ thu nhỏ nút cho vừa tay.
 *
 * Đã từng tắt hẳn trình chiếu dưới 769px để tiết kiệm băng thông, nhưng trang
 * chủ khi đó trông cụt vì nội dung thật còn thiếu. Ảnh thứ hai chỉ tốn ~85 KB
 * ở bản 1280px mà srcset chọn cho điện thoại.
 */
@media screen and (max-width: 600px) {
	.gnv-hero-cham__nut {
		width: 24px;
	}

	.gnv-hero-cham__nut.is-active {
		width: 36px;
	}
}
/*
 * Điện thoại: bỏ nút ‹ › vì chữ của hero trải hết bề ngang, nút hai bên đè lên
 * dòng mô tả. Thay bằng vuốt ngang (xem hero-slide.js) và chấm chỉ số — vuốt
 * cũng đúng thao tác người dùng điện thoại chờ đợi sẵn.
 */
@media screen and (max-width: 768px) {
	.gnv-hero-nav {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * Lưu ý pháp lý về phạm vi sử dụng kết quả
 *
 * Dùng viền trái màu nhấn thay vì nền đỏ hay biểu tượng cảnh báo: đây là thông
 * tin ràng buộc cần đọc, không phải lỗi. Nền đỏ làm khách tưởng có sự cố và
 * khiến cả trang trông kém tin cậy, trong khi mục đích chỉ là nói rõ phạm vi.
 * -------------------------------------------------------------------------- */
.gnv-legal-wrap {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.gnv-legal {
	border-left: 4px solid var(--gnv-accent);
	border-radius: var(--gnv-radius);
	background-color: var(--gnv-surface);
	padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 1.75rem);
}

.gnv-legal__title {
	margin: 0 0 0.6rem;
	color: var(--gnv-primary-dark);
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.3;
}

.gnv-legal__text {
	margin: 0;
	color: var(--gnv-text);
	font-size: 0.95rem;
	line-height: 1.7;
}

.gnv-legal__label {
	color: var(--gnv-primary-dark);
}

/* Bản đầy đủ nằm trong section đã có nền, nên bỏ nền để không chồng hai lớp. */
.gnv-legal--day-du {
	background-color: var(--gnv-white);
}