/* ==========================================================================
   CỔ MỘC ĐƯỜNG — Hệ thiết kế thương mại
   Nền trắng · than · đỏ gạch · đồng
   Tên biến giữ nguyên từ bản "Mộc & Son" nên mọi trang cũ đổi tông theo,
   chỉ cần sửa 14 dòng dưới đây nếu muốn thử bảng màu khác.
   ========================================================================== */

:root {
  /* Màu */
  --giay:       #FFFFFF;
  --giay-sau:   #F5F3EF;
  --giay-sang:  #FFFFFF;
  --muc:        #16191C;
  --muc-2:      #22262A;
  --muc-nhat:   #5B626A;
  --moc:        #8A5A38;
  --moc-tram:   #5A3B21;
  --son:        #A83226;
  --son-dam:    #85251B;
  --thep:       #C08A3E;
  --thep-nhat:  #E0BE86;
  --vien:       #E4E0D9;
  --vien-dam:   #CFC9BF;

  /* Chữ
     Fraunces: serif có trục quang học và trục "wonk" — vài nét cố tình lệch
     khỏi chuẩn hình học, ra chất khắc tay chứ không phải chữ máy. Đúng tinh
     thần nghề mộc, và đủ lạ để không lẫn với mọi trang xây dựng khác.
     Be Vietnam Pro: font Việt do người Việt vẽ, dựng riêng cho dấu tiếng Việt. */
  --font-de:   'Fraunces', 'Noto Serif', Georgia, serif;
  --font-than: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Nhịp */
  --khung: 1240px;
  --khung-hep: 780px;
  --le: 24px;

  /* Bo góc. Bản trước gần như vuông (2px/4px) nên mọi nút, mọi thẻ đều cứng
     như bảng biểu. Nâng lên cho mềm, nhưng không tròn quá kẻo mất vẻ đứng đắn
     của một nhà thầu nhận công trình vài tỷ. */
  --r-nho: 8px;
  --r-vua: 12px;
  --r-lon: 18px;
  --r-tron: 999px;

  --dai: .55s cubic-bezier(.22,.61,.36,1);
  --nhanh: .25s cubic-bezier(.22,.61,.36,1);

  /* Chiều cao đầu trang — panel menu trên điện thoại bám vào giá trị này,
     đổi chiều cao thanh thì đổi ở đây một chỗ. */
  --cao-dau: 122px;
}

/* --------------------------------------------------------- Nền tảng --- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--giay);
  color: var(--muc);
  font-family: var(--font-than);
  /* 17px — khách nhóm tuổi cao, không hạ dưới mức này */
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Quy tắc của theme luôn thắng quy tắc mặc định của trình duyệt, nên dòng
   display:block ở trên vô hiệu hoá luôn thuộc tính hidden trên thẻ ảnh —
   ảnh ẩn vẫn chiếm chỗ và hiện chữ alt. Chốt lại cho toàn bộ thẻ. */
[hidden] { display: none !important; }

a { color: var(--son); text-decoration: none; transition: color var(--nhanh); }
a:hover { color: var(--son-dam); }

:focus-visible { outline: 2px solid var(--son); outline-offset: 3px; }
/* Trên nền tối, đỏ son không đủ tương phản để thấy viền focus */
.doan--toi :focus-visible,
.chan :focus-visible,
.dai-cta :focus-visible,
.hero-nha :focus-visible { outline-color: var(--thep); }

::selection { background: var(--thep-nhat); color: var(--muc); }

/* ------------------------------------------------------ Kiểu chữ --- */

h1, h2, h3, h4 {
  font-family: var(--font-de);
  font-weight: 500;
  line-height: 1.22;
  color: var(--muc);
  margin: 0 0 .6em;
  letter-spacing: -.005em;
  /* Cân dòng để tiêu đề tiếng Việt không ngắt giữa cụm từ */
  text-wrap: balance;
}

p { text-wrap: pretty; }

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; font-family: var(--font-than); font-weight: 600; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.dan-de {
  font-size: 1.15rem;
  color: var(--muc-nhat);
  line-height: 1.8;
  max-width: 62ch;
}

.nhan {
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--son);
  font-weight: 500;
  margin: 0 0 1rem;
  display: block;
}

.nhan--thep { color: var(--thep); }

blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--son);
  font-family: var(--font-de);
  font-size: 1.3rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--muc-2);
}

/* --------------------------------------------------------- Bố cục --- */

.khung { width: 100%; max-width: var(--khung); margin-inline: auto; padding-inline: var(--le); }
.khung-hep { width: 100%; max-width: var(--khung-hep); margin-inline: auto; padding-inline: var(--le); }

.doan { padding-block: clamp(4rem, 9vw, 7.5rem); }
.doan--mong { padding-block: clamp(2.5rem, 5vw, 4rem); }

.doan--chim { background: var(--giay-sau); }
.doan--toi  { background: var(--muc); color: var(--giay); }
.doan--toi h1, .doan--toi h2, .doan--toi h3 { color: var(--giay-sang); }
.doan--toi .dan-de { color: #C8BCA8; }

.dau-doan { text-align: center; max-width: 68ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.dau-doan .dan-de { margin-inline: auto; }

.luoi { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.luoi--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.luoi--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.luoi--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* ------------------------------------------------------- Hoa văn --- */

/* Hồi văn — băng trang trí chạy ngang, dùng làm đường phân cách.
   Ô lặp rộng 44px: hẹp hơn thì băng đặc lại và đọc thành mã vạch. */
.hoi-van {
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='20' viewBox='0 0 44 20'%3E%3Cpath d='M0 16 L7 16 L7 4 L37 4 L37 16 L29 16 L29 10 L18 10 L18 16 L44 16' fill='none' stroke='%239E2B25' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  opacity: .42;
}
.hoi-van--thep {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='20' viewBox='0 0 44 20'%3E%3Cpath d='M0 16 L7 16 L7 4 L37 4 L37 16 L29 16 L29 10 L18 10 L18 16 L44 16' fill='none' stroke='%23B8935A' stroke-width='1.3'/%3E%3C/svg%3E");
  opacity: .6;
}

/* Kim cương phân cách — dùng giữa tiêu đề và nội dung */
.hoa-thi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 1.25rem auto 1.75rem;
  max-width: 220px;
}
.hoa-thi::before, .hoa-thi::after {
  content: ''; flex: 1; height: 1px; background: var(--vien-dam);
}
.hoa-thi span {
  width: 7px; height: 7px;
  background: var(--son);
  transform: rotate(45deg);
  flex: none;
}
.doan--toi .hoa-thi::before, .doan--toi .hoa-thi::after { background: rgba(184,147,90,.4); }
.doan--toi .hoa-thi span { background: var(--thep); }

/* Con dấu triện — dùng cho logo và huy hiệu */
.trien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--son);
  color: var(--giay-sang);
  font-family: var(--font-de);
  font-size: 1.05rem;
  line-height: 1.05;
  text-align: center;
  border-radius: var(--r-vua);
  flex: none;
  letter-spacing: -.02em;
}

/* ---------------------------------------------------------- Nút --- */

.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 2rem;
  font-family: var(--font-than);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  border: 1px solid transparent;
  border-radius: var(--r-vua);
  cursor: pointer;
  transition: background var(--nhanh), color var(--nhanh), border-color var(--nhanh);
  text-align: center;
}

.nut--son { background: var(--son); color: var(--giay-sang); }
.nut--son:hover { background: var(--son-dam); color: var(--giay-sang); }

.nut--vien { background: transparent; color: var(--muc); border-color: var(--vien-dam); }
.nut--vien:hover { background: var(--muc); color: var(--giay); border-color: var(--muc); }

.nut--thep { background: transparent; color: var(--thep); border-color: rgba(184,147,90,.55); }
.nut--thep:hover { background: var(--thep); color: var(--muc); border-color: var(--thep); }

.nut-nhom { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Liên kết có mũi tên */
.lk-mui {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; font-size: .95rem; letter-spacing: .03em;
}
.lk-mui::after {
  content: ''; width: 18px; height: 1px; background: currentColor;
  transition: width var(--nhanh);
}
.lk-mui:hover::after { width: 30px; }

/* ------------------------------------------------------ Đầu trang --- */

.dau-trang {
  position: sticky; top: 0; z-index: 90;
  background: var(--giay);
  border-bottom: 1px solid var(--vien);
  transition: box-shadow var(--nhanh);
}
.dau-trang.da-cuon { box-shadow: 0 1px 16px rgba(36,28,20,.09); }

.hieu { display: flex; align-items: center; gap: .8rem; }
.hieu__chu { display: flex; flex-direction: column; line-height: 1.1; }
/* Tên hiệu phải nằm trên một dòng ở mọi cỡ màn. Ô này chỉ rộng ~130px cạnh
   con dấu triện, nên tên site dài (kiểu "Cổ Mộc Đường — Kiến trúc cổ truyền
   Bắc Bộ") sẽ vỡ thành cả chục dòng và đội đầu trang cao gấp ba, kéo cả menu
   lệch theo. Tên thương hiệu nên đặt ở Cài đặt → Tên site, còn câu mô tả để
   ở Khẩu hiệu — dòng phụ .hieu__phu đã lo phần đó. */
.hieu__ten {
  font-family: var(--font-de); font-size: 1.32rem; font-weight: 500;
  color: var(--muc); letter-spacing: .01em; white-space: nowrap;
}
/* .62rem cho ra 9,9px — nhỏ hơn cả cỡ chữ chú thích ảnh trên báo in.
   Khách chính của trang là người 50–70 tuổi, không hạ nhãn xuống dưới 11px.
   Vì thế khi dòng này vỡ hai dòng (giãn chữ .15em kéo nó dài 147px, quá ô
   logo) thì thu giãn chữ chứ không thu cỡ chữ — .08em vẫn đủ thưa cho chữ
   in hoa mà gói gọn trên một dòng. */
.hieu__phu {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muc-nhat); margin-top: 3px; white-space: nowrap;
}
.hieu:hover .hieu__ten { color: var(--son); }

.dh { display: flex; align-items: center; gap: 2rem; }
/* Chỉ nhắm danh sách gốc — các ul bên trong mega tự có bố cục lưới riêng,
   dùng .dh ul thì quy tắc flex này đè lên chúng. */
.dh > ul { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.dh a {
  color: var(--muc); font-size: .95rem; font-weight: 500;
  position: relative; padding-block: .4rem; display: inline-block;
}
.dh a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px; background: var(--son); transition: width var(--nhanh);
}
.dh a:hover, .dh .current-menu-item > a { color: var(--son); }
.dh a:hover::after, .dh .current-menu-item > a::after { width: 100%; }

/* Menu con */
.dh .sub-menu {
  position: absolute; top: 100%; left: -1rem;
  display: block; min-width: 245px; padding: .6rem 0;
  background: var(--giay-sang); border: 1px solid var(--vien);
  box-shadow: 0 8px 26px rgba(36,28,20,.11);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--nhanh), transform var(--nhanh), visibility var(--nhanh);
}
.dh li { position: relative; }
.dh li:hover > .sub-menu, .dh li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dh .sub-menu li { display: block; width: 100%; }
.dh .sub-menu a { display: block; padding: .55rem 1.4rem; font-weight: 400; }
.dh .sub-menu a::after { display: none; }
.dh .sub-menu a:hover { background: var(--giay-sau); }

/* Số điện thoại ở đầu trang là nút chính, màu do .nut--son quy định —
   ở đây chỉ lo phần bố cục. */
.dt-dau {
  display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}

.nut-menu {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--muc);
}
.nut-menu__vach { display: block; width: 24px; }
.nut-menu__vach span {
  display: block; width: 100%; height: 1.5px; background: currentColor; margin: 5px 0;
  transition: transform var(--nhanh), opacity var(--nhanh);
}
.nut-menu[aria-expanded="true"] .nut-menu__vach span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nut-menu[aria-expanded="true"] .nut-menu__vach span:nth-child(2) { opacity: 0; }
.nut-menu[aria-expanded="true"] .nut-menu__vach span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------- Dải số --- */

.dai-so { background: var(--giay-sau); }
.dai-so__luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--vien-dam);
  border-block: 1px solid var(--vien-dam);
}
.dai-so__o { background: var(--giay-sau); padding: 1.9rem 1.25rem; text-align: center; }
.dai-so__num {
  font-family: var(--font-de); font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--moc-tram); line-height: 1; display: block;
}
.dai-so__nhan {
  font-size: .73rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--muc-nhat); margin-top: .7rem; display: block;
}

