/* =========================================================================
   TỦ BẾP NHÔM – HỆ THỐNG THIẾT KẾ (DESIGN SYSTEM) · MOBILE-FIRST
   Quy ước: BEM (block__element--modifier). Viết cho màn 360px trước,
   rồi mở rộng bằng @media (min-width: 600px / 900px / 1200px).

   Các VÙNG (mỗi vùng có quy tắc nền mobile, kèm @media min-width của riêng nó):
     [REGION:tokens]     biến :root, mốc đổi theo cỡ màn hình
     [REGION:base]       reset, chữ, liên kết, focus, [hidden], skip-link
     [REGION:utilities]  container, lưới, .swipe, .sheet, .toast, .chip,
                         .choice, .icon, .visually-hidden, .scroll-x
     [REGION:components] nút, nhãn, eyebrow, thẻ tính năng, trạng thái rỗng
     [REGION:chrome]     header, nav, breadcrumb, footer, nút nổi, thanh đáy
     [REGION:home]       hero, số liệu, quy trình, đánh giá, FAQ, CTA, so sánh
     [REGION:catalog]    thẻ mẫu, bộ lọc, gallery chi tiết, thông số, lightbox
     [REGION:forms]      form, ô nhập, báo giá, ngăn báo giá, dự toán
     [REGION:content]    prose, mục lục, bài viết, bảng, công trình, page-hero
     [REGION:extras]     trạng thái animation, giảm chuyển động, in ấn
   ========================================================================= */

/* ===== [REGION:tokens] ===== */
:root {
  /* --- Màu sắc (mọi cặp chữ/nền dùng trong site đều đạt WCAG AA 4.5:1) --- */
  --c-ink: #1F2328;            /* xám than – màu chủ đạo */
  --c-ink-2: #2C3238;          /* than nhạt hơn */
  --c-body: #3A4149;           /* chữ nội dung (10:1 trên trắng) */
  --c-muted: #5A636E;          /* chữ phụ: ≥ 5.5:1 trên #fff/#F6F7F9/#FAF4E6/#EEF1F4/#FDF6F5 */
  --c-hint: #626B76;           /* gợi ý/placeholder: ≥ 4.7:1 trên cùng các nền trên */
  --c-muted-dark: #A9B0B9;     /* chữ phụ trên nền tối #1F2328 (7.2:1) */
  --c-line: #E4E7EB;
  --c-line-strong: #B6BCC4;
  --c-line-dark: #3C434A;
  --c-field: #858E99;          /* viền ô nhập: 3.3:1 trên nền trắng (WCAG 1.4.11) */
  --c-bg: #FFFFFF;
  --c-bg-soft: #F6F7F9;
  --c-bg-soft-2: #EEF1F4;
  --c-accent: #C8A45D;         /* vàng đồng – nền nút CTA (chữ than: 6.7:1); chữ trên nền tối (6.7:1) */
  --c-accent-hover: #B8914A;
  --c-accent-ink: #7F611F;     /* vàng đồng đậm – CHỮ trên nền sáng (≥ 5.1:1 trên mọi nền sáng) */
  --c-accent-soft: #FAF4E6;
  --c-success: #17734F;
  --c-danger: #C0392B;
  --focus: #3B82F6;            /* màu vòng focus: ≥ 3.2:1 trên mọi nền sáng và 4.3:1 trên nền tối */
  --c-focus: var(--focus);     /* tên cũ – giữ lại cho tương thích */
  --focus-ring: 3px solid var(--focus);

  /* --- Chữ --- */
  --font-main: "Be Vietnam Pro", "Be Vietnam Pro Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 0.875rem;                                   /* 14px – chú thích, nhãn phụ */
  --fs-sm: 1rem;                                       /* 16px – chữ nội dung thẻ, FAQ, đánh giá */
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --fs-h4: clamp(1.125rem, 0.4vw + 1rem, 1.1875rem);
  --fs-h3: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  --fs-h2: clamp(1.5rem, 1.6vw + 1rem, 2.25rem);
  --fs-h1: clamp(1.75rem, 1.2vw + 1.5rem, 2.125rem);   /* mobile: 28–34px */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.65;

  /* --- Khoảng cách (thang 4/8) --- */
  --sp-1: 0.25rem;  /* 4  */
  --sp-2: 0.5rem;   /* 8  */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 5rem;
  --sp-10: 6rem;
  --section-y: clamp(2.5rem, 6vw, 6rem);               /* mobile gọn hơn, desktop giữ nguyên */

  /* --- Bố cục & vùng chạm --- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --tap: 48px;                                         /* kích thước chạm tối thiểu */
  --header-h: 56px;                                    /* mobile; ≥900 → 72px */
  --bar-h: 65px;                                       /* thanh CTA đáy (KHÔNG gồm safe-area); ≥900 → 0 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* --- Bo góc & đổ bóng (một bộ duy nhất) --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(31, 35, 40, .06), 0 1px 3px rgba(31, 35, 40, .08);
  --sh-2: 0 4px 12px rgba(31, 35, 40, .08), 0 2px 4px rgba(31, 35, 40, .04);
  --sh-3: 0 12px 32px rgba(31, 35, 40, .12), 0 4px 8px rgba(31, 35, 40, .05);
  --sh-xl: 0 24px 60px rgba(31, 35, 40, .16);
  --sh-sm: var(--sh-1); --sh-md: var(--sh-2); --sh-lg: var(--sh-3);   /* tên cũ */

  /* --- Chuyển động --- */
  --t-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 240ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 420ms cubic-bezier(.22, 1, .36, 1);
  --press: scale(.97);                                 /* phản hồi :active; = none khi giảm chuyển động */
}

@media (min-width: 900px) {
  :root {
    --header-h: 72px;
    --bar-h: 0px;
    --fs-h1: clamp(2.25rem, 3.2vw + 1rem, 3.375rem);
  }
}
/* Xoay ngang điện thoại: header thấp, tiết kiệm chiều cao (A30) */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 56px; }
}
/* ===== [/REGION:tokens] ===== */

/* ===== [REGION:base] ===== */
/* Phông dự phòng đã chỉnh số đo theo Be Vietnam Pro (đo bằng canvas trên đoạn tiếng Việt dài, chênh <1%).
   Be Vietnam Pro rộng hơn Arial ~7% (400), ~8% (500), ~4.5% (700): khi phông web tải xong và thay thế (display=swap),
   chữ không đổi số dòng nên không nhảy bố cục (CLS). Chỉ khai báo số đo, KHÔNG tải thêm file phông.
   Ascent/descent = số đo Be Vietnam Pro (1,000 / 0,265) chia size-adjust; line-gap = 0 như phông gốc. */
@font-face {
  font-family: "Be Vietnam Pro Fallback";
  font-style: normal; font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 107.2%; ascent-override: 93.3%; descent-override: 24.7%; line-gap-override: 0%;
}
@font-face {
  font-family: "Be Vietnam Pro Fallback";
  font-style: normal; font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 108.3%; ascent-override: 92.3%; descent-override: 24.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Be Vietnam Pro Fallback";
  font-style: normal; font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 104.5%; ascent-override: 95.7%; descent-override: 25.4%; line-gap-override: 0%;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4)); /* header cố định không che tiêu đề khi nhảy anchor */
  scroll-padding-bottom: calc(var(--bar-h, 0px) + var(--safe-b, 0px) + var(--sp-4)); /* thanh đáy dính không che mục đang focus/nhảy tới */
  -webkit-tap-highlight-color: rgba(31, 35, 40, .12);
}
/* Lenis (cuộn mượt) tự quản lý việc cuộn → tắt scroll-behavior gốc để không xung đột */
html.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-main);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  color: var(--c-ink);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  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); }
p, li, figcaption, blockquote { text-wrap: pretty; }

a { color: var(--c-accent-ink); text-underline-offset: 2px; }
a:active { color: var(--c-ink); }
@media (hover: hover) {
  a:hover { color: var(--c-ink); }
}

img, picture, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; background-color: var(--c-bg-soft-2); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button, [role="button"], summary, label { touch-action: manipulation; }  /* bỏ độ trễ chạm đúp-để-zoom */
ul, ol { padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }
fieldset { min-width: 0; padding: 0; border: 0; }

/* Viền focus rõ cho người dùng bàn phím – không đổi border-radius của phần tử (tránh méo nút bo tròn) */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* B03: thuộc tính [hidden] luôn thắng display của lớp CSS.
   Ngoại lệ có chủ ý: .faq__panel (đóng/mở bằng grid-template-rows 0fr, xem vùng home). */
[hidden]:not(.faq__panel) { display: none !important; }

/* Skip-link: ẩn bằng transform theo chính chiều cao của nó (không phụ thuộc cỡ chữ), A10 */
.skip-link {
  position: fixed; top: var(--sp-3); left: var(--sp-4); z-index: 2000;
  background: var(--c-ink); color: #fff; padding: var(--sp-3) var(--sp-5);
  min-height: var(--tap); display: inline-flex; align-items: center;
  border-radius: var(--r-md); text-decoration: none; font-weight: 600;
  transform: translateY(calc(-100% - var(--sp-5)));
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translateY(0); color: #fff; }
/* ===== [/REGION:base] ===== */

/* ===== [REGION:utilities] ===== */
/* --- Bố cục chung --- */
.container {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r));
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--soft { background: var(--c-bg-soft); }
.section--dark { background: var(--c-ink); color: var(--c-muted-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a:not(.btn) { color: var(--c-accent); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

.section__head { max-width: 720px; margin-bottom: var(--sp-6); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { margin-bottom: var(--sp-3); }
.section__desc { font-size: var(--fs-lg); color: var(--c-muted); }
.section--dark .section__desc { color: var(--c-muted-dark); }
@media (min-width: 900px) {
  .section__head { margin-bottom: var(--sp-7); }
}

/* --- Lưới: 1 cột (mobile) → 2 (≥600) → 3 (≥900) → 4 (≥1200). minmax(0,1fr) chống tràn ngang --- */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .grid { gap: var(--sp-5); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.text-center { text-align: center; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-6); }
@media (min-width: 900px) {
  .mt-7 { margin-top: 2.5rem; }
}

/* Khung ảnh giữ sẵn tỉ lệ để không nhảy bố cục (CLS = 0) */
.ratio { position: relative; overflow: hidden; background: var(--c-bg-soft-2); }
.ratio > img, .ratio > iframe, .ratio > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ratio--4x3 { aspect-ratio: 4 / 3; }
.ratio--3x2 { aspect-ratio: 3 / 2; }
.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--1x1 { aspect-ratio: 1 / 1; }

/* --- Ẩn trực quan, vẫn đọc được bằng trình đọc màn hình --- */
.visually-hidden, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --- Bộ icon SVG dùng chung: <svg class="icon" aria-hidden="true"><use href="#i-phone"/></svg> --- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon {
  width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.25em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Hàng cuộn ngang 1 dòng (breadcrumb, chip…) --- */
.scroll-x {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2);
  overflow-x: auto; overscroll-behavior-x: contain; white-space: nowrap;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { flex: none; }

/* --- .swipe: khối vuốt ngang có "peek" (thấy mép thẻ kế tiếp).
   Đặt BÊN TRONG .container: khối tự tràn ra mép màn hình bằng margin âm = gutter,
   thẻ đầu vẫn thẳng hàng với nội dung. Khi không có JS vẫn vuốt/cuộn được. --- */
.swipe {
  --swipe-item: 82%;
  display: flex; gap: var(--sp-3);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--sp-2) var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.swipe::-webkit-scrollbar { display: none; }
.swipe > * { flex: 0 0 var(--swipe-item); min-width: 0; scroll-snap-align: start; }
@media (min-width: 600px) {
  .swipe { --swipe-item: 46%; gap: var(--sp-4); }
  /* ≥600 thành lưới var(--cols,2) cột, hết vuốt */
  .swipe--grid-600 {
    display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none;
  }
}
@media (min-width: 900px) {
  .swipe { --swipe-item: 31%; }
  /* ≥900 thành lưới var(--cols,3) cột, hết vuốt */
  .swipe--grid-900 {
    display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none;
  }
}

/* --- .sheet: bottom sheet (mobile) / hộp thoại giữa màn hình (≥900).
   Mở = bỏ [hidden], khung hình sau thêm .is-open. Chỉ animate transform/opacity. --- */
.sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.sheet__backdrop {
  position: absolute; inset: 0; background: rgba(31, 35, 40, .55);
  opacity: 0; transition: opacity var(--t-base);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet__panel {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px;
  max-height: 90vh; max-height: 90dvh;
  background: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-xl);
  overscroll-behavior: contain;
  transform: translateY(100%); transition: transform var(--t-base);
}
.sheet.is-open .sheet__panel { transform: translateY(0); }
.sheet__grab { flex: none; width: 40px; height: 4px; margin: var(--sp-2) auto 0; border-radius: var(--r-pill); background: var(--c-line-strong); }
.sheet__head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
}
.sheet__title { font-size: var(--fs-h4); margin: 0; }
.sheet__close {
  flex: none; width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink); border-radius: var(--r-md); -webkit-tap-highlight-color: transparent;
}
.sheet__close:active { background: var(--c-bg-soft-2); transform: var(--press); }
@media (hover: hover) {
  .sheet__close:hover { background: var(--c-bg-soft); }
}
.sheet__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
}
.sheet__foot {
  flex: none; display: flex; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));
  background: #fff; border-top: 1px solid var(--c-line);
}
.sheet__foot > .btn { flex: 1 1 auto; }
@media (min-width: 900px) {
  .sheet { align-items: center; padding: var(--sp-5); }
  .sheet__panel {
    width: min(560px, 100%); max-height: min(86vh, 720px); max-height: min(86dvh, 720px);
    border-radius: var(--r-lg); opacity: 0;
    transform: translateY(16px);
    transition: transform var(--t-base), opacity var(--t-base);
  }
  .sheet.is-open .sheet__panel { opacity: 1; transform: translateY(0); }
  .sheet__grab { display: none; }
  .sheet__head { padding: var(--sp-4) var(--sp-3) var(--sp-2) var(--sp-5); }
  .sheet__body { padding-inline: var(--sp-5); }
  .sheet__foot { padding: var(--sp-3) var(--sp-5) var(--sp-4); }
}

