/* =====================================================================
   MINH PHÁT GROUP — hệ thống giao diện
   Bảng màu, phông chữ, khoảng cách, bo góc và đổ bóng đều khai báo bằng
   biến CSS ở :root nên đổi nhận diện chỉ cần sửa một chỗ.
   ===================================================================== */

/* Phông chữ khai báo ở assets/fonts/fonts.css — tự lưu trên máy chủ, 3 độ đậm
   (400/600/700), tách theo bộ ký tự latin / latin-ext / vietnamese nên trình
   duyệt chỉ tải đúng phần cần dùng. */

:root {
    /* Màu nhận diện */
    --mpg-navy: #0B2D5B;
    --mpg-navy-700: #08234a;
    --mpg-navy-300: #2a4f80;
    --mpg-blue: #1565C0;
    --mpg-blue-700: #0f4e96;
    --mpg-red: #D62828;
    --mpg-red-700: #ad1f1f;

    /* Chữ và nền */
    --mpg-ink: #172033;
    --mpg-muted: #4c5b70;   /* 6,6:1 trên nền trắng — đạt AA */
    --mpg-bg: #FFFFFF;
    --mpg-bg-soft: #F4F7FB;
    --mpg-line: #dfe6f0;
    --mpg-line-soft: #eaf0f7;

    /* Chữ */
    --mpg-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --mpg-h1: clamp(30px, 2.1rem + 1.8vw, 52px);
    --mpg-h2: clamp(24px, 1.5rem + 1.1vw, 36px);
    --mpg-h3: clamp(17px, 1rem + .25vw, 20px);
    --mpg-body: clamp(15.5px, .95rem + .12vw, 17px);
    --mpg-small: clamp(13.5px, .85rem + .05vw, 14.5px);

    /* Khoảng cách */
    --mpg-gap: clamp(18px, 2vw, 28px);
    --mpg-pad: clamp(56px, 4.5vw, 96px);
    --mpg-gutter: clamp(16px, 4vw, 24px);
    --mpg-maxw: 1200px;

    /* Bo góc và đổ bóng */
    --mpg-r-sm: 8px;
    --mpg-r: 14px;
    --mpg-r-lg: 20px;
    --mpg-shadow: 0 1px 2px rgba(11, 45, 91, .05), 0 6px 18px rgba(11, 45, 91, .06);
    --mpg-shadow-lg: 0 12px 38px rgba(11, 45, 91, .13);

    /* Chiều cao thanh đầu trang, dùng cho scroll-margin của anchor */
    --mpg-headh: 78px;
}

/* ---------- NỀN TẢNG ----------
   Các quy tắc gốc dưới đây bọc trong :where() để KHÔNG có độ ưu tiên.
   Lý do: `.mpg h1` (1 lớp + 1 thẻ) vốn mạnh hơn `.mpg-hero__title` (1 lớp),
   nên màu chữ gốc sẽ đè lên màu của từng thành phần — đúng lỗi đã gặp: chữ
   trong nút xanh bị tô cùng màu xanh của nền nên biến mất, tiêu đề chân trang
   bị tô màu chữ tối trên nền navy. Với :where(), mọi quy tắc theo lớp đều
   thắng, màu của từng thành phần luôn được tôn trọng. */
.mpg { font-family: var(--mpg-font); color: var(--mpg-ink); background: var(--mpg-bg);
       font-size: var(--mpg-body); line-height: 1.7; -webkit-font-smoothing: antialiased; }
.mpg *, .mpg *::before, .mpg *::after { box-sizing: border-box; }
.mpg img { max-width: 100%; height: auto; }
:where(.mpg) :where(h1, h2, h3) { font-family: var(--mpg-font); color: var(--mpg-ink); line-height: 1.24; margin: 0; }
:where(.mpg) :where(h1) { font-size: var(--mpg-h1); font-weight: 700; letter-spacing: -.02em; }
:where(.mpg) :where(h2) { font-size: var(--mpg-h2); font-weight: 700; letter-spacing: -.01em; }
:where(.mpg) :where(h3) { font-size: var(--mpg-h3); font-weight: 600; }
:where(.mpg) :where(p)  { margin: 0 0 1rem; }
:where(.mpg) :where(a)  { color: var(--mpg-blue); }

.mpg-container { width: 100%; max-width: var(--mpg-maxw); margin-inline: auto; padding-inline: var(--mpg-gutter); }
.mpg-section { padding-block: var(--mpg-pad); }
.mpg-section--soft { background: var(--mpg-bg-soft); }

/* Chừa chỗ cho thanh đầu trang khi nhảy tới neo (#linh-vuc, #vs-consultation…) */
.mpg [id] { scroll-margin-top: calc(var(--mpg-headh) + 16px); }

/* Chỉ hiện với trình đọc màn hình */
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

