/* TuyenSinh Banner V1 — component công khai (Themes/TuyenSinhTheme/wwwroot/css/banner.css).
   Thiết kế: docs/features/tuyensinh-banner/01-design-lock.md §6–§7, 02-ui-design.html.
   Tự chứa: mọi rule bắt đầu bằng .ts-bn-slot / .ts-bn*, không có :root, không selector phần tử trần,
   nên nạp sau tuyensinh.css + các file pages/*.css mà không đổi bất kỳ rule nào của chúng.
   Màu lấy theo token .ts-site (tuyensinh.css), có giá trị dự phòng khi xem trước trong Admin (không có .ts-site).
   Không dùng style="" trong markup: mẫu màu là class cố định. Không đặt font-family: chữ theo trang. */
.ts-bn-slot {
  --ts-bn-primary: var(--ts-primary, #1d4ed8);
  --ts-bn-primary-dark: var(--ts-primary-dark, #1e40af);
  --ts-bn-primary-deep: #172554;
  --ts-bn-soft: #eff6ff;
  --ts-bn-soft-line: #bfdbfe;
  --ts-bn-surface: var(--ts-surface, #ffffff);
  --ts-bn-text: var(--ts-text, #0f172a);
  --ts-bn-muted: var(--ts-muted, #64748b);
  --ts-bn-border: var(--ts-border, #e2e8f0);
  --ts-bn-on-dark: #ffffff;
  --ts-bn-on-dark-muted: #dbeafe;
  --ts-bn-radius: var(--ts-radius, 16px);

  container: ts-bn / inline-size;
  display: block;
  min-width: 0;
  margin: 0;
}

/* Khoảng cách theo khối anh em của từng trang (không tự đặt giá trị mới):
   - Trang chủ: .ts-home-section / .ts-home-twin dùng margin-top 36px.
   - Chi tiết trường / ngành: .ts-detail-cta dùng margin-top 2rem.
   - Các slot còn lại nằm trong lưới có gap sẵn (.ts-benchmark-page 32px, .ts-score-search-page 32px,
     .ts-news-page 24px, .ts-article-page 24px) nên margin = 0. */
.ts-bn-slot.is-home { margin-top: 36px; }
.ts-bn-slot.is-detail { margin-top: 2rem; }

/* Một liên kết cho cả banner: toàn bộ bề mặt là vùng bấm, một điểm focus. */
.ts-bn {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ts-bn-radius);
  color: var(--ts-bn-text);
  text-decoration: none;
  font: inherit;
}
.ts-bn:focus-visible { outline: 3px solid var(--ts-bn-primary); outline-offset: 3px; }

/* Nhãn "Quảng cáo" / "tuyensinh.info" — luôn hiện, mẫu màu nào cũng không ẩn được. Tối thiểu 12px. */
.ts-bn-label {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid var(--ts-bn-border);
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ts-bn-muted);
  white-space: nowrap;
}

/* ───────────────────────────── Banner nội dung (component kiểm soát) ── */
.ts-bn-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 32px;
  min-height: 120px;
  padding: 20px 28px;
  border: 1px solid transparent;
}
.ts-bn-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ts-bn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ts-bn-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-bn-primary); }
.ts-bn-title { display: block; font-size: 1.25rem; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.ts-bn-body { display: block; max-width: 46rem; font-size: 0.95rem; line-height: 1.55; color: var(--ts-bn-muted); overflow-wrap: anywhere; }
.ts-bn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.ts-bn-cta::after { content: "→"; }

/* Mẫu: Nền xanh đậm */
.ts-bn-content.is-primary {
  background: linear-gradient(135deg, var(--ts-bn-primary-dark) 0%, var(--ts-bn-primary) 60%, #2563eb 100%);
  color: var(--ts-bn-on-dark);
}
.ts-bn-content.is-primary .ts-bn-eyebrow { color: var(--ts-bn-on-dark-muted); }
.ts-bn-content.is-primary .ts-bn-body { color: var(--ts-bn-on-dark-muted); }
.ts-bn-content.is-primary .ts-bn-label { border-color: rgba(255, 255, 255, 0.45); color: var(--ts-bn-on-dark); }
.ts-bn-content.is-primary .ts-bn-cta { background: var(--ts-bn-surface); color: var(--ts-bn-primary-dark); }
.ts-bn-content.is-primary:hover .ts-bn-cta { background: var(--ts-bn-soft); }

/* Mẫu: Nền xanh nhạt */
.ts-bn-content.is-soft { background: var(--ts-bn-soft); border-color: var(--ts-bn-soft-line); }
.ts-bn-content.is-soft .ts-bn-label { border-color: var(--ts-bn-soft-line); color: var(--ts-bn-primary-dark); }
.ts-bn-content.is-soft .ts-bn-cta { background: var(--ts-bn-primary); color: var(--ts-bn-on-dark); }
.ts-bn-content.is-soft:hover .ts-bn-cta { background: var(--ts-bn-primary-dark); }

/* Mẫu: Nền trắng — kín đáo nhất, vạch xanh bên trái */
.ts-bn-content.is-light { background: var(--ts-bn-surface); border-color: var(--ts-bn-border); box-shadow: inset 4px 0 0 var(--ts-bn-primary); }
.ts-bn-content.is-light .ts-bn-cta { background: var(--ts-bn-primary); color: var(--ts-bn-on-dark); }
.ts-bn-content.is-light:hover .ts-bn-cta { background: var(--ts-bn-primary-dark); }

/* Slot hẹp (điện thoại, hoặc bất kỳ chỗ nào dưới 40rem): xếp dọc, nút rộng hết.
   Container query theo độ rộng slot — khung xem trước "Điện thoại" trong Admin hiện đúng như máy thật. */
@container ts-bn (max-width: 40rem) {
  .ts-bn-content { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 16px 16px 18px; gap: 14px; }
  .ts-bn-title { font-size: 1.1rem; }
  .ts-bn-cta { width: 100%; }
}

/* ───────────────────────────────────────────────── Banner hình ảnh ── */
/* width/height trên <source>/<img> (1200×200 máy tính, 800×400 điện thoại) giữ chỗ trước khi ảnh tải: không giật layout.
   Điểm đổi ảnh là media query của <picture> (48rem = 768px). */
.ts-bn-image { border: 1px solid var(--ts-bn-border); background: var(--ts-bn-soft); line-height: 0; }
.ts-bn-image picture,
.ts-bn-image img { display: block; width: 100%; max-width: 100%; height: auto; }
.ts-bn-image .ts-bn-label {
  position: absolute;
  top: 8px;
  right: 8px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ts-bn-text);
  line-height: 1.4;
}
.ts-bn-image:hover { border-color: var(--ts-bn-primary); }

@media (prefers-reduced-motion: reduce) {
  .ts-bn-cta { transition: none; }
}
@media (forced-colors: active) {
  .ts-bn { border: 1px solid CanvasText; }
  .ts-bn-cta { border: 1px solid ButtonText; }
}