/* ==========================================================================
   MẪU HỘP GIẤY — giao diện riêng cho /in-hop-giay/mau-hop-giay/
   Nạp SAU sections.css qua $page['extra_css']. Mọi lớp mang tiền tố mhg-,
   dùng chung token (tokens.css) và thành phần sẵn có (.card, .btn,
   .section-head, .eyebrow, .form-status, .mobilebar…).

   Một KHUÔN THẺ chung (.mhg-the) cho các mục sản phẩm, ngành, kiểu hộp, chất
   liệu, gia công, cách đo: hình 4:3 · tên · một câu · chip · một hành động;
   phần dài gấp trong <details class="mhg-more">. Nhờ vậy năm mục nhìn ra
   cùng một ngôn ngữ, mắt không phải học lại cách đọc ở mỗi mục.

   Bậc màn hình theo sections.css: 1180 → 1040 → 900 → 760 → 640 → 520 → 420.
   ========================================================================== */

/* ---------------------------------------------------------------- Chung */
/* Trang có thanh điều hướng phụ dính dưới nav chính — neo chừa thêm chiều cao thanh đó. */
.page-mhg [id] { scroll-margin-top: calc(var(--nav-h) + 72px); }

/* Thanh liên hệ cố định riêng (Gọi · Zalo · Gửi yêu cầu) thay thanh chung của footer. */
.page-mhg .mobilebar:not(.mobilebar--mhg) { display: none !important; }
.mb-ico--form { background: var(--ink); }

.mhg-lock { overflow: hidden; }

.mhg-note,
.mhg-demo-note {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--paper-tint);
  border-left: 3px solid var(--red);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--g700);
  line-height: 1.55;
}
.mhg-demo-note { margin: 0 0 var(--s5); border-left-style: dashed; }
.section--tint .mhg-note,
.section--tint .mhg-demo-note { background: var(--paper); }
.mhg-note .ico,
.mhg-demo-note .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--red); }

/* Chip nhãn chỉ đọc */
.mhg-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; vertical-align: middle; }
.mhg-tags > * {
  display: inline-block;
  padding: 4px 10px;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  color: var(--g700);
  line-height: 1.3;
}
.section--tint .mhg-tags > * { background: var(--paper); }

/* Ưu / hạn chế hai cột */
.mhg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.mhg-cols-t {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g500);
}
.mhg-plus, .mhg-minus { display: grid; gap: 4px; font-size: var(--t-sm); color: var(--g700); line-height: 1.5; }
.mhg-plus li, .mhg-minus li { position: relative; padding-left: 18px; }
.mhg-plus li::before, .mhg-minus li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.mhg-plus li::before { content: "+"; color: #15803D; }
.mhg-minus li::before { content: "–"; color: var(--red); }

/* Thang ba chấm + chữ */
.mhg-thang { display: inline-flex; gap: 4px; vertical-align: middle; }
.mhg-thang i { width: 9px; height: 9px; border-radius: 50%; background: var(--g200); border: 1px solid var(--g300); }
.mhg-thang i.is-on { background: var(--red); border-color: var(--red); }
.mhg-thang-nhan { margin-left: 8px; font-size: var(--t-label); font-weight: var(--w-semibold); color: var(--g600); vertical-align: middle; }
.mhg-yes { color: #15803D; }
.mhg-no { color: var(--red); }

.mhg-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.3;
}
.mhg-badge--cp1 { background: #DCFCE7; color: #166534; }
.mhg-badge--cp2 { background: #FEF3C7; color: #92400E; }
.mhg-badge--cp3 { background: var(--ink); color: #fff; }

.mhg-art { display: block; width: 100%; height: 100%; color: var(--g700); }
.mhg-pattern { display: block; width: 100%; height: 100%; color: var(--g400); }
.mhg-anh-ten {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  z-index: 2;
  max-width: calc(100% - 2 * var(--s3));
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(15, 23, 42, .8);
  color: #fff;
  font-size: var(--t-tag);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- Lưới + khuôn thẻ chung */
.mhg-grid { display: grid; gap: var(--s4); padding: 0; list-style: none; }
.mhg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mhg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mhg-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mhg-grid[hidden], .mhg-table-wrap[hidden] { display: none; }
.mhg-grid > li { min-width: 0; display: flex; }
.mhg-grid > li > * { width: 100%; }

.mhg-the { display: flex; flex-direction: column; margin: 0; color: inherit; }
.mhg-the-art {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--s4);
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper-tint), var(--paper));
  border-bottom: 1px solid var(--line);
}
.mhg-the-art .mhg-art { width: auto; height: 78%; aspect-ratio: 1; color: var(--ink); }
.mhg-the-art .mhg-pattern { width: auto; height: 80%; aspect-ratio: 1; color: var(--g500); }
.mhg-the-art--do .mhg-art { height: 92%; }
.mhg-the-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Thẻ giấy bản GỌN (trang khai 'giay_gon' — xem inc/sections/giay-hop.php):
   phần chữ chỉ còn tên + một câu + nút, nên khung mẫu 4:3 chiếm gần 2/3 thẻ.
   Hạ về 16:9 cho hai phần cân nhau; vẫn đủ rộng để thấy vân và vệt màu. */
.mhg-cl--gon .mhg-the-art { aspect-ratio: 16 / 9; }
/* Bố cục chữ cân với thẻ BA LOẠI HỘP ở mục trên (.bind-card): cùng đệm 24px,
   cùng cỡ tên --t-h3 và cùng nhịp tên → mô tả. Trước đó thẻ giấy dùng đệm 16/20
   và tên --t-h4 (19px) nên đứng cạnh thẻ hộp (28px) nhìn như hai hệ khác nhau. */
.mhg-cl--gon .mhg-the-body { gap: 0; padding: var(--s6); }
.mhg-cl--gon .mhg-the-body h3 { font-size: var(--t-h3); }
.mhg-cl--gon .mhg-the-mota { margin-top: var(--s3); line-height: var(--lh-body); }
/* Dòng "Chọn khi …" trong thẻ bản gọn — thay dải nút chọn nhanh ở trên.
   Nhãn nhỏ viết hoa + câu nhu cầu, kẻ một nét trên để tách khỏi câu bề mặt. */
/* Câu bề mặt chốt đúng 3 DÒNG ở mọi thẻ (bản 4 cột, 09/2026 — trước là 2 dòng
   khi còn 3 cột): cột hẹp lại nên câu dài nhất tràn sang dòng thứ ba, thẻ đó
   đẩy dòng "PHÙ HỢP" xuống thấp hơn thẻ bên cạnh. Khoá SÀN bằng min-height,
   không cắt chữ; thẻ nào câu ngắn thì chừa chỗ trống, mọi hàng vẫn thẳng.
   ⚠️ Đổi số cột thì soát lại con số này — đo bằng tools/… hoặc mở 1440 và
      xem dòng PHÙ HỢP của tám thẻ có thẳng nhau không. */
/* Câu bề mặt chốt đúng 2 DÒNG ở mọi thẻ (dải trượt, thẻ rộng 416px ở 1440):
   câu 1 dòng như Bristol để hở một khoảng trắng dưới chữ, thẻ nhìn hụt so với
   thẻ bên cạnh. Khoá SÀN chứ không cắt chữ.
   ⚠️ Đổi số thẻ mỗi màn thì bề ngang thẻ đổi theo — soát lại con số này. */
.mhg-cl--gon .mhg-the-mota { min-height: calc(var(--t-sm) * var(--lh-body) * 2); }
.mhg-cl-khi {
  /* auto đẩy dòng này xuống ĐÁY thẻ: câu bề mặt dài ngắn khác nhau (Bristol
     1 dòng, Ivory 2 dòng) nên để margin cố định thì ba dòng "Hợp khi cần"
     trong cùng một hàng lệch nhau. Thẻ đã là flex cột (.mhg-the) và thân thẻ
     flex: 1, nên auto ăn hết chỗ trống còn lại. */
  /* padding-top 0: khe với câu bề mặt do gap của .mhg-the-body lo (8px) rồi;
     cộng thêm padding thì dòng này bị đẩy khỏi đáy đúng bấy nhiêu và ba thẻ
     trong một hàng lại lệch. Nét kẻ vẫn nằm sát mép trên dòng chữ. */
  margin-top: auto;
  padding-top: var(--s3);
  align-self: stretch;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--g700);
  line-height: 1.5;
}
.mhg-cl-khi span {
  display: inline-block;
  margin-right: 6px;
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
/* Thân thẻ là FLEX cột (không phải grid): nhờ vậy 'margin-top: auto' của
   dòng hành động mới đẩy được nó xuống đáy, các thẻ cùng hàng thẳng chân. */
.mhg-the-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4) var(--s5) var(--s5);
}
.mhg-the-body > * { margin: 0; }
.mhg-the-body h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-h4); }
.mhg-the-body h3 .ico { flex: none; width: 20px; height: 20px; color: var(--red); }
.mhg-the-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.mhg-the-mota { font-size: var(--t-sm); color: var(--g600); line-height: 1.5; }
.mhg-the-mota b { color: var(--ink); }
.mhg-the-line { font-size: var(--t-label); color: var(--g700); line-height: 1.5; }
.mhg-the-line .mhg-tags { margin-left: 4px; }
.mhg-the-go {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s2);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--red);
}
.mhg-the-go .ico { transition: transform .18s var(--ease); }
.mhg-the:hover .mhg-the-go .ico,
.mhg-the-go:hover .ico { transform: translateX(3px); }
/* Cả thẻ là link (mục Theo sản phẩm): giữ màu chữ, chỉ mũi tên và tên đổi khi trỏ vào */
a.mhg-the:hover h3 { color: var(--red); }

