/**
 * BMS Vietnam — stylesheet chính, nạp ở MỌI trang.
 *
 * Gộp làm một file thay vì tách base/home/pages: toàn bộ CSS chỉ ~30KB (gzip ~7KB),
 * tách ra chỉ tiết kiệm vài KB nhưng dễ sót rule khi media query nằm chung cuối file.
 *
 * Selector gốc là #bms-home (id, chỉ trang chủ) đã đổi thành .bms-page (class)
 * để mọi trang dùng chung được.
 *
 * Bố cục:  Nền chung · Nút & mũi tên · Thành phần dùng lại (tag, pill, tabs, meta)
 *          · Trang chủ (hero, kpi, about, eco, solutions, partners)
 *          · Card dùng lại (sản phẩm, dự án, tin tức) · Dải CTA · Responsive
 */

/* ═══════════════════ Nền chung ═══════════════════ */

.bms-page {
  font-family: var(--bms-font-sans);
  color: var(--bms-body);
  background: var(--bms-canvas);
}
.bms-page *,
.bms-page *::before,
.bms-page *::after { box-sizing: border-box; }

.bms-container {
  width: 100%;
  max-width: var(--bms-container);
  margin-inline: auto;
  padding-inline: var(--bms-gutter);
}

.bms-page section { padding-block: var(--bms-space-7); }   /* 96 → 64 → 48px: khách vẫn thấy trống nhiều ở đầu section */

.bms-h2 {
  margin: 0 0 var(--bms-space-4);
  font-size: var(--bms-fs-h2);
  line-height: var(--bms-lh-tight);
  font-weight: 700;
  color: var(--bms-ink);
}
.bms-h2--upper { text-transform: uppercase; letter-spacing: .02em; }

.bms-lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--bms-fs-body);
  line-height: var(--bms-lh-normal);
  color: var(--bms-body);
}

.bms-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--bms-space-2);
  margin: 0 0 var(--bms-space-3);
  font-size: var(--bms-fs-label);
  font-weight: 600;
  letter-spacing: var(--bms-ls-label);
  text-transform: uppercase;
  color: var(--bms-green-600);
}
.bms-eyebrow__sep { opacity: .45; }

.bms-section-head { margin-bottom: var(--bms-space-5); }   /* 32px → 24px, kéo lưới lên sát tiêu đề */
.bms-section-head--center { text-align: center; }
.bms-section-head--center .bms-eyebrow { justify-content: center; }
.bms-section-head--center .bms-lead { margin-inline: auto; }

.bms-rule {
  display: block;
  width: 46px; height: 3px;
  margin: var(--bms-space-3) auto 0;
  border-radius: 2px;
  background: var(--bms-green-600);
}

.bms-hl { color: var(--bms-green-600); }
.bms-center { margin: var(--bms-space-7) 0 0; text-align: center; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Ảnh chưa upload — khung placeholder */
.bms-page img.is-placeholder {
  object-fit: contain;
  background: #f1f4f2;
  padding: 8%;
}

/* ═══════════════════ Nút & mũi tên ═══════════════════ */

.bms-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bms-space-3);
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--bms-radius-pill);
  font-size: var(--bms-fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bms-btn--solid { background: var(--bms-green-600); color: #fff; }
.bms-btn--solid:hover,
.bms-btn--solid:focus-visible { background: var(--bms-green-700); color: #fff; }

/* Nút đặt trên dải nền xanh đậm: nút xanh trên nền xanh tương phản quá thấp nên dùng nền trắng */
.bms-btn--sang { background: #fff; color: var(--bms-green-900); font-weight: 700; }
.bms-btn--sang:hover,
.bms-btn--sang:focus-visible { background: var(--bms-green-050); color: var(--bms-green-900); }
.bms-btn--sang:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.bms-btn--outline {
  background: transparent;
  color: var(--bms-green-600);
  border-color: var(--bms-green-600);
}
.bms-btn--outline:hover,
.bms-btn--outline:focus-visible { background: var(--bms-green-600); color: #fff; }

.bms-btn--ghost {
  background: rgba(255, 255, 255, .8);
  color: var(--bms-ink);
  border-color: var(--bms-border);
}
.bms-btn--ghost:hover,
.bms-btn--ghost:focus-visible { border-color: var(--bms-green-600); color: var(--bms-green-600); }

.bms-btn--sm { padding: 11px 20px; font-size: var(--bms-fs-label); }
.bms-btn--accent { color: var(--partner-accent); border-color: var(--partner-accent); }
.bms-btn--accent:hover,
.bms-btn--accent:focus-visible { background: var(--partner-accent); color: #fff; }

/* Mũi tên vẽ bằng CSS — không phụ thuộc font icon */
.bms-arrow {
  position: relative;
  flex: 0 0 auto;
  width: 16px; height: 1.5px;
  background: currentColor;
  transition: transform .18s ease;
}
.bms-arrow::after {
  content: "";
  position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.bms-btn:hover .bms-arrow,
.bms-link:hover .bms-arrow { transform: translateX(3px); }

.bms-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bms-space-2);
  font-size: var(--bms-fs-sm);
  font-weight: 600;
  color: var(--bms-green-600);
  text-decoration: none;
}

.bms-circle-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.bms-circle-arrow::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: -3px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.bms-circle-arrow:hover { background: currentColor; }
.bms-circle-arrow:hover::after { border-color: #fff; }

/* Thẻ nhãn */
.bms-tag {
  display: inline-block;
  /* Thẻ nhãn nằm trong flex column (card sản phẩm, card dự án) nên mặc định
     bị kéo giãn hết chiều rộng — ép nó ôm sát nội dung. */
  align-self: flex-start;
  width: fit-content;
  padding: 5px 12px;
  border: 1px solid var(--bms-green-600);
  border-radius: var(--bms-radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bms-green-600);
  background: rgba(5, 98, 64, .06);
}
.bms-tag--solid { background: var(--bms-green-600); color: #fff; border-color: transparent; }

.bms-pills { display: flex; flex-wrap: wrap; gap: var(--bms-space-2); margin: 0 0 var(--bms-space-4); padding: 0; list-style: none; }
.bms-pill {
  padding: 7px 12px;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-sm);
  font-size: var(--bms-fs-label);
  color: var(--bms-body);
  background: #fff;
}

.bms-meta { display: flex; flex-wrap: wrap; gap: var(--bms-space-5); margin: 0 0 var(--bms-space-3); padding: 0; list-style: none; }
.bms-meta__item { font-size: var(--bms-fs-label); color: var(--bms-muted); }

/* Nút lọc */
.bms-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--bms-space-2);
  margin-bottom: var(--bms-space-6);
}
.bms-tab {
  padding: 10px 22px;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-sm);
  background: #fff;
  font-size: var(--bms-fs-sm);
  font-weight: 500;
  color: var(--bms-body);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bms-tab:hover { border-color: var(--bms-green-600); color: var(--bms-green-600); }
.bms-tab.is-active { background: var(--bms-green-600); border-color: var(--bms-green-600); color: #fff; }

/* ═══════════════════ 1 · Hero ═══════════════════ */

.bms-hero {
  position: relative;
  padding-block: 0 var(--bms-space-7);
  background: linear-gradient(180deg, #fff 0%, var(--bms-green-050) 100%);
  overflow: hidden;
}
.bms-hero__slide { display: none; }
.bms-hero__slide.is-active { display: block; }

.bms-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center;
  gap: var(--bms-space-7);
  padding-block: var(--bms-space-8);
}

.bms-hero__title {
  margin: 0 0 var(--bms-space-5);
  font-size: var(--bms-fs-hero);
  line-height: 1.14;   /* 1.08 quá chật với dấu tiếng Việt */
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--bms-ink);
}
.bms-hero__title .bms-hl { display: block; }
/*
 * "Building Management" phải nằm trọn MỘT dòng, "System" xuống dòng riêng (.bms-hl đã là block).
 * ⚠️ Không dùng max-width theo ch: chuỗi này dài 19 ký tự nên 16ch ép vỡ dòng ngay giữa —
 * đó chính là lỗi 3 dòng lần trước. Khoá bằng nowrap, chỉ từ 992px trở lên để màn nhỏ không tràn.
 */
@media (min-width: 992px) {
  .bms-hero--anh .bms-hero__title { white-space: nowrap; }
}

.bms-hero__subtitle {
  margin: 0 0 var(--bms-space-4);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--bms-ink);
}
.bms-hero__desc {
  margin: 0 0 var(--bms-space-6);
  max-width: 46ch;
  line-height: var(--bms-lh-normal);
}
.bms-hero__actions { display: flex; flex-wrap: wrap; gap: var(--bms-space-4); }

.bms-hero__visual { position: relative; }
.bms-hero__img { display: block; width: 100%; height: auto; border-radius: var(--bms-radius-lg); }

/*
 * Biến thể "ảnh nền": khi có ảnh hero, ảnh phủ TOÀN BỘ dải banner thay vì nằm một bên.
 * Chữ đặt trên lớp phủ trắng mờ dần sang phải nên vẫn đọc rõ, còn các thẻ KPI vẫn nổi
 * đúng vị trí trên nền ảnh.
 */
/* Bỏ padding 96px mà quy tắc chung .bms-page section áp lên — đó là hai dải trắng
   kẹp trên dưới ảnh nền. Ảnh phải chạm sát header và sát section kế tiếp. */
.bms-page .bms-hero { padding-block: 0; }
.bms-hero--anh { background: var(--bms-green-050); }
.bms-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bms-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bms-hero--anh .bms-hero__slide { position: relative; }
.bms-hero--anh .bms-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 26%, rgba(255,255,255,.94) 42%, rgba(255,255,255,.5) 68%, rgba(255,255,255,.12) 100%);
}
.bms-hero--anh .bms-hero__inner { position: relative; z-index: 1; min-height: 520px; padding-block: var(--bms-space-9); }
/* Cột phải chỉ còn để đặt các thẻ KPI — ảnh đã nằm ở lớp nền */
.bms-hero--anh .bms-hero__img { display: none; }
.bms-hero--anh .bms-hero__visual { align-self: stretch; }

/* Thẻ thông số nổi trên ảnh */
.bms-kpis { position: absolute; inset: 0; pointer-events: none; }
/*
 * Ở bố cục ảnh phủ toàn dải, tiêu đề nằm nửa TRÁI còn toà nhà nằm nửa PHẢI. Bản thiết kế đặt
 * toàn bộ thẻ KPI trên toà nhà, nên khoá vùng KPI vào nửa phải — dù khách chọn vị trí
 * "trái-trên" thì thẻ cũng không bao giờ đè lên chữ như đang xảy ra.
 */
.bms-hero--anh .bms-kpis { inset: 0 0 0 50%; }
.bms-kpi {
  position: absolute;
  min-width: 148px;
  padding: 12px 14px;
  border-radius: var(--bms-radius);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--bms-shadow);
  backdrop-filter: blur(4px);
}
.bms-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-2); }
.bms-kpi__label { font-size: 11px; font-weight: 600; color: var(--bms-ink); }
.bms-kpi__icon { width: 22px; height: 22px; object-fit: contain; }
.bms-kpi__value { display: block; margin-top: 4px; font-size: 1.125rem; font-weight: 700; color: var(--bms-ink); }
.bms-kpi__value--xanh { color: var(--bms-green-600); }
.bms-kpi__value--cam { color: #e06a2b; }
.bms-kpi__note { font-size: 10px; color: var(--bms-muted); }

.bms-kpi--trai-tren   { top: 8%;  left: -4%; }
.bms-kpi--trai-giua   { top: 38%; left: -4%; }
.bms-kpi--trai-duoi   { top: 66%; left: -4%; }
.bms-kpi--phai-tren   { top: 8%;  right: -4%; }
.bms-kpi--phai-giua   { top: 38%; right: -4%; }
.bms-kpi--phai-duoi   { top: 66%; right: -4%; }
.bms-kpi--duoi-giua   { bottom: 4%; left: 50%; transform: translateX(-50%); }

.bms-hero__dots { display: flex; gap: var(--bms-space-2); }
.bms-dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: #cfd8d2;
  cursor: pointer;
  transition: background-color .18s ease, width .18s ease;
}
.bms-dot.is-active { width: 22px; border-radius: var(--bms-radius-pill); background: var(--bms-green-600); }

/* ═══════════════════ 2 · Về BMS Vietnam ═══════════════════ */

.bms-about { background: #fff; }
.bms-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: center;
  gap: var(--bms-space-8);
}
.bms-about__media { position: relative; }
.bms-about__media::before {
  content: "";
  position: absolute; left: -18px; bottom: -18px;
  width: 62%; height: 72%;
  border-radius: var(--bms-radius-lg);
  background: var(--bms-green-600);
  opacity: .12;
}
.bms-about__img {
  position: relative;
  display: block; width: 100%; height: auto;
  border-radius: var(--bms-radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.bms-about__desc p { margin: 0 0 var(--bms-space-4); line-height: var(--bms-lh-normal); }

.bms-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bms-space-4);
  margin: var(--bms-space-6) 0;
  padding: 0;
  list-style: none;
}
.bms-stat__icon { width: 34px; height: 34px; object-fit: contain; margin-bottom: var(--bms-space-3); }
.bms-stat__value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--bms-green-600); line-height: 1.1; }
.bms-stat__label { display: block; margin-top: 4px; font-size: var(--bms-fs-label); color: var(--bms-muted); }

/* ═══════════════════ 3 · Hệ sinh thái BMS ═══════════════════
   Dựng theo bản thiết kế "BMS Ecosystem": ảnh toà nhà ở giữa có vòng sáng thở, hai bên là
   các hạng mục nối vào bằng nét đứt và chấm tròn.

   Danh sách in ra theo thứ tự ĐAN XEN trái–phải. Từ 860px trở lên, CSS xếp lại về đúng cột
   và đúng hàng nhờ hai biến --hang (số hàng) và lớp --trai / --phai. Dưới 860px giữ nguyên
   thứ tự đan xen, chuyển thành lưới 2 cột thẻ — đọc theo từng cặp như bản thiết kế.
   ═══════════════════════════════════════════════════════════ */
.bms-eco { position: relative; isolation: isolate; overflow: hidden; background: #fff; }

/* Biến thể nền: một quầng sáng lớn ở GIỮA thay cho hai quầng ở góc */
.bms-tlbg--eco .bms-tlbg__luoi {
  -webkit-mask-image: radial-gradient(90% 80% at 50% 55%, #000 10%, transparent 76%);
          mask-image: radial-gradient(90% 80% at 50% 55%, #000 10%, transparent 76%);
}
.bms-tlbg--eco .bms-tlbg__luoi--nho {
  opacity: .5;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 38%);
          mask-image: linear-gradient(to top, #000 0%, transparent 38%);
}
.bms-tlbg__quang--giua {
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 900px; height: 700px;
  background: radial-gradient(closest-side, rgba(5, 98, 64, .09), transparent 72%);
}
.bms-tlbg--eco .bms-tlbg__day { height: 260px; }

/* ── Lưới: cột trái · ảnh · cột phải ── */
.bms-eco__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
  align-items: center;
  column-gap: 0;
  row-gap: var(--bms-space-5);
}
.bms-eco__ds { display: contents; margin: 0; padding: 0; list-style: none; }

/* ── Khối giữa: ảnh toà nhà + vòng sáng ── */
.bms-eco__center {
  position: relative;
  grid-column: 2;
  /*
   * Phải dùng span chứ không phải 1 / -1: lưới này không khai báo grid-template-rows nên
   * mọi hàng đều là hàng ngầm, mà -1 lại trỏ tới cạnh cuối của lưới TƯỜNG MINH — hoá ra
   * chỉ chiếm đúng một hàng, khiến hàng đầu bị kéo cao 440px còn các hàng sau dồn xuống đáy.
   */
  grid-row: 1 / span var(--eco-hang, 5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 440px;
  margin: 0;
  animation: bms-eco-hien 1s ease .1s both;
}
.bms-eco__quang, .bms-eco__vong { position: absolute; pointer-events: none; }
.bms-eco__quang {
  width: 320px; height: 320px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(5, 98, 64, .16), transparent 70%);
  animation: bms-eco-tho 5s ease-in-out infinite;
}
.bms-eco__vong { width: 270px; height: 270px; border-radius: 999px; border: 1px solid rgba(5, 98, 64, .14); }
/* Bóng đổ nằm TRONG dòng, ngay dưới ảnh — neo theo đáy khung thì ảnh ngang sẽ bị hụt bóng */
.bms-eco__bong {
  position: relative;
  flex: 0 0 auto;
  width: min(220px, 84%); height: 30px; margin-top: -14px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(16, 20, 19, .16), transparent 72%);
  filter: blur(2px);
  pointer-events: none;
}
.bms-eco__img {
  position: relative;
  display: block;
  width: auto; max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--bms-radius-lg);
}
.bms-eco__img--trong {
  width: 240px; height: 340px;
  background: var(--bms-green-050);
  border: 1px dashed rgba(5, 98, 64, .2);
}

