/* Hallmark · macrostructure: Index-First · nav: N3 · footer: Ft3 · hero: H9 · theme: doofootball-emerald · knobs: rail=240px, index=compact, accent=outline · pre-emit: P5 H5 E5 S5 R5 V5 */

:root {
  --dfb-bg: oklch(0.16 0.012 152);
  --dfb-text: oklch(0.94 0.01 152);
  --dfb-text-muted: oklch(0.72 0.012 152);
  --dfb-accent: oklch(0.72 0.17 152);
  --dfb-accent-ink: oklch(0.16 0.03 152);
  --dfb-border: oklch(0.28 0.014 152);
  --dfb-surface: oklch(0.20 0.012 152);
  --dfb-surface-alt: oklch(0.23 0.013 152);
  --dfb-focus: oklch(0.72 0.17 152);

  --dfb-font-display: "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dfb-font-body: "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dfb-font-mono: "IBM Plex Mono", monospace;

  --dfb-base-size: 16px;
  --dfb-lh-body: 1.6;
  --dfb-lh-display: 1.1;

  --dfb-space-1: 8px;
  --dfb-space-2: 16px;
  --dfb-space-3: 24px;
  --dfb-space-4: 32px;
  --dfb-space-5: 40px;
  --dfb-space-6: 48px;

  --dfb-radius: 4px;
  --dfb-max-width: 1280px;
  --dfb-measure: 68ch;

  --dfb-ease: cubic-bezier(0.2, 0, 0, 1);
  --dfb-duration: 160ms;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: var(--dfb-bg);
  color: var(--dfb-text);
  font-family: var(--dfb-font-body);
  font-size: var(--dfb-base-size);
  line-height: var(--dfb-lh-body);
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dfb-duration) var(--dfb-ease), border-color var(--dfb-duration) var(--dfb-ease);
}

ul {
  list-style: none;
}

.dfb-mono {
  font-family: var(--dfb-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.dfb-text-center {
  text-align: center;
}

.dfb-text-right {
  text-align: right;
}

.dfb-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: var(--dfb-max-width);
  margin-inline: auto;
  min-height: 100vh;
}

/* Section 1: Side rail N3 */
.dfb-rail {
  grid-column: 1;
  grid-row: 1 / span 9;
  border-right: 1px solid var(--dfb-border);
  padding: var(--dfb-space-3) var(--dfb-space-2);
  background-color: var(--dfb-bg);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-4);
}

.dfb-brand {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-1);
}

.dfb-brand-header {
  display: flex;
  align-items: center;
  gap: var(--dfb-space-1);
}

.dfb-logo-mark {
  flex-shrink: 0;
}

.dfb-brand-title {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: var(--dfb-lh-display);
  color: var(--dfb-text);
  letter-spacing: 0.5px;
}

.dfb-brand-tagline {
  font-family: var(--dfb-font-mono);
  font-size: 12px;
  color: var(--dfb-text-muted);
  white-space: nowrap;
}

.dfb-nav {
  display: flex;
  flex-direction: column;
}

.dfb-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-1);
}

.dfb-nav-link {
  display: block;
  padding: var(--dfb-space-1) var(--dfb-space-2);
  border: 1px solid transparent;
  border-radius: var(--dfb-radius);
  font-size: 15px;
  font-weight: 600;
  color: var(--dfb-text-muted);
  white-space: nowrap;
}

.dfb-nav-link:hover {
  border-color: var(--dfb-accent);
  color: var(--dfb-accent);
}

.dfb-nav-link:focus-visible {
  outline: 2px solid var(--dfb-focus);
  outline-offset: 1px;
}

.dfb-nav-link:active {
  border-color: var(--dfb-text);
  color: var(--dfb-text);
}

/* Section 2: Top bar */
.dfb-topbar {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dfb-space-2);
  padding: var(--dfb-space-2) var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--dfb-space-1);
  font-size: 13px;
  color: var(--dfb-text-muted);
  white-space: nowrap;
}

.dfb-breadcrumb-sep {
  color: var(--dfb-border);
}

.dfb-breadcrumb-current {
  color: var(--dfb-text);
}

.dfb-search-box {
  display: flex;
  align-items: center;
  gap: var(--dfb-space-1);
  min-width: 0;
}

