/* ============================================================
   MAS Child — main.css  ·  Hệ thống component (dựng trên tokens.css)
   Ngôn ngữ: BẢN VẼ KỸ THUẬT — sống bằng đường kẻ & dấu dập cứng,
   KHÔNG bóng đổ mềm. Chú thích kiểu dimension/callout, motif mốc
   trắc địa, cam "field orange" như sơn đánh dấu hiện trường.
   Nạp SAU tokens.css. Mobile-first. Breakpoint Blocksy 690/1000px.

   MỤC LỤC
     1. Base & typography          8. Giá + khối CTA báo giá
     2. Layout & blueprint grid    9. Breadcrumb
     3. Section header            10. Form
     4. Nút (dập cứng)            11. Thanh CTA nổi mobile
     5. Badge / chip              12. Override Woo/Blocksy
     6. Card (nhấc lộ dấu dập)    13. In ấn
     7. Bảng thông số             14. NGÔN NGỮ BẢN VẼ (dimension,
                                      callout, mốc, scale bar, north,
                                      title block, tape, registration)
                                  15. Trang chi tiết sản phẩm
                                  16. Trang chủ (front-page.php)
                                  17. Header & Footer
                                  18. Trang danh mục
                                  19. Dịch vụ · Dự án · Liên hệ · 404
   ============================================================ */

/* ============================================================ 1. BASE */
body{
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--c-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{color:var(--c-heading);line-height:var(--lh-heading);
  letter-spacing:var(--ls-tight);font-weight:var(--fw-bold);text-wrap:balance;}
h1{font-size:var(--fs-h1);}h2{font-size:var(--fs-h2);}h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);font-weight:var(--fw-semibold);}
a{color:var(--c-primary);text-underline-offset:2px;}
a:hover{color:var(--c-primary-dark);}
strong,b{font-weight:var(--fw-semibold);}

/* Focus = đường dóng nét đứt (không ring mềm) — giữ nguyên box-shadow dấu dập */
:focus-visible{outline:var(--focus-dash);outline-offset:3px;}

/* Số liệu kỹ thuật (mã máy, toạ độ, độ chính xác) — mono, tabular */
.mas-mono,.mas-tech{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
/* Dung sai / tỉ lệ — brass, nhấn hiếm */
.mas-tol{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--c-brass);font-weight:var(--fw-semibold);}

/* ============================================================ 2. LAYOUT */
.mas-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.mas-container.is-narrow{max-width:var(--container-narrow);}
.mas-section{padding-block:var(--section-y);}
.mas-section.is-alt{background:var(--c-bg-alt);}
.mas-section.is-primary{background:var(--c-primary);color:var(--c-invert);}
.mas-section.is-primary :is(h1,h2,h3,h4){color:var(--c-invert);}

/* Nền lưới blueprint */
.mas-blueprint{background-color:var(--c-primary);color:var(--c-invert);
  background-image:linear-gradient(var(--c-grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--c-grid-line) 1px,transparent 1px);
  background-size:28px 28px;}

.mas-grid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.mas-grid.is-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}

/* Registration marks — 4 dấu chữ L ở góc, kiểu dóng in bản vẽ. Bọc khung ảnh, hero, title block. */
.mas-frame{position:relative;}
.mas-frame::after{content:"";position:absolute;inset:0;pointer-events:none;--t:11px;--rc:var(--c-primary);
  background:
    linear-gradient(var(--rc),var(--rc)) 0 0/var(--t) 1.5px no-repeat,
    linear-gradient(var(--rc),var(--rc)) 0 0/1.5px var(--t) no-repeat,
    linear-gradient(var(--rc),var(--rc)) 100% 0/var(--t) 1.5px no-repeat,
    linear-gradient(var(--rc),var(--rc)) 100% 0/1.5px var(--t) no-repeat,
    linear-gradient(var(--rc),var(--rc)) 0 100%/var(--t) 1.5px no-repeat,
    linear-gradient(var(--rc),var(--rc)) 0 100%/1.5px var(--t) no-repeat,
    linear-gradient(var(--rc),var(--rc)) 100% 100%/var(--t) 1.5px no-repeat,
    linear-gradient(var(--rc),var(--rc)) 100% 100%/1.5px var(--t) no-repeat;}

/* ============================================================ 3. SECTION HEADER
   Phá đối xứng: căn trái, có số hiệu section kiểu bản vẽ. */
.mas-section-head{max-width:var(--container-narrow);margin-bottom:var(--sp-8);}
.mas-overline{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--fs-overline);font-weight:var(--fw-bold);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--c-cta);margin-bottom:var(--sp-3);}
.mas-overline::before{content:"";width:22px;height:2px;background:var(--c-field);}
.mas-section-head p{color:var(--c-muted-strong);margin-top:var(--sp-3);font-size:var(--fs-lg);}
/* Số hiệu section (vd "01 / DANH MỤC") — mono, kiểu đánh số bản vẽ */
.mas-sheet-no{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-muted);letter-spacing:.1em;}

/* ============================================================ 4. NÚT — dập cứng, nhấn lún */
.mas-btn{
  --btn-bg:var(--c-primary);--btn-fg:var(--c-invert);--btn-bd:transparent;--btn-stamp:var(--navy-900);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.7rem 1.25rem;font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-semibold);
  line-height:1.2;color:var(--btn-fg);background:var(--btn-bg);
  border:1.5px solid var(--btn-bd);border-radius:var(--r-sm);cursor:pointer;text-decoration:none;
  box-shadow:3px 3px 0 0 var(--btn-stamp);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
             background var(--dur) var(--ease),color var(--dur) var(--ease);}
.mas-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--btn-stamp);color:var(--btn-fg);}
.mas-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--btn-stamp);}
.mas-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;}

/* CTA "Gọi báo giá": tấm cam field orange dập lên nền bằng dấu navy — plate kim loại */
.mas-btn.is-cta{--btn-bg:var(--c-cta);--btn-bd:var(--navy-900);--btn-stamp:var(--c-primary);}
.mas-btn.is-cta:hover{background:var(--c-cta-hover);color:var(--c-invert);}
.mas-btn.is-outline{--btn-bg:transparent;--btn-fg:var(--c-primary);--btn-bd:var(--c-primary);--btn-stamp:var(--c-border-strong);}
.mas-btn.is-outline:hover{background:var(--c-primary);color:var(--c-invert);}
.mas-btn.is-ghost{--btn-bg:transparent;--btn-fg:var(--c-primary);box-shadow:none;}
.mas-btn.is-ghost:hover{background:var(--c-primary-soft);box-shadow:none;transform:none;}
.mas-btn.is-sm{padding:.45rem .85rem;font-size:var(--fs-sm);box-shadow:2px 2px 0 0 var(--btn-stamp);}
.mas-btn.is-sm:hover{box-shadow:1px 1px 0 0 var(--btn-stamp);}
.mas-btn.is-lg{padding:.9rem 1.7rem;font-size:var(--fs-lg);}
.mas-btn.is-block{display:flex;width:100%;}
.mas-btn-group{display:flex;flex-wrap:wrap;gap:var(--sp-3);}

/* ============================================================ 5. BADGE */
.mas-badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:.2rem .6rem;
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:1.4;border-radius:var(--r-sm);
  background:var(--c-primary-soft);color:var(--c-primary);font-family:var(--font-mono);}
.mas-badge.is-brand{background:var(--c-primary);color:var(--c-invert);}
.mas-badge.is-new{background:var(--orange-50);color:var(--c-cta);}
.mas-badge.is-instock{background:#e8f5ee;color:var(--c-success);}
.mas-badge.is-outline{background:transparent;border:1px solid var(--c-border-strong);color:var(--c-muted-strong);}
/* Ngừng sản xuất (87 sản phẩm) — xám trầm, KHÔNG dùng cam như hàng mới */
.mas-badge.is-muted{background:var(--slate-100);color:var(--c-muted);}

/* ============================================================ 6. CARD — nhấc lên, lộ dấu dập navy */
.mas-card{display:flex;flex-direction:column;background:var(--c-surface);border:var(--bd-hair);
  border-radius:var(--r-md);transition:box-shadow var(--dur) var(--ease),
  border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
.mas-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 var(--c-primary);border-color:var(--c-primary);}
.mas-card__media{position:relative;aspect-ratio:1/1;background:var(--c-surface-2);
  border-bottom:var(--bd-hair);border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden;}
.mas-card__media img{width:100%;height:100%;object-fit:contain;}
.mas-card__badges{position:absolute;top:var(--sp-3);left:var(--sp-3);display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.mas-card__body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);flex:1;}
.mas-card__eyebrow{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-muted);
  font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.06em;}
.mas-card__title{font-size:var(--fs-h4);font-weight:var(--fw-semibold);line-height:var(--lh-snug);margin:0;}
.mas-card__title a{color:var(--c-heading);text-decoration:none;}
.mas-card__title a:hover{color:var(--c-primary);}
.mas-card__foot{margin-top:auto;padding-top:var(--sp-3);display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-3);border-top:var(--bd-hair);}

.mas-service{padding:var(--sp-6);gap:var(--sp-3);}
.mas-service__icon{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--c-primary-soft);color:var(--c-primary);}
.mas-service__icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.6;}
.mas-service h3,.mas-service h4{font-size:var(--fs-h4);margin:0;}
.mas-service p{color:var(--c-muted-strong);font-size:var(--fs-sm);margin:0;}
/* Affordance "Xem dịch vụ →" ở thẻ liên kết chéo — đẩy xuống đáy, hiện rõ khi hover */
.mas-service__more{margin-top:auto;padding-top:var(--sp-2);font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);color:var(--c-primary);letter-spacing:.02em;}
a.mas-service:hover .mas-service__more{color:var(--c-cta);}

.mas-usp{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-5);}
.mas-usp__icon{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--orange-50);color:var(--c-cta);}
.mas-usp__icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;}
.mas-usp h4{margin:0 0 var(--sp-1);}
.mas-usp p{margin:0;color:var(--c-muted-strong);font-size:var(--fs-sm);}

/* ============================================================ 7. BẢNG THÔNG SỐ & BÀN GIAO */
.mas-specs-table,.mas-bangiao-table{width:100%;border-collapse:collapse;margin:var(--sp-3) 0 var(--sp-5);
  font-size:var(--fs-sm);border:var(--bd-hair);border-radius:var(--r-md);overflow:hidden;}
