/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme – customised for ALPHA MKT
Author: UX Themes
Template: flatsome
Version: 3.8
*/

/* ============================================================
   ALPHA MKT – DESIGN SYSTEM (TRẮNG ĐEN, 2026-08-11)
   Bám đúng logo: logo là đen tuyền trên nền trong suốt, nên toàn bộ bảng màu
   chỉ còn đen · trắng · thang xám. Vàng gold #D1A765 và navy #061F38 của bản cũ
   đã bỏ hẳn; mỗi màu được thay bằng mức xám CÙNG ĐỘ SÁNG để tương phản chữ/nền
   không đổi.

   TÊN BIẾN GIỮ NGUYÊN (--adz-gold, --adz-ink…) dù không còn vàng: hai tên này
   xuất hiện ở hàng trăm chỗ trong style.css lẫn inc/*.php, đổi tên chỉ để cho
   "đúng chữ" là rủi ro thuần. Đọc chúng theo VAI TRÒ:
     --adz-gold      = màu NHẤN (nút, gạch đầu dòng, viền nhấn) = đen
     --adz-gold-dark = trạng thái hover đậm hơn
     --adz-gold-soft = nền nhạt / badge
     --adz-ink       = chữ & nền khối tối
     --adz-hl        = chữ được nhấn trong tiêu đề (xám trung, đọc được trên CẢ
                       nền sáng và nền tối — thay cho cách tô vàng cũ)

   Font: Manrope (cả heading lẫn body) – self-host, dự phòng
   Plus Jakarta Sans / Be Vietnam Pro (cũng self-host sẵn)
   Chỉ tuỳ biến ở theme con – KHÔNG sửa theme cha.
   ============================================================ */

:root {
	--adz-gold: #111111;
	--adz-gold-dark: #d1a765;
	--adz-gold-soft: #d1a765;
	--adz-ink: #0D0D0D;
	/* Màu CHỮ VÀ ICON trên header, lật theo tông trang: bản tối đặt lại biến
	   này ở khối `.adz-head-dark`. Có biến rồi thì rule nào cần màu tiền cảnh
	   của header chỉ việc gọi nó, không phải viết thêm một rule đảo màu riêng
	   cho tông tối — đúng chỗ đã hỏng với nút hamburger (xem ghi chú ở đó). */
	--adz-head-fg: #0D0D0D;
	--adz-ink-2: #000000;
	--adz-deep: #000000;
	--adz-muted: #bfbfbf;
	--adz-border: #E4E4E4;
	/* Chữ nhấn trong tiêu đề: bản cũ tô vàng nên nổi trên mọi nền. Hết vàng thì
	   không thể dùng đen (trùng chữ) hay trắng (trùng chữ trên nền tối) — xám
	   trung là mức duy nhất tương phản đủ với CẢ #0D0D0D lẫn #fff. */
	--adz-hl: #8C8C8C;
	--adz-radius: 20px;
	--adz-shadow: 0 18px 40px rgba(0, 0, 0, .10);
	/* Inter cho cả tiêu đề lẫn nội dung (một font duy nhất toàn site), bản
	   variable 100–900 self-host trong assets/fonts/. Giữ hai biến d/b tách
	   nhau dù giá trị đang trùng: hơn 70 rule đang gọi chúng, nên khi cần
	   đổi riêng font tiêu đề thì sửa một dòng thay vì dò lại từng rule. */
	--adz-font-d: 'Inter', Arial, Helvetica, sans-serif;
	--adz-font-b: 'Inter', Arial, Helvetica, sans-serif;
	/* Motion tokens (giống adzio.vn) */
	--adz-ease: cubic-bezier(.22, 1, .36, 1);
	--adz-sp: .55s;
	--adz-glow: rgba(17, 17, 17, .35);

	/* ---- Màu BIỂU ĐỒ (data-viz) — NGOẠI LỆ DUY NHẤT của bảng màu trắng đen ----
	   Cột/đường vẽ bằng --adz-gold (đen) thì cột nhấn đen trên nền trắng và cột
	   phụ xám mờ 12% gần như biến mất: người xem không thấy đâu là số liệu, đâu là
	   khung. Số liệu là NỘI DUNG, không phải trang trí, nên nó được một sắc màu
	   riêng — chỉ dùng trong khối biểu đồ, không lan sang nút/tiêu đề/badge.

	   MỘT SẮC XANH, ba bậc theo cùng hue (không phải 3 màu khác nhau): bậc đậm cho
	   mốc được nhấn, bậc nhạt cho các mốc còn lại. Nhờ cùng hue nên không ai phải
	   tra "màu này nghĩa gì", mà độ đậm vẫn tự nói cái nào quan trọng.

	   Các số bên dưới đã đo, ĐỪNG thay bằng mã màu "trông đẹp hơn" mà không đo lại:
	     #256ABF trên nền trắng      = 5.39:1  (mốc vẽ cần ≥3:1 → dư)
	     chữ trắng trên #256ABF      = 5.39:1  (số in dọc trong lòng cột)
	     #86B6EF trên nền trắng      = 2.11:1  (cột phụ cần ≥2:1 → vừa đủ)
	     #3987E5 trên nền tối #181818 = 4.88:1
	     chữ #0D0D0D trên #3987E5     = 5.34:1
	     chữ trắng trên #184F95       = 8.10:1
	   Cặp bậc cũng đã qua kiểm tra mù màu (một hue nên mọi dạng mù màu vẫn đọc
	   được thứ tự đậm–nhạt). */
	--adz-viz: #256ABF;
	/* mốc/cột được nhấn, nét đường, kim gauge */
	--adz-viz-soft: #86B6EF;
	/* các cột KHÔNG được nhấn (nền sáng) */
	--adz-viz-wash: #E4EEFB;
	/* rãnh gauge, nền khung biểu đồ nhạt */
	--adz-viz-plate: #F2F7FD;
	/* nền khung biểu đồ đường có trục */
	/* Nền tối (#0D0D0D, thẻ phủ trắng 5% ⇒ ~#181818) cần bậc SÁNG hơn, không phải
	   cùng bậc rồi giảm opacity — giảm opacity kéo cả độ tương phản xuống. */
	--adz-viz-on-dark: #3987E5;
	--adz-viz-on-dark-soft: #184F95;
}

.container,
.row {
	max-width: 1300px !important;
	width: 100%;
}

/* ---------- Base typography ---------- */
body {
	font-family: var(--adz-font-b) !important;
	color: var(--adz-ink);
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {
	font-family: var(--adz-font-d) !important;
	color: var(--adz-ink);
	letter-spacing: -.01em;
}

a {
	color: var(--adz-gold);
}

a:hover {
	color: var(--adz-gold-dark);
}

/* ---------- Flatsome primary color overrides ---------- */
.button.primary,
.button.primary:not(.is-outline),
button.primary,
input[type="submit"].primary {
	background-color: var(--adz-gold);
	border-color: var(--adz-gold);
}

.button.primary:hover {
	background-color: var(--adz-gold-dark);
	border-color: var(--adz-gold-dark);
}

/* Solid secondary (không áp cho outline) */
.button.secondary:not(.is-outline) {
	background-color: var(--adz-ink);
	border-color: var(--adz-ink);
	color: #fff;
}

/* Outline secondary = nút "Tìm hiểu thêm": viền nhạt, chữ đậm, nền trong suốt */
.button.is-outline.secondary,
.button.is-outline.secondary:visited {
	background: #fff !important;
	border: 1px solid var(--adz-border) !important;
	color: var(--adz-ink) !important;
	box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
}

.button.is-outline.secondary:hover {
	border-color: var(--adz-gold) !important;
	color: var(--adz-gold) !important;
}

/* Nút hero: chữ thường (bỏ IN HOA mặc định của Flatsome), bo tròn đẹp */
.adz-hero-actions .button {
	text-transform: none !important;
	letter-spacing: 0;
	font-family: var(--adz-font-d);
	font-weight: 700;
}

/* ---------- Reusable helpers ---------- */
.adz-eyebrow,
.adzio-eyebrow {
	display: inline-block;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--adz-gold);
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .18);
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.adz-section-title {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 12px;
}

.adz-lead {
	color: var(--adz-muted);
	font-size: 1.05rem;
	max-width: 720px;
	margin: 0 auto;
}

/* Nút ALPHA MKT */
.adzio-btn,
a.adzio-btn {
	display: inline-block;
	background: var(--adz-gold);
	color: #fff !important;
	font-family: var(--adz-font-d);
	font-weight: 700;
	padding: 14px 30px;
	border-radius: 999px;
	transition: all .25s var(--adz-ease, ease);
	box-shadow: 0 10px 24px rgba(17, 17, 17, .30);
}

.adzio-btn:hover {
	background: var(--adz-gold-dark);
	color: #fff !important;
}

/* Nút viền (dùng trong thẻ nhỏ, ví dụ job-card "Ứng tuyển ngay") */
.adzio-btn-ghost,
a.adzio-btn-ghost {
	display: inline-block;
	margin-top: 6px;
	background: transparent;
	color: var(--adz-gold) !important;
	border: 1px solid rgba(17, 17, 17, .35);
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: .92rem;
	padding: 9px 20px;
	border-radius: 999px;
	transition: all .25s var(--adz-ease, ease);
}

.adzio-btn-ghost:hover {
	background: var(--adz-gold-soft);
	border-color: var(--adz-gold);
}

/* ============================================================
   HERO (trang chủ) – nền SÁNG, căn giữa (giống adzio.vn)
   ============================================================ */
.adz-hero {
	background: var(--adz-deep-light, #ffffff);
	color: var(--adz-ink);
	padding: 96px 0 64px;
	min-height: 90vh;
	display: flex;
	align-items: center;
}

/* .adz-hero .col { max-width: 860px; margin: 0 auto; } */
/* Biến thể hero NGẮN (trang Liên hệ…): chỉ có eyebrow + tiêu đề + 1 dòng dẫn
   nên min-height 90vh của hero trang chủ để lại một khoảng trống rất lớn. */
.adz-hero.adz-hero--compact {
	min-height: 0;
	padding: 72px 0 40px;
}

.adz-hero.adz-hero--compact .adz-hero-title {
	font-size: 3.1rem;
	margin-bottom: 14px;
}

.adz-hero .adz-eyebrow i {
	margin-right: 6px;
}

.adz-hero-title {
	font-size: 4.5rem;
	line-height: 1.06;
	font-weight: 800;
	color: var(--adz-ink);
	margin-bottom: 18px;
	letter-spacing: -.02em;
}

.adz-hero-l2 {
	display: inline-block;
	font-size: 45px
}

.adz-hero-title .adz-hl {
	color: var(--adz-hl);
}

.adz-hero p {
	color: var(--adz-muted);
	font-size: 1.12rem;
	max-width: 640px;
	margin: 0 auto 26px;
}

.adz-hero-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

/* stat row – card trắng trên nền sáng */
.adz-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 40px;
	justify-content: center;
}

.adzio-stat {
	flex: 1 1 150px;
	max-width: 220px;
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: 18px;
	padding: 22px 18px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}

.adzio-stat-num {
	display: block;
	font-family: var(--adz-font-d);
	font-size: 2.3rem;
	font-weight: 800;
	color: var(--adz-gold);
}

.adzio-stat-label {
	display: block;
	color: var(--adz-muted);
	font-size: .92rem;
	margin-top: 4px;
}

/* ============================================================
   CARDS / GRID chung
   ============================================================ */
.adzio-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.adzio-grid.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.adzio-grid.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Số cột theo khổ màn: xem khối "RESPONSIVE – MOBILE & TABLET" ở cuối file */

.adzio-card {
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: var(--adz-radius);
	padding: 28px 24px;
	box-shadow: var(--adz-shadow);
	transition: border-color .4s;
}

/* Rê chuột: chỉ đổi màu viền, không nhấc thẻ / không phóng icon */
.adzio-card:hover {
	border-color: rgba(17, 17, 17, .28);
}

.adzio-card h3 {
	font-size: 1.18rem;
	font-weight: 700;
	margin: 14px 0 8px;
}

.adzio-card p {
	color: var(--adz-muted);
	font-size: .96rem;
	margin: 0;
}

.adzio-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: var(--adz-gold-soft);
	color: var(--adz-gold);
	font-size: 22px;
}

/* Process step number */
.adz-step .adzio-ic {
	background: var(--adz-ink);
	color: #fff;
	font-family: var(--adz-font-d);
	font-weight: 800;
}

.adz-step-num {
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--adz-gold);
	background: var(--adz-gold-soft);
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Badge đối tác */
.adz-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 600;
	margin: 6px;
	box-shadow: 0 6px 16px rgba(17, 24, 39, .06);
}

.adz-badge i {
	color: var(--adz-gold);
}

/* ============================================================
   FAQ accordion (thẻ <details>)
   ============================================================ */
.adzio-faq {
	max-width: 820px;
	margin: 0 auto;
}

.adzio-faq-item {
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: 14px;
	margin-bottom: 12px;
	padding: 4px 6px;
	box-shadow: 0 6px 16px rgba(17, 24, 39, .05);
}

.adzio-faq-item summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1.05rem;
	padding: 16px 44px 16px 18px;
	position: relative;
	color: var(--adz-ink);
}

.adzio-faq-item summary::-webkit-details-marker {
	display: none;
}

.adzio-faq-item summary::after {
	content: "\f078";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--adz-gold);
	transition: transform .25s ease;
	font-size: 13px;
}

.adzio-faq-item[open] summary::after {
	transform: translateY(-50%) rotate(180deg);
}

.adzio-faq-a {
	padding: 0 18px 18px;
	color: var(--adz-muted);
}

.adzio-faq-a p {
	margin: 0;
}

/* ============================================================
   CTA / form section (nền tối)
   ============================================================ */
.adz-cta {
	background: linear-gradient(135deg, var(--adz-gold) 0%, var(--adz-gold-dark) 100%);
	color: #fff;
	border-radius: 28px;
	padding: 56px 40px;
	text-align: center;
	box-shadow: 0 30px 70px rgba(17, 17, 17, .28);
	position: relative;
	overflow: hidden;
}

.adz-cta h2 {
	color: #fff;
	font-size: 2.2rem;
	font-weight: 800;
}

.adz-cta p {
	color: rgba(255, 255, 255, .9);
}

.adz-cta .adz-holo-grid {
	opacity: .5;
}

/* Khối thông tin liên hệ dưới CTA – trên nền sáng */
.adz-contact-info h4 {
	color: var(--adz-ink);
	margin-bottom: 4px;
}

.adz-contact-info p {
	color: var(--adz-muted);
}

.adzio-svc-cta {
	margin-top: 40px;
	text-align: center;
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .18);
	border-radius: var(--adz-radius);
	padding: 34px;
}

.adzio-svc-cta p {
	font-weight: 600;
	margin-bottom: 16px;
}

/* Form CF7 – xem khối "CTA LIÊN HỆ" bên dưới (dùng chung cho mọi trang) */

/* ============================================================
   Bài dịch vụ (single) – hero + highlight
   ============================================================ */
.adzio-svc-hero {
	background: linear-gradient(180deg, var(--adz-gold-soft), #fff);
	color: var(--adz-ink);
	padding: 66px 0 46px;
	margin-bottom: 30px;
	text-align: center;
	border-bottom: 1px solid var(--adz-border);
}

.adzio-svc-hero .container {
	max-width: 900px;
}

.adzio-svc-hero h1 {
	color: var(--adz-ink);
	font-size: 2.5rem;
	font-weight: 800;
	margin: 10px 0 14px;
	letter-spacing: -.02em;
}

.adzio-svc-sub {
	color: var(--adz-gold);
	font-weight: 700;
	font-size: 1.12rem;
}

.adzio-svc-intro {
	color: var(--adz-muted);
	max-width: 720px;
	margin: 8px auto 0;
}

.adzio-svc-highlights {
	margin: 34px 0;
}

.adzio-h2 {
	text-align: center;
	font-size: 1.8rem;
	font-weight: 800;
	margin: 30px 0 20px;
}

/* ============================================================
   HEADER / FOOTER tuỳ biến
   ============================================================ */
.header-main {
	min-height: 74px;
}

.header:not(.stuck) .header-main {}

#logo img {
	max-height: 44px;
}

/* ---------- Menu chính: khớp adzio.vn (chữ thường, Be Vietnam Pro) ---------- */
/* Bỏ VIẾT HOA (Flatsome thêm class .nav-uppercase) */
.header-nav.nav-uppercase>li>a {
	text-transform: none;
	letter-spacing: 0;
}

/* Font + màu + cỡ (Be Vietnam Pro 500, 16px = sàn cỡ chữ của site, chữ đen #000) */
.header-nav-main>li>a {
	font-family: var(--adz-font-b);
	font-weight: 500;
	font-size: 1rem;
	color: #000;
	text-transform: none;
	letter-spacing: 0;
}

/* Chỉ vàng khi hover (mẫu không tô vàng trang hiện tại) */
.header-nav-main>li>a:hover {
	color: var(--adz-gold);
}

.header-nav-main>li.active>a,
.header-nav-main>li.current-menu-item>a,
.header-nav-main>li.current-menu-parent>a {
	color: #000;
}

/* Giãn cách item rộng hơn (~2rem như mẫu) */
.header-nav-main.nav-spacing-medium>li {
	margin: 0 15px;
}

/* Gạch chân vàng mảnh + quầng sáng, CHỈ hiện khi hover (giống mẫu, bỏ gạch cố định ở trang hiện tại) */
.header-nav-main.nav-line-bottom>li>a:before {
	background-color: var(--adz-gold) !important;
	height: 2px;
	box-shadow: 0 0 6px var(--adz-glow);
}

.header-nav-main.nav-line-bottom>li.active>a:before,
.header-nav-main.nav-line-bottom>li.current-menu-item>a:before {
	opacity: 0;
}

.header-nav-main.nav-line-bottom>li>a:hover:before {
	opacity: 1;
}

/* menu item "Nhận tư vấn" thành nút vàng (chữ thường, Plus Jakarta) */
.header-nav .nav-cta>a {
	background: var(--adz-gold);
	color: #fff !important;
	border-radius: 999px;
	padding: 9px 24px !important;
	margin-left: 10px;
	font-family: var(--adz-font-d);
	font-weight: 600;
	text-transform: none !important;
	letter-spacing: 0;
}

.header-nav .nav-cta>a:hover {
	background: var(--adz-gold-dark);
}

.header-nav .nav-cta>a:before {
	display: none !important;
}

/* bỏ gạch chân cho nút */

/* ---------- Bố cục 3 vùng: Logo trái · Menu giữa · Nút phải (giống adzio.vn) ---------- */
.header-main .header-inner .flex-col.logo {
	flex: 0 0 auto;
}

/* Customizer đặt `#logo{width:150px}` (CSS inline của Flatsome) nhưng logo ALPHA MKT là
   dấu vuông chỉ ~76px, phần dư đẩy nút chuyển ngữ ra xa logo. Cho cột co đúng bằng
   ảnh; logo vẫn nằm ở mép container nên không phần nào khác xê dịch. */
.header-main #logo {
	width: auto !important;
}

.header-main .header-inner .flex-col.hide-for-medium.flex-left {
	flex: 1 1 auto;
}

.header-main .header-inner .flex-col.hide-for-medium.flex-right {
	flex: 0 0 auto;
}

/* Cho ul menu trải full-width + dùng flex để auto-margin đẩy nhóm menu ra giữa, nút ra phải */
.header-nav-main.nav-left {
	display: flex;
	align-items: center;
	width: 100%;
	flex-wrap: nowrap;
}

.header-nav-main.nav-left>li:first-child {
	margin-left: auto !important;
}

.header-nav-main.nav-left>li.nav-cta {
	margin-left: auto !important;
}

/* ---------- Nút chuyển ngữ một chữ (VI/EN) đứng cạnh logo ---------- */
/* Slot 'html-5' của Flatsome in ra <li class="html custom html_nav_position_text">.
   Nó là phần tử ĐẦU của nav-left nên phải trả lại `margin-left: auto` cho phần
   tử KẾ TIẾP, nếu không quy tắc :first-child ở trên sẽ đẩy chính nút chuyển ngữ
   ra giữa header thay vì để nó dính cạnh logo. */
/* Cùng độ ưu tiên với quy tắc :first-child ở trên nếu chỉ dùng 1 class, nên khai
   cả `.html` cho chắc – không phụ thuộc vào thứ tự dòng trong file. */
.header-nav-main.nav-left>li.html.html_nav_position_text {
	margin-left: 6px !important;
}

.header-nav-main.nav-left>li.html.html_nav_position_text+li {
	margin-left: auto !important;
}

/* Thẻ <a> do shortcode [gt-link] của GTranslate in ra (nó tự thêm class .glink,
   .notranslate, .gt-current-lang…), nên style theo thẻ BỌC .adz-lang-wrap chứ
   không theo class của mình – xem inc/lang-switch.php. */
.adz-lang-wrap {
	display: inline-flex;
}

.adz-lang-wrap>a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 4px;
	border: 0;
	background: transparent;
	font-family: var(--adz-font-d);
	font-weight: 700 !important;
	font-size: 1.125rem;
	letter-spacing: .06em;
	line-height: 1.2;
	color: #000;
	text-decoration: none;
	transition: color .2s ease;
}

.adz-lang-wrap>a:hover {
	color: var(--adz-gold);
}

/* Flatsome kẻ gạch chân vàng cho mọi <a> trong header-nav – nút này không cần. */
.header-nav li.html_nav_position_text .adz-lang-wrap>a:before {
	display: none !important;
}

/* Mobile (≤849px): Flatsome ẩn MỌI header element dạng HTML tuỳ biến bằng
   `.header-main li.html.custom{display:none}` — phải mở lại riêng cho nút chuyển
   ngữ (thêm 1 class nữa nên thắng độ ưu tiên, không cần !important). */
@media (max-width: 849px) {
	.header-main li.html.custom.html_nav_position_text {
		display: flex;
		align-items: center;
	}

	.mobile-nav>li.html_nav_position_text {
		margin-left: 12px !important;
	}

	.mobile-nav>li.html_nav_position_text .adz-lang-wrap>a {
		padding: 4px 3px;
		font-size: .76rem;
	}
}

/* ---------- Dropdown (submenu) giống adzio.vn: thẻ trắng mờ, bo góc, hover vàng nhạt ---------- */
.header-nav .nav-dropdown {
	background: rgba(255, 255, 255, .97);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(17, 17, 17, .2);
	border-radius: 12px;
	padding: .5rem 0;
	min-width: 240px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .08), 0 0 20px rgba(17, 17, 17, .06);
	/* Hiệu ứng mở: trượt lên 10px + fade (giống adzio.vn) */
	transform: translateY(10px);
	transition: opacity .3s cubic-bezier(.4, 0, .2, 1),
		transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
}

/* Khi mở (hover mục cha): trượt về đúng vị trí */
.header-nav li.has-dropdown:hover>.nav-dropdown,
.header-nav li.current-dropdown>.nav-dropdown {
	transform: translateY(0);
}

.header-nav .nav-dropdown:before,
.header-nav .nav-dropdown:after {
	display: none;
}

/* bỏ mũi tên mặc định của Flatsome */
.header-nav .nav-dropdown>li>a {
	padding: .8rem 1.5rem;
	color: var(--adz-muted);
	font-size: 1rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	border: none;
	transition: all .2s ease;
}

/* Hover item: nền vàng nhạt + chữ vàng (giống mẫu) */
.header-nav .nav-dropdown>li>a:hover {
	background: rgba(17, 17, 17, .06);
	color: var(--adz-gold);
}

/* ---------- HEADER TÔNG TỐI ----------
   Chọn theo TỪNG trang ở ô "Header" bên phải màn hình soạn thảo (mặc định Sáng);
   inc/header-theme.php gắn class `adz-head-dark` lên <body>. Cùng cách làm với
   tông màu footer: một markup, hai tông, không đụng markup header của Flatsome.

   Ba chỗ BẮT BUỘC phải đảo, nếu bỏ sót là mất chữ/mất logo trên nền tối (bẫy
   "đen trên đen" của bảng màu trắng-đen: `--adz-gold` là ĐEN chứ không phải vàng):
     1. nền `.header-bg-color` (Flatsome đặt rgba(255,255,255,.9) bằng CSS inline
        của Customizer nên phải !important)
     2. chữ menu · nút chuyển ngữ · gạch chân hover · nút hamburger
     3. logo: Flatsome in SẴN hai thẻ <img> trong #logo — `.header-logo` (bản đen)
        và `.header-logo-dark` (bản trắng, theme_mod `site_logo_dark`). Bản trắng bị
        flatsome.css ẩn bằng `display:none!important` nên đổi chỗ phải có !important. */
.adz-head-dark {
	--adz-head-fg: #fff;
}

.adz-head-dark .header-bg-color {
	background-color: #171921 !important;
}

/* Thanh đã dính vẫn tối (rule bản sáng ở dưới đặt rgba trắng .72).
   Đục .82 chứ không .72 như bản sáng: chữ header tối là TRẮNG, nền loãng hơn
   nữa thì chữ chìm mất khi thanh trôi qua một mảng ảnh sáng. */
.adz-head-dark .header-wrapper.stuck .header-bg-color {
	background-color: rgba(23, 25, 33, .82) !important;
}

.adz-head-dark .header-nav-main>li>a,
.adz-head-dark .header-nav-main>li>a:hover,
.adz-head-dark .header-nav-main>li.active>a,
.adz-head-dark .header-nav-main>li.current-menu-item>a,
.adz-head-dark .header-nav-main>li.current-menu-parent>a,
.adz-head-dark .header-main .nav>li>a,
.adz-head-dark .adz-lang-wrap>a,
.adz-head-dark .adz-lang-wrap>a:hover {
	color: #fff;
}

.adz-head-dark .header-nav-main.nav-line-bottom>li>a:before {
	background-color: #fff !important;
}

/* Nút "Nhận tư vấn" nếu menu có: nền vốn là ĐEN nên trên header tối phải đảo
   thành nền trắng chữ đen mới đọc được. */
.adz-head-dark .header-nav .nav-cta>a {
	background: #fff;
	color: var(--adz-ink) !important;
}

.adz-head-dark .header-nav .nav-cta>a:hover {
	background: rgba(255, 255, 255, .86);
}

/* Nút mở menu mobile KHÔNG cần rule riêng ở đây nữa: nền và màu icon do
   `.mobile-nav .nav-icon .button.icon` (trong @media ≤849px) đặt một lần cho
   cả hai tông, lấy màu từ `--adz-head-fg`. Rule cũ ở chỗ này chưa từng có
   hiệu lực vì rule kia đặt `!important`. */

.adz-head-dark #logo .header-logo {
	display: none !important;
}

.adz-head-dark #logo .header-logo-dark {
	display: inline-block !important;
}

/* Footer */
.footer-wrapper .footer-1 {
	background: var(--adz-deep);
}

.footer-wrapper .absolute-footer {
	background: #05080f;
	color: rgba(255, 255, 255, .55);
}

.footer-1 a {
	color: rgba(255, 255, 255, .72);
}

.footer-1 a:hover {
	color: #fff;
}

.footer-1 .widget-title {
	color: #fff;
}

.footer-1 i {
	color: var(--adz-gold);
}

/* Ảnh bo góc + badges đối tác */
.adz-round img {
	border-radius: var(--adz-radius);
	box-shadow: var(--adz-shadow);
}

.adz-badges {
	margin-top: 16px;
}

/* Bảng giá */
.adz-price {
	text-align: center;
	position: relative;
}

.adz-price h3 {
	font-size: 1.35rem;
}

.adz-price-tag {
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--adz-gold);
	margin: 6px 0 12px;
}

.adz-price-hot {
	border: 2px solid var(--adz-gold);
	box-shadow: 0 26px 50px rgba(17, 17, 17, .18);
}

.adz-price-hot::before {
	content: "Phổ biến";
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--adz-gold);
	color: #fff;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 12px;
	padding: 4px 16px;
	border-radius: 999px;
}

/* Section spacing tinh chỉnh */
.adz-soft-bg {
	background: #F6F6F6;
}

.adz-tight {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* ============================================================
   MOTION / ANIMATION
   ĐÃ BỎ (theo yêu cầu): nền canvas "chấm chấm" (#adz-particles) + lớp
   noise, và con trỏ trang trí chấm/vòng bám chuột (.adz-cur-dot/-ring).
   Markup của chúng do js/adzio.js tạo ra — đã xoá luôn ở đó, nên các
   rule tương ứng bị bỏ khỏi đây thay vì để CSS chết.
   ============================================================ */

html,
body {
	background: #f4f4f3 !important;
}

/* Thứ tự xếp lớp: nội dung nổi trên nền, header nổi trên nội dung */
#main,
.footer-wrapper {
	position: relative;
	z-index: 1;
}

/* Header PHẢI nổi cao hơn #main để dropdown không bị hero đè lên (che + chặn click) */
/* Loại .stuck ra: nếu đặt position:relative cho cả .header-wrapper.stuck thì sẽ
   ghi đè position:fixed của theme cha và header KHÔNG dính khi scroll. */
.header,
.header-wrapper:not(.stuck) {
	position: relative;
	z-index: 30;
}

/* Dropdown menu nổi trên mọi nội dung + đảm bảo bấm được */
.header-nav .nav-dropdown,
.nav-dropdown {
	z-index: 999;
	pointer-events: auto;
}

.adz-hero {
	position: relative;
	overflow: hidden;
}

.adz-hero .section-content {
	position: relative;
	z-index: 1;
}

/* .adz-soft-bg dùng lại nền xám nhạt khai báo ở trên (#F6F6F6) – trước đây
   bị ép về #fff để nhìn thấy lớp chấm phía sau, nay không còn lớp đó. */

.row .section {
	padding-left: 0px;
	padding-right: 0px;
}

/* --- Keyframes gốc --- */
@keyframes adz-gridMove {
	to {
		background-position: 60px 60px;
	}
}

@keyframes adz-drift {
	0% {
		transform: translateZ(0) translate(0, 0);
	}

	50% {
		transform: translateZ(0) translate(6vw, 8vh);
	}

	100% {
		transform: translateZ(0) translate(-5vw, 12vh);
	}
}

@keyframes adz-pulse {

	0%,
	100% {
		opacity: .3;
		transform: scale(1);
	}

	50% {
		opacity: 0;
		transform: scale(1.15);
	}
}

@keyframes adz-slide {
	to {
		transform: translateX(-50%);
	}
}

@keyframes adz-blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/* --- Scroll reveal (opacity + trượt lên) --- */
.adz-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: all var(--adz-sp) var(--adz-ease);
	will-change: opacity, transform;
}

.adz-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger nhẹ trong lưới card */
.adzio-grid>*:nth-child(2) {
	transition-delay: .08s;
}

.adzio-grid>*:nth-child(3) {
	transition-delay: .16s;
}

.adzio-grid>*:nth-child(4) {
	transition-delay: .24s;
}

.adzio-grid>*:nth-child(5) {
	transition-delay: .32s;
}

.adzio-grid>*:nth-child(6) {
	transition-delay: .40s;
}

/* --- Nền động cho section tối (hero / cta / svc-hero) --- */
.adz-hero,
.adz-cta,
.adzio-svc-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.adz-holo-grid {
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 60px 60px;
	animation: adz-gridMove 20s linear infinite;
}

.adz-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .28;
	z-index: -2;
	pointer-events: none;
	will-change: transform;
	transform: translateZ(0);
	animation: adz-drift 30s infinite alternate ease-in-out;
}

.adz-orb.o1 {
	width: 460px;
	height: 460px;
	top: -120px;
	right: -80px;
	background: var(--adz-gold);
}

.adz-orb.o2 {
	width: 380px;
	height: 380px;
	bottom: -140px;
	left: -60px;
	background: var(--adz-ink);
	animation-duration: 38s;
}

/* --- Marquee đối tác (logo trượt) --- */
.adz-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.adz-marquee-track {
	display: flex;
	width: max-content;
	gap: 3rem;
	padding: .6rem 1.25rem;
	animation: adz-slide 34s linear infinite;
}

.adz-marquee:hover .adz-marquee-track {
	animation-play-state: paused;
}

.adz-marquee-track .adz-badge {
	white-space: nowrap;
}

/* --- Vòng pulse quanh số bước --- */
.adz-step .adz-step-num {
	position: relative;
}

.adz-step .adz-step-num::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 16px;
	border: 1px solid rgba(17, 17, 17, .30);
	animation: adz-pulse 3s infinite;
}

/* --- Con trỏ gõ chữ ở hero --- */
.adz-type-cursor {
	display: inline-block;
	width: 3px;
	height: 1em;
	background: var(--adz-gold);
	margin-left: 4px;
	animation: adz-blink .7s infinite;
	vertical-align: text-bottom;
}