/* ================================================ HERO VIDEO NỀN ===== */
/* Video chạy nền, chữ nằm trên. Ba thứ giữ cho khối này không hỏng:
   lớp phủ tối đủ đậm để chữ luôn đọc được dù khung hình sáng tối thất thường,
   chiều cao chốt theo svh để thanh địa chỉ trên điện thoại không làm giật,
   và bản dự phòng bằng ảnh tĩnh cho lúc chưa có video hoặc máy chặn tự chạy. */

.hero {
  position: relative;
  min-height: min(88svh, 820px);
  display: grid; align-items: center;
  background: var(--muc);
  overflow: hidden;
}

.hero__phim {
  position: absolute; inset: 0;
  background: url('../img/hero-poster.svg') center / cover no-repeat #101315;
}

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Video nền không mang thông tin, chỉ là chất liệu — hạ nhẹ cho chữ nổi lên. */
  opacity: .82;
}

/* Lớp phủ: đậm ở dưới và bên trái, nơi đặt chữ. */
.hero__mo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,15,17,.92) 0%, rgba(12,15,17,.78) 38%, rgba(12,15,17,.35) 68%, rgba(12,15,17,.18) 100%),
    linear-gradient(180deg, rgba(12,15,17,.5) 0%, rgba(12,15,17,.2) 40%, rgba(12,15,17,.78) 100%);
}

.hero__trong { position: relative; z-index: 2; width: 100%; }
.hero__chu { max-width: 36rem; }
.hero__chu h1 { color: var(--giay-sang); margin-bottom: 1.2rem; }

.hero__dan {
  color: #D2CEC6; font-size: 1.1rem; line-height: 1.78;
  max-width: 46ch; margin-bottom: 2.25rem;
}

/* Nút gọi chính: nhịp thở nhẹ để mắt bắt được ngay khi vào trang. */
@keyframes cmd-tho {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,50,38,.55); }
  50%      { box-shadow: 0 0 0 14px rgba(168,50,38,0); }
}
.nut--goi {
  animation: cmd-tho 2.6s ease-out infinite;
  animation-delay: 1.2s;
}
.nut--goi:hover, .nut--goi:focus-visible { animation-play-state: paused; }

@media (max-width: 900px) {
  .hero { min-height: auto; padding-block: clamp(3rem, 12vw, 5rem); }
  .hero__chu { max-width: none; }
  .hero__dan { font-size: 1.02rem; }
  .hero__mo {
    background: linear-gradient(180deg, rgba(12,15,17,.62) 0%, rgba(12,15,17,.72) 45%, rgba(12,15,17,.92) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Ảnh tĩnh thay video, và bỏ nhịp thở của nút. */
  .hero__video { display: none; }
  .nut--goi { animation: none; }
}


/* ------------------------------------------------------- Thẻ dự án --- */

.the-da {
  display: block; background: var(--giay-sang);
  border: 1px solid var(--vien);
  overflow: hidden; color: var(--muc);
  transition: border-color var(--dai), transform var(--dai);
  border-radius: var(--r-lon);
}
.the-da:hover { border-color: var(--vien-dam); transform: translateY(-4px); color: var(--muc); }

.the-da__anh { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--giay-sau); border-radius: var(--r-lon) var(--r-lon) 0 0; }
.the-da__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.the-da:hover .the-da__anh img { transform: scale(1.045); }

.the-da__loai {
  position: absolute; top: 14px; left: 14px;
  background: var(--son); color: var(--giay-sang);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .85rem; font-weight: 500;
}

.the-da__than { padding: 1.4rem 1.5rem 1.6rem; }
.the-da__ten {
  font-family: var(--font-de); font-size: 1.28rem; font-weight: 500;
  margin: 0 0 .45rem; line-height: 1.3;
}
.the-da:hover .the-da__ten { color: var(--son); }
.the-da__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  font-size: .85rem; color: var(--muc-nhat);
}
.the-da__meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* Bộ lọc */
.bo-loc {
  display: flex; flex-wrap: wrap; gap: .6rem;
  justify-content: center; margin-bottom: 2.75rem;
}
.bo-loc a {
  padding: .55rem 1.25rem; font-size: .9rem; font-weight: 500;
  border: 1px solid var(--vien); color: var(--muc-nhat);
  transition: all var(--nhanh);
}
.bo-loc a:hover, .bo-loc a.dang-chon {
  background: var(--muc); border-color: var(--muc); color: var(--giay-sang);
}

/* --------------------------------------------------------- Dịch vụ --- */

.the-dv {
  background: var(--giay-sang); border: 1px solid var(--vien);
  padding: 2.25rem 2rem; transition: border-color var(--dai), transform var(--dai);
  height: 100%;
}
.the-dv:hover { border-color: var(--thep); transform: translateY(-4px); }
.the-dv__so {
  font-family: var(--font-de); font-size: 2.4rem; color: var(--thep);
  line-height: 1; margin-bottom: 1.1rem; display: block;
}
.the-dv h3 { margin-bottom: .6rem; }
.the-dv p { color: var(--muc-nhat); font-size: .96rem; margin-bottom: 1.25rem; }

/* -------------------------------------------------------- Quy trình --- */

.qt { position: relative; display: grid; gap: 0; }
.qt__buoc {
  display: grid; grid-template-columns: 92px 1fr; gap: 1.75rem;
  padding: 1.9rem 0;
  border-top: 1px solid var(--vien);
}
.qt__buoc:last-child { border-bottom: 1px solid var(--vien); }
.qt__so {
  font-family: var(--font-de); font-size: 2rem; color: var(--son);
  line-height: 1; padding-top: .2rem;
}
.qt__so small { display: block; font-family: var(--font-than); font-size: .68rem; letter-spacing: .18em; color: var(--muc-nhat); text-transform: uppercase; margin-bottom: .4rem; }
.qt__buoc h3 { margin-bottom: .4rem; font-size: 1.25rem; }
.qt__buoc p { color: var(--muc-nhat); font-size: .96rem; margin: 0; max-width: 70ch; }

/* Trên nền tối, đỏ son tụt tương phản xuống ~1.7:1 — phải đổi sang vàng thếp. */
.doan--toi .qt__buoc { border-top-color: rgba(184,147,90,.24); }
.doan--toi .qt__buoc:last-child { border-bottom-color: rgba(184,147,90,.24); }
.doan--toi .qt__so { color: var(--thep); }
.doan--toi .qt__so small { color: #A99B87; }
.doan--toi .qt__buoc p { color: #C0B4A2; }

/* ------------------------------------------------------ Bảng gỗ --- */

.bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-vua); }
.bang {
  width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px;
  background: var(--giay-sang);
}
.bang th, .bang td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--vien); }
.bang thead th {
  background: var(--muc); color: var(--giay-sang);
  font-family: var(--font-than); font-weight: 500;
  font-size: .8rem; letter-spacing: .11em; text-transform: uppercase;
  border-bottom: 0;
}
.bang tbody tr:hover { background: var(--giay-sau); }
.bang td:first-child { font-weight: 500; font-family: var(--font-de); font-size: 1.05rem; }
.bang .gia { color: var(--son); font-weight: 500; white-space: nowrap; }

/* -------------------------------------------------------- Đánh giá --- */

.dg {
  background: var(--giay-sang); border: 1px solid var(--vien);
  padding: 2.25rem 2rem; height: 100%;
  display: flex; flex-direction: column;
}
.dg__loi {
  font-family: var(--font-de); font-size: 1.12rem; line-height: 1.7;
  font-style: italic; color: var(--muc-2); margin-bottom: 1.5rem; flex: 1;
}
.dg__loi::before { content: '“'; color: var(--thep); font-size: 2.6rem; line-height: 0; vertical-align: -.28em; margin-right: .15rem; }
.dg__nguoi { display: flex; align-items: center; gap: .9rem; padding-top: 1.25rem; border-top: 1px solid var(--vien); }
.dg__ten { font-weight: 500; font-size: .95rem; }
.dg__vai { font-size: .84rem; color: var(--muc-nhat); }

/* ------------------------------------------------------- Dải CTA --- */