/* --- .toast: thông báo nhỏ nổi phía trên thanh đáy (vùng #toast-region có aria-live) --- */
#toast-region, .toast-region {
  position: fixed; left: 0; right: 0; z-index: 1100;
  bottom: calc(var(--bar-h) + var(--safe-b) + var(--sp-3));
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-4); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3);
  max-width: min(100%, 440px); padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink); color: #fff; border-radius: var(--r-md); box-shadow: var(--sh-3);
  font-size: var(--fs-sm); line-height: 1.4;
  animation: toast-in var(--t-base) both;
  transition: opacity var(--t-base), transform var(--t-base);
}
.toast.is-leaving { opacity: 0; transform: translateY(8px); }   /* JS thêm .is-leaving trước khi gỡ */
.toast__action {
  flex: none; min-height: var(--tap); margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) calc(var(--sp-2) * -1) 0;
  padding: 0 var(--sp-3); color: var(--c-accent); font-weight: 700; border-radius: var(--r-sm);
}
.toast__action:active { background: rgba(255, 255, 255, .12); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- .chip: nhãn dạng viên thuốc; .chip__x = nút bỏ (vùng chạm 48px, hình nhỏ 24px) --- */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%;
  min-height: 36px; padding: var(--sp-1) var(--sp-3);
  background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; color: var(--c-ink); text-decoration: none;
}
button.chip, a.chip { min-height: var(--tap); -webkit-tap-highlight-color: transparent; }
button.chip:active, a.chip:active { transform: var(--press); background: var(--c-bg-soft-2); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.chip__x {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 24px; height: 24px; margin-right: calc(var(--sp-2) * -1);
  border-radius: 50%; color: var(--c-muted); -webkit-tap-highlight-color: transparent;
}
.chip__x::after { content: ""; position: absolute; inset: -12px; }      /* vùng chạm 48×48 */
.chip__x svg { width: 14px; height: 14px; }
.chip__x:active { background: var(--c-bg-soft-2); color: var(--c-ink); }
@media (hover: hover) {
  .chip__x:hover { background: var(--c-bg-soft-2); color: var(--c-ink); }
}

/* --- .choice: thẻ lựa chọn thay dropdown/checkbox.
   <label class="choice"><input class="choice__input" type="radio|checkbox"><span class="choice__body">…</span></label> --- */
.choice { position: relative; display: block; cursor: pointer; }
.choice__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__body {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4); background: #fff; color: var(--c-ink);
  border: 2px solid var(--c-line-strong); border-radius: var(--r-md);
  font-weight: 600; line-height: 1.3;
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.choice__body::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c-field); background: #fff center / 14px no-repeat;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.choice__input[type="checkbox"] + .choice__body::before { border-radius: 6px; }
.choice__sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted); }
.choice__input:checked + .choice__body { border-color: var(--c-ink); background: var(--c-accent-soft); }
.choice__input[type="radio"]:checked + .choice__body::before {
  border-color: var(--c-ink); background-color: #fff;
  background-image: radial-gradient(circle, var(--c-ink) 0 45%, transparent 50%);
}
.choice__input[type="checkbox"]:checked + .choice__body::before {
  border-color: var(--c-ink); background-color: var(--c-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.choice__input:focus-visible + .choice__body { outline: var(--focus-ring); outline-offset: 2px; }
.choice__input:active + .choice__body { transform: var(--press); }
.choice__input:disabled + .choice__body { opacity: .5; cursor: not-allowed; }
@media (hover: hover) {
  .choice:hover .choice__body { border-color: var(--c-ink); }
}
.choice-group { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
/* ===== [/REGION:utilities] ===== */

/* ===== [REGION:components] ===== */
/* --- Nút: chữ được xuống dòng (A02), cao ≥48px, một kiểu bo góc --r-md; pill chỉ dành cho badge/chip --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); max-width: 100%; min-width: 0;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.25;
  border-radius: var(--r-md); border: 2px solid transparent;
  text-decoration: none; text-align: center; text-wrap: balance;
  white-space: normal; overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: var(--press); }                 /* phản hồi khi chạm */
.btn svg { width: 1.25em; height: 1.25em; flex: none; }

.btn--primary { background: var(--c-accent); color: var(--c-ink); box-shadow: var(--sh-1); }
.btn--primary:active { background: var(--c-accent-hover); color: var(--c-ink); }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:active { background: var(--c-ink-2); color: #fff; }
.btn--outline { border-color: var(--c-line-strong); color: var(--c-ink); background: #fff; }
.btn--outline:active { border-color: var(--c-ink); color: var(--c-ink); background: var(--c-bg-soft-2); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .1); }
.btn--ghost-light:active { background: #fff; color: var(--c-ink); border-color: #fff; }
.btn--lg { min-height: 56px; padding: var(--sp-3) var(--sp-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--c-accent-hover); color: var(--c-ink); box-shadow: var(--sh-2); }
  .btn--dark:hover { background: var(--c-ink-2); color: #fff; }
  .btn--outline:hover { border-color: var(--c-ink); color: var(--c-ink); }
  .btn--ghost-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
}
.btn.is-loading { opacity: .72; cursor: progress; }

.badge {
  display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600; line-height: 1.4; background: var(--c-bg-soft-2); color: var(--c-body);
}
.badge--accent { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.badge--dark { background: var(--c-ink); color: #fff; }

.eyebrow {
  display: inline-block; font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-ink);
  margin-bottom: var(--sp-3);
}
.section--dark .eyebrow, .cta-band .eyebrow, .page-hero .eyebrow { color: var(--c-accent); }   /* AX02 */

/* --- Thẻ lý do / tính năng --- */
.feature {
  padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-lg); min-width: 0; overflow-wrap: anywhere;     /* email dài không làm tràn (AX03) */
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.feature__icon {
  width: var(--tap); height: var(--tap); display: grid; place-items: center; margin-bottom: var(--sp-4);
  border-radius: var(--r-md); background: var(--c-accent-soft); color: var(--c-accent-ink);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature__title { margin-bottom: var(--sp-2); }
.feature__title a { display: inline-flex; align-items: center; min-height: var(--tap); }   /* link trong tiêu đề thẻ: vùng chạm ≥48px */
.feature__text { font-size: var(--fs-sm); color: var(--c-muted); }
/* Số điện thoại / email trong thẻ liên hệ: dễ thấy, dễ bấm (≥48px) */
.feature__text a[href^="tel:"], .feature__text a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; color: var(--c-ink); overflow-wrap: anywhere; }
.feature__text a[href^="tel:"] { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 600px) {
  .feature { padding: var(--sp-5); }
}
@media (hover: hover) and (pointer: fine) {
  .feature:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
}

/* --- Trạng thái rỗng có thiết kế --- */
.empty-state {
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--c-muted);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg);
}
@media (min-width: 900px) {
  .empty-state { padding: var(--sp-7) var(--sp-4); }
}
/* ===== [/REGION:components] ===== */

/* ===== [REGION:chrome] ===== */
/* --- Header: nền đặc, KHÔNG backdrop-filter/transform trên .header (sẽ nhốt .nav position:fixed) --- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.header--scrolled { box-shadow: var(--sh-2); }
/* Mobile: header trượt ra khi cuộn xuống, hiện lại khi cuộn lên (JS thêm html.is-header-hidden; chỉ transform).
   Chỉ có transform khi ĐÃ ẩn và menu đang đóng → không nhốt .nav position:fixed (xem html.is-nav-open bên dưới). */
@media (max-width: 899.98px) {
  html.is-header-hidden .header { transform: translateY(-100%); box-shadow: none; }
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: var(--header-h); min-width: 0;
}
/* Logo co lại được và cắt bằng dấu … khi cỡ chữ 200% (A03/D06) – chữ vẫn nguyên trong HTML */
.header__logo { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; flex: 0 1 auto; min-width: 0; min-height: var(--tap); }
.header__logo svg { width: 32px; height: 32px; flex: none; }
.header__logo-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; }
.header__logo-name {
  font-weight: 700; font-size: 1.0625rem; color: var(--c-ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header__logo-tag {
  font-size: .75rem; color: var(--c-muted); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Màn hẹp (320): logo giữ 1 dòng để header luôn cao đúng --header-h (nếu xuống dòng, header cao 68px đè lên nội dung) */
@media (max-width: 359.98px) {
  .header__inner { gap: var(--sp-1); }
  .header__actions { gap: 0; }                      /* mỗi nút đã 48px → vẫn đủ chạm, nhường chỗ cho logo */
  .header__logo svg { width: 28px; height: 28px; }
  .header__logo-name { font-size: 1rem; }
  .header__logo-tag { letter-spacing: .02em; }
}
/* Cực hẹp (zoom 300–500%, <300px): 3 nút 48px đã chiếm gần hết hàng → chỉ giữ biểu tượng logo (tên vẫn đọc được bởi trình đọc màn hình, không dùng display:none);
   header luôn 1 hàng cao đúng --header-h thay vì chữ bị bẻ từng ký tự làm header cao ~270px */
@media (max-width: 299.98px) {
  .header__logo-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* <240px: bỏ luôn nút gọi trên header; hotline vẫn có trong menu và thanh đáy */
@media (max-width: 239.98px) {
  .header__phone { display: none; }
}

.header__actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.header__actions .btn { display: none; }
.header__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: var(--tap); min-height: var(--tap); font-weight: 700;
  color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap;
  font-variant-numeric: tabular-nums; border-radius: var(--r-md);
  -webkit-tap-highlight-color: transparent;
}
.header__phone svg { width: 22px; height: 22px; flex: none; }
.header__phone:active { background: var(--c-bg-soft-2); color: var(--c-ink); }
/* Giữ tên truy cập của link điện thoại: ẩn trực quan chứ không display:none (A03) */
.header__phone span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (hover: hover) {
  .header__phone:hover { color: var(--c-accent-ink); }
}

/* --- Nút hamburger – chỉ hiện khi có JS và dưới 900px --- */
.nav-toggle {
  display: none; width: var(--tap); height: var(--tap); border-radius: var(--r-md);
  align-items: center; justify-content: center; flex: none; -webkit-tap-highlight-color: transparent;
}
.js:not(.js-fail) .nav-toggle { display: flex; position: relative; z-index: 896; touch-action: manipulation; }   /* z 896 > .nav 895: luôn bấm được nút đóng */
.nav-toggle:active { background: var(--c-bg-soft-2); }
.nav-toggle__bars { position: relative; width: 22px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: background-color var(--t-fast); }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 2px; background: var(--c-ink); border-radius: 2px;
  transition: transform var(--t-base);                     /* chỉ animate transform */
}
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 890; background: rgba(31, 35, 40, .5);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
/* Khoá cuộn nền (đếm tham chiếu trong KT.lock; thêm lớp lên <html>) */
html.is-locked { overflow: hidden; scrollbar-gutter: stable; }
/* Menu mở (mobile): header trong suốt + xuyên chuột để lớp phủ làm tối toàn màn; chỉ còn nút X trên panel */
@media (max-width: 899.98px) {
  html.is-nav-open .header {
    background: transparent; border-bottom-color: transparent; box-shadow: none;
    transform: none; transition: none; pointer-events: none;
  }
  html.is-nav-open .header .nav, html.is-nav-open .header .nav-toggle { pointer-events: auto; }
  html.is-nav-open .header__logo, html.is-nav-open .header__phone, html.is-nav-open .header .quote-btn { visibility: hidden; }
}

/* --- Menu: mobile = ngăn kéo trượt từ phải; ≥900 = hàng ngang trong header --- */
.nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 895;
  width: min(340px, 88vw);
  padding: calc(var(--header-h) + var(--sp-4)) var(--sp-5) calc(var(--sp-6) + var(--safe-b));
  background: #fff; box-shadow: var(--sh-xl);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--t-base), visibility 0s linear var(--t-base);
  overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y;                                  /* vuốt ngang để đóng không bị trình duyệt giành cử chỉ */
}
.nav.is-open { transform: translateX(0); visibility: visible; transition: transform var(--t-base), visibility 0s; }
.nav__list { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: flex; align-items: center; min-height: 52px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 600; color: var(--c-body); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__link:active { background: var(--c-bg-soft-2); color: var(--c-ink); }
.nav__link[aria-current="page"] { color: var(--c-ink); font-weight: 700; background: var(--c-bg-soft); }
/* Khối nút trong menu mobile (gọi / báo giá) */
.nav__cta { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
@media (hover: hover) {
  .nav__link:hover { color: var(--c-ink); background: var(--c-bg-soft); }
}

/* Điện thoại xoay ngang (thấp): ngăn kéo 2 cột – link bên trái, nút liên hệ bên phải, không phải cuộn */
@media (max-width: 899.98px) and (max-height: 500px) {
  .nav {
    width: min(560px, 92vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-5); align-content: start;
    padding-top: calc(var(--header-h) + var(--sp-2)); padding-bottom: var(--sp-4);
  }
  .nav__link { min-height: 44px; padding-block: var(--sp-2); }
  .nav__cta { margin-top: 0; padding-top: 0; border-top: 0; align-content: start; }
}

@media (min-width: 600px) {
  .header__inner { gap: var(--sp-4); }
  .header__logo svg { width: 34px; height: 34px; }
}
@media (min-width: 900px) {
  .js:not(.js-fail) .nav-toggle { display: none; }
  .nav-overlay { display: none; }
  .nav {
    position: static; width: auto; padding: 0; background: none; box-shadow: none;
    transform: none; visibility: visible; overflow: visible; transition: none; touch-action: auto;
  }
  .nav__list { flex-direction: row; align-items: center; gap: .125rem; }
  .nav__link { position: relative; min-height: 44px; padding: var(--sp-2) var(--sp-2); font-size: .9375rem; background: none; }
  .nav__link[aria-current="page"] { background: none; }
  /* Gạch chân trang hiện tại vẽ tuyệt đối → chữ không bị đẩy lên so với các link khác */
  .nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: 4px; height: 2px; border-radius: 2px; background: var(--c-accent);
  }
  .nav__cta { display: none; }
  .header__logo svg { width: 36px; height: 36px; }
}
@media (min-width: 900px) and (hover: hover) {
  .nav__link:hover { background: var(--c-bg-soft); }
}
@media (min-width: 1024px) {
  .header__actions .btn { display: inline-flex; min-height: 44px; padding: var(--sp-2) var(--sp-3); }   /* giữ nút Nhận báo giá trên header ở laptop nhỏ */
}
@media (min-width: 1200px) {
  .header__actions { gap: var(--sp-3); }
  .header__actions .btn { padding: var(--sp-2) var(--sp-4); }
  .header__phone span {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none;
  }
  .nav__link { padding-inline: var(--sp-3); }
}

.page { padding-top: var(--header-h); }  /* chừa chỗ cho header cố định */
/* Không có JS: không có nút hamburger → hiện hàng link ngay dưới logo, header không cố định */
@media (max-width: 899.98px) {
  html:not(.js) .header, html.js-fail .header { position: relative; }
  html:not(.js) .header__inner, html.js-fail .header__inner { flex-wrap: wrap; row-gap: 0; }
  html:not(.js) .nav, html.js-fail .nav {
    position: static; order: 3; flex: 1 0 100%; width: auto; padding: 0 0 var(--sp-2); background: none; box-shadow: none;
    transform: none; visibility: visible; overflow: visible; transition: none;
  }
  html:not(.js) .nav__list, html.js-fail .nav__list { flex-direction: row; flex-wrap: wrap; gap: 0 var(--sp-1); }
  html:not(.js) .nav__link, html.js-fail .nav__link { min-height: 44px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
  html:not(.js) .nav__cta, html.js-fail .nav__cta { display: none; }
  html:not(.js) .nav-overlay, html.js-fail .nav-overlay { display: none; }
  /* Header nằm trong luồng → không cần chừa chỗ cứng (trước đây 96px dễ hụt/thừa khi menu xuống dòng) */
  html:not(.js) .page, html.js-fail .page { padding-top: 0; }
}

/* --- Breadcrumb: 1 dòng cuộn ngang trên mobile, xuống dòng từ ≥900 --- */
.breadcrumb { padding-block: var(--sp-1); font-size: var(--fs-sm); background: var(--c-bg-soft); }
.breadcrumb__list {
  display: flex; flex-wrap: nowrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none; overscroll-behavior-x: contain;
  padding-right: var(--sp-6); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.breadcrumb__list::-webkit-scrollbar { display: none; }
.breadcrumb__item { flex: none; display: flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); }
.breadcrumb__item:not(:last-child)::after { content: "›"; color: var(--c-muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-muted); text-decoration: none; }
.breadcrumb a:active { color: var(--c-ink); text-decoration: underline; }
@media (hover: hover) {
  .breadcrumb a:hover { color: var(--c-accent-ink); text-decoration: underline; }
}
@media (min-width: 900px) {
  .breadcrumb { padding-block: var(--sp-4); }
  .breadcrumb__list { flex-wrap: wrap; overflow: visible; white-space: normal; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
  .breadcrumb a { min-height: 0; }
}

/* --- Footer: chừa chỗ cho thanh CTA đáy + safe-area --- */
.footer {
  background: var(--c-ink); color: var(--c-muted-dark); font-size: var(--fs-sm);
  padding-top: var(--section-y); padding-bottom: calc(var(--bar-h) + var(--safe-b));
  overflow-wrap: anywhere;
}
.footer a { color: var(--c-muted-dark); text-decoration: none; }
.footer a:active { color: #fff; text-decoration: underline; }
@media (hover: hover) {
  .footer a:hover { color: #fff; text-decoration: underline; }
}
.footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sp-6); }
.footer__title { color: #fff; font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.footer__list a { display: flex; align-items: center; min-height: 44px; }
.footer__contact li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.footer__contact svg { width: 18px; height: 18px; color: var(--c-accent); flex: none; margin-top: 4px; }
@media (max-width: 899.98px) {
  .footer__contact li:has(a) { align-items: center; }
  .footer__contact li:has(a) svg { margin-top: 0; }
  .footer__contact a, .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}
.footer__contact a { font-weight: 600; color: #fff; }
.footer__logo { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); text-decoration: none; min-height: var(--tap); }
.footer__logo svg { width: 34px; height: 34px; }
.footer__logo, .header__logo { touch-action: manipulation; }
.footer__logo-name { font-weight: 700; font-size: 1.0625rem; color: #fff; }
.footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.footer__social a { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; background: var(--c-ink-2); color: #fff; }
.footer__social a:active { background: var(--c-accent); color: var(--c-ink); }
.footer__social svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .footer__social a:hover { background: var(--c-accent); color: var(--c-ink); text-decoration: none; }
}
.footer__map { border-radius: var(--r-md); overflow: hidden; background: var(--c-ink-2); }
.footer__bottom {
  padding-block: var(--sp-4); border-top: 1px solid var(--c-line-dark);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: var(--fs-xs);
}
@media (min-width: 600px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .footer__grid { padding-bottom: var(--sp-7); }
  .footer__list { gap: var(--sp-3); }
  .footer__list a { display: inline; min-height: 0; }
  .footer__title { margin-bottom: var(--sp-4); }
}
@media (min-width: 1200px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Bản đồ tải theo yêu cầu (lazy) – bấm hoặc cuộn tới mới tải iframe */
.map-embed { position: relative; background: var(--c-bg-soft-2); }
.map-embed__placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: var(--sp-2);
  background: var(--c-ink-2); color: #fff; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.map-embed__placeholder:active { background: var(--c-ink); }
.map-embed__placeholder svg { width: 32px; height: 32px; color: var(--c-accent); }
.map-embed iframe { border: 0; }

/* --- Cụm nút liên hệ nổi + nút lên đầu trang --- */
.floating {
  position: fixed; right: max(var(--sp-3), var(--safe-r)); bottom: calc(var(--bar-h) + var(--safe-b) + var(--sp-3));
  z-index: 850; display: grid; gap: var(--sp-2);
}
.floating__btn {
  width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%;
  color: #fff; box-shadow: var(--sh-3); -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast);
}
.floating__btn:active { transform: scale(.92); color: #fff; }
.floating__btn svg { width: 24px; height: 24px; }
.floating__btn--zalo { background: #0068FF; }
.floating__btn--phone { background: var(--c-success); }
.floating__btn--mess { background: #0084FF; display: none; }   /* Messenger ẩn bằng CSS (markup giữ nguyên); Zalo + Gọi là kênh chính */
.floating__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.to-top {
  width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%;
  background: var(--c-ink); color: #fff; box-shadow: 0 0 0 2px #fff, var(--sh-3); -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:active { background: var(--c-ink-2); transform: var(--press); }
.to-top svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .floating__btn:hover { transform: scale(1.08); color: #fff; }
  .to-top:hover { background: var(--c-ink-2); }
}
/* Khi đang nhập form (mobile/tablet): ẩn cụm nút nổi để không che ô nhập */
@media (max-width: 899.98px) {
  /* Gọi + Zalo đã nằm trên thanh đáy → bỏ nút nổi trùng lặp; trang có thanh riêng (data-bar="detail") giữ Zalo nổi */
  .floating__btn--phone, .floating__btn--zalo { display: none; }
  body[data-bar="detail"] .floating__btn--zalo { display: grid; }
  .floating { right: max(var(--sp-2), var(--safe-r)); transition: opacity var(--t-fast), transform var(--t-base), visibility var(--t-fast); }
  .floating__btn, .to-top { width: var(--tap); height: var(--tap); }
  /* Thanh đáy đã trượt xuống (cuộn xuống): nút nổi hạ theo, khỏi lơ lửng trên khoảng trống */
  html.is-bar-hidden .floating { transform: translateY(var(--bar-h)); }
  /* Đang nhập form / form đang trong màn hình: nhường chỗ cho ô nhập (không che mép phải) */
  html.is-typing .floating, html.is-form-view .floating,
  body:has(.form :is(input, select, textarea):focus) .floating { opacity: 0; visibility: hidden; transform: translateX(120%); pointer-events: none; }
}
@media (min-width: 900px) {
  .floating { right: max(var(--sp-4), var(--safe-r)); bottom: max(var(--sp-4), var(--safe-b)); }
  .floating__btn { width: 52px; height: 52px; }
  .floating__btn svg { width: 26px; height: 26px; }
  /* Desktop: Zalo là viên thuốc có chữ để nhận ra ngay */
  .floating__btn--zalo svg { width: 24px; height: 24px; }
}
/* Viên thuốc có chữ chỉ từ 1280: laptop nhỏ/tablet ngang dùng nút tròn để cụm nổi không che nội dung */
@media (min-width: 1280px) {
  .floating__btn--zalo { width: auto; padding-inline: var(--sp-4); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-sm); }
  .floating__btn--zalo .floating__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
}
/* Màn ngang thấp (điện thoại xoay ngang ≥900): số điện thoại đã có trên header → chỉ giữ Zalo + lên đầu trang */
@media (min-width: 900px) and (max-height: 500px) {
  .floating__btn--phone { display: none; }
  .floating__btn { width: var(--tap); height: var(--tap); }
}

/* --- Thanh CTA dính đáy (mobile/tablet; ẩn từ ≥900 – lúc đó --bar-h = 0) --- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 860;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);     /* 3 nút chung một hàng; chữ phóng to thì tự xuống hàng thay vì bị cắt */
  padding: var(--sp-2) max(var(--sp-2), var(--safe-r)) calc(var(--sp-2) + var(--safe-b)) max(var(--sp-2), var(--safe-l));
  transition: transform var(--t-base), visibility var(--t-base);
  background: rgba(255, 255, 255, .98); border-top: 1px solid var(--c-line); box-shadow: 0 -4px 16px rgba(31, 35, 40, .08);
}
.mobile-bar .btn { flex: 1 1 0; min-width: max-content; min-height: var(--tap); padding: var(--sp-2) var(--sp-2); font-size: var(--fs-sm); gap: var(--sp-1); touch-action: manipulation; }
.mobile-bar .btn .icon { width: 1.125em; height: 1.125em; }
.mobile-bar .btn--primary { font-weight: 700; flex-grow: 1.35; }
.mobile-bar .btn span { white-space: nowrap; }
@media (max-width: 379.98px) {
  .mobile-bar .btn--outline .icon { display: none; }
  .mobile-bar .btn { padding-inline: var(--sp-1); }       /* giữ chữ 16px (không co nhỏ hơn) */
}
@media (max-width: 359.98px) {
  .mobile-bar .btn { padding-inline: var(--sp-1); }
  .mobile-bar .btn .icon { display: none; }
}
/* Trang có thanh đáy riêng (chi tiết mẫu): ẩn thanh dùng chung; thanh riêng cần data-bottom-bar để đo --bar-h */
body[data-bar="detail"] .mobile-bar--shared { display: none; }
/* Bàn phím ảo đang mở: thanh đáy trượt xuống, khỏi che ô nhập */
@media (max-width: 899.98px) {
  html.is-bar-hidden .mobile-bar { transform: translateY(100%); visibility: hidden; }
}
/* Điện thoại xoay ngang: thanh đáy gọn lại (nút vẫn ≥44px) để chừa chỗ nội dung */
@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-bar { padding-block: var(--sp-1) calc(var(--sp-1) + var(--safe-b)); }
  .mobile-bar .btn { min-height: 44px; }
}
/* KT.bump(el): phần tử nảy nhẹ trong 400ms, ví dụ số trên nút danh sách báo giá (chỉ transform) */
.is-bump { animation: kt-bump 400ms var(--t-slow) both; }
@keyframes kt-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (min-width: 900px) {
  .mobile-bar { display: none; }
}
/* --- Hàng nút CTA (404, bài viết): có khoảng cách, mobile xếp dọc đầy hàng --- */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row .btn { flex: 1 1 100%; }
@media (min-width: 640px) {
  .btn-row .btn { flex: 0 1 auto; }
}
/* 404: thẻ gợi ý bấm được cả khối (mở rộng vùng chạm của link tiêu đề) */
.feature:has(.feature__title a) { position: relative; }
.feature__title a::after { content: ""; position: absolute; inset: 0; }
/* ===== [/REGION:chrome] ===== */

/* ===== [REGION:home] ===== */
/* --- Hero --- */
.hero { position: relative; display: flex; align-items: center; isolation: isolate; overflow: hidden; }
.hero { background: var(--c-ink); }                           /* nền dự phòng khi ảnh chưa về: chữ trắng vẫn đọc được */
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: block; width: 100%; height: 100%; }   /* A05/C02: <picture> phải phủ kín khung hero */
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero::after {                                              /* mobile: phủ đều toàn vùng chữ (≥.78) để chữ trắng & chữ vàng đạt AA trên ảnh sáng */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 23, 26, .68) 0%, rgba(20, 23, 26, .74) 55%, rgba(20, 23, 26, .86) 100%);
}
.hero__inner { padding-block: var(--sp-7) var(--sp-6); color: #fff; }   /* khung = đúng .container, thẳng hàng với logo; chỉ chữ bị giới hạn bề rộng */
.hero__title, .hero__desc { max-width: 680px; }
.hero__title { color: #fff; margin-bottom: var(--sp-4); text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--c-accent); }
.hero__desc { font-size: var(--fs-lg); color: rgba(255, 255, 255, .92); margin-bottom: var(--sp-5); }
.hero .eyebrow {                                            /* A06: nền tối đặc phía sau dòng vàng → tương phản ≈7:1 trên mọi vùng ảnh */
  color: var(--c-accent); background: rgba(20, 23, 26, .9);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md);
  font-size: .875rem; letter-spacing: .06em; line-height: 1.45;
}
.hero__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.hero__actions .btn { width: 100%; }
.hero__call { font-weight: 600; }
.hero__call b { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }   /* SĐT nổi bật */
.hero__more {                                               /* CTA thứ ba: liên kết gạch chân, vẫn cao ≥48px */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: var(--tap); padding-inline: var(--sp-3); color: #fff; font-weight: 600; font-size: var(--fs-md);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
}
.hero__more:active { color: var(--c-accent); }
@media (hover: hover) { .hero__more:hover { color: var(--c-accent); } }
.hero__usp { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); padding: 0; list-style: none; }
.hero__usp li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: rgba(255, 255, 255, .92); }
.hero__usp svg { width: 20px; height: 20px; color: var(--c-accent); flex: none; }
@media (min-width: 600px) {
  .hero__inner { padding-block: var(--sp-8) var(--sp-7); }
  .hero__actions { flex-direction: row; flex-wrap: wrap; column-gap: var(--sp-2); }
  .hero__actions .btn { width: auto; }
  .hero__usp { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
}
/* CLS (tablet): ở ~600–819px liên kết "Xem mẫu" vừa/không vừa hàng nút tuỳ phông (dự phòng hẹp hơn Be Vietnam Pro) → khi phông web về, nó rớt xuống dòng
   và đẩy cả trang xuống ~60px (CLS 0,30). Ép nó luôn nằm hàng riêng trong dải này để chiều cao hero không phụ thuộc phông. */
@media (min-width: 600px) and (max-width: 819.98px) {
  .hero__more { flex: 0 0 100%; justify-content: flex-start; }
}
@media (min-width: 900px) {
  .hero { min-height: min(86vh, 760px); min-height: min(86svh, 760px); }
  .hero::after { background: linear-gradient(90deg, rgba(20, 23, 26, .88) 0%, rgba(20, 23, 26, .72) 45%, rgba(20, 23, 26, .35) 100%); }
  .hero__inner { padding-block: clamp(3.5rem, 9vw, 6rem); }
  .hero__usp { margin-top: var(--sp-7); }
}
/* Xoay ngang điện thoại: gọn lại để 2 nút CTA lọt vào màn đầu (A30) */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: var(--sp-3); }
  .hero__title, .hero__desc { max-width: 760px; }
  .hero .eyebrow { margin-bottom: var(--sp-2); }
  .hero__title { font-size: 1.75rem; margin-bottom: var(--sp-2); }
  .hero__desc { font-size: 1rem; margin-bottom: var(--sp-3); }
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .hero__actions .btn { width: auto; min-height: var(--tap); padding-block: var(--sp-2); }
  .hero__usp { margin-top: var(--sp-3); gap: var(--sp-2) var(--sp-5); }
}

/* --- Khối thẻ trang chủ: mobile = vuốt ngang có "peek" (thẻ kế lộ ~17%), ≥600 = lưới 2 cột, ≥900 = 3, ≥1200 = 4 (mẫu) --- */
.swipe--why, .swipe--models { --swipe-item: 80%; --cols: 2; }
.swipe--why > *, .swipe--models > * { scroll-snap-stop: normal; }
@media (min-width: 600px) {
  .swipe--why, .swipe--models { gap: var(--sp-5); }
}
@media (min-width: 900px) {
  .swipe--why, .swipe--models { --cols: 3; }
}
@media (min-width: 1200px) {
  .swipe--models { --cols: 4; }
}

/* --- Dải số liệu: con số đậm, tabular-nums --- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.stat { text-align: center; padding: var(--sp-4) var(--sp-2); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); min-width: 0; }
.section--dark .stat { background: var(--c-ink-2); border-color: var(--c-line-dark); }
.stat__num {
  display: block; font-size: clamp(1.875rem, 3vw, 2.75rem); font-weight: 800; color: var(--c-ink);
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.section--dark .stat__num { color: var(--c-accent); }
.stat__label { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.section--dark .stat__label { color: var(--c-muted-dark); }
@media (min-width: 600px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--sp-4); }
  .stat { padding: var(--sp-5) var(--sp-3); }
}

/* --- Quy trình thi công: mobile = danh sách dọc (số bên trái); ≥900 = hàng ngang có đường nối --- */
.process { position: relative; display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.process__line { display: none; }
.step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; text-align: left; }
.step__num {
  grid-row: 1 / span 3; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: #fff; border: 2px solid var(--c-line-strong);
  font-weight: 700; font-size: var(--fs-md); color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.step > :not(.step__num) { grid-column: 2; }
.step--active .step__num { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-ink); }
.step__title { margin-bottom: var(--sp-2); font-size: var(--fs-h4); }
.step__text { font-size: var(--fs-sm); color: var(--c-muted); }
@media (min-width: 600px) {
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
}
@media (min-width: 900px) {
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
  .step { display: block; text-align: center; }
  .step__num { width: 56px; height: 56px; margin: 0 auto var(--sp-4); border-color: var(--c-line); }
  .step--active .step__num { border-color: var(--c-accent); }
}
@media (min-width: 1200px) {
  .process { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-5); }
  .process__line { display: block; position: absolute; top: 28px; left: 4%; right: 4%; height: 2px; background: var(--c-line); overflow: hidden; }
  .process__line-fill { display: block; height: 100%; width: 100%; background: var(--c-accent); transform-origin: left center; }
  .step { display: block; text-align: center; }
  .step__num { width: 56px; height: 56px; margin: 0 auto var(--sp-4); border-color: var(--c-line); }
  .step--active .step__num { border-color: var(--c-accent); }
}

/* --- Thẻ công trình (ảnh + lớp phủ chữ; cả thẻ là nút mở lightbox) --- */
.project-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--c-ink); }
.project-card img { transition: transform var(--t-slow); }
.project-card__overlay {
  position: absolute; inset: auto 0 0 0; padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(20, 23, 26, .92) 0%, rgba(20, 23, 26, .72) 55%, rgba(20, 23, 26, 0) 100%);   /* chữ trắng luôn đọc được kể cả trên ảnh sáng */
  color: #fff; pointer-events: none;
}
.project-card__title { display: block; color: #fff; font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; margin-bottom: var(--sp-1); }
.project-card__meta { display: block; font-size: var(--fs-xs); color: rgba(255, 255, 255, .92); }
.project-card__btn {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  background: none; border: 0; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.project-card__btn:focus-visible { outline-offset: -4px; }            /* thẻ overflow:hidden → vòng focus phải nằm trong */
.project-card__btn:active { background: rgba(255, 255, 255, .08); }
@media (hover: hover) {
  .project-card:hover img { transform: scale(1.05); }                  /* chỉ animate transform */
}

/* --- Đánh giá khách hàng --- */
.review { height: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); min-width: 0; }
.review__stars { display: flex; gap: 2px; color: var(--c-accent-ink); }
.review__stars svg { width: 18px; height: 18px; }
.review__text { font-size: var(--fs-sm); color: var(--c-body); flex: 1; }
.review__author { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.review__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent-ink); font-weight: 700; flex: none; }
.review__name { font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm); }
.review__place { font-size: var(--fs-xs); color: var(--c-muted); }
@media (min-width: 600px) {
  .review { padding: var(--sp-5); }
}

/* --- Swiper: chỉ chỉnh màu, khoảng cách & vùng chạm; giữ nguyên hành vi thư viện --- */
.swiper[data-swiper] {
  --swiper-theme-color: var(--c-ink); --swiper-navigation-size: 20px;
  --swiper-pagination-bullet-size: 12px; --swiper-pagination-bullet-horizontal-gap: 14px;   /* bước chấm 40px */
  --swiper-pagination-bullet-inactive-color: var(--c-field); --swiper-pagination-bullet-inactive-opacity: 1;
  padding-bottom: 3.5rem;
}
.swiper > .swiper-pagination.swiper-pagination-horizontal { bottom: 1rem; }   /* chấm nằm giữa vùng chạm cao 48px, không bị overflow cắt */
.swiper .swiper-slide { height: auto; display: flex; }                /* thẻ đánh giá cao bằng nhau (cần độ đặc hiệu cao hơn swiper-bundle.css nạp sau: display:block) */
.swiper .swiper-slide > .review { width: 100%; }
.swiper-pagination-bullet { position: relative; }
.swiper-pagination-bullet::before { content: ""; position: absolute; inset: -18px -14px; }   /* D20: vùng chạm 40×48px quanh chấm 12px (không chồng nhau) */
.swiper-pagination-bullet-active { background: var(--c-accent-ink); }
.swiper .swiper-button-prev, .swiper .swiper-button-next {
display:none;width:var(--tap);height:var(--tap);border-radius:50%;
background:#fff;border:1px solid var(--c-line-strong);box-shadow:var(--sh-1);
color:var(--c-ink);top:auto;bottom:0;margin:0;
}
.swiper .swiper-button-prev{left:calc(50% - 112px)}
.swiper .swiper-button-next{right:calc(50% - 112px)}
/* Chưa có JS/Swiper: các slide vẫn xếp lưới, đọc được đầy đủ */
.swiper:not(.swiper-initialized) .swiper-wrapper { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.swiper:not(.swiper-initialized) .swiper-button-prev,
.swiper:not(.swiper-initialized) .swiper-button-next,
.swiper:not(.swiper-initialized) .swiper-pagination { display: none; }
@media (min-width: 600px) {
  .swiper:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--sp-5); }
}
/* Có JS nhưng Swiper chưa nạp (nạp trễ khi sắp tới màn hình) hoặc bị bỏ (cảm ứng + máy yếu): hàng vuốt ngang
   có "peek", cùng độ rộng thẻ & chiều cao với Swiper → không nhảy bố cục khi Swiper khởi tạo. Không JS: giữ lưới ở trên. */
