/*
Theme Name:   MIANZ
Theme URI:    https://mianz.vn
Description:  Child theme của GeneratePress cho MIANZ — hệ sinh thái B2B cho Spa, thẩm mỹ viện và phòng khám da liễu. Tối ưu song song cho AI search visibility và cảm nhận thương hiệu cao cấp.
Author:       MIANZ
Template:     generatepress
Version:      1.0.0
Text Domain:  mianz
*/

/* ============================================================
   NGUYÊN TẮC LÕI
   DOM phẳng cho AI đọc — CSS giàu cho mắt người.
   Mọi hiệu ứng ở đây đều là CSS thuần, không JS, không ảnh hưởng crawler.
   ============================================================ */

:root {
  --cream:        #F7F3EE;
  --cream-deep:   #EFE8E0;
  --white:        #FFFFFF;
  --charcoal:     #2A2520;
  --charcoal-soft:#5A524A;
  --hairline:     #D8CEC2;
  --hairline-dark:#4A423A;
  --gold:         #C49A3C;
  --orange:       #E8421A;
  --green:        #3A8C3A;

  --display: 'Playfair Display', Georgia, serif;
  --body:    'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --gutter:  clamp(1.25rem, 5vw, 2.5rem);
  --section: clamp(4rem, 9vw, 6rem);
  --shadow:  0 1px 3px rgba(42, 37, 32, 0.04);
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- NỀN TẢNG ---------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, .m-display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.022em;   /* chi tiết nhỏ, tác động lớn ở cỡ chữ to */
  margin: 0 0 0.6em;
}

h3, h4 {
  font-family: var(--body);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.125rem, 5.5vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.625rem); }

p { margin: 0 0 1.25em; max-width: 68ch; }

/* Thang chữ tương phản mạnh: tuyên ngôn nhảy vọt khỏi nội dung */
.m-display { font-size: clamp(2.5rem, 7vw, 4.25rem); line-height: 1.05; }

/* ---------- LỚP TIỆN ÍCH ------------------------------------ */

.m-wrap   { width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto; }
.m-narrow { width: min(760px,  100% - var(--gutter) * 2); margin-inline: auto; }

.m-section { padding-block: var(--section); }
.m-section--dark {
  background: var(--charcoal);
  color: var(--cream);
}
.m-section--deep { background: var(--cream-deep); }

.m-section--dark h1,
.m-section--dark h2,
.m-section--dark h3 { color: var(--cream); }

/* Nhãn eyebrow — cách chữ rộng, luôn đi kèm kẻ vàng */
.m-label {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  display: block;
  margin-bottom: 1rem;
}
.m-label::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin-top: 0.75rem;
}
.m-section--dark .m-label { color: var(--gold); }

.m-lead {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.65;
  color: var(--charcoal-soft);
}
.m-section--dark .m-lead { color: #C9C0B6; }

/* Đường kẻ mảnh thay cho khung viền và bóng đổ */
.m-rule { border: 0; border-top: 1px solid var(--hairline); margin: 3rem 0; }
.m-section--dark .m-rule { border-color: var(--hairline-dark); }

/* ---------- NÚT ---------------------------------------------- */

.m-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 2rem;
  border-radius: 4px;              /* 4px, không 16px — bo nhiều đọc ra app tiêu dùng */
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease);
}
.m-btn--primary { background: var(--orange); color: #fff; }
.m-btn--primary:hover { background: #C9370F; color: #fff; }

.m-btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--hairline);
}
.m-btn--ghost:hover { border-color: var(--charcoal); background: transparent; }

.m-section--dark .m-btn--ghost { color: var(--cream); border-color: var(--hairline-dark); }
.m-section--dark .m-btn--ghost:hover { border-color: var(--cream); }

/* Liên kết văn bản: gạch chân trượt ra, không đổi màu nền */
.m-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms var(--ease);
  padding-bottom: 2px;
}
.m-link:hover { background-size: 100% 1px; }

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 90;
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header.is-stuck {
  background: rgba(247, 243, 238, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
}

.main-navigation .main-nav ul li a {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Nút CTA duy nhất trên header — chỗ duy nhất dùng màu cam ở đây */
.m-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.25rem !important;
  margin-left: 0.5rem;
  background: var(--orange);
  color: #fff !important;
  border-radius: 4px;
  font-weight: 600 !important;
  transition: background 400ms var(--ease);
}
.m-nav-cta:hover { background: #C9370F; }

.m-nav-zalo {
  color: var(--charcoal-soft) !important;
  font-weight: 500 !important;
}

/* ============================================================
   KHỐI ① TUYÊN NGÔN — hero, typography làm chủ đạo
   ============================================================ */

.m-hero {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background: var(--cream);
}
.m-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.m-hero__title { margin-bottom: 1.5rem; }
.m-hero__rule {
  width: 72px; height: 1px; background: var(--gold);
  border: 0; margin: 0 0 1.5rem;
}
.m-hero__meta {
  font-size: 0.9375rem;
  color: var(--charcoal-soft);
  margin-bottom: 2rem;
}
.m-hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.m-hero__figure {
  aspect-ratio: 4 / 5;               /* ảnh dọc — cảm giác biên tập tạp chí */
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream-deep);
}
.m-hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 600ms var(--ease), transform 600ms var(--ease);
}
.m-hero__figure:hover img { filter: brightness(1.03); }