/* Bỏ qua điều hướng */
.mpg-skip {
    position: absolute; left: 12px; top: -80px; z-index: 200;
    background: var(--mpg-navy); color: #fff; padding: 12px 20px;
    border-radius: 0 0 var(--mpg-r-sm) var(--mpg-r-sm); text-decoration: none; font-weight: 600;
    transition: top .18s ease;
}
.mpg-skip:focus { top: 0; color: #fff; }

/* Vòng focus thống nhất, luôn nhìn rõ */
.mpg a:focus-visible, .mpg button:focus-visible,
.mpg input:focus-visible, .mpg select:focus-visible, .mpg textarea:focus-visible,
.mpg summary:focus-visible, .mpg [tabindex]:focus-visible {
    outline: 3px solid var(--mpg-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- NÚT ---------- */
.mpg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 12px 22px; border-radius: var(--mpg-r-sm);
    font: inherit; font-weight: 600; font-size: var(--mpg-small);
    text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mpg-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.mpg-btn--primary { background: var(--mpg-blue); color: #fff; border-color: var(--mpg-blue); }
.mpg-btn--primary:hover { background: var(--mpg-blue-700); border-color: var(--mpg-blue-700); color: #fff; }
.mpg-btn--outline { background: transparent; color: var(--mpg-navy); border-color: var(--mpg-line); }
.mpg-btn--outline:hover { border-color: var(--mpg-blue); color: var(--mpg-blue); }
.mpg-btn--light { background: #fff; color: var(--mpg-navy); border-color: #fff; }
.mpg-btn--light:hover { background: var(--mpg-bg-soft); color: var(--mpg-navy); }
.mpg-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.mpg-btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.mpg-textlink {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--mpg-blue); font-weight: 600; text-decoration: none;
}
.mpg-textlink svg { width: 18px; height: 18px; transition: transform .18s ease; }
.mpg-textlink:hover { text-decoration: underline; }
.mpg-textlink:hover svg { transform: translateX(4px); }
.mpg-textlink--sm { font-size: var(--mpg-small); margin-top: 14px; }

/* ---------- ĐẦU TRANG ---------- */
.mpg-header { position: sticky; top: 0; z-index: 90; background: #fff; }
.mpg-topbar { background: var(--mpg-navy); color: rgba(255,255,255,.88); font-size: 13.5px; }
.mpg-topbar__inner { display: flex; align-items: center; gap: 20px; min-height: 38px; flex-wrap: wrap; }
.mpg-topbar__spacer { flex: 1; }
.mpg-topbar__item { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; padding: 4px 0; }
.mpg-topbar__item:hover { color: #fff; text-decoration: underline; }
.mpg-topbar__item svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .8; }

.mpg-bar { border-bottom: 1px solid var(--mpg-line); background: #fff; transition: box-shadow .2s ease; }
.mpg-bar__inner { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 36px); min-height: var(--mpg-headh); }
/* Thanh đầu trang khi cuộn: chỉ thêm bóng nhẹ, không đổi chiều cao → không gây nhảy layout */
.mpg-header.is-stuck .mpg-bar { box-shadow: 0 2px 14px rgba(11,45,91,.10); }
.mpg-header.is-stuck .mpg-topbar { display: none; }

.mpg-brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.mpg-brand__img { display: block; width: auto; height: 44px; object-fit: contain; }
.mpg-logo svg { display: block; height: var(--mpg-logo-h, 44px); width: auto; }

.mpg-nav { flex: 1; display: flex; justify-content: flex-end; }
.mpg-bar__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ---------- MENU ---------- */
.mpg-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.mpg-menu__item { position: relative; }
.mpg-menu__link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px;
    color: var(--mpg-ink); font-weight: 600; font-size: var(--mpg-small);
    text-decoration: none; border-radius: var(--mpg-r-sm); white-space: nowrap;
    transition: color .16s ease, background-color .16s ease;
}
.mpg-menu__link:hover { color: var(--mpg-blue); background: var(--mpg-bg-soft); }
.mpg-menu__item.current-menu-item > .mpg-menu__link,
.mpg-menu__link[aria-current="page"] { color: var(--mpg-blue); }
.mpg-menu__item.current-menu-item > .mpg-menu__link::after {
    content: ''; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px;
    background: var(--mpg-red); border-radius: 2px;
}
.mpg-menu__toggle {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; background: none; border: 0;
    color: var(--mpg-muted); cursor: pointer; border-radius: var(--mpg-r-sm);
}
.mpg-menu__toggle svg { width: 20px; height: 20px; transition: transform .2s ease; }
.mpg-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mpg-menu__empty { margin: 0; font-size: 13px; color: var(--mpg-red); }

/* Menu con trên máy tính */
.mpg-submenu {
    list-style: none; margin: 0; padding: 8px;
    position: absolute; top: calc(100% + 2px); left: 0; min-width: 232px; z-index: 40;
    background: #fff; border: 1px solid var(--mpg-line); border-radius: var(--mpg-r);
    box-shadow: var(--mpg-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.mpg-menu--desktop .mpg-menu__item--parent:hover > .mpg-submenu,
.mpg-menu--desktop .mpg-menu__item--parent:focus-within > .mpg-submenu,
.mpg-menu--desktop .mpg-menu__toggle[aria-expanded="true"] + .mpg-submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.mpg-submenu .mpg-menu__link { width: 100%; white-space: normal; }

/* Nút ba gạch */
.mpg-burger {
    display: none; width: 46px; height: 46px; padding: 11px; background: none;
    border: 1.5px solid var(--mpg-line); border-radius: var(--mpg-r-sm); cursor: pointer;
    flex-direction: column; justify-content: space-between;
}
.mpg-burger span { display: block; height: 2px; width: 100%; background: var(--mpg-navy); border-radius: 2px; }

/* ---------- NGĂN KÉO MENU (MOBILE) ---------- */
.mpg-drawer { position: fixed; inset: 0; z-index: 120; }
.mpg-drawer[hidden] { display: none; }
.mpg-drawer__backdrop { position: absolute; inset: 0; background: rgba(11,45,91,.5); }
.mpg-drawer__panel {
    position: absolute; inset-block: 0; right: 0; width: min(92vw, 380px);
    background: #fff; display: flex; flex-direction: column;
    box-shadow: -10px 0 40px rgba(11,45,91,.22);
    transform: translateX(100%); transition: transform .24s ease;
    overflow-y: auto; overscroll-behavior: contain;
}
.mpg-drawer.is-open .mpg-drawer__panel { transform: translateX(0); }
.mpg-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px var(--mpg-gutter); border-bottom: 1px solid var(--mpg-line); }
.mpg-drawer__close {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1.5px solid var(--mpg-line); border-radius: var(--mpg-r-sm);
    color: var(--mpg-navy); cursor: pointer; flex: 0 0 44px;
}
.mpg-drawer__close svg { width: 20px; height: 20px; }
.mpg-drawer__nav { padding: 8px var(--mpg-gutter); flex: 1; }
.mpg-drawer__foot { padding: 16px var(--mpg-gutter) 24px; border-top: 1px solid var(--mpg-line); display: grid; gap: 10px; }

.mpg-menu--mobile { flex-direction: column; align-items: stretch; gap: 0; }
.mpg-menu--mobile .mpg-menu__item { border-bottom: 1px solid var(--mpg-line-soft); }
.mpg-menu--mobile .mpg-menu__item--parent { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.mpg-menu--mobile .mpg-menu__link { min-height: 52px; font-size: 16px; padding: 10px 2px; border-radius: 0; }
.mpg-menu--mobile .mpg-menu__link:hover { background: none; }
.mpg-menu--mobile .mpg-menu__toggle { display: inline-flex; }
.mpg-menu--mobile .mpg-submenu {
    position: static; grid-column: 1 / -1; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 8px 14px; min-width: 0;
    display: none;
}
.mpg-menu--mobile .mpg-menu__toggle[aria-expanded="true"] + .mpg-submenu { display: block; }
.mpg-menu--mobile .mpg-submenu .mpg-menu__link { min-height: 44px; font-size: 15px; color: var(--mpg-muted); }

/* Khoá cuộn nền khi ngăn kéo mở — chặn ở <html> để iOS không cuộn lén */
.mpg-lock, .mpg-lock body { overflow: hidden; }

/* ---------- GHI CHÚ CHO QUẢN TRỊ VIÊN ---------- */
.mpg-demo-note { background: #fff8e6; border-block: 1px solid #f0dca8; padding: 18px 0; font-size: var(--mpg-small); }
.mpg-demo-note__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #8a5a00; margin: 0 0 8px; }
.mpg-demo-note__title svg { width: 18px; height: 18px; }
.mpg-demo-note p { margin: 0 0 8px; color: #6b4b12; }
.mpg-demo-note ul { margin: 0 0 8px; padding-left: 22px; color: #6b4b12; }
.mpg-demo-note li { margin-bottom: 4px; }
.mpg-demo-note__off { margin: 0; font-size: 13px; }

/* ---------- TIÊU ĐỀ KHỐI ---------- */
.mpg-head { max-width: 700px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.mpg-head h2 { margin: 10px 0 12px; }
.mpg-head__desc { color: var(--mpg-muted); margin: 0; }
.mpg-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--mpg-blue); }
.mpg-eyebrow--on-dark { color: rgba(255,255,255,.82); }

/* ---------- HERO ---------- */
.mpg-hero {
    background: var(--mpg-navy);
    color: #fff; padding-block: clamp(52px, 6vw, 92px);
    position: relative; overflow: hidden;
}
.mpg-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(760px 380px at 86% -20%, rgba(21,101,192,.42), transparent 66%);
}
.mpg-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr;
    gap: clamp(32px, 5vw, 72px); align-items: center; }

/* ---------- HERO DẠNG TRÌNH CHIẾU ----------
   Mọi slide nằm chồng trong cùng một ô lưới nên khung hero luôn cao bằng slide
   dài nhất — chuyển slide không làm trang giật (CLS = 0). Slide không hiển thị
   dùng visibility:hidden nên cũng bị loại khỏi thứ tự tab của bàn phím. */
.mpg-hero--slider { padding-bottom: clamp(74px, 7vw, 116px); }
.mpg-hero__slides { position: relative; z-index: 1; display: grid; }
.mpg-hero__slide {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden;
    transform: translateX(18px);
    transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.mpg-hero__slide.is-active { opacity: 1; visibility: visible; transform: none; }

.mpg-hero__controls {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    margin-top: clamp(24px, 3vw, 36px);
}
.mpg-hero__arrow, .mpg-hero__play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, .10); color: #fff;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
    transition: background-color .18s ease, border-color .18s ease;
}
.mpg-hero__arrow:hover, .mpg-hero__play:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }
.mpg-hero__arrow svg, .mpg-hero__play svg { width: 20px; height: 20px; }
.mpg-hero__play { margin-left: auto; }
.mpg-hero__play .mpg-ic-play { display: none; }
.mpg-hero__play.is-paused .mpg-ic-pause { display: none; }
.mpg-hero__play.is-paused .mpg-ic-play { display: block; }

.mpg-hero__dots { display: flex; align-items: center; gap: 8px; }
.mpg-hero__dot {
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mpg-hero__dot span {
    display: block; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255, 255, 255, .34);
    transition: background-color .2s ease, width .2s ease, border-radius .2s ease;
}
.mpg-hero__dot:hover span { background: rgba(255, 255, 255, .62); }
.mpg-hero__dot.is-active span { width: 30px; border-radius: 999px; background: #fff; }
.mpg-hero__title { color: #fff; margin: 14px 0 18px; }
.mpg-hero__desc { color: rgba(255,255,255,.88); font-size: clamp(16px, 1rem + .2vw, 18px); max-width: 54ch; margin: 0; }
.mpg-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.mpg-hero__media { position: relative; }
.mpg-hero__img { display: block; width: 100%; border-radius: var(--mpg-r-lg); }
.mpg-hero__panel {
    display: grid; gap: 14px; padding: 30px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--mpg-r-lg);
}
.mpg-hero__panel-mark { display: block; margin-bottom: 6px; }
.mpg-hero__panel-bar { display: block; height: 10px; width: var(--w); background: rgba(255,255,255,.26); border-radius: 999px; }
.mpg-hero__panel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.mpg-hero__panel-grid i { display: block; height: 44px; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16); border-radius: var(--mpg-r-sm); }

/* ---------- LƯỚI & THẺ ---------- */
.mpg-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mpg-gap); }
.mpg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mpg-grid--4 { grid-template-columns: repeat(4, 1fr); }

.mpg-card {
    background: #fff; border: 1px solid var(--mpg-line); border-radius: var(--mpg-r);
    padding: 28px 24px; box-shadow: var(--mpg-shadow);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mpg-card:hover { border-color: var(--mpg-blue); box-shadow: var(--mpg-shadow-lg); transform: translateY(-3px); }

/* Ô biểu tượng: màu truyền từ PHP qua --c (nét) và --c-soft (nền dịu).
   Không dùng color-mix để chạy được trên cả trình duyệt cũ. */
.mpg-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--mpg-r-sm); flex: 0 0 48px;
    background: var(--c-soft, var(--mpg-bg-soft));
    color: var(--c, var(--mpg-navy));
    margin-bottom: 16px;
    box-shadow: inset 0 0 0 1px rgba(11, 45, 91, .06);
    transition: transform .2s ease;
}
.mpg-ico svg { width: 24px; height: 24px; }
.mpg-ico--lg { width: 58px; height: 58px; flex-basis: 58px; border-radius: var(--mpg-r); }
.mpg-ico--lg svg { width: 28px; height: 28px; }
.mpg-card:hover .mpg-ico, .mpg-value:hover .mpg-ico { transform: scale(1.06); }

/* ---------- ẢNH BÌA DỰNG SẴN ---------- */
.mpg-cover, .mpg-cover-img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
}
.mpg-cover { background: var(--mpg-navy); }

.mpg-empty { text-align: center; color: var(--mpg-muted); background: var(--mpg-bg-soft);
    border: 1px dashed var(--mpg-line); border-radius: var(--mpg-r); padding: 24px; margin: 0; }
.mpg-more { text-align: center; margin: clamp(30px, 3.5vw, 44px) 0 0; }

/* ---------- GIỚI THIỆU ---------- */
.mpg-about__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 68px); align-items: start; }
.mpg-about__intro h2 { margin: 10px 0 16px; }
.mpg-about__lead { font-size: clamp(16.5px, 1rem + .25vw, 19px); color: var(--mpg-ink); font-weight: 600; line-height: 1.6; }
.mpg-about__body { color: var(--mpg-muted); }
.mpg-pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mpg-pillar { display: flex; gap: 18px; padding: 22px; background: var(--mpg-bg-soft);
    border-radius: var(--mpg-r); border: 1px solid var(--mpg-line-soft); }