.dfb-search-input {
  background-color: var(--dfb-surface);
  border: 1px solid var(--dfb-border);
  color: var(--dfb-text);
  font-family: var(--dfb-font-body);
  font-size: 14px;
  padding: var(--dfb-space-1) var(--dfb-space-2);
  border-radius: var(--dfb-radius);
  min-width: 220px;
  transition: border-color var(--dfb-duration) var(--dfb-ease), color var(--dfb-duration) var(--dfb-ease);
}

.dfb-search-input:focus-visible {
  outline: 2px solid var(--dfb-focus);
  outline-offset: 1px;
}

.dfb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dfb-space-1) var(--dfb-space-2);
  background-color: transparent;
  border: 1px solid var(--dfb-accent);
  color: var(--dfb-accent);
  border-radius: var(--dfb-radius);
  font-family: var(--dfb-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dfb-duration) var(--dfb-ease), color var(--dfb-duration) var(--dfb-ease);
}

.dfb-btn:hover {
  border-color: var(--dfb-text);
  color: var(--dfb-text);
}

.dfb-btn:focus-visible {
  outline: 2px solid var(--dfb-focus);
  outline-offset: 1px;
}

.dfb-btn:active {
  border-color: var(--dfb-border);
  color: var(--dfb-text-muted);
}

.dfb-btn:disabled {
  border-color: var(--dfb-border);
  color: var(--dfb-text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

/* Section 3: Hero H9 */
.dfb-hero {
  grid-column: 2;
  padding: var(--dfb-space-4) var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

/* V2 (13/09/2026): san bong trai het chieu ngang khoi hero, khong con
   cot hep 320px. Chi 1 cot, san nam TREN, chu (h1/desc) nam DUOI. */
.dfb-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dfb-space-3);
  align-items: start;
}

.dfb-hero-artwork {
  border: 1px solid var(--dfb-border);
  background-color: var(--dfb-surface);
  border-radius: var(--dfb-radius);
  padding: var(--dfb-space-3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.dfb-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-2);
  max-width: var(--dfb-measure);
}

.dfb-hero-title {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 31px;
  line-height: var(--dfb-lh-display);
  color: var(--dfb-text);
  overflow-wrap: anywhere;
}

.dfb-hero-desc {
  font-size: 16px;
  line-height: var(--dfb-lh-body);
  color: var(--dfb-text-muted);
}

/* Shared section header & hanging heading */
.dfb-section-header {
  margin-bottom: var(--dfb-space-2);
}

.dfb-section-title {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: var(--dfb-lh-display);
  color: var(--dfb-text);
  border-left: 3px solid var(--dfb-accent);
  padding-left: var(--dfb-space-1);
}

/* Sample data badge (khong dung trong HTML hien tai, giu lai vi ngoai scope
   go bo .dfb-sample cua vong nay - xem PLAN.md muc 8 dong 14/09/2026) */
.dfb-sample-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--dfb-accent);
  border: 1px solid var(--dfb-border);
  background-color: var(--dfb-bg);
  padding: 2px var(--dfb-space-1);
  border-radius: var(--dfb-radius);
  margin-bottom: var(--dfb-space-2);
  white-space: nowrap;
}

/* Table styles */
.dfb-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dfb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dfb-table th {
  background-color: var(--dfb-surface-alt);
  color: var(--dfb-text-muted);
  font-weight: 600;
  padding: var(--dfb-space-1) var(--dfb-space-2);
  border-bottom: 1px solid var(--dfb-border);
  text-align: left;
  white-space: nowrap;
}

.dfb-table td {
  padding: var(--dfb-space-1) var(--dfb-space-2);
  border-bottom: 1px solid var(--dfb-border);
  color: var(--dfb-text);
  white-space: nowrap;
}

.dfb-table tr:last-child td {
  border-bottom: none;
}

.dfb-status-pill {
  display: inline-block;
  font-size: 12px;
  padding: 2px var(--dfb-space-1);
  border: 1px solid var(--dfb-border);
  border-radius: var(--dfb-radius);
  color: var(--dfb-text-muted);
  white-space: nowrap;
}

/* Section 4: Matches index */
.dfb-matches {
  grid-column: 2;
  padding: var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

/* Section 5: Filter chips */
.dfb-filter {
  grid-column: 2;
  padding: var(--dfb-space-2) var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-filter-container {
  display: flex;
  align-items: center;
  gap: var(--dfb-space-2);
  flex-wrap: wrap;
}

.dfb-filter-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dfb-text-muted);
  white-space: nowrap;
}

.dfb-filter-group {
  display: flex;
  gap: var(--dfb-space-1);
  flex-wrap: wrap;
}

