/* =====================================================================
   B10 — CHÂN TRANG: HẠ CHIỀU CAO, CHUẨN HOÁ BỐ CỤC
   =====================================================================
   Nạp sau cùng.

   ĐO TRƯỚC KHI SỬA (màn 1440px)

     cả chân trang        1104px   ← cao hơn cả một màn hình (900px)
     đệm trên / dưới      88px / 125,6px
     dải sóng             129px
     thanh bản quyền      98px
     bốn cột            425 / 628 / 444 / 425px   ← lệch nhau 203px
     bề ngang cột       337 / 331 / 234 / 337px   ← lệch nhau 103px

   HAI THỨ LÀM NÓ XẤU

   1. Cột "Dịch vụ" là sáu TẤM THẺ, mỗi thẻ có một icon 3D 72px, cao
      85px một dòng. Sáu dòng thành 510px. Ngay cạnh nó, cột "Liên kết
      nhanh" lại là danh sách chữ trơn cao 55px một dòng. Hai cột cùng
      một hàng mà một bên là thẻ bấm cỡ lớn, một bên là chữ — nhìn như
      hai thành phần của hai trang khác nhau ghép lại. Đó là chỗ trông
      nghiệp dư nhất.

   2. Vì cột đó cao 628px còn ba cột kia 425–444px, dưới ba cột kia là
      một khoảng trống đen gần 200px, rồi mới tới dải sóng. Cuộn tới
      chân trang là thấy một mảng rỗng.

   CÁCH LÀM
   Sáu mục dịch vụ về đúng kiểu liên kết chữ như cột bên cạnh (đã sửa ở
   index.html, bỏ luôn sáu icon 72px nên bớt sáu lần tải ảnh). Bốn cột
   cao gần bằng nhau thì khoảng trống tự hết. Sau đó siết lại các khoảng
   đệm và cỡ chữ cho hợp với một chân trang.

   Tiện thể: sáu liên kết dịch vụ trước đây đổ hết về #dich-vu, bấm cái
   nào cũng ra một chỗ. Nay mỗi cái trỏ đúng thẻ dịch vụ của nó.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. KHUNG CHUNG
   --------------------------------------------------------------------- */

.footer-b10 {
  padding-top: clamp(48px, 5vw, 68px);
  /* layout.css phát cho mọi khối một khoảng đệm đáy --section-y. Với
     chân trang thì khoảng đó thành 126px NỀN TỐI TRỐNG NẰM DƯỚI dòng
     bản quyền — đo được ở màn 1440px: thanh bản quyền hết ở 774px mà
     chân trang kéo tới 900px. Cuộn tới cuối trang là thấy một mảng đen
     không có gì. Dòng bản quyền tự có đệm 22px rồi. */
  padding-bottom: 0;
}

/* Bỏ sàn chiều cao 425px: nó ép ba cột ngắn phải cao bằng nhau một cách
   vô ích, và khi cột dài nhất rút xuống thì chính nó lại giữ khoảng
   trống ở lại. */
.footer-b10 .col {
  min-height: 0;
  padding: 0 clamp(20px, 2vw, 34px);
}

/* Bề ngang bốn cột trước lệch nhau tới 103px, cột "Liên kết nhanh" hẹp
   hơn hẳn. Chia lại cho cân: cột giới thiệu rộng nhất vì có đoạn văn,
   hai cột liên kết bằng nhau, cột liên hệ rộng hơn chút vì có icon. */
.footer-b10 .columns {
  grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
  column-gap: 0;
}

/* ---------------------------------------------------------------------
   2. TIÊU ĐỀ CỘT
   ---------------------------------------------------------------------
   24px là cỡ của một tiêu đề mục giữa trang, không phải tiêu đề cột
   chân trang. Hạ xuống 16px, giãn chữ, chữ hoa nhẹ — đây là cách chân
   trang của các trang chuyên nghiệp vẫn làm: tiêu đề cột phải NHỎ hơn
   nội dung bên dưới nó về mặt thị giác, vì nó chỉ là nhãn.
   --------------------------------------------------------------------- */

.footer-b10 h2 {
  margin: 0 0 18px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fc7f5;
  gap: 9px;
}

.footer-b10 .heading-symbol {
  font-size: 16px;
}

.footer-b10 .heading-symbol svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------
   3. CỘT GIỚI THIỆU
   --------------------------------------------------------------------- */

.footer-b10 .logo-slot {
  min-height: 0;
  margin: 0 0 16px;
}

/* 270px là cỡ logo của thanh menu hồi chưa thu nhỏ. Chân trang không
   cần to vậy, và để vậy thì nó lệch hẳn với logo 209px trên đầu trang. */
.footer-b10 .logo-real {
  max-width: 186px;
  max-height: none;
  height: auto;
}

/* line-height 1,95 là giãn dòng của một đoạn văn dài giữa trang. Ở chân
   trang nó làm đoạn giới thiệu cao gần gấp rưỡi mà không dễ đọc hơn. */