.mpg-pillar .mpg-ico { margin-bottom: 0; background: #fff; }
.mpg-pillar h3 { margin: 0 0 6px; }
.mpg-pillar p { margin: 0; color: var(--mpg-muted); font-size: var(--mpg-small); line-height: 1.66; }

/* ---------- LĨNH VỰC ---------- */
.mpg-field { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mpg-field__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mpg-navy); }
.mpg-field__media .mpg-cover, .mpg-field__media .mpg-cover-img { transition: transform .35s ease; }
.mpg-field:hover .mpg-field__media .mpg-cover,
.mpg-field:hover .mpg-field__media .mpg-cover-img { transform: scale(1.05); }
/* Ô biểu tượng nhô lên đè mép ảnh cho thẻ có chiều sâu */
.mpg-field__body { padding: 0 24px 26px; margin-top: -26px; position: relative; flex: 1; display: flex; flex-direction: column; }
.mpg-field__body .mpg-ico { background: #fff; box-shadow: 0 4px 14px rgba(11, 45, 91, .14); }
.mpg-field__title { margin: 0 0 10px; }
.mpg-field__title a { color: var(--mpg-ink); text-decoration: none; }
.mpg-field__title a:hover { color: var(--mpg-blue); }
.mpg-field__desc { color: var(--mpg-muted); margin: 0; font-size: var(--mpg-small); line-height: 1.7; flex: 1; }
.mpg-field .mpg-textlink--sm { color: var(--mpg-blue); }

/* ---------- GIÁ TRỊ KHÁC BIỆT ---------- */
.mpg-value { text-align: center; padding: 8px; }
.mpg-value .mpg-ico { margin-inline: auto; }
.mpg-value h3 { margin: 0 0 8px; }
.mpg-value p { margin: 0; color: var(--mpg-muted); font-size: var(--mpg-small); line-height: 1.7; }

/* ---------- DỰ ÁN ---------- */
.mpg-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: clamp(24px, 3vw, 36px); }
.mpg-filter__btn {
    min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--mpg-line); color: var(--mpg-muted);
    font: inherit; font-size: var(--mpg-small); font-weight: 600;
    transition: all .16s ease;
}
.mpg-filter__btn:hover { border-color: var(--mpg-blue); color: var(--mpg-blue); }
.mpg-filter__btn.is-active { background: var(--mpg-navy); border-color: var(--mpg-navy); color: #fff; }
.mpg-project { padding: 0; overflow: hidden; }
.mpg-project[hidden] { display: none; }
.mpg-project__link { display: block; text-decoration: none; color: inherit; }
.mpg-project__thumb { display: block; aspect-ratio: 3 / 2; background: var(--mpg-navy); overflow: hidden; }
.mpg-project__thumb .mpg-cover, .mpg-project__thumb .mpg-cover-img { transition: transform .35s ease; }
.mpg-project__link:hover .mpg-project__thumb .mpg-cover,
.mpg-project__link:hover .mpg-project__thumb .mpg-cover-img { transform: scale(1.05); }
.mpg-project__body { display: block; padding: 20px 22px 24px; }
.mpg-project__cat { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--mpg-blue); margin-bottom: 8px; }
.mpg-project__title { display: block; font-size: var(--mpg-h3); font-weight: 600; color: var(--mpg-ink); line-height: 1.4; }
.mpg-project__link:hover .mpg-project__title { color: var(--mpg-blue); }