/* Phần gấp "Chi tiết" — dấu + / − cùng nếp Cẩm nang, Hỏi đáp của site */
.mhg-more { margin-top: var(--s2); border-top: 1px solid var(--line); }
.mhg-more summary {
  position: relative;
  padding: 10px 28px 10px 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g600);
  transition: color .18s var(--ease);
}
.mhg-more summary::-webkit-details-marker { display: none; }
.mhg-more summary:hover, .mhg-more[open] summary { color: var(--red); }
.mhg-more summary::after {
  content: "";
  position: absolute;
  right: 4px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  background:
    linear-gradient(var(--red), var(--red)) center / 100% 2px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2px 100% no-repeat;
  transition: transform .25s var(--ease);
}
.mhg-more[open] summary::after { transform: rotate(180deg); background-size: 100% 2px, 0 2px; }
.mhg-more-body { display: grid; gap: var(--s3); padding-bottom: var(--s2); font-size: var(--t-sm); color: var(--g700); line-height: 1.55; }
.mhg-more-body p b { color: var(--ink); }
.mhg-kh-khai { display: grid; gap: 6px; margin: 0; }
.mhg-kh-khai .mhg-art, .mhg-kh-khai img { width: 100%; max-width: 220px; aspect-ratio: 1; margin-inline: auto; padding: var(--s2); background: var(--paper-tint); border-radius: var(--r-sm); color: var(--ink); }
.mhg-kh-khai figcaption { font-size: var(--t-tag); color: var(--g500); text-align: center; }

/* Ba thang trong một hàng (thẻ kiểu hộp, kết quả wizard) */
.mhg-meters { display: grid; gap: 6px; padding: var(--s3) var(--s4); background: var(--paper-tint); border-radius: var(--r-sm); }
.mhg-meters li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-size: var(--t-label); color: var(--g600); }
.mhg-meters li > span:first-child { font-weight: var(--w-semibold); }
.mhg-meters li b { font-size: var(--t-label); }
.mhg-meters--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); padding: var(--s2) var(--s3); }
.mhg-meters--row li { flex-direction: column; align-items: flex-start; gap: 3px; }
.mhg-meters--row li > span:first-child { font-size: var(--t-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--g500); }
.mhg-meters--row .mhg-thang-nhan { margin-left: 4px; }

@media (max-width: 1180px) { .mhg-grid--5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1040px) {
  .mhg-grid--4, .mhg-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .mhg-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .mhg-grid { gap: var(--s3); }
  .mhg-grid--3, .mhg-grid--4, .mhg-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .mhg-the-body { padding: var(--s4); }
}
/* ---- Đầu mục Chất liệu khi có nút ‹ › (bản gọn, 09/2026) ----
   .section-head--split là lưới 2 cột × 2 hàng (nhãn | trống / tiêu đề | trích
   dẫn). Cụm .hs-nav là con thứ tư nên tự rơi xuống một HÀNG MỚI, đẩy tiêu đề
   xuống 35px so với mục "Ba loại hộp" ngay trên — hai đầu mục lệch nhịp thấy rõ.
   Ghim nút vào ĐÚNG ô hàng 1 cột 2 (chỗ đang trống cạnh nhãn) thì lưới về lại
   2 hàng, hai mục cùng một nhịp. */
/* Nút cao 44px trong khi hàng nhãn chỉ 19px, nên nếu để nút trong lưới thì nó
   nới hàng 1 lên 44px và đẩy tiêu đề xuống 35px so với mục "Ba loại hộp" ngay
   trên. Nhấc nút ra khỏi lưới (absolute) thì hàng nhãn về đúng 19px và hai đầu
   mục cùng một nhịp.
   ⚠️ Nút nằm đè lên cột phải, nên câu trích dẫn phải CHỪA CHỖ bằng padding —
      thiếu dòng đó thì nút che mất chữ cuối dòng đầu (đo thật ở 1440). */
.section-head--split { position: relative; }
.section-head--split > .hs-nav { position: absolute; top: 0; right: 0; }
.section-head--split:has(> .hs-nav) > .lead--trich { padding-right: 112px; }
@media (max-width: 860px) {
  /* Một cột: nút về hàng riêng như cũ (khuôn --split cũng đã xếp dọc ở mốc này). */
  .section-head--split > .hs-nav { position: static; grid-column: 1; grid-row: auto; justify-self: start; }
  .section-head--split:has(> .hs-nav) > .lead--trich { padding-right: 0; }
}

