/* ============================================================
   Bibpix — lớp style cho bản redesign 2026 (5 trang marketing/kho giải).
   Dùng chung với components.css + site.css + prototype-pages.css.

   Quy ước:
   - .bx-imgph  = ô ảnh còn TRỐNG (chưa có asset). Mỗi ô có data-img="IMG-xx"
     để đối chiếu với danh sách ảnh cần cung cấp.
   - .bx-racecard = CHUẨN CARD GIẢI dùng lại ở trang chủ / Sự kiện / Đối tác.
   - Padding ngang chỉ đến từ .bx-container (xem site.css).
   ============================================================ */

/* ---------- Ô ảnh còn trống (placeholder chờ asset) ---------- */
.bx-imgph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 18px;
  background: repeating-linear-gradient(135deg, var(--ink-50) 0 10px, var(--ink-100) 10px 20px);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  color: var(--text-subtle); min-height: 120px; overflow: hidden;
}
.bx-imgph::before {
  content: attr(data-img); position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  background: var(--blue-700); color: #fff; padding: 3px 7px; border-radius: var(--radius-xs);
}
.bx-imgph__t { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--ink-600); max-width: 320px; line-height: 1.5; }
.bx-imgph__d { font-size: var(--fs-caption); color: var(--text-subtle); max-width: 340px; line-height: 1.5; }
.bx-imgph--hero { position: absolute; inset: 0; border: none; border-radius: 0; min-height: 0; background: var(--blue-800); opacity: .5; }
.bx-imgph--hero::before { top: 12px; left: 12px; }
.bx-imgph--ratio { aspect-ratio: 3/2; min-height: 0; }
.bx-imgph--wide { aspect-ratio: 16/7; min-height: 0; }
.bx-imgph--sq { aspect-ratio: 1/1; min-height: 0; }

/* ---------- CHUẨN CARD GIẢI (dùng lại toàn site) ---------- */
.bx-racegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gutter); }
.bx-racecard {
  display: flex; flex-direction: column; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  overflow: hidden; text-decoration: none; box-shadow: var(--shadow-xs);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bx-racecard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.bx-racecard__media { position: relative; aspect-ratio: 3/2; background: var(--ink-100); }
.bx-racecard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bx-racecard__media .bx-imgph { position: absolute; inset: 0; border-radius: 0; }
.bx-racecard__status {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,.94); box-shadow: var(--shadow-xs);
}
.bx-racecard__status i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.bx-racecard__status--ready { color: #16663d; } .bx-racecard__status--ready i { background: var(--success-500); }
.bx-racecard__status--soon  { color: #8a5a06; } .bx-racecard__status--soon  i { background: var(--warning-500); }
.bx-racecard__status--closed{ color: var(--ink-600); } .bx-racecard__status--closed i { background: var(--ink-400); }
.bx-racecard__body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bx-racecard__title { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-body); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bx-racecard__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); font-size: var(--fs-body-sm); }
.bx-racecard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.bx-racecard__cta { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--blue-600); }
.bx-racecard__cta--soon { color: var(--amber-700); }
.bx-racecard--ext .bx-racecard__cta::after { content: "↗"; font-size: 12px; }

/* ---------- HERO tìm ảnh (trang chủ + trang Sự kiện) ---------- */
.hp-hero__inner { position: relative; padding-block: 58px 52px; }
.hp-hero__kicker { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 6px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hp-hero__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-style: italic; text-transform: uppercase; color: #fff; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: var(--ls-tight); margin: 16px 0 0; max-width: 900px; }
.hp-hero__title em { color: var(--amber-300); font-style: italic; }

.hp-finder { margin-top: 26px; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; max-width: 940px; }
.hp-finder__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); background: var(--ink-50); }
.hp-finder__tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 12px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--ink-500);
  border-bottom: 3px solid transparent;
}
.hp-finder__tab:hover { color: var(--blue-700); background: rgba(255,255,255,.6); }
.hp-finder__tab.is-active { background: #fff; color: var(--blue-700); font-weight: var(--fw-bold); border-bottom-color: var(--amber-500); }
.hp-finder__panel { display: none; padding: 18px; }
.hp-finder__panel.is-active { display: block; }
.hp-finder__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.hp-finder__row--2 { grid-template-columns: 1fr auto; }
.hp-finder__hint { margin-top: 10px; font-size: var(--fs-caption); color: var(--text-subtle); }
.hp-selfie { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); }
.hp-selfie__ic { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-100); color: var(--amber-700); }
.hp-selfie b { display: block; color: var(--text-strong); font-size: var(--fs-body); }
.hp-selfie span { font-size: var(--fs-body-sm); }