/* ---------- QUY TRÌNH ---------- */
.mpg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--mpg-gap); }
.mpg-step { position: relative; padding-top: 22px; border-top: 3px solid var(--mpg-line); }
.mpg-step::before { content: ''; position: absolute; top: -3px; left: 0; width: 34px; height: 3px; background: var(--mpg-red); }
.mpg-step__no { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--mpg-blue); margin-bottom: 8px; }
.mpg-step h3 { margin: 0 0 8px; }
.mpg-step p { margin: 0; color: var(--mpg-muted); font-size: var(--mpg-small); line-height: 1.68; }

/* ---------- TIN TỨC ---------- */
.mpg-post { padding: 0; overflow: hidden; }
.mpg-post__thumb { display: block; aspect-ratio: 3 / 2; background: var(--mpg-navy); overflow: hidden; }
.mpg-post__thumb .mpg-cover, .mpg-post__thumb .mpg-cover-img { transition: transform .35s ease; }
.mpg-post:hover .mpg-post__thumb .mpg-cover,
.mpg-post:hover .mpg-post__thumb .mpg-cover-img { transform: scale(1.05); }
.mpg-post__body { padding: 20px 22px 24px; }
.mpg-post__date { display: block; font-size: 13px; color: var(--mpg-muted); margin-bottom: 8px; }
.mpg-post__title { margin: 0 0 10px; }
.mpg-post__title a { color: var(--mpg-ink); text-decoration: none; }
.mpg-post__title a:hover { color: var(--mpg-blue); }
.mpg-post__excerpt { margin: 0; color: var(--mpg-muted); font-size: var(--mpg-small); line-height: 1.7; }

/* ---------- DẢI CTA ---------- */
.mpg-ctaband { background: var(--mpg-navy); color: #fff; padding-block: clamp(40px, 4.5vw, 62px); }
.mpg-ctaband__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.mpg-ctaband h2 { color: #fff; margin: 0 0 8px; }
.mpg-ctaband p { color: rgba(255,255,255,.86); margin: 0; max-width: 62ch; }
.mpg-ctaband__act { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- CHÂN TRANG ---------- */
.mpg-footer { background: var(--mpg-navy); color: rgba(255,255,255,.76); font-size: var(--mpg-small); }
.mpg-footer__grid { display: grid; grid-template-columns: 1.45fr 1.15fr 1fr 1fr;
    gap: clamp(28px, 3.5vw, 52px); padding-block: clamp(44px, 4.5vw, 68px); }
.mpg-footer__about { margin: 18px 0 0; line-height: 1.75; max-width: 42ch; }
.mpg-footer__title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 16px; letter-spacing: .01em; }
.mpg-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mpg-footer__contact li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.65; }
.mpg-footer__contact svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 4px; opacity: .72; }
/* Màu link mặc định trong chân trang — để ở độ ưu tiên 0 (:where) để không đè
   lên màu riêng của các nút nằm trong chân trang. Đây chính là lỗi đã gặp:
   quy tắc `.mpg-footer a` mạnh hơn `.mpg-btn--light`, khiến nút nền trắng bị
   tô chữ trắng và biến mất. */