.mas-specs-table th,.mas-specs-table td,.mas-bangiao-table th,.mas-bangiao-table td{
  border-bottom:var(--bd-hair);padding:.62rem .85rem;text-align:left;vertical-align:top;word-break:break-word;}
.mas-specs-table tr:last-child td,.mas-specs-table tr:last-child th,
.mas-bangiao-table tr:last-child td{border-bottom:0;}
.mas-specs-table>tbody>tr>th,.mas-specs-table>tr>th{width:42%;background:var(--c-surface-2);
  color:var(--c-muted-strong);font-weight:var(--fw-semibold);}
.mas-specs-table td{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--c-text);}
.mas-specs-table .mas-spec-group th{width:auto;background:var(--c-primary);color:var(--c-invert);
  font-weight:var(--fw-bold);font-family:var(--font-sans);font-size:var(--fs-caption);
  text-transform:uppercase;letter-spacing:.06em;}
/* Dòng datasheet không có nhãn — chiếm trọn hàng, lùi vào cho khỏi lẫn với dòng có nhãn */
.mas-specs-table .mas-spec-note td{font-family:var(--font-sans);color:var(--c-muted-strong);
  background:var(--c-surface-2);border-left:2px solid var(--c-field);}
.mas-bangiao-table tr:first-child th{background:var(--c-primary);color:var(--c-invert);font-weight:var(--fw-bold);}
.mas-bangiao-table td:last-child{font-family:var(--font-mono);text-align:center;white-space:nowrap;}

/* ============================================================ 8. GIÁ + KHỐI CTA BÁO GIÁ */
.price-contact{color:var(--c-cta);font-weight:var(--fw-bold);font-size:1.2em;font-family:var(--font-mono);}

.mas-quote-box{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-5) 0;padding:var(--sp-5);
  background:var(--c-bg-alt);border:var(--bd-hair);border-left:4px solid var(--c-field);border-radius:var(--r-md);}
.mas-quote-box .button{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.8rem 1.25rem;border-radius:var(--r-sm);font-weight:var(--fw-bold);line-height:1.25;
  text-align:center;text-decoration:none;border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur) var(--ease);}
.mas-quote-box .button.primary{background:var(--c-cta);color:var(--c-invert);border-color:var(--navy-900);
  box-shadow:3px 3px 0 0 var(--c-primary);}
.mas-quote-box .button.primary:hover{background:var(--c-cta-hover);transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--c-primary);}
.mas-quote-box .button.primary:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--c-primary);}
.mas-quote-box .button.secondary{background:var(--c-primary);color:var(--c-invert);box-shadow:3px 3px 0 0 var(--navy-900);}
.mas-quote-box .button.secondary:hover{background:var(--c-primary-dark);transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--navy-900);}
.mas-quote-box .button.is-outline{background:transparent;color:var(--c-primary);border:1.5px solid var(--c-primary);}
.mas-quote-box .button.is-outline:hover{background:var(--c-primary);color:var(--c-invert);}
@media (min-width:690px){.mas-quote-box{flex-direction:row;}.mas-quote-box .button{flex:1;}}

/* ============================================================ 9. BREADCRUMB */
.mas-breadcrumb{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--fs-caption);color:var(--c-muted);padding:var(--sp-3) 0;list-style:none;margin:0;}
.mas-breadcrumb a{color:var(--c-muted);text-decoration:none;}
.mas-breadcrumb a:hover{color:var(--c-primary);}
.mas-breadcrumb li{display:flex;gap:var(--sp-2);align-items:center;}
.mas-breadcrumb li+li::before{content:"→";color:var(--c-border-strong);}

/* ============================================================ 10. FORM */
.mas-field{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4);}
.mas-field label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-heading);}
.mas-field label .req{color:var(--c-danger);}
.mas-input,.mas-field input[type=text],.mas-field input[type=tel],
.mas-field input[type=email],.mas-field textarea,.mas-field select{
  width:100%;padding:.7rem .85rem;font-family:inherit;font-size:var(--fs-body);color:var(--c-text);
  background:var(--c-surface);border:1.5px solid var(--c-border-strong);border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease);}
.mas-input:focus,.mas-field input:focus,.mas-field textarea:focus,.mas-field select:focus{
  outline:var(--focus-dash);outline-offset:2px;border-color:var(--c-primary);}
.mas-input::placeholder{color:var(--c-muted);}

/* ============================================================ 11. THANH CTA NỔI MOBILE */
.mas-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky-cta);display:none;
  grid-auto-flow:column;grid-auto-columns:1fr;background:var(--c-primary);border-top:2px solid var(--c-field);
  padding-bottom:env(safe-area-inset-bottom,0);}
.mas-cta-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:.55rem 0;color:var(--c-invert);text-decoration:none;font-family:var(--font-mono);
  font-size:var(--fs-overline);font-weight:var(--fw-semibold);}
.mas-cta-bar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;}
.mas-cta-bar a.is-call{background:var(--c-cta);}
.mas-cta-bar a+a{border-left:1px solid rgba(255,255,255,.12);}
/* Chỉ chừa chỗ ở trang có thanh nổi (hiện là trang chi tiết sản phẩm) */
/* Chừa chỗ cho thanh CTA ở MỌI trang có nó (sản phẩm, danh mục, shop) — trước
   chỉ chừa cho body.single-product nên ở trang danh mục thanh này che mất
   phân trang. */
@media (max-width:689px){
  .mas-cta-bar{display:grid;}
  body:is(.single-product,.tax-product_cat,.post-type-archive-product){padding-bottom:66px;}
}

/* ============================================================ 12. OVERRIDE WOO/BLOCKSY */
.woocommerce div.product .mas-quote-box{margin-top:var(--sp-6);}
.woocommerce-tabs .mas-specs-table{margin-top:var(--sp-4);}

/* ============================================================ 13. IN ẤN */
@media print{
  .mas-cta-bar,.mas-quote-box{display:none !important;}
  .mas-card{box-shadow:none !important;transform:none !important;}
  .mas-specs-table,.mas-bangiao-table{border:1px solid #000;}
}

/* ============================================================ 14. NGÔN NGỮ BẢN VẼ
   Chi tiết mà AI gần như không nghĩ tới: đường ghi kích thước, leader,
   mốc trắc địa, scale bar, north arrow, title block, flagging tape. */

/* 14.1 Dimension line — |<——  24 mm  ——>| */
.mas-dim{position:relative;display:flex;align-items:center;height:16px;width:100%;
  font-family:var(--font-mono);font-size:var(--fs-overline);color:var(--c-primary);}
.mas-dim__end{width:1px;height:12px;background:currentColor;flex:none;}
.mas-dim__bar{position:relative;flex:1;height:1px;background:currentColor;margin:0 1px;}
.mas-dim__bar::before,.mas-dim__bar::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;}
.mas-dim__bar::before{left:0;border-right:8px solid currentColor;}
.mas-dim__bar::after{right:0;border-left:8px solid currentColor;}
.mas-dim__val{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--c-bg);padding:0 .45rem;white-space:nowrap;}
.mas-dim.on-alt .mas-dim__val{background:var(--c-bg-alt);}

/* 14.2 Leader / callout — ● —— NHÃN */
.mas-callout{display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-size:var(--fs-overline);color:var(--c-primary);letter-spacing:.04em;text-transform:uppercase;}
.mas-callout__dot{width:6px;height:6px;border-radius:50%;background:var(--c-cta);flex:none;}
.mas-callout__line{width:30px;height:1px;background:var(--c-primary);flex:none;}
.mas-callout__label{padding-left:.45rem;white-space:nowrap;}

/* 14.3 Mốc trắc địa (survey monument) — đĩa đồng thau + chữ thập */
.mas-marker{width:20px;height:20px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 35% 30%,var(--brass-300),var(--brass-500) 58%,var(--brass-600));
  border:1px solid var(--brass-700);}
.mas-marker::before,.mas-marker::after{content:"";position:absolute;background:rgba(0,0,0,.42);}
.mas-marker::before{left:50%;top:3px;bottom:3px;width:1px;transform:translateX(-50%);}
.mas-marker::after{top:50%;left:3px;right:3px;height:1px;transform:translateY(-50%);}
/* Danh sách dùng mốc làm bullet */
.mas-marker-list{list-style:none;padding:0;margin:0;}
.mas-marker-list li{position:relative;padding-left:1.85rem;margin-bottom:var(--sp-3);line-height:var(--lh-snug);}
.mas-marker-list li::before{content:"";position:absolute;left:0;top:.1em;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23B0894F' stroke='%236E5326'/%3E%3Cpath d='M9 2v14M2 9h14' stroke='%23000' stroke-opacity='.42'/%3E%3C/svg%3E") no-repeat center/contain;}

/* 14.4 Scale bar — thanh tỉ lệ bản đồ, dùng làm divider */
.mas-scalebar{display:inline-flex;flex-direction:column;gap:3px;font-family:var(--font-mono);
  font-size:var(--fs-overline);color:var(--c-muted);}
.mas-scalebar__bar{display:flex;width:160px;height:8px;border:1px solid var(--c-primary);}
.mas-scalebar__bar span{flex:1;}
.mas-scalebar__bar span:nth-child(odd){background:var(--c-primary);}
.mas-scalebar__ticks{display:flex;justify-content:space-between;width:168px;margin-left:-4px;}

/* 14.5 North arrow */
.mas-north{width:34px;height:44px;color:var(--c-primary);flex:none;}
.mas-north svg{width:100%;height:100%;}

/* 14.6 Title block — khung tên bản vẽ (góc dưới phải theo chuẩn) */
.mas-titleblock{display:grid;grid-template-columns:1fr 1fr;max-width:360px;
  border:1.5px solid var(--c-primary);background:var(--c-surface);font-family:var(--font-mono);}
.mas-tb__full{grid-column:1/-1;background:var(--c-primary);color:var(--c-invert);
  padding:.5rem .65rem;font-weight:var(--fw-bold);font-size:var(--fs-caption);letter-spacing:.04em;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.mas-tb__cell{padding:.4rem .65rem;border-top:1px solid var(--c-border);}
.mas-tb__cell:nth-child(even){border-left:1px solid var(--c-border);}
.mas-tb__k{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);}
.mas-tb__v{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-heading);}