/* ============ DẢI TRƯỢT 4 CỘT — mục Chất liệu và Gia công (bản gọn) ============
   Chủ trang chốt 09/2026, thay khối TAB trước đó.

   Bốn thẻ đầy khung, hai thẻ còn lại vuốt ngang xem tiếp. Thẻ ảnh TRÊN chữ
   DƯỚI, nội dung chỉ tên + một câu + nhãn — muốn đọc sâu thì sang trang cẩm
   nang. Hệ .hs / .hs-track / .hs-nav / .hs-meter dùng chung với mục Ba loại
   hộp; engine cuộn nằm trong main.js.

   ⚠️ Phải khai LẠI grid-auto-columns: biến --hs-cols chỉ được ".hs--media
      .hs-track" (2 lớp) đọc, đặc hiệu cao hơn ".mhg-grid--truot" (1 lớp), nên
      không khai thì thẻ giữ nguyên 310px mặc định và lộ nửa thẻ thứ năm.
      Selector ".hs .mhg-grid--truot" cũng 2 lớp nhưng file này nạp SAU nên thắng.
   ⚠️ Khe 20px (--s5) cho BẰNG lưới ba loại hộp ở mục trên — hai mục đứng gần
      nhau, khe lệch 4px là mắt thấy ngay. */
.hs .mhg-grid--truot {
  --hs-cols: 4;
  --hs-gap: var(--s5);
  gap: var(--s5);   /* .hs-track khai gap riêng — phải ghi đè cả hai */
  grid-auto-columns: calc((100% - (var(--hs-cols) - 1) * var(--hs-gap)) / var(--hs-cols));
  /* Khung cuộn (overflow-x: auto) cắt luôn phần thẻ thò ra ngoài theo chiều
     dọc: hiệu ứng hover nhấc thẻ lên 3px và đổ bóng đặc xuống 6px, đo thật
     thấy bóng mất 3px ở đáy. Chừa đệm trên/dưới rồi bù bằng margin âm cùng
     số — bố cục không xê dịch, bóng và mép trên thẻ hết bị xén.
     ⚠️ CHỈ đệm theo chiều DỌC: đệm ngang làm hẹp content-box, mà công thức
        grid-auto-columns ở trên tính 100% theo content-box → thẻ sẽ hụt. */
  padding-block: 4px 8px;
  margin-block: -4px -8px;
}
.mhg-grid--truot > li { scroll-snap-align: start; }
@media (max-width: 1100px) { .hs .mhg-grid--truot { --hs-cols: 3; } }
@media (max-width: 820px)  { .hs .mhg-grid--truot { --hs-cols: 2; } }
@media (max-width: 560px)  { .hs .mhg-grid--truot { --hs-cols: 1; } }

/* ---- Thẻ trong dải: ảnh trên, chữ dưới ----
   Hiệu ứng rê chuột KHÔNG khai ở đây — thẻ mang lớp .card--hover nên dùng
   chung "nhấc chéo + bóng lệch cứng" của components.css (chủ trang chốt
   09/2026). Bản trước có rule riêng (.mhg-cl--gon:hover nhấc thẳng 3px, bóng
   mềm): file này nạp SAU components.css và cùng độ đặc hiệu nên rule riêng
   thắng, ba dải trượt hoá ra lệch pha với mọi thẻ khác trên site. Đã gỡ. */
.mhg-cl--gon {
  /* overflow ẩn để ô ảnh không thò ra ngoài góc bo của .card.
     transition đã có ở .card — không khai lại kẻo lệch đường cong (--ease). */
  overflow: hidden;
}
/* Cả thẻ là <a> dẫn sang cẩm nang: bỏ gạch chân và màu link mặc định, để thẻ
   nhìn y như thẻ thường. Dấu hiệu bấm được là hiệu ứng nhấc lên khi rê chuột —
   chủ trang chốt KHÔNG thêm mũi tên hay nhãn "xem thêm" (09/2026), bấm thẳng
   vào thẻ là xong. */
.mhg-the--link { color: inherit; text-decoration: none; }
/* Thân thẻ là cột dọc để nhãn có chỗ tự đẩy xuống ĐÁY (margin-top: auto),
   nhờ đó nhãn của bốn thẻ trong một hàng luôn thẳng nhau dù câu dài ngắn khác. */
.mhg-cl--gon .mhg-the-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s5);
}
.mhg-cl--gon .mhg-the-body h3 { font-size: var(--t-h4); }
.mhg-cl--gon .mhg-the-mota {
  margin-top: var(--s2);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--g700);
  /* Khoá SÀN đúng 2 dòng (không cắt chữ): câu 'tom' viết trong khoảng 40–52 ký
     tự nên thẻ nào cũng vừa 2 dòng ở cột 305px; thẻ câu ngắn chừa chỗ trống,
     mọi hàng vẫn thẳng.
     ⚠️ Đổi số cột thì bề ngang thẻ đổi theo — soát lại con số này. */
  min-height: calc(var(--t-sm) * var(--lh-body) * 2);
}
/* Nhãn ở đáy thẻ, cách phần chữ bằng một nét kẻ. */
.mhg-the-nhan {
  margin-top: var(--s4);
  align-self: flex-start;
}
/* Mục Gia công gánh hai nhãn. Cho MỖI nhãn một dòng riêng thay vì để xuống
   dòng tuỳ độ dài: "Nên có + Tiết kiệm" vừa một hàng còn "Làm nổi chi tiết +
   Trung bình" phải hai hàng, nên bốn thẻ trong một hàng lệch đáy nhau. */
.mhg-the-nhans {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--s4);
}
.mhg-the-nhans .mhg-the-nhan { margin-top: 0; }
/* auto đẩy cụm nhãn xuống ĐÁY — xem lý do ở .mhg-the-body. */
.mhg-cl--gon .mhg-the-body > .mhg-the-nhan,
.mhg-cl--gon .mhg-the-body > .mhg-the-nhans { margin-top: auto; padding-top: var(--s4); }

/* Ô ảnh: 4:3 — khuôn ảnh chụp sản phẩm quen thuộc, và cho ảnh chỗ rộng hơn
   16:9 vì đây là thứ bán hàng chính khi có ảnh thật. */
.mhg-cl--gon .mhg-the-art { aspect-ratio: 4 / 3; }

/* ---- Ô CHỜ ẢNH (chưa có ảnh chụp thật) ----
   Nền trắng phẳng, một nét kẻ đứt bên trong cho thấy rõ "đây là chỗ để ảnh"
   chứ không phải thẻ bị lỗi. Chủ trang chốt 09/2026, thay mô phỏng vân giấy
   và dấu NP trước đó. */