/* ============================================================
   KHỐI ② TRẢ LỜI TRỰC TIẾP — đoạn AI sẽ trích dẫn
   Đây là khối quan trọng nhất website. Kẻ vàng 2 bên đánh dấu
   nó là một tuyên bố chính thức, không phải văn quảng cáo.
   ============================================================ */

.m-answer {
  background: var(--cream-deep);
  border-left: 2px solid var(--gold);
  border-right: 1px solid var(--hairline);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 0 4px 4px 0;
}
.m-answer p {
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  line-height: 1.7;
  margin: 0;
  max-width: 72ch;
}
.m-answer strong { font-weight: 600; }

/* ============================================================
   KHỐI ③ PHÂN LUỒNG — 3 cửa vào theo quy mô
   ============================================================ */

.m-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.m-door {
  background: var(--cream);
  padding: 2rem 1.75rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background 400ms var(--ease);
}
.m-door:hover { background: var(--white); }
.m-door__title { font-weight: 600; font-size: 1.0625rem; }
.m-door__desc  { font-size: 0.9375rem; color: var(--charcoal-soft); line-height: 1.6; }
.m-door__go {
  margin-top: auto; padding-top: 1rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--orange);
}

/* ============================================================
   KHỐI ④ LỆCH 60/40 — so le trái phải, tạo nhịp cho mắt
   ============================================================ */

.m-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--hairline);
}
.m-split:first-of-type { border-top: 0; }
.m-split--flip .m-split__figure { order: 2; }

.m-split__figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream-deep);
}
.m-split__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.m-split__no {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}

/* ============================================================
   KHỐI ⑤ SỐ LIỆU — nền than, đảo màu lần 1
   ============================================================ */

.m-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.m-stat {
  padding: 1.5rem clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--hairline-dark);
}
.m-stat:first-child { border-left: 0; padding-left: 0; }
.m-stat__num {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
  display: block;
  margin-bottom: 0.75rem;
}
.m-stat__label {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #A79D92;
  letter-spacing: 0.04em;
}

/* ============================================================
   KHỐI ⑥ ĐỐI TÁC — hàng ngang tĩnh, không carousel
   ============================================================ */

.m-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-logos li { display: flex; align-items: center; justify-content: center; width: 100%; }
.m-logos img {
  height: auto;
  max-height: 72px;          /* gấp đôi bản cũ — logo đọc được ở khoảng cách bình thường */
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: 1;                /* giữ nguyên màu gốc, không làm mờ, không grayscale */
  filter: none;
  mix-blend-mode: multiply;  /* hoà nền trắng của file PNG vào nền kem */
  transition: transform 400ms var(--ease);
}
.m-logos img:hover { transform: scale(1.04); }

/* ============================================================
   KHỐI ⑦ TRÍCH DẪN KHÁCH HÀNG
   ============================================================ */

.m-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.m-quote {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.m-quote__mark {
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 0.7;
  color: var(--gold);
  margin-bottom: 1rem;
}
.m-quote__text {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.m-quote__by {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--charcoal-soft);
}
.m-quote__by strong { display: block; color: var(--charcoal); font-weight: 600; }

/* ============================================================
   ★ KHỐI CHỮ KÝ — SỔ ĐĂNG BẠ CHỨNG NHẬN
   Đây là yếu tố nhận diện riêng của MIANZ. Lấy hình thức từ chính
   thế giới của chủ đề: giấy chứng nhận hợp quy. Số hiệu đặt bằng
   font mono, nhãn viết hoa cách rộng, kẻ ngang mảnh không viền ô —
   trông như một trích lục hồ sơ, không như một huy hiệu marketing.
   ============================================================ */

.m-certs { border-top: 1px solid var(--hairline); }

.m-cert {
  display: grid;
  grid-template-columns: 200px 1fr 210px;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.m-cert__code {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.m-cert__name {
  font-size: 0.8125rem;
  color: var(--charcoal-soft);
  margin-top: 0.35rem;
  line-height: 1.5;
}
.m-cert__detail { font-size: 0.9375rem; line-height: 1.65; margin: 0; }

.m-cert__meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--charcoal-soft);
}
.m-cert__meta dt {
  display: inline;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--gold);
}
.m-cert__meta dd { display: inline; margin: 0; }
.m-cert__meta dd::after { content: ""; display: block; }

.m-cert__verify {
  font-size: 0.75rem;
  font-family: var(--mono);
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.m-cert-note {
  font-size: 0.875rem;
  color: var(--charcoal-soft);
  margin-top: 1.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--gold);
}

