/* ============================================================
   CORE VENTURES — SHARED COMPONENT STYLES v1.0
   Header, Footer, Nav, Mobile Menu
   ============================================================ */

/* ── Site Header ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  /* Transparent over the navy page-hero; turns to white glass on scroll
     (mirrors the home header behaviour for a consistent, polished feel). */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 8px 30px -16px rgba(12,19,34,.18);
}
/* Scrolled state → dark text/controls on the white bar */
.site-header.scrolled .logo-text { color: var(--ink); }
.site-header.scrolled .nav-link { color: var(--ink-2); }
.site-header.scrolled .nav-link:hover { color: var(--ink); background: rgba(12,19,34,.04); }
.site-header.scrolled .nav-link.is-active { color: var(--spark-deep); }
.site-header.scrolled .lang-btn { color: var(--ink-2); }
.site-header.scrolled .lang-btn:hover { color: var(--ink); background: rgba(12,19,34,.04); }
.site-header.scrolled .lang-btn__active { color: var(--spark-deep); }
.site-header.scrolled .lang-btn__other::before { color: rgba(12,19,34,.25); }
.site-header.scrolled .hamburger span { background: var(--ink); }

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-6);   /* space-8 dư khoảng cách khi thanh đã thấp xuống */
}

/* ── Logo ────────────────────────────────────────────────── */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
}
/* Thu theo --header-h 68px: logo 48px trong thanh 68px trông chật, 38px cân hơn */
.logo img { width: 38px; height: 38px; padding: 5px; background: var(--navy); border-radius: 9px; object-fit: contain; box-sizing: border-box; }
.logo-text {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--white);
  white-space: nowrap;
}

/* ── Primary Nav ─────────────────────────────────────────── */
.site-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(232,234,240,.8);
  border-radius: var(--r-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-link:hover,
.nav-link.is-active { color: var(--white); }
.nav-link.is-active { color: var(--spark); }
.nav-link:hover { background: var(--surface-hover); }

.nav-chevron { transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; }
.has-mega:hover .nav-chevron,
.has-mega.open .nav-chevron { transform: rotate(180deg); }

/* ── Mega menu ───────────────────────────────────────────── */
.mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 520px;
  background: var(--navy-2);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  /* A11Y-7 (WCAG 2.4.3): `visibility:hidden` removes the 7 links inside from the
     tab order AND from the a11y tree while the panel is closed. `opacity` alone
     left them focusable/invisible. `visibility` is transitioned with a delay so
     the fade-out still plays. JS additionally sets `inert` (defence in depth). */
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
/* Invisible hover-bridge spanning the gap between trigger and panel, so the
   pointer never leaves the hover region while travelling down into the menu.
   (Without this the menu closes the instant the cursor enters the 8px gap.) */
.mega-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.has-mega:hover .mega-menu,
.has-mega.open .mega-menu,
.has-mega:focus-within .mega-menu {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s;
}
/* Never leave an inert subtree visible (JS toggles `inert`; CSS :hover can open). */
.mega-menu[inert] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.mega-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}
.svc-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  transition: background var(--dur-fast);
}
.svc-link:hover { background: var(--surface-hover); }
.svc-link__icon {
  font-size: var(--text-lg);
  color: var(--spark);
  line-height: 1;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.svc-link__tx { min-width: 0; }
.svc-link__tx b {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-on-dark);
  transition: color var(--dur-fast);
}
.svc-link__tx em {
  display: block;
  font-size: var(--text-xs);
  font-style: normal;
  color: rgba(232,234,240,.62); /* A11Y-4: alpha .5 = 4.19… <4.5:1 on navy → .62 = 6.14:1 (navy) / 5.69:1 (navy-2) */
  margin-top: 2px;
  line-height: 1.35;
}
.svc-link:hover .svc-link__tx b { color: var(--spark); }
.mega-menu__all {
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--spark);
  text-align: right;
  transition: color var(--dur-fast);
}
.mega-menu__all:hover { color: var(--white); }

/* ── Header actions ──────────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── Language switcher (globe + segmented VI/EN pill) ─────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border-radius: var(--r-full);
  border: 1px solid rgba(232,234,240,.22);
  background: rgba(255,255,255,.04);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.lang-switch:hover { border-color: rgba(62,143,230,.6); }
.lang-switch__globe {
  width: 14px; height: 14px;
  margin: 0 3px 0 6px;
  color: rgba(232,234,240,.55);
  flex-shrink: 0;
}
.lang-switch__seg {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--r-full);
  color: rgba(232,234,240,.6);
  background: none;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.lang-switch__seg:hover { color: var(--white); }
.lang-switch__seg.is-active { background: var(--spark); color: var(--navy); }
/* Scrolled (white) header → dark-on-light treatment */
.site-header.scrolled .lang-switch { border-color: var(--line); background: rgba(12,19,34,.03); }
.site-header.scrolled .lang-switch__globe { color: var(--ink-3); }
.site-header.scrolled .lang-switch__seg { color: var(--ink-2); }
.site-header.scrolled .lang-switch__seg:hover { color: var(--ink); }
.site-header.scrolled .lang-switch__seg.is-active { background: var(--spark-deep); color: var(--white); }

