/* ==========================================================================
   MH CONSULTING — giao diện WordPress độc lập
   Phương án thiết kế: Modern Growth

   Tệp này dùng chung cho mặt trước và cho trình soạn thảo khối
   (xem add_editor_style trong inc/setup.php), nên phần lớn quy tắc bám vào
   class 'mhc-' thay vì bám vào cấu trúc trang.

   MỤC LỤC
     1. Phông chữ            9.  Dải lợi ích
     2. Tokens               10. Dịch vụ (lưới bento)
     3. Nền tảng             11. Danh sách, quy trình, bảng giá
     4. Bố cục               12. Đánh giá, câu hỏi thường gặp
     5. Nút                  13. Bài viết
     6. Biểu mẫu             14. Chân trang
     7. Đầu trang + menu     15. Liên hệ nổi
     8. Hero                 16. Giảm chuyển động, in ấn
   ========================================================================== */


/* ============================================================ 1. PHÔNG CHỮ */

@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/bvp-400-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/bvp-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/bvp-600-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/bvp-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/bvp-800-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/bvp-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}


/* ============================================================== 2. TOKENS */

:root{
  --mhc-red:#C90012;
  --mhc-red-dark:#97000D;
  --mhc-red-tint:#FDEBEC;
  --mhc-red-tint-2:#F7D6D8;
  --mhc-red-on-dark:#FF6B75;

  --mhc-ink:#242424;
  --mhc-ink-soft:#5F6368;
  --mhc-ink-faint:#8A8F94;
  --mhc-bg:#F7F7F7;
  --mhc-border:#E5E5E5;
  --mhc-border-strong:#CFCFCF;

  --mhc-dark:#141414;
  --mhc-dark-panel:#1E1E1E;
  --mhc-dark-border:#2E2E2E;

  --mhc-error:#B3000F;
  --mhc-error-bg:#FDF1F1;
  --mhc-ok:#16653C;
  --mhc-ok-bg:#EAF6EF;

  --mhc-focus:#C90012;

  --mhc-s3:12px; --mhc-s4:16px; --mhc-s5:20px; --mhc-s6:24px;
  --mhc-s7:32px; --mhc-s8:40px; --mhc-s9:48px; --mhc-s10:64px;
  --mhc-section-y:clamp(48px,6.5vw,96px);

  --mhc-container:1200px;
  --mhc-gutter:20px;

  --mhc-radius:14px;
  --mhc-radius-sm:8px;

  --mhc-shadow-sm:0 1px 2px rgba(20,20,20,.06),0 1px 3px rgba(20,20,20,.05);
  --mhc-shadow-md:0 2px 6px rgba(20,20,20,.06),0 8px 20px rgba(20,20,20,.07);
  --mhc-shadow-lg:0 6px 16px rgba(20,20,20,.08),0 20px 48px rgba(20,20,20,.12);

  --mhc-ease:cubic-bezier(.2,.6,.3,1);
  --mhc-t-fast:140ms;
  --mhc-t:220ms;
}

@media (min-width:768px){ :root{ --mhc-gutter:24px; } }


/* =========================================================== 3. NỀN TẢNG */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.68; color:var(--mhc-ink); background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--mhc-s4); font-weight:800; line-height:1.22;
  letter-spacing:-.025em; color:var(--mhc-ink); text-wrap:balance;
}
h1{ font-size:clamp(2.05rem,4.1vw + 1rem,3.9rem); line-height:1.14; }
h2{ font-size:clamp(1.5rem,1.7vw + 1.05rem,2.25rem); }
h3{ font-size:clamp(1.1875rem,.9vw + 1rem,1.5rem); letter-spacing:-.02em; }
h4{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em; }

p{ margin:0 0 var(--mhc-s4); }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 var(--mhc-s4); padding-left:1.25em; }
img,svg,video,iframe{ max-width:100%; height:auto; }
img{ display:block; }
a{ color:var(--mhc-red); text-underline-offset:2px; }
a:hover{ color:var(--mhc-red-dark); }
button,input,select,textarea{ font:inherit; color:inherit; }
blockquote{ margin:0 0 var(--mhc-s4); padding:0; }
figure{ margin:0; }
hr{ border:0; border-top:1px solid var(--mhc-border); margin:var(--mhc-s8) 0; }
:target{ scroll-margin-top:110px; }

:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--mhc-focus); outline-offset:2px; border-radius:2px; }

