/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme — MTT EnviroTech
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* =========================================================================
   MTT EnviroTech — design tokens (theo "MTT Website Handoff")
   Cách dùng trong UX Builder: chọn phần tử → Advanced → Class → gõ tên class
   ========================================================================= */
:root {
	--mtt-green: #2FA84F;
	--mtt-green-hover: #23893F;
	--mtt-lime: #7BC142;
	--mtt-teal: #0F6E5A;
	--mtt-blue: #1E63C4;
	--mtt-navy: #123A8A;
	--mtt-footer: #0F2C63;
	--mtt-ink: #152436;
	--mtt-slate: #5A6B7B;
	--mtt-mist: #F4F8F5;
	--mtt-line: #E2E8EE;
	--mtt-input: #CBD5DF;
	--mtt-grad: linear-gradient(125deg, #5BB947 0%, #2E9E8C 42%, #1E63C4 78%, #153C8E 100%);
	--mtt-grad-90: linear-gradient(90deg, #5BB947 0%, #2E9E8C 42%, #1E63C4 78%, #153C8E 100%);
	--mtt-shadow: 0 12px 32px rgba(21, 36, 54, .10);
	--mtt-font: 'Pretendard Variable', 'Pretendard', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mtt-mono: 'Roboto Mono', ui-monospace, monospace;
}

/* ---------- Base ---------- */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, .heading-font, .nav > li > a, .alt-font, .button {
	font-family: var(--mtt-font);
}
body { color: var(--mtt-ink); background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--mtt-ink); }
a { color: var(--mtt-blue); }
a:hover { color: var(--mtt-navy); }
.mtt-mono, .mtt-mono * { font-family: var(--mtt-mono); }

/* ---------- Typography ---------- */
.mtt-kicker {
	font-size: 13px; letter-spacing: .22em; font-weight: 700; color: var(--mtt-green);
	text-transform: uppercase; margin: 0 0 14px;
}
.mtt-h1 {
	font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.08;
	margin: 0 0 20px; text-wrap: balance; letter-spacing: -.01em;
}
.mtt-h1-page {
	font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; line-height: 1.1;
	margin: 0 0 14px; text-wrap: balance;
}
.mtt-h2 {
	font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; line-height: 1.15;
	margin: 0 0 40px; text-wrap: balance;
}
.mtt-h2.mb-0 { margin-bottom: 0; }
.mtt-h3 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; line-height: 1.2; margin: 0 0 24px; }
.mtt-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--mtt-slate); margin: 0 0 32px; max-width: 560px; }
.mtt-body { font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.mtt-muted { color: var(--mtt-slate); }
.mtt-link { font-weight: 700; font-size: 16px; color: var(--mtt-blue); }
.mtt-link:hover { color: var(--mtt-navy); }
.mtt-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 40px; }
.mtt-head-row .mtt-h2 { margin: 0; }