/* ── Hạng mục ── */
.bms-eco__item {
  grid-row: var(--hang, 1);
  display: flex; align-items: center; gap: 12px;
  animation: bms-eco-len .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(.1s + var(--hang, 1) * .06s);
}
/* Cột trái: chữ → icon → nét đứt → chấm, căn về phía toà nhà */
.bms-eco__item--trai { grid-column: 1; justify-self: end; text-align: right; }
/* Cột phải soi gương lại bằng row-reverse, không cần đổi thứ tự trong HTML */
.bms-eco__item--phai { grid-column: 3; justify-self: start; flex-direction: row-reverse; text-align: left; }

/* Nhích theo cung tròn: hàng giữa nhô ra sát toà nhà nhất */
.bms-eco__item--trai { margin-right: 6px; }
.bms-eco__item--phai { margin-left: 6px; }
.bms-eco__item--trai.bms-eco__item--nho { margin-right: 0; }
.bms-eco__item--phai.bms-eco__item--nho { margin-left: 0; }

.bms-eco__text strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--bms-ink); white-space: nowrap; }
.bms-eco__text small { display: block; margin-top: 3px; font-size: var(--bms-fs-label); line-height: 1.4; color: var(--bms-muted); white-space: nowrap; }

.bms-eco__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(5, 98, 64, .16);
  border-radius: 999px;
  background: #fff;
  color: var(--bms-green-600);
  box-shadow: 0 10px 26px -16px rgba(16, 20, 19, .45);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, border-color .25s ease;
}
.bms-eco__item:hover .bms-eco__icon {
  transform: scale(1.07);
  border-color: rgba(5, 98, 64, .45);
  box-shadow: 0 16px 30px -16px rgba(5, 98, 64, .5);
}
.bms-eco__icon .bms-ico { width: 26px; height: 26px; }

.bms-eco__net {
  flex: 0 0 auto;
  width: 28px; height: 2px;
  background-image: repeating-linear-gradient(to right, rgba(5, 98, 64, .45) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
}
.bms-eco__cham {
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--bms-green-600);
  box-shadow: 0 0 0 4px rgba(5, 98, 64, .12);
}
.bms-eco__item--trai .bms-eco__cham { margin-left: -4px; }
.bms-eco__item--phai .bms-eco__cham { margin-right: -4px; }

@keyframes bms-eco-len { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes bms-eco-hien { from { opacity: 0; } to { opacity: 1; } }
@keyframes bms-eco-tho { 0%, 100% { opacity: .28; transform: scale(1); } 50% { opacity: .7; transform: scale(1.08); } }

/* ── Dưới 860px: ảnh trên, bên dưới là lưới 2 cột thẻ ── */
@media (max-width: 859.98px) {
  .bms-eco__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--bms-space-4);
    max-width: 640px; margin-inline: auto;
  }
  .bms-eco__center { grid-column: 1 / -1; grid-row: 1; min-height: 0; margin-bottom: var(--bms-space-4); }
  .bms-eco__vong, .bms-eco__bong { display: none; }
  .bms-eco__img { max-height: 340px; }

  /* Mỗi hạng mục thành một thẻ: icon tròn nền xanh nhạt bên trái, chữ bên phải */
  .bms-eco__item,
  .bms-eco__item--trai,
  .bms-eco__item--phai {
    grid-column: auto; grid-row: auto;
    justify-self: stretch;
    margin: 0;
    flex-direction: row; text-align: left;
    align-items: center; gap: 12px;
    padding: var(--bms-space-4);
    border: 1px solid rgba(16, 20, 19, .07);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px -20px rgba(16, 20, 19, .5);
    animation-delay: 0s;
  }
  .bms-eco__item .bms-eco__text { order: 2; min-width: 0; }
  .bms-eco__item .bms-eco__icon {
    order: 1;
    width: 48px; height: 48px;
    border: 0;
    background: rgba(5, 98, 64, .07);
    box-shadow: none;
  }
  .bms-eco__icon .bms-ico { width: 22px; height: 22px; }
  .bms-eco__net, .bms-eco__cham { display: none; }
  .bms-eco__text strong { font-size: .9375rem; white-space: normal; }
  .bms-eco__text small { font-size: .78125rem; white-space: normal; }
}

/*
 * Dưới 460px vẫn giữ HAI cột như khách muốn, nhưng thẻ chuyển sang dạng DỌC — icon nằm
 * trên, chữ nằm dưới. Để icon bên trái thì phần chữ chỉ còn ~80px, tên dài như
 * "Indoor Air Quality" sẽ vỡ 3–4 dòng; xếp dọc thì chữ được trọn bề rộng thẻ.
 */
@media (max-width: 459.98px) {
  .bms-eco__grid { gap: var(--bms-space-3); }
  .bms-eco__item,
  .bms-eco__item--trai,
  .bms-eco__item--phai {
    flex-direction: column; align-items: flex-start; gap: 10px;
    padding: var(--bms-space-3);
  }
  .bms-eco__item .bms-eco__icon { width: 42px; height: 42px; }
  .bms-eco__icon .bms-ico { width: 20px; height: 20px; }
  .bms-eco__text strong { font-size: .875rem; line-height: 1.3; }
  .bms-eco__text small { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bms-eco__item, .bms-eco__center, .bms-eco__quang { animation: none; }
}

/* ═══════════════════ 4 · Giải pháp ═══════════════════ */

.bms-solutions { background: #fff; }
.bms-solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(220px, 1fr));
  gap: var(--bms-space-4);
}
.bms-solution:first-child { grid-row: span 2; }

.bms-solution {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bms-radius);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.bms-solution__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bms-solution::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  /* Tối sớm hơn: trên mobile thẻ thấp nên chữ rơi đúng vùng mờ nhất, không đọc được */
  background: linear-gradient(180deg, rgba(1, 46, 26, .28) 0%, rgba(1, 46, 26, .68) 34%, rgba(1, 46, 26, .88) 62%, rgba(1, 46, 26, .96) 100%);
  transition: opacity .2s ease;
}
.bms-solution:hover::after { opacity: .88; }

.bms-solution__body {
  display: flex; flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 220px;
  padding: var(--bms-space-5);
  gap: var(--bms-space-2);
}
.bms-solution__title { font-size: 1.125rem; font-weight: 700; }
.bms-solution--lead .bms-solution__title { font-size: 1.35rem; }
.bms-solution__desc { font-size: var(--bms-fs-sm); line-height: 1.5; opacity: .92; }
.bms-solution .bms-circle-arrow { margin-top: var(--bms-space-3); color: #fff; }

/* ═══════════════════ 5 · Đối tác công nghệ ═══════════════════ */

.bms-partners { background: var(--bms-green-050); }
.bms-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bms-space-5);
}
.bms-partner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius);
  background: #fff;
}
.bms-partner__body { padding: var(--bms-space-6); display: flex; flex-direction: column; gap: var(--bms-space-4); }
.bms-partner__logo { max-width: 170px; height: auto; }
.bms-partner__desc { margin: 0; font-size: var(--bms-fs-sm); line-height: 1.6; }
.bms-partner__desc .bms-hl { color: var(--partner-accent); font-weight: 600; }
.bms-partner__body .bms-btn { align-self: flex-start; margin-top: auto; }
.bms-partner__img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }

/* ═══════════════════ 6 · Sản phẩm nổi bật ═══════════════════ */

.bms-products { background: #fff; }
.bms-products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bms-space-4);
}
.bms-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bms-space-3);
  padding: var(--bms-space-5);
  border-radius: var(--bms-radius);
  background: var(--bms-green-050);
  transition: box-shadow .2s ease, transform .2s ease;
}
.bms-product:hover { box-shadow: var(--bms-shadow-lg); transform: translateY(-2px); }
.bms-product__body { display: flex; flex-direction: column; gap: var(--bms-space-3); }
.bms-product__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--bms-ink); }
.bms-product__desc { margin: 0; font-size: var(--bms-fs-label); line-height: 1.55; color: var(--bms-body); }
.bms-product .bms-circle-arrow { margin-top: auto; color: var(--bms-green-600); }
.bms-product__img { display: block; width: 100%; height: auto; object-fit: contain; align-self: center; }

/* ═══════════════════ 7 · Dự án tiêu biểu ═══════════════════ */

.bms-projects { background: var(--bms-green-050); }

.bms-project {
  overflow: hidden;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius);
  background: #fff;
}
.bms-project--lead {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  margin-bottom: var(--bms-space-4);
}
.bms-project__img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.bms-project--lead .bms-project__img { aspect-ratio: auto; min-height: 320px; }
.bms-project__body { padding: var(--bms-space-6); display: flex; flex-direction: column; gap: var(--bms-space-3); }
.bms-project__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--bms-ink); }
.bms-project__desc { margin: 0; font-size: var(--bms-fs-sm); line-height: 1.6; }
.bms-project__pill-label { margin: 0; font-size: var(--bms-fs-sm); font-weight: 600; color: var(--bms-ink); }
.bms-project__body .bms-link { margin-top: auto; align-self: flex-start; }

.bms-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bms-space-4);
}
.bms-projects__grid .bms-project__body { padding: var(--bms-space-5); }
.bms-projects__grid .bms-project__title { font-size: 1.05rem; }

/* Ẩn khi lọc */
[data-bms-item-group].is-hidden { display: none; }

/* ═══════════════════ 8 · Tin tức ═══════════════════ */

.bms-newsroom { background: #fff; }
/* Thiết kế: 1 thẻ lớn bên trái + 3 thẻ nhỏ bên phải, TẤT CẢ trên cùng một hàng
   và bằng chiều cao nhau. Thẻ lớn rộng hơn mỗi thẻ nhỏ khoảng 1,35 lần. */
.bms-newsroom__grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--bms-space-4);
}
.bms-news { border-radius: var(--bms-radius); overflow: hidden; background: #fff; border: 1px solid var(--bms-border); }
.bms-news__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.bms-news__media { position: relative; display: block; }
.bms-news__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.bms-news__media .bms-tag { position: absolute; left: 12px; bottom: 12px; }
.bms-news__body { display: flex; flex-direction: column; gap: var(--bms-space-2); padding: var(--bms-space-5); flex: 1; }
.bms-news__date { font-size: var(--bms-fs-label); color: var(--bms-muted); }
.bms-news__title { font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--bms-ink); }
.bms-news__body .bms-link { margin-top: auto; }

/* Thẻ lớn: ảnh nền + chữ đè lên */
.bms-news--lead { border: 0; background: var(--bms-green-900); }
.bms-news--lead .bms-news__link { position: relative; }
.bms-news--lead .bms-news__media { position: absolute; inset: 0; }
.bms-news--lead .bms-news__img { height: 100%; aspect-ratio: auto; }
.bms-news--lead .bms-news__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1, 46, 26, .15) 0%, rgba(1, 46, 26, .93) 72%);
}
.bms-news--lead .bms-news__media .bms-tag { top: 14px; left: 14px; bottom: auto; z-index: 1; }
/* Chừa chỗ cho viên nhãn ở góc trên trái: tiêu đề dài thì ngày đăng bị đẩy lên đè vào nhãn */
.bms-news--lead .bms-news__body { position: relative; justify-content: flex-end; min-height: 340px; padding: calc( var(--bms-space-6) + 34px ) var(--bms-space-6) var(--bms-space-6); }
.bms-news--lead .bms-news__date { color: rgba(255, 255, 255, .78); }
.bms-news--lead .bms-news__title { font-size: 1.4rem; color: #fff; }
.bms-news--lead .bms-link { color: #fff; }

/* ═══════════════════ 9 · Dải nhận tư vấn ═══════════════════ */

/*
 * Bố cục theo bản thiết kế trang 4, khối cuối: nền ảnh toà nhà phủ xanh đậm, và MỘT
 * thẻ trắng căn giữa chứa tất cả — tiêu đề, mô tả, hàng nhập liệu, hàng cam kết.
 * (Trước đây tiêu đề + mô tả nằm NGOÀI thẻ, trên nền xanh — không đúng mẫu.)
 */
.bms-page .bms-cta { position: relative; isolation: isolate; color: #fff; padding-block: var(--bms-space-6); }
.bms-cta { position: relative; isolation: isolate; color: #fff; }
.bms-cta__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bms-cta__bgimg { width: 100%; height: 100%; object-fit: cover; }
.bms-cta::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 73, 47, .94) 0%, rgba(1, 46, 26, .97) 100%);
}
.bms-cta__inner { text-align: center; }

.bms-cta__card {
  max-width: 960px;
  margin-inline: auto;
  padding: var(--bms-space-7);
  border-radius: var(--bms-radius-lg);
  background: #fff;
  box-shadow: var(--bms-shadow-lg);
  text-align: center;
  color: var(--bms-body);
}
/*
 * Mặc định tiêu đề/mô tả dải CTA nằm TRÊN NỀN XANH ĐẬM (trang chủ) → phải là chữ trắng.
 * Trang Sản phẩm đặt chúng bên trong thẻ trắng nên đảo lại màu ở biến thể .bms-cta__card.
 */
.bms-cta__title {
  margin: 0 0 var(--bms-space-3);
  font-size: var(--bms-fs-h2); font-weight: 800; line-height: 1.25;
  color: #fff;
}
.bms-cta__desc {
  margin: 0 auto var(--bms-space-6); max-width: 56ch;
  font-size: var(--bms-fs-sm); line-height: var(--bms-lh-normal); color: rgba(255, 255, 255, .92);
}
.bms-cta__card .bms-cta__title { color: var(--bms-green-900); }
.bms-cta__card .bms-cta__desc { color: var(--bms-body); }

.bms-cta__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, auto);
  gap: var(--bms-space-3);
  align-items: center;
  text-align: left;
}
.bms-cta__form .bms-field { margin: 0; }
.bms-cta__form input[type="text"],
.bms-cta__form input[type="tel"],
.bms-cta__form input[type="email"] {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--bms-border);
  border-radius: 8px;
  font: inherit;
  font-size: var(--bms-fs-sm);
  color: var(--bms-ink);
  background: #fff;
}
.bms-cta__form input:focus-visible { outline: 2px solid var(--bms-green-600); outline-offset: 1px; border-color: var(--bms-green-600); }
.bms-cta__form .bms-btn { width: 100%; justify-content: center; padding-block: 15px; border-radius: 8px; }

/* Hàng cam kết: icon trong vòng tròn xanh nhạt, một dòng chữ, KHÔNG vạch ngăn (theo mẫu) */
.bms-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bms-space-4);
  margin: var(--bms-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.bms-trust__item { display: flex; align-items: center; justify-content: center; gap: var(--bms-space-3); }
.bms-trust__icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: var(--bms-radius-pill);
  background: var(--bms-green-050); color: var(--bms-green-600);
}
.bms-trust__icon svg { width: 20px; height: 20px; }
.bms-trust__icon img { width: 20px; height: 20px; object-fit: contain; }
.bms-trust__text strong { display: block; font-size: var(--bms-fs-sm); font-weight: 600; color: var(--bms-ink); }
.bms-trust__text small { display: block; margin-top: 2px; font-size: var(--bms-fs-label); color: var(--bms-muted); }


