/* ====================================================================
   Thư viện class — Ngô Huỳnh Ads (DESIGN.md B10)
   Khách gõ các class này vào ô "Class" của element UX Builder,
   hoặc "Lớp CSS bổ sung" của khối Gutenberg.
   ==================================================================== */

/* --- Section ---------------------------------------------------------- */

.s-hero {
	padding-top: var(--nh-section-gap-mobile);
	padding-bottom: var(--nh-section-gap-mobile);
}
@media (min-width: 782px) {
	.s-hero {
		padding-top: var(--nh-section-gap-desktop);
		padding-bottom: var(--nh-section-gap-desktop);
	}
}

.s-page-head {
	padding-top: var(--nh-space-32);
	padding-bottom: var(--nh-space-24);
}

.s-wash {
	background-color: var(--nh-accent-wash);
}

.s-tight {
	padding-top: calc(var(--nh-section-gap-mobile) / 2) !important;
	padding-bottom: calc(var(--nh-section-gap-mobile) / 2) !important;
}
@media (min-width: 782px) {
	.s-tight {
		padding-top: calc(var(--nh-section-gap-desktop) / 2) !important;
		padding-bottom: calc(var(--nh-section-gap-desktop) / 2) !important;
	}
}

/* --- Nhấn chữ ---------------------------------------------------------- */

.c-mark {
	background-image: linear-gradient(transparent 55%, var(--nh-mark) 55%);
	padding: 0 2px;
}

.c-eyebrow {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nh-muted);
}

/* --- Pill chuyên mục ---------------------------------------------------- */

.c-pill {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 var(--nh-space-16);
	border-radius: var(--nh-radius-pill);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--nh-ink);
	background-color: var(--nh-pill-blue);
	white-space: nowrap;
}
.c-pill--blue   { background-color: var(--nh-pill-blue); }
.c-pill--amber  { background-color: var(--nh-pill-amber); }
.c-pill--rose   { background-color: var(--nh-pill-rose); }
.c-pill--green  { background-color: var(--nh-pill-green); }
.c-pill--lilac  { background-color: var(--nh-pill-lilac); }
.c-pill.is-active {
	border: 1.5px solid var(--nh-ink);
}

/* --- Nút ---------------------------------------------------------------
   Ghi đè kiểu nút mặc định của Flatsome bằng !important vì Flatsome áp
   màu/bo góc qua CSS nội tuyến theo theme_mod (button_radius, color_primary). */

.c-btn-primary,
a.c-btn-primary,
button.c-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 22px;
	border-radius: var(--nh-radius-button) !important;
	background-color: var(--nh-accent) !important;
	color: #fff !important;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	border: none !important;
	transition: background-color 0.15s ease;
}
.c-btn-primary:hover,
a.c-btn-primary:hover,
button.c-btn-primary:hover {
	background-color: var(--nh-accent-hover) !important;
	color: #fff !important;
}

.c-btn-outline,
a.c-btn-outline,
button.c-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 22px;
	border-radius: var(--nh-radius-button) !important;
	background-color: transparent !important;
	color: var(--nh-ink) !important;
	border: 1.5px solid var(--nh-ink) !important;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
}

.c-btn-ghost,
a.c-btn-ghost,
button.c-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--nh-ink) !important;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 16px;
}
/* Mũi tên gõ sẵn trong text nút (ví dụ "Đọc blog →") theo quy ước DESIGN.md;
   hover dịch toàn bộ nhãn 2px để mô phỏng mũi tên di chuyển. */
.c-btn-ghost {
	transition: transform 0.15s ease;
}
.c-btn-ghost:hover {
	transform: translateX(2px);
}
/* .text (UX Builder) và c-btn-primary/c-btn-ghost đều margin:0 — nút dính sát dòng text phía trên nếu không có khoảng cách */
.text + .c-btn-primary,
.text + a.c-btn-primary,
.text + .c-btn-ghost,
.text + a.c-btn-ghost {
	margin-top: var(--nh-space-16);
}

/* --- Thẻ card ---------------------------------------------------------- */

.c-card {
	background-color: var(--nh-card);
	border: 1px solid var(--nh-line);
	border-radius: var(--nh-radius-card);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.c-card:hover {
	border-color: var(--nh-line-strong);
	box-shadow: 0 8px 20px -10px rgba(21, 24, 29, 0.1);
	transform: translateY(-2px);
}

/* --- Chân dung ----------------------------------------------------------- */

.c-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--nh-radius-image);
	overflow: hidden;
}
.c-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Bước quy trình: xem khối ".c-step__number" màu ở cuối file ------------ */