.js .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.js .swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar { display: none; }
.js .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 calc((100% - 1.92px) / 1.12); scroll-snap-align: start; }
@media (min-width: 600px) {
  .js .swiper:not(.swiper-initialized) .swiper-wrapper { gap: 24px; }
  .js .swiper:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 24px) / 2); }
}
@media (min-width: 1024px) {
  .js .swiper:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 48px) / 3); }
}
@media (min-width: 900px) {
  .swiper .swiper-button-prev, .swiper .swiper-button-next { display: flex; }
  .swiper:not(.swiper-initialized) .swiper-button-prev,
  .swiper:not(.swiper-initialized) .swiper-button-next { display: none; }
}
@media (hover: hover) {
  .swiper .swiper-button-prev:hover, .swiper .swiper-button-next:hover { border-color: var(--c-ink); }
}

/* --- FAQ accordion (grid-template-rows 0fr/1fr: mở/đóng mượt, không nhảy layout) --- */
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  width: 100%; min-height: 56px; padding: var(--sp-4) 0; text-align: left;
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); -webkit-tap-highlight-color: transparent;
}
.faq__q:active { color: var(--c-accent-ink); }
.faq__icon { position: relative; width: 20px; height: 20px; flex: none; margin-top: 3px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 9px; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform var(--t-base);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-base); }
.faq__panel[hidden] { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--t-base), visibility 0s linear var(--t-base); }   /* ẩn khỏi trình đọc màn hình & Tab khi đóng */
.faq__panel-inner { overflow: hidden; }
.faq__panel-inner > p { padding-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); }
@media (hover: hover) {
  .faq__q:hover { color: var(--c-accent-ink); }
}