/* --- Nút: chỉ đổi màu nền (đã bỏ nâng nút + vệt quét sáng khi rê chuột) --- */
.button.primary,
.adzio-btn {
	position: relative;
	transition: background .3s;
}

/* --- Stat: tĩnh, không phản ứng khi rê chuột --- */
.adzio-stat {
	transition: border-color .45s, background .45s;
}

/* --- FAQ mở mượt --- */
.adzio-faq-item {
	transition: border-color .3s, box-shadow .3s;
}

.adzio-faq-item[open] {
	border-color: rgba(17, 17, 17, .35);
	box-shadow: 0 10px 26px rgba(17, 17, 17, .10);
}

.adzio-faq-a {
	animation: adz-fade .35s var(--adz-ease);
}

@keyframes adz-fade {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Ảnh trong card/section: không zoom khi rê chuột --- */
.adz-round img {
	transition: box-shadow .4s;
}

/* --- Tôn trọng người dùng tắt hiệu ứng / mobile --- */
@media (max-width: 768px),
(pointer: coarse) {

	.adz-holo-grid,
	.adz-orb {
		display: none !important;
		animation: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.adz-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.adz-holo-grid,
	.adz-orb,
	.adz-marquee-track,
	.adz-cl-strip,
	.adz-step .adz-step-num::after,
	.adz-type-cursor {
		animation: none !important;
	}

	/* Dải ảnh sản phẩm: JS đã tự tắt tự-chạy, chỉ còn cần bỏ hiệu ứng trượt
	   khi bấm chấm điều hướng. */
	.adz-sv-works-strip,
	.adz-sv-works-strip .adz-sv-work {
		transition: none !important;
	}
}

/* Hero/CTA responsive: xem khối "RESPONSIVE – MOBILE & TABLET" ở cuối file */

/* ============================================================
   QUY TRÌNH – timeline dọc (giống adzio.vn)
   Số vàng đặc bên trái + đường nối dọc + thẻ trắng bên phải
   ============================================================ */
.adz-timeline {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.adz-timeline::before {
	content: "";
	position: absolute;
	left: 47px;
	top: 24px;
	bottom: 24px;
	width: 2px;
	background: linear-gradient(var(--adz-gold), rgba(17, 17, 17, .12));
}

.adz-tl-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 28px;
	margin-bottom: 26px;
}

.adz-tl-item:last-child {
	margin-bottom: 0;
}

.adz-tl-num {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: 18px;
	background: var(--adz-gold);
	color: #fff;
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 16px 30px rgba(17, 17, 17, .28);
	position: relative;
	z-index: 1;
}

.adz-tl-card {
	flex: 1 1 auto;
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: 18px;
	padding: 22px 28px;
	box-shadow: var(--adz-shadow);
	transition: border-color .4s;
}

.adz-tl-card:hover {
	border-color: rgba(17, 17, 17, .25);
}

.adz-tl-card h3 {
	color: var(--adz-gold);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 6px;
}

.adz-tl-card p {
	color: var(--adz-muted);
	margin: 0;
	font-size: .98rem;
}

/* Timeline responsive: xem khối "RESPONSIVE – MOBILE & TABLET" ở cuối file */

/* ============================================================
   CTA LIÊN HỆ – thẻ trắng 2 cột (thông tin + form)
   ============================================================ */
/* Section bọc [adzio_contact] khi khối này đứng riêng một mình (trang Liên hệ):
   padding đặt ở đây vì [section padding="…"] của Flatsome chỉ nhận 1 giá trị. */
.adz-sec-contact {
	padding: 10px 0 80px !important;
}

.adz-contact {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(17, 24, 39, .10);
}

.adz-contact-left {
	padding: 52px 46px;
	background: linear-gradient(165deg, #fff 0%, #FAFAFA 55%, var(--adz-gold-soft) 100%);
	border-right: 1px solid var(--adz-border);
	/* Canh giữa theo chiều dọc để không hụt một khoảng trống lớn dưới danh sách
	   khi cột form (bên phải) cao hơn. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.adz-contact-left h2 {
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1.16;
	margin: 0 0 14px;
	color: var(--adz-ink);
}

.adz-contact-left h2 .adz-hl {
	color: var(--adz-hl);
}

.adz-contact-left>p {
	color: var(--adz-muted);
	margin: 0 0 26px;
}

.adz-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adz-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.adz-contact-list li:last-child {
	margin-bottom: 0;
}

/* span.adz-ci: phải đủ "nặng" hơn `.adz-contact-list li span` bên dưới, nếu
   không icon sẽ ăn màu xám của nội dung thay vì màu vàng. */
.adz-ci,
.adz-contact-list li span.adz-ci {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #fff;
	color: var(--adz-gold);
	border: 1px solid rgba(17, 17, 17, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.adz-contact-list strong {
	display: block;
	color: var(--adz-ink);
	font-weight: 700;
	margin-bottom: 2px;
}

.adz-contact-list li span {
	color: var(--adz-muted);
	font-size: 1rem;
	line-height: 1.5;
}

.adz-contact-list li span a {
	color: var(--adz-muted);
}

.adz-contact-list li span a:hover {
	color: var(--adz-gold);
}

.adz-contact-right {
	padding: 46px 44px;
	background: #fff;
}

/* ---------- Form Contact Form 7 (dùng chung mọi trang) ---------- */
.adz-contact-form .adz-f-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.adz-contact-form p {
	margin: 0 0 16px;
}

/* Chỉ bỏ margin ở dòng cuối của FORM. Dùng `p:last-child` không có `>` thì ô
   Email (dòng cuối trong .adz-f-grid) cũng mất margin => trên mobile nó dính
   sát nhãn "Dự án triển khai" bên dưới. */
.adz-contact-form>p:last-child {
	margin-bottom: 0;
}

.adz-contact-form label {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	color: var(--adz-ink);
	margin-bottom: 7px;
	letter-spacing: .01em;
}

.adz-contact-form label span {
	color: var(--adz-muted);
	font-weight: 400;
}

.adz-contact-form .wpcf7-form-control-wrap {
	display: block;
}

/* :not(.wpcf7-submit) là BẮT BUỘC – nút gửi của CF7 cũng mang class
   .wpcf7-form-control, thiếu nó thì rule :focus bên dưới sẽ tô trắng nút gửi
   (chữ trắng trên nền trắng) ngay sau khi bấm. */
.adz-contact-form input.wpcf7-form-control:not(.wpcf7-submit),
.adz-contact-form textarea.wpcf7-form-control {
	width: 100%;
	margin: 0;
	display: block;
	font-family: var(--adz-font-b);
	font-size: 1rem;
	color: var(--adz-ink);
	background: #fafafa;
	border: 1px solid var(--adz-border);
	border-radius: 14px;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.adz-contact-form input.wpcf7-form-control:not(.wpcf7-submit) {
	height: 50px;
	padding: 0 16px;
	line-height: 50px;
}

/* Ép chiều cao thay vì để rows="10" của CF7 quyết định (cao ~270px, lệch hẳn
   so với cột thông tin bên trái). */
.adz-contact-form textarea.wpcf7-form-control {
	height: 132px;
	min-height: 132px;
	padding: 13px 16px;
	line-height: 1.55;
	resize: vertical;
}

.adz-contact-form input.wpcf7-form-control::placeholder,
.adz-contact-form textarea.wpcf7-form-control::placeholder {
	color: #A6A6A6;
}

.adz-contact-form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.adz-contact-form textarea.wpcf7-form-control:focus {
	outline: none;
	background: #fff;
	border-color: var(--adz-gold);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .16);
}

.adz-contact-form input.wpcf7-submit {
	width: 100%;
	height: 56px;
	padding: 0 28px;
	line-height: 56px;
	background: linear-gradient(135deg, var(--adz-gold) 0%, var(--adz-gold-dark) 100%);
	color: #fff;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: .02em;
	box-shadow: 0 14px 30px rgba(17, 17, 17, .32);
	transition: box-shadow .2s ease, filter .2s ease;
}

.adz-contact-form input.wpcf7-submit:hover {
	filter: brightness(1.06);
	box-shadow: 0 18px 38px rgba(17, 17, 17, .42);
}

.adz-contact-form input.wpcf7-submit:focus-visible {
	outline: 3px solid rgba(17, 17, 17, .45);
	outline-offset: 2px;
}

/* Ghi chú dưới form */
.adz-contact-note {
	margin: 14px 0 0;
	font-size: 1rem;
	color: var(--adz-muted);
	text-align: center;
}

.adz-contact-note i {
	color: var(--adz-gold);
	margin-right: 5px;
}

/* Trạng thái xác thực + thông báo của CF7 */
.adz-contact .wpcf7-not-valid {
	border-color: #e11d48 !important;
	background: #fff6f7 !important;
}

.adz-contact .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #e11d48;
	background: none;
	border: 0;
}

.adz-contact .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 16px !important;
	border-width: 1px !important;
	border-radius: 14px;
	font-size: 1rem;
	line-height: 1.5;
}

.adz-contact form.sent .wpcf7-response-output {
	border-color: #16a34a !important;
	background: #f0fdf4;
	color: #15803d;
}

.adz-contact form.invalid .wpcf7-response-output,
.adz-contact form.unaccepted .wpcf7-response-output,
.adz-contact form.failed .wpcf7-response-output,
.adz-contact form.aborted .wpcf7-response-output {
	border-color: #e11d48 !important;
	background: #fff1f2;
	color: #be123c;
}

/* Spinner do CF7 chèn bằng JS ngay sau nút gửi: ẩn hẳn khi chưa gửi để không
   chiếm 24px trống dưới nút, khi đang gửi thì hiện và canh giữa. */
.adz-contact .wpcf7-spinner {
	display: none;
	margin: 12px auto 0;
}

.adz-contact form.submitting .wpcf7-spinner {
	display: block;
}

.adz-f-hint {
	display: block;
	margin: -6px 0 14px;
	font-size: 1rem;
	color: var(--adz-muted);
}

.adz-f-hint a {
	color: var(--adz-gold);
}

@media (max-width: 849px) {
	.adz-contact {
		grid-template-columns: 1fr;
		border-radius: 22px;
	}

	.adz-contact-left,
	.adz-contact-right {
		padding: 32px 24px;
	}

	.adz-contact-left {
		border-right: 0;
		border-bottom: 1px solid var(--adz-border);
	}

	.adz-contact-left h2 {
		font-size: 1.7rem;
	}
}

/* ============================================================
   FOOTER "Let's Talk" – HAI BẢN SÁNG/TỐI (markup ở inc/footer.php)

   Bố cục theo mẫu clay.global: tiêu đề rất lớn + email/điện thoại bên trái,
   2 cột menu và lưới văn phòng bên phải, hàng MXH + bản quyền ở đáy, nền là
   cụm ống bo tròn nằm chéo (SVG inline, xem adzio_footer_bg_svg()).

   MỘT MARKUP, HAI TÔNG: mọi màu đi qua bộ biến --f-* khai ngay trên .adz-footer;
   bản sáng chỉ ghi đè bộ biến đó. Đây là chỗ then chốt để không tái diễn lỗi
   "đen trên đen" — không rule nào được viết thẳng mã màu vào chữ hay nền.

   Màu ống nền cố ý bám bảng TRẮNG ĐEN của site (không lấy xanh navy của mẫu),
   nhưng dải sáng-tối giữ đúng tỉ lệ của bản render: thân ống lệch nền vài %,
   mép hứng sáng bật lên ~18%, mép khuất chìm xuống dưới nền.
   ============================================================ */
.footer-wrapper,
.footer-wrapper .footer-widgets {
	background: transparent !important;
}

.adz-footer {
	/* ---- Bản TỐI (mặc định, đúng ảnh mẫu) ----
	   Nền KHÔNG dùng #0D0D0D như các mảng tối khác của site mà nhấc lên #141414:
	   mẫu để thân ống TỐI HƠN nền, mà nền đã sát đen thì không còn chỗ cho ống
	   chìm xuống, cụm khối đọc thành mấy vệt sáng thay vì khối trụ. */
	--f-bg: #141414;
	--f-fg: #ffffff;
	--f-muted: rgba(255, 255, 255, .72);
	--f-line: rgba(255, 255, 255, .3);
	/* --f-coil-op = ĐỘ ĐẬM của cuộn ống nền (ảnh render, xem
	   adzio_footer_bg_html() trong inc/footer.php). Ảnh render có khối rất rõ để
	   còn thấy được bóng tiếp xúc giữa các thuỳ; độ nhạt cuối cùng do chỗ này
	   quyết định, không sửa trong ảnh. Đo trên mẫu: thân ống chỉ chênh nền
	   11/255 — rất nhạt, và cái làm mắt đọc ra khối là BÓNG và MÉP, không phải
	   độ đậm. Nới rộng con số này là footer bị cụm khối lấn, chữ khó đọc. */
	--f-coil-op: .075;
	--f-sheen: rgba(255, 255, 255, .07);
	/* vệt sáng chạy  */

	position: relative;
	/* isolation: lớp ảnh nền dùng z-index:-1 để chui xuống dưới chữ; không lập
	   stacking context riêng thì nó tụt xuống dưới cả nền của #main. */
	isolation: isolate;
	overflow: hidden;
	background: var(--f-bg);
	color: var(--f-fg);
	font-family: var(--adz-font-b);
	padding: clamp(52px, 7vw, 112px) 0 clamp(26px, 3vw, 40px);
}

.adz-footer--light {
	--f-bg: #F1F1F0;
	--f-fg: #0D0D0D;
	--f-muted: rgba(13, 13, 13, .68);
	--f-line: rgba(13, 13, 13, .28);
	--f-coil-op: .58;
	--f-sheen: rgba(255, 255, 255, .85);
}

/* ---- Nền: cụm ống chéo ----
   Cắt ngang ở mép phải là thấy ngay đường thẳng đứng nhân tạo, mà mẫu thì cụm
   khối nhạt dần rồi mất hẳn trước cột chữ ⇒ tan bằng mask thay vì cắt. */
.adz-footer-bgwrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: min(64%, 980px);
	z-index: -1;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, #000 74%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 74%, transparent 100%);
	/* no-repeat: lớp trôi chậm đẩy cụm ống ra NGOÀI khung này, mà mask mặc định
	   là `repeat` — gradient lặp lại thì phần tràn ra bên trái hiện lên thành
	   một vệt lạ. no-repeat = cắt thẳng ở mép khung, đúng ý ban đầu. */
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* Thị sai theo cuộn — biến --adz-p do js/adzio.js đặt, ĐÚNG cơ chế của
	   `.adz-sl-stage` ở trang Dịch Vụ. Không transition: giá trị đổi mỗi khung
	   hình nên đã mượt; thêm transition vào là cụm khối chạy trễ sau nội dung. */
	transform: translate3d(0, calc(var(--adz-p, 0) * -30px), 0);
}

/* Lớp giữa: trôi chậm vô hạn (xem @keyframes adz-ft-drift).
   Tách khỏi lớp ảnh vì lớp ảnh đang giữ transform của hiệu ứng vào-màn-hình — hai
   transform trên CÙNG một thẻ thì cái sau xoá cái trước. */
.adz-footer-bgdrift {
	position: absolute;
	inset: 0;
}

/* Lớp trong cùng: ẢNH cuộn ống, và là lớp giữ phép phóng lúc vào màn hình.

   Ảnh phải TO HƠN KHUNG NHIỀU rồi đẩy lệch ra ngoài, chỉ thấy một khúc giữa
   cuộn — đúng cách của mẫu (họ để ảnh 1667px, đẩy `-440px 45%`).

   `background-position` theo % KHÔNG phải phép dịch: nó khớp điểm x% của ảnh với
   điểm x% của khung, nên biên dịch được chỉ bằng (khổ ảnh − khổ khung). Lúc đặt
   `auto 175%` ảnh chỉ rộng hơn khung 132px, -14% ra vỏn vẹn -18px — tưởng là đẩy
   hẳn sang trái mà thực tế gần như không dịch, cuộn ống nằm giữa khung và bé tí.
   Để `auto 250%` thì ảnh rộng ~1500px, dư ~578px, -28% mới ra -162px thật.
   ĐỔI `background-size` LÀ PHẢI TÍNH LẠI `background-position`.

   Ảnh là cuộn TRẮNG trên nền trong suốt; hai tông khác nhau ở phép TRỘN màu bên
   dưới, không phải hai file ảnh. */
.adz-footer-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-origin: 38% 50%;
	/* ĐƯỜNG DẪN TƯƠNG ĐỐI, tính từ chính file style.css này. Trước đây ở đây là
	   link tuyệt đối `http://localhost/adzio/wp-content/uploads/…` — chạy được ở
	   máy local nhưng lên host là hỏng: lệnh search-replace lúc chuyển site chỉ
	   đổi địa chỉ nằm trong CSDL, KHÔNG đụng tới file .css.
	   Ảnh cũng đã chuyển hẳn vào theme (`assets/img/`) thay vì để trong thư viện
	   media: nền trang trí thì nên đi theo theme, không phụ thuộc thư mục uploads
	   có được mang sang đủ hay không. */
	background-image: url(assets/img/helix-coil.png);
	background-repeat: no-repeat;
	/* Dùng px cố định như mẫu (`-440px 45%`), KHÔNG dùng %: xem đoạn trên, % ở
	   đây là phép khớp điểm chứ không phải phép dịch nên rất khó canh.
	   Ảnh render 1500×1500, cuộn ống nằm trong khoảng x 300…1350, y 200…1300 của
	   ảnh. Thu về 1300px rồi đẩy -430px/-140px ⇒ trong khung thấy khúc giữa cuộn,
	   nằm ở nửa trái footer, không cắt ngang chỗ đặt chữ. */
	/* KHỔ ẢNH quyết định khối có "rõ" hay không, và không phải cứ to là rõ.
	   Để 1300px thì trong khung chỉ còn MẶT GIỮA một thân ống: đo một hàng điểm
	   ảnh ra 232→237 trôi lững lờ rồi nhảy sang nền, biên độ 17/255 (còn đậm hơn
	   mẫu 11/255) mà nhìn vẫn "mờ mờ" — vì KHÔNG CÓ MÉP nào trong khung.
	   1000px thì thấy trọn 3–4 thuỳ kèm ĐƯỜNG VIỀN của chúng; mép mới là thứ làm
	   mắt đọc ra khối, không phải độ đậm. Thấy mờ thì ZOOM RA, đừng tăng độ đậm.

	   Ảnh 1500px, cuộn ống nằm trong x 300…1350, y 200…1300 của ảnh; thu về
	   1000px thì cuộn còn x 200…900, y 133…867 ⇒ đẩy -200px/-90px là cuộn nằm
	   gọn nửa trái footer. Đổi `background-size` là phải tính lại chỗ này. */
	/* ĐÃ THỬ VÀ LOẠI (2026-08-21): render lại ảnh với 4.6 vòng thay vì 3.2 để cụm
	   khối với xa hơn sang phải. Đo ra KÉM HƠN ở mọi khổ đã thử — cuộn dài ra thì
	   cùng một khung chỉ còn thấy mặt trơn, số mép tụt từ 6–7 xuống 2, mà zoom ra
	   cho vừa thì mép lại rời rạc không đều giữa các hàng. Bản 3.2 vòng + 820px
	   này cho mép đều nhất. Muốn với xa hơn thì đổi CHỖ CẮT/khổ ảnh, đừng thêm
	   vòng. */
	background-position: -150px -60px;
	background-size: 820px auto;
	opacity: var(--f-coil-op);
	/* Trộn màu chứ không đè thẳng. Ảnh render là cuộn TRẮNG, đè thẳng lên nền thì
	   cuộn SÁNG HƠN nền — ngược hẳn mẫu (mẫu đo được thân ống 232 trên nền 243,
	   tức tối hơn).
	     · bản sáng `multiply`: chỗ trắng của ảnh tan hết vào nền, chỉ còn phần
	       BÓNG in xuống ⇒ thân cuộn tối hơn nền, đúng kiểu mẫu;
	     · bản tối `screen`: ngược lại, chỉ phần sáng nổi lên trên nền gần đen —
	       nền đen mà multiply thì mất tăm.
	   Trộn được là nhờ `.adz-footer` có `isolation: isolate`, phép trộn bị giữ
	   trong footer, không ăn ra khối nội dung phía trên. */
	mix-blend-mode: multiply;
}

.adz-footer--dark .adz-footer-bg {
	mix-blend-mode: screen;
}

/* ---- Hai cột chính ---- */
.adz-footer-in,
.adz-footer-bar {
	max-width: var(--adz-container, 1170px);
	margin: 0 auto;
	padding: 0 20px;
}

.adz-footer-in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.adz-footer-h {
	margin: 0 0 clamp(18px, 2.4vw, 34px);
	color: var(--f-fg);
	font-family: var(--adz-font-d);
	font-size: clamp(2.6rem, 6.4vw, 5.4rem);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.035em;
}

.adz-footer-mail,
.adz-footer-tel {
	margin: 0 0 12px;
	font-size: clamp(1.05rem, 1.5vw, 1.5rem);
	line-height: 1.4;
	color: var(--f-fg);
}

.adz-footer a {
	color: var(--f-fg);
}

/* Gạch chân bằng border chứ không text-decoration: chữ tiếng Việt có dấu dưới
   (ạ, ụ, ọ…) bị nét gạch cắt ngang nếu dùng underline mặc định. */
.adz-footer-mail a,
.adz-footer-nav a,
.adz-footer-office a,
.adz-footer-legal a {
	border-bottom: 1px solid var(--f-line);
	transition: border-color .25s var(--adz-ease), opacity .25s var(--adz-ease);
}

/* GẠCH CHÂN CHẠY TỪ TRÁI SANG khi trỏ vào — thay cho kiểu chỉ đổi màu viền.
   Vẽ bằng background-image chứ không ::after: `::after` định vị theo MẢNH đầu
   tiên của thẻ inline, gặp link xuống dòng (địa chỉ văn phòng) là nét gạch chỉ
   ra ở dòng đầu. background-clip mặc định là border-box nên dải 1px ở đáy nằm
   ĐÚNG chỗ đường border ⇒ lúc hover cho border trong suốt, hai nét không cộng
   thành hai gạch.

   Không dùng text-decoration cho hiệu ứng này: chữ Việt có dấu dưới (ạ, ụ, ọ)
   bị nét gạch cắt ngang — cùng lý do khối này chọn border thay underline. */
.adz-footer-mail a,
.adz-footer-nav a,
.adz-footer-legal a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
}

.adz-footer-mail a:hover,
.adz-footer-nav a:hover,
.adz-footer-legal a:hover {
	border-color: transparent;
	background-size: 100% 1px;
}

.adz-footer-office a:hover {
	border-color: currentColor;
}

.adz-footer-social a:hover {
	opacity: .72;
}

/* ---- Cột phải: 2 cột menu + lưới văn phòng ---- */
.adz-footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 clamp(16px, 2vw, 30px);
}

.adz-footer-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(6px, .8vw, 12px);
}

.adz-footer-nav a {
	font-size: clamp(1rem, 1.35vw, 1.4rem);
	line-height: 1.35;
}

.adz-footer-offices {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(22px, 2.6vw, 38px) clamp(16px, 2vw, 30px);
	margin-top: clamp(40px, 6vw, 96px);
}

.adz-footer-office strong {
	display: block;
	margin-bottom: 6px;
	color: var(--f-fg);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
}

.adz-footer-office a,
.adz-footer-office span {
	display: block;
	color: var(--f-muted);
	font-size: .95rem;
	line-height: 1.5;
}

.adz-footer-office a {
	display: inline;
}

/* ---- Hàng đáy ---- */
.adz-footer-bar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(18px, 2vw, 30px);
	align-items: center;
	margin-top: clamp(48px, 6vw, 96px);
}

.adz-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.2vw, 34px);
	font-size: 1.3rem;
}

.adz-footer-social a {
	line-height: 1;
	transition: opacity .25s var(--adz-ease);
}

.adz-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px clamp(14px, 1.6vw, 26px);
	color: var(--f-muted);
	font-size: .95rem;
}

/* ---- Màn hẹp ----
   Xếp dọc: khối "Let's Talk" trước, rồi menu, rồi văn phòng. Cụm ống nền phủ
   hết bề ngang và lùi độ đậm lại — trên màn nhỏ chữ đè thẳng lên thân ống. */
@media (max-width: 849px) {

	.adz-footer-in,
	.adz-footer-bar {
		grid-template-columns: 1fr;
	}

	.adz-footer-cols {
		grid-template-columns: 1fr 1fr;
	}

	.adz-footer-offices {
		grid-template-columns: 1fr 1fr;
		margin-top: clamp(28px, 6vw, 44px);
	}

	.adz-footer-bgwrap {
		width: 100%;
		opacity: .7;
	}

	.adz-footer-bar {
		gap: 22px;
	}
}

@media (max-width: 520px) {
	.adz-footer-offices {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   FOOTER – HIỆU ỨNG CHUYỂN ĐỘNG (mẫu clay.global)

   Cùng bộ số với khối nền trang Dịch Vụ để hai chỗ chuyển động ăn nhịp nhau
   (xem `.adz-sl-stage` / `.adz-sl-stage-in`): vào màn hình thì cụm khối phóng
   từ 90% lên 100% trong 1.2s, mờ dần trong .9s, và trôi thị sai theo cuộn.
   Thêm cho footer hai thứ mẫu có mà trang Dịch Vụ không có: cụm ống TRÔI CHẬM
   vô hạn và một VỆT SÁNG quét dọc thân ống.

   BA CHỐT PHẢI GIỮ, sửa sai là mất chữ:

   1) Mọi rule ẩn nội dung đều nằm sau `.adz-anim` — class này do js/adzio.js
      gắn. JS lỗi, JS bị chặn, hay người dùng tắt hiệu ứng: không có class thì
      footer hiện đầy đủ như trước, không có nguy cơ footer trắng trơn.

   2) Ba lớp nền, mỗi lớp MỘT transform: bgwrap = thị sai, bgdrift = trôi chậm,
      svg = phóng vào màn hình. Gộp hai transform vào một thẻ thì cái sau xoá
      cái trước.

   3) Các thẻ vừa CHẠY REVEAL vừa CÓ HOVER (link menu, hàng bản quyền) phải khai
      gộp mọi transition trong MỘT rule. Rule reveal có 3 class nên thắng rule
      hover 1 class ở property `transition` — tách ra là hover mất hiệu ứng
      chạy, chỉ nhảy thẳng.
   ============================================================ */

/* --- Nội dung: mờ + trượt lên, so le theo --i (PHP in ra ở từng dòng) --- */
.adz-footer.adz-anim .adz-footer-h>span,
.adz-footer.adz-anim .adz-footer-mail,
.adz-footer.adz-anim .adz-footer-tel,
.adz-footer.adz-anim .adz-footer-nav a,
.adz-footer.adz-anim .adz-footer-office,
.adz-footer.adz-anim .adz-footer-social a,
.adz-footer.adz-anim .adz-footer-legal>* {
	/* --d = độ trễ riêng của dòng: mốc của cả nhóm (--d0) + thứ tự trong nhóm. */
	--d: calc(var(--d0, 0s) + var(--i, 0) * .06s);
	opacity: 0;
	transform: translateY(var(--rise, 20px));
	transition:
		opacity .8s var(--adz-ease) var(--d),
		transform 1s var(--adz-ease) var(--d),
		background-size .45s var(--adz-ease),
		border-color .25s var(--adz-ease);
}

.adz-footer.adz-anim.is-in .adz-footer-h>span,
.adz-footer.adz-anim.is-in .adz-footer-mail,
.adz-footer.adz-anim.is-in .adz-footer-tel,
.adz-footer.adz-anim.is-in .adz-footer-nav a,
.adz-footer.adz-anim.is-in .adz-footer-office,
.adz-footer.adz-anim.is-in .adz-footer-social a,
.adz-footer.adz-anim.is-in .adz-footer-legal>* {
	opacity: 1;
	transform: none;
}

/* Mốc từng nhóm: trái trước phải sau, trên trước dưới sau — mắt đi theo đúng
   thứ tự đọc như mẫu, chứ không bật cả footer lên một lượt. */
.adz-footer.adz-anim .adz-footer-mail {
	--d0: .14s;
}

.adz-footer.adz-anim .adz-footer-tel {
	--d0: .2s;
}

.adz-footer.adz-anim .adz-footer-cols>nav:nth-child(1) a {
	--d0: .18s;
}

.adz-footer.adz-anim .adz-footer-cols>nav:nth-child(2) a {
	--d0: .26s;
}

.adz-footer.adz-anim .adz-footer-office {
	--d0: .34s;
}

.adz-footer.adz-anim .adz-footer-social a {
	--d0: .42s;
}

.adz-footer.adz-anim .adz-footer-legal>* {
	--d0: .46s;
}

/* --- Tiêu đề lớn: chữ TRỒI LÊN từ dưới mép cắt (mẫu làm y vậy) ---
   Cắt bằng clip-path chứ không overflow: hidden để chừa .22em phía dưới cho dấu
   nặng/dấu chấm dưới của chữ Việt (ạ, ụ, ọ) — line-height .98 khiến mấy dấu này
   thò xuống dưới mép khung, overflow: hidden là cắt mất.
   --rise 145% > 100% + .22em ⇒ lúc chưa hiện, chữ nằm hẳn ngoài vùng thấy. */
.adz-footer.adz-anim .adz-footer-h {
	clip-path: inset(-40% -20% -.22em -20%);
}

.adz-footer.adz-anim .adz-footer-h>span {
	display: block;
	--rise: 145%;
	transition:
		opacity .45s var(--adz-ease),
		transform 1.15s var(--adz-ease);
}

/* --- Nền: phóng vào màn hình, giống `.adz-sl-stage-in` trang Dịch Vụ --- */
.adz-footer.adz-anim .adz-footer-bg {
	opacity: 0;
	transform: scale(.9);
	transition: transform 1.2s var(--adz-ease), opacity .9s var(--adz-ease);
}

/* Đích của phép mờ-dần là --f-coil-op, KHÔNG phải 1: để 1 thì hiệu ứng vào màn
   hình kéo cuộn ống lên đậm hết cỡ rồi đứng ở đó, lấn hẳn phần chữ. */
.adz-footer.adz-anim.is-in .adz-footer-bg {
	opacity: var(--f-coil-op);
	transform: scale(1);
}

/* --- Nền: trôi chậm vô hạn ---
   Chỉ chạy khi footer đã vào tầm nhìn (`.is-in`), không đốt CPU lúc còn ở ngoài.
   scale luôn ≥ 1.05: xoay ±1.4deg mà để scale 1 là hở góc, lộ ra mấy vệt nền
   phẳng ở mép trên/dưới. */
.adz-footer.adz-anim.is-in .adz-footer-bgdrift {
	animation: adz-ft-drift 16s ease-in-out infinite;
}

/* TỐC ĐỘ ĐO TỪ MẪU, đừng hạ xuống cho "nhẹ nhàng".
   Cách đo (2026-08-21): chụp footer clay.global hai lần cách nhau 8 giây, KHÔNG
   cuộn, rồi dò vị trí mép ống trên cùng một hàng điểm ảnh. Mép của mẫu dịch
   55–63px trong 8 giây ⇒ khoảng 7px/giây. Bản đầu ở đây ra ~1px/giây: dưới
   ngưỡng nhận biết, khách xem xong bảo "chả thấy gì" — đúng.

   Chủ yếu lấy chuyển động từ GÓC XOAY chứ không từ phép đẩy: xoay θ làm điểm
   cách tâm r dịch r·θ (r≈400px thì 1° ≈ 7px), nên ±3° trong nửa chu kỳ đã cho
   ~42px mà cụm ống vẫn nằm nguyên vùng của nó. Đẩy nhiều thì cả búi ống trượt
   khỏi chỗ đã canh và hở một dải nền phẳng ở mép trái.

   scale bù cho phép xoay, điều kiện đủ để không hở góc (a = W/2, b = H/2):
       ngang: scale * (a*cos + b*sin) >= a + |tx|
       dọc  : scale * (b*cos + a*sin) >= b + |ty|
   Khung ~922x602, xoay 5deg, đẩy 3.5% ⇒ cần scale >= 1.02; để 1.05 cho dư. */
@keyframes adz-ft-drift {
	0% {
		transform: translate3d(-3.5%, 2%, 0) rotate(-5deg) scale(1.05);
	}

	50% {
		transform: translate3d(3.5%, -2%, 0) rotate(5deg) scale(1.1);
	}

	100% {
		transform: translate3d(-3.5%, 2%, 0) rotate(-5deg) scale(1.05);
	}
}