.mhg-the-art--cho {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.mhg-the-art--cho::before {
  content: "";
  position: absolute;
  inset: var(--s4);
  border: 1px dashed var(--g300);
  border-radius: var(--r-sm);
}
/* Tên file + cỡ ảnh cần chụp — chỉ hiện lúc dựng (NP_STAGING), ghi chú nội bộ. */
.mhg-cho-ten {
  position: relative;
  font-size: var(--t-tag);
  line-height: 1.6;
  text-align: center;
  color: var(--g500);
  word-break: break-all;
}

/* ---- Nhãn thế mạnh: icon + chữ, viên thuốc bo tròn ----
   ⚠️ Màu chữ g600 chứ không phải g500 như các nhãn nhỏ khác — nền viên là
      paper-tint (đậm hơn nền thẻ trắng) nên g500 chỉ đạt tương phản 4.34,
      dưới mức 4.5 mà Lighthouse đòi cho chữ 11px. */
.giay-khoi-nhan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-tint);
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--g600);
  line-height: 1.3;
}
.giay-khoi-nhan svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Nhãn phụ (chi phí): nền trắng để nhãn chính vẫn là thứ mắt bắt trước. */
.giay-khoi-nhan--phu { background: var(--paper); }

/* ---- Một thẻ đầy khung (dưới 560px): nhãn về lại hàng ngang bình thường ---- */
@media (max-width: 560px) {
  .mhg-cl--gon .mhg-the-mota { min-height: 0; }
}

/* Lưới thẻ giấy bản GỌN (.mhg-cl--gon bên trong): giữ 2 CỘT tới tận 375px thay
   vì rơi về 1 cột. Nay mục Chất liệu đã chuyển sang dải trượt nên rule này chỉ
   còn tác dụng nếu bật lại lưới; giữ cho khỏi mất bậc đã đo.
   Đặt SAU các bậc chung ở trên để thắng nhờ thứ tự khai báo. */
@media (max-width: 420px) {
  .mhg-grid--3, .mhg-grid--4 { grid-template-columns: 1fr; }
  .mhg-grid--4:has(.mhg-cl--gon) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Cột 171px: câu dài nhất tràn 4 dòng — nới sàn cho tám thẻ vẫn thẳng hàng. */
  /* Một thẻ đầy khung (354px): câu dài nhất vẫn 2 dòng nên giữ chung mốc. */
  .mhg-cl--gon .mhg-the-mota { min-height: calc(var(--t-sm) * var(--lh-body) * 2); }
  /* Mục Theo sản phẩm: icon đơn giản, chữ ngắn → giữ hai cột cho gọn trang. */
  .mhg-grid--sp { grid-template-columns: repeat(2, 1fr); }
  .mhg-grid--sp .mhg-the-body { padding: var(--s3) var(--s4) var(--s4); }
  .mhg-grid--sp .mhg-the-mota { display: none; }
  /* Thẻ một cột: ô hình 4:3 chiếm gần cả màn hình mỗi thẻ — hạ về 16:9,
     riêng hình cách đo giữ 4:3 vì có chữ chú thích bên trong. */
  .mhg-grid:not(.mhg-grid--sp) .mhg-the-art:not(.mhg-the-art--do) { aspect-ratio: 16 / 9; }
  .mhg-grid:not(.mhg-grid--sp) .mhg-the-art .mhg-art,
  .mhg-grid:not(.mhg-grid--sp) .mhg-the-art .mhg-pattern { height: 88%; }
}

/* ---------------------------------------------------------------- Hero */
.mhg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.mhg-hero-copy h1 {
  margin: 0 0 var(--s5);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.18;
}
.mhg-hero-copy .lead { max-width: 56ch; }
.mhg-hero-actions { margin-top: var(--s6); }
.mhg-hero-sub {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  margin-top: var(--s5);
  max-width: 56ch;
  font-size: var(--t-sm);
  color: var(--g600);
  line-height: 1.55;
}
.mhg-hero-sub .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--red); }
.mhg-hero-link { margin-top: var(--s2); }
.mhg-hero-anh {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}
.mhg-hero-anh img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .mhg-hero-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Thanh điều hướng nhanh */
.mhg-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.mhg-nav-in { display: flex; align-items: center; gap: var(--s4); min-height: 56px; }
.mhg-nav-list {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mhg-nav-list::-webkit-scrollbar { display: none; }
.mhg-nav-list a {
  display: block;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--g600);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mhg-nav-list a:hover { color: var(--ink); background: var(--g100); }
.mhg-nav-list a.is-active { color: #fff; background: var(--ink); }
.mhg-nav-cta { flex: none; min-height: 40px; padding: 0 var(--s4); }
@media (max-width: 640px) {
  .mhg-nav-cta { display: none; }
  .mhg-nav-in { min-height: 50px; }
}

/* ---------------------------------------------------------------- 03 · Kiểu hộp: công tắc Thẻ / Bảng + bảng */
.mhg-view {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--s5);
  padding: 3px;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.mhg-view button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--g600);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mhg-view button:hover { color: var(--ink); }
.mhg-view button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.mhg-table-wrap {
  /* ⚠️ position: relative là BẮT BUỘC: trong bảng có <span class="sr-only">
     (position: absolute). Không có mốc định vị ở đây thì span đó tính theo
     khung tài liệu, thoát khỏi overflow và kéo bề rộng trang lên ~1000px —
     điện thoại bị thu nhỏ. Đã đo thật 04/09/2026. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mhg-table-wrap:focus-visible { outline: 3px solid var(--focus-ring); }
.mhg-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: var(--t-sm); }
.mhg-table th, .mhg-table td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.mhg-table thead th {
  background: var(--paper-tint);
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g500);
  white-space: nowrap;
}
.mhg-table tbody th { font-weight: var(--w-semibold); color: var(--ink); white-space: nowrap; }
.mhg-table tbody tr:last-child th, .mhg-table tbody tr:last-child td { border-bottom: 0; }
.mhg-table tbody tr:hover { background: var(--paper-sub); }
.mhg-table td .link-arrow { min-height: 0; white-space: nowrap; }
.mhg-table .mhg-thang-nhan { white-space: nowrap; }

/* ---------------------------------------------------------------- 04 · Chất liệu */
.mhg-quick-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s5); }
.mhg-quick-strip a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 8px var(--s4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--g700);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.mhg-quick-strip a b { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--ink); }
.mhg-quick-strip a b .ico { color: var(--red); }
.mhg-quick-strip a:hover { border-color: var(--ink); box-shadow: var(--sh-sm); }
@media (max-width: 900px) { .mhg-quick-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mhg-quick-strip { grid-template-columns: 1fr; } }