:where(.mpg-footer a) { color: rgba(255,255,255,.82); text-decoration: none; }
:where(.mpg-footer a:hover) { color: #fff; text-decoration: underline; }
.mpg-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mpg-footer__menu a { display: inline-block; padding: 2px 0; }

.mpg-social { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; }
.mpg-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid rgba(255,255,255,.22); border-radius: var(--mpg-r-sm); color: #fff; }
.mpg-social a:hover { background: rgba(255,255,255,.12); }
.mpg-social svg { width: 19px; height: 19px; }

/* =====================================================================
   TRANG GIỚI THIỆU
   ===================================================================== */

/* Đầu trang có đường dẫn (breadcrumb) */
.mpg-hero--page { padding-block: clamp(30px, 3.5vw, 52px) clamp(52px, 6vw, 88px); }
.mpg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    font-size: 13.5px; color: rgba(255, 255, 255, .62); margin-bottom: clamp(24px, 3vw, 40px); }
.mpg-crumb a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.mpg-crumb a:hover { color: #fff; text-decoration: underline; }
.mpg-crumb [aria-current] { color: #fff; }

/* Câu chuyện: ảnh trái, chữ phải */
.mpg-story__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.mpg-story__media { border-radius: var(--mpg-r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--mpg-navy); }
.mpg-story__media img, .mpg-story__media .mpg-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpg-story__text h2 { margin: 10px 0 18px; }
.mpg-story__lead { font-size: clamp(16.5px, 1rem + .25vw, 18.5px); font-weight: 600; color: var(--mpg-ink); line-height: 1.62; }
.mpg-story__text p { color: var(--mpg-muted); }
.mpg-story__text p:last-child { margin-bottom: 0; }

/* Tầm nhìn / Sứ mệnh / Giá trị */
.mpg-vmv__item h3 { margin: 0 0 10px; }
.mpg-vmv__item p { margin: 0; color: var(--mpg-muted); line-height: 1.72; font-size: var(--mpg-small); }

/* Cách làm việc — danh sách đánh số */
.mpg-how__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--mpg-gap); }
.mpg-how__item {
    position: relative; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
    padding: 30px 28px; background: #fff; border: 1px solid var(--mpg-line);
    border-radius: var(--mpg-r); box-shadow: var(--mpg-shadow);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.mpg-how__item:hover { border-color: var(--mpg-blue); box-shadow: var(--mpg-shadow-lg); }
/* Số thứ tự: đủ đậm để đọc được. Dùng màu nền nhạt (--mpg-line) thì chỉ đạt
   1,3:1 — gần như vô hình trên nền trắng. */
.mpg-how__no { position: absolute; top: 20px; right: 24px; font-size: 13px; font-weight: 700;
    letter-spacing: .12em; color: var(--mpg-blue); opacity: .85; }
.mpg-how__item .mpg-ico { margin-bottom: 0; }
.mpg-how__txt h3 { margin: 0 0 9px; padding-right: 34px; }
.mpg-how__txt p { margin: 0; color: var(--mpg-muted); line-height: 1.72; font-size: var(--mpg-small); }

/* Cam kết */
.mpg-commit__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.mpg-commit__head h2 { margin: 10px 0 14px; }
.mpg-commit__head p { color: var(--mpg-muted); margin-bottom: 24px; }
.mpg-commit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mpg-commit__list li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px;
    background: #fff; border: 1px solid var(--mpg-line); border-radius: var(--mpg-r);
    color: var(--mpg-ink); line-height: 1.68; font-size: var(--mpg-small); }
.mpg-commit__tick { display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
    background: #e3f3e9; color: #1b7a4b; margin-top: 1px; }
.mpg-commit__tick svg { width: 16px; height: 16px; }

/* Hỏi đáp */
.mpg-abfaq__wrap { max-width: 840px; }
.mpg-abfaq__item { background: #fff; border: 1px solid var(--mpg-line); border-radius: var(--mpg-r);
    margin-bottom: 12px; overflow: hidden; }
.mpg-abfaq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
    align-items: center; gap: 18px; padding: 20px 24px; font-weight: 600; color: var(--mpg-ink);
    font-size: clamp(15.5px, 1rem + .1vw, 17px); line-height: 1.5; }
.mpg-abfaq__item summary::-webkit-details-marker { display: none; }
.mpg-abfaq__item summary svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--mpg-blue);
    transition: transform .2s ease; }
.mpg-abfaq__item[open] summary { color: var(--mpg-blue); }
.mpg-abfaq__item[open] summary svg { transform: rotate(180deg); }
.mpg-abfaq__a { padding: 0 24px 22px; }
.mpg-abfaq__a p { margin: 0; color: var(--mpg-muted); line-height: 1.78; }

/* Nội dung soạn thêm trong WP */
.mpg-pagebody__wrap { max-width: 780px; margin-inline: auto; color: var(--mpg-muted); line-height: 1.8; }
.mpg-pagebody__wrap h2, .mpg-pagebody__wrap h3 { margin: 32px 0 12px; }