/* --- Nền: vệt sáng quét dọc thân ống ---
   Góc 226deg = song song trục cuộn ống trong ảnh render (thuỳ ống nghiêng
   khoảng 46deg so với phương dọc), nên dải sáng chạy DỌC
   thân trụ như ánh sáng liếm qua, không cắt ngang thành một vạch chéo lạ.
   Nghỉ hơn nửa chu kỳ (opacity về 0 từ 46%) — mẫu cũng chỉ loé lên thưa thớt,
   quét liên tục thì thành đèn nhấp nháy. */
.adz-footer-sheen {
	position: absolute;
	inset: -25% -12%;
	opacity: 0;
	/* background: linear-gradient(226deg,
			transparent 34%,
			var(--f-sheen) 50%,
			transparent 66%); */
}

.adz-footer.adz-anim.is-in .adz-footer-sheen {
	animation: adz-ft-sheen 17s var(--adz-ease) 1.4s infinite;
}

@keyframes adz-ft-sheen {
	0% {
		opacity: 0;
		transform: translate3d(-40%, -22%, 0);
	}

	8% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	46%,
	100% {
		opacity: 0;
		transform: translate3d(38%, 20%, 0);
	}
}

/* --- Icon MXH: nhấc nhẹ khi trỏ vào ---
   Đặt trên thẻ <i> BÊN TRONG, không đặt trên <a>: chính thẻ <a> đang giữ
   transform của reveal, hover ghi đè vào là dòng đó nhảy về sai chỗ. */
.adz-footer-social a i {
	display: inline-block;
	transition: transform .3s var(--adz-ease);
}

.adz-footer-social a:hover i {
	transform: translateY(-4px);
}

/* --- Tôn trọng "giảm chuyển động" ---
   JS đã không gắn `.adz-anim` khi hệ thống bật chế độ này; rule dưới đây là lớp
   chặn thứ hai cho trường hợp class đã gắn từ trước rồi người dùng mới đổi cài
   đặt hệ thống. */
@media (prefers-reduced-motion: reduce) {

	.adz-footer.adz-anim .adz-footer-h,
	.adz-footer.adz-anim .adz-footer-h>span,
	.adz-footer.adz-anim .adz-footer-mail,
	.adz-footer.adz-anim .adz-footer-tel,
	.adz-footer.adz-anim .adz-footer-nav a,
	.adz-footer.adz-anim .adz-footer-office,
	.adz-footer.adz-anim .adz-footer-social a,
	.adz-footer.adz-anim .adz-footer-legal>*,
	.adz-footer.adz-anim .adz-footer-bg {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}

	.adz-footer-bgwrap,
	.adz-footer.adz-anim.is-in .adz-footer-bgdrift,
	.adz-footer.adz-anim.is-in .adz-footer-sheen {
		transform: none;
		animation: none;
	}

	.adz-footer-sheen {
		display: none;
	}
}

/* Màn hẹp: trượt lên ngắn hơn (khoảng cách dòng cũng ngắn hơn) và tắt vệt sáng
   — trên màn nhỏ chữ đè thẳng lên thân ống, thêm vệt sáng là chữ khó đọc. */
@media (max-width: 849px) {

	.adz-footer.adz-anim .adz-footer-mail,
	.adz-footer.adz-anim .adz-footer-tel,
	.adz-footer.adz-anim .adz-footer-nav a,
	.adz-footer.adz-anim .adz-footer-office,
	.adz-footer.adz-anim .adz-footer-social a,
	.adz-footer.adz-anim .adz-footer-legal>* {
		--rise: 14px;
	}

	.adz-footer.adz-anim .adz-footer-h>span {
		--rise: 118%;
	}

	.adz-footer-sheen {
		display: none;
	}
}

/* ============================================================
   BLOG / KIẾN THỨC – header + sidebar danh mục + lưới card có ảnh
   Bố cục theo mẫu neyul.com/tin-tuc, màu/typo giữ của ALPHA MKT.
   ============================================================ */
.adz-blog {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 0 24px;
}

/* Ẩn tiêu đề archive mặc định của Flatsome nếu có */
.blog-archive .page-title,
.blog-wrapper .entry-header-text>.page-title {
	display: none;
}

/* ---------- Header giới thiệu (2 cột: tiêu đề trái · mô tả phải) ---------- */
.adz-blog-head-l {
	max-width: 480px;
}
.adz-blog-head-r {
	max-width: 560px;
}

.adz-blog-head {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 2.5rem 4rem;
	align-items: start;
	padding: 46px 0 64px;
}

.adz-blog-eyebrow {
	display: block;
	color: var(--adz-gold-soft);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .01em;
	margin-bottom: 12px;
	line-height: 1;
}

.adz-blog-h1 {
	font-size: 28px;
	line-height: 1.32;
	font-weight: 400;
	margin: 0;
	color: #222;
	letter-spacing: -.015em;
}

.adz-blog-h1 strong {
	font-weight: 700;
}

.adz-blog-head-r {
	padding-top: 2.6rem;
}

.adz-blog-head-r p {
	color: #595959;
	font-size: 18px;
	line-height: 1.32;
	margin: 0;
}

/* ---------- Khung chính: sidebar + danh sách ---------- */
.adz-blog-main {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

/* Mẫu neyul.com/tin-tuc: cả sidebar là một tấm nền KEM bo góc lớn, không viền;
   mục đang xem và thẻ CTA là hai tấm TRẮNG nổi trên nền đó. Bản cũ để nền trắng
   + viền nên mục đang xem và thẻ CTA trắng-trên-trắng, chìm hẳn. */
.adz-blog-side {
	position: sticky;
	top: 92px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #faf7f5;
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 4px 16px #0000002e;
}

/* Danh sách chuyên mục */
.adz-catnav {
	display: flex;
	flex-direction: column;
}

.adz-catnav-i {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .7rem .95rem;
	/* Mẫu bo góc vừa (~14px) chứ không phải viên thuốc */
	border-radius: 14px;
	color: var(--adz-ink);
	text-decoration: none;
	transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}

.adz-catnav-n {
	font-size: .92rem;
	font-weight: 500;
	line-height: 1.35;
}

/* `--adz-muted` (#bfbfbf) quá nhạt cho con số bên cạnh tên mục — mẫu để xám vừa,
   đọc được rõ; dùng xám đậm hơn riêng ở đây. */
.adz-catnav-n em {
	font-style: normal;
	color: #8a8a8a;
}

/* `--adz-gold-soft` vẫn còn là màu VÀNG CŨ (#d1a765) nên dùng ở đây ra vòng tròn
   nâu, lệch bảng màu trắng-đen: đặt xám trung tính thẳng vào. */
.adz-catnav-p {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ebe6e2;
	color: var(--adz-ink);
	font-size: .6rem;
	transition: background .2s ease, color .2s ease;
}

.adz-catnav-i:hover {
	background: rgba(0, 0, 0, .045);
	color: var(--adz-ink);
}

/* Mục đang xem: tấm trắng nổi trên nền kem (mẫu), không phải viền quanh chữ */
.adz-catnav-i.is-active {
	background: #fff;
	color: var(--adz-ink);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.adz-catnav-i.is-active .adz-catnav-n {
	font-weight: 600;
}

.adz-catnav-i.is-active .adz-catnav-p {
	background: var(--adz-ink);
	color: #fff;
}

/* Thẻ CTA tư vấn dưới sidebar – mẫu xếp ICON BÊN TRÁI, "Miễn phí" + tiêu đề bên
   phải cùng hàng, rồi đoạn mô tả và nút chiếm trọn bề ngang. Dùng grid để đổi bố
   cục mà không phải bọc thêm thẻ trong PHP (markup do adzio_post_side_cta_html()
   in ra, còn dùng cho sidebar trang bài viết). */
.adz-side-cta {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
	background: #fff;
	border-radius: 16px;
	padding: 1.15rem 1.05rem 1.25rem;
}

/* Không nhập icon thì bỏ luôn cột icon, chữ không bị thụt vào vô cớ */
.adz-side-cta:not(:has(.adz-side-cta-ic)) {
	grid-template-columns: minmax(0, 1fr);
}

.adz-side-cta-ic {
	grid-row: 1 / span 2;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #f3f0ee;
	color: var(--adz-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .95rem;
}

.adz-side-cta-free {
	display: block;
	font-size: .78rem;
	color: #8a8a8a;
	line-height: 1.3;
}

.adz-side-cta-t {
	display: block;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 14px;
	color: #232323;
}

.adz-side-cta p {
	grid-column: 1 / -1;
	font-size: 12px;
	line-height: 1.22;
	color: #000;
	margin: .9rem 0 .9rem;
}

/* Ở sidebar trang bài viết không có tấm nền kem, thẻ trắng nằm trên nền trắng nên
   cần một đường viền mảnh mới thấy ranh thẻ. */
.adz-post-side .adz-side-cta {
	border: 1px solid var(--adz-border);
}

.adz-side-cta-btn {
	grid-column: 1 / -1;
	display: block;
	text-align: center;
	background: var(--adz-gold-soft);
	color: #fff !important;
	font-weight: 600;
	font-size: .88rem;
	padding: .8rem 1rem;
	/* Mẫu là nút chữ nhật bo góc, không phải viên thuốc */
	border-radius: 12px;
	text-decoration: none;
	transition: background .2s ease;
}

.adz-side-cta-btn:hover {
	background: #000;
}

/* ---------- Lưới card ---------- */
.adz-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
}

.adz-blog-empty {
	color: var(--adz-muted);
	padding: 2rem 0;
}

.adz-pc {
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 1px 2px 4px #00000040;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color .25s ease;
}

.adz-pc img {
	transition: all .3s ease;
}

.adz-pc:hover img {
	scale: 1.04;
}

.adz-pc-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--adz-gold-soft);
	overflow: hidden;
}

.adz-pc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.adz-pc-noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(0, 0, 0, .18);
	font-size: 2rem;
}

.adz-pc-cat {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: #d9d9d917;
	backdrop-filter: blur(24px);
	color: #fff;
	font-size: 12px;
	padding: .3rem .7rem;
	border-radius: 30px;
	line-height: 1;
	border: 1px solid #fff;
}

.adz-pc-body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .95rem 1.05rem 1.15rem;
}

.adz-pc-date {
	font-size: .78rem;
	color: var(--adz-muted);
}

.adz-pc-title {
	font-size: .98rem;
	line-height: 1.45;
	font-weight: 600;
	color: var(--adz-ink);
	margin: 0;
	font-family: var(--adz-font-b);
}

/* Phân trang Flatsome -> pill giống mẫu */
.adz-blog .page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin: 2.5rem 0 0;
	padding: 0;
}

.adz-blog .page-numbers>li {
	margin: 0;
}

.adz-blog .page-numbers a,
.adz-blog .page-numbers span,
.adz-blog a.page-number,
.adz-blog span.page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 12px;
	background: rgba(17, 17, 17, .05);
	border: 1px solid rgba(17, 17, 17, .15);
	color: var(--adz-muted);
	font-weight: 600;
	text-decoration: none;
	transition: all .2s;
}

.adz-blog .page-numbers a:hover {
	border-color: var(--adz-gold);
	color: var(--adz-ink);
}

.adz-blog .page-numbers .current,
.adz-blog .page-numbers span.current {
	background: var(--adz-gold) !important;
	border-color: var(--adz-gold);
	color: #fff;
}

/* ---------- Blog responsive ---------- */
@media (max-width: 1100px) {
	.adz-blog-main {
		grid-template-columns: 236px minmax(0, 1fr);
	}

	.adz-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.adz-blog-head {
		grid-template-columns: 1fr;
		gap: 1.1rem;
		padding: 32px 0 40px;
	}

	.adz-blog-head-r {
		padding-top: 0;
	}

	.adz-blog-h1 {
		font-size: 20px;
	}

	.adz-blog-head-r p {
		font-size: 16px;
	}

	/* Sidebar xuống nằm TRÊN danh sách bài, vẫn nguyên bố cục dọc như mẫu: tấm nền
	   kem, danh sách chuyên mục xếp dọc còn nút "+", thẻ tư vấn vẫn là thẻ đứng.
	   Bản trước gom thành dải chip cuộn ngang + thẻ tư vấn một hàng (ẩn "Miễn phí"
	   và đoạn mô tả) — gọn hơn nhưng khác mẫu, nên bỏ. */
	.adz-blog-main {
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}

	.adz-blog-side {
		position: static;
	}
}

@media (max-width: 560px) {
	.adz-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   BÀI VIẾT CHI TIẾT (single) – bố cục theo mẫu neyul.com/tin-tuc/...
   Header trải rộng ([chuyên mục] · tiêu đề · sapo · ngày), bên dưới 2 cột:
   sidebar 300px (CTA tư vấn + bài liên quan) · nội dung 672px = 1056px.
   Màu/typo giữ của ALPHA MKT. Thẻ .adz-pc và .adz-side-cta dùng chung với
   trang danh sách Kiến thức (khai báo ở khối BLOG phía trên).
   ============================================================ */
.adz-post {
	max-width: 1056px;
	margin: 0 auto;
	padding: 8px 0 24px;
}

/* ---------- Header bài viết ---------- */
.adz-post-head {
	padding: 40px 0 46px;
}

.adz-post-eyebrow {
	color: var(--adz-gold);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	margin: 0 0 .9rem;
}

.adz-post-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.adz-post-eyebrow a:hover {
	color: var(--adz-gold-dark);
}

.adz-post-title {
	font-size: clamp(1.5rem, 3.1vw, 2.05rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--adz-ink);
	margin: 0;
	text-align: left;
}

.adz-post-lead {
	margin: 1.4rem 0 0;
	font-size: 1.06rem;
	line-height: 1.5;
	font-weight: 500;
	color: #4F4F4F;
	max-width: 880px;
}

.adz-post-date {
	display: block;
	margin-top: 1rem;
	font-size: .85rem;
	color: var(--adz-muted);
}

/* ---------- Khung chính: sidebar + nội dung ---------- */
.adz-post-main {
	display: grid;
	grid-template-columns: 300px minmax(0, 672px);
	gap: 84px;
	align-items: start;
	padding-bottom: 56px;
}

.adz-post-side {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: sticky;
	top: 92px;
}

/* Bài liên quan: 1 cột thẻ .adz-pc xếp dọc trong sidebar */
.adz-post-rel-t {
	font-family: var(--adz-font-d);
	font-size: 1rem;
	font-weight: 700;
	color: var(--adz-ink);
	margin: 0 0 .9rem;
}

.adz-post-rel-grid {
	display: grid;
	gap: 1rem;
}

/* Nội dung: typo dùng chung .adz-article-body, chỉ chỉnh lề đầu/cuối */
.adz-post-body {
	min-width: 0;
}

.adz-post-body>*:first-child {
	margin-top: 0;
}

.adz-post-body>*:last-child {
	margin-bottom: 0;
}

/* ---------- Responsive bài viết ---------- */
@media (max-width: 1100px) {
	.adz-post-main {
		grid-template-columns: 272px minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 900px) {

	/* Một cột: nội dung trước, sidebar (CTA + bài liên quan) xuống dưới */
	.adz-post-main {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.adz-post-body {
		order: 1;
	}

	.adz-post-side {
		order: 2;
		position: static;
		gap: 1.25rem;
	}

	.adz-post-rel-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.adz-post-head {
		padding: 28px 0 32px;
	}
}

@media (max-width: 560px) {
	.adz-post-rel-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Thẻ bài viết kiểu cũ (.adz-article-wrap) – còn dùng ở trang công cụ
   ============================================================ */
.adz-article-wrap {
	max-width: 820px;
	margin: 40px auto 0;
	background: #fff;
	border: 1px solid rgba(17, 17, 17, .08);
	border-radius: 20px;
	padding: 2.5rem 2.75rem 3rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .06);
}

.adz-article-crumb {
	font-size: .85rem;
	margin: 0 0 1rem;
}

.adz-article-crumb a {
	color: var(--adz-muted);
	text-decoration: none;
}

.adz-article-crumb a:hover {
	color: var(--adz-gold);
}

.adz-article-crumb span {
	color: var(--adz-muted);
}

.adz-article-title {
	font-size: 2rem;
	line-height: 1.25;
	text-align: left;
	margin: 0 0 .5rem;
	color: var(--adz-ink);
	font-weight: 800;
}

.adz-article-meta {
	color: var(--adz-muted);
	font-size: .85rem;
	margin: 0 0 2rem;
}

.adz-article-body {
	color: #242424;
	font-size: 1.02rem;
	line-height: 1.8;
}

.adz-article-body h2 {
	color: var(--adz-ink);
	font-size: 1.5rem;
	margin: 2.5rem 0 1rem;
	font-family: var(--adz-font-d);
}

.adz-article-body h3 {
	color: var(--adz-ink);
	font-size: 1.2rem;
	margin: 1.75rem 0 .75rem;
	font-family: var(--adz-font-d);
}

.adz-article-body p {
	margin: 0 0 1.1rem;
}

.adz-article-body ul,
.adz-article-body ol {
	margin: 0 0 1.3rem;
	padding-left: 1.4rem;
}

.adz-article-body li {
	margin-bottom: .5rem;
}

.adz-article-body strong {
	color: var(--adz-ink);
}

.adz-article-body a {
	color: var(--adz-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

.adz-article-body a:hover {
	text-decoration: none;
}

.adz-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 1rem 0;
}

.adz-article-body blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	border-left: 3px solid var(--adz-gold);
	background: rgba(17, 17, 17, .04);
	border-radius: 0 12px 12px 0;
	color: #4A4A4A;
	font-style: italic;
}

.adz-article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: .92rem;
}

.adz-article-body th,
.adz-article-body td {
	border: 1px solid rgba(17, 17, 17, .15);
	padding: .65rem .85rem;
	text-align: left;
}

.adz-article-body th {
	background: rgba(17, 17, 17, .06);
	color: var(--adz-ink);
}

@media (max-width: 600px) {
	.adz-article-wrap {
		padding: 1.75rem 1.25rem 2rem;
	}

	.adz-article-title {
		font-size: 1.5rem;
	}
}

/* ============================================================
   TRANG "VỀ ADZIO" – đối tác cao cấp, đội ngũ lãnh đạo, văn hóa
   ============================================================ */
.adz-partner-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .18);
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 600;
	font-size: .92rem;
	color: var(--adz-ink);
	margin: 18px 0 14px;
}

.adz-partner-tag i {
	color: var(--adz-gold);
}

.adz-partner-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.adz-partner-logos img {
	height: 60px;
	width: auto;
	border-radius: 8px;
	display: block;
}

.adz-partner-logos a:last-child img {
	border: 1px solid var(--adz-border);
}

.adz-partner-note {
	color: var(--adz-muted);
	font-size: .88rem;
	max-width: 620px;
	margin: 0 auto;
}

.adz-ld-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.adz-ld-card {
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: var(--adz-radius);
	padding: 30px 28px;
	box-shadow: var(--adz-shadow);
	transition: border-color .4s;
}

.adz-ld-card:hover {
	border-color: rgba(17, 17, 17, .28);
}

.adz-ld-card.wide {
	grid-column: 1 / -1;
}

.adz-ld-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.adz-ld-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	border: 2px solid var(--adz-gold-soft);
}

.adz-ld-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.adz-ld-name {
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 1.12rem;
	color: var(--adz-ink);
}

.adz-ld-role {
	color: var(--adz-muted);
	font-size: .9rem;
	margin: 2px 0 8px;
}

.adz-ld-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--adz-gold-soft);
	color: var(--adz-gold);
	font-size: .76rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.adz-ld-bio {
	color: var(--adz-muted);
	font-size: .94rem;
	margin: 0 0 18px;
}

.adz-ld-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
	padding: 16px 0;
	border-top: 1px solid var(--adz-border);
	border-bottom: 1px solid var(--adz-border);
}

.adz-ld-metric {
	text-align: center;
}

.adz-ld-big {
	font-family: var(--adz-font-d);
	font-weight: 800;
	color: var(--adz-gold);
	font-size: 1.02rem;
}

.adz-ld-lbl {
	color: var(--adz-muted);
	font-size: .74rem;
	margin-top: 2px;
}

.adz-ld-skills {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.adz-ld-skl-h {
	color: var(--adz-muted);
	font-size: .8rem;
	font-weight: 600;
	margin-right: 2px;
}

.adz-ld-pill {
	background: #F6F6F6;
	border: 1px solid var(--adz-border);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--adz-ink);
}

@media (max-width: 849px) {
	.adz-ld-grid {
		grid-template-columns: 1fr;
	}

	.adz-ld-card.wide {
		grid-column: auto;
	}

	.adz-ld-metrics {
		grid-template-columns: 1fr;
	}
}

/* Ảnh tập thể + caption cạnh nhau (Văn hóa ALPHA MKT) */
.adz-team-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: stretch;
	border-radius: var(--adz-radius);
	overflow: hidden;
	margin: 0;
	background: #fff;
	border: 1px solid var(--adz-border);
	box-shadow: var(--adz-shadow);
}

.adz-team-hero img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.adz-team-hero-cap {
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.adz-team-hero-cap .adz-eyebrow {
	margin-bottom: 14px;
}

.adz-team-hero-cap h3 {
	margin: 0 0 12px;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--adz-ink);
	line-height: 1.25;
}

.adz-team-hero-cap p {
	margin: 0;
	font-size: .95rem;
	color: var(--adz-muted);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.adz-team-hero {
		grid-template-columns: 1fr;
	}

	.adz-team-hero img {
		min-height: 240px;
		max-height: 320px;
	}

	.adz-team-hero-cap {
		padding: 24px 24px 28px;
	}

	.adz-team-hero-cap h3 {
		font-size: 1.3rem;
	}
}

/* Sứ Mệnh · Tầm Nhìn · Tinh Thần – thẻ tròn giữa, viền trên đổi màu khi hover */
.adz-about-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.adz-about-card {
	background: #fff;
	border: 1px solid var(--adz-border);
	border-top: 3px solid transparent;
	border-radius: var(--adz-radius);
	padding: 46px 30px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	box-shadow: var(--adz-shadow);
	transition: border-top-color .4s var(--adz-ease);
}

.adz-about-card:hover {
	border-top-color: var(--adz-gold);
}

.adz-about-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--adz-gold);
	box-shadow: 0 0 20px rgba(17, 17, 17, .15);
}

.adz-about-card h3 {
	font-size: 1.28rem;
	font-weight: 800;
	color: var(--adz-ink);
	margin: 0;
}

.adz-about-card p {
	color: var(--adz-muted);
	font-size: .95rem;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 849px) {
	.adz-about-grid {
		grid-template-columns: 1fr;
	}
}

/* Giá trị cốt lõi – danh sách dọc, số lớn viền rỗng bên trái */
.adz-value-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 900px;
	margin: 0 auto;
}

.adz-value-item {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 32px;
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .12);
	border-radius: var(--adz-radius);
	transition: border-color .3s ease;
}

.adz-value-item:hover {
	border-color: rgba(17, 17, 17, .32);
}

.adz-value-num {
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--adz-gold);
	flex: 0 0 auto;
}

.adz-value-content h4 {
	font-size: 1.18rem;
	font-weight: 800;
	color: var(--adz-ink);
	margin: 0 0 8px;
}

.adz-value-content p {
	color: var(--adz-muted);
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.adz-value-item {
		flex-direction: column;
		gap: 12px;
		padding: 24px;
	}
}

/* ============================================================
   TRANG "BẢNG GIÁ" – Trọn gói A→Z, 2 dòng bảng giá, ghi chú
   ============================================================ */
/* A → Z gồm những gì (6 bước đánh số) */
.adz-az-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) {
	.adz-az-grid {
		grid-template-columns: 1fr;
	}
}

.adz-az-step {
	padding: 28px;
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .12);
	border-radius: 16px;
}

.adz-az-num {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(17, 17, 17, .2), rgba(17, 17, 17, .05));
	border: 1px solid rgba(17, 17, 17, .3);
	color: var(--adz-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-family: var(--adz-font-d);
	margin-bottom: 16px;
}

.adz-az-step h4 {
	color: var(--adz-ink);
	font-size: 1.05rem;
	margin: 0 0 6px;
}

.adz-az-step p {
	color: var(--adz-muted);
	font-size: .88rem;
	line-height: 1.6;
	margin: 0;
}

/* Nhãn dòng sản phẩm (lane) */
.adz-lane-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 44px 0 0;
	font-family: var(--adz-font-d);
	font-weight: 700;
	color: var(--adz-ink);
	font-size: 1.35rem;
}

.adz-lane-ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	background: rgba(17, 17, 17, .12);
	color: var(--adz-gold);
	border: 1px solid rgba(17, 17, 17, .3);
}

.adz-lane-ic.green {
	background: rgba(17, 17, 17, .06);
	color: #4F4F4F;
	border-color: rgba(17, 17, 17, .22);
}

.adz-lane-sub {
	color: var(--adz-muted);
	font-size: .92rem;
	margin: 10px 0 0;
}

/* Lưới thẻ giá */
.adz-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 22px;
}

@media (max-width: 900px) {
	.adz-pricing-grid {
		grid-template-columns: 1fr;
	}
}

.adz-price-card {
	padding: 40px 24px;
	border-radius: 20px;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: all .3s ease;
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .15);
	border-top: 3px solid rgba(17, 17, 17, .25);
}

.adz-price-card:hover {
	border-color: var(--adz-gold);
}

.adz-price-card.feat {
	background: linear-gradient(135deg, rgba(17, 17, 17, .12), rgba(17, 17, 17, .04));
	border: 2px solid var(--adz-gold);
	box-shadow: 0 10px 30px rgba(17, 17, 17, .15);
}

.adz-price-card h3 {
	color: var(--adz-ink);
	font-size: 1.25rem;
	margin: 0 0 4px;
}

.adz-pc-clip {
	color: var(--adz-gold);
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: 24px;
}

.adz-pc-price {
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--adz-ink);
	margin-bottom: 4px;
	font-family: var(--adz-font-d);
	line-height: 1;
}

.adz-pc-price span {
	font-size: 1.05rem;
	color: var(--adz-muted);
	font-weight: 600;
}

.adz-pc-per {
	color: var(--adz-muted);
	font-size: .8rem;
	margin-bottom: 28px;
}

.adz-price-card ul {
	list-style: none;
	padding: 0;
	text-align: left;
	margin: 0 0 32px;
	line-height: 1.7;
	font-size: .9rem;
	flex-grow: 1;
}

.adz-price-card ul li {
	margin-bottom: 8px;
	color: var(--adz-ink-2);
}

.adz-price-card ul li i {
	color: var(--adz-gold);
	margin-right: 8px;
}

.adz-pc-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--adz-gold);
	color: #fff;
	font-size: .75rem;
	font-weight: 800;
	padding: 5px 16px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.adz-pc-btn {
	display: block;
	width: 100%;
	padding: 13px;
	border-radius: 30px;
	text-decoration: none;
	font-family: var(--adz-font-d);
	font-weight: 700;
	transition: all .25s var(--adz-ease);
}

.adz-pc-btn.outline {
	border: 1px solid var(--adz-border);
	color: var(--adz-ink) !important;
}

.adz-pc-btn.outline:hover {
	border-color: var(--adz-gold);
	color: var(--adz-gold) !important;
}

.adz-pc-btn.solid {
	background: var(--adz-gold);
	color: #fff !important;
}

.adz-pc-btn.solid:hover {
	background: var(--adz-gold-dark);
}

/* Ghi chú / add-on */
.adz-notes-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 44px;
}

@media (max-width: 900px) {
	.adz-notes-grid {
		grid-template-columns: 1fr;
	}
}

.adz-note-item {
	display: flex;
	gap: 16px;
	padding: 24px;
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .1);
	border-radius: 14px;
}

.adz-note-item i {
	color: var(--adz-gold);
	font-size: 1.3rem;
	margin-top: 2px;
}

.adz-note-item h4 {
	color: var(--adz-ink);
	font-size: 1rem;
	margin: 0 0 4px;
}

.adz-note-item p {
	color: var(--adz-muted);
	font-size: .87rem;
	line-height: 1.55;
	margin: 0;
}

.adz-price-disclaimer {
	text-align: center;
	color: var(--adz-muted);
	font-size: .82rem;
	margin-top: 32px;
}

/* ============================================================
   RESPONSIVE – MOBILE & TABLET (khớp adzio.vn)
   Đặt CUỐI FILE và xếp từ breakpoint RỘNG → HẸP để media query
   nhỏ hơn luôn ghi đè media query lớn hơn.
   Mốc: 1024 (tablet ngang) · 849 (Flatsome medium – hiện menu mobile)
        768 (tablet dọc / mobile lớn) · 640 (form) · 480 · 360
   ============================================================ */

/* ---------- Chữ co giãn theo màn hình (mọi breakpoint) ---------- */
/* Trước đây hero title cố định 4.5rem + dòng 2 cố định 45px => trên
   mobile dòng 2 cao hơn line-box của dòng 1 nên chữ ĐÈ LÊN NHAU. */
.adz-hero .adz-hero-title {
	font-size: clamp(1.8rem, 5.6vw, 4.5rem);
	line-height: 1.1;
}

.adz-hero .adz-hero-l2 {
	font-size: min(.6em, 45px);
	line-height: 1.3;
}

.adz-section-title {
	font-size: clamp(1.7rem, 4.2vw, 2rem);
}

.adz-lead {
	font-size: clamp(.96rem, 2.6vw, 1.05rem);
}

/* ============ TABLET NGANG (≤1024px) ============ */
@media (max-width: 1024px) {

	/* Bỏ min-height 90vh: trên tablet nó tạo khoảng trắng chết dưới stats */
	.adz-hero {
		min-height: 0;
	}

	/* Lưới thẻ 4/3 cột -> 2 cột (4 cột ở 900px bị bóp còn ~185px/thẻ) */
	.adzio-grid,
	.adzio-grid.cols-3 {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}

	/* Stats: chuyển sang grid 4 cột đều nhau, bỏ max-width 220px của flex.
	   width:100% là bắt buộc – thẻ vẫn còn flex:1 1 150px nên nếu để width:auto
	   nó co lại theo nội dung thay vì lấp đủ ô grid. */
	.adz-stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
	}

	.adzio-stat {
		max-width: none;
		width: 100%;
		min-width: 0;
		padding: 20px 14px;
	}

	.adzio-stat-num {
		font-size: 1.85rem;
	}

	.adzio-stat-label {
		font-size: .86rem;
	}
}

