/* ============================================
   ---------- Header & Navigation ----------
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(245, 248, 251, 0.9); /* var(--bap-paper) với opacity */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bap-line);
}

.header__container {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px; /* Hoặc 100% nếu muốn tràn full viền */
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Logo Image */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo-img {
  height: 55px;
  width: auto;
  object-fit: contain;
}

/* Navigation Desktop */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.906rem; /* ~14.5px */
  font-weight: 500;
}

.nav-desktop a:not(.btn) {
  opacity: 0.8;
  transition:
    opacity 0.2s,
    color 0.2s;
}

.nav-desktop a:not(.btn):hover {
  opacity: 1;
}

/* Switcher ngôn ngữ */
.lang-switcher {
  display: flex;
  align-items: center;
  font-size: 0.6875rem; /* 11px */
  color: var(--bap-muted);
}

.lang-switcher a {
  opacity: 1 !important;
}

.lang-switcher .active {
  font-weight: 600;
  color: var(--bap-dark);
}

.lang-switcher a:hover:not(.active) {
  color: var(--bap);
}

/* Mobile Toggle Button & Menu */
/* Hamburger */
.header__toggle {
  display: none;
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
}
.header__toggle span {
  position: absolute;
  left: 4px;
  width: 24px;
  height: 2px;
  background: var(--bap-navy);
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease,
    top 0.3s ease;
}
.header__toggle span:nth-child(1) {
  top: 9px;
}
.header__toggle span:nth-child(2) {
  top: 15px;
}
.header__toggle span:nth-child(3) {
  top: 21px;
}
.header__toggle.is-active span:nth-child(1) {
  top: 15px;
  transform: rotate(45deg);
}
.header__toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.header__toggle.is-active span:nth-child(3) {
  top: 15px;
  transform: rotate(-45deg);
}

/* ============================================
   LANGUAGE
   ============================================ */
/* Dropdown (desktop) */
.lang-dd {
  position: relative;
}

.lang-dd__btn {
    display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bap-muted);
  transition: color 0.2s;
}
.lang-dd__btn:hover,
.lang-dd.is-open .lang-dd__btn {
  color: var(--bap);
}


.lang-dd__btn::after {
  content: "" !important;
  display: block !important;
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
  margin-left: 0;
}

.lang-dd__btn[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(225deg);
}

.lang-dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--bap-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0s linear 0.2s;
}
.lang-dd.is-open .lang-dd__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.lang-dd__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  white-space: nowrap;
}
.lang-dd__menu .ri-check-line {
  color: var(--bap);
  font-size: 1rem;
}
.nav-desktop .lang-dd__menu a {
  opacity: 1;
} /* ghi đè opacity .8 */
.lang-dd__menu a:hover {
  background: var(--bap-soft);
  color: var(--bap);
}
.lang-dd__menu a.is-active {
  color: var(--bap);
  font-weight: 600;
}

/* Mobile: hàng ngôn ngữ phẳng, có vạch dọc ngăn cách */
.nav-mobile .lang-dd__btn {
  display: none;
}

.nav-mobile .lang-switcher-mobile {
  margin-inline: var(--gutter);
  padding: 14px 0 0; /* không có border-bottom */
}

.nav-mobile .lang-dd__menu {
  position: static;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-mobile .lang-dd__menu a {
  padding: 0 14px;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--bap-muted);
  border-radius: 0; /* thêm dòng này */
}
.nav-mobile .lang-dd__menu a:first-child {
  padding-left: 0;
}
.nav-mobile .lang-dd__menu a + a {
  border-left: 1px solid var(--bap-line);
}
.nav-mobile .lang-dd__menu a:hover {
  background: none;
}
.nav-mobile .lang-dd__menu a.is-active {
  color: var(--bap);
  font-weight: 600;
}

/* ============================================
   END LANGUAGE
   ============================================ */