.dai-cta {
  background: var(--muc); color: var(--giay);
  text-align: center; padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
.dai-cta h2 { color: var(--giay-sang); max-width: 26ch; margin-inline: auto; }
.dai-cta p { color: #C8BCA8; max-width: 58ch; margin: 0 auto 2rem; }
.dai-cta .nut-nhom { justify-content: center; }

/* ---------------------------------------------------------- Form --- */

.form-hang { display: grid; gap: 1.1rem; }
.truong label {
  display: block; font-size: .86rem; font-weight: 500;
  margin-bottom: .45rem; letter-spacing: .02em;
}
.truong input, .truong select, .truong textarea {
  width: 100%; padding: .85rem 1rem;
  font-family: var(--font-than); font-size: 1rem;
  background: var(--giay-sang); color: var(--muc);
  border: 1px solid var(--vien-dam); border-radius: var(--r-nho);
  transition: border-color var(--nhanh);
}
.truong input:focus, .truong select:focus, .truong textarea:focus {
  outline: none; border-color: var(--son);
}
.truong textarea { min-height: 128px; resize: vertical; }
.truong--doi { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ghi-chu-form { font-size: .85rem; color: var(--muc-nhat); }

.bao-form {
  border-left: 3px solid var(--son);
  background: var(--giay-sau);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 1.02rem;
}
.bao-form:focus { outline: 2px solid var(--son); outline-offset: 3px; }

/* ------------------------------------------------------------ FAQ --- */

.faq { max-width: var(--khung-hep); margin-inline: auto; }
.faq__muc { border-bottom: 1px solid var(--vien); }
.faq__muc summary {
  cursor: pointer; list-style: none;
  padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
  font-family: var(--font-de); font-size: 1.16rem; line-height: 1.4;
  transition: color var(--nhanh);
}
.faq__muc summary::-webkit-details-marker { display: none; }
.faq__muc summary:hover { color: var(--son); }
.faq__muc summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 1.5px solid var(--son); border-bottom: 1.5px solid var(--son);
  transform: rotate(45deg); transition: transform var(--nhanh);
}
.faq__muc[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__tra { padding: 0 2.5rem 1.5rem 0; color: var(--muc-nhat); }
.faq__tra p { margin: 0; max-width: 72ch; }

/* ================================================== CÔNG CỤ TRA CỨU === */

.cc {
  background: var(--giay-sang);
  border: 1px solid var(--vien);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-block: 2.5rem;
  border-radius: var(--r-lon);
}
.cc__dau { margin-bottom: 1.75rem; }
.cc__dau h3 { margin-bottom: .5rem; }
.cc__dan { color: var(--muc-nhat); font-size: .96rem; max-width: 62ch; margin: 0; }

.cc__nhap { display: grid; gap: 1.1rem; margin-bottom: 1.75rem; }

.cc__ket { min-height: 4rem; }
.cc__cho { color: var(--muc-nhat); font-style: italic; margin: 0; }

.cc__luu-y {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vien);
  font-size: .87rem; color: var(--muc-nhat); line-height: 1.7;
}

/* --- Khối kết quả --- */
.kq { border-left: 3px solid; padding: 1.25rem 0 1.25rem 1.4rem; margin-bottom: 1.5rem; }
.kq--tot { border-color: #4A7C3F; }
.kq--xau { border-color: var(--son); }

.kq__dinh { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem; margin-bottom: .7rem; }
.kq__co {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .7rem; font-weight: 500;
}
.kq--tot .kq__co { background: #E3EDDF; color: #2F5527; }
.kq--xau .kq__co { background: #F6E2E1; color: #7A1F1A; }
.kq__ten { font-family: var(--font-de); font-size: 1.75rem; line-height: 1; }
.kq__tieu { color: var(--muc-nhat); font-size: .93rem; }
.kq__nghia { margin: 0 0 .4rem; }
.kq__pham { margin: 0; font-size: .89rem; color: var(--muc-nhat); }
.kq__dung { font-size: .89rem; color: var(--muc-nhat); margin: 1.5rem 0 0; }

/* --- Thanh thước trực quan --- */
.tt { position: relative; margin-bottom: 1.75rem; }
.tt__day { display: flex; height: 44px; border: 1px solid var(--vien-dam); }
.tt__o {
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--vien-dam); overflow: hidden; min-width: 0;
}
.tt__o:last-child { border-right: 0; }
.tt__o--tot { background: #E3EDDF; }
.tt__o--xau { background: #F6E2E1; }
.tt__o i {
  font-style: normal; font-size: .66rem; letter-spacing: .04em;
  color: var(--muc-2); white-space: nowrap; padding-inline: 2px;
}
.tt__kim {
  position: absolute; top: -7px; bottom: -7px; width: 2px;
  background: var(--muc); transform: translateX(-1px);
}
.tt__kim::before {
  content: ''; position: absolute; top: -4px; left: -4px;
  border: 5px solid transparent; border-top-color: var(--muc);
}

/* --- Chọn hạng mục --- */
.cc__mau { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.mau-nut {
  padding: .55rem 1.1rem; font-family: var(--font-than); font-size: .88rem; font-weight: 500;
  background: transparent; border: 1px solid var(--vien-dam); color: var(--muc-nhat);
  border-radius: var(--r-vua); cursor: pointer; transition: all var(--nhanh);
}
.mau-nut:hover { border-color: var(--muc); color: var(--muc); }
.mau-nut.dang-chon { background: var(--muc); border-color: var(--muc); color: var(--giay-sang); }

.truong--ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

/* --- Danh sách kích thước đẹp --- */
.kq__tieu-de {
  font-family: var(--font-than); font-size: .8rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muc-nhat);
  margin: 0 0 1rem; padding-top: .5rem;
}
/* Viền đặt trên từng ô, không dùng khe hở + nền chung: hàng cuối thiếu ô
   thì chỗ trống sẽ lộ ra một mảng nền vô duyên. */
.dep-luoi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  border-top: 1px solid var(--vien); border-left: 1px solid var(--vien);
  margin-bottom: 1.5rem;
}
.dep-o {
  background: var(--giay-sau); padding: 1rem 1.1rem;
  border-right: 1px solid var(--vien); border-bottom: 1px solid var(--vien);
  display: flex; flex-direction: column; gap: .2rem;
}
.dep-o__so { font-family: var(--font-de); font-size: 1.5rem; color: var(--son); line-height: 1.1; }
.dep-o__so small { font-size: .8rem; margin-left: .18rem; color: var(--muc-nhat); }
.dep-o__cung { font-size: .84rem; font-weight: 500; }
.dep-o__pham { font-size: .78rem; color: var(--muc-nhat); }

/* --- La bàn Bát trạch + mặt bằng --- */
.lb-khu { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--vien); }
.lb-khu__dau { margin-bottom: 1.5rem; }
.lb-khu__dau h4 { margin-bottom: .5rem; font-size: 1.15rem; }

.lb-san { position: relative; margin-bottom: 1.5rem; }
.lb-san.dang-keo { outline: 2px dashed var(--son); outline-offset: 6px; }
.lb-san__trong {
  position: relative; width: 100%; max-width: 640px; margin-inline: auto;
  aspect-ratio: 1; overflow: hidden; background: var(--giay-sau);
  border: 1px solid var(--vien-dam); border-radius: var(--r-vua);
  touch-action: none; cursor: grab;
}
.lb-san__trong.dang-keo { cursor: grabbing; }
.lb-mb {
  position: absolute; left: 50%; top: 50%;
  max-width: 100%; max-height: 100%; width: auto;
  transform: translate(-50%,-50%);
  transform-origin: center; user-select: none; -webkit-user-drag: none;
}
.lb-vong { position: absolute; inset: 0; pointer-events: none; }
.lb-vong svg { width: 100%; height: 100%; display: block; }
.lb-tam {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%,-50%); pointer-events: none;
  border: 2px solid var(--son); border-radius: 50%;
}
.lb-san__moi {
  margin: .9rem 0 0; text-align: center;
  color: var(--muc-nhat); font-size: .9rem; font-style: italic;
}

/* Chữ trong la bàn */
.lb-svg text { font-family: var(--font-than); text-anchor: middle; }
.lb-svg .lb-son { font-size: 17px; font-weight: 500; fill: #5F5240; }
.lb-svg .lb-h   { font-size: 19px; font-weight: 600; fill: #FBF6EC; }
.lb-svg .lb-s   { font-size: 15px; fill: #FBF6EC; fill-opacity: .95; }
.lb-svg .lb-d   { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: #FBF6EC; fill-opacity: .82; }
.lb-svg .lb-q   { font-size: 12.5px; letter-spacing: .04em; fill: #5F5240; }
.lb-svg .lb-b   { font-size: 20px; font-weight: 600; letter-spacing: .12em; fill: #9E2B25; }

/* Cung bấm được */
.lb-vong { pointer-events: none; }
.lb-svg .lb-cung { pointer-events: auto; cursor: pointer; }
.lb-svg .lb-cung:hover .lb-cung__trong { fill-opacity: .26; }
.lb-svg .lb-cung.dang-chon .lb-cung__trong { fill-opacity: .34; }
.lb-svg .lb-cung:focus-visible { outline: 2px solid var(--muc); outline-offset: -3px; }

.lb-dieu { display: grid; gap: 1.5rem; }
.lb-dieu__nut { display: flex; flex-wrap: wrap; gap: .6rem; }
.lb-dieu__nut .nut { position: relative; cursor: pointer; }
.lb-dieu__truot { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.truot label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .84rem; font-weight: 500; margin-bottom: .5rem;
}
.truot label b { font-family: var(--font-de); font-size: 1rem; color: var(--son); font-weight: 500; }
/* Thanh trượt mặc định chỉ cao 16px, nút kéo nhỏ hơn ngưỡng 24px của WCAG
   2.5.8 — mà đây lại là thứ phải kéo chính xác trên điện thoại. Nới cả rãnh
   lẫn nút kéo; cùng ràng buộc vùng chạm như mọi chỗ khác trong theme. */
.truot input[type="range"] {
  width: 100%; height: 28px; accent-color: var(--son);
  background: transparent;
}
.truot input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--son); border: 2px solid var(--giay-sang);
  box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
  margin-top: -10px;
}
.truot input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--son); border: 2px solid var(--giay-sang);
  cursor: pointer;
}
.truot input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--vien-dam);
}
.truot input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--vien-dam);
}
.truot--tat { opacity: .45; }
.truot--tat input[type="range"] { cursor: not-allowed; }

.bt-bang { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--vien); }
.bt-bang h4 { margin-bottom: 1rem; }

/* --- Bát trạch: lưới tám hướng bấm được --- */
.bt-luoi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--vien); border: 1px solid var(--vien);
  margin-bottom: 1.25rem;
}
.bt-the {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .95rem 1rem; text-align: left; cursor: pointer;
  background: var(--giay-sang); border: 0;
  border-top: 3px solid transparent;
  font-family: var(--font-than); transition: background var(--nhanh);
}
.bt-the:hover { background: var(--giay-sau); }
.bt-the.dang-chon { background: var(--giay-sau); border-top-color: var(--muc); }
.bt-the__cham { width: 9px; height: 9px; border-radius: 50%; margin-bottom: .3rem; }
.bt-the__huong { font-family: var(--font-de); font-size: 1.05rem; line-height: 1.2; }
.bt-the__sao { font-size: .8rem; color: var(--muc-2); }
.bt-the__hang {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muc-nhat);
}

/* Thẻ chi tiết hướng đang chọn */
.bt-chi-tiet { border-left: 3px solid var(--vien-dam); padding: 1.25rem 1.5rem; background: var(--giay-sau); }
.bt-chi-tiet--tot { border-left-color: #2F7A3F; }
.bt-chi-tiet--xau { border-left-color: #8C2E20; }
.bt-ct__dinh { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem; margin-bottom: .6rem; }
.bt-ct__huong { font-family: var(--font-de); font-size: 1.45rem; line-height: 1; }
.bt-ct__sao { font-size: .95rem; font-weight: 500; }
.bt-ct__meta { font-size: .82rem; color: var(--muc-nhat); }
.bt-ct__nghia { margin: 0 0 1rem; font-size: .96rem; }
.bt-ct__bo { display: grid; gap: .7rem; margin: 0; }
.bt-ct__bo div { display: grid; grid-template-columns: 84px 1fr; gap: .8rem; align-items: baseline; }
.bt-ct__bo dt {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muc-nhat);
}
.bt-ct__bo dd { margin: 0; font-size: .93rem; }

/* Chú giải màu */
.bt-chu-giai {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin-bottom: 1.25rem; font-size: .8rem; color: var(--muc-nhat);
}
.bt-chu-giai span { display: inline-flex; align-items: center; gap: .4rem; }
.bt-chu-giai i { width: 12px; height: 12px; border-radius: 2px; flex: none; }

/* Đáp ứng cho hai công cụ — phải đặt SAU mọi khai báo gốc ở trên,
   nếu không quy tắc gốc cùng độ ưu tiên sẽ đè ngược lại. */
@media (max-width: 900px) {
  .bt-luoi { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .truong--ba { grid-template-columns: 1fr; }
  .lb-dieu__nut .nut { width: auto; flex: 1 1 46%; }
  .bt-ct__bo div { grid-template-columns: 1fr; gap: .2rem; }
  .dep-luoi { grid-template-columns: repeat(2, 1fr); }
  .cc__mau { gap: .4rem; }
  .mau-nut { padding: .5rem .85rem; font-size: .84rem; }
}

/* --------------------------------------------------- Chi tiết dự án --- */

.da-tieu { text-align: center; max-width: 800px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }

.da-thong-so {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--vien);
  border: 1px solid var(--vien); margin-block: clamp(2rem, 5vw, 3rem);
}
.da-thong-so div { background: var(--giay-sang); padding: 1.4rem 1.25rem; }
.da-thong-so dt {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muc-nhat); margin-bottom: .5rem;
}
.da-thong-so dd { margin: 0; font-family: var(--font-de); font-size: 1.15rem; color: var(--muc); }