/* ---------- Thanh lọc + sắp xếp ---------- */
.hp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 16px; }
.hp-filters__lbl { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--text-subtle); margin-right: 2px; }
.hp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: #fff; color: var(--ink-600); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.hp-chip:hover { border-color: var(--blue-400); color: var(--blue-700); text-decoration: none; }
.hp-chip.is-active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.hp-chip--clear { color: var(--ink-500); border-style: dashed; }
.hp-filters__spacer { margin-left: auto; }

/* ---------- Tiêu đề section ---------- */
.hp-secthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hp-secthead h2 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-style: italic; text-transform: uppercase; font-size: clamp(21px, 2.6vw, 30px); color: var(--blue-700); letter-spacing: var(--ls-tight); }
.hp-secthead p { color: var(--text-muted); font-size: var(--fs-body-sm); margin-top: 6px; max-width: 620px; }
.hp-secthead a { font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--blue-600); white-space: nowrap; }

/* ---------- Dải BTC (làn phụ ở trang chủ) ---------- */
.hp-btcband { background: var(--grad-blue); color: #fff; border-radius: var(--radius-xl); padding: 30px 34px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.hp-btcband h3 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-weight: var(--fw-extrabold); font-size: clamp(19px, 2.2vw, 26px); color: #fff; }
.hp-btcband p { color: rgba(255,255,255,.86); margin-top: 10px; max-width: 620px; line-height: 1.7; font-size: var(--fs-body-sm); }
.hp-btcband p strong { color: var(--amber-300); }

/* ---------- Khối nhắc email khi có ảnh ---------- */
.hp-notify { background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: var(--radius-xl); padding: 22px 24px; display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: 20px; align-items: center; }
.hp-notify h3 { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-h4); }
.hp-notify p { color: var(--text-muted); font-size: var(--fs-body-sm); margin-top: 6px; }
.hp-notify__form { display: flex; gap: 10px; }
.hp-notify__form .bx-inputwrap { flex: 1; background: #fff; }

/* ---------- Dải tin cậy 1 dòng ---------- */
.hp-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; padding: 18px 0; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--fs-body-sm); }
.hp-trust b { color: var(--text-strong); font-weight: var(--fw-bold); }
.hp-trust .sep { color: var(--border-strong); }

/* ---------- Trang Sự kiện: thanh tìm dính + tab tình trạng ---------- */
.ev-searchbar { position: sticky; top: 68px; z-index: var(--z-sticky); background: rgba(255,255,255,.92); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border-bottom: 1px solid var(--border-subtle); }
/* min-width:0 để grid item được phép co lại, không bị nội dung nút đẩy tràn ngang */
.ev-searchbar__in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding-block: 12px; }
.ev-searchbar__alt { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

.ev-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; overflow-x: auto; }
.ev-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: none; background: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--ink-500); border-bottom: 3px solid transparent; white-space: nowrap; }
.ev-tab.is-active { color: var(--blue-700); font-weight: var(--fw-bold); border-bottom-color: var(--amber-500); }
.ev-tab .n { background: var(--ink-100); color: var(--ink-600); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); }
.ev-tab.is-active .n { background: var(--amber-100); color: var(--amber-700); }
.ev-panel { display: none; padding-top: 22px; }
.ev-panel.is-active { display: block; }
.ev-count { color: var(--text-muted); font-size: var(--fs-body-sm); margin-bottom: 16px; }
.ev-count b { color: var(--text-strong); }
.ev-yeargroup { margin-bottom: 34px; }
.ev-yeargroup__h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ev-yeargroup__h h3 { font-family: var(--font-mono); font-style: italic; font-weight: 800; font-size: 24px; color: var(--blue-700); }
.ev-yeargroup__h span { color: var(--text-subtle); font-size: var(--fs-body-sm); }
.ev-yeargroup__h::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.ev-empty { text-align: center; padding: 56px 20px; border: 1.5px dashed var(--border-default); border-radius: var(--radius-xl); background: var(--surface-page); }
.ev-empty h3 { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-h4); margin-bottom: 8px; }
.ev-empty p { color: var(--text-muted); font-size: var(--fs-body-sm); max-width: 460px; margin: 0 auto 18px; }
.ev-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Trang Dịch vụ: 2 làn ---------- */
.sv-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.sv-lane { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--border-subtle); border-top: 4px solid var(--blue-500); border-radius: var(--radius-xl); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.sv-lane--ai { border-top-color: var(--amber-500); }
.sv-lane__tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; background: var(--blue-50); color: var(--blue-700); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; border-radius: var(--radius-pill); }
.sv-lane--ai .sv-lane__tag { background: var(--amber-100); color: var(--amber-700); }
.sv-lane h3 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-weight: var(--fw-extrabold); font-size: clamp(18px, 2vw, 23px); color: var(--blue-700); line-height: 1.2; }
.sv-lane p { color: var(--text-body); line-height: 1.75; font-size: var(--fs-body-sm); }
.sv-lane p strong { color: var(--text-strong); }
.sv-lane__foot { margin-top: auto; padding-top: 8px; }