/* 14.7 Flagging tape — vạch hazard cam–navy, dùng làm divider/nhấn */
.mas-tape{height:14px;background:var(--c-tape);border-block:1px solid var(--navy-900);border-radius:2px;}

/* 14.8 Crosshair marker inline (điểm dóng nhỏ) */
.mas-cross{display:inline-block;width:14px;height:14px;position:relative;flex:none;color:var(--c-field);vertical-align:middle;}
.mas-cross::before,.mas-cross::after{content:"";position:absolute;background:currentColor;}
.mas-cross::before{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%);}
.mas-cross::after{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%);}

/* ============================================================ 15. TRANG CHI TIẾT SẢN PHẨM
   Khớp mockup "Product Detail": badge → tên → SKU/bảo hành → mô tả ngắn →
   giá + ghi chú → khối báo giá → cam kết; tab bar gạch cam; dải tư vấn KT. */

/* 15.1 Cột thông tin */
.mas-product-badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3);}
.mas-product-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  margin-bottom:var(--sp-4);font-size:var(--fs-sm);color:var(--c-muted);}
.mas-product-meta > span + span{position:relative;padding-left:var(--sp-4);}
.mas-product-meta > span + span::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:14px;background:var(--c-border);}
.mas-product-meta .mas-mono{color:var(--c-muted-strong);font-weight:var(--fw-semibold);}

.woocommerce div.product .price-contact{font-size:1.5rem;}
.mas-price-note{display:inline-block;margin-left:var(--sp-3);font-size:var(--fs-sm);color:var(--c-muted);}

.mas-commitments{margin-top:var(--sp-4);}
.mas-commitments li{font-size:var(--fs-sm);color:var(--c-muted-strong);margin-bottom:var(--sp-2);}

/* Nút trong khối báo giá có icon */
.mas-quote-box .button svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;}
.mas-quote-box .button .mas-mono{font-weight:var(--fw-bold);}

/* 15.1b Bảng "Thông số nổi bật" — khung tên 6 ô, số liệu mono. Đưa các dòng
   quyết định mua lên ngay dưới mô tả ngắn (render bởi mas_product_keyspecs). */
.mas-keyspecs{margin:var(--sp-4) 0 var(--sp-5);border:var(--bd-strong);border-radius:var(--r-md);overflow:hidden;}
.mas-keyspecs__head{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;
  background:var(--c-primary);color:var(--c-invert);padding:var(--sp-2) var(--sp-4);
  font-family:var(--font-mono);font-size:var(--fs-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;}
.mas-keyspecs__head .mas-mono{color:var(--navy-100);}
.mas-keyspecs dl{margin:0;display:grid;grid-template-columns:1fr 1fr;}
.mas-keyspecs__kv{padding:var(--sp-3) var(--sp-4);border-top:var(--bd-hair);min-width:0;}
.mas-keyspecs__kv:nth-child(odd){border-right:var(--bd-hair);}
.mas-keyspecs dt{font-size:var(--fs-caption);color:var(--c-muted);margin-bottom:2px;line-height:var(--lh-snug);}
.mas-keyspecs dd{margin:0;font-weight:var(--fw-semibold);color:var(--c-heading);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;word-break:break-word;}
@media (max-width:480px){
  .mas-keyspecs dl{grid-template-columns:1fr;}
  .mas-keyspecs__kv:nth-child(odd){border-right:0;}
}

/* 15.1c Lưới 3 thẻ tin cậy dưới CTA (render bởi mas_product_commitments).
   Thay danh sách bullet cũ — nổi bật hơn, củng cố pattern Trust & Authority. */
.mas-trust{margin-top:var(--sp-5);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
.mas-trust__item{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3);
  border:var(--bd-hair);border-radius:var(--r-md);background:var(--c-bg-alt);}
.mas-trust__ic{width:24px;height:24px;flex:none;color:var(--c-primary);margin-top:1px;}
.mas-trust__ic svg{width:100%;height:100%;}
.mas-trust b{display:block;font-size:var(--fs-sm);color:var(--c-heading);line-height:var(--lh-snug);}
.mas-trust small{color:var(--c-muted);font-size:var(--fs-caption);line-height:var(--lh-snug);}
@media (max-width:520px){.mas-trust{grid-template-columns:1fr;}}

/* 15.2 Gallery — khung bản vẽ có dấu dóng 4 góc */
.woocommerce div.product .woocommerce-product-gallery{position:relative;padding:10px;}
.woocommerce div.product .woocommerce-product-gallery::after{
  content:"";position:absolute;inset:0;pointer-events:none;--t:11px;--rc:var(--c-primary);
  background:
    linear-gradient(var(--rc),var(--rc)) 0 0/var(--t) 1.5px no-repeat,
    linear-gradient(var(--rc),var(--rc)) 0 0/1.5px var(--t) no-repeat,
    linear-gradient(var(--rc),var(--rc)) 100% 0/var(--t) 1.5px no-repeat,
    linear-gradient(var(--rc),var(--rc)) 100% 0/1.5px var(--t) no-repeat,
    linear-gradient(var(--rc),var(--rc)) 0 100%/var(--t) 1.5px no-repeat,
    linear-gradient(var(--rc),var(--rc)) 0 100%/1.5px var(--t) no-repeat,
    linear-gradient(var(--rc),var(--rc)) 100% 100%/var(--t) 1.5px no-repeat,
    linear-gradient(var(--rc),var(--rc)) 100% 100%/1.5px var(--t) no-repeat;}
.woocommerce div.product .woocommerce-product-gallery__image{background:var(--c-surface-2);}

/* 15.3 Tab bar — gạch chân cam cho tab đang mở.
   Blocksy dựng markup riêng (.wc-tabs-wrapper[data-type="type-1:center"]) và
   CĂN GIỮA tab; mockup căn TRÁI nên phải override kèm đủ specificity.
   Trạng thái active do JS của Woo gắn class .active. */
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs{
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0;
  margin:0 0 var(--sp-5);padding:0;list-style:none;
  border-bottom:1.5px solid var(--c-primary);}
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs::before,
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs::after{content:none;display:none;}
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs li{
  margin:0;padding:0;background:transparent;border:0;border-radius:0;}
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs li::after{content:none;display:none;}
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs li a{
  display:block;padding:.8rem 1.15rem;font-size:var(--fs-body);font-weight:var(--fw-semibold);
  color:var(--c-muted-strong);text-decoration:none;border-bottom:3px solid transparent;}
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs li a:hover{color:var(--c-primary);}
.woocommerce div.product .woocommerce-tabs[data-type] ul.tabs li.active a{
  color:var(--c-primary);font-weight:var(--fw-bold);
  background:var(--c-primary-soft);border-bottom-color:var(--c-field);}
.woocommerce div.product .woocommerce-tabs .panel{max-width:880px;margin:0;padding:0;}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child{display:none;}
@media (max-width:689px){
  .woocommerce div.product .woocommerce-tabs[data-type] ul.tabs{flex-wrap:nowrap;overflow-x:auto;}
  .woocommerce div.product .woocommerce-tabs[data-type] ul.tabs li a{
    white-space:nowrap;padding:.7rem .8rem;font-size:var(--fs-sm);}
}

/* 15.4 Danh sách tài liệu */
.mas-doclist{display:flex;flex-direction:column;border:var(--bd-hair);border-radius:var(--r-md);overflow:hidden;}
.mas-doclist__item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-bottom:var(--bd-hair);text-decoration:none;transition:background var(--dur) var(--ease);}
.mas-doclist__item:last-child{border-bottom:0;}
.mas-doclist__item:hover{background:var(--c-bg-alt);}
.mas-doclist__item svg{width:20px;height:20px;flex:none;stroke:var(--c-primary);fill:none;stroke-width:1.7;}
.mas-doclist__name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-heading);min-width:0;}
.mas-doclist__meta{margin-left:auto;font-size:var(--fs-caption);color:var(--c-muted);flex:none;}
.mas-doclist__dl{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-primary);flex:none;}
@media (max-width:689px){.mas-doclist__dl{display:none;}}

/* 15.5 Dải tư vấn kỹ thuật */
.mas-techband{padding-block:var(--sp-10);}
.mas-techband__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap;}
.mas-techband h2{font-size:var(--fs-h3);margin:0 0 var(--sp-2);color:var(--c-invert);}
.mas-techband p{margin:0;font-size:var(--fs-sm);color:var(--navy-100);max-width:62ch;}
.mas-techband__phone{display:flex;flex-direction:column;gap:2px;text-align:right;flex:none;}
.mas-techband__phone span{font-size:var(--fs-caption);color:var(--navy-200);}
.mas-techband__phone a{font-size:2rem;font-weight:var(--fw-bold);color:var(--c-invert);
  text-decoration:none;line-height:1.1;}
@media (max-width:689px){
  .mas-techband{padding-block:var(--sp-6);}
  .mas-techband__inner{flex-direction:column;align-items:flex-start;gap:var(--sp-4);}
  .mas-techband__phone{text-align:left;}
  .mas-techband__phone a{font-size:1.6rem;}
}

/* ============================================================ 16. TRANG CHỦ
   Chỉ các khối riêng của front-page.php. Card/USP/service/frame/titleblock
   dùng lại component có sẵn ở trên — đừng khai lại ở đây. */

.mas-home-sec{padding-block:var(--sp-12);}
.mas-band{background:var(--c-bg-alt);border-block:var(--bd-hair);}
.mas-section-head.is-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-6);margin-bottom:var(--sp-6);}
.mas-seeall{flex:none;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-primary);}

/* --- 1. Hero --- */
.mas-home-hero{padding-block:var(--sp-10);}
.mas-hero__grid{display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  gap:var(--sp-12);align-items:center;}
.mas-hero__title{font-size:var(--fs-h1);margin:0 0 var(--sp-4);max-width:14em;}
.mas-hero__lead{margin:0 0 var(--sp-6);font-size:var(--fs-lg);color:var(--c-muted-strong);
  max-width:30em;line-height:var(--lh-body);}