.da-thu-vien { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.da-thu-vien img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.da-thu-vien figure { margin: 0; }
.da-thu-vien figcaption { font-size: .85rem; color: var(--muc-nhat); margin-top: .6rem; }

.noi-dung > * { max-width: var(--khung-hep); margin-inline: auto; }
.noi-dung h2 { margin-top: 2.5rem; }
.noi-dung h3 { margin-top: 2rem; }
.noi-dung ul, .noi-dung ol { padding-left: 1.3rem; margin-bottom: 1.15em; }
.noi-dung li { margin-bottom: .5em; }
.noi-dung img, .noi-dung figure, .noi-dung .bang-cuon { max-width: var(--khung); }
.noi-dung figure { margin-block: 2.5rem; }

/* Vụn đường dẫn */
.vun { font-size: .85rem; color: var(--muc-nhat); margin-bottom: 1.5rem; }
.vun a { color: var(--muc-nhat); }
.vun a:hover { color: var(--son); }
.vun span[aria-hidden] { margin-inline: .5rem; opacity: .5; }

/* ------------------------------------------------------ Chân trang --- */

.chan {
  background: var(--muc); color: #B5A791;
  padding-top: clamp(3.5rem, 7vw, 5rem);
  font-size: .94rem;
}
.chan a { color: #B5A791; }
.chan a:hover { color: var(--thep); }
.chan h3 {
  color: var(--giay-sang); font-family: var(--font-than);
  font-size: .8rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 1.2rem;
}
.chan__luoi {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
.chan__luoi ul { list-style: none; margin: 0; padding: 0; }
.chan__luoi li { margin-bottom: .35rem; }
/* Link chân trang chỉ cao 19px theo dòng chữ. WCAG 2.5.8 đòi tối thiểu
   24×24; lấy 36px cho chắc tay, trên điện thoại nới tiếp lên 44px. */
.chan__luoi li a { display: inline-flex; align-items: center; min-height: 36px; }
.chan .hieu__ten { color: var(--giay-sang); }
.chan .hieu__phu { color: #8C7F6C; }
.chan__gt { margin-top: 1.2rem; max-width: 34ch; line-height: 1.75; }
.chan__day {
  border-top: 1px solid rgba(184,147,90,.22);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  font-size: .86rem; color: #9A8C77;
}

/* --------------------------------------------- Thanh gọi trên mobile --- */

.thanh-goi { display: none; }

/* ------------------------------------------------------- Chuyển động --- */

.hien-len {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
.hien-len.da-hien { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hien-len { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- Tiện ích --- */

.an-nhin {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bo-qua:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: .8rem 1.4rem; background: var(--son); color: var(--giay-sang);
}
.giua { text-align: center; }
.mt-lon { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ------------------------------------------------------ Đáp ứng --- */

@media (max-width: 1080px) {
  .chan__luoi { grid-template-columns: 1fr 1fr; }
}

/* Mega menu cần chiều ngang; dưới 1000px chuyển hẳn sang panel trượt. */
@media (max-width: 1000px) {
  .nut-menu { display: flex; }
  .dt-dau span { display: none; }

  .dh {
    position: fixed; inset: var(--cao-dau) 0 0; z-index: 80;
    background: var(--giay);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 1.5rem var(--le) 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dai);
  }
  .dh.mo { transform: none; }
  .dh > ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .dh > ul > li { border-bottom: 1px solid var(--vien); }
  .dh a { display: block; padding: 1.05rem 0; font-size: 1.05rem; }
  .dh a::after { display: none; }

  .dh .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 .6rem 1.1rem; min-width: 0;
  }
  .dh .sub-menu a { padding: .6rem 0; font-size: .95rem; color: var(--muc-nhat); }

  .qt__buoc { grid-template-columns: 1fr; gap: .5rem; }
  .truong--doi { grid-template-columns: 1fr; }

  /* Sticky gọi/Zalo — bắt buộc cho nhóm khách lớn tuổi */
  .thanh-goi {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    border-top: 1px solid rgba(0,0,0,.12);
  }
  .thanh-goi a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 1rem .5rem; font-weight: 500; font-size: 1rem;
    color: var(--giay-sang); background: var(--son);
  }
  .thanh-goi a + a { background: var(--muc); border-left: 1px solid rgba(255,255,255,.12); }
  body { padding-bottom: 58px; }
}

@media (max-width: 1000px) {
  /* Khách chính là người 50–70 tuổi bấm bằng ngón cái: nới vùng chạm của
     mọi liên kết trong danh sách lên tối thiểu 44px theo WCAG 2.5.5. */
  .chan__luoi li a,
  .bo-loc a,
  .lk-mui {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .chan__luoi li { margin-bottom: 0; }
}

@media (max-width: 640px) {
  :root { --le: 18px; }
  .chan__luoi { grid-template-columns: 1fr; gap: 2.25rem; }
  .chan__day { justify-content: center; text-align: center; }
  .nut { width: 100%; }
  .nut-nhom { flex-direction: column; width: 100%; max-width: 340px; margin-inline: auto; }
  .da-thong-so { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   PHẦN BỔ SUNG 1.4.0
   Mega menu · tìm kiếm · bộ lọc · video facade · xưởng · cụm liên hệ

   Mỗi khối dưới đây đối chiếu với một chỗ đo được là chưa tối ưu trên
   vking.vn. Số liệu đo ngày 13/08/2026 ghi trong chú thích từng khối.
   ========================================================================== */

/* ---------------------------------------------- Thanh trên đầu trang --- */

.thanh-tren {
  background: var(--muc);
  color: #C8BCA8;                    /* 9,1:1 trên nền mực — dư chuẩn AA */
  font-size: .85rem;
}
.thanh-tren__trong {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 38px; flex-wrap: wrap;
}
.thanh-tren p { margin: 0; }
.thanh-tren__dia { display: inline-flex; align-items: center; gap: .45rem; }
.thanh-tren__gio { color: var(--thep); }

/* Mốc neo cho tấm mega. Nếu để mega neo vào thẻ li của mục menu thì
   left:50% tính theo tâm của mục đó — mục "Công trình" nằm lệch trái nên
   tấm rộng 1240px bị đẩy tràn quá mép trái màn hình. */
.thanh-chinh { background: var(--giay); position: relative; }
.thanh-chinh__trong {
  display: flex; align-items: center; gap: 1.5rem; min-height: 84px;
}

.dau-trang__cong-cu {
  display: flex; align-items: center; gap: .75rem;
  margin-left: auto;
}

/* Nút tròn tiện ích — 44px đúng ngưỡng ngón tay. Trang đối thủ có 170 trên
   230 vùng chạm dưới ngưỡng này, riêng nút tìm kiếm chỉ 30×28px. */
.nut-tron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; border: 1px solid var(--vien-dam);
  color: var(--muc); cursor: pointer;
  border-radius: var(--r-nho);
  transition: background var(--nhanh), color var(--nhanh), border-color var(--nhanh);
}
.nut-tron:hover { background: var(--muc); color: var(--giay); border-color: var(--muc); }

/* ---------------------------------------------------------- Mega menu --- */

.dh__cap1 { display: flex; align-items: center; gap: 1.8rem; list-style: none; margin: 0; padding: 0; }

.dh .muc-cap-0 { position: relative; }
/* Mục có mega phải bỏ mốc neo riêng để tấm mega căn theo cả thanh menu. */
.dh .co-mega { display: flex; align-items: center; gap: .15rem; position: static; }

/* Link menu cấp 1 tự nó chỉ cao 39px vì chỉ có padding-block .4rem.
   Nâng lên 44px cho đủ vùng chạm — khách chính là người 50–70 tuổi. */
.dh > ul > li > a { display: inline-flex; align-items: center; min-height: 44px; }

/* Mục menu là flex item nên mặc định co được xuống dưới bề rộng chữ. Khi thanh
   menu chật, trình duyệt không bỏ mục nào cả mà bóp đều tất cả rồi ngắt chữ
   giữa chừng — "Công cụ tra cứu" tụt xuống bốn dòng, thanh menu cao gấp đôi.
   Khoá co lại và cấm ngắt dòng: chật thì thà tràn để thấy ngay mà sửa, còn
   hơn vỡ chữ mà vẫn trông như cố ý. */
.dh > ul { flex-wrap: nowrap; }
.dh > ul > li { flex: none; }
.dh > ul > li > a { white-space: nowrap; }

/* Khoảng cách đều giữa các nhãn menu.
   Nút mũi tên 44px cộng khe .15rem nằm lọt giữa hai nhãn, nên sau mục có menu
   con mắt thấy trống 78px trong khi sau mục thường chỉ 32px — nhìn như menu
   xộc xệch. Thu nút còn 24px, bỏ khe, rồi kéo lại 20px bằng lề âm: đo lại ra
   36 · 32 · 32 · 36 · 36, chênh 4px thì mắt không nhận ra.
   Chỉ áp dụng cho menu ngang. Dưới 1001px menu là panel dọc, nút mũi tên ở đó
   phải giữ đủ 44px vì là chỗ chạm bằng ngón tay. */
@media (min-width: 1001px) {
  .dh .dh__mo { width: 24px; }
  .dh .co-mega,
  .dh__cap1 > .menu-item-has-children { gap: 0; }
  .dh__cap1 > .menu-item-has-children { margin-right: -20px; }
}

/* Dải laptop 1001–1240px: hiệu, menu và cụm nút cộng lại vượt bề ngang khung.
   Thu khoảng cách và bóp nút gọi, KHÔNG thu cỡ chữ menu — chữ nhỏ đi là thứ
   nhóm khách 50–70 tuổi chịu thiệt trước tiên. Đo tại 1001px (chỗ chật nhất
   của dải): các số dưới đây còn dư ~20px, đủ biên cho khác biệt font giữa các
   máy. Chặn dưới 1001px vì từ đó menu thành panel dọc và phải giữ gap 0. */
@media (min-width: 1001px) and (max-width: 1240px) {
  .thanh-chinh__trong { gap: .65rem; }
  .dh { gap: .9rem; }
  /* Nút mũi tên thu còn 24px đã trả lại kha khá chỗ, nên nới khe ra 1.05rem
     cho menu thoáng thay vì dồn cục. Đo tại 1001px: trên 1.1rem thì menu bắt
     đầu đẩy cụm nút bên phải, nên 1.05rem là mức có biên. */
  .dh > ul, .dh__cap1 { gap: 1.05rem; }
  .dau-trang__cong-cu { gap: .4rem; }
  .dau-trang__cong-cu .nut--goi { padding: .5rem .7rem; font-size: .85rem; }
}

/* .dh a đứng trước và cụ thể hơn .nut--son nên nuốt luôn màu chữ của nút,
   làm chữ than nằm trên nền đỏ (2,65:1). Trả lại màu cho các nút trong menu. */
.dh a.nut--son, .dh a.nut--son:hover { color: var(--giay-sang); }
.dh a.nut--vien { color: var(--muc); }
.dh a.nut--vien:hover { color: var(--giay); }
.dh .nut::after { display: none; }

.dh__mo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muc-nhat);
  transition: color var(--nhanh), transform var(--nhanh);
}
.dh__mo:hover { color: var(--son); }
.dh .co-mega.dang-mo > .dh__mo { transform: rotate(180deg); color: var(--son); }

.mega {
  position: absolute; top: calc(100% + 1px); left: 50%;
  width: min(var(--khung), calc(100vw - 2 * var(--le)));
  transform: translateX(-50%) translateY(6px);
  background: var(--giay-sang);
  border: 1px solid var(--vien);
  box-shadow: 0 18px 44px rgba(36,28,20,.13);
  padding: 2rem 0 2.2rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--nhanh), transform var(--nhanh), visibility var(--nhanh);
  z-index: 70;
}
.dh .co-mega:hover > .mega,
.dh .co-mega:focus-within > .mega,
.dh .co-mega.dang-mo > .mega {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.mega__luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.75rem 2.25rem;
  list-style: none; margin: 0; padding: 0;
}
.mega__cot { display: block; }
.dh .mega__ten {
  display: block; font-family: var(--font-de); font-size: 1rem;
  color: var(--muc); font-weight: 500;
  padding-bottom: .7rem; margin-bottom: .55rem;
  border-bottom: 1px solid var(--vien);
}
.dh .mega__ten::after { display: none; }

.mega__ds { list-style: none; margin: 0; padding: 0; }
.mega__ds li { border: 0; }
.dh .mega__ds a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: 44px; padding: .2rem 0;
  font-size: .93rem; font-weight: 400; color: var(--muc-2);
}
.dh .mega__ds a::after { display: none; }
.dh .mega__ds a:hover { color: var(--son); }

.mega__dem {
  font-size: .82rem; color: var(--muc-nhat);
  background: var(--giay-sau); padding: .12rem .5rem;
  border-radius: 999px; flex: none;
}
.mega__mota {
  display: block; font-size: .84rem; color: var(--muc-nhat);
  line-height: 1.6; margin-top: .2rem;
}

/* Cột cuối là lối thoát cho người chưa biết mình cần gì — mega menu của
   đối thủ chỉ có link trần, ai chưa rõ nhu cầu thì đóng lại và rời trang. */
.mega__cot--noi {
  background: var(--giay-sau); padding: 1.25rem 1.35rem;
  border: 1px solid var(--vien);
}
.mega__cot--noi .mega__ten { border-bottom: 0; padding-bottom: .3rem; }
.mega__cot--noi .mega__mota { margin-bottom: 1rem; }

.nut--nho { padding: .7rem 1.1rem; font-size: .85rem; min-height: 44px; }

.dh__day { display: none; }

/* -------------------------------------------------------- Ô tìm kiếm --- */

.o-tim {
  border-top: 1px solid var(--vien);
  background: var(--giay-sang);
  padding-block: 1.5rem;
}
.o-tim__form { display: flex; gap: .75rem; }
.o-tim__form input[type="search"] {
  flex: 1; min-height: 52px;
  padding: .8rem 1.1rem; font-size: 1.02rem; font-family: inherit;
  background: var(--giay); color: var(--muc);
  border: 1px solid var(--vien-dam); border-radius: var(--r-nho);
}
.o-tim__form input[type="search"]:focus { outline: 2px solid var(--son); outline-offset: 1px; }
.o-tim__form .nut { flex: none; }

.o-tim__goi-y {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  margin: .9rem 0 0; font-size: .88rem; color: var(--muc-nhat);
}
.o-tim__goi-y a {
  min-height: 34px; display: inline-flex; align-items: center;
  padding: 0 .7rem; background: var(--giay-sau);
  border: 1px solid var(--vien); color: var(--muc-2);
}
.o-tim__goi-y a:hover { border-color: var(--son); color: var(--son); }

/* Màn che sau panel menu trên điện thoại */
.man-che {
  position: fixed; inset: 0; z-index: 79;
  background: rgba(36,28,20,.45);
}
body.khoa-cuon { overflow: hidden; }

/* ------------------------------------------------------------ Bộ lọc --- */

.loc-khung { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Ba hàng lọc phải thẳng cột với nhau. Bản trước để nhãn và cụm nút cùng nằm
   trong một flex, nhãn dài ngắn khác nhau nên mỗi hàng nút bắt đầu ở một chỗ,
   nhìn nhấp nhô. Khoá nhãn thành một cột cố định thì mọi hàng thẳng hàng. */
.loc {
  display: grid; gap: .9rem;
  padding: 1.4rem 1.5rem;
  background: var(--giay-sang);
  border: 1px solid var(--vien);
  border-radius: var(--r-lon);
}
.loc__nhom {
  display: grid; grid-template-columns: 8.5rem 1fr;
  align-items: center; gap: .6rem 1rem;
}
.loc__nhan {
  font-size: .82rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muc-nhat);
}
.loc__nut-ds { display: flex; flex-wrap: wrap; gap: .5rem; }

.loc__nut {
  min-height: 44px; padding: .55rem 1.15rem;
  display: inline-flex; align-items: center;
  font-family: inherit; font-size: .92rem; line-height: 1.3;
  white-space: nowrap;
  color: var(--muc-2); background: transparent;
  border: 1px solid var(--vien-dam); border-radius: var(--r-tron);
  cursor: pointer;
  transition: background var(--nhanh), color var(--nhanh), border-color var(--nhanh);
}
.loc__nut:hover { border-color: var(--son); color: var(--son); }
.loc__nut[aria-pressed="true"] {
  background: var(--son); color: var(--giay-sang); border-color: var(--son);
}

.loc__dem {
  margin: 1.1rem 0 0; font-size: .88rem; color: var(--muc-nhat);
}

@media (max-width: 720px) {
  /* Cột nhãn cố định làm cụm nút bị bóp còn một nút mỗi hàng — xếp dọc. */
  .loc__nhom { grid-template-columns: 1fr; gap: .45rem; }
  .loc { padding: 1.1rem 1.15rem; }
}
/* Dòng chữ trải hết khung 1240px dài tới 149 ký tự — mắt phải quét ngang quá
   xa rồi dò lại đầu dòng sau. Giữ trong khoảng 65–75 ký tự. */
.loc__trong {
  margin: 2rem auto 0; padding: 1.5rem; max-width: 62ch;
  background: var(--giay-sang); border: 1px solid var(--vien);
  text-align: center; color: var(--muc-2);
}
.loc__trong a { font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------- Thông số trên thẻ --- */

/* Đối thủ đưa chủ đầu tư, địa điểm, số tầng, mặt tiền — không có dòng nào
   nói về tiền. Khoảng đầu tư đặt cuối thẻ, tách bằng đường kẻ. */
.the-da__ts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .75rem 1rem; margin: 0 0 1.1rem;
}
.the-da__ts div { min-width: 0; }
.the-da__ts dt {
  font-size: .82rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muc-nhat); margin-bottom: .18rem;
}
.the-da__ts dd {
  margin: 0; font-size: .92rem; color: var(--muc-2); line-height: 1.45;
}

/* Thông số xếp vuông 2×2. Dự án nào thiếu một trường thì còn số lẻ, ô cuối
   đứng trơ lại một mình và thẻ khuyết mất một góc — cho nó trải hết ngang. */
.the-da__ts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

.the-da__gia {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin: 0;
  padding-top: .9rem; border-top: 1px solid var(--vien);
}
.the-da__gia span {
  font-size: .82rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muc-nhat);
}
.the-da__gia strong {
  font-family: var(--font-de); font-size: 1.12rem;
  color: var(--son); font-weight: 500;
}

/* ------------------------------------------------------------- Video --- */

.video { margin: 0; border-radius: var(--r-lon); }
.video__khung {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--muc-2);
}
.video__anh { width: 100%; height: 100%; object-fit: cover; }
.video__khung iframe { width: 100%; height: 100%; border: 0; display: block; }

