/* =====================================================================
   B01 — Header và Hero: sửa lỗi
   =====================================================================
   Nạp sau b01.css và layout.css.
   ===================================================================== */

:root {
  --header-h: 84px;
}

/* ---------------------------------------------------------------------
   1. HEADER DÍNH LÊN ĐẦU
   ---------------------------------------------------------------------
   Trước: header position:relative nên cuộn qua là mất hẳn. Trang cao
   9.700px trên máy tính và 13.600px trên điện thoại — khách đọc tới giữa
   trang thì không còn menu, không còn nút "Tư vấn dự án", muốn liên hệ
   phải cuộn ngược lên tận đầu. Với trang một-trang-duy-nhất thì đây là
   chỗ mất khách rõ nhất.

   Dùng fixed chứ không dùng sticky: sticky chỉ dính trong phạm vi khối
   cha của nó (ở đây là section B01), nên cuộn qua B01 là hết dính.
   --------------------------------------------------------------------- */

.b01 .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 60;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #e4ecf8;
  /* Căn nội dung header trùng lưới 1320px với các khối còn lại */
  padding-inline: max(
    var(--gutter),
    calc((100% - var(--container)) / 2 + var(--gutter))
  );
}

/* Chừa chỗ cho header, nếu không hero bị che.
   Phải viết đủ đường dẫn: layout.css có quy tắc
   `.site-main > section > div:first-child { padding-block: 0 }` với độ ưu
   tiên cao hơn `.b01 .wrap`, nên cách viết ngắn bị nó đè. */
.site-main > section.b01 > .wrap {
  padding-top: var(--header-h);
}

/* Neo trong trang phải dừng dưới header, không bị header che mất tiêu đề */
html {
  scroll-padding-top: calc(var(--header-h) + 12px);
}

/* Menu điện thoại là anh em của header, không nằm trong header, nên cũng
   phải fixed — nếu không, cuộn xuống rồi mở menu thì menu nằm tít trên
   đầu trang, ngoài tầm nhìn. */
@media (max-width: 1010px) {
  .b01 .mobile-menu {
    position: fixed;
    top: calc(var(--header-h) + 6px);
    left: var(--gutter);
    right: var(--gutter);
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto;
    z-index: 59;
  }
}

/* ---------------------------------------------------------------------
   2. CHIỀU CAO HEADER THEO TỪNG KHỔ MÀN
   --------------------------------------------------------------------- */

@media (max-width: 1010px) {
  :root {
    --header-h: 76px;
  }
}

@media (max-width: 710px) {
  :root {
    --header-h: 68px;
  }
}

/* ---------------------------------------------------------------------
   3. LOGO TRÊN ĐIỆN THOẠI
   ---------------------------------------------------------------------
   Logo đang cao 67px trong header 76px, gần như chạm hai mép, và rộng
   200px trên màn 375px — chiếm hơn nửa bề ngang. Thu lại cho thoáng.
   --------------------------------------------------------------------- */

@media (max-width: 710px) {
  .b01 .brand {
    width: min(176px, 47vw);
  }
}

/* ---------------------------------------------------------------------
   4. VÙNG CHẠM NÚT MENU
   Nút hamburger đang 40x40, dưới mức 44px tối thiểu cho ngón tay.
   --------------------------------------------------------------------- */