.mas-hero__media{position:relative;min-width:0;}
.mas-hero__media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:var(--bd-hair);border-radius:var(--r-sm);}
/* Chưa có ảnh thực địa: nền bản vẽ có lưới, trông như chủ đích chứ không như ảnh vỡ */
.mas-hero__placeholder{height:430px;border-radius:var(--r-sm);}
.mas-hero__tb{position:absolute;right:-14px;bottom:-14px;width:280px;}

/* --- 2. Dải số liệu --- */
.mas-statband{background:var(--c-bg-alt);border-bottom:var(--bd-hair);}
.mas-statband__grid{display:grid;grid-template-columns:repeat(4,1fr);padding-block:var(--sp-6);}
.mas-stat{display:flex;flex-direction:column;gap:2px;padding-inline:var(--sp-6);
  border-left:2px solid var(--c-field);}
.mas-stat__n{font-size:2rem;font-weight:var(--fw-bold);color:var(--c-primary);line-height:1.1;}
.mas-stat__k{font-size:var(--fs-sm);color:var(--c-muted-strong);}

/* --- 3. Lưới danh mục --- */
/* gap:1px + nền viền = đường kẻ chia ô mảnh, không cần border từng ô */
.mas-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--c-border);border:var(--bd-hair);}
.mas-cat{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);
  background:var(--c-surface);text-decoration:none;color:var(--c-primary);
  transition:background .12s linear;}
.mas-cat:hover,.mas-cat:focus-visible{background:var(--c-primary-soft);}
.mas-cat__body{display:flex;flex-direction:column;gap:2px;}
.mas-cat__name{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--c-heading);}
.mas-cat__meta{font-size:var(--fs-caption);color:var(--c-muted);}

/* --- 4/5/6/7. Các lưới --- */
.mas-prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
.mas-uspgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
.mas-uspgrid .mas-usp{border:var(--bd-hair);border-radius:var(--r-md);}
.mas-svgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}
.mas-svgrid .mas-service{display:flex;flex-direction:column;text-decoration:none;}
.mas-prjgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);}
.mas-prj{display:flex;flex-direction:column;gap:var(--sp-3);}
.mas-prj h3{font-size:var(--fs-h4);margin:0;}
.mas-prj p{margin:0;font-size:var(--fs-sm);color:var(--c-muted-strong);}
.mas-frame.is-tight{padding:8px;}
.mas-frame.is-tight img{display:block;width:100%;height:230px;object-fit:cover;border:var(--bd-hair);}

/* --- 8. Form báo giá --- */
.mas-quote__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-12);align-items:center;padding-block:var(--sp-12);}
.mas-quote h2{font-size:var(--fs-h2);margin:0 0 var(--sp-3);}
.mas-quote p{margin:0 0 var(--sp-5);color:var(--navy-100);line-height:var(--lh-body);}
.mas-quote__or{display:block;font-size:var(--fs-caption);color:var(--navy-200);margin-bottom:2px;}
.mas-quote__tel{font-size:2rem;font-weight:var(--fw-bold);color:var(--c-invert);
  text-decoration:none;line-height:1.1;}
.mas-quote__form{background:var(--c-surface);border:1.5px solid var(--navy-900);
  border-radius:var(--r-md);padding:var(--sp-6);color:var(--c-text);}
.mas-note{margin:0 0 var(--sp-4);padding:.7rem .9rem;font-size:var(--fs-sm);
  border-left:3px solid var(--c-field);background:var(--c-surface-2);}
.mas-note.is-ok{border-left-color:var(--c-primary);}
.mas-note.is-err{border-left-color:var(--c-cta);}
/* Honeypot: giấu khỏi mắt người NHƯNG không dùng display:none — vài bot bỏ qua
   trường ẩn kiểu đó, để ngoài khung nhìn thì chúng vẫn điền. */
.mas-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* --- 9. Dải hãng --- */
.mas-brandrow{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);flex-wrap:wrap;padding-block:var(--sp-8);}
.mas-brandrow__k{font-size:var(--fs-caption);color:var(--c-muted);flex:none;}
.mas-brandrow__b{font-size:1.25rem;font-weight:var(--fw-bold);letter-spacing:.06em;
  color:var(--slate-400);text-decoration:none;transition:color .12s linear;}
.mas-brandrow__b:hover,.mas-brandrow__b:focus-visible{color:var(--c-primary);}

/* --- Thu gọn theo bề ngang --- */
@media (max-width:1100px){
  .mas-catgrid,.mas-prodgrid{grid-template-columns:repeat(3,1fr);}
  .mas-svgrid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .mas-hero__grid,.mas-quote__grid{grid-template-columns:1fr;gap:var(--sp-8);}
  .mas-hero__tb{position:static;width:auto;margin-top:var(--sp-4);}
  .mas-statband__grid,.mas-uspgrid,.mas-prjgrid{grid-template-columns:repeat(2,1fr);
    gap:var(--sp-5) 0;}
  .mas-section-head.is-row{flex-direction:column;align-items:flex-start;gap:var(--sp-3);}
}
@media (max-width:640px){
  .mas-catgrid,.mas-prodgrid,.mas-svgrid{grid-template-columns:repeat(2,1fr);}
  .mas-statband__grid,.mas-uspgrid,.mas-prjgrid{grid-template-columns:1fr;}
  .mas-hero__placeholder{height:260px;}
  .mas-brandrow{justify-content:flex-start;gap:var(--sp-4);}
}

/* ============================================================ 17. HEADER & FOOTER
   Thay hoàn toàn header/footer của Blocksy (xem header.php trong child theme).
   Desktop: mega menu mở bằng :hover/:focus-within — không JS.
   Mobile:  panel trượt, bật bằng .mas-nav-open trên <body> (nav.js). */

/* --- Thương hiệu --- */
.mas-brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;min-width:0;}
.mas-brand__mark{flex:none;}
.mas-brand__txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mas-brand__name{font-size:1.3rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);
  color:var(--c-heading);line-height:1;white-space:nowrap;}
.mas-brand__sub{font-size:var(--fs-caption);color:var(--c-muted);white-space:nowrap;}
.mas-brand.is-dark .mas-brand__name{color:var(--c-invert);font-size:1.15rem;}
.mas-brand.is-dark .mas-brand__sub{color:var(--navy-200);font-size:var(--fs-overline);letter-spacing:.08em;}

/* --- Header --- */
.mas-header{position:sticky;top:0;z-index:100;background:var(--c-bg);
  border-bottom:1.5px solid var(--c-primary);}
.mas-header__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-8);padding-block:var(--sp-4);}
.mas-header__right{display:flex;align-items:center;gap:var(--sp-6);}
.mas-header__sep{width:1px;height:40px;background:var(--c-border);}

.mas-hotline{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;}
.mas-hotline__ico{width:42px;height:42px;flex:none;display:grid;place-items:center;
  background:var(--orange-50);color:var(--c-cta);border-radius:var(--r-sm);}
.mas-hotline__ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;}
.mas-hotline__txt{display:flex;flex-direction:column;gap:1px;}
.mas-hotline__k{font-size:var(--fs-caption);color:var(--c-muted);}
.mas-hotline__v{font-size:1.45rem;font-weight:var(--fw-bold);color:var(--c-primary);line-height:1.1;}

/* Nút gọi tròn + hamburger: chỉ dùng ở mobile */
.mas-header__call,.mas-burger{display:none;}
.mas-burger{width:44px;height:44px;flex:none;place-items:center;background:var(--c-surface);
  color:var(--c-primary);border:1.5px solid var(--c-primary);border-radius:var(--r-sm);cursor:pointer;}

/* --- Thanh nav navy --- */
/* position:relative ⇒ làm mốc định vị cho mega panel (absolute) thả xuống ĐÚNG
   dưới thanh nav. Thiếu nó, mega bám vào .mas-header (sticky) và rơi ngay hàng
   nav, đè lên các mục Dịch vụ / Dự án... */
.mas-nav{background:var(--c-primary);position:relative;}
.mas-nav__row{display:flex;align-items:stretch;gap:var(--sp-8);}
.mas-nav__item{display:flex;align-items:stretch;}
.mas-nav__item>a{display:inline-flex;align-items:center;gap:6px;padding:.85rem 0;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--navy-100);
  text-decoration:none;border-bottom:3px solid transparent;}
.mas-nav__item>a:hover,.mas-nav__item:focus-within>a{color:#fff;border-bottom-color:var(--c-field);}
/* Trang đang xem — Blocksy/WP gắn class current-menu-item lên <a> qua walker mặc định */
.mas-nav__item.is-current>a{color:#fff;border-bottom-color:var(--c-field);}

/* --- Mega menu --- */
.mas-nav__item.has-mega{position:static;}
.mas-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:min(1200px,calc(100% - 2*var(--gutter)));background:var(--c-surface);
  border:1.5px solid var(--c-primary);border-top:0;box-shadow:var(--stamp);z-index:50;
  /* Ẩn bằng visibility chứ không display:none — giữ được transition và vẫn
     loại khỏi thứ tự tab khi đóng. */
  visibility:hidden;opacity:0;transition:opacity var(--dur-fast) var(--ease);}
.mas-nav__item.has-mega:hover .mas-mega,
.mas-nav__item.has-mega:focus-within .mas-mega{visibility:visible;opacity:1;}

.mas-mega__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5);border-bottom:var(--bd-hair);}
.mas-mega__title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-heading);}
.mas-mega__note{font-size:var(--fs-caption);color:var(--c-muted);}
.mas-mega__body{display:grid;grid-template-columns:1fr 1fr 320px;}
.mas-mega__feat{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-5);
  border-right:var(--bd-hair);text-decoration:none;}
.mas-mega__feat:hover{background:var(--c-primary-soft);}
.mas-mega__img{flex:none;width:150px;}
.mas-mega__img img{display:block;width:100%;height:auto;border:var(--bd-hair);}
.mas-mega__txt{display:flex;flex-direction:column;gap:4px;min-width:0;}
.mas-mega__name{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--c-heading);
  line-height:var(--lh-snug);}