/* ---------- ĐƠN VỊ CUNG CẤP GIAO DIỆN ---------- */
.mpg-provider {
    background: rgba(255, 255, 255, .045);
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.mpg-provider__inner {
    display: grid; grid-template-columns: 1.6fr 1fr;
    gap: clamp(24px, 3.5vw, 56px); align-items: center;
    padding-block: clamp(28px, 3vw, 40px);
}
.mpg-provider__eyebrow {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255, 255, 255, .58); margin-bottom: 8px;
}
.mpg-provider__name { margin: 0 0 8px; font-size: clamp(18px, 1.2vw + 14px, 22px); font-weight: 700; color: #fff; line-height: 1.3; }
.mpg-provider__name a { color: #fff; text-decoration: none; }
.mpg-provider__name a:hover { color: #fff; text-decoration: underline; }
.mpg-provider__desc { margin: 0 0 16px; color: rgba(255, 255, 255, .74); line-height: 1.7; max-width: 62ch; }

.mpg-provider__svc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.mpg-provider__svc li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 999px; font-size: 13px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .88);
}
.mpg-provider__svc svg { width: 14px; height: 14px; flex: 0 0 14px; color: #7fd1a0; }

.mpg-provider__side { display: grid; gap: 16px; justify-items: start; }
.mpg-provider__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mpg-provider__contact li { display: flex; align-items: center; gap: 10px; }
.mpg-provider__contact svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .68; }
.mpg-provider__contact a { color: #fff; text-decoration: none; font-weight: 600; }
.mpg-provider__contact a:hover { text-decoration: underline; color: #fff; }
.mpg-provider__side .mpg-btn { white-space: nowrap; }

/* ---------- GHI CHÚ DỮ LIỆU MẪU (khách truy cập đều thấy) ---------- */
.mpg-samplenote { background: rgba(0, 0, 0, .26); border-top: 1px solid rgba(255, 255, 255, .10); }
.mpg-samplenote p {
    display: flex; align-items: flex-start; gap: 10px; margin: 0;
    padding-block: 16px; font-size: 13.5px; line-height: 1.65;
    color: rgba(255, 255, 255, .72);
}
.mpg-samplenote svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; opacity: .8; }

.mpg-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); }
.mpg-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding-block: 20px; }
.mpg-copy { margin: 0; font-size: 13.5px; }
.mpg-legal__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; }

/* ---------- KHỐI LIÊN HỆ + BIỂU MẪU ---------- */
.mpg-contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.mpg-contact__intro h2 { margin: 10px 0 14px; }
.mpg-contact__lead { color: var(--mpg-muted); margin-bottom: 28px; }
.mpg-contact__info { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.mpg-contact__info li { display: flex; gap: 16px; align-items: flex-start; }
.mpg-contact__info .mpg-ico { margin-bottom: 0; background: #fff; }
.mpg-contact__lbl { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mpg-muted); margin-bottom: 3px; }
.mpg-contact__info a { color: var(--mpg-navy); font-weight: 600; text-decoration: none; }
.mpg-contact__info a:hover { color: var(--mpg-blue); text-decoration: underline; }

.mpg-formwrap { background: #fff; border: 1px solid var(--mpg-line); border-radius: var(--mpg-r);
    padding: clamp(22px, 3vw, 34px); box-shadow: var(--mpg-shadow); }
.mpg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.mpg-field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.mpg-field--full { grid-column: 1 / -1; }
.mpg-field label { font-size: var(--mpg-small); font-weight: 600; color: var(--mpg-ink); }
.mpg-req { color: var(--mpg-red); }
.mpg-field input, .mpg-field select, .mpg-field textarea {
    font: inherit; font-size: var(--mpg-small); color: var(--mpg-ink);
    min-height: 46px; padding: 11px 14px; width: 100%;
    background: #fff; border: 1.5px solid var(--mpg-line); border-radius: var(--mpg-r-sm);
    transition: border-color .16s ease;
}
.mpg-field textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.mpg-field input:hover, .mpg-field select:hover, .mpg-field textarea:hover { border-color: var(--mpg-navy-300); }
/* Thông báo lỗi của trình duyệt (reportValidity) đi kèm viền đỏ cho dễ thấy */
.mpg-field input:invalid:not(:placeholder-shown),
.mpg-field textarea:invalid:not(:placeholder-shown) { border-color: var(--mpg-red); }

.mpg-consent { display: flex; gap: 11px; align-items: flex-start; font-weight: 400;
    font-size: var(--mpg-small); color: var(--mpg-muted); line-height: 1.6; cursor: pointer; }
.mpg-consent input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; margin-top: 2px; padding: 0; accent-color: var(--mpg-blue); }

.mpg-btn--block { width: 100%; min-height: 52px; }
.mpg-btn.is-loading { opacity: .65; pointer-events: none; }

.mpg-form__status { display: none; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--mpg-r-sm);
    font-size: var(--mpg-small); line-height: 1.6; }
.mpg-form__status.is-ok  { display: block; background: #e8f6ed; color: #17603a; border: 1px solid #b9e2c9; }
.mpg-form__status.is-err { display: block; background: #fdecec; color: #9b1c1c; border: 1px solid #f5bcbc; }

.mpg-form__micro { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; margin: 0;
    font-size: 13px; color: var(--mpg-muted); line-height: 1.6; }
.mpg-form__micro svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }

/* Bẫy bot: giấu khỏi mắt người và khỏi luồng tab, nhưng bot vẫn thấy trong DOM */
.mpg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- VÙNG CHẠM ----------
   Các liên kết nằm trong tiêu đề hoặc dòng văn bản vốn chỉ cao bằng dòng chữ.
   Dùng padding cộng margin âm cùng giá trị: vùng bấm nở ra đủ lớn cho ngón
   tay mà khoảng cách nhìn thấy giữa các phần tử vẫn giữ nguyên. */
.mpg-field__title a,
.mpg-post__title a,
.mpg-contact__info a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
}
.mpg-textlink { min-height: 44px; }

/* =====================================================================
   CỤM NÚT GỌI NỔI
   Góc dưới bên trái. Trên điện thoại thì ẩn — đã có thanh hành động ở đáy.
   ===================================================================== */
.mpg-call {
    position: fixed; left: 20px; bottom: 22px; z-index: 95;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}

