/* ==========================================================================
   Sửa Laptop — giao diện element UX Builder trên nền Flatsome
   Breakpoint thiết kế: ≥1100 desktop · 640–1099 tablet · <640 điện thoại (kiểu app).
   Lưới Row/Col của Flatsome đổi cột ở 850 / 550.
   ========================================================================== */

:root {
	--slt-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--slt-navy: #0a2a78;
	--slt-navy-2: #061c55;
	--slt-blue: #1559d6;
	--slt-cta: #0f4cc4;
	--slt-cta-h: #0b3a99;
	--slt-link: #0d43b0;
	--slt-yellow: #ffc20e;
	--slt-orange: #f8901a;
	--slt-orange-ink: #e65a0b;
	--slt-orange-deep: #c2410c;
	--slt-text: #24304a;
	--slt-text-2: #46506a;
	--slt-muted: #56607a;
	--slt-bg: #f5f8fd;
	--slt-soft: #eaf0f8;
	--slt-tint: #e6eefc;
	--slt-img: #eef3fb;
	--slt-line: #e4eaf4;
	--slt-line-2: #dde4f0;
	--slt-dash: #dbe3f0;
	--slt-foot: #dbe4f2;
	--slt-pad: clamp(16px, 3.5vw, 56px);
	--slt-gap: clamp(48px, 6vw, 80px);
	--slt-shadow: 0 14px 36px -24px rgba(10, 42, 120, .35);
	--slt-shadow-h: 0 26px 54px -28px rgba(10, 42, 120, .5);
	--slt-orb-grad: radial-gradient(circle at 30% 25%, #4d8dff 0%, #1559d6 45%, #0a2a78 100%);
	--slt-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Màu bổ sung (gom từ giá trị viết cứng lặp lại; xem docs/design-system.md). */
	--slt-ink: #1b1f27;
	--slt-on-dark: #c9d6f2;
	--slt-deco: #d5e0f2;
	--slt-deco-2: #b9cbeb;
	--slt-dot: #c3d1ea;

	/* Bo góc: thang 4px theo cỡ thành phần (nút/ô nhỏ → khung lớn); vòng tròn dùng 50%. */
	--slt-r-xs: 8px;
	--slt-r-sm: 12px;
	--slt-r-md: 16px;
	--slt-r-lg: 20px;
	--slt-r-xl: 24px;
	--slt-r-2xl: 28px;
	--slt-r-pill: 999px;

	/* Độ nổi: bóng xanh navy cùng một màu, khác nhau ở độ cao; glow = bóng màu thương hiệu cho nút, chấm nhấn. */
	--slt-shadow-sm: 0 6px 16px -10px rgba(10, 42, 120, .4);
	--slt-shadow-bar: 0 12px 32px -14px rgba(10, 42, 120, .3);
	--slt-shadow-float: 0 18px 40px -18px rgba(10, 42, 120, .4);
	--slt-shadow-lg: 0 30px 60px -30px rgba(10, 42, 120, .5);
	--slt-shadow-navy: 0 24px 50px -28px rgba(10, 42, 120, .8);
	--slt-shadow-pop: 0 0 0 1px rgba(15, 76, 196, .07), 0 32px 64px -28px rgba(10, 42, 120, .45);
	--slt-glow: 0 12px 28px -12px rgba(21, 89, 214, .7);
	--slt-glow-sm: 0 8px 18px -8px rgba(21, 89, 214, .7);
	--slt-glow-lg: 0 24px 50px -28px rgba(21, 89, 214, .8);

	/* Chuyển động. */
	/* Cỡ chữ: bậc 1–13 cố định (11 → 30px) cho chữ thường, nhãn, tiêu đề thẻ; h1–h5 co giãn theo bề rộng cho tiêu đề trang và khối. */
	--slt-fs-1: 11px; --slt-fs-2: 12px; --slt-fs-3: 13px; --slt-fs-4: 14px; --slt-fs-5: 15px; --slt-fs-6: 16px; --slt-fs-7: 17px;
	--slt-fs-8: 18px; --slt-fs-9: 20px; --slt-fs-10: 22px; --slt-fs-11: 24px; --slt-fs-12: 26px; --slt-fs-13: 30px;
	--slt-fs-h1: clamp(32px, 3.6vw, 50px); --slt-fs-h1-post: clamp(30px, 3.2vw, 46px);
	--slt-fs-h2: clamp(28px, 3.2vw, 40px); --slt-fs-h2-sm: clamp(26px, 3vw, 36px);
	--slt-fs-h3: clamp(24px, 2.3vw, 34px); --slt-fs-h4: clamp(22px, 2vw, 28px); --slt-fs-h5: clamp(19px, 2vw, 24px);
	/* Tiêu đề trang chủ trên điện thoại: tối thiểu 18.7px (14pt đậm) để vẫn tính là chữ lớn theo WCAG. */
	--slt-fs-h1-m: clamp(18.7px, 5.1vw, 22px);
	--slt-dur: .2s;
	--slt-dur-slow: .25s;
	--slt-dur-reveal: .7s;
	--slt-ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Nền trang & chữ ---------- */
html { scroll-behavior: smooth; }
body.slt, .slt #wrapper, .slt #main { background-color: var(--slt-bg); }
body.slt { color: var(--slt-ink); font-family: var(--slt-font); -webkit-font-smoothing: antialiased; }
.slt :focus-visible { outline: 3px solid var(--slt-blue); outline-offset: 2px; }
/* Flatsome xoá outline của link trong header / ngăn kéo: đặt lại khung báo đang chọn khi dùng bàn phím (WCAG 2.4.7). */
.slt #masthead a:focus-visible, .slt #masthead button:focus-visible, .slt .mobile-sidebar a:focus-visible, .slt .mobile-sidebar button:focus-visible, .slt .slt-bar a:focus-visible { outline: 3px solid var(--slt-blue); outline-offset: 2px; }
/* Menu xổ mở khi phím Tab tới mục cha hoặc link bên trong (Flatsome chỉ mở bằng rê chuột) — không thì link dịch vụ không tới được bằng bàn phím (WCAG 2.1.1). */
.slt #masthead .header-nav-main > li.has-dropdown:has(:focus-visible) > .nav-dropdown { left: -15px; max-height: inherit; visibility: visible; opacity: 1; }
.slt-accent { color: var(--slt-blue); }
.slt-icon { display: block; flex: none; }

/* ---------- Khung Section / Row của Flatsome ---------- */
.slt .section.slt-sec { padding: var(--slt-gap) 0 0 !important; }
.slt .section.slt-sec-hero { padding: 0 0 clamp(20px, 3vw, 32px) !important; background: linear-gradient(180deg, #FFFFFF 0%, var(--slt-bg) 100%); overflow: hidden; }
.slt .section.slt-footer { margin-top: var(--slt-gap); padding: 0 !important; background-color: var(--slt-foot); color: var(--slt-text-2); }
.slt [class*="slt-sec"] .section-content > .row,
.slt .slt-footer .section-content > .row {
	--g: 30px;
	max-width: calc(1520px + 2 * var(--slt-pad));
	padding-left: calc(var(--slt-pad) - var(--g) / 2);
	padding-right: calc(var(--slt-pad) - var(--g) / 2);
}
/* !important vì rule đặt --g: 30px cho mọi .row trong section có độ đặc hiệu cao hơn. */
.slt .row.slt-g12 { --g: 12px !important; }
.slt .row.slt-g18 { --g: 18px !important; }
.slt .row.slt-g24 { --g: 24px !important; }
.slt .row.slt-g12 > .col, .slt .row.slt-g18 > .col, .slt .row.slt-g24 > .col { padding: 0 calc(var(--g) / 2) var(--g); }
.slt [class*="slt-sec"] .section-content > .row:last-child { margin-bottom: calc(var(--g) * -1); }
.slt .row.slt-stretch > .col > .col-inner, .slt .row.slt-stretch > .col > .col-inner > * { height: 100%; }
.slt .row.slt-center { align-items: center; }
.slt .row > .col:has(> .col-inner > .slt-heading:only-child) { padding-bottom: 0; }
.slt .slt-heading[id], .slt [id].slt-rail, .slt [id].slt-prices { scroll-margin-top: 100px; }
.slt .slt-p { margin: 0 0 18px; font-size: var(--slt-fs-6); line-height: 1.7; color: var(--slt-text-2); text-wrap: pretty; }

/* ---------- Ô giữ chỗ ảnh ---------- */
.slt-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; padding: 12px; background: repeating-linear-gradient(135deg, var(--slt-line) 0 12px, var(--slt-img) 12px 24px); color: var(--slt-muted); font-size: var(--slt-fs-3); text-align: center; }

/* ---------- Vòng icon gradient ---------- */
.slt-orb { position: relative; z-index: 1; display: block; width: var(--orb, var(--orb-base, 56px)); height: var(--orb, var(--orb-base, 56px)); flex: none; padding: 4px; border-radius: 50%; background: #fff; box-shadow: var(--slt-glow-sm); }
.slt-orb__in { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--slt-orb-grad); color: #fff; box-shadow: inset 0 2px 4px rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(5, 20, 70, .35); }
.slt-orb__in .slt-icon { filter: drop-shadow(0 2px 3px rgba(5, 20, 70, .4)); }
.slt-orb__dot { position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--slt-yellow); box-shadow: 0 2px 6px rgba(255, 160, 0, .5); }

/* ---------- Nút ---------- */
.slt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 50px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--slt-r-pill); font: 700 var(--slt-fs-5)/1 var(--slt-font); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--slt-dur), color var(--slt-dur), border-color var(--slt-dur), box-shadow var(--slt-dur); }
.slt-btn:hover { text-decoration: none; }
.slt-btn--sm { height: 46px; padding: 0 20px; }
.slt-btn__zalo { display: block; flex: none; width: 22px; height: 22px; margin-right: -2px; }
.slt-btn--md { height: 54px; padding: 0 28px; font-size: var(--slt-fs-6); }
.slt-btn--lg { height: 56px; padding: 0 28px; font-size: var(--slt-fs-8); gap: 16px; }
.slt-btn--ring { padding-right: 8px; gap: 14px; }
.slt-btn--lg.slt-btn--ring { padding-left: 30px; }
.slt-btn__ring { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: #fff; }
.slt-btn--md .slt-btn__ring { width: 36px; height: 36px; }
.slt-btn--lg .slt-btn__ring { width: 40px; height: 40px; }
.slt-btn--primary { background: var(--slt-cta); color: #fff; }
.slt-btn--primary:hover, .slt-btn--primary:focus-visible { background: var(--slt-cta-h); color: #fff; }
.slt-btn--glow { box-shadow: var(--slt-glow); }
.slt-btn--outline { border-color: var(--slt-navy); background: rgba(255, 255, 255, .9); color: var(--slt-navy); }
.slt-btn--outline:hover, .slt-btn--outline:focus-visible { background: var(--slt-tint); border-color: var(--slt-blue); color: var(--slt-navy); }
.slt-btn--outline .slt-btn__ring { background: var(--slt-navy); }
.slt-btn--dark { background: var(--slt-navy); color: #fff; }
.slt-btn--dark:hover, .slt-btn--dark:focus-visible { background: var(--slt-navy-2); color: #fff; }
.slt-btn--soft { background: var(--slt-tint); color: var(--slt-link); }
.slt-btn--soft:hover { background: var(--slt-cta); color: #fff; }
.slt-btn--ghost-light { border-color: rgba(255, 255, 255, .7); background: transparent; color: #fff; padding: 0 22px; }
.slt-btn--ghost-light:hover, .slt-btn--ghost-light:focus-visible { background: #fff; color: var(--slt-link); }
.slt-btn--block { display: flex; width: 100%; }
.slt-btn-wrap { display: flex; margin: 8px 0 0; }
.slt-rail + .slt-btn-wrap { margin-top: 32px; }
.slt-btn-wrap--center { justify-content: center; }
.slt-ring { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--slt-blue); color: #fff; box-shadow: var(--slt-glow-sm); }

/* ---------- Tiêu đề khối ---------- */
.slt-heading { display: flex; flex-direction: column; gap: 16px; }
.slt-heading--center { align-items: center; text-align: center; }
.slt-heading--center .slt-heading__main { align-items: center; max-width: 680px; }
.slt-heading--split { flex-direction: row; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: flex-end; }
.slt-heading__main { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.slt-heading__text { margin: 6px 0 0; font-size: var(--slt-fs-5); line-height: 1.65; color: var(--slt-muted); text-wrap: pretty; }
.slt-heading--mb-none { margin-bottom: 0; }
.slt-heading--mb-sm { margin-bottom: 22px; }
.slt-heading--mb-md { margin-bottom: 40px; }
.slt-heading--mb-lg { margin-bottom: clamp(36px, 4vw, 48px); }
.slt-eyebrow { font-size: var(--slt-fs-3); font-weight: 700; letter-spacing: .1em; color: var(--slt-link); text-transform: uppercase; line-height: 1.4; }
.slt .slt-title { margin: 0; padding: 0; font-family: var(--slt-font); font-weight: 800; letter-spacing: -.02em; color: var(--slt-navy); text-wrap: balance; }
.slt .slt-title--lg { font-size: var(--slt-fs-h2); line-height: 1.15; }
.slt .slt-title--md { font-size: var(--slt-fs-h2); line-height: 1.2; }
.slt .slt-title--sm { font-size: var(--slt-fs-h2-sm); line-height: 1.2; }
.slt-ybar { display: block; width: 56px; height: 4px; margin-top: 6px; border-radius: var(--slt-r-pill); background: var(--slt-yellow); }

/* ---------- Hero ---------- */
/* Cao bằng ảnh nền 1831×859 (46.9% bề rộng) cộng 48px ảnh được hạ xuống dưới header: hiện đủ ảnh, không cắt mất bàn và laptop. */
.slt-hero { position: relative; display: flex; align-items: center; min-height: max(calc(46.9vw + 48px), 600px); }
.slt-hero__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.slt-hero__media img, .slt-hero__media .slt-ph { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Ảnh nền có đầu người sát mép trên mà header nổi đè khoảng 92px đầu trang: hạ ảnh chính xuống, dải trống lót bằng bản mờ của chính ảnh
   (tự khớp màu khi đổi ảnh), mép trên ảnh chính làm mềm để hai lớp liền nhau. z-index âm: nằm dưới ảnh chính và dưới lớp phủ. */
.slt-hero__media .slt-hero__fill { position: absolute; inset: 0; z-index: -1; object-position: 50% 0; filter: blur(16px); transform: scale(1.08); }
@media (min-width: 640px) {
	.slt-hero__media .slt-hero__img { margin-top: 48px; height: calc(100% - 48px); object-position: 50% 0; -webkit-mask-image: linear-gradient(transparent, #000 32px); mask-image: linear-gradient(transparent, #000 32px); }
}
/* z-index 1: ảnh chính có mask-image nên tự tạo lớp vẽ riêng, không đặt thì ảnh đè lên dải mờ đáy. */
.slt-hero__media::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none; }
.slt-hero__media::after { bottom: -1px; height: 26%; background: linear-gradient(0deg, var(--slt-bg) 0%, rgba(243, 247, 253, .7) 35%, rgba(243, 247, 253, 0) 100%); }
.slt-hero__body { position: relative; z-index: 2; width: 100%; max-width: calc(1520px + 2 * var(--slt-pad)); margin: 0 auto; padding: clamp(130px, 11vw, 156px) var(--slt-pad) clamp(80px, 8vw, 120px); }
.slt-hero__inner { max-width: 600px; }
.slt-hero__copy { display: flex; flex-direction: column; gap: 16px; }
.slt-hero__stats, .slt-hero__mtext, .slt-hero__tm { display: none; }
.slt-hero__tl, .slt-hero__ln { display: block; }
.slt .slt-hero__title { margin: 0; padding: 0; font-family: var(--slt-font); font-size: var(--slt-fs-h1); line-height: 1.1; font-weight: 800; font-style: italic; letter-spacing: -.02em; color: var(--slt-navy); text-wrap: balance; }
/* Dòng nhấn cam chuyển cam đậm từ trên xuống. Cam thương hiệu (--slt-orange) trên nền sáng chỉ đạt ~2.3:1, dưới ngưỡng 3:1 của chữ lớn,
   nên dải màu bắt đầu từ cam đậm hơn. color giữ màu đầu dải làm dự phòng khi trình duyệt không hỗ trợ background-clip: text;
   padding phải: chữ nghiêng tràn khỏi hộp, thiếu thì nét cuối bị cắt mất màu. */
.slt .slt-hero__title .slt-accent { padding-right: .02em; color: var(--slt-orange-ink); background: linear-gradient(180deg, var(--slt-orange-ink) 25%, var(--slt-orange-deep) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* <em> trong tiêu đề: gạch chân bằng nét cọ cam, không đổi kiểu chữ. */
/* em có position nên được vẽ ở lớp riêng, ngoài vùng background-clip của dòng nhấn: tự tô lại cùng dải màu, không thì chữ trong suốt. */
.slt .slt-hero__title em { position: relative; padding-right: .1em; font-style: inherit; background: linear-gradient(180deg, var(--slt-orange-ink) 25%, var(--slt-orange-deep) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.slt .slt-hero__title em::after { content: ''; position: absolute; left: -.02em; right: -.06em; bottom: -.14em; height: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 11C30 4 66 2 98 3c1.5 0 1.5 2.4 0 2.5C70 7 36 9.5 4 13.4c-2.2.3-3.4-2.1-2-2.4z' fill='%23f8901a'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.slt-hero__text { margin: 0; max-width: min(480px, 36vw); font-size: var(--slt-fs-6); font-weight: 500; line-height: 1.6; color: var(--slt-text-2); text-wrap: pretty; }
.slt-hero__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.slt-hero .slt-btn--outline { justify-content: space-between; gap: 18px; padding-right: 8px; }

/* ---------- Thẻ dịch vụ ---------- */
.slt-svc { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 0 0 18px; overflow: hidden; border: 1px solid var(--slt-line); border-radius: var(--slt-r-md); background: #fff; text-decoration: none; box-shadow: var(--slt-shadow); transition: transform var(--slt-dur), box-shadow var(--slt-dur); }
.slt-svc:hover { transform: translateY(-4px); box-shadow: var(--slt-shadow-h); text-decoration: none; }
.slt-svc__media { display: block; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; background: var(--slt-line); }
.slt-svc__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Icon 3D thay vòng gradient: đĩa trắng gối lên mép ảnh, cùng vị trí và cỡ ngoài với vòng cũ. */
.slt-svc__badge { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-top: -36px; border-radius: 50%; background: #fff; box-shadow: var(--slt-glow), 0 0 0 6px rgba(255, 255, 255, .55); transition: transform var(--slt-dur); }
.slt-svc__badge .slt-icon3d { display: block; width: 52px; height: 52px; }
.slt-svc:hover .slt-svc__badge { transform: scale(1.06); }
.slt-svc .slt-orb { margin-top: -30px; box-shadow: var(--slt-glow), 0 0 0 6px rgba(255, 255, 255, .55); }
.slt-svc__name { display: flex; align-items: center; min-height: 2.7em; margin-top: 14px; padding: 0 10px; font-size: var(--slt-fs-5); font-weight: 800; line-height: 1.35; color: var(--slt-link); text-align: center; text-transform: uppercase; text-wrap: balance; }

/* ---------- Ảnh kèm huy hiệu + đặc điểm ---------- */
.slt-imgbadge { position: relative; padding-bottom: 28px; }
.slt-imgbadge__media { aspect-ratio: 4 / 3; border-radius: var(--slt-r-lg); overflow: hidden; }
.slt-imgbadge__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slt-imgbadge__badge { position: absolute; right: clamp(12px, 3vw, 28px); bottom: 0; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--slt-r-md); background: #fff; color: var(--slt-blue); box-shadow: var(--slt-shadow-float); }
.slt-imgbadge__badge > span { display: flex; flex-direction: column; line-height: 1.25; }
.slt-imgbadge__badge strong { font-size: var(--slt-fs-13); font-weight: 800; color: var(--slt-navy); }
.slt-imgbadge__badge > span > span { font-size: var(--slt-fs-3); color: var(--slt-muted); }
.slt .slt-features { list-style: none; margin: 4px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.slt .slt-feature { display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--slt-blue); }
.slt-feature strong { font-size: var(--slt-fs-5); line-height: 1.35; color: var(--slt-navy); text-wrap: balance; }
.slt-feature span { font-size: var(--slt-fs-3); line-height: 1.4; color: var(--slt-muted); text-wrap: balance; }

/* ---------- Vì sao chọn: ảnh tròn + 6 chip ---------- */
.slt-why { display: grid; gap: 24px; align-items: stretch; }
.slt-why__img { position: relative; justify-self: center; width: min(100%, 340px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--slt-line); box-shadow: 0 0 0 8px #fff, var(--slt-shadow-lg); }
.slt-why__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slt .slt-why__list { display: contents; list-style: none; margin: 0; padding: 0; }
.slt .slt-why__item { display: flex; gap: 16px; align-items: flex-start; margin: 0; padding: 18px 22px 18px 14px; border: 1px solid var(--slt-line); border-radius: var(--slt-r-pill); background: #fff; box-shadow: var(--slt-shadow); }
.slt-why__tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slt-why__tx strong { font-size: var(--slt-fs-7); font-weight: 800; line-height: 1.3; color: var(--slt-navy); text-wrap: balance; }
.slt-why__tx span { font-size: var(--slt-fs-4); line-height: 1.6; color: var(--slt-muted); text-wrap: pretty; }
.slt-why__s { display: none; }
/* Máy tính bảng: cùng bố cục máy tính và điện thoại (3 thẻ trái, ảnh tròn giữa, 3 thẻ phải); thẻ cùng hàng cao bằng nhau,
   bỏ dịch vòng cung vì cột hẹp. Dưới 760px cột chỉ còn ~200px: ẩn dòng mô tả như điện thoại. */
@media (min-width: 640px) and (max-width: 1099px) {
	.slt-why { grid-template-columns: minmax(0, 1fr) clamp(150px, 22vw, 250px) minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: 14px 22px; align-items: stretch; }
	.slt-why__img { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; margin: 0; box-shadow: 0 0 0 8px #fff, var(--slt-shadow-lg); outline: 2px dashed var(--slt-deco-2); outline-offset: 12px; }
	.slt .slt-why__item { align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: var(--slt-r-xl); }
	.slt .slt-why__item:nth-child(-n+3) { grid-column: 1; flex-direction: row-reverse; text-align: right; padding: 12px 12px 12px 16px; }
	.slt .slt-why__item:nth-child(n+4) { grid-column: 3; }
	.slt .slt-why__item:nth-child(1), .slt .slt-why__item:nth-child(4) { grid-row: 1; }
	.slt .slt-why__item:nth-child(2), .slt .slt-why__item:nth-child(5) { grid-row: 2; }
	.slt .slt-why__item:nth-child(3), .slt .slt-why__item:nth-child(6) { grid-row: 3; }
	.slt .slt-why__item:nth-child(-n+3) .slt-why__tx { align-items: flex-end; }
	.slt-why__item .slt-orb { --orb: 36px; flex: none; }
	.slt-why__tx { gap: 4px; }
	.slt-why__tx strong { font-size: var(--slt-fs-5); }
	.slt-why__tx span { font-size: var(--slt-fs-3); line-height: 1.5; }
}
@media (min-width: 640px) and (max-width: 759px) { .slt-why__tx span { display: none; } }
@media (min-width: 1100px) {
	.slt-why { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px) minmax(0, 1fr); gap: 24px 32px; }
	.slt-why__img { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; margin: 0 8px; box-shadow: 0 0 0 10px #fff, var(--slt-shadow-lg); outline: 2px dashed var(--slt-deco-2); outline-offset: 22px; }
	.slt .slt-why__item { align-items: center; padding: 14px 26px 14px 14px; white-space: nowrap; }
	/* 3 chip đầu cột trái (chữ canh phải, icon bên phải), 3 chip sau cột phải; chip trên/dưới dịch 44px về phía ảnh thành vòng cung. */
	.slt .slt-why__item:nth-child(-n+3) { grid-column: 1; flex-direction: row-reverse; text-align: right; padding: 14px 14px 14px 26px; }
	.slt .slt-why__item:nth-child(n+4) { grid-column: 3; }
	/* Gán hàng rõ ràng: để tự xếp thì cột phải bắt đầu từ hàng 3 (sau chip cuối cột trái) nên bị tụt xuống. */
	.slt .slt-why__item:nth-child(1), .slt .slt-why__item:nth-child(4) { grid-row: 1; }
	.slt .slt-why__item:nth-child(2), .slt .slt-why__item:nth-child(5) { grid-row: 2; }
	.slt .slt-why__item:nth-child(3), .slt .slt-why__item:nth-child(6) { grid-row: 3; }
	.slt .slt-why__item:nth-child(1), .slt .slt-why__item:nth-child(3) { transform: translateX(44px); }
	.slt .slt-why__item:nth-child(4), .slt .slt-why__item:nth-child(6) { transform: translateX(-44px); }
	.slt .slt-why__item:nth-child(1), .slt .slt-why__item:nth-child(4) { align-self: start; }
	.slt .slt-why__item:nth-child(2), .slt .slt-why__item:nth-child(5) { align-self: center; }
	.slt .slt-why__item:nth-child(3), .slt .slt-why__item:nth-child(6) { align-self: end; }
	.slt .slt-why__item:nth-child(n+4) .slt-why__tx { align-items: flex-start; }
	.slt .slt-why__item:nth-child(-n+3) .slt-why__tx { align-items: flex-end; }
}

/* ---------- Bảng giá ---------- */
.slt-prices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px; align-items: start; }
.slt-price { overflow: hidden; border: 1px solid var(--slt-line); border-radius: var(--slt-r-lg); background: #fff; box-shadow: var(--slt-shadow); }
.slt-price__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: var(--slt-navy); color: #fff; }
.slt .slt-price__head h3 { margin: 0; font-size: var(--slt-fs-8); font-weight: 800; color: #fff; }
.slt-price__head span { flex: none; font-size: var(--slt-fs-3); color: var(--slt-on-dark); white-space: nowrap; }
.slt .slt-price__rows { list-style: none; margin: 0 0 -1px; padding: 6px 24px; }
.slt .slt-price__rows li { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 14px 0; border-bottom: 1px dashed var(--slt-dash); }
.slt-price__rows li span { flex: 1; min-width: 0; font-size: var(--slt-fs-5); color: var(--slt-text); }
.slt-price__rows li strong { flex: none; font-size: var(--slt-fs-5); font-weight: 800; color: var(--slt-cta); white-space: nowrap; }
.slt-prices__tabs { display: none; }

/* ---------- Dải thẻ: lưới desktop / vuốt ngang điện thoại ---------- */
.slt-rail { display: grid; gap: 24px 20px; }
.slt-rail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slt-rail--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slt-rail--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.slt-rail > * { min-width: 0; }
@media (max-width: 1099px) and (min-width: 640px) {
	.slt-rail--md2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slt-rail--md3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.slt-rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; gap: 14px; margin: 0 calc(var(--slt-pad) * -1); padding: 26px var(--slt-pad) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--slt-pad); scrollbar-width: none; }
	.slt-rail::-webkit-scrollbar { display: none; }
	.slt-rail--m72 { grid-auto-columns: 72%; }
	.slt-rail--m86 { grid-auto-columns: 86%; }
	.slt-rail > * { scroll-snap-align: start; }
}

/* ---------- Bước quy trình ---------- */
.slt-step { position: relative; display: flex; flex-direction: column; height: 100%; counter-increment: slt-step; border: 1px solid var(--slt-line); border-radius: var(--slt-r-lg); background: #fff; box-shadow: var(--slt-shadow); transition: transform var(--slt-dur), box-shadow var(--slt-dur); }
.slt-rail { counter-reset: slt-step; }
.slt-step:hover { transform: translateY(-4px); box-shadow: var(--slt-shadow-h); }
.slt-step__media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: calc(var(--slt-r-lg) - 1px) calc(var(--slt-r-lg) - 1px) 0 0; overflow: hidden; background: var(--slt-img); }
.slt-step__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slt-step__dot { position: relative; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px auto 0; border: 2px solid var(--slt-navy); border-radius: 50%; outline: 5px solid #fff; background: #fff; font-weight: 800; font-size: var(--slt-fs-7); color: var(--slt-navy); }
.slt-step__dot::before { content: counter(slt-step, decimal-leading-zero); }
.slt-step:last-child .slt-step__dot { background: var(--slt-blue); border-color: var(--slt-blue); color: #fff; box-shadow: var(--slt-glow); }
.slt-step__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 26px; text-align: center; }
.slt .slt-step h3 { margin: 0; font-size: var(--slt-fs-8); font-weight: 800; line-height: 1.3; color: var(--slt-navy); white-space: nowrap; }
.slt .slt-step p { margin: 0; min-height: 3.1em; font-size: var(--slt-fs-4); line-height: 1.55; color: var(--slt-muted); text-wrap: balance; }
@media (max-width: 999px) and (min-width: 640px) {
	.slt-rail--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.slt-rail--5 > .slt-step:nth-child(-n+3) { grid-column: span 2; }
	.slt-rail--5 > .slt-step:nth-child(n+4) { grid-column: span 3; }
	.slt-rail--5 > .slt-step:nth-child(n+4) .slt-step__media { aspect-ratio: 2 / 1; }
}

/* ---------- Thẻ công trình ---------- */
.slt-prj { display: flex; flex-direction: column; height: 100%; padding: 10px; border: 1px solid var(--slt-line-2); border-radius: var(--slt-r-lg); background: #fff; transition: box-shadow var(--slt-dur), border-color var(--slt-dur); }
.slt-prj:hover { border-color: var(--slt-blue); box-shadow: var(--slt-shadow-h); }
.slt-prj__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--slt-r-md); overflow: hidden; }
.slt-prj__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slt-prj__tags { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.slt-tag { padding: 5px 10px; border-radius: var(--slt-r-pill); font-size: var(--slt-fs-3); font-weight: 700; line-height: 1.3; }
/* Nhãn chữ trắng dùng xanh nút chính (#0f4cc4) thay #1559d6: chữ 13px trên #1559d6 chỉ đạt 4.3:1. */
.slt-tag--blue { background: var(--slt-cta); color: #fff; }
.slt-tag--light { background: rgba(255, 255, 255, .95); color: var(--slt-navy); }
.slt-prj__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 8px 6px; }
.slt-prj__area { display: flex; align-items: center; gap: 6px; font-size: var(--slt-fs-3); font-weight: 700; color: var(--slt-link); text-transform: uppercase; letter-spacing: .06em; }
.slt-prj__area .slt-icon { color: var(--slt-blue); }
.slt .slt-prj__title { margin: 0 0 14px; min-height: 2.6em; font-size: var(--slt-fs-8); font-weight: 700; line-height: 1.3; color: var(--slt-navy); text-wrap: balance; }
.slt-prj__foot { display: flex; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--slt-line); }
.slt .slt-prj__open { width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 var(--slt-fs-4)/1.3 var(--slt-font); color: var(--slt-navy); text-transform: none; letter-spacing: 0; cursor: pointer; }
.slt .slt-prj__open:hover { color: var(--slt-link); }

/* ---------- Nhận xét ---------- */
.slt .slt-review { position: relative; display: flex; flex-direction: column; gap: 18px; height: 100%; margin: 0; padding: 32px 28px 24px; border: 1px solid var(--slt-line); border-radius: var(--slt-r-xl); background: #fff; box-shadow: var(--slt-shadow); transition: transform var(--slt-dur), box-shadow var(--slt-dur); }
.slt .slt-review:hover { transform: translateY(-4px); box-shadow: var(--slt-shadow-h); }
.slt-review__badge { position: absolute; top: -22px; right: 24px; }
.slt-review__badge .slt-orb { padding: 0; box-shadow: 0 0 0 5px #fff, var(--slt-glow-sm); }
.slt-review__stars { display: flex; gap: 2px; color: var(--slt-yellow); }
.slt .slt-review blockquote { margin: 0; padding: 0; border: 0; font-size: var(--slt-fs-6); font-style: normal; line-height: 1.7; color: var(--slt-text); text-wrap: pretty; }
.slt .slt-review blockquote::before, .slt .slt-review blockquote::after { display: none; }
.slt-review figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--slt-dash); }
.slt-review__av { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--slt-tint); color: var(--slt-link); font-weight: 800; font-size: var(--slt-fs-6); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--slt-foot); }
.slt-review__av img { width: 100%; height: 100%; object-fit: cover; }
.slt-review__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.slt-review__who strong { font-size: var(--slt-fs-5); font-weight: 800; color: var(--slt-navy); }
.slt-review__who span { font-size: var(--slt-fs-3); color: var(--slt-muted); }
.slt-rail:has(> .slt-review) { padding-top: 26px; }
@media (max-width: 1099px) and (min-width: 1000px) { .slt-rail--3:has(> .slt-review) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Hỏi đáp (Accordion của Flatsome) ---------- */
.slt .slt-faq { counter-reset: slt-faq; display: flex; flex-direction: column; gap: 10px; }
.slt .slt-faq .accordion-item { counter-increment: slt-faq; border: 1px solid var(--slt-line-2); border-radius: var(--slt-r-lg); background: #fff; transition: border-color var(--slt-dur), box-shadow var(--slt-dur); }
.slt .slt-faq .accordion-item:has(> .accordion-title.active) { border-color: var(--slt-blue); box-shadow: var(--slt-shadow); }
.slt .slt-faq .accordion-title { position: relative; display: grid; grid-template-columns: 30px 1fr 34px; align-items: center; gap: 16px; min-height: 64px; padding: 18px 20px; border: 0; font-size: var(--slt-fs-6); font-weight: 700; line-height: 1.4; color: var(--slt-navy); text-wrap: pretty; }
.slt .slt-faq .accordion-title::before { content: counter(slt-faq, decimal-leading-zero); font: 500 var(--slt-fs-3) 'JetBrains Mono', monospace; color: var(--slt-muted); }
.slt .slt-faq .accordion-title.active::before { color: var(--slt-blue); }
.slt .slt-faq .accordion-title > span { grid-column: 2; grid-row: 1; }
.slt .slt-faq .accordion-title .toggle { position: relative; grid-column: 3; grid-row: 1; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; background: var(--slt-soft); color: var(--slt-navy); opacity: 1; transition: transform var(--slt-dur-slow), background-color var(--slt-dur); }
.slt .slt-faq .accordion-title .toggle i { display: none; }
.slt .slt-faq .accordion-title .toggle::before, .slt .slt-faq .accordion-title .toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.6px; margin: -1.3px 0 0 -7px; border-radius: 2px; background: currentColor; }
.slt .slt-faq .accordion-title .toggle::after { transform: rotate(90deg); }
.slt .slt-faq .accordion-title.active .toggle { transform: rotate(45deg); background: var(--slt-blue); color: #fff; }
.slt .slt-faq .accordion-inner { padding: 0 64px 20px 66px; font-size: var(--slt-fs-5); line-height: 1.75; color: var(--slt-text-2); }
.slt .slt-faq .accordion-inner p { margin: 0; }

/* ---------- Thẻ bài viết ---------- */
.slt-art { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 10px 10px 14px; border: 1px solid var(--slt-line-2); border-radius: var(--slt-r-lg); background: #fff; transition: border-color var(--slt-dur), box-shadow var(--slt-dur); }
.slt-art:hover { border-color: var(--slt-blue); box-shadow: var(--slt-shadow-h); }
.slt-art__media { aspect-ratio: 16 / 10; border-radius: var(--slt-r-sm); overflow: hidden; }
.slt-art__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slt .slt-art__title { margin: 4px 0 0; padding: 0 6px; min-height: 2.7em; font-size: var(--slt-fs-6); line-height: 1.35; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slt .slt-art__title a { color: var(--slt-navy); text-decoration: none; }
.slt .slt-art__title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--slt-r-lg); }
.slt .slt-art__text { margin: 0; padding: 0 6px; font-size: var(--slt-fs-4); line-height: 1.5; color: var(--slt-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slt-art__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 10px 6px 0; border-top: 1px solid var(--slt-line); }
.slt-art__cat { font-size: var(--slt-fs-2); font-weight: 700; color: var(--slt-link); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Dải kêu gọi liên hệ ---------- */
.slt-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 36px); border-radius: var(--slt-r-lg); }
.slt-cta__text { display: flex; flex-direction: column; gap: 4px; }
.slt-cta__text strong { font-size: var(--slt-fs-h5); font-weight: 800; line-height: 1.3; color: #fff; }
.slt-cta__text span { font-size: var(--slt-fs-5); line-height: 1.5; color: #dde8fb; }
.slt-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.slt-cta__btns .slt-btn { flex: 1 1 auto; }
.slt-cta--navy { margin-top: clamp(32px, 4vw, 48px); background: var(--slt-navy); }
/* Dải xanh dùng #0f4cc4 thay #1559d6 để chữ phụ 15px đạt tương phản ≥ 4.5. */
.slt-cta--blue { position: relative; top: -40px; margin-bottom: -12px; background: var(--slt-cta); box-shadow: var(--slt-glow-lg); }

/* ---------- Chân trang ---------- */
.slt-foot-logo img { display: block; height: 48px; width: auto; }
.slt-foot-logo { margin-bottom: 16px; }
.slt .slt-footer .slt-p { font-size: var(--slt-fs-4); line-height: 1.65; color: var(--slt-text-2); margin-bottom: 16px; }
.slt-foot-title { display: block; margin-bottom: 14px; font-size: var(--slt-fs-6); font-weight: 700; color: var(--slt-navy); }
.slt .slt-footer .ux-menu-title { margin: 0 0 4px; padding: 0; border: 0; font-size: var(--slt-fs-6); font-weight: 700; color: var(--slt-navy); text-transform: none; letter-spacing: 0; }
.slt .slt-footer .ux-menu-link { border: 0; }
.slt .slt-footer .ux-menu-link__link { min-height: 0; padding: 5px 0; border: 0; font-size: var(--slt-fs-4); color: var(--slt-text-2); }
.slt .slt-footer .ux-menu-link__link:hover { color: var(--slt-blue); }
.slt-social { display: flex; flex-wrap: wrap; gap: 8px; }
.slt-social a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--slt-dash); border-radius: var(--slt-r-sm); background: #fff; color: var(--slt-navy); font-weight: 800; font-size: var(--slt-fs-3); text-decoration: none; transition: background-color var(--slt-dur), color var(--slt-dur), border-color var(--slt-dur); }
.slt-social a:hover { background: var(--slt-blue); border-color: var(--slt-blue); color: #fff; }
.slt .slt-contact ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: var(--slt-fs-4); }
.slt .slt-contact li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; margin: 0; line-height: 1.5; }
.slt-contact__ic { width: 20px; height: 1.5em; display: grid; place-items: center; color: var(--slt-blue); }
.slt-contact__val { min-width: 0; color: var(--slt-navy); font-weight: 600; overflow-wrap: anywhere; }
.slt-contact__val a { color: var(--slt-navy); }
.slt-contact__val a:hover { color: var(--slt-blue); }
.slt-contact__strong { font-weight: 700; }
.slt-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px 0 20px; border-top: 1px solid #cfd9ea; font-size: var(--slt-fs-3); color: var(--slt-muted); }
/* Cột Flatsome chứa dòng bản quyền mang sẵn padding-bottom 30px: cộng với padding của dòng thì khoảng trống dưới đáy gấp mấy lần phần chữ. */
.slt .slt-footer .col:has(> .col-inner > .slt-foot-bottom) { padding-bottom: 0; }
.slt-foot-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.slt-foot-bottom a { color: var(--slt-text-2); }
.slt-foot-bottom a:hover { color: var(--slt-blue); }
.slt .slt-footer .slt-foot-cols { padding-top: 8px; }
.slt .slt-footer .slt-foot-cols > .col { padding-bottom: 36px; }

/* ---------- Header dạng viên thuốc (Header Builder của Flatsome) ---------- */
.slt #header .header-bg-color, .slt #header .header-bg-image { background: transparent !important; }
.slt #header .header-main { background: transparent !important; box-shadow: none !important; }
.slt #header .header-wrapper.stuck { box-shadow: none !important; }
.slt #header .top-divider { display: none; }
.slt #masthead .header-inner { position: relative; top: 20px; max-width: calc(100% - 2 * clamp(12px, 3vw, 24px)); height: auto; min-height: 72px; padding: 8px 8px 8px 18px; border-radius: var(--slt-r-lg); background: #fff; box-shadow: var(--slt-shadow-bar); }
/* Khi cuộn (Flatsome thêm .stuck) thanh nổi thu từ 20px về 12px cách mép trên: dải nội dung chạy qua phía trên thanh mỏng đi. Điện thoại dùng header phẳng nên không áp. */
@media (min-width: 640px) {
	.slt #masthead .header-inner { transition: top var(--slt-dur-slow) ease; }
	.slt #header .header-wrapper.stuck .header-inner { top: 12px; }
}
.slt #masthead #logo { width: auto !important; margin-right: clamp(16px, 2.4vw, 36px); }
.slt #masthead #logo img { height: 38px !important; max-height: 38px; width: auto; padding: 0; }
.slt #masthead .header-nav-main > li { margin: 0; }
.slt #masthead .header-nav-main > li > a { display: flex; align-items: center; padding: 10px; font-family: var(--slt-font); font-size: var(--slt-fs-5); font-weight: 500; color: var(--slt-text); text-transform: none; letter-spacing: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.slt #masthead .header-nav-main > li > a:hover, .slt #masthead .header-nav-main > li.current-dropdown > a { color: var(--slt-blue); }
.slt #masthead .header-nav-main > li.active > a, .slt #masthead .header-nav-main > li.current-menu-item > a, .slt #masthead .header-nav-main > li > a.is-current { color: var(--slt-blue); font-weight: 700; border-bottom-color: var(--slt-blue); }
.slt #masthead .header-nav-main > li > a::before { display: none; }
/* Menu nhiều cột: mặc định Flatsome cố định mỗi cột 160px nên chữ bị bẻ dòng và phải panel bỏ trống → chia đều các cột. */
.slt #masthead .header-nav-main > li > .nav-dropdown:has(> .nav-dropdown-col) { display: flex; }
/* Mục cha đặt chế độ "Container width" (tắt mũi tên, không cho JS tự xê dịch menu). JS ấy canh theo mép nội dung khung, mà thanh header bo tròn
   có padding 18px/8px → menu lệch mép. Gỡ position của mục cha và thanh menu để menu bám thẳng vào thanh header, đè vị trí JS gắn inline. */
.slt #masthead .header-nav-main, .slt #masthead .header-nav-main > li.menu-item-design-container-width { position: static; }
.slt #masthead .header-nav-main > li.menu-item-design-container-width > .nav-dropdown { top: calc(100% + 6px) !important; right: 0 !important; bottom: auto !important; left: 0 !important; width: auto !important; margin: 0 !important; }
/* Cầu nối vô hình phủ khoảng hở giữa chữ "Dịch vụ" và menu: rê chuột xuống không bị rời mục cha nên menu không tắt giữa đường. */
.slt #masthead .header-nav-main > li.menu-item-design-container-width > .nav-dropdown::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 20px; }
.slt #masthead .nav-dropdown:has(> .nav-dropdown-col) > li.nav-dropdown-col { display: block; flex: 1 1 0; width: auto; min-width: 0; }
/* Khung menu nhiều cột theo bộ nhận diện: bo tròn, bóng xanh, không viền xám và gạch chân từng dòng như mặc định Flatsome. */
.slt #masthead .nav-dropdown:has(> .nav-dropdown-col) { padding: 26px 18px 22px; border: 0; border-radius: var(--slt-r-lg); box-shadow: var(--slt-shadow-pop); }
.slt #masthead .nav-dropdown > li.nav-dropdown-col { padding: 0 10px; border-right: 0; }
.slt #masthead .nav-dropdown > li.nav-dropdown-col + li.nav-dropdown-col { border-left: 1px solid var(--slt-line); }
.slt #masthead .nav-dropdown-col > a { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 0 14px; border-bottom: 1px solid var(--slt-line) !important; font-size: var(--slt-fs-3); font-weight: 800; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--slt-navy); white-space: normal; }
.slt #masthead .slt-micon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--slt-r-sm); background: var(--slt-orb-grad); color: #fff; box-shadow: var(--slt-glow-sm); }
.slt #masthead .nav-dropdown-col > ul { display: flex; flex-direction: column; gap: 2px; }
.slt #masthead .nav-dropdown-col > ul > li > a { display: flex; align-items: center; gap: 8px; margin: 0 -10px; padding: 8px 10px; border: 0 !important; border-radius: var(--slt-r-sm); font-size: var(--slt-fs-5); font-weight: 500; line-height: 1.35; color: var(--slt-text-2); white-space: normal; transition: background-color var(--slt-dur) ease, color var(--slt-dur) ease; }
.slt #masthead .nav-dropdown-col > ul > li > a::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--slt-dot); transition: background-color var(--slt-dur) ease, transform var(--slt-dur) ease; }
.slt #masthead .nav-dropdown-col > ul > li > a:hover, .slt #masthead .nav-dropdown-col > ul > li.current-menu-item > a { background: var(--slt-img); color: var(--slt-blue); }
.slt #masthead .nav-dropdown-col > ul > li > a:hover::before, .slt #masthead .nav-dropdown-col > ul > li.current-menu-item > a::before { background: var(--slt-blue); transform: scale(1.3); }
.slt #masthead .nav-dropdown-col > ul > li.current-menu-item > a { font-weight: 700; }
.slt #masthead .nav-dropdown-col .slt-menu-all { margin-top: 10px; }
.slt #masthead .nav-dropdown-col .slt-menu-all > a { display: inline-flex; margin: 0; padding: 8px 16px; border-radius: var(--slt-r-pill); background: var(--slt-img); font-size: var(--slt-fs-4); font-weight: 700; color: var(--slt-blue); }
.slt #masthead .nav-dropdown-col .slt-menu-all > a::before { display: none; }
.slt #masthead .nav-dropdown-col .slt-menu-all > a::after { content: "→"; transition: transform var(--slt-dur) ease; }
.slt #masthead .nav-dropdown-col .slt-menu-all > a:hover { background: var(--slt-blue); color: #fff; }
.slt #masthead .nav-dropdown-col .slt-menu-all > a:hover::after { transform: translateX(3px); }
/* Màn 1024–1199px: khung trang hẹp, mỗi cột còn ~180px → thu chữ để tên dịch vụ dài nhất vẫn nằm một dòng. */
@media (max-width: 1199px) {
	.slt #masthead .nav-dropdown > li.nav-dropdown-col { padding: 0 8px; }
	.slt #masthead .nav-dropdown-col > ul > li > a { font-size: var(--slt-fs-4); }
	.slt #masthead .nav-dropdown-col > a { font-size: var(--slt-fs-2); letter-spacing: .04em; }
}
/* Menu ngăn kéo điện thoại: icon tiêu đề cột nhỏ lại, canh cùng dòng chữ. */
.slt .mobile-sidebar .slt-micon { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: var(--slt-r-xs); background: var(--slt-orb-grad); color: #fff; vertical-align: middle; }
.slt .mobile-sidebar .slt-micon .slt-icon { width: 15px; height: 15px; }
/* Icon dạng ảnh (vật thể đã tách nền): bỏ ô nền gradient, cho ảnh to hơn ô SVG một chút vì vật không có khung bao. */
.slt #masthead .slt-micon--img, .slt .mobile-sidebar .slt-micon--img { width: 44px; height: 44px; border-radius: 0; background: none; box-shadow: none; }
.slt .mobile-sidebar .slt-micon--img { width: 32px; height: 32px; }
.slt .slt-micon--img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.slt .mobile-sidebar .slt-menu-all > a { color: var(--slt-blue); font-weight: 700; }
/* Khung nút dùng chung có lề trên 8px cho nút đặt dưới đoạn văn; trong header nó đẩy nút lệch 4px khỏi tâm thanh. */
.slt #masthead .flex-right .slt-btn-wrap { margin: 0; }
.slt #masthead .flex-right .slt-btn { height: 48px; padding-left: 22px; padding-right: 10px; font-size: var(--slt-fs-5); gap: 10px; }
.slt #masthead .flex-right .slt-btn__ring { width: 30px; height: 30px; }
.slt #masthead .html_top_right_text { margin: 0; }
.slt #masthead .nav-icon > a, .slt #masthead .header-nav .nav-icon > a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--slt-line-2); border-radius: var(--slt-r-sm); background: #fff; color: var(--slt-navy); }
.slt #masthead .nav-icon .menu-title { display: none !important; }
.slt #masthead .html_nav_position_text { margin: 0 8px 0 0; }
.slt-pill { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 10px 0 8px; border-radius: var(--slt-r-pill); background: var(--slt-tint); color: var(--slt-navy); font-size: var(--slt-fs-2); font-weight: 700; line-height: 1; white-space: nowrap; }
.slt-pill .slt-icon { color: var(--slt-blue); }
.slt #masthead .nav-icon .icon-menu { display: block; margin: 0; font-size: var(--slt-fs-9); line-height: 1; color: var(--slt-navy); }
@media (min-width: 1100px) {
	.slt #masthead .header-inner { width: fit-content; margin: 0 auto; gap: clamp(16px, 2.4vw, 36px); }
	.slt #masthead .header-inner > .flex-col.flex-left, .slt #masthead .header-inner > .flex-col.flex-right { flex: none; }
}
@media (max-width: 1099px) { .slt #masthead .header-inner { width: auto; margin: 0 clamp(12px, 3vw, 24px); max-width: none; } }
.slt .mobile-sidebar .nav-sidebar > li > a { padding-top: 16px; padding-bottom: 16px; font-family: var(--slt-font); font-size: var(--slt-fs-6); font-weight: 600; line-height: 24px; color: var(--slt-navy); text-transform: none; letter-spacing: 0; }
/* Mỗi hàng cao đúng 56px (+1px kẻ): chiều cao lẻ (25,6px dòng chữ) đẩy đường kẻ vào vị trí nửa điểm ảnh, màn hình vẽ chỗ rõ chỗ nhoè
   nên trông như chỗ có chỗ không. Một màu kẻ chung cho hàng menu và hàng nhóm dịch vụ. */
.slt .mobile-sidebar .nav-sidebar > li + li { border-top: 1px solid var(--slt-line); }
/* Ngăn kéo: nền đặc (Flatsome để trắng 95% nên chữ của trang phía sau lộ qua); thanh đáy ẩn khi ngăn kéo đang mở. */
.slt .off-canvas .mfp-content { background: #fff; }
/* Nút đóng: ô tròn 44px nền xám nhạt, dấu X mảnh màu chữ (mặc định Flatsome là X 28px trắng mờ hoà màu kiểu difference để tự đảo theo nền, vùng chạm 40px);
   chừa vùng đầu ngăn kéo cho nút để nút không đè lên hàng "Trang chủ". */
.slt .off-canvas .mfp-close { top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--slt-bg); color: var(--slt-navy); opacity: 1; mix-blend-mode: normal; transition: background-color var(--slt-dur); }
.slt .off-canvas .mfp-close:active { background: var(--slt-line); }
.slt .off-canvas .mfp-close svg { width: 20px; height: 20px; stroke-width: 2.2; pointer-events: none; }
.slt .mobile-sidebar .sidebar-menu { padding-top: 68px; }
/* Mũi tên mở "Dịch vụ" dùng đúng hình mũi tên của các nhóm (thay icon font Flatsome to, đen, khác nét); vùng chạm 44px, tâm thẳng hàng với mũi tên các nhóm bên dưới. */
.slt .mobile-sidebar .nav-sidebar > li > .toggle { width: 44px; height: 44px; margin: 1px 11px 0 0; color: var(--slt-muted); opacity: 1; }
.slt .mobile-sidebar .nav-sidebar > li > .toggle i { display: none; }
.slt .mobile-sidebar .nav-sidebar > li > .toggle::before { content: ""; display: block; width: 18px; height: 18px; margin: auto; background: currentColor; -webkit-mask: var(--slt-chev) center / contain no-repeat; mask: var(--slt-chev) center / contain no-repeat; }
.slt .mobile-sidebar .nav-sidebar > li.active > .toggle { color: var(--slt-blue); }
/* Trang đang xem: chữ xanh + vạch xanh bên trái. */
.slt .mobile-sidebar .nav-sidebar > li.current-menu-item > a { color: var(--slt-blue); box-shadow: inset 3px 0 0 var(--slt-blue); }
html.has-off-canvas .slt-bar { visibility: hidden; opacity: 0; }
/* Dịch vụ trong ngăn kéo: 5 nhóm cùng nền trắng với ngăn kéo, mỗi nhóm một hàng (icon 3D, tên, số dịch vụ, mũi tên);
   bấm hàng mới mở danh sách dịch vụ của nhóm (JS initDrawerGroups). Không có JS thì danh sách vẫn hiện đủ như cũ. */
.slt .mobile-sidebar .nav-sidebar > li.has-child.active { background: none; }
.slt .mobile-sidebar .nav-sidebar > li.has-child > ul.children:has(> .slt-mgroup) { margin: 0 14px 10px; padding: 0; border-radius: 0; background: #fff; }
/* Flatsome đặt margin-top 16px cho mục con có danh sách con trong ngăn kéo: tăng độ ưu tiên để các hàng nhóm liền nhau. */
.slt .mobile-sidebar .nav-sidebar > li > ul.children > li.slt-mgroup { margin: 0; padding: 0; border: 0; }
.slt .mobile-sidebar .nav-sidebar > li > ul.children > li.slt-mgroup + li.slt-mgroup { border-top: 1px solid var(--slt-line); }
.slt .mobile-sidebar .slt-mgroup__head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 8px 10px; border: 0; border-radius: var(--slt-r-sm); background: none; font: 700 var(--slt-fs-5)/1.25 var(--slt-font); color: var(--slt-navy); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.slt .mobile-sidebar .slt-mgroup__head .slt-micon { flex: none; width: 40px; height: 40px; margin: 0; }
.slt .mobile-sidebar .slt-mgroup__head .slt-micon__tx { display: flex; flex-direction: column; flex: 1; gap: 3px; min-width: 0; }
.slt .mobile-sidebar .slt-mgroup__meta { font-size: var(--slt-fs-2); font-weight: 500; line-height: 1.2; color: var(--slt-muted); }
.slt .mobile-sidebar .slt-mgroup__chev { flex: none; width: 18px; height: 18px; color: var(--slt-muted); transition: transform var(--slt-dur), color var(--slt-dur); }
.slt .mobile-sidebar .slt-mgroup.is-open > .slt-mgroup__head .slt-micon__tx { color: var(--slt-blue); }
.slt .mobile-sidebar .slt-mgroup.is-open .slt-mgroup__chev { transform: rotate(180deg); color: var(--slt-blue); }
.slt .mobile-sidebar .slt-mgroup > ul { display: none; margin: 0; padding: 4px 8px 10px 62px; }
.slt .mobile-sidebar .slt-mgroup.is-open > ul { display: block; }
.slt .mobile-sidebar .slt-mgroup > ul > li { margin: 0; padding: 0; border: 0; }
.slt .mobile-sidebar .slt-mgroup > ul > li > a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; font: 500 var(--slt-fs-4)/1.3 var(--slt-font); color: var(--slt-text-2); text-transform: none; letter-spacing: 0; }
.slt .mobile-sidebar .slt-mgroup > ul > li.current-menu-item > a { font-weight: 700; color: var(--slt-blue); }
.slt .mobile-sidebar .slt-mgroup > ul > li.slt-menu-all > a { gap: 6px; font-weight: 700; color: var(--slt-blue); }
.slt .mobile-sidebar .slt-mgroup > ul > li.slt-menu-all > a::after { content: "→"; }
.slt .mobile-sidebar .slt-btn { margin: 14px 20px 0; display: flex; }

/* ---------- Thanh đáy nổi kiểu Facebook (tablet + điện thoại) ---------- */
.slt-bar { display: none; }
@media (max-width: 1099px) {
	/* Chừa chỗ cho thanh nổi ở đáy chân trang (cùng màu chân trang) thay vì đệm body, để cuối trang không lộ một dải màu khác dưới thanh. */
	.slt #footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); background: var(--slt-foot); }
	/* Viên trắng nổi cách mép 12px; máy tính bảng giữ bề rộng như điện thoại để các icon không dạt xa nhau. */
	.slt-bar { position: fixed; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); left: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; width: calc(100% - 24px); max-width: 440px; height: 70px; margin: 0 auto; padding: 0 6px; border: 1px solid rgba(15, 35, 80, .06); border-radius: var(--slt-r-pill); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: var(--slt-shadow-bar); }
	.slt-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1 1 0; min-width: 0; max-width: 84px; height: 62px; color: var(--slt-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color var(--slt-dur); }
	.slt-bar__ic { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--slt-r-pill); transition: background-color var(--slt-dur); }
	.slt-bar a:active .slt-bar__ic { background: var(--slt-img); }
	.slt-bar__tx { font-size: var(--slt-fs-1); font-weight: 600; line-height: 1.15; white-space: nowrap; }
	.slt-bar a.is-current, .slt-bar a:focus-visible { color: var(--slt-blue); }
	/* Nút chính: ô icon tô nền xanh nhạt như mục đang chọn của Facebook. */
	.slt-bar a.slt-bar__main { color: var(--slt-blue); }
	.slt-bar a.slt-bar__main .slt-bar__ic { background: var(--slt-tint); }
	.slt-bar a.slt-bar__main .slt-bar__tx { font-weight: 800; }
	.slt-bar .slt-icon { width: 24px; height: 24px; }
	.slt-bar__zalo { display: block; width: 25px; height: 25px; }
}
/* Máy 320–359px: mỗi ô chỉ còn ~56px, "Nhắn Zalo" gần chạm chữ bên cạnh → bớt lề thanh, chữ nhỏ lại một nấc. */
@media (max-width: 359px) {
	.slt-bar { width: calc(100% - 16px); padding: 0 2px; }
	.slt-bar__tx { font-size: var(--slt-fs-1); letter-spacing: -.01em; }
}

/* ---------- Cửa sổ chi tiết công trình ---------- */
.slt-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(6, 28, 85, .6); }
.slt-modal[hidden] { display: none; }
.slt-modal__dialog { width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); border-radius: var(--slt-r-lg); background: #fff; outline: 0; }
.slt-modal__media { position: relative; min-height: 300px; }
.slt-modal__media img, .slt-modal__media .slt-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slt-modal__body { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.slt .slt-modal__close { align-self: flex-end; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; display: grid; place-items: center; border: 1.5px solid var(--slt-line-2); border-radius: 50%; background: #fff; color: var(--slt-navy); cursor: pointer; }
.slt .slt-modal__title { margin: 0; font-size: var(--slt-fs-11); font-weight: 800; line-height: 1.25; color: var(--slt-navy); }
.slt-modal__detail { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.slt .slt-modal__dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; font-size: var(--slt-fs-4); }
.slt .slt-modal__dl dt, .slt .slt-modal__dl dd { display: block; margin: 0; padding: 0; text-transform: none; opacity: 1; font-size: var(--slt-fs-4); letter-spacing: 0; }
.slt .slt-modal__dl dt { color: var(--slt-muted); font-weight: 400; }
.slt .slt-modal__dl dd { color: var(--slt-navy); font-weight: 600; }
.slt .slt-modal__scope { margin: 0; font-size: var(--slt-fs-4); line-height: 1.65; color: var(--slt-text-2); }
.slt-modal__quote { margin-top: auto; height: 50px; border-radius: var(--slt-r-sm); }
body.slt-lock { overflow: hidden; }

/* ==========================================================================
   Tablet (640–1099)
   ========================================================================== */
@media (max-width: 1099px) {
	/* Dàn như điện thoại: ảnh thu nhỏ neo đáy, cao 62vw thì hiện khoảng 3/4 bề ngang ảnh — mảng trống bên trái cho chữ, người lọt sang phải.
	   Hero cao theo để mép trên ảnh luôn dưới header nổi (cao tới 92px). Phía trên và sau chữ lót chính ảnh đó phóng to 150%, neo góc trên trái:
	   chỉ lộ mảng trống góc trái trên của ảnh (người bắt đầu ở 43% bề ngang ảnh, ngoài khung), giữ nguyên nét — nền trơn hay bản mờ trông như lớp phủ. */
	.slt-hero { min-height: max(600px, calc(62vw + 120px)); }
	.slt-hero__media .slt-hero__fill { top: 0; height: 150%; filter: none; transform: none; object-position: 0 0; }
	.slt-hero__media .slt-hero__img { position: absolute; left: 0; bottom: 0; width: 100%; height: 62vw; margin-top: 0; object-position: var(--slt-focus, 0%) 0; -webkit-mask-image: linear-gradient(transparent, #000 56px); mask-image: linear-gradient(transparent, #000 56px); }
	/* Chữ gói trong nửa trái: người trong ảnh bắt đầu khoảng 57% bề ngang. */
	.slt-hero__inner { max-width: min(600px, 54vw); }
	/* Co theo bề ngang để 3 dòng tiêu đề vừa nửa trái: 32px cố định thì ở 640px dòng 2 tràn sang người, vỡ thành 4 dòng. */
	.slt .slt-hero__title { font-size: clamp(28px, 4.6vw, 37px); }
	/* Chữ tối trên nền sáng: rộng 50vw thì cuối dòng chạm mảng cam sau lưng người (~820px), tương phản tụt dưới 4.5. */
	.slt-hero__text { max-width: min(480px, 46vw); }
	.slt .slt-faq .accordion-inner { padding: 0 20px 20px; }
	/* Lưới Flatsome đổi cột ở 850px; thiết kế muốn 3 thẻ dịch vụ mỗi hàng tới 1099px. */
	.slt .row.slt-svcs > .col { flex-basis: 33.333%; max-width: 33.333%; }
}

/* ==========================================================================
   Điện thoại (<640) — kiểu app
   ========================================================================== */
@media (max-width: 639px) {
	/* Header phẳng trên ảnh (không khung trắng nổi); khi cuộn (Flatsome thêm .stuck) mới đổ nền trắng. */
	.slt #masthead .header-inner { top: 0; margin: 0; max-width: none; min-height: 60px; padding: 6px 12px; border-radius: 0; background: transparent; box-shadow: none; }
	.slt #header .header-wrapper.stuck .header-inner { background: #fff; box-shadow: var(--slt-shadow-sm); }
	.slt #masthead #logo img { max-width: 128px; }
	/* Trang chủ: header phẳng nằm trên nền xanh của ảnh đầu trang, logo chữ navy cần nền trắng như 2 nút bên phải. */
	.slt.home #header .header-wrapper:not(.stuck) #logo { padding: 6px 12px; border-radius: var(--slt-r-pill); background: #fff; }
	/* Hero kiểu app: dùng CHÍNH ảnh nền máy tính, canh theo điểm nhìn --slt-focus; chữ trái, 1 nút; thẻ 3 huy hiệu bên dưới. */
	.slt-hero { display: block; min-height: 0; }
	.slt-hero__media { overflow: hidden; }
	.slt-hero__media img { position: absolute; top: -29px; left: 0; width: 100%; height: 115%; object-position: var(--slt-focus, 70%) center; }
	/* Ảnh chính cao 62vw (hiện khoảng 3/4 bề ngang ảnh, từ điểm nhìn --slt-focus), neo theo ĐỈNH để đầu người (10–40% chiều cao ảnh,
	   tâm cách mép ảnh 15,5vw) nằm ngang tiêu đề 3 dòng: tâm tiêu đề = 82px padding + 1,5 dòng × line-height 1,12 × cỡ chữ.
	   Phía trên là bản phóng to của chính ảnh (khai báo ở khối máy tính bảng). */
	.slt-hero { --slt-hm-fs: min(26px, calc(6.9vw - 2.5px)); }
	.slt-hero__media .slt-hero__img { top: calc(82px + 1.68 * var(--slt-hm-fs) - 15.5vw); bottom: auto; height: 62vw; object-position: var(--slt-focus, 0%) 0; -webkit-mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 36px), transparent); }
	/* (mép dưới ảnh cũng mờ: chữ dài hơn ảnh thì đáy ảnh dừng trên thẻ huy hiệu, không để lộ đường cắt ngang) */
	/* Mép dưới ảnh mờ dần vào nền trang để không lộ đường cắt ngang. */
	.slt-hero__media::after { display: block; z-index: 1; height: 70px; background: linear-gradient(0deg, var(--slt-bg) 0%, rgba(245, 248, 253, .55) 45%, rgba(245, 248, 253, 0) 100%); }
	/* Tiêu đề bám sát dưới header; hero cao tới đáy ảnh (mép trên ảnh + 62vw), thẻ huy hiệu đẩy xuống đáy hero. */
	.slt-hero__body { display: flex; flex-direction: column; min-height: calc(82px + 1.68 * var(--slt-hm-fs) + 46.5vw); padding: 82px 16px 0; }
	/* Khoảng thở giữa thẻ huy hiệu và tiêu đề "Dịch vụ nổi bật". */
	.slt .section.slt-sec-hero .slt-hero + .row { margin-top: 62px; }
	.slt-hero__inner { max-width: none; }
	/* Có ảnh điện thoại riêng (đã dàn sẵn chỗ chữ, chỗ người): ảnh phủ kín hero như ảnh gốc, hero cao đúng tỉ lệ ảnh — không thu nhỏ, không lót, không mờ mép. */
	.slt-hero--mimg .slt-hero__body { min-height: calc(100vw * var(--slt-mratio)); padding-top: 16px; }
	/* Có ảnh điện thoại riêng: thanh menu nằm trên nền trắng riêng, ảnh bắt đầu ngay dưới. Ảnh chừa ít khoảng trên đầu người (16% chiều cao):
	   menu đè lên ảnh thì phải phóng ảnh ≥ 1,46 lần đầu mới không chui dưới nút. header-main cao sẵn 90px (cài đặt Flatsome) → về đúng chiều cao thanh nút. */
	.slt.home:has(.slt-hero--mimg) #header { position: relative; }
	.slt.home:has(.slt-hero--mimg) #header .header-wrapper:not(.stuck) .header-main { height: auto; }
	.slt.home:has(.slt-hero--mimg) #header .header-wrapper:not(.stuck) .header-inner { background: #fff; box-shadow: var(--slt-shadow-sm); }
	.slt-hero--mimg .slt-hero__media .slt-hero__img { top: 0; bottom: 0; height: 100%; object-position: var(--slt-focus, 0%) 0; -webkit-mask-image: none; mask-image: none; }
	.slt-hero--mimg .slt-hero__media .slt-hero__fill { display: none; }
	/* Tiêu đề điện thoại (3 dòng ngắn) dừng trước đầu người, bắt đầu ở ~70vw: cỡ chữ co theo bề ngang để dòng dài nhất
	   vừa khung, hộp chữ chặn ở 70vw. Mô tả bên dưới nằm cạnh mảng cam và cánh tay (từ ~50vw) nên hẹp hơn, chia đều 3 dòng
	   (balance: dòng không chạm mảng cam); dưới 390px chữ 12px mới đủ 3 dòng, dưới 341px rộng thêm 4vw. */
	.slt-hero__copy { gap: 10px; max-width: none; padding-bottom: 22px; }
	.slt .slt-hero__title { max-width: calc(70vw - 16px); font-size: var(--slt-hm-fs); line-height: 1.12; }
	.slt-hero__tl { display: none; }
	.slt-hero__tm { display: block; }
	.slt-hero--mimg .slt-hero__copy { max-width: 66%; }
	.slt-hero--mimg .slt-hero__mtext { max-width: 86%; }
	/* Ảnh điện thoại phóng ít nên người lấn sang trái hơn: tiêu đề co thêm chút để dòng 2 dừng trước mặt người. */
	.slt .slt-hero--mimg .slt-hero__title { font-size: clamp(18.7px, 4.8vw, 22px); }
	.slt-hero__text { display: none; }
	.slt-hero__mtext { display: block; max-width: calc(50vw - 16px); margin: 0; font-size: var(--slt-fs-3); line-height: 1.5; color: var(--slt-text-2); text-wrap: balance; }
	@media (max-width: 389px) { .slt-hero__mtext { font-size: var(--slt-fs-2); } }
	@media (max-width: 340px) { .slt-hero__mtext { max-width: calc(54vw - 16px); } }
	/* Ảnh điện thoại riêng nền xanh đậm: chữ trắng, dòng nhấn vàng chuyển cam, quầng tối mảnh tách chữ khỏi vệt sáng và người trong ảnh.
	   Dòng nhấn tô bằng background-clip nên dùng drop-shadow — text-shadow sẽ nổi lên trên dải màu. */
	.slt .slt-hero--mimg .slt-hero__title, .slt-hero--mimg .slt-hero__mtext { color: #fff; text-shadow: 0 0 2px rgba(1, 30, 110, .85), 0 1px 6px rgba(1, 30, 110, .65); }
	.slt .slt-hero--mimg .slt-hero__title .slt-accent, .slt .slt-hero--mimg .slt-hero__title em { background-image: linear-gradient(180deg, var(--slt-yellow) 25%, var(--slt-orange) 95%); text-shadow: none; }
	.slt .slt-hero--mimg .slt-hero__title .slt-accent { color: var(--slt-yellow); filter: drop-shadow(0 0 2px rgba(1, 30, 110, .85)) drop-shadow(0 1px 6px rgba(1, 30, 110, .65)); }
	.slt-hero__btns { gap: 0; }
	.slt-hero__btns .slt-btn--outline { display: none; }
	.slt-hero__btns .slt-btn--primary { align-self: flex-start; height: 46px; padding: 0 20px; font-size: var(--slt-fs-4); gap: 8px; }
	.slt-hero__btns .slt-btn--primary .slt-icon { width: 18px; height: 18px; }
	.slt .slt-hero__stats { position: relative; z-index: 2; display: flex; justify-content: space-evenly; align-items: center; gap: 4px; list-style: none; margin: auto 0 -26px; padding: 10px 6px; border-radius: var(--slt-r-md); background: #fff; box-shadow: var(--slt-shadow); }
	.slt .slt-hero__stats li { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--slt-fs-1); font-weight: 700; line-height: 1.25; color: var(--slt-navy); }
	.slt-hero__stats .slt-orb { --orb: 30px; padding: 3px; box-shadow: none; }
	/* Điện thoại hẹp (≤ 360px): giấu chữ pill khu vực (còn icon), huy hiệu xếp dọc. */
	@media (max-width: 360px) { .slt-pill span { display: none; } .slt-pill { padding: 0 10px; } .slt .slt-hero__stats li { flex-direction: column; text-align: center; gap: 4px; } }
	/* Dịch vụ nổi bật: 3 ô mỗi hàng (ô ~110px) — icon và chữ thu nhỏ theo. */
	.slt .row.slt-svcs { --g: 10px !important; }
	.slt .row.slt-svcs > .col { flex-basis: 33.333%; max-width: 33.333%; }
	.slt-svc { padding-bottom: 12px; border-radius: var(--slt-r-md); }
	.slt-svc .slt-orb { --orb: 44px; margin-top: -22px; padding: 3px; box-shadow: var(--slt-glow-sm), 0 0 0 4px rgba(255, 255, 255, .55); }
	.slt-svc .slt-orb__in .slt-icon { width: 18px; height: 18px; }
	.slt-svc .slt-orb__dot { width: 10px; height: 10px; }
	.slt-svc__badge { width: 50px; height: 50px; margin-top: -25px; box-shadow: var(--slt-glow-sm), 0 0 0 4px rgba(255, 255, 255, .55); }
	.slt-svc__badge .slt-icon3d { width: 38px; height: 38px; }
	.slt-svc__name { margin-top: 8px; padding: 0 6px; font-size: var(--slt-fs-2); line-height: 1.3; min-height: 2.6em; }
	.slt .slt-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.slt .slt-feature { align-items: center; text-align: center; }
	.slt-feature strong { font-size: var(--slt-fs-4); }
	.slt-feature span { font-size: var(--slt-fs-2); }
	.slt-imgbadge__badge { padding: 12px 16px; gap: 10px; }
	.slt-imgbadge__badge strong { font-size: var(--slt-fs-11); }
	/* Vì sao chọn: ảnh tròn giữa, 3 chip gọn mỗi bên (icon + 1 dòng chữ ngắn), như bản mẫu app. */
	.slt-why { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: 8px 6px; align-items: center; }
	.slt-why__img { grid-column: 2; grid-row: 1 / span 3; width: 104px; margin: 0; box-shadow: 0 0 0 5px #fff, var(--slt-shadow-float); }
	.slt .slt-why__list { display: contents; }
	.slt .slt-why__item { gap: 5px; align-items: center; padding: 7px 6px; border-radius: var(--slt-r-md); box-shadow: var(--slt-shadow); }
	.slt .slt-why__item:nth-child(-n+3) { grid-column: 1; }
	.slt .slt-why__item:nth-child(n+4) { grid-column: 3; }
	.slt .slt-why__item:nth-child(1), .slt .slt-why__item:nth-child(4) { grid-row: 1; }
	.slt .slt-why__item:nth-child(2), .slt .slt-why__item:nth-child(5) { grid-row: 2; }
	.slt .slt-why__item:nth-child(3), .slt .slt-why__item:nth-child(6) { grid-row: 3; }
	.slt-why__item .slt-orb { --orb: 26px; padding: 3px; box-shadow: none; }
	.slt-why__tx { gap: 0; }
	.slt-why__tx strong { font-size: var(--slt-fs-1); line-height: 1.2; }
	.slt-why__tx span { display: none; }
	.slt-why__s { display: block; }
	.slt-why__tx:has(.slt-why__s) .slt-why__t { display: none; }
	/* Nút đơn lẻ (vd "Xem thêm về chúng tôi") canh giữa trên điện thoại. */
	.slt-btn-wrap--left { justify-content: center; }
	/* Quy trình: thẻ trắng xếp dọc — ảnh trái, số đè góc trên-trái ảnh, chữ phải (như mẫu). */
	.slt-rail:has(> .slt-step) { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
	.slt .slt-step { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; height: auto; padding: 10px; border: 1px solid var(--slt-line); border-radius: var(--slt-r-md); background: #fff; box-shadow: var(--slt-shadow); scroll-snap-align: none; }
	.slt .slt-step:hover { transform: none; box-shadow: var(--slt-shadow); }
	.slt-step__media { grid-column: 1; grid-row: 1; aspect-ratio: 1; border-radius: var(--slt-r-sm); }
	.slt .slt-step__dot { position: absolute; left: 2px; top: 2px; grid-area: auto; width: 34px; height: 34px; margin: 0; border: 2px solid #fff; outline: 0; background: var(--slt-blue); color: #fff; font-size: var(--slt-fs-2); box-shadow: var(--slt-glow-sm); }
	.slt-step__body { grid-column: 2; grid-row: 1; gap: 4px; padding: 0 4px 0 0; text-align: left; }
	.slt .slt-step h3 { font-size: var(--slt-fs-6); white-space: normal; }
	.slt .slt-step p { min-height: 0; font-size: var(--slt-fs-3); line-height: 1.5; text-wrap: pretty; }
	/* Công trình: lưới 2 cột, thẻ gọn. */
	.slt-rail:has(> .slt-prj) { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
	.slt-prj { padding: 6px; border-radius: var(--slt-r-md); }
	.slt-prj__media { border-radius: var(--slt-r-sm); }
	.slt-prj__tags { left: 6px; top: 6px; right: 6px; gap: 4px; }
	.slt-tag { padding: 3px 7px; font-size: var(--slt-fs-1); }
	.slt-prj__body { gap: 4px; padding: 10px 4px 2px; }
	.slt-prj__area { font-size: var(--slt-fs-1); }
	.slt .slt-prj__title { margin-bottom: 8px; min-height: 2.6em; font-size: var(--slt-fs-4); }
	.slt-prj__foot { padding-top: 8px; }
	.slt .slt-prj__open { min-height: 36px; font-size: var(--slt-fs-2); }
	.slt-prj .slt-ring { width: 30px; height: 30px; }
	/* Tiêu đề hai bên có nút (Mẹo & kiến thức): main.js dời nút xuống DƯỚI dải thẻ trên điện thoại. */
	.slt-heading__side--below { display: flex; justify-content: center; align-items: center; max-width: none; margin-top: 20px; }
	/* Bảng giá: 2 tab. */
	.slt-prices__tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 4px; border-radius: var(--slt-r-pill); background: var(--slt-soft); }
	.slt .slt-prices__tab { flex: 1; height: 42px; margin: 0; padding: 0; border: 0; border-radius: var(--slt-r-pill); background: transparent; font: 700 var(--slt-fs-4)/1 var(--slt-font); color: var(--slt-muted); text-transform: none; letter-spacing: 0; cursor: pointer; }
	.slt .slt-prices__tab[aria-selected="true"] { background: #fff; color: var(--slt-navy); box-shadow: var(--slt-shadow-sm); }
	.slt-prices--tabbed .slt-price { display: none; }
	.slt-prices--tabbed .slt-price.is-active { display: block; }
	.slt-price__rows li span, .slt-price__rows li strong { font-size: var(--slt-fs-4); }
	.slt .slt-faq .accordion-title { grid-template-columns: 26px 1fr 34px; gap: 12px; padding: 16px; font-size: var(--slt-fs-5); }
	.slt .slt-step h3 { font-size: var(--slt-fs-7); }
	.slt .slt-review { padding: 28px 22px 20px; }
	.slt-cta--blue { top: -28px; margin-bottom: 0; }
	.slt-cta__btns { width: 100%; }
	.slt-foot-bottom { flex-direction: column; }
}

/* Điện thoại hẹp (≤360px): "Vì sao chọn" đưa ảnh lên trên, 6 chip thành 2 cột — đặt cuối tệp để thắng khối ≤639. */
@media (max-width: 360px) { .slt-why { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } .slt-why__img { grid-column: 1 / -1; grid-row: 1; width: 140px; justify-self: center; margin-bottom: 10px; } .slt .slt-why__item:nth-child(-n+3) { grid-column: 1; } .slt .slt-why__item:nth-child(n+4) { grid-column: 2; } .slt .slt-why__item:nth-child(1), .slt .slt-why__item:nth-child(4) { grid-row: 2; } .slt .slt-why__item:nth-child(2), .slt .slt-why__item:nth-child(5) { grid-row: 3; } .slt .slt-why__item:nth-child(3), .slt .slt-why__item:nth-child(6) { grid-row: 4; } }

/* Người dùng bật "giảm chuyển động" trong hệ điều hành (WCAG 2.3.3): bỏ cuộn mượt, vòng quay trang trí, rút chuyển tiếp về tức thì. */
/* ==========================================================================
   Chuyển động vào trang — chỉ khi người dùng không bật "giảm chuyển động".
   Dịch bằng thuộc tính translate (không dùng transform): cộng dồn với transform sẵn có của thẻ
   (vòng cung khối Vì sao chọn, nhích lên khi rê chuột) thay vì đè mất.
   ========================================================================== */
@keyframes slt-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes slt-draw { from { clip-path: inset(0 100% 0 0); } }
@keyframes slt-shine { 0% { translate: -120% 0; } 22%, 100% { translate: 260% 0; } }
@media (prefers-reduced-motion: no-preference) {
	/* Đầu trang: từng dòng tiêu đề, mô tả, nút, thẻ huy hiệu trồi lên lần lượt; nét cọ dưới <em> vẽ từ trái sang sau dòng cuối.
	   Ảnh nền đứng yên — là phần tử LCP, ẩn đi thì điểm tốc độ tụt. */
	.slt-hero__ln, .slt-hero__text, .slt-hero__mtext, .slt-hero__btns, .slt-hero__stats { animation: slt-rise var(--slt-dur-reveal) var(--slt-ease-out) both; }
	.slt-hero__ln:nth-child(2) { animation-delay: .08s; }
	.slt-hero__ln:nth-child(3) { animation-delay: .16s; }
	.slt-hero__text, .slt-hero__mtext { animation-delay: .26s; }
	.slt-hero__btns { animation-delay: .34s; }
	.slt-hero__stats { animation-delay: .42s; }
	.slt .slt-hero__title em::after { animation: slt-draw .6s var(--slt-ease-out) .5s both; }
	/* Vệt sáng lướt qua nút chính đầu trang mỗi 6s: chỉ dịch lớp giả, không vẽ lại nút. overflow cắt vệt sáng, không cắt bóng của chính nút. */
	.slt-hero .slt-btn--glow { position: relative; overflow: hidden; }
	.slt-hero .slt-btn--glow::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); translate: -120% 0; animation: slt-shine 6s ease-in-out 1.4s infinite; pointer-events: none; }
	/* Hiện dần khi cuộn tới: main.js gắn .slt-rv (+ --rv-i so le trong cùng hàng), thêm .is-in khi vào khung,
	   chạy xong thì gỡ cả hai để thẻ dùng lại chuyển tiếp rê chuột của nó. Không có JS thì không có .slt-motion → mọi thứ hiện sẵn. */
	.slt-motion .slt-rv { opacity: 0; translate: 0 24px; }
	.slt-motion .slt-rv.is-in { opacity: 1; translate: none; transition: opacity var(--slt-dur-reveal) var(--slt-ease-out), translate var(--slt-dur-reveal) var(--slt-ease-out); transition-delay: calc(var(--rv-i, 0) * 90ms); }
	.slt-count { font-variant-numeric: tabular-nums; }
}
@media print { .slt-motion .slt-rv { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.slt *, .slt *::before, .slt *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}