/* ============ TABLET DỌC / MOBILE LỚN (≤768px) ============ */
@media (max-width: 768px) {

	/* Mọi lưới thẻ về 1 cột */
	.adzio-grid,
	.adzio-grid.cols-3,
	.adzio-grid.cols-2 {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.adzio-card {
		padding: 22px 20px;
	}

	.adzio-card h3 {
		font-size: 1.1rem;
	}

	/* Stats 2×2 (giống adzio.vn) thay vì 4 thẻ xếp dọc */
	.adz-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-top: 28px;
	}

	.adzio-stat {
		padding: 18px 12px;
		border-radius: 16px;
	}

	.adzio-stat-num {
		font-size: 1.8rem;
	}

	/* Eyebrow: giảm cỡ + letter-spacing để không xuống 3 dòng */
	.adz-eyebrow,
	.adzio-eyebrow {
		font-size: 11px;
		letter-spacing: .07em;
		padding: 6px 13px;
		margin-bottom: 14px;
		line-height: 1.5;
	}

	/* Nút hero xếp dọc, rộng bằng nhau */
	.adz-hero-actions {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.adz-hero-actions .button {
		width: 100%;
		max-width: 320px;
		margin: 0;
	}

	.adz-hero p {
		font-size: 1rem;
	}

	/* Timeline quy trình: số nhỏ hơn + đường nối căn lại giữa số */
	.adz-timeline::before {
		left: 34px;
	}

	.adz-tl-item {
		gap: 18px;
		margin-bottom: 20px;
	}

	.adz-tl-num {
		flex: 0 0 68px;
		width: 68px;
		height: 68px;
		font-size: 1.5rem;
		border-radius: 16px;
	}

	.adz-tl-card {
		padding: 18px 20px;
	}

	.adz-tl-card h3 {
		font-size: 1.12rem;
	}

	/* FAQ */
	.adzio-faq-item summary {
		font-size: .98rem;
		padding: 14px 40px 14px 16px;
	}

	.adzio-faq-a {
		padding: 0 16px 16px;
		font-size: .94rem;
	}

	/* CTA vàng / CTA cuối bài dịch vụ */
	.adz-cta {
		padding: 34px 20px;
		border-radius: 22px;
	}

	.adz-cta h2 {
		font-size: 1.6rem;
	}

	.adzio-svc-cta {
		padding: 26px 20px;
	}

	/* Marquee đối tác: badge gọn hơn, chạy nhanh hơn cho đỡ trống */
	.adz-marquee-track {
		gap: 1.4rem;
		animation-duration: 26s;
	}

	.adz-badge {
		padding: 8px 14px;
		font-size: .88rem;
		margin: 4px;
	}

	/* Hero bài dịch vụ (single) */
	.adzio-svc-hero {
		padding: 44px 0 32px;
	}

	.adzio-svc-hero h1 {
		font-size: clamp(1.6rem, 5.4vw, 2.5rem);
	}

	.adzio-h2 {
		font-size: 1.4rem;
	}
}

/* ============ FORM LIÊN HỆ (≤640px) ============ */
/* .adz-f-grid trước đây luôn 2 cột => ô "Số điện thoại"/"Email" bị bóp,
   nhãn xuống 2 dòng và placeholder bị cắt trên mobile. */
@media (max-width: 640px) {
	.adz-contact-form .adz-f-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* Input trên thiết bị cảm ứng: 16px để iOS/Safari không tự zoom khi focus,
   padding cao hơn cho đủ vùng bấm ~44px. */
@media (max-width: 768px),
(pointer: coarse) {

	.adz-contact-form input.wpcf7-form-control,
	.adz-contact-form textarea.wpcf7-form-control {
		font-size: 16px;
	}

	.adz-contact-form input.wpcf7-form-control {
		height: 52px;
		line-height: 52px;
	}

	.adz-contact-form input.wpcf7-submit {
		height: 54px;
		line-height: 54px;
		font-size: 1rem;
	}
}

/* ============ MOBILE (≤480px) ============ */
@media (max-width: 480px) {

	.adz-contact-left,
	.adz-contact-right {
		padding: 26px 18px;
	}

	.adz-contact-list li {
		gap: 12px;
		margin-bottom: 14px;
	}

	.adz-timeline::before {
		left: 28px;
	}

	.adz-tl-item {
		gap: 14px;
	}

	.adz-tl-num {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
		font-size: 1.25rem;
		border-radius: 14px;
	}

	.adzio-stat-num {
		font-size: 1.55rem;
	}

	.adzio-stat-label {
		font-size: .78rem;
	}

	.adz-round img {
		border-radius: 14px;
	}
}

/* ============ MOBILE RẤT NHỎ (≤360px) ============ */
@media (max-width: 360px) {
	.adz-stats {
		grid-template-columns: 1fr;
	}

	.adzio-stat-num {
		font-size: 1.7rem;
	}

	.adzio-stat-label {
		font-size: .82rem;
	}
}

/* ============================================================
   HEADER MOBILE (≤849px) – logo trái · nút "Nhận tư vấn" + hamburger phải
   (bố cục giống adzio.vn; thứ tự cột do Flatsome class medium-logo-left lo,
   xem filter theme_mod trong functions.php)
   ============================================================ */
@media (max-width: 849px) {

	/* Nút CTA trong mobile-nav: .header-nav không bao mobile-nav nên phải khai báo riêng */
	.mobile-nav .nav-cta>a {
		display: inline-block;
		white-space: nowrap;
		/* không cho "Nhận tư vấn" xuống dòng */
		background: var(--adz-gold);
		color: #fff !important;
		border-radius: 999px;
		padding: 9px 18px !important;
		font-family: var(--adz-font-d);
		font-weight: 600;
		font-size: 1rem;
		text-transform: none !important;
		letter-spacing: 0;
		line-height: 1.35;
	}

	/* mobile-nav là flex; cho phép item CTA co lại thay vì bóp chữ */
	.mobile-nav.nav-right>li.nav-cta {
		flex: 0 0 auto;
	}

	.mobile-nav .nav-cta>a:hover {
		background: var(--adz-gold-dark);
	}

	.mobile-nav.nav-right>li {
		margin: 0 0 0 10px;
	}

	.mobile-nav.nav-right>li:first-child {
		margin-left: 0;
	}

	/* Hamburger: bỏ nền vàng đặc, dùng icon trần cho nhẹ như mẫu.
	   Màu lấy theo token `--adz-head-fg` chứ KHÔNG phải `--adz-ink`: bản đầu
	   ghim đen ở đây kèm `!important`, nên trên trang chọn header tông tối thì
	   nút chìm hẳn vào nền (#0D0D0D trên #171921) — mà rule đảo màu viết riêng
	   cho tông tối lại không có `!important` nên thua, sửa mãi không thấy đổi. */
	.mobile-nav .nav-icon .button.icon {
		background: transparent !important;
		border-color: transparent !important;
		box-shadow: none !important;
		color: var(--adz-head-fg) !important;
		width: 40px;
		height: 40px;
		margin: 0;
	}

	.mobile-nav .nav-icon .button.icon i {
		font-size: 20px;
	}

	#logo img,
	#logo .header-logo {
		max-height: 38px;
		width: auto;
	}

	.header-main {
		min-height: 64px;
	}
}

/* ============================================================
   DRAWER MENU MOBILE – panel tối TRÀN MÀN HÌNH (mẫu clay.global)
   Bố cục từ trên xuống:
     hàng trên  = logo · nút "Nhận tư vấn" (viên trắng) · X
     danh sách  = chữ trắng CỠ LỚN, căn TRÁI, dòng sát nhau
     chân panel = email (gạch chân) + hotline, rồi hàng icon mạng xã hội
   Hàng trên chèn bằng hook flatsome_before_sidebar_menu, chân panel bằng
   flatsome_after_sidebar_menu_elements (xem functions.php mục 1c/1c1).
   Flatsome mặc định là off-canvas trượt ngang 260px ⇒ ghi đè bên dưới.
   ============================================================ */
/* Nền mờ: panel đã phủ kín màn hình nên lớp mờ chỉ còn lo phần safe-area.
   (class 'main-menu-overlay' từ data-bg của nút hamburger, Flatsome chỉ gắn
   nó vào .mfp-bg — .mfp-wrap/.mfp-content thì mang class off-canvas-left.) */
.off-canvas.main-menu-overlay.mfp-bg {
	background: var(--adz-ink);
}

/* Khung: bỏ panel trượt ngang 260px, đổi thành lớp phủ kín màn hình */
.off-canvas-left .mfp-content {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: none;
	background: transparent !important;
	box-shadow: none;
	overflow: hidden;
	transform: translateY(-10px);
	transition: opacity .25s var(--adz-ease), transform .25s var(--adz-ease);
}

.off-canvas-left.mfp-ready .mfp-content {
	transform: translateY(0);
}

/* Panel tối, cao hết màn (dvh để thanh địa chỉ trình duyệt không cắt mất chân) */
.off-canvas-left #main-menu.mobile-sidebar {
	background: var(--adz-ink);
	border-radius: 0;
	box-shadow: none;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Hàng trên panel: logo · (X do Magnific chèn, xem dưới).
   Không có nút "Nhận tư vấn" — nút đó đã ở header rồi. */
.adz-mmenu-top {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding: 14px 60px 10px 16px;
	/* chừa 60px bên phải cho nút X */
	min-height: 62px;
}

.adz-mmenu-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.adz-mmenu-logo img {
	height: 68px;
	width: auto;
	border-radius: 0;
	display: block;
}

/* Nút đóng: X trắng nằm trong hàng trên của panel */
.off-canvas-left .mfp-close {
	top: 12px;
	right: 10px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #fff !important;
	font-size: 32px;
	opacity: 1;
	mix-blend-mode: normal;
}

/* Vùng cuộn: danh sách menu + chân panel. Chỉ phần này cuộn, hàng trên đứng yên */
#main-menu .sidebar-menu {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 26px 26px calc(26px + env(safe-area-inset-bottom, 0px));
}

/* Danh sách menu: chữ trắng CỠ LỚN, căn trái, không kẻ vạch */
#main-menu .nav-sidebar.nav-vertical>li {
	border: 0;
}

.mobile-sidebar .nav-sidebar.nav-uppercase>li>a {
	text-transform: none;
	letter-spacing: 0;
}

#main-menu .nav-sidebar>li>a {
	display: block;
	text-align: left;
	justify-content: flex-start;
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: clamp(1.75rem, 8.5vw, 2.2rem);
	line-height: 1.24;
	letter-spacing: -.02em;
	padding: 7px 0;
	color: #fff !important;
}

#main-menu .nav-sidebar>li>a:hover {
	color: #fff !important;
}

/* Mục đang xem: đã 800 sẵn nên đánh dấu bằng độ mờ của các mục còn lại */
#main-menu .nav-sidebar>li:not(.current-menu-item):not(.current-menu-parent)>a {
	color: rgba(255, 255, 255, .92) !important;
}

/* Nút mở submenu: mẫu đặt mũi chevron NGAY SAU chữ (cùng hàng, căn trái),
   không phải dính lề phải như mặc định Flatsome */
#main-menu .nav-sidebar.nav-vertical>li.menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

/* flex: 0 1 auto để thẻ <a> không giãn hết hàng, chevron mới nằm sát chữ */
#main-menu .nav-sidebar.nav-vertical>li.menu-item-has-children>a {
	padding-right: 4px;
	flex: 0 1 auto;
}

#main-menu .nav-sidebar.nav-vertical>li .toggle {
	position: static;
	top: auto;
	right: auto;
	width: 26px;
	height: auto;
	color: #fff;
	opacity: .8;
}

#main-menu .nav-sidebar.nav-vertical>li .toggle i {
	font-size: 1.4em;
}

/* flex-basis 100% sẽ bỏ qua margin ⇒ dùng width calc để submenu thụt lề trái */
#main-menu .nav-sidebar.nav-vertical>li>ul {
	flex: 0 0 auto;
	width: 100%;
}

/* Bỏ dải nền xám của Flatsome ở mục đang mở / hover */
#main-menu .nav-sidebar.nav-vertical>li.menu-item.active,
#main-menu .nav-sidebar.nav-vertical>li.menu-item:hover {
	background-color: transparent;
}

/* Submenu "Dịch vụ": thụt lề trái, chữ trắng nhỏ hơn, không nền */
#main-menu .nav-sidebar>li>ul.children,
#main-menu .nav-sidebar>li>ul.sub-menu {
	background: transparent;
	margin: 2px 0 8px;
	padding: 2px 0 2px 14px;
	border-left: 1px solid rgba(255, 255, 255, .18);
}

#main-menu .nav-sidebar li li>a {
	text-align: left;
	justify-content: flex-start;
	padding: 8px 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .82) !important;
}

/* CTA trong danh sách bị trùng với nút ở hàng trên ⇒ ẩn */
#main-menu .nav-sidebar>li.nav-cta {
	display: none;
}

/* ---- Chân panel: email · hotline · icon mạng xã hội ----
   margin-top:auto đẩy xuống đáy khi menu ngắn; khi menu dài thì nó cuộn theo. */
.adz-mmenu-foot {
	margin-top: auto;
	padding-top: 34px;
}

.adz-mmenu-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.adz-mmenu-contact a {
	font-family: var(--adz-font-d);
	font-weight: 600;
	font-size: 1.05rem;
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Dòng thứ hai trở đi (hotline) không gạch chân, giống mẫu */
.adz-mmenu-contact a+a {
	text-decoration: none;
}

.adz-mmenu-social {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 26px;
}

.adz-mmenu-social a {
	color: #fff !important;
	font-size: 1.25rem;
	line-height: 1;
}

.adz-mmenu-social a:hover {
	opacity: .7;
}

/* Header phía sau panel: ẩn logo/CTA/hamburger để không lộ ra dưới lớp mờ
   (Flatsome gắn class has-off-canvas vào <html> khi mở drawer) */
.has-off-canvas .header-main #logo,
.has-off-canvas .header-main .nav-cta,
.has-off-canvas .header-main .nav-icon {
	visibility: hidden;
}

/* ============================================================
   MỤC LỤC TỰ ĐỘNG (.adz-toc – do adzio.js sinh trong .adz-article-body)
   ============================================================ */
.adz-toc {
	background: var(--adz-gold-soft);
	border: 1px solid rgba(17, 17, 17, .18);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 28px;
}

.adz-toc-h {
	font-family: var(--adz-font-d);
	font-weight: 700;
	color: var(--adz-ink);
	margin-bottom: 10px;
	font-size: .98rem;
}

.adz-toc-h i {
	color: var(--adz-gold);
	margin-right: 8px;
}

.adz-toc ol {
	margin: 0;
	padding-left: 20px;
	color: var(--adz-muted);
}

.adz-toc li {
	margin-bottom: 6px;
}

/* Ghi đè .adz-article-body a (vàng + gạch chân + 600) để mục lục đọc nhẹ hơn */
.adz-article-body .adz-toc a,
.adz-toc a {
	color: var(--adz-ink);
	text-decoration: none;
	font-weight: 500;
}

.adz-article-body .adz-toc a:hover,
.adz-toc a:hover {
	color: var(--adz-gold);
	text-decoration: underline;
}

/* Chừa chỗ khi nhảy tới heading qua link mục lục */
.adz-article-body h2[id] {
	scroll-margin-top: 90px;
}

@media (max-width: 640px) {
	.adz-toc {
		padding: 14px 16px;
		margin-bottom: 22px;
	}

	.adz-toc ol {
		padding-left: 18px;
		font-size: .93rem;
	}
}

/* ============================================================
   TRANG CÔNG CỤ (tool page): hero gọn + thẻ chữ dùng chung với bài viết
   ============================================================ */
.adz-tool-hero .adz-article-wrap {
	margin-top: 0;
}

.adz-tool-crumb {
	font-size: .85rem;
	margin: 0 0 12px;
	color: var(--adz-muted);
}

.adz-tool-crumb a {
	color: var(--adz-muted);
	text-decoration: none;
}

.adz-tool-crumb a:hover {
	color: var(--adz-gold);
}

.adz-tool-title {
	font-size: clamp(1.5rem, 4.4vw, 2rem);
	line-height: 1.25;
	text-align: left;
	margin: 0 0 12px;
	font-weight: 800;
	color: var(--adz-ink);
}

.adz-tool-lead {
	color: var(--adz-muted);
	max-width: 720px;
	margin: 0;
}

/* Box công thức trong nội dung */
.adz-formula {
	background: var(--adz-gold-soft);
	border-left: 3px solid var(--adz-gold);
	border-radius: 8px;
	padding: 14px 18px;
	font-size: .95rem;
	line-height: 1.9;
	color: var(--adz-ink);
}

/* ============================================================
   TRANG "ĐÀO TẠO & CHUYỂN GIAO" (/daotao)
   Bám theo adzio.vn/daotao.html: module đánh số + tag, lộ trình
   90 ngày (timeline so le 2 bên), thẻ giá trị đầu tư có so sánh.
   ============================================================ */

/* --- Module chuyển giao: dùng lại .adz-az-grid/.adz-az-step, thêm h3 + tag --- */
.adz-az-step h3 {
	color: var(--adz-ink);
	font-size: 1.14rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.adz-mod-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.adz-mod-tag {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 600;
	line-height: 1.5;
	background: rgba(17, 17, 17, .12);
	color: var(--adz-gold-dark);
	border: 1px solid rgba(17, 17, 17, .22);
}

/* --- LỘ TRÌNH 90 NGÀY: timeline dọc giữa, nội dung so le 2 bên --- */
.adz-roadmap {
	position: relative;
	max-width: 980px;
	margin: 34px auto 0;
	padding: 6px 0;
}

.adz-roadmap::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, transparent, var(--adz-gold), var(--adz-ink), var(--adz-gold), transparent);
}

.adz-rm-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 48px;
	margin-bottom: 44px;
}

.adz-rm-item:last-child {
	margin-bottom: 0;
}

.adz-rm-l,
.adz-rm-r {
	flex: 1 1 0;
	min-width: 0;
}

.adz-rm-l {
	text-align: right;
}

.adz-rm-dot {
	position: absolute;
	left: 50%;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--adz-gold);
	transform: translateX(-50%);
	z-index: 2;
	box-shadow: 0 0 0 4px rgba(17, 17, 17, .15);
}

.adz-rm-item.alt .adz-rm-dot {
	border-color: var(--adz-ink);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .10);
}

.adz-rm-phase {
	display: inline-block;
	padding: 5px 15px;
	border-radius: 999px;
	margin-bottom: 10px;
	font-family: var(--adz-font-d);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: rgba(17, 17, 17, .14);
	color: var(--adz-gold-dark);
	border: 1px solid rgba(17, 17, 17, .32);
}

.adz-rm-item.alt .adz-rm-phase {
	background: rgba(0, 0, 0, .06);
	color: var(--adz-ink);
	border-color: rgba(0, 0, 0, .16);
}

.adz-rm-title {
	font-family: var(--adz-font-d);
	font-size: 1.22rem;
	font-weight: 700;
	color: var(--adz-ink);
	margin: 0 0 6px;
}

.adz-rm-desc {
	color: var(--adz-muted);
	font-size: .92rem;
	line-height: 1.7;
	margin: 0;
}

.adz-rm-week {
	font-size: .88rem;
	color: var(--adz-muted);
	font-weight: 600;
}

@media (max-width: 768px) {

	/* Đường nối về sát lề trái, mọi nội dung căn trái, "Tuần …" luôn lên trên */
	.adz-roadmap::before {
		left: 10px;
	}

	.adz-rm-item {
		flex-direction: column;
		gap: 6px;
		padding-left: 38px;
		margin-bottom: 30px;
	}

	.adz-rm-l {
		text-align: left;
	}

	.adz-rm-dot {
		left: 10px;
	}

	.adz-rm-item:not(.alt) .adz-rm-l {
		order: 2;
	}

	.adz-rm-item:not(.alt) .adz-rm-r {
		order: 1;
	}

	.adz-rm-title {
		font-size: 1.1rem;
	}
}

/* --- GIÁ TRỊ ĐẦU TƯ: thẻ giá lớn + so sánh + 3 lợi ích --- */
.adz-invest {
	max-width: 900px;
	margin: 34px auto 0;
}

.adz-invest-card {
	background: linear-gradient(135deg, rgba(17, 17, 17, .10), rgba(17, 17, 17, .04));
	border: 2px solid rgba(17, 17, 17, .28);
	border-radius: 24px;
	padding: 54px 44px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.adz-invest-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--adz-gold), transparent);
}

.adz-invest-price {
	font-family: var(--adz-font-d);
	font-weight: 800;
	line-height: 1;
	font-size: clamp(2.8rem, 8vw, 4.5rem);
	color: var(--adz-gold);
	margin-bottom: 8px;
}

.adz-invest-unit {
	color: var(--adz-gold-dark);
	font-weight: 600;
	font-size: 1.08rem;
	margin-bottom: 20px;
}

.adz-invest-note {
	color: var(--adz-muted);
	font-size: .95rem;
	max-width: 600px;
	margin: 0 auto;
}

.adz-invest-compare {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
	margin-top: 32px;
	text-align: left;
}

.adz-invest-col {
	padding: 26px;
	border-radius: 16px;
}

.adz-invest-col.old {
	background: rgba(0, 0, 0, .035);
	border: 1px solid rgba(0, 0, 0, .10);
}

.adz-invest-col.new {
	background: rgba(17, 17, 17, .10);
	border: 1px solid rgba(17, 17, 17, .28);
}

.adz-invest-col h4 {
	font-family: var(--adz-font-d);
	font-size: .84rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 12px;
	color: var(--adz-muted);
}

.adz-invest-col.new h4 {
	color: var(--adz-gold-dark);
}

.adz-big-num {
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 2.05rem;
	color: var(--adz-ink);
	margin-bottom: 6px;
	line-height: 1.15;
}

.adz-big-num span {
	font-size: .78rem;
	color: var(--adz-muted);
	font-weight: 400;
}

.adz-invest-col p {
	color: var(--adz-muted);
	font-size: .86rem;
	line-height: 1.6;
	margin: 0;
}

.adz-invest-vs {
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--adz-gold);
	text-align: center;
}

.adz-invest-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 32px;
}

.adz-invest-benefit {
	text-align: center;
	padding: 16px 12px;
}

.adz-invest-benefit i {
	display: block;
	font-size: 1.85rem;
	color: var(--adz-gold);
	margin-bottom: 10px;
}

.adz-invest-benefit h4 {
	color: var(--adz-ink);
	font-size: .98rem;
	font-weight: 700;
	margin: 0 0 4px;
}

.adz-invest-benefit p {
	color: var(--adz-muted);
	font-size: .82rem;
	margin: 0;
}

@media (max-width: 1024px) {
	.adz-invest-compare {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.adz-invest-vs {
		display: none;
	}

	.adz-invest-benefits {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

@media (max-width: 768px) {
	.adz-invest-card {
		padding: 34px 20px;
		border-radius: 20px;
	}

	.adz-invest-unit {
		font-size: .98rem;
	}

	.adz-big-num {
		font-size: 1.75rem;
	}
}

/* Nhãn "Đối tác đã tin tưởng ALPHA MKT" phía trên marquee */
.adz-partner-lead {
	text-align: center;
	color: var(--adz-muted);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 22px;
}

/* ============================================================
   TRANG "QUAY DỰNG MEDIA" (/quaydung)
   Bám theo adzio.vn/quaydung.html: 4 gói giải pháp theo đối
   tượng (thẻ lớn 2 cột), dàn thiết bị, bảng báo giá 4 gói.
   ============================================================ */

/* --- Gói giải pháp theo đối tượng --- */
.adz-pack-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	margin-top: 26px;
}

@media (max-width: 900px) {
	.adz-pack-grid {
		grid-template-columns: 1fr;
	}
}

.adz-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: var(--adz-radius);
	padding: 34px 30px 30px;
	box-shadow: var(--adz-shadow);
	transition: border-color .4s;
}

.adz-pack:hover {
	border-color: rgba(17, 17, 17, .28);
}

.adz-pack-target {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 18px;
	font-family: var(--adz-font-d);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .05);
	color: var(--adz-ink);
	border: 1px solid rgba(0, 0, 0, .12);
}

.adz-pack-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 16px;
	margin-bottom: 16px;
	background: var(--adz-gold-soft);
	color: var(--adz-gold);
	font-size: 24px;
}

.adz-pack-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--adz-ink);
	margin: 0 0 10px;
}

.adz-pack-desc {
	color: var(--adz-muted);
	font-size: .96rem;
	line-height: 1.7;
	margin: 0 0 20px;
}

.adz-pack-features {
	list-style: none;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--adz-border);
}

.adz-pack-features li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 12px;
	color: var(--adz-ink-2);
	font-size: .92rem;
	line-height: 1.6;
}

.adz-pack-features li:last-child {
	margin-bottom: 0;
}

.adz-pack-features li i {
	color: var(--adz-gold);
	font-size: .95rem;
	margin-top: 4px;
	flex-shrink: 0;
}

/* --- Bảng báo giá 4 gói: thêm biến thể 4 cột cho .adz-pricing-grid --- */
.adz-pricing-grid.cols-4 {
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 1200px) {
	.adz-pricing-grid.cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.adz-pricing-grid.cols-4 {
		grid-template-columns: 1fr;
	}
}

/* Badge phụ (không phải gói bán chạy nhất) – tông navy để phân biệt */
.adz-pc-badge.alt {
	background: var(--adz-ink);
	color: #fff;
}

/* Đơn vị giá của gói nhấn – tông vàng thay vì xám (chỉ trong bảng 4 gói) */
.adz-pricing-grid.cols-4 .adz-price-card.feat .adz-pc-price span {
	color: var(--adz-gold);
}

/* Thẻ giá có badge cần chừa chỗ ở đỉnh cho nhãn */
.adz-price-card.has-badge {
	margin-top: 12px;
}

/* Gói media không có dòng "đơn giá / clip" → giá tự giãn cách với danh sách */
.adz-pricing-grid.cols-4 .adz-pc-price {
	margin-bottom: 28px;
}

.adz-pricing-grid.cols-4 .adz-price-card {
	padding: 40px 20px;
}

.adz-pricing-grid.cols-4 .adz-pc-clip {
	min-height: 40px;
}

/* ============================================================
   STICKY HEADER – thanh dính khi scroll (giống adzio.vn)
   Bật bằng theme_mod: header_sticky=1, sticky_style=shrink,
   header_height_sticky=64. Flatsome gắn class .stuck vào
   .header-wrapper và tự chèn placeholder nên nội dung KHÔNG bị giật.
   ============================================================ */
.header-wrapper.stuck {
	z-index: 999;
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	border-bottom: 1px solid var(--adz-border);
	/* Clay phẳng tuyệt đối: bỏ đổ bóng, chỉ còn một đường chỉ phân tách. */
	box-shadow: none;
	/* Trượt ẩn/hiện theo chiều cuộn — xem khối "HEADER TỰ ẨN" ngay dưới. Đặt
	   translateY(0) tường minh (không để `none`) để trình duyệt có điểm đầu mà
	   nội suy, tránh lần ẩn đầu tiên bị nhảy cóc không có chuyển động. */
	transform: translateY(0);
	transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s;
	visibility: visible;
}

/* Nền kính mờ: Flatsome vẽ nền header ở lớp .header-bg-color (rgba trắng .9).
   Đục vừa đủ (.72) để backdrop-filter ở trên CÓ gì để làm mờ — để .96 như cũ
   thì lớp blur coi như vô hình, chỉ tốn GPU. */
.header-wrapper.stuck .header-bg-color {
	background-color: rgba(255, 255, 255, .72) !important;
}

/* ---------- HEADER TỰ ẨN khi cuộn xuống (mẫu clay.global) ----------
   js/adzio.js (mục 7) gắn `.adz-head-away` lên #header khi người xem cuộn
   xuống, gỡ ra khi cuộn ngược lên.

   Ba chốt:
     1. CHỈ trượt khi đã `.stuck`. Lúc chưa dính, header nằm trong luồng trang —
        kéo transform lên là nó đè lên nội dung chứ không ẩn đi đâu cả.
     2. KHÔNG dùng theme_mod `sticky_hide_on_scroll` của Flatsome: cái đó gỡ hẳn
        class `.stuck`, header biến mất TỨC THÌ (không trượt) và mỗi lần hiện
        lại bị chạy kèm animation `stuckFadeIn` của theme cha.
     3. `visibility` chỉ tắt SAU khi trượt xong (delay .38s) để không cắt ngang
        chuyển động; tắt là để bàn phím / trình đọc màn hình không lạc vào thanh
        đang nằm ngoài màn hình. */
#header.adz-head-away .header-wrapper.stuck {
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .38s;
}

/* Tôn trọng "giảm chuyển động": vẫn ẩn/hiện (đó là hành vi, không phải trang
   trí) nhưng bỏ phần trượt. */
@media (prefers-reduced-motion: reduce) {

	.header-wrapper.stuck,
	#header.adz-head-away .header-wrapper.stuck {
		transition: none;
	}
}

/* Cho chiều cao 64px của Flatsome có hiệu lực (min-height 74px ở trên chặn lại) */
.header-wrapper.stuck .header-main {
	min-height: 0;
}

/* Flatsome ép #logo img{max-height:64px!important} khi stuck -> thu nhỏ lại */
.header-wrapper.stuck #logo img,
.header-wrapper.stuck #logo .header-logo {
	max-height: 34px !important;
}

/* Nút CTA gọn hơn trên thanh đã dính.
   Flatsome đặt .stuck .header-main .nav > li > a{line-height:50px} để căn giữa
   menu chữ — nhưng với nút pill thì 50px làm nút cao gần bằng cả thanh, phải
   trả line-height về bình thường. */
.header-wrapper.stuck .header-nav .nav-cta>a {
	padding: 7px 20px !important;
	font-size: 1rem;
	line-height: 1.45;
}

.header-wrapper.stuck .mobile-nav .nav-cta>a {
	padding: 7px 16px !important;
	font-size: 1rem;
	line-height: 1.4;
}

@media (max-width: 849px) {

	.header-wrapper.stuck #logo img,
	.header-wrapper.stuck #logo .header-logo {
		max-height: 30px !important;
	}
}

/* Anchor (#modules, #lien-he, mục lục…) chừa chỗ cho thanh dính, tránh bị che */
html {
	scroll-padding-top: 88px;
}

@media (max-width: 849px) {
	html {
		scroll-padding-top: 76px;
	}
}

/* In ấn: không giữ header dính */
@media print {
	.header-wrapper.stuck {
		position: static !important;
		box-shadow: none !important;
	}
}

/* ============================================================
   TRANG "DỊCH VỤ MARKETING ĐA KÊNH" (/dich-vu-marketing-da-kenh-bat-dong-san)
   Bám theo adzio.vn/dich-vu-marketing-da-kenh-bat-dong-san.html:
   tiêu đề section tô vàng một phần + thẻ "Trọn gói gồm những gì"
   (checklist dấu ✓ trong 1 thẻ trắng, 1 cột như mẫu).
   ============================================================ */
.adz-section-title .adz-hl {
	color: var(--adz-hl);
}

.adz-incl-card {
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: 18px;
	padding: 32px 36px;
	box-shadow: var(--adz-shadow);
}

.adz-incl-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.adz-incl-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--adz-ink-2);
	font-size: 1rem;
	line-height: 1.55;
}

.adz-incl-item i {
	flex: 0 0 auto;
	margin-top: 4px;
	font-size: .82rem;
	color: var(--adz-gold);
}

@media (max-width: 768px) {
	.adz-incl-card {
		padding: 24px 20px;
		border-radius: 16px;
	}

	.adz-incl-grid {
		gap: 12px;
	}

	.adz-incl-item {
		font-size: .94rem;
	}
}

/* ============================================================
   TRANG "KHÁCH HÀNG" (/khach-hang)
   Bố cục theo mẫu clay.global/clients: tiêu đề lớn căn trái +
   dải ảnh so le tràn viền + lưới tên khách hàng 3 cột + carousel
   trích dẫn. Màu/typo giữ nguyên của ALPHA MKT.
   ============================================================ */

/* --- Tiêu đề trang --- */
.adz-cl-title {
	font-size: clamp(2.4rem, 5.6vw, 4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--adz-ink);
	margin: 0 0 28px;
}

.adz-cl-intro {
	max-width: 460px;
	color: var(--adz-ink);
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0;
}

/* --- Dải ảnh FULL WIDTH, tự chạy ngang — COMPONENT DÙNG CHUNG ---
   Dùng bởi trang Khách Hàng ([adzio_client_strip]) VÀ khối trụ sở của trang Về
   Chúng Tôi ([adzio_ab_place]); markup dựng ở adzio_render_photo_strip() trong
   inc/parts.php. Sửa ở đây là đổi cả hai trang.
   Track chứa bộ ảnh LẶP 2 LẦN rồi trượt tới -50% => nối vòng liền mạch.
   Dùng margin-right (KHÔNG dùng gap) vì -50% chỉ khớp tuyệt đối khi
   khoảng cách nằm trong chiều rộng của chính mỗi thẻ. */
#wrapper:has(.adz-cl-strip-outer) {
	overflow-x: clip;
}

/* clip (không phải hidden) để không phá position:sticky */
.adz-cl-strip-outer {
	margin-top: 54px;
	padding-bottom: 40px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
}

.adz-cl-strip {
	/* align-items: center — mẫu canh mọi ảnh về chung một trục dọc, ảnh cao thấp
	   khác nhau thì nhô lên/thụt xuống đều hai đầu. */
	display: flex;
	align-items: center;
	width: max-content;
	/* --adz-strip-dur do adzio_render_photo_strip() tính theo số ảnh để tốc độ
	   trôi không đổi khi thêm/bớt ảnh; breakpoint nhân hệ số vì thẻ hẹp lại. */
	animation: adz-slide var(--adz-strip-dur, 46s) linear infinite;
}

/* CHỈ đặt bề ngang. Chiều cao KHÔNG ràng buộc gì — không aspect-ratio, không
   max-height, không object-fit — nên ảnh luôn hiện đúng tỉ lệ gốc của nó, thay
   ảnh nào vào cũng không bị cắt hay méo. Trần 560px phải khớp ADZIO_STRIP_W
   trong inc/parts.php để thời lượng marquee vẫn đúng tốc độ. */
.adz-cl-shot {
	margin: 0 80px 0 0;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 4px;
	background: var(--adz-gold-soft);
	width: clamp(240px, 28vw, 560px);
}

.adz-cl-shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Lệch dọc so le. Class .lift-0..4 do PHP gán theo chỉ số TRONG MỘT BỘ ảnh
   (không dùng :nth-child theo track): nhờ vậy ảnh đầu của bộ nhân bản có đúng
   độ cao của ảnh đầu bộ gốc ⇒ điểm nối vòng lặp không bị giật, với số ảnh bất kỳ. */
/* .adz-cl-shot.lift-0 { margin-top: 56px; }
.adz-cl-shot.lift-1 { margin-top: 0; }
.adz-cl-shot.lift-2 { margin-top: 96px; }
.adz-cl-shot.lift-3 { margin-top: 24px; }
.adz-cl-shot.lift-4 { margin-top: 72px; } */