.sv-lanehead { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sv-lanehead__n { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-600); color: #fff; font-family: var(--font-mono); font-style: italic; font-weight: 800; font-size: 19px; }
.sv-lanehead--ai .sv-lanehead__n { background: var(--brand-primary); color: var(--text-on-amber); }
.sv-lanehead__t { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-weight: var(--fw-extrabold); font-size: clamp(20px, 2.6vw, 30px); color: var(--blue-700); letter-spacing: var(--ls-tight); }
.sv-lanehead__s { color: var(--text-muted); font-size: var(--fs-body-sm); margin-top: 4px; max-width: 700px; }

.sv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); counter-reset: st; }
.sv-step { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px; }
.sv-step__n { font-family: var(--font-mono); font-style: italic; font-weight: 800; font-size: 26px; color: var(--amber-500); }
.sv-step h3, .sv-step h4 { font-size: 1em; font-weight: var(--fw-bold); color: var(--text-strong); margin: 8px 0 6px; }
/* sv-lanehead__t la h2 (tieu de SEO cua tung dich vu): bo margin mac dinh cua the */
h2.sv-lanehead__t { margin: 0; }
.sv-cta__chan a { color: inherit; text-decoration: none; }
.sv-cta__chan a:hover b { text-decoration: underline; }
/* Hoi dap trang Dich vu */
.sv-faq { display: grid; gap: 10px; max-width: 880px; }
.sv-faq__item { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 0 20px; }
.sv-faq__item summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative; }
.sv-faq__item summary::-webkit-details-marker { display: none; }
.sv-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; line-height: 1; color: var(--amber-500); }
.sv-faq__item[open] summary::after { content: "\2212"; }
.sv-faq__item summary h3 { display: inline; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0; }
.sv-faq__item p { color: var(--text-body); font-size: var(--fs-body-sm); line-height: 1.75; padding-bottom: 16px; margin: 0; }
/* Giai da lam: luoi the giai dung lai bx-racecard */
.sv-showcase { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sv-step p { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: 1.7; }
.sv-for { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-bottom: 26px; }
.sv-for__c { border-left: 3px solid var(--amber-400); padding-left: 14px; }
.sv-for__c b { display: block; color: var(--text-strong); margin-bottom: 5px; }
.sv-for__c span { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: 1.7; }
.sv-gain { background: var(--blue-50); border-radius: var(--radius-lg); padding: 18px 20px; color: var(--blue-800); font-size: var(--fs-body-sm); line-height: 1.75; margin-top: 22px; }
.sv-gain b { color: var(--blue-900); }

.sv-svc__lane { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); }