/* --- Khối CTA cuối trang --- */
.cta-band { background: var(--c-ink); color: var(--c-muted-dark); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4); }
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band .form--card { color: var(--c-body); }
.cta-band .form--card :is(h2, h3, h4) { color: var(--c-ink); }       /* AX04/D05: tiêu đề form trong thẻ trắng */
.cta-band a:not(.btn) { color: var(--c-accent); }
.cta-band__grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 600px) {
  .cta-band { padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--r-xl); }
}
@media (min-width: 900px) {
  .cta-band__grid { gap: var(--sp-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cta-inline {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4); text-align: center;
  padding: var(--sp-4); margin-block: var(--sp-5);
  background: var(--c-accent-soft); border: 1px solid #EBDDBB; border-radius: var(--r-lg);
}
.cta-inline .btn { width: 100%; }
.cta-inline__text { font-weight: 600; color: var(--c-ink); }
.cta-inline__text span { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--c-muted); }
@media (min-width: 600px) {
  .cta-inline { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; padding: var(--sp-5); margin-block: var(--sp-6); }
  .cta-inline .btn { width: auto; }
}

/* --- Slider so sánh trước/sau (vanilla JS) --- */
.compare { position: relative; overflow: hidden; border-radius: var(--r-lg); user-select: none; touch-action: pan-y; }
/* clip-path thay cho width: chỉ vẽ lại, không tính lại bố cục → mượt, không ảnh hưởng CLS */
.compare__after { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.compare__after img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.compare__label {
  position: absolute; bottom: var(--sp-3); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: rgba(16, 18, 20, .78); color: #fff; font-size: .8125rem; font-weight: 600; z-index: 3;
}
.compare__label--before { right: var(--sp-3); }
.compare__label--after { left: var(--sp-3); }
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4;
  margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: none;
  touch-action: pan-y;                                        /* kéo ngang = so sánh; vuốt dọc vẫn cuộn trang */
}
.compare__range::-webkit-slider-thumb { appearance: none; width: var(--tap); height: 100%; }
.compare__range::-moz-range-thumb { width: var(--tap); height: 100%; border: 0; }
/* A31: căn giữa đường kéo bằng transform thay vì margin âm (JS chỉ đặt style.left) */
.compare__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: #fff; z-index: 3; pointer-events: none; }
.compare__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: var(--tap); height: var(--tap);
  transform: translate(-50%, -50%); border-radius: 50%; background-color: #fff; box-shadow: var(--sh-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2328' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 24px;
}
.compare__range:focus-visible + .compare__handle::after { outline: var(--focus-ring); outline-offset: 2px; }
/* ===== [/REGION:home] ===== */