/* ═══════════════════════════════════════════════════════════
   Desktop nhỏ — ≤1199px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .bms-kpi { min-width: 130px; padding: 10px 12px; }
  .bms-kpi--trai-tren, .bms-kpi--trai-giua, .bms-kpi--trai-duoi { left: 0; }
  .bms-kpi--phai-tren, .bms-kpi--phai-giua, .bms-kpi--phai-duoi { right: 0; }
  .bms-product { grid-template-columns: 1fr; }
  .bms-product__media { order: -1; }
  .bms-product__img { max-height: 150px; }
}

/* ═══════════════════════════════════════════════════════════
   Tablet — ≤991px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  :root { --bms-space-9: 64px; }

  .bms-hero__inner { grid-template-columns: 1fr; gap: var(--bms-space-6); padding-block: var(--bms-space-7); }
  .bms-hero__text { order: 1; }
  .bms-hero__visual { order: 2; }
  /* Trên tablet thẻ thông số xếp thành lưới dưới ảnh cho dễ đọc */
  .bms-kpis { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bms-space-3); margin-top: var(--bms-space-4); }
  .bms-kpi { position: static; transform: none; min-width: 0; }

  .bms-about__grid { grid-template-columns: 1fr; gap: var(--bms-space-6); }
  .bms-about__media::before { display: none; }
  .bms-about__img { aspect-ratio: 16 / 10; }

  /* row-reverse đảo trục: flex-start là mép PHẢI. Muốn dồn về mép trái phải dùng flex-end. */

  .bms-solutions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .bms-solution:first-child { grid-row: auto; grid-column: span 2; }

  .bms-partners__grid { grid-template-columns: 1fr; }

  .bms-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bms-project--lead { grid-template-columns: 1fr; }
  .bms-project--lead .bms-project__img { min-height: 0; aspect-ratio: 16 / 9; }
  .bms-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bms-newsroom__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-news--lead { grid-column: span 2; }
  .bms-news--lead .bms-news__body { min-height: 260px; }

  .bms-cta__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-cta__form .bms-field--submit { grid-column: span 2; }
  .bms-cta__form .bms-btn { width: 100%; justify-content: center; }
  .bms-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-trust__item + .bms-trust__item { border-left: 0; padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════
   Mobile — ≤767px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  :root { --bms-space-9: 48px; --bms-gutter: 16px; }

  .bms-hero__actions .bms-btn { flex: 1 1 100%; justify-content: center; }
  .bms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bms-space-5); }


  .bms-solutions__grid { grid-template-columns: 1fr; }
  .bms-solution:first-child { grid-column: auto; }
  /* Thẻ cao hơn thì khối chữ (căn đáy) rơi xuống vùng nền tối, đọc rõ */
  .bms-solution__body { min-height: 280px; }

  .bms-partner { grid-template-columns: 1fr; }
  .bms-partner__media { order: -1; }
  .bms-partner__img { min-height: 0; aspect-ratio: 16 / 9; }

  .bms-products__grid,
  .bms-projects__grid,
  .bms-newsroom__grid { grid-template-columns: 1fr; }
  .bms-news--lead { grid-column: auto; }

  .bms-cta__card { padding: var(--bms-space-5); }
  .bms-cta__form { grid-template-columns: 1fr; }
  .bms-cta__form .bms-field--submit { grid-column: auto; }
  .bms-trust { grid-template-columns: 1fr; gap: var(--bms-space-4); }

  .bms-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .bms-tab { flex: 0 0 auto; }
}

/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  .bms-page *,
  .bms-page *::before,
  .bms-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ═══════════════════════════════════════════════════════════
   HEADER  —  logo · menu 7 mục · mega menu · pill hotline
   ═══════════════════════════════════════════════════════════ */

.bms-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 20px; background: var(--bms-green-600); color: #fff;
  border-radius: 0 0 var(--bms-radius) 0; text-decoration: none;
}
.bms-skip:focus { left: 0; }

.bms-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--bms-border);
}
.bms-header__inner {
  display: flex; align-items: center; gap: var(--bms-space-5);
  min-height: 76px;
}

.bms-header__brand { flex: 0 0 auto; text-decoration: none; }
.bms-header__logo { display: block; max-height: 52px; width: auto; }

/* Logo chữ dùng khi chưa upload ảnh logo */
.bms-header__wordmark { display: flex; align-items: center; gap: 10px; }
.bms-header__mark {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 8px 2px 8px 2px;
  background: var(--bms-green-brand);
  color: #fff; font-weight: 800; font-size: 24px; line-height: 1;
}
.bms-header__names strong {
  display: block; font-size: 1.2rem; font-weight: 800;
  letter-spacing: .01em; color: var(--bms-green-brand); line-height: 1.1;
}
.bms-header__names strong span { color: var(--bms-ink); font-weight: 700; }
.bms-header__names small {
  display: block; margin-top: 2px;
  font-size: 8.5px; letter-spacing: .06em; color: var(--bms-muted);
}

/* ── Menu ── */
.bms-nav { flex: 1 1 auto; }
.bms-nav__list {
  display: flex; align-items: center; justify-content: center;
  gap: var(--bms-space-6);
  margin: 0; padding: 0; list-style: none;
}
.bms-nav__item { position: relative; }
.bms-nav__link,
.bms-nav__list > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 26px 0;
  font-size: var(--bms-fs-sm); font-weight: 600;
  color: var(--bms-ink); text-decoration: none; white-space: nowrap;
  transition: color .18s ease;
}
.bms-nav__link:hover,
.bms-nav__list > li > a:hover { color: var(--bms-green-600); }

/* Mục đang xem: chữ xanh + gạch chân có chấm giữa */
.bms-nav__item.is-current > .bms-nav__link,
.bms-nav__list > li.current-menu-item > a { color: var(--bms-green-600); }
.bms-nav__item.is-current > .bms-nav__link::after,
.bms-nav__list > li.current-menu-item > a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 20px;
  height: 2px; background: var(--bms-green-600); border-radius: 2px;
}


/* ── Pill hotline ── */
.bms-hotline {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 20px 9px 14px;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-pill);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bms-hotline:hover { border-color: var(--bms-green-600); box-shadow: var(--bms-shadow); }
.bms-hotline__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bms-green-050); color: var(--bms-green-600);
}
.bms-hotline__text small { display: block; font-size: 10px; color: var(--bms-muted); line-height: 1.2; }
.bms-hotline__text strong { display: block; font-size: 1rem; font-weight: 700; color: var(--bms-ink); line-height: 1.2; white-space: nowrap; }

/* ── Nút mở menu trên mobile ── */
.bms-burger {
  display: none; flex-direction: column; gap: 5px;
  padding: 10px; margin-left: auto;
  border: 0; background: none; cursor: pointer;
}
.bms-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--bms-ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.bms-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bms-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bms-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ═══════════════════════════════════════════════════════════
   HERO TRANG CON  —  breadcrumb · badge · H1 · mô tả · nút
   ═══════════════════════════════════════════════════════════ */

.bms-phero { position: relative; isolation: isolate; padding-block: var(--bms-space-8); overflow: hidden; }
.bms-phero__bg { position: absolute; inset: 0; z-index: -2; }
.bms-phero__img { width: 100%; height: 100%; object-fit: cover; }
.bms-phero--dark { color: #fff; }
.bms-phero--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(1,46,26,.95) 0%, rgba(1,46,26,.72) 45%, rgba(1,46,26,.15) 100%);
}
.bms-phero__inner { max-width: 720px; }
.bms-phero__badge {
  display: inline-block; margin-bottom: var(--bms-space-4);
  padding: 6px 14px; border-radius: var(--bms-radius-sm);
  background: rgba(255,255,255,.16);
  font-size: var(--bms-fs-label); font-weight: 600; letter-spacing: var(--bms-ls-label);
  text-transform: uppercase;
}
.bms-phero__title {
  margin: 0 0 var(--bms-space-4);
  /* 1.12 quá chật: dấu nặng dòng trên chạm dấu sắc dòng dưới. 1.2 = --bms-lh-tight, đồng bộ .bms-h2 */
  font-size: var(--bms-fs-hero); line-height: var(--bms-lh-tight); font-weight: 800; letter-spacing: -.02em;
}
.bms-phero__desc { margin: 0 0 var(--bms-space-6); max-width: 56ch; line-height: var(--bms-lh-normal); opacity: .92; }

/* Breadcrumb */
.bms-crumb { margin-bottom: var(--bms-space-4); font-size: var(--bms-fs-label); }
.bms-crumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bms-crumb li + li::before { content: "›"; margin-right: 8px; opacity: .6; }
.bms-crumb a { color: inherit; text-decoration: none; opacity: .85; }
.bms-crumb a:hover { opacity: 1; text-decoration: underline; }
.bms-crumb [aria-current] { opacity: .7; }


/* ═══════════════════════════════════════════════════════════
   FOOTER  —  4 cột + dải bản quyền
   ═══════════════════════════════════════════════════════════ */

.bms-footer { background: var(--bms-canvas); border-top: 1px solid var(--bms-border); }
.bms-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--bms-space-7);
  padding-block: var(--bms-space-8);
}
.bms-footer__brand { display: inline-block; margin-bottom: var(--bms-space-4); text-decoration: none; }
.bms-footer__brand img { max-height: 52px; width: auto; }
.bms-footer__desc { margin: 0 0 var(--bms-space-5); font-size: var(--bms-fs-sm); line-height: 1.7; color: var(--bms-body); }

.bms-footer__title {
  margin: 0 0 var(--bms-space-4);
  font-size: var(--bms-fs-body); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bms-green-600);
}

.bms-footer__menu { margin: 0; padding: 0; list-style: none; }
.bms-footer__menu li + li { margin-top: 2px; }
.bms-footer__menu a {
  display: block; padding: 9px 0 9px 18px;
  position: relative;
  border-bottom: 1px solid var(--bms-border);
  font-size: var(--bms-fs-sm); color: var(--bms-body); text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}
.bms-footer__menu a::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  width: 5px; height: 5px; margin-top: -3px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.bms-footer__menu a:hover { color: var(--bms-green-600); padding-left: 22px; }

.bms-footer__contact { margin: 0 0 var(--bms-space-5); padding: 0; list-style: none; }
.bms-ci {
  position: relative; padding-left: 28px; margin-bottom: var(--bms-space-3);
  font-size: var(--bms-fs-sm); line-height: 1.55; color: var(--bms-body);
}
.bms-ci a { color: inherit; text-decoration: none; }
.bms-ci a:hover { color: var(--bms-green-600); }
.bms-ci::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px;
  background: var(--bms-green-600);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.bms-ci--place::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.bms-ci--tel::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.bms-ci--mail::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.bms-ci--web::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z'/%3E%3C/svg%3E"); }

.bms-social { display: flex; gap: var(--bms-space-2); margin: 0; padding: 0; list-style: none; }
.bms-social a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--bms-border);
  color: var(--bms-body); text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bms-social a:hover { background: var(--bms-green-600); border-color: var(--bms-green-600); color: #fff; }

.bms-footer__map { margin-bottom: var(--bms-space-4); border-radius: var(--bms-radius); overflow: hidden; }
.bms-footer__map iframe { display: block; width: 100%; height: 190px; border: 0; }
.bms-footer__mapimg { display: block; width: 100%; height: 190px; object-fit: cover; }

.bms-footer__bar { border-top: 1px solid var(--bms-border); }
.bms-footer__barin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--bms-space-4); padding-block: var(--bms-space-4);
  font-size: var(--bms-fs-label); color: var(--bms-muted);
}
.bms-footer__legal { display: flex; gap: var(--bms-space-5); }
.bms-footer__legal a { color: inherit; text-decoration: none; }
.bms-footer__legal a:hover { color: var(--bms-green-600); }


/* ═══════════════ Responsive header + footer ═══════════════ */
@media (max-width: 1199.98px) {
  .bms-nav__list { gap: var(--bms-space-4); }
  .bms-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .bms-footer__col--map { grid-column: span 3; }
  .bms-footer__map iframe, .bms-footer__mapimg { height: 240px; }
}

@media (max-width: 991.98px) {
  /*
   * Ba khối trải đều: nút menu sát mép TRÁI · logo chính GIỮA · hotline sát mép PHẢI.
   * Phải chỉ định cột rõ ràng vì thứ tự trong HTML là logo → nút menu → menu → hotline.
   * Hai cột 1fr bằng nhau nên logo luôn nằm chính giữa dù hai bên rộng khác nhau.
   * .bms-nav lúc này là position: fixed (ngăn kéo) nên không tính là ô lưới.
   */
  .bms-header__inner {
    display: grid;
    /*
     * minmax(max-content, 1fr) chứ KHÔNG phải minmax(0, 1fr): hai cột 1fr luôn bằng nhau,
     * mà nút menu chỉ cần 42px trong khi hotline cần 168px — đo ở 500px thì cột hotline
     * cũng chỉ được 155px nên số điện thoại vỡ hai dòng, dù cả hàng mới dùng 354/468px.
     * Đặt sàn max-content thì rộng rãi vẫn chia đều (logo đúng tâm), chật thì cột hotline
     * được giữ đủ bề rộng.
     */
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    min-height: 66px; gap: var(--bms-space-3);
  }
  /*
   * Phải ghi RÕ grid-row: 1 cho cả ba. Thứ tự trong HTML là logo (cột 2) → nút menu (cột 1),
   * mà lưới xếp thưa không cho phép lùi về ô trước con trỏ — thiếu dòng này thì nút menu và
   * hotline bị đẩy xuống hàng thứ hai.
   * margin-left: auto ở quy tắc gốc là tàn dư của bố cục flex cũ, trong lưới nó thắng
   * justify-self nên phải trả về 0.
   */
  .bms-burger { display: flex; grid-area: 1 / 1; justify-self: start; margin-left: 0; }
  .bms-header__brand { grid-area: 1 / 2; justify-self: center; }
  .bms-hotline { grid-area: 1 / 3; justify-self: end; padding: 8px 14px 8px 10px; }
  .bms-hotline__text small { display: none; }

  /*
   * Menu là NGĂN KÉO trượt từ mép trái vào, không còn đổ xuống dưới thanh header.
   * Dùng transform nên trượt mượt bằng GPU; khi đóng thì visibility: hidden để phần tử
   * không còn bắt được chạm và trình đọc màn hình cũng bỏ qua.
   */
  .bms-nav {
    position: fixed; inset: 0 auto 0 0; z-index: 90;
    width: min(84vw, 320px); max-width: 100%;
    padding: calc(var(--bms-space-7) + 22px) var(--bms-space-5) var(--bms-space-6);
    overflow-y: auto; overscroll-behavior: contain;
    background: #fff; box-shadow: 6px 0 28px rgba(1, 46, 26, .16);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .26s ease, visibility .26s;
  }
  .bms-nav.is-open { transform: translateX(0); visibility: visible; }

  /* Nền mờ do JS chèn — bấm vào là đóng ngăn kéo */
  .bms-nav-nen {
    position: fixed; inset: 0; z-index: 89;
    background: rgba(1, 46, 26, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .26s ease, visibility .26s;
    border: 0; padding: 0; width: 100%;
  }
  .bms-nav-nen.is-open { opacity: 1; visibility: visible; }

  /* Nút menu phải nổi trên ngăn kéo để bấm lần nữa là đóng */
  .bms-burger { position: relative; z-index: 91; }
  body.bms-khoa-cuon { overflow: hidden; }

  .bms-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--bms-space-4); }
  .bms-nav__link,
  .bms-nav__list > li > a { padding: 14px 0; justify-content: space-between; }
  .bms-nav__item.is-current > .bms-nav__link::after,
  .bms-nav__item.is-current > .bms-nav__link::before,
  .bms-nav__list > li.current-menu-item > a::after,
  .bms-nav__list > li.current-menu-item > a::before { display: none; }
  .bms-nav__item + .bms-nav__item { border-top: 1px solid var(--bms-border); }
}

/*
 * Dưới 480px chỗ trống chỉ còn 358px trong khi logo 133 + nút menu 42 + hotline 168 + khe
 * đã là 359px. Thu gọn logo và hotline cho dư chỗ, đồng thời trải đều hai mép — số điện
 * thoại không bao giờ vỡ dòng.
 *
 * ⚠️ Khối này phải nằm SAU khối ≤991.98px ở trên, nếu không quy tắc display:grid trong đó
 * sẽ thắng (cùng độ ưu tiên, quy tắc đứng sau thắng).
 */