.video__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .85rem; padding: 1.5rem;
  background: linear-gradient(to top, rgba(36,28,20,.72), rgba(36,28,20,.18));
  border: 0; cursor: pointer; color: var(--giay-sang);
  font-family: inherit; font-size: .95rem; text-align: center;
  transition: background var(--nhanh);
}
.video__play:hover { background: linear-gradient(to top, rgba(36,28,20,.8), rgba(36,28,20,.3)); }
.video__tron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex: none;
  background: var(--son); color: var(--giay-sang);
  border-radius: 50%;
  transition: transform var(--nhanh);
}
.video__play:hover .video__tron { transform: scale(1.08); }
.video__chu { max-width: 30ch; line-height: 1.5; }

.video__ct {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  align-items: center; margin-top: .9rem;
}
.video__ct a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-de); font-size: 1.08rem; color: var(--giay-sang);
}
.video__ct a:hover { color: var(--thep); }
.video__ct span { font-size: .87rem; color: #A99B87; }

/* -------------------------------------------------------- Xưởng mộc --- */

.xuong__luoi {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}

.xuong__so {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--vien-dam);
  border: 1px solid var(--vien-dam);
  margin: clamp(1.75rem, 3vw, 2.25rem) 0;
  border-radius: var(--r-vua);
}
.xuong__so div { background: var(--giay); padding: 1.15rem 1rem; }
.xuong__so dt {
  font-size: .82rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muc-nhat); margin-bottom: .35rem;
}
.xuong__so dd {
  margin: 0; font-family: var(--font-de); font-size: 1.5rem;
  color: var(--moc-tram); line-height: 1;
}

.xuong__buoc { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.xuong__buoc li {
  padding: 1.5rem 0; border-top: 1px solid var(--vien);
  display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.25rem;
}
.xuong__buoc li:last-child { border-bottom: 1px solid var(--vien); }
/* Vàng đồng trên nền trắng chỉ đạt 3,02:1 — dưới chuẩn AA cho chữ dưới 24px.
   Dùng nâu gỗ (5,84:1). Vàng đồng chỉ dùng trên khối nền tối. */
.xuong__stt {
  grid-row: span 2;
  font-family: var(--font-de); font-size: 1.4rem;
  color: var(--moc); line-height: 1.1;
}
.xuong__buoc h3 { margin: 0 0 .4rem; font-size: 1.18rem; }
.xuong__buoc p { margin: 0; color: var(--muc-nhat); font-size: .96rem; }

.xuong__moi {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 1.4rem 1.6rem; max-width: 68ch;
  background: var(--giay-sau); border-left: 3px solid var(--son);
  font-size: 1rem;
}
.xuong__moi strong { display: block; margin-top: .3rem; color: var(--muc); }

/* ------------------------------------------ Xem tuổi làm nhà --- */

/* Ba phép xem xếp thành ba dòng, mỗi dòng tự nói được hay không được ngay ở
   cột giữa. Người vào đây chỉ cần một câu trả lời, phần giải thích để sau. */
.xt-bo {
  display: grid; gap: 1px; background: var(--vien);
  border: 1px solid var(--vien); margin-top: 1.5rem;
  border-radius: var(--r-vua);
}
.xt-muc {
  display: grid; grid-template-columns: 8.5rem 11rem 1fr;
  gap: .3rem 1.25rem; align-items: baseline;
  padding: 1.05rem 1.25rem; background: var(--giay-sang);
  border-left: 3px solid transparent;
}
.xt-muc--tot { border-left-color: #2F7A3F; }
.xt-muc--xau { border-left-color: var(--son); }

.xt-muc__nhan {
  font-size: .82rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muc-nhat);
}
.xt-muc__dat { font-family: var(--font-de); font-size: 1.05rem; font-weight: 500; }
.xt-muc--tot .xt-muc__dat { color: #24632F; }
.xt-muc--xau .xt-muc__dat { color: var(--son); }
.xt-muc__ghi { font-size: .93rem; color: var(--muc-nhat); line-height: 1.6; }

.xt-loi-ra {
  margin-top: 1.5rem; padding: 1.4rem 1.5rem;
  background: var(--giay-sau); border-left: 3px solid var(--thep);
}
.xt-loi-ra h4 { margin: 0 0 .6rem; }
.xt-loi-ra p { margin: 0 0 .7rem; font-size: .97rem; }
.xt-loi-ra p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .xt-muc { grid-template-columns: 1fr; gap: .2rem; }
  .xt-muc__ghi { margin-top: .25rem; }
}

/* -------------------------- Thư viện ảnh công trình --- */

.tv-anh { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.tv-anh__ten {
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

/* Ba cột trên máy tính, tấm đầu chiếm hai cột và cao hơn. Trên điện thoại rút
   còn một cột — ảnh công trình có nhiều chi tiết nhỏ, chia đôi màn 375px thì
   không nhìn ra gì. */
.tv-anh__luoi {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tv-anh__o {
  position: relative; margin: 0;
  border-radius: var(--r-vua); overflow: hidden;
  background: var(--giay-sau);
}
.tv-anh__o img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.tv-anh__o:hover img { transform: scale(1.035); }

.tv-anh__o--to { grid-column: span 2; grid-row: span 2; }
.tv-anh__o--to img { aspect-ratio: 16 / 11; height: 100%; }

.tv-anh__o figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem .95rem .8rem;
  font-size: .88rem; line-height: 1.5; color: #F2EFE9;
  background: linear-gradient(180deg, rgba(12,15,17,0) 0%, rgba(12,15,17,.82) 100%);
}

@media (max-width: 900px) {
  .tv-anh__luoi { grid-template-columns: repeat(2, 1fr); }
  .tv-anh__o--to { grid-column: span 2; grid-row: auto; }
  .tv-anh__o--to img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .tv-anh__luoi { grid-template-columns: 1fr; gap: 10px; }
  .tv-anh__o--to { grid-column: auto; }
  .tv-anh__o img,
  .tv-anh__o--to img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-anh__o:hover img { transform: none; }
}

/* ----------------------- Thông tin chi tiết công trình --- */

.ts-khu {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--giay-sang);
  border: 1px solid var(--vien);
  border-radius: var(--r-lon);
}
.ts-khu__ten {
  margin: 0 0 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--vien);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

/* --- Bốn ô nhanh: thứ người ta hỏi trước nhất --- */
.ts-nhanh {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 1.5rem; margin: 0 0 1.75rem;
}
.ts-nhanh dt {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--muc-nhat); margin-bottom: .35rem;
}
.ts-nhanh__hinh { color: var(--son); flex: none; line-height: 0; }
.ts-nhanh dd {
  margin: 0; font-family: var(--font-de); font-weight: 600;
  font-size: 1.06rem; line-height: 1.4; color: var(--muc);
}

/* --- Bảng đầy đủ: hai cột nhãn / giá trị --- */
.ts-bang {
  margin: 0; display: grid; gap: 1px;
  background: var(--vien); border: 1px solid var(--vien);
  border-radius: var(--r-vua); overflow: hidden;
}
.ts-bang > div {
  display: grid; grid-template-columns: 13.5rem 1fr;
  background: var(--giay-sang);
}
.ts-bang dt,
.ts-bang dd { padding: .95rem 1.15rem; margin: 0; }
.ts-bang dt {
  font-size: .93rem; color: var(--muc-nhat);
  background: var(--giay-sau);
  display: flex; align-items: center;
}
.ts-bang dd { font-size: .98rem; line-height: 1.65; color: var(--muc); }
.ts-bang dd ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .5rem;
}
.ts-bang dd li { position: relative; padding-left: 1.1rem; }
.ts-bang dd li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--thep);
}