.dfb-filter-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dfb-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dfb-space-1) var(--dfb-space-2);
  border: 1px solid var(--dfb-border);
  border-radius: var(--dfb-radius);
  background-color: var(--dfb-surface);
  font-size: 13px;
  color: var(--dfb-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dfb-duration) var(--dfb-ease), color var(--dfb-duration) var(--dfb-ease);
}

.dfb-filter-chip:hover {
  border-color: var(--dfb-accent);
  color: var(--dfb-accent);
}

.dfb-filter-radio:checked + .dfb-filter-chip {
  border-color: var(--dfb-accent);
  color: var(--dfb-accent);
}

.dfb-filter-radio:focus-visible + .dfb-filter-chip {
  outline: 2px solid var(--dfb-focus);
  outline-offset: 1px;
}

/* Section 6: Right-column dual cards */
.dfb-sidecards {
  grid-column: 2;
  padding: var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dfb-space-3);
}

.dfb-card {
  border: 1px solid var(--dfb-border);
  border-radius: var(--dfb-radius);
  padding: var(--dfb-space-2);
  background-color: var(--dfb-bg);
}

.dfb-card-title {
  font-family: var(--dfb-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--dfb-text);
  margin-bottom: var(--dfb-space-1);
}

.dfb-table-compact th,
.dfb-table-compact td {
  padding: var(--dfb-space-1);
  font-size: 13px;
}

/* Section 7: Groups Overview */
.dfb-groups {
  grid-column: 2;
  padding: var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-groups-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dfb-space-2);
}

.dfb-group-box {
  border: 1px solid var(--dfb-border);
  border-radius: var(--dfb-radius);
  padding: var(--dfb-space-1);
  background-color: var(--dfb-bg);
}

.dfb-group-title {
  font-family: var(--dfb-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--dfb-text);
  padding: 4px var(--dfb-space-1);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-table-mini th,
.dfb-table-mini td {
  padding: 4px var(--dfb-space-1);
  font-size: 12px;
}

/* Section 8: News */
.dfb-news {
  grid-column: 2;
  padding: var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-news-list {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-2);
}

.dfb-news-item {
  border: 1px solid var(--dfb-border);
  border-radius: var(--dfb-radius);
  padding: var(--dfb-space-2);
  background-color: var(--dfb-surface);
}

.dfb-news-item-title {
  font-family: var(--dfb-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--dfb-text);
  margin-bottom: var(--dfb-space-1);
}

.dfb-news-item-summary {
  font-size: 14px;
  color: var(--dfb-text-muted);
  line-height: var(--dfb-lh-body);
}

/* Section 9: Footer Ft3 */
.dfb-footer {
  grid-column: 2;
  padding: var(--dfb-space-4) var(--dfb-space-3) var(--dfb-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-3);
}

.dfb-footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dfb-space-3);
}

.dfb-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-1);
}

.dfb-footer-heading {
  font-family: var(--dfb-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--dfb-text);
  border-bottom: 1px solid var(--dfb-border);
  padding-bottom: var(--dfb-space-1);
}

.dfb-footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-1);
}

.dfb-footer-link {
  font-size: 13px;
  color: var(--dfb-text-muted);
  white-space: nowrap;
}

.dfb-footer-link:hover {
  border-color: var(--dfb-accent);
  color: var(--dfb-accent);
}

.dfb-footer-link:focus-visible {
  outline: 2px solid var(--dfb-focus);
  outline-offset: 1px;
}

.dfb-footer-bottom {
  border-top: 1px solid var(--dfb-border);
  padding-top: var(--dfb-space-2);
  display: flex;
  justify-content: flex-start;
}

.dfb-footer-domain {
  font-family: var(--dfb-font-mono);
  font-size: 12px;
  color: var(--dfb-text-muted);
  white-space: nowrap;
}

/* Responsive queries */
@media (max-width: 1024px) {
  .dfb-layout {
    display: block;
    width: 100%;
  }

  .dfb-rail {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--dfb-border);
    padding: var(--dfb-space-2);
  }

  .dfb-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dfb-topbar,
  .dfb-hero,
  .dfb-matches,
  .dfb-filter,
  .dfb-sidecards,
  .dfb-groups,
  .dfb-news,
  .dfb-footer {
    padding-inline: var(--dfb-space-2);
  }

  .dfb-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dfb-groups-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .dfb-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dfb-search-input {
    min-width: 0;
    width: 100%;
  }

  .dfb-dual-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dfb-groups-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dfb-footer-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }

  .dfb-pitch-dot-marker,
  .dfb-pitch-ball {
    animation: none !important;
    transform: none !important;
  }
}
/* ==== Phan mo rong bo sung boi fs-build (ban A): content, pagehead, widget, faq ==== */