.mas-mega__desc{font-size:var(--fs-caption);color:var(--c-muted-strong);line-height:var(--lh-snug);}
.mas-mega__count{font-size:var(--fs-caption);color:var(--c-muted);}
.mas-mega__list{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-3) var(--sp-5);}
.mas-mega__list a{display:flex;flex-direction:column;gap:1px;padding:.3rem 0;text-decoration:none;}
.mas-mega__list a:hover .mas-mega__name{color:var(--c-primary);}
.mas-mega__list .mas-mega__name{font-size:var(--fs-sm);}
.mas-mega__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5);background:var(--c-bg-alt);border-top:var(--bd-hair);
  font-size:var(--fs-caption);color:var(--c-muted-strong);}
.mas-mega__foot .mas-mono{color:var(--c-cta);font-weight:var(--fw-bold);text-decoration:none;}
.mas-mega__all{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-primary);
  text-decoration:none;white-space:nowrap;}

/* Khối liên hệ cuối menu — chỉ dùng ở mobile */
.mas-nav__contact{display:none;}

/* --- Footer --- */
.mas-footer{padding-top:var(--sp-16);}
.mas-footer__grid{display:grid;grid-template-columns:400px repeat(4,1fr);
  gap:var(--sp-10);padding-bottom:var(--sp-12);}
.mas-footer__brand{display:flex;flex-direction:column;gap:var(--sp-5);}
.mas-footer__desc{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--navy-100);}
.mas-footer .mas-overline{color:var(--c-invert);}
.mas-fcol__links{display:flex;flex-direction:column;}
.mas-fcol__links a{padding:.32rem 0;font-size:var(--fs-sm);color:var(--navy-100);text-decoration:none;}
.mas-fcol__links a:hover{color:#fff;}
.mas-footer__tech{margin-top:var(--sp-6);padding:var(--sp-4);
  border:1px dashed rgba(255,255,255,.35);border-radius:var(--r-sm);}
.mas-footer__tech a{font-size:1.15rem;font-weight:var(--fw-bold);color:var(--c-invert);text-decoration:none;}
.mas-footer__bar{border-top:1px solid rgba(255,255,255,.15);}
.mas-footer__bar-row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);padding-block:var(--sp-4);font-size:var(--fs-caption);color:var(--navy-200);}
.mas-footer__geo{display:flex;align-items:center;gap:var(--sp-5);}
.mas-footer__geo .mas-north{color:var(--c-invert);width:22px;height:30px;}
.mas-titleblock .mas-tb__cell.is-wide{grid-column:1/-1;}
.mas-titleblock .mas-tb__v.is-normal{font-weight:var(--fw-regular);}

/* ============ MOBILE ============ */
@media (max-width:1000px){
  .mas-header__top{gap:var(--sp-3);padding-block:var(--sp-3);}
  .mas-brand__name{font-size:1.02rem;}
  .mas-brand__sub{font-size:.72rem;}
  .mas-header__right{gap:var(--sp-2);}
  /* Hotline chữ to và nút báo giá nhường chỗ cho 2 nút chạm 44px */
  .mas-hotline,.mas-header__sep,.mas-header__cta{display:none;}
  .mas-header__call{display:inline-flex;width:44px;height:44px;padding:0;flex:none;}
  .mas-burger{display:grid;}

  /* Panel menu bung NGAY TRONG header sticky, không position:fixed — như vậy
     không phải đo chiều cao header bằng số ma (header cao khác nhau tuỳ có logo
     tải lên hay không). Tự cuộn khi danh mục dài hơn màn hình. */
  .mas-nav{display:none;background:var(--c-surface);
    max-height:calc(100vh - 100%);overflow-y:auto;overscroll-behavior:contain;}
  body.mas-nav-open{overflow:hidden;}
  body.mas-nav-open .mas-nav{display:block;}

  .mas-nav__row{flex-direction:column;gap:0;align-items:stretch;}
  .mas-nav__item{flex-direction:column;}
  .mas-nav__item>a{padding:.8rem var(--gutter);font-size:var(--fs-body);
    color:var(--c-heading);border-bottom:var(--bd-hair);justify-content:space-between;}
  .mas-nav__item>a:hover,.mas-nav__item:focus-within>a{color:var(--c-primary);border-bottom-color:var(--c-border);}

  /* Mega menu trên mobile: ACCORDION — mặc định THU GỌN, chỉ mở khi bấm "Sản phẩm".
     Trước đây để visibility:1 nên panel bung sẵn ngay khi mở menu, đè các mục
     Dịch vụ/Dự án/Liên hệ bên dưới. display:none để không chiếm chỗ khi đóng. */
  .mas-mega{position:static;transform:none;width:auto;border:0;box-shadow:none;
    visibility:visible;opacity:1;display:none;}
  .mas-nav__item.has-mega.is-open .mas-mega{display:block;}
  /* Caret xoay báo trạng thái mở */
  .mas-nav__item.has-mega>a svg{transition:transform var(--dur) var(--ease);}
  .mas-nav__item.has-mega.is-open>a svg{transform:rotate(180deg);}
  .mas-mega__head,.mas-mega__foot{padding-inline:var(--gutter);}
  .mas-mega__body{grid-template-columns:1fr;}
  .mas-mega__feat{border-right:0;border-bottom:var(--bd-hair);padding:var(--sp-4) var(--gutter);}
  .mas-mega__img{width:76px;}
  .mas-mega__list{padding:0;}
  .mas-mega__list a{padding:.6rem var(--gutter);border-bottom:var(--bd-hair);}
  .mas-mega__foot{flex-direction:column;align-items:flex-start;gap:var(--sp-2);}

  .mas-nav__contact{display:flex;flex-direction:column;gap:var(--sp-3);
    padding:var(--sp-4) var(--gutter);background:var(--c-primary);}
  .mas-nav__contact-k{display:flex;align-items:center;justify-content:space-between;
    gap:var(--sp-3);font-size:var(--fs-caption);color:var(--navy-200);}
  .mas-nav__contact-k a{color:var(--navy-200);text-decoration:none;}
  .mas-nav__tel{font-size:1.55rem;font-weight:var(--fw-bold);color:var(--c-invert);
    text-decoration:none;line-height:1;}

  .mas-footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-6);}
  .mas-footer__brand{grid-column:1/-1;}
  .mas-footer__bar-row{flex-direction:column;align-items:flex-start;gap:var(--sp-2);}
}
@media (max-width:520px){
  .mas-footer__grid{grid-template-columns:1fr;}
}

/* ============================================================ 18. TRANG DANH MỤC
   Lưới sản phẩm dùng lại .mas-card + .mas-prodgrid của §16.
   KHÔNG có bộ lọc giá — 0/360 sản phẩm có giá (xem functions.php §13). */

/* --- Đầu trang --- */
.mas-cat-head{padding-block:var(--sp-4) var(--sp-8);}
.mas-cat-head h1{color:var(--c-invert);margin:0 0 var(--sp-3);}
.mas-cat-head__row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-10);margin-top:var(--sp-2);}
.mas-cat-head__txt{max-width:640px;}
.mas-cat-head__txt p{margin:0;font-size:var(--fs-lg);color:var(--navy-100);line-height:var(--lh-body);}
.mas-cat-head__stats{display:flex;gap:var(--sp-10);flex:none;padding-bottom:var(--sp-1);}
.mas-cstat{display:flex;flex-direction:column;gap:2px;}
.mas-cstat__n{font-size:1.7rem;font-weight:var(--fw-bold);color:var(--c-invert);line-height:1;}
.mas-cstat__k{font-size:var(--fs-caption);color:var(--navy-200);}

/* Breadcrumb trên nền navy */
.mas-cat-head .mas-breadcrumb{display:flex;flex-wrap:wrap;gap:var(--sp-2);
  font-size:var(--fs-caption);color:var(--navy-200);}
.mas-cat-head .mas-breadcrumb a{color:var(--navy-200);text-decoration:none;}
.mas-cat-head .mas-breadcrumb a:hover{color:#fff;}
.mas-cat-head .mas-breadcrumb>*+*::before{content:"/";margin-right:var(--sp-2);opacity:.5;}
.mas-cat-head .mas-breadcrumb span[aria-current]{color:var(--navy-100);}

/* --- Bố cục 2 cột --- */
.mas-cat-body{display:grid;grid-template-columns:272px minmax(0,1fr);gap:var(--sp-10);
  padding-block:var(--sp-8) var(--sp-12);}
.mas-cat-main{min-width:0;}

/* --- Sidebar lọc --- */
.mas-filters{display:flex;flex-direction:column;gap:var(--sp-5);align-self:start;}
.mas-filters__head{display:none;}
.mas-filters__body{display:flex;flex-direction:column;gap:var(--sp-5);}
.mas-filter{border:var(--bd-hair);border-radius:var(--r-md);}
.mas-filter__head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4);border-bottom:var(--bd-ink);}
.mas-filter__title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--c-heading);}
.mas-filter__n{font-size:var(--fs-caption);color:var(--c-muted);}
.mas-filter__body{display:flex;flex-direction:column;padding:var(--sp-2) var(--sp-4) var(--sp-3);}

/* Ô chọn là thẻ <a> chứ không phải checkbox thật: bộ lọc chạy bằng URL nên
   hoạt động cả khi tắt JS, và mỗi tổ hợp lọc chia sẻ được bằng link. */
.mas-check{display:flex;align-items:center;gap:var(--sp-3);padding:.42rem 0;text-decoration:none;}
.mas-check__box{width:16px;height:16px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--c-border-strong);border-radius:var(--r-xs);background:var(--c-surface);}
.mas-check.is-on .mas-check__box{background:var(--c-primary);border-color:var(--c-primary);}
.mas-check__label{flex:1;font-size:var(--fs-sm);color:var(--c-text);}
.mas-check.is-on .mas-check__label{font-weight:var(--fw-semibold);color:var(--c-heading);}
.mas-check__n{font-size:var(--fs-caption);color:var(--c-muted);}
.mas-check:hover .mas-check__label{color:var(--c-primary);}

.mas-advise{padding:var(--sp-4);border:1px dashed var(--c-border-strong);border-radius:var(--r-sm);}
.mas-advise__t{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-heading);
  margin-bottom:var(--sp-1);}
.mas-advise p{margin:0 0 var(--sp-2);font-size:var(--fs-caption);color:var(--c-muted-strong);
  line-height:var(--lh-snug);}
