/* =====================================================================
   B01 — MENU: thả xuống khi rê chuột, danh mục dịch vụ dạng mega menu
   =====================================================================
   Nạp sau cùng, sau z-seams.css.

   NHỮNG GÌ MENU CŨ CÒN THIẾU (đã đo trên trình duyệt trước khi sửa)

   1. Chỉ mở bằng cú nhấp. Rê chuột vào "Dịch vụ" không có gì xảy ra —
      khách không biết là có menu con, trừ khi thử bấm.
   2. Khoảng hở 15px giữa nút và bảng. Nếu mở bằng rê chuột mà vẫn để
      hở, chuột đi qua khoảng trống đó là menu đóng sập ngay giữa chừng.
   3. Các mục trong bảng là <button>, không phải liên kết. Bấm vào
      "Website" không đưa tới mục dịch vụ mà nhảy thẳng xuống form liên
      hệ. Menu đề "Dịch vụ" mà bấm vào lại ra form — khách mất phương
      hướng. Thẻ button cũng không mở được tab mới, và Google không đọc
      được đó là liên kết nội bộ.
   4. Chữ mô tả 10px, nhỏ hơn ngưỡng đọc được.
   5. Bảng neo bằng `left:-40px` — một con số gõ tay, lệch theo từng
      khổ màn.
   6. Nút "Dịch vụ" không bao giờ sáng lên dù khách đang ở mục dịch vụ.
   7. Trên điện thoại, 6 dịch vụ nằm ngang hàng với "Giải pháp",
      "Dự án"… — một danh sách phẳng 12 dòng, không thấy cái nào thuộc
      cái nào.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BẢNG THẢ XUỐNG
   ---------------------------------------------------------------------
   Dùng visibility + opacity thay cho display:none để có thể chuyển động
   mượt. display:none nhảy cóc, không nội suy được.

   Neo giữa theo nút mở (left:50% + translateX) thay cho con số -40px, nên
   khổ màn nào bảng cũng nằm cân dưới chữ "Dịch vụ".
   --------------------------------------------------------------------- */

.b01 .nav-drop {
  position: relative;
}

.b01 .dropdown,
.b01 .nav-drop.open .dropdown {
  display: block;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  right: auto;
  width: min(548px, calc(100vw - 2 * var(--gutter)));
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe8fa;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 28px 70px rgba(11, 30, 63, 0.16),
    0 2px 8px rgba(11, 30, 63, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  /* visibility là thuộc tính rời rạc: nếu cho nó một khoảng chuyển
     0.17s thì trình duyệt giữ `hidden` tới nửa quãng rồi mới lật. Trong
     85ms đó bảng vẫn chưa "tồn tại" với bàn phím, nên lệnh focus vào mục
     đầu tiên rơi vào khoảng không — đã đo đúng lỗi này: bấm mũi tên
     xuống thì bảng mở ra nhưng con trỏ vẫn đứng ở nút.

     Nên: mở thì lật ngay (0s), đóng thì đợi hết 0.17s để bảng kịp mờ
     dần chứ không biến mất đột ngột. */
  transition:
    opacity 0.17s ease,
    transform 0.17s ease,
    visibility 0s linear 0.17s;
}

.b01 .nav-drop.open .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity 0.17s ease,
    transform 0.17s ease,
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .b01 .dropdown {
    transition: none;
    transform: translate(-50%, 0);
  }
}

/* CẦU NỐI VÔ HÌNH
   Bảng cách nút 14px cho thoáng mắt. Khoảng hở đó là vùng chết: chuột đi
   từ nút xuống bảng sẽ rời khỏi vùng rê và menu đóng ngay. Trải một dải
   trong suốt lấp đúng khoảng đó, rộng bằng cả bảng, để đường đi của
   chuột không bao giờ đứt. */
.b01 .nav-drop.open::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(548px, calc(100vw - 2 * var(--gutter)));
  height: 18px;
}

/* ---------------------------------------------------------------------
   2. CÁC MỤC TRONG BẢNG
   --------------------------------------------------------------------- */

.b01 .dd__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.b01 .dd__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 13px;
  color: var(--navy);
  text-decoration: none;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.b01 .dd__item:hover,
.b01 .dd__item:focus-visible {
  background: #eef6ff;
  color: #0059d6;
  outline: none;
}

.b01 .dd__item:focus-visible {
  box-shadow: 0 0 0 2px #0a7cff;
}

.b01 .dd__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e3f1ff, #d3e6ff);
  color: #0a62d8;
  transition: background 0.16s ease;
}