.dfb-pagehead {
  grid-column: 2;
  padding: var(--dfb-space-4) var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-2);
  max-width: var(--dfb-measure);
}

.dfb-pagehead-title {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: var(--dfb-lh-display);
  color: var(--dfb-text);
  overflow-wrap: anywhere;
}

.dfb-pagehead-desc {
  font-size: 16px;
  line-height: var(--dfb-lh-body);
  color: var(--dfb-text-muted);
}

/* Section wrapper dung chung cho noi dung than bai + widget */
.dfb-section {
  grid-column: 2;
  padding: var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

/* Khoi than bai do agyx sinh: h2/h3/p/ul/li/a/strong */
.dfb-content {
  max-width: var(--dfb-measure);
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-2);
}

.dfb-content h2 {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: var(--dfb-lh-display);
  color: var(--dfb-text);
  border-left: 3px solid var(--dfb-accent);
  padding-left: var(--dfb-space-1);
  margin-top: var(--dfb-space-2);
}

.dfb-content h3 {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--dfb-text);
}

.dfb-content p {
  font-size: 16px;
  line-height: var(--dfb-lh-body);
  color: var(--dfb-text-muted);
}

.dfb-content ul {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-1);
  padding-left: var(--dfb-space-3);
  list-style: disc;
}

.dfb-content li {
  font-size: 16px;
  line-height: var(--dfb-lh-body);
  color: var(--dfb-text-muted);
}

.dfb-content strong {
  color: var(--dfb-text);
  font-weight: 700;
}

.dfb-content a {
  color: var(--dfb-accent);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-content a:hover {
  border-color: var(--dfb-accent);
}

.dfb-content a:focus-visible {
  outline: 2px solid var(--dfb-focus);
  outline-offset: 1px;
}

/* Widget Scorebat: wrapper chong CLS, dong khung sang trong theme toi */
.dfb-widget {
  grid-column: 2;
  padding: var(--dfb-space-2) var(--dfb-space-3) var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-widget-head {
  max-width: var(--dfb-measure);
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-1);
  margin-bottom: var(--dfb-space-2);
}

.dfb-widget-title {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: var(--dfb-lh-display);
  color: var(--dfb-text);
  border-left: 3px solid var(--dfb-accent);
  padding-left: var(--dfb-space-1);
}

.dfb-widget-desc {
  font-size: 15px;
  line-height: var(--dfb-lh-body);
  color: var(--dfb-text-muted);
  max-width: var(--dfb-measure);
}

/* Vung cuon co bien ro rang: wrapper la cua so cuon, iframe ben trong duoc
   keo dai ra 2000px (V3, 14/09/2026 - user yeu cau de cuon xem them noi
   dung, token/loader/allow/class cua Scorebat GIU NGUYEN, chi doi height).
   Cua so hien thi mac dinh cua wrapper la 760px (dung bang chieu cao goc
   cua snippet Scorebat) de nguoi xem cuon duoc them ben trong iframe dai
   hon. Van giu cuon doc (overflow-y:auto + overscroll-behavior:contain +
   -webkit-overflow-scrolling:touch) it phong doi tuong tac.
   >>> DOI CHIEU CAO CUA SO: CHI can doi gia tri bien --dfb-widget-frame-h
   ngay duoi day (1 dong duy nhat), moi noi khac (kem media 768px) deu doc
   lai bien nay, khong phai sua them cho nao. */
.dfb-widget-frame {
  --dfb-widget-frame-h: 760px;
  border: 1px solid var(--dfb-border);
  border-radius: var(--dfb-radius);
  padding: var(--dfb-space-2);
  background-color: var(--dfb-surface);
  width: 100%;
  max-width: 640px;
  height: var(--dfb-widget-frame-h);
  min-height: var(--dfb-widget-frame-h);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dfb-widget-frame iframe {
  display: block;
  width: 100% !important;
  height: 2000px !important;
  border: none;
  border-radius: var(--dfb-radius);
}

@media (max-width: 768px) {
  .dfb-widget-frame {
    max-width: 100%;
    /* man hinh nho: khong qua 760px (min(760px, 72vh)), nhung khong duoi
       440px de khung khong bi bop qua chat. clamp() lam ca hai viec cung
       mot luc: san = 72vh, tran o 760px, san toi thieu 440px. */
    --dfb-widget-frame-h: clamp(440px, 72vh, 760px);
  }
}

/* FAQ */
.dfb-faq {
  grid-column: 2;
  padding: var(--dfb-space-3);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-2);
  max-width: var(--dfb-measure);
}

.dfb-faq-item {
  border: 1px solid var(--dfb-border);
  border-radius: var(--dfb-radius);
  background-color: var(--dfb-surface);
  padding: var(--dfb-space-2);
}

.dfb-faq-q {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--dfb-text);
  margin-bottom: var(--dfb-space-1);
}