/* ============================================================
   KHỐI ⑨ HỎI ĐÁP — accordion CSS thuần bằng <details>
   Không JS. AI đọc được toàn bộ nội dung kể cả khi đang đóng.
   ============================================================ */

.m-faq { border-top: 1px solid var(--hairline); }

.m-faq details {
  border-bottom: 1px solid var(--hairline);
}
.m-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.375rem 2.5rem 1.375rem 0;
  font-weight: 600;
  font-size: 1.0625rem;
  position: relative;
  transition: color 300ms var(--ease);
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary:hover { color: var(--orange); }
.m-faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 1px solid var(--charcoal-soft);
  border-bottom: 1px solid var(--charcoal-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 300ms var(--ease);
}
.m-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.m-faq__answer { padding: 0 0 1.5rem; color: var(--charcoal-soft); }
.m-faq__answer p:last-child { margin-bottom: 0; }

/* ============================================================
   KHỐI ⑧ BẢNG — kẻ ngang mảnh, không viền ô
   Định dạng AI trích dẫn nhiều nhất.
   ============================================================ */

.m-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.m-table th {
  text-align: left;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--charcoal-soft);
  padding: 0 1rem 0.875rem 0;
  border-bottom: 1px solid var(--charcoal);
}
.m-table td {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  line-height: 1.6;
}

/* ============================================================
   FOOTER
   ============================================================ */

.m-footer {
  background: var(--charcoal);
  color: #C9C0B6;
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  font-size: 0.9375rem;
}
.m-footer a { color: #C9C0B6; text-decoration: none; transition: color 300ms var(--ease); }
.m-footer a:hover { color: var(--cream); }

.m-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
.m-footer__logo { height: 34px; width: auto; margin-bottom: 1.25rem; }
.m-footer__about { line-height: 1.7; max-width: 34ch; }

.m-footer__head {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.m-footer ul { list-style: none; margin: 0; padding: 0; }
.m-footer li { margin-bottom: 0.625rem; line-height: 1.5; }

.m-footer__contact dt {
  font-size: 0.75rem;
  color: #877D72;
  margin-top: 0.875rem;
}
.m-footer__contact dt:first-child { margin-top: 0; }
.m-footer__contact dd { margin: 0.15rem 0 0; color: var(--cream); }

.m-footer__social { display: flex; gap: 1.25rem; margin-top: 1.5rem; }
.m-footer__social a { font-size: 0.8125rem; }

.m-footer__legal {
  border-top: 1px solid var(--hairline-dark);
  padding-block: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  font-size: 0.8125rem;
  color: #877D72;
}
.m-footer__legal .m-sep { color: var(--hairline-dark); }

/* ============================================================
   CHUYỂN ĐỘNG — chỉ fade nhẹ khi cuộn, tôn trọng reduced-motion
   ============================================================ */

.m-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.m-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .m-reveal { opacity: 1; transform: none; }
}

/* Tiêu điểm bàn phím — không bao giờ tắt outline */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   ĐIỆN THOẠI & MÁY TÍNH BẢNG
   ============================================================ */

@media (max-width: 1024px) {
  .m-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .m-quotes       { grid-template-columns: 1fr; }
  .m-cert         { grid-template-columns: 180px 1fr; }
  .m-cert__meta   { grid-column: 1 / -1; padding-top: 0.5rem; }
}

@media (max-width: 782px) {
  :root { --section: clamp(3rem, 8vw, 4rem); }

  .m-hero__grid  { grid-template-columns: 1fr; }
  .m-hero__figure { max-width: 380px; }

  .m-split       { grid-template-columns: 1fr; gap: 1.75rem; }
  .m-split--flip .m-split__figure { order: 0; }
  .m-split__figure { max-width: 340px; }

  .m-doors       { grid-template-columns: 1fr; }
  .m-stats       { grid-template-columns: 1fr 1fr; gap: 0.5rem 0; }
  .m-stat        { border-left: 0; padding-left: 0; padding-block: 1.25rem; }
  .m-stat + .m-stat { border-top: 1px solid var(--hairline-dark); }
  .m-stat:nth-child(2) { border-top: 0; }

  .m-cert        { grid-template-columns: 1fr; gap: 0.75rem; }
  .m-footer__grid{ grid-template-columns: 1fr; }

  .m-table       { font-size: 0.875rem; }
}

/* ============================================================
   IN ẤN — chuỗi Spa hay in hồ sơ nhà cung cấp để trình duyệt nội bộ
   ============================================================ */

@media print {
  .site-header, .m-footer__social, .m-hero__actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .m-section--dark { background: #fff !important; color: #000 !important; }
  .m-stat__num, .m-section--dark h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ============================================================
   HERO THUẦN CHỮ — không phụ thuộc ảnh
   Sang trọng đến từ khoảng trắng và thang chữ tương phản mạnh,
   không đến từ ảnh nền. Đây cũng là bố cục nhẹ nhất cho crawler.
   ============================================================ */

.m-hero--text {
  padding-block: clamp(4rem, 11vw, 8.5rem) clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--hairline);
}
.m-hero--text .m-label { margin-bottom: 1.75rem; }

.m-hero--text h1 {
  font-size: clamp(2.5rem, 7.5vw, 4.5rem);
  line-height: 1.02;
  max-width: 15ch;
  margin-bottom: 1.75rem;
}

.m-hero__sub {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  line-height: 1.65;
  color: var(--charcoal-soft);
  max-width: 54ch;
  margin-bottom: 2.5rem;
}

/* Dòng số liệu ngang, phân tách bằng kẻ dọc mảnh */
.m-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: 2.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--charcoal-soft);
}
.m-hero__facts span { position: relative; padding-right: clamp(1.25rem, 3vw, 2.25rem); }
.m-hero__facts span::after {
  content: "";
  position: absolute; right: 0; top: 0.15em; bottom: 0.15em;
  width: 1px; background: var(--hairline);
}
.m-hero__facts span:last-child { padding-right: 0; }
.m-hero__facts span:last-child::after { display: none; }
.m-hero__facts b { color: var(--charcoal); font-weight: 600; }