/* --- Lưới khách hàng 3 cột --- */
.adz-cl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 46px 40px;
}

.adz-cl-item h3 {
	font-family: var(--adz-font-d);
	font-size: 2rem;
	font-weight: 700;
	color: var(--adz-ink);
	margin: 0 0 12px;
	letter-spacing: -.01em;
}

.adz-cl-item p {
	color: var(--adz-muted);
	font-size: 1.125rem;
	line-height: 1.6;
	margin: 0;
	max-width: 30ch;
}

/* --- Carousel trích dẫn --- */
.adz-quotes {
	position: relative;
	padding-top: 8px;
}

.adz-quotes-nav {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 14px;
}

.adz-q-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: none;
	color: var(--adz-ink);
	font-size: 1.05rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.adz-q-btn:hover {
	background: var(--adz-gold-soft);
	border-color: var(--adz-border);
}

.adz-q-btn:disabled {
	color: var(--adz-border);
	cursor: default;
}

.adz-quotes-nav.is-hidden {
	display: none;
}

.header.show-on-scroll,
.stuck #masthead.header-main {
	height: 70px !important;
}

.header-wrapper.stuck #logo img,
.header-wrapper.stuck #logo img.header-logo {
	max-height: 64px !important;
}

.header-main .nav>li>a {
	font-size: 1.125rem;
}

.adz-quote {
	display: none;
	margin: 0;
	max-width: 800px;
}

.adz-quote.is-active {
	display: block;
}

.adz-quote blockquote {
	font-family: var(--adz-font-d);
	font-size: 3rem;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--adz-ink);
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	/* Flatsome để blockquote nghiêng + có viền trái — mẫu thì không */
	font-style: normal;
}

.adz-quote figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.adz-quote figcaption strong {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--adz-ink);
}

.adz-quote figcaption span {
	font-size: 1.5rem;
	color: var(--adz-muted);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.adz-cl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 38px 32px;
	}

	/* .adz-cl-shot.lift-2 { margin-top: 72px; } */
	/* Bề ngang thẻ tự co bằng clamp(28vw) nên không phải khai lại. Chỉ rút ngắn
	   thời lượng theo đúng tỉ lệ (thẻ+khe còn ~52% so với 560+80px) để tốc độ
	   trôi trên màn hình vẫn y như desktop. */
	.adz-cl-shot {
		margin-right: 48px;
	}

	.adz-cl-strip {
		animation-duration: calc(var(--adz-strip-dur, 46s) * .52);
	}
}

@media (max-width: 768px) {
	.adz-cl-intro {
		max-width: none;
		font-size: .96rem;
	}

	/* Vẫn chạy marquee, chỉ thu khe lại (bề ngang thẻ đã tự co bằng clamp) */
	.adz-cl-strip-outer {
		margin-top: 34px;
		padding-bottom: 24px;
	}

	.adz-cl-strip {
		animation-duration: calc(var(--adz-strip-dur, 46s) * .42);
	}

	.adz-cl-shot {
		margin-right: 24px;
	}

	/* .adz-cl-shot.lift-0 { margin-top: 32px; }
	.adz-cl-shot.lift-2 { margin-top: 54px; }
	.adz-cl-shot.lift-3 { margin-top: 14px; }
	.adz-cl-shot.lift-4 { margin-top: 42px; } */

	.adz-cl-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.adz-cl-item p {
		max-width: none;
	}

	/* Nút điều hướng xuống DƯỚI trích dẫn (nav đứng trước trong DOM nên
	   phải dùng order, nếu chỉ bỏ position:absolute nó sẽ nhảy lên trên). */
	.adz-quotes {
		padding-top: 0;
		display: flex;
		flex-direction: column;
	}

	.adz-quotes-nav {
		position: static;
		order: 2;
		margin-top: 26px;
	}

	/* Trích dẫn 3rem quá to trên màn hẹp — hạ còn 1.5rem cho dễ đọc */
	.adz-quote blockquote {
		font-size: 1.5rem;
		margin-bottom: 22px;
	}
}

/* ============================================================
   LAYOUT "VỀ CHÚNG TÔI" (template-about.php)
   Bố cục theo mẫu clay.global/about: tiêu đề lớn + ảnh rộng →
   hàng con số → trụ sở với dải ảnh so le → danh sách đánh số →
   bảng năng lực nền tối → logo → trích dẫn → chứng nhận.
   Màu/typo giữ nguyên của ALPHA MKT.
   ============================================================ */

/* --- Padding từng section ---
   [section] của Flatsome chỉ nhận padding MỘT giá trị (map sang padding-top +
   padding-bottom), nên padding trên/dưới khác nhau phải đặt ở đây theo class.
   `.adz-sec` ép về 0 để mặc định 30px của Flatsome không cộng thêm. */
.adz-sec {
	padding: 0 !important;
}

/* Ảnh hero kéo ngược lên 130px nên khoảng hở THẬT giữa tiêu đề và ảnh = padding
   đáy trừ 130px. Khi hero còn nền tối thì 340px (hở 210px) đọc như một mảng tối
   rộng; đổi sang nền trắng thì đúng chỗ đó thành khoảng trắng hẫng ⇒ rút về 250px
   (hở 120px). Tương tự padding-top 180px → 96px: 180px trước đây chỉ để chừa chỗ
   cho dải tối kéo lên phủ header. */
.adz-sec-ab-hero {
	padding: 96px 0 250px !important;
	background-color: #171921;
}

.adz-sec-ab-heroimg {
	padding: 0 !important;
}

.adz-sec-ab-stats {
	padding: 78px 0 50px !important;
}

.adz-sec-ab-place {
	padding: 50px 0 86px !important;
}

.adz-sec-ab-why {
	padding: 10px 0 10px !important;
}

.adz-sec-ab-caps {
	padding: 100px 0 40px !important;
	background-color: #171921 !important;
}

.adz-sec-ab-logos {
	padding: 50px 0 30px !important;
	background-color: #171921 !important;
}

.adz-sec-ab-quotes {
	padding: 50px 0 46px !important;
	background-color: #171921 !important;
}

.adz-sec-ab-awards {
	padding: 50px 0 104px !important;
	background-color: #171921 !important;
}

/* Trang Khách Hàng (template-clients.php) */
.adz-sec-cl-intro {
	padding: 56px 0 0 !important;
}

.adz-sec-cl-strip {
	padding: 0 !important;
}

.adz-sec-cl-grid {
	padding: 70px 0 60px !important;
}

.adz-sec-cl-quotes {
	padding: 30px 0 80px !important;
}

/* Tiêu đề chung của các khối trong layout này (mẫu để ~56px ở màn hình rộng) */
.adz-ab-h2 {
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: var(--adz-ink);
	margin: 0 0 42px;
}

/* --- Phần đầu trang (NỀN TRẮNG) ---
   2026-08-11: đổi từ mảng tối liền header sang nền trắng, giống hero trang Dịch
   Vụ. Cả cơ chế cũ đã BỎ HẲN, không chỉ đổi màu:
     · dải `.adz-sec-ab-hero::before` cao 240px kéo ngược lên phủ vùng header,
     · tắt `.header-bg-color` + đổi chữ menu/hamburger sang trắng khi header
       chưa `.stuck`,
     · đổi chỗ hai thẻ <img> trong #logo để lấy bản logo trắng.
   Giữ lại bất kỳ mảnh nào trong số đó trên nền trắng là ra lỗi TRẮNG TRÊN TRẮNG
   (chữ menu biến mất) hoặc hai logo hiện cùng lúc. */

/* Mẫu KHÔNG nhốt hero trong cột 1170px giữa trang: cột nội dung rộng ~91% màn
   hình nên tiêu đề bắt đầu gần sát mép trái. Nới `.row` của riêng 2 section hero
   (chỉ từ 1025px trở lên — dưới mức đó Flatsome đã cho row rộng 100% sẵn, ép
   theo vw sẽ làm hẹp đi). Ảnh hero nhờ vậy khớp đúng cột nội dung, không cần
   tự kéo rộng bằng margin âm nữa. */
@media (min-width: 1025px) {

	.adz-sec-ab-hero .row,
	.adz-sec-ab-heroimg .row {
		max-width: min(1720px, 92vw);
	}
}

.adz-ab-hero {
	max-width: 1200px;
}

/* Mẫu không dùng badge bo tròn: nhãn chỉ là dòng chữ hoa nhỏ */
.adz-ab-eyebrow {
	display: block;
	margin-bottom: 26px;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--adz-muted);
}

.adz-ab-title {
	font-size: clamp(2.4rem, 5.6vw, 5rem);
	font-weight: 700;
	line-height: 1.12;
	color: #fff;
	margin: 0;
}

.adz-ab-title .adz-hl {
	color: var(--adz-hl);
}

.adz-ab-hero-lead {
	margin-top: 26px;
	max-width: 620px;
}

.adz-ab-hero-lead p {
	color: var(--adz-muted);
	font-size: 1rem;
	line-height: 1.75;
	margin: 0 0 14px;
}

.adz-ab-hero-lead p:last-child {
	margin-bottom: 0;
}

/* Ảnh lớn khớp đúng bề rộng cột nội dung của hero (đã nới ở trên) rồi kéo lên
   đè 130px vào mảng tối — mẫu để mép trái ảnh thẳng hàng với mép trái tiêu đề. */
.adz-sec-ab-heroimg .col {
	padding-bottom: 0;
}

.adz-ab-hero-img {
	position: relative;
	width: 100%;
	margin: -130px 0 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--adz-gold-soft);
}

.adz-ab-hero-img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

/* --- Hàng con số --- */
.adz-ab-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 34px 40px;
}

/* Trần 3.2rem (51px) là mức lớn nhất còn vừa: giá trị dài nhất "4 nền tảng"
   chiếm ~238px, cột chỉ rộng ~255px (4 cột trong container 1140 + gap 40).
   Muốn to như mẫu (~167px) thì phải giảm còn 3 con số và nới container. */
.adz-ab-stat-num {
	display: block;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: clamp(2.2rem, 4.2vw, 3.2rem);
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--adz-ink);
}

.adz-ab-stat-lbl {
	display: block;
	margin-top: 12px;
	font-size: 1.1rem;
	line-height: 1.5;
	color: var(--adz-muted);
}

/* --- Trụ sở & giới thiệu --- */
/* Mẫu để tên địa điểm rất lớn (~139px). Tên ngắn nên tăng mạnh được thoải mái. */
.adz-ab-place-name {
	font-size: clamp(2.8rem, 7vw, 6.5rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--adz-ink);
	margin: 0;
}

.adz-ab-place-role {
	margin: 14px 0 0;
	font-size: 1.1rem;
	color: var(--adz-muted);
}

/* Dải ảnh của khối này dùng chung component `.adz-cl-strip*` với trang Khách
   Hàng (xem khối LAYOUT "KHÁCH HÀNG") — tràn 100vw và tự chạy ngang, nên ở đây
   không còn rule riêng nào cho ảnh trụ sở. */
/* max-width nới theo cỡ chữ mới để vẫn khoảng 10–12 chữ mỗi dòng */
.adz-ab-place-text {
	margin-top: 48px;
	max-width: 700px;
}

.adz-ab-place-text p {
	color: var(--adz-ink);
	font-size: 28px;
	line-height: 1.4;
	margin: 0 0 20px;
}

.adz-ab-place-text p:last-child {
	margin-bottom: 0;
}

/* --- Vì sao chọn ALPHA MKT ---
   Mẫu KHÔNG có đường kẻ ngăn dòng: ảnh bên phải giãn CAO BẰNG CẢ DÒNG nên các
   ảnh nối thành một dải dọc liên tục — chính dải ảnh đó ngăn dòng. Vì vậy dùng
   align-items: stretch + min-height cho ảnh (không dùng aspect-ratio cố định),
   bỏ border-top, và padding dòng để hở đúng khe giữa hai ảnh.
   Số thứ tự, tiêu đề, mô tả đều lớn hơn cỡ mặc định của các khối khác. */
.adz-ab-why-item {
	display: grid;
	grid-template-columns: 4fr 3fr;
	gap: 24px 60px;
	align-items: stretch;
	padding: 22px 0;
}

/* Chưa chọn ảnh minh hoạ thì phần chữ dùng trọn chiều ngang, không chừa cột trống */
.adz-ab-why-item:not(:has(.adz-ab-why-img)) {
	grid-template-columns: minmax(0, 1fr);
}

/* Mẫu để chữ bắt đầu thấp hơn mép trên của ảnh một quãng */
.adz-ab-why-body {
	padding-top: 46px;
}

.adz-ab-why-num {
	display: block;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: clamp(1.8rem, 3.4vw, 3.25rem);
	line-height: 1;
	color: rgba(0, 0, 0, .26);
	margin-bottom: 30px;
}

.adz-ab-why-title {
	font-size: clamp(1.6rem, 3.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.14;
	color: var(--adz-ink);
	margin: 0 0 30px;
}

/* Mẫu để mô tả màu chữ đậm như tiêu đề (không xám) và tách thành nhiều đoạn */
.adz-ab-why-desc {
	margin: 0;
	max-width: 48ch;
}

.adz-ab-why-desc p {
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 1.7;
	color: var(--adz-ink);
}

.adz-ab-why-desc p:last-child {
	margin-bottom: 0;
}

.adz-ab-why-img {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--adz-gold-soft);
	min-height: 470px;
	/* dòng có ít chữ vẫn giữ ảnh cao, không bị dẹt */
}

/* height:100% ăn theo chiều cao dòng (grid item đã stretch nên có chiều cao xác
   định). object-position lệch lên trên để ảnh bị cắt vẫn giữ được mặt người. */
.adz-ab-why-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

/* Zoom nhẹ lúc cuộn tới VÀ lúc cuộn qua – theo cách mẫu clay.global/about làm:
   khung ảnh scale .94 → 1, ảnh bên trong scale 1.08 → 1 (nên nhìn như đang phóng
   ra chậm), cả dòng nhích lên và hiện dần. JS (js/adzio.js) gắn `.adz-zoom` rồi
   BẬT/TẮT `.is-in` theo tầm nhìn, nên khi dòng rời màn hình mọi transition chạy
   ngược lại: thu nhỏ rồi mờ đi chứ không mất đột ngột.

   Không có JS thì không có class `.adz-zoom` ⇒ dòng hiện bình thường. */
.adz-ab-why-item.adz-zoom {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .9s var(--adz-ease), transform 1.2s var(--adz-ease);
	will-change: opacity, transform;
}

.adz-ab-why-item.adz-zoom.is-in {
	opacity: 1;
	transform: none;
}

.adz-zoom .adz-ab-why-img {
	transform: scale(.94);
	transition: transform 1.3s var(--adz-ease);
}

.adz-zoom .adz-ab-why-img img {
	transform: scale(1.08);
	transition: transform 1.3s var(--adz-ease);
}

.adz-zoom.is-in .adz-ab-why-img,
.adz-zoom.is-in .adz-ab-why-img img {
	transform: none;
}

/* Người dùng tắt hiệu ứng chuyển động thì hiện tĩnh (JS cũng đã tự bỏ qua) */
@media (prefers-reduced-motion: reduce) {

	.adz-ab-why-item.adz-zoom,
	.adz-ab-why-item.adz-zoom .adz-ab-why-img,
	.adz-ab-why-item.adz-zoom .adz-ab-why-img img {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Năng lực --- */

/* Khối trang trí góc trên phải, theo mẫu clay.global/about.

   Ảnh do admin chọn ở hộp "ALPHA MKT – Năng lực (nền tối)" (field
   `adzio_ab_caps_bg`), truyền vào đây bằng biến --caps-bg; bỏ trống thì
   adzio_ab_caps_shortcode() tự điền ảnh render sẵn của theme.

   `overflow: hidden` đặt trên SECTION là bắt buộc: khối trang trí tràn qua mép
   phải của cột nội dung cho giống mẫu, không cắt thì trang bị kéo ngang thêm
   một dải trắng ở mọi trình duyệt.

   Nội dung phải được nhấc lên `z-index: 1`: khối trang trí nằm trong cùng thẻ
   `.adz-ab-caps`, không nhấc thì mấy dòng đầu việc chui xuống dưới ảnh. */
.adz-sec-ab-caps {
	overflow: hidden;
}

.adz-ab-caps {
	position: relative;
}

.adz-ab-caps::before {
	content: '';
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: -8%;
	right: -6%;
	width: min(50%, 560px);
	aspect-ratio: 1;
	background-image: var(--caps-bg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: contain;
}

.adz-ab-caps>* {
	position: relative;
	z-index: 1;
}

/* Màn hẹp: cụm khối lùi về sau chữ và nhỏ lại, không thì tiêu đề đè lên nó. */
@media (max-width: 849px) {
	.adz-ab-caps::before {
		top: -4%;
		right: -14%;
		width: min(58%, 320px);
		opacity: .55;
	}
}

.adz-ab-cap {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 14px 40px;
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.adz-ab-cap-name {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
	margin: 0;
}

.adz-ab-cap-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adz-ab-cap-list li {
	font-size: 1.25rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
	padding: 3px 0;
}

.adz-ab-caps-foot {
	margin-top: 42px;
}

/* Liên kết mũi tên cuối khối – theo mẫu clay.global/about:
   chữ KHÔNG đậm, gạch chân 1px mờ hiện sẵn và chỉ dài bằng phần chữ (mũi tên nằm
   ngoài vạch), rê chuột thì một vạch cùng màu chữ chạy từ trái sang phủ lên vạch
   mờ và mũi tên nhích sang phải. Bản cũ là chữ đậm 700, không có vạch, chỉ hiện
   border-bottom lúc hover — nhìn ra kiểu khác hẳn mẫu. */
.adz-ab-more {
	font-family: var(--adz-font-d);
	font-weight: 500;
	font-size: 20px;
	color: var(--adz-ink);
}

.adz-ab-more .adz-ab-more-t {
	position: relative;
}

/* Hai vạch xếp trùng nhau: ::before mờ luôn hiện, ::after đậm chạy khi hover.
   Đặt trong `.adz-ab-more` để nút viên thuốc `.adz-sl-more` (dùng chung hàm render)
   không bị kẻ thêm vạch. */
.adz-ab-more .adz-ab-more-t::before,
.adz-ab-more .adz-ab-more-t::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 1px;
	background: currentColor;
}

.adz-ab-more .adz-ab-more-t::before {
	opacity: .3;
}

.adz-ab-more .adz-ab-more-t::after {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .35s var(--adz-ease);
}

.adz-ab-more:hover .adz-ab-more-t::after {
	transform: scaleX(1);
}

.adz-ab-more-i {
	flex: 0 0 auto;
	width: 34px;
	height: 12px;
	transition: transform .5s var(--adz-ease);
}

.adz-ab-more:hover .adz-ab-more-i {
	transform: translateX(6px);
}

/* ---------- Mảng TỐI cuối trang: Năng lực · Khách hàng · Trích dẫn · Chứng nhận
   4 section liền nhau cùng bg #0D0D0D nên nhìn như một khối duy nhất.
   Gom mọi override màu vào đây thay vì rải trong từng khối. ---------- */
.adz-ab-dark .adz-ab-h2 {
	color: #fff;
	margin-bottom: 32px;
}

.adz-ab-dark .adz-ab-more {
	color: #fff;
}

/* Trích dẫn trên nền tối */
.adz-ab-dark .adz-quote blockquote {
	color: #fff;
}

.adz-ab-dark .adz-quote figcaption strong {
	color: #fff;
}

.adz-ab-dark .adz-quote figcaption span {
	color: rgba(255, 255, 255, .55);
}

.adz-ab-dark .adz-q-btn {
	color: #fff;
}

.adz-ab-dark .adz-q-btn:hover {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .22);
}

/* Badge chứng nhận thường là chữ sẫm nên trên nền tối phải lót thẻ trắng mới đọc
   được. KHÔNG lót cho lưới khách hàng: logo ở đó phủ kín ô (width: 100%) mà lại
   là PNG nền trong, nên thẻ trắng sẽ thành một mảng trắng to đúng bằng ô — mẫu
   clay.global/about để logo xám nằm thẳng trên nền tối. Đổi lại thì logo khách
   hàng phải là bản sáng/trắng. */
.adz-ab-dark .adz-ab-award-grid .adz-ab-logo {
	border-radius: 6px;
}

.adz-ab-dark .adz-ab-logo-grid .adz-ab-logo img {
	filter: none;
	opacity: 1;
}

.adz-ab-dark .adz-ab-awards-note {
	color: rgba(255, 255, 255, .55);
}

/* --- Lưới logo khách hàng ---
   Theo mẫu clay.global/about: lưới 5 cột ĐỀU nhau, khe ngang rộng, và KHÔNG ép
   cỡ ảnh — mỗi ảnh logo là một khung chung (ở đây 580×384, logo đã canh giữa sẵn
   bên trong ảnh) nên chỉ cần cho ảnh rộng bằng ô là mọi logo cùng cỡ, cùng lề.
   Không đặt height px như trước: ảnh bị co còn ~63px nên logo bên trong nhỏ xíu
   trong khi ô vẫn rộng 160px. */
.adz-ab-logo-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px 80px;
}

.adz-ab-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cỡ do bề ngang ô quyết định, chiều cao chạy theo tỉ lệ gốc của ảnh (thẻ <img>
   đã in width/height thật nên không nhảy layout lúc chưa tải). */
.adz-ab-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.adz-ab-logo-grid .adz-ab-logo img {
	width: 100%;
	/* Logo khách hàng đổ xám cho đồng bộ (không đổi khi rê chuột). */
	filter: grayscale(1);
	opacity: .62;
}

.adz-ab-logos-foot {
	margin-top: 56px;
	display: flex;
	justify-content: center;
}

/* --- Chứng nhận & đối tác (giữ nguyên màu gốc để nhận diện được badge) --- */
.adz-ab-award-grid {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap: 26px 44px;
}

.adz-ab-awards-note {
	margin: 28px 0 0;
	max-width: 820px;
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--adz-muted);
}

/* --- Responsive --- */
@media (max-width: 1024px) {

	/* Ảnh hero thấp lại nên giảm cả đoạn kéo lên lẫn padding đáy của hero */
	.adz-sec-ab-hero {
		padding: 76px 0 200px !important;
	}

	.adz-ab-hero-img {
		margin-top: -110px;
	}

	.adz-ab-why-item {
		grid-template-columns: 1fr 1fr;
		gap: 22px 40px;
	}

	.adz-ab-why-body {
		padding-top: 32px;
	}

	.adz-ab-why-img {
		min-height: 400px;
	}

	.adz-ab-cap {
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 12px 28px;
	}

	/* Bớt cột để logo giữ cỡ gần như ở desktop (5 cột thì chỉ còn ~110px) */
	.adz-ab-logo-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 26px 50px;
	}
}

@media (max-width: 768px) {
	.adz-ab-h2 {
		margin-bottom: 28px;
	}

	.adz-ab-eyebrow {
		margin-bottom: 18px;
	}

	.adz-ab-hero-lead {
		margin-top: 20px;
	}

	.adz-sec-ab-hero {
		padding: 60px 0 150px !important;
	}

	.adz-sec-ab-stats {
		padding: 50px 0 34px !important;
	}

	.adz-sec-ab-place {
		padding: 34px 0 56px !important;
	}

	.adz-sec-ab-why {
		padding: 56px 0 60px !important;
	}

	.adz-sec-ab-caps {
		padding: 64px 0 30px !important;
	}

	.adz-sec-ab-logos {
		padding: 34px 0 20px !important;
	}

	.adz-sec-ab-quotes {
		padding: 34px 0 30px !important;
	}

	.adz-sec-ab-awards {
		padding: 34px 0 68px !important;
	}

	.adz-ab-hero-img {
		margin-top: -90px;
	}

	.adz-ab-hero-img img {
		aspect-ratio: 3 / 2;
	}

	.adz-ab-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 20px;
	}

	.adz-ab-place-text {
		margin-top: 32px;
	}

	/* Ảnh xuống dưới phần chữ. Hết cột ảnh thì dải ảnh dọc không còn ngăn dòng
	   được nữa, nên trả lại đường kẻ cho danh sách vẫn đọc ra từng mục. */
	.adz-ab-why-item {
		grid-template-columns: 1fr;
		padding: 34px 0;
		border-top: 1px solid var(--adz-border);
	}

	.adz-ab-why-body {
		padding-top: 0;
	}

	.adz-ab-why-num {
		margin-bottom: 20px;
	}

	.adz-ab-why-title {
		margin-bottom: 18px;
	}

	.adz-ab-why-desc {
		max-width: none;
	}

	/* Bỏ giãn cao theo dòng, quay về khổ dọc 3:4 và bóp bề ngang cho cân trang. */
	.adz-ab-why-img {
		min-height: 0;
		max-width: 320px;
	}

	.adz-ab-why-img img {
		height: auto;
		aspect-ratio: 3 / 4;
	}

	.adz-ab-cap {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 22px 0;
	}

	.adz-ab-caps-foot {
		margin-top: 32px;
	}

	.adz-ab-award-grid {
		gap: 22px 30px;
	}

	.adz-ab-award-grid .adz-ab-logo img {
		height: 44px;
	}
}

@media (max-width: 560px) {

	/* 3 cột như bản điện thoại của mẫu */
	.adz-ab-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px 24px;
	}

	/* Điện thoại: ảnh trọn bề rộng, khổ 4:3 vì 3:4 dọc sẽ cao quá màn hình. */
	.adz-ab-why-img {
		max-width: none;
	}

	.adz-ab-why-img img {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================
   LAYOUT "DỊCH VỤ" (template-services.php)
   Bố cục theo mẫu neyul.com: hero → giới thiệu kèm biểu đồ →
   tuyên ngôn nền vàng → dải ảnh sản phẩm → hệ sinh thái dịch vụ
   nền tối + accordion → số liệu & logo → SEO → dự án → FAQ →
   đánh giá → tin tức → CTA nền vàng.
   Mẫu dùng cam làm màu nhấn; ở đây đổi sang vàng gold của ALPHA MKT.

   CỠ CHỮ SÀN 1rem — QUY ƯỚC CỦA TRANG NÀY: mọi chữ đọc được trong khối
   `.adz-sv-*` (kể cả nhãn biểu đồ, tag, ghi chú, chấm mốc trục) tối thiểu 1rem
   = 16px. Đừng thêm giá trị `.9rem`, `.84rem`… vào đây nữa; cần phân cấp thì
   TĂNG lên 1.05rem / 1.15rem chứ không giảm xuống dưới sàn.
   ============================================================ */

/* --- Padding từng section (xem ghi chú ở adzio_build_sections) --- */
.adz-sec-sv-hero {
	padding: 60px 0 0 !important;
}

.adz-sec-sv-intro {
	padding: 90px 0 90px !important;
}

.adz-sec-sv-values {
	padding: 90px 0 90px !important;
}

.adz-sec-sv-works {
	padding: 90px 0 90px !important;
}

/* Dịch vụ + số liệu + dải logo nay chung MỘT section nên phải đủ đệm cả hai đầu
   (trước kia đáy để mỏng vì section "Số liệu" nối ngay bên dưới). */
.adz-sec-sv-eco {
	padding: 100px 0 100px !important;
	background-image: url(assets/img/sec-dark-bg.webp);
    background-position: center top;
    background-size: 100% 100%;
	background-color: transparent;
}

.adz-sec-sv-eco .section-bg {
	background-color: #00000080;
}

.adz-sec-sv-metrics {
	padding: 40px 0 100px !important;
}

.adz-sec-sv-seo {
	padding: 90px 0 90px !important;
	background-color: #fff;
}

.adz-sec-sv-cases {
	padding: 20px 0 90px !important;
	background-color: #faf7f5;
}

.adz-sec-sv-faq {
	padding: 84px 0 84px !important;
	background-color: #fff;
}

.adz-sec-sv-reviews {
	padding: 90px 0 70px !important;
	background-color: #faf7f5;
}

.adz-sec-sv-posts {
	padding: 40px 0 0 !important;
}

/* Đáy hẹp hơn đỉnh vì dấu thương hiệu cỡ lớn đã lấp phần dưới khối */
.adz-sec-sv-cta {
	padding: 90px 0 56px !important;
}

/* --- Cụm tiêu đề trái · mô tả phải, lặp ở đầu hầu hết các khối --- */
.adz-sv-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: var(--adz-font-d);
	font-size: 1rem;
	color: var(--adz-gold-soft);
}

.adz-sv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 52px;
}

.adz-sv-h2 {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -.025em;
	color: #222;
	margin: 0;
	max-width: 480px;
}

.adz-sv-h2 .adz-hl {
	font-weight: 700;
}

@media (min-width: 1024px) {
	.adz-sv-head-r {
		max-width: 560px;
	}
}

.adz-sv-head-r p {
	font-size: 1.125rem;
	line-height: 1.32;
	color: #595959;
	font-weight: 500;
}

.adz-sv-head-r p:last-child {
	margin-bottom: 0;
}

/* --- Nút --- */
.adz-sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 8px;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	background: var(--adz-gold);
	color: #fff !important;
	border: 1px solid var(--adz-gold);
	transition: background .2s ease, border-color .2s ease;
	box-shadow: 0 4px 16px #00000040;
}

.adz-sv-btn:hover {
	background: var(--adz-gold-dark);
	border-color: var(--adz-gold-dark);
}

.adz-sv-btn.is-ghost {
	background: transparent;
	color: var(--adz-ink) !important;
	border-color: var(--adz-border);
}

.adz-sv-btn.is-ghost:hover {
	background: var(--adz-gold-soft);
	border-color: var(--adz-gold);
}

.adz-sv-btn.is-dark {
	background: var(--adz-ink);
	border-color: var(--adz-ink);
	color: #fff !important;
}

.adz-sv-btn.is-dark:hover {
	background: var(--adz-deep);
	border-color: var(--adz-deep);
}

/* Nút sáng đặt trên nền tối: viên thuốc trắng, chữ đen (mẫu neyul.com). */
.adz-sv-btn.is-light {
	background: #fff;
	border-color: #fff;
	color: var(--adz-ink) !important;
	box-shadow: none;
}

.adz-sv-btn.is-light:hover {
	background: rgba(255, 255, 255, .84);
	border-color: rgba(255, 255, 255, .84);
}

/* Nút kèm dấu cộng trong vòng tròn ở bên phải.
   Vòng tròn + dấu cộng là MỘT hình mask duy nhất (fill-rule evenodd khoét dấu
   cộng ra khỏi đĩa tròn), tô bằng currentColor: nhờ vậy đĩa luôn cùng màu chữ
   còn dấu cộng lộ đúng màu nền của nút, không cần thêm thẻ con. */
.adz-sv-btn.has-plus {
	gap: 14px;
	padding: 10px 10px 10px 26px;
	border-radius: 12px;
	border: 1px solid #fff;
	height: 56px;
}

.adz-sv-btn.has-plus::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm1.1 5.6h-2.2v5.3H5.6v2.2h5.3v5.3h2.2v-5.3h5.3v-2.2h-5.3V5.6Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm1.1 5.6h-2.2v5.3H5.6v2.2h5.3v5.3h2.2v-5.3h5.3v-2.2h-5.3V5.6Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .25s var(--adz-ease, ease);
}

.adz-sv-btn.has-plus:hover {
	background-color: var(--adz-gold-soft);
}

/* Nút kèm mũi tên chéo lên như mẫu. Icon vẽ bằng SVG đặt qua mask nên
   luôn ăn theo màu chữ hiện hành, không phụ thuộc font hệ thống. */
.adz-sv-btn.has-arrow {
	gap: 10px;
}

.adz-sv-btn.has-arrow::after {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Phần đầu trang: bố cục thẻ rời (bento) như mẫu ---
   Hai hàng RỜI NHAU, mỗi hàng một lưới riêng để chỉnh độc lập:
   .adz-sv-hero-top = thẻ ảnh trái · đoạn chữ phải
   .adz-sv-hero-bot = dòng nhỏ trái · thẻ đánh giá phải
   Khoảng cách giữa hai hàng nằm ở gap của .adz-sv-hero. */
.adz-sv-hero {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.adz-sv-hero-top {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.adz-sv-hero-bot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	align-items: start;
}

.adz-sv-hero-card {
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: 16px;
	padding: 0.25rem 0.25rem 1.25rem;
	box-shadow: 1px 2px 4px #00000040;
}

.adz-sv-hero-card-img {
	position: relative;
	margin: 0 0 8px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--adz-gold-soft);
}

.adz-sv-hero-card-img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.adz-sv-hero-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 8px 16px;
	border-radius: 999px;
	background: #d9d9d917;
	backdrop-filter: blur(4px);
	font-family: var(--adz-font-d);
	font-size: 0.75rem;
	color: #fff;
}