.dfb-faq-a {
  font-size: 15px;
  line-height: var(--dfb-lh-body);
  color: var(--dfb-text-muted);
}

/* footer external link (DMCA) */
.dfb-footer-extlink {
  font-size: 12px;
  color: var(--dfb-text-muted);
}

.dfb-footer-extlink:hover {
  border-color: var(--dfb-accent);
  color: var(--dfb-accent);
}

@media (max-width: 1024px) {
  .dfb-pagehead,
  .dfb-section,
  .dfb-widget,
  .dfb-faq {
    padding-inline: var(--dfb-space-2);
  }
}

/* Khoi CSS du lieu mau (.dfb-sample, .dfb-matchrow-*, .dfb-statbar-*,
   .dfb-standings-*, .dfb-scorers-*, .dfb-featured-*) da bi GO BO 14/09/2026:
   user chu dong yeu cau go het 12 khoi du lieu mau khoi 9 trang (V2). Khong
   con dung trong HTML, xoa het CSS chet di kem. CTA header buttons va hero
   pitch o duoi day KHONG doi. */

.dfb-topbar-row {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dfb-space-2);
  border-bottom: 1px solid var(--dfb-border);
}

.dfb-topbar-row .dfb-topbar {
  border-bottom: none;
  flex: 1;
  min-width: 0;
}

.dfb-cta-bar {
  display: flex;
  align-items: center;
  gap: var(--dfb-space-1);
  padding: var(--dfb-space-2) var(--dfb-space-3);
  flex-shrink: 0;
}

.dfb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--dfb-space-1) var(--dfb-space-2);
  border-radius: var(--dfb-radius);
  font-family: var(--dfb-font-body);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--dfb-accent);
  transition: background-color var(--dfb-duration) var(--dfb-ease), border-color var(--dfb-duration) var(--dfb-ease), color var(--dfb-duration) var(--dfb-ease), opacity var(--dfb-duration) var(--dfb-ease);
}

.dfb-cta-primary {
  background-color: var(--dfb-accent);
  color: var(--dfb-accent-ink);
}

.dfb-cta-primary:hover {
  background-color: var(--dfb-text);
  border-color: var(--dfb-text);
}

.dfb-cta-primary:focus-visible {
  outline: 2px solid var(--dfb-focus);
  outline-offset: 2px;
}

.dfb-cta-primary:active {
  opacity: 0.85;
}

.dfb-cta-secondary {
  background-color: transparent;
  color: var(--dfb-accent);
}

.dfb-cta-secondary:hover {
  background-color: var(--dfb-surface-alt);
  color: var(--dfb-text);
  border-color: var(--dfb-text);
}

.dfb-cta-secondary:focus-visible {
  outline: 2px solid var(--dfb-focus);
  outline-offset: 2px;
}

.dfb-cta-secondary:active {
  background-color: var(--dfb-surface);
  color: var(--dfb-text-muted);
}

.dfb-pitch {
  flex-direction: column;
  align-items: stretch;
  gap: var(--dfb-space-2);
}

/* V2: san trai het chieu ngang khoi hero (khong con gh ep vao cot 320px),
   du lon de doc ten cau thu ngay tren san o PC 1366. */
.dfb-pitch-svg {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin: 0 auto;
}

.dfb-pitch-num {
  font-family: var(--dfb-font-mono);
  font-size: 5px;
}

.dfb-pitch-name {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 7px;
}

.dfb-pitch-dot-marker {
  transform-box: fill-box;
  transform-origin: center;
  animation: dfb-pitch-dot-pulse 2.4s ease-in-out infinite;
}

.dfb-pitch-ball {
  transform-box: fill-box;
  transform-origin: center;
  animation: dfb-pitch-ball-fly 6s var(--dfb-ease) infinite;
}