.mas-advise a{font-size:1.1rem;font-weight:var(--fw-bold);color:var(--c-cta);text-decoration:none;}

/* --- Thanh công cụ --- */
.mas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:var(--bd-hair);margin-bottom:var(--sp-5);}
.mas-toolbar__count{font-size:var(--fs-sm);color:var(--c-muted-strong);}
.mas-toolbar__count .mas-mono{font-weight:var(--fw-semibold);color:var(--c-heading);}
.mas-toolbar__right{display:flex;align-items:center;gap:var(--sp-3);}
.mas-sort{display:flex;align-items:center;gap:var(--sp-2);margin:0;}
.mas-sort label{font-size:var(--fs-sm);color:var(--c-muted);}
.mas-sort select{padding:.45rem .8rem;font-family:inherit;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--c-heading);background:var(--c-surface);
  border:1.5px solid var(--c-border-strong);border-radius:var(--r-sm);cursor:pointer;}
.mas-filters__open{display:none;align-items:center;gap:var(--sp-2);padding:.45rem .8rem;
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-invert);
  background:var(--c-primary);border:1.5px solid var(--c-primary);border-radius:var(--r-sm);
  cursor:pointer;box-shadow:var(--stamp-sm);}
.mas-filters__badge{background:var(--c-cta);padding:0 5px;border-radius:2px;font-size:var(--fs-overline);}

.mas-prodgrid.is-cat{grid-template-columns:repeat(3,1fr);}

.mas-empty{padding:var(--sp-10) 0;text-align:center;color:var(--c-muted-strong);}
.mas-empty p{margin:0 0 var(--sp-4);}

/* --- Phân trang (paginate_links type=list) --- */
.mas-cat-main .page-numbers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-2);margin:var(--sp-8) 0 0;padding:0;list-style:none;}
.mas-cat-main .page-numbers li{display:flex;}
.mas-cat-main .page-numbers a,.mas-cat-main .page-numbers span.current,
.mas-cat-main .page-numbers span.dots{min-width:40px;height:40px;display:grid;place-items:center;
  padding-inline:.5rem;border:1.5px solid var(--c-border-strong);border-radius:var(--r-sm);
  color:var(--c-heading);text-decoration:none;font-weight:var(--fw-semibold);}
.mas-cat-main .page-numbers a:hover{border-color:var(--c-primary);color:var(--c-primary);}
.mas-cat-main .page-numbers .current{background:var(--c-primary);border-color:var(--c-primary);
  color:var(--c-invert);box-shadow:var(--stamp-sm);}
.mas-cat-main .page-numbers .dots{border-color:transparent;}

/* --- Bài giới thiệu cuối trang --- */
.mas-cat-seo{border-top:var(--bd-hair);}
.mas-cat-seo h2{margin:0 0 var(--sp-4);}
.mas-cat-seo h3{margin:var(--sp-6) 0 var(--sp-3);}
.mas-cat-seo p{margin:0 0 var(--sp-4);color:var(--c-text);}

/* ============ MOBILE ============ */
@media (max-width:1000px){
  .mas-cat-body{grid-template-columns:1fr;gap:0;}
  .mas-prodgrid.is-cat{grid-template-columns:repeat(2,1fr);gap:var(--sp-3);}
  .mas-cat-head__row{flex-direction:column;align-items:flex-start;gap:var(--sp-4);}
  .mas-cat-head__stats{gap:var(--sp-6);}
  .mas-cstat__n{font-size:1.35rem;}
  .mas-toolbar{flex-wrap:wrap;}
  .mas-filters__open{display:inline-flex;}

  /* Drawer lọc: trượt từ trái, có lớp phủ. Ẩn bằng visibility để vẫn
     loại khỏi thứ tự tab khi đóng. */
  .mas-filters{position:fixed;inset:0 auto 0 0;z-index:200;width:min(324px,86vw);
    background:var(--c-surface);border-right:1.5px solid var(--c-primary);
    gap:0;transform:translateX(-100%);visibility:hidden;
    transition:transform var(--dur) var(--ease),visibility var(--dur) var(--ease);}
  body.mas-filters-open .mas-filters{transform:translateX(0);visibility:visible;}
  body.mas-filters-open{overflow:hidden;}
  body.mas-filters-open::after{content:"";position:fixed;inset:0;z-index:199;
    background:rgba(7,31,56,.55);}

  .mas-filters__head{display:flex;align-items:center;justify-content:space-between;
    gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:var(--bd-ink);
    font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--c-heading);}
  .mas-filters__close{width:40px;height:40px;display:grid;place-items:center;
    background:var(--c-surface);color:var(--c-primary);border:1.5px solid var(--c-primary);
    border-radius:var(--r-sm);cursor:pointer;}
  .mas-filters__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-4);}
}
@media (max-width:520px){
  .mas-toolbar__right{width:100%;justify-content:space-between;}
}

/* ============================================================ 19. DỊCH VỤ · DỰ ÁN · LIÊN HỆ · 404
   Dùng lại .mas-card, .mas-titleblock, .mas-frame, .mas-quote (§16/§17/§18). */

/* --- Breadcrumb trên nền sáng --- */
.mas-breadcrumb.is-light{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding-block:var(--sp-4) 0;
  font-size:var(--fs-caption);color:var(--c-muted);}
.mas-breadcrumb.is-light a{color:var(--c-muted);text-decoration:none;}
.mas-breadcrumb.is-light a:hover{color:var(--c-primary);}
.mas-breadcrumb.is-light>*+*::before{content:"/";margin-right:var(--sp-2);opacity:.5;}

/* --- Nội dung soạn thảo (Gutenberg) --- */
.mas-prose{min-width:0;}
.mas-prose h2{margin:var(--sp-8) 0 var(--sp-3);}
.mas-prose h2:first-child{margin-top:0;}
.mas-prose h3{margin:var(--sp-6) 0 var(--sp-3);}
.mas-prose p{margin:0 0 var(--sp-4);color:var(--c-text);}
.mas-prose ul,.mas-prose ol{margin:0 0 var(--sp-4);padding-left:1.3em;color:var(--c-text);}
.mas-prose li{margin-bottom:var(--sp-2);}
.mas-prose img{max-width:100%;height:auto;border:var(--bd-hair);}

/* ============ DỊCH VỤ ============ */
.mas-dv-hero{display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  gap:var(--sp-12);align-items:center;padding-block:var(--sp-6) var(--sp-12);}
.mas-dv-hero__lead{margin:0 0 var(--sp-6);font-size:var(--fs-lg);color:var(--c-muted-strong);
  max-width:32em;line-height:var(--lh-body);}
.mas-dv-hero__media img{display:block;width:100%;height:auto;}
.mas-dv__tech{margin-top:var(--sp-4);}

/* Quy trình — trục ngang kiểu đường ghi kích thước */
.mas-dv-steps .mas-section-head h2,.mas-dv-steps .mas-section-head p{color:var(--c-invert);}
.mas-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0;margin:0;padding:0;list-style:none;}
.mas-step{position:relative;border-top:1.5px solid rgba(255,255,255,.45);
  padding:var(--sp-5) var(--sp-4) 0 0;}
/* Vạch dóng đầu mỗi bước — mượn ngôn ngữ đường ghi kích thước */
.mas-step::before{content:"";position:absolute;top:-7px;left:0;width:1.5px;height:13px;
  background:rgba(255,255,255,.7);}
.mas-step__no{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-bold);
  color:var(--navy-900);background:var(--c-field);padding:2px 8px;margin-bottom:var(--sp-3);}
.mas-step h3{font-size:var(--fs-h4);margin:0 0 var(--sp-2);color:var(--c-invert);}
.mas-step p{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--navy-100);
  line-height:var(--lh-snug);}
.mas-step__time{font-size:var(--fs-caption);color:var(--orange-300);font-weight:var(--fw-semibold);}

/* Bảng giá dịch vụ */
.mas-pricetable{width:100%;border-collapse:collapse;background:var(--c-surface);
  border:var(--bd-hair);border-radius:var(--r-md);overflow:hidden;font-size:var(--fs-sm);}
.mas-pricetable th,.mas-pricetable td{padding:.62rem .85rem;text-align:left;
  border-bottom:var(--bd-hair);vertical-align:top;}
.mas-pricetable thead th{background:var(--c-primary);color:var(--c-invert);
  font-weight:var(--fw-bold);}
.mas-pricetable td.is-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mas-pricetable tr:last-child td{border-bottom:0;}
.mas-pricetable__note{margin:var(--sp-3) 0 0;font-size:var(--fs-caption);color:var(--c-muted);}

/* FAQ — dùng <details> sẵn có, không JS */
.mas-faqs{display:flex;flex-direction:column;gap:var(--sp-3);}
.mas-faq{background:var(--c-surface);border:var(--bd-hair);border-radius:var(--r-md);}
.mas-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);cursor:pointer;font-size:var(--fs-body);
  font-weight:var(--fw-semibold);color:var(--c-heading);list-style:none;}
.mas-faq summary::-webkit-details-marker{display:none;}
.mas-faq__x{flex:none;color:var(--c-cta);transition:transform var(--dur) var(--ease);}
.mas-faq[open] .mas-faq__x{transform:rotate(45deg);}
.mas-faq p{margin:0;padding:0 var(--sp-5) var(--sp-4);font-size:var(--fs-sm);
  color:var(--c-muted-strong);line-height:var(--lh-body);}

.mas-svgrid.is-archive{grid-template-columns:repeat(3,1fr);}
.mas-service__media img{display:block;width:100%;height:auto;margin-bottom:var(--sp-3);
  border:var(--bd-hair);}
.mas-quote__ft{font-size:var(--fs-h4);margin:0 0 var(--sp-4);color:var(--c-heading);}

/* ============ DỰ ÁN ============ */
.mas-chiprow{display:flex;flex-wrap:wrap;gap:var(--sp-3);padding-bottom:var(--sp-5);
  border-bottom:var(--bd-hair);margin-bottom:var(--sp-6);}