.adz-sv-hero-meta {
	margin: 0 0 5px;
	padding: 0 10px;
	font-size: 14px;
	color: var(--adz-muted);
}

.adz-sv-title {
	margin: 0;
	padding: 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--adz-ink);
}

.adz-sv-title .adz-hl {
	color: var(--adz-hl);
}

.adz-sv-hero-txt {
	padding-top: 22px;
	max-width: 392px;
}

.adz-sv-hero-lead p {
	margin: 0 0 14px;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--adz-ink);
}

.adz-sv-hero-lead p:last-child {
	margin-bottom: 0;
}

.adz-sv-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.adz-sv-hero-note {
	align-self: end;
	margin: 0;
	font-size: 14px;
	color: var(--adz-muted);
	max-width: 300px;
}

/* Thẻ đánh giá: khung trắng bọc 2 ô con (ô tối + ô vàng nhạt) */
.adz-sv-hero-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	box-shadow: 2px 4px 20px #00000040;
	max-width: 568px;
}

.adz-sv-hero-score {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	background: var(--adz-ink);
	border-radius: 8px;
	padding: 20px;
}

.adz-sv-hero-score-top {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.adz-sv-hero-score-num {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	font-family: var(--adz-font-d);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -.03em;
	color: #fff;
	line-height: 1;
}

.adz-sv-hero-score-num i {
	font-size: 12px;
	color: rgba(255, 255, 0, 1);
}

.adz-sv-hero-score-lbl {
	font-size: 10px;
	line-height: 1.45;
	color: rgba(255, 255, 255);
}

.adz-sv-hero-score-bot {
	display: flex;
	align-items: center;
}

.adz-sv-hero-avs {
	display: flex;
}

.adz-sv-hero-avs img {
	width: 40px;
	height: 40px;
	border-radius: 0.75rem;
	object-fit: cover;
	border: 1px solid #fff;
	margin-left: -10px;
	background: var(--adz-gold-soft);
}

.adz-sv-hero-avs img:first-child {
	margin-left: 0;
}

.adz-sv-hero-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 10px;
	border-radius: 0.75rem;
	background: var(--adz-gold-soft);
	color: #fff;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1rem;
	margin-left: -10px;
}

.adz-sv-hero-claim {
	background: #d1a7656b;
	border-radius: 12px;
	padding: 20px;
}

/* Vàng nhạt trên nền kem gần như chìm — dùng tông đậm hơn cho rõ */
.adz-sv-hero-claim .adz-sv-star {
	margin-bottom: 0.75rem;
	font-size: 1.5rem;
	color: var(--adz-gold-dark);
}

.adz-sv-hero-claim p {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.18;
	color: #595959;
}

/* --- Biểu đồ (dùng chung nhiều khối) ---
   Giá trị mỗi cột do PHP đưa vào biến --adz-v, nên cùng một markup dùng được
   cho cả cột đứng (đặt chiều cao) lẫn thanh ngang (.is-rows, đặt chiều rộng).
   Mẫu dùng cột MẢNH, màu đặc, không có khối nền xám dày phía trên. */
.adz-sv-bars {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	height: 132px;
	margin-top: 22px;
}

.adz-sv-bar {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	height: 100%;
}

.adz-sv-bar-col {
	flex: 1 1 auto;
	width: 100%;
	max-width: 34px;
	display: flex;
	align-items: flex-end;
}

.adz-sv-bar-col i {
	display: block;
	width: 100%;
	height: var(--adz-v, 0%);
	background: #d9d9d9;
	border-radius: 3px;
	position: relative;
	/* mốc cho con số in dọc bên trong */
}

/* Khi có cột được đánh dấu *, các cột còn lại lùi về BẬC NHẠT CÙNG SẮC (không
   phải xám mờ) để làm nổi cột đó. Xám 12% cũ tụt xuống 1.1:1 so với nền trắng —
   coi như tàng hình; bậc nhạt #86B6EF đạt 2.11:1 nên vẫn đọc được chiều cao. */
.adz-sv-bars.has-hi .adz-sv-bar-col i {
	background: #d9d9d9;
}

.adz-sv-bars.has-hi .adz-sv-bar.is-hi .adz-sv-bar-col i {
	background: var(--adz-viz);
}


.adz-sv-dark .adz-sv-bars .adz-sv-bar-col i {
	background: #454545;
}

/* Con số in DỌC trong lòng cột, đọc từ dưới lên, nằm sát đáy cột */
.adz-sv-bar-val {
	position: absolute;
	left: 50%;
	bottom: 9px;
	transform: translateX(50%);
	writing-mode: vertical-rl;
	rotate: 180deg;
	font-style: normal;
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	pointer-events: none;
	/* Con số nằm TRONG lòng cột nên màu chữ phải theo màu CỘT, không theo nền
	   trang. Mỗi tổ hợp bên dưới đều đã đo ≥4.5:1 so với chính cột nó nằm trên. */
	color: #fff;
	/* cột bậc đậm (mặc định) */
}

.adz-sv-bars.has-hi .adz-sv-bar-val {
	color: rgba(0, 0, 0, .62);
}

/* cột bậc nhạt */
.adz-sv-bars.has-hi .adz-sv-bar.is-hi .adz-sv-bar-val {
	color: #fff;
}

.adz-sv-dark .adz-sv-bar-val {
	color: var(--adz-ink);
}

.adz-sv-dark .adz-sv-bars.has-hi .adz-sv-bar-val {
	color: rgba(255, 255, 255, .92);
}

.adz-sv-dark .adz-sv-bars.has-hi .adz-sv-bar.is-hi .adz-sv-bar-val {
	color: var(--adz-ink);
}

.adz-sv-bar-lbl {
	margin-top: 10px;
	font-size: 0.5rem;
	line-height: 1.3;
	color: var(--adz-muted);
	text-align: center;
	overflow-wrap: anywhere;
}

/* Thanh ngang: nhãn bên trái, thanh chạy sang phải.
   Dùng row-reverse (KHÔNG dùng display:contents + order) vì với display:contents
   thì order gom hết nhãn lên trước rồi mới tới thanh, lưới vỡ hoàn toàn. */
.adz-sv-bars.is-rows {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	height: auto;
}

.adz-sv-bars.is-rows .adz-sv-bar {
	flex: 0 0 auto;
	flex-direction: row-reverse;
	align-items: center;
	gap: 14px;
	height: auto;
}

/* 120px (không phải 84px): nhãn 1rem cần thêm chỗ, hẹp hơn là xuống 2–3 dòng. */
.adz-sv-bars.is-rows .adz-sv-bar-lbl {
	flex: 0 0 120px;
	margin: 0;
	text-align: left;
	font-size: 1rem;
}

.adz-sv-bars.is-rows .adz-sv-bar-col {
	flex: 1 1 auto;
	max-width: none;
	height: 16px;
	align-items: stretch;
}

.adz-sv-bars.is-rows .adz-sv-bar-col i {
	width: var(--adz-v, 0%);
	height: 100%;
}

/* --- Giới thiệu & số liệu ---
   Mẫu: ảnh dọc cao suốt hàng bên trái · thẻ số liệu xếp 2 cột bên phải.

   KHÔNG đặt chiều cao bằng px ở bất kỳ đâu trong khối này. Chiều cao hàng do
   ẢNH quyết định qua aspect-ratio (tỉ lệ, co giãn theo bề rộng cột), các thẻ
   stretch theo hàng, biểu đồ bên trong thẻ ăn nốt phần dư bằng flex. Nhờ vậy
   ba cột luôn bằng đáy ở mọi bề rộng mà không phải canh số nào. */
.adz-sv-intro-body {
	display: grid;
	grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
	gap: 12px;
	align-items: stretch;
}

.adz-sv-intro-img {
	position: relative;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--adz-gold-soft);
	aspect-ratio: 3 / 4;
	max-width: 100%;
	/* nguồn duy nhất sinh ra chiều cao của cả hàng */
}

/* Ảnh đơn sắc như mẫu; không đổi khi rê chuột */
.adz-sv-intro-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter .2s ease;
}

.adz-sv-intro-img img:hover {
	filter: grayscale(0);
}

.adz-sv-intro-img a {
	display: block;
	height: 100%;
}

.adz-sv-intro-arrow {
	position: absolute;
	top: 22px;
	right: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #fff;
	font-size: 1.15rem;
	transform: rotate(-45deg);
	/* mũi tên chỉ chếch lên như mẫu */
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* Chú thích góc dưới trái ảnh. Lớp phủ tối chỉ ở nửa dưới để chữ trắng đọc được
   trên ảnh sáng mà không làm đục cả tấm ảnh. */
.adz-sv-intro-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 64px 26px 26px;
	background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
	color: #fff;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	line-height: 1.25;
	letter-spacing: -.02em;
	pointer-events: none;
}

/* Lưới thẻ: KHÔNG dùng `columns` (multi-column).
   Multicol cân theo lượng NỘI DUNG chứ không cân chiều cao, nên cột trái và cột
   phải kết thúc ở hai mốc khác nhau — nhìn lệch hẳn so với ảnh bên cạnh.
   Bố cục mẫu là: cột trái xếp 2 thẻ chồng nhau, cột phải MỘT thẻ cao suốt hàng,
   cả hai cùng kết thúc ngang đáy ảnh. Chỉ grid mới mô tả được việc đó. */
/* Hàng 1 `auto` = vừa đúng nội dung thẻ trên; hàng 2 `1fr` = nuốt toàn bộ phần
   dư. Thẻ cột phải span cả 2 hàng nên tự bằng đúng chiều cao của cột trái. */
.adz-sv-intro-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto minmax(min-content, 1fr);
	gap: 12px;
}

.adz-sv-intro-cards> :nth-child(1) {
	grid-area: 1 / 1;
}

.adz-sv-intro-cards> :nth-child(2) {
	grid-area: 2 / 1;
}

.adz-sv-intro-cards> :nth-child(3) {
	grid-area: 1 / 2 / span 2;
}

/* Thẻ thứ 4 trở đi (nhập dư) nằm nguyên một hàng bên dưới. */
.adz-sv-intro-cards> :nth-child(n+4) {
	grid-column: 1 / -1;
}

/* Khoảng cách giữa các phần trong thẻ do `gap` lo, KHÔNG dùng margin của từng
   phần nữa: margin cố định sẽ đè mất phần chia chỗ trống bên dưới.
   min-height:0 để thẻ co được nhỏ hơn nội dung mặc định của flex item. */
.adz-sv-card {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-height: 0;
	margin: 0;
	background: #fff;
	border-radius: 14px;
	padding: 26px;
}

.adz-sv-card>.adz-sv-card-people,
.adz-sv-card>.adz-sv-card-stat {
	margin-bottom: 0;
}

/* Biểu đồ ăn hết phần dư của thẻ. Dùng flex-grow chứ KHÔNG dùng margin-top:auto
   — auto margin nuốt chỗ trống TRƯỚC khi flex-grow kịp chạy, biểu đồ sẽ bị đẩy
   xuống đáy mà không cao thêm chút nào.

   aspect-ratio thay cho height cố định: cột/đường không có chiều cao nội tại
   (mọi giá trị đều tính theo % của khung), nên nếu chỉ để `flex:1` thì ở chỗ
   không còn chỗ dư — như bố cục 1 cột trên mobile — biểu đồ sẽ sập về 0.
   aspect-ratio cho nó một chiều cao khởi điểm suy ra từ BỀ RỘNG, và flex-grow
   vẫn kéo cao thêm được khi thẻ bị stretch. Không có px nào trong chuỗi này. */
.adz-sv-card>.adz-sv-bars,
.adz-sv-card>.adz-sv-line {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	margin-top: 0;
}

.adz-sv-card>.adz-sv-bars {
	aspect-ratio: 5 / 2;
}

.adz-sv-card>.adz-sv-line {
	display: flex;
	flex-direction: column;
}

.adz-sv-card>.adz-sv-line .adz-sv-line-plot {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	aspect-ratio: 5 / 2;
}

/* Cụm ảnh đại diện + nhãn tròn ở đầu thẻ */
.adz-sv-card-people {
	display: flex;
	align-items: flex-end;
	margin-bottom: 22px;
}

.adz-sv-hero-avs.is-light img {
	border-color: #fff;
}

.adz-sv-card-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 40px;
	padding: 0 8px;
	border-radius: 8px;
	background: var(--adz-gold-soft);
	color: #fff;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1rem;
	margin-left: -10px;
}

.adz-sv-card-pill-note {
	font-size: 1rem;
	color: #adadad;
	margin-left: 10px;
	font-weight: 600;
}

.adz-sv-card-statement {
	margin: 0;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: clamp(1.1rem, 1.9vw, 1.75rem);
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--adz-ink);
}

.adz-sv-card-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 22px;
}

.adz-sv-card-stat:last-child {
	margin-bottom: 0;
}

.adz-sv-card-title {
	font-size: 1rem;
	color: var(--adz-muted);
	font-weight: 600;
}

.adz-sv-card-num {
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	letter-spacing: -.03em;
	color: lab(29.2888% 0 0/.9);
	line-height: 1;
}

/* (Khoảng thở giữa chữ và biểu đồ trong thẻ nay do `gap` của .adz-sv-card lo —
   các rule `+ margin-top` cũ đã bỏ vì chúng đè mất `margin-top:auto`.) */

/* Biểu đồ đường.
   Bản có trục (.has-axis) dựng đúng mẫu: khung nền xám nhạt · mốc trục dọc kèm
   đường kẻ đứt · dải sọc chéo ôm lấy đường · tooltip đen ở điểm đánh dấu *.
   --adz-gut là bề rộng cột chứa nhãn trục, mọi lớp vẽ đều thụt vào đúng bằng đó. */
.adz-sv-line {
	--adz-gut: 0px;
	margin-top: 22px;
}

.adz-sv-line.has-axis {
	/* 46px (không phải 38px): mốc trục nay 1rem theo sàn cỡ chữ, "100%" cần chỗ. */
	--adz-gut: 46px;
	padding: 18px 18px 14px;
	border-radius: 12px;
	background: var(--adz-viz-plate);
}

.adz-sv-line-plot {
	position: relative;
	height: 116px;
}

.adz-sv-line-area {
	position: absolute;
	inset: 0 0 0 var(--adz-gut);
}

.adz-sv-line svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.adz-sv-line-path {
	fill: none;
	stroke: var(--adz-viz);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.adz-sv-dark .adz-sv-line-path {
	stroke: var(--adz-viz-on-dark);
}

/* Dải sọc: nền gradient theo pixel màn hình (luôn 45°), cắt theo hình dải bằng
   clip-path do PHP tính. Không dùng <pattern> SVG vì khung bị kéo giãn phi tỉ lệ. */
.adz-sv-line-band {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(45deg,
			transparent 0 3px, rgba(37, 106, 191, .42) 3px 5px);
}

.adz-sv-dark .adz-sv-line-band {
	background: repeating-linear-gradient(45deg,
			transparent 0 3px, rgba(57, 135, 229, .50) 3px 5px);
}

.adz-sv-line:not(.has-axis) .adz-sv-line-band {
	display: none;
}

/* Mốc trục dọc + đường kẻ đứt chạy hết bề ngang */
.adz-sv-line-tick {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	transform: translateY(-50%);
	pointer-events: none;
}

.adz-sv-line-tick em {
	flex: 0 0 var(--adz-gut);
	font-style: normal;
	font-size: 1rem;
	line-height: 1;
	color: var(--adz-muted);
}

.adz-sv-line-tick::after {
	content: "";
	flex: 1 1 auto;
	border-top: 1px dashed rgba(0, 0, 0, .16);
}

/* Đường dóng đứng + tooltip tại điểm có dấu * */
.adz-sv-line-guide {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px dashed rgba(37, 106, 191, .38);
	pointer-events: none;
}

/* Chấm mốc tại điểm được đánh dấu *: đường kẻ mảnh 2px một mình thì mắt không
   biết con số trong tooltip ứng với điểm nào. Vành trắng 2px tách chấm khỏi nét
   đường phía sau (không dùng shadow — chấm nằm ngay trên nét nên shadow sẽ nhoè
   vào chính nét đó). */
.adz-sv-line-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background: var(--adz-viz);
	border: 2px solid #fff;
}

.adz-sv-line.has-axis .adz-sv-line-dot {
	border-color: var(--adz-viz-plate);
}

.adz-sv-dark .adz-sv-line-dot {
	background: var(--adz-viz-on-dark);
	border-color: var(--adz-ink);
}

.adz-sv-line-tip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 14px));
	padding: 4px 9px;
	border-radius: 6px;
	white-space: nowrap;
	background: var(--adz-viz);
	color: #fff;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
}

.adz-sv-line-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--adz-viz);
}

.adz-sv-dark .adz-sv-line-tip {
	background: var(--adz-viz-on-dark);
	color: var(--adz-ink);
}

.adz-sv-dark .adz-sv-line-tip::after {
	border-top-color: var(--adz-viz-on-dark);
}

.adz-sv-line-lbls {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
	padding-left: var(--adz-gut);
}

.adz-sv-line-lbls span {
	font-size: 1rem;
	color: var(--adz-muted);
}

/* --- Giá trị & định hướng: lưới 3 cột × 2 hàng, các ô bằng nhau --- */
.adz-sv-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(clamp(260px, 24vw, 340px), auto);
	gap: 26px;
	align-items: stretch;
}

.adz-sv-values>* {
	min-width: 0;
	min-height: 0;
}

.adz-sv-val-img {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--adz-gold-soft);
	height: 510px;
}

.adz-sv-val-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.adz-sv-claim {
	background: var(--adz-gold-soft);
	border-radius: 10px;
	padding: 40px 34px;
	display: flex;
	align-items: flex-end;
}

.adz-sv-claim p {
	margin: 0;
	font-family: var(--adz-font-d);
	font-weight: 700;
	color: #fff;
	font-size: clamp(1.3rem, 2.4vw, 2rem);
	line-height: 1.3;
	letter-spacing: -.02em;
	font-style: italic;
}

.adz-sv-val-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #fcc3b0;
	background: #fff9f7;
	border-radius: 10px;
	padding: 30px 42px;
	height: 510px;
}

.adz-sv-star {
	display: block;
	font-size: 2.3rem;
	line-height: 1;
	color: var(--adz-gold-soft);
	margin-bottom: 18px;
}

/* Hover vào thẻ: dấu ✳ chạy sang phải rồi về đúng vị trí cũ, tổng 1s.
   Dùng @keyframes (không dùng transition) để một lần hover là chạy trọn vòng
   đi–về, không phụ thuộc lúc chuột rời khỏi thẻ. */
.adz-sv-val-card:hover .adz-sv-star,
.adz-sv-val-card:focus-within .adz-sv-star {
	animation: adz-star-slide 1.5s ease-in-out;
}

@keyframes adz-star-slide {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(200px);
	}

	100% {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.adz-sv-val-card:hover .adz-sv-star,
	.adz-sv-val-card:focus-within .adz-sv-star {
		animation: none;
	}
}

.adz-sv-val-card h3 {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #414141;
	margin: 0 0 12px;
	font-style: italic;
	line-height: 1.15;
}

/* Đoạn mô tả tụt xuống đáy thẻ như mẫu; thẻ không có mô tả thì không hụt gì. */
.adz-sv-val-card p {
	margin: auto 0 0;
	font-size: 1rem;
	line-height: 1.32;
	color: #595959;
}

/* --- Dải ảnh sản phẩm (cuộn ngang, tràn viền) ---
   Mẫu: dải mockup cao chạy hết bề ngang màn hình, ảnh giữa nổi hẳn lên, ảnh hai
   bên thu nhỏ và bị cắt ở mép để gợi ý còn cuộn tiếp. Chấm tròn ở dưới.

   Khối này nằm trong container giới hạn bề ngang nên phải tự kéo ra mép:
   left:50% + translateX(-50%) + width:100vw. Dùng 100vw (không phải 100%) và
   overflow-x:clip ở lớp ngoài để không sinh thanh cuộn ngang cho cả trang. */
/* 100vw đã TÍNH CẢ bề rộng thanh cuộn dọc, nên rộng hơn vùng nhìn thấy vài px
   và sẽ đẻ ra thanh cuộn NGANG cho cả trang. Cắt phần thừa ngay ở section. */
.adz-sec-sv-works {
	overflow-x: clip;
}

.adz-sv-works-bleed {
	position: relative;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	margin-top: 54px;
	overflow-x: clip;
}

/* SLIDER NHẢY TỪNG THẺ (không trôi liên tục). js/adzio.js đặt transform bằng px
   sao cho thẻ .is-active nằm chính giữa khung; ở đây chỉ lo transition + hình thức.
   Dùng margin-right (KHÔNG dùng gap) vì JS đo bước nhảy = bề ngang thẻ + margin-right.
   Trước khi JS gắn .is-ready thì track đứng yên ở transform mặc định — không JS
   vẫn ra một dải ảnh tĩnh, không vỡ bố cục. */
.adz-sv-works-strip {
	display: flex;
	align-items: center;
	width: max-content;
	padding-block: 40px;
	will-change: transform;
}

.adz-sv-works-strip.is-ready {
	transition: transform .65s cubic-bezier(.4, .0, .2, 1);
}

.adz-sv-work {
	flex: 0 0 clamp(190px, 21vw, 300px);
	margin: 0 26px 0 0;
	border-radius: 22px;
	overflow: hidden;
	background: var(--adz-gold-soft);
	border: 1px solid var(--adz-border);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .10);
	transition: transform .65s cubic-bezier(.4, .0, .2, 1), box-shadow .65s ease;
}

/* Thẻ đang ở giữa nổi lên trước, giống mẫu. Bỏ 3 dòng dưới là mọi thẻ bằng nhau. */
.adz-sv-works-strip.is-ready .adz-sv-work.is-active {
	transform: scale(1.14);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .22);
	position: relative;
	z-index: 1;
}

.adz-sv-work img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

/* Hàng chấm điều hướng: chấm đang xem kéo dài thành viên thuốc, giống mẫu. */
.adz-sv-works-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.adz-sv-works-dot {
	width: 12px;
	height: 12px;
	min-width: 12px;
	min-height: 12px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #999;
	cursor: pointer;
	transition: width .3s ease, background .3s ease;
	margin: 32px 0 0;
}

.adz-sv-works-dot.is-active {
	width: 32px;
	background: var(--adz-gold-soft);
}

/* --- Khối của trang Dịch Vụ khi được nhúng vào trang thường (trang chủ) ---
   Ở page template, section in thẳng vào #content nên rộng hết trang. Trong
   nội dung trang thường thì nó nằm trong .col-inner có max-width, nền chỉ phủ
   trong cột. Kéo ra mép bằng 100vw; 100vw tính cả thanh cuộn dọc nên phải cắt
   phần thừa ở .page-wrapper, nếu không cả trang có thanh cuộn ngang.
   Class .adz-has-sv-block do adzio_sv_body_class() gắn. */
.adz-has-sv-block .page-wrapper {
	overflow-x: clip;
}

.adz-has-sv-block .col-inner>.adz-sec {
	position: relative;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
}

/* Nằm trong .col-inner nghĩa là .row bên trong section đã thành row LỒNG, mà
   Flatsome cố tình bỏ max-width của row lồng (đúng với lưới, sai với trường hợp
   này) nên nội dung dính sát mép. Trả lại bề ngang container — lấy từ biến
   --adz-container do functions.php đọc thẳng Customizer, không viết cứng. */
.adz-has-sv-block .col-inner>.adz-sec>.section-content>.row {
	max-width: var(--adz-container, 1170px);
	margin-left: auto;
	margin-right: auto;
	/* 30px = padding row (15) + padding col (15) của Flatsome; row lồng bị bỏ cả
	   hai nên gộp lại đặt một chỗ, lề khớp đúng trang Dịch Vụ. */
	padding-left: 1rem;
	padding-right: 1rem;
}

/* --- Mảng TỐI: hệ sinh thái dịch vụ + số liệu --- */
.adz-sv-dark .adz-sv-h2 {
	color: #fff;
}

/* Bản cũ tô VÀNG nhãn này cho nổi trên navy. Hết vàng thì phải để trắng mờ —
   dùng --adz-gold (nay là đen) là mất hẳn chữ trên nền tối. */

.adz-sv-dark .adz-sv-head-r p {
	color: rgba(255, 255, 255, .62);
}

/* Khối Dịch vụ gộp: danh sách dịch vụ → biểu đồ số liệu → dải logo, cách nhau
   bằng gap chứ không phải nền/section riêng, để cả mảng tối liền một khối. */
.adz-sv-services {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.adz-sv-eco-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 46px;
}

/* Thẻ có dấu sao ở đầu và mũi tên chếch ở góc dưới phải như mẫu. Mũi tên tụt
   xuống đáy bằng margin-top:auto nên thẻ cao thấp khác nhau vẫn thẳng hàng. */
.adz-sv-eco-card {
	display: flex;
	flex-direction: column;
	background: rgba(245, 245, 245, 0.1);
	border: 1px solid #666;
	border-radius: 12px;
	padding: 32px 36px;
	backdrop-filter: blur(24px);
}

.adz-sv-eco-card .adz-sv-star {
	display: block;
	margin-bottom: 18px;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--adz-gold);
}

/* Chữ thường trong thẻ đã là 1rem (sàn), nên tiêu đề nhích lên cho còn phân cấp. */
.adz-sv-eco-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
	margin: 0 0 28px;
	line-height: 1.15;
}

.adz-sv-eco-card p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.15;
	color: #f4f4f4;
}

.adz-sv-eco-card-arrow {
	margin-top: auto;
	padding-top: 22px;
	align-self: flex-end;
	font-size: 1.2rem;
	color: #fff;
	transform: rotate(-45deg);
	transform-origin: center;
	/* chếch lên như mẫu */
}

/* Danh sách dịch vụ bấm mở – dùng <details> nên chạy được cả khi không có JS.
   Mẫu bọc cả danh sách trong một khung bo góc có viền, không để dòng trần. */
.adz-sv-eco-list {
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	overflow: hidden;
	background: rgba(245, 245, 245, 0.1);
	backdrop-filter: blur(24px);
}

