/* =====================================================================
   LƯỚI CHUNG CHO TOÀN TRANG
   =====================================================================
   File này nạp SAU b01–b10 nên ghi đè được bề ngang và khoảng cách của
   từng block.

   VÌ SAO CẦN:
   Mười block được dựng rời nhau nên mỗi block tự đặt một lưới riêng. Đo
   trên màn 1440px trước khi có file này:

     Block   Bề ngang tối đa   Padding dọc      Cỡ H2
     b01     1540px            0 / 0            50px
     b02     1600px            86 / 130         45px
     b03     1460px            70 / 82          57px
     b04     1720px            37 / 60          43px
     b05     —                 54 / 70          49px
     b06     1450px            30 / 48          43px
     b07     1520px            30 / 68          51px
     b08     1480px            28 / 76          43px
     b09     1510px            35 / 50          51px
     b10     —                 88 / 0           24px

   Mép trái phải của từng khối lệch nhau tới 325px, khoảng cách dọc chênh
   gấp bốn lần, cỡ tiêu đề chênh 14px. Mắt người đọc thấy ngay là "chưa
   hài hoà" dù từng block riêng lẻ đều đẹp.

   CÁCH SỬA:
   Một bề ngang, một nhịp dọc, một thang cỡ chữ cho tất cả.
   ===================================================================== */

:root {
  /* Bề ngang nội dung. 1320px vừa đủ rộng cho lưới 3–4 cột mà dòng chữ
     không dài quá sức đọc. */
  --container: 1320px;

  /* Lề hai bên: hẹp trên điện thoại, rộng dần trên màn lớn. */
  --gutter: clamp(18px, 4vw, 40px);

  /* Nhịp dọc giữa các khối. */
  --section-y: clamp(56px, 6.5vw, 96px);

  /* Thang cỡ chữ tiêu đề. */
  --h1: clamp(30px, 4.4vw, 52px);
  --h2: clamp(26px, 3.3vw, 42px);
  --h3: clamp(17px, 1.3vw, 20px);
  --lead: clamp(14px, 1.1vw, 16px);
}

/* --- Một bề ngang cho mọi khối --------------------------------------- */

.b01 .wrap,
.b02__inner,
.b03__inner,
.b04 .wrap,
.b04 .heading,
.b05 .wrap,
.b06__wrap,
.b07 .container,
.b08-inner,
.b09 .wrap,
.footer-b10 .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* b04 trải bản đồ quy trình rộng hơn phần còn lại; kéo về cùng lưới */
.b04 .process-track {
  max-width: var(--container);
  margin-inline: auto;
}

/* --- Một nhịp dọc ----------------------------------------------------- */

.site-main > section {
  padding-block: var(--section-y);
  /* Lề hai bên do khối bên trong lo, nếu section cũng đặt lề thì cộng dồn
     và khối đó hẹp hơn các khối khác (b03 từng bị lệch 11px vì vậy). */
  padding-inline: 0;
}

/* b01 là hero, tự lo khoảng cách bên trong */
.site-main > section.b01 {
  padding-block: 0;
}

/* Những khối có sóng trang trí ở chân cần chừa thêm chỗ */
.b02,
.b07,
.footer-b10 {
  padding-bottom: calc(var(--section-y) + 32px);
}

.site-main > section > div:first-child {
  padding-block: 0;
}

/* --- Một thang cỡ chữ -------------------------------------------------- */

.b01 h1 {
  font-size: var(--h1);
}

/* Vài block đặt cỡ chữ bằng selector hai cấp (.b04 .heading h2) nên phải
   viết đúng mức đó, nếu không quy tắc chung thua về độ ưu tiên. */
.b02 .b02__heading,
.b03 .b03__header h2,
.b04 .heading h2,
.b05 .heading h2,
.b06 .b06__heading h2,
.b07 .section-head h2,
.b08 .b08-heading h2,
.b09 .head h2 {
  font-size: var(--h2);
  line-height: 1.2;
}