/* ── CTA nav button ──────────────────────────────────────── */
.nav-cta { font-size: var(--text-sm) !important; padding: 0.52em 1.2em !important; }

/* ── Hamburger ───────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: var(--r-sm);
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-on-dark);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu drawer ──────────────────────────────────── */
.mobile-menu {
  /* Anchor the drawer to the fixed header instead of the viewport. A scrolled
     header uses backdrop-filter, which creates a containing block for fixed
     descendants and previously collapsed this drawer to its 48px padding. */
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  background: var(--navy);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  transform: translateX(100%);
  /* A11Y-6 (WCAG 2.4.3 / 4.1.2): the drawer was only moved off-screen, so its
     links stayed in the tab order while `aria-hidden="true"` was set on the
     container — the classic "aria-hidden on a focusable element" conflict.
     `visibility:hidden` (+ `inert` from JS) actually removes them. */
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}
.mobile-link {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: rgba(232,234,240,.8);
  border-bottom: 1px solid var(--border-dark);
  transition: color var(--dur-fast);
}
.mobile-link:hover { color: var(--spark); }
.mobile-services__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 0;
}
.mobile-services__all {
  flex-shrink: 0;
  color: var(--spark);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .01em;
}
.mobile-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border-dark);
}
.mobile-service-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(232,234,240,.12);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.035);
  color: rgba(232,234,240,.76);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.mobile-service-link:hover,
.mobile-service-link:focus-visible,
.mobile-service-link.is-active {
  color: var(--white);
  border-color: rgba(62,143,230,.55);
  background: rgba(62,143,230,.12);
}
.mobile-service-link__icon {
  flex-shrink: 0;
  color: var(--spark);
  font-size: var(--text-base);
}
.mobile-cta {
  display: inline-flex;
  justify-content: center;
  margin-top: var(--space-8);
  width: 100%;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { padding-top: var(--space-16); padding-bottom: var(--space-8); }

.footer-top {
  display: grid;
  /* Cột thương hiệu rộng vừa đủ cho địa chỉ 2 dòng (xem .footer-contact).
     Trước đây 2fr + gap space-12 khiến địa chỉ tràn 3 dòng, cột trái dài hơn
     cột CTA ~125px → sinh khoảng trống lớn bên phải. */
  grid-template-columns: 1.9fr 1fr 1fr 1.15fr;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--border-dark);
}

.footer-logo .logo-text { font-size: var(--text-base); }
.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(232,234,240,.55);
  margin-top: var(--space-4);
  line-height: 1.7;
  max-width: 280px;
}
.footer-contact {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  /* gap phải LỚN hơn khoảng cách giữa các dòng bên trong địa chỉ (line-height
     1.6), nếu không ba mục trông như một đoạn văn liền mạch */
  gap: var(--space-3);
  /* Địa chỉ đầy đủ dài ~93 ký tự. 34ch ép thành 3 dòng, dòng cuối trơ trọi
     "Chí Minh". Cột thương hiệu (1.9fr) rộng ~54ch nên đặt 52ch: địa chỉ gói
     gọn 2 dòng, vẫn chừa lề phải. Grid dùng fr nên max-width không kéo cột. */
  max-width: 52ch;
}
.footer-contact-link {
  /* FIX 2026-08-04: trước đây `align-items:center` — với dòng một hàng thì ổn,
     nhưng địa chỉ mới dài 3 hàng nên biểu tượng bị đẩy xuống GIỮA khối chữ,
     nhìn như trôi lơ lửng. Canh theo hàng chữ ĐẦU TIÊN mới đúng. */
  display: flex;                 /* inline-flex + text dài dễ tràn ở cột hẹp */
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.6;              /* địa chỉ nhiều dòng cần thở */
  color: rgba(232,234,240,.6);
  transition: color var(--dur-fast);
  text-wrap: pretty;             /* tránh dòng cuối trơ trọi một chữ */
}
.footer-contact-link > svg {
  flex-shrink: 0;                /* không để biểu tượng bị bóp méo khi chữ dài */
  margin-top: .28em;             /* hạ nhẹ cho thẳng tâm hàng chữ đầu */
}
.footer-contact-link:hover { color: var(--spark); }
.footer-address { cursor: default; }