.adz-sv-eco-item+.adz-sv-eco-item {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Lưới 4 cột: ảnh · (tên + mô tả) · (Chi tiết + tag) · nút bung.
   align-items:start để khi dòng mở ra, tên vẫn nằm ngang hàng với chữ "Chi tiết"
   thay vì bị dồn xuống giữa khối. */
.adz-sv-eco-item>summary {
	display: grid;
	align-items: start;
	grid-template-columns: minmax(220px,256px) minmax(300px,360px) auto;
	gap: 48px;
	padding: 20px 108px;
	cursor: pointer;
	list-style: none;
	transition: background .2s ease;
}

.adz-sv-eco-item>summary::-webkit-details-marker {
	display: none;
}

.adz-sv-eco-item>summary:hover {
	background: rgba(255, 255, 255, .04);
}

/* Chỉ định cột TƯỜNG MINH cho từng phần. Nếu để grid tự xếp thì dòng nào chưa
   có ảnh (hoặc chưa có tag) sẽ trượt mọi thứ sang trái một cột: nút bung nhảy
   vào giữa dòng và cụm tag bị bóp còn một sợi. */
.adz-sv-eco-thumb {
	grid-column: 1;
}

.adz-sv-eco-main {
	grid-column: 2;
}

.adz-sv-eco-detail {
	grid-column: 3;
}

.adz-sv-eco-plus {
	grid-column: 4;
}

/* Mô tả và cụm tag chỉ lộ ra khi dòng đang mở. Dùng visibility+height thay cho
   display:none để ô lưới vẫn tồn tại, cột không bị co lại khi dòng đóng. */
.adz-sv-eco-item:not([open]) .adz-sv-eco-desc,
.adz-sv-eco-item:not([open]) .adz-sv-eco-detail {
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

.adz-sv-eco-main {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.adz-sv-eco-desc {
	font-size: 1rem;
	line-height: 1.7;
	color: #cacaca;
}

.adz-sv-eco-detail {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.adz-sv-eco-detail-h {
	font-size: 1rem;
	letter-spacing: .04em;
	color: #d9d9d9;
	font-weight: 600;
}

/* Cụm ảnh của một dịch vụ: nhiều ảnh xếp chồng chéo lên nhau như mẫu.
   Ảnh sau đè lên ảnh trước theo đúng thứ tự trong thư viện — không cần z-index,
   thẻ đứng sau vốn đã nằm trên. Viền tối mảnh để hai ảnh liền nhau không dính
   thành một mảng. */
.adz-sv-eco-thumb {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.adz-sv-eco-thumb img {
	display: block;
	width: 68px;
	height: 68px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid #14100f;
	background: rgba(255, 255, 255, .08);
}

.adz-sv-eco-thumb img+img {
	margin-left: -16px;
}

.adz-sv-eco-name {
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -.01em;
	color: #fff;
}

.adz-sv-eco-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.adz-sv-tag {
	/* Chữ 1rem thì đệm mỏng lại cho viên tag khỏi phình. */
	font-size: 12px;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 999px;
	background: #f5f5f5;
	color: #000;
	font-weight: 600;
}

.adz-sv-eco-item img.adz-sv-eco-plus {
	transition: transform .2s ease;
}

.adz-sv-eco-item[open] img.adz-sv-eco-plus {
	transform: rotate(180deg);
}

/* Nút nằm TRONG khung danh sách, thành dòng cuối cùng có vạch ngăn phía trên
   như mẫu. `.is-loose` là trường hợp chưa nhập dịch vụ nào: không có khung nên
   nút đứng rời bên dưới. */
.adz-sv-eco-foot {
	padding: 22px 108px 70px;
}

.adz-sv-eco-item+.adz-sv-eco-foot {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.adz-sv-eco-foot.is-loose {
	padding: 0;
	margin-top: 40px;
}

/* Số liệu trên nền tối.
   Mẫu chia hai: biểu đồ cột trái rộng, thẻ chữ cột phải hẹp và cao suốt hàng. */
.adz-sv-metrics-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

.adz-sv-metrics-charts {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.adz-sv-metric {
	flex: 1 1 auto;
	background: rgba(245, 245, 245, 0.1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	padding: 26px 26px 22px;
	backdrop-filter: blur(24px);
}

.adz-sv-metric h3 {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
	margin: 0;
}

.adz-sv-metrics-note {
	display: flex;
	flex-direction: column;
	background: rgba(245, 245, 245, 0.1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	padding: 30px 28px;	
	backdrop-filter: blur(24px);
}

.adz-sv-metrics-note h3 {
	margin: 0 0 22px;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -.01em;
	color: #fff;
}

.adz-sv-metrics-note p {
	margin: auto 0 0;
	font-size: 18px;
	line-height: 1.4;
	color: #c9c9c9;
	text-align: justify;
}

/* Biểu đồ thanh ngang có trục: nhãn nằm TRÊN thanh, đường kẻ đứt dọc xuyên qua,
   mốc trục in dưới đáy. Đường kẻ là thẻ tuyệt đối nên nằm đè lên thanh như mẫu,
   nếu để làm background của khối thì bị chính thanh che mất. */
.adz-sv-plot {
	position: relative;
}

.adz-sv-bars.has-axis {
	position: relative;
}

.adz-sv-bars-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.adz-sv-bars-grid span {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px dashed rgba(255, 255, 255, .22);
}

.adz-sv-bars-grid span:first-child {
	border-left: 0;
}

.adz-sv-bars-ticks {
	position: relative;
	height: 24px;
	margin-top: 10px;
}

.adz-sv-bars-ticks span {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
	white-space: nowrap;
}

.adz-sv-bars.is-rows.has-axis .adz-sv-bar {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.adz-sv-bars.is-rows.has-axis .adz-sv-bar-lbl {
	flex: 0 0 auto;
	order: -1;
	margin: 0;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	line-height: 1;
}

.adz-sv-bars.is-rows.has-axis .adz-sv-bar-col {
	height: 50px;
}

.adz-sv-bars.is-rows.has-axis .adz-sv-bar-col i {
	border-radius: 6px;
}

/* Trên nền tối cần rãnh mờ phía sau thanh mới thấy được độ dài tương đối.
   Rãnh giữ màu TRUNG TÍNH (trắng 8%) chứ không tô xanh nhạt: rãnh là khung, tô
   cùng sắc với thanh thì hết phân biệt đâu là giá trị đâu là chỗ trống. */
.adz-sv-dark .adz-sv-bars.is-rows .adz-sv-bar-col {
	border-radius: 3px;
}

/* Cột được tô nổi (dòng có dấu * hoặc cột lớn nhất do PHP tự chọn): trên nền
   tối dùng màu nhấn thương hiệu thay cho xanh --adz-viz của biểu đồ nền sáng,
   giống mẫu tô một thanh nổi bật giữa các thanh xám. */
.adz-sv-dark .adz-sv-bars.has-hi .adz-sv-bar.is-hi .adz-sv-bar-col i {
	background: var(--adz-gold-soft);
}

.adz-sv-dark .adz-sv-bar-lbl {
	color: rgba(255, 255, 255, .55);
}

/* --- Dải logo (chứng nhận đối tác & logo khách hàng) ---
   Cùng một kiểu như mẫu: khung tối bo góc, logo chia đều suốt hàng, ảnh chuyển
   đen trắng bằng CSS. Hai dải dùng chung bộ luật này để không lệch nhau. */
.adz-sv-logos,
.adz-sv-brands {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	padding: 30px 40px;
	backdrop-filter: blur(24px);
}

.adz-sv-logos {
	margin-top: 120px;
}

.adz-sv-brands-h {
	display: block;
	margin-bottom: 22px;
	font-size: 1rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .42);
}

/* space-between đẩy logo đầu/cuối sát mép khung như mẫu; wrap để hàng dài tự
   xuống dòng thay vì bóp logo bé lại. */
.adz-sv-logos,
.adz-sv-brands-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px 40px;
}

/* Mỗi logo chiếm một phần đều nhau của hàng rồi canh giữa ô của mình: dải 2
   logo hay 8 logo đều dàn cân, không bị dồn một cục về trái hay dính hai mép. */
.adz-sv-logo,
.adz-sv-brand {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Đen trắng + `screen`: grayscale bỏ màu, còn screen làm phần TỐI của ảnh tan
   vào khung (đen trên nền tối = trong suốt). Nhờ vậy huy hiệu có nền đặc màu
   tối chỉ còn lại nét chữ sáng, đúng kiểu mẫu, mà không cần sửa file ảnh.
   Ảnh có nền TRẮNG đặc thì screen không xoá được nền (trắng screen ra trắng) —
   muốn giống mẫu hoàn toàn phải thay bằng file nền trong suốt. */
.adz-sv-logo img,
.adz-sv-brand img {
	height: 34px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	filter: grayscale(1) contrast(1.35);
	mix-blend-mode: screen;
	opacity: .88;
	transition: opacity .2s ease;
}

.adz-sv-logo img:hover,
.adz-sv-brand img:hover {
	opacity: 1;
}

/* Logo một màu trên nền TRONG SUỐT: ép hẳn về trắng như mẫu. brightness(0) dìm
   mọi màu về đen rồi invert lật thành trắng — chỉ dùng khi ảnh KHÔNG có nền đặc,
   nếu không cả tấm ảnh sẽ thành một khối trắng (nên mới có công tắc ACF). */
.adz-sv-brands.is-white .adz-sv-brand img {
	filter: brightness(0) invert(1);
	mix-blend-mode: normal;
}

/* --- Giải pháp SEO ---
   Ba cột như mẫu: vòng điểm để TRẦN (không khung) · thẻ nền tối · thẻ nền trắng.
   Cột vòng điểm hẹp nhất, thẻ trắng rộng nhất vì phải chứa biểu đồ đường. */
.adz-sv-seo-body {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 20px;
	align-items: stretch;
}

.adz-sv-gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px 16px;
}

/* Con số canh giữa theo chính vòng tròn, nên bọc riêng một lớp: nếu neo vào cả
   cột thì thêm chú thích bên dưới là số bị lệch xuống. */
.adz-sv-gauge-ring {
	position: relative;
	width: 100%;
	max-width: 230px;
}

.adz-sv-gauge svg {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-90deg);
}

.adz-sv-gauge-bg {
	fill: none;
	stroke: #ececec;
	stroke-width: 8;
}

.adz-sv-gauge-fg {
	fill: none;
	stroke: #bfbfbf;
	stroke-width: 8;
	stroke-linecap: round;
}

.adz-sv-gauge-num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 4rem;
	color: #333;
	line-height: 1.6;
}

.adz-sv-gauge-lbl {
	margin-top: 26px;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--adz-ink);
}

.adz-sv-gauge-note {
	margin-top: 10px;
	max-width: 300px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--adz-muted);
}

/* --- Cột 2: thẻ nền tối --- */
.adz-sv-seo-dark {
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: #111;
	border-radius: 16px;
	padding: 26px;
	background-image: url(assets/img/sec-dark-bg.webp);
    background-position: center top;
    background-size: 100% 100%;
}

.adz-sv-seo-dark h3 {
	margin: 0;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -.02em;
	color: #fff;
}

/* Khung trong lồng thêm một bậc sáng hơn nền thẻ, đúng kiểu mẫu. */
.adz-sv-seo-panel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1 1 auto;
	background: rgba(255, 255, 255, .1);
	border-radius: 12px;
	padding: 20px;
	backdrop-filter: blur(24px);
}

.adz-sv-seo-panel-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.adz-sv-seo-panel-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.adz-sv-seo-panel-stat span {
	font-size: 12px;
	line-height: 1.18;
	color: #d9d9d9;
}

.adz-sv-seo-panel-stat strong {
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -.02em;
	color: #fff;
}

.adz-sv-seo-legend {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	font-size: 1rem;
	color: rgba(255, 255, 255, .6);
	white-space: nowrap;
}

.adz-sv-seo-legend li {
	margin-bottom: 0;
}

.adz-sv-seo-legend b {
	color: #fff;
	font-weight: 600;
}

/* Chấm tròn trước mỗi mục, mục đầu ăn theo màu của dãy cột. */
.adz-sv-seo-legend li::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: #18d968;
	vertical-align: middle;
}

.adz-sv-seo-legend li.is-a::before {
	background: var(--adz-gold-soft);
}

/* Dãy cột nhỏ tự chạy ngang mãi (JS dịch từng cột một, xem js/adzio.js).
   Khung cắt bớt hai mép và làm mờ dần để thấy "còn cột phía sau nữa"; cột nào
   trôi ra khỏi mép trái thì JS nối lại ở phải, không bao giờ hết. */
/* `min-width: 0` là BẮT BUỘC: dải cột bên trong để `width: max-content` (dài cả
   nghìn px để có gì mà chạy), nên nếu không cho phép khung co lại thì "cỡ tối
   thiểu tự động" của flex/grid item lấy luôn bề ngang dải đó — ô lưới phình ra
   ~1160px, nội dung trôi khỏi màn hình và `overflow: hidden` cũng không cắt được.
   Đây chính là lỗi khối SEO ở trang chủ trên mobile. */
.adz-sv-spark {
	position: relative;
	overflow: hidden;
	min-width: 0;
	height: 120px;
	margin-top: auto;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* width:max-content để track dài theo tổng số cột chứ không co về bề ngang khung
   — có dài hơn khung thì mới có gì mà chạy. */
.adz-sv-spark-track {
	display: flex;
	align-items: flex-end;
	height: 100%;
	width: max-content;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

/* Khe giữa các cột là margin-right của CHÍNH cột (không dùng gap): nhờ vậy mỗi
   cột chiếm đúng "bề ngang + khe", JS nhân số đó ra là ra bước nhảy chuẩn. */
.adz-sv-spark-bar {
	flex: 0 0 auto;
	width: 12px;
	margin-right: 6px;
	height: var(--adz-v, 0%);
	border-radius: 2px;
	background: var(--adz-gold-soft);
}

@media (prefers-reduced-motion: reduce) {
	.adz-sv-spark-track {
		transition: none;
	}
}

/* --- Cột 3: thẻ nền trắng --- */
.adz-sv-seo-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--adz-border);
	border-radius: 16px;
	padding: 24px;
}

.adz-sv-seo-card:last-child {
	box-shadow: 0 4px 16px var(--tw-shadow-color,#00000040);
}

.adz-sv-seo-card h3 {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--adz-ink);
	margin: 0;
}

.adz-sv-seo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.adz-sv-seo-pill {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-radius: 10px;
	padding: 10px 16px;
	background: #bfbfbf;
}

.adz-sv-seo-pill em {
	font-style: normal;
	font-size: 12px;
	color: #fff;
}

.adz-sv-seo-pill b {
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff;
	line-height: 1;
}

/* Ô đầu tiên tô màu nhấn. Chữ giữ màu mực đen: chữ trắng trên nền vàng nhạt chỉ
   đạt ~2:1, không đọc nổi. */
.adz-sv-seo-pill.is-a {
	background: var(--adz-gold-soft);
}

/* Biểu đồ 2 đường: khung co giãn, lưới kẻ đứt dọc, nhãn trục dưới đáy. */
.adz-sv-lines {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}

.adz-sv-lines-plot {
	position: relative;
	flex: 1 1 auto;
	min-height: 160px;
}

.adz-sv-lines-plot svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.adz-sv-lines-grid span {
	position: absolute;
	top: 0;
	bottom: 0;
	border-left: 1px dashed rgba(0, 0, 0, .14);
}

.adz-sv-lines-a,
.adz-sv-lines-b {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.adz-sv-lines-a {
	stroke: var(--adz-gold-soft);
}

.adz-sv-lines-b {
	stroke: #cfcfcf;
}

.adz-sv-lines-lbls {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	font-size: 1rem;
	color: var(--adz-muted);
}

/* Nhãn trục KHÔNG được xuống dòng: nhãn gãy làm hai dòng trông như hai mốc khác
   nhau. Chỗ hẹp thì nhập ÍT MỐC hơn / nhãn ngắn hơn (Jan, Feb…) chứ không bẻ chữ
   — trước đây có media query tự ẩn mốc chẵn, nhưng với 3 mốc thì nó ăn mất mốc
   giữa nên đã bỏ. */
.adz-sv-lines-lbls span {
	white-space: nowrap;
}

/* --- Dự án tiêu biểu --- */
/* --- Dự án tiêu biểu ---
   Mẫu: ảnh chiếm TRỌN thẻ, thẻ phân loại nổi góc trên phải, tên dự án và nút
   "Xem thêm" đè lên đáy ảnh trên một lớp phủ tối. Ảnh không còn là khối riêng
   phía trên chữ như trước. */
.adz-sv-cases-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.adz-sv-case {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: var(--adz-gold-soft);
	isolation: isolate;
}

.adz-sv-case-img {
	margin: 0;
}

.adz-sv-case-img img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.adz-sv-case-tags {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	max-width: 72%;
}

.adz-sv-case-tag {
	padding: 5px 13px;
	border-radius: 999px;
	white-space: nowrap;
	background: #d9d9d926;
	border: 1px solid rgba(255, 255, 255, .38);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 1rem;
	line-height: 1;
	color: #fff;
}

/* Lớp phủ chỉ ở nửa dưới để chữ trắng đọc được mà không làm đục cả ảnh */
.adz-sv-case-body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 70px 22px 22px;
	background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .35) 45%, transparent);
}

.adz-sv-case h3 {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
}

.adz-sv-case p {
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78);
}

.adz-sv-case-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border-radius: 8px;
	background: #fff;
	color: var(--adz-ink);
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	transition: transform .2s ease;
}

.adz-sv-case-btn i {
	font-size: 1em;
	transform: rotate(-45deg);
}

/* mũi tên chếch lên như mẫu */
.adz-sv-case-btn.is-lead {
	background: var(--adz-gold);
	color: #fff;
}

.adz-sv-case-btn:hover {
	transform: translateY(-2px);
	color: var(--adz-ink);
}

.adz-sv-case-btn.is-lead:hover {
	color: #fff;
}

/* --- Đánh giá khách hàng (lưới so le) ---
   Mẫu là lưới DÀY nhiều thẻ nhỏ, nên thẻ để gọn: chữ nhỏ, padding vừa phải. */
.adz-sv-reviews-grid {
	columns: 4;
	column-gap: 20px;
}

.adz-sv-review {
	break-inside: avoid;
	margin: 0 0 20px;
	padding: 18px 18px 20px;
	background: #fff;
	box-shadow: 0 12px 30px #0000000a;
	border-radius: 10px;
}

/* Câu nhận xét nằm DƯỚI cụm người nói (mẫu), nên lề đẩy xuống chứ không lên. */
.adz-sv-review blockquote {
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	font-family: var(--adz-font-b);
	font-style: normal;
	font-weight: 400;
	font-size: .9375rem;
	line-height: 1.65;
	color: #4a4a4a;
}

/* Ảnh · tên · nơi làm nằm bên trái, dấu ngoặc kép dạt hẳn sang phải */
.adz-sv-review figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
}

.adz-sv-review-av {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--adz-gold-soft);
}

.adz-sv-review-av img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.adz-sv-review-who {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.adz-sv-review-who strong {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--adz-ink);
}

.adz-sv-review-who span {
	font-size: .8125rem;
	color: var(--adz-muted);
}

/* Dấu ngoặc kép trang trí: chỉ là ký tự nên không thêm ảnh, không thêm request.
   `align-self: flex-start` để nó neo theo mép trên thẻ như mẫu. */
.adz-sv-review-mark {
	margin-left: auto;
	align-self: flex-start;
	flex: 0 0 auto;
	/* Font chữ chính vẽ ” thành hai gạch thẳng; serif mới ra hai dấu phẩy
	   như mẫu, nên chỗ trang trí này cố tình dùng font khác. */
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 2.5rem;
	line-height: .8;
	color: #c9c9c9;
}

.adz-sv-review-mark::before {
	content: '\201D\201D';
	letter-spacing: .1em;
}

@media (max-width: 1200px) {
	.adz-sv-reviews-grid {
		columns: 3;
	}
}

/* --- Câu hỏi thường gặp: chữ bên trái · danh sách bên phải (theo mẫu) --- */
.adz-sv-faq {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 30px 60px;
	align-items: start;
}

.adz-sv-faq-l {
	position: sticky;
	top: 100px;
}

.adz-sv-faq-intro {
	margin-top: 18px;
}

.adz-sv-faq-intro p {
	margin: 0 0 12px;
	font-size: 1rem;
	line-height: 1.25;
	color: #595959;
}

.adz-sv-faq-r {
	display: grid;
	gap: 12px;
}

.adz-sv-faq-item {
	background-color: #f5f5f580;
	border-radius: 10px;
	border: 1px solid #f5f5f5;
}

.adz-sv-faq-item>summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: 20px;
	color: #262626;
	
}

.adz-sv-faq-item>summary::-webkit-details-marker {
	display: none;
}

.adz-sv-faq-item>summary:hover {
	color: var(--adz-gold-dark);
}

/* Nút bung: đĩa tròn đen, dấu + đổi thành − khi mở (giống mẫu).
   Hai gạch vẽ bằng ::before (ngang) và ::after (dọc), KHÔNG dùng ký tự "+"
   vì ký tự lệch theo font và không canh giữa được ở mọi cỡ chữ.
   Đây là component RIÊNG của FAQ — bản cũ mượn `.adz-sv-eco-plus` của khối
   dịch vụ, mà class đó chỉ khai `grid-column` nên ra một thẻ span rỗng vô hình. */
.adz-sv-faq-plus {
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--adz-ink);
}

.adz-sv-faq-plus::before,
.adz-sv-faq-plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}

.adz-sv-faq-plus::before {
	width: 12px;
	height: 2px;
}

.adz-sv-faq-plus::after {
	width: 2px;
	height: 12px;
	transition: transform .2s ease, opacity .2s ease;
}

/* Mở: giấu gạch dọc đi, còn lại dấu trừ. Xoay kèm cho mượt. */
.adz-sv-faq-item[open] {
	box-shadow: 0 4px 16px #00000040;
}
.adz-sv-faq-item[open] .adz-sv-faq-plus::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.adz-sv-faq-a {
	padding: 0 20px 20px;
}

.adz-sv-faq-a p {
	margin: 0 0 12px;
	font-size: 1rem;
	line-height: 1.75;
	color: #262626;
}

.adz-sv-faq-a p:last-child {
	margin-bottom: 0;
}

/* --- Tin tức ---
   Thẻ bài là component `.adz-pc` dùng chung với trang Blog (khai ở phần BLOG /
   KIẾN THỨC phía trên) — ở đây chỉ xếp lưới và nhấc cỡ chữ tiêu đề cho khớp
   nhịp chữ của layout Dịch Vụ. Đừng khai lại kiểu thẻ ở đây. */
.adz-sv-posts-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 24px;
}

.adz-sv-posts-grid .adz-pc-title {
	font-size: 1.02rem;
}

.adz-sv-posts-grid .adz-pc:hover .adz-pc-title {
	color: var(--adz-gold-dark);
}

/* --- Khối liên hệ cuối trang (nền vàng) --- */
.adz-sv-cta {
	position: relative;
	overflow: hidden;
}

.adz-sv-cta-title {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 22ch;
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.03em;
	color: #fff;
}

.adz-sv-cta-foot {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 34px 70px;
	margin-top: 54px;
}

.adz-sv-cta-info,
.adz-sv-cta-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adz-sv-cta-info {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 46px;
	max-width: 620px;
}

.adz-sv-cta-info li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 34ch;
}

.adz-sv-cta-info span {
	font-size: 1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.adz-sv-cta-info strong {
	font-family: var(--adz-font-d);
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
}

.adz-sv-cta-links {
	display: grid;
	gap: 10px;
}

.adz-sv-cta-links a {
	font-family: var(--adz-font-d);
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.adz-sv-cta-links a:hover {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .7);
}

.adz-sv-cta-btn {
	margin-left: auto;
}

/* Dấu thương hiệu cỡ lớn làm hoạ tiết nền góc dưới bên phải, giống mẫu.
   Cắt bớt phần chân chữ cho dính đáy khối; để mờ vừa đủ để chữ đè lên vẫn đọc được. */
.adz-sv-cta-mark {
	position: absolute;
	right: -.04em;
	bottom: -.2em;
	z-index: 0;
	pointer-events: none;
	font-family: var(--adz-font-d);
	font-weight: 800;
	line-height: .8;
	/* Cỡ chữ tính theo độ dài wordmark ("alpha mkt." dài gấp ~1.7 lần "adzio.")
	   để hoạ tiết vẫn nằm gọn ở góc phải, không đè lên cột link. */
	font-size: clamp(3.4rem, 9vw, 8rem);
	letter-spacing: -.05em;
	color: rgba(255, 255, 255, .13);
}

.adz-sv-head-l {
	max-width: 480px;
}

.adz-sv-head-r {
	max-width: 560px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.adz-sec-sv-intro,
	.adz-sec-sv-values,
	.adz-sec-sv-works,
	.adz-sec-sv-seo,
	.adz-sec-sv-reviews {
		padding: 70px 0 70px !important;
	}

	.adz-sec-sv-eco {
		padding: 76px 0 76px !important;
	}

	.adz-sec-sv-metrics {
		padding: 30px 0 76px !important;
	}

	.adz-sv-services {
		gap: 44px;
	}

	.adz-sv-logos,
	.adz-sv-brands {
		padding: 26px 30px;
	}

	.adz-sv-hero {
		gap: 56px;
	}

	.adz-sv-hero-top,
	.adz-sv-hero-bot {
		gap: 32px;
	}
	.adz-sv-eco-card h3 {
		font-size: 20px;
	}

	/* Cụm tiêu đề nay là FLEX (không còn grid), nên muốn xuống hàng phải đổi
	   flex-direction — `grid-template-columns` ở đây là lệnh chết, tiêu đề vẫn
	   nằm cạnh đoạn mô tả và bị bóp còn một cột chữ dựng đứng. */
	.adz-sv-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 38px;
	}

	/* Bỏ trần bề ngang của desktop, để hai phần chiếm trọn hàng khi đã xếp dọc. */
	.adz-sv-head-l,
	.adz-sv-head-r {
		width: 100%;
		max-width: none;
	}

	.adz-sv-h2 {
		max-width: none;
		font-size: 20px;
	}
	
	.adz-sv-head-r p {
		font-size: 1rem;
	}
	.adz-sv-intro-body {
		grid-template-columns: 1fr;
	}

	/* Xếp dọc thì ảnh dọc 3/4 quá cao — đổi tỉ lệ, vẫn không đặt px. */
	.adz-sv-intro-img {
		aspect-ratio: 16 / 9;
	}

	.adz-sv-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(240px, auto);
	}

	.adz-sv-eco-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Ba cột hết chỗ: vòng điểm nằm nguyên một hàng, hai thẻ chia đôi hàng dưới. */
	.adz-sv-seo-body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.adz-sv-gauge {
		grid-column: 1 / -1;
		padding-bottom: 24px;
	}

	.adz-sv-cases-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.adz-sv-reviews-grid {
		columns: 2;
	}

	.adz-sv-posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.adz-sv-faq {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.adz-sv-faq-l {
		position: static;
	}
}

@media (max-width: 768px) {
	.adz-sec-sv-hero {
		padding: 40px 0 0 !important;
	}

	#main-menu .nav-sidebar>li>a {
		font-size: 28px;
		font-weight: 600;
	}

	.adz-sec-sv-intro,
	.adz-sec-sv-values,
	.adz-sec-sv-works,
	.adz-sec-sv-seo,
	.adz-sec-sv-reviews,
	.adz-sec-sv-faq {
		padding: 54px 0 54px !important;
	}

	.adz-sec-sv-eco {
		padding: 58px 0 58px !important;
	}

	.adz-sv-services {
		gap: 34px;
	}

	.adz-sec-sv-metrics {
		padding: 24px 0 58px !important;
	}

	.adz-sec-sv-cases {
		padding: 14px 0 58px !important;
	}

	.adz-sec-sv-posts {
		padding: 30px 0 62px !important;
	}

	.adz-sec-sv-cta {
		padding: 62px 0 62px !important;
	}

	/* Hero xếp dọc: thẻ ảnh → chữ → thẻ đánh giá → dòng nhỏ */
	.adz-sv-hero {
		gap: 26px;
	}

	.adz-sv-hero-top {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	/* Hàng dưới của hero là FLEX ngang: phải đổi hướng mới xếp dọc được
	   (grid-template-columns không có tác dụng lên flex container). */
	.adz-sv-hero-bot {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 26px;
	}

	.adz-sv-hero-txt {
		padding-top: 0;
		max-width: none;
	}

	.adz-sv-hero-actions {
		margin-top: 24px;
	}

	/* .adz-sv-hero-actions .adz-sv-btn {
		flex: 1 1 100%;
	} */

	/* Xếp dọc thì trục ngang thành trục PHỤ: `align-self:end` của desktop (vốn để
	   dòng chữ tụt xuống đáy hàng) lại đẩy nó dạt sang mép phải. Trả về mép trái. */
	.adz-sv-hero-note {
		order: 9;
		align-self: flex-start;
		max-width: none;
	}

	.adz-sv-hero-stats {
		grid-template-columns: 1fr;
	}

	.adz-sv-hero-score {
		gap: 20px;
	}

	/* Một cột: bỏ mọi chỉ định hàng/cột của bố cục 2 cột ở trên, thẻ xếp dọc. */
	/* Một cột: xoá mọi chỉ định hàng/cột của bố cục 2 cột, thẻ tự xếp dọc và cao
	   theo nội dung (không còn hàng 1fr nào để chia). */
	.adz-sv-intro-cards {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.adz-sv-intro-cards> :nth-child(n) {
		grid-area: auto;
	}

	.adz-sv-card {
		padding: 22px;
	}

	.adz-sv-values {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 18px;
	}

	.adz-sv-claim {
		padding: 30px 26px;
	}

	.adz-sv-val-img img {
		height: auto;
	}

	.adz-sv-val-img {
		height: auto;
	}

	.adz-sv-val-card {
		padding: 24px 22px;
		height: auto;
	}
	
	.adz-sv-eyebrow {
		font-size: 14px;
		margin-bottom: 4px;
	}

	/* Thẻ hẹp lại thì thu khe theo cho cân; dải vẫn tự chạy, thời lượng giữ nguyên
	   nên nhịp "mỗi thẻ đi qua bao lâu" gần như không đổi. */
	.adz-sv-work {
		flex-basis: 190px;
		margin-right: 16px;
	}

	.adz-sv-eco-cards {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-bottom: 34px;
	}

	/* Hàng dịch vụ xuống 2 dòng: ảnh + tên + nút bung ở trên, cụm "Chi tiết"
	   chiếm trọn hàng dưới. Lưới 3 cột thay cho 4 cột của bản desktop. */
	.adz-sv-eco-item>summary {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 14px;
		padding: 18px 16px;
	}

	.adz-sv-eco-detail {
		grid-column: 1 / -1;
	}

	/* Màn hẹp: ảnh nhỏ lại và chồng sâu hơn để cụm ảnh không ăn hết bề ngang. */
	.adz-sv-eco-thumb img {
		width: 60px;
		height: 60px;
	}

	.adz-sv-eco-thumb img+img {
		margin-left: -20px;
	}

	.adz-sv-eco-name {
		font-size: 1rem;
	}

	.adz-sv-eco-foot {
		padding: 18px 16px;
	}

	.adz-sv-logos,
	.adz-sv-brands {
		padding: 22px;
	}

	/* Màn hẹp: logo về cỡ nhỏ và chỉ 2 logo một hàng, không dàn đều cả hàng nữa
	   (dàn đều ở đây làm mỗi logo bé tí mà cách nhau cả gang tay). */
	.adz-sv-logos,
	.adz-sv-brands-row {
		gap: 20px 26px;
		flex-wrap: nowrap;
		overflow: auto;
	}

	.adz-sv-logo,
	.adz-sv-brand {
		flex: 0 1 auto;
	}

	.adz-sv-logo img,
	.adz-sv-brand img {
		height: 24px;
	}

	.adz-sv-metrics-grid {
		grid-template-columns: 1fr;
	}

	.adz-sv-cases-grid {
		grid-template-columns: 1fr;
	}

	/* minmax(0, 1fr) chứ không phải 1fr: `1fr` = minmax(AUTO, 1fr) nên cột không
	   co được nhỏ hơn min-content của thẻ bên trong — một dải max-content là đủ
	   làm cả cột phình ra ngoài màn hình. */
	.adz-sv-seo-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.adz-sv-gauge-num {
		font-size: 2.6rem;
	}

	.adz-sv-seo-dark,
	.adz-sv-seo-card {
		padding: 20px;
	}

	.adz-sv-reviews-grid {
		columns: 1;
	}

	.adz-sv-posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 18px;
	}

	.adz-sv-faq-item>summary {
		padding: 15px 16px;
		font-size: 1rem;
		gap: 14px;
	}

	.adz-sv-faq-a {
		padding: 0 16px 16px;
	}

	.adz-sv-cta-foot {
		margin-top: 32px;
		gap: 26px 36px;
	}

	.adz-sv-cta-info {
		gap: 18px 28px;
	}

	.adz-sv-cta-btn {
		margin-left: 0;
		flex: 1 1 100%;
	}

	/* Dấu thương hiệu thu nhỏ và mờ hơn để không lấn chữ trên màn hình hẹp */
	.adz-sv-cta-mark {
		font-size: 3.4rem;
		color: rgba(255, 255, 255, .14);
	}
}

@media (max-width: 480px) {
	.adz-sv-posts-grid {
		grid-template-columns: 1fr;
	}

	.adz-sv-bars {
		height: 108px;
		gap: 6px;
	}

	.adz-sv-seo-card .adz-sv-bars {
		height: 140px;
	}
}

/* ============================================================
   TRANG DỊCH VỤ (template-service-list.php) – mẫu clay.global/services
   Ba khối: hero tối chỉ có chữ · danh sách dịch vụ ảnh/chữ đổi bên xen kẽ ·
   "Lĩnh vực triển khai" nền tối dạng danh sách gạch ngang.
   HERO NỀN TRẮNG (đổi 2026-08-11 theo yêu cầu khách; bản đầu là mảng tối liền
   header) — hero không đụng gì tới header. Cơ chế "mảng tối liền header" cũ của
   trang Về Chúng Tôi cũng đã bỏ trong cùng ngày, không còn chỗ nào dùng.
   ============================================================ */

/* --- Padding từng section (xem ghi chú ở .adz-sec) --- */
/* Hero trắng thì không phải chừa chỗ cho dải tối kéo lên phủ header nữa, nên
   padding-top rút từ 200px về 96px — để 200px chỉ còn là khoảng trắng hẫng. */
.adz-sec-sl-hero {
	padding: 96px 0 104px !important;
}

.adz-sec-sl-list {
	padding: 100px 0 40px !important;
}

/* Khối "Industries": nền ảnh dùng CHUNG với khối "Dịch vụ, số liệu & đối tác"
   ngoài trang chủ (`.adz-sec-sv-eco`) — cùng ảnh, cùng cách trải — để hai mảng
   tối trên hai trang đọc ra là một hệ. Đổi ảnh thì phải đổi CẢ HAI CHỖ. */
.adz-sec-sl-ind {
	padding: 118px 0 104px !important;
	background-image: url(assets/img/sec-dark-bg.webp);
	background-position: center top;
	background-size: 100% 100%;
	background-color: transparent;
}

/* Lớp phủ. Flatsome vẽ `.section-bg` ĐÈ LÊN nền của section, nên cả phần tối
   lẫn sắc đỏ đều phải đặt ở đây — đặt vào `background` của chính section thì bị
   lớp này che mất.
     · đen 50%: y như trang chủ, giữ cho chữ trắng còn đọc được trên ảnh;
     · hai lớp đỏ: một vệt lớn hắt từ góc trái dưới + một dải mỏng vắt ngang
       đỉnh — đủ thấy sắc đỏ mà không biến cả khối thành mảng đỏ đặc. */
.adz-sec-sl-ind .section-bg {
	background-color: #00000080;
	/* background-image:
		radial-gradient(120% 96% at 8% 108%, rgba(199, 32, 39, .58) 0%, rgba(199, 32, 39, .22) 38%, rgba(199, 32, 39, 0) 70%),
		linear-gradient(180deg, rgba(199, 32, 39, .16) 0%, rgba(199, 32, 39, 0) 46%); */
}

.adz-sec-sl-cta {
	padding: 84px 0 92px !important;
}

/* --- Phần đầu trang (nền trắng) --- */
.adz-sl-title {
	max-width: 760px;
	margin: 0;
	font-size: clamp(2.4rem, 5.4vw, 4.4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--adz-ink);
}

.adz-sl-title .adz-hl {
	color: var(--adz-hl);
}

.adz-sl-hero-lead {
	margin-top: 28px;
	max-width: 560px;
}

.adz-sl-hero-lead p {
	margin: 0 0 14px;
	color: #000;
	font-size: 20px;
	line-height: 1.75;
}

.adz-sl-hero-lead p:last-child {
	margin-bottom: 0;
}

/* --- Danh sách dịch vụ --- */
.adz-sl-label {
	margin: 0 0 30px;
	font-family: var(--adz-font-d);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--adz-gold);
	display: none;
}

.adz-sl-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Flex (không grid) vì `row-reverse` là cách gọn nhất để đổi bên mà DOM vẫn
   giữ thứ tự ảnh → chữ: bản mobile xếp dọc ra đúng thứ tự đọc, không cần
   `order` riêng. */
.adz-sl-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8%;
	padding: 62px 0;
}

.adz-sl-card.is-flip {
	flex-direction: row-reverse;
}

.adz-sl-card+.adz-sl-card {
	border-top: 1px solid var(--adz-border);
}

.adz-sl-visual {
	flex: 0 1 44%;
}

.adz-sl-body {
	flex: 0 1 46%;
}

.adz-sl-media {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--adz-gold-soft);
}

/* Khổ dọc 10/13 = padding-top 130% của mẫu; object-fit lo phần ảnh khác tỉ lệ
   nên khách thả ảnh ngang hay vuông vào đều không vỡ bố cục. */
.adz-sl-media img {
	display: block;
	width: 100%;
	aspect-ratio: 10 / 13;
	object-fit: cover;
}

.adz-sl-card-title {
	margin: 0 0 20px;
	font-size: clamp(1.8rem, 3.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: var(--adz-ink);
}

.adz-sl-card-text p {
	margin: 0 0 14px;
	color: var(--adz-muted);
	font-size: 1rem;
	line-height: 1.75;
}

.adz-sl-card-text p:last-child {
	margin-bottom: 0;
}

.adz-sl-points {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	border-top: 1px solid var(--adz-border);
}

.adz-sl-points li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--adz-border);
	font-size: .98rem;
	color: var(--adz-ink);
}

.adz-sl-points li::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--adz-gold);
}

.adz-sl-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	padding: 13px 26px;
	border-radius: 99px;
	background: var(--adz-ink);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	transition: background .25s var(--adz-ease), color .25s var(--adz-ease);
}

.adz-sl-more:hover {
	background: var(--adz-gold);
	color: var(--adz-ink);
}