/* ---------- Buttons ---------- */
.button.mtt-btn, .mtt-btn {
	background: var(--mtt-green); color: #fff; border: 1px solid var(--mtt-green);
	font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none;
	padding: 0 26px; min-height: 54px; line-height: 52px; border-radius: 8px; margin: 0 8px 8px 0;
	box-shadow: none;
}
.button.mtt-btn:hover, .mtt-btn:hover { background: var(--mtt-green-hover); border-color: var(--mtt-green-hover); color: #fff; box-shadow: none; }
.button.mtt-btn-outline, .mtt-btn-outline {
	background: #fff; color: var(--mtt-ink); border: 1px solid var(--mtt-input);
	font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none;
	padding: 0 26px; min-height: 54px; line-height: 52px; border-radius: 8px; margin: 0 8px 8px 0;
}
.button.mtt-btn-outline:hover, .mtt-btn-outline:hover { background: #fff; color: var(--mtt-ink); border-color: var(--mtt-ink); box-shadow: none; }
.button.mtt-btn-white, .mtt-btn-white {
	background: #fff; color: var(--mtt-ink); border: 1px solid #fff;
	font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none;
	padding: 0 24px; min-height: 54px; line-height: 52px; border-radius: 8px; margin: 0 8px 8px 0;
}
.button.mtt-btn-white:hover, .mtt-btn-white:hover { background: #fff; color: var(--mtt-green); }
.button.mtt-btn-ghost, .mtt-btn-ghost {
	background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6);
	font-family: var(--mtt-mono); font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none;
	padding: 0 22px; min-height: 54px; line-height: 52px; border-radius: 8px; margin: 0 8px 8px 0;
}
.button.mtt-btn-ghost:hover, .mtt-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.mtt-btn.expand, .mtt-btn-white.expand { width: 100%; margin-right: 0; }

/* ---------- Images (ux_image) ---------- */
.mtt-img-r16 .img-inner, .mtt-img-r16 img { border-radius: 16px; overflow: hidden; }
.mtt-img-r14 .img-inner, .mtt-img-r14 img { border-radius: 14px; overflow: hidden; }
.mtt-img-r12 .img-inner, .mtt-img-r12 img { border-radius: 12px; overflow: hidden; }
.mtt-img-r10 .img-inner, .mtt-img-r10 img { border-radius: 10px; overflow: hidden; }
.mtt-img-r8 .img-inner, .mtt-img-r8 img { border-radius: 8px; overflow: hidden; }
.mtt-img-flush { margin-bottom: 0 !important; }

/* ---------- Equal-height cards ---------- */
.mtt-eq > .col > .col-inner { height: 100%; }
.row.mtt-row-5 > .col { flex-basis: 20%; max-width: 20%; }
@media (max-width: 849px) { .row.mtt-row-5 > .col { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 549px) { .row.mtt-row-5 > .col { flex-basis: 100%; max-width: 100%; } }

/* Thẻ chung */
.mtt-card > .col-inner {
	background: #fff; border: 1px solid var(--mtt-line); border-radius: 12px; padding: 28px;
}
.mtt-card-mist > .col-inner { background: var(--mtt-mist); border-radius: 12px; padding: 24px; }
.mtt-card-title { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.mtt-card-text { font-size: 15px; line-height: 1.6; color: var(--mtt-slate); margin: 0; }
.mtt-num { font-family: var(--mtt-mono); font-size: 14px; font-weight: 700; color: var(--mtt-green); margin: 0 0 10px; }

/* ---------- Dải số liệu ---------- */
.mtt-grad-bg, .section.mtt-grad-bg { background: var(--mtt-grad) !important; color: #fff; }
.mtt-stat > .col-inner { border-left: 1px solid rgba(255,255,255,.35); padding-left: 20px; }
.mtt-stat-num { font-family: var(--mtt-mono); font-size: clamp(32px, 4vw, 44px); font-weight: 700; line-height: 1.2; color: #fff; margin: 0; }
.mtt-stat-label { font-size: 15px; opacity: .95; margin: 4px 0 0; color: #fff; }

/* ---------- Thẻ dịch vụ ---------- */
.mtt-svc-card > .col-inner {
	position: relative; background: #fff; border: 1px solid var(--mtt-line); border-top: 4px solid var(--mtt-svc, var(--mtt-green));
	border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s;
}
.mtt-svc-card > .col-inner:hover { box-shadow: var(--mtt-shadow); }
.mtt-svc-card .mtt-svc-no { font-family: var(--mtt-mono); font-size: 14px; font-weight: 700; color: var(--mtt-svc, var(--mtt-green)); margin: 0; }
.mtt-svc-card .mtt-svc-title { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--mtt-ink); }
.mtt-svc-card .mtt-svc-desc { font-size: 15px; line-height: 1.6; color: var(--mtt-slate); margin: 0; }
.mtt-svc-card .mtt-more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--mtt-blue); }
.mtt-svc-card .mtt-more a::after, .mtt-svc-row .mtt-more a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.c1 { --mtt-svc: #2FA84F; } .c2 { --mtt-svc: #7BC142; } .c3 { --mtt-svc: #0F6E5A; }
.c4 { --mtt-svc: #1E63C4; } .c5 { --mtt-svc: #123A8A; } .c6 { --mtt-svc: #2FA84F; }

/* ---------- Tại sao chọn / Sự khác biệt ---------- */
.mtt-why > .col-inner { border-top: 2px solid var(--mtt-ink); padding-top: 20px; }

/* ---------- Quy trình ---------- */
.mtt-step > .col-inner { background: #fff; border: 1px solid var(--mtt-line); border-radius: 12px; padding: 24px; }
.mtt-step-no {
	width: 44px; height: 44px; border-radius: 50%; background: var(--mtt-svc, var(--mtt-green)); color: #fff;
	font-family: var(--mtt-mono); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; margin: 0 0 18px;
}
.mtt-step .mtt-card-title { font-size: 17px; }
.mtt-step .mtt-card-text { font-size: 14px; line-height: 1.55; }
.s1 { --mtt-svc: #7BC142; } .s2 { --mtt-svc: #2FA84F; } .s3 { --mtt-svc: #0F6E5A; } .s4 { --mtt-svc: #1E63C4; } .s5 { --mtt-svc: #123A8A; }

/* ---------- Thẻ ảnh (chứng chỉ, đội ngũ, dự án tĩnh) ---------- */
.mtt-img-card > .col-inner { border: 1px solid var(--mtt-line); border-radius: 12px; overflow: hidden; background: #fff; }
.mtt-img-card .img { margin: 0 !important; }
.mtt-img-card .mtt-img-card__body { padding: 16px 18px; }
.mtt-img-card .mtt-img-card__title { font-size: 15px; font-weight: 600; margin: 0; }
.mtt-team-name { font-size: 17px; font-weight: 700; margin: 0; }
.mtt-team-role { font-size: 14px; color: var(--mtt-green); font-weight: 600; margin: 4px 0 0; }

/* ---------- Logo đối tác ---------- */
.mtt-partner .img { margin: 0 !important; }
.mtt-partner img { filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; border-radius: 8px; }
.mtt-partner:hover img { filter: none; opacity: 1; }
.mtt-partners-title { font-size: 13px; letter-spacing: .22em; font-weight: 700; color: var(--mtt-slate); text-transform: uppercase; text-align: center; margin: 0 0 28px; }
.mtt-border-y { border-top: 1px solid var(--mtt-line); border-bottom: 1px solid var(--mtt-line); }

/* ---------- Dự án [mtt_projects] ---------- */
.mtt-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.mtt-filter button {
	margin: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
	border: 1px solid var(--mtt-input); background: #fff; color: var(--mtt-ink); text-transform: none; letter-spacing: 0; line-height: 1.2; min-height: 0;
}
.mtt-filter button.is-active { background: var(--mtt-ink); color: #fff; border-color: var(--mtt-ink); }
.mtt-proj-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.mtt-proj-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.mtt-proj-card { display: block; border: 1px solid var(--mtt-line); border-radius: 12px; overflow: hidden; color: var(--mtt-ink); background: #fff; transition: box-shadow .15s; }
.mtt-proj-card:hover { box-shadow: var(--mtt-shadow); color: var(--mtt-ink); }
.mtt-proj-card__img { aspect-ratio: 4 / 3; background: var(--mtt-mist); overflow: hidden; }
.mtt-proj-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtt-proj-card__body { padding: 20px 22px; }
.mtt-proj-card__cat { font-size: 13px; font-weight: 700; color: var(--mtt-green); margin-bottom: 6px; }
.mtt-proj-card__name { font-size: 18px; font-weight: 700; }
.mtt-proj-card__meta { font-size: 14px; color: var(--mtt-slate); margin-top: 6px; }

/* ---------- Banner trang con ---------- */
.mtt-page-banner { border-bottom: 1px solid var(--mtt-line); }
.mtt-page-banner .mtt-sub { font-size: 17px; line-height: 1.6; color: var(--mtt-slate); margin: 0; max-width: 720px; }
.mtt-breadcrumb { font-size: 14px; color: var(--mtt-slate); margin-bottom: 14px; }
.mtt-breadcrumb a { color: var(--mtt-slate); }
.mtt-breadcrumb a:hover { color: var(--mtt-green); }
.mtt-breadcrumb span { color: var(--mtt-ink); font-weight: 600; }

/* ---------- Giới thiệu ---------- */
.mtt-vision > .col-inner { background: var(--mtt-grad); color: #fff; border-radius: 16px; padding: 40px; }
.mtt-mission > .col-inner { background: var(--mtt-mist); border: 1px solid var(--mtt-line); border-radius: 16px; padding: 40px; }
.mtt-vm-label { font-size: 14px; letter-spacing: .2em; font-weight: 700; margin: 0 0 16px; }
.mtt-mission .mtt-vm-label { color: var(--mtt-green); }
.mtt-vm-text { font-size: 20px; line-height: 1.55; font-weight: 600; margin: 0; }
.mtt-vision .mtt-vm-text, .mtt-vision .mtt-vm-label { color: #fff; }

/* ---------- Trang Dịch vụ (danh sách) ---------- */
.mtt-svc-row > .col-inner { position: relative; border: 1px solid var(--mtt-line); border-radius: 14px; padding: 20px; transition: box-shadow .15s; }
.mtt-svc-row > .col-inner:hover { box-shadow: var(--mtt-shadow); }
.mtt-svc-row > .col-inner > .row { margin: 0 !important; }
.mtt-svc-row .row .col { padding-bottom: 0 !important; }
.mtt-svc-row .mtt-svc-no { font-family: var(--mtt-mono); font-size: 14px; font-weight: 700; color: var(--mtt-svc, var(--mtt-green)); margin: 0 0 8px; }
.mtt-svc-row .mtt-svc-title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; line-height: 1.25; margin: 0 0 10px; }
.mtt-svc-row .mtt-svc-desc { font-size: 16px; line-height: 1.6; color: var(--mtt-slate); margin: 0 0 16px; }
.mtt-svc-row .mtt-more { font-size: 15px; font-weight: 700; margin: 0; }
@media (max-width: 549px) { .mtt-svc-row .row .col:first-child { padding-bottom: 20px !important; } }

/* ---------- Chi tiết dịch vụ ---------- */
.mtt-scope { margin: 0; padding: 0; list-style: none; }
.mtt-scope-item { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--mtt-line); }
.mtt-scope-item .mtt-scope-no { font-family: var(--mtt-mono); font-size: 16px; font-weight: 700; color: var(--mtt-svc, var(--mtt-green)); min-width: 32px; }
.mtt-scope-item h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.mtt-scope-item p { font-size: 16px; line-height: 1.65; color: var(--mtt-slate); margin: 0; }
.mtt-sidebar > .col-inner { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
.mtt-service-nav { border: 1px solid var(--mtt-line); border-radius: 14px; padding: 12px; }
.mtt-service-nav__title { font-size: 13px; letter-spacing: .18em; font-weight: 700; color: var(--mtt-slate); padding: 10px 12px; }
.mtt-service-nav__item { display: block; padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--mtt-ink); }
.mtt-service-nav__item:hover { background: var(--mtt-mist); color: var(--mtt-ink); }
.mtt-service-nav__item.is-active { color: var(--mtt-green); background: var(--mtt-mist); }
.mtt-advice { background: var(--mtt-grad); color: #fff; border-radius: 14px; padding: 28px; }
.mtt-advice-title { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: #fff; }
.mtt-advice-text { font-size: 15px; line-height: 1.55; opacity: .95; margin: 0 0 18px; color: #fff; }
.mtt-advice-phone { display: block; font-family: var(--mtt-mono); font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 16px; }
.mtt-advice-phone:hover { color: #fff; opacity: .9; }
.mtt-advice .button { margin: 0; width: 100%; }

/* ---------- Tin tức (blog_posts) ---------- */
.mtt-news .box-blog-post .box-image, .mtt-news .box-blog-post .box-image img { border-radius: 12px; }
.mtt-news .box-blog-post .box-text { padding: 12px 0 0; text-align: left; }
.mtt-news .post-title { font-size: 18px; font-weight: 700; line-height: 1.35; }
.mtt-news .cat-label { font-size: 13px; font-weight: 700; color: var(--mtt-green); opacity: 1; text-transform: none; letter-spacing: 0; }
.mtt-news .post-meta { font-family: var(--mtt-mono); font-size: 14px; color: var(--mtt-slate); opacity: 1; }
.mtt-news .is-divider { display: none; }
.mtt-news-featured .box-blog-post { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.mtt-news-featured .box-blog-post .box-image { flex: 1 1 440px; border-radius: 14px; }
.mtt-news-featured .box-blog-post .box-image img { border-radius: 14px; }
.mtt-news-featured .box-blog-post .box-text { flex: 1 1 400px; padding: 0; }
.mtt-news-featured .post-title { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; line-height: 1.25; }
.mtt-news-featured .from_the_blog_excerpt { font-size: 16px; line-height: 1.65; color: var(--mtt-slate); }
.mtt-news-featured .cat-label::before { content: "NỔI BẬT · "; }

/* ---------- Tuyển dụng ---------- */
.mtt-jobs { border-top: 2px solid var(--mtt-ink); }
.mtt-job-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--mtt-line); }
.mtt-job-row .mtt-job-info { flex: 1 1 320px; }
.mtt-job-row .mtt-job-title { font-size: 19px; font-weight: 700; margin: 0; }
.mtt-job-row .mtt-job-meta { font-size: 14px; color: var(--mtt-slate); margin: 6px 0 0; }
.mtt-job-row .mtt-job-apply { padding: 12px 20px; border: 1px solid var(--mtt-input); border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--mtt-ink); }
.mtt-job-row .mtt-job-apply:hover { border-color: var(--mtt-green); color: var(--mtt-green); }

/* ---------- Liên hệ ---------- */
.mtt-contact-logo .img-inner { display: inline-block; }
.mtt-contact-logo img { height: 120px; width: auto; }
.mtt-company { font-size: 20px; font-weight: 800; line-height: 1.35; margin: 0 0 22px; }
.mtt-info { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; font-size: 16px; }
.mtt-info > span:nth-child(odd) { color: var(--mtt-slate); }
.mtt-info .mtt-mono, .mtt-info a { font-family: var(--mtt-mono); }
.mtt-form-box > .col-inner { border: 1px solid var(--mtt-line); border-radius: 16px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 12px 32px rgba(21, 36, 54, .06); }
.mtt-form-title { font-size: 22px; font-weight: 800; margin: 0 0 18px; }
.mtt-form-box .mtt-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; }
.mtt-form-box input[type=text], .mtt-form-box input[type=tel], .mtt-form-box input[type=email], .mtt-form-box select, .mtt-form-box textarea {
	height: 48px; padding: 0 14px; border: 1px solid var(--mtt-input); border-radius: 8px; font-size: 15px;
	box-shadow: none; margin: 0; width: 100%; background: #fff; color: var(--mtt-ink);
}
.mtt-form-box select { margin-bottom: 14px; }
.mtt-form-box textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; margin-bottom: 14px; }
.mtt-form-box input:focus, .mtt-form-box select:focus, .mtt-form-box textarea:focus { border-color: var(--mtt-green); box-shadow: 0 0 0 3px rgba(47,168,79,.15); }
.mtt-form-box .wpcf7-form-control-wrap { display: block; }
.mtt-form-box input[type=submit] {
	width: 100%; margin: 0; background: var(--mtt-green); color: #fff; border: 0; border-radius: 8px;
	font-size: 16px; font-weight: 700; padding: 0 16px; height: 54px; text-transform: none; letter-spacing: 0;
}
.mtt-form-box input[type=submit]:hover { background: var(--mtt-green-hover); }
.mtt-form-box .wpcf7-spinner { position: absolute; }
.mtt-form-box .wpcf7-response-output { border-radius: 8px; margin: 14px 0 0 !important; padding: 12px 14px !important; font-size: 15px; }
.mtt-form-box .wpcf7-form.sent .wpcf7-response-output { border-color: var(--mtt-green); background: var(--mtt-mist); color: var(--mtt-ink); }
.mtt-map iframe { width: 100%; height: 420px; border: 0; border-radius: 16px; display: block; }

/* ---------- CTA band (UX Block "CTA Báo giá") ---------- */
.mtt-cta > .col-inner {
	background: var(--mtt-grad); border-radius: 18px; padding: clamp(32px, 5vw, 56px); color: #fff;
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.mtt-cta .mtt-cta-text { flex: 1 1 420px; max-width: 640px; margin-right: auto; padding-right: 16px; }
.mtt-cta .mtt-cta-title { font-size: clamp(24px, 3vw, 36px); font-weight: 800; line-height: 1.2; margin: 0 0 10px; color: #fff; }
.mtt-cta .mtt-cta-sub { font-size: 17px; opacity: .95; line-height: 1.55; margin: 0; color: #fff; }
.mtt-cta .button { margin: 0; }
.mtt-cta-sec .col, .mtt-page-banner .col, .mtt-nopad .col { padding-bottom: 0 !important; }

/* ---------- Header ---------- */
.header-wrapper::before { content: ""; display: block; position: relative; z-index: 31; height: 4px; background: var(--mtt-grad-90); }
.header .top-divider { display: none; }
.header-main { border-bottom: 1px solid var(--mtt-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.header-bg-color { background-color: rgba(255, 255, 255, .96) !important; }
.header-wrapper.stuck { box-shadow: none; }
#logo { width: auto !important; }
#logo a.mtt-logo { display: flex; align-items: center; gap: 12px; color: var(--mtt-ink); text-transform: none; }
.mtt-logo:hover { color: var(--mtt-ink); }
#logo .mtt-logo img, .mtt-logo img.header_logo { height: 46px !important; max-height: 46px !important; width: auto !important; display: block !important; flex-shrink: 0; }
#logo .header-logo-dark, #logo .header-logo-sticky { display: none !important; }
.mtt-logo__text { display: flex; flex-direction: column; line-height: 1.1; text-transform: none; letter-spacing: 0; }
.mtt-logo__name { font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.mtt-logo__sub { font-size: 12px; font-weight: 600; color: var(--mtt-teal); }
.header-nav-main.nav > li { margin: 0 2px; }
.header-nav-main.nav > li > a {
	font-size: 15px; font-weight: 600; color: var(--mtt-ink); text-transform: none; letter-spacing: 0;
	padding: 10px 12px; border-bottom: 2px solid transparent;
}
.header-nav-main.nav > li > a:hover { color: var(--mtt-green); }
.header-nav-main.nav > li.current-menu-item > a,
.header-nav-main.nav > li.current-menu-ancestor > a,
.header-nav-main.nav > li.current-page-ancestor > a,
.header-nav-main.nav > li.active > a { color: var(--mtt-green); border-bottom-color: var(--mtt-green); }
.header-nav-main .nav-dropdown { border-radius: 10px; border: 1px solid var(--mtt-line); box-shadow: var(--mtt-shadow); }
.header-nav-main .nav-dropdown > li > a { font-size: 15px; color: var(--mtt-ink); text-transform: none; }
.header-nav-main .nav-dropdown > li > a:hover, .header-nav-main .nav-dropdown > li.current-menu-item > a { color: var(--mtt-green); }
.header-button .button {
	background: var(--mtt-green) !important; border-color: var(--mtt-green) !important; color: #fff !important;
	font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; border-radius: 8px !important;
	padding: 0 18px; min-height: 44px; line-height: 44px; margin: 0;
}
.header-button .button:hover { background: var(--mtt-green-hover) !important; border-color: var(--mtt-green-hover) !important; box-shadow: none; }
.mtt-lang { display: inline-flex; border: 1px solid var(--mtt-line); border-radius: 999px; padding: 3px; }
.mtt-lang a { padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--mtt-slate); }
.mtt-lang a.is-active { background: var(--mtt-ink); color: #fff; }
.header-main .html_top_right_text { margin: 0 4px 0 10px; }
/* Mobile header */
.mobile-nav .nav-icon a, .header .nav-icon a { color: var(--mtt-ink); }
.off-canvas .nav-vertical li > a { font-size: 16px; font-weight: 600; color: var(--mtt-ink); text-transform: none; letter-spacing: 0; }
.off-canvas .nav-vertical li.current-menu-item > a { color: var(--mtt-green); }
.off-canvas .header-button .button { width: 100%; min-height: 48px; line-height: 48px; }

/* ---------- Footer (UX Block "Footer MTT") ---------- */
.mtt-footer { color: #fff; }
.mtt-footer-logo .img-inner { background: #fff; border-radius: 10px; padding: 10px 12px; display: inline-block; }
.mtt-footer-logo .img-inner img { height: 96px; width: auto; }
.mtt-footer-desc { font-size: 15px; line-height: 1.6; opacity: .85; color: #fff; margin: 0; }
.mtt-footer-title { font-size: 13px; letter-spacing: .18em; font-weight: 700; color: var(--mtt-lime) !important; margin: 0 0 16px; }
.mtt-footer-links { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mtt-footer-links li { margin: 0 !important; padding: 0; list-style: none; }
.mtt-footer-links a, .mtt-footer-links span { color: #fff; opacity: .85; font-size: 15px; line-height: 1.5; }
.mtt-footer-links a:hover { color: #fff; opacity: 1; }
.mtt-footer-links .mtt-mono { font-family: var(--mtt-mono); }
.absolute-footer { background-color: var(--mtt-footer) !important; color: rgba(255,255,255,.7); font-size: 13px; padding: 0; }
.absolute-footer .container { border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; padding-bottom: 28px; }
.absolute-footer .footer-text, .absolute-footer .copyright-footer { color: rgba(255,255,255,.7); padding: 0; }

/* ---------- Nút nổi ---------- */
.mtt-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.mtt-float a { width: 56px; height: 56px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; }
.mtt-float a:hover { color: #fff; transform: translateY(-2px); }
.mtt-float-zalo { background: #0068FF; font-size: 13px; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 104, 255, .35); }
.mtt-float-call { background: var(--mtt-green); box-shadow: 0 8px 24px rgba(47, 168, 79, .35); }

/* ---------- Text color helpers ---------- */
.mtt-white, .mtt-white * { color: #fff !important; }

@media only screen and (max-width: 48em) {
	.mtt-stat > .col-inner { margin-bottom: 16px; }
	.mtt-vision > .col-inner, .mtt-mission > .col-inner { padding: 28px; }
	.mtt-info { font-size: 15px; }
	.mtt-map iframe { height: 320px; }
}

/* ---------- Header: chuyển sang menu mobile (hamburger) dưới 1000px như thiết kế ----------
   Flatsome mặc định đổi ở 849px; khoảng 850–999px ép dùng header mobile. */
@media (min-width: 850px) and (max-width: 999px) {
	#header .hide-for-medium { display: none !important; }
	#header .show-for-medium { display: block !important; }
	#header .header-inner .nav { flex-wrap: nowrap; }
	#header .medium-logo-left .logo { margin-left: 0; margin-right: 15px; order: 1; }
	#header .medium-logo-left .flex-left { flex: 1 1 0; order: 2; }
	#header .medium-logo-left .flex-right { flex: 1 1 0; order: 3; }
}
/* 1000–1199px: thu gọn menu desktop để logo + menu + VI/EN + nút nằm trên 1 dòng */
@media (min-width: 1000px) and (max-width: 1199px) {
	#header .header-nav-main.nav > li { margin: 0; }
	#header .header-nav-main.nav > li > a { padding: 10px 7px; font-size: 14px; }
	#header .header-inner .nav { flex-wrap: nowrap; }
	#header .html_top_right_text { margin: 0 2px 0 6px; }
	#header .mtt-logo { gap: 8px; }
	#header li.header-button-1 { margin-left: 8px; }
}