.mhc-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mhc-skip{
  position:absolute; left:var(--mhc-s4); top:-100px; z-index:999;
  background:var(--mhc-red); color:#fff; padding:var(--mhc-s3) var(--mhc-s5);
  border-radius:var(--mhc-radius-sm); font-weight:600; text-decoration:none;
  transition:top var(--mhc-t-fast) var(--mhc-ease);
}
.mhc-skip:focus{ top:var(--mhc-s4); color:#fff; }

.mhc-ico{
  width:24px; height:24px; flex:none; display:inline-block; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round;
}
.mhc-ico--sm{ width:18px; height:18px; }
.mhc-ico--lg{ width:28px; height:28px; }


/* ============================================================= 4. BỐ CỤC */

.mhc-container{
  width:100%; max-width:calc(var(--mhc-container) + var(--mhc-gutter) * 2);
  margin-inline:auto; padding-inline:var(--mhc-gutter);
}

/* Mỗi khối trên trang là một Group "alignfull": nền tràn viền, nội dung bên
   trong tự giới hạn ở 1200px. Không phụ thuộc CSS bố cục do WordPress sinh ra. */
.mhc-section{
  padding-block:var(--mhc-section-y);
  padding-inline:var(--mhc-gutter);
}
.mhc-section > *{ max-width:var(--mhc-container); margin-inline:auto; }
.mhc-section--tight{ padding-block:calc(var(--mhc-section-y) * .55); }
.mhc-section--light{ background:var(--mhc-bg); }

.mhc-content{
  max-width:calc(760px + var(--mhc-gutter) * 2);
  margin-inline:auto; padding-inline:var(--mhc-gutter);
  padding-block:0 var(--mhc-section-y);
}
.mhc-content > * + *{ margin-top:var(--mhc-s5); }
/* Trang dựng bằng mẫu khối tự lo chiều rộng — không bọc thêm. */
.mhc-content--bare{ max-width:none; padding:0; }
.mhc-content--bare > * + *{ margin-top:0; }

.mhc-head{ max-width:720px; margin:0 auto var(--mhc-s9); text-align:center; }

/*
 * Tiêu đề căn trái — vì sao làm theo cách này.
 *
 * WordPress in CSS bố cục của khối ra thẻ <style> nội tuyến:
 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
 *       max-width: var(--wp--style--global--content-size);
 *       margin-left: auto !important; margin-right: auto !important;
 *   }
 *
 * Hai lề ngang có !important, nên MỌI quy tắc thường đều thua, kể cả khi nâng
 * độ ưu tiên. Đặt margin-inline:0 là vô ích — khối tiêu đề rộng 720px vẫn bị
 * căn giữa và thụt vào 240px so với nội dung 1200px bên dưới.
 *
 * Cách xử lý: không tranh với lề tự động. Cho khối tiêu đề rộng đúng bằng nội
 * dung (1200px) để lề tự động căn giữa nó trùng khít với các khối khác, rồi giới
 * hạn bề ngang phần chữ ở các phần tử con — nơi quy tắc của WordPress không với tới.
 */
.mhc-head.mhc-head--left{ max-width:var(--mhc-container); text-align:left; }
.mhc-head.mhc-head--left > *{ max-width:720px; margin-inline:0; }

/* WordPress cũng đặt margin-block:20px 0 cho con của khối constrained, làm mất
   khoảng cách dưới tiêu đề. Hai lớp ở đây đủ thắng (quy tắc đó không !important). */
.mhc-section > .mhc-head{ margin-block:0 var(--mhc-s9); }
.mhc-head > *:last-child{ margin-bottom:0; }

.mhc-eyebrow{
  display:inline-block; font-size:.8125rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mhc-red); margin-bottom:var(--mhc-s3);
}
.mhc-lead{ font-size:clamp(1.0625rem,.4vw + 1rem,1.1875rem); color:var(--mhc-ink-soft); }
.mhc-muted{ color:var(--mhc-ink-soft); }
.mhc-note{ font-size:.875rem; color:var(--mhc-ink-soft); }

.mhc-demoflag{
  display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; font-weight:600;
  color:var(--mhc-ink-soft); background:var(--mhc-bg);
  border:1px dashed var(--mhc-border-strong); border-radius:999px; padding:4px 12px;
}