/* --------- */
.nav-desktop__list,
.nav-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-desktop__list {
  display: flex;
  gap: 24px;
}
.nav-mobile__list a {
  display: block;
  padding: 12px 0;
}

/* ============================================
    Menu mobile
   ============================================ */
.nav-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background: #fff; /* trắng hẳn, khác nền trang */
  border-top: 1px solid var(--bap-line);
  border-bottom: 3px solid var(--bap); /* vạch màu thương hiệu ở đáy */
  box-shadow: 0 16px 32px -8px rgba(6, 35, 80, 0.25);
  font-weight: 500;
  transition:
    height 0.3s ease,
    visibility 0s linear 0.3s;
}
.nav-mobile.is-open {
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto; /* menu dài thì cuộn được */
  visibility: visible;
  overscroll-behavior: contain;
  transition:
    max-height 0.3s ease,
    visibility 0s;
}
.nav-mobile__list > li > a {
  display: block;
  margin-inline: 15px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bap-soft);
}

/* Link: đường kẻ thụt vào 2 bên, màu nhẹ */
.nav-mobile > a:not(.nav-mobile__cta) {
  display: block;
  margin-inline: var(--gutter);
  padding: 14px 0;
  border-bottom: 1px solid var(--bap-soft);
}
.nav-mobile > a:not(.nav-mobile__cta):hover,
.nav-mobile > a:not(.nav-mobile__cta):active {
  color: var(--bap);
}
/* CTA trong menu mobile: nhắm thẳng vào .btn con trực tiếp của .nav-mobile */
.nav-mobile > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px var(--gutter) 24px; /* trên 20px, dưới 24px */
  padding: 14px 16px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: normal;
}
/* Đổi ngôn ngữ: bỏ nền xám và viền full */
.nav-mobile .lang-switcher-mobile {
  display: flex;
  align-items: center;
  margin-inline: var(--gutter);
  padding: 14px 0 0;
  font-size: 0.75rem;
  color: var(--bap-muted);
}
.nav-mobile .lang-switcher-mobile .active {
  color: var(--bap-dark);
  font-weight: 600;
}

/* CTA thành nút */
.nav-mobile .nav-mobile__cta {
  display: block;
  margin: 16px var(--gutter);
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
  color: #fff;
  background: var(--bap);
  border-radius: var(--radius-sm);
}

/* ============================================
   END Menu mobile
   ============================================ */

/* ============================================
    Submenu desktop
   ============================================ */
.nav-desktop__list > li {
  position: relative;
}

.nav-desktop__list > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 28px 0; /* vùng hover cao để chuột không bị "rớt" khi di xuống panel */
}

/* Mũi tên cho mục có con */
.nav-desktop__list > li.menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.nav-desktop__list > li.is-open > a::after {
  transform: translateY(1px) rotate(225deg);
}

.nav-desktop__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--bap-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0s linear 0.2s;
}

/* Mục đang active (trang hiện tại, hoặc trang con/cha của nó) */
.nav-desktop__list > li.current-menu-item > a,
.nav-desktop__list > li.current-menu-ancestor > a,
.nav-desktop__list > li.current-menu-parent > a,
.nav-mobile__list > li.current-menu-item > a,
.nav-mobile__list > li.current-menu-ancestor > a,
.nav-mobile__list > li.current-menu-parent > a {
  color: var(--bap);
  opacity: 1; /* ghi đè opacity .8 của .nav-desktop a */
}
/* Mục con đang active trong dropdown */
.nav-desktop__list .sub-menu li.current-menu-item > a,
.nav-mobile__list .sub-menu li.current-menu-item > a {
  color: var(--bap);
  font-weight: 600;
  background: var(--bap-soft);
}

/* ======================= ICON Cho MENU ============================== */
/* Icon cho mục trong submenu */
.nav-desktop__list > li > a .menu-icon {
  font-size: 0.9em;
  color: var(--bap);
}