/* ===== [REGION:catalog] ===== */
/* --- Thẻ mẫu tủ bếp --- */
.model-card {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-lg); overflow: hidden; min-width: 0;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.model-card:active { box-shadow: var(--sh-2); }
.model-card__media { position: relative; overflow: hidden; }
.model-card__media img { transition: transform var(--t-slow); }
.model-card__tag { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; }
.model-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4); gap: var(--sp-3); }
.model-card__title { font-size: var(--fs-h4); }
.model-card__title a { color: var(--c-ink); text-decoration: none; }
.model-card__title a::after { content: ""; position: absolute; inset: 0; }      /* cả thẻ bấm được */
.model-card__title a:focus-visible { outline: none; }
.model-card:has(.model-card__title a:focus-visible) { outline: var(--focus-ring); outline-offset: -3px; }
.model-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-muted); list-style: none; padding: 0; margin: 0; }
.model-card__meta li { padding: var(--sp-1) var(--sp-2); background: var(--c-bg-soft); border-radius: var(--r-sm); }
.model-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.model-card__price { font-weight: 700; color: var(--c-ink); font-size: 1.125rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.model-card__price span { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted); }
.model-card__link { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent-ink); text-decoration: none; }
@media (min-width: 600px) {
  .model-card__body { padding: var(--sp-5); }
}
@media (min-width: 1200px) {
  .model-card__body { padding: var(--sp-4); }      /* lưới 4 cột: thẻ hẹp → giữ giá + "Xem chi tiết" trên cùng một hàng */
}
@media (hover: hover) and (pointer: fine) {
  .model-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
  .model-card:hover .model-card__media img { transform: scale(1.06); }       /* chỉ animate transform */
}

/* --- Bộ lọc danh mục --- */
.filters { padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.filters__grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.filters__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.filters__count { font-size: var(--fs-sm); color: var(--c-muted); }
.filters__count strong { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.filters__reset {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  -webkit-tap-highlight-color: transparent;
}
.filters__reset:active { background: var(--c-bg-soft-2); transform: var(--press); }
.is-filtered-out { display: none !important; }
@media (min-width: 600px) {
  .filters { padding: var(--sp-5); }
  .filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .filters__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (hover: hover) {
  .filters__reset:hover { border-color: var(--c-ink); }
}

/* --- Gallery trang chi tiết mẫu --- */
.pgallery { display: grid; gap: var(--sp-3); }
.pgallery__main { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; }
button.pgallery__main { display: block; width: 100%; padding: 0; border: 0; background: none; }   /* <button>: bấm được bằng Enter/Space */
button.pgallery__main:focus-visible { outline-offset: -4px; }
.pgallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.pgallery__thumb { width: 100%; min-height: var(--tap); padding: 0; border: 2px solid transparent; border-radius: var(--r-md); overflow: hidden; background: none; }
.pgallery__thumb:focus-visible { outline-offset: -4px; }
.pgallery__thumb[aria-current="true"] { border-color: var(--c-accent-ink); }          /* ≥3:1 trên nền sáng */
.pgallery__thumb img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
@media (min-width: 600px) {
  .pgallery__thumbs { gap: var(--sp-3); }
}

/* --- Gallery lưới --- */
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* --- Bảng thông số sản phẩm --- */
.specs { width: 100%; font-size: var(--fs-sm); }
.specs th, .specs td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.specs th { width: 40%; padding-right: var(--sp-3); color: var(--c-muted); font-weight: 500; }
.specs td { color: var(--c-ink); font-weight: 600; }
@media (min-width: 600px) {
  .specs th { width: 42%; }
}

/* --- Lightbox tự viết (không cần thư viện ngoài) --- */
.lightbox {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center;
  padding: max(var(--sp-4), var(--safe-t)) max(var(--sp-4), var(--safe-r)) calc(var(--tap) + var(--sp-5) + var(--safe-b)) max(var(--sp-4), var(--safe-l));
  background: rgba(16, 18, 20, .97); overscroll-behavior: contain;
}
.lightbox.is-open { display: flex; }
.lightbox__figure { max-width: min(1100px, 94vw); margin: 0; }
.lightbox__img { width: auto; max-width: 100%; max-height: 70vh; max-height: 70dvh; border-radius: var(--r-md); object-fit: contain; }
.lightbox__caption { margin-top: var(--sp-3); color: #fff; font-size: var(--fs-sm); text-align: center; }
.lightbox__btn {
  position: absolute; bottom: calc(var(--sp-4) + var(--safe-b));
  width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast);
}
.lightbox__btn:active { background: rgba(255, 255, 255, .36); }
.lightbox__btn--prev { left: calc(50% - var(--tap) - var(--sp-2)); }
.lightbox__btn--next { right: calc(50% - var(--tap) - var(--sp-2)); }
.lightbox__close { top: max(var(--sp-4), var(--safe-t)); right: max(var(--sp-4), var(--safe-r)); bottom: auto; left: auto; }
.lightbox__btn svg { width: 24px; height: 24px; }
@media (min-width: 900px) {
  .lightbox { padding: var(--sp-4); }
  .lightbox__img { max-height: 78vh; max-height: 78dvh; }
  .lightbox__btn { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__btn--prev { left: var(--sp-4); right: auto; }
  .lightbox__btn--next { right: var(--sp-4); left: auto; }
  .lightbox__close { top: var(--sp-4); right: var(--sp-4); transform: none; }
}
/* Xoay ngang: nút chuyển ảnh ra hai bên để ảnh có thêm chiều cao */
@media (orientation: landscape) and (max-height: 500px) {
  .lightbox { padding: var(--sp-3) calc(var(--tap) + var(--sp-5)); }
  .lightbox__img { max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); }
  .lightbox__btn { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__btn--prev { left: max(var(--sp-3), var(--safe-l)); right: auto; }
  .lightbox__btn--next { right: max(var(--sp-3), var(--safe-r)); left: auto; }
  .lightbox__close { top: var(--sp-3); right: max(var(--sp-3), var(--safe-r)); transform: none; }
}
@media (hover: hover) {
  .lightbox__btn:hover { background: rgba(255, 255, 255, .3); }
}
/* ================= [catalog] Phần bổ sung mobile-first (danh mục + chi tiết mẫu) ================= */

/* --- Thẻ mẫu gọn trên mobile: ảnh tỉ lệ cố định 16:10, lề thẻ nhỏ lại → thấy nhiều mẫu hơn mỗi màn hình --- */
@media (max-width: 599.98px) {
  .model-card__media.ratio--4x3 { aspect-ratio: 16 / 10; }
  .model-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); gap: var(--sp-2); }
  .model-card__foot { padding-top: var(--sp-2); }
}

/* --- Phần đầu trang danh mục gọn lại để bộ lọc/lưới lên sớm (cần độ ưu tiên cao hơn .page-hero ở vùng content) --- */
@media (max-width: 599.98px) {
  .page-hero.page-hero--compact { padding-block: var(--sp-5); }
  .page-hero.page-hero--compact .page-hero__title { margin-bottom: var(--sp-2); }
  .page-hero.page-hero--compact .page-hero__desc { font-size: var(--fs-sm); line-height: 1.5; }
}

/* --- Thanh bộ lọc dính (JS dựng, chỉ <900px). Header ẩn khi cuộn xuống → thanh dính sát mép trên --- */
.filterbar {
  position: sticky; top: var(--header-h); z-index: 800;
  margin-inline: calc(var(--gutter) * -1); margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--gutter);
  background: rgba(255, 255, 255, .98); border-bottom: 1px solid var(--c-line);
}
html.is-header-hidden .filterbar { top: 0; }
.filterbar__row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.filterbar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-4); flex: none;
  background: #fff; color: var(--c-ink); border: 2px solid var(--c-ink); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; -webkit-tap-highlight-color: transparent;
}
.filterbar__btn:active { transform: var(--press); background: var(--c-bg-soft-2); }
.filterbar__btn.has-active { background: var(--c-ink); color: #fff; }
.filterbar__btn .icon { width: 1.125em; height: 1.125em; }
.filterbar__count { flex: 1 1 auto; min-width: 0; margin: 0; text-align: right; font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.filterbar__count strong { color: var(--c-ink); }
.filterbar__chips { margin-top: var(--sp-2); }
.filterbar__chips[hidden] { display: none; }
.filterbar__chips .chip { gap: var(--sp-2); }
@media (min-width: 900px) {
  .filterbar { display: none; }
}
/* Màn hình ngang thấp: header + thanh lọc dính sẽ chiếm gần nửa chiều cao → cho trôi theo trang */
@media (orientation: landscape) and (max-height: 500px) {
  .filterbar { position: static; }
}

/* --- Bộ lọc trong bottom sheet: ẩn ô chọn gốc, hiện thẻ .choice (ô chọn vẫn là nguồn dữ liệu duy nhất cho filterModule) --- */
.filters.is-sheet { padding: 0; border: 0; border-radius: 0; background: none; }
.filters.is-sheet .filters__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.filters.is-sheet .field__label { display: block; margin-bottom: var(--sp-2); color: var(--c-ink); font-size: var(--fs-sm); font-weight: 700; }
.filters.is-sheet .field__control { display: none; }
.filters.is-sheet .filters__foot { display: none; }
.filters.is-sheet .choice-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.filters.is-sheet .choice__body { gap: var(--sp-2); padding: var(--sp-3); font-size: var(--fs-sm); }
.filter-sheet .sheet__body { padding-top: var(--sp-3); }
.filter-sheet .sheet__foot { flex-wrap: nowrap; }
.filter-sheet .sheet__foot > .btn { min-height: var(--tap); }
.filter-sheet .sheet__foot > .btn--primary { flex: 1 1 auto; }
.filter-sheet .sheet__foot > .btn--outline { flex: 0 0 auto; }
@media (orientation: landscape) and (max-height: 500px) {
  .filter-sheet .sheet__panel { max-height: 100vh; max-height: 100dvh; }
  .filters.is-sheet .choice-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Gallery vuốt ngang (JS dựng: .pgallery__stage > .pgallery__track > .pgallery__slide). Không JS: ảnh lớn + ảnh nhỏ như cũ --- */
.pgallery__stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--c-bg-soft-2); }
.pgallery__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pgallery__track::-webkit-scrollbar { display: none; }
.pgallery__track:focus-visible { outline: var(--focus-ring); outline-offset: -4px; }
.pgallery__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.pgallery__stage .pgallery__main { border-radius: 0; }
.pgallery__count {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; pointer-events: none;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: rgba(16, 18, 20, .66); color: #fff; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pgallery__zoom {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; pointer-events: none;
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(16, 18, 20, .66); color: #fff;
}
.pgallery__zoom svg { width: 18px; height: 18px; }
.pgallery__dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; pointer-events: none; }
.pgallery__dot {
  position: relative; pointer-events: auto; width: var(--tap); height: var(--tap); padding: 0;
  display: grid; place-items: center; background: none; border: 0; -webkit-tap-highlight-color: transparent;
}
.pgallery__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(16, 18, 20, .45);
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.pgallery__dot[aria-current="true"]::before { background: #fff; transform: scale(1.5); }
.pgallery__dot:focus-visible { outline: var(--focus-ring); outline-offset: -6px; border-radius: 50%; }
@media (min-width: 900px) {
  .pgallery__dots { display: none; }              /* máy tính: dùng ảnh nhỏ bên dưới + phím mũi tên */
}

/* --- Bảng thông số → danh sách nhãn / giá trị trên mobile (chỉ CSS; ≥600 trở lại dạng bảng) --- */
@media (max-width: 599.98px) {
  .specs, .specs tbody, .specs tr, .specs th, .specs td { display: block; }
  .specs tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
  .specs th, .specs td { width: auto; padding: 0; border: 0; line-height: 1.4; }
  .specs th { padding-right: 0; margin-bottom: 2px; font-size: var(--fs-xs); }
}

/* --- Thanh đáy riêng của trang chi tiết (data-bar="detail"): 2 nút, cao ≈ 64px + safe-area --- */
.mobile-bar--product { flex-wrap: nowrap; }
.mobile-bar--product .btn { flex: 1 1 0; min-width: 0; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); line-height: 1.1; text-align: center; }
.mobile-bar--product .btn span { white-space: normal; }
.mobile-bar--product .btn--primary { flex-grow: 1; }
.mobile-bar__btn--add .icon--done { display: none; }
.mobile-bar__btn--add.is-added { background: var(--c-accent-soft); border-color: var(--c-ink); color: var(--c-ink); }
.mobile-bar__btn--add.is-added .icon--add { display: none; }
.mobile-bar__btn--add.is-added .icon--done { display: inline-block; }
@media (max-width: 379.98px) {
  .mobile-bar--product .mobile-bar__btn--add.is-added .icon--done { display: none; }
}
@media (max-width: 899.98px) {
  /* Trang chi tiết: thanh đáy riêng không có nút Gọi → hiện lại nút gọi nổi (cùng nút Zalo nổi) để luôn có lối gọi điện */
  body[data-bar="detail"] .floating__btn--phone { display: grid; }
  html.is-form-view .mobile-bar--product,
  body:has(.form :is(input, select, textarea):focus) .mobile-bar--product { transform: translateY(100%); visibility: hidden; }
}

