/* Font tự host (assets/fonts) — chỉ tải khi trang thật sự dùng tới. */
/* Inter vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/playfair-display-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Playfair Display latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/playfair-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   MEOKETING — CSS site (child theme base, Flatsome)
   Breakpoint Flatsome: ≤849px tablet, ≤549px mobile.
   ========================================================================== */
/* Anton vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Anton latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--gutter: 24px; /* lề hai bên dùng chung: header, hero, lưới dự án, footer */
	--mk-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='6.6' cy='8.6' rx='2.1' ry='2.7'/%3E%3Cellipse cx='12' cy='6.3' rx='2.1' ry='2.9'/%3E%3Cellipse cx='17.4' cy='8.6' rx='2.1' ry='2.7'/%3E%3Cpath d='M12 11.2c3.1 0 5.7 2.5 5.7 5.2 0 2.1-1.7 3.3-3.5 3.3-1 0-1.6-.4-2.2-.4s-1.2.4-2.2.4c-1.8 0-3.5-1.2-3.5-3.3 0-2.7 2.6-5.2 5.7-5.2z'/%3E%3C/svg%3E");
	--sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--inter: "Inter", var(--sys);
	--serif: "Playfair Display", Georgia, serif;
	--brand: #2f6ee7;
	--red: #e02228;
	--ink: #111111;

	/* trang Về Chúng Tôi */
	--mk-primary: #1f55c4; --mk-primary-c: #2f6ee7;
	--mk-primary-fixed: #dbe8ff; --mk-on-primary-fixed: #0b2152;
	--mk-secondary: #5a8cf0; --mk-secondary-c: #7da8ff;
	--mk-secondary-fixed: #dbe8ff; --mk-on-secondary-fixed: #0b2152;
	--mk-bg: #f8fbff; --mk-s-low: #f2f6ff; --mk-s: #ecf2ff; --mk-s-high: #e5edfb; --mk-s-highest: #dfe7f6;
	--mk-on-surface: #141a26; --mk-on-variant: #444b57; --mk-error: #ba1a1a;
	--mk-sh-sm: 0 1px 2px rgba(20,26,38,.06), 0 1px 3px rgba(20,26,38,.05);
	--mk-sh-md: 0 4px 6px -1px rgba(20,26,38,.08), 0 2px 4px -2px rgba(20,26,38,.06);
	--mk-sh-lg: 0 10px 15px -3px rgba(20,26,38,.09), 0 4px 6px -4px rgba(20,26,38,.07);
	--mk-sh-xl: 0 20px 25px -5px rgba(20,26,38,.10), 0 8px 10px -6px rgba(20,26,38,.07);
}

@media (max-width: 549px) { :root { --gutter: 16px; } }

/* ---------- Ngắt dòng đẹp: đoạn văn không để chữ lẻ ở dòng cuối; câu ngắn chia dòng đều ---------- */
.mk-ab p, .mk-bento p, .mk-item__text, .mk-card2__text, .mk-card2__list li, .mk-slogan2__text, .mk-cta2__text,
.mk-contact__info p, .mk-hero2 p, .mk-svc li, .mk-single__content p, .mk-work-single__content p, .mk-prose p, .mk-prose li { text-wrap: pretty; }
.mk-head2__lead, .mk-item__note, .mk-slogan2__sign, .mk-stat__label, .mk-stat__text, .mk-ab-foot, .mk-hero2__lead,
.mk-bento__lead, .mk-card2__title, .mk-item__title, .mk-post__title, .mk-foot2__addr { text-wrap: balance; }