.mas-chiprow .mas-mono{opacity:.7;margin-left:4px;}
.mas-prjgrid.is-archive{grid-template-columns:repeat(3,1fr);}
.mas-prjcard{text-decoration:none;}
.mas-prjcard .mas-card__eyebrow{display:flex;align-items:center;gap:6px;}
.mas-prjcard__gear{margin:var(--sp-1) 0 0;font-size:var(--fs-caption);color:var(--c-muted-strong);}
.mas-prjcard__gear strong{color:var(--c-heading);font-weight:var(--fw-semibold);}

.mas-da__head{padding-block:var(--sp-4) var(--sp-4);}
.mas-da__head h1{margin:0 0 var(--sp-2);max-width:20em;}
.mas-da__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4);
  font-size:var(--fs-sm);color:var(--c-muted);}
.mas-da__meta>span{display:flex;align-items:center;gap:6px;}
.mas-da__sep{width:1px;height:14px;background:var(--c-border);}
.mas-da__hero{padding:12px;margin-bottom:var(--sp-8);}
.mas-da__hero img{display:block;width:100%;height:auto;border:var(--bd-hair);}
.mas-da__body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-12);
  align-items:start;padding-bottom:var(--sp-16);}
.mas-da__side{position:sticky;top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-5);}
.mas-relbox{padding:var(--sp-4);border:1px dashed var(--c-border-strong);border-radius:var(--r-sm);}
.mas-relbox__links{display:flex;flex-direction:column;gap:var(--sp-1);}
.mas-relbox__links a{font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--c-primary);text-decoration:none;}

/* ============ LIÊN HỆ ============ */
.mas-contact__head{padding-block:var(--sp-4) var(--sp-6);}
.mas-contact__head h1{margin:0 0 var(--sp-2);}
.mas-contact__head p{margin:0;font-size:var(--fs-lg);color:var(--c-muted-strong);max-width:44em;}
.mas-contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-12);align-items:start;padding-bottom:var(--sp-16);}
.mas-contact__info{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0;}
.mas-contact__btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
.mas-contact__map{padding:8px;}
.mas-contact__map iframe{display:block;width:100%;height:300px;border:0;
  filter:grayscale(.35) contrast(1.05);}
.mas-contact__addr{display:flex;align-items:center;gap:var(--sp-2);margin:0;
  font-size:var(--fs-caption);color:var(--c-muted);}
.mas-contact .mas-quote__form{box-shadow:var(--stamp);}

/* ============ 404 ============ */
.mas-404__hero{position:relative;overflow:hidden;padding-block:var(--sp-16);}
.mas-404__inner{position:relative;max-width:640px;}
.mas-404__north{position:absolute;top:var(--sp-6);right:var(--sp-8);
  color:rgba(255,255,255,.5);width:30px;height:40px;}
/* Vòng dóng điểm — thuần trang trí, dựng bằng gradient nên không thêm ảnh */
.mas-404__rings{position:absolute;top:38%;left:26%;width:180px;height:180px;
  transform:translate(-50%,-50%);pointer-events:none;
  border:1px dashed rgba(255,255,255,.25);border-radius:50%;
  background:
    linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 50% 0/1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 0 50%/100% 1px no-repeat;}
.mas-404__eyebrow{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);
  font-size:var(--fs-caption);letter-spacing:.14em;color:var(--orange-300);text-transform:uppercase;}
.mas-404__eyebrow .mas-marker{width:30px;height:30px;flex:none;}
.mas-404__code{font-size:5rem;font-weight:var(--fw-bold);color:var(--c-invert);
  line-height:.95;letter-spacing:-.02em;margin-bottom:var(--sp-4);}
.mas-404 h1{color:var(--c-invert);margin:0 0 var(--sp-3);max-width:16em;}
.mas-404__hero p{margin:0 0 var(--sp-6);font-size:var(--fs-lg);color:var(--navy-100);
  max-width:36em;line-height:var(--lh-body);}
.mas-404__search{display:flex;gap:var(--sp-3);max-width:460px;margin-bottom:var(--sp-6);}
.mas-404__field{position:relative;flex:1;}
.mas-404__field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--c-muted);pointer-events:none;}
.mas-404__field .mas-input{padding-left:38px;}
.mas-404__cats{padding-block:var(--sp-6) var(--sp-10);}
.mas-404__cats .mas-callout{margin-bottom:var(--sp-4);}
.mas-catgrid.is-compact{grid-template-columns:repeat(4,1fr);}
.mas-cat.is-row{flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-4);}
.mas-cat.is-row .mas-cat__icon{width:22px;height:22px;flex:none;}
.mas-cat.is-row .mas-cat__name{font-size:var(--fs-sm);line-height:var(--lh-snug);}

/* ============ MOBILE ============ */
@media (max-width:1000px){
  .mas-dv-hero,.mas-da__body,.mas-contact__grid{grid-template-columns:1fr;gap:var(--sp-8);}
  .mas-da__side{position:static;}
  .mas-svgrid.is-archive,.mas-prjgrid.is-archive{grid-template-columns:repeat(2,1fr);}
  .mas-catgrid.is-compact{grid-template-columns:repeat(2,1fr);}
  .mas-404__hero{padding-block:var(--sp-8);}
  .mas-404__code{font-size:3.4rem;}
  .mas-404__rings{width:110px;height:110px;top:14%;left:auto;right:8px;transform:none;}
}
@media (max-width:640px){
  .mas-svgrid.is-archive,.mas-prjgrid.is-archive{grid-template-columns:1fr;}
  .mas-contact__btns{grid-template-columns:1fr;}
  .mas-404__search{flex-direction:column;}
  .mas-steps{grid-template-columns:1fr;}
}

/* ============================================================ 20. REVEAL KHI CUỘN
   Pro Max motion "Subtle" (2/10) — kế hoạch ở design-system/minh-an-mas/MASTER.md.
   Chỉ ẩn dưới `.mas-anim` (JS bật + không giảm chuyển động) ⇒ không-JS vẫn hiện.
   Danh sách class phải KHỚP với observer trong mas_reveal_foot() (functions.php). */
.mas-anim :is(.mas-section-head,.mas-card,.mas-usp,.mas-stat,.mas-cat,.mas-service,
  .mas-prj,.mas-keyspecs,.mas-trust,.mas-doclist,.mas-quote-box,.mas-titleblock){
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.mas-anim :is(.mas-section-head,.mas-card,.mas-usp,.mas-stat,.mas-cat,.mas-service,
  .mas-prj,.mas-keyspecs,.mas-trust,.mas-doclist,.mas-quote-box,.mas-titleblock).is-in{
  opacity:1;transform:none;
}
/* Stagger nhẹ cho phần tử trong lưới — cảm giác "được dựng", không đồng loạt */
.mas-anim :is(.mas-card,.mas-usp,.mas-stat,.mas-cat,.mas-service,.mas-prj):nth-child(2){transition-delay:.05s;}
.mas-anim :is(.mas-card,.mas-usp,.mas-stat,.mas-cat,.mas-service,.mas-prj):nth-child(3){transition-delay:.1s;}
.mas-anim :is(.mas-card,.mas-usp,.mas-stat,.mas-cat,.mas-service,.mas-prj):nth-child(4){transition-delay:.15s;}
@media (prefers-reduced-motion:reduce){
  .mas-anim :is(.mas-section-head,.mas-card,.mas-usp,.mas-stat,.mas-cat,.mas-service,
    .mas-prj,.mas-keyspecs,.mas-trust,.mas-doclist,.mas-quote-box,.mas-titleblock){
    opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ============================================================ 21. BLOCK DỊCH VỤ (redesign)
   Trang /dich-vu/ — phá thế 5 thẻ đồng cấp: 1 featured span-2 nền navy + 4 thẻ
   trắng. Minh hoạ isometric inline (assets/img/services/, sinh bởi
   scripts/gen_service_svgs.py). Dùng token --c-*; thay .mas-svgrid cũ ở archive. */
.mas-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}

.mas-svc-card{
  display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr auto;
  grid-template-areas:"illo" "eyebrow" "title" "desc" "link";
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);
  padding:var(--sp-6);text-decoration:none;color:var(--c-text);
  transition:border-color var(--dur) var(--ease);}
.mas-svc-card:hover,.mas-svc-card:focus-visible{border-color:var(--c-cta);}

.mas-svc-illo{grid-area:illo;width:104px;height:104px;margin-bottom:var(--sp-3);
  transition:transform var(--dur) var(--ease);}
.mas-svc-illo svg{display:block;width:100%;height:100%;}
.mas-svc-card:hover .mas-svc-illo,.mas-svc-card:focus-visible .mas-svc-illo{transform:translateY(-2px);}

.mas-svc-eyebrow{grid-area:eyebrow;font-family:var(--font-mono);font-size:var(--fs-overline);
  letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--c-muted);margin:0 0 var(--sp-2);}
.mas-svc-card h3{grid-area:title;font-size:1.16rem;line-height:var(--lh-heading);
  margin:0 0 var(--sp-2);color:var(--c-primary);letter-spacing:var(--ls-tight);}
.mas-svc-desc{grid-area:desc;font-size:var(--fs-sm);color:var(--c-muted-strong);
  margin:0 0 var(--sp-4);line-height:var(--lh-snug);}
.mas-svc-link{grid-area:link;align-self:end;font-weight:var(--fw-semibold);color:var(--c-cta);
  font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:.4rem;}
.mas-svc-card:hover .mas-svc-link,.mas-svc-featured:hover .mas-svc-link{gap:.7rem;}
.mas-svc-link .ar{transition:transform var(--dur) var(--ease);}
.mas-svc-card:hover .mas-svc-link .ar,.mas-svc-featured:hover .mas-svc-link .ar{transform:translateX(3px);}

.mas-svc-featured{grid-column:span 2;display:flex;align-items:center;gap:var(--sp-8);
  background:var(--c-primary);border:1px solid var(--c-primary-dark);border-radius:var(--r-md);
  padding:var(--sp-8);text-decoration:none;transition:border-color var(--dur) var(--ease);}
.mas-svc-featured:hover,.mas-svc-featured:focus-visible{border-color:var(--c-cta);}
.mas-svc-featured__body{flex:1 1 auto;min-width:0;}
.mas-svc-featured .mas-svc-eyebrow{color:var(--orange-300);}
.mas-svc-featured h3{color:var(--c-invert);font-size:var(--fs-h3);line-height:var(--lh-heading);
  margin:0 0 var(--sp-3);letter-spacing:var(--ls-tight);}
