/* ==========================================================================
   Mozo design system — dùng chung cho trang chủ và các trang con.
   Tất cả class của Mozo có tiền tố `mz-` để không đụng Flatsome.
   Muốn đổi màu/bo góc: sửa biến ở :root.
   ========================================================================== */

:root {
	--mz-primary: #1562ef;
	--mz-primary-600: #0f4fcc;
	--mz-primary-50: #e8f0fe;
	--mz-sky: #00a6f0;
	--mz-sky-600: #0086c4;
	--mz-sky-50: #e4f5fd;
	--mz-orange: #f05203;
	--mz-orange-600: #a33a00;
	--mz-orange-50: #fff0e8;
	--mz-ink: #0b1b3f;
	--mz-text: #4a5878;
	--mz-muted: #5b6b8f;
	--mz-line: #e3eaf6;
	--mz-soft: #f4f8fe;
	--mz-navy: #0b1b3f;
	--mz-radius: 16px;
	--mz-shadow-sm: 0 1px 2px rgba(11, 27, 63, .04), 0 2px 8px rgba(11, 27, 63, .04);
	--mz-shadow: 0 1px 2px rgba(11, 27, 63, .04), 0 12px 32px rgba(21, 98, 239, .10);
	--mz-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Nền tảng ---------- */
body,
button,
input,
select,
textarea,
.nav > li > a,
.nav-dropdown > li > a,
h1, h2, h3, h4, h5, h6,
.button {
	font-family: var(--mz-font);
}

.mz-sec {
	color: var(--mz-text);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.mz-sec h1,
.mz-sec h2,
.mz-sec h3,
.mz-sec h4 {
	color: var(--mz-ink);
	text-transform: none;
	letter-spacing: -.02em;
}

.mz-sec p { margin-bottom: 0; }
.mz-sec svg { display: block; }

.mz-grad { color: var(--mz-primary); }

/* ---------- Tiêu đề phần ---------- */
.mz-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.mz-head.mz-head--left { margin-left: 0; margin-right: 0; text-align: left; }
.mz-head h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.25;
	font-weight: 800;
	margin: 14px 0 14px;
}
.mz-head p { font-size: 1.125rem; color: var(--mz-text); }

.mz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mz-sky-50);
	color: #04618f;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}
.mz-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mz-sky);
}

/* ---------- Nút ---------- */
.mz-sec .button,
#header .button {
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	font-size: 15px;
	min-height: 48px;
	line-height: 48px;
	padding: 0 24px;
	margin: 0 12px 12px 0;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mz-sec .button.primary {
	background: var(--mz-primary);
	box-shadow: 0 6px 16px rgba(21, 98, 239, .28);
}
.mz-sec .button.primary:hover { background: var(--mz-primary-600); transform: translateY(-1px); }
.mz-sec .button.primary.is-outline,
.mz-sec .button.is-outline {
	background: #fff;
	color: var(--mz-primary);
	border: 1.5px solid #c9dbfb;
	box-shadow: none;
}
.mz-sec .button.is-outline:hover { background: #fff; border-color: var(--mz-primary); color: var(--mz-primary); }
.mz-sec .button.is-outline span { color: inherit; }
.mz-sec .button.secondary { background: var(--mz-orange); box-shadow: 0 8px 20px rgba(240, 82, 3, .25); }
.mz-sec .button.white { background: #fff; color: var(--mz-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.mz-sec .button.white span { color: var(--mz-primary); }
.mz-sec .button.mz-btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: none; }
.mz-sec .button.mz-btn-ghost-light span { color: #fff; }
.mz-sec .button.mz-btn-ghost-light:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Thẻ chung ---------- */
.mz-card > .col-inner,
.mz-card-box {
	height: 100%;
	background: #fff;
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-radius);
	padding: 28px;
	box-shadow: var(--mz-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mz-card.mz-lift > .col-inner:hover {
	transform: translateY(-4px);
	box-shadow: var(--mz-shadow);
	border-color: #c9d8f8;
}
.mz-card h3 { font-size: 1.125rem; font-weight: 700; margin: 18px 0 8px; line-height: 1.3; }
.mz-card p { font-size: .9688rem; color: var(--mz-text); }
.mz-card .text { height: auto; }

.mz-ico {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mz-primary-50);
	color: var(--mz-primary);
}
.mz-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mz-ico--sky { background: var(--mz-sky-50); color: var(--mz-sky-600); }
.mz-ico--orange { background: var(--mz-orange-50); color: var(--mz-orange); }
.mz-ico--grad { background: var(--mz-primary); color: #fff; }

.mz-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--mz-primary);
}
.mz-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.mz-link:hover { color: var(--mz-primary-600); }
.mz-link:hover svg { transform: translateX(3px); }

.mz-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--mz-orange-50);
	color: var(--mz-orange-600);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	vertical-align: 2px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.mz-hero {
	background: linear-gradient(180deg, #f1f7ff 0%, #fff 100%);
	overflow: hidden;
}
.mz-hero h1 {
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -.035em;
	margin: 16px 0 16px;
}
.mz-hero .mz-lead { font-size: 18px; color: var(--mz-text); max-width: 560px; margin-bottom: 26px; }

.mz-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 16px; }
.mz-stats > div { padding: 0 28px; border-left: 1px solid var(--mz-line); }
.mz-stats > div:first-child { padding-left: 0; border-left: 0; }
.mz-stats strong { display: block; color: var(--mz-primary); font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.mz-stats span { display: block; font-size: .8125rem; color: var(--mz-muted); line-height: 1.4; max-width: 160px; }

/* Mockup dashboard */
.mz-mock-wrap { position: relative; padding: 8px 0 20px 12px; max-width: 560px; margin-left: auto; }
.mz-mock {
	position: relative;
	background: #fff;
	border: 1px solid var(--mz-line);
	border-radius: 18px;
	box-shadow: 0 30px 70px rgba(21, 98, 239, .18), 0 6px 16px rgba(11, 27, 63, .06);
	overflow: hidden;
	font-family: var(--mz-font);
}
.mz-mock__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #f4f7fd; border-bottom: 1px solid var(--mz-line); }
.mz-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5dded; display: block; }
.mz-mock__bar span { margin-left: 12px; flex: 1; max-width: 260px; font-size: 11px; color: var(--mz-muted); background: #fff; border: 1px solid var(--mz-line); border-radius: 6px; padding: 3px 10px; }
.mz-mock__body { display: flex; min-height: 300px; }
.mz-mock__side { width: 56px; background: var(--mz-navy); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mz-mock__side img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.mz-mock__side b { width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .16); display: block; }
.mz-mock__side b.on { background: var(--mz-sky); }
.mz-mock__main { flex: 1; padding: 16px 18px 18px; min-width: 0; }
.mz-mock__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mz-mock__top strong { font-size: 13px; color: var(--mz-ink); font-weight: 700; }
.mz-mock__top span { font-size: 11px; color: var(--mz-primary); background: var(--mz-primary-50); border-radius: 6px; padding: 3px 8px; font-weight: 600; }
.mz-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mz-kpis > div { border: 1px solid var(--mz-line); border-radius: 10px; padding: 9px 10px; min-width: 0; }
.mz-kpis small { display: block; font-size: 10px; color: var(--mz-muted); font-weight: 500; }
.mz-kpis strong { display: block; font-size: 15px; color: var(--mz-ink); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.mz-kpis em { font-style: normal; font-size: 10px; font-weight: 700; }
.mz-kpis em.up { color: #12a150; }
.mz-kpis em.down { color: var(--mz-orange); }
.mz-mock__chart { margin-top: 10px; border: 1px solid var(--mz-line); border-radius: 10px; padding: 10px 10px 4px; }
.mz-mock__chart header { display: flex; justify-content: space-between; font-size: 10px; color: var(--mz-muted); margin-bottom: 2px; }
.mz-mock__chart header b { color: var(--mz-ink); font-size: 11px; }
.mz-mock__chart header span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--mz-primary); }
.mz-mock__chart header span + span::before { background: var(--mz-orange); }
.mz-mock__chart svg { width: 100%; height: auto; }
.mz-mock__rows { margin-top: 10px; }
.mz-mock__rows > div { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--mz-line); font-size: 11px; color: var(--mz-ink); font-weight: 600; }
.mz-mock__rows img { width: 18px; height: 18px; object-fit: contain; display: block; }
.mz-mock__rows i { flex: 1; height: 6px; border-radius: 4px; background: #eaf0fb; position: relative; display: block; }
.mz-mock__rows i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); border-radius: 4px; background: linear-gradient(90deg, var(--mz-primary), var(--mz-sky)); }
.mz-mock__rows span { width: 62px; text-align: right; color: var(--mz-text); font-weight: 600; }

.mz-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--mz-line);
	border-radius: 14px;
	padding: 10px 14px;
	box-shadow: 0 16px 40px rgba(11, 27, 63, .16);
	font-family: var(--mz-font);
	font-size: 12px;
	line-height: 1.35;
	color: var(--mz-ink);
	font-weight: 600;
	animation: mz-bob 6s ease-in-out infinite;
}
.mz-float small { display: block; font-weight: 500; color: var(--mz-muted); font-size: 11px; }
.mz-float .mz-dot { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.mz-float .mz-dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mz-float--alert { left: -14px; bottom: 0; }
.mz-float--alert .mz-dot { background: var(--mz-orange-50); color: var(--mz-orange); }
.mz-float--ai { right: -10px; top: 0; max-width: 250px; animation-delay: -3s; }
.mz-float--ai .mz-dot { background: var(--mz-primary-50); color: var(--mz-primary); }
.mz-mock-note { text-align: center; font-size: 12px; color: var(--mz-muted); margin-top: 14px; }

@keyframes mz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .mz-float { animation: none; } }

/* ==========================================================================
   Vấn đề
   ========================================================================== */
.mz-problem .mz-card h3 { margin-top: 20px; }

/* ==========================================================================
   Giải pháp — 4 bước + sơ đồ
   ========================================================================== */
.mz-steps-row { margin-top: 40px; }
.mz-steps .mz-step { position: relative; }
/* đường nối ngang giữa các bước (vẽ dần khi cuộn tới) */
.mz-steps .mz-step::before {
	content: "";
	position: absolute;
	left: 62px;
	right: -4px;
	top: 19px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mz-primary), var(--mz-sky));
	opacity: .45;
	transform-origin: left center;
}
.mz-steps:last-child .mz-step::before { display: none; }
.mz-step__n {
	margin-bottom: 18px;
	/* viền mờ hai lớp quanh số */
	box-shadow: 0 0 0 5px rgba(21, 98, 239, .2), 0 0 0 11px rgba(21, 98, 239, .08);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mz-primary);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* hiệu ứng xuất hiện lần lượt khi cuộn tới (chỉ bật khi có JS) */
.mz-js .mz-steps-row .mz-steps { opacity: 0; transform: translateY(22px); }
.mz-js .mz-steps-row .mz-step::before { transform: scaleX(0); }
.mz-js .mz-steps-row.is-in .mz-steps {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.mz-js .mz-steps-row.is-in .mz-steps:nth-child(2) { transition-delay: .15s; }
.mz-js .mz-steps-row.is-in .mz-steps:nth-child(3) { transition-delay: .3s; }
.mz-js .mz-steps-row.is-in .mz-steps:nth-child(4) { transition-delay: .45s; }
.mz-js .mz-steps-row.is-in .mz-step::before { transform: scaleX(1); transition: transform .7s ease .35s; }
.mz-js .mz-steps-row.is-in .mz-steps:nth-child(2) .mz-step::before { transition-delay: .5s; }
.mz-js .mz-steps-row.is-in .mz-steps:nth-child(3) .mz-step::before { transition-delay: .65s; }
@media (prefers-reduced-motion: reduce) {
	.mz-js .mz-steps-row .mz-steps { opacity: 1; transform: none; }
	.mz-js .mz-steps-row .mz-step::before { transform: none; }
}
.mz-step h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 6px; line-height: 1.35; }
.mz-step p { color: var(--mz-text); font-size: .9688rem; }

.mz-flow { padding: 0; max-width: 720px; margin: 0 auto; }
.mz-flow svg { width: 100%; height: auto; font-family: var(--mz-font); }
.mz-flow .mz-flow__line { fill: none; stroke: var(--mz-sky); stroke-width: 2; stroke-dasharray: 5 7; animation: mz-dash 1.6s linear infinite; opacity: .8; }
@keyframes mz-dash { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .mz-flow .mz-flow__line { animation: none; } }

/* ==========================================================================
   Sản phẩm
   ========================================================================== */
.mz-product > .col-inner { padding: 32px; }
.mz-product h3 { margin-top: 22px; font-size: 1.25rem; }

