/* ==========================================================
   Khung ảnh đầu trang dùng chung (Giới thiệu, Lĩnh vực, Dự án,
   Cẩm nang, Liên hệ) — tách từ gioi-thieu.css 09/11/2026.
   Ảnh nền đặt bằng biến --bg trên từng trang.
   ========================================================== */
.ab-hero { --ov: 240, 247, 252; --hfont: var(--head, "Barlow Condensed", sans-serif); --bfont: var(--body2, "Barlow", sans-serif);
  position: relative; width: calc(100% - 32px); max-width: 1240px; margin: 22px auto 34px; aspect-ratio: 2700 / 1254; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background-color: #dfeaf3; background-image: url("../assets/img/gt-bien.webp?v=1"); background-position: var(--bp, 60% 50%); background-size: cover; background-repeat: no-repeat; box-shadow: 0 14px 36px rgba(22, 50, 79, .2); font-family: var(--bfont); }
.ab-hero .im { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--ov), .96) 0, rgba(var(--ov), .9) 34%, rgba(var(--ov), .5) 54%, rgba(var(--ov), 0) 70%); }
.ab-hero .in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 4%; }
.ab-hero .in > * { max-width: 48%; }
.ab-hero .crumb { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.ab-hero .crumb a:hover { color: var(--green); }
.ab-hero h1 { font-family: var(--hfont); color: var(--ink); font-size: clamp(30px, 4.6vw, 64px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; font-weight: 700; margin: 0; }
.ab-hero h1 .tq3d { display: block; font-size: 1.3em; line-height: .95; color: #a3111c; white-space: nowrap; text-shadow: 1px 1px 0 #87101a, 2px 2px 0 #730d16, 3px 3px 0 #5e0a12, 4px 4px 0 #4a080e, 6px 8px 12px rgba(40, 0, 6, .35); }
.ab-hero h1 .tq3d.flat { text-shadow: none; color: var(--ink, #16324f); }
.ab-hero h1 small { display: block; font: 600 14px/1.4 var(--bfont); letter-spacing: .2em; color: var(--muted); margin-bottom: 14px; }
.ab-hero h1 em { display: block; font: 700 clamp(20px, 2.4vw, 34px)/1.2 "Dancing Script", "Brush Script MT", cursive; text-transform: none; white-space: nowrap; color: var(--green); letter-spacing: 0; margin-top: 8px; }
.ab-hero p { color: var(--text); font-size: clamp(14px, 1.4vw, 17px); margin: 14px 0 20px; }
.ab-pill { display: flex; align-items: center; gap: 6px; background: rgba(var(--ov), .5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid rgba(22, 50, 79, .2); border-radius: 60px; padding: 8px 8px 8px 20px; width: max-content; max-width: min(680px, 100%) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.ab-pill > span { flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--muted); line-height: 1.25; padding: 0 10px; border-right: 1px solid var(--line); }
.ab-pill > span:nth-of-type(3) { border: 0; }
.ab-pill b { display: block; color: var(--ink); font: 600 15px var(--bfont); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-pill a { background: var(--ink); color: #fff; border-radius: 40px; padding: 13px 22px; font-weight: 600; white-space: nowrap; transition: background .2s; }
.ab-pill a:hover { background: var(--green); }
.ab-pill span a { background: none; color: inherit; padding: 0; border-radius: 0; font-weight: inherit; }
.ab-pill span a:hover { background: none; color: var(--green); }

@media (max-width: 820px) {
  .ab-hero { aspect-ratio: auto; display: flex; flex-direction: column; width: calc(100% - 24px); margin: 12px auto 20px; min-height: min(560px, 140vw); background-position: var(--bpm, 82% bottom); }
  .ab-hero .im { background: linear-gradient(180deg, rgba(var(--ov), .95) 0, rgba(var(--ov), .86) 40%, rgba(var(--ov), .4) 66%, rgba(var(--ov), .06) 100%); }
  .ab-hero .in { position: relative; inset: auto; z-index: 1; flex: 1; padding: 20px 16px 16px; }
  .ab-hero .in > * { max-width: none; }
  .ab-hero h1 em { white-space: normal; }
  .ab-pill { margin-top: auto; border-radius: 18px; flex-wrap: wrap; padding: 8px; width: auto; }
  .ab-pill > span { flex: 1 1 40%; border: 0; padding: 6px; }
  .ab-pill b { white-space: normal; }
  .ab-pill > a { width: 100%; text-align: center; }
}