/* --- Danh sách có dấu tích -------------------------------------------------- */

.c-checklist ul,
.c-checklist ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.c-checklist li {
	position: relative;
	padding-left: 28px;
	margin-bottom: var(--nh-space-12);
}
.c-checklist li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--nh-accent);
	font-weight: 600;
}

/* --- Hộp CTA -------------------------------------------------------------- */

.c-cta-box {
	background-color: var(--nh-accent-wash);
	border-radius: var(--nh-radius-card);
	padding: var(--nh-space-24);
}
.c-cta-box .c-heading-lg,
.c-cta-box h2,
.c-cta-box h3 {
	font-size: 24px;
}

/* --- Callout trong bài ------------------------------------------------------ */

.c-note,
.c-tip,
.c-warn {
	border-radius: var(--nh-radius-card);
	padding: 16px 20px;
	margin: var(--nh-space-24) 0;
}
.c-note { background-color: var(--nh-pill-blue); }
.c-tip  { background-color: var(--nh-pill-green); }
.c-warn { background-color: var(--nh-pill-amber); }

.c-note::before,
.c-tip::before,
.c-warn::before {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: var(--nh-ink);
}
.c-note::before { content: 'Ghi chú'; }
.c-tip::before  { content: 'Mẹo'; }
.c-warn::before { content: 'Lưu ý'; }

/* --- Khung form ------------------------------------------------------------ */

.c-form {
	background-color: var(--nh-card);
	border: 1px solid var(--nh-line);
	border-radius: var(--nh-radius-card);
	padding: 20px;
}
@media (min-width: 782px) {
	.c-form {
		padding: 32px;
	}
}

/* --- Tiện ích ---------------------------------------------------------------- */

.u-narrow {
	max-width: var(--nh-reading-width);
	margin-left: auto;
	margin-right: auto;
}
.u-center {
	text-align: center;
}
@media (max-width: 549px) {
	.u-hide-mobile { display: none !important; }
}
@media (min-width: 550px) {
	.u-hide-desktop { display: none !important; }
}

/* ====================================================================
   Footer (global-footer block)
   ==================================================================== */

.nh-global-footer {
	background-color: var(--nh-paper);
	border-top: 1px solid var(--nh-line);
}
.nh-global-footer a {
	color: var(--nh-body);
	text-decoration: none;
	line-height: 2;
}
.nh-global-footer a:hover {
	color: var(--nh-accent);
}

/* ====================================================================
   Header — selector cấu trúc ổn định của Flatsome, ngoại lệ CLAUDE.md mục 10
   ==================================================================== */

#logo a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Lora', serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--nh-ink);
}
#logo a::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background-color: var(--nh-accent);
	flex-shrink: 0;
}
@media (max-width: 549px) {
	#masthead,
	#masthead .header-main,
	#masthead .header-inner {
		min-height: 56px;
	}
}
#masthead.stuck {
	box-shadow: 0 1px 0 var(--nh-line);
}

/* ====================================================================
   Thanh liên hệ cố định đáy mobile (nh_mobile_bar) — DESIGN.md B7
   ==================================================================== */

.nh-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: stretch;
	height: 64px;
	padding-bottom: env(safe-area-inset-bottom, 0);
	background-color: var(--nh-card);
	border-top: 1px solid var(--nh-line);
	transition: transform 0.2s ease;
}
.nh-mobile-bar.is-hidden {
	transform: translateY(100%);
}
.nh-mobile-bar__icons {
	display: flex;
	flex: 0 0 auto;
}
.nh-mobile-bar__icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 56px;
	color: var(--nh-ink);
	text-decoration: none;
}
.nh-mobile-bar__icon svg {
	width: 22px;
	height: 22px;
}
.nh-mobile-bar__icon span {
	font-size: 11px;
	line-height: 1;
}
.nh-mobile-bar__cta {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 8px 12px 8px 4px;
}
.nh-mobile-bar__cta .c-btn-primary {
	width: 100%;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 550px) {
	.nh-mobile-bar { display: none; }
}
body.nh-has-mobile-bar {
	padding-bottom: 64px;
}
/* Nút nổi "Quản lý Cookie" của Complianz (z-index: 9998) đè lên nh-mobile-bar khi bar hiện (<550px) — đẩy lên trên bar */
@media (max-width: 549px) {
	body.nh-has-mobile-bar .cmplz-manage-consent {
		bottom: calc(64px + env(safe-area-inset-bottom, 0) + 12px) !important;
	}
}
@media (min-width: 550px) {
	body.nh-has-mobile-bar { padding-bottom: 0; }
}