@media (max-width: 900px) {
  .ts-nhanh { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Nhãn 13,5rem cộng giá trị không đủ chỗ trên điện thoại — xếp dọc, nhãn
     thành dòng nhỏ phía trên thay vì cột riêng. */
  .ts-bang > div { grid-template-columns: 1fr; }
  .ts-bang dt {
    background: transparent; padding-bottom: .2rem;
    font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  }
  .ts-bang dd { padding-top: 0; }
  .ts-khu { padding: 1.2rem 1.15rem; }
}
@media (max-width: 460px) {
  .ts-nhanh { grid-template-columns: 1fr; gap: 1rem; }
}

/* ------------------------------------------- Dải danh mục --- */

.dm-luoi {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.dm-the {
  position: relative;
  display: grid; align-content: start; gap: .45rem;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--giay-sang);
  border: 1px solid var(--vien);
  border-radius: var(--r-lon);
  color: var(--muc);
  transition: border-color var(--nhanh), transform var(--nhanh), box-shadow var(--nhanh);
}
.dm-the:hover {
  border-color: var(--son); color: var(--muc);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(22,25,28,.08);
}

.dm-the__hinh {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: .35rem;
  background: var(--giay-sau); color: var(--son);
  border-radius: var(--r-vua);
  transition: background var(--nhanh), color var(--nhanh);
}
.dm-the:hover .dm-the__hinh { background: var(--son); color: var(--giay-sang); }

.dm-the strong {
  font-family: var(--font-de); font-weight: 600; font-size: 1.14rem;
}
.dm-the > span:not([class]) {
  font-size: .93rem; line-height: 1.6; color: var(--muc-nhat);
  padding-right: 1.5rem;
}

.dm-the__mui {
  position: absolute; right: 1.25rem; bottom: 1.35rem;
  color: var(--vien-dam);
  transition: color var(--nhanh), transform var(--nhanh);
}
.dm-the:hover .dm-the__mui { color: var(--son); transform: translateX(3px); }

@media (max-width: 900px) {
  .dm-luoi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dm-luoi { grid-template-columns: 1fr; }
  .dm-the { padding: 1.25rem 1.25rem 1.4rem; }
}

/* ---------------------------------- Danh sách có / không có --- */

/* Dấu tick và dấu trừ vẽ bằng ::before thay vì ký tự — ký tự ✓ ✗ mỗi máy một
   nét, có máy còn ra ô vuông rỗng. */
.ds-dau { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .85rem; }
.ds-dau li {
  position: relative; padding-left: 2rem;
  font-size: .98rem; line-height: 1.65;
}
.ds-dau li::before {
  content: ''; position: absolute; left: 0; top: .34em;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(47,122,63,.12);
}
.ds-dau li::after {
  content: ''; position: absolute; left: 5px; top: .62em;
  width: 8px; height: 4px;
  border-left: 2px solid #2F7A3F; border-bottom: 2px solid #2F7A3F;
  transform: rotate(-45deg);
}
.ds-dau--tru li::before { background: rgba(168,50,38,.1); }
.ds-dau--tru li::after {
  left: 4.5px; top: .78em; width: 9px; height: 0;
  border-left: 0; border-bottom: 2px solid var(--son);
  transform: none;
}

/* ------------------------------------ Thi công · lưới ảnh ghép --- */

/* Ảnh chiếm phần lớn diện tích, chữ len vào hai ô của chính lưới nên mọi thứ
   bám chung một mạch dọc — không có khối chữ nào trôi lệch khỏi mép ảnh.
   Mười hai cột để chia được cả 2, 3, 4 và 6 phần. */
.tc-luoi {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.tc-o {
  position: relative;
  border-radius: var(--r-vua);
  overflow: hidden;
  background: var(--giay-sau);
}
.tc-o img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
/* Video giữ khung riêng của nó, không để .tc-o bóp méo. */
.tc-o--phim { background: var(--muc); }
.tc-o--phim .video { height: 100%; border-radius: 0; }
.tc-o--phim .video img { height: 100%; }

/* Hai ô chữ: nền giấy chứ không phải ảnh, nên bỏ phần cắt ảnh đi. */
.tc-o--chu-tren,
.tc-o--chu-duoi { background: transparent; overflow: visible; }

.tc-dan {
  margin: 0; font-family: var(--font-de);
  font-size: clamp(1.05rem, 1.6vw, 1.24rem); line-height: 1.6;
  color: var(--muc);
}
.tc-o--chu-duoi p {
  margin: 0 0 1rem; font-size: .98rem; line-height: 1.78; color: var(--muc-2);
}
.tc-o--chu-duoi p:last-of-type { margin-bottom: 1.5rem; }

.tc-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }

/* --- Chỗ đứng của từng ô, khổ rộng --- */
@media (min-width: 1001px) {
  .tc-o--phim     { grid-column: 1 / 7;  grid-row: 1 / 3; aspect-ratio: 16 / 11; }
  .tc-o--2        { grid-column: 7 / 10; grid-row: 1;     aspect-ratio: 4 / 3; }
  .tc-o--3        { grid-column: 7 / 10; grid-row: 2;     aspect-ratio: 4 / 3; }
  .tc-o--chu-tren { grid-column: 10 / 13; grid-row: 1;    display: grid; align-content: center; }
  .tc-o--4        { grid-column: 10 / 13; grid-row: 2;    aspect-ratio: 4 / 3; }

  .tc-o--chu-duoi { grid-column: 1 / 6;  grid-row: 3 / 5; padding-top: .5rem; }
  .tc-o--5        { grid-column: 6 / 9;  grid-row: 3;     aspect-ratio: 1; }
  .tc-o--6        { grid-column: 9 / 13; grid-row: 3;     aspect-ratio: 4 / 3; }
  .tc-o--7        { grid-column: 6 / 10; grid-row: 4;     aspect-ratio: 4 / 3; }
  .tc-o--8        { grid-column: 10 / 13; grid-row: 4;    aspect-ratio: 1; }
}

/* Khổ vừa: hai cột, chữ trải hết ngang cho dễ đọc. */
@media (max-width: 1000px) {
  .tc-luoi { grid-template-columns: repeat(2, 1fr); }
  .tc-o--phim { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .tc-o--chu-tren,
  .tc-o--chu-duoi { grid-column: 1 / -1; }
  .tc-o img { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .tc-luoi { grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Ảnh cuối lẻ ra thì cho nó trải hết, không để một ô trống cạnh nó. */
  .tc-o--8 { grid-column: 1 / -1; }
}

/* ---------------------------------------- Quy trình · lưới 8 ô --- */

/* Bốn cột hai hàng: thấy đủ tám bước trong một tầm mắt. */
.qt-luoi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(192,138,62,.22);
  border: 1px solid rgba(192,138,62,.22);
  border-radius: var(--r-lon); overflow: hidden;
  list-style: none; margin: 0; padding: 0;
}
.qt-luoi--rong { grid-template-columns: repeat(2, 1fr); }

/* Số bước đứng thành dòng riêng phía trên tiêu đề.
   Bản trước thả số cỡ lớn vào góc phải và chừa chỗ cho nó bằng padding — tiêu
   đề nào xuống hai dòng là chữ leo ngay lên số, đọc rối. Cho mỗi thứ một dòng
   thì dài ngắn thế nào cũng không đụng nhau. */
.qt-o {
  display: grid; align-content: start; gap: .5rem;
  padding: 1.5rem 1.4rem 1.7rem;
  background: var(--muc);
}
.qt-o__so {
  font-family: var(--font-de); font-weight: 600;
  font-size: 1.5rem; line-height: 1;
  color: var(--thep);
  letter-spacing: .02em;
}
.qt-o h3 {
  font-size: 1.06rem; line-height: 1.35;
  margin: 0; color: var(--giay-sang);
}
.qt-o p {
  margin: 0;
  font-size: .92rem; line-height: 1.65; color: #C3BFB7;
}

@media (max-width: 1100px) {
  .qt-luoi, .qt-luoi--rong { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .qt-luoi, .qt-luoi--rong { grid-template-columns: 1fr; }
  .qt-o { padding: 1.35rem 1.2rem 1.45rem; }
}

/* ------------------------------------ Dải dẫn sang trang chọn gỗ --- */

.go-dai {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--giay-sang); border: 1px solid var(--vien);
  color: var(--muc);
  transition: border-color var(--nhanh);
  border-radius: var(--r-lon);
}
.go-dai:hover { border-color: var(--son); color: var(--muc); }
.go-dai__chu strong {
  display: block; font-family: var(--font-de); font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: .5rem;
}
.go-dai__chu > span:last-child {
  display: block; color: var(--muc-nhat); font-size: .97rem; line-height: 1.7;
}
.go-dai__ds {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--vien); border: 1px solid var(--vien);
}
.go-dai__ds > span {
  display: grid; gap: .3rem; padding: .9rem .75rem;
  background: var(--giay-sang); text-align: center;
}
.go-dai__ds b { font-family: var(--font-de); font-weight: 500; font-size: 1.05rem; }
.go-dai__ds i { font-style: normal; font-size: .82rem; color: var(--muc-nhat); }

@media (max-width: 900px) {
  .go-dai { grid-template-columns: 1fr; }
  .go-dai__ds { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------- Hộp tư vấn xổ ra --- */

.hop-tv {
  width: min(640px, calc(100vw - 2.5rem));
  max-height: min(90svh, 880px);
  padding: 0; border: 0;
  background: var(--giay);
  border-radius: var(--r-lon);
  box-shadow: 0 30px 90px rgba(12,15,17,.4);
  overflow: auto;
}
.hop-tv::backdrop { background: rgba(12,15,17,.72); }

/* Nổi lên chứ không bật ra đột ngột. */
@keyframes cmd-hop-len {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.hop-tv[open] { animation: cmd-hop-len .28s cubic-bezier(.22,.61,.36,1); }

.hop-tv__trong { position: relative; padding: clamp(1.6rem, 4vw, 2.5rem); }

.hop-tv__dong {
  position: absolute; top: .85rem; right: .85rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-tron);
  color: var(--muc-nhat); cursor: pointer;
  transition: background var(--nhanh), color var(--nhanh);
}
.hop-tv__dong:hover { background: var(--giay-sau); color: var(--muc); }

.hop-tv__dau { margin-bottom: 1.75rem; padding-right: 2.5rem; }
.hop-tv__dau h2 { font-size: clamp(1.4rem, 3.4vw, 1.85rem); margin: .35rem 0 .6rem; }
.hop-tv__dau p { margin: 0; color: var(--muc-nhat); font-size: .98rem; }

.hop-tv__goi {
  margin: 1.5rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--vien);
  font-size: .95rem; color: var(--muc-nhat);
}
.hop-tv__goi a {
  font-family: var(--font-de); font-size: 1.15rem; font-weight: 600;
  color: var(--son); margin-inline: .4rem;
}
.hop-tv__goi span { display: block; font-size: .87rem; margin-top: .2rem; }

@media (prefers-reduced-motion: reduce) {
  .hop-tv[open] { animation: none; }
}

/* ------------------------------------- Công cụ tra cứu · xổ ra --- */

.cc-xo { display: grid; gap: .9rem; }

.cc-xo__muc {
  background: var(--giay-sang);
  border: 1px solid var(--vien);
  border-radius: var(--r-lon);
  overflow: hidden;
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}
.cc-xo__muc[open], .cc-xo__muc.dang-mo {
  border-color: var(--son);
  box-shadow: 0 10px 34px rgba(22,25,28,.09);
}

.cc-xo__dau {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.2rem 1.4rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;                 /* bỏ mũi tam giác mặc định */
}
.cc-xo__dau::-webkit-details-marker { display: none; }
.cc-xo__dau:hover .cc-xo__chu strong { color: var(--son); }
.cc-xo__dau:focus-visible { outline: 2px solid var(--son); outline-offset: -3px; }

.cc-xo__hinh {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px;
  background: var(--giay-sau); color: var(--son);
  border-radius: var(--r-vua);
  transition: background var(--nhanh), color var(--nhanh);
}
/* Mục đang mở: tên đổi màu và to lên, ô hình đảo nền — nhìn lướt là biết
   mình đang đứng ở đâu giữa ba công cụ. */
.cc-xo__muc[open] .cc-xo__hinh,
.cc-xo__hinh.dang-mo { background: var(--son); color: var(--giay-sang); }

.cc-xo__chu { display: grid; gap: .18rem; }
.cc-xo__chu strong {
  font-family: var(--font-de); font-weight: 600;
  font-size: 1.16rem; line-height: 1.25;
  transition: color var(--nhanh), font-size var(--nhanh);
}
.cc-xo__chu > span { font-size: .93rem; color: var(--muc-nhat); line-height: 1.55; }

.cc-xo__muc[open] .cc-xo__chu strong,
.cc-xo__chu strong.dang-mo { color: var(--son); font-size: 1.3rem; }
.cc-xo__muc[open] .cc-xo__chu > span,
.cc-xo__chu > span.dang-mo { color: var(--muc-2); }

.cc-xo__dau-mui {
  margin-left: auto; flex: none; color: var(--muc-nhat);
  transition: transform var(--nhanh), color var(--nhanh);
}
.cc-xo__muc[open] .cc-xo__dau-mui,
.cc-xo__dau-mui.dang-mo { transform: rotate(180deg); color: var(--son); }

.cc-xo__than { padding: 0 1.4rem 1.4rem; }
/* .cc có viền và bo góc riêng để dùng độc lập giữa bài; nằm trong mục xổ ra
   thì bỏ đi, không thì thành khung lồng khung. */
.cc-xo__than .cc {
  border: 0; padding: 0; margin: 0; background: transparent; border-radius: 0;
}
.cc-xo__than .cc__dau { padding-top: .4rem; }
/* Tên công cụ đã nằm ngay trên nút xổ — in lại lần nữa là thừa. */
.cc-xo__than .cc__dau .nhan,
.cc-xo__than .cc__dau h3 { display: none; }

/* --- Cảnh báo + lời gọi, đặt ngay dưới kết quả --- */

.cc-keu {
  margin-top: 1.75rem; padding: 1.25rem 1.35rem;
  background: var(--giay-sau);
  border-left: 3px solid var(--thep);
  border-radius: var(--r-vua);
}
.cc-keu__canh {
  margin: 0 0 1.1rem; font-size: .94rem; line-height: 1.7; color: var(--muc-2);
}
.cc-keu__canh span { color: var(--thep); margin-right: .35rem; font-weight: 600; }
.cc-keu__nut { display: flex; flex-wrap: wrap; gap: .7rem; }

@media (max-width: 640px) {
  .cc-xo__dau { padding: 1rem 1.05rem; gap: .85rem; }
  .cc-xo__hinh { width: 40px; height: 40px; }
  .cc-xo__chu strong { font-size: 1.06rem; }
  .cc-xo__muc[open] .cc-xo__chu strong,
  .cc-xo__muc.dang-mo .cc-xo__chu strong,
  .cc-xo__chu strong.dang-mo { font-size: 1.16rem; }
  .cc-xo__than { padding: 0 1.05rem 1.15rem; }
}

/* --------------------------------- Dải dẫn sang công cụ tra cứu --- */

/* Bản thân công cụ nằm ở trang riêng; đây chỉ là lối vào. Giữ mỏng để trang
   chủ không bị chặn ngang bởi hai khối cao gần một màn hình. */
.cc-dai {
  display: grid; grid-template-columns: 1fr 1.45fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
.cc-dai__chu h2 { margin-bottom: .5rem; }
.cc-dai__chu p { margin: 0; color: var(--muc-nhat); font-size: .98rem; max-width: 34ch; }

.cc-dai__ds { display: grid; gap: .9rem; }

.cc-the {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.15rem 1.25rem;
  background: var(--giay-sang); border: 1px solid var(--vien);
  color: var(--muc);
  transition: border-color var(--nhanh), transform var(--nhanh);
  border-radius: var(--r-vua);
}
.cc-the:hover { border-color: var(--son); color: var(--muc); transform: translateX(3px); }

.cc-the__hinh {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px;
  background: var(--giay-sau); color: var(--son);
  border-radius: var(--r-vua);
}
.cc-the__chu { display: grid; gap: .2rem; }
.cc-the__chu strong { font-family: var(--font-de); font-weight: 500; font-size: 1.1rem; }
.cc-the__chu span { font-size: .92rem; color: var(--muc-nhat); line-height: 1.55; }

.cc-the__mui { margin-left: auto; flex: none; color: var(--muc-nhat); transition: color var(--nhanh); }
.cc-the:hover .cc-the__mui { color: var(--son); }

@media (max-width: 900px) {
  .cc-dai { grid-template-columns: 1fr; }
  .cc-the__hinh { width: 42px; height: 42px; }
}

/* ------------------------------------------------ Cụm nút liên hệ --- */

/* Đối thủ xếp 5 nút nổi cố định chồng dọc, chiếm khoảng một phần ba chiều
   cao màn hình điện thoại và che nội dung suốt lúc cuộn. Ở đây một nút, bấm
   mới bung, và trên điện thoại thì nhường hẳn cho thanh gọi dưới đáy. */
.cum {
  position: fixed; right: 24px; bottom: 24px; z-index: 96;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}
.cum__ds {
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--nhanh), transform var(--nhanh), visibility var(--nhanh);
}
.cum.mo .cum__ds { opacity: 1; visibility: visible; transform: none; }

.cum__nut {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .6rem 1.1rem;
  background: var(--giay-sang); color: var(--muc);
  border: 1px solid var(--vien-dam);
  box-shadow: 0 6px 20px rgba(36,28,20,.14);
  font-size: .93rem; font-weight: 500; white-space: nowrap;
}
.cum__nut:hover { background: var(--muc); color: var(--giay-sang); border-color: var(--muc); }
.cum__nut--goi { background: var(--son); color: var(--giay-sang); border-color: var(--son); }
.cum__nut--goi:hover { background: var(--son-dam); color: var(--giay-sang); border-color: var(--son-dam); }

.cum__chinh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: none;
  background: var(--muc); color: var(--giay-sang);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 8px 24px rgba(36,28,20,.28);
  transition: background var(--nhanh);
}
.cum__chinh:hover { background: var(--son); }
.cum__dong { display: none; }
.cum.mo .cum__mo { display: none; }
.cum.mo .cum__dong { display: inline-flex; }

/* ------------------------------------------------------ Ô chọn form --- */

.truong--chon { border: 0; padding: 0; margin: 0 0 1.35rem; }
.truong--chon legend {
  padding: 0; margin-bottom: .6rem;
  font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muc-nhat);
}
.chon {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; margin-right: 1.5rem; cursor: pointer;
}
.chon input { width: 20px; height: 20px; accent-color: var(--son); }

/* ------------------------------------------------ Bố cục có cột bên --- */

/* Cột bên đặt bên trái theo yêu cầu. Cột chính cần min-width:0, nếu không thì
   bảng thông số và ảnh rộng sẽ nong ô lưới ra quá phần đất của nó và đẩy cột
   bên ra ngoài — lỗi kinh điển của grid có nội dung không co được. */
.co-cot {
  display: grid;
  grid-template-columns: 302px minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 2.8rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.co-cot__chinh { min-width: 0; }

/* Cột bên cuộn cùng trang, KHÔNG dính theo. Bản trước ghim hộp tư vấn lại
   một chỗ; bỏ theo yêu cầu — hộp cao 516px, ghim lại thì nó chiếm chỗ đó suốt
   cả trang và người xem phải nhìn nó thay vì nhìn công trình. */

.o-ben {
  background: var(--giay-sang);
  border: 1px solid var(--vien);
  border-radius: var(--r-vua);
  padding: 1.35rem 1.25rem;
}
.o-ben + .o-ben { margin-top: 1.1rem; }
.o-ben--tv { background: var(--giay-sau); }

.o-ben__ten {
  font-family: var(--font-de); font-size: 1.16rem; font-weight: 600;
  margin: 0 0 .55rem; color: var(--muc);
}
.o-ben__dan { font-size: .92rem; color: var(--muc-nhat); margin: 0 0 1.1rem; line-height: 1.65; }
.o-ben__dt { color: var(--son); font-weight: 600; white-space: nowrap; }

/* Ô nhập trong cột hẹp: bớt padding cho vừa, nhưng giữ cỡ chữ 1rem — ô nhập
   dưới 16px làm Safari trên iPhone tự phóng to trang khi bấm vào. */
.form-gon .truong { margin-bottom: .85rem; }
.form-gon .truong input { padding: .7rem .85rem; }
.form-gon .ghi-chu-form { margin: .8rem 0 0; font-size: .8rem; line-height: 1.6; }
.form-gon .bao-form { font-size: .92rem; padding: .8rem 1rem; margin-bottom: 1rem; }

.nut--rong { display: flex; width: 100%; }

/* Danh sách công trình nổi bật: ảnh nhỏ bên trái, chữ bên phải. */
.ds-ben { list-style: none; margin: 0; padding: 0; }
.ds-ben__muc + .ds-ben__muc { border-top: 1px solid var(--vien); }
.ds-ben__lk {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  gap: .8rem; align-items: center;
  padding: .7rem 0; min-height: 44px;
}
.ds-ben__lk::after { display: none; }
.ds-ben__anh img {
  display: block; width: 78px; height: 59px;
  object-fit: cover; border-radius: var(--r-nho);
}
.ds-ben__chu { display: flex; flex-direction: column; gap: .2rem; }
.ds-ben__ten {
  font-size: .9rem; font-weight: 500; line-height: 1.45; color: var(--muc);
  transition: color var(--nhanh);
}
.ds-ben__lk:hover .ds-ben__ten { color: var(--son); }
.ds-ben__so { font-size: .8rem; color: var(--muc-nhat); }

/* Mục kiến thức không có ảnh — bỏ cột ảnh, để chữ chạy hết bề ngang. */
.ds-ben__lk--chu { grid-template-columns: minmax(0, 1fr); }
.ds-ben--chu .ds-ben__ten { font-size: .94rem; }

.o-ben__them {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: .5rem; font-size: .9rem; font-weight: 500; color: var(--son);
}

/* Lưới ba cột nằm trong cột chính chỉ còn ~850px, mỗi thẻ 264px — hẹp hơn
   trang chủ một phần ba, ảnh và bốn thông số dồn lại thành mớ chữ nhỏ.
   Hai cột cho mỗi thẻ ~410px, gần với bề ngang thẻ ở trang chủ.
   Chỉ áp dụng từ 1001px trở lên: dưới mức đó lưới đã tự rút về một cột và
   quy tắc này không có media chặn sẽ kéo ngược lên hai cột, mỗi thẻ còn 157px
   trên màn 375px — ảnh công trình nhiều chi tiết nhỏ, chia đôi thì không
   nhìn ra gì. */
@media (min-width: 1001px) {
  .co-cot__chinh .luoi--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.o-ben--widget .o-widget + .o-widget { margin-top: 1.2rem; }

/* Dưới 1000px xếp một cột. Cột bên xuống DƯỚI bài viết: trên điện thoại, chèn
   form vào giữa tiêu đề và nội dung thì người vào đọc bài phải cuộn qua cả
   khối liên hệ mới tới chữ đầu tiên. */
@media (max-width: 1000px) {
  .co-cot { grid-template-columns: 1fr; }
  .co-cot .cot-ben { order: 2; }
  .co-cot__chinh { order: 1; }
}

/* ---------------------------------------------------------- Đáp ứng --- */

@media (max-width: 1000px) {
  :root { --cao-dau: 84px; }

  .thanh-tren { display: none; }
  .cum { display: none; }

  /* Trong panel trượt, mega trở thành danh sách gập bình thường. */
  .mega {
    position: static; width: auto; transform: none;
    opacity: 1; visibility: visible;
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 .8rem 1rem;
    display: none;
  }
  .dh .co-mega.dang-mo > .mega { display: block; transform: none; }
  .dh .co-mega:hover > .mega,
  .dh .co-mega:focus-within > .mega { display: none; }
  .dh .co-mega.dang-mo:hover > .mega,
  .dh .co-mega.dang-mo:focus-within > .mega { display: block; }

  .mega .khung { padding-inline: 0; }
  .mega__luoi { grid-template-columns: 1fr; gap: 1.25rem; }
  .dh .mega__ten { font-size: .93rem; }

  .dh__cap1 { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .dh .muc-cap-0 { border-bottom: 1px solid var(--vien); }
  .dh .co-mega { flex-wrap: wrap; justify-content: space-between; }
  .dh .co-mega > a { flex: 1; }
  .dh__mo { width: 44px; }
  .mega { flex-basis: 100%; }

  .dh__day {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
    margin-top: 1.75rem;
  }
  .dh__day .nut { width: 100%; }

  .xuong__luoi { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .thanh-chinh__trong { min-height: 64px; gap: .5rem; }

  /* Ở 375px, tên hiệu hai chữ dài xuống dòng và đội chiều cao đầu trang lên.
     Giữ trên một dòng, bỏ dòng phụ — logo đã nói đủ. */
  .hieu__ten { font-size: 1.12rem; white-space: nowrap; }
  .hieu__phu { display: none; }

  /* Số điện thoại đã có ở thanh đáy và trong panel menu; giữ thêm một nút
     nữa trên đầu trang chỉ tổ chiếm chỗ của tên hiệu. */
  .dt-dau { display: none; }

  /* .nut { width: 100% } bên dưới là dành cho nút trong nội dung. Nút nằm
     trên thanh đầu trang và trong cụm liên hệ phải giữ bề ngang tự nhiên. */
  .dau-trang .nut, .cum .nut { width: auto; }

  .o-tim__form { flex-direction: column; }
  .o-tim__form .nut { width: 100%; }

  .loc__nhan { min-width: 100%; }
  .the-da__ts { grid-template-columns: 1fr 1fr; gap: .65rem .8rem; }
  .xuong__so { grid-template-columns: 1fr; }
  .video__tron { width: 54px; height: 54px; }
}

/* ------------------------------------- Bài do workflow n8n sinh --- */

/* Bài viết bot đăng lên mang class `cmd-*` do tầng dựng HTML gắn sẵn. Toàn bộ
   giao diện nằm ở đây, không style nội tuyến — sửa dáng bài về sau chỉ đụng
   file này, không phải viết lại những bài đã đăng. */

.cmd-bai > * { max-width: var(--khung-hep); margin-inline: auto; }

/* Câu mở — đặt to hơn thân bài một nhịp để mắt bám vào trước. */
.cmd-dan {
  font-size: 1.12rem; line-height: 1.75; color: var(--muc-2);
  padding-left: 1.1rem; border-left: 3px solid var(--son);
  margin-bottom: 2.2rem;
}

.cmd-bai .cmd-h2 { margin-top: 2.6rem; }
.cmd-bai .cmd-h3 { margin-top: 1.9rem; }

.cmd-ds { padding-left: 0; list-style: none; margin-bottom: 1.4em; }
.cmd-ds li {
  position: relative; padding-left: 1.5rem; margin-bottom: .55rem;
  line-height: 1.75;
}
/* Dấu đầu dòng vẽ bằng hình thoi nhỏ — chấm tròn mặc định của trình duyệt
   nhìn lạc lõng cạnh chữ chân dày kiểu văn bia. */
.cmd-ds li::before {
  content: ''; position: absolute; left: .3rem; top: .72em;
  width: 7px; height: 7px; background: var(--thep);
  transform: rotate(45deg);
}

/* Lời dặn của thợ — thứ đáng nhớ nhất trong bài, cho nó nền riêng. */
.cmd-luu-y {
  background: var(--giay-sau); border-left: 3px solid var(--thep);
  border-radius: 0 var(--r-vua) var(--r-vua) 0;
  padding: 1.15rem 1.35rem; margin: 1.8rem auto;
}
.cmd-luu-y p { margin: 0; font-size: 1.02rem; line-height: 1.75; }
.cmd-luu-y::before {
  content: 'Lưu ý'; display: block;
  font-family: var(--font-than); font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muc-nhat); margin-bottom: .45rem;
}

/* Con số, mốc thời gian — in đậm không đủ, cho hẳn một dải. */
.cmd-nhan {
  font-family: var(--font-de); font-size: 1.16rem; font-weight: 600;
  color: var(--muc); text-align: center;
  padding: 1.1rem 1.3rem; margin: 1.8rem auto;
  border-block: 1px solid var(--vien);
}

/* Chỗ chờ chèn ảnh. Bot để `src` rỗng, người biên tập tự chọn ảnh thật —
   ngành này không dùng ảnh kho được, khách nhìn ra ngay.
   Khi chưa có ảnh, ô này phải TRÔNG NHƯ chỗ trống có chủ ý chứ không phải
   ảnh vỡ: `img` rỗng bị ẩn đi, thay bằng khung nét đứt kèm gợi ý cần chụp gì. */
.cmd-anh {
  margin: 2.2rem auto; max-width: var(--khung-hep);
}
.cmd-anh img { display: block; width: 100%; height: auto; border-radius: var(--r-vua); }
.cmd-anh img[src=""] { display: none; }
.cmd-anh:has(img[src=""])::before {
  content: 'Chỗ đặt ảnh — ' attr(data-goi-y);
  display: flex; align-items: center; justify-content: center;
  min-height: 190px; padding: 1.2rem;
  border: 1.5px dashed var(--vien-dam); border-radius: var(--r-vua);
  background: var(--giay-sau);
  font-size: .88rem; letter-spacing: .04em; color: var(--muc-nhat);
  text-align: center;
}
.cmd-anh figcaption {
  margin-top: .6rem; font-size: .87rem; line-height: 1.6;
  color: var(--muc-nhat); text-align: center;
}

.cmd-khep { margin-top: 2rem; }

/* Mục lục đầu bài. Bot chỉ dựng khối này khi bài từ 4 mục trở lên — bài ngắn
   mà có mục lục thì thừa. Số thứ tự dùng bộ đếm riêng để canh thẳng cột, vì
   list-style mặc định đẩy số ra ngoài lề không đều khi tiêu đề xuống dòng. */
.cmd-muc-luc {
  background: var(--giay-sau); border-radius: var(--r-vua);
  padding: 1.1rem 1.35rem; margin: 1.8rem 0 2.2rem;
  border-left: 3px solid var(--son);
}
.cmd-muc-luc__nhan {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muc-nhat); margin-bottom: .7rem;
}
.cmd-muc-luc ol {
  list-style: none; padding-left: 0; margin: 0;
  counter-reset: ml;
}
.cmd-muc-luc li {
  counter-increment: ml;
  display: flex; gap: .6rem; margin-bottom: .45rem;
  line-height: 1.55;
}
.cmd-muc-luc li::before {
  content: counter(ml) '.';
  flex: 0 0 auto; color: var(--son); font-weight: 600;
  font-size: .92rem; min-width: 1.2em;
}
.cmd-muc-luc a {
  font-size: .95rem; color: var(--muc);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.cmd-muc-luc a:hover { color: var(--son); border-bottom-color: currentColor; }

/* Neo tới mục không được nấp sau đầu trang dính. */
.cmd-bai h2[id] { scroll-margin-top: 90px; }

/* Việc cần làm trước khi đăng. Bot tự liệt kê các chỗ ảnh còn trống — bài
   trước bị đăng nguyên trạng với 4 ảnh vỡ vì không chỗ nào nhắc. Khối này
   CHỈ dành cho người duyệt, xoá đi trước khi bấm đăng. */
.cmd-viec {
  background: #fdf6e8; border: 1px dashed #c8a45c;
  border-radius: var(--r-vua); padding: 1rem 1.25rem;
  margin: 2rem 0; font-size: .94rem;
}
.cmd-viec__nhan {
  display: block; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #8a6520; margin-bottom: .55rem;
}
.cmd-viec ul { list-style: none; padding-left: 0; margin: 0; }
.cmd-viec li { margin-bottom: .4rem; padding-left: 1.4rem; position: relative; }
.cmd-viec li::before {
  content: '☐'; position: absolute; left: 0;
  color: #8a6520; font-size: 1.05em; line-height: 1.3;
}

/* Số liệu và tên riêng bot tự bôi đậm trong thân bài. Đậm vừa phải thôi —
   nặng quá thì cả đoạn nhìn như rừng chữ đen, mất tác dụng dẫn mắt. */
.cmd-bai p strong { font-weight: 650; color: var(--muc-dam, var(--muc)); }

.cmd-doc-them {
  background: var(--giay-sau); border-radius: var(--r-vua);
  padding: 1rem 1.25rem; font-size: .96rem;
}
.cmd-doc-them__nhan {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muc-nhat); margin-bottom: .6rem;
}
.cmd-doc-them ul { list-style: none; padding-left: 0; margin: 0; }
.cmd-doc-them li { margin-bottom: .45rem; padding-left: 1rem; position: relative; }
.cmd-doc-them li::before {
  content: '›'; position: absolute; left: 0;
  color: var(--son); font-weight: 600;
}

/* Nguồn tham khảo của bài tổng hợp. Chữ nhỏ hơn thân bài vì đây là phần tra
   cứu, nhưng vẫn giữ trên 13px cho nhóm khách tuổi cao đọc được. */
.cmd-nguon {
  margin-top: 2.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--vien);
}
.cmd-nguon__nhan {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muc-nhat); margin-bottom: .6rem;
}
.cmd-nguon ul { list-style: none; padding-left: 0; margin: 0; }
.cmd-nguon li { margin-bottom: .4rem; }
.cmd-nguon a {
  font-size: .88rem; color: var(--muc-nhat);
  overflow-wrap: anywhere;
}
.cmd-nguon a:hover { color: var(--son); }

@media (max-width: 640px) {
  .cmd-dan { font-size: 1.05rem; }
  .cmd-nhan { font-size: 1.06rem; padding: .9rem 1rem; }
  .cmd-luu-y { padding: 1rem 1.1rem; }
}

/* ------------------------------ Rút gọn cho màn hình điện thoại --- */

/* Trang chủ trên máy tính trải ra thoải mái thì đọc lướt được, nhưng cùng nội
   dung đó dồn vào cột 375px thành 28 màn hình cuộn — không ai cuộn hết. Ở đây
   cắt bớt phần diễn giải và xếp lại thành hai cột, giữ nguyên đường dẫn sang
   trang đầy đủ để ai muốn đọc kỹ vẫn đọc được.
   Chỉ nhắm ≤640px: từ 641px trở lên lưới auto-fit đã tự cho hai cột. */

/* Nút dẫn sang trang đầy đủ: ẩn mặc định, chỉ mọc ra ở điện thoại nơi nội dung
   đã bị cắt bớt. Khai báo TRƯỚC khối @media — để sau thì nó đè ngược lại
   display:block bên trong vì cùng độ cụ thể. */
.chi-dt { display: none; }

@media (max-width: 640px) {

  /* --- Hai thẻ một hàng: công trình, kiến thức, dịch vụ --- */
  .luoi--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }

  /* Lời gia chủ nói thì KHÔNG chia đôi. Thẻ .dg dùng chung lưới .luoi--3 nên
     bị kéo theo, mà lời chứng dài nhét vào cột 163px thành dải chữ cao 804px —
     cả khối phình từ 1272px lên 1829px, tức chia hai cột lại dài hơn để một.
     Cho mỗi thẻ chiếm trọn hàng: đỡ phải dùng :has() mà kết quả như cũ. */
  .dg { grid-column: 1 / -1; }

  /* Thẻ công trình bỏ bảng bốn thông số — ở nửa màn 375px mỗi ô chỉ còn ~75px,
     chữ xuống dòng từng từ. Giữ ảnh, tên và khoảng đầu tư: ba thứ quyết định
     có bấm vào hay không. Bảng đầy đủ vẫn nằm trong trang chi tiết. */
  .the-da__ts { display: none; }
  .the-da__than { padding: .85rem .9rem 1rem; }
  .the-da__ten { font-size: .95rem; line-height: 1.35; }
  .the-da__loai { font-size: .68rem; padding: .18rem .5rem; }
  .the-da__gia { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .the-da__gia > * { font-size: .85rem; }
  .the-da__meta { font-size: .8rem; }

  /* --- Bộ lọc: mỗi nhóm một hàng vuốt ngang thay vì bảy nút xếp dọc --- */
  .loc { gap: 1rem; }
  .loc__nut-ds {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Không có dòng này thì scroll-snap căn nút đầu vào mép viền chứ không phải
       mép padding, tức nó tự cuộn sẵn 18px và nút đầu dính sát cạnh màn hình. */
    scroll-padding-inline: var(--le);
    scrollbar-width: none;
    /* Tràn ra sát mép màn để lộ một phần nút cuối — đó là tín hiệu cho người
       xem biết còn vuốt được, không cần thêm mũi tên. */
    margin-inline: calc(var(--le) * -1);
    padding-inline: var(--le);
    padding-bottom: .3rem;
  }
  .loc__nut-ds::-webkit-scrollbar { display: none; }
  .loc__nut { flex: none; scroll-snap-align: start; padding: .5rem .95rem; font-size: .88rem; }

  /* Trang danh sách có bộ lọc riêng (.bo-loc), cùng bệnh: bảy nhãn xếp dọc
     chiếm 317px trước khi thấy công trình nào. Cho vuốt ngang y như trên. */
  .bo-loc {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Không có dòng này thì scroll-snap căn nút đầu vào mép viền chứ không phải
       mép padding, tức nó tự cuộn sẵn 18px và nút đầu dính sát cạnh màn hình. */
    scroll-padding-inline: var(--le);
    scrollbar-width: none;
    margin-inline: calc(var(--le) * -1);
    padding-inline: var(--le);
    margin-bottom: 1.75rem;
  }
  .bo-loc::-webkit-scrollbar { display: none; }
  .bo-loc a {
    flex: none; scroll-snap-align: start; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* --- Bốn con số xếp vuông 2×2 --- */
  .dai-so__luoi { grid-template-columns: 1fr 1fr; }
  .dai-so__o { padding: 1.1rem .7rem; }

  /* --- Dịch vụ, tám bước, xưởng: chỉ giữ tiêu đề, bỏ đoạn diễn giải --- */
  .the-dv p, .the-dv .lk-mui { display: none; }
  .the-dv { padding: 1rem .9rem 1.1rem; }
  .the-dv h3 { font-size: 1rem; line-height: 1.35; }

  .qt-luoi { grid-template-columns: 1fr 1fr; }
  .qt-o p { display: none; }
  .qt-o { padding: 1rem .85rem; }
  .qt-o h3 { font-size: .98rem; line-height: 1.35; }

  .xuong__buoc li p { display: none; }
  .xuong__buoc li h3 { font-size: .98rem; }

  .chi-dt { display: block; }
}

/* ------------------------------------------------------------- In --- */

@media print {
  .dau-trang, .chan, .thanh-goi, .dai-cta { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}