/* ====================================================================
   Trang chủ & thành phần dùng chung: cảm nhận, chứng chỉ, logo, bước quy trình
   ==================================================================== */

.nh-testimonials-grid,
.nh-certificates-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--nh-space-24);
}
@media (max-width: 781px) {
	.nh-testimonials-grid,
	.nh-certificates-grid {
		grid-template-columns: 1fr;
	}
}

.nh-testimonial-card__quote {
	font-size: 17px;
	line-height: 1.6;
	color: var(--nh-body);
	margin-bottom: var(--nh-space-16);
}
.nh-testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.nh-testimonial-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.nh-testimonial-card__avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--nh-accent-wash);
	color: var(--nh-accent);
	font-weight: 600;
}

.nh-certificate-card {
	display: flex;
	gap: var(--nh-space-16);
	align-items: flex-start;
}
.nh-certificate-card__image img {
	width: 120px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--nh-radius-image);
}
.nh-certificate-card__title {
	margin: 0 0 4px;
}

.nh-logo-strip {
	display: flex;
	align-items: center;
	gap: var(--nh-space-32);
	flex-wrap: nowrap;
	overflow-x: auto;
}
.nh-logo-strip__item img {
	height: 32px;
	width: auto;
	filter: grayscale(100%);
	opacity: 0.7;
}

/* --- Hero: thẻ nhỏ đè góc chân dung -------------------------------------- */

.nh-hero-portrait {
	position: relative;
}
.c-portrait__badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background-color: var(--nh-card);
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nh-ink);
	box-shadow: 0 8px 20px -10px rgba(21, 24, 29, 0.1);
}

/* --- Dải nguyên tắc (sec-trust) -------------------------------------------
   KHÔNG tự thêm display:grid/gap ở đây — cùng lỗi đã gặp ở .nh-audience-grid
   (xem ghi chú bên dưới): .row của Flatsome là flex, cột đã chia đều bằng
   span="3" × 4 = 12 qua padding riêng, không dùng CSS `gap`. Chỉ giữ lại
   text-align vì đó là style thật, không phải layout. */

.nh-trust-strip {
	text-align: center;
}
@media (max-width: 781px) {
	.nh-trust-strip {
		text-align: left;
	}
}

/* --- Bước quy trình (sec-process) -------------------------------------- */

.nh-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--nh-space-24);
}
@media (max-width: 781px) {
	.nh-process-grid {
		grid-template-columns: 1fr;
	}
}
.c-step {
	display: flex;
	flex-direction: column;
	gap: var(--nh-space-8);
}

/* --- Bạn đang ở đâu? -------------------------------------------------------
   KHÔNG tự thêm display:grid/gap ở đây — .row của Flatsome vốn đã là flex với
   3 cột span="4" (= 12/12) chia đều 1 hàng bằng cơ chế padding riêng, không
   dùng CSS `gap`. Thêm `gap` ở class con trong khi `display:flex` của Flatsome
   (specificity cao hơn) vẫn thắng khiến tổng chiều rộng vượt quá container,
   bị đẩy xuống dòng (2+1 thay vì 1 hàng 3 cột) — lỗi đã phát hiện qua phản hồi
   thực tế, để trống class này, chỉ dùng cho mục đích gắn cờ ngữ nghĩa. */