/* Hàng so le: chữ một bên, khung minh hoạ một bên (thay khung bằng ảnh thật khi có) */
.mz-feature { margin-bottom: 56px; }
.mz-feature:last-child { margin-bottom: 0; }
.mz-feature .col { padding-bottom: 0; }
.mz-feature .mz-ico { margin-bottom: 22px; }
.mz-feature h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; font-weight: 800; margin: 0 0 14px; }
.mz-feature p { font-size: 1.0625rem; color: var(--mz-text); max-width: 480px; }
.mz-feature .mz-link { margin-top: 20px; }
.mz-feature .mz-tag { vertical-align: 6px; }
.mz-feature > .col:first-child { padding-right: 32px; }
.mz-feature--rev > .col:first-child { padding-right: 15px; padding-left: 32px; }
.mz-feature__visual {
	min-height: 300px;
	border-radius: 28px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
.mz-feature__visual--a { background: var(--mz-primary-50); }
.mz-feature__visual--b { background: var(--mz-sky-50); }
.mz-feature__ico {
	width: 72px; height: 72px;
	border-radius: 50%;
	background: #fff;
	color: var(--mz-primary);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 24px rgba(21, 98, 239, .14);
}
.mz-feature__ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mz-feature__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mz-feature__chips span { background: #fff; border: 1px solid var(--mz-line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--mz-ink); }
.mz-feature__visual img { max-width: 100%; height: auto; border-radius: 16px; }
@media (min-width: 850px) {
	.mz-feature--rev { flex-direction: row-reverse; }
}
@media (max-width: 849px) {
	.mz-feature { margin-bottom: 40px; }
	.mz-feature > .col:first-child,
	.mz-feature--rev > .col:first-child { padding-left: 15px; padding-right: 15px; padding-bottom: 20px; }
	.mz-feature__visual { min-height: 220px; }
}

/* ==========================================================================
   Kết nối — lưới logo
   ========================================================================== */
.mz-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.mz-tab {
	appearance: none;
	margin: 0;
	border: 1px solid var(--mz-line);
	background: #fff;
	border-radius: 999px;
	padding: 8px 16px;
	font: 600 14px/1.2 var(--mz-font);
	text-transform: none;
	letter-spacing: 0;
	color: var(--mz-text);
	cursor: pointer;
	transition: all .15s ease;
}
.mz-tab:hover { border-color: #c9d8f8; color: var(--mz-primary); }
.mz-tab.is-active { background: var(--mz-primary); border-color: var(--mz-primary); color: #fff; box-shadow: 0 6px 16px rgba(21, 98, 239, .25); }

.mz-logos-wrap { position: relative; }
.mz-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mz-logos.is-collapsed { max-height: 282px; overflow: hidden; }
.mz-logos.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 110px;
	background: linear-gradient(rgba(244, 248, 254, 0), var(--mz-soft));
	pointer-events: none;
}
.mz-tile {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--mz-line);
	border-radius: 14px;
	padding: 14px 16px;
	min-width: 0;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mz-tile[hidden] { display: none; }
.mz-tile:hover { border-color: #c9d8f8; box-shadow: var(--mz-shadow-sm); transform: translateY(-2px); }
.mz-tile img { width: 28px; height: 28px; object-fit: contain; flex: none; display: block; }
.mz-tile .mz-ph {
	width: 28px; height: 28px; flex: none;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 800; color: #fff;
	background: var(--c, var(--mz-primary));
}
.mz-tile span.mz-name { font-size: 14px; font-weight: 600; color: var(--mz-ink); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.mz-more { text-align: center; margin-top: 22px; }
.mz-more button { margin: 0; }
.mz-connect-foot { text-align: center; margin-top: 36px; color: var(--mz-text); }
.mz-connect-foot strong { color: var(--mz-ink); }

/* ==========================================================================
   Giải pháp theo đội nhóm
   ========================================================================== */
.mz-team > .col-inner { padding: 26px; display: flex; flex-direction: column; }
.mz-team .text { flex: 1; }
.mz-team h3 { margin-top: 16px; }

/* ==========================================================================
   Tài nguyên
   ========================================================================== */
.mz-res > .col-inner { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mz-res .mz-res__body { padding: 24px 26px 26px; }
.mz-res h3 { margin-top: 0; }
.mz-res__thumb {
	height: 168px;
	background: linear-gradient(160deg, var(--mz-primary-50), var(--mz-sky-50));
	border-bottom: 1px solid var(--mz-line);
	padding: 20px;
	position: relative;
	overflow: hidden;
}
.mz-res__thumb::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(0, 166, 240, .14); }
.mz-res__more { margin-top: 32px; font-weight: 600; color: var(--mz-text); text-align: center; }
.mz-res__more a { margin: 0 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--mz-primary); }
.mz-res__more a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* thumbnail mini */
.mzt-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; position: relative; z-index: 1; }
.mzt-grid > div { background: #fff; border-radius: 10px; box-shadow: var(--mz-shadow-sm); border: 1px solid var(--mz-line); padding: 8px; }
.mzt-grid > div:first-child { grid-row: span 2; }
.mzt-grid svg { width: 100%; height: 100%; }
.mzt-table { position: relative; z-index: 1; background: #fff; border-radius: 10px; border: 1px solid var(--mz-line); box-shadow: var(--mz-shadow-sm); overflow: hidden; }
.mzt-table > div { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; padding: 8px 10px; font-size: 11px; color: var(--mz-text); border-top: 1px solid var(--mz-line); }
.mzt-table > div:first-child { background: var(--mz-navy); color: #fff; font-weight: 700; border-top: 0; }
.mzt-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-content: center; height: 100%; }
.mzt-chips span { background: #fff; border: 1px solid var(--mz-line); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--mz-primary); box-shadow: var(--mz-shadow-sm); }
.mzt-chips span:nth-child(3n) { color: var(--mz-orange); }
.mzt-chips span:nth-child(3n+2) { color: var(--mz-sky); }
.mzt-url { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; }
.mzt-url div { background: #fff; border: 1px solid var(--mz-line); border-radius: 10px; padding: 9px 12px; font-size: 11.5px; color: var(--mz-muted); box-shadow: var(--mz-shadow-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mzt-url div b { color: var(--mz-primary); font-weight: 600; }
.mzt-url div em { color: var(--mz-orange); font-style: normal; font-weight: 600; }

/* ==========================================================================
   Lợi ích
   ========================================================================== */
.mz-benefit > .col-inner { background: var(--mz-soft); border: 0; box-shadow: none; }
.mz-benefit.mz-lift > .col-inner:hover { box-shadow: none; transform: none; }
.mz-benefit h3 { margin-top: 20px; }

/* ==========================================================================
   CTA cuối trang
   ========================================================================== */
.mz-cta-panel {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	padding: 64px 56px;
	background: var(--mz-primary);
	color: #fff;
}
.mz-cta-panel::before,
.mz-cta-panel::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.mz-cta-panel::before { width: 320px; height: 320px; right: -80px; top: -80px; background: var(--mz-sky); opacity: .35; }
.mz-cta-panel::after { width: 160px; height: 160px; right: 120px; bottom: -60px; background: var(--mz-orange); opacity: .9; }
.mz-cta-panel > * { position: relative; z-index: 1; }
.mz-cta-panel h2 { color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.25; font-weight: 800; margin: 0 0 16px; max-width: 640px; }
.mz-cta-panel p { color: rgba(255, 255, 255, .86); font-size: 1.125rem; max-width: 560px; margin-bottom: 32px; }
.mz-cta-panel .button { margin-bottom: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.mz-footer { background: var(--mz-navy); color: #aab6d3; font-size: 15px; }
.mz-footer h4 { color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 18px; }
.mz-footer a { color: #aab6d3; }
.mz-footer a:hover { color: #fff; }
.mz-footer ul { list-style: none; margin: 0; padding: 0; }
.mz-footer ul li { margin: 0 0 12px; }
.mz-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mz-footer__brand img { width: 200px; height: auto; border-radius: 0; display: block; }
.mz-footer__brand span { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.mz-footer__legal { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; line-height: 1.8; }
.mz-footer__legal b { color: #dbe3f5; font-weight: 600; }
.mz-footer .follow-icons { margin-top: 18px; }
.absolute-footer { background: #06102a; color: #7f8cab; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 13px; }
.absolute-footer a { color: #aab6d3; }

/* ==========================================================================
   Header
   ========================================================================== */
#header .header-main { border-bottom: 0; }
#header .header-wrapper.stuck .header-main { box-shadow: 0 6px 24px rgba(11, 27, 63, .06); }
#header .header-nav > li > a { color: var(--mz-ink); font-weight: 600; font-size: 15px; text-transform: none; letter-spacing: 0; }
#header .header-nav > li > a:hover,
#header .header-nav > li.active > a { color: var(--mz-primary); }
#header .button.is-link,
#header .header-button .button.is-link { box-shadow: none; }
#header .header-button .button { margin: 0; min-height: 44px; line-height: 44px; }
#header .header-button .button.primary { background: var(--mz-primary); box-shadow: 0 6px 16px rgba(21, 98, 239, .25); }
#header .header-button .button.primary:hover { background: var(--mz-primary-600); }
#header .header-button .button.is-link span { color: var(--mz-ink); font-weight: 600; }
#header .header-button .button.is-link {
	background-color: #fff !important;
	border: 1.5px solid var(--mz-primary) !important;
	box-shadow: none;
	transition: background .15s ease, border-color .15s ease;
}
#header .header-button .button.is-link span { color: var(--mz-primary); }
#header .header-button .button.is-link:hover { background-color: var(--mz-primary-50) !important; border-color: var(--mz-primary-600) !important; box-shadow: none; }
#header .header-button .button.is-link:hover span { color: var(--mz-primary-600); }

.nav-dropdown {
	border: 1px solid var(--mz-line);
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 24px 60px rgba(11, 27, 63, .16);
	min-width: 270px;
}
.nav-dropdown-default > li { border: 0 !important; }
.nav-dropdown > li > a {
	border: 0 !important;
	border-radius: 10px;
	padding: 10px 14px !important;
	color: var(--mz-ink);
	font-weight: 500;
	font-size: 14.5px;
	text-transform: none;
	letter-spacing: 0;
}
.nav-dropdown > li > a:hover { background: var(--mz-primary-50); color: var(--mz-primary); }
.nav-dropdown.nav-dropdown-has-arrow li.has-dropdown:after,
.nav-dropdown.nav-dropdown-has-arrow li.has-dropdown:before { display: none; }
/* Dropdown 2 cột: icon ở đầu + tiêu đề + mô tả 1 dòng */
.mz-menu-2col > ul.nav-dropdown {
	display: block;
	column-count: 2;
	column-gap: 16px;
	width: 780px;
	min-width: 780px;
	padding: 14px 4px;
	margin-top: 22px;
	border-radius: 20px;
}
/* cầu nối để rê chuột từ menu xuống popup không bị đóng */
.mz-menu-2col > ul.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.mz-menu-2col > ul.nav-dropdown > li { break-inside: avoid; margin: 0 0 4px; }
.mz-menu-2col > ul.nav-dropdown > li > a {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	padding: 14px 16px !important;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mz-ink);
	white-space: normal;
}
.mz-menu-2col > ul.nav-dropdown > li > a::before {
	content: "";
	grid-row: span 2;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: var(--ib, var(--mz-primary-50));
}
/* biểu tượng nằm trên ô nền (icon lấy từ class mzi-NAME của <li>) */
.mz-menu-2col > ul.nav-dropdown > li > a { position: relative; }
.mz-menu-2col > ul.nav-dropdown > li > a::after {
	content: "";
	position: absolute;
	left: 28px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background-color: var(--ic, var(--mz-primary));
	-webkit-mask: var(--mzi) center/contain no-repeat;
	mask: var(--mzi) center/contain no-repeat;
}
@media (max-width: 1300px) {
	.mz-menu-2col > ul.nav-dropdown { width: 700px; min-width: 700px; padding: 14px 4px; }
}
.mz-menu-2col > ul.nav-dropdown > li > a .mz-mi-desc {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--mz-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mz-menu-2col > ul.nav-dropdown > li > a:hover .mz-mi-desc { color: var(--mz-text); }

/* ==========================================================================
   Phần tử "an toàn với UX Builder": icon bằng CSS mask, hình bằng file SVG,
   sơ đồ bằng HTML. (Builder xoá <svg> nội tuyến và <span> không có class.)
   ========================================================================== */
.mz-ico .mzi { width: 24px; height: 24px; }
.mz-dot .mzi { width: 16px; height: 16px; }
.mz-feature__ico .mzi { width: 30px; height: 30px; }
.mz-mock__chart img { width: 100%; height: auto; display: block; }
.mz-res__thumb .mz-res__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.mzt-table .mzt-c { display: block; }

/* Sơ đồ nguồn dữ liệu → Mozo → đầu ra (HTML, toạ độ theo % của khung 620x470) */
.mz-flow { position: relative; width: 100%; aspect-ratio: 620 / 470; container-type: inline-size; }
.mz-flow .mz-flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.mz-fchip,
.mz-fhub,
.mz-fout { position: absolute; z-index: 1; display: flex; align-items: center; background: #fff; border: 1px solid var(--mz-line); box-sizing: border-box; }
.mz-fchip { left: 0; width: 28.4%; height: 11.06%; border-radius: 14px; padding: 0 3%; gap: 7%; }
.mz-fchip img { width: 14.8%; height: auto; max-width: 26px; object-fit: contain; display: block; flex: none; }
.mz-fchip .mz-fname { font-size: clamp(10px, 2.05cqw, 14px); white-space: nowrap; font-weight: 600; color: var(--mz-ink); line-height: 1.2; }
.mz-fhub { left: 40.32%; top: 37.45%; width: 16.13%; height: 21.28%; border-radius: 26%; justify-content: center; border-color: #dbe7fd; }
.mz-fhub img { width: 76%; height: auto; display: block; }
.mz-fout { left: 68.39%; width: 31.61%; height: 14.47%; border-radius: 14px; padding: 0 3.5%; gap: 5%; }
.mz-fout .mz-fico { width: 18.4%; aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--mz-primary-50); color: var(--mz-primary); font-size: clamp(11px, 2.4cqw, 16px); }
.mz-fout .mz-fico--sky { background: var(--mz-sky-50); color: var(--mz-sky-600); }
.mz-fout .mz-fico--orange { background: var(--mz-orange-50); color: var(--mz-orange); }
.mz-fout .mz-ftext { min-width: 0; }
.mz-fout b { display: block; font-size: clamp(10px, 2.26cqw, 15px); font-weight: 700; color: var(--mz-ink); line-height: 1.25; }
.mz-fout small { display: block; font-size: clamp(8px, 1.8cqw, 12px); color: var(--mz-muted); line-height: 1.3; }

/* Header trong suốt: chừa chỗ cho header ở đầu hero */
body.page-template-page-transparent-header .mz-hero .section-content { padding-top: 90px; }
@media (max-width: 849px) {
	body.page-template-page-transparent-header .mz-hero .section-content { padding-top: 70px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
	.mz-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mz-logos.is-collapsed { max-height: 282px; }
	.mz-cta-panel { padding: 52px 40px; }
}

@media (max-width: 849px) {
	.mz-steps .mz-step::before { display: none; }
	.mz-steps-row { margin-top: 24px; }
	.mz-steps { margin-bottom: 20px; }
	.mz-head { margin-bottom: 32px; }
	.mz-card > .col-inner { padding: 22px; }
	.mz-hero .mz-lead { font-size: 1.0625rem; }
	.mz-stats > div { padding: 0 18px; }
	.mz-stats strong { font-size: 1.25rem; }
	.mz-mock-wrap { padding: 8px 0 24px; margin-top: 24px; }
	.mz-float--alert { left: 0; }
	.mz-float--ai { right: 0; }
	.mz-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mz-menu-2col > ul.nav-dropdown { column-count: 1; min-width: 270px; }
	.mz-cta-panel { padding: 40px 24px; border-radius: 22px; }
	.mz-benefit > .col-inner { padding-right: 0; }
}

@media (max-width: 549px) {
	.mz-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mz-tile { padding: 12px; gap: 10px; }
	.mz-kpis { grid-template-columns: repeat(2, 1fr); }
	.mz-mock__side { display: none; }
	.mz-float--ai { display: none; }
	.mz-stats { gap: 18px 0; }
	.mz-stats > div { padding: 0 14px; }
	.mz-sec .button { width: 100%; text-align: center; margin-right: 0; }
	.mz-cta-panel .button { width: 100%; margin-bottom: 12px; }
}


/* ==========================================================================
   Trang sản phẩm: AI Studio, Kết nối, Chart & Dashboard, Báo cáo & Cảnh báo,
   Hợp nhất dữ liệu, Metric. Dùng chung header/footer với trang chủ.
   Mỗi phần có vài kiểu bố cục (hero split/đảo/giữa, vấn đề dạng thẻ/danh sách/dải tối...).
   ========================================================================== */

/* ---------- Hero ---------- */
.mz-crumb { font-size: 14px; color: var(--mz-muted); margin-bottom: 16px; }
.mz-crumb b { color: var(--mz-primary); font-weight: 600; }
.mz-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mz-badges .mz-tag { margin: 0; padding: 5px 11px; font-size: 12px; vertical-align: baseline; border-radius: 999px; }
.mz-hero--center .col-inner { text-align: center; }
.mz-hero--center .mz-badges { justify-content: center; }
.mz-hero--center h1 { max-width: 860px; margin-left: auto; margin-right: auto; font-size: clamp(2.125rem, 4.2vw, 3.375rem); }
.mz-hero--center .mz-lead { margin-left: auto; margin-right: auto; max-width: 680px; }
.mz-hero--center .mz-vis { margin: 28px auto 0; max-width: 920px; }
@media (min-width: 850px) {
	.mz-hero-rev { flex-direction: row-reverse; }
	.mz-hero-rev .mz-vis { margin-left: 0; margin-right: auto; }
}
/* Trang /metric (page-id-699): hero xếp dọc, chữ ở trên căn giữa, ảnh minh hoạ ở dưới (giống hero Chart & Dashboard) */
@media (min-width: 850px) {
	.page-id-699 .mz-hero-rev { flex-direction: column; align-items: center; }
	.page-id-699 .mz-hero-rev > .col { flex-basis: 100%; max-width: 100%; width: 100%; }
	.page-id-699 .mz-hero-rev > .col:first-child .col-inner { text-align: center; }
	.page-id-699 .mz-hero-rev h1 { max-width: 860px; margin-left: auto; margin-right: auto; font-size: clamp(2.125rem, 4.2vw, 3.375rem); text-wrap: balance; }
	.page-id-699 .mz-hero-rev .mz-lead { margin-left: auto; margin-right: auto; max-width: 680px; }
	.page-id-699 .mz-hero-rev > .col:last-child { margin-top: 28px; }
	.page-id-699 .mz-hero-rev > .col:last-child .img-inner { max-width: 1240px; margin-left: auto; margin-right: auto; }
}

/* Trang AI Studio (page-id-694) và Hợp nhất dữ liệu (page-id-698): hero xếp dọc, chữ ở trên căn giữa, minh hoạ ở dưới */
@media (min-width: 850px) {
	:is(.page-id-694, .page-id-698) #content > section:first-of-type > .section-content > .row:first-child { flex-direction: column; align-items: center; }
	:is(.page-id-694, .page-id-698) #content > section:first-of-type > .section-content > .row:first-child > .col { flex-basis: 100%; max-width: 100%; width: 100%; }
	:is(.page-id-694, .page-id-698) #content > section:first-of-type > .section-content > .row:first-child > .col:first-child .col-inner { text-align: center; }
	:is(.page-id-694, .page-id-698) #content > section:first-of-type h1 { max-width: 860px; margin-left: auto; margin-right: auto; font-size: clamp(2.125rem, 4.2vw, 3.375rem); text-wrap: balance; }
	:is(.page-id-694, .page-id-698) #content > section:first-of-type .mz-lead { margin-left: auto; margin-right: auto; max-width: 680px; }
	:is(.page-id-694, .page-id-698) #content > section:first-of-type > .section-content > .row:first-child > .col:last-child { margin-top: 28px; }
	.page-id-694 #content > section:first-of-type .col:last-child .img-inner { max-width: 880px; margin-left: auto; margin-right: auto; }
	/* Minh hoạ hero ghép bảng: thay khối HTML bằng ảnh.
	   Đang dùng: join-explainer.webp (ảnh động, rộng 1240; bản tĩnh cùng khung: join-explainer.png; bản hẹp 1100 không động: join-explainer-v3.png, tỉ lệ 2400/872) (có đường nối màu; bản nền trắng có tiêu đề 1-2-3: join-explainer-v2.png, tỉ lệ 2400/1080; bản không đường nối: join-explainer-v1.png, tỉ lệ 2400/1112) (2 bảng riêng lẻ -> ghép theo cột chung -> 1 bảng mới, dễ hiểu).
	   Bản khác còn trong assets/img/: hero-join-result.png (cửa sổ app, kết quả ROAS, tỉ lệ 2496/979),
	   hero-join-wide.png (cửa sổ app, các bước ghép bảng, tỉ lệ 2496/979). Đổi url và aspect-ratio nếu muốn quay lại. */
	.page-id-698 #content > section:first-of-type .col:last-child .mz-vis { max-width: 1240px; margin-left: auto; margin-right: auto; aspect-ratio: 1240 / 436; background: url("../img/join-explainer.webp") center / contain no-repeat; }
	.page-id-698 #content > section:first-of-type .col:last-child .mz-vis > * { display: none; }
}

/* Trang Báo cáo & Cảnh báo (page-id-697): hero minh hoạ bằng ảnh động cửa sổ app (bảng báo cáo/cảnh báo + tin nhắn Zalo) thay cho 2 thẻ HTML.
   Bản khác còn trong assets/img/: alert-hero.webp (quy tắc nối sang khung chat, tỉ lệ 1240/488).
   Muốn quay lại 2 thẻ cũ: xoá 2 dòng bên dưới. */
.page-id-697 #content > section:first-of-type .mz-vis { width: min(1240px, calc(100vw - 30px)); max-width: none; margin-left: calc(50% - min(1240px, calc(100vw - 30px)) / 2); margin-right: 0; aspect-ratio: 1560 / 612; background: url("../img/alert-app-hero.webp") center / contain no-repeat; }
.page-id-697 #content > section:first-of-type .mz-vis > * { display: none; }

/* Trang AI Studio (page-id-694): hero dùng ảnh động cửa sổ app (cuộc hội thoại + biểu đồ) thay cho ảnh cũ.
   Ảnh cũ vẫn còn nguyên: wp-content/uploads/2026/10/ai-studio-demo.webp (chỉ bị ẩn bằng CSS).
   Muốn quay lại ảnh cũ: xoá khối CSS này (từ comment này đến hết dòng .page-id-694 ... img). */
.page-id-694 #content > section:first-of-type .col:last-child .img-inner { display: block; width: min(1240px, calc(100vw - 30px)); max-width: none; margin-left: calc(50% - min(1240px, calc(100vw - 30px)) / 2); aspect-ratio: 1560 / 612; background: url("../img/ai-studio-app-hero.webp") center / contain no-repeat; }
.page-id-694 #content > section:first-of-type .col:last-child .img-inner > img { visibility: hidden; }

/* Trang Báo cáo & Cảnh báo (page-id-697): mục "Giải pháp Mozo" (4 thẻ .mz-fcard) dùng bố cục bento giống mục "Lợi ích":
   hàng 1 = thẻ lớn xanh (2 cột) + thẻ nhỏ, hàng 2 = thẻ nhỏ + thẻ rộng (2 cột). Muốn quay lại 2x2: xoá khối này. */
@media (min-width: 850px) {
	.page-id-697 .row:has(> .mz-fcard) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.page-id-697 .row > .mz-fcard { flex: none; width: auto; max-width: none; padding: 0; }
	.page-id-697 .row > .mz-fcard:nth-child(1), .page-id-697 .row > .mz-fcard:nth-child(4) { grid-column: span 2; }
}
.page-id-697 .row > .mz-fcard > .col-inner { height: 100%; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; background: #fff; border: 1px solid #dce6f8; border-radius: 24px; padding: 36px; box-shadow: none; transform: none; }
.page-id-697 .row > .mz-fcard > .col-inner:hover { box-shadow: none; transform: none; }
.page-id-697 .row > .mz-fcard h3 { font-size: 1.375rem; line-height: 1.2; font-weight: 800; margin: 0; }
.page-id-697 .row > .mz-fcard p { color: var(--mz-text); line-height: 1.65; margin: 0; }
.page-id-697 .row > .mz-fcard .mz-chips { margin-top: 2px; }
.page-id-697 .row > .mz-fcard:nth-child(1) > .col-inner { background: var(--mz-primary); border-color: var(--mz-primary); }
.page-id-697 .row > .mz-fcard:nth-child(1) h3 { font-size: 2.125rem; color: #fff; }
.page-id-697 .row > .mz-fcard:nth-child(1) p { color: #dce8ff; }
.page-id-697 .row > .mz-fcard:nth-child(1) .mz-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.page-id-697 .row > .mz-fcard:nth-child(1) .mz-chips .mz-x { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
@media (max-width: 849px) { .page-id-697 .row > .mz-fcard > .col-inner { min-height: 0; padding: 28px; } }

/* Ảnh cửa sổ app dưới hero (trang giải pháp): rộng tối đa 1240px, căn giữa */
.mz-hero-shot { width: min(1240px, calc(100vw - 30px)); max-width: 100%; margin: 8px auto 0; }
.mz-hero-shot img { display: block; width: 100%; height: auto; }

/* Khung minh hoạ giao diện (dùng lại .mz-mock) */
.mz-vis { position: relative; max-width: 560px; margin-left: auto; padding: 8px 0 8px; }
.mz-vis .mz-mock { text-align: left; }
.mz-wd { width: 10px; height: 10px; border-radius: 50%; background: #d5dded; display: block; flex: none; }
.mz-vis__title { margin-left: 12px; font-size: 12px; color: var(--mz-muted); }
.mz-vis-note { text-align: center; font-size: 12px; color: var(--mz-muted); margin-top: 14px; }

/* Chat (AI Studio) */
.mz-chat { display: flex; flex-wrap: wrap; }
.mz-chat__l { flex: 1 1 220px; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--mz-line); }
.mz-chat__r { flex: 1 1 220px; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mz-bub { align-self: flex-start; max-width: 92%; padding: 10px 14px; font-size: 14px; line-height: 1.5; border-radius: 14px 14px 14px 4px; background: #f1f5fc; color: #25345c; }
.mz-bub--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--mz-primary); color: #fff; }
.mz-pvt { font-size: 13px; font-weight: 700; color: var(--mz-ink); }
.mz-bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 4px 2px 0; border-bottom: 1px solid var(--mz-line); }
.mz-bars div { flex: 1; height: var(--h, 50%); border-radius: 5px 5px 0 0; background: #bfd3fa; }
.mz-bars div.on { background: var(--mz-primary); }
.mz-pill { align-self: flex-start; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px; background: var(--mz-primary-50); color: var(--mz-primary); font-weight: 600; font-size: 13px; }

/* Hub (Kết nối) */
.mz-hub { padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mz-hub__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mz-hchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--mz-line); background: #fff; border-radius: 999px; padding: 7px 14px 7px 9px; font-size: 14px; font-weight: 600; color: var(--mz-ink); }
.mz-hchip img { width: 22px; height: 22px; object-fit: contain; display: block; flex: none; }
.mz-arrow-d { width: 2px; height: 28px; background: var(--mz-sky); border-radius: 2px; position: relative; margin-bottom: 4px; }
.mz-arrow-d::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 10px; height: 10px; border-right: 2.5px solid var(--mz-sky); border-bottom: 2.5px solid var(--mz-sky); transform: translateX(-50%) rotate(45deg); }
.mz-hub__core { width: 100%; box-sizing: border-box; background: var(--mz-primary); color: #fff; border-radius: 16px; padding: 22px; text-align: center; box-shadow: 0 12px 28px rgba(21, 98, 239, .3); }
.mz-hub__core b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.mz-hub__core small { display: block; font-size: 14px; opacity: .9; margin-top: 4px; }

/* Dashboard / Metric */
.mz-dash { padding: 20px; }
.mz-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.mz-kpis--6 { grid-template-columns: repeat(3, 1fr); }
.mz-kpis--6 > div { margin: 0; }
.mz-dash .mz-mock__chart { margin-top: 12px; }

/* Báo cáo & Cảnh báo */
.mz-alerts { display: flex; flex-wrap: wrap; gap: 16px; }
.mz-acard { flex: 1 1 240px; min-width: 0; text-align: left; background: #fff; border: 1px solid #d6e2f8; border-radius: 16px; box-shadow: 0 20px 40px rgba(21, 98, 239, .12); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mz-acard--warn { border-color: #f5c3b0; box-shadow: 0 20px 40px rgba(240, 82, 3, .12); }
.mz-acard__k { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--mz-primary); }
.mz-msg { background: #f1f5fc; border-radius: 14px 14px 14px 4px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mz-msg b { font-size: 14px; color: var(--mz-ink); line-height: 1.4; }
.mz-ln { height: 8px; border-radius: 4px; background: #cbd8f2; width: var(--w, 80%); }
.mz-badge-warn { align-self: flex-start; background: var(--mz-orange-50); color: var(--mz-orange-600); font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.mz-acard__t { font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--mz-ink); }
.mz-acard__d { font-size: 13px; line-height: 1.5; color: var(--mz-text); }

/* Ghép bảng */
.mz-join { padding: 24px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.mz-join__row { display: flex; flex-wrap: wrap; gap: 14px; }
.mz-join__op { align-self: center; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--mz-primary); }
.mz-join__op .mz-arrow-d { margin: 0; height: 22px; }
.mz-tbl { flex: 1 1 180px; min-width: 0; border: 1px solid var(--mz-line); border-radius: 12px; overflow: hidden; background: #fff; }
.mz-tbl__h { background: #f1f5fc; padding: 10px 12px; font-weight: 700; font-size: 13px; color: var(--mz-ink); }
.mz-tbl__r { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; align-items: center; padding: 8px 12px; font-size: 12px; color: var(--mz-ink); border-top: 1px solid var(--mz-line); }
.mz-tbl__r--h { color: var(--mz-muted); font-weight: 600; border-top: 0; padding-bottom: 4px; }
.mz-tbl__r .mz-k { color: var(--mz-primary); font-weight: 700; }
.mz-tbl__r .mz-o { color: var(--mz-orange); }
.mz-bar { height: 8px; border-radius: 4px; background: #cbd8f2; width: 70%; }
.mz-bar--o { background: #ffc9ae; }
.mz-tbl--out { flex: none; width: 100%; border: 1.5px solid var(--mz-primary); }
.mz-tbl--out .mz-tbl__h { background: var(--mz-primary); color: #fff; }

/* ---------- Vấn đề: danh sách / dải tối ---------- */
.mz-plist .mz-prow { display: flex; gap: 24px; padding: 28px 0; border-top: 1px solid var(--mz-line); align-items: flex-start; }
.mz-plist .mz-prow:last-child { border-bottom: 1px solid var(--mz-line); }
.mz-prow__n { flex: none; width: 72px; font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: var(--mz-orange); line-height: 1; }
.mz-prow h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.mz-prow p { color: var(--mz-text); }
.mz-sec--dark { color: #b8c6e6; }
.mz-sec--dark .mz-head h2,
.mz-sec--dark h3 { color: #fff; }
.mz-sec--dark .mz-head p { color: #b8c6e6; }
.mz-sec--dark .mz-eyebrow { background: rgba(255, 255, 255, .1); color: #bfe9ff; }
.mz-sec--dark .mz-grad { color: #7fd3ff; }
.mz-strips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.mz-strip { border-top: 3px solid var(--mz-orange); padding-top: 24px; }
.mz-strip__n { font-size: 56px; font-weight: 800; letter-spacing: -.04em; color: var(--mz-orange); line-height: 1; margin-bottom: 14px; }
.mz-strip h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.mz-strip p { color: #b8c6e6; }

/* ---------- Giải pháp: thẻ số / timeline / ví dụ ---------- */
.mz-num { width: 36px; height: 36px; border-radius: 50%; background: var(--mz-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mz-tl { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 48px; }
.mz-tl__title { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--mz-primary); margin-bottom: 20px; }
.mz-tl__step { display: flex; gap: 20px; }
.mz-tl__rail { flex: none; display: flex; flex-direction: column; align-items: center; }
.mz-tl__n { width: 40px; height: 40px; border-radius: 50%; background: var(--mz-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.mz-tl__line { flex: 1; width: 2px; background: #bfd3fa; min-height: 24px; }
.mz-tl__body { padding-bottom: 32px; }
.mz-tl__body h3 { font-size: 1.25rem; font-weight: 700; margin: 6px 0 6px; line-height: 1.3; }
.mz-tl__body p { color: var(--mz-text); }
.mz-tl__step:last-child .mz-tl__line { display: none; }
.mz-tl__step:last-child .mz-tl__body { padding-bottom: 0; }
.mz-example { margin-top: 40px; background: #fff; border: 1px dashed #a9c4f5; border-radius: 16px; padding: 24px 28px; }
.mz-example__k { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--mz-orange); margin-bottom: 8px; }
.mz-example h3 { font-size: 1.125rem; margin: 0 0 8px; }
.mz-example p { color: var(--mz-text); }

/* ---------- Tính năng ---------- */
.mz-fcard > .col-inner { display: flex; flex-direction: column; }
.mz-fcard h3 { font-size: 1.3125rem; margin: 18px 0 10px; }
.mz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mz-chips .mz-x { border: 1px solid var(--mz-line); background: #f9fbff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--mz-ink); line-height: 1.3; }
/* Trang /metric (page-id-699): bỏ nhãn gợi ý dưới mô tả 3 tính năng */
.page-id-699 .mz-chips { display: none; }
.mz-note { margin-top: 28px; font-size: 15px; color: var(--mz-text); line-height: 1.6; }

.mz-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mz-bcard { min-width: 0; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; background: #fff; border: 1px solid #dce6f8; border-radius: 24px; padding: 36px; }
.mz-bcard h3 { font-size: 1.375rem; line-height: 1.2; font-weight: 800; margin: 0; }
.mz-bcard p { color: var(--mz-text); line-height: 1.65; }
.mz-bcard .mz-chips { margin-top: 2px; }
.mz-bcard--lg { grid-column: span 2; background: var(--mz-primary); border-color: var(--mz-primary); }
.mz-sec .mz-bcard--lg h3 { font-size: 2.125rem; color: #fff; }
.mz-bcard--lg p { color: #dce8ff; }
.mz-bcard--lg .mz-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.mz-bcard--lg .mz-chips .mz-x { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }

.mz-frows .mz-frow { display: flex; flex-wrap: wrap; gap: 24px 48px; padding: 36px 0; border-top: 1px solid #dce6f8; align-items: flex-start; }
.mz-frows .mz-frow:last-child { border-bottom: 1px solid #dce6f8; }
.mz-frow__n { flex: none; width: 96px; font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #bfd3fa; }
.mz-frow__b { flex: 1 1 280px; min-width: 0; }
.mz-frow__b h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; line-height: 1.25; }
.mz-frow__b p { font-size: 1rem; color: var(--mz-text); }
.mz-frow__c { flex: 1 1 240px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.mz-frow__c .mz-x { border: 1px solid var(--mz-line); background: var(--mz-soft); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--mz-ink); line-height: 1.3; }

.mz-ftabs { display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; }
.mz-ftabs__nav { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mz-ftab { width: 100%; margin: 0; text-align: left; padding: 18px 20px; border-radius: 14px; border: 1.5px solid #dce6f8; background: #fff; color: #25345c; font: 600 16px/1.3 var(--mz-font); text-transform: none; letter-spacing: 0; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: all .15s ease; }
.mz-ftab:hover { border-color: #bfd3fa; }
.mz-ftab__n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--mz-primary-50); color: var(--mz-primary); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.mz-ftab.is-active { background: var(--mz-primary); border-color: var(--mz-primary); color: #fff; }
.mz-ftab.is-active .mz-ftab__n { background: rgba(255, 255, 255, .2); color: #fff; }
.mz-ftabs__panels { flex: 2 1 460px; min-width: 0; }
.mz-fpanel { background: #fff; border: 1px solid #dce6f8; border-radius: 24px; padding: 40px; box-shadow: 0 20px 40px rgba(21, 98, 239, .08); }
.mz-fpanel h3 { font-size: 1.75rem; font-weight: 800; margin: 20px 0 12px; line-height: 1.2; }
.mz-fpanel p { font-size: 1.0625rem; line-height: 1.7; color: var(--mz-text); }
.mz-ftabs.is-ready .mz-fpanel { display: none; }
.mz-ftabs.is-ready .mz-fpanel.is-active { display: block; }
.mz-ftabs:not(.is-ready) .mz-fpanel { margin-bottom: 16px; }

/* ---------- Lợi ích: dải xanh / danh sách ---------- */
.mz-sec--band { color: #dce8ff; }
.mz-sec--band .mz-head h2 { color: #fff; }
.mz-sec--band .mz-head p { color: #dce8ff; }
.mz-sec--band .mz-eyebrow { background: rgba(255, 255, 255, .16); color: #fff; }
.mz-sec--band .mz-eyebrow::before { background: #fff; }
.mz-sec--band .mz-grad { color: #bfe9ff; }
.mz-bband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mz-bband > div { padding: 8px 28px 8px 0; margin-right: 28px; border-right: 1px solid rgba(255, 255, 255, .25); }
.mz-bband > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.mz-bband .mz-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; margin-bottom: 16px; }
.mz-bband h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; color: #fff; line-height: 1.3; }
.mz-bband p { color: #dce8ff; font-size: .9688rem; }
.mz-brows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.mz-brow { display: flex; gap: 20px; padding: 28px 0; border-top: 2px solid var(--mz-primary); align-items: flex-start; }
.mz-brow__n { flex: none; width: 56px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--mz-primary); line-height: 1; }
.mz-brow h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.mz-brow p { color: var(--mz-text); font-size: .9688rem; }

/* ---------- CTA: hàng / giữa / chia đôi ---------- */
.mz-cta-panel--row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.mz-cta-panel--row .mz-cta-text { flex: 1 1 440px; min-width: 0; }
.mz-cta-panel--row .mz-cta-text p { margin-bottom: 20px; }
.mz-cta-panel--row .mz-cta-act { flex: none; }
.mz-cta-links a { color: #fff; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; margin-right: 24px; display: inline-block; }
.mz-cta-links a:hover { color: #bfe9ff; }
.mz-cta-panel--center { background: var(--mz-navy); text-align: center; display: flex; flex-direction: column; align-items: center; }
.mz-cta-panel--center::before { left: -60px; bottom: -60px; right: auto; top: auto; width: 220px; height: 220px; background: var(--mz-primary); opacity: .5; }
.mz-cta-panel--center::after { right: -40px; top: -40px; bottom: auto; width: 160px; height: 160px; background: var(--mz-orange); opacity: .85; }
.mz-cta-panel--center h2,
.mz-cta-panel--center p { margin-left: auto; margin-right: auto; }
.mz-cta-panel--center p { color: #b8c6e6; margin-bottom: 28px; }
.mz-cta-panel--center .mz-cta-links { margin-top: 20px; }
.mz-cta-panel--center .mz-cta-links a { color: #9fb3de; text-decoration: none; margin: 0 12px; }
.mz-cta-panel--center .mz-cta-links a:hover { color: #fff; }
.mz-cta-split { background: #f1f7ff; border: 1px solid #d6e2f8; border-radius: 28px; padding: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 40px; }
.mz-cta-split__t { flex: 1 1 400px; min-width: 0; }
.mz-cta-split__t::before { content: ""; display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--mz-orange); margin-bottom: 20px; }
.mz-cta-split h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.25; font-weight: 800; margin: 0 0 14px; }
.mz-cta-split p { font-size: 1.0625rem; color: var(--mz-text); }
.mz-cta-split__b { flex: 0 1 300px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mz-cta-split__b .button { margin: 0; display: block; text-align: center; }

@media (max-width: 1099px) {
	.mz-bband { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.mz-bband > div:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
	.mz-cta-split { padding: 44px 36px; }
}
@media (max-width: 849px) {
	.mz-strips { grid-template-columns: 1fr; gap: 28px; }
	.mz-tl { grid-template-columns: 1fr; gap: 32px; }
	.mz-brows { grid-template-columns: 1fr; }
	.mz-fpanel { padding: 28px 24px; }
	.mz-frow__n { width: 64px; font-size: 40px; }
	.mz-bcard { padding: 28px; min-height: 0; }
	.mz-sec .mz-bcard--lg h3 { font-size: 1.625rem; }
	.mz-hero--center .mz-vis { margin-top: 20px; }
	.mz-prow__n { width: 56px; font-size: 32px; }
	.mz-cta-split { padding: 36px 24px; border-radius: 22px; }
}
@media (max-width: 549px) {
	.mz-bband { grid-template-columns: 1fr; }
	.mz-bband > div { border-right: 0; margin-right: 0; padding-right: 0; }
	.mz-kpis--3, .mz-kpis--6 { grid-template-columns: repeat(2, 1fr); }
	.mz-cta-panel--row .mz-cta-act .button { width: 100%; }
	.mz-hub { padding: 20px 16px; }
}
.mz-bcard--wide { grid-column: 1 / -1; min-height: 200px; }
.mz-bcard--span2 { grid-column: span 2; }
@media (max-width: 849px) {
	.mz-bento { grid-template-columns: 1fr; }
	.mz-bcard--lg, .mz-bcard--span2, .mz-bcard--wide { grid-column: auto; }
}
.mz-tl--one { max-width: 720px; margin: 0 auto; }
.mz-eyebrow[id], .mz-example[id] { scroll-margin-top: 110px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Báo cáo & cảnh báo: các bước trong hàng so le */
.mz-feature .mz-tl--one { margin: 28px 0 0; max-width: none; }
.mz-feature .mz-tl--one .mz-tl__body h3 { font-size: 1.125rem; font-weight: 700; margin: 8px 0 6px; }
.mz-feature .mz-tl--one .mz-tl__line { display: none; }
.mz-feature .mz-tl--one .mz-tl__body { padding-bottom: 20px; }
.mz-feature .mz-tl--one .mz-tl__step:last-child .mz-tl__body { padding-bottom: 0; }
.mz-feature .mz-tl--one { gap: 0; }
.mz-feature .mz-tl--one .mz-tl__body { padding-bottom: 22px; }
/* Các bước trong hàng so le: số có viền mờ như .mz-step, chữ cỡ như .mz-card */
.mz-feature .mz-tl--one .mz-tl__step { gap: 28px; padding-left: 11px; }
.mz-feature .mz-tl--one .mz-tl__n { box-shadow: 0 0 0 5px rgba(21, 98, 239, .2), 0 0 0 11px rgba(21, 98, 239, .08); }
.mz-feature .mz-tl--one .mz-tl__body { padding-top: 2px; padding-bottom: 30px; }
.mz-feature .mz-tl--one .mz-tl__step:last-child .mz-tl__body { padding-bottom: 0; }
.mz-feature .mz-tl--one .mz-tl__body h3 { font-size: 1.125rem; margin: 0 0 6px; line-height: 1.35; }
.mz-feature .mz-tl--one .mz-tl__body p { font-size: .9688rem; }
.mz-feature:has(.mz-tl--one) > .col > .col-inner > p { font-size: .9688rem; max-width: 480px; }


/* Báo cáo & cảnh báo: tab kênh thông báo + khung điện thoại trượt */
.mz-chtabs { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; max-width: 960px; margin: 8px auto 0; }
.mz-chtabs__nav { display: flex; flex-direction: column; gap: 12px; }
.mz-chtab {
	width: 100%; margin: 0; text-align: left; cursor: pointer;
	display: flex; align-items: center; gap: 16px; padding: 16px 20px;
	background: #fff; border: 1.5px solid var(--mz-line); border-radius: 16px;
	font-family: var(--mz-font); text-transform: none; letter-spacing: 0; line-height: 1.3;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mz-chtab:hover { border-color: #bfd3fa; }
.mz-chtab.is-active { border-color: var(--mz-primary); box-shadow: 0 10px 28px rgba(21, 98, 239, .14); transform: translateX(6px); }
.mz-chtab__logo { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--mz-primary-50); display: flex; align-items: center; justify-content: center; }
.mz-chtab__logo img { width: 26px; height: 26px; object-fit: contain; display: block; }
.mz-chtab__logo--app { background: var(--mz-primary); }
.mz-chtab__logo--app .mz-ico { margin: 0; width: 26px; height: 26px; background: transparent; color: #fff; }
.mz-chtab__t { display: block; min-width: 0; }
.mz-chtab__t b { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--mz-ink); }
.mz-chtab__t span { display: block; margin-top: 3px; font-size: .9rem; font-weight: 400; color: var(--mz-text); }

.mz-phone { width: 100%; max-width: 320px; margin: 0 auto; padding: 10px; background: #0b1b3f; border-radius: 44px; box-shadow: 0 28px 60px rgba(11, 27, 63, .22); }
.mz-phone__screen { overflow: hidden; border-radius: 34px; background: #fff; aspect-ratio: 9 / 19; touch-action: pan-y; }
.mz-phone__track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.mz-phone__slide { flex: 0 0 100%; height: 100%; }
.mz-phone__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mz-chtabs:not(.is-ready) .mz-phone__track { flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .mz-phone__track, .mz-chtab { transition: none; } }
@media (max-width: 849px) {
	.mz-chtabs { grid-template-columns: 1fr; gap: 32px; }
	.mz-chtabs__nav { flex-direction: row; overflow-x: auto; gap: 10px; padding: 4px 2px 10px; scrollbar-width: none; }
	.mz-chtabs__nav::-webkit-scrollbar { display: none; }
	.mz-chtab { width: auto; flex: none; padding: 10px 16px 10px 10px; gap: 10px; }
	.mz-chtab.is-active { transform: none; }
	.mz-chtab__logo { width: 36px; height: 36px; border-radius: 10px; }
	.mz-chtab__logo img { width: 20px; height: 20px; }
	.mz-chtab__logo--app .mz-ico { width: 20px; height: 20px; }
	.mz-chtab__t span { display: none; }
	.mz-chtab__t b { font-size: .9375rem; }
}

/* Thẻ minh hoạ báo cáo / cảnh báo: số liệu cụ thể */
.mz-badge-info { align-self: flex-start; background: var(--mz-primary-50); color: var(--mz-primary); font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.mz-badge-crit { align-self: flex-start; background: #fde8e8; color: #c62828; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.mz-acard--crit { border-color: #f3b9b9; box-shadow: 0 20px 40px rgba(198, 40, 40, .1); }
.mz-acard .mz-acard__d { margin-top: -4px; }
.mz-msg .mz-mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.4; }
.mz-msg .mz-mrow + .mz-mrow { border-top: 1px dashed #d6e2f8; padding-top: 8px; }
.mz-mrow__k { color: var(--mz-text); }
.mz-mrow__v { font-weight: 700; color: var(--mz-ink); font-size: 14px; white-space: nowrap; }
.mz-msg--warn { background: #fff6f1; border-radius: 12px; }
.mz-msg--warn .mz-mrow + .mz-mrow { border-top-color: #f5d3c3; }
.mz-msg--warn .mz-mrow:first-child .mz-mrow__v { color: var(--mz-orange-600); }
.mz-acard .mz-msg { border-radius: 12px; }
/* Hàng tính năng: hai thẻ cảnh báo giãn đủ chiều rộng cột (không bị khống chế 560px và dạt phải) */
.mz-feature .mz-vis:has(> .mz-alerts) { max-width: none; margin-left: 0; }
.mz-feature .mz-vis > .mz-alerts .mz-acard { flex: 1 1 240px; }

/* Khung "Gộp nguồn dữ liệu": hàng logo nguồn + file → mũi tên → bảng đã gộp */
.mz-merge { align-items: stretch; gap: 14px; padding: 28px; text-align: left; }
.mz-merge .mz-bl__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mz-merge .mz-bl__tile { min-height: 76px; padding: 10px 4px; gap: 6px; border-radius: 14px; }
.mz-merge .mz-bl__tile img { width: 34px; height: 34px; }
.mz-merge .mz-bl__tile .mz-ico { --mzs: 18px; width: 34px; height: 34px; margin: 0; }
.mz-merge .mz-bl__tile--txt { font-size: .75rem; }
.mz-merge .mz-join__op { padding: 2px 0; }
.mz-import-sec .mz-feature p { margin-bottom: 14px; }
.mz-merge .mz-bl__logos:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 280px; align-self: center; width: 100%; }
.mz-merge--map .mz-bl__tr { grid-template-columns: 1.2fr 1fr 1.2fr; }
@media (max-width: 549px) { .mz-merge .mz-bl__logos:not(:has(> :nth-child(2):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lợi ích dạng sáng: tránh hai khối xanh liền nhau với CTA cuối trang */
.mz-benefits--light .mz-bband { margin-top: 8px; }
.mz-benefits--light .mz-bband > div { border-right-color: var(--mz-line); }
.mz-benefits--light .mz-bband .mz-ico { background: var(--mz-primary-50); color: var(--mz-primary); }
.mz-benefits--light .mz-bband h3 { color: var(--mz-ink); }
.mz-benefits--light .mz-bband p { color: var(--mz-text); }
/* Từng lợi ích là một thẻ giống .mz-card */
.mz-benefits--light .mz-bband { gap: 20px; row-gap: 20px; }
.mz-benefits--light .mz-bband > div,
.mz-benefits--light .mz-bband > div:nth-child(2n),
.mz-benefits--light .mz-bband > div:last-child {
	margin: 0;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-radius);
	box-shadow: var(--mz-shadow-sm);
}
.mz-benefits--light .mz-bband .mz-ico { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 0; }
.mz-benefits--light .mz-bband h3 { font-size: 1.125rem; margin: 18px 0 8px; }

/* ---------- Hỏi đáp dạng accordion (trang Hợp nhất dữ liệu). JS thêm .is-acc; không có JS thì giữ dạng lưới ---------- */
.mz-brows.is-acc { display: block; max-width: 880px; margin: 0 auto; }
.mz-brows.is-acc .mz-brow { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 0; padding: 0; margin: 0 0 14px; border: 1.5px solid #dce6f8; border-radius: 16px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.mz-brows.is-acc .mz-brow:hover { border-color: #bfd3fa; }
.mz-brows.is-acc .mz-brow.is-open { border-color: var(--mz-primary); box-shadow: 0 12px 28px rgba(21, 98, 239, .10); }
.mz-brows.is-acc .mz-brow > div:last-child { display: contents; }
.mz-brows.is-acc .mz-brow__n { grid-column: 1; grid-row: 1; justify-self: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mz-primary-50); font-size: 14px; letter-spacing: 0; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.mz-brows.is-acc .mz-brow.is-open .mz-brow__n { background: var(--mz-primary); color: #fff; }
.mz-brows.is-acc .mz-brow h3 { grid-column: 2; grid-row: 1; position: relative; margin: 0; padding: 22px 64px 22px 0; font-size: 1.0625rem; line-height: 1.4; cursor: pointer; user-select: none; }
.mz-brows.is-acc .mz-brow h3::after { content: ""; position: absolute; right: 28px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--mz-primary); border-bottom: 2px solid var(--mz-primary); transform: rotate(45deg); transition: transform .25s ease, margin-top .25s ease; }
.mz-brows.is-acc .mz-brow.is-open h3::after { transform: rotate(-135deg); margin-top: -2px; }
.mz-brows.is-acc .mz-brow h3:focus-visible { outline: 2px solid var(--mz-primary); outline-offset: -2px; border-radius: 12px; }
.mz-brows.is-acc .mz-brow p { grid-column: 2; grid-row: 2; margin: 0; padding: 0 64px 0 0; max-height: 0; overflow: hidden; opacity: 0; line-height: 1.7; text-wrap: pretty; transition: max-height .3s ease, opacity .25s ease, padding-bottom .3s ease; }
.mz-brows.is-acc .mz-brow.is-open p { opacity: 1; padding-bottom: 24px; }
@media (max-width: 549px) {
	.mz-brows.is-acc .mz-brow { grid-template-columns: 56px minmax(0, 1fr); }
	.mz-brows.is-acc .mz-brow__n { width: 32px; height: 32px; font-size: 13px; }
	.mz-brows.is-acc .mz-brow h3 { padding: 18px 48px 18px 0; font-size: 1rem; }
	.mz-brows.is-acc .mz-brow h3::after { right: 20px; }
	.mz-brows.is-acc .mz-brow p { padding-right: 20px; }
}

/* ---------- Tab ngang + thẻ 2 cột (ảnh trái, nội dung phải) — trang Hợp nhất dữ liệu. Dùng chung JS data-mz-ftabs ---------- */
.mz-htabs__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 28px; }
.mz-htab { margin: 0; padding: 12px 28px; border: 0; border-radius: 10px; background: #fff; color: var(--mz-ink); font: 600 15px/1.2 var(--mz-font); text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: 0 1px 2px rgba(11, 27, 63, .04); transition: background .15s ease, color .15s ease; }
.mz-htab:hover { background: #eaf1ff; }
.mz-htab.is-active { background: #dbe7ff; color: var(--mz-primary); }
.mz-hpanel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px 48px; background: #fff; border-radius: 24px; box-shadow: 0 20px 48px rgba(21, 98, 239, .08); }
.mz-htabs.is-ready .mz-hpanel { display: none; }
.mz-htabs.is-ready .mz-hpanel.is-active { display: grid; }
.mz-htabs:not(.is-ready) .mz-hpanel { margin-bottom: 16px; }
.mz-hpanel__vis { padding: 24px; border-radius: 20px; background: #f4f8fe; }
.mz-hpanel__vis .mz-join { padding: 0; }
.mz-hpanel__txt h3 { margin: 0 0 12px; font-size: 1.625rem; font-weight: 800; line-height: 1.25; }
.mz-hpanel__txt > p { margin: 0 0 20px; font-size: 1rem; line-height: 1.7; color: var(--mz-text); }
.mz-hlist { margin: 0 0 28px; padding: 0; list-style: none; }
.mz-hlist li { position: relative; margin: 0 0 12px; padding-left: 28px; font-size: 1rem; line-height: 1.6; color: var(--mz-text); }
.mz-hlist li::before { content: "\2726"; position: absolute; left: 0; top: 0; color: var(--mz-primary); font-size: 15px; }
@media (max-width: 849px) {
	.mz-hpanel { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; }
	.mz-htabs__nav { gap: 8px; }
	.mz-htab { padding: 10px 18px; font-size: 14px; }
}
.mz-uses-sec .mz-head h2 { text-wrap: balance; }

/* Tab ngang tự chạy: thanh tiến trình dưới tab đang chọn, hết thanh thì JS chuyển tab kế (animationend). Hover/ngoài màn hình thì tạm dừng. */
.mz-htab { position: relative; overflow: hidden; }
.mz-hpanel.is-active { animation: mz-hfade .4s ease; }
@keyframes mz-hfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mz-htab-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mz-htabs.is-auto .mz-htab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mz-primary); transform-origin: left center; animation: mz-htab-progress 6s linear forwards; }
.mz-htabs.is-auto.is-paused .mz-htab.is-active::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mz-hpanel.is-active { animation: none; } }

/* Cột chữ của tab: nhãn nhỏ */
.mz-hpanel__txt > p { margin: 0 0 20px; }
.mz-hlabel { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-primary); }
.mz-hpanel__txt .mz-hlist { margin-bottom: 28px; }
.mz-hpanel__txt .mz-hlist li { margin-bottom: 10px; font-size: .9688rem; }

/* ---------- Sơ đồ 3 cột: Kết nối → Nối và chỉnh sửa → Dùng ở mọi nơi (trang Hợp nhất dữ liệu) ---------- */
.mz-bl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; align-items: start; }
.mz-bl__col { position: relative; min-width: 0; }
.mz-bl__col:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -36px; width: 12px; height: 12px; margin-top: -6px; border-top: 2.5px solid var(--mz-primary); border-right: 2.5px solid var(--mz-primary); transform: rotate(45deg); opacity: .55; }
.mz-bl__h { text-align: center; margin-bottom: 20px; }
.mz-bl__h h3 { margin: 0 0 4px; font-size: 1.375rem; font-weight: 800; line-height: 1.25; color: var(--mz-ink); }
.mz-bl__h p { margin: 0; font-size: .9375rem; color: var(--mz-muted); }
.mz-bl__logos, .mz-bl__tools, .mz-bl__out { display: grid; gap: 12px; }
.mz-bl__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mz-bl__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.mz-bl__out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mz-bl__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 14px 8px; border: 1px solid #e3ebf9; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(21, 98, 239, .06); text-align: center; font-size: .875rem; font-weight: 600; color: var(--mz-ink); }
.mz-bl__tile img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }
.mz-bl__tile--txt { font-size: .8125rem; }
.mz-bl__tile .mz-ico { --mzs: 22px; width: 40px; height: 40px; border-radius: 10px; }
.mz-bl__out .mz-bl__tile { min-height: 118px; }
.mz-bl__out .mz-bl__tile .mz-ico { --mzs: 26px; width: 48px; height: 48px; border-radius: 12px; }
.mz-bl__table { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #dce6f8; box-shadow: 0 12px 28px rgba(21, 98, 239, .10); }
.mz-bl__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--mz-ink); }
.mz-bl__pill { padding: 5px 10px; border-radius: 8px 8px 0 0; background: rgba(255, 255, 255, .14); color: #c9d6f2; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mz-bl__pill.is-on { background: #fff; color: var(--mz-ink); }
.mz-bl__pill--r { margin-left: auto; border-radius: 8px; background: var(--mz-primary); color: #fff; }
.mz-bl__tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 9px 14px; font-size: 12px; color: var(--mz-ink); border-top: 1px solid #eef3fc; }
.mz-bl__tr--h { border-top: 0; background: #f4f8fe; color: var(--mz-muted); font-weight: 600; }
.mz-bl__tr .mz-o { color: var(--mz-orange); font-weight: 700; }
.mz-bl__foot { padding: 9px 14px; border-top: 1px solid #eef3fc; text-align: right; font-size: 11px; color: var(--mz-muted); }
@media (max-width: 849px) {
	.mz-bl { grid-template-columns: 1fr; gap: 44px; }
	.mz-bl__col:not(:last-child)::after { top: auto; bottom: -32px; right: auto; left: 50%; margin: 0 0 0 -6px; transform: rotate(135deg); }
}
.mz-bl { align-items: stretch; }
.mz-bl__col { display: flex; flex-direction: column; }
.mz-bl__logos, .mz-bl__out { flex: 1 1 auto; grid-auto-rows: 1fr; }

/* ---------- Lưới thẻ 2 cột: icon trái + tiêu đề + mô tả (Chỉnh sửa bảng) ---------- */
.mz-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mz-ccard { display: flex; align-items: center; gap: 24px; padding: 28px; border: 1px solid #e3ebf9; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(21, 98, 239, .07); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mz-ccard:hover { transform: translateY(-3px); border-color: #bfd3fa; box-shadow: 0 18px 40px rgba(21, 98, 239, .12); }
.mz-ccard .mz-ico { --mzs: 34px; flex: none; width: 84px; height: 84px; border-radius: 20px; }
.mz-ccard__b { min-width: 0; }
.mz-ccard h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.mz-ccard p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--mz-text); }
@media (max-width: 849px) {
	.mz-cgrid { grid-template-columns: 1fr; gap: 16px; }
	.mz-ccard { gap: 18px; padding: 20px; }
	.mz-ccard .mz-ico { --mzs: 26px; width: 60px; height: 60px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .mz-ccard { transition: none; } .mz-ccard:hover { transform: none; } }

/* ---------- Icon + màu các bước chỉnh sửa bảng, đồng bộ với app ---------- */
.mzi-eyeoff { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E"); }
.mzi-sort { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E"); }
.mzi-filter { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54z'/%3E%3C/svg%3E"); }
.mzi-hash { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
.mzi-bars { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); }
.mz-ico.mz-tc--green { background: #dcfce7; color: #16a34a; }
.mz-ico.mz-tc--orange { background: #ffedd5; color: #ea580c; }
.mz-ico.mz-tc--blue { background: #dbeafe; color: #2563eb; }
.mz-ico.mz-tc--purple { background: #ede9fe; color: #7c3aed; }
.mz-ico.mz-tc--teal { background: #ccfbf1; color: #0d9488; }
.mz-ico.mz-tc--red { background: #fee2e2; color: #dc2626; }

/* ---------- Thư viện chỉ số: lưới thẻ chỉ số + nút Xem thêm (trang Metric) ---------- */
.mz-mlib { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mz-mcard { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid #e3ebf9; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mz-mcard:hover { transform: translateY(-3px); border-color: #bfd3fa; box-shadow: 0 16px 36px rgba(21, 98, 239, .12); }
.mz-mcard__src { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--mz-muted); }
.mz-mcard__src img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; }
.mz-mcard h3 { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-mcard p { margin: 0; font-size: .9063rem; line-height: 1.6; color: var(--mz-text); }
.mz-mlib__more { margin-top: 12px; text-align: center; }
@media (max-width: 1099px) { .mz-mlib { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 549px) { .mz-mlib { grid-template-columns: 1fr; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .mz-mcard { transition: none; } .mz-mcard:hover { transform: none; } }

.mz-head h2 { text-wrap: balance; }

/* Ảnh minh hoạ trong hàng tính năng (img thường, không qua thư viện media) */
.mz-feature .mz-fimg { display: block; width: 100%; max-width: 100%; height: auto; }
/* Ảnh nằm trong <p>: bỏ giới hạn 480px của '.mz-feature p' để ảnh rộng hết ô */
.mz-feature p:has(> .mz-fimg) { max-width: none; }

/* Khung ảnh trong thẻ tab (ảnh demo SVG/webp thay cho bảng minh hoạ) */
.mz-hpanel__vis--img { padding: 0; background: none; border-radius: 0; }
.mz-hpanel__vis--img img { display: block; width: 100%; height: auto; }

/* ---------- Thư viện biểu đồ + thư viện dashboard (trang Chart & Dashboard) ---------- */
.mz-clib { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.mz-clib__card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 10px 18px; border: 1px solid #e3ebf9; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); text-align: center; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mz-clib__card:hover { transform: translateY(-3px); border-color: #bfd3fa; box-shadow: 0 16px 36px rgba(21, 98, 239, .12); }
.mz-clib__card img { width: 64px; height: 64px; margin-bottom: 6px; }
.mz-clib__card h3 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--mz-ink); }
.mz-clib__card p { margin: 0; font-size: .8125rem; color: var(--mz-muted); }
@media (max-width: 1099px) { .mz-clib { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 849px) { .mz-clib { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 549px) { .mz-clib { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .mz-clib__card { transition: none; } .mz-clib__card:hover { transform: none; } }

/* ---------- Thư viện dashboard: tiêu đề trên, lưới ảnh ngang xếp so le (kiểu ladi-container) ----------
   Thứ tự trong trang là: hàng ảnh, hàng tiêu đề, hàng nút. Dùng flex + order để tiêu đề lên trên mà không phải sửa nội dung.
   5 thẻ ảnh ngang 16:9 xếp gạch: hàng trên 3 thẻ (1, 3, 5), hàng dưới 2 thẻ (2, 4) lệch nửa thẻ. Lưới rộng hơn khung
   chứa nên hai mép bị cắt nhẹ như ladi. Bản cũ: cung 5 thẻ dọc cao 400/310/260 và tiêu đề nằm lấn vào khoảng trống. */
.mz-dlib-sec { overflow-x: clip; }
.mz-dlib-sec .section-content { display: flex; flex-direction: column; }
.mz-dlib-sec .section-content > .row { width: 100%; }
.mz-dlib-sec .section-content > .row:has(.mz-head) { order: -1; }
.mz-dlib-sec .section-content > .row:has(.mz-dshow) { order: 1; }
.mz-dlib-sec .section-content > .row:not(:has(.mz-head)):not(:has(.mz-dshow)) { order: 2; margin-top: 28px; }
.mz-dshow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: start; margin-bottom: 8px;
	width: min(calc(100vw + 120px), 1640px); margin-left: 50%; transform: translateX(-50%); }
.mz-dshow__card { position: relative; overflow: hidden; aspect-ratio: 16 / 9; grid-column: span 2; border-radius: 16px; background: #fff; border: 1px solid #e3eaf6; box-shadow: none; transition: transform .25s ease; }
.mz-dshow__card:hover { transform: translateY(-4px); }
.mz-dshow__card img { display: block; width: 100%; height: 100%; object-fit: fill; object-position: top center; }
.mz-dshow__card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.mz-dshow__card:nth-child(2) { grid-column: 2 / span 2; grid-row: 2; }
.mz-dshow__card:nth-child(3) { grid-column: 3 / span 2; grid-row: 1; }
.mz-dshow__card:nth-child(4) { grid-column: 4 / span 2; grid-row: 2; }
.mz-dshow__card:nth-child(5) { grid-column: 5 / span 2; grid-row: 1; }
.mz-dshow__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 28px 14px 12px; background: linear-gradient(to top, rgba(11, 27, 63, .82), rgba(11, 27, 63, 0)); color: #fff; }
.mz-dshow__cap strong { font-size: .8125rem; font-weight: 700; line-height: 1.35; }
.mz-dshow__cap span { font-size: .6875rem; font-weight: 600; opacity: .8; }
/* Chỉ hiện ảnh, ẩn dòng mô tả phía dưới (tên mẫu vẫn còn ở alt của ảnh). Muốn hiện lại thì xoá dòng này. */
.mz-dshow__cap { display: none; }
@media (max-width: 849px) {
	.mz-dshow { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; width: auto; margin-left: 0; transform: none; }
	.mz-dshow__card, .mz-dshow__card:nth-child(n) { flex: none; width: 300px; height: auto; grid-column: auto; grid-row: auto; scroll-snap-align: start; }
}
/* Có JS: hai hàng chạy ngang ngược chiều, lặp vô tận (JS dựng hàng và đặt --mz-set, --mz-dur). Hàng 2 lệch nửa thẻ. */
.mz-dshow.is-marquee { --mz-card: clamp(280px, 30vw, 480px); display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: calc(100vw - var(--mz-sbw, 0px)); margin-left: 50%; transform: translateX(-50%);
	padding: 0; overflow: visible; scroll-snap-type: none; margin-bottom: 0; }
.mz-dshow.is-marquee > .mz-dshow__card { display: none; }
.mz-dshow__row { width: 100%; min-width: 0; overflow: hidden; padding: 14px 0 30px; margin: -14px 0 -30px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.04) 4%, rgba(0,0,0,.16) 8%, rgba(0,0,0,.42) 12%, rgba(0,0,0,.78) 16%, #000 20%, #000 80%, rgba(0,0,0,.78) 84%, rgba(0,0,0,.42) 88%, rgba(0,0,0,.16) 92%, rgba(0,0,0,.04) 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.04) 4%, rgba(0,0,0,.16) 8%, rgba(0,0,0,.42) 12%, rgba(0,0,0,.78) 16%, #000 20%, #000 80%, rgba(0,0,0,.78) 84%, rgba(0,0,0,.42) 88%, rgba(0,0,0,.16) 92%, rgba(0,0,0,.04) 96%, transparent 100%); } /* mờ dần hai cạnh theo đường cong: ngoài cùng gần như tàng hình, vào trong 20% mới rõ hẳn. Mục "Hỏi là có số" dùng 7% tuyến tính */
.mz-dshow__track { display: flex; gap: 20px; width: max-content; will-change: transform; animation: mz-dshow-l var(--mz-dur, 60s) linear infinite; }
.mz-dshow__row--rev .mz-dshow__track { animation-name: mz-dshow-r; margin-left: calc(var(--mz-card) / -2); }
.mz-dshow.is-marquee .mz-dshow__track .mz-dshow__card { display: block; flex: none; width: var(--mz-card); height: auto; grid-column: auto; grid-row: auto; scroll-snap-align: none; }
.mz-dshow.is-marquee:hover .mz-dshow__track, .mz-dshow.is-marquee.is-paused .mz-dshow__track { animation-play-state: paused; }
@keyframes mz-dshow-l { to { transform: translate3d(calc(var(--mz-set, 2400px) * -1), 0, 0); } }
@keyframes mz-dshow-r { from { transform: translate3d(calc(var(--mz-set, 2400px) * -1), 0, 0); } to { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .mz-dshow__card { transition: none; } .mz-dshow__card:hover { transform: none; } }

/* Danh sách ✦ trong hàng tính năng chữ/ảnh (section AI trang Chart & Dashboard) */
.mz-ai-sec .mz-feature p, .mz-chart-sec .mz-feature p { margin-bottom: 18px; }
.mz-feature .mz-hlist { margin: 0; max-width: 480px; }
.mz-feature .mz-hlist li { font-size: 1rem; }

/* ---------- Kết nối: 4 thẻ loại nguồn + đường nối đổ về lõi Mozo (kiểu Databox) ---------- */
.mzi-upload { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); }
.mz-ico.mz-tc--slate { background: #e5e7eb; color: #374151; }
.mz-hub2 { display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.mz-hub2__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 32px; }
.mz-hub2__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 22px 24px; border: 1px solid #e3ebf9; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(21, 98, 239, .07); text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mz-hub2__card:hover { transform: translateY(-3px); border-color: #bfd3fa; box-shadow: 0 18px 38px rgba(21, 98, 239, .12); }
.mz-hub2__card::after { content: ""; position: absolute; left: 50%; bottom: -32px; height: 32px; border-left: 2px dashed #b7c3e6; }
.mz-hub2__card .mz-ico { --mzs: 24px; width: 52px; height: 52px; border-radius: 50%; }
.mz-hub2__card h3 { margin: 6px 0 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; color: var(--mz-ink); }
.mz-hub2__card p { flex: 1; margin: 0; font-size: .9063rem; line-height: 1.6; color: var(--mz-text); }
.mz-hub2__link { margin-top: 6px; font-size: .9063rem; font-weight: 700; color: var(--mz-ink); }
.mz-hub2__link:hover { color: var(--mz-primary); }
.mz-hub2__rail { position: relative; height: 32px; margin: 0 12.5%; border-top: 2px dashed #b7c3e6; }
.mz-hub2__rail::after { content: ""; position: absolute; left: 50%; top: 0; height: 32px; border-left: 2px dashed #b7c3e6; }
.mz-hub2 .mz-hub__core { margin-top: 0; }
@media (max-width: 1099px) { .mz-hub2__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; } .mz-hub2__card::after, .mz-hub2__rail { display: none; } }
@media (max-width: 549px) { .mz-hub2__cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mz-hub2__card { transition: none; } .mz-hub2__card:hover { transform: none; } }
.mz-hero--center .mz-vis.mz-vis--wide { max-width: 1120px; }


/* ---------- Thư viện dashboard: trang danh sách (lọc, tìm kiếm, phân trang) + trang chi tiết ---------- */
.mzi-search-i { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.mz-dl-page { background: #fff; }
.mz-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.mz-dl-hero { padding: 72px 0 56px; }
.mz-dl-hero .mz-wrap { text-align: center; }
.mz-dl-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.mz-dl-hero__cta--left { justify-content: flex-start; }
/* Các trang thư viện (dashboard, data mẫu, chỉ số, biểu đồ) và UTM Builder: hero nền trắng, bỏ nền chuyển sắc xanh nhạt. */
.mz-dl-page .mz-dl-hero, .mz-dl-hero.utm-hero { background: #fff; }
.mz-dl-hero__cta .button { margin: 0; }
.mz-dl { padding: 40px 0 96px; }
.mz-dl__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.mz-dl__filters { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.mz-dl__search { position: relative; margin: 0; }
.mz-dl__search input[type="search"] { width: 100%; height: 46px; margin: 0; padding: 0 44px 0 16px; border: 1.5px solid #dce6f8; border-radius: 12px; background: #fff; box-shadow: none; font-size: .9375rem; color: var(--mz-ink); }
.mz-dl__search input[type="search"]:focus { border-color: var(--mz-primary); box-shadow: 0 0 0 3px rgba(21, 98, 239, .12); }
.mz-dl__search button { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--mz-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mz-dl__search button .mz-ico { --mzs: 20px; width: 22px; height: 22px; background: transparent; }
.mz-dl__clear { font-size: .875rem; font-weight: 700; color: var(--mz-primary); }
.mz-dl__group h2 { margin: 0 0 10px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-muted); }
.mz-dl__group ul { margin: 0; padding: 0; list-style: none; }
.mz-dl__group li { margin: 0; }
.mz-dl__group a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: .9375rem; font-weight: 600; color: var(--mz-ink); transition: background .15s ease; }
.mz-dl__group a span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mz-dl__group a img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; flex: none; }
.mz-dl__group a em { font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--mz-muted); }
.mz-dl__group a:hover { background: #f1f5fc; }
.mz-dl__group a.is-on { background: #e6efff; color: var(--mz-primary); }
.mz-dl__group a.is-on em { color: var(--mz-primary); }
.mz-dl__bar { margin-bottom: 20px; font-size: .9375rem; color: var(--mz-muted); }
.mz-dl__bar p { margin: 0; }
.mz-dl__bar strong { color: var(--mz-ink); }
.mz-dl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mz-dl__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mz-dl__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e3ebf9; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mz-dl__card:hover { transform: translateY(-3px); border-color: #bfd3fa; box-shadow: 0 16px 36px rgba(21, 98, 239, .12); }
.mz-dl__thumb { display: block; aspect-ratio: 16 / 9; background: #f4f8fe; overflow: hidden; }
.mz-dl__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mz-dl__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.mz-dl__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mz-dl__tags span, .mz-dl__tags a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #e6efff; color: var(--mz-primary); font-size: .75rem; font-weight: 700; text-decoration: none; }
.mz-dl__tags img { width: 14px; height: 14px; object-fit: contain; border-radius: 3px; }
.mz-dl__tags--lg span, .mz-dl__tags--lg a { padding: 5px 12px; font-size: .8125rem; }
.mz-dl__title { font-size: 1.0625rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-dl__more { margin-top: auto; font-size: .875rem; font-weight: 700; color: var(--mz-primary); }
.mz-dl__pager { margin-top: 40px; }
.mz-dl__pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mz-dl__pager li { margin: 0; }
.mz-dl__pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid #dce6f8; border-radius: 10px; background: #fff; font-size: .9375rem; font-weight: 700; color: var(--mz-ink); text-decoration: none; }
.mz-dl__pager a.page-numbers:hover { border-color: var(--mz-primary); color: var(--mz-primary); }
.mz-dl__pager .page-numbers.current { border-color: var(--mz-primary); background: var(--mz-primary); color: #fff; }
.mz-dl__pager .page-numbers.dots { border: 0; background: transparent; }
.mz-dl__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 24px; border: 1.5px dashed #b7cdf8; border-radius: 18px; background: #f8fbff; text-align: center; }
.mz-dl__empty h3 { margin: 8px 0 0; font-size: 1.25rem; font-weight: 800; color: var(--mz-ink); }
.mz-dl__empty p { margin: 0 0 12px; color: var(--mz-text); }
/* trang chi tiết */
.mz-dl-detail { padding: 40px 0 48px; text-align: left; }
.mz-dl__crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: .875rem; color: var(--mz-muted); }
.mz-dl__crumb a { color: var(--mz-muted); }
.mz-dl__crumb a:hover { color: var(--mz-primary); }
.mz-dl__crumb span:last-child { color: var(--mz-ink); font-weight: 600; }
.mz-dl-detail__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.mz-dl-detail__intro h1 { margin: 16px 0 14px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; color: var(--mz-ink); }
.mz-dl-detail__intro .mz-lead { margin-bottom: 24px; }
.mz-dl-detail__img img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 56px rgba(21, 98, 239, .16); }
.mz-dl-body { padding: 56px 0 24px; }
.mz-dl-detail__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.mz-dl-detail__main h2 { margin: 28px 0 14px; font-size: 1.5rem; font-weight: 800; color: var(--mz-ink); }
.mz-dl-detail__content { font-size: 1.0625rem; line-height: 1.75; color: var(--mz-text); }
.mz-dl-detail__metrics { max-width: none; }
.mz-dl-detail__card { position: sticky; top: 100px; padding: 24px; border: 1px solid #e3ebf9; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(21, 98, 239, .08); }
.mz-dl-detail__card h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; }
.mz-dl-detail__card p { margin: 0 0 16px; font-size: .9375rem; }
.mz-dl-detail__card h4 { margin: 20px 0 8px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-muted); }
.mz-dl-detail__card .button { margin: 0; }
.mz-dl-related { padding: 40px 0 96px; }
.mz-dl-related h2 { margin: 0 0 24px; font-size: 1.5rem; font-weight: 800; color: var(--mz-ink); }
@media (max-width: 1099px) { .mz-dl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mz-dl__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 849px) {
	.mz-dl-hero { padding: 48px 0 36px; }
	.mz-dl__layout { grid-template-columns: 1fr; gap: 24px; }
	.mz-dl__filters { position: static; }
	.mz-dl__group ul { display: flex; flex-wrap: wrap; gap: 8px; }
	.mz-dl__group a { padding: 7px 12px; border: 1px solid #dce6f8; border-radius: 999px; }
	.mz-dl__group a em { display: none; }
	.mz-dl-detail__top, .mz-dl-detail__cols { grid-template-columns: 1fr; gap: 28px; }
	.mz-dl-detail__card { position: static; }
}
@media (max-width: 549px) { .mz-dl__grid, .mz-dl__grid--3 { grid-template-columns: 1fr; gap: 16px; } .mz-wrap { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .mz-dl__card { transition: none; } .mz-dl__card:hover { transform: none; } }

/* Thư viện data mẫu: dòng thống kê trên thẻ + thông tin trang chi tiết */
.mz-dl__stat { font-size: .8125rem; font-weight: 600; color: var(--mz-muted); }
.mz-dl-detail__stat { margin: -8px 0 20px; font-size: .9375rem; font-weight: 600; color: var(--mz-muted); }
.mz-dl-detail__facts { margin: 0; }
.mz-dl-detail__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eef3fc; font-size: .9375rem; }
.mz-dl-detail__facts dt { margin: 0; color: var(--mz-muted); }
.mz-dl-detail__facts dd { margin: 0; font-weight: 700; color: var(--mz-ink); }

/* Thư viện chỉ số: thẻ chữ (không ảnh) + trang chi tiết không ảnh */
.mz-dl__card--text { gap: 8px; padding: 20px; }
.mz-dl__src { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--mz-muted); }
.mz-dl__src img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.mz-dl__card--text .mz-dl__title { font-size: 18px; }
.mz-dl__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; line-height: 1.6; color: var(--mz-text); }
.mz-dl__card--text .mz-dl__tags { margin-top: auto; padding-top: 6px; }
.mz-dl-detail__top--text { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 64px; }
.mz-dl-detail__logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--mz-line); border-radius: 24px; box-shadow: 0 24px 60px -28px rgba(11, 27, 63, .25); }
.mz-dl-detail__logo img { width: 42%; height: auto; max-height: 56%; object-fit: contain; }
/* khung ul của phân trang cũng mang class page-numbers: bỏ viền/nền thừa bên ngoài */
.mz-dl__pager ul.page-numbers { display: flex; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
/* "Xem thêm kết nối": nút viền, danh sách mở ra ngay trên nút */
.mz-dl__extra { margin: 0; padding: 0; list-style: none; }
.mz-dl__extra[hidden] { display: none; }
.mz-dl__toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin: 10px 0 0; padding: 0 16px; border: 1.5px solid var(--mz-primary); border-radius: 12px; background: transparent; box-shadow: none; font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--mz-primary); cursor: pointer; transition: background .15s ease; }
.mz-dl__toggle:hover { background: #eaf1ff; }
@media (min-width: 850px) { .mz-dl__filters { max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; } }
/* Trang thư viện (danh sách): trên desktop giữ container 1240px nhưng bỏ đệm hai bên; mobile giữ nguyên */
@media (min-width: 850px) { .mz-wrap.mz-dl__layout { padding-left: 0; padding-right: 0; } }
/* Trang chi tiết: tương tự trang danh sách, trên desktop giữ container nhưng bỏ đệm hai bên (cả hero, nội dung và mục liên quan cho thẳng hàng) */
@media (min-width: 850px) { .mz-dl-detail .mz-wrap, .mz-dl-body .mz-wrap, .mz-dl-related .mz-wrap { padding-left: 0; padding-right: 0; } }
/* Bộ lọc: gạch mờ phân cách phía trên mỗi nhóm + mũi tên thu gọn/mở rộng bên phải tiêu đề nhóm */
.mz-dl__group { padding-top: 22px; border-top: 1px solid #e3ebf9; }
.mz-dl__group h2.is-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.mz-dl__group h2.is-toggle::after { content: ""; flex: none; width: 8px; height: 8px; margin: -2px 6px 0 0; border-right: 2px solid var(--mz-muted); border-bottom: 2px solid var(--mz-muted); transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.mz-dl__group h2.is-toggle:hover { color: var(--mz-primary); }
.mz-dl__group h2.is-toggle:hover::after { border-color: var(--mz-primary); }
.mz-dl__group.is-collapsed h2.is-toggle::after { transform: rotate(-135deg); margin-top: 3px; }
.mz-dl__group.is-collapsed > :not(h2) { display: none !important; }
.mz-dl__group.is-collapsed h2 { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .mz-dl__group h2.is-toggle::after { transition: none; } }
/* Bộ lọc thư viện: mục lọc chữ thường (không đậm), tiêu đề nhóm viết thường nhưng vẫn đậm */
.mz-dl__group h2 { font-size: .9375rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--mz-ink); }
.mz-dl__group a, .mz-dl__group a em { font-weight: 400; }
/* Bộ lọc thư viện: thu nhỏ khoảng cách trên dưới cho gọn (desktop; mobile giữ chip như cũ) */
.mz-dl__filters { gap: 14px; }
.mz-dl__group { padding-top: 14px; }
.mz-dl__group h2 { margin-bottom: 6px; }
@media (min-width: 850px) { .mz-dl__group a { padding-top: 7px; padding-bottom: 7px; } }
/* Nhãn (danh mục, kết nối) trong thư viện: chữ thường, không đậm */
.mz-dl__tags span, .mz-dl__tags a { font-weight: 400; text-transform: none; }
/* Khung bên phải trang chi tiết: tiêu đề nhóm viết thường (không upper), giữ đậm, đồng bộ với bộ lọc */
.mz-dl-detail__card h4 { font-size: .9375rem; letter-spacing: 0; text-transform: none; color: var(--mz-ink); }

/* Icon trong popup menu: mỗi mục một màu, nền icon cùng tông nhưng nhạt hơn */
.mz-menu-2col > ul.nav-dropdown > li:nth-child(6n+1) { --ic: #2563eb; --ib: #dbeafe; }
.mz-menu-2col > ul.nav-dropdown > li:nth-child(6n+2) { --ic: #16a34a; --ib: #dcfce7; }
.mz-menu-2col > ul.nav-dropdown > li:nth-child(6n+3) { --ic: #ea580c; --ib: #ffedd5; }
.mz-menu-2col > ul.nav-dropdown > li:nth-child(6n+4) { --ic: #7c3aed; --ib: #ede9fe; }
.mz-menu-2col > ul.nav-dropdown > li:nth-child(6n+5) { --ic: #0d9488; --ib: #ccfbf1; }
.mz-menu-2col > ul.nav-dropdown > li:nth-child(6n+6) { --ic: #dc2626; --ib: #fee2e2; }
.mz-menu-2col > ul.nav-dropdown > li:nth-child(7) { --ic: #ca8a04; --ib: #fef3c7; }

/* Thư viện biểu đồ: thẻ có ảnh biến thể, khối biến thể ở trang chi tiết */
.mz-dl__thumb--chart { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
.mz-dl__thumb--chart img { width: 64px; height: 64px; object-fit: contain; flex: none; padding: 10px; border: 1px solid #e3ebf9; border-radius: 14px; background: #fff; }
.mz-dl__thumb--n1 img { width: 104px; height: 104px; padding: 16px; }
.mz-dl__thumb--chart em { position: absolute; right: 14px; bottom: 12px; padding: 2px 9px; border-radius: 999px; background: #e8f0fe; font-size: .75rem; font-style: normal; font-weight: 700; color: var(--mz-primary); }
.mz-dl__card--chart .mz-dl__desc { -webkit-line-clamp: 2; }
.mz-ch__stage { display: flex; align-items: center; justify-content: center; min-height: 280px; border: 1px solid #e3ebf9; border-radius: 18px; background: #f4f8fe; }
.mz-dl-detail__img.mz-ch__stage img { width: auto; max-width: 70%; height: 200px; border-radius: 0; box-shadow: none; }
.mz-ch__lead { margin: 0; font-size: 1.0625rem; line-height: 1.75; color: var(--mz-text); }
.mz-ch__count { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #e8f0fe; font-size: .875rem; font-weight: 700; vertical-align: middle; color: var(--mz-primary); }
.mz-ch__vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mz-ch__var { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; border: 1px solid #e3ebf9; border-radius: 16px; background: #fff; }
.mz-ch__var strong { font-size: .9375rem; font-weight: 800; color: var(--mz-ink); }
.mz-ch__var > span:last-child { font-size: .875rem; line-height: 1.55; color: var(--mz-text); }
.mz-ch__varimg { display: flex; align-items: center; justify-content: center; height: 112px; margin-bottom: 6px; border-radius: 12px; background: #f4f8fe; }
.mz-ch__varimg img { width: 80px; height: 80px; object-fit: contain; }
@media (max-width: 849px) { .mz-ch__stage { min-height: 220px; } .mz-dl-detail__img.mz-ch__stage img { height: 150px; } }
@media (max-width: 549px) { .mz-ch__vars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mz-dl__thumb--chart img { width: 56px; height: 56px; } }

/* Mục "Tất cả" của nhóm Kết nối: icon cắm điện cùng cỡ với logo nguồn */
.mz-dl__allico { display: block; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--mzi) center / contain no-repeat; mask: var(--mzi) center / contain no-repeat; }
.mz-dl__allico { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='5' cy='5' r='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3C/g%3E%3C/svg%3E"); }

/* ===== Trang UTM Builder ===== */
.utm-hero { padding: 64px 0 40px; }
.utm-page { padding: 0 0 72px; background: #fff; }
.utm-wrap { max-width: 1240px; margin: 0 auto; color: var(--mz-text); }
.utm-wrap .tab-bar { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 5px; border: 0; border-radius: 14px; background: #eaf0fb; }
.utm-wrap .tab-btn { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 22px; border: 0; border-radius: 10px; background: transparent; font-family: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none; color: var(--mz-muted); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.utm-wrap .tab-btn:hover:not(.active) { color: var(--mz-ink); }
.utm-wrap .tab-btn.active { background: #fff; box-shadow: 0 2px 8px rgba(21, 98, 239, .14); font-weight: 700; color: var(--mz-primary); }
.utm-wrap .tab-btn .icon { width: 16px; height: 16px; }
.utm-wrap .panel { display: none; padding: 0; background: none; border-radius: 0; }
.utm-wrap .panel.active { display: block; padding: 0; background: none; }
.utm-wrap #panel-decoder.active { max-width: 860px; margin: 0 auto; padding: 32px; border: 1px solid #e3ebf9; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(21, 98, 239, .08); }

/* Bố cục 2 cột: form bên trái, kết quả + QR bên phải */
.utm-wrap .utm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 32px; align-items: start; }
.utm-wrap .field-group { display: flex; flex-direction: column; gap: 20px; padding: 32px; border: 1px solid #e3ebf9; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(21, 98, 239, .08); }
.utm-wrap .utm-out { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }
.utm-wrap .field-row { display: flex; flex-direction: column; gap: 8px; }
.utm-wrap .field-row label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9375rem; font-weight: 700; color: var(--mz-ink); }
.utm-wrap input[type=url], .utm-wrap input[type=text] { width: 100%; height: 48px; margin: 0; padding: 0 16px; border: 1px solid #dce6f8; border-radius: 12px; background: #fff; box-shadow: none; font-family: inherit; font-size: .9375rem; color: var(--mz-ink); transition: border-color .15s, box-shadow .15s; }
.utm-wrap input[type=url]::placeholder, .utm-wrap input[type=text]::placeholder { color: #9aa8c4; }
.utm-wrap input[type=url]:focus, .utm-wrap input[type=text]:focus { border-color: var(--mz-primary); box-shadow: 0 0 0 4px rgba(21, 98, 239, .12); outline: 0; }
.utm-wrap .required-badge, .utm-wrap .optional-badge { padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; }
.utm-wrap .required-badge { background: #fee2e2; color: #b91c1c; }
.utm-wrap .optional-badge { background: #eaf0fb; color: var(--mz-muted); }
.utm-wrap .hint { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--mz-muted); }
.utm-wrap .suggest-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.utm-wrap .suggest-chip { display: inline-block; margin: 0; padding: 5px 12px; border: 1px solid #dce6f8; border-radius: 999px; background: #fff; font-family: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.3; text-transform: none; color: var(--mz-text); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.utm-wrap .suggest-chip:hover { border-color: var(--mz-primary); background: var(--mz-primary-50); color: var(--mz-primary); }
.utm-wrap .divider { margin: 4px 0; border: 0; border-top: 1px dashed #dce6f8; }
.utm-wrap .vn-preview { align-self: flex-start; margin: 0; padding: 2px 8px; border-radius: 6px; background: #e6f5ec; font-size: .75rem; font-style: normal; color: #0a7c42; }
.utm-wrap .check-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #e3ebf9; border-radius: 12px; background: #f8fafe; }
.utm-wrap .check-row input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--mz-primary); cursor: pointer; }
.utm-wrap .check-row label { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--mz-ink); cursor: pointer; }

/* Kết quả */
.utm-wrap .result-box { margin: 0; padding: 22px; border: 1px solid #cfe0fb; border-radius: 20px; background: #f1f6ff; }
.utm-wrap .result-label { margin: 0 0 10px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-primary); }
.utm-wrap .result-url { min-height: 72px; padding: 14px 16px; border: 1px solid #dce6f8; border-radius: 12px; background: #fff; font-size: .875rem; line-height: 1.6; color: var(--mz-primary-600); word-break: break-all; }
.utm-wrap .result-url.empty { font-style: normal; color: #9aa8c4; }
.utm-wrap .validate-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.utm-wrap .badge-ok, .utm-wrap .badge-warn { padding: 4px 11px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.utm-wrap .badge-ok { background: #e6f5ec; color: #0a7c42; }
.utm-wrap .badge-warn { background: #fef3c7; color: #92400e; }
.utm-wrap .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.utm-wrap .btn-primary, .utm-wrap .btn-secondary, .utm-wrap .btn-dl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 18px; border-radius: 12px; font-family: inherit; font-size: .9375rem; font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.utm-wrap .btn-primary { border: 1px solid var(--mz-primary); background: var(--mz-primary); color: #fff; }
.utm-wrap .btn-primary:hover { border-color: var(--mz-primary-600); background: var(--mz-primary-600); }
.utm-wrap .btn-secondary, .utm-wrap .btn-dl { border: 1px solid #cfe0fb; background: #fff; color: var(--mz-primary); }
.utm-wrap .btn-secondary:hover, .utm-wrap .btn-dl:hover { border-color: var(--mz-primary); background: var(--mz-primary-50); }
.utm-wrap .btn-primary:disabled, .utm-wrap .btn-secondary:disabled, .utm-wrap .btn-dl:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.utm-wrap .copied-msg { font-size: .875rem; font-weight: 600; color: #0a7c42; }

/* Mã QR */
.utm-wrap .qr-section { margin: 0; overflow: hidden; border: 1px solid #e3ebf9; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); }
.utm-wrap .qr-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 0; cursor: pointer; user-select: none; }
.utm-wrap .qr-header-left { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 700; color: var(--mz-ink); }
.utm-wrap .qr-body { padding: 4px 20px 22px; border-top: 1px solid #eef3fc; }
.utm-wrap .qr-layout { display: flex; flex-direction: column; gap: 22px; align-items: stretch; padding-top: 18px; }
.utm-wrap .qr-canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.utm-wrap #qr-canvas { padding: 12px; border: 1px solid #dce6f8; border-radius: 14px; }
.utm-wrap .qr-placeholder { width: 100%; max-width: 220px; height: 200px; padding: 16px; border: 1.5px dashed #cfe0fb; border-radius: 14px; background: #f8fafe; font-size: .8125rem; color: var(--mz-muted); }
.utm-wrap .qr-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.utm-wrap .qr-ctrl-row { display: flex; flex-direction: column; gap: 6px; }
.utm-wrap .qr-ctrl-row > label { margin: 0; font-size: .875rem; font-weight: 700; color: var(--mz-ink); }
.utm-wrap .qr-ctrl-row .val-display { margin-left: 6px; font-weight: 500; color: var(--mz-muted); }
.utm-wrap .qr-ctrl-row input[type=range] { width: 100%; margin: 0; accent-color: var(--mz-primary); }
.utm-wrap .qr-ctrl-row .hint { margin: 0 !important; }
.utm-wrap .color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 !important; }
.utm-wrap .color-item { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.utm-wrap .color-item input[type=color] { width: 36px; height: 32px; margin: 0; padding: 2px; border: 1px solid #dce6f8; border-radius: 8px; background: #fff; cursor: pointer; }
.utm-wrap .color-row .btn-secondary { min-height: 34px; padding: 0 14px !important; font-size: .8125rem !important; }
.utm-wrap .qr-dl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Giải mã */
.utm-wrap .section-title { display: flex; align-items: center; gap: 8px; margin: 24px 0 12px; font-size: 1rem; font-weight: 800; color: var(--mz-ink); }
.utm-wrap .decoder-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.utm-wrap .decoder-card, .utm-wrap .base-url-card, .utm-wrap .extra-params { padding: 14px 16px; border: 1px solid #e3ebf9; border-radius: 12px; background: #f8fafe; }
.utm-wrap .base-url-card { grid-column: 1 / -1; }
.utm-wrap .decoder-card-label { margin: 0 0 6px; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-muted); }
.utm-wrap .decoder-card-value { font-size: .9375rem; font-weight: 600; color: var(--mz-ink); word-break: break-all; }
.utm-wrap .decoder-card-value.missing { font-weight: 400; font-style: normal; color: #9aa8c4; }
.utm-wrap .decoder-card.highlight { border-color: #cfe0fb; background: #eef4ff; }
.utm-wrap .decoder-card.highlight .decoder-card-label, .utm-wrap .decoder-card.highlight .decoder-card-value { color: var(--mz-primary-600); }
.utm-wrap .extra-params { font-size: .875rem; white-space: pre-wrap; word-break: break-all; }
.utm-wrap #decode-empty { margin-top: 16px; font-size: .9375rem; font-style: normal; color: var(--mz-muted); }
.utm-wrap .icon { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 1049px) { .utm-wrap .utm-grid { grid-template-columns: 1fr; } .utm-wrap .utm-out { position: static; } }
@media (max-width: 549px) {
	.utm-hero { padding: 44px 0 28px; }
	.utm-wrap .tab-bar { width: 100%; }
	.utm-wrap .tab-btn { flex: 1; justify-content: center; padding: 11px 10px; font-size: .875rem; }
	.utm-wrap .field-group, .utm-wrap #panel-decoder.active { padding: 20px 16px; border-radius: 16px; }
	.utm-wrap .decoder-result { grid-template-columns: 1fr; }
}

/* UTM Builder: trạng thái ẩn/hiện do JS bật tắt (đã bị mất khi bỏ CSS cũ) */
.utm-wrap .copied-msg { display: none; }
.utm-wrap .vn-preview { display: none; }
.utm-wrap .vn-preview.show { display: inline-block; }
.utm-wrap .qr-body { display: none; }
.utm-wrap .qr-body.open { display: block; }
.utm-wrap .qr-chevron { color: var(--mz-muted); transition: transform .2s; }
.utm-wrap .qr-chevron.open { transform: rotate(180deg); }
.utm-wrap .qr-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.utm-wrap .qr-header-left > svg { color: var(--mz-primary); }
.utm-wrap p.section-title { justify-content: flex-start; width: auto; border: 0; }
.utm-wrap p.section-title::before, .utm-wrap p.section-title::after { display: none; }

/* Các bước trong .mz-solution: bố cục ngang giống .mz-step (số + đường nối ngang, rồi tiêu đề, mô tả) */
@media (min-width: 850px) {
	.mz-solution .mz-tl--one { max-width: none; margin: 0; }
	.mz-solution .mz-tl--one .mz-tl__n { box-shadow: 0 0 0 5px rgba(21, 98, 239, .2), 0 0 0 11px rgba(21, 98, 239, .08); }
	.mz-solution .mz-tl--one .mz-tl__body h3 { font-size: 1.125rem; margin: 0 0 6px; line-height: 1.35; }
	.mz-solution .mz-tl--one .mz-tl__body p { font-size: .9688rem; }
	.mz-solution .mz-tl--one > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; }
	.mz-solution .mz-tl--one .mz-tl__step { flex-direction: column; gap: 0; padding-left: 11px; }
	.mz-solution .mz-tl--one .mz-tl__rail { flex-direction: row; align-items: center; margin-bottom: 18px; }
	.mz-solution .mz-tl--one .mz-tl__step:not(:last-child) .mz-tl__line {
		display: block;
		flex: 1;
		width: auto;
		min-height: 0;
		height: 2px;
		margin: 0 -4px 0 22px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--mz-primary), var(--mz-sky));
		opacity: .45;
	}
	.mz-solution .mz-tl--one .mz-tl__body,
	.mz-solution .mz-tl--one .mz-tl__step:last-child .mz-tl__body { padding-top: 0; padding-bottom: 0; }
}

/* Vấn đề: danh sách trên nền tối, dải 3 cột trên nền sáng */
.mz-sec--dark .mz-plist .mz-prow { border-color: rgba(255, 255, 255, .14); }
.mz-sec--dark .mz-prow p { color: #b8c6e6; }
.mz-sec:not(.mz-sec--dark) .mz-strip p { color: var(--mz-text); }
@media (max-width: 849px) {
	.mz-dl-detail__top--text { grid-template-columns: 1fr; gap: 28px; }
	.mz-dl-detail__logo { aspect-ratio: auto; padding: 28px; justify-self: stretch; width: 100%; box-sizing: border-box; }
	.mz-dl-detail__logo img { width: 56px; }
}

/* Thẻ chỉ số: tiêu đề tối đa 1 dòng, mô tả tối đa 2 dòng (cắt bằng ...) */
.mz-dl__card--text .mz-dl__title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mz-dl__card--text .mz-dl__desc { display: -webkit-box !important; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Sơ đồ luồng trang chủ: cột giữa là biểu tượng Mozo */
.mz-bl__hub { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 200px; border: 1px solid #e3ebf9; border-radius: 24px; background: #fff; box-shadow: 0 12px 28px rgba(21, 98, 239, .10); }
.mz-bl__hub img { width: 120px; height: 120px; object-fit: contain; }


/* ==========================================================================
   Menu Giải pháp: 2 cột có tiêu đề (Theo ngành / Theo chức năng)
   ========================================================================== */
.mzi-play { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m10 8 6 4-6 4z'/%3E%3C/svg%3E"); }
.mzi-phone { --mzi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); }
.mz-menu-2col > ul.nav-dropdown > li.mzc-orange { --ic: #ea580c; --ib: #ffedd5; }
.mz-menu-2col > ul.nav-dropdown > li.mzc-purple { --ic: #7c3aed; --ib: #ede9fe; }
.mz-menu-2col > ul.nav-dropdown > li.mzc-blue { --ic: #2563eb; --ib: #dbeafe; }
.mz-menu-2col > ul.nav-dropdown > li.mzc-teal { --ic: #0d9488; --ib: #ccfbf1; }
.mz-menu-2col > ul.nav-dropdown > li.mzc-green { --ic: #16a34a; --ib: #dcfce7; }
.mz-menu-2col > ul.nav-dropdown > li.mzc-gold { --ic: #ca8a04; --ib: #fef3c7; }
.mz-menu-2col > ul.nav-dropdown > li.mz-menu-head { margin: 0 0 2px; break-after: avoid; }
.mz-menu-2col > ul.nav-dropdown > li.mz-menu-head.mz-menu-col2 { break-before: column; }
.mz-menu-2col > ul.nav-dropdown > li.mz-menu-head > a {
	display: block;
	padding: 4px 16px 8px !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mz-muted);
	background: none;
	pointer-events: none;
	cursor: default;
}
.mz-menu-2col > ul.nav-dropdown > li.mz-menu-head > a::before,
.mz-menu-2col > ul.nav-dropdown > li.mz-menu-head > a::after { display: none; }
@media (max-width: 849px) {
	.mz-menu-2col > ul.nav-dropdown > li.mz-menu-head.mz-menu-col2 { break-before: auto; margin-top: 8px; }
}
/* ==========================================================================
   Trang Giải pháp theo ngành: câu hỏi gợi ý (hàng chạy ngang), template, chỉ số, khách hàng nói gì
   ========================================================================== */
.mz-ico--sm { --mzs: 18px; width: 32px; height: 32px; border-radius: 9px; flex: none; }

/* Câu hỏi gợi ý: 4 hàng, mỗi hàng một nhóm, chạy ngược chiều nhau; rê chuột để dừng */
.mz-qrows { display: flex; flex-direction: column; gap: 26px; overflow: hidden; }
.mz-qrow__head { display: flex; align-items: center; gap: 10px; max-width: 1240px; margin: 0 auto 12px; padding: 0 24px; color: var(--mz-ink); }
.mz-qrow__head strong { font-size: 1rem; font-weight: 800; }
.mz-qrow__sub { margin-left: 4px; font-size: .875rem; color: var(--mz-muted); }
.mz-qrow__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mz-qtrack { display: flex; width: max-content; animation: mz-marq 80s linear infinite; }
.mz-qrow--rev .mz-qtrack { animation-direction: reverse; }
.mz-qrows:hover .mz-qtrack { animation-play-state: paused; }
.mz-qset { display: flex; gap: 14px; padding-right: 14px; }
@keyframes mz-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mz-qpill { flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; width: 330px; padding: 18px 20px; border: 1px solid #e3ebf9; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(21, 98, 239, .06); }
.mz-qpill__q { font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--mz-ink); }
.mz-qpill__src { display: flex; flex-wrap: wrap; gap: 6px; }
.mz-qchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: var(--mz-soft); font-size: .75rem; font-weight: 600; color: var(--mz-muted); }
.mz-qchip img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; }
@media (max-width: 549px) { .mz-qpill { width: 270px; } }
@media (prefers-reduced-motion: reduce) {
	.mz-qtrack { animation: none; }
	.mz-qrow__view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.mz-qset[aria-hidden="true"] { display: none; }
}

/* Template: thẻ có khung dashboard minh hoạ vẽ bằng CSS (thư viện chưa có ảnh chụp) */
.mz-tpls__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mz-tpl { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e3ebf9; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mz-tpl:hover { transform: translateY(-3px); border-color: #bfd3fa; box-shadow: 0 16px 36px rgba(21, 98, 239, .12); }
.mz-tpl__prev { --c: var(--mz-primary); --c2: #bcd2fa; display: flex; flex-direction: column; gap: 12px; aspect-ratio: 16 / 9; padding: 16px; background: #eef4ff; }
.mz-tpl__prev--b { --c: var(--mz-sky-600); --c2: #b9e4f7; background: #eaf7fd; }
.mz-tpl__prev--c { --c: var(--mz-orange); --c2: #fbd0b9; background: #fff3ec; }
.mz-tpl__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mz-tpl__k { padding: 8px 10px; border-radius: 8px; background: #fff; }
.mz-tpl__kl { width: 55%; height: 5px; border-radius: 3px; background: #d5e0f5; }
.mz-tpl__kv { width: 75%; height: 10px; margin-top: 7px; border-radius: 3px; background: var(--c); }
.mz-tpl__bars { flex: 1; display: flex; align-items: flex-end; gap: 7px; padding: 10px 12px 0; border-radius: 8px; background: #fff; }
.mz-tpl__bars div { flex: 1; border-radius: 3px 3px 0 0; background: var(--c2); }
.mz-tpl__bars div:nth-child(even) { background: var(--c); }
.mz-tpl__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.mz-tpl__body h3 { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-tpl__body p { margin: 0; font-size: .9063rem; line-height: 1.6; color: var(--mz-text); }
.mz-tpl__use { margin-top: auto; font-size: .875rem; font-weight: 700; color: var(--mz-primary); }
@media (max-width: 1099px) { .mz-tpls__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 649px) { .mz-tpls__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mz-tpl { transition: none; } .mz-tpl:hover { transform: none; } }

/* Chỉ số: tab + lưới thẻ (dùng chung .mz-htab và .mz-mcard); không JS thì các nhóm hiện nối nhau */
.mz-mtabs .mz-mcard { position: relative; }
.mz-tpl__a, .mz-mcard__a { color: inherit; text-decoration: none; }
.mz-tpl__a::after, .mz-mcard__a::after { content: ""; position: absolute; inset: 0; }
.mz-mtabs.is-ready .mz-mpanel { display: none; }
.mz-mtabs.is-ready .mz-mpanel.is-active { display: block; animation: mz-hfade .4s ease; }
.mz-mtabs:not(.is-ready) .mz-mpanel { margin-bottom: 20px; }
.mz-mtabs .mz-mcard p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mz-mtabs.is-ready .mz-mpanel.is-active { animation: none; } }

/* Khách hàng nói gì */
.mz-quote { display: flex; flex-direction: column; gap: 18px; height: 100%; padding: 28px; border: 1px solid #e3ebf9; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); }
.mz-quote__mark { font-size: 56px; font-weight: 800; line-height: .6; height: 26px; color: var(--mz-primary); }
.mz-quote__text { flex: 1; margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--mz-ink); }
.mz-quote__who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--mz-line); }
.mz-quote__who .mz-ico { flex: none; }
.mz-quote__who strong { display: block; font-size: .9688rem; font-weight: 800; color: var(--mz-ink); }
.mz-quote__role { font-size: .875rem; color: var(--mz-muted); }
.mz-quotes .col { padding-bottom: 20px; }
.mz-mtabs + .mz-mlib__more, .mz-tpls__grid + .mz-mlib__more { margin-top: 32px; }
.mz-quotes p:empty { display: none; }

/* Vấn đề và giải pháp: mỗi hàng là một vấn đề (trái) và cách Mozo giải quyết (phải), thuần chữ */
.mz-ps { display: flex; flex-direction: column; gap: 20px; }
.mz-ps__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; }
.mz-ps__p, .mz-ps__s { padding: 28px 32px; border-radius: 20px; }
.mz-ps__p { background: var(--mz-orange-50); }
.mz-ps__s { border: 1.5px solid #bfd3fa; background: #fff; box-shadow: 0 12px 28px rgba(21, 98, 239, .08); }
.mz-ps__row::after { content: "\2192"; position: absolute; left: calc((100% - 20px) * .4651 + 10px); top: 50%; z-index: 1; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--mz-primary); color: #fff; font-size: 18px; font-weight: 700; line-height: 36px; text-align: center; }
.mz-ps__tag { display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--mz-orange-600); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mz-ps__tag--ok { background: var(--mz-primary-50); color: var(--mz-primary); }
.mz-ps__p h3 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-ps__p p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--mz-text); }
.mz-ps__s p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--mz-text); }
.mz-ps__s .mz-ps__lead { margin-bottom: 8px; font-size: 1.125rem; font-weight: 800; line-height: 1.4; color: var(--mz-ink); }
@media (max-width: 849px) {
	.mz-ps__row { grid-template-columns: 1fr; gap: 14px; }
	.mz-ps__p, .mz-ps__s { padding: 22px 20px; }
	.mz-ps__row::after { display: none; }
}
.mz-ps__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.mz-ps__top .mz-ps__tag { margin-bottom: 0; }
.mz-ps__prod { font-size: .875rem; font-weight: 700; color: var(--mz-primary); text-decoration: none; }
.mz-ps__prod:hover { text-decoration: underline; }
.mz-ps__s .mz-hlist { margin: 12px 0 0; }
.mz-ps__s .mz-hlist li { margin-bottom: 8px; font-size: .9688rem; line-height: 1.6; }
.mz-ps__s .mz-hlist li:last-child { margin-bottom: 0; }

/* ==========================================================================
   Trang Giải pháp theo ngành: các biến thể bố cục (thẻ, tab, zigzag, danh sách logo, ...)
   ========================================================================== */
/* Vấn đề/giải pháp dạng lưới thẻ: vấn đề trên, giải pháp dưới */
.mz-pcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mz-pc { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e3ebf9; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); }
.mz-pc__p { padding: 24px 24px 20px; background: var(--mz-orange-50); }
.mz-pc__p h3 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-pc__p p { margin: 0; font-size: .9688rem; line-height: 1.65; color: var(--mz-text); }
.mz-pc__s { flex: 1; padding: 20px 24px 24px; }
.mz-pc__s .mz-ps__lead { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 800; line-height: 1.4; color: var(--mz-ink); }
.mz-pc__s .mz-hlist { margin: 10px 0 0; }
.mz-pc__s .mz-hlist li { margin-bottom: 8px; font-size: .9375rem; line-height: 1.6; }
/* Tách "Vấn đề" và "Giải pháp" thành hai section: thẻ chỉ có một nửa (vấn đề hoặc giải pháp) */
.mz-pc--p { border-color: #f6dccb; box-shadow: none; }
.mz-pc--p .mz-pc__p { flex: 1; padding: 28px 26px 30px; }
.mz-pc--p .mz-pc__p h3 { font-size: 1.1875rem; }
.mz-pc--s .mz-pc__s { padding: 26px 26px 28px; }

/* Thẻ vấn đề / giải pháp kiểu mz-res (khung ảnh phía trên) + slider kéo ngang */
.mz-slider { position: relative; }
.mz-slider .mz-slider__track { display: flex; grid-template-columns: none; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 8px 6px 18px; margin: -8px -6px -4px; scroll-padding: 0 6px; }
.mz-slider .mz-slider__track::-webkit-scrollbar { display: none; }
.mz-slider .mz-slider__track > .mz-pc { flex: 0 0 calc((100% - 60px) / 4); min-width: 0; scroll-snap-align: start; }
.mz-slider__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.mz-slider__btn { display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; min-height: 0; border: 1px solid #cfdcf5; border-radius: 50%; background: #fff; color: var(--mz-primary); font-size: 20px; line-height: 1; text-transform: none; cursor: pointer; box-shadow: 0 6px 16px rgba(21, 98, 239, .1); transition: background .15s ease, color .15s ease, opacity .15s ease; }
.mz-slider__btn:hover:not(:disabled) { background: var(--mz-primary); border-color: var(--mz-primary); color: #fff; }
.mz-slider__btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.mz-slider__btn--prev .mzi { transform: rotate(180deg); }
.mz-slider__dots { display: flex; align-items: center; gap: 8px; }
.mz-slider__dots button { width: 8px; height: 8px; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 999px; background: #cdd9ef; cursor: pointer; transition: width .2s ease, background .2s ease; }
.mz-slider__dots button.is-on { width: 26px; background: var(--mz-primary); }
.mz-pc { transition: transform .2s ease, box-shadow .2s ease; }
.mz-pc:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(21, 98, 239, .12); }
.mz-pc__thumb { position: relative; display: grid; place-items: center; height: 156px; overflow: hidden; background: linear-gradient(160deg, #fff0e8, #ffe2d0); border-bottom: 1px solid #f6dccb; }
.mz-pc__thumb::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(240, 82, 3, .12); }
.mz-pc__thumb::before { content: ""; position: absolute; left: -30px; bottom: -50px; width: 120px; height: 120px; border-radius: 50%; background: rgba(240, 82, 3, .08); }
.mz-pc__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: #fff; color: var(--mz-orange); font-size: 36px; box-shadow: 0 12px 26px rgba(240, 82, 3, .2); }
.mz-pc--p { border-color: #f1dccf; }
.mz-pc--p .mz-pc__p { flex: 1; padding: 24px 26px 28px; background: #fff; }
.mz-pc--p .mz-pc__p h3 { margin: 0 0 10px; font-size: 1.125rem; }
.mz-pc--s .mz-res__thumb { height: 168px; flex: none; }
.mz-pc--s .mz-pc__s { display: flex; flex-direction: column; padding: 24px 26px 26px; }
.mz-pc--s .mz-ps__lead { margin: 0 0 6px; font-size: 1.125rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-pc--p .mz-pc__p h3, .mz-pc--s .mz-ps__lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-pc--s .mz-link { margin-top: auto; padding-top: 16px; }
/* Giải pháp dạng hàng so le (mz-feature): danh sách gạch đầu dòng cỡ chữ như đoạn mô tả */
.mz-ps-sec .mz-feature .mz-hlist, .mz-import-sec .mz-feature .mz-hlist { margin: 4px 0 0; max-width: 520px; }
.mz-ps-sec .mz-feature .mz-hlist li, .mz-import-sec .mz-feature .mz-hlist li { margin: 0 0 12px; padding-left: 32px; font-size: 1.0625rem; line-height: 1.65; }
.mz-ps-sec .mz-feature .mz-hlist li::before, .mz-import-sec .mz-feature .mz-hlist li::before { content: ""; top: 4px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--mz-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
/* Nguồn dữ liệu dạng hub: mỗi ô gồm tiêu đề + logo nền tảng, nối về logo Mozo (dùng lại mz-hub2) */
.mz-hub2--logos .mz-hub2__card { align-items: stretch; gap: 18px; padding: 26px 20px 24px; }
.mz-hub2--logos .mz-hub2__card h3 { margin: 0; text-align: center; }
.mz-hub2__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mz-hub2__logo { display: flex; align-items: center; justify-content: center; height: 58px; padding: 10px 12px; border: 1px solid #e3ebf9; border-radius: 12px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.mz-hub2__logo { position: relative; cursor: default; outline: 0; }
.mz-hub2__logo:hover, .mz-hub2__logo:focus-visible { z-index: 3; border-color: #bfd3fa; box-shadow: var(--mz-shadow-sm); }
.mz-hub2__logo[data-name]::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 8px; background: #0f1b3d; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; }
.mz-hub2__logo[data-name]::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); margin-left: -5px; border: 5px solid transparent; border-top-color: #0f1b3d; border-bottom: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease; }
.mz-hub2__logo[data-name]:hover::after, .mz-hub2__logo[data-name]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mz-hub2__logo[data-name]:hover::before, .mz-hub2__logo[data-name]:focus-visible::before { opacity: 1; visibility: visible; }
.mz-hub2__logo--more { background: #eef4ff; border-color: #cfdcf7; color: var(--mz-primary); font-size: 1.0625rem; font-weight: 800; }
.mz-hub2__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 30px; object-fit: contain; }
@media (max-width: 1099px) { .mz-slider .mz-slider__track > .mz-pc { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 649px) { .mz-slider .mz-slider__track > .mz-pc { flex-basis: 88%; } .mz-pc__thumb { height: 128px; } }
@media (prefers-reduced-motion: reduce) { .mz-slider .mz-slider__track { scroll-behavior: auto; } .mz-pc:hover { transform: none; } }
@media (max-width: 1099px) { .mz-pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 649px) { .mz-pcs { grid-template-columns: 1fr; } }

/* Vấn đề/giải pháp dạng tab: danh sách vấn đề bên trái, giải pháp bên phải */
.mz-pst { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.mz-pst__nav { display: flex; flex-direction: column; gap: 10px; }
.mz-pst__tab { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 16px 18px; border: 1.5px solid #dce6f8; border-radius: 14px; background: #fff; color: var(--mz-ink); font: 700 .9688rem/1.4 var(--mz-font); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.mz-pst__tab:hover { border-color: #bfd3fa; }
.mz-pst__tab.is-active { border-color: var(--mz-primary); background: var(--mz-primary-50); color: var(--mz-primary); }
.mz-pst__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mz-primary-50); color: var(--mz-primary); font-size: .8125rem; font-weight: 800; }
.mz-pst__tab.is-active .mz-pst__n { background: var(--mz-primary); color: #fff; }
.mz-pst.is-ready .mz-pst__panel { display: none; }
.mz-pst.is-ready .mz-pst__panel.is-active { display: block; animation: mz-hfade .4s ease; }
.mz-pst:not(.is-ready) .mz-pst__panel { margin-bottom: 16px; }
.mz-pst__pain { padding: 24px 28px; border-radius: 20px 20px 0 0; background: var(--mz-orange-50); }
.mz-pst__pain p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--mz-ink); }
.mz-pst__sol { padding: 24px 28px 28px; border: 1.5px solid #bfd3fa; border-top: 0; border-radius: 0 0 20px 20px; background: #fff; box-shadow: 0 12px 28px rgba(21, 98, 239, .08); }
.mz-pst__sol .mz-ps__lead { margin: 0 0 8px; font-size: 1.1875rem; font-weight: 800; line-height: 1.4; color: var(--mz-ink); }
.mz-pst__sol .mz-hlist { margin: 12px 0 0; }
.mz-pst__sol .mz-hlist li { margin-bottom: 8px; font-size: 1rem; line-height: 1.65; }
@media (max-width: 849px) { .mz-pst { grid-template-columns: 1fr; } .mz-pst__tab { padding: 13px 14px; } }
@media (prefers-reduced-motion: reduce) { .mz-pst.is-ready .mz-pst__panel.is-active { animation: none; } }

/* Vấn đề/giải pháp dạng zigzag: số lớn + vấn đề một bên, giải pháp một bên, đổi bên xen kẽ */
.mz-pzs { display: flex; flex-direction: column; }
.mz-pz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; padding: 36px 0; border-top: 1px solid #dce6f8; }
.mz-pz:first-child { border-top: 0; padding-top: 8px; }
.mz-pz--rev .mz-pz__p { order: 2; }
.mz-pz__n { margin-bottom: 4px; font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #bfd3fa; }
.mz-pz__p h3 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 800; line-height: 1.3; color: var(--mz-ink); }
.mz-pz__p p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--mz-text); }
.mz-pz__s { padding: 24px 28px; border: 1.5px solid #bfd3fa; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(21, 98, 239, .08); }
.mz-pz__s .mz-ps__lead { margin: 0 0 8px; font-size: 1.125rem; font-weight: 800; line-height: 1.4; color: var(--mz-ink); }
.mz-pz__s .mz-hlist { margin: 12px 0 0; }
.mz-pz__s .mz-hlist li { margin-bottom: 8px; font-size: .9688rem; line-height: 1.6; }
@media (max-width: 849px) { .mz-pz { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; } .mz-pz--rev .mz-pz__p { order: 0; } .mz-pz__n { font-size: 2.5rem; } }

/* Nguồn dữ liệu dạng danh sách theo nhóm */
.mz-cl { display: flex; flex-direction: column; }
.mz-cl__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0; border-top: 1px solid #dce6f8; }
.mz-cl__row:first-child { border-top: 0; }
.mz-cl__k { padding-top: 14px; font-size: 1rem; font-weight: 800; color: var(--mz-ink); }
.mz-cl__v.mz-logos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 849px) { .mz-cl__row { grid-template-columns: 1fr; gap: 10px; } .mz-cl__k { padding-top: 0; } }

/* Câu hỏi gợi ý dạng tab + lưới */
.mz-qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mz-qgrid .mz-qpill { width: auto; }
@media (max-width: 1099px) { .mz-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 649px) { .mz-qgrid { grid-template-columns: 1fr; } }
/* JS gộp tab + lưới thành các hàng chạy ngang: chừa chỗ cho bóng đổ của thẻ không bị cắt */
.mz-qrows--all { gap: 12px; margin-top: 8px; }
.mz-qrows--all .mz-qrow__view { padding: 6px 0 14px; margin-bottom: -8px; }

/* Template dạng 1 mẫu lớn + danh sách */
.mz-tf { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.mz-tf__big { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e3ebf9; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mz-tf__big:hover, .mz-tf__item:hover { transform: translateY(-3px); border-color: #bfd3fa; box-shadow: 0 16px 36px rgba(21, 98, 239, .12); }
.mz-tf__vis { padding: 24px; background: #eef4ff; }
.mz-tf__vis .mz-tpl__prev { aspect-ratio: 16 / 8; border-radius: 12px; background: transparent; padding: 0; }
.mz-tf__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 24px 24px; }
.mz-tf__body h3 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-tf__body p { margin: 0; font-size: .9688rem; line-height: 1.65; color: var(--mz-text); }
.mz-tf__list { display: flex; flex-direction: column; gap: 14px; }
.mz-tf__item { position: relative; display: flex; flex: 1; align-items: center; gap: 16px; padding: 16px; border: 1px solid #e3ebf9; border-radius: 16px; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mz-tf__ico { flex: none; width: 112px; }
.mz-tf__ico .mz-tpl__prev { aspect-ratio: 4 / 3; padding: 8px; gap: 6px; border-radius: 10px; }
.mz-tf__ico .mz-tpl__kpis { gap: 4px; }
.mz-tf__ico .mz-tpl__k { padding: 4px 5px; }
.mz-tf__ico .mz-tpl__bars { gap: 3px; padding: 5px 6px 0; }
.mz-tf__item h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-tf__item p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--mz-text); }
@media (max-width: 949px) { .mz-tf { grid-template-columns: 1fr; } }
@media (max-width: 549px) { .mz-tf__ico { width: 84px; } }
@media (prefers-reduced-motion: reduce) { .mz-tf__big, .mz-tf__item { transition: none; } .mz-tf__big:hover, .mz-tf__item:hover { transform: none; } }

/* Chỉ số dạng cột theo nhóm */
.mz-mcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.mz-mc { padding: 22px 22px 8px; border: 1px solid #e3ebf9; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(21, 98, 239, .06); }
.mz-mc__t { margin-bottom: 4px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-primary); }
.mz-mc__item { position: relative; padding: 14px 0; border-top: 1px solid var(--mz-line); }
.mz-mc__t + .mz-mc__item { border-top: 0; }
.mz-mc__item h4 { margin: 4px 0 4px; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-mc__item p { margin: 0; font-size: .8438rem; line-height: 1.55; color: var(--mz-text); }
.mz-mc__item:hover h4 a { color: var(--mz-primary); }

/* Cách hoạt động dạng thẻ có số lớn */
.mz-hss { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 20px; }
.mz-hs { padding: 28px 24px; border: 1px solid #e3ebf9; border-radius: 20px; background: var(--mz-soft); }
.mz-hs__n { margin-bottom: 14px; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--mz-primary); }
.mz-hs h3 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 800; line-height: 1.35; color: var(--mz-ink); }
.mz-hs p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--mz-text); }
@media (max-width: 1099px) { .mz-hss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 549px) { .mz-hss { grid-template-columns: 1fr; } }

/* Khách hàng nói gì: 3 thẻ đều hoặc 1 thẻ lớn + 2 thẻ nhỏ */
.mz-q3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mz-q3__c .mz-quote { height: 100%; }
.mz-qf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.mz-qf__side { display: flex; flex-direction: column; gap: 20px; }
.mz-qf__side .mz-quote { flex: 1; }
.mz-quote--big { justify-content: space-between; padding: 40px; }
.mz-quote--big .mz-quote__text { flex: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.55; }
.mz-quote--big .mz-quote__mark { font-size: 72px; height: 34px; }
@media (max-width: 849px) { .mz-q3, .mz-qf { grid-template-columns: 1fr; } .mz-quote--big { padding: 28px; } .mz-quote--big .mz-quote__text { font-size: 1.1875rem; } }

/* Lợi ích dạng dải số: tiêu đề lớn, mô tả nhỏ, ngăn bằng vạch */
.mz-bns { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.mz-bn { padding: 8px 28px; border-left: 1px solid #dce6f8; }
.mz-bn:first-child { padding-left: 0; border-left: 0; }
.mz-bn__t { margin-bottom: 10px; font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--mz-primary); }
.mz-bn p { margin: 0; font-size: .9688rem; line-height: 1.65; color: var(--mz-text); }
@media (max-width: 1099px) { .mz-bns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; } .mz-bn:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 549px) { .mz-bns { grid-template-columns: 1fr; } .mz-bn, .mz-bn:first-child, .mz-bn:nth-child(odd) { padding: 0 0 0 16px; border-left: 3px solid var(--mz-primary-50); } }

/* Hero chia đôi: 3 số liệu vừa một hàng trong cột trái */
.mz-hero:not(.mz-hero--center) .mz-stats > div { padding: 0 20px; }
.mz-hero:not(.mz-hero--center) .mz-stats span { max-width: 138px; }

/* Lõi sơ đồ Kết nối: logo dọc Mozo trong hộp trắng gọn ở giữa, nối với đường nét đứt phía trên */
.mz-hub2 .mz-hub__core--logo { width: auto; max-width: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 22px 36px; background: #fff; border: 1px solid #dce6f8; border-radius: 20px; box-shadow: 0 14px 32px rgba(21, 98, 239, .14); }
.mz-hub__core--logo img { display: block; width: auto; height: 96px; max-width: 100%; object-fit: contain; }

/* Sơ đồ Kết nối: nét đứt chuyển động, dữ liệu chảy từ các thẻ vào Mozo */
.mz-hub2__card::after { width: 2px; margin-left: -1px; border-left: 0; background: linear-gradient(to bottom, #8ea6e6 50%, transparent 50%) 0 0 / 2px 12px repeat-y; animation: mz-flow-y .8s linear infinite; }
.mz-hub2__rail { border-top: 0; }
.mz-hub2__rail::after { width: 2px; margin-left: -1px; border-left: 0; background: linear-gradient(to bottom, #8ea6e6 50%, transparent 50%) 0 0 / 2px 12px repeat-y; animation: mz-flow-y .8s linear infinite; }
.mz-hub2__rl, .mz-hub2__rr { position: absolute; top: 0; width: 50%; height: 2px; background: linear-gradient(to right, #8ea6e6 50%, transparent 50%) 0 0 / 12px 2px repeat-x; }
.mz-hub2__rl { left: 0; animation: mz-flow-x .8s linear infinite; }
.mz-hub2__rr { right: 0; animation: mz-flow-x-rev .8s linear infinite; }
@keyframes mz-flow-y { to { background-position: 0 12px; } }
@keyframes mz-flow-x { to { background-position: 12px 0; } }
@keyframes mz-flow-x-rev { to { background-position: -12px 0; } }
@media (prefers-reduced-motion: reduce) { .mz-hub2__card::after, .mz-hub2__rail::after, .mz-hub2__rl, .mz-hub2__rr { animation: none; } }

/* Nhãn "Giải quyết vấn đề N" trong các hàng tính năng */
.mz-feature .mz-solves { margin-bottom: 14px; }
.mz-know .mz-hlist { margin: 14px 0 0; }
.mz-know .mz-hlist li { margin-bottom: 10px; font-size: 1rem; line-height: 1.65; }

/* Thẻ vấn đề dạng slider: ảnh mô tả thay cho ô biểu tượng (ảnh 294x156, nền trong suốt nằm trên nền cam của thẻ) */
.mz-pc__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }

/* Giải pháp dạng hàng so le (mz-feature): chữ gạch đầu dòng cùng cỡ với mô tả ở thẻ vấn đề (15,5px), áp dụng cho mọi trang giải pháp. */
.mz-ps-sec .mz-feature .mz-hlist li, .mz-import-sec .mz-feature .mz-hlist li { font-size: .9688rem; line-height: 1.65; }

/* Nhãn "+N" khi câu hỏi gợi ý có nhiều hơn 2 nguồn */
.mz-qchip--more { color: var(--mz-primary); background: var(--mz-primary-50); font-weight: 700; cursor: default; }

/* ==========================================================================
   Bài viết chi tiết: đầu trang (tiêu đề độ rộng cố định) + ảnh đại diện rộng bằng container
   ========================================================================== */
.single-post .mz-post-head { max-width: 1240px; margin: 0 auto; padding: 20px 0 8px; }
@media (max-width: 1299px) { .single-post .mz-post-head { padding-left: 15px; padding-right: 15px; } }
.mz-post-head__text { max-width: 860px; margin: 0 auto; text-align: center; }
.mz-post-head__cat { display: inline-block; margin-bottom: 18px; padding: 5px 14px; border-radius: 99px; background: var(--mz-primary-50); color: var(--mz-primary); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.mz-post-head__cat:hover { background: #dbe7ff; }
.mz-post-head__title { margin: 0; font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: var(--mz-ink); text-wrap: balance; }
.mz-post-head__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 22px; font-size: .9375rem; color: var(--mz-muted); }
.mz-post-head__by { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--mz-ink); text-decoration: none; }
.mz-post-head__by:hover { color: var(--mz-primary); }
.mz-post-head__by img { width: 26px; height: 26px; border-radius: 50%; }
.mz-post-head__dot { color: #b8c0cc; }
.mz-post-cover { margin: 40px 0 0; }
.mz-post-cover img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 22px; }
.single-post .mz-post-head + .row { margin-top: 48px; }
/* Ảnh trong nội dung: bo góc, đúng bề rộng cột nội dung */
.single-post .entry-content img:not(.wp-smiley):not(.emoji) { max-width: 100%; height: auto; border-radius: 16px; }
.single-post .entry-content p > img.aligncenter, .single-post .entry-content img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
@media (max-width: 849px) {
	.single-post .mz-post-head { padding-top: 0; }
	.mz-post-cover { margin-top: 28px; }
	.mz-post-cover img { border-radius: 16px; max-height: 320px; }
	.single-post .mz-post-head + .row { margin-top: 32px; }
}

/* Trang tác giả: đầu trang rồi tới lưới bài viết của người đó */
.mz-author-head { max-width: 720px; margin: 0 auto; padding: 56px 15px 36px; text-align: center; }
.mz-author-head img.avatar { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 16px; }
.mz-author-head__name { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--mz-ink); }
.mz-author-head__sub { margin: 8px 0 0; font-size: .9375rem; font-weight: 600; color: var(--mz-muted); }
.mz-author-head__bio { margin: 14px 0 0; font-size: 1rem; line-height: 1.7; color: var(--mz-text); }

/* Bài viết chi tiết (desktop): bỏ đệm phải của cột mục lục để khoảng cách giữa mục lục và nội dung gọn hơn. Mobile giữ nguyên. */
@media (min-width: 850px) { .single-post .post-sidebar { padding-right: 0; } }

/* Mục lục bài viết (Easy Table of Contents): thẻ bo tròn nền xanh nhạt, mục đang đọc có vạch xanh bên trái */
.post-sidebar #ez-toc-container { display: block !important; width: 100% !important; margin: 0 0 16px; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: var(--mz-primary-50) !important; box-shadow: none !important; overflow: hidden; }
.post-sidebar #ez-toc-container .ez-toc-title-container { display: block; margin: 0; padding: 16px 20px 12px; border-bottom: 1px solid #d3e0fb; }
.post-sidebar #ez-toc-container .ez-toc-title { margin: 0; padding: 0; font-size: .9375rem !important; font-weight: 700 !important; line-height: 1.4; color: var(--mz-muted) !important; }
.post-sidebar #ez-toc-container .ez-toc-title-toggle { display: none !important; }
.post-sidebar #ez-toc-container nav { display: block; }
.post-sidebar #ez-toc-container ul.ez-toc-list { margin: 0; padding: 6px 0 8px; list-style: none; }
.post-sidebar #ez-toc-container ul.ez-toc-list li { margin: 0; padding: 0; }
.post-sidebar #ez-toc-container ul.ez-toc-list li::before { content: none; }
.post-sidebar #ez-toc-container a.ez-toc-link { position: relative; display: block; padding: 12px 20px; font-size: .9688rem; font-weight: normal; line-height: 1.2; color: var(--mz-ink) !important; text-decoration: none !important; transition: background .15s ease, color .15s ease; }
.post-sidebar #ez-toc-container a.ez-toc-link:hover { color: var(--mz-primary) !important; background: rgba(21, 98, 239, .06); }
.post-sidebar #ez-toc-container a.ez-toc-link.is-active { font-weight: 700; color: var(--mz-ink) !important; }
.post-sidebar #ez-toc-container a.ez-toc-link.is-active::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px; border-radius: 0 4px 4px 0; background: var(--mz-primary); }
@media (min-width: 850px) { .single-post .post-sidebar #secondary { position: sticky; top: 100px; } }

/* Bài viết liên quan (dưới nội dung bài viết) */
.mz-related { max-width: 1240px; margin: 24px auto 0; padding: 40px 0 72px; border-top: 1px solid var(--mz-line); }
.mz-related__title { margin: 0 0 24px; font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; color: var(--mz-ink); }
.mz-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mz-related__item { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.mz-related__thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px; background: var(--mz-soft); }
.mz-related__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mz-related__item:hover .mz-related__thumb img { transform: scale(1.04); }
.mz-related__name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--mz-ink); }
.mz-related__item:hover .mz-related__name { color: var(--mz-primary); }
.mz-related__meta { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--mz-muted); }
.mz-related__meta svg { flex: none; }
.mz-related__meta i { width: 3px; height: 3px; border-radius: 50%; background: #b8c0cc; }
@media (max-width: 1299px) { .mz-related { padding-left: 15px; padding-right: 15px; } }
@media (max-width: 849px) { .mz-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 549px) { .mz-related__grid { grid-template-columns: 1fr; } .mz-related { padding-bottom: 48px; } }

/* Mục lục: mục con (h3 trở xuống) thụt vào 5px thay vì 1,5em mặc định của plugin */
.post-sidebar #ez-toc-container ul ul { margin-left: 5px; }

/* Trang Kết nối, mục Giải pháp Mozo (không còn ô biểu tượng): chữ mô tả cùng cỡ với các phần khác (15,5px) */
.mz-features--plain .mz-feature p { font-size: .9688rem; line-height: 1.65; }

/* Icon mạng xã hội ở footer: luôn là hình tròn, xếp ngang (không bị .mz-sec .button { width: 100% } trên mobile kéo giãn) */
.mz-footer .follow-icons a.button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0;
	margin: 0 12px 0 0; border-radius: 50%; line-height: 1;
}
.mz-footer .follow-icons a.button i { line-height: 1; margin: 0; }

/* ==========================================================================
   Menu mobile (off-canvas): kiểu popup Ladipage — logo + nút đóng, mục có icon màu,
   mô tả dưới tiêu đề, hai nút ở cuối. Dùng lại class mzi-* / mzc-* của menu desktop.
   ========================================================================== */
.off-canvas .mfp-content { width: min(92vw, 400px); max-width: none; }
.off-canvas #main-menu.mobile-sidebar {
	position: relative;
	min-height: 100%;
	padding: 0;
	background: #fff;
}
.off-canvas #main-menu .sidebar-menu { padding: 80px 20px 32px; }
/* thanh trên: logo bên trái, nút đóng bên phải */
.off-canvas #main-menu.mobile-sidebar::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 68px;
	background: #fff url("/wp-content/uploads/2026/10/Logo-Mozo1.png") 20px center / auto 30px no-repeat;
	border-bottom: 1px solid var(--mz-line);
	z-index: 1;
}
.off-canvas .mfp-close {
	top: 12px; right: 14px; width: 44px; height: 44px; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	border-radius: 12px; color: var(--mz-ink); opacity: 1;
}
.off-canvas .mfp-close:hover { background: var(--mz-soft); }
.off-canvas .mfp-close svg { width: 24px; height: 24px; }

.off-canvas #main-menu .nav-sidebar > li { border: 0 !important; margin: 0; padding: 0; }
.off-canvas #main-menu .nav-sidebar > li + li { margin-top: 0; }
/* ô tìm kiếm gọn */
.off-canvas #main-menu .header-search-form { margin-bottom: 8px; padding: 0; }
.off-canvas #main-menu .searchform .search-field {
	height: 46px; padding: 0 16px; border: 1px solid var(--mz-line); border-radius: 12px 0 0 12px;
	background: var(--mz-soft); box-shadow: none; font-size: 15px;
}
.off-canvas #main-menu .searchform .ux-search-submit {
	height: 46px; margin: 0; padding: 0 16px; border-radius: 0 12px 12px 0; background: var(--mz-primary); border-color: var(--mz-primary);
}

/* mục cấp 1 */
.off-canvas #main-menu .nav-sidebar > li.has-child { position: relative; border-bottom: 1px solid var(--mz-line) !important; }
.off-canvas #main-menu .nav-sidebar > li.has-child > a {
	display: block; padding: 18px 44px 18px 4px;
	font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--mz-ink);
}
.off-canvas #main-menu .nav-sidebar > li.has-child > .toggle {
	position: absolute; top: 10px; right: 0; width: 44px; height: 44px; margin: 0; opacity: 1;
	display: flex; align-items: center; justify-content: center; color: var(--mz-ink);
}
.off-canvas #main-menu .nav-sidebar > li.has-child > .toggle i { font-size: 18px; transition: transform .2s; }
.off-canvas #main-menu .nav-sidebar > li.has-child.active > .toggle i { transform: rotate(180deg); }
.off-canvas #main-menu .nav-sidebar > li.has-child.active > a { color: var(--mz-primary); }

/* mục con: ô icon + tiêu đề + mô tả */
.off-canvas #main-menu .sub-menu { margin: 0 0 12px; padding: 0 0 4px; border: 0; }
.off-canvas #main-menu .sub-menu > li { border: 0 !important; margin: 0 0 2px; padding: 0; }
.off-canvas #main-menu .sub-menu > li > a {
	position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center;
	padding: 10px 8px !important; border: 0; border-radius: 12px;
	font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--mz-ink); white-space: normal;
}
.off-canvas #main-menu .sub-menu > li > a:active,
.off-canvas #main-menu .sub-menu > li > a:hover { background: var(--mz-soft); }
.off-canvas #main-menu .sub-menu > li > a::before {
	content: ""; grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background-color: var(--ib, var(--mz-primary-50));
}
.off-canvas #main-menu .sub-menu > li > a::after {
	content: ""; position: absolute; left: 8px; top: 50%; width: 44px; height: 20px; margin-top: -10px;
	background-color: var(--ic, var(--mz-primary));
	-webkit-mask: var(--mzi) center/20px 20px no-repeat; mask: var(--mzi) center/20px 20px no-repeat;
}
.off-canvas #main-menu .sub-menu .mz-mi-desc {
	display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--mz-muted);
}
/* tiêu đề nhóm (Theo ngành / Theo chức năng) */
.off-canvas #main-menu .sub-menu > li.mz-menu-head { margin: 8px 0 4px; }
.off-canvas #main-menu .sub-menu > li.mz-menu-head > a {
	display: block; padding: 6px 8px !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mz-muted);
}
.off-canvas #main-menu .sub-menu > li.mz-menu-head > a:hover { background: transparent; }
.off-canvas #main-menu .sub-menu > li.mz-menu-head > a::before,
.off-canvas #main-menu .sub-menu > li.mz-menu-head > a::after { display: none; }
/* màu icon: theo mzc-* nếu có, không thì xoay vòng */
.off-canvas #main-menu .sub-menu > li:nth-child(6n+1) { --ic: #2563eb; --ib: #dbeafe; }
.off-canvas #main-menu .sub-menu > li:nth-child(6n+2) { --ic: #16a34a; --ib: #dcfce7; }
.off-canvas #main-menu .sub-menu > li:nth-child(6n+3) { --ic: #ea580c; --ib: #ffedd5; }
.off-canvas #main-menu .sub-menu > li:nth-child(6n+4) { --ic: #7c3aed; --ib: #ede9fe; }
.off-canvas #main-menu .sub-menu > li:nth-child(6n+5) { --ic: #0d9488; --ib: #ccfbf1; }
.off-canvas #main-menu .sub-menu > li:nth-child(6n+6) { --ic: #dc2626; --ib: #fee2e2; }
.off-canvas #main-menu .sub-menu > li.mzc-orange { --ic: #ea580c; --ib: #ffedd5; }
.off-canvas #main-menu .sub-menu > li.mzc-purple { --ic: #7c3aed; --ib: #ede9fe; }
.off-canvas #main-menu .sub-menu > li.mzc-blue { --ic: #2563eb; --ib: #dbeafe; }
.off-canvas #main-menu .sub-menu > li.mzc-teal { --ic: #0d9488; --ib: #ccfbf1; }
.off-canvas #main-menu .sub-menu > li.mzc-green { --ic: #16a34a; --ib: #dcfce7; }
.off-canvas #main-menu .sub-menu > li.mzc-gold { --ic: #ca8a04; --ib: #fef3c7; }

/* hai nút cuối menu: Đăng nhập | Dùng thử miễn phí */
.off-canvas #main-menu .nav-sidebar { display: flex; flex-wrap: wrap; column-gap: 12px; }
.off-canvas #main-menu .nav-sidebar > li { flex: 0 0 100%; }
.off-canvas #main-menu .nav-sidebar > li.header-button-1,
.off-canvas #main-menu .nav-sidebar > li.header-button-2 { flex: 1 1 0; min-width: 0; margin-top: 24px; }
.off-canvas #main-menu .header-button .button {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; margin: 0; padding: 0 12px;
	border-radius: 12px !important; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.off-canvas #main-menu .header-button-1 .button { background: var(--mz-primary-50); color: var(--mz-primary); box-shadow: none; }
.off-canvas #main-menu .header-button-2 .button { background: var(--mz-primary); color: #fff; }
.off-canvas #main-menu .sub-menu { background: transparent !important; }
.off-canvas .mfp-close { color: var(--mz-ink) !important; opacity: 1 !important; background: transparent; }
.off-canvas .mfp-close:hover { background: var(--mz-soft); }
.off-canvas #main-menu .nav-sidebar > li.has-child.active { background: transparent !important; }
.off-canvas #main-menu .nav-sidebar > li.header-button-1,
.off-canvas #main-menu .nav-sidebar > li.header-button-2 { flex: 1 1 calc(50% - 6px) !important; width: calc(50% - 6px) !important; max-width: calc(50% - 6px); }
.off-canvas #main-menu .header-button-1 .button { background: var(--mz-primary-50) !important; color: var(--mz-primary) !important; }
.off-canvas #main-menu .header-button-2 .button { background: var(--mz-primary) !important; color: #fff !important; }
.off-canvas #main-menu .nav-sidebar > li.header-button-1,
.off-canvas #main-menu .nav-sidebar > li.header-button-2 { margin-left: 0 !important; margin-right: 0 !important; }
.off-canvas #main-menu .nav-sidebar > li.header-button-1 { margin-right: 12px !important; }
.off-canvas #main-menu .nav-sidebar { column-gap: 0; }
.off-canvas #main-menu .nav-sidebar.nav-vertical { flex-direction: row; align-items: flex-start; }
.off-canvas #main-menu .nav-sidebar > li { width: 100%; }
/* nút đóng: vẽ dấu X bằng CSS để luôn đậm, rõ */
.off-canvas .mfp-close svg { display: none !important; }
.off-canvas .mfp-close::before,
.off-canvas .mfp-close::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px;
	border-radius: 2px; background: var(--mz-ink);
}
.off-canvas .mfp-close::before { transform: rotate(45deg); }
.off-canvas .mfp-close::after { transform: rotate(-45deg); }
.off-canvas .mfp-close { mix-blend-mode: normal !important; }
/* thu nhỏ chữ mục cấp 1 và ô tìm kiếm cho cân với mục con */
.off-canvas #main-menu .nav-sidebar > li.has-child > a { padding: 14px 40px 14px 4px; font-size: 15px; font-weight: 600; }
.off-canvas #main-menu .nav-sidebar > li.has-child > .toggle { top: 5px; }
.off-canvas #main-menu .nav-sidebar > li.has-child > .toggle i { font-size: 14px; }
.off-canvas #main-menu .searchform .search-field,
.off-canvas #main-menu .searchform .ux-search-submit { height: 42px; font-size: 14px; }
.off-canvas #main-menu .sub-menu > li > a { font-size: 14px; }
.off-canvas #main-menu .sub-menu .mz-mi-desc { font-size: 12.5px; }
/* hai nút cuối menu xếp dọc: Dùng thử miễn phí ở trên, Đăng nhập ở dưới */
.off-canvas #main-menu .nav-sidebar > li.header-button-1,
.off-canvas #main-menu .nav-sidebar > li.header-button-2 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; }
.off-canvas #main-menu .nav-sidebar > li.header-button-2 { order: 1; margin-top: 24px; }
.off-canvas #main-menu .nav-sidebar > li.header-button-1 { order: 2; margin-top: 10px; }
/* nút đóng: mép phải dấu X thẳng hàng với lề nội dung (20px), giữa theo chiều dọc với logo */
.off-canvas .mfp-close { top: 12px; right: 8px; }
.off-canvas .mfp-close::before,
.off-canvas .mfp-close::after { width: 18px; margin-left: -9px; }
.off-canvas .mfp-close { top: 12px !important; right: 8px !important; }
/* trạng thái chạm/giữ: không tô nền cả dòng (tránh dính sát ô tìm kiếm), chỉ đổi màu chữ */
.off-canvas #main-menu .nav-sidebar > li,
.off-canvas #main-menu .nav-sidebar > li:hover,
.off-canvas #main-menu .nav-sidebar > li:active,
.off-canvas #main-menu .nav-sidebar > li:focus-within,
.off-canvas #main-menu .nav-sidebar > li.active,
.off-canvas #main-menu .nav-sidebar > li.current-menu-item { background: transparent !important; }
.off-canvas #main-menu .nav-sidebar > li.has-child > a:hover,
.off-canvas #main-menu .nav-sidebar > li.has-child > a:active,
.off-canvas #main-menu .nav-sidebar > li.has-child > a:focus { background: transparent !important; color: var(--mz-primary); outline: 0; }
.off-canvas #main-menu .nav-sidebar > li.has-child > .toggle,
.off-canvas #main-menu .nav-sidebar > li.has-child > .toggle:hover,
.off-canvas #main-menu .nav-sidebar > li.has-child > .toggle:active,
.off-canvas #main-menu .nav-sidebar > li.has-child > .toggle:focus { background: transparent !important; box-shadow: none; outline: 0; }
.off-canvas #main-menu .header-search-form { margin-bottom: 14px; }
/* thêm khoảng thở quanh ô tìm kiếm */
.off-canvas #main-menu .sidebar-menu { padding-top: 92px; }
.off-canvas #main-menu .header-search-form { margin-bottom: 20px; }
.off-canvas #main-menu .nav-sidebar > li.header-search-form { margin-bottom: 20px !important; }
/* 4 bước "Cách hoạt động": căn giữa trên mobile */
@media (max-width: 549px) {
	.mz-steps .mz-step { text-align: center; }
	.mz-steps .mz-step__n { margin-left: auto; margin-right: auto; }
}
/* thẻ tài nguyên (ảnh trên, chữ dưới): ảnh sát mép thẻ trên mobile, không bị padding chung của .mz-card thụt vào */
@media (max-width: 849px) {
	.mz-card.mz-res > .col-inner { padding: 0; }
}

/* Bỏ số thứ tự ở đầu các mục (01, 02, ...): ẩn bằng CSS để không phải sửa nội dung trang */
.mz-brow__n { display: none !important; }
.mz-brows .mz-brow { gap: 0; }
.mz-brows.is-acc .mz-brow { grid-template-columns: minmax(0, 1fr); }
.mz-brows.is-acc .mz-brow h3,
.mz-brows.is-acc .mz-brow p { grid-column: 1; }
.mz-brows.is-acc .mz-brow h3 { padding-left: 28px; }
.mz-brows.is-acc .mz-brow p { padding-left: 28px; }
@media (max-width: 549px) {
	.mz-brows.is-acc .mz-brow { grid-template-columns: minmax(0, 1fr); }
	.mz-brows.is-acc .mz-brow h3 { padding: 18px 48px 18px 20px; }
	.mz-brows.is-acc .mz-brow p { padding-left: 20px; padding-right: 20px; }
	.mz-brows.is-acc .mz-brow h3::after { right: 20px; }
}

/* Mobile: lưới thẻ chỉ số (trong tab hoặc đứng riêng) không xếp một cột dài. Mỗi "trang" gồm 4 thẻ xếp dọc,
   phần còn lại vuốt ngang sang trang kế (scroll-snap). Chỉ áp dụng từ 549px trở xuống. */
@media (max-width: 549px) {
	.mz-mlib {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: repeat(4, auto);
		grid-auto-columns: 86%;
		gap: 12px;
		margin: 0 -10px;
		padding: 4px 10px 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 10px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mz-mlib::-webkit-scrollbar { display: none; }
	.mz-mlib > .mz-mcard { scroll-snap-align: start; min-width: 0; }
}

/* Chấm chỉ vị trí của slide chỉ số: chỉ hiện trên mobile */
.mz-mdots { display: none; }
@media (max-width: 549px) {
	.mz-mdots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
	.mz-mdot { width: 8px; height: 8px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #cbd8f2; box-shadow: none; transition: width .25s ease, background .25s ease; }
	.mz-mdot.is-on { width: 22px; background: var(--mz-primary); }
}
@media (prefers-reduced-motion: reduce) { .mz-mdot { transition: none; } }

/* Danh sách .mz-hlist: icon dấu tích thay cho ✦, thẳng lề với đoạn văn phía trên (bỏ lề trái mặc định của li) */
.mz-hlist li { margin-left: 0; padding-left: 30px; }
.mz-hlist li::before {
	content: "";
	left: 0; top: 3px;
	width: 20px; height: 20px;
	background-color: var(--mz-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke-width='1.8'/%3E%3Cpath d='m8 12.3 2.8 2.8L16.2 9.5'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke-width='1.8'/%3E%3Cpath d='m8 12.3 2.8 2.8L16.2 9.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mz-hlist li { margin-left: 0 !important; }
/* Dấu tích: vòng tròn xanh đặc, tích trắng */
.mz-hlist li::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231562ef'/%3E%3Cpath d='m7 12.4 3.3 3.3L17 8.9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	-webkit-mask: none;
	mask: none;
}

/* Bộ lọc thư viện trên mobile: ẩn cả cột lọc (tìm kiếm, Danh mục, Kết nối) */
@media (max-width: 849px) {
	.mz-dl__filters { display: none; }
	.mz-dl__layout { gap: 0; }
}
@media (max-width: 849px) {
	.mz-dl__layout { grid-template-columns: minmax(0, 1fr); }
	.mz-dl__filters, .mz-dl__main, .mz-dl__group { min-width: 0; }
}

/* Bài viết trên mobile: khoảng cách từ ảnh bìa đến đoạn đầu gọn lại (trước đó ~64px) */
@media (max-width: 849px) {
	.single-post .mz-post-head { padding-bottom: 0; }
	.single-post .mz-post-head + .row { margin-top: 16px; }
	.single-post .entry-content.single-page { padding-top: 12px; }
}

/* Bài viết trên desktop: dòng đầu của nội dung ngang hàng mép trên khung mục lục bên cạnh (bỏ padding-top 24px) */
@media (min-width: 850px) {
	.single-post .entry-content.single-page { padding-top: 0; }
}

/* Bài viết trên desktop: khoảng cách từ ảnh bìa đến hàng nội dung + mục lục ngắn lại (trước đó ~56px) */
@media (min-width: 850px) {
	.single-post .mz-post-head { padding-bottom: 0; }
	.single-post .mz-post-head + .row { margin-top: 28px; }
}

/* Bài viết trên mobile: ẩn cột bên (mục lục) */
@media (max-width: 849px) {
	.single-post .post-sidebar { display: none; }
}

/* Danh sách chấm trong bài viết: chấm thẳng lề trái với đoạn văn, chữ thụt vừa đủ sau chấm (bỏ lề mặc định 15px + 1,3em của Flatsome) */
.single-post .entry-content ul:not(.ez-toc-list):not(.ez-toc-list-level-3) { margin-left: 0; padding-left: 0; list-style: none; }
.single-post .entry-content ul:not(.ez-toc-list) > li { position: relative; margin-left: 0 !important; padding-left: 1.15em; list-style: none; }
.single-post .entry-content ul:not(.ez-toc-list) > li::before {
	content: "";
	position: absolute; left: .1em; top: .72em;
	width: .36em; height: .36em;
	border-radius: 50%;
	background: currentColor;
}

/* Bài viết liên quan trên mobile: slide vuốt ngang (scroll-snap), thẻ kế tiếp hé ra bên phải */
@media (max-width: 549px) {
	.mz-related__grid {
		display: flex;
		gap: 14px;
		margin: 0 -15px;
		padding: 0 15px 4px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 15px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mz-related__grid::-webkit-scrollbar { display: none; }
	.mz-related__item { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
}

/* Chấm chỉ vị trí của slide bài viết liên quan: chỉ hiện trên mobile */
.mz-rdots { display: none; }
@media (max-width: 549px) {
	.mz-rdots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; }
	.mz-rdot { width: 8px; height: 8px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #cbd8f2; box-shadow: none; transition: width .25s ease, background .25s ease; }
	.mz-rdot.is-on { width: 22px; background: var(--mz-primary); }
}
@media (prefers-reduced-motion: reduce) { .mz-rdot { transition: none; } }

/* Cuối bài viết: bỏ các lớp khoảng trống cộng dồn (entry-content 24 + article 30 + cột 30) trước khối "Bài viết liên quan" */
.single-post .entry-content.single-page { padding-bottom: 0; }
.single-post article.post { margin-bottom: 0; }
.single-post .row > .large-9.col { padding-bottom: 0; }

/* Thư viện biểu đồ trên mobile: icon biến thể to hơn (trước đó chỉ 56px trong khung rộng 340px) */
@media (max-width: 549px) {
	.mz-dl__grid .mz-dl__thumb--chart { gap: 12px; padding: 18px; }
	.mz-dl__grid .mz-dl__thumb--chart img { flex: 0 1 92px; width: auto; height: auto; min-width: 0; aspect-ratio: 1; padding: 14px; border-radius: 16px; }
	.mz-dl__grid .mz-dl__thumb--n2 img { flex-basis: 112px; padding: 18px; }
	.mz-dl__grid .mz-dl__thumb--n1 img { flex-basis: 132px; padding: 22px; border-radius: 20px; }
}

/* Tab kênh thông báo tự chạy: thanh tiến trình dưới thẻ đang chọn (dùng chung keyframes mz-htab-progress) */
.mz-chtab { position: relative; overflow: hidden; }
.mz-chtabs.is-auto .mz-chtab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mz-primary); transform-origin: left center; animation: mz-htab-progress 6s linear forwards; }
.mz-chtabs.is-auto.is-paused .mz-chtab.is-active::after { animation-play-state: paused; }

/* Các bước .mz-tl trên mobile: xếp dọc, căn giữa, số có viền mờ, không đường nối - giống .mz-step */
@media (max-width: 549px) {
	.mz-tl.mz-tl { gap: 0; }
	.mz-tl.mz-tl .mz-tl__step { flex-direction: column; align-items: center; gap: 0; padding-left: 0; text-align: center; }
	.mz-tl.mz-tl .mz-tl__step + .mz-tl__step { margin-top: 40px; }
	.mz-tl.mz-tl .mz-tl__rail { flex-direction: row; margin-bottom: 18px; }
	.mz-tl.mz-tl .mz-tl__n { box-shadow: 0 0 0 5px rgba(21, 98, 239, .2), 0 0 0 11px rgba(21, 98, 239, .08); }
	.mz-tl.mz-tl .mz-tl__line { display: none; }
	.mz-tl.mz-tl .mz-tl__body,
	.mz-tl.mz-tl .mz-tl__step:last-child .mz-tl__body { padding: 0; }
	.mz-tl.mz-tl .mz-tl__body h3 { font-size: 1.125rem; margin: 0 0 6px; line-height: 1.35; }
	.mz-tl.mz-tl .mz-tl__body p { font-size: .9688rem; }
}

/* Bảng so sánh (.mz-cmp): cột Mozo nổi trên nền tint, cuộn ngang trên màn nhỏ */
.mz-cmp { background: var(--mz-soft); border-radius: 24px; padding: 32px 40px; }
.mz-cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mz-cmp__t { width: 100%; min-width: 820px; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; text-align: left; }
.mz-cmp__t th, .mz-cmp__t td { font-family: var(--mz-font); text-transform: none; letter-spacing: 0; padding: 16px 8px; border: 0; border-bottom: 1px solid var(--mz-line); vertical-align: middle; text-align: center; background: transparent; }
.mz-cmp__t thead th { font-size: .875rem; font-weight: 600; color: var(--mz-ink); line-height: 1.3; text-transform: none; border-bottom: 1px solid var(--mz-line); }
.mz-cmp__t thead td { width: 28%; border-bottom: 1px solid var(--mz-line); }
.mz-cmp__t tbody th { text-align: left; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--mz-ink); padding-right: 20px; position: sticky; left: 0; z-index: 1; background: var(--mz-soft); }
.mz-cmp__t tbody tr:last-child th, .mz-cmp__t tbody tr:last-child td { border-bottom: 0; }
.mz-cmp__t .mz-cmp__me { background: #fff; }
.mz-cmp__t thead th.mz-cmp__me { border-radius: 16px 16px 0 0; padding-top: 22px; }
.mz-cmp__t tbody tr:last-child td.mz-cmp__me { border-radius: 0 0 16px 16px; }
.mz-cmp__t thead .mz-cmp__me img { display: block; margin: 0 auto; height: 22px; width: auto; }
.mz-cm { position: relative; width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; }
/* Dấu tích cùng kiểu .mz-hlist: vòng tròn xanh đặc, tích trắng */
.mz-cm--y { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231562ef'/%3E%3Cpath d='m7 12.4 3.3 3.3L17 8.9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.mz-cm--n::after { content: ""; position: absolute; left: 6px; top: 10px; width: 10px; height: 2px; border-radius: 2px; background: #b4bfd6; }
.mz-cmp__note { margin: 20px 0 0; font-size: .8125rem; color: var(--mz-muted); line-height: 1.5; }
@media (max-width: 849px) {
	.mz-cmp { padding: 20px 14px; border-radius: 20px; }
	.mz-cmp__t { min-width: 720px; }
	.mz-cmp__t thead td { width: 150px; }
	/* cột Mozo hẹp: dùng logo dọc thay logo ngang (logo ngang bị nhỏ) */
	.mz-cmp__t thead th.mz-cmp__me { width: 116px; height: 96px; padding: 0; background: #fff url("/wp-content/uploads/2026/10/Logo-MOZO-Doc.png") center 20px / auto 44px no-repeat; }
	.mz-cmp__t thead .mz-cmp__me img { display: none; }
	.mz-cmp__t tbody th { font-size: .8125rem; padding-right: 12px; box-shadow: 8px 0 8px -8px rgba(11, 27, 63, .12); }
}