@media (max-width: 479.98px) {
  .bms-header__inner { display: flex; justify-content: space-between; gap: var(--bms-space-2); }
  /* Bỏ lưới thì grid-area hết tác dụng, phải xếp lại thứ tự bằng order — trong HTML
     logo đứng TRƯỚC nút menu. */
  .bms-burger { order: -1; margin-left: 0; padding: 10px 6px 10px 0; }
  .bms-header__brand { order: 0; }
  .bms-hotline { order: 1; }
  .bms-header__logo { max-height: 42px; }
  .bms-hotline { padding: 7px 12px 7px 8px; gap: 7px; }
  .bms-hotline__icon svg { width: 17px; height: 17px; }
  .bms-hotline__text strong { font-size: .875rem; }
}

@media (max-width: 767.98px) {
  .bms-footer__grid { grid-template-columns: 1fr; gap: var(--bms-space-6); }
  .bms-footer__col--map { grid-column: auto; }
  .bms-footer__barin { flex-direction: column; align-items: flex-start; gap: var(--bms-space-2); }
  .bms-phero { padding-block: var(--bms-space-7); }
}


/* ═══════════════════════════════════════════════════════════
   DÙNG CHUNG CHO TRANG CON
   ═══════════════════════════════════════════════════════════ */

.bms-eyebrow--light { color: rgba(255, 255, 255, .85); }
.bms-phero__title--upper { text-transform: uppercase; letter-spacing: .01em; }

/* Tiêu đề có gạch ngang hai bên: — GIÁ TRỊ CỐT LÕI — */
.bms-h2--dashed { display: flex; align-items: center; justify-content: center; gap: var(--bms-space-4); }
.bms-h2--dashed::before,
.bms-h2--dashed::after { content: ""; width: 40px; height: 2px; background: var(--bms-green-600); }

/* Bố cục 2 cột chữ | ảnh */
.bms-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--bms-space-8);
}
.bms-split--reverse .bms-split__media { order: -1; }
.bms-split__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bms-radius-lg); }
.bms-split__body .bms-lead { margin-bottom: var(--bms-space-5); }

/* Dải kêu gọi ngang (nền ảnh + phủ xanh) */
.bms-strip { position: relative; isolation: isolate; color: #fff; padding-block: var(--bms-space-7); }
.bms-strip__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bms-strip__img { width: 100%; height: 100%; object-fit: cover; }
.bms-strip::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(1, 46, 26, .96) 0%, rgba(5, 98, 64, .92) 100%);
}
.bms-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bms-space-5); }
.bms-strip__title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; }
.bms-strip__desc { margin: 0; font-size: var(--bms-fs-sm); opacity: .9; }

/* Form dùng chung */
.bms-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bms-space-4); }
.bms-field { margin: 0 0 var(--bms-space-4); }
.bms-field input[type="text"], .bms-field input[type="tel"],
.bms-field input[type="email"], .bms-field textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--bms-border); border-radius: var(--bms-radius-sm);
  font: inherit; font-size: var(--bms-fs-sm); color: var(--bms-ink); background: #fff;
}
.bms-field textarea { resize: vertical; min-height: 120px; }
.bms-field input:focus-visible, .bms-field textarea:focus-visible {
  outline: 2px solid var(--bms-green-600); outline-offset: 1px; border-color: var(--bms-green-600);
}
.bms-btn--block { width: 100%; justify-content: center; }


/* ═══════════════════════════════════════════════════════════
   TRANG GIỚI THIỆU
   ═══════════════════════════════════════════════════════════ */

.bms-gt-hero__inner { position: relative; }
.bms-gt-badges {
  display: inline-flex; flex-direction: column; gap: var(--bms-space-3);
  margin: var(--bms-space-6) 0 0; padding: var(--bms-space-5);
  list-style: none;
  background: rgba(255, 255, 255, .96);
  border-radius: var(--bms-radius);
  box-shadow: var(--bms-shadow-lg);
}
.bms-gt-badges li { display: flex; align-items: center; gap: var(--bms-space-3); color: var(--bms-green-600); font-weight: 600; font-size: var(--bms-fs-sm); }
.bms-gt-badges img { width: 24px; height: 24px; object-fit: contain; }

.bms-gt-intro, .bms-gt-full { background: #fff; }
.bms-gt-values { background: #fff; }

.bms-gt-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bms-space-4); margin: var(--bms-space-5) 0 0; padding: 0; list-style: none; }
.bms-gt-services li { display: flex; align-items: center; gap: var(--bms-space-3); font-size: var(--bms-fs-label); font-weight: 600; color: var(--bms-ink); }
.bms-gt-services__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(5, 98, 64, .2); border-radius: 50%; background: var(--bms-green-050); }
.bms-gt-services__icon .bms-ico { width: 20px; height: 20px; }

.bms-gt-values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; text-align: center; }
/* Vạch ngăn dọc giữa các giá trị — bản vẽ trang 3 có, trước đây thiếu */
.bms-gt-values__grid > li { padding-inline: var(--bms-space-6); }
.bms-gt-values__grid > li + li { border-left: 1px solid var(--bms-border); }
/* Icon giờ là SVG nội tuyến (parts/icon-bo.php), không còn <img> nền đục */
.bms-gt-value__icon { display: block; margin-bottom: var(--bms-space-4); color: var(--bms-green-600); }
.bms-gt-services__icon .bms-ico, .bms-timeline__dot .bms-ico, .bms-gt-badges .bms-ico { color: var(--bms-green-600); }
.bms-gt-badges li .bms-ico { flex: 0 0 auto; }
.bms-gt-value__title { margin: 0 0 var(--bms-space-2); font-size: 1.05rem; font-weight: 700; color: var(--bms-ink); }
.bms-gt-value__desc { margin: 0; font-size: var(--bms-fs-label); line-height: 1.6; color: var(--bms-body); }

/* ══════════════════════════════════════════════════════════════════
   Hành trình phát triển — dựng theo bản thiết kế "Timeline Section"
   Cột trái giới thiệu · cột phải là khung toạ độ có đường chéo SVG,
   mỗi mốc là chấm tròn nằm TRÊN đường, khối chữ nằm ngay phía trên chấm.
   ══════════════════════════════════════════════════════════════════ */
.bms-gt-timeline {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}
.bms-page .bms-gt-timeline { padding-block: var(--bms-space-8); }