.footer-col-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232,234,240,.62); /* A11Y-4: alpha .4 = … <4.5:1 on navy → .62 = 6.14:1 (navy) / 5.69:1 (navy-2) */
  margin-bottom: var(--space-4);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-links a {
  font-size: var(--text-sm);
  color: rgba(232,234,240,.65);
  transition: color var(--dur-fast);
}
.footer-links a:hover { color: var(--spark); }

/* align-items:flex-start → nút ôm sát chữ thay vì kéo căng hết chiều rộng cột */
.footer-cta-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.footer-cta-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--white);
  line-height: 1.5;              /* 1.4 làm 2 dòng dính nhau, thiếu thở */
  max-width: 22ch;               /* ngắt dòng chủ động, không để wrap tuỳ tiện */
  text-wrap: balance;            /* chia đều chữ giữa 2 dòng */
}
.footer-nda-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(232,234,240,.62); /* A11Y-4: alpha .4 = … <4.5:1 on navy → .62 = 6.14:1 (navy) / 5.69:1 (navy-2) */
}

.footer-bottom {
  padding-top: var(--space-6);   /* space-8 dư khoảng trống ngay dưới đường kẻ */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-8);
}
/* Khối chữ bên trái: 2 dòng sát nhau, không dùng gap lớn của .footer-bottom */
.footer-bottom-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.footer-copy {
  font-size: var(--text-xs);
  color: rgba(232,234,240,.62); /* A11Y-4: alpha .35 = … <4.5:1 on navy → .62 = 6.14:1 (navy) / 5.69:1 (navy-2) */
}
.footer-reg {
  font-size: var(--text-xs);
  color: rgba(232,234,240,.62); /* A11Y-4: alpha .25 = … <4.5:1 on navy → .62 = 6.14:1 (navy) / 5.69:1 (navy-2) */
}
.footer-legal-links {
  display: flex;
  gap: var(--space-6);
}
.footer-legal-links a {
  font-size: var(--text-xs);
  color: rgba(232,234,240,.62); /* A11Y-4: alpha .35 = … <4.5:1 on navy → .62 = 6.14:1 (navy) / 5.69:1 (navy-2) */
  transition: color var(--dur-fast);
}
.footer-legal-links a:hover { color: var(--spark); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-nav { display: none; }
  /* Two-class specificity prevents page-level `.btn` rules loaded later from
     making the desktop CTA reappear beside the hamburger. */
  .header-actions .nav-cta { display: none; }
  .lang-switch { display: none; }
  .header-actions { margin-left: auto; }
  .hamburger { display: flex; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 640px) {
  .site-header .logo { gap: var(--space-2); }
  .footer-top { grid-template-columns: 1fr; }
  .footer-cta-col { display: none; }
}

/* ── Service detail hero: 2-col copy + bespoke animated scene ──
   Frame is shared; each service injects its own .svc-scene SVG motif.
   Animation handled centrally in core.js (initGSAP), with the static SVG
   as the no-JS / reduced-motion fallback. ── */
.svc-hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--space-12);
  align-items: center;
}
.svc-hero__copy { min-width: 0; }
.svc-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.svc-scene { width: 100%; max-width: 480px; height: auto; overflow: visible; }
.svc-scene text { font-family: var(--font-sans); }
@media (max-width: 900px) {
  .svc-hero { grid-template-columns: 1fr; gap: var(--space-8); }
  .svc-hero__visual { min-height: 280px; }
}
@media (max-width: 560px) {
  .svc-hero__visual { display: none; } /* keep the mobile hero compact */
}

/* ── Service "situations" cards (shared across service pages) ──
   Even column counts (4 or 5) so the last row never drops a lone card. */
.sit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.sit-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.sit-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sit-card { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--spark-deep); border-radius: var(--r-md); padding: var(--space-5); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.sit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sit-card .sit-ic { color: var(--spark-deep); margin-bottom: var(--space-3); display: block; }
.sit-card h3 { font-size: var(--text-base); color: var(--ink); margin-bottom: var(--space-2); }
.sit-card p { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.65; }
/* Deliverable line on a process/methodology step */
.step-deliver { margin-top: var(--space-3); display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); color: var(--spark-deep); font-weight: 600; line-height: 1.5; }
.step-deliver svg { flex-shrink: 0; margin-top: 2px; }
@media (max-width: 1100px) { .sit-grid, .sit-grid.cols-5, .sit-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .sit-grid, .sit-grid.cols-5, .sit-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .sit-grid, .sit-grid.cols-5, .sit-grid.cols-3 { grid-template-columns: 1fr; } }

