/* BongdaNET Header — Compact + Minimalist + Theme-aware
 * v1.3 — gradient brand colors (live: green, hero: orange) configurable via admin.
 * CSS custom properties allow inline override from PHP.
 */

:root {
  --bdn-live-c1: #39EE88;
  --bdn-live-c2: #AEE580;
  --bdn-live-text: #0d3d20;
  --bdn-hero-c1: #FF8624;
  --bdn-hero-c2: #FACE60;
  --bdn-hero-text: #3a1f00;
  --bdn-ft-bg: #0066cc;
}

.bdn-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ============ LAYER 1 — LIVE BAR (compact) ============ */
.bdn-live-bar {
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--bdn-live-text);
}
.bdn-live-bar.state-ft   { background: var(--bdn-ft-bg); color: #fff; }
.bdn-live-competition {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 10px 2px 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
a.bdn-live-competition:hover { background: rgba(0,0,0,0.32); }
.bdn-live-competition-logo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  flex-shrink: 0;
}
.bdn-live-competition-name {
  letter-spacing: 0.2px;
}
.bdn-live-cta {
  font-weight: 700;
  font-size: 13px;
  padding: 4px 2px;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
  opacity: 0.95;
}
.bdn-live-cta:hover { opacity: 1; }
.bdn-live-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.bdn-live-sponsor-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  opacity: 0.9;
  text-transform: uppercase;
}
.bdn-live-sponsor-logo {
  height: 22px;
  width: auto;
  max-width: 110px;
  border-radius: 2px;
  display: block;
}
a.bdn-live-sponsor:hover { background: rgba(0,0,0,0.32); }
.state-ft .bdn-live-sponsor { background: rgba(255,255,255,0.22); }
/* Dùng cho .bdn-wc-news-dot (pulse chấm tin). */
@keyframes bdn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ---- World Cup Bar — reuse .bdn-live-* + state-ft (xanh "Xem Highlight") ----
 * Layout dọc 3 hàng: Row1 = giải đấu | CTA · Row2 = tin (mỗi tin 1 hàng) · Row3 = sponsor.
 */
.bdn-wc-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  font-weight: 500;
}
.bdn-wc-row { display: flex; min-width: 0; }
/* Row 1 — giải đấu + CTA Soi kèo, canh giữa */
.bdn-wc-row-top {
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bdn-wc-cta { font-size: 14px; }
/* Logo + tên giải to hơn (ngang tầm khối sponsor) — chỉ trong WC Bar */
.bdn-wc-bar .bdn-live-competition {
  font-size: 15px;
  padding: 3px 12px 3px 5px;
}
.bdn-wc-bar .bdn-live-competition-logo {
  width: 28px;
  height: 28px;
}
/* Row 2 — mỗi tin 1 hàng (xếp dọc), canh giữa */
.bdn-wc-news {
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.bdn-wc-news-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  opacity: 0.95;
}
.bdn-wc-news-item:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bdn-wc-news-dot {
  width: 6px; height: 6px;
  flex-shrink: 0;
  background: currentColor;
  border-radius: 50%;
  animation: bdn-pulse 1.4s infinite;
}
/* Kèo thơm — item #3 in news row (v1.8.10). Bright amber-gold for high contrast on blue bar. */
.bdn-wc-news-hot {
  color: #ffc24a;
  background: rgba(255,194,74,0.12);
  border-radius: 4px;
  padding: 1px 6px 1px 4px;
}
.bdn-wc-news-hot:hover {
  background: rgba(255,194,74,0.22);
}
.bdn-wc-hot-icon {
  display: inline-block;
  font-style: normal;
  margin-right: 3px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}
/* Row 3 — logo sponsor, canh giữa */
.bdn-wc-row-sponsor { align-items: center; justify-content: center; }

/* ============ MOBILE ============ */
@media (max-width: 768px) {
  .bdn-live-bar { padding: 4px 0; font-size: 11.5px; }
}

/* ============ LAYER 4 — HOT STRIP (smaller, push-rank internal links) ============ */
.bdn-hot-strip {
  position: relative;
  padding: 6px 0;
  background: transparent;
  border-bottom: 1px solid rgba(128,128,128,0.12);
}
.bdn-hot-strip-scroll {
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.bdn-hot-strip-scroll::-webkit-scrollbar { display: none; }
.bdn-hot-strip-inner {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  padding-right: 26px;
}
.bdn-hot-strip-label {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  padding-right: 2px;
  user-select: none;
}
.bdn-hot-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  text-decoration: none;
  color: #b91c1c; /* fallback when --bdn-hero-c1 absent */
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bdn-hot-link:hover,
.bdn-hot-link:focus-visible {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
  color: #991b1b;
  text-decoration: none;
}

/* Reuse league-strip arrow pattern but with hot- prefix */
.bdn-hot-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
  background: transparent;
  opacity: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s, color 0.15s;
  pointer-events: none;
}
.bdn-hot-arrow-right { right: 0; }
.bdn-hot-arrow-left  { left: 0; }
.bdn-hot-strip:hover .bdn-hot-arrow,
.bdn-hot-strip:focus-within .bdn-hot-arrow {
  opacity: 0.55;
  pointer-events: auto;
}
.bdn-hot-strip:hover .bdn-hot-arrow:hover { opacity: 1; color: #b91c1c; }

@media (max-width: 480px) {
  .bdn-hot-strip { padding: 5px 0; }
  .bdn-hot-link { font-size: 10.5px; padding: 4px 7px; }
  .bdn-hot-strip-label { font-size: 12px; }
  .bdn-hot-arrow { width: 20px; font-size: 12px; }
}

/* ============ SOI KÈO GIẢI ĐẤU KHÁC (v1.12.0) — chip strip per league ============
   Dải chip các giải có bài soi kèo trong 72h tới → link section trên hub.
   Reuse hot/league scroll-arrow pattern, namespace .bdn-sk-*. */
.bdn-sk-bar {
  position: relative;
  padding: 6px 0;
  background: transparent;
  border-bottom: 1px solid rgba(128,128,128,0.12);
}
/* Hàng 1 — label đứng riêng 1 dòng, canh giữa */
.bdn-sk-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
/* Hàng 2 — chip wrap xuống dòng, canh giữa, hiện full (không scroll/slide) */
.bdn-sk-inner {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.bdn-sk-label {
  flex: 0 0 auto;
  /* Khớp font với CTA "Soi kèo World Cup 2026" (.bdn-wc-cta + .bdn-live-cta):
     cùng family kế thừa theme, 14px / weight 700. */
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.95;
}
.bdn-sk-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.22);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bdn-sk-chip:hover,
.bdn-sk-chip:focus-visible {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.45);
  color: #1e3a8a;
  text-decoration: none;
}
.bdn-sk-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.18);
  color: inherit;
}
/* Kèo thơm CLB — row riêng 1 dòng (như item kèo thơm trên WC Bar), canh giữa. */
.bdn-sk-keothom-row {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}
/* Kèo thơm CLB pill — nổi bật đỏ-cam, tách khỏi chip giải (xanh). */
.bdn-sk-keothom {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.30);
  font-weight: 700;
}
.bdn-sk-keothom:hover,
.bdn-sk-keothom:focus-visible {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.50);
}
.bdn-sk-kt-tag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.20);
}
.bdn-sk-kt-title {
  max-width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .bdn-sk-bar { padding: 5px 0; }
  .bdn-sk-chip { font-size: 10.5px; padding: 4px 8px; }
  .bdn-sk-kt-title { max-width: 220px; }
  .bdn-sk-label { font-size: 11px; }
}