@media (max-width: 1010px) {
  .b01 .hamburger,
  .b01 .icon-circle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------
   5. Ô TÌM KIẾM
   Khi header fixed, lớp phủ tìm kiếm neo theo header là đúng, chỉ cần
   đảm bảo nó nổi trên mọi thứ.
   --------------------------------------------------------------------- */

.b01 .search-overlay {
  z-index: 61;
}

.b01 .search-results:empty {
  display: none;
}

/* ---------------------------------------------------------------------
   6. MỤC ĐANG XEM TRÊN MENU
   ---------------------------------------------------------------------
   "Trang chủ" đang luôn tô xanh dù khách đã cuộn xuống tận FAQ. Nhãn
   đang-xem chạy theo mục thật, do js/b01-nav.js gắn lớp .is-current.
   --------------------------------------------------------------------- */

.b01 .nav > a.is-current:not(.active) {
  color: var(--blue);
  position: relative;
}

.b01 .nav > a.is-current:not(.active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

/* Khi đã cuộn khỏi đầu trang, "Trang chủ" nhạt bớt để nhường nhãn
   đang-xem cho mục khác — nhưng vẫn giữ nguyên hình viên nhộng.
   css/b01-menu.css lo phần hình thức; ở đây chỉ gỡ đổ bóng. */
.b01 .nav > a.active.is-dimmed {
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   7. TIÊU ĐỀ HERO TỰ XUỐNG DÒNG
   ---------------------------------------------------------------------
   Bản gốc ngắt dòng cứng bằng <br/> theo bề ngang 1540px. Khi lưới chung
   về 1320px thì cột chữ hẹp lại, "Thiết kế Website, App" không đủ chỗ nên
   vỡ thành 4 dòng, chữ "App" đứng trơ một mình.

   Bỏ ngắt cứng ở giữa, chỉ giữ ngắt trước dòng nhấn "Theo yêu cầu".
   text-wrap: balance để trình duyệt chia các dòng đều nhau thay vì dồn
   chữ lên dòng đầu rồi bỏ lại một từ lẻ ở dòng cuối.
   --------------------------------------------------------------------- */

.b01 h1 {
  text-wrap: balance;
}

/* ---------------------------------------------------------------------
   8. HEADER BỊ CÁC BLOCK SAU VẼ ĐÈ LÊN
   ---------------------------------------------------------------------
   Cuộn tới B03 trở đi thì menu biến mất sau nội dung.

   Nguyên nhân: b01.css đặt `isolation: isolate` cho .b01. Thuộc tính đó
   tạo một TẦNG XẾP RIÊNG, nên z-index:60 của header chỉ có giá trị bên
   trong .b01, không so được với các block bên ngoài. Mà b02…b10 đều là
   position:relative và nằm SAU .b01 trong HTML, nên chúng vẽ đè lên.

   Đổi mấy con số z-index là vô ích, phải gỡ chính cái tầng xếp đó.
   Đã kiểm b01.css không dùng mix-blend-mode nên gỡ isolation an toàn.
   --------------------------------------------------------------------- */

.b01 {
  isolation: auto;
}

.b01 .header {
  z-index: 1000;
}

/* Menu điện thoại và lớp tìm kiếm phải nằm trên mọi block, dưới header */
@media (max-width: 1010px) {
  .b01 .mobile-menu {
    z-index: 999;
  }
}

.b01 .search-overlay {
  z-index: 1001;
}

/* ---------------------------------------------------------------------
   9. LOGO VÀ CHIỀU CAO HERO
   ---------------------------------------------------------------------
   Đo ở màn 1440px trước khi sửa:
     logo      305x102px — chiếm 21% bề ngang màn hình
     header    106px
     cả khối   842px, min-height khoá ở 760px
     hình hero 707x584

   Logo to quá so với thanh menu, và hero cao 842px đẩy toàn bộ nội dung
   bên dưới xuống sâu — khách phải cuộn mới thấy dịch vụ đầu tiên.
   --------------------------------------------------------------------- */

.b01 .brand {
  width: clamp(164px, 14.5vw, 212px);
}

.b01 {
  min-height: 0;
}

.b01 .hero {
  min-height: 0;
  padding-bottom: clamp(36px, 4vw, 60px);
}

.b01 .hero-art {
  height: auto;
}

.b01 .hero-art img {
  max-height: 500px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 710px) {
  .b01 .brand {
    width: min(152px, 42vw);
  }

  .b01 .hero-art img {
    max-height: 290px;
  }
}