.b01 .dd__item:hover .dd__ico,
.b01 .dd__item:focus-visible .dd__ico {
  background: linear-gradient(135deg, #0aa4fb, #0356d8);
  color: #fff;
}

.b01 .dd__ico svg {
  width: 18px;
  height: 18px;
}

.b01 .dd__name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* Mô tả cũ 10px — dưới ngưỡng đọc được. Nâng lên 11.5px và nới dòng. */
.b01 .dropdown small {
  display: block;
  margin-top: 3px;
  color: #6d8099;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------
   3. CHÂN BẢNG
   ---------------------------------------------------------------------
   Viết đủ ba lớp `.b01 .dropdown .dd__cta`: b01.css có sẵn
   `.b01 .dropdown button { background: transparent; border-radius: 10px }`
   với độ ưu tiên (0,2,1), cao hơn `.b01 .dd__cta` (0,2,0), nên cách viết
   ngắn làm nút CTA mất sạch nền gradient và bo tròn — đã thấy khi chụp.
   ---------------------------------------------------------------------
   Hai lối đi rõ ràng: xem hết dịch vụ, hoặc hỏi ngay. Menu cũ không có
   lối nào dẫn tới trang dịch vụ, mọi mục đều đổ về form liên hệ.
   --------------------------------------------------------------------- */

.b01 .dropdown .dd__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 11px 12px 4px;
  border-top: 1px solid #e7effa;
}

.b01 .dropdown .dd__all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0a62d8;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.b01 .dd__all svg {
  width: 15px;
  height: 15px;
  transition: transform 0.16s ease;
}

.b01 .dd__all:hover svg {
  transform: translateX(3px);
}

.b01 .dropdown .dd__cta {
  border: 0;
  border-radius: 100px;
  padding: 10px 17px;
  background: linear-gradient(115deg, #00bbff, #0055dc);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.16s ease;
}

.b01 .dropdown .dd__cta:hover {
  filter: brightness(1.08);
}

/* ---------------------------------------------------------------------
   4. NÚT MỞ MENU
   ---------------------------------------------------------------------
   Nút "Dịch vụ" trước không bao giờ sáng lên, kể cả khi khách đang đọc
   đúng mục dịch vụ. js/b01-menu.js gắn lớp .is-current cho nó, ở đây vẽ
   gạch chân giống hệt các mục khác để menu nhất quán.
   --------------------------------------------------------------------- */

.b01 .nav-dropdown-trigger {
  cursor: pointer;
  position: relative;
}

.b01 .nav-drop.open .nav-dropdown-trigger,
.b01 .nav-dropdown-trigger.is-current {
  color: var(--blue);
}

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

/* ---------------------------------------------------------------------
   5. MỤC VỪA ĐƯỢC CHỌN TỪ MENU
   ---------------------------------------------------------------------
   Bấm "Phần mềm AI" xong, trang cuộn tới đúng thẻ đó — nhưng giữa sáu
   thẻ giống nhau thì khách không biết thẻ nào vừa được trỏ tới. Nháy
   viền sáng khoảng 2 giây rồi tắt.
   --------------------------------------------------------------------- */

.service.vua-chon {
  animation: nhayVienDichVu 2.4s ease-out 1;
}

/* Chụp thử bản đầu (viền 3px rgba .55) thì gần như không thấy gì: nền
   trang vốn đã xanh nhạt nên viền xanh mờ chìm vào nền. Dùng viền đặc
   cộng một quầng rộng bên ngoài, và giữ nguyên độ đậm tới 70% thời gian
   rồi mới tắt dần. */
@keyframes nhayVienDichVu {
  0%,
  70% {
    box-shadow:
      0 0 0 3px #0a7cff,
      0 0 0 10px rgba(10, 124, 255, 0.2),
      0 18px 44px rgba(11, 30, 63, 0.16);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(10, 124, 255, 0),
      0 0 0 0 rgba(10, 124, 255, 0),
      0 18px 44px rgba(11, 30, 63, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service.vua-chon {
    animation: none;
    box-shadow:
      0 0 0 3px #0a7cff,
      0 0 0 10px rgba(10, 124, 255, 0.2);
  }
}

/* ---------------------------------------------------------------------
   6. MENU ĐIỆN THOẠI — NHÓM DỊCH VỤ GẤP MỞ
   ---------------------------------------------------------------------
   Trước: 12 dòng phẳng, 6 dịch vụ nằm ngang hàng với "Giải pháp",
   "Dự án", "Liên hệ" — không thấy cái nào thuộc cái nào, và phải cuộn
   trong menu mới tới được "Liên hệ".

   Nay: 6 dịch vụ gom vào một nhóm, mặc định gấp lại. Menu còn 7 dòng,
   nhìn hết một lượt không cần cuộn.
   --------------------------------------------------------------------- */

.b01 .m-group {
  display: flex;
  flex-direction: column;
}

.b01 .mobile-menu .m-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

.b01 .m-chev {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform 0.2s ease;
}

.b01 .m-group__toggle[aria-expanded="true"] .m-chev {
  transform: rotate(180deg);
}

.b01 .m-group__toggle[aria-expanded="true"] {
  color: var(--blue);
}

/* Gấp bằng grid-template-rows 0fr→1fr: chuyển động mượt mà không cần
   đo chiều cao bằng JavaScript, và vẫn thu về đúng 0 khi đóng.

   Phải có đúng MỘT lớp lồng bên trong. Lần đầu em đặt thẳng sáu thẻ <a>
   làm con, kết quả là chỉ hàng thứ nhất co về 0 — năm hàng còn lại rơi
   vào grid-auto-rows:auto nên vẫn hiện nguyên, menu "đóng" mà danh sách
   vẫn bày ra. Đã thấy khi chụp màn hình điện thoại. */
.b01 .m-group__list {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}

.b01 .m-group.open .m-group__list {
  grid-template-rows: 1fr;
}

.b01 .m-group__in {
  overflow: hidden;
  min-height: 0;
}

.b01 .mobile-menu .m-group__in a {
  display: block;
  margin-left: 10px;
  padding: 10px 12px;
  border-left: 2px solid #dde9f8;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #41566f;
  text-decoration: none;
}

.b01 .mobile-menu .m-group__in a:hover,
.b01 .mobile-menu .m-group__in a:focus-visible {
  background: #eff7ff;
  border-left-color: var(--blue);
  color: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
  .b01 .m-group__list,
  .b01 .m-chev {
    transition: none;
  }
}

/* Vùng chạm 44px cho mọi dòng trong menu điện thoại */
@media (max-width: 1010px) {
  .b01 .mobile-menu > a,
  .b01 .mobile-menu > button,
  .b01 .mobile-menu .m-group__toggle,
  .b01 .mobile-menu .m-group__in a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
   7. KHỔ MÀN HẸP
   ---------------------------------------------------------------------
   Từ 1011px tới 1260px thanh menu đã chật, bảng 548px hai cột sẽ tràn.
   Về một cột cho chắc.
   --------------------------------------------------------------------- */

@media (max-width: 1260px) {
  .b01 .dropdown,
  .b01 .nav-drop.open .dropdown,
  .b01 .nav-drop.open::after {
    width: min(330px, calc(100vw - 2 * var(--gutter)));
  }

  .b01 .dd__grid {
    grid-template-columns: 1fr;
  }

  .b01 .dropdown .dd__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .b01 .dropdown .dd__all {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------
   8. MỤC "TRANG CHỦ"
   ---------------------------------------------------------------------
   Đo trước khi sửa (màn 1440px):
     ở đầu trang   viên nhộng gradient 103x41, chữ trắng 13px
     đã cuộn đi    phẳng lì, chữ xanh than, y hệt sáu mục còn lại

   Nghĩa là gần như suốt cả trang — trang cao gần 10.000px, khách chỉ ở
   đầu trang vài giây đầu — "Trang chủ" trông không khác gì "Dự án" hay
   "Quy trình". Đây là mục đưa khách về đầu trang, cần nhận ra ngay.

   Cách làm: luôn giữ hình viên nhộng, chỉ đổi sắc độ.
     ở đầu trang   viên đặc gradient, chữ trắng — đang ở đây
     đã cuộn đi    viên xanh nhạt viền mảnh, chữ xanh — vẫn nổi, nhưng
                   không tranh nhãn đang-xem với mục khách đang đọc

   Kích thước hai trạng thái bằng nhau nên lúc cuộn qua không có cú giật
   nào: chỉ có màu đổi, không có chữ nhảy chỗ.

   Thêm icon ngôi nhà. Đây là mục duy nhất trên thanh menu có icon, nên
   mắt bắt được nó trước cả khi đọc chữ.
   --------------------------------------------------------------------- */

.b01 .nav > a.active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow:
    0 8px 20px rgba(8, 125, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.b01 .nav-home {
  width: 16px;
  height: 16px;
  flex: none;
}

.b01 .nav > a.active:hover {
  transform: translateY(-1px);
  box-shadow:
    0 11px 24px rgba(8, 125, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Đã cuộn khỏi đầu trang: cùng hình dáng, nhẹ tông hơn.
   Viết đủ hai lớp .active.is-dimmed để thắng .b01 .nav>a.active ở trên. */
.b01 .nav > a.active.is-dimmed {
  background: #e9f3ff;
  border: 1px solid #c2dcff;
  color: var(--blue);
  /* trừ đúng 1px đường viền vừa thêm, để viên nhộng không to ra khi cuộn */
  padding: 11px 19px;
  box-shadow: none;
}

.b01 .nav > a.active.is-dimmed:hover {
  background: #dcecff;
  border-color: #9dc7ff;
  color: #0050cc;
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(8, 125, 255, 0.18);
}

/* Dưới 1260px thanh menu đã chật: bỏ icon, giữ lại viên nhộng. */
@media (max-width: 1260px) {
  .b01 .nav-home {
    display: none;
  }

  .b01 .nav > a.active {
    padding: 11px 15px;
  }

  .b01 .nav > a.active.is-dimmed {
    padding: 10px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b01 .nav > a.active {
    transition: none;
  }

  .b01 .nav > a.active:hover,
  .b01 .nav > a.active.is-dimmed:hover {
    transform: none;
  }
}