/* Tiêu đề thẻ bên trong các khối */
.b02__card h2,
.b03__card h3,
.b04 .step h3,
.b05 .reason h3,
.b06__body h3,
.b07 .tech-card h3,
.b09 .adv h4 {
  font-size: var(--h3);
  line-height: 1.35;
}

/* --- Chữ nhỏ quá thì không ai đọc được -------------------------------- */
/* Đo được 86 chỗ dưới 12px trên khổ điện thoại. Dưới 12px là mức mà mắt
   phải căng ra, nhất là chữ xám nhạt trên nền trắng. */

@media (max-width: 760px) {
  .b01 .dropdown small,
  .b01 .nav a,
  .b06__chips span,
  .b07 .tech-card p,
  .b08 .b08-item p,
  .b09 .detail p,
  .footer-b10 .about,
  .footer-b10 small {
    font-size: 12px;
  }
}

/* --- Vùng chạm trên điện thoại ---------------------------------------- */
/* Đo được 25 nút nhỏ hơn 40px. Ngón tay người lớn cần tối thiểu 44px,
   nút tròn 36px rất dễ bấm trượt. */

@media (max-width: 900px) {
  .b02__cards button,
  .b03__go,
  .b06__nav,
  .b01 .icon-circle,
  .footer-b10 .social {
    min-width: 44px;
    min-height: 44px;
  }

  .b06__pagination button {
    min-width: 24px;
    min-height: 24px;
  }
}

/* Link liên hệ và link chính sách là chữ nên chỉ cao 18–23px. Trên điện
   thoại đó là vùng chạm quá hẹp, nhất là số hotline — thứ khách bấm nhiều
   nhất. Nới vùng chạm mà không làm chữ to lên. */

@media (max-width: 900px) {
  .b09 .detail a,
  .footer-b10 .contact a,
  .footer-b10 .legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Chấm chuyển dự án: giữ chấm nhỏ nhưng nới vùng bấm ra quanh nó */
  .b06__pagination button {
    position: relative;
  }

  .b06__pagination button::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
}

/* Link "bỏ qua điều hướng" bị ẩn vĩnh viễn 1x1px nên người dùng bàn phím
   không bao giờ dùng được. Cho nó hiện ra khi được focus. */

.site-sr:focus,
.site-sr:focus-visible {
  /* site.css đặt width/height 1px và clip, phải ghi đè thẳng tay */
  position: fixed !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  margin: 0 !important;
  top: 12px;
  left: 12px;
  z-index: 999;
  padding: 12px 18px;
  border-radius: 10px;
  background: #0b1e3f;
  color: #fff;
  font-weight: 700;
}

/* =====================================================================
   Icon SVG thay cho ký tự Unicode
   =====================================================================
   Icon dùng width/height 1em nên ăn theo cỡ chữ của khối chứa nó. Vài chỗ
   chữ nhỏ (menu dịch vụ 12px) làm icon bé hơn emoji cũ, nên đặt cỡ riêng.
   ===================================================================== */

.ico {
  flex: none;
  vertical-align: -0.125em;
}

/* Menu dịch vụ ở header: chữ nhỏ nhưng icon cần rõ */
.b01 .dropdown button > .ico {
  width: 17px;
  height: 17px;
  margin-right: 7px;
  color: var(--blue);
}

/* Icon dự án trong tiêu đề B06 */
.b06__project-icon .ico {
  width: 1.05em;
  height: 1.05em;
}

/* Mũi tên liên kết ngoài nhỏ hơn chữ một chút cho khỏi lấn */
.b06__external .ico {
  width: 0.85em;
  height: 0.85em;
}

/* Mũi tên ở danh sách liên kết nhanh chân trang */
.footer-b10 .chev .ico {
  width: 14px;
  height: 14px;
}

/* Nút đóng hộp thoại B03 */
.b03__close .ico {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  .b03__close {
    min-width: 44px;
    min-height: 44px;
  }
}