/* ---------- Trang Đối tác ---------- */
.pt-statband { background: var(--grad-blue); border-radius: var(--radius-xl); padding: 34px 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pt-stat { text-align: center; }
.pt-stat__n { font-family: var(--font-mono); font-style: italic; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); color: var(--amber-300); line-height: 1.1; }
.pt-stat__d { color: #fff; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); margin-top: 6px; }
.pt-stat__d small { display: block; color: rgba(255,255,255,.72); font-weight: var(--fw-regular); font-size: var(--fs-caption); margin-top: 3px; }

.pt-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gutter); }
.pt-feat { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; background: #fff; text-decoration: none; box-shadow: var(--shadow-xs); }
.pt-feat:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.pt-feat__media { aspect-ratio: 16/9; background: var(--ink-100); }
.pt-feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-feat__media .bx-imgph { height: 100%; border-radius: 0; border: none; }
.pt-feat__b { padding: 12px 14px; }
.pt-feat__b b { display: block; color: var(--text-strong); font-size: var(--fs-body-sm); line-height: 1.4; }
.pt-feat__b span { color: var(--text-subtle); font-size: var(--fs-caption); }

.pt-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.pt-group h3 { font-size: var(--fs-body-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--text-subtle); margin-bottom: 14px; }

.pt-quote { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pt-quote__q { color: var(--text-body); line-height: 1.8; font-size: var(--fs-body); }
.pt-quote__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.pt-quote__av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.pt-quote__av .bx-imgph { min-height: 0; height: 100%; border-radius: 50%; padding: 0; }
.pt-quote__av .bx-imgph::before { display: none; }
.pt-quote__who b { display: block; color: var(--text-strong); font-size: var(--fs-body-sm); }
.pt-quote__who span { color: var(--text-subtle); font-size: var(--fs-caption); }
.pt-note { background: var(--warning-50); border: 1px solid var(--amber-200); border-radius: var(--radius-lg); padding: 12px 16px; color: var(--amber-800); font-size: var(--fs-caption); line-height: 1.6; margin-top: 16px; }

/* ---------- Trang Giới thiệu ---------- */
.ab-sec { padding-block: 58px; }
.ab-lbl { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--amber-600); margin-bottom: 10px; }
.ab-blue .ab-lbl { color: var(--amber-300); }
.ab-ttl { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(22px, 3.4vw, 34px); color: var(--blue-700); margin-bottom: 16px; letter-spacing: var(--ls-tight); }
.ab-blue { background: var(--grad-blue); color: #fff; }
.ab-blue .ab-ttl { color: #fff; }
.ab-txt { max-width: 900px; line-height: 1.85; color: var(--text-body); }
.ab-txt + .ab-txt { margin-top: 14px; }
.ab-blue .ab-txt { color: rgba(255,255,255,.9); }
.ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ab-img { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.ab-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ab-time { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: 26px; }
.ab-tnode { position: relative; padding-top: 26px; }
.ab-tnode::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--border-default); }
.ab-tnode::after { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-primary); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--amber-300); }
.ab-tnode__y { font-family: var(--font-mono); font-style: italic; font-weight: 800; font-size: 26px; color: var(--blue-700); }
.ab-tnode p { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: 1.7; margin-top: 6px; }
.ab-pull { margin-top: 30px; background: var(--blue-50); border-left: 4px solid var(--brand-primary); border-radius: var(--radius-lg); padding: 20px 22px; color: var(--blue-800); font-size: var(--fs-body-lg); line-height: 1.75; font-weight: var(--fw-medium); }

.ab-vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: 26px; }
.ab-val { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px 20px; }
.ab-val__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--amber-100); color: var(--amber-700); margin-bottom: 12px; }
.ab-val b { display: block; color: var(--text-strong); margin-bottom: 6px; }
.ab-val p { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: 1.7; }

.ab-mission { text-align: center; }
.ab-mission blockquote { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-extrabold); font-size: clamp(20px, 2.8vw, 30px); line-height: 1.45; color: #fff; max-width: 900px; margin: 0 auto; }
.ab-mission blockquote em { color: var(--amber-300); }

.ab-cta { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 32px; text-align: center; }
.ab-cta h2 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-weight: var(--fw-extrabold); font-size: clamp(20px, 2.6vw, 28px); color: var(--blue-700); }
.ab-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.ab-cta__link { display: block; margin-top: 14px; font-size: var(--fs-body-sm); color: var(--blue-600); font-weight: var(--fw-semibold); }