/* ── Nền trang trí ── */
.bms-tlbg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bms-tlbg > span { position: absolute; display: block; }
.bms-tlbg__luoi {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(5, 98, 64, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(5, 98, 64, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 70% 40%, #000 20%, transparent 78%);
}
.bms-tlbg__luoi--nho {
  opacity: .55;
  background-image:
    linear-gradient(to right, rgba(16, 20, 19, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 20, 19, .05) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 42%);
          mask-image: linear-gradient(to top, #000 0%, transparent 42%);
}
.bms-tlbg__quang--trai {
  left: -160px; bottom: -120px; width: 620px; height: 520px;
  background: radial-gradient(closest-side, rgba(5, 98, 64, .1), transparent 70%);
}
.bms-tlbg__quang--phai {
  right: -120px; top: -140px; width: 560px; height: 520px;
  background: radial-gradient(closest-side, rgba(5, 98, 64, .09), transparent 72%);
}
.bms-tlbg__day {
  left: 0; right: 0; bottom: 0; height: 280px;
  background: linear-gradient(to top, rgba(244, 247, 244, .9), rgba(255, 255, 255, 0));
}

/* ── Bố cục hai cột: giới thiệu bên trái, khung mốc bên phải ── */
.bms-gt-timeline__grid {
  position: relative;
  display: grid;
  grid-template-columns: 360px minmax(0, 752px);
  gap: 40px;
  align-items: center;
}
.bms-gt-timeline__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bms-space-5); }
.bms-gt-timeline__intro > * { margin: 0; }
.bms-gt-timeline__intro .bms-eyebrow { margin: 0; }
.bms-tl-h2 { font-size: clamp(1.75rem, 1.1rem + 1.5vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; }
.bms-gt-timeline__intro .bms-lead { font-size: var(--bms-fs-sm); }

/* Nhãn dạng viên có chấm tròn dẫn đầu — theo bản thiết kế Timeline Section */
.bms-eyebrow--pill {
  display: inline-flex;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(5, 98, 64, .22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(5, 98, 64, .08), rgba(5, 98, 64, .02));
  box-shadow: 0 1px 2px rgba(16, 20, 19, .04);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

/* Nút đặc, bo góc lớn — chỉ dùng trong section này nên không ảnh hưởng nút khác */
.bms-btn--tl {
  padding: 14px 26px;
  border-radius: var(--bms-radius-lg);
  background: linear-gradient(135deg, #0a7a52, var(--bms-green-600));
  border-color: transparent;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -10px rgba(5, 98, 64, .55), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background .25s ease;
}
.bms-btn--tl:hover,
.bms-btn--tl:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0c8f5f, var(--bms-green-600));
  box-shadow: 0 18px 34px -12px rgba(5, 98, 64, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* ── Khung toạ độ các mốc ──
 * --tl-n số mốc · --tl-i vị trí mốc · các bước và góc do PHP tính (xem chú thích ở đó).
 * Đường chéo dựng bằng một THANH XOAY chứ không phải SVG: nhờ vậy toạ độ đường chỉ phụ
 * thuộc chấm đầu tiên, không phụ thuộc chiều cao khung — khối chữ dài ngắn thế nào
 * đường vẫn đi đúng qua tâm mọi chấm.
 */
.bms-timeline {
  --tl-dx: 153px; --tl-dy: 78px; --tl-g: 78px; --tl-r: 24px;
  position: relative;
  min-height: var(--tl-h, 700px);
  width: 100%;
  color: var(--bms-green-600);
}
/* Quầng mờ dày + nét chính, cùng một hình học */
.bms-timeline::before,
.bms-timeline::after {
  content: "";
  position: absolute;
  left: calc(var(--tl-r) - var(--tl-lui, 26px) * cos(var(--tl-goc, 27deg)));
  bottom: calc(var(--tl-r) - var(--tl-lui, 26px) * sin(var(--tl-goc, 27deg)));
  width: var(--tl-dai, 660px);
  transform-origin: left center;
  transform: translateY(50%) rotate(calc(-1 * var(--tl-goc, 27deg)));
  border-radius: 999px;
  background: linear-gradient(to right,
    rgba(5, 98, 64, .16) 0%, rgba(5, 98, 64, .62) 45%, var(--bms-green-600) 100%);
  pointer-events: none;
}
.bms-timeline::before { height: 13px; opacity: .12; }
.bms-timeline::after {
  height: 3px;
  animation: bms-tl-net 1.6s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes bms-tl-net { from { width: 0; } to { width: var(--tl-dai, 660px); } }

/*
 * z-index: 1 để chấm và icon nằm TRÊN đường chéo. Đường được vẽ bằng ::after của
 * .bms-timeline, mà phần tử giả ::after luôn vẽ SAU nội dung bên trong thẻ — không nâng
 * lớp thì đường sẽ cắt ngang qua icon.
 */
.bms-timeline__ds { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; }

.bms-timeline__item {
  position: absolute;
  width: 120px;
  left: calc(var(--tl-r) - 4px + var(--tl-dx) * var(--tl-i, 0));
  /* Đáy khối chữ = tâm chấm + khoảng cách --tl-g. Tâm chấm mốc 0 cách đáy khung --tl-r. */
  bottom: calc(var(--tl-r) + var(--tl-g) + var(--tl-dy) * var(--tl-i, 0));
  animation: bms-tl-len .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(.25s + var(--tl-i, 0) * .12s);
}

/* Cuống nối mảnh từ đáy khối chữ xuống chấm — như bản thiết kế gốc */
.bms-timeline__item::after {
  content: "";
  position: absolute; left: 4px; top: 100%;
  width: 1px; height: calc(var(--tl-g) - var(--tl-r));
  background: rgba(5, 98, 64, .38);
}

.bms-timeline__dot {
  position: absolute;
  left: 4px; top: calc(100% + var(--tl-g));
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: calc(var(--tl-r) * 2); height: calc(var(--tl-r) * 2);
  border: 1px solid rgba(5, 98, 64, .2);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 22px -12px rgba(16, 20, 19, .35), 0 0 0 7px rgba(255, 255, 255, .95);
  animation: bms-tl-hien .6s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(.15s + var(--tl-i, 0) * .12s);
}
.bms-timeline__dot .bms-ico { width: 22px; height: 22px; color: var(--bms-green-600); }

.bms-timeline__the { display: block; }
.bms-timeline__year { display: block; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--bms-ink); }
.bms-timeline__title { display: block; margin-top: 7px; font-size: .8125rem; font-weight: 700; line-height: 1.35; color: var(--bms-green-600); }
.bms-timeline__desc { display: block; margin-top: 6px; font-size: .75rem; line-height: 1.6; color: var(--bms-muted); }

/* ── Mốc cuối được nhấn mạnh: chấm to, nền xanh đặc, icon trắng, có quầng thở ── */
.bms-timeline__item:last-child .bms-timeline__dot {
  width: 64px; height: 64px;
  border: 0;
  background: linear-gradient(140deg, #0d8b58, var(--bms-green-600));
  box-shadow: 0 18px 34px -14px rgba(5, 98, 64, .6), 0 0 0 8px rgba(5, 98, 64, .08), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.bms-timeline__item:last-child .bms-timeline__dot .bms-ico { width: 28px; height: 28px; color: #fff; }
.bms-timeline__item:last-child .bms-timeline__dot::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 118px; height: 118px; margin: -59px 0 0 -59px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(5, 98, 64, .3), transparent 70%);
  animation: bms-tl-tho 3.4s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.bms-timeline__item:last-child .bms-timeline__year { font-size: 1.75rem; letter-spacing: -.03em; color: var(--bms-green-600); }
.bms-timeline__item:last-child .bms-timeline__title { font-size: .9375rem; line-height: 1.3; color: var(--bms-ink); }
.bms-timeline__item:last-child .bms-timeline__desc { color: var(--bms-body); }
.bms-timeline__item:last-child::after { height: calc(var(--tl-g) - 32px); }

@keyframes bms-tl-len { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bms-tl-hien { from { opacity: 0; transform: translate(-50%, -50%) scale(.72); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes bms-tl-tho { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .85; transform: scale(1.12); } }

/* ── Dưới 1080px: khung toạ độ không đủ chỗ, chuyển sang cột dọc có thanh ray ── */
@media (max-width: 1199.98px) {
  .bms-gt-timeline__grid { grid-template-columns: minmax(0, 1fr); gap: var(--bms-space-7); }
  .bms-gt-timeline__intro { max-width: 640px; }
  .bms-gt-timeline__intro .bms-lead { max-width: none; }
  .bms-btn--tl { align-self: stretch; justify-content: center; }

  .bms-timeline { min-height: 0; max-width: 640px; }
  .bms-timeline::before, .bms-timeline::after { display: none; }
  .bms-timeline__item::after { display: none; }
  .bms-timeline__ds {
    position: static;
    display: flex; flex-direction: column; gap: var(--bms-space-7);
    padding-left: 8px;
  }
  /* Thanh ray dọc chạy qua tâm các chấm */
  .bms-timeline__ds::before {
    content: "";
    position: absolute; left: 43px; top: 28px; bottom: 28px; width: 2px;
    background: linear-gradient(to bottom, rgba(5, 98, 64, .16), rgba(5, 98, 64, .85));
  }
  .bms-timeline__item {
    position: relative;
    left: auto; bottom: auto; width: auto;
    display: flex; align-items: flex-start; gap: 22px;
    animation-delay: 0s;
  }
  .bms-timeline__item:last-child { width: auto; }
  .bms-timeline__dot {
    position: relative;
    left: auto; top: auto; transform: none;
    flex: 0 0 auto; width: 56px; height: 56px;
    box-shadow: 0 10px 24px -14px rgba(16, 20, 19, .4), 0 0 0 6px rgba(255, 255, 255, .95);
  }
  .bms-timeline__dot .bms-ico { width: 24px; height: 24px; }
  .bms-timeline__item:last-child .bms-timeline__dot { width: 56px; height: 56px; background: linear-gradient(140deg, #0d8b58, var(--bms-green-600)); }
  .bms-timeline__item:last-child .bms-timeline__dot .bms-ico { width: 26px; height: 26px; }
  .bms-timeline__item:last-child .bms-timeline__dot::before { display: none; }
  .bms-timeline__the { padding-top: 2px; }
  .bms-timeline__year { font-size: 1.625rem; }
  .bms-timeline__title { font-size: 1rem; margin-top: 8px; }
  .bms-timeline__desc { font-size: var(--bms-fs-sm); margin-top: 6px; }
  .bms-timeline__item:last-child .bms-timeline__year { font-size: 2rem; }
  .bms-timeline__item:last-child .bms-timeline__title { font-size: 1.125rem; }

  @keyframes bms-tl-hien { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
}

/* Tôn trọng cài đặt "giảm chuyển động" của hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  .bms-timeline__item,
  .bms-timeline__dot,
  .bms-timeline::after,
  .bms-timeline__item:last-child .bms-timeline__dot::before { animation: none; }
  .bms-timeline::after { width: var(--tl-dai, 660px); }
}

/* ── Đối tác ── */
.bms-gt-partners { background: var(--bms-green-050); }
/*
 * Hai khối đối tác phải cao BẰNG NHAU. min-height chỉ đặt sàn, khối nào chữ dài hơn vẫn cao
 * hơn. Cho container thành lưới với grid-auto-rows: 1fr để mọi hàng lấy chiều cao hàng cao nhất.
 */
.bms-gt-partners > .bms-container {
  /*
   * grid-template-rows: auto cho HÀNG ĐẦU (tiêu đề) cao tự nhiên. Thiếu dòng này thì
   * grid-auto-rows: 1fr kéo luôn hàng tiêu đề cao bằng thẻ đối tác (~500px) → lỗ trống lớn.
   */
  display: grid; grid-template-rows: auto; grid-auto-rows: 1fr; gap: var(--bms-space-5);
}
.bms-gt-partners > .bms-container > .bms-section-head { align-self: start; }
.bms-gt-partner {
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center; gap: var(--bms-space-6);
  padding: var(--bms-space-6);
  border-radius: var(--bms-radius-lg);
  /* Nền pha nhẹ theo màu thương hiệu như bản vẽ (iSMA xanh dương nhạt, Regin xanh lá nhạt).
     color-mix có fallback #fff cho trình duyệt cũ nhờ khai báo đứng trước. */
  background: #fff;
  background: color-mix(in srgb, var(--partner-accent) 6%, #fff);
}

.bms-gt-partner--reverse .bms-gt-partner__media { order: -1; }
.bms-gt-partner__title { margin: 0 0 var(--bms-space-3); font-size: 1.15rem; font-weight: 700; color: var(--partner-accent); }
.bms-gt-partner__desc { margin: 0 0 var(--bms-space-5); font-size: var(--bms-fs-sm); line-height: 1.7; }
.bms-gt-partner__desc .bms-hl { color: var(--partner-accent); font-weight: 600; }
/*
 * Ảnh sản phẩm của cả hai hãng đều là ảnh chụp NỀN TRẮNG ĐỤC, không thể hoà vào nền pha màu
 * của thẻ. Thay vì cố trộn (sẽ lộ hai mảng màu lệch nhau như trước), cho hẳn một khung trắng
 * bo góc — nhìn ra chủ ý, và giống nhau ở cả hai khối.
 */
.bms-gt-partner__media {
  display: grid; place-items: center;
  padding: var(--bms-space-5);
  border-radius: var(--bms-radius);
  background: #fff;
  box-shadow: var(--bms-shadow-sm);
}
.bms-gt-partner__img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
/* Logo thương hiệu cần lớn và cân nhau giữa hai khối */
.bms-gt-partner__logo {
  max-width: 240px; height: 64px; width: auto;
  object-fit: contain; object-position: left center;
  margin-bottom: var(--bms-space-4);
}


/* ═══════════════════════════════════════════════════════════
   TRANG LIÊN HỆ
   ═══════════════════════════════════════════════════════════ */

.bms-lh-main { background: #fff; }
.bms-lh-grid { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: var(--bms-space-6); align-items: start; }

.bms-lh-info, .bms-lh-form {
  padding: var(--bms-space-6);
  border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg);
  background: #fff; box-shadow: var(--bms-shadow-sm);
}
.bms-lh-info__title, .bms-lh-form__title {
  margin: 0 0 var(--bms-space-5);
  font-size: 1.15rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--bms-green-600);
}
.bms-lh-info__list { margin: 0; padding: 0; list-style: none; }
.bms-lh-info__list li { display: flex; gap: var(--bms-space-4); padding: var(--bms-space-4) 0; }
.bms-lh-info__list li + li { border-top: 1px solid var(--bms-border); }
.bms-lh-info__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bms-green-050); color: var(--bms-green-600);
}
.bms-lh-info__text strong { display: block; font-size: var(--bms-fs-sm); font-weight: 700; color: var(--bms-ink); margin-bottom: 2px; }
.bms-lh-info__text span { font-size: var(--bms-fs-sm); line-height: 1.6; color: var(--bms-body); }

.bms-lh-form__desc { margin: 0 0 var(--bms-space-5); font-size: var(--bms-fs-sm); line-height: 1.6; color: var(--bms-body); }
.bms-lh-form__note { margin: var(--bms-space-4) 0 0; font-size: var(--bms-fs-label); color: var(--bms-muted); }

/* ── Dải đăng ký tài liệu ── */
.bms-lh-nl { position: relative; isolation: isolate; color: #fff; padding-block: var(--bms-space-8); }
.bms-lh-nl__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bms-lh-nl__img { width: 100%; height: 100%; object-fit: cover; }
.bms-lh-nl::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(1, 46, 26, .96) 0%, rgba(5, 98, 64, .93) 100%);
}
.bms-lh-nl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bms-space-8); }
.bms-lh-nl__title { margin: 0 0 var(--bms-space-4); font-size: 1.35rem; font-weight: 800; text-transform: uppercase; }
.bms-lh-nl__desc { margin: 0 0 var(--bms-space-5); font-size: var(--bms-fs-sm); line-height: 1.7; opacity: .92; }
.bms-lh-nl__form { display: flex; gap: var(--bms-space-3); align-items: stretch; }
.bms-lh-nl__form input { min-width: 0; }            /* cho phép ô co lại thay vì đẩy nút xuống dòng */
.bms-lh-nl__form .bms-btn { flex: 0 0 auto; white-space: nowrap; }
.bms-lh-nl__note { display: flex; align-items: flex-start; gap: var(--bms-space-2); }
.bms-lh-nl__note .bms-ico { flex: 0 0 auto; margin-top: 1px; }
.bms-lh-nl__form input {
  flex: 1 1 auto; padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--bms-radius-sm);
  font: inherit; font-size: var(--bms-fs-sm); color: #fff; background: rgba(255, 255, 255, .12);
}
.bms-lh-nl__form input::placeholder { color: rgba(255, 255, 255, .65); }
.bms-lh-nl__form input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.bms-lh-nl__note { margin: var(--bms-space-4) 0 0; font-size: var(--bms-fs-label); opacity: .8; }


/* ═══════════════ Responsive trang con ═══════════════ */
@media (max-width: 991.98px) {
  .bms-split, .bms-split--reverse { grid-template-columns: 1fr; gap: var(--bms-space-6); }
  .bms-split--reverse .bms-split__media { order: 0; }
  .bms-gt-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-gt-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bms-space-5); }

  /* Trên tablet/mobile timeline chuyển thành cột dọc cho dễ đọc */

  .bms-gt-partner, .bms-gt-partner--reverse { grid-template-columns: 1fr; }
  .bms-gt-partners > .bms-container { grid-auto-rows: auto; }   /* hẹp thì để cao tự nhiên */
  .bms-gt-partner--reverse .bms-gt-partner__media { order: 0; }

  .bms-lh-grid { grid-template-columns: 1fr; }
  .bms-lh-nl__grid { grid-template-columns: 1fr; gap: var(--bms-space-6); }
}

@media (max-width: 767.98px) {
  .bms-gt-services, .bms-gt-values__grid { grid-template-columns: 1fr; }
  .bms-form__row { grid-template-columns: 1fr; }
  .bms-strip__inner { flex-direction: column; align-items: flex-start; }
  .bms-lh-nl__form { flex-direction: column; }
  .bms-lh-nl__form .bms-btn { justify-content: center; }
  .bms-gt-badges { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   TRANG SẢN PHẨM — danh sách   (bản thiết kế PDF trang 4)
   ═══════════════════════════════════════════════════════════ */

/*
 * Các rule khoảng đệm dưới đây gắn thêm .bms-page ở đầu — không phải thừa: quy tắc
 * chung `.bms-page section { padding-block: 96px }` có độ ưu tiên 0,1,1 nên sẽ đè lên
 * một selector class đơn. Thêm .bms-page đưa lên 0,2,0 để giành lại.
 */

/*
 * Canh lề hero cho khớp phần còn lại của trang.
 *
 * .bms-phero__inner { max-width: 720px } khai báo SAU .bms-container nên đè max-width
 * 1200px của container, nhưng margin-inline: auto của container thì vẫn còn hiệu lực —
 * kết quả là khối 720px bị canh GIỮA, chữ hero tụt vào 384px trong khi thanh lọc và
 * lưới sản phẩm bắt đầu ở 144px. Trả max-width về container để lề trái trùng nhau;
 * độ dài dòng chữ vẫn được giữ bằng max-width trên .bms-phero__title/__desc bên dưới.
 *
 * Rule chỉ bắt phần tử mang ĐỒNG THỜI hai class, tức đúng các trang đang bị lệch
 * (Sản phẩm, Liên hệ). Trang Giới thiệu hero không bọc .bms-container nên không đổi.
 */
.bms-phero__inner.bms-container { max-width: var(--bms-container); }

/* Hero: breadcrumb có đường kẻ mảnh bên dưới, chừa chỗ cho thanh lọc đè lên mép dưới */
.bms-page .bms-phero--sp { padding-block: var(--bms-space-8) calc(var(--bms-space-8) + var(--bms-space-5)); }
.bms-phero--sp .bms-phero__title { max-width: 20ch; }
.bms-phero--sp .bms-crumb { margin-bottom: var(--bms-space-6); }   /* đã bỏ đường kẻ trắng dưới breadcrumb */
.bms-phero--sp .bms-phero__desc { max-width: 52ch; }

/* Thanh lọc — thẻ trắng nổi đè lên mép dưới hero */
.bms-page .bms-filterbar { position: relative; padding-block: 0; margin-top: calc( var(--bms-space-7) * -1 ); z-index: 2; }
.bms-filterbar__card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--bms-space-4);
  align-items: end; margin: 0;
  padding: var(--bms-space-6);
  background: #fff; border-radius: var(--bms-radius-lg); box-shadow: var(--bms-shadow-lg);
}
.bms-fbfield { margin: 0; }
.bms-fbfield label {
  display: block; margin-bottom: var(--bms-space-3);
  font-size: var(--bms-fs-label); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bms-ink);
}
.bms-fbfield select, .bms-fbfield input[type="search"] {
  width: 100%; padding: 15px 16px;
  border: 1px solid var(--bms-border); border-radius: 8px;
  font: inherit; font-size: var(--bms-fs-sm); color: var(--bms-ink); background: #fff;
  appearance: none;
}
.bms-fbfield select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f4a46' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 40px;
  text-overflow: ellipsis;
}
.bms-fbfield select:focus-visible, .bms-fbfield input:focus-visible {
  outline: 2px solid var(--bms-green-600); outline-offset: 1px; border-color: var(--bms-green-600);
}
/* Nút LỌC — cùng chiều cao với select và ô tìm kiếm */
.bms-fbbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px var(--bms-space-6);
  border: 0; border-radius: 8px;
  background: var(--bms-green-600); color: #fff; cursor: pointer;
  font: inherit; font-size: var(--bms-fs-sm); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  transition: background .18s ease;
}
.bms-fbbtn:hover { background: var(--bms-green-700); }
.bms-fbbtn:focus-visible { outline: 2px solid var(--bms-green-900); outline-offset: 2px; }

/* Ô tìm kiếm: icon phẳng bên trong, không phải nút vuông tô xanh */
.bms-fbfield--search { position: relative; }
.bms-fbfield--search input { padding-right: 48px; }
/* Ẩn nút xoá mặc định của input[type=search], tránh trùng với dấu X của mình */
.bms-fbfield--search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

.bms-fbicon {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--bms-radius-sm);
  background: none; color: var(--bms-body); cursor: pointer; text-decoration: none;
  transition: color .18s ease;
}
.bms-fbicon:hover { color: var(--bms-green-600); }
/* Chưa có từ khoá → kính lúp. Đang có kết quả tìm → dấu X để xoá từ khoá. */
.bms-fbicon--xoa { display: none; }
.bms-fbfield--search.co-tu-khoa .bms-fbicon--tim { display: none; }
.bms-fbfield--search.co-tu-khoa .bms-fbicon--xoa { display: grid; }

/* Dòng đếm + lưới */
.bms-page .bms-plist { background: var(--bms-canvas); padding-block: var(--bms-space-6) var(--bms-space-9); }
.bms-plist__count { margin: 0 0 var(--bms-space-6); font-size: var(--bms-fs-sm); color: var(--bms-body); }
.bms-plist__count strong { color: var(--bms-ink); font-weight: 700; }
.bms-plist__reset { margin-left: var(--bms-space-4); color: var(--bms-green-600); font-weight: 600; }
.bms-plist__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bms-space-5); }
.bms-plist__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Thẻ ở lưới 4 cột (sản phẩm liên quan) bỏ đoạn mô tả — đúng như bản thiết kế trang 5 */
.bms-plist__grid--4 .bms-pcard__desc,
.bms-plist__grid--gon .bms-pcard__desc { display: none; }
.bms-empty { padding: var(--bms-space-8) 0; text-align: center; color: var(--bms-muted); }

/* ── Thẻ sản phẩm dạng dọc ── */
.bms-pcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg);
  background: #fff; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bms-pcard:hover { box-shadow: var(--bms-shadow-lg); transform: translateY(-2px); border-color: transparent; }
/* Nền vùng ảnh là TRẮNG theo mẫu, không phải xanh nhạt */
.bms-pcard__media {
  position: relative; display: grid; place-items: center;
  padding: var(--bms-space-6) var(--bms-space-5) var(--bms-space-4);
  background: #fff;
}
.bms-pcard__img { display: block; width: 100%; height: 200px; object-fit: contain; }
.bms-pcard__img--trong { background: var(--bms-green-050); border-radius: var(--bms-radius); }
.bms-pcard__badge {
  position: absolute; top: var(--bms-space-5); left: var(--bms-space-5); z-index: 1;
  padding: 6px 14px; border-radius: var(--bms-radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #fff;
}
.bms-pcard__badge--noi-bat { background: var(--bms-green-900); }
.bms-pcard__badge--moi { background: var(--bms-green-600); }

.bms-pcard__body { display: flex; flex-direction: column; gap: var(--bms-space-2); padding: 0 var(--bms-space-5) var(--bms-space-5); flex: 1; }
.bms-pcard__brand { font-size: var(--bms-fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bms-green-600); }
.bms-pcard__brandlogo { height: 20px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; }
.bms-pcard__title { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.bms-pcard__title a { color: var(--bms-ink); text-decoration: none; }
.bms-pcard__title a:hover { color: var(--bms-green-600); }
.bms-pcard__cat { margin: 0; font-size: var(--bms-fs-sm); font-weight: 600; color: var(--bms-ink); }
.bms-pcard__desc { margin: var(--bms-space-2) 0 0; font-size: var(--bms-fs-sm); line-height: 1.7; color: var(--bms-muted); }
.bms-pcard__body .bms-link { margin-top: auto; padding-top: var(--bms-space-5); align-self: flex-start; }

/* Phân trang */
.bms-pagination, .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bms-space-2); margin-top: var(--bms-space-8); }
.bms-pagination .page-numbers, .pagination .page-numbers {
  display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 14px;
  border: 1px solid var(--bms-border); border-radius: 8px;
  background: #fff; color: var(--bms-body); text-decoration: none; font-size: var(--bms-fs-sm);
  transition: border-color .18s ease, color .18s ease;
}
.bms-pagination .page-numbers:hover, .pagination .page-numbers:hover { border-color: var(--bms-green-600); color: var(--bms-green-600); }
.bms-pagination .page-numbers.current, .pagination .page-numbers.current {
  background: var(--bms-green-600); border-color: var(--bms-green-600); color: #fff; font-weight: 700;
}
.bms-pagination .page-numbers.dots, .pagination .page-numbers.dots { border-color: transparent; }