.dfb-pitch-teams {
  display: flex;
  justify-content: space-between;
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 13px;
}

.dfb-pitch-team-a {
  color: var(--dfb-accent);
}

.dfb-pitch-team-b {
  color: var(--dfb-text);
}

.dfb-pitch-roster-wrap {
  display: flex;
  flex-direction: column;
}

/* Boc teams + roster + note: luon hien tren desktop, chi thu/mo tren mobile
   (xem media 768px). Gop ca 3 khoi nay vao 1 nut bam de H1 khong bi day
   xa xuong duoi (topbar+CTA da chiem san khong gian truoc hero). */
.dfb-pitch-collapse {
  display: flex;
  flex-direction: column;
  gap: var(--dfb-space-2);
}

/* Checkbox dieu khien thu/mo tren mobile: an khoi mat (khong dung display:none
   vi mot so trinh doc man hinh bo qua), nhung van BAM DUOC qua <label for=...>. */
.dfb-pitch-roster-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nut thu/mo: chi hien tren mobile (xem media 768px ben duoi). Desktop
   roster luon mo, khong can nut. */
.dfb-pitch-roster-toggle {
  display: none;
}

.dfb-pitch-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dfb-space-2);
  font-size: 12px;
}

.dfb-pitch-legend-title {
  font-family: var(--dfb-font-display);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: var(--dfb-space-1);
}

.dfb-pitch-roster {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--dfb-text-muted);
}

.dfb-pitch-roster li {
  display: flex;
  gap: var(--dfb-space-1);
}

.dfb-pitch-roster-num {
  font-family: var(--dfb-font-mono);
  color: var(--dfb-text);
  min-width: 20px;
}

/* .dfb-pitch-note da bi go bo 14/09/2026: user chu dong yeu cau bo dong ghi chu
   ngay/mua giai duoi san bong (V1). Class nay khong con dung trong HTML, xoa
   luon rule de khong con CSS chet. */

@keyframes dfb-pitch-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.2); opacity: 1; }
}

@keyframes dfb-pitch-ball-fly {
  0% { transform: translate(0, 0); opacity: 1; }
  25% { transform: translate(-40px, -45px); opacity: 1; }
  50% { transform: translate(50px, 0); opacity: 1; }
  75% { transform: translate(90px, -20px); opacity: 0.85; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@media (max-width: 1024px) {
  .dfb-topbar-row,
  .dfb-cta-bar {
    padding-inline: var(--dfb-space-2);
  }
}

@media (max-width: 768px) {
  .dfb-topbar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dfb-cta-bar {
    width: 100%;
    padding-top: 0;
  }

  .dfb-cta {
    flex: 1;
  }

  /* Roster thu/mo tren mobile: mac dinh DONG de H1 khong bi day xuong.
     Danh sach van nam trong DOM (gate_hero doc duoc du 22 ten), chi bi
     an bang max-height:0 + overflow:hidden. */
  .dfb-pitch-roster-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dfb-space-1);
    font-family: var(--dfb-font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--dfb-text);
    background-color: var(--dfb-surface-alt);
    border: 1px solid var(--dfb-border);
    border-radius: var(--dfb-radius);
    padding: var(--dfb-space-1) var(--dfb-space-2);
    cursor: pointer;
    user-select: none;
  }

  .dfb-pitch-roster-toggle::after {
    content: "\25be";
    font-size: 12px;
    transform: rotate(0deg);
  }

  .dfb-pitch-roster-checkbox:checked ~ .dfb-pitch-roster-toggle::after {
    transform: rotate(180deg);
  }

  .dfb-pitch-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sân + khung hero thu gon tren mobile de H1 khong bi day qua 700px
     (topbar + CTA bar da chiem ~400px truoc hero). */
  .dfb-hero {
    padding: var(--dfb-space-2);
  }

  .dfb-hero-grid {
    gap: var(--dfb-space-2);
  }

  .dfb-hero-artwork {
    padding: var(--dfb-space-2);
  }

  .dfb-pitch {
    gap: var(--dfb-space-1);
  }

  .dfb-pitch-svg {
    max-width: 220px;
  }

  .dfb-pitch-collapse {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    gap: 0;
  }

  .dfb-pitch-roster-checkbox:checked ~ .dfb-pitch-collapse {
    max-height: 2000px;
    margin-top: var(--dfb-space-2);
    gap: var(--dfb-space-2);
  }
}