.footer-b10 .about {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #c9dcf6;
  max-width: 330px;
}

.footer-b10 .socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-b10 .social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(74, 174, 255, 0.26);
  background: rgba(10, 40, 90, 0.45);
}

.footer-b10 .social img {
  width: 19px;
  height: 19px;
}

/* ---------------------------------------------------------------------
   4. HAI CỘT LIÊN KẾT
   ---------------------------------------------------------------------
   Dùng CHUNG một kiểu cho cả "Dịch vụ" và "Liên kết nhanh". Trước đây
   một bên là thẻ bấm có icon 3D cao 85px, một bên là chữ cao 55px.
   --------------------------------------------------------------------- */

.footer-b10 .services,
.footer-b10 .quick-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-b10 .services li,
.footer-b10 .quick-links li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  min-height: 0;
}

.footer-b10 .services a,
.footer-b10 .quick-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  /* 44px chiều cao cho ngón tay chạm, nhưng đệm dọc nhỏ để dòng không
     bị kéo dài — vùng chạm đủ mà danh sách vẫn gọn. */
  min-height: 40px;
  padding: 6px 10px 6px 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #cfe1f9;
  transition:
    color 0.18s ease,
    padding-left 0.18s ease;
}

.footer-b10 .services a:hover,
.footer-b10 .quick-links a:hover,
.footer-b10 .services a:focus-visible,
.footer-b10 .quick-links a:focus-visible {
  color: #fff;
  padding-left: 6px;
}

.footer-b10 .services .chev,
.footer-b10 .quick-links .chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 15px;
  height: 15px;
  color: #35b6ff;
}

.footer-b10 .services .chev svg,
.footer-b10 .quick-links .chev svg {
  width: 13px;
  height: 13px;
}

/* ---------------------------------------------------------------------
   5. CỘT LIÊN HỆ
   --------------------------------------------------------------------- */

.footer-b10 .contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-b10 .contact {
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  min-height: 0;
}

.footer-b10 .contact img {
  width: 34px;
  height: 34px;
  flex: none;
}

.footer-b10 .contact small {
  font-size: 11px;
  letter-spacing: 0.02em;
}

.footer-b10 .contact strong {
  font-size: 14.5px;
}

/* ---------------------------------------------------------------------
   6. DẢI SÓNG VÀ THANH BẢN QUYỀN
   ---------------------------------------------------------------------
   Dải sóng 129px cộng đệm đáy 125,6px cộng thanh bản quyền 98px là
   352px chỉ để kết thúc trang. Giữ dải sóng vì nó là chỗ chuyển thật từ
   vùng sáng xuống nền tối, chỉ hạ chiều cao.
   --------------------------------------------------------------------- */

.footer-b10 .waves {
  height: 76px;
  margin-top: clamp(34px, 4vw, 52px);
}

.footer-b10 .waves svg {
  width: 100%;
  height: 100%;
}

.footer-b10 .bottom {
  padding: 18px 0 22px;
  min-height: 0;
  font-size: 13px;
  gap: 12px;
}

.footer-b10 .bottom .legal {
  gap: 10px;
}

/* ---------------------------------------------------------------------
   7. KHỔ MÀN HẸP
   --------------------------------------------------------------------- */

@media (max-width: 1010px) {
  .footer-b10 .columns {
    grid-template-columns: 1.3fr 1fr 1fr;
    row-gap: 34px;
  }

  /* Cột liên hệ xuống hàng dưới, trải hết bề ngang cho bốn mục nằm
     thành lưới hai cột thay vì một cột dài. */
  .footer-b10 .col:last-child {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
  }

  .footer-b10 .col:last-child .contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Vùng chạm cho ba liên kết trong thẻ liên hệ và hai liên kết điều
   khoản: trên máy tính chúng nằm trong thẻ cao 61px nên bấm thoải mái,
   nhưng tự thân chỉ cao 17–20px. Trên điện thoại phải đủ 44px. */
@media (max-width: 1010px) {
  .footer-b10 .contact a,
  .footer-b10 .bottom .legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 26px thì vẫn hụt so với mức 44px tối thiểu cho ngón tay. Cho liên
     kết trải hết bề ngang thẻ và cao 40px — cộng với đệm của thẻ là đủ
     vùng chạm, mà thẻ cũng không phình thêm mấy. */
  .footer-b10 .contact a {
    width: 100%;
    min-height: 40px;
  }

  .footer-b10 .contact {
    min-height: 64px;
  }
}

@media (max-width: 700px) {
  .footer-b10 .columns {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .footer-b10 .col {
    padding: 0;
    border-left: 0;
  }

  .footer-b10 .col:last-child .contacts {
    grid-template-columns: 1fr;
  }

  .footer-b10 .about {
    max-width: none;
  }

  .footer-b10 .waves {
    height: 52px;
    margin-top: 30px;
  }

  .footer-b10 .bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}