/* ============================================================
   TRANG ĐỘI NGŨ NAG — 3 loại ảnh làm 3 việc khác nhau:
   tác phẩm (tay nghề) · chân dung (con người) · tác nghiệp (chuyên nghiệp).
   ============================================================ */

/* Dải 3 số dưới intro */
.nag-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 26px; }
.nag-stat b { font-family: var(--font-mono); font-style: italic; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); color: var(--blue-700); line-height: 1; display: block; }
.nag-stat span { color: var(--text-muted); font-size: var(--fs-body-sm); margin-top: 6px; display: block; max-width: 200px; line-height: 1.5; }

/* Nút ảnh mở lightbox — dùng chung cho mọi gallery (tác phẩm + hậu trường) */
.lb-item { border: none; padding: 0; background: none; cursor: pointer; display: block; width: 100%; position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.lb-item img { width: 100%; display: block; transition: transform .4s ease; }
.lb-item:hover img { transform: scale(1.04); }
.lb-item::after { content: ""; position: absolute; inset: 0; background: rgba(11,41,66,0); transition: background .25s ease; }
.lb-item:hover::after { background: rgba(11,41,66,.18); }
.lb-item .bx-imgph { border-radius: var(--radius-lg); }

/* Khối "Tay nghề" — gallery tác phẩm masonry (ngôi sao của trang) */
.nag-gallery { columns: 4 240px; column-gap: 14px; margin-top: 24px; }
.nag-gallery > * { break-inside: avoid; margin-bottom: 14px; }
.nag-gallery img { width: 100%; display: block; }
.nag-gallery .bx-imgph { border-radius: var(--radius-lg); }
.nag-gallery .bx-imgph--t1 { aspect-ratio: 3/4; }
.nag-gallery .bx-imgph--t2 { aspect-ratio: 4/3; }
.nag-gallery .bx-imgph--t3 { aspect-ratio: 1/1; }
.nag-gallery .bx-imgph--t4 { aspect-ratio: 4/5; }
/* Gallery Hậu trường (.nag-bts) cũng cần tỉ lệ khung như Tay nghề — nếu không,
   ô rỗng chỉ đứng nhờ min-height + chữ, khi gán ảnh (is-filled bỏ min-height + chữ)
   sẽ sập chiều cao về 0 và ảnh biến mất. */
.nag-bts .bx-imgph--t1 { aspect-ratio: 3/4; }
.nag-bts .bx-imgph--t2 { aspect-ratio: 4/3; }
.nag-bts .bx-imgph--t3 { aspect-ratio: 1/1; }
.nag-bts .bx-imgph--t4 { aspect-ratio: 4/5; }

/* Khối "Đội ngũ" — roster chân dung */
.nag-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; }
.nag-person { display: flex; flex-direction: column; }
.nag-person__ph { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-100); }
.nag-person__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.nag-person:hover .nag-person__ph img { transform: scale(1.05); }
.nag-person__ph .bx-imgph { position: absolute; inset: 0; border-radius: 0; min-height: 0; }
.nag-person__n { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-body); margin-top: 10px; }
.nag-person__r { color: var(--text-muted); font-size: var(--fs-body-sm); margin-top: 2px; }
.nag-roster__more { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: var(--fs-body-sm); margin-top: 8px; }
.nag-roster__more b { color: var(--blue-700); }

