/* =============================================================================
   BSGD Brand Kit — Bộ nhận diện thương hiệu Bộ môn Y học Gia đình (bsgdtphcm.vn)
   Màu và hình lấy mẫu trực tiếp từ logo gốc: header-logo-custom1.png
     xanh lá #00944a (cây) · đỏ #cf1313 (tim) · chữ serif xanh đậm #0a5c31
   Dùng: <link rel="stylesheet" href="/brand/css/bsgd-brand.css">
   ============================================================================= */

:root {
  /* ── Màu thương hiệu ── */
  --bsgd-green:        #00944a;
  --bsgd-green-light:  #16b563;
  --bsgd-green-dark:   #0a5c31;
  --bsgd-green-deep:   #063d22;
  --bsgd-green-50:     #eaf8f0;
  --bsgd-green-100:    #cfeedd;
  --bsgd-red:          #cf1313;
  --bsgd-red-dark:     #a30f0f;
  --bsgd-red-50:       #fdecec;

  /* ── Trung tính ── */
  --bsgd-cream:        #f7faf8;
  --bsgd-white:        #ffffff;
  --bsgd-ink:          #12261e;
  --bsgd-muted:        #5b7268;
  --bsgd-line:         #dbe7e1;

  /* ── Chữ ── */
  --bsgd-font-display: 'Playfair Display', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --bsgd-font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bsgd-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Hình khối ── */
  --bsgd-radius:       14px;
  --bsgd-radius-sm:    10px;
  --bsgd-radius-pill:  999px;
  --bsgd-shadow:       0 6px 24px rgba(6, 61, 34, .10);
  --bsgd-shadow-sm:    0 2px 8px rgba(6, 61, 34, .08);
  --bsgd-gradient:     linear-gradient(135deg, var(--bsgd-green-deep) 0%, var(--bsgd-green) 62%, #0aa85a 100%);
  --bsgd-gradient-soft: linear-gradient(180deg, var(--bsgd-green-50) 0%, var(--bsgd-white) 100%);
  --bsgd-ring:         0 0 0 3px rgba(0, 148, 74, .22);
}

/* ── Khối bao ngoài ── */
.bsgd {
  font-family: var(--bsgd-font-body);
  color: var(--bsgd-ink);
  background: var(--bsgd-cream);
  line-height: 1.55;
}
.bsgd-serif { font-family: var(--bsgd-font-display); letter-spacing: .2px; }

/* ── Logo ── */
.bsgd-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.bsgd-logo img { height: 44px; width: auto; display: block; }
.bsgd-logo--sm img { height: 32px; }
.bsgd-logo--lg img { height: 64px; }
.bsgd-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.bsgd-logo__text b { font-family: var(--bsgd-font-display); font-size: 17px; color: var(--bsgd-green-dark); }
.bsgd-logo__text span { font-size: 11.5px; color: var(--bsgd-muted); letter-spacing: .5px; text-transform: uppercase; }
.bsgd-logo--on-dark .bsgd-logo__text b { color: #fff; }
.bsgd-logo--on-dark .bsgd-logo__text span { color: rgba(255,255,255,.78); }

/* ── Thanh đầu trang ── */
.bsgd-header {
  background: var(--bsgd-white);
  border-bottom: 1px solid var(--bsgd-line);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.bsgd-header--brand { background: var(--bsgd-gradient); border-bottom: none; color: #fff; }
.bsgd-header--brand .bsgd-logo__text b { color: #fff; }
.bsgd-header__spacer { flex: 1; }
.bsgd-header__accent { height: 4px; background: linear-gradient(90deg, var(--bsgd-green) 0%, var(--bsgd-green) 62%, var(--bsgd-red) 62%, var(--bsgd-red) 100%); }

/* ── Nút ── */
.bsgd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--bsgd-font-body);
  padding: 12px 18px; border-radius: var(--bsgd-radius-sm);
  border: 1.5px solid var(--bsgd-line); background: var(--bsgd-white); color: var(--bsgd-ink);
  cursor: pointer; text-decoration: none; transition: .16s ease;
}
.bsgd-btn:hover { border-color: var(--bsgd-green); color: var(--bsgd-green-dark); }
.bsgd-btn:focus-visible { outline: none; box-shadow: var(--bsgd-ring); }
.bsgd-btn--primary { background: var(--bsgd-green); border-color: var(--bsgd-green); color: #fff; }
.bsgd-btn--primary:hover { background: var(--bsgd-green-dark); border-color: var(--bsgd-green-dark); color: #fff; }
.bsgd-btn--red { background: var(--bsgd-red); border-color: var(--bsgd-red); color: #fff; }
.bsgd-btn--red:hover { background: var(--bsgd-red-dark); border-color: var(--bsgd-red-dark); color: #fff; }
.bsgd-btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.bsgd-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.bsgd-btn--sm { padding: 8px 12px; font-size: 13.5px; }
.bsgd-btn--block { width: 100%; }
.bsgd-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Thẻ ── */
.bsgd-card {
  background: var(--bsgd-white); border: 1px solid var(--bsgd-line);
  border-radius: var(--bsgd-radius); box-shadow: var(--bsgd-shadow-sm);
  padding: 16px;
}
.bsgd-card--brand { box-shadow: var(--bsgd-shadow); border-top: 4px solid var(--bsgd-green); }
.bsgd-card--dark { background: var(--bsgd-gradient); color: #fff; border: none; }
.bsgd-card__title { font-family: var(--bsgd-font-display); font-size: 18px; color: var(--bsgd-green-dark); margin: 0 0 6px; }
.bsgd-card--dark .bsgd-card__title { color: #fff; }

/* ── Nhãn / huy hiệu ── */
.bsgd-tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--bsgd-radius-pill);
  font-size: 12px; font-weight: 600; background: var(--bsgd-green-50); color: var(--bsgd-green-dark);
}
.bsgd-tag--red { background: var(--bsgd-red-50); color: var(--bsgd-red-dark); }
.bsgd-tag--line { background: transparent; border: 1px solid var(--bsgd-line); color: var(--bsgd-muted); }
.bsgd-tag--white { background: rgba(255,255,255,.16); color: #fff; }

/* ── Dải nhấn, đường kẻ, khối anh hùng ── */
.bsgd-rule { height: 1px; background: var(--bsgd-line); border: 0; margin: 14px 0; }
.bsgd-hero {
  background: var(--bsgd-gradient); color: #fff; border-radius: var(--bsgd-radius);
  padding: 22px; position: relative; overflow: hidden;
}
.bsgd-hero__title { font-family: var(--bsgd-font-display); font-size: 24px; margin: 0 0 6px; }
.bsgd-hero__sub { margin: 0; opacity: .9; font-size: 14px; }
.bsgd-hero--image { background-size: cover; background-position: center; }

/* ── Chân trang ── */
.bsgd-footer {
  background: var(--bsgd-green-deep); color: rgba(255,255,255,.86);
  padding: 18px 16px; font-size: 13px;
}
.bsgd-footer a { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.5); }
.bsgd-footer__accent { height: 4px; background: linear-gradient(90deg, var(--bsgd-green) 0 60%, var(--bsgd-red) 60% 100%); }

/* ── Tiện ích ── */
.bsgd-u-green { color: var(--bsgd-green); }
.bsgd-u-red { color: var(--bsgd-red); }
.bsgd-u-muted { color: var(--bsgd-muted); }
.bsgd-u-center { text-align: center; }
.bsgd-u-bg-cream { background: var(--bsgd-cream); }
.bsgd-u-bg-green { background: var(--bsgd-green-50); }
.bsgd-u-mt { margin-top: 14px; } .bsgd-u-mb { margin-bottom: 14px; }
.bsgd-swatch { display: inline-block; width: 74px; height: 52px; border-radius: 10px; border: 1px solid rgba(0,0,0,.06); }

/* ── Chế độ tối ── */
@media (prefers-color-scheme: dark) {
  .bsgd-dark-auto.bsgd { background: #0d1a16; color: #e8f1ed; }
  .bsgd-dark-auto .bsgd-card { background: #12241d; border-color: #1f3a30; }
  .bsgd-dark-auto .bsgd-card__title { color: #7fd6a6; }
  .bsgd-dark-auto .bsgd-header { background: #0d1a16; border-color: #1f3a30; }
}