/* --- Các kênh phụ: Zalo, Messenger, email, chỉ đường --- */
.mpg-call__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mpg-call__btn {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; color: var(--mpg-navy); text-decoration: none;
    border: 1px solid var(--mpg-line);
    box-shadow: 0 4px 14px rgba(11, 45, 91, .16);
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.mpg-call__btn svg { width: 21px; height: 21px; }
.mpg-call__btn:hover { background: var(--mpg-navy); color: #fff; transform: translateY(-2px); }
.mpg-call__item--zalo .mpg-call__btn:hover      { background: #0068ff; border-color: #0068ff; }
.mpg-call__item--messenger .mpg-call__btn:hover { background: #0084ff; border-color: #0084ff; }
.mpg-call__item--mail .mpg-call__btn:hover      { background: var(--mpg-blue); border-color: var(--mpg-blue); }
.mpg-call__item--map .mpg-call__btn:hover       { background: var(--mpg-red); border-color: var(--mpg-red); }

/* --- Nút gọi chính --- */
.mpg-call__phone {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; text-decoration: none;
}
.mpg-call__core {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--mpg-red); color: #fff;
    box-shadow: 0 6px 20px rgba(214, 40, 40, .40);
    transition: transform .2s ease, background-color .2s ease;
}
.mpg-call__core svg { width: 26px; height: 26px; }
.mpg-call__phone:hover .mpg-call__core { background: var(--mpg-red-700); transform: scale(1.06); }

/* Hai vòng sóng lan toả */
.mpg-call__ring {
    position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
    border-radius: 50%; background: var(--mpg-red); opacity: .32; z-index: 1;
    animation: mpg-ring 2.2s cubic-bezier(.2, .6, .3, 1) infinite;
}
.mpg-call__ring--2 { animation-delay: 1.1s; }
@keyframes mpg-ring {
    0%   { transform: scale(1);   opacity: .34; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* --- Nhãn hiện khi rê chuột --- */
.mpg-call__tip {
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-6px, -50%);
    white-space: nowrap; pointer-events: none;
    background: var(--mpg-navy); color: #fff;
    font-size: 13.5px; font-weight: 600; line-height: 1;
    padding: 10px 14px; border-radius: var(--mpg-r-sm);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    box-shadow: var(--mpg-shadow);
    z-index: 3;
}
.mpg-call__tip::before {
    content: ''; position: absolute; right: 100%; top: 50%; margin-top: -5px;
    border: 5px solid transparent; border-right-color: var(--mpg-navy);
}
.mpg-call__tip b { font-weight: 700; }
.mpg-call__tip--main { background: var(--mpg-red); }
.mpg-call__tip--main::before { border-right-color: var(--mpg-red); }

.mpg-call__btn:hover .mpg-call__tip,
.mpg-call__btn:focus-visible .mpg-call__tip,
.mpg-call__phone:hover .mpg-call__tip,
.mpg-call__phone:focus-visible .mpg-call__tip {
    opacity: 1; visibility: visible; transform: translate(0, -50%);
}

/* ---------- THANH HÀNH ĐỘNG TRÊN MOBILE ---------- */
.mpg-callbar { display: none; }

/* =====================================================================
   MÀN HÌNH NHỎ DẦN
   Điểm ngắt bám theo các bề ngang cần kiểm thử: 1440 / 1024 / 768 / 390 / 360
   ===================================================================== */

/* Menu 7 mục + logo + nút CTA cần khoảng 1250px mới đủ chỗ. Dưới ngưỡng đó bỏ
   nút CTA ở thanh trên (đã có trong ngăn kéo và ở dải CTA), và thu gọn khoảng
   đệm của menu — nếu không, thanh đầu trang sẽ đẩy trang tràn ngang. */
@media (max-width: 1249px) {
    .mpg-bar__cta { display: none; }
    .mpg-menu__link { padding: 8px 9px; }
}

@media (max-width: 1080px) {
    .mpg-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .mpg-steps { grid-template-columns: repeat(3, 1fr); }
    .mpg-footer__grid { grid-template-columns: 1fr 1fr; }
    .mpg-provider__inner { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
    .mpg-story__grid, .mpg-commit__grid { grid-template-columns: 1fr; }
    .mpg-story__media { max-width: 580px; }
    .mpg-how__list { grid-template-columns: 1fr; }
    .mpg-contact__grid { grid-template-columns: 1fr; }
    .mpg-nav { display: none; }
    .mpg-burger { display: flex; }
    .mpg-bar__cta { display: none; }
    .mpg-hero__inner { grid-template-columns: 1fr; }
    .mpg-hero__media { order: -1; max-width: 460px; }
    .mpg-about__grid { grid-template-columns: 1fr; }
    .mpg-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    /* Điện thoại đã có thanh hành động ở đáy — bày thêm cụm nút nổi sẽ che nội dung */
    .mpg-call { display: none; }
    .mpg-topbar__item--hours { display: none; }
    /* Trên điện thoại, số điện thoại và email ở topbar là nút bấm thật sự */
    .mpg-topbar__item { min-height: 44px; }
    .mpg-topbar__inner { justify-content: center; gap: 18px; }
    .mpg-topbar__spacer { display: none; }
    .mpg-grid--3, .mpg-grid--4 { grid-template-columns: 1fr; }
    .mpg-form__grid { grid-template-columns: 1fr; }
    .mpg-steps { grid-template-columns: 1fr; gap: 20px; }
    .mpg-footer__grid { grid-template-columns: 1fr; }
    .mpg-provider__inner { grid-template-columns: 1fr; }
    .mpg-provider__side { justify-items: stretch; }
    .mpg-provider__side .mpg-btn { width: 100%; }
    .mpg-ctaband__inner { flex-direction: column; align-items: flex-start; }
    .mpg-ctaband__act { width: 100%; }
    .mpg-ctaband__act .mpg-btn { flex: 1 1 auto; }
    .mpg-hero__cta .mpg-btn { flex: 1 1 100%; }
    .mpg-hero__controls { justify-content: center; }
    .mpg-hero__play { margin-left: 0; }
    .mpg-footer__bottom-inner { flex-direction: column; align-items: flex-start; }

    /* Thanh gọi nhanh cố định dưới đáy. Body chừa sẵn khoảng trống bằng chiều
       cao thanh + vùng an toàn của máy, nên không bao giờ che nội dung. */
    .mpg-callbar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; inset-inline: 0; bottom: 0; z-index: 100;
        background: #fff; border-top: 1px solid var(--mpg-line);
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -2px 14px rgba(11,45,91,.10);
    }
    .mpg-callbar__btn {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 56px; padding: 8px 4px; text-decoration: none;
        color: var(--mpg-navy); font-size: 12px; font-weight: 600;
    }
    .mpg-callbar__btn svg { width: 20px; height: 20px; }
    .mpg-callbar__btn--call { color: var(--mpg-red); }
    .mpg-callbar__btn--cta { color: var(--mpg-blue); }
    .mpg-callbar__btn + .mpg-callbar__btn { border-left: 1px solid var(--mpg-line-soft); }
    /* Khoảng chừa phải LỚN HƠN chiều cao thật của thanh (nút 56px + viền trên
       + làm tròn), cộng thêm chút thở. Để đúng 56px thì mấy pixel cuối của nội
       dung vẫn bị thanh che. */
    .mpg { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 400px) {
    .mpg-topbar__inner { gap: 12px; }
    .mpg-topbar { font-size: 12.5px; }
    .mpg-hero__panel { padding: 22px; }
    .mpg-card { padding: 24px 20px; }
}

/* =====================================================================
   HIỆU ỨNG CHUYỂN ĐỘNG

   Nguyên tắc: chỉ chạy `transform` và `opacity` — hai thuộc tính trình duyệt
   xử lý trên GPU, không bắt tính lại bố cục nên không gây giật và không ảnh
   hưởng CLS. KHÔNG áp hiệu ứng cho khối hero: nó nằm ngay màn hình đầu, giấu
   đi rồi hiện lại sẽ làm chậm mốc LCP.

   Chỉ giấu nội dung khi trang có JavaScript (lớp .mpg-js đặt trong <head>) —
   người tắt JS vẫn thấy đủ mọi thứ.
   ===================================================================== */

/* Danh sách phần tử sẽ hiện dần khi cuộn tới. Viết thẳng bộ chọn ở CSS thay
   vì để JS gắn lớp — nếu để JS gắn thì phần tử hiện ra rồi mới bị giấu đi,
   mắt thấy rõ một nhịp nháy. */
.mpg-js :is(
    .mpg-section .mpg-head,
    .mpg-card,
    .mpg-value,
    .mpg-step,
    .mpg-pillar,
    .mpg-about__intro,
    .mpg-story__text,
    .mpg-commit__head,
    .mpg-commit__list li,
    .mpg-how__item,
    .mpg-abfaq__item,
    .mpg-filter,
    .mpg-more,
    .mpg-contact__intro,
    .mpg-formwrap,
    .mpg-provider__main,
    .mpg-provider__side,
    .mpg-anim
) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .62s cubic-bezier(.22, .68, .36, 1) var(--d, 0ms),
                transform .62s cubic-bezier(.22, .68, .36, 1) var(--d, 0ms);
}

/* Ảnh khối Câu chuyện trượt vào từ bên trái cho khác nhịp với phần chữ */
.mpg-js .mpg-story__media { opacity: 0; transform: translateX(-28px);
    transition: opacity .68s cubic-bezier(.22,.68,.36,1), transform .68s cubic-bezier(.22,.68,.36,1); }

.mpg-js .is-in { opacity: 1 !important; transform: none !important; }

/* ---------- Vệt sáng trôi chậm trong nền hero ---------- */
.mpg-hero::after { animation: mpg-drift 18s ease-in-out infinite alternate; }
@keyframes mpg-drift {
    from { transform: translate3d(0, 0, 0)   scale(1); }
    to   { transform: translate3d(-4%, 3%, 0) scale(1.12); }
}

/* Ảnh hero dập dềnh rất nhẹ — biên độ 6px, đủ để trang "có nhịp thở" */
.mpg-hero__img, .mpg-hero__panel { animation: mpg-float 7s ease-in-out infinite alternate; }
@keyframes mpg-float {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -6px, 0); }
}

/* ---------- Gạch chân trượt ở menu ---------- */
.mpg-menu__link { position: relative; }
.mpg-menu__link::before {
    content: ''; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2px;
    background: var(--mpg-blue); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .26s cubic-bezier(.22, .68, .36, 1);
}
.mpg-menu__link:hover::before { transform: scaleX(1); }
.mpg-menu--mobile .mpg-menu__link::before { display: none; }

/* ---------- Nút: nhấc nhẹ khi rê chuột ---------- */
.mpg-btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease,
                       transform .18s ease, box-shadow .18s ease; }
.mpg-btn--primary:hover, .mpg-btn--light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 45, 91, .22);
}
.mpg-btn:active { transform: translateY(0); }