/* ── Breadcrumb (chuẩn hoá 2026-08-04) ────────────────────────────────
   Dùng cho MỌI trang con, luôn ở dòng đầu hero trên nền navy. Trước đây chỉ
   6 trang dịch vụ có, mỗi trang copy CSS riêng trong head.css; 6 trang khác
   dùng eyebrow, 2 trang không có gì. Giờ định nghĩa một lần tại đây. */
/* Bản 2 (2026-08-15) — "viên kính".
   Bản 1 để crumb cuối `font-weight:600` + trắng tinh ở cỡ chữ thường, mà trên
   hầu hết trang con crumb cuối TRÙNG CHỮ với H1 ngay bên dưới ⇒ cùng một câu
   hiện hai lần, lần nào cũng to tiếng. Bản này hạ breadcrumb về đúng vai điều
   hướng (chữ hoa, giãn chữ, màu trầm) và gói vào một viên bo tròn để nó là
   thành phần có chủ ý thay vì dòng chữ rơi vãi đầu hero.
   Dấu dẫn đầu = khối vuông 45° trích logo, cùng mô-típ đã áp cho eyebrow toàn
   site ở §10aj — trước đó breadcrumb là chỗ duy nhất còn dùng ngôn ngữ khác. */
.breadcrumb {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: .6em;
  max-width: 100%;
  margin-bottom: var(--space-6);
  padding: .5em 1.15em .5em .95em;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  /* .62 chứ không phải .55: ở 11px cần đạt 4.5:1. Trên nền viên kính (navy phủ
     trắng 5.5%) thì .55 chỉ được 4.46:1 — trượt AA. .62 cho 5.40:1. */
  color: rgba(232,234,240,.62);
}
.breadcrumb::before {
  content: ''; flex: none;
  width: 5px; height: 5px; border-radius: 1px;
  transform: rotate(45deg);
  background: var(--spark); opacity: .75;
  margin-right: .15em;
}
.breadcrumb a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--spark); }
.breadcrumb a:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; border-radius: 2px; }
.breadcrumb [aria-current="page"] { color: var(--white); font-weight: 600; letter-spacing: .06em; }
.breadcrumb .crumb-sep { color: rgba(232,234,240,.30); }

/* Trang bài viết: breadcrumb nằm trong dải navy mỏng `.art-strip`, dải này đã
   có padding-bottom riêng nên không cần khoảng dưới nữa.
   (Rule cũ nhắm `.article-breadcrumb` — class đó không còn trong markup.) */
.art-strip .breadcrumb { margin-bottom: 0; }

/* Màn hẹp: breadcrumb trang bài có 4 cấp nên chắc chắn xuống dòng. Viên bo
   tròn hoàn toàn mà wrap 2 dòng nhìn rất vụng ⇒ chuyển sang bo góc mềm. */
@media (max-width: 640px) {
  .breadcrumb {
    border-radius: 12px;
    padding: .55em .9em;
    gap: .5em; letter-spacing: .08em;
  }
  /* Tít bài (crumb cuối) đã cắt còn 42 ký tự nhưng ở 390px vẫn ăn 2 dòng,
     làm viên breadcrumb cao gần bằng cả tiêu đề. Cho nó một dòng + "…". */
  .breadcrumb [aria-current="page"] {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ── Nút tìm kiếm trên header (2026-08-04) ──────────────────────────── */
.nav-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-full); flex-shrink: 0;
  color: inherit; opacity: .72;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.nav-search svg { width: 18px; height: 18px; }
.nav-search:hover { opacity: 1; background: rgba(255,255,255,.10); }
.site-header.scrolled .nav-search:hover { background: rgba(12,19,34,.06); }
.nav-search:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
@media (max-width: 900px) { .nav-search { display: none; } }

/* ── Thẻ "Dịch vụ liên quan" (2026-08-21) ────────────────────────────
   Trước đây ký hiệu trang trí (◈ ◉ ◐ …) là một <p> riêng nằm TRÊN tiêu đề,
   ăn nguyên một dòng + margin, để lại mảng trắng lớn giữa icon và chữ trong
   khi thẻ chỉ có 3 dòng nội dung. Gom icon và tiêu đề về cùng một hàng. */
.rel-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--space-2);
}
.rel-card-ico { font-size: 18px; line-height: 1; flex-shrink: 0; color: var(--spark-deep); }
.rel-card-head h3 { margin-bottom: 0; }