/* ============================================================
   4 TRỤ CỘT — danh sách đánh số, không cần ảnh
   ============================================================ */

.m-pillars { border-top: 1px solid var(--hairline); }

.m-pillar {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background 400ms var(--ease);
}
.m-pillar:hover { background: var(--cream-deep); }

.m-pillar__no {
  font-family: var(--display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--gold);
}
.m-pillar__title {
  display: block;
  font-size: clamp(1.1875rem, 2.4vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.m-pillar__desc {
  display: block;
  color: var(--charcoal-soft);
  line-height: 1.65;
  max-width: 62ch;
}
.m-pillar__go {
  align-self: center;
  text-align: right;
  color: var(--orange);
  font-size: 1.125rem;
  transform: translateX(-6px);
  opacity: 0;
  transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}
.m-pillar:hover .m-pillar__go { transform: none; opacity: 1; }

/* ============================================================
   ĐỐI TÁC — bản chữ, dùng khi chưa có file logo
   Hàng chữ có kẻ dọc phân tách trông có chủ đích, không trông
   như chỗ trống chờ điền ảnh.
   ============================================================ */

.m-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
  padding-block: 0.5rem;
}
.m-brands span {
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  letter-spacing: 0.02em;
  color: var(--charcoal-soft);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.m-brands span::after {
  content: "";
  position: absolute; right: 0; top: 0.2em; bottom: 0.2em;
  width: 1px; background: var(--hairline);
}
.m-brands span:last-child { padding-right: 0; }
.m-brands span:last-child::after { display: none; }

/* ============================================================
   CTA CUỐI TRANG
   ============================================================ */

.m-cta { text-align: center; }
.m-cta h2 { max-width: 20ch; margin-inline: auto; }
.m-cta p  { margin-inline: auto; }
.m-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
  margin-top: 2rem;
}

@media (max-width: 782px) {
  .m-hero--text h1 { max-width: none; }
  .m-pillar { grid-template-columns: 64px 1fr; gap: 1rem; }
  .m-pillar__go { display: none; }
  .m-hero__facts { font-size: 0.75rem; }
}

/* ============================================================
   KHỐI SỨ MỆNH — tuyên ngôn nền tối
   Một câu duy nhất, cỡ chữ rất lớn, khoảng trắng rộng.
   Ít chữ là điều kiện để câu đó có sức nặng.
   ============================================================ */

.m-mission { text-align: center; padding-block: clamp(3rem, 8vw, 5.5rem); }
.m-mission__quote {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.375rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  max-width: 30ch;          /* câu sứ mệnh dài hơn — nới chiều ngang, giảm cỡ chữ */
  margin: 0 auto 2rem;
}
.m-mission__quote em { font-style: italic; color: var(--gold); }
.m-mission__by {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A79D92;
}
.m-mission__by::before {
  content: "";
  display: block;
  width: 40px; height: 1px;
  background: var(--gold);
  margin: 0 auto 1.25rem;
}

/* ============================================================
   KHỐI LỢI THẾ — lưới 2 cột, mỗi mục có số hiệu mono
   Khác khối trụ cột ở chỗ: không có link, không có ảnh, đọc
   như một bản kê điều khoản. Phù hợp với thứ đang nói: cam kết.
   ============================================================ */

.m-adv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.m-adv__item {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.m-adv__item:nth-child(odd) { border-right: 1px solid var(--hairline); }
.m-adv__item:nth-child(even) { padding-left: clamp(1.25rem, 3vw, 2.25rem); padding-right: 0; }

.m-adv__no {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.875rem;
}
.m-adv__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}
.m-adv__desc { color: var(--charcoal-soft); line-height: 1.65; margin: 0; font-size: 0.9375rem; }

/* Mục nổi bật — chỉ dùng cho 1 mục mạnh nhất trong lưới */
.m-adv__item--star { background: var(--cream-deep); }
.m-adv__item--star .m-adv__title { color: var(--orange); }

/* ============================================================
   DÒNG THỜI GIAN — hướng đi của MIANZ
   ============================================================ */

.m-timeline { border-top: 1px solid var(--hairline); }
.m-tl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.m-tl__when {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.m-tl__what { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.4rem; }
.m-tl__desc { color: var(--charcoal-soft); line-height: 1.65; margin: 0; }
.m-section--dark .m-timeline,
.m-section--dark .m-tl { border-color: var(--hairline-dark); }
.m-section--dark .m-tl__desc { color: #A79D92; }

/* ============================================================
   THƯ VIỆN ẢNH — ảnh thật tại cơ sở khách hàng
   ============================================================ */

.m-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.m-gal figure { margin: 0; }
.m-gal img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: var(--cream-deep);
}
.m-gal figcaption {
  font-size: 0.8125rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
  margin-top: 0.75rem;
}

/* ============================================================
   KHỐI CHÍNH SÁCH — dùng trong CTA nền tối
   ============================================================ */

.m-policy {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem clamp(1.25rem, 3vw, 2rem);
  font-size: 0.9375rem;
  color: #C9C0B6;
}
.m-policy li { position: relative; padding-right: clamp(1.25rem, 3vw, 2rem); }
.m-policy li::after {
  content: "";
  position: absolute; right: 0; top: 0.35em; bottom: 0.35em;
  width: 1px; background: var(--hairline-dark);
}
.m-policy li:last-child { padding-right: 0; }
.m-policy li:last-child::after { display: none; }
.m-policy strong { color: var(--cream); font-weight: 600; }

/* ============================================================
   CHÂN DUNG NGƯỜI SÁNG LẬP
   ============================================================ */

.m-founder {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.m-founder__figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream-deep);
}
.m-founder__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-founder__role {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}
.m-founder__name {
  font-family: var(--display);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

@media (max-width: 782px) {
  .m-adv { grid-template-columns: 1fr; }
  .m-adv__item,
  .m-adv__item:nth-child(odd),
  .m-adv__item:nth-child(even) { border-right: 0; padding-inline: 0; }
  .m-adv__item--star { padding-inline: 1.25rem; }
  .m-gal { grid-template-columns: 1fr; }
  .m-tl { grid-template-columns: 1fr; gap: 0.35rem; }
  .m-founder { grid-template-columns: 1fr; }
  .m-founder__figure { max-width: 320px; }
  .m-policy { flex-direction: column; align-items: center; }
  .m-policy li { padding-right: 0; }
  .m-policy li::after { display: none; }
}


/* ============================================================
   LỚP GHI ĐÈ GENERATEPRESS  ·  BẢN VÁ 04/09/2026
   ------------------------------------------------------------
   GeneratePress nạp CSS sau child theme và dùng selector có độ
   ưu tiên cao hơn, nên màu chữ và font của MIANZ bị nuốt.
   Khối này giành lại quyền kiểm soát. Đặt cuối file để thắng
   về thứ tự, và dùng selector đủ cụ thể để thắng về độ ưu tiên.
   ============================================================ */

body,
.site-content,
.entry-content,
.inside-article {
  color: var(--charcoal);
  font-family: var(--body);
}

/* Tiêu đề: màu than, font Playfair. KHÔNG dùng cam cho tiêu đề —
   cam chỉ dành cho nút CTA, theo quy tắc dưới 5% diện tích. */
.entry-content h1, .entry-content h2,
.site-content h1, .site-content h2,
.inside-article h1, .inside-article h2,
h1.entry-title,
.m-hero h1, .m-cta h2, .m-wrap h2 {
  color: var(--charcoal);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.022em;
}

.entry-content h3, .entry-content h4,
.site-content h3, .site-content h4,
.inside-article h3, .inside-article h4 {
  color: var(--charcoal);
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0;
}

/* Khối nền tối: đảo lại toàn bộ */
.m-section--dark h1, .m-section--dark h2,
.m-section--dark h3, .m-section--dark h4,
.m-section--dark p,
.m-section--dark .entry-content h2 {
  color: var(--cream);
}

/* ---------- Sổ đăng bạ chứng nhận: tăng tương phản ---------- */

.m-certs .m-cert__code   { color: var(--charcoal); }
.m-certs .m-cert__name   { color: #6B6157; }
.m-certs .m-cert__detail { color: var(--charcoal); }
.m-certs .m-cert__meta   { color: var(--charcoal); }
.m-certs .m-cert__meta dt { color: #8A6D22; }   /* vàng đậm hơn để đọc rõ trên nền kem */
.m-certs .m-cert__meta dd { color: var(--charcoal); }
.m-cert-note { color: #6B6157; }

/* ---------- Chữ phụ nói chung: đậm hơn một bậc ---------- */

.m-lead, .m-pillar__desc, .m-adv__desc,
.m-door__desc, .m-tl__desc, .m-hero__sub,
.m-gal figcaption { color: #4F473F; }

/* ---------- Khối số liệu nền tối: trắng toàn bộ ---------- */

.m-section--dark .m-stat__num,
.m-section--dark .m-stat__label,
.m-section--dark .m-cert-note,
.m-section--dark .m-mission__by,
.m-section--dark .m-lead,
.m-section--dark .m-tl__desc,
.m-section--dark .m-policy,
.m-section--dark .m-policy strong {
  color: #FFFFFF;
}
.m-section--dark .m-stat__label { opacity: 0.92; }
.m-section--dark .m-label { color: var(--gold); }

/* Logo đối tác trên nền tối: bỏ hoà nền, dùng nền trắng của file */
.m-section--dark .m-logos img { mix-blend-mode: normal; }

@media (max-width: 782px) {
  .m-logos { grid-template-columns: repeat(2, 1fr); }
  .m-logos img { max-height: 56px; }
}

/* ============================================================
   BỔ SUNG 06/09/2026 — hai class HTML đang dùng mà CSS chưa có
   Giữ nguyên mọi thứ phía trên. Chỉ thêm, không sửa.
   ============================================================ */

/* Vỏ <li> của nút CTA và Zalo trên menu chính.
   Không có rule này, hai mục cuối menu bị dính sát mục thường. */
.m-menu-extra { display: flex; align-items: center; }

/* Cột giữa của khối 4 trụ cột. Là <span>, phải ép block để
   tiêu đề và mô tả bên trong xuống dòng đúng trong lưới 110px 1fr 40px. */
.m-pillar__body { display: block; min-width: 0; }

@media (max-width: 768px) {
  /* Trên mobile GeneratePress gập menu — bỏ khoảng thụt của nút CTA
     để nó không lệch khỏi mép các mục còn lại. */
  .m-menu-extra .m-nav-cta { margin-left: 0; }
}
/* ============================================================
   MIANZ — LỚP CSS THẾ HỆ 2 · 06/09/2026
   ------------------------------------------------------------
   DÁN KHỐI NÀY VÀO CUỐI mianz-child/style.css.
   KHÔNG sửa gì phía trên.

   VÌ SAO CẦN KHỐI NÀY
   style.css hiện tại viết cho bộ tên class thế hệ 1
   (.m-section, .m-label, .m-stat, .m-hero). Ba file template
   product-template.php, page-pillar.php, page-ecosystem.php lại
   in ra bộ thế hệ 2 (.m-block, .m-eyebrow, .m-pi, .m-stats__num).
   Hai bộ này chưa bao giờ được nối lại — nên có trang chạy ĐÚNG
   về mặt PHP mà vẫn TRÔNG NHƯ HỎNG, và phiên sau nhìn ảnh chụp
   lại tưởng lỗi PHP rồi đi sửa PHP.

   Khối này định nghĩa đủ 72 class còn thiếu. Sau khi dán, chạy
   [mianz_check_ham] để xác nhận, rồi xoá cache LiteSpeed.

   Dùng lại đúng biến màu và font đã có ở :root phía trên —
   không thêm biến mới, không thêm font mới.
   ============================================================ */


/* ---------- KHUNG KHỐI CHUNG -------------------------------- */

.m-block {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
}

/* Khối nền tối. Trải hết chiều ngang màn hình bằng cách kéo lề âm,
   nhưng phần chữ bên trong vẫn giữ đúng 1180px như khối kem. */
.m-dark {
  background: var(--charcoal);
  color: var(--cream);
  max-width: none;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.m-dark > * {
  max-width: 1180px;
  margin-inline: auto;
}
.m-dark h1, .m-dark h2, .m-dark h3, .m-dark h4,
.m-dark p, .m-dark li, .m-dark dd, .m-dark td, .m-dark th {
  color: var(--cream);
}
.m-dark a { color: var(--cream); }
.m-dark .m-eyebrow { color: var(--gold); }


/* ---------- NHÃN & TIÊU ĐỀ TRANG ---------------------------- */

.m-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A6D22;
  margin: 0 0 1rem;
}
.m-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

.m-p-title {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  margin: 0 0 0.75rem;
}
.m-p-tagline {
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  color: #4F473F;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 1.75rem;
}

.m-lead--after   { margin-top: 1.75rem; }
.m-lead--closing {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  font-size: 1.0625rem;
  color: #4F473F;
}

/* Ghi chú phụ — cỡ nhỏ, dùng cho dòng pháp lý và dòng giải thích */
.m-note {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #6B6157;
  max-width: 70ch;
  margin: 1.25rem 0 0;
}
.m-dark .m-note { color: #C9C0B5; }

.m-role-note,
.m-price-note {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
  font-size: 0.875rem;
  color: #6B6157;
}

/* Cảnh báo chỉ admin thấy */
.m-warn {
  background: #FFF3CD;
  border-left: 4px solid var(--orange);
  padding: 0.85rem 1.1rem;
  margin: 1.25rem 0;
  font-size: 0.9375rem;
  color: var(--charcoal);
}
.m-warn code { background: rgba(0,0,0,.06); padding: 0.1em 0.35em; border-radius: 3px; }


/* ---------- ⑤ KHỐI SỐ LIỆU (trang Hệ sinh thái) ------------- */

.m-eco-stats .m-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.m-eco-stats .m-stats > li { display: block; }

.m-stats__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.m-stats__lab {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.92;
}

@media (max-width: 782px) {
  .m-eco-stats .m-stats { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- ③ TẦNG 1 — BỐN TRỤ CỘT trên trang Hệ sinh thái ---
   page-ecosystem.php in .m-pillar dạng <article> có <h3>, khác với
   [mianz_pillars] ở functions.php (dạng <a> lưới 3 cột). Ghi đè
   riêng trong .m-eco-t1 để không phá khối kia. */

.m-eco-t1 .m-pillars {
  border-top: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  margin-top: 2.5rem;
}
.m-eco-t1 .m-pillar {
  display: block;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.m-eco-t1 .m-pillar:hover { background: var(--white); border-color: var(--gold); }
.m-eco-t1 .m-pillar__no {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.m-eco-t1 .m-pillar h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.m-eco-t1 .m-pillar h3 a { color: var(--charcoal); text-decoration: none; }
.m-eco-t1 .m-pillar h3 a:hover { color: var(--orange); }
.m-eco-t1 .m-pillar p { margin: 0; color: #4F473F; line-height: 1.65; }

@media (max-width: 782px) {
  .m-eco-t1 .m-pillars { grid-template-columns: 1fr; }
}


/* ---------- ⑥ TẦNG 2 — ĐỐI TÁC CHIẾN LƯỢC ------------------- */

.m-eco-t2 { background: var(--white); max-width: none; }
.m-eco-t2 > * { max-width: 1180px; margin-inline: auto; }

.m-tier2__note {
  color: #4F473F;
  line-height: 1.7;
  max-width: 70ch;
  margin: 0 0 2rem;
}
.m-tier2__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.m-tier2__list > li { border-bottom: 1px solid var(--hairline); }
.m-tier2__list a {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 1.85rem) 0;
  text-decoration: none;
  color: inherit;
  transition: background 400ms var(--ease);
}
.m-tier2__list a:hover { background: var(--cream); }
.m-tier2__title { font-size: 1.125rem; font-weight: 600; color: var(--charcoal); }
.m-tier2__desc  { color: #4F473F; line-height: 1.65; }

@media (max-width: 782px) {
  .m-tier2__list a { grid-template-columns: 1fr; gap: 0.4rem; }
}


/* ---------- ⑧ TẦNG 3 — DỊCH VỤ MỞ RỘNG ---------------------- */

.m-t3 {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.m-t3 > li {
  padding: 1.1rem 1.25rem;
  background: var(--white);
  border-left: 3px solid var(--gold);
  line-height: 1.6;
  color: #4F473F;
}
@media (max-width: 782px) { .m-t3 { grid-template-columns: 1fr; } }


/* ---------- ★ BẢNG CAM KẾT (dl) ----------------------------- */

.m-commit {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 0.85rem clamp(1rem, 3vw, 2.5rem);
  margin: 2rem 0 0;
  padding: 0;
}
.m-commit dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.15rem;
}
.m-commit dd { margin: 0; line-height: 1.7; }

@media (max-width: 640px) {
  .m-commit { grid-template-columns: 1fr; gap: 0.25rem 0; }
  .m-commit dd { margin-bottom: 1rem; }
}


/* ---------- ④ DANH MỤC SO LE — trang trụ cột ---------------- */

.m-pillar-items { display: block; }

.m-pi {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.m-pi:first-child { padding-top: 0; }
.m-pi--flip  .m-pi__media { order: 2; }
.m-pi--noimg { grid-template-columns: 1fr; }

.m-pi__media { min-width: 0; }
.m-pi__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--cream-deep);
}

.m-pi__body { min-width: 0; }
.m-pi__no {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.m-pi__title {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--charcoal);
  margin: 0 0 0.5rem;
}
.m-pi__title a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--gold); }
.m-pi__title a:hover { color: var(--orange); border-color: var(--orange); }

.m-pi__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8A6D22;
  background: rgba(196, 154, 60, 0.14);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
}
.m-pi__note { color: #4F473F; line-height: 1.7; margin: 0 0 1rem; max-width: 62ch; }

.m-pi__price { margin: 0 0 0.5rem; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.m-pi__price-num {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  font-weight: 500;
  color: var(--charcoal);
}
.m-pi__price-unit { font-size: 0.9375rem; color: #6B6157; }
.m-pi__price--ask {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--orange);
}

.m-pi__link {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.m-pi__link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .m-pi { grid-template-columns: 1fr; gap: 1.25rem; }
  .m-pi--flip .m-pi__media { order: 0; }
}


/* ---------- THƯ VIỆN ẢNH (trụ cột + sản phẩm) --------------- */

.m-gal__grid,
.m-pgal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 2rem;
}
.m-gal__item,
.m-pgal__item { margin: 0; }
.m-gal__item img,
.m-pgal__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--cream-deep);
}
.m-gal__item figcaption,
.m-pgal__item figcaption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4F473F;
}
.m-pgal { background: var(--white); max-width: none; }
.m-pgal > * { max-width: 1180px; margin-inline: auto; }


/* ---------- GIÁ TRÊN TRANG SẢN PHẨM ------------------------- */

.m-price { margin: 1.5rem 0 0.4rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.m-price__num {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}
.m-price__unit { font-size: 1rem; color: #6B6157; }
.m-price__note { font-size: 0.875rem; color: #6B6157; margin: 0; }


/* ---------- ⑧ BẢNG THÔNG SỐ --------------------------------- */

.m-p-specs { background: var(--white); max-width: none; }
.m-p-specs > * { max-width: 1180px; margin-inline: auto; }

.m-th-sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-top: 0.15rem;
}
.m-mono { font-family: var(--mono); font-size: 0.9375rem; }
.m-measured { color: #2F7A2F; }
.m-dark .m-measured { color: #8FCE8F; }


/* ---------- ★ SỔ ĐĂNG BẠ + NHẬT KÝ LÔ ----------------------- */

.m-p-certs .m-certs { margin-top: 2rem; }
.m-lot { margin-top: 2rem; }
.m-lots__title {
  margin: 2.5rem 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.m-lots__file { color: var(--gold) !important; text-decoration: none; font-weight: 500; }
.m-lots__file:hover { text-decoration: underline; }
.m-lots__img { color: #C9C0B5 !important; font-size: 0.8125rem; text-decoration: underline; }

/* Bảng nền tối — kẻ mảnh, không viền hộp */
.m-dark .m-table { border-color: var(--hairline-dark); }
.m-dark .m-table th,
.m-dark .m-table td { border-color: var(--hairline-dark); }
.m-dark .m-table thead th { color: var(--gold); }


/* ---------- ④ ỨNG DỤNG TẠI SPA ------------------------------ */

.m-p-uses { background: var(--cream); max-width: none; }
.m-p-uses > * { max-width: 1180px; margin-inline: auto; }

.m-uses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 2rem;
}
.m-use {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--white);
  border-top: 3px solid var(--gold);
}
.m-use__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.m-use h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 600; }
.m-use p  { margin: 0; color: #4F473F; line-height: 1.65; font-size: 0.9375rem; }

@media (max-width: 900px) { .m-uses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .m-uses { grid-template-columns: 1fr; } }


/* ---------- ⑨ HỎI ĐÁP (bản template, khác <details> ở trang chủ) --- */

.m-p-faq { background: var(--white); max-width: none; }
.m-p-faq > * { max-width: 1180px; margin-inline: auto; }

.m-faq__item {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.m-faq__item:first-of-type { border-top: 1px solid var(--hairline); }
.m-faq__q {
  margin: 0 0 0.6rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.4;
}
.m-faq__a { margin: 0; color: #4F473F; line-height: 1.75; max-width: 78ch; }

.m-dark .m-faq__item { border-color: var(--hairline-dark); }
.m-dark .m-faq__q    { color: var(--cream); }
.m-dark .m-faq__a    { color: #C9C0B5; }


/* ---------- ① TUYÊN NGÔN + CTA cuối trang -------------------- */

.m-statement {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 22ch;
  margin: 0 0 2rem;
}
.m-p-cta .m-policy,
.m-eco-trust .m-policy {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem);
}
.m-p-cta .m-policy > li {
  font-size: 0.9375rem;
  color: #FFFFFF;
  padding-left: 1.15rem;
  position: relative;
}
.m-p-cta .m-policy > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.m-p-cta .m-policy strong { color: #FFFFFF; font-weight: 600; }

.m-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin: 0;
}
.m-actions .m-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.85rem;
  background: var(--orange);
  color: #FFFFFF !important;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 400ms var(--ease);
}
.m-actions .m-btn:hover { background: #C9370F; }

.m-phone {
  font-family: var(--mono);
  font-size: 1.125rem;
  color: var(--cream) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}
.m-phone:hover { color: var(--gold) !important; }


/* ---------- KHỐI CAM KẾT NỀN TỐI trên trang trụ cột ---------- */

.m-pillar-trust h2,
.m-eco-trust h2 { margin-top: 0; }

/* ---------- Bốn class vỏ ngoài — khai báo tường minh ---------
   Bốn class này chỉ xuất hiện trong CSS ở dạng bộ chọn con
   (.m-eco-t3 .m-t3 ...). Khai báo riêng ở đây để [mianz_check_ham]
   và mọi lần rà class sau này không báo là còn thiếu. */

.m-p-intro { background: transparent; }
.m-eco-t3  { background: var(--cream); max-width: none; }
.m-eco-t3 > * { max-width: 1180px; margin-inline: auto; }
.m-tier2   { display: block; }
.m-lots    { margin-top: 1rem; }