/* Mô phỏng bề mặt giấy (dùng làm .mhg-the-art — đặt SAU để đè nền chuyển sắc chung) */
.mhg-swatch { background: var(--g100); }
.mhg-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mhg-swatch-tag {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  z-index: 2;
  padding: 3px 8px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g600);
}
.mhg-swatch--ivory,
.mhg-swatch--bristol,
.mhg-swatch--duplex { background: linear-gradient(135deg, #FFFFFF 0%, #F6F7F9 60%, #EEF1F4 100%); }
.mhg-swatch--ivory::after,
.mhg-swatch--bristol::after,
.mhg-swatch--duplex::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 38%;
  border-left: 1px solid rgba(15, 23, 42, .08);
}
.mhg-swatch--ivory { background: linear-gradient(135deg, #FFFFFF 0%, #F9F7F2 55%, #F1ECE2 100%); }
.mhg-swatch--ivory::after { background: #F3EEE2; }
.mhg-swatch--bristol::after { background: #FFFFFF; }
.mhg-swatch--duplex::after { background: #A7AFB8; }
/* Couche: tráng phấn hai mặt, láng — dải sáng chéo gợi mặt bóng bắt ánh sáng.
   Ford: không tráng, mặt nhám — nền ngà ấm với hạt nhiễu rất nhẹ. */
.mhg-swatch--couche {
  background:
    linear-gradient(115deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(135deg, #FFFFFF 0%, #F4F7FA 50%, #E9EEF3 100%);
}
.mhg-swatch--ford {
  background:
    radial-gradient(rgba(15,23,42,.05) 1px, transparent 1px) 0 0 / 4px 4px,
    linear-gradient(135deg, #FCFBF7 0%, #F5F2EA 60%, #EDE8DC 100%);
}
.mhg-swatch--kraft {
  background-color: #C9A87C;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .2), transparent 45%);
}
.mhg-swatch--my-thuat {
  background-color: #C9D4DE;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(15, 23, 42, .06) 0 2px, transparent 2px 6px);
}
.mhg-swatch--metalize { background: linear-gradient(115deg, #CBD0D6 0%, #F5F7FA 25%, #B7BEC7 45%, #FFFFFF 60%, #AEB5BF 80%, #E6E9EE 100%); }

/* Khối "Giấy nên dày bao nhiêu?" khép mục chất liệu */
.mhg-dd {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--s6);
  align-items: start;
  margin-top: var(--s6);
  padding: var(--s6);
}
.mhg-dd-left { display: grid; gap: var(--s3); }
.mhg-dd-left h3 { font-size: var(--t-h3); }
.mhg-dd-yeuto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); margin-top: var(--s2); }
.mhg-dd-yeuto li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); color: var(--g600); line-height: 1.5; }
.mhg-dd-yeuto li b { display: block; color: var(--ink); }
.mhg-dd-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--red-subtle);
  color: var(--red);
}
.mhg-dd-ico .ico { width: 20px; height: 20px; }
.mhg-dd-right { display: grid; gap: var(--s4); }
.mhg-dd-right .btn { justify-self: start; }
.mhg-canhbao {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: var(--r-md);
  color: #7C2D12;
  font-size: var(--t-sm);
  line-height: 1.6;
}
.mhg-canhbao .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; color: #C2410C; }
@media (max-width: 860px) {
  .mhg-dd { grid-template-columns: 1fr; padding: var(--s5); }
}
@media (max-width: 480px) { .mhg-dd-yeuto { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 05 · Gia công: mô phỏng hiệu ứng trên dấu NP */
.mhg-gc-mark { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; }
.mhg-gc-mark i { font-style: normal; font-weight: 800; font-size: 26px; letter-spacing: -.04em; line-height: 1; }
/* Cán vân giấy (thêm 09/2026): vân sần chéo phủ toàn mặt, dấu NP cũng ăn vân
   theo — cho thấy đây là lớp màng phủ HẾT mặt hộp chứ không phải một mảng. */
.mhg-swatch--gc-can-van {
  background-color: #EDE9E1;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(15, 23, 42, .07) 0 2px, transparent 2px 5px);
}
.mhg-swatch--gc-can-van .mhg-gc-mark {
  background: var(--red);
  color: #fff;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 5px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
}
.mhg-swatch--gc-can-mo { background: #F8F7F4; }
.mhg-swatch--gc-can-mo .mhg-gc-mark { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(15, 23, 42, .08); }
.mhg-swatch--gc-can-bong { background: linear-gradient(135deg, #FFFFFF 0%, #EEF2F6 40%, #FFFFFF 55%, #E3E8EE 100%); }
.mhg-swatch--gc-can-bong::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .75) 48%, transparent 58%);
  pointer-events: none;
}
.mhg-swatch--gc-can-bong .mhg-gc-mark {
  background: linear-gradient(160deg, #F0475A, var(--red) 55%, #B8121F);
  color: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.mhg-swatch--gc-chong-tray { background: #1F2937; }
.mhg-swatch--gc-chong-tray .mhg-gc-mark { background: #111827; color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.mhg-swatch--gc-ep-kim { background: #0F172A; }
.mhg-swatch--gc-ep-kim .mhg-gc-mark {
  background: linear-gradient(135deg, #8A6A1F 0%, #F6D77A 30%, #C99A2E 50%, #FFF0B8 70%, #A8801F 100%);
  color: #3B2A05;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.mhg-swatch--gc-chong-tray .mhg-swatch-tag,
.mhg-swatch--gc-ep-kim .mhg-swatch-tag { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); color: #fff; }
.mhg-swatch--gc-uv { background: #EDEBE6; }
.mhg-swatch--gc-uv .mhg-gc-mark { background: var(--red); color: #fff; box-shadow: 0 10px 24px rgba(225, 29, 46, .28), inset 0 2px 0 rgba(255, 255, 255, .35); }
.mhg-swatch--gc-uv .mhg-gc-mark::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
}
.mhg-swatch--gc-dap-noi,
.mhg-swatch--gc-dap-chim { background: #E9E4DA; }
.mhg-swatch--gc-dap-noi .mhg-gc-mark { background: #E9E4DA; box-shadow: -3px -3px 6px rgba(255, 255, 255, .85), 4px 4px 8px rgba(15, 23, 42, .18); }
.mhg-swatch--gc-dap-noi .mhg-gc-mark i { color: #E4DED3; text-shadow: -1px -1px 0 rgba(255, 255, 255, .9), 1px 1px 1px rgba(15, 23, 42, .28); }
.mhg-swatch--gc-dap-chim .mhg-gc-mark { background: #E3DDD1; box-shadow: inset 3px 3px 6px rgba(15, 23, 42, .2), inset -3px -3px 6px rgba(255, 255, 255, .85); }
.mhg-swatch--gc-dap-chim .mhg-gc-mark i { color: #DCD5C8; text-shadow: 1px 1px 0 rgba(255, 255, 255, .85), -1px -1px 1px rgba(15, 23, 42, .25); }
.mhg-swatch--gc-be-cua-so,
.mhg-swatch--gc-mang-cua-so { background: var(--red); }
.mhg-swatch--gc-be-cua-so .mhg-swatch-tag,
.mhg-swatch--gc-mang-cua-so .mhg-swatch-tag { background: rgba(255, 255, 255, .92); }
.mhg-swatch--gc-be-cua-so .mhg-gc-mark i,
.mhg-swatch--gc-mang-cua-so .mhg-gc-mark i { display: none; }
.mhg-swatch--gc-be-cua-so .mhg-gc-mark { border-radius: 50%; background: #F1F5F9; box-shadow: inset 0 0 0 4px rgba(15, 23, 42, .06); }
.mhg-swatch--gc-be-cua-so .mhg-gc-mark::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--g400); }
.mhg-swatch--gc-mang-cua-so .mhg-gc-mark {
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .35);
}
.mhg-swatch--gc-mang-cua-so .mhg-gc-mark::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.mhg-swatch--gc-in-mat-trong {
  background-color: var(--g100);
  background-image: radial-gradient(circle, var(--red) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}
.mhg-swatch--gc-in-mat-trong .mhg-gc-mark { background: #fff; color: var(--red); border: 1px solid var(--line); }
.mhg-gc .mhg-the-body h3 { font-size: var(--t-body); }

/* ---------------------------------------------------------------- 06 · Thư viện mẫu */
.mhg-tv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.mhg-tv-toggle { display: none; min-height: 44px; }
.mhg-tv-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--t-tag);
  font-weight: 800;
}
.mhg-tv-count { font-size: var(--t-sm); color: var(--g600); }
.mhg-tv-count b { font-family: var(--mono); font-size: var(--t-h4); color: var(--ink); }
.mhg-tv-tools { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }
.mhg-tv-luu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--g700);
  transition: all .15s var(--ease);
}
.mhg-tv-luu .ico { color: var(--red); }
.mhg-tv-luu b { font-family: var(--mono); }
.mhg-tv-luu[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.mhg-tv-luu[aria-pressed="true"] .ico { color: #FF8A93; }
.mhg-tv-clear { min-height: 40px; }
.mhg-tv-clear[hidden] { display: none; }

.mhg-tv-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.mhg-loc {
  position: sticky;
  top: calc(var(--nav-h) + 72px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--nav-h) - 92px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mhg-loc-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.mhg-loc-close { display: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); }
.mhg-loc-form { flex: 1; display: grid; align-content: start; padding: 0 var(--s5) var(--s3); overflow-y: auto; }
.mhg-loc-group { border-bottom: 1px solid var(--line); }
.mhg-loc-group:last-child { border-bottom: 0; }
.mhg-loc-group summary {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 22px var(--s3) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g600);
}
.mhg-loc-group summary::-webkit-details-marker { display: none; }
.mhg-loc-group summary:hover { color: var(--ink); }
.mhg-loc-group summary::after {
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -5.5px;
  background:
    linear-gradient(var(--g500), var(--g500)) center / 100% 2px no-repeat,
    linear-gradient(var(--g500), var(--g500)) center / 2px 100% no-repeat;
  transition: transform .25s var(--ease);
}
.mhg-loc-group[open] summary::after { transform: rotate(180deg); background-size: 100% 2px, 0 2px; }
.mhg-loc-dem {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--t-tag);
  letter-spacing: 0;
}
.mhg-loc-dem[hidden] { display: none; }
.mhg-loc-group .mhg-chips { padding-bottom: var(--s4); }
.mhg-loc-foot { display: none; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); background: var(--paper); }
.mhg-loc-foot .btn { flex: 1; }

/* Chip chọn (checkbox / radio ẩn) — bộ lọc, form và công cụ tìm hộp */
.mhg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mhg-chip { position: relative; display: inline-flex; }
.mhg-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.mhg-chip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  color: var(--g700);
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  transition: all .15s var(--ease);
}
.mhg-chip span:hover { border-color: var(--g500); color: var(--ink); }
.mhg-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.mhg-chip input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Lựa chọn của công cụ tìm hộp: LƯỚI đều (09/2026, trước là hàng flex tự
   xuống dòng — 8 mục dàn thành một hàng dài 1230px, mỗi ô một bề ngang khác
   nhau, nhìn lởm chởm). minmax(0,1fr) để ô hẹp nhất vẫn chứa được nhãn dài. */
.mhg-chips--lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s2);
}
.mhg-chip--lg { display: block; }
.mhg-chip--lg span {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: 10px var(--s3);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  text-align: center;
}
.mhg-chip--lg span small { font-size: var(--t-label); font-weight: var(--w-regular); opacity: .75; }

.mhg-tv-active { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s4); }
.mhg-tv-active[hidden] { display: none; }
.mhg-tv-active button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  color: var(--g700);
}
.mhg-tv-active button .ico { width: 14px; height: 14px; color: var(--red); }
.mhg-tv-active button:hover { border-color: var(--red); }

.mhg-mau-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); padding: 0; list-style: none; }
.mhg-mau { display: flex; flex-direction: column; }
.mhg-mau[hidden] { display: none; }
.mhg-mau-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-tint); border-bottom: 1px solid var(--line); }
.mhg-mau-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mhg-mau-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.mhg-mau-img:hover img { transform: scale(1.04); }
.mhg-mau-img--tam { position: relative; cursor: default; }
/* Tên file đề xuất xếp TRÊN nhãn "Dữ liệu minh hoạ", cùng mép trái — thẻ hẹp
   mà để hai nhãn hai đầu là chúng đè nhau. */
.mhg-mau-media .mhg-anh-ten { bottom: calc(var(--s3) + 30px); }
.mhg-mau-id {
  position: absolute;
  top: var(--s3); left: var(--s3);
  z-index: 2;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: var(--t-tag);
  font-weight: 700;
  letter-spacing: .06em;
}
.mhg-mau-demo {
  position: absolute;
  bottom: var(--s3); left: var(--s3);
  z-index: 2;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  border: 1px dashed var(--g400);
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--g600);
}
.mhg-luu {
  position: absolute;
  top: var(--s3); right: var(--s3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  color: var(--g600);
  transition: all .15s var(--ease);
}
.mhg-luu .ico { width: 20px; height: 20px; }
.mhg-luu:hover { color: var(--red); border-color: var(--red); }
.mhg-luu[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.mhg-mau-body { flex: 1; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s5) var(--s5); }
.mhg-mau-nganh { font-size: var(--t-tag); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--g500); }
.mhg-mau-title { font-size: var(--t-h4); }
.mhg-mau-title button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mhg-mau-title button:hover { color: var(--red); }
.mhg-mau-line { font-size: var(--t-sm); color: var(--g600); line-height: 1.5; }
.mhg-mau-body .btn { margin-top: auto; min-height: 44px; font-size: var(--t-label); }
.mhg-tv-empty {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  padding: var(--s9) var(--s6);
  text-align: center;
  color: var(--g700);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.mhg-tv-empty[hidden] { display: none; }
.mhg-tv-empty > .ico { width: 36px; height: 36px; color: var(--g400); }
@media (max-width: 1180px) { .mhg-mau-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .mhg-tv-toggle { display: inline-flex; }
  .mhg-tv-layout { grid-template-columns: 1fr; }
  .mhg-loc {
    position: fixed;
    inset: 0;
    z-index: 80;
    max-height: none;
    border-radius: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .25s var(--ease), visibility 0s linear .25s;
  }
  .mhg-loc.is-open { transform: none; visibility: visible; transition: transform .25s var(--ease); }
  .mhg-loc-close { display: grid; }
  .mhg-loc-foot { display: flex; padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .mhg-mau-grid { grid-template-columns: 1fr; }
  .mhg-tv-tools { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* ---------------------------------------------------------------- Hộp chi tiết mẫu */
.mhg-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s4); }
.mhg-modal[hidden] { display: none; }
.mhg-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .62); backdrop-filter: blur(4px); }
.mhg-modal-dialog {
  position: relative;
  width: min(100%, 1040px);
  max-height: calc(100vh - var(--s8));
  overflow: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  outline: 0;
}
.mhg-modal-close {
  position: sticky;
  top: var(--s3);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: var(--s3) var(--s3) -44px auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.mhg-modal-body { padding: var(--s6); }
.mhg-md { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
.mhg-md-gallery { position: sticky; top: var(--s6); display: grid; gap: var(--s3); align-content: start; }
.mhg-md-main { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-tint); border: 1px solid var(--line); border-radius: var(--r-md); }
.mhg-md-main img { width: 100%; height: 100%; object-fit: cover; }
.mhg-md-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mhg-md-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 4px;
  overflow: hidden;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: var(--g500);
  cursor: pointer;
}
.mhg-md-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mhg-md-thumb.is-active { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-subtle); }
.mhg-md-caption { font-size: var(--t-label); color: var(--g600); }
.mhg-md-info { display: grid; gap: var(--s4); align-content: start; }
.mhg-md-head { display: grid; gap: var(--s2); padding-right: 48px; }
.mhg-md-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.mhg-md-head .mhg-mau-id, .mhg-md-head .mhg-mau-demo { position: static; }
.mhg-md-head h2 { font-size: var(--t-h3); }
.mhg-md-head p { font-size: var(--t-sm); color: var(--g600); line-height: 1.55; }
.mhg-md-luu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  color: var(--g700);
}
.mhg-md-luu .ico { width: 16px; height: 16px; color: var(--red); }
.mhg-md-luu[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.mhg-md-luu[aria-pressed="true"] .ico { color: #fff; }
.mhg-md-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s4); padding: var(--s4); background: var(--paper-tint); border-radius: var(--r-md); }
.mhg-md-specs > div { display: grid; gap: 2px; min-width: 0; }
.mhg-md-specs dt { font-size: var(--t-tag); font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--g500); }
.mhg-md-specs dd { margin: 0; font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--ink); overflow-wrap: anywhere; }
.mhg-md-specs dd small { display: block; font-size: var(--t-tag); font-weight: var(--w-regular); color: var(--g500); }
.mhg-md-block h3 { margin-bottom: var(--s2); font-size: var(--t-body); }
.mhg-md-block ul { display: grid; gap: 4px; font-size: var(--t-sm); color: var(--g700); line-height: 1.5; }
.mhg-md-block li { position: relative; padding-left: 16px; }
.mhg-md-block li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.mhg-md-ctas { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.mhg-md-ctas .btn { width: 100%; }
.mhg-md-ctas-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.mhg-md-ctas-row .btn { padding-inline: var(--s3); font-size: var(--t-label); white-space: normal; text-align: center; }
@media (max-width: 760px) {
  .mhg-modal { padding: 0; align-items: end; }
  .mhg-modal-dialog { max-height: 100vh; max-height: 100dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .mhg-modal-body { padding: var(--s5); }
  .mhg-md { grid-template-columns: 1fr; }
  .mhg-md-gallery { position: static; }
  .mhg-md-specs { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 07 · Công cụ tìm hộp */
/* ---- Công cụ tìm hộp: phần HỎI (thiết kế lại 09/2026) ----
   Bản cũ trải hết bề ngang thẻ 1280px: 6 vạch tiến trình kéo dài một hàng, câu
   hỏi lọt thỏm bên trái, 8 lựa chọn thành một hàng dài 1230px cao 48px rồi bỏ
   trống nửa dưới thẻ. Bản này bó phần hỏi vào cột 720px canh giữa, lựa chọn
   xếp lưới đều nhau nên khối vuông vức và đọc theo trục dọc.
   Phần KẾT QUẢ giữ nguyên bề ngang thẻ (khai riêng bên dưới). */
.mhg-wz { padding: clamp(20px, 2.4vw, 32px); }
/* Cột hỏi: 720px là mốc quen của site (đoạn văn ~70 ký tự), canh giữa thẻ. */
.mhg-wz-form { max-width: 720px; margin-inline: auto; }

/* Đầu thẻ: "Bước 1/6" + thanh chạy liền, cùng một hàng. */
.mhg-wz-top {
  display: flex;
  align-items: center;
  gap: var(--s4);
  max-width: 720px;
  margin: 0 auto var(--s6);
}
.mhg-wz-buoc { flex: none; font-size: var(--t-label); font-weight: var(--w-bold); color: var(--g500); }
.mhg-wz-buoc b { color: var(--red); }
.mhg-wz-thanh { flex: 1; height: 4px; border-radius: 2px; background: var(--g200); overflow: hidden; }
.mhg-wz-thanh i { display: block; height: 100%; border-radius: 2px; background: var(--red); transition: width .3s var(--ease); }

.mhg-wz-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.mhg-wz-step[hidden] { display: none; }
/* Câu hỏi canh giữa: cả cụm hỏi–chọn–nút thành một trục dọc, mắt không phải
   nhảy từ mép trái sang giữa như bản cũ. */
.mhg-wz-step legend { display: grid; gap: var(--s2); padding: 0; margin-bottom: var(--s5); text-align: center; justify-items: center; }
.mhg-wz-q { font-size: var(--t-h3); font-weight: var(--w-black); letter-spacing: -.02em; color: var(--ink); line-height: 1.25; }
.mhg-wz-hint {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--paper-tint);
  font-size: var(--t-tag);
  font-weight: var(--w-medium);
  color: var(--g600);
}
.mhg-wz-err { margin-top: var(--s3); font-size: var(--t-sm); color: var(--red); text-align: center; }
.mhg-wz-err[hidden] { display: none; }
/* Nút: "Quay lại" mép trái, "Tiếp tục" mép phải; mũi tên nút lùi quay ngược. */
.mhg-wz-nav { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); }
.mhg-wz-nav [data-wz="next"] { margin-left: auto; }
.mhg-wz-nav [data-wz="prev"] .ico { transform: rotate(180deg); }
.mhg-wz-nav [hidden] { display: none; }
.mhg-wz-result { display: grid; gap: var(--s5); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.mhg-wz-result[hidden] { display: none; }
.mhg-wz-kq-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s3) var(--s4); }
.mhg-wz-kq-head h3 { font-size: var(--t-h3); }
.mhg-wz-kq-head p { font-size: var(--t-sm); color: var(--g600); }
.mhg-wz-kq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.mhg-wz-kq { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); background: var(--paper-tint); border: 1px solid var(--line); border-radius: var(--r-md); }
.mhg-wz-kq .mono { font-size: var(--t-tag); letter-spacing: .06em; color: var(--red); }
.mhg-wz-kq h4 { font-size: var(--t-body); }
.mhg-wz-kq p { font-size: var(--t-label); color: var(--g600); line-height: 1.5; }
.mhg-wz-kq .mhg-meters { padding: var(--s2) var(--s3); background: var(--paper); }
.mhg-wz-kq .link-arrow { min-height: 36px; }
.mhg-wz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.mhg-wz-cols h4 { margin-bottom: 6px; font-size: var(--t-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--g500); }
.mhg-wz-cols p { margin-top: var(--s2); font-size: var(--t-label); color: var(--g600); }
.mhg-wz-mau { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
/* button (trang cẩm nang, mở hộp chi tiết tại chỗ) VÀ a (trang khác, link
   sang trang cẩm nang theo neo #mau-HG-001) — cùng một dáng ô. */
.mhg-wz-mau button,
.mhg-wz-mau a {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s var(--ease);
}
.mhg-wz-mau button:hover,
.mhg-wz-mau a:hover { border-color: var(--ink); }
.mhg-wz-mau b { font-size: var(--t-label); color: var(--ink); }
.mhg-wz-mau span { font-size: var(--t-tag); color: var(--g500); }
.mhg-wz-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 860px) {
  .mhg-wz-kq-grid, .mhg-wz-mau { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .mhg-wz-kq-grid, .mhg-wz-cols { grid-template-columns: 1fr; }
  /* Điện thoại: 2 lựa chọn mỗi hàng (ô 150px không vừa cột 306px) */
  .mhg-chips--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mhg-wz-q { font-size: var(--t-h4); }
  .mhg-wz-nav .btn { flex: 1; }
}

/* ---------------------------------------------------------------- 08 · Hướng dẫn đo */
.mhg-do-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4) var(--s6);
  margin-top: var(--s6);
  padding: var(--s5) var(--s6);
  background: var(--red-subtle);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  color: var(--g700);
  line-height: 1.55;
}
.mhg-do-cta p { flex: 1 1 320px; max-width: 60ch; }
.mhg-do-cta .btn { flex: none; }