/* ═══════════════════════════════════════════════════════════
   CHI TIẾT SẢN PHẨM   (bản thiết kế PDF trang 5)
   ═══════════════════════════════════════════════════════════ */

.bms-page .bms-pd { background: #fff; padding-block: var(--bms-space-6) var(--bms-space-8); }
.bms-pd__grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--bms-space-7); align-items: start; }

.bms-pd__stage {
  position: relative; display: grid; place-items: center;
  padding: var(--bms-space-6); min-height: 420px;
  border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg);
  background: #fff;
}
.bms-pd__big { display: none; max-width: 100%; max-height: 380px; object-fit: contain; }
.bms-pd__big.is-active { display: block; }
.bms-pd__big--trong { width: 100%; height: 340px; background: var(--bms-green-050); border-radius: var(--bms-radius); }

.bms-pd__gallery { min-width: 0; }
.bms-pd__thumbwrap { display: flex; align-items: center; gap: var(--bms-space-2); margin-top: var(--bms-space-4); min-width: 0; }
.bms-pd__navbtn {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--bms-border); border-radius: var(--bms-radius-pill);
  background: #fff; color: var(--bms-body); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.bms-pd__navbtn:hover { border-color: var(--bms-green-600); color: var(--bms-green-600); }
.bms-pd__thumbs { display: flex; gap: var(--bms-space-3); overflow-x: auto; padding-bottom: 4px; flex: 1; min-width: 0; }
.bms-pd__thumb {
  flex: 0 0 auto; width: 76px; height: 76px; padding: 6px;
  border: 1px solid var(--bms-border); border-radius: var(--bms-radius-sm);
  background: #fff; cursor: pointer;
}
.bms-pd__thumb.is-active { border-color: var(--bms-green-600); box-shadow: 0 0 0 1px var(--bms-green-600); }
.bms-pd__thumb img { width: 100%; height: 100%; object-fit: contain; }

.bms-pd__brandlogo { max-height: 30px; width: auto; margin-bottom: var(--bms-space-4); }
.bms-pd__brand { display: inline-block; margin-bottom: var(--bms-space-4); font-size: var(--bms-fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bms-green-600); }
.bms-pd__title { margin: 0 0 var(--bms-space-2); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.2; color: var(--bms-ink); }
.bms-pd__model { margin: 0 0 var(--bms-space-4); font-size: var(--bms-fs-sm); color: var(--bms-green-600); }
.bms-pd__model strong { font-weight: 700; }
.bms-pd__lead { margin: 0 0 var(--bms-space-5); font-size: var(--bms-fs-sm); line-height: 1.75; color: var(--bms-body); }

/* Bảng thông số — mỗi dòng có icon bên trái nhãn (theo mẫu) */
.bms-spec { width: 100%; border-collapse: collapse; margin-bottom: var(--bms-space-5); }
.bms-spec th, .bms-spec td { padding: 13px 4px; text-align: left; vertical-align: middle; font-size: var(--bms-fs-sm); border-bottom: 1px solid var(--bms-border); }
.bms-spec th { width: 40%; font-weight: 400; color: var(--bms-body); }
.bms-spec th > span { display: inline-block; vertical-align: middle; }
.bms-spec__icon { display: inline-block; vertical-align: middle; margin-right: var(--bms-space-3); color: var(--bms-green-600); }
.bms-spec td { color: var(--bms-ink); font-weight: 600; }

/* Nút tải tài liệu: icon loại file bên trái · nhãn · mũi tên tải bên phải */
.bms-pd__files { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bms-space-3); margin-bottom: var(--bms-space-5); }
.bms-filebtn {
  display: flex; align-items: center; gap: var(--bms-space-3);
  padding: 14px 16px;
  border: 1px solid var(--bms-border); border-radius: 8px;
  font-size: var(--bms-fs-sm); font-weight: 600; color: var(--bms-ink); text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.bms-filebtn:hover { border-color: var(--bms-green-600); color: var(--bms-green-600); }
.bms-filebtn__ico { flex: 0 0 auto; color: var(--bms-green-600); }
.bms-filebtn span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bms-filebtn__dl { flex: 0 0 auto; color: var(--bms-body); }

.bms-pd__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bms-space-3); }
.bms-pd__actions .bms-btn { justify-content: center; padding-block: 15px; border-radius: 8px; }

/* Nội dung chi tiết — cột hẹp căn giữa, thu gọn sau N khối */
.bms-pd-detail { background: var(--bms-canvas); }
.bms-pd-detail__body { max-width: 960px; margin-inline: auto; }
.bms-pd-block + .bms-pd-block { margin-top: var(--bms-space-7); }
.bms-pd-block.is-hidden { display: none; }
.bms-pd-block__title { margin: 0 0 var(--bms-space-3); font-size: 1.15rem; font-weight: 700; color: var(--bms-ink); }
.bms-pd-block p { margin: 0 0 var(--bms-space-4); font-size: var(--bms-fs-sm); line-height: 1.8; color: var(--bms-body); }
.bms-pd-block__img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: var(--bms-radius); }
.bms-prose { font-size: var(--bms-fs-sm); line-height: 1.8; color: var(--bms-body); }
.bms-prose p { margin: 0 0 var(--bms-space-4); }
.bms-prose img { max-width: 100%; height: auto; border-radius: var(--bms-radius); }

.bms-pd-detail__more { margin: var(--bms-space-7) 0 0; text-align: center; }
.bms-morebtn {
  display: inline-flex; align-items: center; gap: var(--bms-space-3);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em;
  color: var(--bms-ink);
}
.bms-morebtn:hover { color: var(--bms-green-600); }
.bms-morebtn svg { transition: transform .2s ease; }
.bms-morebtn.is-open svg { transform: rotate(180deg); }

.bms-pd-related { background: #fff; }


/* ═══════════════ Responsive sản phẩm ═══════════════ */
@media (max-width: 1199.98px) {
  .bms-plist__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  /* Hàng trên 2 select · hàng dưới nút LỌC + ô tìm kiếm */
  .bms-filterbar__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-fbbtn { width: 100%; }
  .bms-plist__grid, .bms-plist__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-pd__grid { grid-template-columns: minmax(0, 1fr); gap: var(--bms-space-6); }
  .bms-pd__stage { min-height: 340px; }
  .bms-pd__big { max-height: 300px; }
}
@media (max-width: 767.98px) {
  .bms-page .bms-phero--sp { padding-block: var(--bms-space-7); }
  .bms-page .bms-filterbar { margin-top: var(--bms-space-5); }
  .bms-filterbar__card { grid-template-columns: minmax(0, 1fr); padding: var(--bms-space-5); }
  .bms-fbfield:nth-child(1), .bms-fbfield:nth-child(2),
  .bms-fbfield--nut, .bms-fbfield--search { grid-column: auto; }
  .bms-fbbtn { width: 100%; }
  .bms-page .bms-plist { padding-block: var(--bms-space-6) var(--bms-space-8); }
  .bms-plist__grid, .bms-plist__grid--4 { grid-template-columns: minmax(0, 1fr); }
  .bms-pcard__img { height: 180px; }
  .bms-pagination .page-numbers, .pagination .page-numbers { min-width: 42px; height: 42px; padding: 0 10px; }
  .bms-pd__files, .bms-pd__actions { grid-template-columns: minmax(0, 1fr); }
  .bms-pd__stage { min-height: 260px; padding: var(--bms-space-4); }
  .bms-pd__big { max-height: 240px; }
  /* Bảng thông số xếp chồng nhãn / giá trị */
  .bms-spec, .bms-spec tbody, .bms-spec tr, .bms-spec th, .bms-spec td { display: block; width: auto; }
  .bms-spec tr { padding: 12px 0; border-bottom: 1px solid var(--bms-border); }
  .bms-spec th, .bms-spec td { padding: 0; border: 0; }
  .bms-spec td { margin-top: 4px; }
  .bms-cta__card { text-align: left; }
  .bms-cta__title, .bms-cta__desc { text-align: center; }
  .bms-trust__item { justify-content: flex-start; }
}


/* ═══════════════════════════════════════════════════════════
   HERO NỀN SÁNG  —  trang Dự án, Tin tức
   (Sản phẩm/Giải pháp dùng .bms-phero--dark, xem phần trên)
   ═══════════════════════════════════════════════════════════ */

.bms-phero--sang { color: var(--bms-body); }
.bms-phero--sang::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Ảnh mờ dần từ trái sang: chữ nằm trên nền sáng, ảnh rõ dần về bên phải */
  background: linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,.96) 46%, rgba(255,255,255,.55) 70%, rgba(255,255,255,0) 100%);
}
.bms-phero--sang .bms-phero__title { color: var(--bms-ink); }
.bms-phero--sang .bms-phero__desc { color: var(--bms-body); opacity: 1; }
.bms-phero--sang .bms-crumb a { color: var(--bms-body); }
.bms-phero--sang .bms-crumb [aria-current] { color: var(--bms-muted); }
.bms-phero--sang .bms-tag { margin-bottom: var(--bms-space-4); }
.bms-phero--sang .bms-btn { margin-top: var(--bms-space-6); }

/* Vạch xanh ngắn dưới tiêu đề hero (trang Giải pháp) */
.bms-rule--trai { margin-inline: 0 auto; margin-block: var(--bms-space-5) var(--bms-space-5); }

/* Nhãn nhỏ có gạch chân (trang Tin tức) */
.bms-eyebrow--gach { display: inline-block; padding-bottom: 6px; border-bottom: 2px solid var(--bms-green-600); }

.bms-arrow--xuong { transform: rotate(90deg); }
/*
 * Giữ phép xoay lúc rê chuột. Quy tắc .bms-link:hover .bms-arrow (0,2,0) mạnh hơn
 * .bms-arrow--xuong (0,1,0) nên nếu không có dòng này mũi tên sẽ bật ngang khi hover.
 */
.bms-btn:hover .bms-arrow--xuong,
.bms-link:hover .bms-arrow--xuong { transform: rotate(90deg) translateX(3px); }

/*
 * KHÔNG đặt max-width lên .bms-phero__inner: phần tử đó mang cả .bms-container,
 * mà container có margin-inline:auto — thu hẹp inner sẽ làm cả khối chữ bị canh GIỮA
 * thay vì bám lề trái. Giới hạn độ dài dòng ở chính tiêu đề và đoạn mô tả.
 */
.bms-phero--sang .bms-phero__title,
/* 15ch chỉ ra ~546px trên khung 1152px nên tiêu đề dài vỡ 3 dòng ngắn, nhìn như chữ Z */
.bms-phero--bai .bms-phero__title { max-width: 24ch; }
.bms-phero--sang .bms-phero__desc,
.bms-phero--bai .bms-phero__desc { max-width: 46ch; }
.bms-phero--tt .bms-phero__title { max-width: 18ch; }
.bms-phero--bai .bms-tag { margin-block: var(--bms-space-4) var(--bms-space-4); }
.bms-phero--bai .bms-baimeta { max-width: 46ch; }

/* Dòng meta bài viết: ngày · thời gian đọc · tác giả */
.bms-baimeta {
  display: flex; flex-wrap: wrap; gap: var(--bms-space-6);
  margin: var(--bms-space-6) 0 0; padding: 0; list-style: none;
  font-size: var(--bms-fs-sm);
}
.bms-baimeta li { display: inline-flex; align-items: center; gap: var(--bms-space-2); opacity: .92; }


/* ═══════════════════════════════════════════════════════════
   TRANG GIẢI PHÁP  (PDF trang 6)
   ═══════════════════════════════════════════════════════════ */

/* Khối giải pháp nổi bật: ảnh trái · nội dung phải */
.bms-page .bms-gpnb { background: var(--bms-canvas); padding-block: var(--bms-space-7); }
.bms-gpnb__card {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  background: #fff; border-radius: var(--bms-radius-lg); overflow: hidden;
  box-shadow: var(--bms-shadow); border: 1px solid var(--bms-border);
}
.bms-gpnb__media { position: relative; min-height: 380px; }
.bms-gpnb__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bms-gpnb__img--trong { position: absolute; inset: 0; background: var(--bms-green-050); }
.bms-gpnb__body { padding: var(--bms-space-7); }
.bms-gpnb__title { margin: var(--bms-space-4) 0 var(--bms-space-3); font-size: var(--bms-fs-h2); font-weight: 800; line-height: 1.25; color: var(--bms-ink); }
.bms-gpnb__desc { margin: 0 0 var(--bms-space-6); font-size: var(--bms-fs-sm); line-height: 1.75; color: var(--bms-body); }

.bms-gpnb__diem {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bms-space-3);
  margin: 0 0 var(--bms-space-6); padding: 0; list-style: none;
}
.bms-gpnb__diem li {
  display: flex; flex-direction: column; align-items: center; gap: var(--bms-space-3);
  padding: var(--bms-space-4) var(--bms-space-3);
  border: 1px solid var(--bms-border); border-radius: var(--bms-radius);
  text-align: center; font-size: var(--bms-fs-label); line-height: 1.5; color: var(--bms-ink);
}
.bms-gpnb__diem img { width: 30px; height: 30px; object-fit: contain; }

/* Lưới giải pháp 4 cột */
.bms-page .bms-glist { background: var(--bms-canvas); padding-block: var(--bms-space-7) var(--bms-space-9); }
.bms-glist--rel { background: #fff; }
.bms-glist__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bms-space-5); }

.bms-scard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg);
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.bms-scard:hover { box-shadow: var(--bms-shadow-lg); transform: translateY(-2px); }
.bms-scard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; flex: 0 0 auto; }
.bms-scard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bms-scard__img--trong { background: var(--bms-green-050); }
/* Icon nền trắng đè lên mép dưới ảnh */
.bms-scard__icon {
  position: absolute; left: var(--bms-space-4); bottom: calc( var(--bms-space-5) * -1 );
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: var(--bms-radius); background: #fff; box-shadow: var(--bms-shadow);
}
.bms-scard__icon img { width: 28px; height: 28px; object-fit: contain; }
.bms-scard__body { display: flex; flex-direction: column; gap: var(--bms-space-2); flex: 1; padding: calc( var(--bms-space-5) + var(--bms-space-4) ) var(--bms-space-5) var(--bms-space-5); }
.bms-scard__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.bms-scard__title a { color: var(--bms-ink); text-decoration: none; }
.bms-scard__title a:hover { color: var(--bms-green-600); }
.bms-scard__desc { margin: var(--bms-space-2) 0 0; font-size: var(--bms-fs-sm); line-height: 1.7; color: var(--bms-muted); }
.bms-scard__body .bms-link { margin-top: auto; padding-top: var(--bms-space-5); align-self: flex-start; }


/* ═══════════════════════════════════════════════════════════
   TRANG DỰ ÁN  (Dự án.pdf)
   ═══════════════════════════════════════════════════════════ */

.bms-page .bms-danb { background: var(--bms-canvas); padding-block: var(--bms-space-7); }
.bms-danb__card {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--bms-space-7);
  padding: var(--bms-space-5);
  background: #fff; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg);
  box-shadow: var(--bms-shadow);
}
.bms-danb__media { position: relative; min-height: 380px; border-radius: var(--bms-radius); overflow: hidden; }
.bms-danb__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bms-danb__img--trong { position: absolute; inset: 0; background: var(--bms-green-050); }
.bms-danb__body { padding: var(--bms-space-4) var(--bms-space-4) var(--bms-space-4) 0; }
.bms-danb__title { margin: var(--bms-space-4) 0 var(--bms-space-3); font-size: var(--bms-fs-h2); font-weight: 800; line-height: 1.25; color: var(--bms-ink); }
.bms-danb__desc { margin: 0 0 var(--bms-space-5); font-size: var(--bms-fs-sm); line-height: 1.75; color: var(--bms-body); }

.bms-danb__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bms-space-3) var(--bms-space-5); margin: 0 0 var(--bms-space-6); font-size: var(--bms-fs-sm); }
.bms-danb__meta dt { display: inline-flex; align-items: center; gap: var(--bms-space-2); font-weight: 600; color: var(--bms-ink); }
.bms-danb__meta dt .bms-mico { color: var(--bms-green-600); flex: 0 0 auto; }
.bms-danb__meta dd { margin: 0; color: var(--bms-body); }