/* ====================================================================
   Nút liên hệ nổi desktop (nh_contact_buttons layout="float")
   ==================================================================== */

.nh-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	display: none;
}
@media (min-width: 550px) {
	.nh-float { display: block; }
}
.nh-float__toggle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--nh-ink);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nh-float__toggle svg {
	width: 22px;
	height: 22px;
	color: #fff;
}
.nh-float__panel {
	position: absolute;
	right: 0;
	bottom: 64px;
	display: none;
	flex-direction: column;
	gap: 8px;
	background-color: var(--nh-card);
	border: 1px solid var(--nh-line);
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 8px 20px -10px rgba(21, 24, 29, 0.15);
	white-space: nowrap;
}
.nh-float.is-open .nh-float__panel {
	display: flex;
}
.nh-float__link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--nh-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.nh-float__link svg {
	width: 18px;
	height: 18px;
}

/* ====================================================================
   Nút kênh liên hệ dạng inline (nh_contact_buttons layout="inline")
   ==================================================================== */

.nh-contact-buttons--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.nh-contact-buttons--inline .nh-float__link {
	border: 1.5px solid var(--nh-line-strong);
	border-radius: 8px;
	padding: 10px 16px;
}

/* ====================================================================
   Huy hiệu icon màu — thẻ dịch vụ, thẻ "Bạn đang ở đâu", bước quy trình.
   Bổ sung theo phản hồi: website cần thêm điểm nhấn màu sắc. Dùng lại
   đúng 5 màu pill chuyên mục (DESIGN.md B2) + accent — không thêm màu mới
   ngoài hệ thống đã có, chỉ dùng chúng nổi bật hơn.
   ==================================================================== */

.c-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	margin-bottom: 16px;
}
.c-icon-badge svg {
	width: 28px;
	height: 28px;
	stroke: var(--nh-ink);
	fill: none;
	stroke-width: 1.6;
}
.c-icon-badge--blue  { background-color: var(--nh-pill-blue); }
.c-icon-badge--amber { background-color: var(--nh-pill-amber); }
.c-icon-badge--rose  { background-color: var(--nh-pill-rose); }
.c-icon-badge--green { background-color: var(--nh-pill-green); }
.c-icon-badge--lilac { background-color: var(--nh-pill-lilac); }
.c-icon-badge--accent {
	background-color: var(--nh-accent);
}
.c-icon-badge--accent svg {
	stroke: #fff;
}

/* Thẻ dịch vụ / "Bạn đang ở đâu": vệt màu mảnh phía trên thẻ để phân biệt nhanh. */
.c-card--top-blue  { border-top: 4px solid var(--nh-pill-blue); }
.c-card--top-amber { border-top: 4px solid var(--nh-pill-amber); }
.c-card--top-rose  { border-top: 4px solid var(--nh-pill-rose); }
.c-card--top-green { border-top: 4px solid var(--nh-pill-green); }
.c-card--top-lilac { border-top: 4px solid var(--nh-pill-lilac); }

/* Số thứ tự bước quy trình đổi từ chữ xám đơn sắc sang vòng tròn màu. */
.c-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	font-family: 'Lora', serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: var(--nh-ink);
	margin-bottom: 12px;
}
.c-step__number--blue  { background-color: var(--nh-pill-blue); }
.c-step__number--amber { background-color: var(--nh-pill-amber); }
.c-step__number--rose  { background-color: var(--nh-pill-rose); }
.c-step__number--green { background-color: var(--nh-pill-green); }

/* ====================================================================
   Section ảnh minh hoạ — khối chữ + ảnh (đổi hàng trái/phải) dùng trên
   Trang chủ và trang dịch vụ để giảm cảm giác chỉ toàn chữ/thẻ trắng.
   ==================================================================== */

.s-feature-image .c-feature-image__frame {
	position: relative;
	border-radius: var(--nh-radius-image);
	overflow: hidden;
	border: 1px solid var(--nh-line);
}
.s-feature-image .c-feature-image__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Cả section mang 1 dải màu pastel nhạt — tạo điểm nhấn mà vẫn tiết chế (không phải accent-wash, không đụng giới hạn "tối đa 1 s-wash/trang" của DESIGN.md B6). */
.s-feature-image--blue  { background-color: var(--nh-pill-blue); }
.s-feature-image--amber { background-color: var(--nh-pill-amber); }
.s-feature-image--green { background-color: var(--nh-pill-green); }
.s-feature-image--blue  .c-feature-image__frame,
.s-feature-image--amber .c-feature-image__frame,
.s-feature-image--green .c-feature-image__frame {
	background-color: var(--nh-card);
	border-color: transparent;
}