/* ---------------------------------------------------------------- 09 · Số lượng */
/* Mục "Số lượng" đã chuyển sang partial chung — CSS nay ở assets/css/sections.css
   mục "Số lượng" (lớp .sl-card / .sl-cols / .sl-tags). Đừng khai lại ở đây. */

/* ---------------------------------------------------------------- Dải về trang cha */
.mhg-cha .cta-strip-copy { max-width: 62ch; }
.mhg-cha q { quotes: "“" "”"; }

/* ---------------------------------------------------------------- 11 · Form tư vấn */
.mhg-form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); align-items: start; }
.mhg-form {
  display: grid;
  gap: var(--s6);
  padding: var(--s7);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.mhg-fs { display: grid; gap: var(--s4); min-width: 0; margin: 0; padding: 0; border: 0; }
.mhg-fs legend { padding: 0; margin-bottom: var(--s2); font-size: var(--t-body); font-weight: var(--w-bold); color: var(--ink); }
.mhg-fs legend .muted { font-weight: var(--w-regular); font-size: var(--t-sm); }
.mhg-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.mhg-fields .field { position: relative; min-width: 0; }
.mhg-fields .field--full { grid-column: 1 / -1; }
.mhg-field-label { font-size: var(--t-xs); font-weight: var(--w-semibold); color: var(--g600); }
.mhg-err { margin-top: 4px; font-size: var(--t-label); color: var(--red); }
.mhg-err[hidden] { display: none; }
.field.is-invalid .input, .field.is-invalid .select { border-color: var(--red); }
.mhg-chua-ro {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--paper-tint);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink);
  cursor: pointer;
}
.mhg-chua-ro input { width: 18px; height: 18px; accent-color: var(--red); }