/* Khối "Cách chúng tôi làm việc" — quy trình kỷ luật 3 cột, mỗi giai đoạn 1 ảnh */
.nag-work { margin-top: 26px; }
.nag-proc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.nag-phase__img { aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.nag-phase__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nag-phase__img .bx-imgph { height: 100%; min-height: 0; border-radius: var(--radius-lg); }
.nag-phase__h { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-style: italic; font-weight: 800; font-size: 15px; color: var(--amber-700); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--amber-300); }
.nag-phase ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.nag-phase li { position: relative; padding-left: 20px; color: var(--text-body); font-size: var(--fs-body-sm); line-height: 1.6; }
.nag-phase li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--blue-500); }
.nag-work__media { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.nag-work__media .bx-imgph { aspect-ratio: 4/3; }
.nag-rules { background: var(--blue-50); border-left: 4px solid var(--brand-primary); border-radius: var(--radius-lg); padding: 18px 20px; }
.nag-rules h4 { font-weight: var(--fw-bold); color: var(--blue-900); font-size: var(--fs-body-sm); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.nag-rules li { color: var(--blue-800); }
.nag-rules li::before { background: var(--brand-primary); }

/* Khối "Hậu trường" — gallery ảnh NAG tác nghiệp + lightbox popup */
.nag-bts { columns: 4 220px; column-gap: 12px; margin-top: 24px; }
.nag-bts__item { break-inside: avoid; margin-bottom: 12px; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; display: block; position: relative; background: var(--ink-100); border: none; padding: 0; width: 100%; }
.nag-bts__item img { width: 100%; display: block; transition: transform .4s ease, filter .3s ease; }
.nag-bts__item .bx-imgph { border-radius: var(--radius-lg); }
.nag-bts__item:hover img { transform: scale(1.04); }
.nag-bts__item::after { content: ""; position: absolute; inset: 0; background: rgba(11,41,66,0); transition: background .25s ease; }
.nag-bts__item:hover::after { background: rgba(11,41,66,.18); }
.nag-bts__more { grid-column: 1/-1; text-align: center; margin-top: 8px; }

/* Lightbox overlay */
.nag-lb { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; background: rgba(6,22,36,.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.nag-lb.is-open { display: flex; }
.nag-lb__img { max-width: min(92vw, 1200px); max-height: 86vh; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); }
.nag-lb__ph { width: min(92vw, 1000px); aspect-ratio: 3/2; }
.nag-lb__cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.9); font-size: var(--fs-body-sm); }
.nag-lb__cap b { color: #fff; }
.nag-lb__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s ease; }
.nag-lb__btn:hover { background: rgba(255,255,255,.26); }
.nag-lb__btn .bx-ic { width: 24px; height: 24px; }
.nag-lb__prev { left: 20px; } .nag-lb__next { right: 20px; }
.nag-lb__close { position: absolute; top: 20px; right: 20px; transform: none; width: 44px; height: 44px; }

/* CTA 2 nhóm (BTC + NAG ứng tuyển) */
.nag-cta2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.nag-ctacard { border-radius: var(--radius-xl); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.nag-ctacard--btc { background: var(--grad-blue); color: #fff; }
.nag-ctacard--nag { background: #fff; border: 1px solid var(--border-subtle); }
.nag-ctacard__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.nag-ctacard--btc .nag-ctacard__lbl { color: var(--amber-300); }
.nag-ctacard--nag .nag-ctacard__lbl { color: var(--amber-600); }
.nag-ctacard h3 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-weight: var(--fw-extrabold); font-size: clamp(19px, 2.2vw, 25px); line-height: 1.15; }
.nag-ctacard--btc h3 { color: #fff; }
.nag-ctacard--nag h3 { color: var(--blue-700); }
.nag-ctacard p { font-size: var(--fs-body-sm); line-height: 1.65; }
.nag-ctacard--btc p { color: rgba(255,255,255,.86); }
.nag-ctacard--nag p { color: var(--text-muted); }
.nag-ctacard__foot { margin-top: auto; padding-top: 6px; }

@media (max-width: 900px) {
  .nag-proc { grid-template-columns: 1fr; gap: 26px; }
  .nag-phase__img { aspect-ratio: 16/8; }
  .nag-cta2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nag-gallery { columns: 2 140px; }
  .nag-bts { columns: 2 140px; }
  .nag-roster { grid-template-columns: 1fr 1fr; }
  .nag-lb__btn { width: 42px; height: 42px; }
  .nag-lb__prev { left: 8px; } .nag-lb__next { right: 8px; }
}

/* ---------- Caption nhỏ trên ảnh chặng (ghi rõ ảnh đã làm mờ) ---------- */
.sv-media-note {
  position: absolute; left: 14px; bottom: 12px; z-index: 3; max-width: calc(100% - 28px);
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: rgba(11,41,66,.62); color: rgba(255,255,255,.92);
  font-size: 11px; line-height: 1.35; font-weight: var(--fw-medium);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .sv-lanes { grid-template-columns: 1fr; }
  .sv-steps, .sv-for { grid-template-columns: 1fr; }
  .pt-groups { grid-template-columns: 1fr; }
  .ab-split { grid-template-columns: 1fr; gap: 24px; }
  .ab-vals { grid-template-columns: 1fr 1fr; }
  .pt-statband { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hp-btcband { grid-template-columns: 1fr; padding: 26px 22px; }
  .hp-notify { grid-template-columns: 1fr; }
  /* Header cũng sticky (cao 68px, z-index cao hơn) → thanh tìm phải nằm ngay dưới,
     không được top:0 nếu không ô nhập bị header che khi cuộn. */
  .ev-searchbar__in { grid-template-columns: minmax(0, 1fr); }
  .ev-searchbar__alt { display: grid; grid-template-columns: 1fr 1fr; }
  .ev-searchbar__alt .bx-btn { min-width: 0; padding-inline: 8px; font-size: 12px; }
  .ab-time { grid-template-columns: 1fr; gap: 22px; }
  .ab-tnode::before { display: none; }
}
@media (max-width: 640px) {
  .hp-finder__row, .hp-finder__row--2 { grid-template-columns: 1fr; }
  .hp-finder__tab { flex-direction: column; gap: 4px; font-size: 12px; padding: 10px 6px; }
  .hp-finder__tab .bx-ic { width: 18px; height: 18px; }
  .hp-notify__form { flex-direction: column; }
  .bx-racegrid { grid-template-columns: 1fr; }
  .ab-vals { grid-template-columns: 1fr; }
  .pt-statband { grid-template-columns: 1fr; gap: 20px; }
  .ev-tabs { margin-inline: calc(-1 * var(--container-pad)); padding-inline: var(--container-pad); }

  /* Nút .bx-btn mặc định white-space:nowrap → nút CTA chữ dài tràn ngang ở màn hẹp.
     Ở mobile cho các nút trong hero/CTA/dải xuống dòng + full-width để không tràn. */
  .sv-hero__actions .bx-btn,
  .hp-btcband .bx-btn,
  .sv-bridge > div .bx-btn,
  .sv-cta .bx-btn,
  .ab-cta__btns .bx-btn,
  .mk-quote__actions .bx-btn {
    white-space: normal; width: 100%; text-align: center; justify-content: center;
  }
  .sv-hero__actions, .ab-cta__btns, .mk-quote__actions, .sv-bridge > div { width: 100%; }

  /* Chốt chặn: mọi nút lớn cho phép xuống dòng ở màn hẹp (kể cả nút đứng lẻ
     trong div không class) — nút CTA chữ dài không còn tràn ngang. */
  .bx-btn--lg { white-space: normal; }

  /* Biểu đồ tăng trưởng 9 cột: cho cuộn ngang trong khối, không đẩy tràn trang */
  .ep-growth { overflow-x: auto; padding-bottom: 6px; }
  .ep-gb { min-width: 26px; }
}

/* Ô ảnh đã gán (tool gán-ảnh chèn <img> vào, thêm class is-filled).
   Ảnh phủ tuyệt đối trong khung đã khoá tỉ lệ → không cần crop tay. */
.bx-imgph.is-filled { padding: 0; border: none; background: none; min-height: 0; }
.bx-imgph.is-filled::before { display: none; }
.bx-imgph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Avatar testimonial tự sinh khi chưa có ảnh khách: icon người trên nền gradient
   thương hiệu. Vẫn giữ data-img nên tool gán ảnh có thể đè ảnh thật lên sau. */
.pt-av-gen { border: none !important; display: flex; align-items: center; justify-content: center; }
.pt-av-gen::before { display: none !important; }
.pt-av-gen svg { width: 22px; height: 22px; color: #fff; opacity: .95; }

/* Card "BibPix tại các giải" giờ là link tới hashtag #bibpix trên Facebook */
a.ep-quote--link { text-decoration: none; color: inherit; display: flex; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
a.ep-quote--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ep-fbcta { grid-column: 1 / -1; text-align: center; margin-top: 6px; }
.ep-fbcta a { color: var(--blue-600); font-weight: var(--fw-semibold); text-decoration: none; }
.ep-fbcta a:hover { text-decoration: underline; }

/* Trang giai: doan tom tat duoi ten giai (partials/race-summary) */
.ph-hero__summary { margin: 8px 0 0; max-width: 760px; color: rgba(255,255,255,.86); font-size: var(--fs-body-sm); line-height: 1.6; }