/* Nền tối dùng chung cho nhiều khối */
.mhc-dark{ background:var(--mhc-dark); color:#fff; }
.mhc-dark h1,.mhc-dark h2,.mhc-dark h3,.mhc-dark h4,.mhc-dark strong{ color:#fff; }
.mhc-dark p,.mhc-dark li,.mhc-dark span{ color:#C9C9C9; }
.mhc-dark .mhc-eyebrow{ color:var(--mhc-red-on-dark); }
.mhc-dark a:not(.mhc-btn):not(.wp-block-button__link){ color:var(--mhc-red-on-dark); }
.mhc-dark a:not(.mhc-btn):not(.wp-block-button__link):hover{ color:#fff; }
.mhc-dark :focus-visible{ outline-color:#fff; }

/* Hai cột: dùng khối Columns của WordPress */
.mhc-split{ gap:var(--mhc-s10); align-items:center; }
.mhc-roundimg img{ border-radius:var(--mhc-radius); width:100%; }

/* Lưới 4 ô đều nhau */
.mhc-grid4{ display:grid; gap:var(--mhc-s5); grid-template-columns:1fr; }
@media (min-width:600px){ .mhc-grid4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .mhc-grid4{ grid-template-columns:repeat(4,1fr); } }
.mhc-grid4 > *{ margin:0; max-width:none; }


/* =============================================================== 5. NÚT */

.mhc-btn,
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 24px;
  background:var(--mhc-red); color:#fff; border:1px solid var(--mhc-red);
  border-radius:var(--mhc-radius-sm); font-weight:600; font-size:1rem; line-height:1.2;
  text-align:center; text-decoration:none; cursor:pointer;
  transition:background var(--mhc-t-fast) var(--mhc-ease),
             border-color var(--mhc-t-fast) var(--mhc-ease),
             color var(--mhc-t-fast) var(--mhc-ease),
             transform var(--mhc-t-fast) var(--mhc-ease);
}
.mhc-btn:hover,
.wp-block-button__link:hover{ background:var(--mhc-red-dark); border-color:var(--mhc-red-dark); color:#fff; }
.mhc-btn:active,
.wp-block-button__link:active{ transform:translateY(1px); }
.mhc-btn svg{ flex:none; }

.mhc-btn--secondary{ background:transparent; color:var(--mhc-ink); border-color:var(--mhc-border-strong); }
.mhc-btn--secondary:hover{ background:var(--mhc-bg); border-color:var(--mhc-ink); color:var(--mhc-ink); }
.mhc-dark .mhc-btn--secondary{ color:#fff; border-color:rgba(255,255,255,.45); }
.mhc-dark .mhc-btn--secondary:hover{ background:rgba(255,255,255,.10); border-color:#fff; color:#fff; }

.mhc-btn--light{ background:#fff; color:var(--mhc-red); border-color:#fff; }
.mhc-btn--light:hover{ background:#F1F1F1; border-color:#F1F1F1; color:var(--mhc-red-dark); }

.mhc-btn--block{ display:flex; width:100%; }
.mhc-btn--lg{ min-height:56px; padding:16px 30px; font-size:1.0625rem; }

/* Kiểu "outline" của khối Button */
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--mhc-ink); border-color:var(--mhc-border-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--mhc-bg); border-color:var(--mhc-ink); color:var(--mhc-ink);
}
.mhc-dark .wp-block-button.is-style-outline .wp-block-button__link{
  color:#fff; border-color:rgba(255,255,255,.45);
}
.mhc-dark .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:rgba(255,255,255,.10); border-color:#fff; color:#fff;
}

.mhc-btnrow{ display:flex; flex-wrap:wrap; gap:var(--mhc-s3); }
.wp-block-buttons{ display:flex; flex-wrap:wrap; gap:var(--mhc-s3); }
.wp-block-buttons .wp-block-button{ margin:0; }

.mhc-more{
  display:inline-flex; align-items:center; gap:6px; font-weight:600;
  text-decoration:none; color:var(--mhc-red);
  min-height:44px; padding-block:10px; margin-top:auto;
}
.mhc-more:hover{ text-decoration:underline; }
.mhc-more svg{ transition:transform var(--mhc-t-fast) var(--mhc-ease); }
.mhc-more:hover svg{ transform:translateX(3px); }


/* =========================================================== 6. BIỂU MẪU */

.mhc-form__title{ margin-bottom:var(--mhc-s5); }
/* Canh đáy: nếu một nhãn cao hơn nhãn bên cạnh thì các ô nhập vẫn thẳng hàng. */
.mhc-form__row{ display:grid; gap:var(--mhc-s4); align-items:end; }
@media (min-width:560px){ .mhc-form__row--2{ grid-template-columns:1fr 1fr; } }

/* Bản rút gọn: Họ tên · Số điện thoại · Dịch vụ · Nút gửi trên một hàng.
   Chia theo nhiều mức để ở bề ngang hẹp các ô vẫn cân nhau chứ không lẻ một ô. */
.mhc-form__quick{ display:grid; gap:var(--mhc-s3); align-items:end; grid-template-columns:1fr; }
@media (min-width:600px){ .mhc-form__quick{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .mhc-form__quick{ grid-template-columns:1fr 1fr 1fr auto; } }
.mhc-form__quick .mhc-field{ margin-bottom:0; }
.mhc-form__quickbtn{ height:48px; white-space:nowrap; }

/* align-content:start ngăn lưới của trường chia phần cao dư cho nhãn và ô nhập.
   Thiếu nó, khi một nhãn cao hơn thì ô nhập bên dưới cũng bị kéo cao theo. */
.mhc-field{ display:grid; gap:6px; margin:0 0 var(--mhc-s4); align-content:start; }
.mhc-field label{ font-size:.875rem; font-weight:600; color:var(--mhc-ink); margin:0; }
.mhc-req{ color:var(--mhc-red); }

.mhc-form input[type="text"],
.mhc-form input[type="tel"],
.mhc-form input[type="email"],
.mhc-form input[type="url"],
.mhc-form select,
.mhc-form textarea{
  width:100%; min-height:48px; padding:12px 14px;
  background:#fff; color:var(--mhc-ink); font-size:1rem;
  border:1px solid var(--mhc-border-strong); border-radius:var(--mhc-radius-sm);
  transition:border-color var(--mhc-t-fast) var(--mhc-ease),
             box-shadow var(--mhc-t-fast) var(--mhc-ease);
}
/* Chiều cao cố định cho ô một dòng. Dùng min-height thì chiều cao còn phụ thuộc
   line-height của chữ, mà hai tệp font subset (latin và vietnamese) có metric
   hơi khác nhau — hệ quả là "Số điện thoại" cao hơn "Họ và tên" 8px. */
.mhc-form input[type="text"],
.mhc-form input[type="tel"],
.mhc-form input[type="email"],
.mhc-form input[type="url"],
.mhc-form select{ height:48px; }

.mhc-form textarea{ min-height:104px; height:auto; line-height:1.6; resize:vertical; }
.mhc-form select{
  appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%235F6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.mhc-form input:hover,.mhc-form select:hover,.mhc-form textarea:hover{ border-color:var(--mhc-ink-faint); }
.mhc-form input:focus,.mhc-form select:focus,.mhc-form textarea:focus{
  border-color:var(--mhc-red); box-shadow:0 0 0 3px var(--mhc-red-tint-2); outline:none;
}
.mhc-form ::placeholder{ color:#9AA0A6; opacity:1; }

.mhc-field.is-invalid input,
.mhc-field.is-invalid select,
.mhc-field.is-invalid textarea{ border-color:var(--mhc-error); background:var(--mhc-error-bg); }
.mhc-err{ display:none; font-size:.875rem; color:var(--mhc-error); font-weight:500; }
.mhc-field.is-invalid .mhc-err{ display:block; }

.mhc-consent{
  display:grid!important; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  font-size:.875rem!important; font-weight:400!important; color:var(--mhc-ink-soft)!important;
  line-height:1.55; cursor:pointer; padding-block:4px;
}
.mhc-consent input[type="checkbox"]{
  width:20px; height:20px; margin:2px 0 0; accent-color:var(--mhc-red); min-height:0;
}
.mhc-privacy{ font-size:.8125rem; color:var(--mhc-ink-soft); line-height:1.6; margin-top:var(--mhc-s4); }

/* Bẫy spam — ẩn hoàn toàn nhưng không dùng display:none để bot khó nhận ra */
.mhc-trap{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.mhc-formmsg{
  padding:var(--mhc-s4) var(--mhc-s5); border-radius:var(--mhc-radius-sm);
  font-size:.875rem; line-height:1.6; margin-bottom:var(--mhc-s5);
}
.mhc-formmsg--ok{ border:1px solid #BFE0CE; background:var(--mhc-ok-bg); color:var(--mhc-ok); }
.mhc-formmsg--error{ border:1px solid #E8B4B8; background:var(--mhc-error-bg); color:var(--mhc-error); }

/* Biểu mẫu đặt trên nền tối */
.mhc-dark .mhc-field label,.mhc-cta .mhc-field label{ color:#E8E8E8; }
.mhc-dark .mhc-consent,.mhc-cta .mhc-consent{ color:#BDBDBD!important; }
.mhc-dark .mhc-privacy,.mhc-cta .mhc-privacy{ color:#A8A8A8; }
.mhc-formpanel .mhc-field label{ color:var(--mhc-ink); }
.mhc-formpanel .mhc-consent{ color:var(--mhc-ink-soft)!important; }
.mhc-formpanel .mhc-privacy{ color:var(--mhc-ink-soft); }

.mhc-search{ display:flex; gap:var(--mhc-s3); flex-wrap:wrap; margin-top:var(--mhc-s5); }
.mhc-search input[type="search"]{
  flex:1 1 220px; min-height:48px; padding:12px 14px;
  border:1px solid var(--mhc-border-strong); border-radius:var(--mhc-radius-sm);
}
.mhc-search input[type="search"]:focus{
  border-color:var(--mhc-red); box-shadow:0 0 0 3px var(--mhc-red-tint-2); outline:none;
}


/* ==================================================== 7. ĐẦU TRANG + MENU */

.mhc-topbar{
  background:var(--mhc-red); color:#fff; font-size:.875rem;
}
.mhc-topbar__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--mhc-s3); min-height:42px; padding-block:6px;
}
.mhc-topbar a{ color:#fff; text-decoration:none; }
.mhc-topbar a:hover{ color:#fff; text-decoration:underline; }
.mhc-topbar__list{ display:flex; flex-wrap:wrap; gap:var(--mhc-s5); list-style:none; margin:0; padding:0; }
.mhc-topbar__list li{ display:inline-flex; align-items:center; gap:7px; }
@media (max-width:767px){ .mhc-topbar{ display:none; } }

.mhc-header{
  position:sticky; top:0; z-index:100;
  background:var(--mhc-dark); border-bottom:1px solid var(--mhc-dark-border);
  transition:box-shadow var(--mhc-t) var(--mhc-ease);
}
.mhc-header[data-stuck="true"]{ box-shadow:0 2px 18px rgba(0,0,0,.45); }
.mhc-header__in{ display:flex; align-items:center; gap:var(--mhc-s5); min-height:72px; padding-block:10px; }
.mhc-header__nav{ margin-left:auto; }
.mhc-header__cta{ display:flex; align-items:center; gap:var(--mhc-s3); }

.mhc-logo{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.mhc-logo img{ height:44px; width:auto; max-width:280px; object-fit:contain; }
.mhc-logo--chip{ background:#fff; padding:8px 14px; border-radius:var(--mhc-radius-sm); }
.mhc-logo--text{ flex-direction:column; align-items:flex-start; justify-content:center; line-height:1.2; }
.mhc-logo--text span{ font-weight:800; font-size:1.25rem; color:#fff; letter-spacing:-.02em; }
.mhc-logo--text small{ font-size:.75rem; color:#B9B9B9; }
.mhc-drawer .mhc-logo--text span{ color:var(--mhc-ink); }
.mhc-drawer .mhc-logo--text small{ color:var(--mhc-ink-soft); }
@media (max-width:600px){ .mhc-logo img{ height:38px; } }

.mhc-navlist{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.mhc-navlist a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  color:#E8E8E8; font-weight:500; text-decoration:none; border-radius:var(--mhc-radius-sm);
  transition:color var(--mhc-t-fast) var(--mhc-ease), background var(--mhc-t-fast) var(--mhc-ease);
}
.mhc-navlist a:hover{ color:#fff; background:rgba(255,255,255,.09); }
.mhc-navlist .current-menu-item > a,
.mhc-navlist .current_page_item > a{ color:#fff; position:relative; }
.mhc-navlist .current-menu-item > a::after,
.mhc-navlist .current_page_item > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:8px; height:2px; background:var(--mhc-red);
}
/* Menu con */
.mhc-navlist .sub-menu{
  position:absolute; z-index:10; min-width:220px; margin:0; padding:8px 0; list-style:none;
  background:#fff; border:1px solid var(--mhc-border); border-radius:var(--mhc-radius-sm);
  box-shadow:var(--mhc-shadow-md); display:none;
}
.mhc-navlist li{ position:relative; }
.mhc-navlist li:hover > .sub-menu,
.mhc-navlist li:focus-within > .sub-menu{ display:block; }
.mhc-navlist .sub-menu a{ color:var(--mhc-ink); border-radius:0; width:100%; }
.mhc-navlist .sub-menu a:hover{ background:var(--mhc-bg); color:var(--mhc-red); }

.mhc-burger{ display:none; }
.mhc-js .mhc-burger{
  display:none; align-items:center; justify-content:center;
  width:46px; height:46px; margin-left:auto;
  background:transparent; border:1px solid var(--mhc-dark-border);
  border-radius:var(--mhc-radius-sm); cursor:pointer; color:#fff;
}
.mhc-js .mhc-burger:hover{ background:rgba(255,255,255,.09); border-color:#fff; }

@media (max-width:1023px){
  .mhc-js .mhc-header__nav,
  .mhc-js .mhc-header__cta{ display:none; }
  .mhc-js .mhc-burger{ display:inline-flex; }
  /* Không có JavaScript: menu xuống dòng dưới logo và vẫn dùng được. */
  .mhc-header__in{ flex-wrap:wrap; }
  .mhc-header__nav{ margin-left:0; width:100%; }
  .mhc-navlist .sub-menu{ position:static; display:block; box-shadow:none; border:none; background:transparent; }
  .mhc-navlist .sub-menu a{ color:#C9C9C9; padding-left:28px; }
}

/* Ngăn kéo menu di động */
.mhc-drawer{ position:fixed; inset:0; z-index:200; display:none; }
.mhc-drawer[data-open="true"]{ display:block; }
.mhc-drawer__scrim{
  position:absolute; inset:0; background:rgba(20,20,20,.5);
  animation:mhc-fade var(--mhc-t) var(--mhc-ease);
}
.mhc-drawer__panel{
  position:absolute; inset-block:0; right:0; width:min(340px,88vw);
  background:#fff; display:flex; flex-direction:column;
  box-shadow:var(--mhc-shadow-lg); animation:mhc-slide var(--mhc-t) var(--mhc-ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.mhc-drawer__top{
  display:flex; align-items:center; justify-content:space-between; gap:var(--mhc-s4);
  padding:var(--mhc-s4) var(--mhc-s5); border-bottom:1px solid var(--mhc-border);
}
.mhc-drawer__close{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--mhc-border); border-radius:var(--mhc-radius-sm);
  cursor:pointer; color:var(--mhc-ink); flex:none;
}
.mhc-drawer__close:hover{ background:var(--mhc-bg); border-color:var(--mhc-ink); }
.mhc-drawer__list{ list-style:none; margin:0; padding:var(--mhc-s3) 0; }
.mhc-drawer__list a{
  display:block; min-height:52px; padding:14px var(--mhc-s5);
  color:var(--mhc-ink); font-size:1.0625rem; font-weight:500; text-decoration:none;
  border-bottom:1px solid var(--mhc-border);
}
.mhc-drawer__list a:hover{ background:var(--mhc-bg); color:var(--mhc-red); }
.mhc-drawer__list .sub-menu{ list-style:none; margin:0; padding:0; }
.mhc-drawer__list .sub-menu a{ padding-left:calc(var(--mhc-s5) + 16px); font-size:1rem; color:var(--mhc-ink-soft); }
.mhc-drawer__foot{ margin-top:auto; padding:var(--mhc-s5); display:grid; gap:var(--mhc-s3); }
body.mhc-lock{ overflow:hidden; }

@keyframes mhc-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes mhc-slide{ from{ transform:translateX(100%) } to{ transform:none } }


/* ================================================================ 8. HERO */

.mhc-hero{ position:relative; background:var(--mhc-dark); color:#fff; overflow:hidden; }
.mhc-hero::before{
  content:""; position:absolute; inset:auto auto -30% -12%;
  width:min(760px,70vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(201,0,18,.42),rgba(201,0,18,0) 68%);
  pointer-events:none; z-index:0;
}
.mhc-hero > *{ position:relative; z-index:1; }
.mhc-hero h1,.mhc-hero h2,.mhc-hero h3{ color:#fff; }
.mhc-hero p{ color:#C9C9C9; }
.mhc-hero h1 em{ font-style:normal; color:var(--mhc-red-on-dark); }
.mhc-hero .mhc-eyebrow{ color:var(--mhc-red-on-dark); }
.mhc-hero .mhc-lead{ color:#C9C9C9; max-width:38em; }
.mhc-hero__grid{ gap:var(--mhc-s10); align-items:center; }

.mhc-hero__stack{ position:relative; }
.mhc-hero__img img{
  border-radius:var(--mhc-radius); box-shadow:0 24px 60px rgba(0,0,0,.5); width:100%;
}
.mhc-hero__badge{
  position:absolute; left:-16px; bottom:26px; max-width:250px; z-index:2;
  background:#fff; border-radius:12px; padding:var(--mhc-s4) var(--mhc-s5);
  box-shadow:var(--mhc-shadow-lg);
}
.mhc-hero__badge p{ color:var(--mhc-ink-soft); font-size:.8125rem; line-height:1.5; margin:0; }
.mhc-hero__badge strong{ color:var(--mhc-ink); font-size:.875rem; }
@media (max-width:781px){
  .mhc-hero__badge{ position:static; max-width:none; margin-top:var(--mhc-s4); }
}

/* Biểu mẫu rút gọn trong hero */
.mhc-quickform{
  margin-block:var(--mhc-s7) var(--mhc-s6);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--mhc-radius); padding:var(--mhc-s5);
}
.mhc-quickform .mhc-field label{ color:#E8E8E8; }
.mhc-quickform .mhc-consent{ color:#BDBDBD!important; }
.mhc-quickform .mhc-privacy{ color:#A8A8A8; }


/* ======================================================= 9. DẢI LỢI ÍCH */

.mhc-band{ background:var(--mhc-red); color:#fff; }
.mhc-band h1,.mhc-band h2,.mhc-band h3,.mhc-band strong{ color:#fff; }
.mhc-band p,.mhc-band li,.mhc-band span{ color:rgba(255,255,255,.88); }
.mhc-item{ display:flex; gap:14px; align-items:flex-start; }
.mhc-item svg{ width:26px; height:26px; flex:none; stroke-width:2; margin-top:2px; color:#fff; }
.mhc-item strong{ display:block; margin-bottom:2px; }
.mhc-item span{ font-size:.875rem; line-height:1.55; display:block; }


/* ============================================ 10. DỊCH VỤ (LƯỚI BENTO) */

.mhc-icon{
  width:54px; height:54px; flex:none; display:inline-flex;
  align-items:center; justify-content:center;
  background:var(--mhc-red); color:#fff; border-radius:12px; margin-bottom:var(--mhc-s4);
}
.mhc-icon svg{ width:26px; height:26px; stroke-width:2; fill:none; stroke:currentColor;
  stroke-linecap:round; stroke-linejoin:round; }

.mhc-bento{ display:grid; gap:var(--mhc-s5); grid-template-columns:1fr; }
@media (min-width:600px){ .mhc-bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){
  .mhc-bento{ grid-template-columns:repeat(3,1fr); }
  .mhc-bento__feature{ grid-column:span 2; grid-row:span 2; }
}
.mhc-bento > *{ margin:0; max-width:none; }

.mhc-svc{
  display:flex; flex-direction:column; gap:0; height:100%;
  background:#fff; border:1px solid var(--mhc-border); border-radius:var(--mhc-radius);
  padding:var(--mhc-s6);
  transition:transform var(--mhc-t) var(--mhc-ease), box-shadow var(--mhc-t) var(--mhc-ease);
}
.mhc-svc:hover,.mhc-svc:focus-within{ transform:translateY(-3px); box-shadow:var(--mhc-shadow-md); }
.mhc-svc h3{ font-size:1.125rem; margin:0 0 8px; }
.mhc-svc p{ color:var(--mhc-ink-soft); font-size:.9375rem; margin:0 0 var(--mhc-s4); }
.mhc-svc > *:last-child{ margin-bottom:0; }

.mhc-bento__feature{
  color:#fff; border:none; justify-content:flex-end; min-height:280px;
  background:linear-gradient(140deg,var(--mhc-red) 0%,var(--mhc-red-dark) 52%,#5E0008 100%);
}
.mhc-bento__feature h3{ font-size:clamp(1.5rem,1.7vw + 1.05rem,2.25rem); color:#fff; }
.mhc-bento__feature p{ color:rgba(255,255,255,.9); font-size:1rem; max-width:44ch; }
.mhc-bento__feature .mhc-icon{ background:rgba(255,255,255,.16); }
.mhc-bento__feature .mhc-more{ color:#fff; }
.mhc-bento__feature:hover{ box-shadow:0 18px 42px rgba(201,0,18,.28); }
.mhc-bento__feature .mhc-ticks li{ color:rgba(255,255,255,.92); }
.mhc-bento__feature .mhc-ticks svg{ color:#fff; }

/* Thẻ dịch vụ đặt trên nền tối */
.mhc-dark .mhc-svc{ background:var(--mhc-dark-panel); border-color:var(--mhc-dark-border); }
.mhc-dark .mhc-svc h3{ color:#fff; }
.mhc-dark .mhc-svc p{ color:#B9B9B9; }


/* ================================ 11. DANH SÁCH, QUY TRÌNH, BẢNG GIÁ */

.mhc-ticks{ list-style:none; padding:0; margin:0 0 var(--mhc-s4); display:grid; gap:8px; font-size:.9375rem; }
.mhc-ticks li{ display:flex; gap:9px; color:var(--mhc-ink-soft); }
.mhc-ticks svg{ width:17px; height:17px; flex:none; margin-top:5px; stroke-width:2.6;
  color:var(--mhc-red); fill:none; stroke:currentColor; }

.mhc-points{ list-style:none; padding:0; margin:0 0 var(--mhc-s6); display:grid; gap:var(--mhc-s4); }
.mhc-points li{ display:flex; gap:14px; align-items:flex-start; }
.mhc-points svg{ width:22px; height:22px; color:var(--mhc-red); flex:none; margin-top:4px;
  stroke-width:2.4; fill:none; stroke:currentColor; }
.mhc-points strong{ display:block; color:var(--mhc-ink); }
.mhc-points span{ font-size:.9375rem; color:var(--mhc-ink-soft); display:block; }
.mhc-dark .mhc-points svg,.mhc-cta .mhc-points svg{ color:var(--mhc-red-on-dark); }
.mhc-dark .mhc-points strong,.mhc-cta .mhc-points strong{ color:#fff; }
.mhc-dark .mhc-points span,.mhc-cta .mhc-points span{ color:#C9C9C9; }

.mhc-rail{ display:grid; gap:var(--mhc-s7); counter-reset:mhcstep; }
@media (min-width:850px){ .mhc-rail{ grid-template-columns:repeat(2,1fr); column-gap:var(--mhc-s10); } }
.mhc-rail__item{ position:relative; padding-left:70px; min-height:56px; }
.mhc-rail__item::before{
  counter-increment:mhcstep; content:counter(mhcstep);
  position:absolute; left:0; top:0; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mhc-red); color:#fff; border-radius:50%;
  font-weight:800; font-size:1.0625rem; line-height:1;
}
.mhc-rail__item h3{ font-size:1.125rem; margin:0 0 6px; padding-top:10px; }
.mhc-rail__item p{ color:var(--mhc-ink-soft); margin:0; }
@media (max-width:849px){
  .mhc-rail__item::after{
    content:""; position:absolute; left:23px; top:56px; bottom:-32px; width:2px;
    background:var(--mhc-red-tint-2);
  }
  .mhc-rail__item:last-child::after{ display:none; }
}

.mhc-plans{ display:grid; gap:var(--mhc-s5); align-items:start; grid-template-columns:1fr; }
@media (min-width:850px){ .mhc-plans{ grid-template-columns:repeat(3,1fr); } }
.mhc-plan{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--mhc-border);
  border-radius:var(--mhc-radius); padding:var(--mhc-s6);
}
.mhc-plan h3{ font-size:1.125rem; margin-bottom:6px; }
.mhc-plan__price{
  font-size:1.6rem; font-weight:800; color:var(--mhc-ink);
  padding-block:var(--mhc-s4); margin-block:var(--mhc-s4);
  border-block:1px solid var(--mhc-border);
}
.mhc-plan__price small{ display:block; font-size:.875rem; font-weight:400;
  color:var(--mhc-ink-soft); margin-top:4px; }
.mhc-plan .mhc-ticks{ margin-bottom:var(--mhc-s6); }
.mhc-plan .mhc-btn{ margin-top:auto; }
.mhc-plan--hot{ background:var(--mhc-dark); border-color:var(--mhc-dark); box-shadow:var(--mhc-shadow-lg); }
.mhc-plan--hot h3,.mhc-plan--hot .mhc-plan__price{ color:#fff; }
.mhc-plan--hot .mhc-plan__price{ border-color:#333; }
.mhc-plan--hot .mhc-plan__price small,.mhc-plan--hot .mhc-note{ color:#B9B9B9; }
.mhc-plan--hot .mhc-ticks li{ color:#D6D6D6; }
.mhc-plan--hot .mhc-ticks svg{ color:var(--mhc-red-on-dark); }
@media (min-width:850px){ .mhc-plan--hot{ transform:scale(1.045); } }

.mhc-tag{
  align-self:flex-start; font-size:.8125rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:var(--mhc-red);
  border-radius:999px; padding:5px 13px; margin-bottom:var(--mhc-s4);
}


/* ================================ 12. ĐÁNH GIÁ, CÂU HỎI THƯỜNG GẶP */

.mhc-quotes{ display:grid; gap:var(--mhc-s5); grid-template-columns:1fr; }
@media (min-width:700px){ .mhc-quotes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .mhc-quotes{ grid-template-columns:repeat(3,1fr); } }
.mhc-quote{
  height:100%; background:#fff; border:1px solid var(--mhc-border);
  border-top:4px solid var(--mhc-red); border-radius:var(--mhc-radius);
  padding:var(--mhc-s6); display:flex; flex-direction:column; gap:var(--mhc-s4);
}
.mhc-quote blockquote{ margin:0; }
/* Thẻ dùng được cho cả trích dẫn khách hàng lẫn mô tả tình huống. */
.mhc-quote h3{ font-size:1.125rem; margin:0 0 4px; }
.mhc-quote > p{ color:var(--mhc-ink-soft); font-size:.9375rem; margin:0; }
.mhc-quote figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:var(--mhc-s4); }
.mhc-avatar{
  width:44px; height:44px; flex:none; border-radius:12px;
  background:var(--mhc-dark); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.875rem;
}
.mhc-quote figcaption strong{ display:block; font-size:.875rem; }
.mhc-quote figcaption span span{ font-size:.8125rem; color:var(--mhc-ink-faint); }

.mhc-faq{ max-width:860px; margin-inline:auto; }
.mhc-faq .wp-block-details{
  border:1px solid var(--mhc-border); border-radius:var(--mhc-radius);
  margin-bottom:var(--mhc-s3); background:#fff; padding:0 var(--mhc-s5);
}
.mhc-faq .wp-block-details[open]{ border-color:var(--mhc-red); }
.mhc-faq summary{
  display:flex; align-items:flex-start; gap:var(--mhc-s4);
  padding:var(--mhc-s5) 0; cursor:pointer; list-style:none;
  font-weight:600; font-size:1.0625rem; color:var(--mhc-ink); min-height:56px;
}
.mhc-faq summary::-webkit-details-marker{ display:none; }
.mhc-faq summary::marker{ content:""; }
.mhc-faq summary:hover{ color:var(--mhc-red); }
.mhc-faq summary:focus-visible{ outline:3px solid var(--mhc-focus); outline-offset:-3px; }
.mhc-faq summary::after{
  content:""; margin-left:auto; flex:none; width:24px; height:24px; margin-top:2px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transition:transform var(--mhc-t) var(--mhc-ease);
}
.mhc-faq .wp-block-details[open] summary::after{
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;
}
.mhc-faq .wp-block-details > *:not(summary){ padding:0 44px var(--mhc-s6) 0; color:var(--mhc-ink-soft); margin:0; }


/* ========================================================= 13. BÀI VIẾT */

.mhc-posts{ display:grid; gap:var(--mhc-s6); grid-template-columns:1fr; }
@media (min-width:600px){ .mhc-posts{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .mhc-posts{ grid-template-columns:repeat(3,1fr); } }

.mhc-post{ display:flex; flex-direction:column; }
.mhc-post__media{ display:block; border-radius:var(--mhc-radius); overflow:hidden; margin-bottom:var(--mhc-s4); }
.mhc-post__media img{ width:100%; aspect-ratio:16/9; object-fit:cover;
  transition:transform .5s var(--mhc-ease); }
.mhc-post:hover .mhc-post__media img{ transform:scale(1.04); }
.mhc-post__meta{ font-size:.8125rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mhc-red); margin-bottom:8px; }
.mhc-post__title{ font-size:1.125rem; margin:0 0 8px; }
.mhc-post__title a{ color:var(--mhc-ink); text-decoration:none; }
.mhc-post__title a:hover{ color:var(--mhc-red); }
.mhc-post__body{ display:flex; flex-direction:column; flex:1; }
.mhc-post__body p{ font-size:.9375rem; color:var(--mhc-ink-soft); }

.mhc-single__head{ max-width:760px; }
.mhc-single__media{ margin-bottom:var(--mhc-s8); }
.mhc-single__media img{ width:100%; border-radius:var(--mhc-radius); }

.mhc-postnav{ display:flex; flex-wrap:wrap; gap:var(--mhc-s5); justify-content:space-between;
  padding-block:var(--mhc-s7); border-top:1px solid var(--mhc-border); }
.mhc-postnav a{ text-decoration:none; font-weight:600; }
.mhc-postnav__next{ margin-left:auto; text-align:right; }

.mhc-pagination{ margin-top:var(--mhc-s9); }
.mhc-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.mhc-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--mhc-border); border-radius:var(--mhc-radius-sm);
  color:var(--mhc-ink); text-decoration:none;
}
.mhc-pagination .page-numbers:hover{ border-color:var(--mhc-red); color:var(--mhc-red); }
.mhc-pagination .page-numbers.current{ background:var(--mhc-red); border-color:var(--mhc-red); color:#fff; }

.mhc-empty,.mhc-404{ max-width:640px; padding-block:var(--mhc-s8); }
.mhc-404 .mhc-btnrow{ margin-top:var(--mhc-s7); }

.mhc-comments{ padding-block:var(--mhc-s9); border-top:1px solid var(--mhc-border); }
.mhc-comments__title{ font-size:1.25rem; margin-bottom:var(--mhc-s6); }
.mhc-comments__list{ list-style:none; padding:0; margin:0 0 var(--mhc-s8); display:grid; gap:var(--mhc-s6); }
.mhc-comments__list .children{ list-style:none; padding-left:var(--mhc-s7); margin-top:var(--mhc-s6); }

.mhc-linkpages{ margin-top:var(--mhc-s6); font-weight:600; }


/* ======================================================= 14. CHÂN TRANG */

.mhc-footer{ background:var(--mhc-dark); color:#C7C7C7; }
.mhc-footer__grid{
  display:grid; gap:var(--mhc-s8); padding-block:var(--mhc-s10) var(--mhc-s9);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .mhc-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .mhc-footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; } }
.mhc-footer__title{
  color:#fff; font-size:1rem; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:var(--mhc-s5);
}
.mhc-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.mhc-footer a{ color:#C7C7C7; text-decoration:none; }
.mhc-footer a:hover{ color:#fff; text-decoration:underline; }
.mhc-footer__widget + .mhc-footer__widget{ margin-top:var(--mhc-s7); }
.mhc-footer__bottom{
  border-top:1px solid var(--mhc-dark-border); padding-block:var(--mhc-s6);
  display:flex; flex-wrap:wrap; gap:var(--mhc-s4); justify-content:space-between;
  font-size:.875rem; color:#9A9A9A;
}
.mhc-footer__legal{ display:flex; flex-wrap:wrap; gap:var(--mhc-s5); list-style:none; margin:0; padding:0; }

.mhc-contactlist{ list-style:none; margin:var(--mhc-s5) 0 0; padding:0; display:grid; gap:12px; }
.mhc-contactline{ display:flex; align-items:flex-start; gap:10px; }
.mhc-contactline svg{ margin-top:3px; color:var(--mhc-red-on-dark); flex:none; }
.mhc-legal{ font-size:.875rem; color:#9A9A9A; }


/* ==================================================== 15. LIÊN HỆ NỔI */

.mhc-float{
  position:fixed; right:16px; bottom:16px; z-index:120;
  display:grid; gap:10px; justify-items:center;
}
.mhc-float__btn{
  width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; color:#fff; text-decoration:none; border:none; cursor:pointer; padding:0;
  box-shadow:var(--mhc-shadow-md);
  transition:transform var(--mhc-t-fast) var(--mhc-ease), filter var(--mhc-t-fast) var(--mhc-ease);
}
.mhc-float__btn:hover{ transform:translateY(-2px); filter:brightness(1.06); color:#fff; }
.mhc-float__btn--phone{ background:var(--mhc-red); }
.mhc-float__btn--zalo{ background:#0068FF; }
.mhc-float__btn--top{
  background:#fff; color:var(--mhc-ink); border:1px solid var(--mhc-border-strong);
  opacity:0; visibility:hidden;
  transition:opacity var(--mhc-t) var(--mhc-ease), visibility var(--mhc-t) var(--mhc-ease),
             transform var(--mhc-t-fast) var(--mhc-ease);
}
.mhc-float__btn--top[data-show="true"]{ opacity:1; visibility:visible; }

.mhc-mobilebar{
  position:fixed; inset-inline:0; bottom:0; z-index:130; display:none;
  background:#fff; border-top:1px solid var(--mhc-border);
  box-shadow:0 -2px 12px rgba(20,20,20,.10);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mhc-mobilebar__in{ display:grid; grid-template-columns:1fr 1fr; }
.mhc-mobilebar--single .mhc-mobilebar__in{ grid-template-columns:1fr; }
.mhc-mobilebar a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:64px; font-weight:600; font-size:.875rem; text-decoration:none; color:#fff;
}
.mhc-mobilebar a:first-child{ background:var(--mhc-red); }
.mhc-mobilebar a:first-child:hover{ background:var(--mhc-red-dark); color:#fff; }
.mhc-mobilebar a:last-child{ background:#0068FF; }
.mhc-mobilebar a:last-child:hover{ filter:brightness(.94); color:#fff; }
.mhc-mobilebar--single a:last-child{ background:var(--mhc-red); }

@media (max-width:767px){
  .mhc-mobilebar{ display:block; }
  body{ padding-bottom:64px; }
  .mhc-float{ right:12px; bottom:calc(64px + env(safe-area-inset-bottom,0px) + 12px); }
  .mhc-float__btn{ width:48px; height:48px; }
  .mhc-float__btn--phone{ display:none; }  /* đã có trong thanh dính */
}


/* ========================================= 16. CTA + KHỐI BIỂU MẪU */

.mhc-cta{ position:relative; background:var(--mhc-dark); color:#fff; overflow:hidden; }
.mhc-cta::before{
  content:""; position:absolute; inset:-20% -10% auto auto; width:min(680px,64vw); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(201,0,18,.34),rgba(201,0,18,0) 70%);
  pointer-events:none; z-index:0;
}
.mhc-cta > *{ position:relative; z-index:1; }
.mhc-cta h1,.mhc-cta h2,.mhc-cta h3{ color:#fff; }
.mhc-cta > * > .wp-block-column > p{ color:#C9C9C9; }
.mhc-cta .mhc-eyebrow{ color:var(--mhc-red-on-dark); }

.mhc-formpanel{
  background:#fff; color:var(--mhc-ink); border-radius:var(--mhc-radius);
  padding:var(--mhc-s6); box-shadow:var(--mhc-shadow-lg);
}
@media (min-width:560px){ .mhc-formpanel{ padding:var(--mhc-s8); } }
.mhc-formpanel h2,.mhc-formpanel h3{ color:var(--mhc-ink); }
.mhc-formpanel p{ color:var(--mhc-ink-soft); }


/* ================================ 17. GIẢM CHUYỂN ĐỘNG VÀ IN ẤN */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

@media print{
  .mhc-float,.mhc-mobilebar,.mhc-header,.mhc-topbar,.mhc-drawer{ display:none!important; }
  body{ padding-bottom:0; }
}