/* ============================================================
 * MOHILA — thanh điều hướng phiên bản "ấn tượng"
 * Nạp SAU bright.css. Chỉ chạm phần header, không đụng nội dung trang.
 * Ý đồ: kính mờ trong suốt, logo phát sáng nhẹ, mục menu có viên nền
 * khi rê chuột, mục đang xem có gạch gradient, nút CTA nổi khối.
 * ============================================================ */

.site-header{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.88));
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(29,95,214,.10);
  box-shadow:0 10px 30px rgba(18,63,150,.07);
}
/* vệt sáng chạy dọc mép dưới header */
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent 0%, #4FC3F7 22%, #1D5FD6 50%, #FF5A5F 78%, transparent 100%);
  opacity:.55;
}

.nav-row{ padding-top:14px; padding-bottom:14px; gap:16px; }
/* màn hình rộng: nới hàng điều hướng để 6 mục nằm gọn trên MỘT dòng
   (phần nội dung bên dưới vẫn giữ nguyên bề ngang 1152px) */
@media (min-width:1280px){ .site-header .nav-row{ max-width:1320px; } }

/* ---------- thương hiệu ---------- */
.site-header .brand{ gap:11px; }
.site-header .brand img{
  width:38px; height:38px;
  filter:drop-shadow(0 6px 14px rgba(29,95,214,.34));
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.site-header .brand:hover img{ transform:scale(1.08) rotate(-6deg); }
.site-header .brand span{
  font-weight:800; letter-spacing:-.4px; color:#0E2246;
}
.site-header .brand .brand-lai{
  background:linear-gradient(120deg,#2F7BF6,#22D3EE);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- mục menu ---------- */
.nav a{
  position:relative; padding:9px 10px; border-radius:999px;
  font-size:.86rem; font-weight:650; color:#33456A; letter-spacing:-.1px;
  transition:color .18s ease, background-color .18s ease, transform .18s ease;
}
.nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  border-radius:2px; transform:scaleX(0); transform-origin:center;
  background:linear-gradient(90deg,#2F7BF6,#22D3EE);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.nav a:hover{ color:#123F96; background:rgba(47,123,246,.09); transform:translateY(-1px); }
.nav a:hover::after{ transform:scaleX(.7); }
.nav a.on{
  color:#123F96;
  background:linear-gradient(135deg, rgba(47,123,246,.14), rgba(34,211,238,.12));
  box-shadow:inset 0 0 0 1px rgba(29,95,214,.14);
}
.nav a.on::after{ transform:scaleX(1); }

/* ---------- cụm bên phải ---------- */
.nav-cta{ gap:10px; }

/* chọn ngôn ngữ dạng viên gộp */
.lang-switch{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border-radius:999px; background:rgba(233,240,254,.9);
  box-shadow:inset 0 0 0 1px rgba(29,95,214,.10);
}
.lang-switch a{
  padding:5px 8px; border-radius:999px; font-size:.78rem; font-weight:800;
  color:#5A6B87; letter-spacing:.3px; transition:all .18s ease;
}
.lang-switch a:hover{ color:#123F96; background:rgba(255,255,255,.9); }
.lang-switch a.on,.lang-switch .on{
  color:#fff; background:linear-gradient(135deg,#3B8BFF,#1D5FD6);
  box-shadow:0 6px 14px rgba(29,95,214,.32);
}

/* số điện thoại có chấm nhấp nháy báo đang trực */
.nav-cta .tel{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  font-weight:800; color:#123F96; white-space:nowrap;
  background:rgba(255,255,255,.85);
  box-shadow:inset 0 0 0 1px rgba(29,95,214,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.nav-cta .tel::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#12A87A; box-shadow:0 0 0 0 rgba(18,168,122,.55);
  animation:ml-pulse 2.2s ease-out infinite;
}
.nav-cta .tel:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(18,63,150,.14), inset 0 0 0 1px rgba(29,95,214,.2); }
@keyframes ml-pulse{
  0%{ box-shadow:0 0 0 0 rgba(18,168,122,.5); }
  70%{ box-shadow:0 0 0 8px rgba(18,168,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(18,168,122,0); }
}

/* nút hành động chính — khối nổi, có vệt sáng lướt qua */
.nav-cta .btn-primary{
  position:relative; overflow:hidden;
  padding:11px 18px; border-radius:999px; font-weight:800; letter-spacing:-.2px;
  background:linear-gradient(135deg,#3B8BFF 0%,#1D5FD6 58%,#123F96 100%);
  box-shadow:0 14px 28px rgba(29,95,214,.34), inset 0 2px 0 rgba(255,255,255,.32), inset 0 -6px 14px rgba(8,35,90,.28);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s ease;
}
.nav-cta .btn-primary::before{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg); animation:ml-shine 3.6s ease-in-out infinite;
}
@keyframes ml-shine{ 0%,62%{ left:-60%; } 88%,100%{ left:120%; } }
.nav-cta .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 36px rgba(29,95,214,.42), inset 0 2px 0 rgba(255,255,255,.36);
}

/* ---------- máy tính bảng ---------- */
@media (max-width:1150px){
  .nav a{ padding:8px 9px; font-size:.83rem; }
  .nav-cta .btn-primary{ padding:10px 16px; }
}

/* ---------- điện thoại ---------- */
@media (max-width:768px){
  .site-header::after{ opacity:.4; }
  .nav-row{ padding-top:10px; padding-bottom:10px; gap:10px; }
  .site-header .brand img{ width:34px; height:34px; }
  .nav{ order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ padding:8px 12px; font-size:.88rem; }
  .nav-cta .tel{ padding:7px 11px; font-size:.85rem; }
  .nav-cta .btn-primary{ padding:10px 16px; font-size:.88rem; }
  .nav-cta .btn-primary::before{ animation:none; }
}
@media (max-width:430px){
  .nav-cta .tel{ display:none; }              /* nhường chỗ cho nút chính */
  .lang-switch a{ padding:4px 7px; font-size:.72rem; }
}

/* ============================================================
 * MENU THẢ XUỐNG (dropdown) — "Phòng ban AI" và "Theo ngành"
 * Thẻ trắng bo 20px, bóng mềm, mũi tên nhỏ chỉ lên.
 * Máy tính: rê chuột hoặc Tab. Máy tính bảng: bấm.
 * Điện thoại (≤768px): xổ thành danh sách trong luồng, không nổi.
 * ============================================================ */

/* Cho phép menu con tràn ra ngoài thanh cuộn ngang của .nav */
.nav{ overflow:visible; flex-wrap:nowrap; gap:4px; }
/* Dưới 1280px không đủ chỗ cho 6 mục trên một dòng: cho xuống dòng
   thay vì đè lên cụm nút bên phải. */
@media (max-width:1279px){ .nav{ flex-wrap:wrap; row-gap:3px; } }

.has-menu{ position:relative; display:flex; align-items:center; flex:0 0 auto; }

/* mục cha: chừa chỗ cho mũi tên nhỏ */
.nav .mm-top{ display:inline-flex; align-items:center; gap:6px; }
.mm-caret{
  width:11px; height:11px; flex:0 0 auto; opacity:.62;
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3), opacity .2s ease;
}
.has-menu:hover .mm-caret,
.has-menu[data-open="true"] .mm-caret{ transform:rotate(180deg); opacity:1; }

/* ---------- tấm thẻ thả xuống ---------- */
.mm-panel{
  position:absolute; top:calc(100% + 13px); left:-6px; z-index:80;
  width:max-content; min-width:326px;
  max-width:min(430px, calc(100vw - 32px));
  padding:10px;
  background:#fff; border-radius:20px;
  border:1px solid rgba(29,95,214,.11);
  box-shadow:0 24px 48px rgba(18,63,150,.16);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-9px);
  transition:opacity .19s ease, transform .24s cubic-bezier(.2,.9,.3,1.25), visibility .19s;
}
/* mũi tên nhỏ chỉ lên */
.mm-panel::before{
  content:""; position:absolute; top:-7px; left:30px;
  width:13px; height:13px; background:#fff;
  border-left:1px solid rgba(29,95,214,.11);
  border-top:1px solid rgba(29,95,214,.11);
  border-radius:4px 0 0 0; transform:rotate(45deg);
}
/* cầu nối vô hình: rê chuột từ mục cha xuống thẻ không bị rớt */
.mm-panel::after{ content:""; position:absolute; left:0; right:0; top:-15px; height:15px; }

/* Mở bằng rê chuột (CSS) hoặc bằng data-open (bấm / đi bằng phím Tab — do JS đặt).
   Cố ý KHÔNG dùng :focus-within: nếu dùng, bấm Esc xong con trỏ vẫn nằm ở mục cha
   thì menu con sẽ tự mở lại, không đóng được bằng bàn phím. */
.has-menu:hover > .mm-panel,
.has-menu[data-open="true"] > .mm-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}

/* ---------- các mục con ---------- */
.mm-list{ list-style:none; margin:0; padding:0; }
.mm-panel--ind .mm-list{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }

.nav .mm-panel a{
  display:flex; align-items:flex-start; gap:11px;
  padding:9px 11px; border-radius:14px;
  white-space:normal; text-align:left;
  font-weight:700; color:#0E2246; letter-spacing:-.1px;
  background:transparent; border-bottom:0; box-shadow:none;
  transition:background-color .16s ease;
}
.nav .mm-panel a::after{ display:none; }
.nav .mm-panel a:hover,
.nav .mm-panel a:focus-visible{
  transform:none; color:#123F96;
  background:linear-gradient(120deg, rgba(47,123,246,.11), rgba(34,211,238,.09));
}
.mm-panel--ind .nav-dummy, .mm-panel--ind .mm-list a{ align-items:center; }

/* ô icon tròn gradient */
.mm-ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#3B8BFF,#1D5FD6);
  box-shadow:0 6px 13px rgba(29,95,214,.26), inset 0 1px 0 rgba(255,255,255,.42);
}
.mm-ic svg{
  width:18px; height:18px; fill:none; stroke:#fff;
  stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round;
}
/* đổi màu luân phiên theo bộ cầu 3D của thương hiệu */
.mm-list li:nth-child(2) .mm-ic{ background:linear-gradient(135deg,#FF7E82,#FF5A5F); box-shadow:0 6px 13px rgba(255,90,95,.28), inset 0 1px 0 rgba(255,255,255,.42); }
.mm-list li:nth-child(3) .mm-ic{ background:linear-gradient(135deg,#6FD3FA,#22B8E6); box-shadow:0 6px 13px rgba(34,184,230,.28), inset 0 1px 0 rgba(255,255,255,.42); }
.mm-list li:nth-child(4) .mm-ic{ background:linear-gradient(135deg,#FFC64D,#FFB020); box-shadow:0 6px 13px rgba(255,176,32,.30), inset 0 1px 0 rgba(255,255,255,.42); }
.mm-list li:nth-child(5) .mm-ic{ background:linear-gradient(135deg,#7BE3C0,#12A87A); box-shadow:0 6px 13px rgba(18,168,122,.26), inset 0 1px 0 rgba(255,255,255,.42); }
.mm-list li:nth-child(6) .mm-ic{ background:linear-gradient(135deg,#A79BFF,#6C5CE7); box-shadow:0 6px 13px rgba(108,92,231,.26), inset 0 1px 0 rgba(255,255,255,.42); }

.mm-tx{ min-width:0; }
.mm-nm{ display:block; font-size:.9rem; font-weight:750; line-height:1.3; }
.mm-dc{
  margin-top:3px; font-size:.775rem; font-weight:450; line-height:1.36; color:#5A6B87;
  overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  display:-webkit-box;
}

/* ---------- dòng cuối "Xem tất cả …" ---------- */
.mm-foot{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(29,95,214,.10); }
.nav .mm-panel .mm-all{
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  font-size:.86rem; font-weight:800; color:#123F96;
  background:linear-gradient(120deg, rgba(47,123,246,.12), rgba(34,211,238,.10));
  box-shadow:inset 0 0 0 1px rgba(29,95,214,.13);
}
.nav .mm-panel .mm-all:hover{
  color:#0B2E70;
  background:linear-gradient(120deg, rgba(47,123,246,.2), rgba(34,211,238,.16));
}

/* ---------- máy tính bảng hẹp ---------- */
@media (max-width:1150px){
  .mm-panel{ min-width:308px; }
  .mm-panel--ind{ min-width:392px; }
}

/* ---------- điện thoại: xổ trong luồng, không nổi ---------- */
@media (max-width:768px){
  .nav{ flex-wrap:wrap; overflow:visible; gap:3px; row-gap:3px; }
  /* thu nhỏ vừa phải để 6 mục nằm gọn trong 2 dòng, không đẩy header quá cao */
  .nav a{ padding:7px 9px; font-size:.82rem; }
  /* bỏ hộp bao để mục cha và menu con thành hai phần tử ngang hàng trong .nav */
  .has-menu{ display:contents; }
  /* mũi tên chỉ xoay khi menu con thật sự mở (không theo trạng thái rê chuột) */
  .has-menu:hover .mm-caret{ transform:none; opacity:.62; }
  .has-menu[data-open="true"] .mm-caret{ transform:rotate(180deg); opacity:1; }

  .mm-panel{
    position:static; order:0; width:100%; flex-basis:100%;
    min-width:0; max-width:none; margin:2px 0 8px;
    display:none; opacity:1; visibility:visible; pointer-events:auto; transform:none;
    max-height:min(62vh, 460px); overflow-y:auto;   /* không bao giờ chiếm hết màn hình */
    border-radius:18px; padding:8px;
    box-shadow:0 14px 28px rgba(18,63,150,.13);
  }
  .mm-panel::before, .mm-panel::after{ display:none; }
  /* trên điện thoại chỉ mở bằng cách bấm */
  .has-menu:hover > .mm-panel{ display:none; }
  .has-menu[data-open="true"] > .mm-panel{ display:block; }

  .mm-panel--ind .mm-list{ grid-template-columns:1fr; }
  .mm-ic{ width:31px; height:31px; }
  .mm-ic svg{ width:17px; height:17px; }
  .mm-nm{ font-size:.87rem; }
  /* mô tả rút còn một dòng để header mở ra không chiếm hết màn hình */
  .mm-dc{ -webkit-line-clamp:1; font-size:.76rem; }
  .nav .mm-panel a{ padding:8px 9px; }
}

/* tôn trọng người tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion:reduce){
  .nav-cta .btn-primary::before,
  .nav-cta .tel::before{ animation:none; }
  .site-header .brand img,
  .nav a,
  .nav-cta .btn-primary{ transition:none; }
  .mm-panel, .mm-caret, .nav .mm-panel a{ transition:none; }
}

/* ============================================================
 * Chỉnh cân đối (theo góp ý: menu rớt 2 hàng, nút kênh lệch hàng)
 * ============================================================ */

/* --- Menu: ép gọn trong MỘT hàng --- */
@media (min-width:769px){
  .nav{ flex-wrap:nowrap !important; row-gap:0 !important; }
  .nav a, .nav .mm-top{ white-space:nowrap; }
  .nav-row{ gap:14px; }
}
@media (min-width:769px) and (max-width:1420px){
  .nav a, .nav .mm-top{ padding:8px 10px; font-size:.885rem; }
  .nav-cta{ gap:9px; }
  .nav-cta .btn-primary{ padding:11px 17px; font-size:.9rem; }
  .nav-cta .tel{ padding:7px 12px; font-size:.88rem; }
}
@media (min-width:769px) and (max-width:1240px){
  .nav a, .nav .mm-top{ padding:7px 8px; font-size:.85rem; }
  .site-header .brand span{ font-size:1.02rem; }
  .nav-cta .tel{ display:none; }          /* nhường chỗ, hotline vẫn ở hero + chân trang */
}

/* --- Chân trang: ba nút kênh cùng một hàng, đều nhau --- */
.social-row{ display:flex; flex-wrap:nowrap; gap:8px; align-items:center; }
.social-row .soc{
  flex:1 1 0; min-width:0; justify-content:center;
  padding:9px 10px; gap:7px; font-size:.82rem; letter-spacing:-.1px;
}
.social-row .soc span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.social-row .soc-ic{ width:22px; height:22px; font-size:.86rem; flex:0 0 auto; }

@media (max-width:1100px) and (min-width:769px){
  .social-row .soc span:last-child{ display:none; }   /* hẹp thì chỉ còn biểu tượng tròn */
  .social-row .soc{ flex:0 0 auto; width:44px; height:44px; padding:0; border-radius:50%; }
}
@media (max-width:520px){
  .social-row{ flex-wrap:wrap; }
  .social-row .soc{ flex:1 1 30%; }
}