/* --- Lightbox: dvh, thao tác cảm ứng tự xử lý (zoom/kéo/vuốt), vòng xoay tải ảnh --- */
.lightbox { height: 100vh; height: 100dvh; touch-action: none; overflow: hidden; }
.lightbox__figure { position: relative; }
.lightbox__img { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; transform-origin: 50% 50%; transition: opacity var(--t-fast); }
.lightbox.is-open .lightbox__img { will-change: transform; }   /* A28: chỉ giữ layer khi lightbox đang mở */
.lightbox__img.is-animating { transition: transform var(--t-base), opacity var(--t-fast); }
.lightbox__btn { z-index: 3; }
.lightbox__btn[hidden] { display: none; }
.lightbox.is-zoomed .lightbox__caption { opacity: 0; }
.lightbox.is-loading .lightbox__img { opacity: .35; }
.lightbox__caption { transition: opacity var(--t-fast); min-height: 1.5em; }
.lightbox__spinner {
  position: absolute; top: 50%; left: 50%; z-index: 2; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; opacity: 0; pointer-events: none;
}
.lightbox.is-loading .lightbox__spinner { opacity: 1; animation: kt-spin .8s linear infinite; }
@keyframes kt-spin { to { transform: rotate(360deg); } }
.lightbox__img.is-slide-next { animation: kt-lb-next var(--t-base) both; }
.lightbox__img.is-slide-prev { animation: kt-lb-prev var(--t-base) both; }
@keyframes kt-lb-next { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes kt-lb-prev { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lightbox__img.is-slide-next, .lightbox__img.is-slide-prev { animation: none; }
  .lightbox.is-loading .lightbox__spinner { animation: none; border-top-color: rgba(255, 255, 255, .3); }
  .lightbox__img.is-animating { transition: none; }
}
/* --- [catalog] Bổ sung bộ lọc sheet: thẻ chọn chỉ hiện khi form nằm trong sheet; giữ chỗ thanh lọc để không xê dịch bố cục --- */
.filters:not(.is-sheet) .choice-group { display: none; }
.filter-sheet .sheet__title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; }
.filter-sheet .sheet__foot .btn:disabled { opacity: .5; pointer-events: none; }
@media (max-width: 899.98px) {
  .js:not(.js-fail) .filters:not(.is-sheet) { height: 65px; margin: 0 0 var(--sp-4); padding: 0; border: 0; overflow: hidden; visibility: hidden; }
}
/* ===== [/REGION:catalog] ===== */

/* ===== [REGION:forms] ===== */
/* --- Form & ô nhập: chữ ≥16px (iOS không tự zoom), cao ≥48px, viền ≥3:1, placeholder AA --- */
.form { --form-prog-h: 2.475rem; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-content: start; }   /* align-content: ô cột cao hơn form thì các hàng KHÔNG bị kéo giãn */
.form > *, .form__row > * { min-width: 0; }                                          /* D04: ô nhập/nhãn dài không đẩy tràn ngang */
.form--card { padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-2); scroll-margin-top: calc(var(--header-h) + var(--sp-3)); }
.form__row { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.field__label .req { color: var(--c-danger); }
.field__hint { font-size: .9375rem; line-height: 1.45; color: var(--c-muted); }       /* D19: gợi ý 15px (trước 14px) */
.field__control {
  width: 100%; min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
  background: #fff; border: 1px solid var(--c-field); border-radius: var(--r-md);
  font-size: max(16px, 1rem); line-height: 1.4; color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea.field__control { min-height: 120px; resize: vertical; }
select.field__control {
  appearance: none; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A636E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 20px;
  padding-right: 2.75rem;
}
.field__control:focus { border-color: var(--c-ink); }
.field__control:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.field__control::placeholder { color: var(--c-hint); opacity: 1; }
.field__control[readonly] { background: var(--c-bg-soft); color: var(--c-body); }

/* Thông báo lỗi: icon + chữ (không chỉ màu), đỏ AA ≥5:1; vùng aria-live luôn nằm trong cây truy cập nên trình đọc màn hình đọc được khi chữ xuất hiện */
.field__error { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: .9375rem; line-height: 1.45; color: var(--c-danger); font-weight: 600; }
.field__error:empty { margin-top: calc(var(--sp-2) * -1); }                         /* ô lỗi rỗng không chiếm khoảng cách */
.field__error:not(:empty)::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field.is-invalid .field__control { border-color: var(--c-danger); background: #FDF6F5; box-shadow: inset 0 0 0 1px var(--c-danger); }
.field.is-invalid .choice__body { border-color: var(--c-danger); }
.field--file .field__control { padding: var(--sp-2) var(--sp-3); }
/* Ô chọn tệp gốc bị ẩn trực quan (main.js thay bằng nút tiếng Việt): phải thắng .field__control (width/min-height/padding) */
.field__control.visually-hidden { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
.photo-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.photo-list__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg-soft); }
.photo-list__thumb { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-sm); }
.photo-list__name { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.photo-list__remove { flex: none; min-width: var(--tap); min-height: var(--tap); padding-inline: var(--sp-3); font-weight: 600; font-size: var(--fs-sm); color: var(--c-danger); border-radius: var(--r-sm); -webkit-tap-highlight-color: transparent; }
.photo-list__remove:active { background: rgba(0, 0, 0, .06); }
/* Honeypot chống spam – ẩn khỏi người dùng thật (giữ nguyên cơ chế) */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; overflow-wrap: anywhere; }
.form__status--success { background: #E8F5EF; color: #156245; border: 1px solid #BFE3D4; }
.form__status--error { background: #FCEDEB; color: #93251A; border: 1px solid #F2C9C3; }
.form__status--info { background: var(--c-bg-soft); color: var(--c-body); border: 1px solid var(--c-line); }
.form__status:empty { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* rỗng = ẩn trực quan nhưng vẫn là vùng role=status */
.form__status a { color: inherit; font-weight: 700; display: inline-block; padding-block: var(--sp-2); }   /* link trong thông báo: vùng chạm cao hơn */
.form__consent { font-size: .9375rem; line-height: 1.5; color: var(--c-muted); }
.form__turnstile:empty { display: none; }

/* --- Ô tích đồng ý (bắt buộc ở mọi form): cả dòng là vùng chạm ≥48px --- */
.field--check { gap: var(--sp-1); }
.check {
  display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); padding-block: var(--sp-2);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--c-body); cursor: pointer;
}
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--c-ink); }
.check a { color: var(--c-accent-ink); }
.field--check.is-invalid .check { color: var(--c-danger); }

/* --- Thẻ lựa chọn thay <select> ≤6 mục (JS sinh từ select, select gốc vẫn là nguồn dữ liệu): 1 cột trên mobile, 2 cột từ 600 --- */
.choice-group--list, .choice-group--stack { grid-template-columns: minmax(0, 1fr); }
.choice__body { overflow-wrap: anywhere; }
.choice__main { display: block; min-width: 0; }
.choice__text { flex: 1; min-width: 0; }
@media (min-width: 600px) {
  .choice-group--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Form nhiều bước (JS dựng): thanh tiến trình + nút Quay lại / Tiếp tục --- */
.form__progress { display: grid; gap: var(--sp-2); outline: none; min-height: var(--form-prog-h); align-content: start; }
.form__progress-label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.form__progress-label span { font-weight: 500; color: var(--c-muted); }
.form__progress-label:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
.form__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
.form__steps li { height: 6px; border-radius: var(--r-pill); background: var(--c-line-strong); overflow: hidden; }
.form__steps li::before { content: ""; display: block; height: 100%; background: var(--c-ink); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-base); }
.form__steps li.is-done::before, .form__steps li.is-current::before { transform: scaleX(1); }
.form__steps li.is-current::before { background: var(--c-accent-ink); }
.form__fade { animation: kt-form-in var(--t-base) both; }
/* Trạng thái trước khi JS dựng bước: chỉ hiện ô tên + điện thoại, chừa chỗ cho thanh tiến trình;
   nút gửi gốc (cao 56px) giữ chỗ hàng nút. JS xong thì thêm .is-stepped => chiều cao khớp, CLS ≈ 0.
   Chỉ áp dụng khi có JS (html.js); tắt JS hoặc main.js hỏng (html.js-fail) thì form hiện đủ như cũ. */