/* ---------- Một font cho toàn site: Inter (tự host, có tiếng Việt) ---------- */
html body, html body .nav > li > a, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .heading-font, html body .alt-font, html body button, html body input, html body select, html body textarea, html body .button {
	font-family: var(--inter);
}
body { color: #212529; }

/* ==========================================================================
   HEADER — đường kẻ mảnh, menu Inter, trang hiện tại gạch chân tím, nút "Liên hệ"
   ========================================================================== */
.header-wrapper { box-shadow: none; border-bottom: 1px solid rgba(15,42,92,.1); }
#masthead .header-inner.container { padding-left: var(--gutter); padding-right: var(--gutter); }
.header-wrapper.stuck { box-shadow: 0 6px 24px -12px rgba(15,42,92,.25); }
.header-main .header-nav-main > li > a {
	position: relative; padding: 8px 0; font-family: var(--inter); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #39404d;
}
.header-main .header-nav-main > li > a:hover { color: #0f2a5c; }
.header-main .header-nav-main > li.active > a,
.header-main .header-nav-main > li.current-menu-item > a { color: #0f2a5c; font-weight: 600; }
.header-main .header-nav-main > li.active > a::after,
.header-main .header-nav-main > li.current-menu-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #2f6ee7; }
#masthead .header-nav-main > li.menu-item-type-custom.active > a { color: #39404d; font-weight: 500; }
#masthead .header-nav-main > li.menu-item-type-custom.active > a::after { display: none; }
body.home #masthead .header-nav-main > li.menu-item-type-custom.active > a { color: #0f2a5c; font-weight: 600; }
body.home #masthead .header-nav-main > li.menu-item-type-custom.active > a::after { display: block; }
.header-nav-main .mk-nav-contact { display: none; }
.header-nav-main.nav > li { margin: 0 12px; }
.header-nav-main.nav > li:first-child { margin-left: 0; }
/* Site Polylang: menu dài (nhất là EN) — không xuống dòng; thiếu chỗ thì gom vào nút ☰ (giữ nút Liên hệ + VN|EN bên phải) */
.header-main .header-nav-main > li > a { white-space: nowrap; }
html[lang^="en"] .header-main .header-nav-main > li > a { font-size: 14px; }
html[lang^="en"] .header-nav-main.nav > li { margin: 0 9px; }
@media (min-width: 850px) and (max-width: 1259px) {
	#masthead .hide-for-medium.flex-left { display: none !important; }
	#masthead .show-for-medium.flex-left { display: flex !important; }
	#masthead .show-for-medium.flex-right { display: none !important; }
}

.html_topbar_left { margin-right: 18px !important; }
.mk-hdr-cta {
	display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 12px; background: #0f2a5c;
	font-family: var(--inter); font-size: 14px; line-height: 20px; font-weight: 600; color: #fff; transition: background .2s;
}
#masthead .mk-hdr-cta { padding: 10px 18px; border-radius: 12px; line-height: 20px; }
#masthead .mk-hdr-cta, #masthead .mk-hdr-cta:hover { color: #fff; }
.mk-hdr-cta:hover { background: #2f6ee7; }

/* VN | EN */
.mobile-nav > li.html_topbar_right { display: flex !important; align-items: center; }
.pll-bar { display: inline-flex; align-items: center; gap: 6px; font-family: var(--inter); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #0f2a5c; }
.pll-bar__item { color: inherit; opacity: .45; transition: opacity .2s; }
.pll-bar__item:hover { opacity: .75; color: inherit; }
.pll-bar__item--active { opacity: 1; }
.pll-bar__sep { opacity: .3; }

@media (max-width: 849px) {
	html body #logo { width: 150px; }
	html body #logo img { max-height: 48px; width: auto; }
}

/* Menu mobile: lớp phủ trắng toàn màn hình, chữ Anton lớn */
.mobile-sidebar.mfp-content, .off-canvas-center .mfp-content { padding-top: 80px; }
.off-canvas-center .nav-sidebar.nav-vertical > li { text-align: left; border: 0; border-bottom: 1px solid rgba(15,42,92,.1); }
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
	font-family: "Anton", var(--sys); font-size: 40px; line-height: 1.2; font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
	color: #0f2a5c; padding: 14px 24px;
}
.off-canvas-center .nav-sidebar.nav-vertical > li.active > a,
.off-canvas-center .nav-sidebar.nav-vertical > li > a:hover { color: #2f6ee7; }
.off-canvas-center .mfp-close { top: 18px; left: 18px; right: auto; color: #0f2a5c; opacity: 1; }
.off-canvas.mfp-bg.mfp-ready, .off-canvas-center.mfp-bg.mfp-ready { background: #fff; opacity: 1; }

/* ==========================================================================
   FOOTER — UX Block "footer-meoketing": đơn giản, nền trắng, đường kẻ mảnh
   ========================================================================== */
.mk-foot2 p { margin: 0; }
.mk-foot2__row { align-items: flex-end !important; }
.mk-foot2 .col { padding-bottom: 0; }
.mk-foot2__row { padding: 0 var(--gutter) !important; }
.mk-foot2__row > .col { padding-left: 0 !important; padding-right: 0 !important; }
.mk-foot2__logo { max-width: 180px; margin: 0 !important; }
.mk-foot2__logo img { display: block; width: 100%; height: auto; }
.mk-foot2__addr { margin-top: 8px !important; font-size: 14px; line-height: 21px; color: #636b78; }
.mk-foot2__links > .col-inner { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.mk-foot2__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 24px; }
.mk-foot2__nav a { font-size: 15px; line-height: 22px; font-weight: 500; color: #39404d; }
.mk-foot2__nav a:hover { color: #2f6ee7; }
.mk-foot2 .mk-social__ic { width: 32px; height: 32px; color: #0f2a5c; border-color: rgba(15,42,92,.18); }
.mk-foot2 .mk-social__ic svg { width: 16px; height: 16px; }
.mk-foot2 .mk-social__ic:hover { background: #0f2a5c; border-color: #0f2a5c; color: #fff; }
.mk-foot2 .mk-social__tel { color: #0f2a5c; font-size: 15px; }
@media (max-width: 849px) {
	.mk-foot2__links { padding-top: 22px !important; }
	.mk-foot2__links > .col-inner { align-items: flex-start; }
	.mk-foot2__nav { justify-content: flex-start; }
}

/* Mobile: xếp lại thành các tầng — logo / menu 2 cột / địa chỉ / mạng xã hội + hotline.
   Chỉ đổi thứ tự bằng CSS (display: contents), nội dung vẫn sửa ở một chỗ trong UX Builder. */
@media (max-width: 549px) {
	.mk-foot2__row { display: grid !important; grid-template-columns: 1fr; grid-template-areas: "logo" "nav" "addr" "social"; }
	.mk-foot2__row > .col, .mk-foot2__row > .col > .col-inner { display: contents; }
	.mk-foot2__logo { grid-area: logo; max-width: 150px; padding-bottom: 16px; }
	.mk-foot2__nav {
		grid-area: nav; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column;
		gap: 0 16px; padding: 4px 0 0;
	}
	.mk-foot2__nav a { padding: 7px 0; font-size: 15px; }
	.mk-foot2__addr { grid-area: addr; margin: 18px 0 14px !important; }
	.mk-foot2 .mk-social { grid-area: social; display: flex; width: 100%; }
	.mk-foot2 .mk-social__tel { margin-left: auto; font-size: 16px; }
}

/* Logo Zalo là chữ nằm ngang → cho to hơn các icon khác để cân thị giác */
html body .mk-social__ic--zalo svg { width: 24px; height: 24px; }

/* Số điện thoại = nút gọi (icon + số), dùng chung ở hero và footer */
html body .mk-social__tel {
	display: inline-flex; align-items: center; gap: 8px; height: 34px; margin-left: 10px; padding: 0 14px 0 12px;
	border: 1px solid rgba(15,42,92,.18); border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .01em;
	color: #0f2a5c; background: transparent; transition: background .2s, border-color .2s, color .2s;
}
html body .mk-social__tel::before {
	content: ""; width: 15px; height: 15px; flex: 0 0 15px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 15.9v2.8a1.9 1.9 0 0 1-2 1.9 18.6 18.6 0 0 1-8.1-2.9 18.3 18.3 0 0 1-5.6-5.6A18.6 18.6 0 0 1 1.9 4a1.9 1.9 0 0 1 1.9-2h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.8.7 2.6a1.9 1.9 0 0 1-.4 2L7.6 9.4a15 15 0 0 0 5.6 5.6l1.2-1.2a1.9 1.9 0 0 1 2-.4c.8.3 1.7.6 2.6.7a1.9 1.9 0 0 1 1.5 1.8z'/%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'%3E%3Cpath d='M20.5 15.9v2.8a1.9 1.9 0 0 1-2 1.9 18.6 18.6 0 0 1-8.1-2.9 18.3 18.3 0 0 1-5.6-5.6A18.6 18.6 0 0 1 1.9 4a1.9 1.9 0 0 1 1.9-2h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.8.7 2.6a1.9 1.9 0 0 1-.4 2L7.6 9.4a15 15 0 0 0 5.6 5.6l1.2-1.2a1.9 1.9 0 0 1 2-.4c.8.3 1.7.6 2.6.7a1.9 1.9 0 0 1 1.5 1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .mk-social__tel:hover { background: #0f2a5c; border-color: #0f2a5c; color: #fff; opacity: 1; }
html body .mk-hero2 .mk-social__tel { height: 34px; color: var(--hero-color); border-color: color-mix(in srgb, var(--hero-color) 22%, transparent); }
html body .mk-hero2 .mk-social__tel:hover { background: var(--hero-color); color: var(--hero-bg); }
html body .mk-foot2 .mk-social__tel { height: 32px; }
@media (max-width: 549px) {
	html body .mk-social__tel { height: 30px; padding: 0 12px 0 10px; font-size: 14px; gap: 6px; }
	html body .mk-foot2 .mk-social__tel { height: 32px; font-size: 15px; }
}

/* Thanh bản quyền (absolute footer của Flatsome) */
.absolute-footer { padding: 18px 0; font-size: 13px; color: #636b78; border-top: 1px solid rgba(15,42,92,.08); }
.absolute-footer .container { max-width: none; padding: 0 var(--gutter); }
.absolute-footer .footer-primary, .absolute-footer .footer-secondary { line-height: 20px; padding-top: 0; }
.absolute-footer .copyright-footer { color: #636b78; }
.absolute-footer .footer-text a { font-size: 13px; color: #636b78; text-transform: none; letter-spacing: 0; }
.absolute-footer .footer-text a:hover { color: #2f6ee7; }
.absolute-footer .footer-text a + a { margin-left: 20px; }
@media (max-width: 849px) {
	.absolute-footer, .absolute-footer.small-text-center, .absolute-footer.medium-text-center { text-align: left !important; }
	.absolute-footer .container { display: flex; flex-direction: column; gap: 10px; }
	.absolute-footer .footer-secondary { width: 100%; }
	.absolute-footer .footer-text { display: flex; justify-content: space-between; width: 100%; }
	.absolute-footer .footer-text a + a { margin-left: 0; }
	.absolute-footer .footer-primary { width: 100%; text-align: center; }
	.absolute-footer .footer-primary, .absolute-footer .footer-secondary { float: none; padding: 0; }
}

/* ==========================================================================
   TIÊU ĐỀ TRANG (Dịch Vụ, Bài viết…)
   ========================================================================== */
.mk-pagehead-row .col { padding-bottom: 0; }
.mk-pagehead {
	font-size: 60px; line-height: 1.5; font-weight: 400; color: #000; text-align: center;
	margin: 0; padding: 0 0 10px; border-bottom: 1px solid #242424;
}
.mk-pagehead--plain { border: 0; font-size: 50px; line-height: 1.2; font-weight: 500; padding: 0 0 30px; }
@media (max-width: 549px) {
	.mk-pagehead { font-size: 40px; }
	.mk-pagehead--plain { font-size: 32px; }
}

/* ==========================================================================
   TRANG CHỦ — HERO (chữ thương hiệu cực lớn)
   ========================================================================== */
/* Section chứa hero: khối rộng gần hết màn hình, chừa 24px mỗi bên */
.mk-hero2-sec .row { padding: 0 var(--gutter); }
.mk-hero2-sec .row > .col { padding: 0 !important; }
.mk-hero2 {
	--hero-bg: #e6effd; --hero-color: #0f2a5c;
	container-type: inline-size; position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
	min-height: max(460px, calc(100vh - 157px)); min-height: max(460px, calc(100svh - 157px)); padding: 30px 44px 36px;
	border-radius: 20px; background: var(--hero-bg); color: var(--hero-color);
}
.mk-hero2__top, .mk-hero2__bottom { display: flex; justify-content: space-between; gap: 24px; }
.mk-hero2__top { align-items: center; }
.mk-hero2 p { margin: 0; color: inherit; }
.mk-hero2__label { font-size: 16px; line-height: 22px; font-weight: 600; }
.mk-social { display: inline-flex; align-items: center; gap: 8px; }
.mk-social__ic {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent); color: inherit; transition: background .2s, color .2s, border-color .2s;
}
.mk-hero2 .mk-social__ic { color: var(--hero-color); }
.mk-hero2 .mk-social__ic:hover { background: var(--hero-color); border-color: var(--hero-color); color: var(--hero-bg); }
.mk-social__tel { margin-left: 10px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: .01em; color: inherit; white-space: nowrap; }
.mk-hero2 .mk-social__tel { color: var(--hero-color); }
.mk-social__tel:hover { opacity: .75; }
html body .mk-hero2__word {
	margin: 0; font-family: "Anton", var(--sys); font-weight: 400; font-size: 15cqi; line-height: .9;
	letter-spacing: -.005em; text-align: center; text-transform: uppercase; color: var(--hero-color);
}
.mk-hero2__bottom { align-items: flex-end; }
.mk-hero2__bottom p { font-size: 16px; line-height: 22px; font-weight: 500; }
.mk-hero2__lead { max-width: 340px; }
.mk-hero2__meta { text-align: right; }
.mk-hero2__meta span { display: block; }
@supports not (font-size: 1cqi) { html body .mk-hero2__word { font-size: 12vw; } }
/* Hiệu ứng gõ chữ (assets/hero.js) */
.mk-type .mk-hero2__word[data-typing]:not(.is-typing) { visibility: hidden; animation: mk-show 0s 2.5s forwards; } /* JS lỗi thì tự hiện sau 2,5s */
.mk-hero2__word.is-typing .mk-ch { visibility: hidden; }
.mk-hero2__word.is-typing .mk-ch.is-on { visibility: visible; }
@keyframes mk-show { to { visibility: visible; } }
@media (max-width: 549px) {
	.mk-hero2 { min-height: clamp(380px, 60vh, 520px); min-height: clamp(380px, 60svh, 520px); gap: 0; padding: 18px 20px 22px; border-radius: 18px; }
	.mk-hero2__top { padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--hero-color) 14%, transparent); }
	.mk-hero2__label { display: none; }
	.mk-hero2__contact, .mk-hero2__contact .mk-social { display: flex; width: 100%; }
	.mk-social { gap: 6px; }
	.mk-social__ic { width: 30px; height: 30px; }
	.mk-social__ic svg { width: 16px; height: 16px; }
	.mk-hero2 .mk-social__tel { margin-left: auto; font-size: 15px; }
	html body .mk-hero2__word { margin: 30px 0 26px; font-size: 21cqi; }
	.mk-hero2__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
	.mk-hero2__lead { max-width: none; font-size: 16px !important; line-height: 24px !important; font-weight: 600 !important; }
	.mk-hero2__meta { text-align: left; font-size: 13px !important; line-height: 19px !important; opacity: .72; }
}

/* ==========================================================================
   TRANG CHỦ — lưới dự án
   ========================================================================== */
.mk-home__headrow > .col { padding: 0 var(--gutter) !important; }
html body .mk-sechead__title {
	display: flex; align-items: center; gap: 24px; margin: 0 0 30px;
	font-family: var(--inter); font-weight: 600; font-size: 18px; line-height: 1.3;
	text-transform: none; letter-spacing: 0; color: #0f2a5c; white-space: nowrap;
}
.mk-sechead__title::before, .mk-sechead__title::after { content: ""; flex: 1; height: 1px; background: rgba(15,42,92,.2); }
@media (max-width: 549px) {
	html body .mk-sechead__title { margin-bottom: 18px; gap: 14px; font-size: 16px; }
}
.mk-home__gridrow > .col { padding: 0 !important; }
.mk-work-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
	margin: 0 auto; padding: 0 var(--gutter);
}
.mk-work { position: relative; display: block; overflow: hidden; aspect-ratio: 51 / 35; background: #f4f4f6; border-radius: 14px; }
.mk-work__img, .mk-work__img img { display: block; width: 100%; height: 100%; }
.mk-work__img img { object-fit: cover; transition: transform 1s ease; }
.mk-work__overlay {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px;
	background: rgba(47,110,231,.92); color: #fff; text-align: center; opacity: 0; transition: opacity .4s ease;
}
.mk-work__title {
	font-size: clamp(16px, 2.2vw, 28px); line-height: 1.1; font-weight: 900; text-transform: uppercase;
	transform: translateY(15px); transition: transform .4s ease;
}
.mk-work:hover .mk-work__overlay, .mk-work:focus-visible .mk-work__overlay { opacity: 1; }
.mk-work:hover .mk-work__title, .mk-work:focus-visible .mk-work__title { transform: none; }
.mk-work:hover .mk-work__img img { transform: scale(1.1); }
@media (max-width: 849px) { .mk-work-grid { gap: 16px; } }
@media (max-width: 549px) {
	.mk-work-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	/* Mobile: chỉ hiện ảnh, không nhãn tên (chạm vào là mở dự án). */
	.mk-work__overlay { display: none; }
}

/* ==========================================================================
   VỀ CHÚNG TÔI — cùng ngôn ngữ với trang chủ: tiêu đề Anton, chữ Inter, đường kẻ mảnh
   Các khối là element Meoketing (inc/mk-about.php) — sửa trong UX Builder.
   ========================================================================== */
:root { --ink: #141a26; --deep: #0f2a5c; --muted: #59606d; --line: rgba(15,42,92,.14); --tint: #f4f7fe; }

/* Tiêu đề mục: nhãn nhỏ có đường kẻ + tiêu đề lớn + đoạn dẫn */
.mk-head2 { margin-bottom: 48px; }
.mk-head2.is-center { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.mk-head2__label { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--brand); }
.mk-head2.is-center .mk-head2__label { justify-content: center; }
.mk-head2.is-center .mk-head2__label::before, .mk-head2__label::after { content: ""; flex: 0 0 48px; height: 1px; background: currentColor; opacity: .45; }
.mk-head2.is-left .mk-head2__label::after { flex-basis: 40px; }
html body .mk-head2__title {
	margin: 0; font-family: "Anton", var(--sys); font-weight: 400; text-transform: uppercase; letter-spacing: .005em;
	font-size: clamp(34px, 4.2vw, 58px); line-height: 1.16; color: var(--deep);
}
html body .mk-head2__title, html body .mk-cta2__title, .mk-head2__lead, .mk-cta2__text { text-wrap: balance; }
.mk-head2__lead { margin: 20px 0 0; font-size: 18px; line-height: 30px; color: var(--muted); }
.mk-head2.is-center .mk-head2__lead { max-width: 680px; margin-left: auto; margin-right: auto; }
.mk-ab-top .mk-head2 { margin-bottom: 0; }
html body .mk-head2.is-left .mk-head2__title { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.2; }
.mk-ab-top .mk-head2__title { font-size: clamp(40px, 5.6vw, 80px); }

/* Tiêu đề có dấu | : desktop liền dòng, điện thoại xuống dòng đúng chỗ */
.mk-ln { display: inline; }
@media (max-width: 549px) {
	.mk-ln { display: block; }
	html body .mk-head2__title, html body .mk-cta2__title { line-height: 1.24; }
}

/* Ảnh lớn bo góc */
.mk-ab-photo .img-inner { border-radius: 20px; }
.mk-ab-photo--sm { margin-top: 28px !important; }
.mk-ab-photo--sm .img-inner { border-radius: 16px; }

/* Câu chuyện: chữ trái + ảnh phải */
.mk-ab-first .section-content { padding-bottom: 96px; }
.mk-ab-story .mk-head2 { margin-bottom: 24px; }
.mk-ab-lead { margin: 0 0 18px; padding-left: 20px; border-left: 3px solid var(--brand); font-size: 20px; line-height: 32px; font-weight: 500; color: var(--ink); }
.mk-ab-text { margin: 0 0 12px; font-size: 16px; line-height: 27px; color: var(--muted); }
.mk-ab-text strong { color: var(--ink); font-weight: 600; }
.mk-ab-story__media .img { margin: 0; }
.mk-ab-story__media .img-inner img { object-position: 38% center; }
@media (min-width: 850px) { .mk-ab-story__text > .col-inner { padding-right: 40px; } }

/* Nút (element Button của Flatsome + class) */
.mk-ab .button.mk-btn {
	display: inline-flex; align-items: center; gap: 8px; margin: 12px 10px 0 0; padding: 13px 24px; min-height: 0; line-height: 20px;
	font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; border: 1px solid transparent; border-radius: 12px; box-shadow: none;
}
body .mk-ab .button.mk-btn--primary { background: var(--deep); border-color: var(--deep); color: #fff; }
body .mk-ab .button.mk-btn--primary:hover { background: var(--brand); border-color: var(--brand); }
body .mk-ab .button.mk-btn--ghost { background: transparent; border-color: var(--line); color: var(--deep); }
body .mk-ab .button.mk-btn--ghost:hover { border-color: var(--deep); }

/* Chỉ số: khung tím nhạt, ngăn bằng vạch dọc mảnh */
.mk-ab-stats { max-width: min(1338px, calc(100% - 30px)) !important; margin: 104px auto 0 !important; padding: 36px 12px !important; border-radius: 20px; background: var(--tint); }
.mk-ab-stats > .col { padding-bottom: 0; }
@media (min-width: 850px) { .mk-ab-stats > .col + .col > .col-inner { border-left: 1px solid rgba(47,110,231,.14); padding-left: 28px; } }
.mk-stat__num { margin: 0 0 8px; font-family: "Anton", var(--sys); font-size: clamp(40px, 4vw, 56px); line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.mk-stat__label { margin: 0 0 4px; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink); }
.mk-stat__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }

/* Khối slogan */
.mk-slogan2 { padding: 56px 56px 48px; border-radius: 20px; background: var(--deep); color: #fff; container-type: inline-size; }
.mk-slogan2 p { margin: 0; }
.mk-slogan2__eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; color: #a9c3f4; }
.mk-slogan2__big { margin: 14px 0 28px !important; font-family: "Anton", var(--sys); font-size: 10.5cqi; line-height: .95; text-transform: uppercase; color: #fff; }
.mk-slogan2__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }
.mk-slogan2__text { max-width: 620px; font-size: 17px; line-height: 28px; color: #d3def3; }
.mk-slogan2__sign { font-size: 14px; line-height: 20px; font-weight: 600; color: #fff; white-space: nowrap; }
.mk-ab-pair { margin-top: 48px !important; }

/* Triết lý — lưới bento */
.mk-bento-row + .mk-bento-row { margin-top: 0 !important; }
.mk-bento { padding-bottom: 24px !important; }
.mk-bento > .col-inner { height: 100%; border-radius: 22px; padding: 44px 44px 40px; position: relative; overflow: hidden; }
.mk-bento--soft > .col-inner { background: #e6effd; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.mk-bento--soft .mk-head2 { margin-bottom: 0; }
.mk-bento .mk-ln { display: block; } /* trong ô bento: | xuống dòng ở mọi màn hình */
.mk-bento__lead { margin: 0; font-size: 16px; line-height: 27px; color: #444b57; }
.mk-bento__lead strong { color: var(--deep); }
/* ô slogan: chữ xếp 3 dòng như poster + bàn chân mèo cỡ lớn in mờ */
.mk-bento--dark > .col-inner { padding: 0; background: var(--deep); }
.mk-bento--dark .mk-slogan2 { height: 100%; display: flex; flex-direction: column; border-radius: 0; padding: 44px 48px 40px; background: transparent; position: relative; z-index: 1; }
.mk-bento--dark > .col-inner::after {
	content: ""; position: absolute; right: -60px; bottom: -70px; width: 360px; height: 360px; background: #fff; opacity: .07; transform: rotate(-18deg); pointer-events: none;
	-webkit-mask: var(--mk-paw) center / contain no-repeat; mask: var(--mk-paw) center / contain no-repeat;
}
.mk-bento--dark .mk-slogan2__big { white-space: nowrap; font-size: min(calc(190cqi / var(--len, 12)), 150px); line-height: 1.05; margin: 18px 0 auto !important; }
.mk-bento--dark .mk-slogan2__foot { margin-top: 36px; flex-direction: column; align-items: flex-start; gap: 14px; border-top-color: rgba(255,255,255,.16); }
.mk-bento--dark .mk-slogan2__text { max-width: 460px; }
/* ô giá trị: viền mảnh, số lớn ở góc phải */
.mk-bento--line > .col-inner { background: #fff; border: 1px solid var(--line); padding: 36px 40px 34px; transition: border-color .25s, transform .25s; }
.mk-bento--line:hover > .col-inner { border-color: #b8cdf3; transform: translateY(-3px); }
.mk-bento--line .mk-item--col { padding: 0; border: 0 !important; }
.mk-bento--line .mk-item--col .mk-item__num { position: absolute; top: 24px; right: 30px; z-index: 0; margin: 0; font-size: 56px; color: #edf3fe; }
.mk-bento--line .mk-item__body, .mk-bento--line .mk-item__note { position: relative; z-index: 1; }
.mk-bento--line .mk-item__title { position: relative; font-size: 22px !important; line-height: 30px !important; margin-bottom: 10px !important; padding-right: 72px; }
.mk-bento--line .mk-item__note { margin-top: 18px !important; }
@media (max-width: 849px) {
	.mk-bento > .col-inner { padding: 34px 30px 30px; }
	.mk-bento--dark .mk-slogan2 { padding: 34px 30px 30px; }
}
@media (max-width: 549px) {
	.mk-bento { padding-bottom: 16px !important; }
	.mk-bento > .col-inner { border-radius: 18px; padding: 28px 22px 24px; }
	.mk-bento--dark .mk-slogan2 { padding: 28px 22px 24px; }
	.mk-bento--dark .mk-slogan2__big { font-size: calc(190cqi / var(--len, 12)); }
	.mk-bento--dark > .col-inner::after { width: 220px; height: 220px; right: -40px; bottom: -50px; }
	.mk-bento--line > .col-inner { padding: 26px 22px 24px; }
	.mk-bento--line .mk-item--col .mk-item__num { top: 16px; right: 18px; font-size: 44px; }
	.mk-bento--line .mk-item__title { font-size: 19px !important; line-height: 26px !important; padding-right: 56px; }
}

/* Mục đánh số */
.mk-item { display: grid; grid-template-columns: 64px 1fr; gap: 0 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.mk-item:last-of-type { border-bottom: 1px solid var(--line); }
.mk-item p, .mk-item h3 { margin: 0; }
.mk-item__num { font-family: "Anton", var(--sys); font-size: 32px; line-height: 1; color: var(--brand); padding-top: 2px; }
html body .mk-item__title { font-family: var(--inter); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.mk-item__text { font-size: 16px; line-height: 26px; color: var(--muted); }
.mk-item__note { grid-column: 2; margin-top: 10px !important; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--brand); }
.mk-item--col { grid-template-columns: 1fr; padding: 28px 0 0; border-bottom: 0 !important; }
.mk-item--col .mk-item__num { font-size: 44px; margin-bottom: 18px; }
.mk-item--col .mk-item__note { grid-column: 1; }

/* Giải pháp / Kim chỉ nam: cột trái ghim khi cuộn */
@media (min-width: 850px) {
	.mk-ab-split .mk-ab-sticky > .col-inner { position: sticky; top: 110px; }
	.mk-ab-split > .col:first-child { padding-right: 48px; }
}
.mk-ab-problem { margin: 0 0 20px; padding: 18px 20px; border-radius: 14px; background: var(--tint); }
.mk-ab--tint .mk-ab-problem { background: #fff; }
.mk-ab-problem p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink); }
.mk-ab-problem__h { margin-bottom: 6px !important; font-size: 14px !important; font-weight: 600; color: #b3261e !important; }
.mk-ab-note { margin-top: 24px; padding: 20px 22px; border-radius: 14px; background: var(--tint); }
.mk-ab-note p { margin: 0; font-size: 15px; line-height: 25px; color: var(--muted); }
.mk-ab-note strong { color: var(--ink); }

/* 3 bước: số căn giữa, mũi tên toả ra từ tiêu đề xuống từng cột (vẽ bằng CSS, nội dung vẫn là mk_item) */
.mk-ab-steps { --flow: #8fb0ef; position: relative; margin-top: 12px !important; padding-top: 64px; }
.mk-ab-steps::before, .mk-ab-steps::after { content: ""; display: block; position: absolute; background: var(--flow); }
.mk-ab-steps::before { top: -64px; left: 50%; width: 1.5px; height: 96px; margin-left: -.75px; }
.mk-ab-steps::after { top: 32px; left: calc(100% / 6); right: calc(100% / 6); height: 1.5px; }
.mk-ab-steps > .col { position: relative; }
.mk-ab-steps > .col::before { content: ""; position: absolute; top: -32px; left: 50%; width: 1.5px; height: 26px; margin-left: -.75px; background: var(--flow); }
.mk-ab-steps > .col::after {
	content: ""; position: absolute; top: -15px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
	border-right: 1.5px solid var(--flow); border-bottom: 1.5px solid var(--flow); transform: rotate(45deg);
}
html body .mk-ab-steps .mk-item--col { justify-items: center; text-align: center; padding: 0; border: 0 !important; }
.mk-ab-steps .mk-item--col .mk-item__num { margin-bottom: 14px; }
.mk-ab-steps .mk-item__text { max-width: 320px; margin: 0 auto; }
@media (max-width: 549px) {
	.mk-ab-steps { margin-top: 0 !important; padding-top: 0; }
	.mk-ab-steps::before, .mk-ab-steps::after { display: none; }
	.mk-ab-steps > .col { padding-top: 46px; padding-bottom: 6px; }
	.mk-ab-steps > .col::before { top: 6px; height: 30px; }
	.mk-ab-steps > .col::after { top: 25px; }
	.mk-ab-steps > .col:first-child::before { top: -36px; height: 72px; }
}
.mk-ab-foot { max-width: 640px; margin: 24px auto 0; text-align: center; font-size: 15px; line-height: 24px; color: var(--muted); }

/* Thẻ hệ sinh thái */
.mk-card2 { height: 100%; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.mk-card2__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); }
.mk-card2__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mk-card2:hover .mk-card2__img { transform: scale(1.04); }
.mk-card2__body { padding: 28px 30px 30px; }
.mk-card2__body p, .mk-card2__body h3, .mk-card2__body ul { margin: 0; }
.mk-card2__label { margin-bottom: 8px !important; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
html body .mk-card2__title { font-family: var(--inter); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.015em; color: var(--deep); margin-bottom: 10px; }
.mk-card2__text { font-size: 16px; line-height: 26px; color: var(--muted); }
.mk-card2__list { margin-top: 20px !important; list-style: none; border-top: 1px solid var(--line); }
.mk-card2__list li { position: relative; margin: 0 !important; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 23px; color: var(--ink); }
.mk-card2__list li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.mk-ab-cards > .col { padding-bottom: 24px; }
.mk-ab-cards > .col > .col-inner { height: 100%; }

/* Kêu gọi liên hệ */
.mk-cta2 { container-type: inline-size; padding: 72px 48px 56px; border-radius: 20px; background: var(--deep); color: #fff; text-align: center; }
.mk-cta2 p { margin: 0; }
.mk-cta2__label { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px; font-weight: 600; color: #a9c3f4; }
.mk-cta2__label::before, .mk-cta2__label::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .5; }
html body .mk-cta2__title { max-width: 900px; margin: 18px auto 16px; font-family: "Anton", var(--sys); font-weight: 400; font-size: clamp(34px, 5cqi, 64px); line-height: 1.15; text-transform: uppercase; color: #fff; }
.mk-cta2__text { max-width: 640px; margin: 0 auto !important; font-size: 17px; line-height: 28px; color: #d3def3; }
.mk-cta2__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.mk-cta2__btn { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 12px; border: 1px solid rgba(255,255,255,.4); font-size: 15px; font-weight: 600; color: #fff; transition: background .2s, border-color .2s, color .2s; }
.mk-cta2__btn:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.mk-cta2__btn.is-primary { background: #fff; border-color: #fff; color: var(--deep); }
.mk-cta2__btn.is-primary:hover { background: #e6effd; border-color: #e6effd; color: var(--deep); }
.mk-cta2__social { margin-top: 28px; }
.mk-cta2 .mk-social__ic { color: #fff; }
.mk-cta2 .mk-social__ic:hover { background: #fff; border-color: #fff; color: var(--deep); }

@media (max-width: 849px) {
	.mk-ab-story__text { padding-bottom: 36px !important; }
	.mk-ab-story__media .image-cover { padding-top: 70% !important; }
	.mk-head2 { margin-bottom: 36px; }
}
@media (max-width: 549px) {
	.mk-head2__lead { font-size: 16px; line-height: 26px; }
	.mk-ab-lead { font-size: 18px; line-height: 29px; }
	.mk-ab-first .section-content { padding-bottom: 56px; }
	.mk-ab-lead { padding-left: 16px; }
	.mk-ab-stats { margin-top: 48px !important; padding: 24px 4px 4px !important; border-radius: 16px; }
	.mk-ab-stats > .col { padding-bottom: 20px; }
	.mk-slogan2 { padding: 32px 22px 28px; border-radius: 16px; }
	.mk-slogan2__big { font-size: 13cqi; margin: 10px 0 20px !important; }
	.mk-slogan2__foot { flex-direction: column; align-items: flex-start; }
	.mk-slogan2__sign { white-space: normal; }
	.mk-item { grid-template-columns: 44px 1fr; gap: 0 14px; padding: 20px 0; }
	.mk-item--col { grid-template-columns: 1fr; padding: 24px 0 0; }
	.mk-item--col .mk-item__num { font-size: 36px; margin-bottom: 12px; }
	.mk-item__num { font-size: 26px; }
	html body .mk-item__title { font-size: 18px; line-height: 25px; }
	.mk-item__text { font-size: 15px; line-height: 24px; }
	.mk-card2__body { padding: 22px 20px 24px; }
	html body .mk-card2__title { font-size: 21px; line-height: 28px; }
	.mk-cta2 { padding: 44px 20px 36px; border-radius: 16px; }
	.mk-ab-photo .img-inner { border-radius: 14px; }
}

/* ==========================================================================
   DỊCH VỤ — accordion (cùng phong cách About: số Anton, đường kẻ mảnh)
   ========================================================================== */
.mk-acc { counter-reset: mk-acc; border-top: 1px solid var(--line); }
.mk-acc .accordion-item { border: 0; counter-increment: mk-acc; }
.mk-acc .accordion-title {
	position: relative; display: flex; align-items: center; gap: 22px; padding: 26px 56px 26px 4px;
	border: 0; border-bottom: 1px solid var(--line); background: none;
	font-family: var(--inter); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); transition: color .2s;
}
.mk-acc .accordion-title::before {
	content: counter(mk-acc, decimal-leading-zero); flex: 0 0 48px;
	font-family: "Anton", var(--sys); font-size: 28px; line-height: 1; font-weight: 400; color: var(--brand); letter-spacing: 0;
}
.mk-acc .accordion-title:hover, .mk-acc .accordion-title.active { color: var(--brand); background: none; border-color: var(--line); }
.mk-acc .accordion-title .toggle {
	left: auto; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; margin: 0;
	display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--deep);
	transition: background .2s, border-color .2s, color .2s;
}
/* Flatsome gán min-height/line-height cho mọi <button> → khoá cứng để nút luôn tròn */
.mk-acc .accordion-title .toggle { min-height: 0 !important; max-height: 36px; padding: 0 !important; line-height: 0 !important; box-sizing: border-box; flex: 0 0 auto; }
.mk-acc .accordion-title .toggle i { display: none; }
/* Nút mở/đóng = bàn chân mèo */
.mk-acc .accordion-title .toggle::before {
	content: ""; width: 18px; height: 18px; background: currentColor; transition: transform .35s ease;
	-webkit-mask: var(--mk-paw) center / contain no-repeat;
	mask: var(--mk-paw) center / contain no-repeat;
}
.mk-acc .accordion-title:hover .toggle { border-color: var(--deep); }
.mk-acc .accordion-title.active .toggle { background: var(--deep); border-color: var(--deep); color: #fff; }
.mk-acc .accordion-title.active .toggle::before { transform: rotate(-25deg) scale(1.08); }
.mk-acc .accordion-inner { padding: 28px 4px 36px 74px; border-bottom: 1px solid var(--line); }
.mk-svc { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 28px 40px; }
.mk-svc--3 { --n: 3; }
.mk-svc--4 { --n: 4; }
.mk-svc h3 { margin: 0 0 12px; font-family: var(--inter); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.mk-svc ul { list-style: none; margin: 0; }
.mk-svc li { position: relative; margin: 0 !important; padding: 7px 0 7px 18px; font-size: 15px; line-height: 22px; color: var(--ink); }
.mk-svc li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: #a9c3f4; }
@media (max-width: 849px) {
	.mk-svc, .mk-svc--3, .mk-svc--4 { --n: 2; }
	.mk-acc .accordion-inner { padding-left: 4px; }
}
@media (max-width: 549px) {
	.mk-svc, .mk-svc--3, .mk-svc--4 { --n: 1; }
	.mk-acc .accordion-title { gap: 14px; padding: 20px 48px 20px 0; font-size: 18px; line-height: 25px; }
	.mk-acc .accordion-title::before { flex-basis: 34px; font-size: 22px; }
	.mk-acc .accordion-title .toggle { width: 32px; height: 32px; max-height: 32px; right: 0; }
	.mk-acc .accordion-inner { padding: 20px 0 28px; }
}

/* ==========================================================================
   KHỐI LIÊN HỆ (UX Block "lien-he-form" — Dịch vụ + Liên hệ)
   ========================================================================== */
@media (min-width: 850px) { .mk-contact__info > .col-inner { padding-right: 32px; } }
.mk-contact .mk-head2 { margin-bottom: 32px; }
.mk-contact__photo { margin-bottom: 28px !important; }
.mk-contact__photo .img-inner { border-radius: 16px; }
@media (min-width: 850px) { .mk-contact__info > .col-inner > .mk-contact__list:first-child { margin-top: 8px; } }
.mk-contact__list { list-style: none; margin: 0; border-top: 1px solid var(--line); }
.mk-contact__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 !important; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mk-contact__list span { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-contact__list a { font-size: 17px; font-weight: 600; color: var(--deep); text-align: right; word-break: break-word; }
.mk-contact__list a:hover { color: var(--brand); }
.mk-contact__form > .col-inner { padding: 40px 40px 32px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.mk-form { max-width: none; margin: 0; }
@media (max-width: 849px) { .mk-contact__info { padding-bottom: 32px !important; } }
@media (max-width: 549px) {
	.mk-contact__form > .col-inner { padding: 26px 18px 20px; border-radius: 16px; }
	.mk-contact__list a { font-size: 15px; }
}

/* ==========================================================================
   CHÍNH SÁCH BẢO MẬT
   ========================================================================== */
.mk-prose { color: #000; font-size: 16px; line-height: 24px; }
.mk-prose .mk-lead { font-size: 16px; line-height: 24px; color: #000; margin: 0 0 24px; }
.mk-prose h2 { font-size: 16px; line-height: 22px; font-weight: 600; color: #000; margin: 28px 0 10px; }
.mk-prose p { margin: 0 0 10px; }
.mk-prose ul { list-style: none; margin: 0 0 10px; }
.mk-prose li { position: relative; margin: 0 0 6px !important; padding-left: 22px; }
.mk-prose li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* ==========================================================================
   TIN TỨC — bộ lọc dạng tab + lưới bài viết (cùng phong cách About/Dịch vụ)
   ========================================================================== */
.mk-blog { padding: 0 0 96px; }
.mk-blog__filter { display: flex; align-items: flex-end; gap: 16px 32px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.mk-blog__cats { order: 1; flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mk-blog__cats::-webkit-scrollbar { display: none; }
.mk-blog__cat {
	position: relative; flex-shrink: 0; min-height: 0; margin: 0; padding: 14px 11px 16px; line-height: 20px; border: 0; border-radius: 0; background: none;
	font-family: var(--inter); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); cursor: pointer; transition: color .2s;
}
.mk-blog__cat:first-child { padding-left: 0; }
.mk-blog__cat:hover { color: var(--ink); background: none; }
.mk-blog__cat.is-active { color: var(--deep); }
.mk-blog__cat.is-active::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); }
.mk-blog__cat.is-active:first-child::after { left: 0; }
.mk-blog__search { order: 2; position: relative; flex: 0 0 240px; margin: 0 0 10px; }
.mk-blog__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
body .mk-blog__search input {
	width: 100%; height: 44px; margin: 0; padding: 0 16px 0 40px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: none;
	font-family: var(--inter); font-size: 15px; color: var(--ink);
}
body .mk-blog__search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,110,231,.12); outline: 0; }
.mk-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; transition: opacity .2s; }
.mk-blog.is-loading .mk-blog__grid { opacity: .4; pointer-events: none; }
.mk-post__thumb { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: var(--tint); }
.mk-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mk-post:hover .mk-post__thumb img { transform: scale(1.04); }
.mk-post__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; }
.mk-post__date { display: flex; align-items: center; gap: 7px; }
.mk-post__d { font-family: "Anton", var(--sys); font-size: 21px; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.mk-post__my { padding-left: 7px; border-left: 1px solid #c8d9f8; font-size: 9px; line-height: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mk-post__my b { display: block; font-weight: 700; color: var(--deep); }
.mk-post__more { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--deep); }
.mk-post__more .mk-paw-btn { width: 36px; height: 36px; flex-basis: 36px; }
.mk-post__more .mk-paw-btn::before { width: 16px; height: 16px; }
.mk-post:hover .mk-post__more { color: var(--brand); }
.mk-post:hover .mk-post__more .mk-paw-btn { background: var(--deep); border-color: var(--deep); color: #fff; transform: translateX(3px); }
.mk-blog__empty { text-align: center; color: var(--muted); padding: 30px 0; }
.mk-blog__more { display: flex; justify-content: center; margin-top: 48px; }
.mk-blog__more-btn {
	min-height: 0; margin: 0; padding: 14px 32px; line-height: 20px; border: 0; border-radius: 12px; background: var(--deep); color: #fff;
	font-family: var(--inter); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background .2s;
}
.mk-blog__more-btn:hover { background: var(--brand); }
@media (max-width: 1279px) {
	.mk-blog__filter { flex-direction: column; align-items: stretch; border-bottom: 0; }
	.mk-blog__search { order: 0; flex: none; margin: 0; max-width: 360px; }
	.mk-blog__cats { border-bottom: 1px solid var(--line); }
}
@media (max-width: 849px) {
	.mk-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
	.mk-blog__filter { flex-direction: column; align-items: stretch; border-bottom: 0; }
	.mk-blog__search { order: 0; flex: none; margin: 0; max-width: none; }
	.mk-blog__cats { border-bottom: 1px solid var(--line); }
}
@media (max-width: 549px) {
	.mk-blog { padding-bottom: 56px; }
	.mk-blog__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.mk-blog__more-btn { width: 100%; }
}

/* ==========================================================================
   BÀI VIẾT (single.php)
   ========================================================================== */
/* Ảnh trái (đứng yên khi cuộn) + chữ phải; điện thoại: xếp chồng theo thứ tự tiêu đề → ảnh → nội dung → tư vấn */
.mk-single { max-width: 1398px; margin: 0 auto; padding: 56px 30px 96px; font-family: var(--inter); } /* cùng lề với nội dung các trang khác */
.mk-single__article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.mk-single__article.is-noimg { grid-template-columns: minmax(0, 760px); justify-content: center; }
.mk-single__media { position: sticky; top: 112px; }
.mk-single__thumb { overflow: hidden; border-radius: 20px; background: var(--tint); box-shadow: 0 24px 48px -32px rgba(15,42,92,.35); }
.mk-single__thumb img { display: block; width: 100%; height: auto; } /* ảnh banner vuông: hiện trọn, không cắt chữ */
.mk-single__head { padding-top: 8px; margin-bottom: 28px; }
.mk-single__cat { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--brand); }
.mk-single__cat::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .5; }
.mk-single__cat:hover { color: var(--deep); }
html body .mk-single__title {
	margin: 14px 0 20px; font-family: "Anton", var(--sys); font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.12;
	letter-spacing: .005em; text-transform: uppercase; color: var(--deep); text-wrap: balance;
}
.mk-single__content { margin-bottom: 32px; font-size: 17px; line-height: 1.8; color: #39404d; }
.mk-single__content p { margin-bottom: 22px; }
html body .mk-single__content h2, html body .mk-single__content h3 { font-family: var(--inter); font-style: normal; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 36px 0 14px; letter-spacing: -.01em; }
.mk-single__content h2 { font-size: 24px; }
.mk-single__content h3 { font-size: 20px; }
.mk-single__content > :first-child { margin-top: 0; }
.mk-single__content > :last-child { margin-bottom: 0; }
.mk-single__content blockquote { margin: 32px 0; padding: 20px 24px; border: 0; border-left: 3px solid var(--brand); border-radius: 0 14px 14px 0; background: var(--tint); font-size: 18px; line-height: 1.6; font-style: normal; font-weight: 600; color: var(--deep); }
.mk-single__content blockquote p { margin: 0; font-style: normal; }
.mk-single__content ul, .mk-single__content ol { margin: 0 0 24px; }
.mk-single__content li { margin-bottom: 10px; line-height: 1.7; }
.mk-single__content ol { counter-reset: mk-step; }
.mk-single__content ol li { list-style: none; position: relative; margin-left: 0; padding-left: 42px; counter-increment: mk-step; }
.mk-single__content ol li::before {
	content: counter(mk-step); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; background: #e6effd; color: var(--brand); font-size: 14px; font-weight: 700; line-height: 1;
}
.mk-single__content li strong { color: var(--deep); }
.mk-single__content ul li { list-style: none; position: relative; padding-left: 20px; margin-left: 0; }
.mk-single__content ul li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: #a9c3f4; }
.mk-single__content img { height: auto; border-radius: 14px; }
.mk-single__content .gallery { margin: 28px 0; }
.mk-single__cta { padding: 28px 28px 30px; border-radius: 20px; background: var(--tint); }
.mk-single__cta p { margin: 0; }
.mk-single__cta-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; font-size: 13px; font-weight: 600; color: var(--brand); }
.mk-single__cta-label::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--mk-paw) center / contain no-repeat; mask: var(--mk-paw) center / contain no-repeat; }
.mk-single__cta-text { font-size: 16px; line-height: 26px; color: #39404d; text-wrap: pretty; }
.mk-single__cta-text strong { color: var(--deep); }
.mk-single__cta-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mk-single__btn {
	display: inline-flex; align-items: center; padding: 12px 20px; border: 1px solid #c8d9f8; border-radius: 12px; background: #fff;
	font-size: 15px; line-height: 20px; font-weight: 600; color: var(--deep); transition: background .2s, border-color .2s, color .2s;
}
.mk-single__btn:hover { border-color: var(--deep); color: var(--deep); }
.mk-single__btn.is-primary { background: var(--deep); border-color: var(--deep); color: #fff; }
.mk-single__btn.is-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.mk-single__foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.mk-single__foot a { color: var(--brand); font-weight: 600; }
.mk-single__related { margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--line); }
.mk-single__related-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
html body .mk-single__related-title { margin: 0; font-family: "Anton", var(--sys); font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; text-transform: uppercase; color: var(--deep); }
/* Bài dài một cột (chi tiết dịch vụ Meoketing Network) */
.mk-single--column .mk-single__article { display: block; max-width: 820px; margin: 0 auto; }
.mk-single--column .mk-single__head { text-align: left; }
.mk-single--column .mk-single__thumb { margin: 0 0 36px; }
.mk-single--column .mk-single__content img { display: block; width: 100%; height: auto; margin: 32px 0; border-radius: 16px; }
.mk-single--column .mk-single__content h3 { margin-top: 40px; }
.mk-single--column .mk-single__related { max-width: none; }
.mk-work-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 !important; margin: 0 !important; }
@media (max-width: 849px) {
	.mk-single { padding-bottom: 64px; }
	.mk-single { padding-top: 28px; }
	.mk-single__article { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.mk-single__body { display: contents; }
	.mk-single__head { order: 1; padding-top: 0; margin-bottom: 24px; }
	.mk-single__media { order: 2; position: static; margin-bottom: 28px; }
	.mk-single__content { order: 3; }
	.mk-single__cta { order: 4; }
	.mk-single__foot { order: 5; }
	.mk-single__related { margin-top: 64px; padding-top: 32px; }
}
@media (max-width: 549px) {
	.mk-single { padding-left: 15px; padding-right: 15px; }
	.mk-single__thumb { border-radius: 16px; }
	.mk-single__cta { padding: 22px 18px 24px; border-radius: 16px; }
	.mk-single__btn { flex: 1 1 auto; justify-content: center; }
	.mk-single__content { font-size: 16px; }
}

/* ==========================================================================
   CHI TIẾT DỰ ÁN (single-work.php)
   ========================================================================== */
.mk-work-single__bar {
	display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 20px 40px;
	border-bottom: 1px solid var(--line); font-family: var(--inter);
}
.mk-work-single__back { display: inline-flex; align-items: center; gap: 12px; width: fit-content; font-size: 15px; font-weight: 600; color: var(--deep); }
.mk-paw-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px;
	border: 1px solid var(--line); border-radius: 50%; color: var(--deep); transition: background .2s, border-color .2s, color .2s, transform .25s;
}
.mk-paw-btn::before {
	content: ""; width: 18px; height: 18px; background: currentColor; transform: rotate(-90deg); /* ngón chân chỉ sang trái */
	-webkit-mask: var(--mk-paw) center / contain no-repeat; mask: var(--mk-paw) center / contain no-repeat;
}
.mk-paw-btn--next::before { transform: rotate(90deg); } /* ngón chân chỉ sang phải */
.mk-work-single__back:hover { color: var(--brand); }
.mk-work-single__back:hover .mk-paw-btn { background: var(--deep); border-color: var(--deep); color: #fff; transform: translateX(-3px); }
html body .mk-work-single__title { margin: 0; text-align: center; font-family: "Anton", var(--sys); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; color: var(--deep); }
.mk-work-single__body { max-width: 1400px; margin: 60px auto; padding: 0 40px; display: flex; flex-direction: column; gap: 60px; }
.mk-work-single__content { font-family: var(--inter); font-size: 18px; line-height: 1.8; color: #333; }
.mk-work-single__content p { margin-bottom: 12px; }
.mk-work-single__content img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.06); margin: 30px 0; }
.mk-work-single__thumb img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,.08); }
@media (max-width: 849px) {
	.mk-work-single__bar { padding: 14px 16px; grid-template-columns: 1fr auto 1fr; gap: 10px; }
	.mk-work-single__back { font-size: 13px; gap: 8px; white-space: nowrap; }
	.mk-paw-btn { width: 36px; height: 36px; flex-basis: 36px; }
	.mk-work-single__body { margin: 30px auto; padding: 0 16px; gap: 30px; }
	.mk-work-single__content { font-size: 16px; line-height: 1.7; }
}

/* ==========================================================================
   FLUENT FORMS (tông tím thương hiệu)
   ========================================================================== */
.fluentform-wrapper,
.fluentform,
.ff-form-container {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Form row elements spacing */
.fluentform-wrapper .ff-el-group,
.fluentform .ff-el-group {
  margin-bottom: 35px !important;
  position: relative !important;
}

/* Labels: clean, bold, uppercase, small */
.fluentform-wrapper .ff-el-input-label,
.fluentform-wrapper .ff-el-input-label label,
.fluentform .ff-el-input-label,
.fluentform .ff-el-input-label label {
  font-family: var(--inter) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
  transition: color 0.3s ease !important;
}

/* Input Fields: Transparent, borderless (except bottom), elegant */
body .fluentform-wrapper .ff-el-form-control,
body .fluentform .ff-el-form-control {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #C5C5C5 !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  font-family: var(--inter) !important;
  font-size: 16px !important;
  color: #111111 !important;
  width: 100% !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), padding-left 0.3s ease !important;
}

/* Hover & Focus state */
body .fluentform-wrapper .ff-el-form-control:hover,
body .fluentform .ff-el-form-control:hover {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom-color: #777777 !important;
}

body .fluentform-wrapper .ff-el-form-control:focus,
body .fluentform .ff-el-form-control:focus {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom-color: #2f6ee7 !important;
  /* Premium Ogilvy Red focus accent */
  outline: none !important;
  box-shadow: none !important;
}

/* Specific Select Dropdown override to strip default browser borders & styles */
body .fluentform-wrapper select.ff-el-form-control,
body .fluentform select.ff-el-form-control,
body .fluentform-wrapper select,
body .fluentform select {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #C5C5C5 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  /* Custom elegant minimal down arrow */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  padding-right: 30px !important;
  cursor: pointer !important;
}

body .fluentform-wrapper select.ff-el-form-control:focus,
body .fluentform select.ff-el-form-control:focus {
  border-bottom-color: #2f6ee7 !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e2e91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* Choices.js Dropdown Custom overrides */
body .fluentform-wrapper .choices,
body .fluentform .choices {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

body .fluentform-wrapper .choices__inner,
body .fluentform .choices__inner {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #C5C5C5 !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  min-height: auto !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

body .fluentform-wrapper .choices:hover .choices__inner,
body .fluentform .choices:hover .choices__inner {
  border-bottom-color: #777777 !important;
}

body .fluentform-wrapper .choices.is-focused .choices__inner,
body .fluentform .choices.is-focused .choices__inner,
body .fluentform-wrapper .choices.is-open .choices__inner,
body .fluentform .choices.is-open .choices__inner {
  border-bottom-color: #2f6ee7 !important;
  /* Brand Red focus */
}

/* Choices list (the dropdown menu list itself) */
body .fluentform-wrapper .choices__list--dropdown,
body .fluentform .choices__list--dropdown {
  border: 1px solid #eaeaea !important;
  border-top: none !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
}

body .fluentform-wrapper .choices__list--dropdown .choices__item--selectable.is-highlighted,
body .fluentform .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #2f6ee7 !important;
  /* Red hover item in menu */
  color: #ffffff !important;
}

/* Choices.js Placeholder styling - making it italic to match input placeholders */
body .fluentform-wrapper .choices__placeholder,
body .fluentform .choices__placeholder,
body .fluentform-wrapper .choices__inner .choices__item.choices__placeholder,
body .fluentform .choices__inner .choices__item.choices__placeholder {
  font-style: italic !important;
  color: #9C9C9C !important;
  opacity: 1 !important;
}

/* Align Choices.js selected item text perfectly to the left edge of the border line */
body .fluentform-wrapper .choices,
body .fluentform .choices,
body .fluentform-wrapper .choices__inner,
body .fluentform .choices__inner,
body .fluentform-wrapper .choices__list,
body .fluentform .choices__list,
body .fluentform-wrapper .choices__list--single,
body .fluentform .choices__list--single,
body .fluentform-wrapper .choices__inner .choices__item,
body .fluentform .choices__inner .choices__item,
body .fluentform-wrapper .choices__inner .choices__placeholder,
body .fluentform .choices__inner .choices__placeholder {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Highlight label on focus */
.fluentform-wrapper .ff-el-group:focus-within .ff-el-input-label label,
.fluentform-wrapper .ff-el-group:focus-within .ff-el-input-label,
.fluentform .ff-el-group:focus-within .ff-el-input-label label,
.fluentform .ff-el-group:focus-within .ff-el-input-label {
  color: #2f6ee7 !important;
}

/* Textarea height and padding adjustments */
.fluentform-wrapper textarea.ff-el-form-control,
.fluentform textarea.ff-el-form-control {
  min-height: 120px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

/* Placeholder styling */
.fluentform-wrapper ::placeholder,
.fluentform ::placeholder {
  color: #9C9C9C !important;
  font-size: 15px !important;
  opacity: 1 !important;
  font-style: italic !important;
}

/* Custom Red Submit Button matching Ogilvy Identity */
.fluentform-wrapper button.ff-btn-submit,
.fluentform button.ff-btn-submit {
  background-color: #2f6ee7 !important;
  /* Brand Red */
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 42px !important;
  font-family: var(--inter) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  display: inline-block !important;
  width: fit-content !important;
  box-shadow: 0 4px 14px rgba(15,42,92, 0.18) !important;
  transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important;
}

/* Button Hover State */
.fluentform-wrapper button.ff-btn-submit:hover,
.fluentform button.ff-btn-submit:hover {
  background-color: #0f2a5c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Button Active Press State */
.fluentform-wrapper button.ff-btn-submit:active,
.fluentform button.ff-btn-submit:active {
  transform: translateY(0) !important;
}

/* Premium Minimalist Checkbox & Radio Buttons */
body .fluentform-wrapper .ff-el-form-check,
body .fluentform .ff-el-form-check {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
}

/* Custom Styled Checkbox Input */
body .fluentform-wrapper .ff-el-form-check input[type="checkbox"],
body .fluentform .ff-el-form-check input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid #C5C5C5 !important;
  border-radius: 0 !important;
  /* Sharp corners */
  background: transparent !important;
  position: relative !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 3px 0 0 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

body .fluentform-wrapper .ff-el-form-check input[type="checkbox"]:hover,
body .fluentform .ff-el-form-check input[type="checkbox"]:hover {
  border-color: #111111 !important;
}

/* Checked State - Vibrant Brand Red */
body .fluentform-wrapper .ff-el-form-check input[type="checkbox"]:checked,
body .fluentform .ff-el-form-check input[type="checkbox"]:checked {
  background-color: #2f6ee7 !important;
  border-color: #2f6ee7 !important;
}

/* Inside white checkmark tick */
body .fluentform-wrapper .ff-el-form-check input[type="checkbox"]:checked::after,
body .fluentform .ff-el-form-check input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  display: block !important;
}

/* Label text formatting */
body .fluentform-wrapper .ff-el-form-check .ff-el-form-check-label,
body .fluentform .ff-el-form-check .ff-el-form-check-label {
  font-family: var(--inter) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 0.25s ease !important;
}

body .fluentform-wrapper .ff-el-form-check:hover .ff-el-form-check-label,
body .fluentform .ff-el-form-check:hover .ff-el-form-check-label {
  color: #111111 !important;
}

/* Style links inside label (Terms and Conditions / Privacy Policy) */
body .fluentform-wrapper .ff-el-form-check .ff-el-form-check-label a,
body .fluentform .ff-el-form-check .ff-el-form-check-label a {
  color: #111111 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #111111 !important;
  transition: color 0.25s ease, border-color 0.25s ease !important;
}

body .fluentform-wrapper .ff-el-form-check .ff-el-form-check-label a:hover,
body .fluentform .ff-el-form-check .ff-el-form-check-label a:hover {
  color: #2f6ee7 !important;
  border-bottom-color: #2f6ee7 !important;
}

/* Validation and Error Messages styling */
.fluentform-wrapper .error,
.fluentform-wrapper .text-danger,
.fluentform-wrapper .ff-errors-in-stack,
.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-errors-in-stack {
  color: #2f6ee7 !important;
  font-family: var(--inter) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 5px !important;
  list-style-type: none !important;
  padding-left: 0 !important;
}

body .fluentform-wrapper .ff-el-is-error .ff-el-form-control,
body .fluentform .ff-el-is-error .ff-el-form-control {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom-color: #2f6ee7 !important;
}

/* Success Message container */
.fluentform-success,
.ff-message-success {
  background-color: #ffffff !important;
  border-left: 4px solid #2f6ee7 !important;
  padding: 20px !important;
  font-family: var(--inter) !important;
  font-size: 15px !important;
  color: #111111 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  margin-top: 20px !important;
}
/* ==========================================================================
   HIỆU ỨNG KHI CUỘN — chỉ bật khi assets/reveal (inline) thêm class mk-rv vào <html>;
   tắt khi người dùng chọn giảm chuyển động và trong khung UX Builder.
   ========================================================================== */
html.mk-rv .mk-rv-i { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0ms); }
html.mk-rv .mk-rv-i.is-in { opacity: 1; transform: none; }
/* Mũi tên 3 bước: thân dọc mọc xuống → thanh ngang toả 2 bên → mũi tên + từng cột hiện lần lượt */
html.mk-rv .mk-ab-steps::before { transform: scaleY(0); transform-origin: top; transition: transform .5s ease; }
html.mk-rv .mk-ab-steps::after { transform: scaleX(0); transition: transform .6s cubic-bezier(.4,0,.2,1) .45s; }
html.mk-rv .mk-ab-steps.is-in::before, html.mk-rv .mk-ab-steps.is-in::after { transform: none; }
@media (min-width: 550px) {
	html.mk-rv .mk-ab-steps > .col { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
	html.mk-rv .mk-ab-steps > .col:nth-child(1) { transition-delay: .95s; }
	html.mk-rv .mk-ab-steps > .col:nth-child(2) { transition-delay: 1.1s; }
	html.mk-rv .mk-ab-steps > .col:nth-child(3) { transition-delay: 1.25s; }
	html.mk-rv .mk-ab-steps.is-in > .col { opacity: 1; transform: none; }
}