/* ============ DARK MODE (v1.12.1) — text trắng cho Soi-kèo strip + Hot strip ============
   Theme bật dark qua [data-theme=dark] trên ancestor (đồng bộ bongdanet-wc2026).
   Chip/link gốc dùng màu tối (#1d4ed8 / #b91c1c) → chìm trên nền tối → đổi text trắng,
   giữ pill nền màu (xanh league / đỏ hot) để vẫn nhận diện. Chỉ override màu (visual-only). */
[data-theme=dark] .bdn-sk-label {
  color: #f1f5f9;
  opacity: 1;
}
[data-theme=dark] .bdn-sk-chip {
  color: #fff;
  background: rgba(37, 99, 235, 0.30);
  border-color: rgba(96, 165, 250, 0.55);
}
[data-theme=dark] .bdn-sk-chip:hover,
[data-theme=dark] .bdn-sk-chip:focus-visible {
  color: #fff;
  background: rgba(37, 99, 235, 0.45);
  border-color: rgba(96, 165, 250, 0.75);
}
[data-theme=dark] .bdn-sk-count {
  background: rgba(96, 165, 250, 0.35);
}
[data-theme=dark] .bdn-sk-keothom {
  color: #fff;
  background: rgba(239, 68, 68, 0.30);
  border-color: rgba(248, 113, 113, 0.55);
}
[data-theme=dark] .bdn-sk-keothom:hover,
[data-theme=dark] .bdn-sk-keothom:focus-visible {
  color: #fff;
  background: rgba(239, 68, 68, 0.45);
  border-color: rgba(248, 113, 113, 0.75);
}
[data-theme=dark] .bdn-sk-kt-tag { background: rgba(248, 113, 113, 0.35); }

[data-theme=dark] .bdn-hot-strip-label { color: #f1f5f9; }
[data-theme=dark] .bdn-hot-link {
  color: #fff;
  background: rgba(239, 68, 68, 0.30);
  border-color: rgba(248, 113, 113, 0.55);
}
[data-theme=dark] .bdn-hot-link:hover,
[data-theme=dark] .bdn-hot-link:focus-visible {
  color: #fff;
  background: rgba(239, 68, 68, 0.45);
  border-color: rgba(248, 113, 113, 0.75);
}
[data-theme=dark] .bdn-hot-strip:hover .bdn-hot-arrow:hover { color: #fca5a5; }

/* ============ ARTICLE IMAGE ASPECT FIX (v1.8.11) ============
   Sunbeam-published WC2026 articles (Soi kèo / Prematch / Match report) insert images
   via markdown → the rendered <figure class="wp-block-image"><img width height> has NO
   `wp-image-{id}` class. The theme's height-normalising rule is scoped to that class
   (`:where(img[class*=wp-image-]){height:auto}`), so it misses these images → the
   width/height HTML attributes distort the picture (vertical stretch).
   Force correct aspect ratio for ALL Gutenberg content images regardless of that class. */
figure.wp-block-image img,
.entry-content figure img,
.post-content figure img,
.entry-content > img,
.post-content > img {
  height: auto !important;
  max-width: 100%;
}