.js:not(.js-fail) .form--card[data-form-source]:not(.is-stepped) > :is(.field, .form__row):not(:has(input[name="name"], input[name="phone"])) { display: none; }
.js:not(.js-fail) .form--card[data-form-source]:not(.is-stepped) > :is(.field, .form__row):has(input[name="name"]) { margin-top: calc(var(--form-prog-h) + var(--sp-4)); }
@keyframes kt-form-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: stretch; }
.form__actions .btn { flex: 1 1 0; min-width: 0; width: auto; }
.form__actions .btn--lg { min-height: 56px; }
.form__actions [data-step-back] { flex: 0 0 auto; padding-inline: var(--sp-4); }
.form__actions .btn svg { width: 1.1em; height: 1.1em; }

/* --- Màn thành công: thẻ có dấu tích, thời gian phản hồi, nhắn Zalo, gửi thêm --- */
.form.is-sent > :not(.form__done) { display: none; }
.form__done { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-3); text-align: center; background: #fff; border: 1px solid #BFE3D4; border-radius: var(--r-lg); }
.form__done-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #E8F5EF; color: var(--c-success); animation: kt-done-pop var(--t-slow) both; }
.form__done-icon svg { width: 34px; height: 34px; stroke-width: 3; }
@keyframes kt-done-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.form__done-title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.25; color: var(--c-ink); outline: none; }
.form__done-title:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: var(--r-sm); }
.form__done-text { max-width: 30em; font-size: var(--fs-sm); color: var(--c-body); }
.form__done-note { max-width: 30em; font-size: .9375rem; line-height: 1.5; color: var(--c-muted); }
.form__done-actions { width: 100%; display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.form__done-actions .btn { width: 100%; }
@media (min-width: 600px) {
  .form__done { padding: var(--sp-6) var(--sp-5); }
  .form__done-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
  .form--card { padding: var(--sp-5); }
  .form__row { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
}
@media (min-width: 900px) {
  .field__control { min-height: 52px; font-size: max(16px, 1.0625rem); padding-inline: var(--sp-4); }   /* ô nhập to hơn trên desktop */
  textarea.field__control { min-height: 132px; }
}

/* --- Nút "Thêm vào danh sách báo giá" (trên thẻ mẫu & trang chi tiết).
       z-index 2 để nằm trên lớp phủ bấm-cả-thẻ của .model-card__title a::after --- */
.btn-quote {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-4); max-width: 100%;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; text-align: center; text-wrap: balance;
  color: var(--c-ink); background: #fff;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn-quote:active { background: var(--c-bg-soft-2); transform: var(--press); }
.btn-quote svg { width: 18px; height: 18px; flex: none; }
.btn-quote.is-added { background: var(--c-accent-soft); border-color: var(--c-accent-ink); color: var(--c-accent-ink); }
@media (hover: hover) {
  .btn-quote:hover { border-color: var(--c-ink); background: var(--c-bg-soft); }
}

/* --- Nút trên header kèm số đếm. Ẩn khi tắt JS vì tính năng này cần JS --- */
.quote-btn { display: none; }
.js .quote-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: none;
  color: var(--c-ink); background: #fff;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quote-btn:active { background: var(--c-bg-soft-2); transform: var(--press); }
.quote-btn svg { width: 22px; height: 22px; }
.quote-btn__count {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 var(--sp-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--c-danger); border-radius: var(--r-pill);
}
@media (hover: hover) {
  .quote-btn:hover { border-color: var(--c-ink); background: var(--c-bg-soft); }
}

/* --- Ngăn báo giá = .sheet (bottom sheet trên mobile, hộp thoại ≥900). Danh sách có ảnh nhỏ, xoá ≥48px, trạng thái rỗng có thiết kế --- */
.quote-sheet .sheet__body { display: flex; flex-direction: column; gap: var(--sp-5); padding-bottom: calc(var(--sp-5) + var(--safe-b)); }
.quote-sheet .sheet__title:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
.quote-sheet .form { gap: var(--sp-4); }
.quote-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.quote-list:empty { display: none; }
.quote-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) var(--tap); align-items: center; gap: var(--sp-3); padding: var(--sp-2); background: var(--c-bg-soft); border-radius: var(--r-md); }
.quote-item__thumb { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-sm); background: var(--c-bg-soft-2); color: var(--c-muted); }
.quote-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.quote-item__thumb .icon { width: 26px; height: 26px; }
.quote-item__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quote-item__name { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--c-ink); text-decoration: none; overflow-wrap: anywhere; }
.quote-item__price { font-size: .9375rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.quote-item__del {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--c-muted); border-radius: var(--r-md); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quote-item__del:active { background: #fff; color: var(--c-danger); transform: var(--press); }
.quote-item__del svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .quote-item__name:hover { color: var(--c-accent-ink); text-decoration: underline; }
  .quote-item__del:hover { background: #fff; color: var(--c-danger); }
}
.quote-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); text-align: center; border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-bg-soft); }
.quote-empty__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-ink); }
.quote-empty__icon .icon { width: 30px; height: 30px; }
.quote-empty__text { max-width: 26em; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-body); }
.quote-empty .btn { align-self: stretch; margin-top: var(--sp-2); }
.quote-drawer__success { display: none; }                                             /* câu cảm ơn gốc nằm trong HTML; JS hiển thị lại bằng thẻ .form__done */
.btn.is-loading { pointer-events: none; opacity: .75; }

/* --- Bộ chỉnh số: − [giá trị] + và thanh trượt (JS sinh từ ô số; không JS vẫn là ô số bình thường) --- */
.stepper { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); gap: var(--sp-2); align-items: stretch; }
.stepper__btn {
  width: var(--tap); min-height: var(--tap); display: grid; place-items: center;
  color: var(--c-ink); background: #fff; border: 1px solid var(--c-field); border-radius: var(--r-md);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.stepper__btn:active { background: var(--c-bg-soft-2); transform: var(--press); }
.stepper__btn:disabled { opacity: .4; cursor: not-allowed; }
.stepper__btn svg { width: 22px; height: 22px; }
.stepper .field__control { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper .field__control::-webkit-outer-spin-button, .stepper .field__control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__range {
  --p: 0%;
  grid-column: 1 / -1; width: 100%; height: var(--tap); margin: 0; padding: 0; background: transparent;
  -webkit-appearance: none; appearance: none; touch-action: pan-y; cursor: pointer;
}
.stepper__range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-pill); background: linear-gradient(to right, var(--c-ink) var(--p), var(--c-line-strong) var(--p)); }
.stepper__range::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: var(--c-line-strong); }
.stepper__range::-moz-range-progress { height: 8px; border-radius: var(--r-pill); background: var(--c-ink); }
.stepper__range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--c-accent); border: 3px solid var(--c-ink); box-shadow: var(--sh-2); }
.stepper__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent); border: 3px solid var(--c-ink); box-shadow: var(--sh-2); }
.stepper__range:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--r-md); }