.adz-sl-more i {
	font-size: .85em;
}

/* --- Lĩnh vực triển khai (nền tối) --- */
.adz-sl-ind-head {
	/* display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); */
	gap: 20px 6%;
	align-items: end;
	margin-bottom: 58px;
}

.adz-sl-h2 {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: #fff;
}

.adz-sl-h2 .adz-hl {
	color: var(--adz-hl);
}

.adz-sl-ind-lead p {
	margin: 0 0 12px;
	max-width: 520px;
	color: rgba(255, 255, 255);
	font-size: 16px;
	line-height: 1.75;
}

.adz-sl-ind-lead p:last-child {
	margin-bottom: 0;
}

.adz-sl-ind-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adz-sl-ind-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px 6%;
	padding: 28px 0 30px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.adz-sl-ind-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.adz-sl-ind-title {
	flex: 0 0 30%;
	margin: 0;
	font-size: clamp(1.2rem, 2.1vw, 1.55rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
}

/* Các mục trải ngang, tự xuống dòng; dấu phẩy do CSS chèn nên PHP không phải
   xử lý "mục cuối không có phẩy". */
.adz-sl-ind-text {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 0;
	color: rgba(255, 255, 255, .6);
	font-size: .98rem;
	line-height: 1.7;
}

.adz-sl-ind-text span {
	white-space: nowrap;
}

.adz-sl-ind-text span:not(:last-child)::after {
	content: ',';
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.adz-sec-sl-hero {
		padding: 76px 0 80px !important;
	}

	.adz-sec-sl-list {
		padding: 76px 0 30px !important;
	}

	.adz-sec-sl-ind {
		padding: 84px 0 76px !important;
	}

	.adz-sec-sl-cta {
		padding: 64px 0 70px !important;
	}

	.adz-sl-card {
		gap: 6%;
		padding: 48px 0;
	}

	.adz-sl-ind-head {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 42px;
	}

	.adz-sl-ind-title {
		flex-basis: 34%;
	}
}

@media (max-width: 768px) {
	.adz-sec-sl-hero {
		padding: 56px 0 56px !important;
	}

	.adz-sec-sl-list {
		padding: 54px 0 20px !important;
	}

	.adz-sec-sl-ind {
		padding: 60px 0 56px !important;
	}

	.adz-sec-sl-cta {
		padding: 50px 0 56px !important;
	}

	/* Xếp dọc: `column` (không `column-reverse` cho .is-flip) để hàng nào cũng
	   ra ảnh trước rồi tới chữ, đọc mới thuận. */
	.adz-sl-card,
	.adz-sl-card.is-flip {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 40px 0;
	}

	.adz-sl-media img {
		aspect-ratio: 4 / 3;
	}

	.adz-sl-points {
		margin-top: 24px;
	}

	.adz-sl-more {
		margin-top: 24px;
	}

	/* Tên lĩnh vực lên trên, các mục xuống dưới */
	.adz-sl-ind-item {
		flex-direction: column;
		gap: 10px;
		padding: 22px 0 24px;
	}

	.adz-sl-ind-title {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------
   HÌNH KHỐI NỀN CHUYỂN ĐỘNG (mẫu clay.global/services)
   Mẫu dựng bằng WebGL và MỖI DỊCH VỤ MỘT HỌ KHỐI KHÁC NHAU: cụm cầu · chồng
   đĩa dày · lập phương · cánh cong · hộp lớn. Ở đây làm bằng CSS thuần, giữ đúng
   nguyên tắc đó — họ khối do PHP gán theo chỉ số hàng (class .s-*).

   Ba tầng transform TÁCH RIÊNG, đừng gộp (gộp là đè nhau, mất hiệu ứng):
     .adz-sl-stage     - thị sai theo cuộn (biến --adz-p do js/adzio.js đặt)
     .adz-sl-stage-in  - zoom 90% lên 100% khi cuộn tới (class .is-in)
     từng khối con      - quỹ đạo trôi/quay riêng

   Mọi kích thước tính theo --sw (bề ngang sân khấu) nên đổi một chỗ là cả cụm
   theo, kể cả translateZ của lập phương.
   ------------------------------------------------------------ */

/* Khối nhô ra ngoài container ⇒ phải cắt cuộn ngang ở cấp trang. Dùng `clip`
   KHÔNG dùng `hidden`: `hidden` phá position:sticky của phần tử con. */
#wrapper:has(.adz-sl-stage) {
	overflow-x: clip;
}

.adz-sl-hero,
.adz-sl-card,
.adz-sl-ind {
	position: relative;
}

/* Nội dung luôn nằm TRÊN khối (khối ở z-index 0) */
.adz-sl-hero>*:not(.adz-sl-stage),
.adz-sl-ind>*:not(.adz-sl-stage),
.adz-sl-visual,
.adz-sl-body {
	position: relative;
	z-index: 1;
}

/* Vị trí — ĐO LẠI TRÊN MẪU 2026-08-16, đây là chỗ sai nặng nhất của bản trước.
   Ở clay.global/services, tâm cụm khối nằm CAO HƠN mép trên tấm ảnh chừng 45px
   trên cụm cao 410px, tức khoảng 60% chiều cao cụm nổi hẳn lên khoảng trắng giữa
   hai khối nội dung; ảnh chỉ ăn vào góc dưới-phải của cụm. Bản trước để top 30%
   nên cụm nằm ngang tấm ảnh và bị ảnh che gần hết — nhìn ra đúng một mẩu hộp với
   một hình cầu, tưởng là khối bị lỗi.

   Trục ngang: 44%/56% là mép trong của cột ảnh (ảnh rộng 44% bề ngang thẻ); mẫu
   đặt tâm cụm nhích qua mép đó một chút về phía ảnh. */
.adz-sl-stage {
	/* KHỔ CỤM.
	   `--sw-g` là khổ gốc, đo từ mẫu (2026-08-16, ảnh chụp clay.global/services ở
	   khung 1440): cụm khối của họ rộng ~455px phần thấy được. Sân khấu phải to hơn
	   thế vì model chỉ chiếm ~61% khung (phần còn lại là khoảng trống của hình cầu
	   bao). Trước từng để 700–860px, cụm to gần gấp đôi mẫu và trùm lên cả tiêu đề.

	   `--sw-k` là HỆ SỐ RIÊNG TỪNG DỊCH VỤ, do người nhập đặt ở ô "Khổ khối trang
	   trí" trong hàng dịch vụ (inc/service-list.php in ra dạng style inline). Không
	   nhập thì bằng 1. Trước đây chỗ này là ba class v0/v1/v2 xoay vòng theo thứ tự
	   hàng — không ai chọn được, mà mẫu thì cho mọi cụm đúng một khổ.

	   Đổi `--sw-g` thì KHÔNG phải sửa gì trong js/adzio-clay3d.js: khổ ảnh render ở
	   đó tự đo theo sân khấu lớn nhất có thật trên trang. */
	--sw-g: min(50vw, 670px);
	--sw: calc(var(--sw-g) * var(--sw-k, 1));
	position: absolute;
	z-index: 0;
	pointer-events: none;
	/* Mẫu để khoảng 60% chiều cao cụm nổi lên phía trên mép trên tấm ảnh, phần còn
	   lại lẩn sau góc trên tấm ảnh. Con số này ăn theo `--sw`: khung to lên thì
	   cụm tụt xuống, nên đổi `--sw` là phải soi lại chỗ này. Đừng đẩy lên quá (4%
	   trở lên) — cụm bay hẳn sang hàng trên và đè vào chữ của hàng đó. */
	top: 3%;
	left: 40%;
	width: var(--sw);
	height: var(--sw);
	transform: translate(-50%, calc(-50% + var(--adz-p, 0) * -64px));
	perspective: 1400px;
	/* cho lập phương có chiều sâu thật */
}

.adz-sl-card.is-flip .adz-sl-stage {
	left: 60%;
}

/* 2026-08-16: ĐẦU TRANG và khối "LĨNH VỰC TRIỂN KHAI" không còn khối 3D nữa
   (inc/service-list.php không in `.adz-sl-stage` ở hai chỗ đó), nên mấy rule định
   vị riêng cho `.adz-sl-hero .adz-sl-stage` / `.adz-sl-ind .adz-sl-stage` đã xoá.
   Muốn bật lại thì thêm `adzio_sl_stage_html()` ở PHP TRƯỚC, rồi mới viết lại
   rule vị trí — hai khối đó không có cột ảnh nên phải đặt riêng, không dùng chung
   được với hàng dịch vụ. */

/* --- Zoom nhẹ khi cuộn tới: 90% lên 100% --- */
.adz-sl-stage-in {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	perspective: 1400px;
	opacity: 0;
	transform: scale(.9);
	transition: transform 1.2s var(--adz-ease), opacity .9s var(--adz-ease);
}

.adz-sl-stage.is-in .adz-sl-stage-in {
	opacity: 1;
	transform: scale(1);
}


/* ============ SỨC NÉT ============
   ĐO LẠI 2026-08-16 (chụp headless clay.global/services ở 1440px rồi đọc pixel).
   Số cũ ghi ở đây — "#FA–#FC, xám ~2%" — là ĐO NHẦM CHỖ. Số đúng:

     #E1  mặt quay hẳn khỏi đèn (chỗ tối nhất trên cả trang)
     #E4  mặt trước khối hộp — tô ĐỀU cả mặt, không loang
     #EA  mép dưới hình cầu (đèn hắt từ nền lên)
     #FA  nóc khối hộp / đỉnh hình cầu
     Không bóng đổ.

   Tức dải rộng ~12% chứ không phải 2%, và điều quan trọng hơn màu: MẶT PHẲNG THÌ
   TÔ ĐỀU. Đó là thứ làm khối trông rắn và làm mấy khối chồng nhau vẫn tách bạch.
   Bản trước đổ gradient mạnh lên mọi mặt nên khối mềm oặt và dính vào nhau.

   Đổi màu ở đây thì đổi cùng lúc LIGHT_LIGHT trong js/adzio-clay3d.js — hai bản
   phải cùng sức nét, không thì bật tắt 3D là thấy khối đổi màu.
   ============================================================ */

/* ============ HỌ 1: CỤM CẦU (+1 HỘP LỌT GIỮA) ============
   Mẫu để LẪN một khối hộp vào cụm cầu chứ không thuần cầu — markup do
   adzio_sl_stage_html in ra 4 cầu + 1 hộp. */
.adz-sl-ball {
	position: absolute;
	display: block;
	border-radius: 50%;
	/* Đèn gần như thẳng từ trên xuống ⇒ điểm sáng nằm CAO và hơi lệch trái, tối dần
	   xuống đáy rồi HẮT SÁNG LẠI ở mép dưới cùng (mẫu đo được #E1 rồi lên #EA).
	   Chính vệt hắt cuối đó làm hình cầu "đặt" vào trang; bỏ đi là thành hình tròn
	   tô gradient. */
	background: radial-gradient(circle at 36% 24%, #FDFDFD 0%, #F6F6F6 32%, #EBEBEB 64%, #DEDEDE 90%, #E8E8E8 100%);
	animation: adz-sl-float 17s ease-in-out infinite alternate;
}

/* Bố cục cụm đo lại trên mẫu 2026-08-16 — PHẢI TRÙNG với FAMILIES.ball trong
   js/adzio-clay3d.js, hai bản chỉ khác cách vẽ chứ không được khác bố cục: hộp
   góc trên-trái, hai cầu lớn chồng nhau ở trên-phải, một cầu rơi xuống dưới-trái,
   một cầu nhỏ thụt sau ở dưới giữa. */
.adz-sl-ball.b1 {
	width: 40%;
	height: 40%;
	top: 16%;
	left: 36%;
}

.adz-sl-ball.b2 {
	width: 37%;
	height: 37%;
	top: 4%;
	left: 61%;
	animation-duration: 20s;
	animation-delay: -6s;
}

.adz-sl-ball.b3 {
	width: 34%;
	height: 34%;
	top: 62%;
	left: 4%;
	animation-duration: 23s;
	animation-delay: -13s;
}

.adz-sl-ball.b4 {
	width: 29%;
	height: 29%;
	top: 57%;
	left: 41%;
	animation-duration: 21s;
	animation-delay: -9s;
}

/* Hộp nằm TRƯỚC cụm cầu (bản 3D đẩy z = 12%), nên ở đây phải cho z-index cao hơn
   — không thì thứ tự che ngược hẳn với bản 3D. */
.s-ball .adz-sl-cube.k1 {
	--e: calc(var(--sw) * .43);
	top: 11%;
	left: 1%;
	z-index: 2;
	animation-duration: 27s;
}

/* ============ HỌ 2: THÁP ĐĨA MỎNG ============
   Mẫu xếp 5 đĩa MỎNG thành một cái tháp dọc (to ở giữa, nhỏ hai đầu), lệch
   trái–phải chút một; không phải đĩa dày rải chéo như bản trước.

   Mỗi đĩa = mặt trên (::before, hình bầu dục) + thành đứng (::after, bầu dục bị
   cắt nửa dưới). Không dùng 3D vì đĩa nhìn chếch từ trên chỉ cần 2 mảng này.

   Biên độ trôi để RẤT nhỏ (quỹ đạo riêng adz-sl-stack): trôi mạnh là 5 tầng tách
   nhau ra, mất hẳn hình cái tháp. */
.adz-sl-cyl {
	position: absolute;
	display: block;
	animation: adz-sl-stack 22s ease-in-out infinite alternate;
}

.adz-sl-cyl::before,
.adz-sl-cyl::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
}

/* Thành đứng sẫm hơn mặt trên, nếu không hai mảng dính thành một vệt phẳng. */
.adz-sl-cyl::after {
	top: 26%;
	bottom: 0;
	border-radius: 0 0 50% 50% / 0 0 62% 62%;
	background: linear-gradient(92deg, #E2E2E2 0%, #EFEFEF 34%, #E9E9E9 62%, #E1E1E1 100%);
}

/* Mặt trên hứng trọn đèn ⇒ gần như MỘT mức sáng, chỉ chênh vài mã. Đổ gradient
   mạnh ở đây là đĩa lại cong lên như cái mâm. */
.adz-sl-cyl::before {
	top: 0;
	height: 74%;
	border-radius: 50%;
	z-index: 1;
	background: linear-gradient(158deg, #FCFCFC 8%, #F9F9F9 52%, #F4F4F4 100%);
}

/* height nhỏ = đĩa mỏng; con số trùng với FAMILIES.cyl trong js/adzio-clay3d.js */
.adz-sl-cyl.c1 {
	width: 30%;
	height: 12%;
	top: 8%;
	left: 34%;
}

.adz-sl-cyl.c2 {
	width: 52%;
	height: 14%;
	top: 24%;
	left: 26%;
	animation-duration: 25s;
	animation-delay: -5s;
}

.adz-sl-cyl.c3 {
	width: 62%;
	height: 15%;
	top: 40%;
	left: 16%;
	animation-duration: 28s;
	animation-delay: -10s;
}

.adz-sl-cyl.c4 {
	width: 55%;
	height: 14%;
	top: 57%;
	left: 24%;
	animation-duration: 24s;
	animation-delay: -15s;
}

.adz-sl-cyl.c5 {
	width: 34%;
	height: 12%;
	top: 74%;
	left: 32%;
	animation-duration: 21s;
	animation-delay: -20s;
}

/* ============ HỌ 3+5: KHỐI HỘP CẠNH SẮC ============ */
/* 6 mặt thật + preserve-3d + quay chậm. translateZ tính theo --e (cạnh khối) nên
   khối co giãn cùng sân khấu, không phải sửa số ở nhiều nơi. */
.adz-sl-cube {
	position: absolute;
	display: block;
	width: var(--e);
	height: var(--e);
	transform-style: preserve-3d;
	/* LẮC quanh một góc nghiêng, KHÔNG quay trọn 360°: quay trọn thì cứ mỗi 90° lại
	   có lúc chỉ thấy đúng một mặt và khối trông phẳng như tấm bìa (bản đầu bị vậy
	   ở khối lớn). Lắc trong khoảng này thì lúc nào cũng thấy 3 mặt. */
	animation: adz-sl-spin 26s ease-in-out infinite alternate;
	/* KHÔNG đặt `filter` ở đây: filter tạo grouping context, huỷ `preserve-3d` của
	   chính phần tử này ⇒ sáu mặt bị dồn phẳng, khối thành tấm bìa. Muốn có bóng
	   thì đánh vào từng mặt (box-shadow) hoặc bọc thêm một lớp ngoài. */
}

/* `--d` = bề dày, tách khỏi `--e` (bề rộng/cao) để làm được TẤM PHẲNG của họ
   "slab": mẫu dùng một tấm rất lớn mà mỏng, không phải lập phương phóng to.
   Mặc định --d = --e ⇒ khối lập phương như cũ. */
.adz-sl-cube {
	--d: var(--e);
}

/* Mặt trước: mẫu tô ĐỀU #E4 suốt cả mặt. Chỉ chừa vài mã chênh cho đỡ chết cứng —
   đừng đổ gradient rộng, mặt phẳng mà loang là khối mềm như gối ngay. */
.adz-sl-cube i {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(152deg, #E8E8E8 6%, #E4E4E4 58%, #E1E1E1 100%);
}

/* Sáu mặt phải LỆCH SÁNG, nếu cùng một dải thì khối quay tới đâu cũng chỉ ra một
   mảng phẳng. Viền trong 1px tách hai mặt kề nhau. */
.adz-sl-cube i {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.adz-sl-cube i:nth-child(1) {
	transform: translateZ(calc(var(--d) / 2));
}

.adz-sl-cube i:nth-child(2) {
	transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
	background: linear-gradient(152deg, #E4E4E4, #E0E0E0);
}

.adz-sl-cube i:nth-child(3) {
	/* Đèn lệch TRÁI ⇒ hông phải là mặt tối nhất, hông trái là mặt sáng thứ nhì sau
	   nóc. Thứ tự sáng bốn mặt: nóc #F8 · trái #F0 · trước #E8 · phải #DE — trùng
	   với hướng đèn trong js/adzio-clay3d.js, đổi bên này thì đổi cả bên kia. */
	transform: rotateY(90deg) translateZ(calc(var(--e) / 2));
	background: linear-gradient(152deg, #E0E0E0, #DCDCDC);
}

.adz-sl-cube i:nth-child(4) {
	transform: rotateY(-90deg) translateZ(calc(var(--e) / 2));
	background: linear-gradient(152deg, #F2F2F2, #EEEEEE);
}

.adz-sl-cube i:nth-child(5) {
	transform: rotateX(90deg) translateZ(calc(var(--e) / 2));
	background: linear-gradient(152deg, #FBFBFB, #F8F8F8);
}

.adz-sl-cube i:nth-child(6) {
	/* Mặt đáy KHÔNG được là mặt tối nhất: mẫu có đèn hắt từ nền lên nên đáy (#EA)
	   sáng hơn mặt sau. Để đáy tối nhất là khối trông như bị khoét hõm. */
	transform: rotateX(-90deg) translateZ(calc(var(--e) / 2));
	background: linear-gradient(152deg, #EBEBEB, #E6E6E6);
}

/* Hai mặt bên xoay quanh Y nên bề rộng của chúng chính là BỀ DÀY khối: khi --d
   khác --e phải bóp lại, không thì tấm mỏng vẫn có hông rộng như khối vuông. */
.adz-sl-cube i:nth-child(3),
.adz-sl-cube i:nth-child(4) {
	left: calc((var(--e) - var(--d)) / 2);
	right: calc((var(--e) - var(--d)) / 2);
}

/* Bốn khối so le, tỉ lệ lệch nhau (họ "cube") */
.s-cube .adz-sl-cube.k1 {
	--e: calc(var(--sw) * .32);
	top: 8%;
	left: 30%;
}

.s-cube .adz-sl-cube.k2 {
	--e: calc(var(--sw) * .28);
	top: 30%;
	left: 6%;
	animation-duration: 30s;
	animation-direction: alternate-reverse;
}

.s-cube .adz-sl-cube.k3 {
	--e: calc(var(--sw) * .26);
	top: 52%;
	left: 46%;
	animation-duration: 34s;
}

.s-cube .adz-sl-cube.k4 {
	--e: calc(var(--sw) * .24);
	top: 66%;
	left: 18%;
	animation-duration: 25s;
	animation-direction: alternate-reverse;
}

/* Họ "slab" của mẫu: tấm phẳng rất lớn + tấm mỏng chếch trên + khối nhỏ.
   Tấm thứ hai (k2) là thứ bản trước bỏ sót, làm cụm chỉ còn ĐÚNG một khối. */
.s-slab .adz-sl-cube.k1 {
	--e: calc(var(--sw) * .68);
	--d: calc(var(--sw) * .07);
	top: 14%;
	left: 10%;
	animation-duration: 40s;
}

.s-slab .adz-sl-cube.k2 {
	--e: calc(var(--sw) * .42);
	--d: calc(var(--sw) * .05);
	top: 2%;
	left: 40%;
	animation-duration: 33s;
	animation-direction: alternate-reverse;
}

.s-slab .adz-sl-cube.k3 {
	--e: calc(var(--sw) * .23);
	top: 66%;
	left: 64%;
	animation-duration: 29s;
	animation-direction: alternate-reverse;
}

/* ============ HỌ 4: HÌNH NÓN ============
   Mẫu dùng nón MŨI CHÚC XUỐNG, miệng bầu dục rộng ở trên. 2026-08-11 đổi từ
   "cánh cong" (hình lá) — soi lại mẫu bằng cách tăng tương phản thì không có hình
   lá nào, đó là tôi đọc sai ảnh mờ.

   CSS không dựng được nón thật nên ghép hai mảng: ::before là miệng bầu dục,
   ::after là thân thu về mũi bằng clip-path. Bản 3D mới là nón thật; đây chỉ là
   bản dự phòng. */
.adz-sl-cone {
	position: absolute;
	display: block;
	animation: adz-sl-float 24s ease-in-out infinite alternate;
}

.adz-sl-cone::before,
.adz-sl-cone::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
}

/* Nửa DƯỚI: nón mũi chúc xuống. Mũi KHÔNG thu về đúng một điểm (48%–52% chứ không
   50%–50%): mũi nhọn tuyệt đối bị vẽ răng cưa rất rõ ở khổ lớn. */
.adz-sl-cone::after {
	top: 50%;
	bottom: 0;
	clip-path: polygon(0 0, 100% 0, 52% 100%, 48% 100%);
	background: linear-gradient(92deg, #EAEAEA 0%, #E4E4E4 46%, #DDDDDD 100%);
}

/* Nửa TRÊN: nón lật ngược, chắp đáy với nửa dưới. Hai nửa gặp nhau ở eo tạo một
   đường gờ — chính đường đó làm khối tròn nhận ra được; nón đơn (bản trước) không
   có gờ nên tô gần trắng là ra hình cái nêm phẳng. Nửa trên sáng hơn vì hứng đèn. */
.adz-sl-cone::before {
	top: 0;
	height: 50%;
	clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%);
	background: linear-gradient(92deg, #F6F6F6 0%, #F0F0F0 46%, #E7E7E7 100%);
}

.adz-sl-cone.n1 {
	width: 52%;
	height: 46%;
	top: 6%;
	left: 34%;
}

.adz-sl-cone.n2 {
	width: 40%;
	height: 36%;
	top: 50%;
	left: 4%;
	animation-duration: 29s;
	animation-delay: -14s;
}

/* ============ QUỸ ĐẠO ============
   Biên độ phải đủ lớn để MẮT BẮT ĐƯỢC chuyển động trong vài giây đứng nhìn: bản
   đầu trôi 2–5% trong 24–54s, tính ra dưới 1px/giây nên xem như đứng yên. Giữ
   dưới ~12% để khối không lấn sang cột chữ. */
@keyframes adz-sl-float {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(7%, -11%, 0) scale(1.11);
	}

	100% {
		transform: translate3d(-8%, 9%, 0) scale(.9);
	}
}

/* Quỹ đạo RIÊNG cho tháp đĩa: biên độ chỉ 2–3%. Dùng chung adz-sl-float (7–11%)
   là 5 tầng tách nhau ra, mất hẳn hình cái tháp — đã thử và bỏ. */
@keyframes adz-sl-stack {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(2%, -3%, 0) scale(1.02);
	}

	100% {
		transform: translate3d(-2.5%, 2.5%, 0) scale(.985);
	}
}

@keyframes adz-sl-spin {

	/* Không hạ rotateY xuống dưới ~14° ở khung đầu/cuối: gần 0° là chỉ thấy đúng
	   một mặt, khối thành tấm bìa phẳng — và khung 0% là đúng lúc khách vừa mở
	   trang nên nhìn thấy ngay. */
	0% {
		transform: rotateX(-24deg) rotateY(34deg) translate3d(0, 0, 0);
	}

	50% {
		transform: rotateX(-10deg) rotateY(76deg) translate3d(5%, -10%, 0) scale(1.06);
	}

	100% {
		transform: rotateX(-38deg) rotateY(16deg) translate3d(-6%, 8%, 0) scale(.94);
	}
}

/* --- Bản cho khối NỀN TỐI: sáng mờ ---
   Chỉ còn khối "Lĩnh vực triển khai" là nền tối, và MẪU KHÔNG CÓ mảng tối nào nên
   phần này là thiết kế riêng, không đo theo mẫu được. Đừng thêm `.adz-sl-hero` lại
   vào đây: hero đã là nền trắng, khối trắng-mờ trên nền trắng là mất hẳn hình.

   Nền tối chịu được ÍT sáng hơn nền trắng nhiều: khối chồng nhau nên alpha cộng
   dồn, quá .3 là mảng xám lấn lên chữ trắng và tụt tương phản chữ. Giữ quanh .2 —
   đủ thấy hình, không thành tấm che. */
.adz-sl-ind .adz-sl-ball {
	background: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .19) 45%, rgba(255, 255, 255, .04) 82%, rgba(0, 0, 0, 0) 100%);
}

.adz-sl-ind .adz-sl-cyl::before {
	background: linear-gradient(158deg, rgba(255, 255, 255, .21) 6%, rgba(255, 255, 255, .13) 60%, rgba(255, 255, 255, .03) 100%);
}

.adz-sl-ind .adz-sl-cyl::after {
	background: linear-gradient(92deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, .02) 100%);
}

/* --- BẢN 3D (js/adzio-clay3d.js + Three.js + model .gltf của mẫu) ---
   JS chèn một <canvas> vào mỗi `.adz-sl-stage-in`, và gắn `.is-3d` lên SÂN KHẤU
   ĐÓ ngay khi model của nó vẽ được frame đầu tiên. Lúc đó mới ẩn mấy thẻ khối CSS
   ở trên đi — giữ cả hai là khối phẳng nằm chồng lên khối 3D.

   Class gắn trên từng sân khấu chứ KHÔNG gắn một lần lên <html> như bản trước:
   model nạp lười theo từng họ khối (~4MB nếu nạp hết), nên tại một thời điểm có
   sân khấu đã có hình 3D, có sân khấu vẫn đang dùng bản CSS.

   Toàn bộ phần CSS phía trên KHÔNG được xoá: đó là bản dự phòng cho máy không có
   WebGL, cho `prefers-reduced-motion`, cho màn dưới 1025px, và cho cả trường hợp
   nạp model hỏng (JS tự thoát trong mọi trường hợp đó và không gắn `.is-3d`). */
.adz-sl-stage.is-3d .adz-sl-ball,
.adz-sl-stage.is-3d .adz-sl-cyl,
.adz-sl-stage.is-3d .adz-sl-cube,
.adz-sl-stage.is-3d .adz-sl-cone {
	display: none;
}

/* Canvas trải kín sân khấu; ảnh render là hình vuông đúng tỉ lệ sân khấu nên
   không cần object-fit. Nằm trong `.adz-sl-stage-in` nên ăn theo cả thị sai
   (--adz-p) lẫn zoom 90%→100%, không phải tính lại trong JS. */
.adz-sl-3d {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* Dưới 1025px chạy BẢN CSS (js/adzio-clay3d.js tự thoát vì model ~4MB).
   `--sw` ở đây KHÔNG cùng thang với `--sw` của desktop, đừng chép số qua lại:
   khối vẽ bằng CSS lấp gần kín khung, còn model .gltf chỉ chiếm ~61% khung (phần
   còn lại là khoảng trống của hình cầu bao). Nên cùng một `--sw`, bản CSS nhìn to
   hơn bản 3D chừng gấp rưỡi. Hai con số dưới đây chọn để cụm ra bằng nhau ở hai
   bản, tính theo phần khối THẤY ĐƯỢC (~33vw). */
@media (max-width: 1024px) {

	.adz-sl-stage {
		--sw-g: min(42vw, 340px);
	}
}

@media (max-width: 768px) {

	/* Màn hẹp: cụm nhỏ lại và lùi hẳn ra mép để không nằm dưới chữ */
	.adz-sl-stage {
		--sw-g: min(50vw, 270px);
	}

	/* Một cột: ảnh chiếm hết bề ngang nên không còn "mép trong" để bám. Đẩy cụm ra
	   hai mép luân phiên cho khỏi che chữ. */
	.adz-sl-stage {
		top: 22%;
		left: 0;
		transform: translate(-52%, calc(-50% + var(--adz-p, 0) * -34px));
	}

	.adz-sl-card.is-flip .adz-sl-stage {
		left: auto;
		right: 0;
		transform: translate(52%, calc(-50% + var(--adz-p, 0) * -34px));
	}
}

@media (prefers-reduced-motion: reduce) {

	.adz-sl-ball,
	.adz-sl-cyl,
	.adz-sl-cube,
	.adz-sl-cone {
		animation: none !important;
	}

	.adz-sl-cube {
		transform: rotateX(-22deg) rotateY(38deg);
	}

	.adz-sl-stage-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.adz-sl-stage {
		transform: translate(-50%, -50%) !important;
	}
}

/* ------------------------------------------------------------
   TRẮNG ĐEN – VÁ CÁC CHỖ "ĐEN TRÊN ĐEN"
   Bảng màu cũ có vàng nên màu nhấn nổi được trên CẢ nền sáng lẫn nền tối. Bỏ
   vàng thì màu nhấn = đen, nên mọi chỗ trước đây đặt màu nhấn LÊN NỀN TỐI đều
   phải đảo sang trắng. Gom vào một khối cuối file để dễ soát, thay vì rải rác.
   ------------------------------------------------------------ */

/* Dấu ✳ trong thẻ hệ sinh thái dịch vụ (thẻ nằm trên mảng tối) */
.adz-sv-eco-card .adz-sv-star {
	color: rgba(255, 255, 255, .8);
}

/* Khối liên hệ cuối trang: nền vốn là dải VÀNG, nay là đen ⇒ nút bên trong
   (class `is-dark`) trùng màu nền, phải đảo thành nút trắng chữ đen. */
.adz-sec-sv-cta .adz-sv-btn,
.adz-sec-sv-cta .adz-sv-btn.is-dark {
	background: #fff;
	border-color: #fff;
	color: var(--adz-ink) !important;
}

.adz-sec-sv-cta .adz-sv-btn:hover,
.adz-sec-sv-cta .adz-sv-btn.is-dark:hover {
	background: var(--adz-gold-soft);
	border-color: var(--adz-gold-soft);
	color: #000 !important;
}

/* CTA kiểu cũ (.adz-cta – dải gradient, nay đen): nút bên trong cũng phải đảo */
.adz-cta .button.primary,
.adz-cta .button.primary:not(.is-outline),
.adz-cta .adzio-btn {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--adz-ink) !important;
}

.adz-cta .button.is-outline {
	border-color: rgba(255, 255, 255, .6) !important;
	color: #fff !important;
}

/* --- Logo trên NỀN TỐI ---
   Logo Alpha MKT là hình ĐEN TUYỀN trên nền trong suốt nên ở mảng tối nó biến
   mất. Nay KHÔNG còn trang nào để header nằm trên mảng tối (hero Dịch Vụ và hero
   Về Chúng Tôi đều đã đổi sang nền trắng), nên phần đổi hai thẻ <img> trong
   #logo (`.header-logo` đen ⇄ `.header-logo-dark` trắng của Flatsome) đã bỏ.

   Bẫy đã gặp ở đây: khối chú thích bị ĐÓNG HAI LẦN (hai dấu đóng comment), mấy
   dòng chữ còn lại thành rác đứng trước selector nên parser ăn mất luôn rule ẩn
   logo đen, hai logo hiện cùng lúc xếp dọc dưới header. Rule kế bên vẫn chạy
   nên rất dễ tưởng CSS không lỗi.

   Chỉ còn panel menu mobile là nền tối thật (dải gradient đen). */
.adz-mmenu-logo img {
	filter: invert(1);
	border-radius: 0;
}