/* Lưới dự án 4 cột */
.bms-page .bms-dlist { background: var(--bms-canvas); padding-block: var(--bms-space-7) var(--bms-space-9); }
.bms-dlist--rel { background: #fff; }
.bms-dlist__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bms-space-5); }

.bms-dcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg);
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.bms-dcard:hover { box-shadow: var(--bms-shadow-lg); transform: translateY(-2px); }
/*
 * Ảnh thẻ phải ghim tuyệt đối theo tỉ lệ. Trước đây chỉ đặt aspect-ratio nên hộp vẫn phình
 * theo ảnh: __media là flex item, mà flex item mặc định min-height:auto — ảnh dọc hơn khung
 * sẽ đẩy hộp cao lên, làm hàng thẻ so le (đo được 271px lẫn giữa các thẻ 179px).
 * position:absolute cho ảnh + overflow:hidden + flex:0 0 auto mới chặn được.
 */
.bms-dcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; flex: 0 0 auto; }
.bms-dcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bms-dcard__img--trong { background: var(--bms-green-050); }
.bms-dcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--bms-space-5); }
.bms-dcard__title { margin: 0 0 var(--bms-space-4); font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.bms-dcard__title a { color: var(--bms-ink); text-decoration: none; }
.bms-dcard__title a:hover { color: var(--bms-green-600); }

.bms-dmeta { display: flex; flex-direction: column; gap: var(--bms-space-2); margin: 0; padding: 0; list-style: none; }
.bms-dmeta__item { display: flex; align-items: flex-start; gap: var(--bms-space-2); font-size: var(--bms-fs-sm); line-height: 1.5; color: var(--bms-body); }
.bms-dmeta__item .bms-mico { flex: 0 0 auto; margin-top: 2px; color: var(--bms-muted); }
.bms-dcard__body .bms-link { margin-top: auto; padding-top: var(--bms-space-5); align-self: flex-start; }

/* Dải tư vấn thu gọn */
.bms-page .bms-ctag { background: #fff; padding-block: 0 var(--bms-space-9); }
.bms-ctag__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 2fr);
  align-items: center; gap: var(--bms-space-5);
  padding: var(--bms-space-6);
  background: var(--bms-green-050); border-radius: var(--bms-radius-lg);
}
.bms-ctag__icon {
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: var(--bms-radius-pill); background: #fff; color: var(--bms-green-600);
}
.bms-ctag__title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; color: var(--bms-ink); }
.bms-ctag__desc { margin: 0; font-size: var(--bms-fs-sm); line-height: 1.6; color: var(--bms-body); }
.bms-ctag__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--bms-space-3); align-items: center; }
.bms-ctag__form .bms-field { margin: 0; }
.bms-ctag__form input {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--bms-border); border-radius: 8px;
  font: inherit; font-size: var(--bms-fs-sm); color: var(--bms-ink); background: #fff;
}
.bms-ctag__form input:focus-visible { outline: 2px solid var(--bms-green-600); outline-offset: 1px; border-color: var(--bms-green-600); }
.bms-ctag__form .bms-btn { white-space: nowrap; padding-block: 13px; border-radius: 8px; }


/* ═══════════════════════════════════════════════════════════
   TRANG TIN TỨC  (PDF trang 9)
   ═══════════════════════════════════════════════════════════ */

.bms-page .bms-ttsearch { background: var(--bms-canvas); padding-block: var(--bms-space-7) 0; }
.bms-ttsearch__card {
  position: relative; display: block;
  background: #fff; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-pill);
  box-shadow: var(--bms-shadow-sm);
}
.bms-ttsearch__card input[type="search"] {
  width: 100%; padding: 18px 56px;
  border: 0; border-radius: var(--bms-radius-pill); background: none;
  font: inherit; font-size: var(--bms-fs-body); color: var(--bms-ink);
  appearance: none;
}
.bms-ttsearch__card input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.bms-ttsearch__card input:focus-visible { outline: 2px solid var(--bms-green-600); outline-offset: -2px; border-radius: var(--bms-radius-pill); }
.bms-ttsearch__nut { left: 8px; right: auto; }
.bms-ttsearch__xoa { right: 8px; }
.bms-ttsearch__card .bms-fbicon--xoa { display: none; }
.bms-ttsearch__card.co-tu-khoa .bms-fbicon--xoa { display: grid; }

.bms-page .bms-nlist { background: var(--bms-canvas); padding-block: var(--bms-space-7) var(--bms-space-9); }
.bms-nlist--rel { background: #fff; }
.bms-nlist__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bms-space-5); }

.bms-ncard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-lg);
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.bms-ncard:hover { box-shadow: var(--bms-shadow-lg); transform: translateY(-2px); }
.bms-ncard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; flex: 0 0 auto; }
.bms-ncard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bms-ncard__img--trong { background: var(--bms-green-050); }
/* Nhãn chuyên mục nổi ở góc dưới trái ảnh */
.bms-ncard__cat {
  position: absolute; left: var(--bms-space-4); bottom: var(--bms-space-4);
  padding: 6px 14px; border-radius: var(--bms-radius-pill);
  background: #fff; box-shadow: var(--bms-shadow-sm);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bms-green-600);
}
.bms-ncard__body { display: flex; flex-direction: column; flex: 1; padding: var(--bms-space-5); }
.bms-ncard__title { margin: 0 0 var(--bms-space-3); font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.bms-ncard__title a { color: var(--bms-ink); text-decoration: none; }
.bms-ncard__title a:hover { color: var(--bms-green-600); }
.bms-ncard__desc { margin: 0; font-size: var(--bms-fs-sm); line-height: 1.7; color: var(--bms-muted); }
.bms-ncard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-3);
  margin: auto 0 0; padding-top: var(--bms-space-5);
  font-size: var(--bms-fs-sm);
}
/*
 * Trong lưới 4 cột ở trang chủ, hai thẻ giữa hụt vài pixel làm chữ "Đọc tiếp" vỡ hai dòng.
 * Khoá không cho xuống dòng và không cho co lại; ngày đăng nhường chỗ trước.
 */
.bms-ncard__foot .bms-link { flex: 0 0 auto; white-space: nowrap; }
.bms-ncard__date { display: inline-flex; align-items: center; gap: var(--bms-space-2); color: var(--bms-muted); white-space: nowrap; min-width: 0; }


/* ═══════════════════════════════════════════════════════════
   CHI TIẾT DỰ ÁN / GIẢI PHÁP / BÀI VIẾT  (PDF trang 8 & 10)
   ═══════════════════════════════════════════════════════════ */

.bms-page .bms-cshead { background: #fff; padding-block: var(--bms-space-6) var(--bms-space-8); }
.bms-cshead__grid { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: var(--bms-space-7); align-items: start; }
.bms-cshead__title { margin: var(--bms-space-4) 0 var(--bms-space-4); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.2; color: var(--bms-ink); }
.bms-cshead__lead { margin: 0 0 var(--bms-space-6); font-size: var(--bms-fs-sm); line-height: 1.75; color: var(--bms-body); }

/* 6 ô thông tin: 3 cột × 2 hàng */
.bms-cso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bms-space-5) var(--bms-space-4); margin: 0; padding: 0; list-style: none; }
.bms-cso__item { display: flex; align-items: flex-start; gap: var(--bms-space-3); }
.bms-cso__icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--bms-radius-pill); border: 1px solid var(--bms-border); color: var(--bms-green-600); }
.bms-cso__text small { display: block; font-size: var(--bms-fs-label); color: var(--bms-muted); }
.bms-cso__text strong { display: block; margin-top: 2px; font-size: var(--bms-fs-sm); font-weight: 600; color: var(--bms-ink); }

/* Dải điểm mạnh ở chi tiết Giải pháp */
.bms-csmeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bms-space-4); margin: 0; padding: 0; list-style: none; }
.bms-csmeta__item { display: flex; align-items: flex-start; gap: var(--bms-space-3); }
.bms-csmeta__icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--bms-radius-pill); background: var(--bms-green-050); color: var(--bms-green-600); }
.bms-csmeta__icon img { width: 20px; height: 20px; object-fit: contain; }
.bms-csmeta__text strong { display: block; font-size: var(--bms-fs-sm); font-weight: 600; color: var(--bms-ink); }
.bms-csmeta__text small { display: block; margin-top: 2px; font-size: var(--bms-fs-label); color: var(--bms-muted); }

/* Khảm ảnh: 1 lớn trái + 2 nhỏ phải */
/*
 * Khảm ảnh đầu trang Dự án — lưới đổi theo SỐ ẢNH, xem chú thích trong single-du_an.php.
 * Trước đây lưới bị đóng cứng 2 cột × 2 hàng cao 420px nên bài chỉ có một ảnh để lại
 * nguyên một mảng trống bên phải.
 */
.bms-cshead__kham { display: grid; gap: var(--bms-space-3); }
.bms-cshead__kham .bms-cskham__o { position: relative; border-radius: var(--bms-radius); overflow: hidden; }
.bms-cskham__o img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bms-cskham__o--trong { background: var(--bms-green-050); }

/* 1 ảnh: một ô duy nhất, tỉ lệ 4:3 — không còn cột trống */
.bms-cshead__kham--n1 { grid-template-columns: minmax(0, 1fr); }
.bms-cshead__kham--n1 .bms-cskham__o { aspect-ratio: 4 / 3; }

/* 2 ảnh: hai ô cạnh nhau, cao bằng nhau */
.bms-cshead__kham--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 360px; }

/* 3 ảnh: khảm 1 lớn + 2 nhỏ — đúng bản thiết kế trang 8 */
.bms-cshead__kham--n3 { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); grid-template-rows: 1fr 1fr; min-height: 420px; }
.bms-cshead__kham--n3 .bms-cskham__o--1 { grid-row: span 2; }

/* 4 ảnh trở lên: 1 lớn + 3 nhỏ xếp dọc cột phải */
.bms-cshead__kham--n4 { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); grid-template-rows: repeat(3, 1fr); min-height: 420px; }
.bms-cshead__kham--n4 .bms-cskham__o--1 { grid-row: span 3; }

/* Ô cuối khi còn ảnh chưa hiện: phủ mờ + số ảnh còn lại, bấm xuống thư viện */
.bms-cskham__o--them::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(1, 46, 26, .58);
  transition: background .2s ease;
}
.bms-cskham__o--them:hover::after { background: rgba(1, 46, 26, .68); }
.bms-cskham__them {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: var(--bms-fs-sm);
}

/* Thư viện ảnh đầy đủ, đặt sau phần nội dung */
.bms-csanh__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bms-space-3); }
.bms-csanh__o { display: block; border-radius: var(--bms-radius); overflow: hidden; aspect-ratio: 4 / 3; }
.bms-csanh__o img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bms-cshead__img--trong { display: block; width: 100%; min-height: 380px; background: var(--bms-green-050); border-radius: var(--bms-radius); }
.bms-cshead__media img { width: 100%; height: auto; border-radius: var(--bms-radius); }

/* Thân bài: mục lục dính trái · nội dung phải */
.bms-page .bms-csbody { background: var(--bms-canvas); padding-block: var(--bms-space-8) var(--bms-space-9); }
.bms-csbody__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--bms-space-8); align-items: start; }
.bms-csbody__grid--don { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.bms-csbody__aside { position: sticky; top: var(--bms-space-7); }

.bms-muc__nhan { margin: 0 0 var(--bms-space-4); font-size: var(--bms-fs-label); font-weight: 700; letter-spacing: var(--bms-ls-label); text-transform: uppercase; color: var(--bms-ink); }
.bms-muc--khung { padding: var(--bms-space-5); background: #fff; border: 1px solid var(--bms-border); border-radius: var(--bms-radius); }
.bms-muc__list { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--bms-border); }
.bms-muc__item a { display: flex; gap: var(--bms-space-4); padding: 11px 0 11px var(--bms-space-5); color: var(--bms-body); text-decoration: none; font-size: var(--bms-fs-sm); }
.bms-muc__item a:hover { color: var(--bms-green-600); }
.bms-muc__so { flex: 0 0 auto; color: var(--bms-muted); font-variant-numeric: tabular-nums; }

/* Mục cấp 1 có con: chừa cột bên phải cho nút mũi tên, nhánh con chiếm trọn hàng dưới */
.bms-muc__item--cap1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.bms-muc__item--cap1 > a { grid-column: 1; }
.bms-muc__mo {
  grid-column: 2;
  align-self: center;
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 999px;
  background: none; color: var(--bms-muted);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, background-color .2s ease;
}
.bms-muc__mo:hover { background: rgba(5, 98, 64, .08); color: var(--bms-green-600); }
.bms-muc__mo[aria-expanded="true"] { transform: rotate(180deg); color: var(--bms-green-600); }
.bms-muc__item--cap1.is-current > .bms-muc__mo { color: var(--bms-green-600); }

/* Nhánh mục con — không đánh số, thụt vào, có vạch dọc mảnh dẫn theo */
.bms-muc__con {
  grid-column: 1 / -1;
  margin: 0 0 var(--bms-space-2) var(--bms-space-5);
  padding: 0 0 0 var(--bms-space-4);
  list-style: none;
  border-left: 1px solid var(--bms-border);
}
.bms-muc__con[hidden] { display: none; }
.bms-muc__item--cap2 a { padding: 8px 0; font-size: var(--bms-fs-label); }
.bms-muc__item--cap2 .bms-muc__ten { color: var(--bms-muted); }
.bms-muc__item--cap2.is-current { box-shadow: none; }
.bms-muc__item--cap2.is-current .bms-muc__ten { color: var(--bms-green-600); font-weight: 600; }
.bms-muc__item.is-current { box-shadow: -2px 0 0 0 var(--bms-green-600); }
.bms-muc__item.is-current a { color: var(--bms-green-600); font-weight: 600; }
.bms-muc__item.is-current .bms-muc__so { color: var(--bms-green-600); }

.bms-csblock + .bms-csblock { margin-top: var(--bms-space-8); padding-top: var(--bms-space-8); border-top: 1px solid var(--bms-border); }
.bms-csblock__title { display: flex; align-items: baseline; gap: var(--bms-space-4); margin: 0 0 var(--bms-space-4); font-size: 1.4rem; font-weight: 800; color: var(--bms-ink); }
.bms-csblock__so { color: var(--bms-green-600); font-variant-numeric: tabular-nums; }
.bms-csblock p { margin: 0 0 var(--bms-space-4); font-size: var(--bms-fs-sm); line-height: 1.85; color: var(--bms-body); }

.bms-cslist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bms-space-3) var(--bms-space-6);
  margin: 0 0 var(--bms-space-5); padding: var(--bms-space-5) var(--bms-space-6);
  background: var(--bms-green-050); border-radius: var(--bms-radius); list-style: none;
}
.bms-cslist li { position: relative; padding-left: var(--bms-space-5); font-size: var(--bms-fs-sm); line-height: 1.6; color: var(--bms-body); }
.bms-cslist li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--bms-green-600); }

.bms-csfig { margin: 0 0 var(--bms-space-5); }
/* Chặn chiều cao: ảnh dọc do khách upload sẽ kéo khối nội dung dài bất thường */
.bms-csfig__img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: var(--bms-radius); }
.bms-csfig figcaption { margin-top: var(--bms-space-3); text-align: center; font-size: var(--bms-fs-label); font-style: italic; color: var(--bms-muted); }

/* Nội dung bài viết nhập từ trình soạn thảo */
.bms-prose--bai h2 { margin: var(--bms-space-8) 0 var(--bms-space-4); font-size: 1.4rem; font-weight: 800; line-height: 1.3; color: var(--bms-ink); scroll-margin-top: var(--bms-space-8); }
.bms-prose--bai h3 { margin: var(--bms-space-6) 0 var(--bms-space-3); font-size: 1.15rem; font-weight: 700; color: var(--bms-ink); }
.bms-prose--bai > *:first-child { margin-top: 0; }
.bms-prose--bai ul, .bms-prose--bai ol { margin: 0 0 var(--bms-space-4); padding-left: var(--bms-space-6); }
.bms-prose--bai li { margin-bottom: var(--bms-space-2); }
.bms-prose--bai figure { margin: 0 0 var(--bms-space-5); }
/*
 * Ảnh trong bài phải rộng ĐÚNG BẰNG đoạn văn. Ảnh nhập từ web cũ mang width cứng mỗi tấm
 * một kiểu (đo được 659 / 682 / 598px) nên nhìn so le; bms_don_anh_bai() đã bỏ width và
 * bọc vào <figure>, ở đây cho khung đó rộng 100%.
 * KHÔNG dùng max-height + object-fit như trước: object-fit vô tác dụng khi ảnh không đặt
 * kích thước, còn max-height thì cắt cụt ảnh cao.
 */
