/*
 * brand.css — CHỈ chứa override cho thương hiệu riêng.
 *
 * TẠI SAO LÀ FILE RIÊNG: `bootstrap.css` và `style.css` là CSS GỐC của hbcg.vn,
 * copy nguyên trạng và không sửa một dòng — đó là điều kiện để mọi khác biệt về
 * hiển thị còn truy được về bản gốc. Mọi thứ ở đây là cố ý lệch bản gốc, và nằm
 * gọn một chỗ để soi lại. File này được nạp SAU hai file kia trong
 * `app/layout.tsx` nên thắng theo thứ tự, không cần `!important`.
 */

/*
 * TẠM THỜI — LINK ĐANG BỊ VÔ HIỆU HOÁ (`lib/flags.ts`), ở menu trái và ở footer.
 *
 * MÀU GIỮ NGUYÊN, có chủ ý: yêu cầu là vô hiệu hoá chứ không phải làm mờ. Và bỏ
 * `href` không tự đổi màu — `.menu a`, `.footer a` (`style.css:1498`) cùng
 * `.nav > li > a` (`bootstrap.css:4066`) đều là selector theo element, không phải
 * `a:link`/`a:visited`.
 *
 * Chỉ còn một dòng, và nó KHÔNG phải về màu: thẻ `a` không có `href` rơi về
 * `cursor: auto`, tức con trỏ text (I-beam) khi trỏ vào chữ — nhìn như lỗi render
 * chứ không như một mục menu. `pointer` trả lại đúng con trỏ bàn tay mà link còn
 * sống vẫn có, nên khi hover menu trông y như bình thường.
 *
 * SELECTOR LÀ `[data-href]`, KHÔNG PHẢI `[aria-disabled]` — và đó là điểm dễ sai:
 * toggle "Công trình" cũng bị bỏ `href` (nó có href thật `/project.html`, khác 6
 * toggle kia dùng `#`), nhưng nó CỐ Ý không mang `aria-disabled` vì nó vẫn mở/đóng
 * dropdown bình thường. Bám vào `aria-disabled` thì đúng một mục menu trong mười
 * mục bị bỏ sót và hover ra con trỏ text. `data-href` mới là dấu hiệu chung của
 * MỌI thẻ đã bị bỏ `href` — ở menu, ở toggle, và ở footer.
 *
 * HỆ QUẢ ĐÃ CHỌN: cùng màu + cùng con trỏ + cùng hover nghĩa là mục bị vô hiệu hoá
 * trông KHÔNG khác gì mục còn sống — người dùng sẽ click và không có gì xảy ra. Đó
 * là yêu cầu (giữ menu như bình thường, chỉ chặn điều hướng), không phải sơ suất.
 * `aria-disabled` vẫn được giữ trên các link thật nên trình đọc màn hình vẫn biết.
 *
 * Bỏ cả block này khi `MENU_LINKS_ENABLED` bật lại: lúc đó không còn thẻ nào mang
 * `data-href`, luật thành chết chứ không sai.
 */
a[data-href] {
  cursor: pointer;
}

/*
 * VỊ TRÍ LOGO Ở MENU TRÁI.
 *
 * Bản gốc để logo sát cạnh trên-trái, không padding, `max-width: 180px` trong
 * sidebar rộng 230px (`style.css:78`, `style.css:101`). Điều đó ổn với logo GỐC:
 * ảnh vuông 563×563, gần như một khối biểu tượng.
 *
 * Logo hiện tại là 525×350 — ngang, và có wordmark "Construction". Ở 180px nó
 * chiếm 78% chiều rộng sidebar, dính cả hai cạnh, và lệch hẳn so với chữ trong
 * menu: link menu có `padding: 8px 30px` (`bootstrap.css:4066`) nên chữ bắt đầu
 * ở mốc 30px. Hai mốc 0 và 30 cạnh nhau là chỗ trông "sai vị trí".
 *
 * Nên: padding 30px hai bên để cạnh trái logo THẲNG HÀNG với chữ trong menu, và
 * hạ xuống 150px (còn 20px hở bên phải) để logo không áp đảo menu.
 */
/*
 * BỌC TRONG min-width: 993px LÀ BẮT BUỘC, không phải cho gọn.
 *
 * Logo trong menu là `img.logo.hidden-xs.hidden-sm`, tức bị
 * `display: none !important` ở dưới 992px (`bootstrap.css:6749` và `:6754`) —
 * ở mobile thì navbar mới là chỗ hiện logo. Nếu để luật này chạy ở mọi khổ màn,
 * thẻ `a` bọc nó vẫn là một block có padding 28+22px trong khi ảnh bên trong
 * biến mất, nên đầu menu offcanvas thừa ra 50px trắng — cộng thêm
 * `padding-top: 57px` của `.sidebar-offcanvas` thì mục menu đầu tiên bị đẩy
 * xuống hơn 100px. Đã từng xảy ra đúng như vậy.
 *
 * Mốc 993px theo đúng quy ước của `style.css`: mọi luật mobile ở đó dùng
 * `max-width: 992px`, nên desktop bắt đầu từ 993px.
 */