.mas-svc-featured .mas-svc-desc{color:var(--navy-100);font-size:var(--fs-body);margin:0 0 var(--sp-4);}
.mas-svc-featured .mas-svc-link{color:var(--orange-300);}
.mas-svc-featured .mas-svc-illo{flex:0 0 auto;width:clamp(150px,19vw,210px);height:auto;
  aspect-ratio:1;margin:0;}
.mas-svc-featured:hover .mas-svc-illo{transform:translateY(-2px);}

@media (max-width:1023px){
  .mas-svc-grid{grid-template-columns:repeat(2,1fr);}
  .mas-svc-featured{grid-column:span 2;}
}
@media (max-width:767px){
  .mas-svc-grid{grid-template-columns:1fr;}
  .mas-svc-featured{grid-column:span 1;flex-direction:column;align-items:flex-start;
    gap:var(--sp-5);padding:var(--sp-6);}
  .mas-svc-featured .mas-svc-illo{order:-1;width:150px;}
  .mas-svc-card{grid-template-columns:72px 1fr;grid-template-rows:auto auto auto auto;
    grid-template-areas:"illo eyebrow" "illo title" "desc desc" "link link";
    column-gap:14px;align-items:start;}
  .mas-svc-card .mas-svc-illo{width:72px;height:72px;margin-bottom:0;}
  .mas-svc-card .mas-svc-desc{margin-top:10px;}
}

/* ============================================================ 22. LANDING DỊCH VỤ — KHỐI MỚI (Rev 2.1)
   USP · thiết bị · dự án · khu vực phục vụ · nút Zalo.
   (Khối hero/quy trình/bảng giá/FAQ dùng lại style sẵn có.) */

/* Nút Zalo — xanh Zalo, vẫn theo hệ nút dập của site */
.mas-btn.is-zalo{--btn-bg:#0068ff;--btn-fg:#fff;--btn-bd:#0a4bb3;--btn-stamp:#0a2f6b;}
.mas-btn.is-zalo:hover{background:#0054d1;color:#fff;}

/* 2 · Vì sao chọn MAS */
.mas-dv-usps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-5);}
.mas-dv-usp{gap:var(--sp-3);padding:var(--sp-5);}
.mas-dv-usp__icon{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--c-primary);color:var(--c-invert);border:1.5px solid var(--c-primary-dark);
  box-shadow:2px 2px 0 0 var(--c-field);}
.mas-dv-usp__icon svg{width:24px;height:24px;stroke:currentColor;fill:none;}
.mas-dv-usp h3{margin:0;font-size:1.05rem;line-height:var(--lh-heading);color:var(--c-primary);
  letter-spacing:var(--ls-tight);}
.mas-dv-usp p{margin:0;color:var(--c-muted-strong);font-size:var(--fs-sm);line-height:var(--lh-body);}

/* 5 · Thiết bị sử dụng — thẻ máy link sang trang sản phẩm */
.mas-equip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
.mas-equip{display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--c-surface);border:var(--bd-hair);border-radius:var(--r-md);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.mas-equip:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 var(--c-primary);border-color:var(--c-primary);}
.mas-equip__media{aspect-ratio:1;background:var(--c-surface-2);border-bottom:var(--bd-hair);
  display:grid;place-items:center;padding:var(--sp-4);}
.mas-equip__media img{width:100%;height:100%;object-fit:contain;}
.mas-equip__body{display:flex;flex-direction:column;gap:6px;padding:var(--sp-4);flex:1 1 auto;}
.mas-equip__eyebrow{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-muted);
  text-transform:uppercase;letter-spacing:.05em;}
.mas-equip__name{font-weight:var(--fw-semibold);color:var(--c-primary);line-height:var(--lh-heading);
  font-size:var(--fs-sm);}
.mas-equip__more{margin-top:auto;padding-top:var(--sp-2);font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);color:var(--c-cta);letter-spacing:.02em;}
.mas-equip-note{margin:var(--sp-5) 0 0;font-size:var(--fs-sm);color:var(--c-muted-strong);}
.mas-equip-note a{color:var(--c-cta);font-weight:var(--fw-semibold);}

/* 6 · Dự án tiêu biểu — placeholder bản vẽ (không dùng ảnh giả) */
.mas-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
.mas-case{overflow:hidden;}
.mas-case__thumb{position:relative;aspect-ratio:16/10;background:var(--c-primary);
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:22px 22px;}
.mas-case__grid{position:absolute;left:50%;top:50%;width:26px;height:26px;
  transform:translate(-50%,-50%);border:2px solid var(--orange-300);border-radius:50%;}
.mas-case__grid::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--c-field);}
.mas-case__body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);}
.mas-case__place{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);color:var(--c-cta);}
.mas-case h3{margin:0;font-size:1.05rem;line-height:var(--lh-heading);color:var(--c-primary);
  letter-spacing:var(--ls-tight);}
.mas-case p{margin:0;color:var(--c-muted-strong);font-size:var(--fs-sm);line-height:var(--lh-body);}

/* 8 · Khu vực phục vụ (trong khối CTA navy) */
.mas-dv-area{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.16);}
.mas-dv-area__head{display:block;font-family:var(--font-mono);font-size:var(--fs-caption);
  text-transform:uppercase;letter-spacing:.08em;color:var(--orange-300);margin-bottom:var(--sp-2);}
.mas-dv-area__lead{margin:0 0 var(--sp-3);color:var(--navy-100);font-size:var(--fs-sm);line-height:var(--lh-body);}
.mas-dv-area__lead strong{color:var(--c-invert);}
.mas-dv-area__tags{list-style:none;margin:0 0 var(--sp-4);padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.mas-dv-area__tags li{font-size:var(--fs-caption);color:var(--navy-100);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);padding:3px 9px;}
.mas-dv-area__map{display:inline-flex;align-items:center;gap:6px;color:var(--orange-300);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);text-decoration:none;}
.mas-dv-area__map:hover{color:var(--c-invert);}

@media (max-width:1023px){
  .mas-equip-grid{grid-template-columns:repeat(3,1fr);}
  .mas-cases{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .mas-dv-usps{grid-template-columns:1fr;}
  .mas-equip-grid{grid-template-columns:repeat(2,1fr);}
  .mas-cases{grid-template-columns:1fr;}
}

/* ============================================================ 23. WIDGET LIÊN HỆ NỔI (3 nút xếp dọc)
   3 nút tròn nổi bật xếp dọc góc phải-dưới: Gọi · Zalo · Báo giá. Luôn hiện,
   1 chạm là hành động (không cần bung panel) → thuần CSS, KHÔNG cần JS.
   CHỈ desktop + trang không có thanh CTA đáy (§11 render trên sản phẩm/danh mục/
   shop → ẩn để không chồng). Nhãn trượt ra khi hover; mobile chỉ icon. */
.mas-fab{position:fixed;right:20px;bottom:20px;z-index:850;display:flex;flex-direction:column;
  align-items:flex-end;gap:14px;}
@media (max-width:689px){
  body:is(.single-product,.tax-product_cat,.post-type-archive-product) .mas-fab{display:none;}
  .mas-fab{right:14px;bottom:14px;gap:12px;}
  /* Chừa chỗ cho widget ở CUỐI trang: khi cuộn hết, 3 nút (14+3×50+2×12 ≈ 188px)
     nằm đè lên vùng này. Không chừa thì chúng phủ lên cột link footer — chữ vẫn
     đọc được nhưng vùng chạm của link trải hết chiều ngang cột, khách bấm hụt vào
     khoảng trống bên phải sẽ GỌI ĐIỆN ngoài ý muốn. (Phát hiện 28/07.) */
  .mas-footer{padding-bottom:200px;}
}

/* Mỗi nút = icon tròn + nhãn tip */
.mas-fab__btn{position:relative;display:flex;align-items:center;justify-content:flex-end;text-decoration:none;}
.mas-fab__ic{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:2px solid var(--navy-900);color:var(--c-invert);box-shadow:3px 3px 0 0 var(--c-primary);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur) var(--ease);}
.mas-fab__ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;}
.mas-fab__btn:hover .mas-fab__ic,.mas-fab__btn:focus-visible .mas-fab__ic{transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--c-primary);}
.mas-fab__btn.is-call  .mas-fab__ic{background:var(--c-cta);}
.mas-fab__btn.is-call:hover .mas-fab__ic{background:var(--c-cta-hover);}
.mas-fab__btn.is-zalo  .mas-fab__ic{background:#0068ff;border-color:#0a2f6b;box-shadow:3px 3px 0 0 #0a2f6b;}
.mas-fab__btn.is-quote .mas-fab__ic{background:var(--c-primary);}

/* Nhãn trượt ra khi hover/focus (desktop) */
.mas-fab__tip{position:absolute;right:62px;white-space:nowrap;background:var(--c-primary);color:var(--c-invert);
  font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.02em;
  padding:7px 12px;border-radius:var(--r-sm);border:1.5px solid var(--navy-900);box-shadow:2px 2px 0 0 var(--navy-900);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);}
.mas-fab__tip .mas-mono{color:var(--orange-300);}
.mas-fab__btn:hover .mas-fab__tip,.mas-fab__btn:focus-visible .mas-fab__tip{opacity:1;transform:none;}

/* Pulse nhẹ nút Gọi (không giảm chuyển động) */
@media (prefers-reduced-motion:no-preference){
  .mas-fab__btn.is-call .mas-fab__ic::after{content:"";position:absolute;inset:-2px;border-radius:50%;
    border:2px solid var(--c-cta);animation:mas-fab-pulse 2.4s ease-out infinite;pointer-events:none;}
}
@keyframes mas-fab-pulse{0%{opacity:.55;transform:scale(1);}70%{opacity:0;transform:scale(1.35);}100%{opacity:0;}}

/* Mobile: nút nhỏ hơn, chỉ icon (ẩn nhãn) */
@media (max-width:689px){
  .mas-fab__ic{width:50px;height:50px;box-shadow:2px 2px 0 0 var(--c-primary);}
  .mas-fab__btn.is-zalo .mas-fab__ic{box-shadow:2px 2px 0 0 #0a2f6b;}
  .mas-fab__tip{display:none;}
}