/* --- Công cụ dự toán: giá thật nổi, kết quả dính (mobile: thanh giá bám đáy; ≥900: thẻ kết quả bám đầu) --- */
.estimator { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.estimator__panel { display: grid; gap: var(--sp-5); padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); min-width: 0; }
.estimator__panel > * { min-width: 0; }
.estimator__result { padding: var(--sp-5) var(--sp-4); background: var(--c-ink); color: var(--c-muted-dark); border-radius: var(--r-lg); min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.estimator__result h3 { color: #fff; margin-bottom: var(--sp-3); }
.estimator__total {
  font-size: clamp(2rem, 7vw + .5rem, 2.75rem); font-weight: 800; color: var(--c-accent); line-height: 1.12;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-wrap: balance;
  padding: var(--sp-3) var(--sp-4); background: rgba(255, 255, 255, .06); border-radius: var(--r-md);
}
.estimator__breakdown { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.estimator__breakdown li { display: flex; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--c-line-dark); }
.estimator__breakdown li span:last-child { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.estimator__note { font-size: .9375rem; line-height: 1.5; color: var(--c-muted-dark); margin-top: var(--sp-3); }
.estimator__bar {
  position: sticky; z-index: 20; bottom: calc(var(--bar-h) + var(--safe-b) + var(--sp-2));
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--c-ink); color: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
html.is-bar-hidden .estimator__bar, html.is-typing .estimator__bar { bottom: calc(var(--safe-b) + var(--sp-2)); }
.estimator__bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.estimator__bar-label { font-size: .875rem; line-height: 1.3; color: var(--c-muted-dark); }
.estimator__bar-price { font-size: clamp(1.0625rem, 4.8vw, 1.5rem); font-weight: 800; line-height: 1.2; color: var(--c-accent); font-variant-numeric: tabular-nums; overflow-wrap: normal; }   /* chỉ xuống dòng ở khoảng trắng: "19.237.000đ –" / "23.419.000đ", không cắt giữa số */
.estimator__bar .btn { flex: none; min-height: var(--tap); padding-inline: var(--sp-4); }
@media (max-width: 419.98px) {
  .estimator__bar .btn { white-space: normal; text-align: center; line-height: 1.2; padding-inline: var(--sp-3); max-width: 6.25rem; }   /* nhãn nút xuống 2 dòng để nhường chỗ cho khoảng giá */
}
.estimator__bar.is-bump, .estimator__total.is-bump { animation-name: kt-bump-soft; }
@media (max-width: 899.98px) {
  html.is-form-view:has(.estimator__bar) .to-top.is-visible { opacity: 0; visibility: hidden; pointer-events: none; }   /* thanh giá dính chiếm đáy màn hình: nút lên đầu trang tránh đè lên */
}
@keyframes kt-bump-soft { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

.checkbox-group { display: grid; gap: var(--sp-2); }
.checkbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--c-line-strong); border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm); line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.checkbox:active { background: var(--c-bg-soft-2); transform: var(--press); }
.checkbox:has(input:checked) { border-color: var(--c-ink); background: var(--c-accent-soft); }
.checkbox:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.checkbox input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-ink); flex: none; }
.checkbox__price { margin-left: auto; font-size: .9375rem; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .estimator__panel, .estimator__result { padding: var(--sp-5); }
  .checkbox__price { white-space: nowrap; }
}
@media (min-width: 900px) {
  .estimator { gap: var(--sp-6); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .estimator__result { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  .estimator__bar { display: none; }
}
@media (hover: hover) {
  .checkbox:hover { border-color: var(--c-ink); background: var(--c-bg-soft); }
  .stepper__btn:hover { border-color: var(--c-ink); background: var(--c-bg-soft); }
}
/* ===== [/REGION:forms] ===== */

/* ===== [REGION:content] ===== */
/* --- Hero phụ cho các trang con --- */
.page-hero { background: var(--c-ink); color: var(--c-muted-dark); padding-block: var(--sp-6); }
.page-hero__title { color: #fff; margin-bottom: var(--sp-3); text-wrap: balance; }
.page-hero__desc { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--c-muted-dark); max-width: 32em; }   /* ≤ ~70 ký tự/dòng */
.page-hero a:not(.btn) { color: var(--c-accent); font-weight: 700; }           /* A08: link/số điện thoại trên nền tối đạt AA */
.page-hero a[href^="tel:"] { white-space: nowrap; }
@media (min-width: 900px) {
  .page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
}

/* --- Bài viết (prose) --- */
.prose { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--c-body); overflow-wrap: break-word; }
.prose > * + * { margin-top: var(--sp-4); }
.prose > :where(p, ul, ol, blockquote) { max-width: 32em; }                   /* A18/C20: ≤ ~65–70 ký tự/dòng; bảng và ảnh vẫn rộng hết cột */
.prose h2 { margin-top: var(--sp-7); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.prose h3 { margin-top: var(--sp-6); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.prose :is(h2, h3) + * { margin-top: var(--sp-3); }                              /* tiêu đề dính với đoạn của nó */
.prose ul, .prose ol { padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.prose li::marker { color: var(--c-accent-ink); }
.prose a { overflow-wrap: anywhere; }                                           /* link dài không làm tràn (AX03) */
.prose a[href^="tel:"] { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose figure { margin-block: var(--sp-6); }
.prose figure img { border-radius: var(--r-lg); }
.prose figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.prose blockquote {
  padding: var(--sp-4); border-left: 4px solid var(--c-accent);
  background: var(--c-bg-soft); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic;
}
.prose strong { color: var(--c-ink); }
.prose .table-wrap { margin-block: var(--sp-6); }
@media (min-width: 900px) {
  .prose h2 { margin-top: var(--sp-8); }
  .prose blockquote { padding: var(--sp-4) var(--sp-5); }
}

/* --- Mục lục --- */
.toc { padding: var(--sp-4); background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.toc__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.toc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; font-size: var(--fs-sm); counter-reset: toc; }
.toc__list li { counter-increment: toc; display: flex; align-items: center; gap: var(--sp-1); }
.toc__list li::before { content: counter(toc) ". "; color: var(--c-muted); flex: none; }
.toc__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-body); text-decoration: none; }
.toc a.is-active { font-weight: 700; color: var(--c-accent-ink); }              /* scrollspy đánh dấu .is-active */
.toc__list .toc__sub { padding-left: var(--sp-4); font-size: var(--fs-xs); }
/* Mobile/tablet: mục lục thành hàng chip cuộn ngang 1 dòng (C21) – markup & thứ tự mục giữ nguyên */
@media (max-width: 899.98px) {
  .toc > .toc__list {
    display: flex; gap: var(--sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin-inline: calc(var(--sp-4) * -1); padding: var(--sp-1) var(--sp-4) var(--sp-2);
    scroll-padding-inline: var(--sp-4); scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .toc > .toc__list::-webkit-scrollbar { display: none; }
  .toc > .toc__list li {
    flex: 0 0 auto; max-width: 78%; scroll-snap-align: start;
    padding-left: var(--sp-3); background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  }
  .toc > .toc__list li:has(a.is-active) { background: var(--c-accent-soft); border-color: var(--c-accent-ink); }
  .toc > .toc__list a { min-height: var(--tap); padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; line-height: 1.3; }
  .toc > .toc__list li:active { background: var(--c-bg-soft-2); }
}
@media (min-width: 600px) {
  .toc { padding: var(--sp-5); }
  .toc > .toc__list { margin-inline: calc(var(--sp-5) * -1); padding-inline: var(--sp-5); scroll-padding-inline: var(--sp-5); }
}
@media (min-width: 900px) {
  .toc__list { gap: var(--sp-2); }
  .toc__list li { display: list-item; }
  .toc__list a { display: inline; min-height: 0; }
  .toc__title { margin-bottom: var(--sp-3); }
}
@media (hover: hover) {
  .toc__list a:hover { color: var(--c-accent-ink); text-decoration: underline; }
}

/* --- Bố cục bài viết: 1 cột; ≥900 có cột phụ (minmax(0,1fr) để bảng rộng không làm tràn trang) --- */
.article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-3); margin-bottom: var(--sp-5); }
/* Mobile: 1 cột (mỗi mục 1 dòng) để số dòng không đổi khi phông web thay phông dự phòng (tránh CLS ~0.14 ở bài viết) */
@media (max-width: 599px) { .article-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.article-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.article-layout h1 { text-wrap: balance; }
@media (min-width: 900px) { .article-layout h1 { font-size: clamp(2.25rem, 1.6vw + 1.5rem, 2.75rem); } }   /* H1 bài viết nằm trong cột hẹp: nhỏ hơn H1 hero cho dễ đọc */
.article-layout > * { min-width: 0; }                                          /* A01/C01: phần tử con không nong lưới */
.article-layout figure { margin-block: 0 var(--sp-5); }
.article-layout figure > img { width: 100%; border-radius: var(--r-lg); background-color: var(--c-bg-soft-2); }
.article-layout figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }
.article-layout .toc { margin-bottom: var(--sp-6); }
.article-aside { display: grid; gap: var(--sp-5); min-width: 0; }
@media (min-width: 900px) {
  .article-layout { gap: var(--sp-7); grid-template-columns: minmax(0, 1fr) 300px; }
  .article-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* --- Thẻ bài viết --- */
.post-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; min-width: 0; transition: transform var(--t-base), box-shadow var(--t-base); }
.post-card:active { box-shadow: var(--sh-2); }
.post-card__body { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.post-card__title { font-size: var(--fs-h4); }
.post-card__title a { color: var(--c-ink); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__title a:focus-visible { outline: none; }
.post-card:has(.post-card__title a:focus-visible) { outline: var(--focus-ring); outline-offset: -3px; }
.post-card__excerpt { font-size: var(--fs-sm); color: var(--c-muted); }
.post-card__date { font-size: var(--fs-xs); color: var(--c-muted); }
.post-card__excerpt { line-height: var(--lh-normal); }
@media (max-width: 599.98px) {
  /* Mobile: thẻ ngang gọn – ảnh 112px bên trái, ngày + tiêu đề bên phải, tóm tắt bên dưới (C22) */
  .post-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); align-items: start; }
  .post-card > .ratio { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; aspect-ratio: auto; min-height: 88px; border-radius: var(--r-sm); }
  .post-card__body { display: contents; }
  .post-card__date { grid-column: 2; grid-row: 1; align-self: end; overflow-wrap: anywhere; min-width: 0; }   /* chữ phóng 200%: ngày không đẩy thẻ tràn */
  .post-card__title { grid-column: 2; grid-row: 2; align-self: start; overflow-wrap: anywhere; min-width: 0; }
  .post-card__excerpt { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 600px) {
  .post-card__body { padding: var(--sp-5); }
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
}

/* --- Bảng (bảng giá, so sánh): cuộn ngang bên trong khung (mờ mép gợi ý cuộn), không làm tràn trang --- */
.table-wrap {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background-color: #fff;
  /* bóng mờ ở mép chỉ hiện khi còn nội dung bị che (kỹ thuật background-attachment: local) */
  background-image:
    linear-gradient(to right, #fff, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(31, 35, 40, .18), rgba(31, 35, 40, 0)),
    linear-gradient(to left, rgba(31, 35, 40, .18), rgba(31, 35, 40, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 32px 100%, 32px 100%, 16px 100%, 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table { min-width: 0; font-size: var(--fs-sm); }                                 /* bảng tự co theo khung; cột có tiêu đề nowrap mới buộc cuộn ngang (C04) */
.table caption { padding: var(--sp-4); text-align: left; font-size: var(--fs-xs); color: var(--c-muted); caption-side: bottom; }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; font-variant-numeric: tabular-nums; }
.table thead th { background: transparent; color: var(--c-ink); font-weight: 700; white-space: nowrap; border-bottom: 2px solid var(--c-line-strong); }
.table tbody th { color: var(--c-ink); font-weight: 600; }
.table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.table td.table__price { color: var(--c-ink); font-weight: 700; white-space: nowrap; }   /* chỉ ô giá đậm & không xuống dòng (A17/C04) */
@media (hover: hover) {
  .table tbody tr:hover { background: rgba(31, 35, 40, .03); }
}
/* Mobile/tablet dọc (≤899): mỗi hàng thành một thẻ; nhãn cột lấy từ data-label (C04). Ở 720–899 cột "Đặc điểm"/"Phù hợp" chỉ còn ~100px (5 dòng/ô) nên vẫn dùng thẻ, xếp 2 cột từ 600 */
@media (max-width: 899.98px) {
  .table-wrap:has(.table--cards) { border: 0; background: none; border-radius: 0; overflow: visible; }
  .table.table--cards, .table--cards tbody { display: block; min-width: 0; width: 100%; }
  .table--cards thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .table--cards tbody { display: grid; gap: var(--sp-3); }
  .table--cards tbody tr { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
  .table.table--cards tbody th, .table.table--cards td { display: block; padding: 0; border: 0; }
  .table.table--cards tbody th { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
  .table.table--cards td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; color: var(--c-muted); }
  .table.table--cards td.table__price { font-size: 1.25rem; line-height: 1.35; white-space: normal; }
  .table.table--cards td.table__price::before { font-size: var(--fs-xs); }
  .table--cards caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .table--cards tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table--cards tbody tr { align-content: start; }                      /* thẻ cao bằng nhau nhưng nội dung không bị giãn cách */
}

/* --- Công trình: lưới ảnh – mobile 2 cột ô nhỏ (chú thích dưới ảnh), ≥600 2 cột phủ chữ, ≥900 3 cột (C17/C18) --- */
.gallery.gallery--projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 600px) {
  .gallery.gallery--projects { gap: var(--sp-4); }
}
@media (min-width: 900px) {
  .gallery.gallery--projects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}
@media (min-width: 600px) {
  /* Tiêu đề có thể xuống 2 dòng → lớp phủ đậm hơn & cao hơn để chữ trắng luôn ≥ 4,5:1 kể cả trên ảnh sáng (C17) */
  .gallery--projects .project-card__overlay {
    padding-top: 44px;
    background: linear-gradient(to top, rgba(20, 23, 26, .94) 0%, rgba(20, 23, 26, .86) 68%, rgba(20, 23, 26, 0) 100%);
  }
  .gallery--projects .project-card__title { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
}
@media (max-width: 599.98px) {
  .gallery--projects .project-card.ratio { aspect-ratio: auto; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
  .gallery--projects .project-card > img { position: static; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
  .gallery--projects .project-card__overlay { position: static; padding: var(--sp-3); background: none; color: var(--c-ink); }
  .gallery--projects .project-card__title { color: var(--c-ink); font-size: var(--fs-sm); line-height: 1.3; margin-bottom: var(--sp-1); }
  .gallery--projects .project-card__meta { color: var(--c-muted); font-size: var(--fs-xs); line-height: 1.4; }
}

/* --- Điều hướng bàn phím: phần tử được focus không nằm dưới thanh đáy cố định (WCAG 2.4.11) --- */
.toc a, .table-wrap, .post-card__title a, .project-card__btn, .prose a { scroll-margin-bottom: calc(var(--bar-h, 0px) + var(--safe-b, 0px) + var(--sp-4)); }
/* Máy tính bảng ngang có cảm ứng (≥900): mục lục dạng danh sách vẫn cần vùng chạm đủ lớn */
@media (min-width: 900px) and (pointer: coarse) {
  .toc__list a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ===== [/REGION:content] ===== */

/* ===== [REGION:extras] ===== */
/* Trạng thái animation (chỉ khi .js-anim trên <html>).
   QUAN TRỌNG CHO SEO: mặc định KHÔNG ẩn gì; tắt JS ⇒ toàn bộ nội dung vẫn hiển thị.
   Chỉ animate transform/opacity. */
/* A28: KHÔNG đặt will-change tĩnh. Hiệu ứng chạy bằng CSS transition (animations.js thêm .is-in rồi data-anim-done):
   trình duyệt tự đưa phần tử lên layer khi đang chuyển động và thu lại khi xong. */
.js-anim [data-anim]:not([data-anim-done]) { opacity: 0; }
.js-anim [data-anim="up"]:not([data-anim-done])    { transform: translateY(24px); }
.js-anim [data-anim="left"]:not([data-anim-done])  { transform: translateX(-24px); }
.js-anim [data-anim="right"]:not([data-anim-done]) { transform: translateX(24px); }
.js-anim [data-anim="zoom"]:not([data-anim-done])  { transform: scale(.96); }
/* Phần tử LCP (H1, mô tả hero, ảnh hero) không bao giờ bị ẩn hoàn toàn: chỉ trượt lên vài pixel, không delay */
.js-anim [data-anim-hero]:not([data-anim-done]) { transform: translateY(10px); }
/* Trạng thái đích: chỉ có transition khi đang chạy (.is-in); xong thì animations.js gỡ .is-in để transition riêng của thẻ (hover…) hoạt động lại */
.js-anim [data-anim].is-in:not([data-anim-done]) { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.5, 1, .89, 1), transform .6s cubic-bezier(.5, 1, .89, 1); }
.js-anim [data-anim-hero].is-in:not([data-anim-done]) { transform: none; transition: transform .55s cubic-bezier(.5, 1, .89, 1); }
/* Xong hiệu ứng: không còn luật ẩn/dịch chuyển nào bám vào phần tử (các luật trên đều có :not([data-anim-done])) nên hover/active của thẻ hoạt động lại */
[data-anim-done] { opacity: 1 !important; }
[data-count] { font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) {
  /* trên mobile cuộn nhanh: dịch chuyển ngang dễ gây tràn → chỉ trượt dọc */
  .js-anim [data-anim="left"]:not([data-anim-done]), .js-anim [data-anim="right"]:not([data-anim-done]) { transform: translateY(24px); }
}

/* Tôn trọng lựa chọn giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  :root { --press: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-anim [data-anim], .js-anim [data-anim-hero] { opacity: 1 !important; transform: none !important; }
}

/* In ấn */
@media print {
  .header, .footer, .floating, .mobile-bar, .to-top, .nav-overlay, .cta-band, .cta-inline,
  .quote-drawer, .sheet, #toast-region, .toast-region, .filters, .lightbox, .estimator__bar, .nav, .map-embed,
  .swiper-button-prev, .swiper-button-next, .swiper-pagination { display: none !important; }
  .page { padding-top: 0; }
  /* Hiệu ứng cuộn không được để lại nội dung trong suốt khi in */
  .js-anim [data-anim], .js-anim [data-anim-hero] { opacity: 1 !important; transform: none !important; }
  /* Hero nền tối + chữ trắng: in trên giấy → nền trắng chữ đen, tắt ảnh nền */
  .hero, .page-hero, .cta-band { background: none !important; color: #000 !important; min-height: 0 !important; }
  .hero__media, .hero::after { display: none !important; }
  .hero .eyebrow { background: none !important; padding: 0 !important; }
  .hero *, .page-hero *, .hero__title em { color: #000 !important; text-shadow: none !important; }
  .table-wrap { overflow: visible; }
  .card, .model-card, .post-card, .review, .table--cards tbody tr, figure { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}
/* ===== [/REGION:extras] ===== */