/* ---------- Chip dịch vụ ở chân trang ---------- */
.mpg-provider__svc li { transition: background-color .2s ease, transform .2s ease; }
.mpg-provider__svc li:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }

/* ---------- Thẻ quy trình: vệt màu chạy dọc ---------- */
.mpg-step::before { transition: width .4s cubic-bezier(.22, .68, .36, 1); }
.mpg-step:hover::before { width: 100%; }

/* ---------- Mở/đóng hỏi đáp mượt hơn ---------- */
.mpg-abfaq__item { transition: border-color .2s ease, box-shadow .2s ease; }
.mpg-abfaq__item[open] { border-color: var(--mpg-blue); box-shadow: var(--mpg-shadow); }
.mpg-abfaq__item[open] .mpg-abfaq__a { animation: mpg-slidedown .32s ease; }
@keyframes mpg-slidedown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- TÔN TRỌNG TUỲ CHỌN GIẢM CHUYỂN ĐỘNG ---------- */
@media (prefers-reduced-motion: reduce) {
    .mpg *, .mpg *::before, .mpg *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .mpg-drawer__panel { transition: none; }
    /* Trình chiếu: bỏ hiệu ứng trượt, chỉ đổi slide tức thì (script cũng tự
       tắt chế độ tự chuyển khi người dùng bật giảm chuyển động). */
    .mpg-hero__slide { transition: none; transform: none; }

    /* Hiệu ứng cuộn: hiện luôn, không giấu gì cả */
    .mpg-js .mpg-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
    /* Tắt mọi chuyển động nền */
    .mpg-hero::after, .mpg-hero__img, .mpg-hero__panel { animation: none !important; }
    .mpg-abfaq__item[open] .mpg-abfaq__a { animation: none !important; }
    /* Nút gọi: bỏ sóng lan, giữ nguyên nút để vẫn bấm gọi được */
    .mpg-call__ring { animation: none !important; opacity: .18; transform: none !important; }
    .mpg-call__btn:hover, .mpg-call__phone:hover .mpg-call__core { transform: none; }
    .mpg-menu__link::before { transition: none; }
    .mpg-btn--primary:hover, .mpg-btn--light:hover { transform: none; box-shadow: none; }
    .mpg-card:hover { transform: none; }
    .mpg-card:hover .mpg-ico, .mpg-value:hover .mpg-ico { transform: none; }
    .mpg-field:hover .mpg-field__media .mpg-cover,
    .mpg-field:hover .mpg-field__media .mpg-cover-img,
    .mpg-post:hover .mpg-post__thumb .mpg-cover,
    .mpg-post:hover .mpg-post__thumb .mpg-cover-img,
    .mpg-project__link:hover .mpg-project__thumb .mpg-cover,
    .mpg-project__link:hover .mpg-project__thumb .mpg-cover-img { transform: none; }
}

/* ---------- IN ẤN ---------- */
@media print {
    .mpg-header, .mpg-drawer, .mpg-callbar, .mpg-ctaband, .mpg-demo-note { display: none !important; }
    .mpg-hero { background: none; color: #000; }
    .mpg-hero__title, .mpg-hero__desc { color: #000; }
}