/* Cụm quy cách gấp lại — mở khi khách muốn chọn, hoặc JS mở khi điền từ mẫu */
.mhg-qc { border: 1px solid var(--line); border-radius: var(--r-md); }
.mhg-qc summary {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--s4) 48px var(--s4) var(--s4);
  list-style: none;
  cursor: pointer;
  font-weight: var(--w-bold);
  color: var(--ink);
}
.mhg-qc summary::-webkit-details-marker { display: none; }
.mhg-qc summary small { font-size: var(--t-label); font-weight: var(--w-regular); color: var(--g500); }
.mhg-qc summary::after {
  content: "";
  position: absolute;
  right: var(--s4); top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--red), var(--red)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2.5px 100% no-repeat;
  transition: transform .25s var(--ease);
}
.mhg-qc[open] summary::after { transform: rotate(180deg); background-size: 100% 2.5px, 0 2.5px; }
.mhg-qc[open] summary { border-bottom: 1px solid var(--line); }
.mhg-qc-body { padding: var(--s4); }
#mhg-quycach-fields.is-thu { opacity: .5; }

.mhg-file {
  display: flex;
  gap: var(--s3);
  align-items: center;
  min-height: 72px;
  padding: var(--s3) var(--s4);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s var(--ease);
}
.mhg-file:hover { border-color: var(--red); }
.mhg-file:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mhg-file > .ico { flex: none; width: 26px; height: 26px; color: var(--red); }
.mhg-file span { display: grid; gap: 2px; }
.mhg-file b { font-size: var(--t-sm); color: var(--ink); }
.mhg-file small { font-size: var(--t-label); color: var(--g500); }
.mhg-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mhg-file-list { display: grid; gap: 4px; margin-top: var(--s2); font-size: var(--t-label); color: var(--g600); }
.mhg-file-list[hidden] { display: none; }
.mhg-file-list li.is-qua { color: var(--red); }
.mhg-file-note { display: block; }
.mhg-luu-goiy { margin-top: 6px; }
.mhg-luu-goiy[hidden] { display: none; }
.mhg-link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--w-semibold); color: var(--red); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mhg-form-note { display: flex; gap: var(--s2); align-items: center; }
.mhg-form-note .ico { flex: none; }
.mhg-form-aside { position: sticky; top: calc(var(--nav-h) + 72px); display: grid; gap: var(--s4); }
.mhg-form-tip { display: grid; gap: var(--s3); padding: var(--s5); }
.mhg-form-tip[hidden] { display: none; }
.mhg-form-tip h3 { font-size: var(--t-h4); }
.mhg-form-tip p { font-size: var(--t-sm); color: var(--g600); line-height: 1.55; }
/* flex 1 1 auto chứ không phải flex: 1 (= gốc 0): gốc 0 chia đôi cứng lòng thẻ
   291px ở màn 375 thành 2 × 139px, số điện thoại 13px + icon cần ~150px nên
   gãy dòng. Gốc auto thì mỗi nút giữ đúng bề ngang chữ rồi mới chia phần dư. */
.mhg-form-tip .btn { flex: 1 1 auto; min-height: 44px; padding-inline: var(--s3); font-size: var(--t-label); }
.mhg-form-luu-list { display: grid; gap: 6px; }
.mhg-form-luu-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: var(--t-label); }
.mhg-form-luu-list b { font-family: var(--mono); color: var(--ink); }
.mhg-prep { display: grid; gap: 8px; font-size: var(--t-sm); color: var(--g700); line-height: 1.5; }
.mhg-prep li { display: flex; gap: var(--s2); align-items: flex-start; }
.mhg-prep .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--red); }
@media (max-width: 1000px) {
  .mhg-form-wrap { grid-template-columns: 1fr; }
  .mhg-form-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mhg-form { padding: var(--s5); gap: var(--s5); }
  .mhg-fields { grid-template-columns: 1fr; }
  .mhg-form-aside { grid-template-columns: 1fr; }
}

/* Nút CTA nhãn dài ở khổ hẹp: cho xuống dòng, không đẩy lưới phình ra */
@media (max-width: 520px) {
  .page-mhg main .btn { white-space: normal; height: auto; padding-block: 12px; line-height: 1.3; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mhg-loc, .mhg-mau-img img, .mhg-the-go .ico { transition: none; }
}