@media (min-width: 993px) {
  .menu__inner > a:first-child {
    display: block;
    padding: 28px 30px 22px;
  }

  .menu__inner > a:first-child .logo {
    max-width: 150px;
  }
}

/*
 * NAVBAR MOBILE (<992px): giới hạn theo CHIỀU CAO, không theo chiều rộng.
 *
 * Luật gốc là `.logo { width: 40px }` (`style.css:410`) — tính theo chiều rộng,
 * hợp với logo vuông. Với logo ngang 1.5:1 thì 40px rộng chỉ còn 27px cao và cả
 * wordmark biến thành vệt mờ. `.navbar-brand` cao 50px với `padding: 15px`
 * (`bootstrap.css:4369`) nên chỗ trống cho ảnh chỉ 20px; giảm padding còn 11px
 * để ảnh cao 28px vừa khít 50px của thanh navbar.
 *
 * 28px là TRẦN thật sự ở đây: cao hơn nữa thì phải nâng chiều cao cả thanh
 * navbar, tức đổi layout mobile của bản gốc chứ không còn là chỉnh logo.
 */
@media (max-width: 992px) {
  /*
   * Logo CĂN GIỮA THEO CHIỀU DỌC trong thanh navbar mobile. Vị trí ngang giữ
   * nguyên bản gốc: sát cạnh trái, cách 15px.
   *
   * Vì sao trước đó nó lệch lên: `.navbar-brand` của Bootstrap có
   * `height: 50px` cố định (`bootstrap.css:4371`) trong khi `.navbar-header` cao
   * 56px — chiều cao đó do nút hamburger quyết định (40px + margin 8px trên và
   * dưới). Hộp 50px nằm đầu luồng của một hàng 56px nên logo bị đẩy lên, hụt 6px
   * ở dưới.
   *
   * Cách sửa chỉ chạm vào brand: bỏ chiều cao cố định, tách khỏi luồng bằng
   * `position: absolute` rồi `top: 50%` + `translateY(-50%)`. Nút hamburger giữ
   * đúng `float: right` của bản gốc, không bị ảnh hưởng.
   */
  .navbar-header {
    position: relative;
    min-height: 56px;
  }

  .navbar-brand {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    height: auto;
    padding: 0 15px;
  }

  .navbar-brand .logo {
    width: auto;
    height: 28px;
  }

  /*
   * SỬA LỖI CÓ SẴN CỦA BẢN GỐC: ô tìm kiếm trong menu mobile bị cắt mất mép phải.
   *
   * Đã đo trên bản build (viewport 500px, menu mở): mép phải của form ở 505px
   * trong khi menu chỉ rộng tới 485px — tràn 20px, và `.menu { overflow-x: hidden }`
   * cắt gọn phần tràn nên nhìn như ô input bị đứt.
   *
   * Hai nguyên nhân cộng lại:
   * 1. `.social-icons` ở ≤992px dùng `position: relative; left: 20px; width: auto`
   *    (style.css:416+) — `left` dịch CẢ block sang phải 20px mà không giảm chiều
   *    rộng, nên mọi con full-width của nó đều tràn đúng 20px;
   * 2. `.navbar-form` có `margin-left/right: -15px` (bootstrap.css:4467) để "bleed"
   *    ra hai bên navbar — hợp với navbar, không hợp khi nằm trong menu.
   *
   * Cách sửa giữ đúng thị giác cũ (vẫn thụt 20px) nhưng không tràn: đổi `left`
   * thành `padding-left`, và bỏ margin âm của form.
   */
  .menu .social-icons {
    left: 0;
    padding-left: 20px;
  }

  .menu .social-icons .navbar-form {
    margin-left: 0;
    margin-right: 0;
  }
}

/*
 * TRANG CHỦ TRÊN MOBILE.
 *
 * Banner gốc dùng 100vh dù nó nằm dưới navbar cao 57px. Trên Safari mobile,
 * vh còn tính cả vùng nằm sau thanh công cụ, vì vậy ảnh bị kéo quá cao và nút
 * cuộn ở đáy rơi ra ngoài vùng nhìn thấy. Một hero thấp hơn cũng cho phép ảnh
 * panorama 1846×852 lộ thêm bối cảnh theo chiều ngang, thay vì crop quá sát vào
 * hình lục giác ở giữa.
 *
 * Dãy thumbnail của Clips hiện không có ảnh hợp lệ nhưng các .img7 vẫn chiếm
 * 150px chiều cao. Ẩn dãy trống trên mobile để nút "Xem thêm" nằm ngay dưới
 * video; carousel và video chính không thay đổi.
 */
@media (max-width: 767px) {
  .main > .banner {
    height: clamp(500px, 72svh, 620px);
    min-height: 0;
  }

  .main > .banner .scroll {
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    animation: none;
  }

  .clips .carousel-indicators {
    display: none;
  }

  .clips a.more-btn {
    margin: 12px 0 0;
  }
}