.bms-prose--bai .bms-baianh,
.bms-prose--bai figure { margin: var(--bms-space-6) 0; }
.bms-prose--bai .bms-baianh a { display: block; }
.bms-prose--bai img { display: block; width: 100%; height: auto; border-radius: var(--bms-radius); }
/* Ảnh nội tuyến trong đoạn văn (logo, icon) thì giữ nguyên cỡ thật */
.bms-prose--bai p > img { width: auto; max-width: 100%; margin-inline: auto; }

/* Chú thích ảnh — dùng được cho cả figcaption lẫn khối caption cũ của WordPress */
.bms-prose--bai figcaption,
.bms-prose--bai .wp-caption-text {
  margin: var(--bms-space-3) 0 0;
  text-align: center;
  font-size: var(--bms-fs-label);
  font-style: italic;
  line-height: 1.55;
  color: var(--bms-muted);
}
.bms-prose--bai .wp-caption { width: 100% !important; max-width: 100%; margin: var(--bms-space-6) 0; }
.bms-prose--bai blockquote {
  position: relative; margin: 0 0 var(--bms-space-5); padding: var(--bms-space-6) var(--bms-space-6) var(--bms-space-6) calc( var(--bms-space-9) - var(--bms-space-2) );
  background: var(--bms-green-050); border-radius: var(--bms-radius);
  font-size: var(--bms-fs-body); line-height: 1.75; color: var(--bms-ink);
}
.bms-prose--bai blockquote::before {
  content: "\201C"; position: absolute; left: var(--bms-space-5); top: 6px;
  font-size: 3.4rem; line-height: 1; color: var(--bms-green-600); opacity: .55;
}
.bms-prose--bai blockquote p:last-child { margin-bottom: 0; }
.bms-prose--bai a { color: var(--bms-green-600); }


/* ═══════════════ Responsive Giải pháp · Dự án · Tin tức ═══════════════ */
@media (max-width: 1199.98px) {
  .bms-glist__grid, .bms-dlist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bms-csbody__grid { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--bms-space-6); }
}
@media (max-width: 991.98px) {
  .bms-glist__grid, .bms-dlist__grid, .bms-nlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-gpnb__card, .bms-danb__card { grid-template-columns: minmax(0, 1fr); }
  .bms-gpnb__media, .bms-danb__media { min-height: 280px; }
  .bms-gpnb__body { padding: var(--bms-space-6); }
  .bms-danb__body { padding: var(--bms-space-4); }
  .bms-cshead__grid { grid-template-columns: minmax(0, 1fr); }
  .bms-cshead__kham { min-height: 300px; }
  /* Mục lục thôi dính, đưa lên trên nội dung */
  .bms-csbody__grid { grid-template-columns: minmax(0, 1fr); }
  .bms-csbody__aside { position: static; }
  .bms-ctag__card { grid-template-columns: auto minmax(0, 1fr); }
  .bms-ctag__form { grid-column: span 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bms-ctag__form .bms-field--submit { grid-column: span 3; }
  .bms-ctag__form .bms-btn { width: 100%; justify-content: center; }
}
@media (max-width: 767.98px) {
  .bms-glist__grid, .bms-dlist__grid, .bms-nlist__grid { grid-template-columns: minmax(0, 1fr); }
  .bms-gpnb__diem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-danb__meta { grid-template-columns: minmax(0, 1fr); gap: 2px var(--bms-space-4); }
  .bms-danb__meta dd { margin-bottom: var(--bms-space-3); }
  .bms-cso, .bms-csmeta { grid-template-columns: minmax(0, 1fr); }
  .bms-cshead__kham { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .bms-cskham__o--1 { grid-row: auto; aspect-ratio: 16 / 10; }
  .bms-cskham__o--2, .bms-cskham__o--3 { display: none; }
  .bms-cslist { grid-template-columns: minmax(0, 1fr); padding: var(--bms-space-5); }
  .bms-ctag__card { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .bms-ctag__form { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .bms-ctag__form .bms-field--submit { grid-column: auto; }
  .bms-baimeta { gap: var(--bms-space-4); }
  .bms-phero--sang .bms-phero__title, .bms-phero--bai .bms-phero__title,
  .bms-phero--tt .bms-phero__title, .bms-phero--sang .bms-phero__desc,
  .bms-phero--bai .bms-phero__desc { max-width: none; }
  .bms-phero--sang::after { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 100%); }
  .bms-ttsearch__card input[type="search"] { padding: 15px 48px; font-size: var(--bms-fs-sm); }
}


/* ═══════════════ Contact Form 7 ═══════════════
   Các khung form của theme (.bms-cta__form, .bms-ctag__form) là LƯỚI mà con trực tiếp phải
   là các ô .bms-field. CF7 chèn thêm một thẻ <form> ở giữa nên lưới sẽ vỡ — cho thẻ <form>
   đó display:contents để các ô lại thành con trực tiếp của lưới.
   ═══════════════════════════════════════════════ */
.bms-cta__form > .wpcf7,
.bms-ctag__form > .wpcf7 { display: contents; }
.bms-cta__form .wpcf7-form,
.bms-ctag__form .wpcf7-form { display: contents; }

/*
 * Khối đăng ký bản tin khác hai khối trên: form của theme là thẻ <form class="bms-lh-nl__form">
 * chứ không có div bao ngoài, nên khi CF7 thay vào thì KHÔNG còn lớp nào để kế thừa —
 * ô nhập và nút rớt xuống hai dòng. Dựng lại đúng hàng ngang ngay trên form của CF7.
 */
.bms-lh-nl .wpcf7-form {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: var(--bms-space-3);
}
.bms-lh-nl .wpcf7-form .bms-field { flex: 1 1 200px; min-width: 0; margin: 0; }
.bms-lh-nl .wpcf7-form .bms-field--submit { flex: 0 0 auto; }
.bms-lh-nl .wpcf7-form .bms-btn { white-space: nowrap; }
.bms-lh-nl .wpcf7-response-output { flex: 1 1 100%; }

/* Ô nhập của CF7 bọc thêm một lớp span — cho nó trong suốt về mặt bố cục */
.bms-field .wpcf7-form-control-wrap { display: block; }
.bms-field .wpcf7-form-control { width: 100%; }
/* Trước dùng thuộc tính rows="5"; CF7 không nhận nên đặt chiều cao ở đây cho chắc */
.bms-field textarea.wpcf7-form-control { min-height: 140px; }
.bms-field .wpcf7-submit { width: auto; }
/* Nút tràn hàng ở trang Liên hệ — phải thắng quy tắc width:auto ngay trên */
.bms-field .wpcf7-submit.bms-btn--block { width: 100%; }
/*
 * Trong hai khung LƯỚI, nút phải lấp đầy ô của mình cho khớp form dựng cứng cũ:
 * <button> cũ tự giãn theo ô, còn <input type=submit> của CF7 thì co theo chữ.
 * Cả CHIỀU CAO cũng phải bằng: đệm của nút và của ô nhập khác nhau (đo được 52 với 55px)
 * nên nếu chỉ căn giữa thì nút hụt 3px, nhìn ra là lệch hàng.
 */
.bms-cta__form .bms-field--submit,
.bms-ctag__form .bms-field--submit { align-self: stretch; }
.bms-cta__form .bms-field--submit .wpcf7-submit,
.bms-ctag__form .bms-field--submit .wpcf7-submit { width: 100%; height: 100%; }

/* Thông báo và vòng quay chiếm trọn một hàng, không chen vào giữa các ô */
.bms-cta__form .wpcf7-response-output,
.bms-ctag__form .wpcf7-response-output { grid-column: 1 / -1; }
/* CF7 luôn in sẵn khung thông báo dù chưa có gì — trống thì phải ẩn, không để ô viền rỗng */
.wpcf7-response-output:empty { display: none; }
.wpcf7-response-output {
  margin: var(--bms-space-4) 0 0;
  padding: 12px 16px;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-sm);
  font-size: var(--bms-fs-sm);
  line-height: 1.5;
  background: #fff;
  color: var(--bms-body);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--bms-green-600); color: var(--bms-green-700, var(--bms-green-600)); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #c0392b; color: #c0392b; }

.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: var(--bms-fs-label); color: #c0392b; }
.wpcf7-form-control.wpcf7-not-valid { border-color: #c0392b; }

/*
 * Vòng quay của CF7 phải NẰM NGOÀI luồng. Nút được đặt rộng 100% nên vòng quay (inline,
 * luôn chiếm chỗ dù đang ẩn) bị đẩy xuống dòng dưới: đo được ô nút cao 83px trong khi nút
 * chỉ 52px, khiến nút lệch lên so với ba ô nhập cùng hàng, và ở trang Liên hệ thì đẩy dòng
 * ghi chú ra xa.
 */
.bms-field--submit { position: relative; }
.bms-field--submit .wpcf7-spinner {
  position: absolute; right: 14px; top: 50%;
  margin: 0; transform: translateY(-50%);
}
/* Ô nút là ô cuối của form dọc — bỏ khoảng trống thừa bên dưới */
.wpcf7-form .bms-field--submit { margin-bottom: 0; }

/*
 * Dải xanh đậm (tư vấn nhanh ở trang Dự án, đăng ký bản tin): chữ thông báo phải đọc được.
 * Phải kèm `.wpcf7 form` để thắng các quy tắc .wpcf7 form.sent/.invalid ở trên (0,3,0).
 */
.bms-ctag .wpcf7 form .wpcf7-response-output,
.bms-lh-newsletter .wpcf7 form .wpcf7-response-output {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.bms-ctag .wpcf7-not-valid-tip,
.bms-lh-newsletter .wpcf7-not-valid-tip { color: #ffd7d0; }

/* Trang Liên hệ: hàng Họ tên + Số điện thoại nằm cạnh nhau như form cũ */
.bms-lh-form__hang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bms-space-4); }
@media (max-width: 599.98px) {
  .bms-lh-form__hang { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════ Hiện dần khi cuộn tới ═══════════════
   Gắn data-bms-hien vào một thẻ là nó bay lên hiện ra khi cuộn tới. Thêm
   data-bms-hien-lan thì các thẻ con hiện lần lượt (JS đánh số vào --hien-i).

   ⚠️ Trạng thái giấu CHỈ áp dụng dưới .bms-js — class này do wp_head gắn vào thẻ <html>
   và chỉ gắn khi trình duyệt bật JavaScript và KHÔNG bật "giảm chuyển động". Nếu giấu vô
   điều kiện thì máy tắt JavaScript sẽ mất trắng nội dung.
   ═══════════════════════════════════════════════════════ */
.bms-js [data-bms-hien] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.bms-js [data-bms-hien].is-hien {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Thẻ con hiện lần lượt, mỗi thẻ chậm hơn thẻ trước 90ms */
.bms-js [data-bms-hien-lan] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--hien-i, 0) * 90ms);
}
.bms-js [data-bms-hien-lan].is-hien > * { opacity: 1; transform: none; }
/* Bản thân khối cha không cần bay theo, chỉ các thẻ con bay */
.bms-js [data-bms-hien-lan][data-bms-hien] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bms-js [data-bms-hien],
  .bms-js [data-bms-hien].is-hien,
  .bms-js [data-bms-hien-lan] > * {
    opacity: 1; transform: none; transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce
   ───────────────────────────────────────────────────────────────────────────
   Toàn bộ khối này CHỈ có tác dụng khi trang thật sự sinh ra markup tương ứng:
   giá và nút mua chỉ xuất hiện ở sản phẩm đã nhập giá, còn giỏ hàng / thanh toán /
   tài khoản là ba trang mới do WooCommerce tạo. Giao diện đã duyệt không bị đụng tới.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Giá trên thẻ sản phẩm ── */
.bms-pcard__price {
  margin: 0 0 var(--bms-space-3);
  font-size: var(--bms-fs-h3);
  font-weight: 700;
  line-height: var(--bms-lh-tight);
  color: var(--bms-green-700);
}
.bms-pcard__price del { margin-right: 8px; font-size: var(--bms-fs-sm); font-weight: 500; color: var(--bms-muted); }
.bms-pcard__price ins { text-decoration: none; }

/* ── Giá + nút mua ở trang chi tiết ── */
.bms-pd__buy {
  margin: var(--bms-space-5) 0;
  padding: var(--bms-space-5);
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-lg, 14px);
  background: var(--bms-green-050);
}
.bms-pd__price {
  margin: 0 0 var(--bms-space-4);
  font-size: var(--bms-fs-h2);
  font-weight: 700;
  line-height: var(--bms-lh-tight);
  color: var(--bms-green-700);
}
.bms-pd__price del { margin-right: 10px; font-size: var(--bms-fs-body); font-weight: 500; color: var(--bms-muted); }
.bms-pd__price ins { text-decoration: none; }

/* Form "thêm vào giỏ" của WooCommerce — xếp ô số lượng và nút trên một hàng */
.bms-pd__buy form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bms-space-3);
  margin: 0;
}
.bms-pd__buy .quantity input[type="number"] {
  width: 88px;
  padding: 12px 10px;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-pill);
  font: inherit;
  text-align: center;
  background: #fff;
}
.bms-pd__buy .stock { flex: 1 0 100%; margin: 0; font-size: var(--bms-fs-sm); color: var(--bms-muted); }

/*
 * Nút của WooCommerce mang class .button, không mang .bms-btn — chép lại đúng dáng nút
 * đặc của bản thiết kế thay vì sửa markup do plugin sinh ra.
 */
.bms-pd__buy .button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bms-space-3);
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--bms-radius-pill);
  background: var(--bms-green-600);
  color: #fff;
  font-family: inherit;
  font-size: var(--bms-fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease;
}
.bms-pd__buy .button:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: var(--bms-green-700); color: #fff; }

/* ── Giỏ hàng · Thanh toán · Tài khoản ── */
/* Ba trang này do WooCommerce sinh, không có trong bản thiết kế. Chỉ căn khổ và
   chỉnh chữ cho khớp phần còn lại của site, không dựng lại giao diện. */
.woocommerce-page .entry-content,
.woocommerce-page .bms-page__body {
  max-width: var(--bms-container);
  margin-inline: auto;
  padding-inline: var(--bms-gutter);
}
.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--bms-border);
  border-collapse: collapse;
  border-radius: var(--bms-radius-lg, 14px);
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bms-line);
  text-align: left;
  vertical-align: middle;
}
.woocommerce table.shop_table th { font-weight: 600; color: var(--bms-ink); background: var(--bms-green-050); }
.woocommerce table.shop_table img { width: 64px; height: auto; border-radius: 8px; }

.woocommerce form .form-row { margin-bottom: var(--bms-space-4); }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: var(--bms-fs-sm); font-weight: 600; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bms-border);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}
.woocommerce form .form-row textarea { min-height: 110px; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 var(--bms-space-5);
  padding: 14px 18px;
  border-left: 4px solid var(--bms-green-600);
  border-radius: 10px;
  background: var(--bms-green-050);
  list-style: none;
}
.woocommerce-error { border-left-color: #b32d2e; background: #fdf0f0; }

/* Bảng ngang trên màn hình hẹp phải tự cuộn, không được đẩy tràn cả trang */
@media (max-width: 767.98px) {
  .woocommerce table.shop_table { display: block; overflow-x: auto; }
}

/* Khổ trang cho Giỏ hàng · Thanh toán · Tài khoản (xem page-woocommerce.php) */
.bms-wcpage { padding: var(--bms-space-7, 48px) 0 var(--bms-space-8, 64px); }
.bms-wcpage__title { margin: var(--bms-space-4) 0 var(--bms-space-6); }
.bms-wcpage__body > * + * { margin-top: var(--bms-space-5); }