/* Khoảng cách giữa icon, chữ và mũi tên */
.nav-desktop__list > li > a {
  gap: 8px; /* khoảng cách icon - chữ - mũi tên */
}

.nav-desktop__list .sub-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 1;
}

/* Icon cho mục trong submenu */
.nav-desktop__list .sub-menu .menu-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  /* color: var(--bap); */
}

/* Phần submenu mobile */
.nav-mobile__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-mobile__list .sub-menu li {
  list-style: none;
}
.nav-mobile__list .sub-menu a {
  display: flex;
  font-size: 14px;
  color: var(--bap-muted);
  border-bottom: 1px solid var(--bap-soft);
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
  padding-left: 12px;
}

/* ===================================================== */

/* Hover cho mục trong submenu */
.nav-desktop__list .sub-menu a:hover {
  background: var(--bap-soft);
  color: var(--bap);
}

/* Mở bằng click (JS thêm .is-open) hoặc phím Tab */
.nav-desktop__list li.is-open > .sub-menu,
.nav-desktop__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Mở bằng hover, chỉ trên thiết bị có chuột */
@media (hover: hover) {
  .nav-desktop__list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}

/* Mục "All solutions" nổi bật (thêm class menu-all trong admin) */
.nav-desktop__list .sub-menu .menu-all > a {
  font-weight: 600;
  color: var(--bap);
}

/* Phần này cho submenu desktop */
.nav-mobile__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  display: none;
}
.nav-mobile__list li.is-open > .sub-menu {
  display: block;
}

.nav-mobile__list li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}
.nav-mobile__list li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid rgb(67, 89, 122);
  border-bottom: 2px solid rgb(67, 89, 122);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.nav-mobile__list li.is-open > a::after {
  transform: rotate(225deg);
}

@media (hover: hover) {
  .nav-desktop__list > li:hover > a::after {
    transform: translateY(1px) rotate(225deg);
  }
}

/* ============================================
   END Submenu desktop
   ============================================ */

/* Responsive: dùng chung 1 mốc 900px */
@media (max-width: 1024px) {
  .lang-switcher--desktop {
    display: none;
  }
}
@media (max-width: 900px) {
  .nav-desktop {
    display: none;
  }
  .header__toggle {
    display: block;
  }
}
@media (min-width: 901px) {
  .nav-mobile {
    display: none;
  }
}





/* ===== Industries: icon trái + title/desc phải ===== */
.nav-desktop__list > li.menu-industries > .sub-menu {
  min-width: 340px;
}

.nav-desktop__list > li.menu-industries .sub-menu a {
  gap: 14px;
  padding: 12px;
  white-space: normal;
}

.nav-desktop__list > li.menu-industries .menu-icon-box {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bap-soft);
  color: var(--bap);
  font-size: 1.25rem;
  transition:
    background 0.2s,
    color 0.2s;
}
.nav-desktop__list > li.menu-industries .sub-menu a:hover .menu-icon-box {
  background: var(--bap);
  color: #fff;
}

.nav-desktop__list > li.menu-industries .sub-menu .menu-icon {
  width: auto;
}

.nav-desktop__list > li.menu-industries .menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-desktop__list > li.menu-industries .menu-title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgb(6, 35, 80);
}
.nav-desktop__list > li.menu-industries .menu-desc {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bap-muted);
}
.nav-desktop__list > li.menu-industries .sub-menu a:hover .menu-title {
  color: var(--bap);
}

/* Mobile */
.nav-mobile__list > li.menu-industries .menu-icon-box {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bap-soft);
  color: var(--bap);
}
.nav-mobile__list > li.menu-industries .menu-text {
  display: flex;
  flex-direction: column;
}
.nav-mobile__list > li.menu-industries .menu-title {
  color: var(--bap-dark);
  font-weight: 500;
}
.nav-mobile__list > li.menu-industries .menu-desc {
  font-size: 12px;
  color: var(--bap-muted);
}