/* ==========================================================================
   HỒ SƠ BÓNG ĐÁ - FLATSOME READY CSS DESIGN SYSTEM
   Design System for WordPress Flatsome Integration & Static Prototypes
   Scoped with .hsbd- prefix to avoid CSS conflicts with Flatsome Theme
   ========================================================================== */

/* 1. CSS Custom Properties / Design Tokens */
:root {
  --hsbd-primary: #00a651;
  --hsbd-primary-hover: #008741;
  --hsbd-primary-light: #e6f6ec;
  --hsbd-dark-header: #0d1b2a;
  --hsbd-dark-sub: #1b263b;
  --hsbd-bg-main: #f4f4f5; /* Zinc 100 */
  --hsbd-card-bg: #ffffff;
  --hsbd-text-title: #09090b; /* Zinc 950 - Deep Crisp Black */
  --hsbd-text-body: #52525b;  /* Zinc 600 - Soft Relaxed Gray */
  --hsbd-text-muted: #71717a; /* Zinc 500 - Meta Gray */
  --hsbd-border: #e4e4e7;     /* Zinc 200 - Clean Border */
  --hsbd-border-dark: #334155;
  --hsbd-radius: 12px;
  --hsbd-radius-sm: 6px;
  --hsbd-radius-lg: 16px;
  --hsbd-radius-full: 9999px;
  --hsbd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --hsbd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --hsbd-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
  --hsbd-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hsbd-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Container & Base Reset within Scoped Wrapper */
.hsbd-body,
.hsbd-wrap {
  font-family: var(--hsbd-font-sans) !important;
  color: var(--hsbd-text-body);
  background-color: var(--hsbd-bg-main);
  font-size: 15px;
  line-height: 1.6;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.hsbd-wrap input,
.hsbd-wrap button,
.hsbd-wrap select,
.hsbd-wrap textarea,
.hsbd-wrap optgroup,
.hsbd-wrap h1,
.hsbd-wrap h2,
.hsbd-wrap h3,
.hsbd-wrap h4,
.hsbd-wrap h5,
.hsbd-wrap h6,
.hsbd-brand-text,
.hsbd-nav-link,
.hsbd-hub-hero-title,
.hsbd-hub-sec-title,
.hsbd-featured-club-name,
.hsbd-hub-league-name,
.hsbd-club-hero-title,
.hsbd-stat-num,
.hsbd-pill {
  font-family: var(--hsbd-font-sans);
}

.hsbd-wrap *, 
.hsbd-wrap *::before, 
.hsbd-wrap *::after {
  box-sizing: border-box;
}

.hsbd-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* View Switcher Bar for Demo / Multi-view */
.hsbd-demo-toolbar {
  background: #1e293b;
  color: #fff;
  padding: 10px 24px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #334155;
  width: 100%;
}

.hsbd-toolbar-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hsbd-demo-toolbar .hsbd-badge-wp {
  background: #00a651;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
}

.hsbd-demo-btns {
  display: flex;
  gap: 10px;
}

.hsbd-btn-toggle {
  background: #334155;
  color: #e2e8f0;
  border: 1px solid #475569;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--hsbd-transition);
}

.hsbd-btn-toggle:hover,
.hsbd-btn-toggle.active {
  background: var(--hsbd-primary);
  color: #ffffff;
  border-color: var(--hsbd-primary);
}

/* 3. Main Dark Header */
.hsbd-header {
  background: var(--hsbd-dark-header);
  color: #ffffff;
  padding: 12px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
}

.hsbd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Brand Logo */
.hsbd-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ffffff;
  flex-shrink: 0;
}

.hsbd-brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 166, 81, 0.4));
  transition: transform 0.2s ease;
}

.hsbd-brand:hover .hsbd-brand-logo {
  transform: scale(1.05);
}

.hsbd-brand-text {
  font-family: var(--hsbd-font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.hsbd-brand-text span {
  color: var(--hsbd-primary);
  display: block;
  font-size: 17px;
  font-weight: 700;
}

/* Flatsome's generic `a:hover{color:#000}` (flatsome-original/flatsome/assets/css/flatsome.css)
   has the same specificity as a single class and wins on load order, turning
   the brand text black on hover since .hsbd-brand-text itself sets no color
   of its own (it only inherits white from .hsbd-brand). These two-class
   selectors outrank it so the text stays white and the span stays green. */
.hsbd-brand:hover .hsbd-brand-text,
.hsbd-brand:focus .hsbd-brand-text {
  color: #ffffff;
}

.hsbd-brand:hover .hsbd-brand-text span,
.hsbd-brand:focus .hsbd-brand-text span {
  color: var(--hsbd-primary);
}

/* Header Nav */
.hsbd-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hsbd-nav-item {
  position: relative;
}

.hsbd-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: var(--hsbd-transition);
}

.hsbd-nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.hsbd-nav-link.active {
  color: #ffffff;
  background: #00a651;
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 166, 81, 0.35);
}

.hsbd-nav-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

/* Desktop Header Search */
.hsbd-header-search {
  position: relative;
  width: 300px;
  flex-shrink: 0;
}

.hsbd-header .hsbd-header-search input[type="text"],
.hsbd-header .hsbd-header-search input[type="search"],
.hsbd-header-search input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--hsbd-radius-full) !important;
  padding: 9px 42px 9px 18px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  height: 40px !important;
  line-height: 40px !important;
  box-shadow: none !important;
  margin: 0 !important;
  outline: none !important;
  transition: var(--hsbd-transition);
  box-sizing: border-box !important;
}

.hsbd-header .hsbd-header-search input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.hsbd-header .hsbd-header-search input:focus {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: var(--hsbd-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.25) !important;
}

.hsbd-header-search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: var(--hsbd-transition);
}

.hsbd-header-search-btn:hover {
  color: var(--hsbd-primary);
}

/* Mobile Actions (Search button + Hamburger) */
.hsbd-header-mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
}

.hsbd-mobile-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: var(--hsbd-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--hsbd-transition);
  padding: 0;
  flex-shrink: 0;
  margin: 0;
}

.hsbd-mobile-btn:hover,
.hsbd-mobile-btn.is-active {
  background: var(--hsbd-primary);
  border-color: var(--hsbd-primary);
  color: #ffffff;
}

.hsbd-mobile-btn svg {
  width: 20px;
  height: 20px;
}

.hsbd-toggle-icon {
  font-size: 20px;
  line-height: 1;
}

/* Mobile Search Dropdown (Slide Down Bar) - HIDDEN BY DEFAULT */
.hsbd-mobile-search-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: var(--hsbd-dark-sub) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 12px 0 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  z-index: 98 !important;
  box-sizing: border-box !important;
}

.hsbd-mobile-search-dropdown.is-open {
  display: block !important;
}

.hsbd-mobile-search-form {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hsbd-mobile-search-inner {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.hsbd-mobile-search-inner input[type="text"],
.hsbd-mobile-search-inner input[type="search"],
.hsbd-mobile-search-inner input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--hsbd-radius-full) !important;
  padding: 0 46px 0 18px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  height: 44px !important;
  line-height: 44px !important;
  box-shadow: none !important;
  margin: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.hsbd-mobile-search-inner input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.hsbd-mobile-search-inner input:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--hsbd-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.3) !important;
}

.hsbd-mobile-search-inner .hsbd-search-submit-btn {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--hsbd-primary) !important;
  border: none !important;
  color: #ffffff !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--hsbd-radius-full) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--hsbd-transition) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
}

.hsbd-mobile-search-inner .hsbd-search-submit-btn:hover {
  background: var(--hsbd-primary-hover) !important;
}

/* Mobile Backdrop */
.hsbd-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.hsbd-mobile-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.hsbd-menu-open {
  overflow: hidden !important;
}

/* 4. Hero Search Section (White Card inside Main Column) */
.hsbd-hero-search {
  padding: 36px 0 20px 0;
  margin-bottom: 16px;
}

.hsbd-hero-card {
  background: var(--hsbd-card-bg);
  border: 1px solid var(--hsbd-border);
  border-radius: var(--hsbd-radius);
  padding: 40px 36px;
  box-shadow: var(--hsbd-shadow-sm);
  margin-bottom: 40px;
}

.hsbd-hero-title {
  font-family: var(--hsbd-font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0 0 10px 0;
  color: var(--hsbd-text-title);
}

.hsbd-hero-sub {
  color: var(--hsbd-text-body);
  font-size: 15.5px;
  line-height: 1.625;
  margin: 0 0 28px 0;
}

.hsbd-search-box {
  max-width: 100%;
  margin: 0 0 20px 0;
  display: flex;
  background: #ffffff;
  border: 1px solid var(--hsbd-border);
  border-radius: 8px;
  padding: 4px 4px 4px 18px;
  align-items: center;
  transition: var(--hsbd-transition);
}

.hsbd-search-box:focus-within {
  border-color: var(--hsbd-primary);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15);
}

.hsbd-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px; /* 16px prevents iOS Safari auto-zoom */
  color: var(--hsbd-text-title);
  background: transparent;
  padding: 11px 0;
  min-width: 0;
}

.hsbd-search-box input::placeholder {
  color: var(--hsbd-text-muted);
}

.hsbd-search-btn {
  background: var(--hsbd-primary);
  color: #ffffff;
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--hsbd-transition);
  flex-shrink: 0;
}

.hsbd-search-btn:hover {
  background: var(--hsbd-primary-hover);
}

.hsbd-search-tags {
  font-size: 13.5px;
  color: var(--hsbd-text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.hsbd-tag {
  color: #27272a;
  background: #e4e4e7;
  padding: 5px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: var(--hsbd-transition);
  display: inline-block;
}

.hsbd-tag:hover {
  background: var(--hsbd-primary);
  color: #fff;
}

/* 5. Main Section Header & Grid Components */
.hsbd-section {
  padding: 0 0 44px 0;
  margin-bottom: 8px;
}

.hsbd-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: nowrap;
}

.hsbd-sec-title {
  font-family: var(--hsbd-font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--hsbd-text-title);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}

.hsbd-sec-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--hsbd-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.hsbd-sec-link {
  font-size: 14px;
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
  transition: var(--hsbd-transition);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.hsbd-sec-link:hover {
  color: var(--hsbd-primary);
}

/* Featured Clubs Grid */
.hsbd-clubs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.hsbd-club-card {
  background: var(--hsbd-card-bg);
  border: 1px solid var(--hsbd-border);
  border-radius: var(--hsbd-radius);
  padding: 22px 14px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: var(--hsbd-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.hsbd-club-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hsbd-shadow-md);
  border-color: var(--hsbd-primary);
}

.hsbd-club-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

.hsbd-club-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hsbd-club-meta {
  font-size: 13px;
  color: var(--hsbd-text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 6. Multi-Column Layout (Home Page: Main Col 1fr + Sidebar 330px) */
.hsbd-home-layout,
/* Everything below the two-column band runs the width of the page. A squad
   in four columns and an eleven on a pitch have nothing to gain from being
   squeezed into two thirds of it, and the sidebar ran out of content long
   before the main column did. */
.hsbd-club-wide {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.hsbd-club-wide > * {
  margin: 0;
}

.hsbd-club-layout {
  display: grid;
  /* 360, not 330: at the narrower width "Inter&Co Stadium" and the coach's
     name both wrapped to two lines, so the column read as a phone layout
     parked on a desktop. */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  padding-top: 8px;
  align-items: start;
}

.hsbd-main-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.hsbd-home-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hsbd-card {
  background: var(--hsbd-card-bg);
  border: 1px solid var(--hsbd-border);
  border-radius: var(--hsbd-radius);
  padding: 22px 20px;
  box-shadow: var(--hsbd-shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hsbd-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* Matches List (Lịch thi đấu hôm nay) */
.hsbd-match-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The reading order of a fixture is the score, then who played, then when,
   then whether it is over. The row used to put the kick-off in the heaviest
   type on the line, so the eye landed on "24/08/2026" before "Elche". Sizes
   below are ranked in that order and nothing here positions by margin: the
   score sits in a grid column, so it lands in the same place on every row. */
.hsbd-match-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The hover background needs somewhere to sit, so the row carries its own
     padding. It must not be pulled outward with a negative margin: that made
     every row wider than the list that holds it. */
  padding: 10px 6px;
  border-radius: 8px;
  border-bottom: 1px solid #e6ebf1;
  font-size: 13.5px;
  min-width: 0;
  transition: background-color 0.12s ease;
}

.hsbd-match-item:hover {
  background: #f8fafc;
}

.hsbd-match-item:last-child {
  border-bottom: none;
}

/* The column was sized for a bare kick-off time ("18:30"). It now carries a
   date and a status label too, and at 36px those wrapped out of the box and
   printed on top of the team names. It is a stacked column of its own width,
   and each line stays on one line. */
.hsbd-match-time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  width: 104px;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--hsbd-text-title);
  font-size: 12.5px;
  line-height: 1.3;
}

.hsbd-match-time > strong {
  white-space: nowrap;
}

.hsbd-match-time > span,
.hsbd-match-time > small {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--hsbd-text-muted);
  white-space: nowrap;
}

/* A grid, not space-between: the score sits in the middle column so it lands
   in the same place on every row. Under space-between the centre drifted with
   the length of the club names, so "Sporting Kansas City – Los Angeles FC" and
   "DC United – Atlanta United" read as two different layouts. */
.hsbd-match-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 0;
  /* Two equal columns across a 1000px card pushed the clubs to the far edges
     and left the eye to cross a hand's width of nothing to read one fixture.
     The matchup is a single cluster, so it is capped and centred; the score
     still lands in the same column on every row. */
  max-width: 620px;
  margin: 0 auto;
}

.hsbd-match-team {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* text-overflow works on the box that holds the text, and .hsbd-match-team is
   a flex container holding a crest and a span. With overflow hidden and the
   content pushed right, "Deportivo de A Coruña" was clipped at its start and
   read "eportivo de A Coruña" instead of ellipsising at the end. The span owns
   the truncation. */
.hsbd-match-team > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.hsbd-match-team.team-home {
  justify-content: flex-end;
  text-align: right;
}

.hsbd-match-team.team-away {
  justify-content: flex-start;
  text-align: left;
}

/* A fixed square box for every crest. The artwork is not a consistent shape —
   a tall shield next to a round badge reads as two different sizes — so each
   one is fitted into the same box instead of being sized by its own aspect. */
.hsbd-match-team-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
}

/* The score is the point of the row; it was the palest thing in it. */
.hsbd-match-vs {
  font-size: 16px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  padding: 0 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Nothing styled this block, so the competition and the status ran together
   as "MLSĐã kết thúc". They are two facts, stacked, and quieter than the club
   names they sit beside. */
.hsbd-match-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  text-align: right;
  line-height: 1.3;
}

.hsbd-match-meta > span:first-child {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hsbd-text-muted);
}

/* The status used to be styled by its position, so a row that said nothing
   but "Đã kết thúc" got the quiet uppercase treatment meant for the
   competition name and read as faint grey caps. It is a status wherever it
   sits, so it says so. */
.hsbd-match-meta > span.hsbd-match-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  background: #f1f5f9;
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

.hsbd-match-meta > span + span {
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  background: #f1f5f9;
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* Top Leagues List (Các giải đấu hàng đầu) */
.hsbd-league-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hsbd-league-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--hsbd-text-title);
  transition: var(--hsbd-transition);
  border-bottom: 1px solid #f8fafc;
  min-width: 0;
}

.hsbd-league-item:last-child {
  border-bottom: none;
}

.hsbd-league-item:hover {
  background: var(--hsbd-primary-light);
  border-radius: 4px;
}

.hsbd-league-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.hsbd-league-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.hsbd-league-name {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--hsbd-text-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsbd-league-country {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 4px;
}

.hsbd-league-more {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hsbd-primary);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: var(--hsbd-transition);
}

.hsbd-league-more:hover {
  text-decoration: underline;
}

/* Trending Q&A List (Nội dung được quan tâm) */
.hsbd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hsbd-faq-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-decoration: none;
  color: var(--hsbd-text-title);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  transition: var(--hsbd-transition);
}

.hsbd-faq-item:hover {
  color: var(--hsbd-primary);
}

.hsbd-faq-num {
  font-weight: 800;
  font-size: 13px;
  color: var(--hsbd-text-title);
  min-width: 12px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* Sidebar Widgets */
.hsbd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* The sidebar follows the page so scrolling into the fixtures does not leave
   a third of the viewport empty.
   
   It gets no scrollbar of its own. Capping its height and letting it scroll
   was an attempt to keep a tall sidebar reachable, and it bought that with a
   second scroll region inside a page that already scrolls: the wheel did
   different things depending on which side the pointer was over, and the
   column read as an iframe dropped into the page. The right fix was to make
   the sidebar short enough to fit, which is what the club-facts list below
   does. */
@media (min-width: 1025px) {
  .hsbd-club-layout .hsbd-sidebar {
    position: sticky;
    top: 88px;
    align-self: start;
  }
}

/* Fixture tabs. The count on each pill answers "is there anything under the
   other one?" before it is clicked. */
/* The competition named in a section header, where there is a page for it.
   It used to be styled as a badge — a filled pill with no behaviour, which
   offers a click the page could not honour. As a link it keeps the weight of
   a label and gains only what a link needs: a pointer and an underline on
   hover. */
.hsbd-sec-context {
  font-size: 12px;
  font-weight: 600;
  color: var(--hsbd-text-muted, #64748b);
  white-space: nowrap;
}

.hsbd-sec-context:hover,
.hsbd-sec-context:focus-visible {
  color: var(--hsbd-primary);
  text-decoration: underline;
}

.hsbd-sec-context span {
  /* The arrow is decoration for the link, not a second thing to read. */
  opacity: 0.6;
}

/* Club list in a competition sidebar. It was a bare <ul>, so it inherited
   the browser's bullets and margins: text in a card, with nothing to say a
   name could be tapped and a target only as wide as the word itself. */
.hsbd-club-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hsbd-club-nav-item + .hsbd-club-nav-item {
  border-top: 1px solid #f1f5f9;
}

.hsbd-club-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Full width and 48px tall, so the row is the target rather than the few
     characters of the name. */
  min-height: 48px;
  padding: 4px 2px;
  color: var(--hsbd-text-title);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.hsbd-club-nav-link:hover,
.hsbd-club-nav-link:focus-visible {
  color: var(--hsbd-primary);
}

.hsbd-club-nav-link img,
.hsbd-club-nav-crest {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* A club with no crest keeps the same indent, so the names stay in a column. */
.hsbd-club-nav-crest {
  border-radius: 50%;
  background: #f1f5f9;
}

.hsbd-club-nav-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsbd-club-nav-chevron {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: #cbd5e1;
}

.hsbd-club-nav-link:hover .hsbd-club-nav-chevron {
  color: var(--hsbd-primary);
}

/* Nothing to follow, so nothing that looks followable. */
.hsbd-club-nav-link--plain {
  color: var(--hsbd-text-muted);
  font-weight: 500;
}

/* Next fixture. Two clubs and a time, drawn as that rather than listed as
   three labelled rows: a reader recognises a crest before he reads a name. */
.hsbd-next-fixture {
  display: block;
  padding: 6px 0 2px;
  color: inherit;
  text-decoration: none;
}

.hsbd-next-competition {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}

.hsbd-next-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.hsbd-next-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.hsbd-next-side img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.hsbd-next-team {
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  line-height: 1.25;
}

.hsbd-next-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  white-space: nowrap;
}

.hsbd-next-day,
.hsbd-next-venue {
  font-size: 11.5px;
  color: var(--hsbd-text-muted);
}

/* The kick-off time is the one thing a reader came to this card for. */
.hsbd-next-time {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--hsbd-text-title);
}

.hsbd-next-fixture:hover .hsbd-next-team {
  color: var(--hsbd-primary);
}

/* Recent matches. Crests turn inwards so the two clubs read as a fixture
   rather than as two entries in a list. */
.hsbd-recent-fixture a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hsbd-text-title);
  text-decoration: none;
}

.hsbd-recent-fixture a:hover {
  color: var(--hsbd-primary);
}

.hsbd-recent-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.hsbd-recent-side img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.hsbd-recent-vs {
  font-size: 11px;
  color: var(--hsbd-text-muted);
}

.hsbd-recent-date {
  white-space: nowrap;
  font-size: 12px;
  color: var(--hsbd-text-muted);
}

/* The result, not just the score. 2-1 is a win or a defeat depending on which
   shirt the player wore, and the fill says which without the reader working
   it out. A match with no side resolved keeps the neutral pill rather than
   being coloured on a guess. */
.hsbd-recent-score {
  display: inline-block;
  min-width: 52px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #f1f5f9;
  font-weight: 700;
  font-size: 12.5px;
  text-align: center;
  color: var(--hsbd-text-title);
}

.hsbd-recent-score--win { background: #dcfce7; color: #15803d; }
.hsbd-recent-score--draw { background: #fef9c3; color: #a16207; }
.hsbd-recent-score--loss { background: #fee2e2; color: #b91c1c; }

.hsbd-recent-rating {
  font-weight: 700;
  color: var(--hsbd-primary-hover);
}

.hsbd-transfer-club-cell {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Club header: crest, name, and the handful of facts that place a club.
   Its own base class: .hsbd-club-hero already belongs to the player page's
   dark hero, and reusing it put light-grey labels on a navy gradient.
   It was a name over a subtitle with the stadium and coach floated right,
   which put two unrelated things in the same corner. */
.hsbd-club-profile-hero {
  margin-bottom: 18px;
}

.hsbd-club-hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hsbd-club-hero-crest {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-club-hero-name {
  flex: 1;
  min-width: 0;
}

.hsbd-club-hero-name h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  color: var(--hsbd-text-title);
}

.hsbd-club-hero-full {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--hsbd-text-muted);
}

.hsbd-club-hero-coach {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  flex-shrink: 0;
}

.hsbd-club-hero-coach span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hsbd-text-muted);
}

.hsbd-club-hero-coach strong {
  font-size: 14px;
  color: var(--hsbd-text-title);
}

/* The facts run along the bottom, separated by rules rather than boxed: they
   are one row of related things, not five cards. */
.hsbd-club-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hsbd-border, #e2e8f0);
}

.hsbd-club-hero-fact dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hsbd-text-muted);
}

.hsbd-club-hero-fact dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

@media (max-width: 640px) {
  .hsbd-club-hero-name h1 { font-size: 23px; }
  .hsbd-club-hero-crest { width: 60px; height: 60px; }
  .hsbd-club-hero-coach { text-align: left; }
}

/* Fixtures as cards across. A fixture is a crest, a score and a crest —
   three things wide, not five columns deep — and five of them side by side
   take about the height one list row used to. */
.hsbd-match-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.hsbd-match-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hsbd-border, #e2e8f0);
  border-radius: 10px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}

.hsbd-match-card:hover {
  border-color: var(--hsbd-primary);
  box-shadow: var(--hsbd-shadow-sm);
}

.hsbd-match-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hsbd-match-card-comp {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--hsbd-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* T/H/B rather than colour alone, so the result survives greyscale. */
.hsbd-match-card-badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  color: #ffffff;
}

.hsbd-match-card-badge--win { background: #16a34a; }
.hsbd-match-card-badge--draw { background: #94a3b8; }
.hsbd-match-card-badge--loss { background: #dc2626; }

.hsbd-match-card-date {
  font-size: 11px;
  color: var(--hsbd-text-muted);
}

.hsbd-match-card-clash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.hsbd-match-card-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.hsbd-match-card-side img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.hsbd-match-card-side span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--hsbd-text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* The score is what the eye should land on first. */
.hsbd-match-card-score {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--hsbd-text-title);
}

/* The pitch and the manager share a row: the formation on one is the shape
   the other prefers, and reading them apart made a reader carry a number down
   the page to compare it. */
.hsbd-lineup-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  /* Stretch, not start: a short card beside a tall pitch left a step in the
     page where two things on one row should have made one band. */
  align-items: stretch;
}

.hsbd-lineup-row > * {
  margin: 0;
}

@media (max-width: 900px) {
  .hsbd-lineup-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The club's own row in the table above it. Marked by fill rather than by a
   colour on the text, so it survives a screenshot and a greyscale print. */
.hsbd-standings-mini-table tbody tr.is-current {
  background: var(--hsbd-primary-light, #eefbf3);
}

.hsbd-standings-mini-table tbody tr.is-current td {
  font-weight: 700;
}

/* The last eleven, on a pitch seen from behind the goal.
   
   The tilt is a rotateX on a surface layer, with the players counter-rotated
   so their names stay square to the reader: a name tilted with the grass is a
   name nobody reads. The stripes and the markings are drawn rather than
   painted on an image, because they have to tilt with the surface and a
   picture at one aspect ratio skews at every other. */
.hsbd-pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-height: 440px;
  /* Room at the top for the forward line: rotateX pulls the far edge in, so
     a row placed at the very top of the box lands above the grass. */
  padding: 54px 26px 22px;
  perspective: 1300px;
  perspective-origin: 50% 0%;
}

.hsbd-pitch-surface {
  position: absolute;
  inset: 26px 0 0;
  border-radius: 14px;
  /* A shallower tilt keeps the far end wide enough for five names, and the
     surface is pulled above the box so the forwards stand on grass. */
  transform: rotateX(26deg);
  transform-origin: 50% 100%;
  background: repeating-linear-gradient(0deg, #178a43 0 42px, #13793a 42px 84px);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5), 0 18px 26px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.hsbd-pitch-mark {
  position: absolute;
  border: 3px solid rgba(255, 255, 255, 0.5);
}

/* The halfway line closes the top of the half. */
.hsbd-pitch-mark--halfway {
  left: 0;
  right: 0;
  top: 0;
  border-width: 0 0 3px;
}

/* Half a centre circle, hanging off the halfway line — the other half belongs
   to the opponent's side and is not drawn. */
.hsbd-pitch-mark--centre-arc {
  left: 50%;
  top: 0;
  width: 26%;
  aspect-ratio: 2 / 1;
  border-top: 0;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

/* The penalty area and the six-yard box at this team's own goal. */
.hsbd-pitch-mark--box {
  left: 50%;
  bottom: 0;
  width: 54%;
  height: 24%;
  border-bottom: 0;
  transform: translateX(-50%);
}

.hsbd-pitch-mark--six-yard {
  left: 50%;
  bottom: 0;
  width: 26%;
  height: 10%;
  border-bottom: 0;
  transform: translateX(-50%);
}

.hsbd-pitch-line {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.hsbd-pitch-man {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 130px;
  color: #ffffff;
  text-decoration: none;
}

.hsbd-pitch-man img,
.hsbd-pitch-shirt {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 10px rgba(15, 23, 42, 0.35);
}

/* A shirt number where the feed has no photo: a blank disc on a pitch reads
   as a missing player rather than a missing picture. */
.hsbd-pitch-shirt {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #15803d;
}

.hsbd-pitch-name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  max-width: 130px;
}

/* The club under a name in a team of the season: eleven players from eleven
   different sides is the point of the thing. */
.hsbd-pitch-club {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.hsbd-pitch-man:hover .hsbd-pitch-name {
  text-decoration: underline;
}

/* Manager card. The portrait beside the facts, each fact on its own line:
   spread across the card they read as a scattered grid, stacked they read as
   a profile, which is what they are. */
.hsbd-coach-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.hsbd-coach-photo {
  width: 120px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
  /* The provider frames a head shot high in the frame, so a centred crop cuts
     the chin off. */
  object-position: top center;
  background: #f1f5f9;
  flex-shrink: 0;
}

.hsbd-coach-detail {
  flex: 1;
  min-width: 0;
}

.hsbd-coach-name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--hsbd-text-title);
}

.hsbd-coach-country {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--hsbd-text-muted);
}

.hsbd-coach-facts {
  margin: 0;
}

.hsbd-coach-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-coach-facts > div:last-child {
  border-bottom: 0;
}

.hsbd-coach-facts dt {
  font-size: 12px;
  color: #475569;
  flex-shrink: 0;
}

.hsbd-coach-facts dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
  color: var(--hsbd-text-title);
}

@media (max-width: 520px) {
  .hsbd-coach-body {
    flex-direction: column;
  }
  .hsbd-coach-photo {
    width: 96px;
    height: 120px;
  }
}

/* Competition header: badge, name, where and when, then the size of the
   thing. Same shape as the club header, so the two read as one language. */
.hsbd-competition-hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hsbd-competition-hero-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-competition-hero-name h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  color: var(--hsbd-text-title);
}

.hsbd-competition-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--hsbd-text-muted);
}

.hsbd-competition-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hsbd-competition-hero-meta .hsbd-hero-divider {
  background: rgba(15, 23, 42, 0.18);
}

.hsbd-competition-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hsbd-border, #e2e8f0);
}

.hsbd-competition-hero-fact {
  display: flex;
  flex-direction: column;
  flex: 1 1 130px;
  min-width: 0;
  padding: 0 22px;
  position: relative;
}

.hsbd-competition-hero-fact::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 1px;
  height: 40px;
  background: var(--hsbd-border, #e2e8f0);
}

.hsbd-competition-hero-fact:first-child {
  padding-left: 0;
}

.hsbd-competition-hero-fact:first-child::before {
  display: none;
}

.hsbd-competition-hero-fact dd {
  display: block;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--hsbd-text-title);
}

.hsbd-competition-hero-fact dt {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--hsbd-text-muted);
}

/* Honours. Name and how many on the left, the seasons on the right. */
.hsbd-honour-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hsbd-honour-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-honour-row:last-child {
  border-bottom: 0;
}

.hsbd-honour-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  min-width: 0;
}

/* The count only appears above one, so a single title is not labelled "×1". */
.hsbd-honour-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--hsbd-primary-light, #eefbf3);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--hsbd-primary-hover);
}

.hsbd-honour-seasons {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--hsbd-text-muted);
  white-space: nowrap;
}

/* Competitions, each its own link. They wrap rather than run off the row: a
   club in three competitions is not rare, and a sidebar is 360px wide. */
.hsbd-competition-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 10px;
}

.hsbd-competition-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

a.hsbd-competition-link:hover {
  color: var(--hsbd-primary);
  text-decoration: underline;
}

/* A crest or a flag beside a value in the info table. Aligned on the text
   baseline rather than centred, so a row with a badge sits on the same line
   as the rows without one. */
.hsbd-info-badge {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -4px;
  margin-right: 6px;
}

/* Club facts as labelled rows. */
.hsbd-club-facts {
  margin: 0;
}

.hsbd-club-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-club-fact:last-child {
  border-bottom: 0;
}

.hsbd-club-fact dt {
  flex-shrink: 0;
  font-size: 12.5px;
  color: #475569;
}

.hsbd-club-fact dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  text-align: right;
  min-width: 0;
}

.hsbd-pill-count {
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.7;
}

.hsbd-match-more {
  margin: 12px 0 0;
  text-align: right;
  font-size: 13px;
}

.hsbd-match-more a {
  font-weight: 600;
  color: var(--hsbd-primary);
}

/* Squad list. Each player used to sit in his own bordered rectangle, which
   read as a form field rather than a name on a team sheet. Rows separated by
   a hairline and aligned on one grid scan far faster: border is not the only
   way to divide information, and usually not the best one. */
.hsbd-squad-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Four columns, one per line of the pitch. Thirty-four names in a single
   column ran past half the page, and a reader after the goalkeepers had to
   read the defenders to find them. */
.hsbd-squad-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 24px;
}

.hsbd-squad-group-title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--hsbd-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hsbd-text-title);
}

.hsbd-squad-group-title span {
  font-size: 11px;
  font-weight: 700;
  color: var(--hsbd-text-muted);
}

.hsbd-squad-row {
  display: grid;
  /* The shirt number gets its own column so the names line up whatever the
     number is: a squad reads down the names, not down the numbers. */
  grid-template-columns: 22px 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-squad-shirt {
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
  color: var(--hsbd-text-muted);
}

.hsbd-squad-row:last-child {
  border-bottom: 0;
}

.hsbd-squad-photo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #f1f5f9;
}

/* An initial rather than a silhouette: the feed has no photo for many
   players, and a repeated grey avatar reads as a broken image. */
.hsbd-squad-photo--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.hsbd-squad-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.hsbd-squad-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbd-text-title, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.hsbd-squad-name:hover {
  color: var(--hsbd-primary);
  text-decoration: underline;
}

.hsbd-squad-meta {
  font-size: 12px;
  color: var(--hsbd-text-muted, #64748b);
}

.hsbd-squad-row .hsbd-squad-stat {
  font-size: 12px;
  color: var(--hsbd-text-muted, #64748b);
  white-space: nowrap;
  text-align: right;
}

.hsbd-sec-count {
  font-size: 12px;
  color: var(--hsbd-text-muted, #64748b);
  white-space: nowrap;
}

/* Club sub-navigation. It follows the page so a reader who has scrolled into
   the fixtures can move to the squad without scrolling back up — the reason
   the section exists at all. */
.hsbd-club-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 16px;
  padding: 10px 0;
  background: var(--hsbd-bg, #f8fafc);
  border-bottom: 1px solid var(--hsbd-border, #e2e8f0);
}

.hsbd-club-subnav::-webkit-scrollbar {
  display: none;
}

.hsbd-club-subnav-item {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbd-text-muted, #64748b);
  white-space: nowrap;
}

.hsbd-club-subnav-item:hover {
  background: #eef2f7;
  color: var(--hsbd-text-title, #0f172a);
}

/* The current section is marked by weight and fill, not colour alone. */
.hsbd-club-subnav-item.is-active {
  background: var(--hsbd-primary, #00a651);
  color: #ffffff;
}

/* The form letters were legible only at a squint. */
.hsbd-form-dot {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

/* Stadium Banner Widget */
.hsbd-stadium-card {
  position: relative;
  border-radius: var(--hsbd-radius-lg);
  overflow: hidden;
  box-shadow: var(--hsbd-shadow-md);
  height: 220px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  color: #ffffff;
}

.hsbd-stadium-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(13,27,42,0.95) 85%);
}

.hsbd-stadium-content {
  position: relative;
  z-index: 2;
}

.hsbd-stadium-title {
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  color: #ffffff;
}

.hsbd-stadium-sub {
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 12px;
}

.hsbd-btn-primary {
  display: inline-block;
  background: var(--hsbd-primary);
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--hsbd-radius-full);
  transition: var(--hsbd-transition);
  border: none;
  cursor: pointer;
}

.hsbd-btn-primary:hover {
  background: var(--hsbd-primary-hover);
  color: #ffffff;
}

/* Country List Widget */
.hsbd-country-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hsbd-country-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--hsbd-text-body);
  font-size: 13px;
  font-weight: 600;
  transition: var(--hsbd-transition);
}

.hsbd-country-item:hover {
  background: #f1f5f9;
  color: var(--hsbd-primary);
}

.hsbd-flag-icon {
  font-size: 18px;
}

/* ==========================================================================
   7. CLUB DETAIL PAGE VIEW
   ========================================================================== */

/* Breadcrumb */
.hsbd-breadcrumb {
  font-size: 12px;
  color: var(--hsbd-text-muted);
  padding: 14px 0;
}

.hsbd-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hsbd-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbd-breadcrumb li:not(:first-child)::before {
  content: ">";
  color: #94a3b8;
}

.hsbd-breadcrumb a {
  color: var(--hsbd-text-muted);
  text-decoration: none;
}

.hsbd-breadcrumb a:hover {
  color: var(--hsbd-primary);
}

.hsbd-breadcrumb li[aria-current="page"] {
  color: var(--hsbd-text-title);
  font-weight: 600;
}

/* 404 Page */
.hsbd-404-card {
  text-align: center;
  padding: 64px 24px;
  margin: 24px 0;
}

.hsbd-404-code {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  color: var(--hsbd-primary);
  line-height: 1;
}

.hsbd-404-title {
  margin: 12px 0 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

.hsbd-404-desc {
  margin: 0 auto 24px;
  max-width: 480px;
  color: var(--hsbd-text-muted);
  font-size: 14px;
}

.hsbd-404-search {
  position: relative;
  max-width: 420px;
  margin: 0 auto 24px;
}

.hsbd-404-search input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--hsbd-border);
  border-radius: var(--hsbd-radius-full);
  padding: 10px 44px 10px 18px;
  font-size: 14px;
  height: 42px;
  box-sizing: border-box;
  outline: none;
}

.hsbd-404-search input:focus {
  border-color: var(--hsbd-primary);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15);
}

.hsbd-404-search button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--hsbd-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.hsbd-404-search button:hover {
  color: var(--hsbd-primary);
}

.hsbd-404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Club Hero Header Card */
.hsbd-club-hero {
  position: relative;
  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
  border-radius: var(--hsbd-radius-lg);
  overflow: hidden;
  color: #ffffff;
  padding: 30px;
  box-shadow: var(--hsbd-shadow-md);
  margin-bottom: 20px;
}

/* The stadium is mood, not information, so it has to arrive rather than
   start. Pinned as a 450px square it began with a visible edge halfway across
   the hero; covering the panel and fading left to right under a gradient of
   the hero's own colour lets it dissolve into the background. */
.hsbd-club-hero-bg {
  position: absolute;
  inset: 0;
  /* Faint enough that the two stats sitting over it stay readable. Turned up,
     the stadium stopped being a background and started being a picture with
     text on top of it. */
  opacity: 0.3;
  background-size: cover;
  background-position: center 30%;
  filter: blur(2px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 48%, rgba(0, 0, 0, 0.45) 68%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 48%, rgba(0, 0, 0, 0.45) 68%, #000 100%);
}

/* A wash of the hero's own colour over the image, so a value never has to be
   read against a bright patch of sky. */
.hsbd-player-canonical-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 27, 43, 0.9) 0%, rgba(13, 27, 43, 0.55) 55%, rgba(13, 27, 43, 0.3) 100%);
}

.hsbd-club-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
}

.hsbd-club-hero-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  background: #ffffff;
  padding: 10px;
  border-radius: 16px;
  flex-shrink: 0;
}

.hsbd-club-hero-info {
  flex: 1;
  min-width: 0;
}

.hsbd-club-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  /* #94a3b8 on this navy is below the contrast floor at 12px. */
  color: #c3ccd9;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.hsbd-club-hero-title {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 2px 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.hsbd-club-hero-sub {
  font-size: 15px;
  color: #cbd5e1;
  margin-bottom: 12px;
}

.hsbd-club-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #e2e8f0;
  flex-wrap: wrap;
}

/* Stat Grid under Club Hero (BULLETPROOF OVERFLOW CONTAINMENT) */
.hsbd-club-stats-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hsbd-stat-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.hsbd-stat-item .hsbd-stat-content,
.hsbd-stat-item > div:not(.hsbd-stat-icon) {
  min-width: 0 !important;
  flex: 1 1 0% !important;
  width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.hsbd-stat-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--hsbd-primary) !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.hsbd-stat-label {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  max-width: 100% !important;
  line-height: 1.2 !important;
  margin: 0 0 2px 0 !important;
}

.hsbd-stat-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  max-width: 100% !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Club Detail Tabs Nav */
.hsbd-tabs-bar {
  background: var(--hsbd-dark-header);
  border-radius: var(--hsbd-radius);
  padding: 5px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hsbd-tabs-bar::-webkit-scrollbar {
  display: none;
}

.hsbd-tab-btn {
  background: transparent;
  color: #94a3b8;
  border: none;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--hsbd-transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.hsbd-tab-btn:hover {
  color: #ffffff;
}

.hsbd-tab-btn.active {
  background: var(--hsbd-primary);
  color: #ffffff;
}

/* Club Detail Main Grid Layout */
.hsbd-tab-content {
  display: none;
}

.hsbd-tab-content.active {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Intro Section (Wiki Reading Style) */
.hsbd-intro-card {
  line-height: 1.75;
  font-size: 16px;
  color: var(--hsbd-text-body);
}

.hsbd-intro-card p {
  margin: 0 0 14px 0;
}

/* Matches Grid (Last Match & Next Match) */
.hsbd-matches-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hsbd-match-card {
  background: var(--hsbd-card-bg);
  border: 1px solid var(--hsbd-border);
  border-radius: var(--hsbd-radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--hsbd-shadow-sm);
  min-width: 0;
}

.hsbd-match-card-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbd-text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hsbd-scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 14px 0;
  gap: 8px;
}

.hsbd-score-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 120px;
  min-width: 65px;
}

.hsbd-score-team img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-score-team-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

.hsbd-score-display {
  font-size: 24px;
  font-weight: 900;
  color: var(--hsbd-text-title);
  background: #f1f5f9;
  padding: 4px 16px;
  border-radius: 8px;
  letter-spacing: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Làm rõ đội đang dẫn: nhãn sân, đội dẫn nổi màu primary, đội thua mờ, dòng verdict */
.hsbd-team-side {
  font-size: 10px;
  font-weight: 600;
  color: var(--hsbd-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.hsbd-score-team.hsbd-lead .hsbd-score-team-name { color: var(--hsbd-primary); }
.hsbd-score-team.hsbd-trail { opacity: .5; }
/* Dòng trận trong list (archive/trang chủ): đội dẫn xanh, đội kém mờ */
.hsbd-match-team.hsbd-lead span { color: var(--hsbd-primary); font-weight: 700; }
.hsbd-match-team.hsbd-trail { opacity: .55; }
.hsbd-score-display .hsbd-sc-win { color: var(--hsbd-primary); }
.hsbd-score-display .hsbd-sc-lose { color: var(--hsbd-text-muted); }
.hsbd-score-display .hsbd-sc-sep { color: var(--hsbd-text-muted); margin: 0 4px; }

.hsbd-match-status {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--hsbd-radius-full);
  font-weight: 600;
  margin-top: 6px;
}

.hsbd-status-finished {
  background: #e2e8f0;
  color: #475569;
}

.hsbd-status-upcoming {
  background: var(--hsbd-primary-light);
  color: var(--hsbd-primary);
}

/* Countdown Timer */
.hsbd-countdown {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.hsbd-count-box {
  background: #f8fafc;
  border: 1px solid var(--hsbd-border);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 44px;
}

.hsbd-count-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--hsbd-text-title);
  line-height: 1;
}

.hsbd-count-lbl {
  font-size: 9px;
  color: var(--hsbd-text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Featured Squad Players Grid */
.hsbd-players-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.hsbd-player-card {
  background: var(--hsbd-card-bg);
  border: 1px solid var(--hsbd-border);
  border-radius: var(--hsbd-radius);
  padding: 12px 8px;
  text-align: center;
  transition: var(--hsbd-transition);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.hsbd-player-card:hover {
  transform: translateY(-2px);
  border-color: var(--hsbd-primary);
  box-shadow: var(--hsbd-shadow-md);
}

.hsbd-player-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 8px auto;
  border: 2px solid #e4e4e7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hsbd-player-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hsbd-player-pos {
  font-size: 11px;
  color: var(--hsbd-text-muted);
}

/* Trophies Grid */
.hsbd-trophies-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.hsbd-trophy-card {
  background: var(--hsbd-card-bg);
  border: 1px solid var(--hsbd-border);
  border-radius: var(--hsbd-radius);
  padding: 14px 10px;
  text-align: center;
  min-width: 0;
}

.hsbd-trophy-count {
  font-size: 26px;
  font-weight: 900;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.hsbd-trophy-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.hsbd-trophy-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--hsbd-text-muted);
  line-height: 1.3;
}

/* Club Sidebar Details Table */
.hsbd-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.hsbd-info-table tr {
  border-bottom: 1px solid var(--hsbd-border);
}

.hsbd-info-table tr:last-child {
  border-bottom: none;
}

.hsbd-info-table td {
  padding: 10px 0;
}

.hsbd-info-label {
  color: var(--hsbd-text-muted);
  width: 40%;
  font-size: 14px;
  font-weight: 500;
}

.hsbd-info-val {
  font-weight: 600;
  color: var(--hsbd-text-title);
  text-align: right;
  font-size: 14px;
}

/* Rivalry Widget */
.hsbd-rival-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid var(--hsbd-border);
}

.hsbd-rival-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
}

.hsbd-rival-team img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Related Clubs Widget */
.hsbd-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hsbd-related-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  text-decoration: none;
  padding: 6px 0;
  transition: var(--hsbd-transition);
}

.hsbd-related-item:hover {
  color: var(--hsbd-primary);
}

.hsbd-related-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* 8. Footer Component */
.hsbd-footer {
  background-color: var(--hsbd-dark-header);
  color: #94a3b8;
  padding: 48px 0 0 0;
  margin-top: 40px;
  border-top: 3px solid var(--hsbd-primary);
}

.hsbd-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
  gap: 32px;
  padding-bottom: 40px;
}

.hsbd-footer-col h4 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 16px 0;
}

.hsbd-footer-col p {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
}

.hsbd-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hsbd-footer-links a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--hsbd-transition);
}

.hsbd-footer-links a:hover {
  color: var(--hsbd-primary);
}

/* Footer Newsletter Form (OVERRIDE FLATSOME WHITE BOX COMPLETELY) */
.hsbd-newsletter-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 10px !important;
  width: 100% !important;
}

.hsbd-footer .hsbd-newsletter-form input[type="email"],
.hsbd-footer .hsbd-newsletter-form input[type="text"],
.hsbd-footer .hsbd-newsletter-form input,
.hsbd-newsletter-form input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--hsbd-radius-full) !important;
  padding: 0 18px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  height: 42px !important;
  line-height: 42px !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 0 4px 0 !important;
  box-sizing: border-box !important;
  transition: var(--hsbd-transition) !important;
}

.hsbd-footer .hsbd-newsletter-form input::placeholder,
.hsbd-newsletter-form input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.hsbd-footer .hsbd-newsletter-form input:focus,
.hsbd-newsletter-form input:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--hsbd-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.25) !important;
  color: #ffffff !important;
}

.hsbd-newsletter-form .hsbd-btn-primary,
.hsbd-footer .hsbd-newsletter-form button,
.hsbd-footer .hsbd-newsletter-form button[type="submit"] {
  width: 100% !important;
  text-align: center !important;
  background: var(--hsbd-primary) !important;
  color: #ffffff !important;
  border-radius: var(--hsbd-radius-full) !important;
  padding: 0 18px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--hsbd-transition) !important;
  box-shadow: 0 2px 8px rgba(0, 166, 81, 0.3) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  height: 42px !important;
  line-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.hsbd-newsletter-form .hsbd-btn-primary:hover,
.hsbd-footer .hsbd-newsletter-form button:hover {
  background: var(--hsbd-primary-hover) !important;
  box-shadow: 0 4px 14px rgba(0, 166, 81, 0.45) !important;
}

.hsbd-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
  text-align: center;
  font-size: 13.5px;
  color: #64748b;
}

/* ==========================================================================
   ARCHIVE / PAGINATION / STANDINGS / TIMELINE
   ========================================================================== */
.hsbd-archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.hsbd-count-badge {
  display: inline-block;
  background: var(--hsbd-primary-light);
  color: var(--hsbd-primary-hover);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--hsbd-radius-full);
}

.hsbd-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hsbd-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--hsbd-radius-sm);
  border: 1px solid var(--hsbd-border);
  background: var(--hsbd-card-bg);
  color: var(--hsbd-text-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: var(--hsbd-transition);
}

.hsbd-pagination .page-numbers:hover {
  border-color: var(--hsbd-primary);
  color: var(--hsbd-primary);
}

.hsbd-pagination .page-numbers.current {
  background: var(--hsbd-primary);
  border-color: var(--hsbd-primary);
  color: #ffffff;
}

.hsbd-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* Standings */
.hsbd-sec-meta {
  font-size: 12px;
  color: var(--hsbd-text-muted);
  font-weight: 600;
}

.hsbd-standings-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

.hsbd-standings-table th,
.hsbd-standings-table td {
  padding: 9px 6px;
  text-align: center;
  border-bottom: 1px solid var(--hsbd-border);
  white-space: nowrap;
}

.hsbd-standings-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--hsbd-text-muted);
  font-weight: 700;
}

.hsbd-standings-table .hsbd-st-rank {
  width: 30px;
  font-weight: 700;
  color: var(--hsbd-text-body);
}

.hsbd-standings-table th.hsbd-st-club,
.hsbd-standings-table td.hsbd-st-club {
  text-align: left;
}

.hsbd-standings-table .hsbd-st-club a,
.hsbd-standings-table .hsbd-st-club span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hsbd-text-title);
  font-weight: 600;
  text-decoration: none;
}

.hsbd-standings-table .hsbd-st-club a:hover {
  color: var(--hsbd-primary);
}

.hsbd-standings-table .hsbd-st-club img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-standings-table .hsbd-st-pts {
  font-weight: 800;
  color: var(--hsbd-primary);
}

.hsbd-standings-table tbody tr:hover {
  background: var(--hsbd-primary-light);
}

/* Biến thể mini trong sidebar */
.hsbd-standings-mini {
  font-size: 13px;
}

.hsbd-standings-mini td {
  padding: 7px 4px;
}

/* Timeline */
.hsbd-timeline {
  display: flex;
  flex-direction: column;
}

.hsbd-tl-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hsbd-border);
}

.hsbd-tl-row:last-child {
  border-bottom: 0;
}

.hsbd-tl-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hsbd-tl-left {
  justify-content: flex-end;
  text-align: right;
}

.hsbd-tl-right {
  justify-content: flex-start;
  text-align: left;
}

.hsbd-tl-min {
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--hsbd-text-muted);
  background: var(--hsbd-bg-main);
  border-radius: var(--hsbd-radius-full);
  padding: 2px 0;
}

.hsbd-tl-badge {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--hsbd-radius-full);
  white-space: nowrap;
}

.hsbd-tl-player {
  font-weight: 600;
  color: var(--hsbd-text-title);
  font-size: 14px;
}

.hsbd-tl-detail {
  color: var(--hsbd-text-muted);
  font-size: 12px;
  width: 100%;
}

.hsbd-tl-left .hsbd-tl-detail {
  text-align: right;
}


/* ==========================================================================
   9. COMPREHENSIVE RESPONSIVE BREAKPOINTS (Mobile & Tablet)
   ========================================================================== */

/* Tablet Landscape & Medium Desktops (<= 1024px) */
@media (max-width: 1024px) {
  .hsbd-container {
    padding: 0 20px;
  }

  .hsbd-header-search {
    width: 220px;
  }

  .hsbd-clubs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .hsbd-home-layout,
  .hsbd-club-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .hsbd-home-3col {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .hsbd-players-grid,
  .hsbd-trophies-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  
  .hsbd-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Tablet Portrait & Mobile Devices (<= 768px) */
@media (max-width: 768px) {
  .hsbd-container {
    padding: 0 16px;
  }

  /* Header on Mobile: Hide Desktop Search & Nav, Show Mobile Action Buttons */
  .hsbd-header {
    padding: 10px 0;
  }

  .hsbd-header-inner {
    gap: 12px;
  }

  /* ABSOLUTELY HIDE DESKTOP INLINE SEARCH ON MOBILE */
  .hsbd-header-search,
  .hsbd-header .hsbd-header-search,
  form.hsbd-header-search {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  .hsbd-header-mobile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Mobile Drawer Menu */
  .hsbd-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: var(--hsbd-dark-header);
    padding: 70px 16px 24px 16px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hsbd-nav.is-open {
    right: 0;
  }

  .hsbd-nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hsbd-nav-item:last-child {
    border-bottom: none;
  }

  .hsbd-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--hsbd-radius-sm);
  }

  /* Demo Toolbar */
  .hsbd-demo-toolbar {
    padding: 8px 16px;
    font-size: 12px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .hsbd-toolbar-title {
    width: 100%;
    justify-content: center;
  }

  .hsbd-demo-btns {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .hsbd-btn-toggle {
    padding: 4px 10px;
    font-size: 11.5px;
  }

  /* Hero Search Card */
  .hsbd-hero-search {
    padding: 24px 0 12px 0;
    margin-bottom: 8px;
  }

  .hsbd-hero-card {
    padding: 24px 18px;
    margin-bottom: 24px;
    border-radius: var(--hsbd-radius-sm);
  }

  .hsbd-hero-title {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .hsbd-hero-sub {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .hsbd-search-box {
    margin-bottom: 14px;
    padding: 3px 3px 3px 14px;
  }

  .hsbd-search-box input {
    padding: 8px 0;
  }

  .hsbd-search-btn {
    width: 42px;
    height: 42px;
  }

  /* Section Spacing & Headers */
  .hsbd-section {
    padding-bottom: 32px;
    margin-bottom: 4px;
  }

  .hsbd-sec-header {
    margin-bottom: 14px;
    gap: 8px;
  }

  .hsbd-sec-title {
    font-size: 16.5px;
    letter-spacing: -0.01em;
  }

  .hsbd-sec-link {
    font-size: 13px;
  }

  /* Grids & Cards */
  .hsbd-clubs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .hsbd-club-card {
    padding: 16px 10px;
    border-radius: var(--hsbd-radius-sm);
  }

  .hsbd-club-logo {
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
  }

  .hsbd-club-name {
    font-size: 14px;
  }

  .hsbd-club-meta {
    font-size: 12px;
  }

  .hsbd-home-3col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hsbd-card {
    padding: 18px 14px;
    border-radius: var(--hsbd-radius-sm);
  }

  /* Breadcrumb */
  .hsbd-breadcrumb {
    padding: 10px 0;
    font-size: 11.5px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hsbd-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  /* Club Hero */
  .hsbd-club-hero {
    padding: 22px 16px;
    border-radius: var(--hsbd-radius);
    margin-bottom: 16px;
  }

  .hsbd-club-hero-content {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .hsbd-club-hero-logo {
    width: 76px;
    height: 76px;
    padding: 8px;
    border-radius: 12px;
  }

  .hsbd-club-hero-title {
    font-size: 24px;
  }

  .hsbd-club-hero-sub {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .hsbd-club-tags {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
  }

  /* 2-Column Grid on Mobile with Strict minmax(0, 1fr) Overflow Prevention */
  .hsbd-club-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
  }

  .hsbd-stat-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .hsbd-stat-item .hsbd-stat-content,
  .hsbd-stat-item > div:not(.hsbd-stat-icon) {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .hsbd-stat-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .hsbd-stat-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 0 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hsbd-stat-val {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  /* Tabs */
  .hsbd-tabs-bar {
    padding: 4px;
    gap: 4px;
    margin-bottom: 18px;
  }

  .hsbd-tab-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 38px;
    border-radius: var(--hsbd-radius-sm);
  }

  /* Scoreboard & Matches */
  .hsbd-matches-duo {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hsbd-match-card {
    padding: 14px 12px;
  }

  .hsbd-scoreboard {
    margin: 10px 0;
  }

  .hsbd-score-team {
    width: auto;
    flex: 1;
    max-width: 105px;
    min-width: 65px;
  }

  .hsbd-score-team img {
    width: 32px;
    height: 32px;
  }

  .hsbd-score-team-name {
    font-size: 11.5px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .hsbd-score-display {
    font-size: 20px;
    padding: 3px 12px;
    letter-spacing: 1px;
  }

  .hsbd-countdown {
    gap: 6px;
    margin-top: 8px;
  }

  .hsbd-count-box {
    min-width: 38px;
    padding: 4px 6px;
  }

  .hsbd-count-val {
    font-size: 14px;
  }

  .hsbd-count-lbl {
    font-size: 8.5px;
  }

  /* Players & Trophies Grid */
  .hsbd-players-grid,
  .hsbd-trophies-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .hsbd-player-card {
    padding: 10px 6px;
  }

  .hsbd-player-avatar {
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
  }

  .hsbd-player-name {
    font-size: 12px;
  }

  .hsbd-player-pos {
    font-size: 10.5px;
  }

  .hsbd-trophy-card {
    padding: 10px 6px;
  }

  .hsbd-trophy-count {
    font-size: 20px;
    gap: 4px;
  }

  .hsbd-trophy-icon {
    width: 18px;
    height: 18px;
  }

  .hsbd-trophy-name {
    font-size: 11px;
  }

  /* Info table */
  .hsbd-info-table {
    font-size: 13px;
  }

  .hsbd-info-table td {
    padding: 8px 0;
  }

  .hsbd-info-label {
    font-size: 12.5px;
    width: 45%;
  }

  .hsbd-info-val {
    font-size: 13px;
  }

  /* Footer */
  .hsbd-footer {
    padding-top: 32px;
    margin-top: 28px;
  }

  .hsbd-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 28px;
  }

  .hsbd-footer-col h4 {
    margin-bottom: 10px;
    font-size: 14px;
  }
}

/* Medium Mobile & Narrow Screens (<= 640px) */
@media (max-width: 640px) {
  /* Standings */
  .hsbd-standings-table {
    font-size: 12.5px;
  }

  .hsbd-standings-table th,
  .hsbd-standings-table td {
    padding: 7px 4px;
  }

  .hsbd-standings-table thead th {
    font-size: 10px;
  }

  .hsbd-standings-table .hsbd-st-rank {
    width: 22px;
  }

  .hsbd-standings-table .hsbd-st-club a,
  .hsbd-standings-table .hsbd-st-club span {
    gap: 5px;
    font-size: 12.5px;
  }

  .hsbd-standings-table .hsbd-st-club img {
    width: 18px;
    height: 18px;
  }

  .hsbd-standings-table .hsbd-st-hide {
    display: none;
  }

  /* Timeline */
  .hsbd-tl-row {
    grid-template-columns: 1fr 38px 1fr;
    gap: 6px;
    padding: 6px 0;
  }

  .hsbd-tl-min {
    font-size: 11.5px;
    padding: 1px 0;
  }

  .hsbd-tl-badge {
    font-size: 9.5px;
    padding: 1px 6px;
  }

  .hsbd-tl-player {
    font-size: 12px;
  }

  .hsbd-tl-detail {
    font-size: 10.5px;
  }

  /* Archive Head & Pagination */
  .hsbd-archive-head {
    margin-bottom: 14px;
  }

  .hsbd-count-badge {
    font-size: 12px;
    padding: 3px 10px;
  }

  .hsbd-pagination {
    margin-top: 20px;
    gap: 4px;
  }

  .hsbd-pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
  }
}

/* Standard Mobile Phones (<= 480px) */
@media (max-width: 480px) {
  .hsbd-header {
    padding: 8px 0;
  }

  .hsbd-header-inner {
    gap: 8px;
  }

  .hsbd-brand-logo {
    width: 34px;
    height: 34px;
  }

  .hsbd-brand-text {
    font-size: 15px;
  }

  .hsbd-brand-text span {
    font-size: 13px;
  }

  .hsbd-mobile-btn {
    width: 36px;
    height: 36px;
  }

  .hsbd-toggle-icon {
    font-size: 18px;
  }

  .hsbd-hero-card {
    padding: 20px 14px;
  }

  .hsbd-hero-title {
    font-size: 20px;
  }

  .hsbd-hero-sub {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .hsbd-search-tags {
    gap: 6px;
    font-size: 12px;
  }

  .hsbd-tag {
    padding: 4px 10px;
    font-size: 12px;
  }

  .hsbd-clubs-grid {
    gap: 8px;
  }

  .hsbd-club-card {
    padding: 12px 8px;
  }

  .hsbd-club-logo {
    width: 40px;
    height: 40px;
  }

  .hsbd-club-name {
    font-size: 13px;
  }

  .hsbd-club-meta {
    font-size: 11px;
  }

  .hsbd-club-hero-title {
    font-size: 20px;
  }

  .hsbd-players-grid,
  .hsbd-trophies-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* Compact Mobile Screens (<= 375px) */
@media (max-width: 375px) {
  .hsbd-container {
    padding: 0 12px;
  }

  .hsbd-brand-text {
    font-size: 14px;
  }

  .hsbd-brand-text span {
    font-size: 12px;
  }

  .hsbd-hero-title {
    font-size: 18px;
  }

  .hsbd-club-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
  }

  .hsbd-stat-val {
    font-size: 12px !important;
  }

  .hsbd-score-display {
    font-size: 18px;
    padding: 2px 8px;
  }

  .hsbd-countdown {
    gap: 4px;
  }

  .hsbd-count-box {
    min-width: 32px;
    padding: 3px 4px;
  }

  .hsbd-count-val {
    font-size: 13px;
  }

  .hsbd-count-lbl {
    font-size: 8px;
  }
}

/* ==========================================================================
   CLUB HUB / ARCHIVE (archive-hsbd_club.php)
   Tái hiện chính xác mockup Câu lạc bộ bóng đá
   ========================================================================== */

.hsbd-club-hub-main {
  padding: 24px 0 60px;
}

/* 1. Hero Banner */
.hsbd-club-hub-hero {
  background: radial-gradient(circle at 80% 40%, rgba(20, 55, 105, 0.45) 0%, rgba(7, 18, 33, 0.95) 70%),
              linear-gradient(135deg, #071221 0%, #0a1c36 50%, #06111f 100%);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.hsbd-hub-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 220px;
  position: relative;
}

.hsbd-hub-hero-content {
  flex: 1 1 50%;
  padding: 32px 36px;
  max-width: 520px;
  z-index: 2;
  position: relative;
}

.hsbd-hub-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.hsbd-hub-hero-line {
  width: 44px;
  height: 3.5px;
  background: #00a651;
  border-radius: 2px;
  margin: 8px 0 14px;
}

.hsbd-hub-hero-sub {
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
  font-weight: 400;
}

.hsbd-hub-hero-visual {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52%;
  max-width: 600px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 15%, black 40%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 15%, black 40%);
}

.hsbd-hub-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 2. Controls: Search + Filter Pills */
.hsbd-club-hub-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.hsbd-hub-search-box {
  position: relative;
  flex: 0 0 220px;
  height: 38px;
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}

.hsbd-hub-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
}

.hsbd-hub-search-input,
#hsbd-club-search-input,
#hsbd-player-search-input,
.hsbd-wrap input.hsbd-hub-search-input,
.hsbd-wrap input#hsbd-club-search-input,
.hsbd-wrap input#hsbd-player-search-input {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  line-height: 36px !important;
  padding: 0 16px 0 38px !important;
  border-radius: 9999px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  font-size: 13px !important;
  color: #0f172a !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  vertical-align: middle !important;
  transition: all 0.2s ease;
}

.hsbd-hub-search-input::placeholder,
#hsbd-club-search-input::placeholder,
#hsbd-player-search-input::placeholder,
.hsbd-wrap input.hsbd-hub-search-input::placeholder,
.hsbd-wrap input#hsbd-club-search-input::placeholder,
.hsbd-wrap input#hsbd-player-search-input::placeholder {
  /* #94a3b8 is 2.8:1 on white, below the 4.5:1 floor. #64748b clears it. */
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 36px !important;
  opacity: 1 !important;
}

.hsbd-hub-search-input:focus,
#hsbd-club-search-input:focus,
#hsbd-player-search-input:focus,
.hsbd-wrap input.hsbd-hub-search-input:focus,
.hsbd-wrap input#hsbd-club-search-input:focus,
.hsbd-wrap input#hsbd-player-search-input:focus {
  border-color: #00a651 !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.12) !important;
}

.hsbd-hub-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 !important;
}

.hsbd-pill,
.hsbd-wrap button.hsbd-pill,
.hsbd-wrap .hsbd-pill {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  line-height: 36px !important;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap !important;
  text-transform: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  outline: none !important;
  text-decoration: none !important;
}

.hsbd-pill:hover,
.hsbd-wrap button.hsbd-pill:hover,
.hsbd-wrap .hsbd-pill:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.hsbd-pill.active,
.hsbd-wrap button.hsbd-pill.active,
.hsbd-wrap .hsbd-pill.active {
  background: #00a651 !important;
  color: #ffffff !important;
  border-color: #00a651 !important;
  box-shadow: 0 2px 8px rgba(0, 166, 81, 0.3) !important;
}

/* 3. Section Header */
.hsbd-hub-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hsbd-hub-sec-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbd-hub-sec-badge-bar {
  width: 4px;
  height: 18px;
  background: #00a651;
  border-radius: 2px;
  display: inline-block;
}

.hsbd-hub-sec-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.3px;
  margin: 0;
  text-transform: uppercase;
}

.hsbd-hub-icon-trophy,
.hsbd-hub-icon-globe {
  font-size: 18px;
}

.hsbd-hub-view-all {
  font-size: 13px;
  font-weight: 600;
  color: #00a651;
  text-decoration: none;
  transition: opacity 0.2s;
}

.hsbd-hub-view-all:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* 4. Section: CLB Nổi bật */
.hsbd-hub-featured-sec {
  margin-bottom: 32px;
}

.hsbd-hub-featured-carousel-outer {
  position: relative;
  width: 100%;
}

.hsbd-hub-featured-scroll-wrap {
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 14px;
}

.hsbd-hub-featured-scroll-wrap::-webkit-scrollbar {
  display: none;
}

.hsbd-hub-featured-grid {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

.hsbd-hub-scroll-btn,
.hsbd-wrap button.hsbd-hub-scroll-btn,
.hsbd-wrap .hsbd-hub-scroll-btn {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e293b !important;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  outline: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.hsbd-hub-scroll-btn svg,
.hsbd-wrap button.hsbd-hub-scroll-btn svg,
.hsbd-wrap .hsbd-hub-scroll-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  stroke: #1e293b !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  transform: translateX(1px);
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.hsbd-hub-scroll-btn:hover,
.hsbd-wrap button.hsbd-hub-scroll-btn:hover {
  background: #00a651 !important;
  border-color: #00a651 !important;
  box-shadow: 0 6px 18px rgba(0, 166, 81, 0.35) !important;
}

.hsbd-hub-scroll-btn:hover svg,
.hsbd-wrap button.hsbd-hub-scroll-btn:hover svg {
  stroke: #ffffff !important;
  transform: translateX(2px);
}

.hsbd-featured-club-card {
  flex: 0 0 178px;
  width: 178px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.hsbd-featured-club-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.hsbd-featured-club-crest-wrap {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.hsbd-featured-club-crest {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hsbd-featured-club-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
  line-height: 1.25;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsbd-featured-club-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 12px;
  width: 100%;
}

.hsbd-featured-club-country {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hsbd-featured-club-league {
  color: #64748b;
  font-weight: 500;
}

.hsbd-featured-club-stats {
  width: 100%;
  display: flex;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
  justify-content: space-around;
}

.hsbd-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hsbd-stat-num {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.hsbd-stat-won {
  color: #00a651;
}

.hsbd-stat-lost {
  color: #ef4444;
}

.hsbd-stat-lbl {
  font-size: 11px;
  color: #64748b;
  text-transform: capitalize !important;
  margin-top: 1px;
  font-weight: 500;
}

/* 5. Two-Column Layout */
.hsbd-hub-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 26px;
}

/* 6. Leagues Row List */
.hsbd-hub-leagues-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hsbd-hub-league-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.hsbd-hub-league-badge-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbd-hub-league-logo-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsbd-hub-league-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hsbd-hub-league-logo-fallback {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
}

.hsbd-hub-league-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hsbd-hub-league-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.hsbd-hub-league-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
}

.hsbd-hub-league-count {
  font-size: 11px;
  color: #94a3b8;
}

.hsbd-hub-league-link {
  font-size: 11px;
  font-weight: 600;
  color: #00a651;
  text-decoration: none;
  margin-top: 3px;
}

.hsbd-hub-league-link:hover {
  text-decoration: underline;
}

.hsbd-hub-league-clubs-scroll {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hsbd-hub-league-clubs-track {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 32px 4px 4px;
}

.hsbd-hub-league-clubs-track::-webkit-scrollbar {
  display: none;
}

.hsbd-hub-league-club-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex: 0 0 64px;
  text-align: center;
  transition: transform 0.2s;
}

.hsbd-hub-league-club-item:hover {
  transform: translateY(-3px);
}

.hsbd-hub-club-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.hsbd-hub-club-avatar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.hsbd-hub-club-label {
  font-size: 11px;
  color: #334155;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.hsbd-hub-row-next-btn,
.hsbd-wrap button.hsbd-hub-row-next-btn,
.hsbd-wrap .hsbd-hub-row-next-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  z-index: 5;
  transition: all 0.2s ease;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  outline: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.hsbd-hub-row-next-btn svg,
.hsbd-wrap button.hsbd-hub-row-next-btn svg,
.hsbd-wrap .hsbd-hub-row-next-btn svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  stroke: #475569 !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  transform: translateX(1px);
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.hsbd-hub-row-next-btn:hover,
.hsbd-wrap button.hsbd-hub-row-next-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

.hsbd-hub-row-next-btn:hover svg,
.hsbd-wrap button.hsbd-hub-row-next-btn:hover svg {
  stroke: #0f172a !important;
  transform: translateX(2px);
}

/* 7. CLB theo quốc tế */
.hsbd-hub-intl-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.hsbd-hub-intl-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.hsbd-hub-intl-card:hover {
  border-color: #00a651;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.hsbd-hub-intl-flag-wrap {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.hsbd-hub-intl-other-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.hsbd-hub-intl-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
  white-space: nowrap;
}

.hsbd-hub-intl-count {
  font-size: 11px;
  color: #00a651;
  font-weight: 600;
}

/* 8. Sidebar Widgets */
.hsbd-hub-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hsbd-hub-widget {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 18px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.hsbd-widget-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

/* Widget 1: Top CLB xem nhiều */
.hsbd-hub-top-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hsbd-hub-top-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}

.hsbd-hub-top-item:hover {
  background: #f8fafc;
}

.hsbd-hub-rank-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbd-hub-rank-badge.is-first {
  background: #00a651;
  color: #ffffff;
}

.hsbd-hub-top-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-hub-top-info {
  display: flex;
  flex-direction: column;
}

.hsbd-hub-top-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.hsbd-hub-top-views {
  font-size: 11px;
  color: #94a3b8;
}

/* Widget 2: CLB theo quốc gia */
.hsbd-hub-country-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hsbd-hub-country-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.hsbd-hub-country-item:hover {
  background: #f8fafc;
}

.hsbd-hub-country-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbd-hub-country-name {
  font-size: 13px;
  color: #334155;
  font-weight: 500;
}

.hsbd-hub-country-count {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.hsbd-hub-country-more {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #00a651;
  text-decoration: none;
}

.hsbd-hub-country-more:hover {
  text-decoration: underline;
}

/* Widget 3: CTA Banner */
.hsbd-hub-cta-widget {
  background: linear-gradient(135deg, #052618 0%, #0d4a2d 60%, #005a30 100%);
  border: none;
  color: #ffffff;
  border-radius: 14px;
  padding: 22px 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 90, 48, 0.25);
}

.hsbd-hub-cta-content {
  z-index: 2;
  max-width: 175px;
}

.hsbd-hub-cta-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.35;
}

.hsbd-hub-cta-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hsbd-hub-cta-checklist li {
  font-size: 11px;
  color: #d1fae5;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.hsbd-cta-check {
  font-weight: 900;
  color: #34d399;
}

.hsbd-hub-cta-btn {
  display: inline-block;
  background: #00a651;
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 166, 81, 0.4);
  transition: all 0.2s;
}

.hsbd-hub-cta-btn:hover {
  background: #00c761;
  transform: translateY(-1px);
}

.hsbd-hub-cta-img-box {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 140px;
  height: 140px;
  z-index: 1;
  pointer-events: none;
}

.hsbd-hub-cta-ball {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  border-radius: 50%;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

/* Footer Mockup Styles */
.hsbd-footer-grid-mockup {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr;
  gap: 36px;
}

.hsbd-footer-brand-col {
  max-width: 320px;
}

.hsbd-footer-tagline {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
  margin-top: 8px;
}

.hsbd-footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.hsbd-social-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hsbd-social-fb {
  background: #1877f2 !important;
  color: #ffffff !important;
}

.hsbd-social-yt {
  background: #ff0000 !important;
  color: #ffffff !important;
}

.hsbd-social-tt {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hsbd-social-icon:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.hsbd-circle-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.hsbd-hub-no-results {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  margin: 16px 0 24px;
}

/* ==========================================================================
   RESPONSIVE: Tablet & Mobile
   ========================================================================== */
@media (max-width: 992px) {
  .hsbd-hub-layout {
    grid-template-columns: 1fr;
  }

  .hsbd-hub-intl-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hsbd-footer-grid-mockup {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .hsbd-footer-grid-mockup {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hsbd-club-hub-hero {
    border-radius: 12px;
  }

  .hsbd-hub-hero-inner {
    flex-direction: column;
    min-height: auto;
  }

  .hsbd-hub-hero-content {
    padding: 24px 20px;
    max-width: 100%;
  }

  .hsbd-hub-hero-title {
    font-size: 24px;
  }

  .hsbd-hub-hero-visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 160px;
  }

  .hsbd-hub-hero-visual::before {
    background: linear-gradient(180deg, #071221 0%, rgba(7, 18, 33, 0) 50%);
  }

  .hsbd-club-hub-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .hsbd-hub-search-box {
    flex: 1 1 auto;
    width: 100%;
  }

  /* A flex item defaults to min-width: auto, so a nowrap pill row grew to the
     width of its content — 1161px inside a 390px screen — and overflow-x had
     nothing to scroll because the element itself was that wide. The row is
     held to the column's width, so the pills past "Europa League" become
     reachable instead of being clipped away. */
  .hsbd-hub-filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    padding-bottom: 6px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hsbd-hub-filter-pills > .hsbd-pill {
    flex: 0 0 auto;
  }

  /* The scrollbar is hidden, so the row needs some other sign that it
     continues past the edge. */
  .hsbd-hub-filter-pills {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }

  .hsbd-hub-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .hsbd-hub-league-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .hsbd-hub-intl-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   10. PLAYER HUB & SINGLE PLAYER MODULE
   ========================================================================== */

/* Jersey SVG Badge */
.hsbd-jersey-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbd-jersey-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}

.hsbd-jersey-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  font-size: 11px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
  pointer-events: none;
}

/* Player Hub Header */
.hsbd-hub-header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 12px;
  margin-bottom: 24px;
}

.hsbd-hub-header-left {
  flex: 1;
}

.hsbd-hub-main-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--hsbd-text-title);
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}

.hsbd-hub-main-desc {
  font-size: 14px;
  color: var(--hsbd-text-muted);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.hsbd-hub-count-badge {
  display: inline-flex;
  align-items: center;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
}

.hsbd-hub-header-right {
  flex-shrink: 0;
  width: 280px;
}

/* 3-Tier Filter Card */
.hsbd-hub-filter-card {
  background: #ffffff;
  border: 1px solid var(--hsbd-border-color);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--hsbd-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Filter Results Bar & Dynamic Filter Mode */
.hsbd-filter-results-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 18px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.hsbd-filter-results-title {
  font-size: 14px;
  color: #15803d;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hsbd-active-filter-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hsbd-active-tag {
  background: #ffffff;
  border: 1px solid #86efac;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}

.hsbd-btn-reset-filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.hsbd-btn-reset-filter:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

.hsbd-filtered-results-grid {
  display: none;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}


.hsbd-filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hsbd-filter-label {
  width: 72px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.hsbd-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

/* A row of pills that introduces the content under it has to clear it. Four
   blocks had each grown their own margin for this and a fifth had none, so
   the season pills sat directly on top of "TỔNG QUAN". Named rather than
   inferred: pills inside a section header are placed by that header, and a
   rule that guessed which was which would get one of them wrong. */
.hsbd-player-season-pills,
.hsbd-match-tabs,
.hsbd-standings-tabs,
.hsbd-transfer-filter {
  margin-bottom: 20px;
}

/* A filter chip is scanned, not read. Letting it wrap turned "Tất cả" into
   "TẤT / CẢ" and "Tây Ban Nha" into three stacked lines inside a 32px pill,
   and the uppercase made every label longer than it needed to be. Chips size
   to their text and stay on one line; the row scrolls instead. */
.hsbd-filter-pill {
  white-space: nowrap !important;
  text-transform: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.hsbd-filter-pill:hover:not(.is-active) {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.hsbd-filter-pill.is-active {
  background: #00a651 !important;
  border-color: #00a651 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.hsbd-filter-dropdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
}

/* Section Header Shared */
.hsbd-hub-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hsbd-hub-sec-header--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hsbd-hub-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbd-hub-sec-title h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--hsbd-text-title);
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hsbd-hub-sec-icon {
  font-size: 16px;
  line-height: 1;
}

.hsbd-hub-sec-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbd-hub-view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbd-primary);
  text-decoration: none;
  transition: var(--hsbd-transition);
}

.hsbd-hub-view-all:hover {
  text-decoration: underline;
}

/* Featured Player Carousel Card */
.hsbd-hub-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 0 12px 0;
}

.hsbd-hub-carousel-track::-webkit-scrollbar {
  display: none;
}

.hsbd-player-card--featured {
  flex: 0 0 calc(16.666% - 14px);
  min-width: 170px;
  max-width: 190px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.hsbd-player-card--featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.hsbd-player-card__avatar-wrap {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsbd-canonical-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hsbd-canonical-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hsbd-canonical-avatar-fallback {
  color: #94a3b8;
  font-size: 23px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hsbd-canonical-avatar-fallback svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.hsbd-canonical-avatar--small {
  width: 44px;
  height: 44px;
  border-width: 1px;
}

.hsbd-canonical-avatar--small .hsbd-canonical-avatar-fallback {
  font-size: 16px;
}

.hsbd-player-card__name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.hsbd-player-card__pos {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 3px;
}

.hsbd-player-card__club {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.hsbd-player-card__country {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #64748b;
  margin-top: auto;
}

/* Two-Column Section */
/* A grid item's min-width is auto, so a column refuses to shrink below its
   widest child. The main column measured 462px inside a 414px screen and
   everything on its right edge — the "Xem tất cả" link most visibly — was
   clipped away. Both columns are allowed to shrink. */
.hsbd-player-two-col-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.hsbd-player-col-main,
.hsbd-player-col-side {
  min-width: 0;
}

.hsbd-player-league-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hsbd-player-league-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.hsbd-player-league-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.hsbd-player-league-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbd-player-league-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hsbd-player-league-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.hsbd-player-league-count {
  font-size: 12px;
  color: #64748b;
}

.hsbd-player-league-link {
  font-size: 13px;
  font-weight: 600;
  color: #00a651;
  text-decoration: none;
}

.hsbd-player-mini-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hsbd-player-mini-row::-webkit-scrollbar {
  display: none;
}

.hsbd-player-mini-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  color: inherit;
  width: 68px;
  text-align: center;
  transition: transform 0.15s ease;
}

.hsbd-player-mini-item:hover {
  transform: translateY(-2px);
}

.hsbd-player-mini-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsbd-player-mini-avatar__image {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
}

.hsbd-player-mini-avatar .hsbd-canonical-avatar-fallback[hidden] {
  display: none;
}

.hsbd-player-mini-name {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.hsbd-league-footer-action {
  margin-top: 14px;
  text-align: center;
}

.hsbd-btn-outline-all {
  display: inline-block;
  width: 100%;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  text-align: center;
  transition: all 0.15s ease;
}

.hsbd-btn-outline-all:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #00a651;
}

/* Trending Top Views Card */
.hsbd-player-trending-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.hsbd-player-trending-list {
  display: flex;
  flex-direction: column;
}

.hsbd-player-trending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none !important;
  color: inherit;
  transition: background 0.15s ease;
}

.hsbd-player-trending-item:last-child {
  border-bottom: none;
}

.hsbd-player-rank {
  width: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  flex-shrink: 0;
}

.hsbd-player-rank.is-top {
  color: #0f172a;
  font-weight: 800;
}

.hsbd-player-trending-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbd-player-trending-meta {
  flex: 1;
  min-width: 0;
}

.hsbd-player-trending-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsbd-player-trending-club {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
}

.hsbd-player-views-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  padding: 3px 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.hsbd-trending-card-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
}

.hsbd-trending-view-all {
  font-size: 12px;
  font-weight: 600;
  color: #00a651;
  text-decoration: none;
}

/* Position Grid (4 Colorful Cards) */
.hsbd-position-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* A row, not a tile: a position carries a name, a code and a count, which is
   too little to justify a centred card 118px tall. Name and count read left,
   chevron right. */
.hsbd-pos-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.hsbd-pos-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.hsbd-pos-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.hsbd-pos-card--gk .hsbd-pos-card__icon {
  background: #dcfce7;
  color: #15803d;
}

.hsbd-pos-card--df .hsbd-pos-card__icon {
  background: #e0f2fe;
  color: #0284c7;
}

.hsbd-pos-card--mf .hsbd-pos-card__icon {
  background: #fef3c7;
  color: #d97706;
}

.hsbd-pos-card--fw .hsbd-pos-card__icon {
  background: #fee2e2;
  color: #dc2626;
}

/* These were inline spans: margin-bottom did nothing and they ran together as
   "THỦ MÔN920 cầu thủ". The position is the heading; its code and count are
   the detail under it. */
.hsbd-pos-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hsbd-pos-card__name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.02em;
}

.hsbd-pos-card__count {
  display: block;
  font-size: 12px;
  color: #64748b;
}

.hsbd-pos-card__arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #00a651;
}

/* All Players Grid & Sort Controls */
.hsbd-hub-sort-controls {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap;
}

.hsbd-sort-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.hsbd-sort-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hsbd-text-muted, #64748b) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.hsbd-sort-select {
  height: 34px !important;
  line-height: 32px !important;
  min-height: 34px !important;
  padding: 0 28px 0 12px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border: 1px solid var(--hsbd-border-color, #e2e8f0) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hsbd-text-title, #0f172a) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: none !important;
  display: inline-block !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s ease;
}

.hsbd-sort-select:focus,
.hsbd-sort-select:hover {
  border-color: var(--hsbd-primary, #00a651) !important;
}

.hsbd-all-players-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.hsbd-featured-players-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.hsbd-featured-players-grid .hsbd-player-card,
.hsbd-featured-players-grid .hsbd-player-card--featured {
  flex: initial !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.hsbd-featured-players-grid .hsbd-player-card:hover,
.hsbd-featured-players-grid .hsbd-player-card--featured:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.hsbd-player-card--standard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.hsbd-player-card--standard:hover {
  border-color: #00a651;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.hsbd-player-card--standard .hsbd-player-card__avatar-wrap {
  margin-bottom: 0;
  flex-shrink: 0;
}

.hsbd-player-card--standard .hsbd-player-card__avatar {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 50%;
  object-fit: contain;
  background: #f8fafc;
}

.hsbd-player-card--standard .hsbd-player-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.hsbd-player-card--standard .hsbd-player-card__name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.hsbd-player-card--standard .hsbd-player-card__pos {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 0;
}

/* Numbered Pagination */
.hsbd-pagination-wrap ul.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hsbd-pagination-wrap .page-numbers li a,
.hsbd-pagination-wrap .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.hsbd-pagination-wrap .page-numbers li span.current {
  background: #00a651;
  border-color: #00a651;
  color: #ffffff;
}

.hsbd-pagination-wrap .page-numbers li a:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #00a651;
}

/* Single Player Hero Extras */
.hsbd-player-hero-avatar-wrap {
  width: 152px;
  height: 152px;
  border-radius: 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* ==========================================================================
   COMPETITION HUB & DETAIL STYLES
   ========================================================================== */

/* 3-Column Hub Grid */
.hsbd-comp-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Modern Competition Card */
.hsbd-comp-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--hsbd-border-color, #e2e8f0);
  border-radius: 12px;
  padding: 28px 20px 20px;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.hsbd-comp-card:hover {
  transform: translateY(-4px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.03);
}

.hsbd-comp-card__logo-wrap {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.hsbd-comp-card__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.hsbd-comp-card:hover .hsbd-comp-card__logo {
  transform: scale(1.06);
}

.hsbd-comp-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--hsbd-text-title, #0f172a);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.hsbd-comp-card__country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--hsbd-text-muted, #64748b);
  margin-bottom: 6px;
}

.hsbd-comp-card__subtitle {
  font-size: 13px;
  color: var(--hsbd-text-muted, #64748b);
  margin-bottom: 6px;
}

.hsbd-comp-card__clubs {
  font-size: 13px;
  color: var(--hsbd-text-muted, #64748b);
  margin-bottom: 16px;
}

.hsbd-comp-card__btn {
  width: 100%;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--hsbd-bg-subtle, #f0fdf4);
  color: var(--hsbd-primary, #00a651);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  transition: all 0.2s ease;
}

.hsbd-comp-card:hover .hsbd-comp-card__btn {
  background: var(--hsbd-primary, #00a651);
  color: #ffffff;
}

/* Competition Hero Customizations */
.hsbd-competition-hero .hsbd-comp-hero-logo-wrap {
  width: 92px;
  height: 92px;
  background: #ffffff;
  border-radius: 16px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.hsbd-competition-hero .hsbd-comp-hero-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Upcoming Matches List (Section 3) */
.hsbd-comp-matches-card {
  border: 1px solid var(--hsbd-border-color, #e2e8f0);
  border-radius: 12px;
  background: #ffffff;
}

.hsbd-comp-matches-list {
  display: flex;
  flex-direction: column;
}

.hsbd-comp-match-row {
  display: grid;
  grid-template-columns: 80px 1fr 40px 1fr 180px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hsbd-border-color, #f1f5f9);
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.15s ease;
}

.hsbd-comp-match-row:last-child {
  border-bottom: none;
}

.hsbd-comp-match-row:hover {
  background: #f8fafc;
}

.hsbd-comp-match-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hsbd-match-hour {
  font-size: 14px;
  font-weight: 700;
  color: var(--hsbd-text-title, #0f172a);
  line-height: 1.2;
}

.hsbd-match-date {
  font-size: 11px;
  color: var(--hsbd-text-muted, #94a3b8);
}

.hsbd-comp-match-team {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbd-comp-match-team--home {
  justify-content: flex-end;
  text-align: right;
}

.hsbd-comp-match-team--away {
  justify-content: flex-start;
  text-align: left;
}

.hsbd-comp-team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--hsbd-text-title, #0f172a);
}

.hsbd-comp-team-crest-wrap {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsbd-comp-team-crest {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hsbd-comp-team-crest-placeholder {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
}

.hsbd-comp-match-vs {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbd-text-muted, #94a3b8);
  text-transform: lowercase;
}

.hsbd-comp-match-league {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.hsbd-comp-match-league-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hsbd-comp-match-league-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--hsbd-text-muted, #64748b);
  white-space: nowrap;
}

/* ==========================================================================
   SINGLE CLUB: ARSENAL-STYLE HERO, TABS, SOCCER PITCH & STATS
   ========================================================================== */

/* Single Club Hero Card */
.hsbd-club-hero-card {
  background: #ffffff;
  border: 1px solid var(--hsbd-border, #e2e8f0);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.hsbd-club-hero-main {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.hsbd-club-hero-crest-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.hsbd-club-hero-crest {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hsbd-club-hero-info {
  flex: 1;
}

.hsbd-club-hero-name {
  font-size: 26px;
  font-weight: 900;
  color: var(--hsbd-text-title, #0f172a);
  text-transform: uppercase;
  margin: 0 0 2px;
  line-height: 1.2;
}

.hsbd-club-hero-fullname {
  font-size: 13px;
  color: var(--hsbd-text-muted, #64748b);
  margin-bottom: 8px;
  font-weight: 500;
}

.hsbd-club-hero-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.hsbd-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbd-text-body, #334155);
}

.hsbd-hero-badge--league {
  color: var(--hsbd-text-muted, #64748b);
}

.hsbd-hero-dot {
  color: #cbd5e1;
  font-size: 11px;
}

.hsbd-club-hero-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: center;
}

.hsbd-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hsbd-text-muted, #64748b);
}

.hsbd-hero-meta-item svg {
  color: #94a3b8;
  flex-shrink: 0;
}

.hsbd-meta-label {
  color: #94a3b8;
}

.hsbd-meta-val {
  font-weight: 600;
  color: var(--hsbd-text-title, #0f172a);
}

.hsbd-meta-link {
  font-weight: 600;
  color: var(--hsbd-primary, #00a651);
  text-decoration: none;
}

.hsbd-meta-link:hover {
  text-decoration: underline;
}

.hsbd-club-hero-stadium {
  width: 320px;
  height: 136px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
}

.hsbd-club-stadium-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hsbd-stadium-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
}

/* Sub-navigation Pills Bar */
.hsbd-club-nav-bar {
  background: #0f172a;
  border-radius: 12px;
  padding: 6px 8px;
  margin-bottom: 22px;
}

.hsbd-club-nav-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hsbd-club-nav-pills::-webkit-scrollbar {
  display: none;
}

.hsbd-club-nav-pill {
  padding: 10px 18px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.hsbd-club-nav-pill:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.hsbd-club-nav-pill.active {
  color: #ffffff !important;
  background: var(--hsbd-primary, #00a651) !important;
  box-shadow: 0 2px 8px rgba(0, 166, 81, 0.3) !important;
}

/* Tab Panes */
.hsbd-tab-pane {
  display: none;
}

.hsbd-tab-pane.active {
  display: block;
  animation: hsbdFadeIn 0.25s ease;
}

@keyframes hsbdFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Row 1: Trio Match Cards */
.hsbd-club-trio-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}

.hsbd-match-mini-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hsbd-match-mini-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--hsbd-text-muted, #94a3b8);
  margin-bottom: 12px;
}

.hsbd-match-mini-duel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  text-decoration: none !important;
  color: inherit !important;
}

.hsbd-duel-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  width: 72px;
}

.hsbd-duel-crest {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.hsbd-duel-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbd-text-title, #0f172a);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsbd-duel-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hsbd-duel-score {
  font-size: 20px;
  font-weight: 900;
  color: var(--hsbd-text-title, #0f172a);
  letter-spacing: 1px;
}

.hsbd-badge-result {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 10px;
  text-transform: uppercase;
}

.hsbd-badge-result.is-win {
  background: #dcfce7;
  color: #15803d;
}

.hsbd-badge-result.is-draw {
  background: #f1f5f9;
  color: #64748b;
}

.hsbd-badge-result.is-loss {
  background: #fee2e2;
  color: #b91c1c;
}

.hsbd-duel-vs-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hsbd-duel-vs {
  font-size: 14px;
  font-weight: 900;
  color: #94a3b8;
}

.hsbd-countdown-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--hsbd-primary, #00a651);
  white-space: nowrap;
}

.hsbd-form-circles-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 0;
}

.hsbd-form-circles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hsbd-form-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #ffffff !important;
  text-decoration: none !important;
}

.hsbd-form-circle.is-win {
  background: #16a34a;
}

.hsbd-form-circle.is-draw {
  background: #94a3b8;
}

.hsbd-form-circle.is-loss {
  background: #dc2626;
}

.hsbd-form-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--hsbd-text-muted, #64748b);
}

.hsbd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hsbd-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.hsbd-legend-dot.is-win {
  background: #16a34a;
}

.hsbd-legend-dot.is-draw {
  background: #94a3b8;
}

.hsbd-legend-dot.is-loss {
  background: #dc2626;
}

/* Tactical Pitch Row */
.hsbd-club-tactics-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.hsbd-pitch-tactics-card {
  display: flex;
  flex-direction: column;
}

.hsbd-soccer-pitch {
  background: linear-gradient(180deg, #1b8a43 0%, #136a32 100%);
  border-radius: 12px;
  padding: 16px 12px;
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  border: 2px solid #22c55e;
  overflow: hidden;
}

.hsbd-pitch-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.hsbd-pitch-line--center {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.hsbd-pitch-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.hsbd-pitch-box--top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top: none;
}

.hsbd-pitch-box--bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: none;
}

.hsbd-pitch-line-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hsbd-pitch-line-title {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}

.hsbd-pitch-players-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.hsbd-pitch-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: transform 0.15s ease;
}

.hsbd-pitch-player:hover {
  transform: translateY(-2px);
}

.hsbd-pitch-player-name {
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  margin-top: 1px;
  white-space: nowrap;
}

/* Season Stats & Performers */
.hsbd-club-stats-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hsbd-season-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
  margin: 6px 0 10px;
}

.hsbd-season-stat-cell {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 4px;
  border: 1px solid #f1f5f9;
}

.hsbd-season-stat-val {
  font-size: 17px;
  font-weight: 900;
  color: var(--hsbd-text-title, #0f172a);
  display: block;
}

.hsbd-season-stat-label {
  font-size: 10px;
  color: var(--hsbd-text-muted, #64748b);
  display: block;
  margin-top: 2px;
}

.hsbd-performers-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 10px;
}

.hsbd-performer-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s ease;
}

.hsbd-performer-box:hover {
  border-color: var(--hsbd-primary, #00a651);
}

.hsbd-performer-category {
  font-size: 9px;
  font-weight: 700;
  color: var(--hsbd-text-muted, #64748b);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsbd-performer-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hsbd-performer-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--hsbd-text-title, #0f172a);
  display: block;
  line-height: 1.2;
}

.hsbd-performer-stat {
  font-size: 10px;
  font-weight: 600;
  color: var(--hsbd-primary, #00a651);
  display: block;
}

/* Bottom Trio Row */
.hsbd-club-bottom-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hsbd-club-comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none !important;
  color: inherit !important;
}

.hsbd-comp-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbd-comp-row-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.hsbd-comp-row-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--hsbd-text-title, #0f172a);
}

.hsbd-comp-row-season {
  font-size: 11px;
  color: var(--hsbd-text-muted, #94a3b8);
}

.hsbd-related-clubs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0;
}

.hsbd-related-club-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px;
  background: #f8fafc;
  border-radius: 8px;
  text-decoration: none !important;
  color: inherit !important;
}

.hsbd-related-club-crest-wrap {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.hsbd-related-club-crest {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hsbd-related-club-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--hsbd-text-title, #0f172a);
  line-height: 1.2;
}

.hsbd-related-club-league {
  font-size: 9px;
  color: var(--hsbd-text-muted, #94a3b8);
}

/* Trophies in Sidebar */
.hsbd-trophies-list-simple {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hsbd-trophy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f8fafc;
}

.hsbd-trophy-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbd-trophy-row-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--hsbd-text-body, #334155);
}

.hsbd-trophy-row-count {
  font-size: 14px;
  font-weight: 800;
  color: var(--hsbd-text-title, #0f172a);
}

.hsbd-row-highlight {
  background: rgba(239, 68, 68, 0.08) !important;
}

.hsbd-row-highlight td {
  font-weight: 700 !important;
  color: #b91c1c !important;
}

.hsbd-row-highlight a {
  color: #b91c1c !important;
  font-weight: 700 !important;
}
/* ==========================================================================
   14. SINGLE PLAYER PAGE (GIAO DIỆN CẦU THỦ CHI TIẾT)
   ========================================================================== */

/* Player Single Page Container */
.hsbd-player-single-page {
  padding-bottom: 40px;
}

/* Player Hero Banner (Dark Gradient + Dual Cutout) */
.hsbd-player-hero-wrap {
  position: relative;
  background: linear-gradient(135deg, #070d18 0%, #0f1c2e 50%, #0a1322 100%);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hsbd-player-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 10% 50%, rgba(0, 166, 81, 0.2) 0%, transparent 55%),
              radial-gradient(circle at 90% 50%, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.hsbd-player-hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px 32px 0 32px;
  min-height: 250px;
}

/* Left: Portrait Headshot Cutout */
.hsbd-player-hero-left {
  width: 170px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-right: 20px;
}

.hsbd-player-portrait-img {
  max-width: 100%;
  max-height: 230px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.hsbd-player-portrait-fallback {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Middle: Meta Info */
.hsbd-player-hero-center {
  flex: 1;
  min-width: 0;
  padding-bottom: 24px;
}

.hsbd-player-hero-name {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.hsbd-player-hero-subline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.hsbd-hero-club-tag,
.hsbd-hero-country-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  text-decoration: none !important;
}

.hsbd-hero-club-crest {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.hsbd-hero-sep {
  color: #475569;
  font-size: 12px;
}

.hsbd-player-hero-pos {
  font-size: 13px;
  font-weight: 600;
  color: #38bdf8;
  margin-bottom: 18px;
}

/* Metadata Badges Strip */
.hsbd-player-meta-badges {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 14px;
}

.hsbd-player-badge,
.hsbd-meta-badge {
  background: rgba(15, 23, 42, 0.65);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.hsbd-player-badge:hover,
.hsbd-meta-badge:hover {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-color: rgba(0, 166, 81, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 166, 81, 0.15);
}

.hsbd-pbadge-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  line-height: 1;
}

.hsbd-pbadge-icon,
.hsbd-meta-badge-icon {
  color: #00a651;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hsbd-pbadge-label,
.hsbd-meta-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hsbd-pbadge-value,
.hsbd-meta-val {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1.25;
}

.hsbd-pbadge-val-main,
.hsbd-pbadge-value strong,
.hsbd-meta-val strong {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.hsbd-pbadge-num {
  font-size: 15px;
  font-weight: 800;
  color: #00a651;
}

.hsbd-pbadge-sub,
.hsbd-meta-sub {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: normal;
}

.hsbd-pbadge-link,
.hsbd-meta-val-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 13.5px;
  transition: color 0.15s ease;
}

.hsbd-pbadge-link:hover,
.hsbd-meta-val-link:hover {
  color: #00a651;
}

.hsbd-pbadge-crest,
.hsbd-badge-club-crest {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.hsbd-pbadge-club-name {
  white-space: nowrap;
}

.hsbd-player-badge--val,
.hsbd-badge--highlight {
  background: linear-gradient(145deg, rgba(0, 166, 81, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%);
  border-color: rgba(0, 166, 81, 0.25);
}

.hsbd-pbadge-price {
  font-size: 14.5px;
  font-weight: 800;
  color: #22c55e;
}

.hsbd-pbadge-value--val {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hsbd-pbadge-value--val .hsbd-pbadge-sub {
  font-size: 10px;
  color: #64748b;
  margin-left: 0;
}

/* Right: Action Celebration Cutout */
.hsbd-player-hero-right {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-left: 20px;
}

.hsbd-player-action-img {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6));
}

/* Sub-Nav Bar */
.hsbd-player-nav-bar {
  margin-bottom: 24px;
}

/* KPI Metrics Strip (6 White Cards) */
.hsbd-player-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.hsbd-player-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hsbd-player-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.hsbd-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbd-kpi-icon--green { background: #dcfce7; color: #15803d; }
.hsbd-kpi-icon--dark  { background: #f1f5f9; color: #0f172a; }
.hsbd-kpi-icon--teal  { background: #ccfbf1; color: #0f766e; }
.hsbd-kpi-icon--mint  { background: #e0f2fe; color: #0284c7; }
.hsbd-kpi-icon--gold  { background: #fef3c7; color: #d97706; }
.hsbd-kpi-icon--card  {
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.hsbd-card-icon-yellow {
  width: 10px;
  height: 14px;
  background: #facc15;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hsbd-card-icon-red {
  width: 10px;
  height: 14px;
  background: #ef4444;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hsbd-kpi-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hsbd-kpi-label {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  margin-bottom: 2px;
}

.hsbd-kpi-val {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.hsbd-kpi-sub {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Duo Match Cards (Trận gần nhất + Trận tiếp theo) */
.hsbd-player-matches-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.hsbd-match-card-player {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.hsbd-match-card-meta {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 12px;
}

.hsbd-match-scoreboard-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0 14px 0;
}

.hsbd-team-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  width: 90px;
  text-decoration: none !important;
  color: inherit;
}

.hsbd-match-team-crest {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.hsbd-team-item-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.hsbd-match-score-badge {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  background: #f8fafc;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  letter-spacing: 2px;
}

.hsbd-match-vs-pill {
  font-size: 15px;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  padding: 5px 14px;
  border-radius: 6px;
}

.hsbd-match-scorer-sub {
  font-size: 11px;
  color: #64748b;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 12px;
}

.hsbd-card-footer-link {
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
  text-align: center;
}

.hsbd-link-action {
  font-size: 12px;
  font-weight: 600;
  color: #00a651;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.hsbd-link-action:hover {
  color: #008741;
  text-decoration: underline !important;
}

/* Phong độ 6 trận gần nhất */
.hsbd-player-form-card {
  margin-bottom: 20px;
}

.hsbd-player-form-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 0 18px 0;
}

.hsbd-form-node-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.15s ease;
}

.hsbd-form-node-item:hover {
  transform: translateY(-2px);
}

.hsbd-form-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.hsbd-form-w { background: #00a651; }
.hsbd-form-d { background: #64748b; }
.hsbd-form-l { background: #ef4444; }

.hsbd-form-rating {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

/* 12-Box Season Stats Grid */
.hsbd-player-season-card {
  margin-bottom: 20px;
}

.hsbd-player-stats-12grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.hsbd-player-stats-12grid .hsbd-stat-box {
  background: #ffffff;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: background 0.15s ease;
}

.hsbd-player-stats-12grid .hsbd-stat-box:hover {
  background: #f8fafc;
}

.hsbd-player-stats-12grid .hsbd-stat-box-num {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 4px;
}

.hsbd-player-stats-12grid .hsbd-stat-box-lbl {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* Career Table */
.hsbd-player-career-card {
  margin-bottom: 20px;
}

.hsbd-table-responsive {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.hsbd-career-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.hsbd-table-responsive .hsbd-career-table {
  min-width: 520px;
}

.hsbd-career-table th {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  text-align: left;
}

.hsbd-career-table th:last-child,
.hsbd-career-table td:last-child {
  text-align: right;
}

.hsbd-career-table td {
  padding: 12px 14px;
  font-size: 13px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-career-club-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hsbd-career-club-crest {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hsbd-career-club-link {
  font-weight: 700;
  color: #0f172a;
  text-decoration: none !important;
}

.hsbd-career-club-link:hover {
  color: #00a651;
}

/* Intro / Bio Card */
.hsbd-player-intro-card {
  margin-bottom: 20px;
}

/* Related Players Grid */
.hsbd-player-related-card {
  margin-bottom: 20px;
}

/* The canonical player page places this card after .hsbd-player-detail-layout
   as a full-width sibling, not inside .hsbd-main-content's flex column, so it
   never picked up that column's 28px gap (hsbd-style.css ~L702) between
   cards. Matched here directly so it reads as just another card in the
   stack instead of sitting flush under the layout above it. */
.hsbd-player-related-card--canonical {
  margin-top: 28px;
}

.hsbd-related-players-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 10px 0 16px 0;
}

.hsbd-related-player-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.hsbd-related-player-box:hover {
  transform: translateY(-3px);
  border-color: #00a651;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.hsbd-related-player-avatar-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  background: #f1f5f9;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsbd-related-player-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hsbd-related-player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hsbd-related-player-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hsbd-related-player-pos {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 8px;
}

/* Canonical "CẦU THỦ LIÊN QUAN" carousel. Scoped to the --canonical modifier
   so the legacy player-related.php grid (same base classes) is untouched.
   Three-column grid (button | scroll viewport | button) keeps the nav
   buttons in their own track, structurally outside the card viewport, so
   they can never overlap a card regardless of content width or scroll
   position — no absolute positioning / overlap math to get wrong. */
.hsbd-player-related-card--canonical .hsbd-related-carousel {
  --hsbd-related-cols: 8;
  --hsbd-related-gap: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
}

.hsbd-player-related-card--canonical .hsbd-related-carousel-track {
  display: flex;
  gap: var(--hsbd-related-gap);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px 16px;
}

.hsbd-player-related-card--canonical .hsbd-related-carousel-track::-webkit-scrollbar {
  display: none;
}

/* Whole cards only: width is an exact (100% − gaps) / N share of the
   viewport, so N cards fill it with nothing cut off at the edge. N comes
   from --hsbd-related-cols, overridden per breakpoint below. */
.hsbd-player-related-card--canonical .hsbd-related-player-box {
  flex: 0 0 calc((100% - (var(--hsbd-related-cols) - 1) * var(--hsbd-related-gap)) / var(--hsbd-related-cols));
  /* Flex items default to min-width: auto, so the name's un-ellipsized
     intrinsic width (not its clipped paint width) would otherwise win out
     over the flex-basis on longer names and break the uniform card width. */
  min-width: 0;
  scroll-snap-align: start;
}

.hsbd-player-related-card--canonical .hsbd-related-player-box:hover,
.hsbd-player-related-card--canonical .hsbd-related-player-box:focus-visible {
  transform: none;
  border-color: var(--hsbd-primary);
  background: var(--hsbd-primary-light);
  box-shadow: none;
}

.hsbd-player-related-card--canonical .hsbd-related-player-avatar-wrap {
  width: 88px;
  height: 88px;
}

.hsbd-player-related-card--canonical .hsbd-related-carousel-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e293b !important;
  cursor: pointer;
  transition: var(--hsbd-transition);
}

.hsbd-player-related-card--canonical .hsbd-related-carousel-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

.hsbd-player-related-card--canonical .hsbd-related-carousel-btn:hover {
  background: var(--hsbd-primary) !important;
  border-color: var(--hsbd-primary) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18) !important;
}

.hsbd-player-related-card--canonical .hsbd-related-carousel-btn:focus-visible {
  outline: 2px solid var(--hsbd-primary);
  outline-offset: 2px;
}

/* Disabled at an end: still rendered (the mockup keeps both gutters filled),
   just visibly inert. Native `disabled` already blocks clicks and keyboard
   focus, so no extra JS guard is needed on top of it. */
.hsbd-player-related-card--canonical .hsbd-related-carousel-btn:disabled,
.hsbd-player-related-card--canonical .hsbd-related-carousel-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  transform: none;
}

/* The base rule's own `display: flex` is author CSS and outranks the UA
   stylesheet's `[hidden] { display: none }`, so the `hidden` property JS
   sets when everything fits (nothing to scroll) needs its own, more
   specific override here. */
.hsbd-player-related-card--canonical .hsbd-related-carousel-btn[hidden] {
  display: none;
}

.hsbd-related-player-club {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  padding: 3px 8px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
}

.hsbd-related-club-crest {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* Sidebar Info Table */
.hsbd-player-info-card {
  margin-bottom: 20px;
}

/* Sidebar 2D Mini Pitch Position Map */
.hsbd-player-position-card {
  margin-bottom: 20px;
}

.hsbd-pos-pitch-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1b4332;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
  border: 1px solid #2d6a4f;
  margin-bottom: 14px;
}

.hsbd-mini-pitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    #1b4332,
    #1b4332 20px,
    #2d6a4f 20px,
    #2d6a4f 40px
  );
}

.hsbd-mini-pitch-lines {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
}

.hsbd-mp-line--center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.4);
}

.hsbd-mp-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

.hsbd-mp-box--left {
  position: absolute;
  top: 25%;
  left: 0;
  bottom: 25%;
  width: 20%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-left: none;
}

.hsbd-mp-box--right {
  position: absolute;
  top: 25%;
  right: 0;
  bottom: 25%;
  width: 20%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-right: none;
}

.hsbd-heat-node {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.hsbd-heat-node--glow {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.9) 0%, rgba(34, 197, 94, 0.4) 50%, transparent 80%);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.8);
}

.hsbd-heat-node--glow::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 2.5px solid #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffffff;
}

.hsbd-heat-node--sub {
  width: 34px;
  height: 34px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.6) 0%, transparent 70%);
}

.hsbd-heat-node--sub::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #38bdf8;
  border-radius: 50%;
}

.hsbd-heat-node--sub2 {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, transparent 70%);
}

.hsbd-heat-node--sub2::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #38bdf8;
  border-radius: 50%;
}

.hsbd-pos-roles-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hsbd-pos-role-row {
  font-size: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hsbd-pos-role-label {
  color: #64748b;
  font-weight: 500;
}

.hsbd-pos-role-val {
  color: #0f172a;
  font-weight: 700;
}

.hsbd-pos-role-val-sub {
  color: #334155;
  font-weight: 600;
}

/* Sidebar & Full Trophies */
.hsbd-player-trophies-card,
.hsbd-player-trophies-full-card {
  margin-bottom: 20px;
}

.hsbd-player-trophies-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hsbd-player-trophy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f8fafc;
}

.hsbd-player-trophy-row:last-child {
  border-bottom: none;
}

.hsbd-player-trophy-icon {
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbd-player-trophy-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.hsbd-player-trophy-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.hsbd-player-trophy-years {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.hsbd-player-trophies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 10px 0;
}

.hsbd-player-trophy-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hsbd-player-trophy-box-icon {
  margin-bottom: 10px;
}

.hsbd-player-trophy-box-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.hsbd-player-trophy-box-years {
  font-size: 11px;
  color: #64748b;
}

/* Radar Chart & Skills */
.hsbd-player-radar-card {
  margin-bottom: 20px;
}

.hsbd-radar-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: center;
  padding: 10px 0;
}

.hsbd-radar-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsbd-radar-svg {
  width: 100%;
  max-width: 280px;
  height: auto;
}

.hsbd-skills-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hsbd-skill-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hsbd-skill-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.hsbd-skill-name {
  color: #334155;
  font-weight: 600;
}

.hsbd-skill-val {
  color: #0f172a;
  font-weight: 800;
}

.hsbd-skill-bar {
  height: 6px;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
}

.hsbd-skill-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e 0%, #00a651 100%);
  border-radius: 9999px;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .hsbd-player-kpi-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .hsbd-player-two-col-layout {
    grid-template-columns: 1fr;
  }
  .hsbd-all-players-grid,
  .hsbd-featured-players-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hsbd-comp-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-comp-match-row {
    grid-template-columns: 70px 1fr 30px 1fr 140px;
    padding: 12px 14px;
  }
  .hsbd-club-hero-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .hsbd-club-hero-stadium {
    width: 100%;
    height: 140px;
  }
  .hsbd-club-trio-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-club-tactics-row {
    grid-template-columns: 1fr;
  }
  .hsbd-club-bottom-trio {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-player-related-card--canonical .hsbd-related-carousel {
    --hsbd-related-cols: 6;
  }
}

@media (max-width: 768px) {
  .hsbd-player-hero-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
  }
  .hsbd-player-hero-left {
    margin-right: 0;
    margin-bottom: 16px;
  }
  .hsbd-player-hero-badges {
    justify-content: center;
  }
  .hsbd-player-hero-pills-row {
    justify-content: center;
  }
  .hsbd-player-hero-right {
    display: none;
  }
  .hsbd-player-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-player-matches-duo {
    grid-template-columns: 1fr;
  }
  .hsbd-player-stats-12grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-related-players-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-player-related-card--canonical .hsbd-related-carousel {
    --hsbd-related-cols: 4;
  }
  .hsbd-player-related-card--canonical .hsbd-related-player-avatar-wrap {
    width: 68px;
    height: 68px;
  }
  .hsbd-radar-layout {
    grid-template-columns: 1fr;
  }
  .hsbd-hub-header-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .hsbd-hub-header-right {
    width: 100%;
  }
  .hsbd-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hsbd-filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* The scrollbar is hidden, so the fade is the only sign the row goes on. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }

  /* Three filter rows took 262px — nearly a third of the screen — before the
     reader reached a single player. */
  .hsbd-hub-filter-card {
    padding: 12px 14px;
    gap: 10px;
  }

  /* The head of the page spent 306px on a breadcrumb, a title, a sentence, a
     count and a search box before the first filter. Each part was fine; the
     sum pushed the content the reader came for past the fold. */
  .hsbd-hub-main-title {
    margin-bottom: 4px;
  }

  .hsbd-hub-main-desc {
    margin-bottom: 8px;
  }

  .hsbd-hub-header-wrap {
    margin-bottom: 12px;
    gap: 8px;
  }

  .hsbd-breadcrumb {
    margin-bottom: 8px;
  }

  .hsbd-filter-row {
    gap: 6px;
  }
  .hsbd-filter-pills::-webkit-scrollbar {
    display: none;
  }
  .hsbd-position-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-all-players-grid,
  .hsbd-featured-players-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-hub-sec-header--flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hsbd-comp-hub-grid {
    grid-template-columns: 1fr;
  }
  .hsbd-comp-match-row {
    grid-template-columns: 60px 1fr 30px 1fr;
    gap: 6px;
    padding: 12px 10px;
  }
  .hsbd-comp-match-league {
    display: none;
  }
  .hsbd-comp-team-name {
    font-size: 13px;
  }
  .hsbd-club-hero-main {
    flex-direction: column;
    align-items: flex-start;
  }
  .hsbd-club-trio-row {
    grid-template-columns: 1fr;
  }
  .hsbd-club-bottom-trio {
    grid-template-columns: 1fr;
  }
  .hsbd-performers-row {
    grid-template-columns: 1fr;
  }
  .hsbd-season-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .hsbd-player-kpi-strip {
    grid-template-columns: 1fr;
  }
  .hsbd-related-players-grid {
    grid-template-columns: 1fr;
  }
  .hsbd-all-players-grid,
  .hsbd-featured-players-grid {
    grid-template-columns: 1fr;
  }
  .hsbd-position-grid {
    grid-template-columns: 1fr;
  }
  /* At this width a partial next card is the intended swipe hint, not a
     bug, so cols stays fractional here unlike the whole-cards rule above
     480px. The nav buttons step aside in favour of touch swipe and the
     grid collapses to a single column since their gutters are now empty. */
  .hsbd-player-related-card--canonical .hsbd-related-carousel {
    grid-template-columns: 1fr;
    column-gap: 0;
    --hsbd-related-cols: 2.5;
    --hsbd-related-gap: 10px;
  }
  .hsbd-player-related-card--canonical .hsbd-related-carousel-btn {
    display: none;
  }
  .hsbd-player-related-card--canonical .hsbd-related-carousel-track {
    padding: 6px 0 16px;
  }
  .hsbd-player-related-card--canonical .hsbd-related-player-box {
    padding: 12px 8px;
  }
  .hsbd-player-related-card--canonical .hsbd-related-player-avatar-wrap {
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   15. SINGLE COMPETITION PAGE (Premier League Mockup)
   ========================================================================== */

.hsbd-competition-single-page {
  padding-bottom: 40px;
}

/* Competition Hero Banner */
.hsbd-comp-hero-wrap {
  position: relative;
  background: linear-gradient(135deg, #070d18 0%, #151a2e 50%, #0a1120 100%);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hsbd-comp-hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 10% 40%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 90% 60%, rgba(0, 166, 81, 0.15) 0%, transparent 55%);
  pointer-events: none;
}

.hsbd-comp-hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
}

/* Left: White Logo Card */
.hsbd-comp-hero-left {
  flex-shrink: 0;
}

.hsbd-comp-logo-card {
  width: 110px;
  height: 110px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.hsbd-comp-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hsbd-comp-logo-fallback {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 24px;
}

/* Center: Title, Subline & Metadata Badges */
.hsbd-comp-hero-center {
  flex: 1;
  min-width: 0;
}

.hsbd-comp-hero-title {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.hsbd-comp-hero-subline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.hsbd-comp-country-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}

/* Season Dropdown Selector */
.hsbd-comp-season-dropdown-wrap {
  position: relative;
  display: inline-block;
  z-index: 15;
}

.hsbd-comp-season-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.hsbd-comp-season-badge:hover,
.hsbd-comp-season-badge.active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(0, 166, 81, 0.5);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 166, 81, 0.2);
}

.hsbd-comp-season-arrow {
  transition: transform 0.2s ease;
}

.hsbd-comp-season-badge.active .hsbd-comp-season-arrow {
  transform: rotate(180deg);
}

.hsbd-comp-season-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 170px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
  pointer-events: none;
}

.hsbd-comp-season-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.hsbd-comp-season-menu-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  padding: 6px 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 4px;
}

.hsbd-comp-season-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #94a3b8;
  border-radius: 6px;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.hsbd-comp-season-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.hsbd-comp-season-item.is-active {
  background: rgba(0, 166, 81, 0.12);
  color: #00a651;
  font-weight: 700;
}

/* 4 Metadata Badges */
.hsbd-comp-meta-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}

.hsbd-comp-badge {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.hsbd-comp-badge:hover {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-color: rgba(0, 166, 81, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 166, 81, 0.15);
}

.hsbd-cbadge-icon {
  color: #00a651;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hsbd-cbadge-crest {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.hsbd-cbadge-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hsbd-cbadge-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
  line-height: 1;
}

.hsbd-cbadge-val {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsbd-cbadge-val--dates {
  font-size: 12.5px;
}

.hsbd-cbadge-champ-link {
  color: #ffffff;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.hsbd-cbadge-champ-link:hover {
  color: #00a651;
}

/* Sub-Navigation Tabs Bar */
.hsbd-comp-nav-bar {
  margin-bottom: 24px;
}

/* Single Competition Layout */
.hsbd-comp-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Row 1 Duo: Standings (62%) + Featured Matches (38%) */
.hsbd-comp-row1-duo {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

.hsbd-comp-row1-left,
.hsbd-comp-row1-right {
  display: flex;
  flex-direction: column;
}

.hsbd-comp-row1-left .hsbd-card,
.hsbd-comp-row1-right .hsbd-card {
  height: 100%;
  margin-bottom: 0;
}

/* Standings Table Styling */
.hsbd-comp-table {
  width: 100%;
  border-collapse: collapse;
}

.hsbd-comp-table th {
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.hsbd-comp-table th.hsbd-st-rank,
.hsbd-comp-table th.hsbd-st-club {
  text-align: left;
}

.hsbd-comp-table td {
  padding: 10px 8px;
  font-size: 13px;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  text-align: center;
}

.hsbd-comp-table td.hsbd-st-rank,
.hsbd-comp-table td.hsbd-st-club {
  text-align: left;
}

.hsbd-comp-table tr.hsbd-st-row:hover {
  background: #f8fafc;
}

.hsbd-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}

.hsbd-rank-ucl { background: #00a651; }
.hsbd-rank-uel { background: #0284c7; }
.hsbd-rank-uecl { background: #f59e0b; }
.hsbd-rank-rel { background: #ef4444; }
.hsbd-rank-default { background: #94a3b8; }

.hsbd-st-club-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.hsbd-st-club-link:hover {
  color: #00a651;
}

.hsbd-st-crest {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-st-gd {
  font-weight: 600;
  color: #475569;
}

.hsbd-st-pts strong {
  font-weight: 800;
  color: #0f172a;
}

/* Standings Color Legend */
.hsbd-standings-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.hsbd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hsbd-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hsbd-dot-ucl { background: #00a651; }
.hsbd-dot-uel { background: #0284c7; }
.hsbd-dot-uecl { background: #f59e0b; }
.hsbd-dot-rel { background: #94a3b8; }

/* Standings Full Page Filters */
.hsbd-standings-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Featured Matches List (Row 1 Right) */
.hsbd-featured-matches-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hsbd-comp-match-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.hsbd-comp-match-box:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.hsbd-comp-match-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.hsbd-comp-match-teams-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hsbd-comp-mteam {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  text-decoration: none !important;
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
  min-width: 0;
}

.hsbd-comp-mteam--home {
  justify-content: flex-end;
  text-align: right;
}

.hsbd-comp-mteam--away {
  justify-content: flex-start;
  text-align: left;
}

.hsbd-comp-mteam-crest {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-comp-mteam-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsbd-comp-time-badge,
.hsbd-comp-score-badge {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

.hsbd-comp-score-badge {
  background: #00a651;
  color: #ffffff;
  border-color: #00a651;
}

.hsbd-comp-match-venue {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin-top: 6px;
}

/* Row 2 Trio: Top Form (33%) + Season Stats (33%) + News (33%) */
.hsbd-comp-overview-row2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

/* Top Form Card */
.hsbd-comp-form-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hsbd-comp-form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-comp-form-club {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hsbd-comp-form-rank {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  width: 14px;
}

.hsbd-comp-form-crest {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-comp-form-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsbd-comp-form-name:hover {
  color: #00a651;
}

.hsbd-comp-form-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.hsbd-form-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
}

.hsbd-form-circle.hsbd-form-w { background: #00a651; }
.hsbd-form-circle.hsbd-form-d { background: #94a3b8; }
.hsbd-form-circle.hsbd-form-l { background: #ef4444; }

.hsbd-comp-form-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #64748b;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.hsbd-flegend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Season Metrics List */
.hsbd-comp-metrics-list {
  display: flex;
  flex-direction: column;
}

.hsbd-comp-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-comp-metric-row:last-child {
  border-bottom: none;
}

.hsbd-cmetric-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}

.hsbd-cmetric-icon {
  color: #64748b;
  flex-shrink: 0;
}

.hsbd-cmetric-label {
  font-size: 12.5px;
  color: #475569;
  font-weight: 500;
}

.hsbd-cmetric-val {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}

/* Recent News List */
.hsbd-comp-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hsbd-comp-news-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  color: inherit;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-comp-news-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.hsbd-comp-news-thumb-wrap {
  width: 72px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0f172a;
}

.hsbd-comp-news-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hsbd-comp-news-item:hover .hsbd-comp-news-thumb {
  transform: scale(1.05);
}

.hsbd-comp-news-info {
  flex: 1;
  min-width: 0;
}

.hsbd-comp-news-headline {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  margin: 0 0 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hsbd-comp-news-item:hover .hsbd-comp-news-headline {
  color: #00a651;
}

.hsbd-comp-news-date {
  font-size: 11px;
  color: #94a3b8;
}

/* Row 3: Stat Leaders Grid (4 Cards) */
.hsbd-comp-leaders-section {
  margin-bottom: 24px;
}

.hsbd-comp-leaders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hsbd-leader-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.hsbd-leader-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.hsbd-leader-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.hsbd-leader-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbd-licon--green { background: rgba(0, 166, 81, 0.1); color: #00a651; }
.hsbd-licon--cyan  { background: rgba(2, 132, 199, 0.1); color: #0284c7; }
.hsbd-licon--gold  { background: rgba(217, 119, 6, 0.1); color: #d97706; }
.hsbd-licon--mint  { background: rgba(13, 148, 136, 0.1); color: #0d9488; }

.hsbd-leader-type {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.02em;
}

.hsbd-leader-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsbd-leader-avatar-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: #f1f5f9;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsbd-leader-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hsbd-leader-avatar-fallback {
  font-size: 22px;
}

.hsbd-leader-info {
  flex: 1;
  min-width: 0;
}

.hsbd-leader-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-bottom: 2px;
}

.hsbd-leader-name:hover {
  color: #00a651;
}

.hsbd-leader-club {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-bottom: 6px;
}

.hsbd-leader-val-box {
  display: inline-block;
}

.hsbd-leader-val {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}

/* Row 4: Participating Clubs Grid */
.hsbd-comp-clubs-card {
  margin-bottom: 24px;
}

.hsbd-comp-clubs-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
}

.hsbd-comp-clubs-grid--full {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hsbd-comp-club-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.hsbd-comp-club-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.hsbd-comp-club-crest-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.hsbd-comp-club-crest {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hsbd-comp-club-crest-fallback {
  font-size: 28px;
}

.hsbd-comp-club-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.hsbd-comp-club-meta-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Row 5: Intro (55%) + Records (45%) */
.hsbd-comp-row5-duo {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}

.hsbd-comp-intro-body {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.65;
}

.hsbd-comp-intro-body p {
  margin-bottom: 12px;
}

.hsbd-comp-intro-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* Records List */
.hsbd-comp-records-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hsbd-comp-record-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.hsbd-record-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(217, 119, 6, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hsbd-record-content {
  display: flex;
  flex-direction: column;
}

.hsbd-record-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hsbd-record-desc {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.hsbd-comp-stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

/* Responsive Rules for Single Competition */
@media (max-width: 1200px) {
  .hsbd-comp-clubs-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .hsbd-comp-stats-overview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .hsbd-comp-row1-duo {
    grid-template-columns: 1fr;
  }
  .hsbd-comp-overview-row2 {
    grid-template-columns: 1fr;
  }
  .hsbd-comp-leaders-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-comp-row5-duo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hsbd-comp-hero-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
  }
  .hsbd-comp-hero-subline {
    justify-content: center;
  }
  .hsbd-comp-meta-badges {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-comp-leaders-grid {
    grid-template-columns: 1fr;
  }
  .hsbd-comp-clubs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-comp-stats-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   HOMEPAGE DATA HUB NEW COMPONENTS (Bám sát Mockup Giao Diện Dữ Liệu Bóng Đá)
   ========================================================================== */

/* Accent Title Bar */
.hsbd-sec-header-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.hsbd-sec-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hsbd-sec-title-bar {
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: #10b981;
  border-radius: 2px;
  flex-shrink: 0;
}
.hsbd-sec-title-text {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

/* KHỐI 4: CẦU THỦ NỔI BẬT (6 Cột) */
.hsbd-players-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hsbd-player-card-v2 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.hsbd-player-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}
.hsbd-player-card-v2__avatar-wrap {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.hsbd-player-card-v2__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hsbd-player-card-v2__name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hsbd-player-card-v2__pos {
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 2px;
}
.hsbd-player-card-v2__club {
  font-size: 12px;
  color: #0f172a;
  font-weight: 500;
  margin-bottom: 6px;
}
.hsbd-player-card-v2__country {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: #64748b;
}

/* KHỐI 5: BẢNG XẾP HẠNG & ĐỘI HÌNH TIÊU BIỂU (2 Cột) */
.hsbd-standings-pitch-row {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 18px;
  align-items: start;
}
.hsbd-standings-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* The team of the week sits beside the standings preview in the same row, so
   it gets the same card. Its class promised one and nothing defined it, so
   the block had been rendering straight onto the page background next to a
   white card — the two read as different kinds of content rather than as two
   halves of one row. */
.hsbd-mini-table-card,
.hsbd-featured-xi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--hsbd-shadow-sm);
}
.hsbd-mini-table-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hsbd-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.hsbd-mini-table th {
  color: #94a3b8;
  font-weight: 600;
  padding: 6px 3px;
  text-align: center;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11px;
}
.hsbd-mini-table th:nth-child(2) {
  text-align: left;
}
.hsbd-mini-table td {
  padding: 7px 3px;
  color: #334155;
  text-align: center;
  border-bottom: 1px solid #f8fafc;
}
.hsbd-mini-table td.cell-rank {
  font-weight: 700;
  color: #64748b;
  width: 18px;
}
.hsbd-mini-table td.cell-club {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #0f172a;
}
.hsbd-mini-table td.cell-pts {
  font-weight: 800;
  color: #0f172a;
}
.hsbd-mini-table img.club-mini-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.hsbd-mini-table-footer {
  margin-top: 10px;
  text-align: right;
}
.hsbd-mini-table-footer a {
  font-size: 11.5px;
  color: #059669;
  font-weight: 600;
  text-decoration: none;
}
.hsbd-mini-table-footer a:hover {
  text-decoration: underline;
}

/* Right Tactical Pitch Card */
.hsbd-pitch-card-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--hsbd-shadow-sm);
}
.hsbd-pitch-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hsbd-pitch-formation-badge {
  font-size: 11px;
  font-weight: 700;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 3px 8px;
  border-radius: 6px;
  color: #334155;
}
.hsbd-home-pitch {
  background: #15803d;
  background-image: repeating-linear-gradient(0deg, #15803d 0, #15803d 30px, #166534 30px, #166534 60px);
  border-radius: 10px;
  position: relative;
  height: 380px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.hsbd-home-pitch-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hsbd-pitch-line-half {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}
.hsbd-pitch-center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
.hsbd-pitch-box-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-top: none;
}
.hsbd-pitch-box-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: none;
}
.hsbd-pitch-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}
.hsbd-pitch-pnode {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.hsbd-pitch-pnode:hover {
  transform: scale(1.08);
}
.hsbd-pitch-pnode-shirt {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.hsbd-pitch-pnode-shirt svg {
  width: 100%;
  height: 100%;
}
.hsbd-pitch-pnode-name {
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  margin-top: 2px;
  white-space: nowrap;
}
.hsbd-pitch-coach-banner {
  text-align: center;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}

/* KHỐI 6: TRẬN ĐẤU ĐÁNG CHÚ Ý TUẦN NÀY (3 Cột) */
.hsbd-spotlight-matches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hsbd-spotlight-match-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--hsbd-shadow-sm);
}
.hsbd-spotlight-match-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
}
.hsbd-spotlight-league-tag {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.hsbd-spotlight-clash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
  margin-bottom: 12px;
}
.hsbd-spotlight-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75px;
}
.hsbd-spotlight-team-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 6px;
}
.hsbd-spotlight-team-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;
}
.hsbd-spotlight-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hsbd-spotlight-date {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.hsbd-spotlight-time {
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  margin: 2px 0;
}
.hsbd-spotlight-stadium {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

/* KHỐI 7: TIN TỨC & THỐNG KÊ NHANH */
.hsbd-news-stats-row {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 18px;
  align-items: start;
}
.hsbd-news-5grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.hsbd-news-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--hsbd-shadow-sm);
}
.hsbd-news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.hsbd-news-thumb-wrap {
  width: 100%;
  height: 96px;
  overflow: hidden;
  background: #0f172a;
  position: relative;
}
.hsbd-news-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.hsbd-news-card:hover .hsbd-news-thumb {
  transform: scale(1.05);
}
.hsbd-news-content {
  padding: 10px 8px 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.hsbd-news-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
  align-self: flex-start;
}
.hsbd-news-title {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #0f172a;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}
.hsbd-news-time {
  font-size: 10.5px;
  color: #94a3b8;
}

/* Quick Stats 2x2 */
.hsbd-quick-stats-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--hsbd-shadow-sm);
}
.hsbd-quick-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hsbd-quick-stat-box {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hsbd-quick-stat-icon {
  width: 22px;
  height: 22px;
  color: #10b981;
  margin-bottom: 6px;
}
.hsbd-quick-stat-val {
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}
.hsbd-quick-stat-label {
  font-size: 11px;
  color: #64748b;
  margin-top: 3px;
}

/* KHỐI 8: KHÁM PHÁ THEO GIẢI ĐẤU (7 Cột) */
.hsbd-explore-leagues-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.hsbd-explore-league-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--hsbd-shadow-sm);
}
.hsbd-explore-league-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}
.hsbd-explore-league-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 10px;
}
.hsbd-explore-league-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hsbd-explore-league-country {
  font-size: 11px;
  color: #64748b;
}

/* Responsive Queries for New Homepage */
@media (max-width: 1200px) {
  .hsbd-players-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hsbd-explore-leagues-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .hsbd-news-5grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 992px) {
  .hsbd-standings-pitch-row,
  .hsbd-news-stats-row {
    grid-template-columns: 1fr;
  }
  .hsbd-spotlight-matches-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .hsbd-players-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-standings-dual-grid {
    grid-template-columns: 1fr;
  }
  .hsbd-news-5grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsbd-explore-leagues-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hsbd-api-state { padding: 28px; }
.hsbd-api-state--error { border-left: 4px solid #dc2626; }
.hsbd-underapi-availability-grid,
.hsbd-underapi-profile-grid,
.hsbd-underapi-stat-grid { display: grid; gap: 12px; }
.hsbd-underapi-availability-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hsbd-underapi-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hsbd-underapi-stat-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.hsbd-underapi-availability,
.hsbd-underapi-profile-grid > div,
.hsbd-underapi-stat-grid > div { padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.hsbd-underapi-availability strong,
.hsbd-underapi-profile-grid span,
.hsbd-underapi-stat-grid span { display: block; font-size: 11px; color: #64748b; }
.hsbd-underapi-profile-grid strong,
.hsbd-underapi-stat-grid strong { display: block; margin-top: 5px; color: #0f172a; }
.hsbd-underapi-availability--available { border-color: #86efac; background: #f0fdf4; }
.hsbd-underapi-availability--unavailable { border-color: #fecaca; background: #fef2f2; }
.hsbd-underapi-availability--unknown,
.hsbd-underapi-availability--not_expected { border-color: #cbd5e1; background: #f8fafc; }
.hsbd-underapi-lineups { display: grid; gap: 18px; }
.hsbd-underapi-lineup-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hsbd-underapi-lineup-groups ul { margin: 8px 0 0; padding-left: 18px; }
.hsbd-underapi-lineup-groups li { margin-bottom: 5px; }
.hsbd-underapi-lineup h3 { margin-bottom: 8px; }
.hsbd-underapi-lineup h3 small { color: #64748b; font-weight: 500; }
.hsbd-underapi-player-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.hsbd-underapi-player-header h1 { margin: 0 0 5px; }
.hsbd-underapi-player-header p { margin: 0; }
.hsbd-underapi-player-photo,
.hsbd-underapi-club-heading,
.hsbd-underapi-competition-heading { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hsbd-underapi-player-photo { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; overflow: hidden; background: #f1f5f9; }
.hsbd-underapi-player-photo img { width: 100%; height: 100%; object-fit: cover; }
.hsbd-underapi-club-heading .hsbd-team-logo,
.hsbd-underapi-competition-heading .hsbd-competition-logo { width: 64px; height: 64px; object-fit: contain; flex: 0 0 64px; }
.hsbd-match-card-head .hsbd-competition-logo { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 7px; }
.hsbd-underapi-player-badge { display: flex; align-items: center; gap: 14px; }
.hsbd-underapi-player-badge strong { font-size: 32px; line-height: 1; }
.hsbd-underapi-muted { color: #64748b; }

.hsbd-underapi-club-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px !important;
  flex-wrap: initial !important;
}
.hsbd-underapi-club-card {
  min-width: 0;
  min-height: 146px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  text-align: center;
}
/* One box for every crest, whatever shape the artwork is. */
.hsbd-underapi-club-card .hsbd-team-logo {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 8px;
}
.hsbd-underapi-club-card strong,
.hsbd-underapi-club-card span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hsbd-underapi-club-card strong { color: #0f172a; }

/* A club in a league and a cup names both, which does not fit one line. Two
   lines is better than "Champions League · La ...". */
.hsbd-underapi-club-card span {
  color: #64748b;
  font-size: 12px;
  white-space: normal;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 640px) {
  .hsbd-underapi-profile-grid,
  .hsbd-underapi-lineup-groups { grid-template-columns: 1fr; }
  .hsbd-underapi-player-header { align-items: flex-start; }
  .hsbd-underapi-player-header { flex-wrap: wrap; }
  .hsbd-underapi-club-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hsbd-player-detail-page {
  padding-bottom: 40px;
}

.hsbd-player-detail-content .hsbd-player-canonical-hero {
  margin-bottom: 24px;
}

.hsbd-player-canonical-hero .hsbd-club-hero-title {
  text-transform: uppercase;
}

.hsbd-player-detail-avatar {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.hsbd-player-detail-avatar-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.hsbd-player-detail-photo {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  object-position: center top;
}

.hsbd-player-hero-country,
.hsbd-player-hero-club {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hsbd-player-hero-club {
  color: inherit;
  text-decoration: none;
}

.hsbd-player-hero-club img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  /* Centred on the text rather than on the line box: a crest is round and
     sits high otherwise. */
  vertical-align: middle;
}

.hsbd-player-detail-summary .hsbd-stat-icon {
  font-weight: 800;
}

.hsbd-player-detail-layout {
  margin-top: 24px;
  /* 65/35 rather than the club page's 75/25: the right-hand column here is a
     table of the player's own details, which needs room to keep a value on
     one line, and the left is prose that should not run wider anyway. */
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
}

/* Where the player plays, on its own line under club and country. */
/* The identity lines read as one block, so they sit tight together. */
.hsbd-player-canonical-hero .hsbd-club-hero-title {
  margin-bottom: 6px;
}

.hsbd-player-canonical-hero .hsbd-club-tags {
  margin-top: 0;
}

.hsbd-player-hero-role {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}

/* A hairline between club and country, the same mark the stats use. */
.hsbd-hero-divider {
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.16);
}

/* The facts as a caption to the name, not a row of KPI tiles. No card, no
   border, no shadow per slot — a boxed stat competes with the name above it,
   and five boxes in a row read as an admin dashboard. Only a hairline
   between, and room to breathe on either side. */
.hsbd-player-hero-stats {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 0;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hsbd-player-hero-stat {
  /* A column, stated rather than assumed: something upstream lays dt and dd
     out inline, which put "13 SỐ ÁO" on one line. */
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 140px;
  min-width: 0;
  padding: 0 24px;
}

/* A short rule rather than a full-height border: it marks the gap between two
   columns of text, and a line the height of the block drew a grid nobody
   asked for. */
.hsbd-player-hero-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 1px;
  height: 58px;
  background: rgba(255, 255, 255, 0.09);
}

.hsbd-player-hero-stat:first-child {
  padding-left: 0;
}

.hsbd-player-hero-stat:first-child::before {
  display: none;
}

.hsbd-player-hero-stat dd {
  display: block;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  /* "188 CM", "PHẢI" and "LA LIGA" were being shouted by a rule further up.
     A value is read, not announced. */
  text-transform: none;
  color: #ffffff;
}

/* The shirt number is the one value a reader picks a player out by, so it
   carries a little more weight than the rest. */
.hsbd-player-hero-stat:first-child dd {
  font-size: 24px;
  font-weight: 700;
}

.hsbd-player-hero-stat dt {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
}

/* The date of birth sits under the age it explains, quieter than the label. */
.hsbd-player-hero-stat p {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 720px) {
  .hsbd-player-hero-stat {
    flex-basis: 45%;
    padding: 0 14px;
  }
  .hsbd-player-hero-stat:nth-child(odd) {
    padding-left: 0;
  }
  .hsbd-player-hero-stat:nth-child(odd)::before {
    display: none;
  }
}

/* The introduction fills the card. A capped measure left the right half
   empty and two columns split one short paragraph in half, so it simply runs
   the width it is given. */
.hsbd-player-about p {
  margin: 0 0 12px;
}

.hsbd-player-about p:last-child {
  margin-bottom: 0;
}

/* Rich editorial article body across player and club pages. */
.hsbd-editorial-article {
  color: var(--hsbd-text-body);
  line-height: 1.65;
}

.hsbd-editorial-article p {
  margin: 0 0 12px;
}

.hsbd-editorial-article p:last-child {
  margin-bottom: 0;
}

.hsbd-editorial-article h2,
.hsbd-editorial-article h3,
.hsbd-editorial-article h4 {
  color: var(--hsbd-text-title);
  font-weight: 700;
  line-height: 1.35;
}

.hsbd-editorial-article h2 {
  font-size: 18px;
  margin: 20px 0 10px;
}

.hsbd-editorial-article h3 {
  font-size: 16px;
  margin: 16px 0 8px;
}

.hsbd-editorial-article h4 {
  font-size: 14px;
  margin: 14px 0 6px;
}

.hsbd-editorial-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hsbd-radius-sm);
}

.hsbd-editorial-article ul,
.hsbd-editorial-article ol {
  padding-left: 24px;
  margin: 0 0 12px;
}

.hsbd-editorial-article li {
  margin-bottom: 6px;
}

.hsbd-editorial-article li:last-child {
  margin-bottom: 0;
}

.hsbd-editorial-article .wp-caption {
  max-width: 100%;
  margin: 0 0 12px;
}

.hsbd-editorial-article .wp-caption-text {
  font-size: 13px;
  color: var(--hsbd-text-muted);
  margin-top: 6px;
  text-align: center;
}

.hsbd-editorial-article .alignleft {
  float: left;
  margin: 0 16px 12px 0;
}

.hsbd-editorial-article .alignright {
  float: right;
  margin: 0 0 12px 16px;
}

.hsbd-editorial-article .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}

.hsbd-editorial-article a {
  color: var(--hsbd-primary);
  text-decoration: underline;
}

.hsbd-editorial-article a:hover {
  color: var(--hsbd-primary-hover);
}

.hsbd-editorial-article::after {
  content: "";
  display: table;
  clear: both;
}

.hsbd-player-stats-grid--canonical {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hsbd-player-stats-note {
  margin-top: 14px;
}

/* Season stats split into groups. A flat grid of thirty-odd cards made the
   reader scan every label to find one number; the headings let the eye jump
   straight to the part of the game it cares about.

   Headings only — no boxes, no tinted rails, no colour per group. The section
   already sits inside a card, and a second frame around each group would be a
   border inside a border. The site marks a heading with the small primary bar
   in .hsbd-sec-title, so these follow it at a smaller size rather than
   inventing a separate visual language for one section. */
.hsbd-player-stat-groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hsbd-stat-group + .hsbd-stat-group {
  border-top: 1px solid var(--hsbd-border, #e2e8f0);
  padding-top: 20px;
}

.hsbd-stat-group-head {
  margin-bottom: 12px;
}

.hsbd-stat-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--hsbd-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--hsbd-text-title);
}

.hsbd-stat-group-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  background: var(--hsbd-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.hsbd-stat-group-note {
  margin: 4px 0 0 11px;
  font-size: 12px;
  color: var(--hsbd-text-muted, #64748b);
}

.hsbd-player-stat-value--goals { color: #ef4444; }
.hsbd-player-stat-value--assists { color: #3b82f6; }
.hsbd-player-stat-value--minutes { color: #10b981; }
.hsbd-player-stat-value--yellow-cards { color: #d97706; }
.hsbd-player-stat-value--red-cards { color: #dc2626; }
.hsbd-player-stat-value--rating { color: #64748b; }

.hsbd-player-profile-card .hsbd-info-val {
  overflow-wrap: anywhere;
}

.hsbd-player-transfer-table {
  min-width: 620px;
}

.hsbd-underapi-availability--injured,
.hsbd-underapi-availability--suspended {
  border-color: #fecaca;
  background: #fef2f2;
}

.hsbd-underapi-availability--doubtful {
  border-color: #fde68a;
  background: #fffbeb;
}

@media (max-width: 850px) {
  .hsbd-player-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .hsbd-player-detail-page .hsbd-club-hero {
    padding: 20px 16px;
  }

  .hsbd-player-detail-page .hsbd-club-hero-content {
    align-items: flex-start;
    gap: 14px;
  }

  .hsbd-player-detail-page .hsbd-player-hero-avatar-wrap {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 12px;
  }

  .hsbd-player-detail-photo {
    border-radius: 12px;
  }

  .hsbd-player-detail-page .hsbd-club-hero-title {
    font-size: 22px;
    overflow-wrap: anywhere;
  }

  .hsbd-player-detail-page .hsbd-club-tags {
    justify-content: flex-start;
  }

  .hsbd-player-stats-grid--canonical {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stadium photo on the club sidebar. The provider serves a wide shot, so the
   card crops rather than letterboxes it. */
.hsbd-venue-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

/* The standings markup wraps the table in .hsbd-table-wrap, but nothing ever
   styled that wrapper, so on a phone the table simply ran past the card and
   the columns that decide the table — goals and points — were unreachable.
   The wrapper scrolls, and the table keeps a width its ten columns can live
   in rather than crushing club names to one letter per line. */
.hsbd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hsbd-table-wrap > .hsbd-table {
  min-width: 560px;
}

@media (max-width: 640px) {
  /* Three columns on a 328px card left the team names 136px between them, so
     "FC Universitatea Cluj" spilled over its neighbour. The kick-off and the
     status move onto a line of their own and the teams get the full width. */
  .hsbd-match-item {
    flex-wrap: wrap;
    /* When the row breaks in two, the kick-off strip and the teams are one
       fact about one match, so they sit together rather than reading as two
       separate rows with a gap between them. */
    row-gap: 2px;
  }

  .hsbd-match-item > .hsbd-match-time {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    width: auto;
    order: 1;
    line-height: 1.2;
  }

  /* On one line the competition and the status are a strip, not a stack. */
  .hsbd-match-item > .hsbd-match-meta {
    order: 2;
    margin-left: auto;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
  }

  .hsbd-match-item > .hsbd-match-teams {
    order: 3;
    flex: 0 0 100%;
    max-width: none;
  }

  .hsbd-match-item .hsbd-match-team {
    font-size: 13px;
  }

  /* A section title is one line by design so it sits beside its "Xem tất cả"
     link. On a phone there is no room for both, and a heading that names a
     competition ("THỐNG KÊ MÙA GIẢI Premier League 26/27") was cut mid-word. */
  .hsbd-sec-title {
    white-space: normal;
    font-size: 17px;
    align-items: flex-start;
  }

  .hsbd-sec-title::before {
    margin-top: 3px;
  }
}


/* paginate_links(type => 'list') wraps the links in <ul class="page-numbers">,
   so the shared .page-numbers rule drew a button around the whole list and the
   browser drew its own bullet before every <li>. The list is plain; only the
   links and the current-page marker are buttons. */
.hsbd-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  min-width: 0;
  height: auto;
}

.hsbd-pagination ul.page-numbers > li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.hsbd-pagination ul.page-numbers > li::marker {
  content: '';
}


/* The carousel's next button was absolutely positioned at right: -12px against
   whatever ancestor happened to be positioned. On a phone that dropped it on
   top of the filter card 300px above its own section; on a desktop it hung
   12px past the page and gave the document a horizontal scrollbar. It belongs
   in its own header, next to the "Xem tất cả" link, where flex can place it.
   It is a secondary control, so it loses the shadow that made it the loudest
   thing on the screen. */
.hsbd-hub-scroll-btn,
.hsbd-wrap button.hsbd-hub-scroll-btn,
.hsbd-wrap .hsbd-hub-scroll-btn {
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
}


/* 4: an empty panel should take the room its one sentence needs, not the room
   a full one would have taken. */
.hsbd-player-trending-card .hsbd-empty-text {
  margin: 0;
  padding: 18px 0;
  text-align: center;
}

/* 7: a first name alone does not identify anybody — "Abdallah …" next to
   "Abdelham…" is two players the reader cannot tell apart. Two lines. */
.hsbd-player-mini-name {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* A first name alone does not identify anybody, and one line of 11px type in a
   72px column is barely a first name. The item is wide enough to hold a name. */
.hsbd-player-mini-item {
  width: 92px;
  flex: 0 0 92px;
}

/* 8: the peeking next item is the only hint these rows scroll; a fade at the
   edge says so deliberately rather than looking like a clipping bug. */
.hsbd-hub-carousel-track,
.hsbd-player-mini-row {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}

/* Hero search: one control, not an input with a button balanced on top of it.
   The button measured 42px against the input's 36.5px and sat centred, so it
   stood ~3px proud at each edge; the theme's own input styling was adding a
   border and its own height inside a box that already draws the frame. Both
   sides stretch to the same height, the corners answer each other, and the
   icon stops being squashed to 7px wide by a flex parent. */
.hsbd-search-box {
  align-items: stretch;
  padding: 5px;
  gap: 6px;
}

.hsbd-search-box input,
.hsbd-wrap .hsbd-search-box input[type="text"],
.hsbd-wrap .hsbd-search-box input[type="search"] {
  height: auto !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 6px 0 0 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: normal !important;
}

.hsbd-search-box .hsbd-search-btn,
.hsbd-wrap .hsbd-search-box button.hsbd-search-btn {
  align-self: stretch;
  width: 56px !important;
  min-width: 56px !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  flex-shrink: 0;
}

.hsbd-search-box .hsbd-search-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Season picker on the competition table. It sits in the section header, so it
   has to be as quiet as the "Xem tất cả" links that live there. */
.hsbd-season-picker {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hsbd-season-picker select {
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 28px 0 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  box-shadow: none !important;
  max-width: 190px;
}

/* A derived season total summed from part of the season says so, quietly and
   right under the numbers it qualifies, rather than letting a fragment pass
   for a total. */
.hsbd-stat-coverage-note {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 12px;
  line-height: 1.4;
}

/* Advanced season metrics. Volume stats stay in the neutral tone so the goals
   and assists a reader came for keep their colour; the expected-goals pair is
   tinted to mark it as a model's estimate rather than a count. */
.hsbd-player-stat-value--shots,
.hsbd-player-stat-value--shots-on-target,
.hsbd-player-stat-value--key-passes,
.hsbd-player-stat-value--duels-won,
.hsbd-player-stat-value--tackles,
.hsbd-player-stat-value--interceptions,
.hsbd-player-stat-value--passes,
.hsbd-player-stat-value--dribbles,
.hsbd-player-stat-value--dribbles-won,
.hsbd-player-stat-value--blocks { color: #475569; }

/* A percentage is not a count of anything, so it does not sit in the same
   tone as the volume stats beside it. */
.hsbd-player-stat-value--pass-accuracy { color: #0f766e; }

/* Fouls are the only cards on the grid that read as something a player did
   wrong, and the one he suffered is not the same fact. */
.hsbd-player-stat-value--fouls { color: #b45309; }
.hsbd-player-stat-value--was-fouled { color: #475569; }

.hsbd-player-stat-value--xg,
.hsbd-player-stat-value--xa { color: #7c3aed; }

/* The label is a block, so the ": " that separated it from its value started
   the next line instead — every card read ": Chưa rõ". The value is its own
   block and the colon is gone. */



/* ----------------------------------------------------------------------
   Label / value pairs
   ----------------------------------------------------------------------
   A vertical margin does nothing on an inline element. Four separate places
   learned that the hard way and shipped the same defect: "MLSĐã kết thúc",
   "THỦ MÔN920 cầu thủ", "Lionel MessiF", ": Chưa rõ" — each one a <strong>
   and a <span> side by side with a margin between them that the browser
   ignored.

   They are one pattern, so they get one rule. New markup that stacks a label
   over a value should carry .hsbd-stat-pair rather than inventing a fifth
   version of this.
   ---------------------------------------------------------------------- */
.hsbd-stat-pair,
.hsbd-match-meta,
.hsbd-pos-card__info,
.hsbd-underapi-availability,
.hsbd-player-card--standard .hsbd-player-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hsbd-stat-pair > *,
.hsbd-match-meta > *,
.hsbd-pos-card__info > *,
.hsbd-underapi-availability > *,
.hsbd-player-card--standard .hsbd-player-card__body > * {
  display: block;
}

.hsbd-underapi-availability__state {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

/* Competition leaderboards. A ranked list, so the rank and the number are
   fixed columns and only the name flexes; otherwise a long club name pushes
   the goals out of line with the row above. */
.hsbd-leader-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hsbd-leader-row {
  display: grid;
  grid-template-columns: 24px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-leader-row:last-child { border-bottom: none; }

/* The club sidebar's leader rows have no avatar (rank, name, value only); the
   base grid above reserves a 40px avatar slot the name fell into instead,
   wrapping one word per line with the value stranded next to it. */
.hsbd-leader-list--club .hsbd-leader-row {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.hsbd-leader-list--club .hsbd-leader-row > strong {
  text-align: right;
}

.hsbd-leader-rank {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
}

.hsbd-leader-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.hsbd-leader-who > small {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
}

.hsbd-leader-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--hsbd-text-title);
}

.hsbd-leader-value sup {
  font-size: 10px;
  color: #b45309;
}

.hsbd-leader-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #64748b;
}

/* A crest beside the club makes a twenty-row table scannable by badge rather
   than by reading every name. */
.hsbd-standings-club {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hsbd-standings-crest {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Season summary above the table: the three numbers that describe a league
   season at a glance. */
.hsbd-standings-summary {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #64748b;
}

.hsbd-standings-summary strong { color: var(--hsbd-text-title); }

/* Recent form. Five results, newest first, as letters rather than colour
   alone — a red and a green dot are the same dot to a colour-blind reader. */
.hsbd-form-run {
  display: inline-flex;
  gap: 3px;
}

.hsbd-form-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

.hsbd-form-dot--w { background: #16a34a; }
.hsbd-form-dot--d { background: #94a3b8; }
.hsbd-form-dot--l { background: #dc2626; }

/* Qualification and relegation, marked on the left edge so the table reads the
   same in a screenshot as it does with hover. The classes come from the
   provider's own zone, so a competition that qualifies nobody draws no line. */
.hsbd-standings-row--qualification td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
.hsbd-standings-row--relegation td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* The edge is drawn inside the cell, so the rank has to be moved off it: at a
   phone's width the two overlapped and "1" was read through a green bar. */
.hsbd-table .hsbd-st-rank {
  padding-left: 12px;
  text-align: left;
}

/* What the coloured edge means. Built from the zones the competition
   actually has, so a league that qualifies nobody prints no key. */
.hsbd-standings-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--hsbd-text-muted);
}

.hsbd-standings-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hsbd-standings-legend-key {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

.hsbd-standings-legend-key--qualification { background: #16a34a; }
.hsbd-standings-legend-key--relegation { background: #dc2626; }

/* A phone cannot read eleven columns. Wins, draws, losses, goals for and
   against and the form run drop out; what is left is the question the table
   is opened to answer — who is where, on how many games, with what
   difference and how many points. The full table is still there on anything
   wider, and the dropped figures are on each club's own page. */
@media (max-width: 720px) {
  .hsbd-table .hsbd-st-detail {
    display: none;
  }

  .hsbd-table .hsbd-st-club {
    /* Enough width to stop "Deportivo de A Coruña" wrapping, and no more.
       Giving the name everything the five dropped columns had left the three
       remaining figures pinned to the right edge, a thumb's width from the
       name they belong to, so a reader could not tell there was anything
       over there at all. */
    max-width: 0;
    width: 46%;
  }

  /* The rest is split evenly between the three figures that survive rather
     than pooled behind the name, which keeps them a readable distance from
     it and from each other.

     Addressed by position, not by nth-last-child: a hidden cell still counts
     as a child, so counting from the end picks the form column nobody can
     see and misses ST entirely. */
  .hsbd-table thead th:nth-child(3),
  .hsbd-table tbody td:nth-child(3),
  .hsbd-table thead th:nth-child(9),
  .hsbd-table tbody td:nth-child(9),
  .hsbd-table thead th:nth-child(10),
  .hsbd-table tbody td:nth-child(10) {
    width: 16%;
  }

  .hsbd-table .hsbd-st-club .hsbd-standings-club {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .hsbd-table .hsbd-st-club a,
  .hsbd-table .hsbd-st-club span:not(.hsbd-standings-club) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Numbers were reading as part of the club name. */
  .hsbd-table th,
  .hsbd-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Team of the season. Read as a formation — one row per line of the pitch,
   keeper at the top — rather than as a list of eleven names. */
.hsbd-best-eleven-formation {
  font-size: 12px;
  font-weight: 700;
  color: var(--hsbd-primary-hover);
  background: var(--hsbd-primary-light);
  border-radius: 999px;
  padding: 2px 10px;
}

.hsbd-eleven-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-eleven-line:last-child { border-bottom: none; }

.hsbd-eleven-line-label {
  flex: 0 0 76px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94a3b8;
  padding-top: 2px;
}

.hsbd-eleven-players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  flex: 1;
  min-width: 0;
}

.hsbd-eleven-player {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}

.hsbd-eleven-player > small {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

@media (max-width: 640px) {
  .hsbd-eleven-line {
    flex-direction: column;
    gap: 4px;
  }

  .hsbd-eleven-line-label { flex: none; }
}

/* Best eleven on the home sidebar: a compact list, position and rating as
   fixed columns so eleven rows line up. */
.hsbd-home-eleven {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hsbd-home-eleven-meta {
  margin: 0 0 10px;
  font-size: 12px;
  /* Lifted from #64748b: at this size the competition and the formation were
     under the contrast floor on a phone in daylight. */
  color: #475569;
}

/* One group per line of the pitch. Eleven names ran together before, with a
   pale single letter per row and nothing to say where the defence ended. */
.hsbd-home-eleven-group + .hsbd-home-eleven-group {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.hsbd-home-eleven-line {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.hsbd-home-eleven-row {
  display: flex;
  align-items: center;
  /* The name and its rating used to sit at opposite ends of a phone's width,
     so the eye had to cross the screen to join "Raphinha" to 8,80. The name
     takes only the room it needs and the rating follows it. */
  justify-content: flex-start;
  gap: 10px;
  font-size: 13px;
  padding: 4px 0;
}

.hsbd-home-eleven-name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A filled pill rather than green text: it is the one figure on the row, and
   at 11.5px in the same colour as a link it read as another name. */
.hsbd-home-eleven-rating {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hsbd-primary-light, #eefbf3);
  font-weight: 700;
  font-size: 12px;
  color: var(--hsbd-primary-hover);
}

/* Enough of a target to hit with a thumb. */
.hsbd-sec-link {
  min-height: 44px;
  padding-left: 8px;
}

.hsbd-sec-link span {
  font-size: 18px;
  line-height: 1;
}


/* ==========================================================================
   Club page: the facts the store already held and the page never showed
   ========================================================================== */

/* A quiet qualifier beside a section title — which competition a rank of 1 is
   a rank in, or what a per-match average is averaged over. */
.hsbd-sec-note {
  margin-left: auto;
  /* The title is allowed to shrink first: without this the note was handed
     whatever was left over and rendered as "PREMIER LEA…", which names no
     competition at all. */
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* The league position. The rank is the one number a reader came for, so it is
   the largest thing in the block and everything else reads as support. */
.hsbd-club-standing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 20px;
}

.hsbd-club-standing__rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f1f5f9;
}

.hsbd-club-standing__rank > strong {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  color: var(--hsbd-text-title);
}

.hsbd-club-standing__rank > span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbd-text-muted);
  white-space: nowrap;
}

/* auto-fit rather than a fixed column count: the same rule has to hold five
   figures on a desktop card and three on a phone without a second breakpoint
   for every width in between. */
.hsbd-club-standing__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 10px 14px;
  margin: 0;
  min-width: 0;
}

.hsbd-club-standing__figures > div {
  min-width: 0;
}

.hsbd-club-standing__figures dt {
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hsbd-club-standing__figures dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  white-space: nowrap;
}

.hsbd-club-standing__form {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.hsbd-club-standing__form > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--hsbd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hsbd-club-standing__form > div {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Squad card: the season line under the position and shirt number. */
.hsbd-squad-stat {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hsbd-text-body);
}

.hsbd-squad-stat > em {
  font-style: normal;
  color: var(--hsbd-text-muted);
  cursor: help;
}

/* Club players in the competition rankings. */
/* Three leaders took close to 340px of a sidebar that then needed a scrollbar
   to reach the club facts. The gap between the groups was most of it. */
.hsbd-leader-group + .hsbd-leader-group {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #f1f5f9;
}

.hsbd-leader-group > h3 {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hsbd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hsbd-leader-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--hsbd-text-muted);
}

.hsbd-transfer-list {
  display: flex;
  flex-direction: column;
}

/* Five fixed columns across the full card. The previous row was three columns
   capped at 620px, which kept the fee near the name but left a third of the
   card empty and, worse, changed shape per row: a move with no fee put the
   date where the fee had been on the line above, so nothing could be read
   down a column. Fixed columns fix both — the width is used and every value
   of the same kind sits under the one before it. */
.hsbd-transfer-table {
  display: flex;
  flex-direction: column;
}

.hsbd-transfer-head,
.hsbd-transfer-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(72px, auto) minmax(84px, auto);
  align-items: center;
  gap: 14px;
}

.hsbd-transfer-head {
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--hsbd-border, #e2e8f0);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hsbd-text-muted, #64748b);
}

.hsbd-transfer-item {
  /* Down from 10px: the row carries one line now, not two. */
  padding: 7px 2px;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-transfer-item:last-child {
  border-bottom: none;
}

.hsbd-transfer-item:hover {
  background: #f8fafc;
}

.hsbd-transfer-num {
  text-align: right;
  white-space: nowrap;
}

.hsbd-transfer-dir {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Muted fills. The badge is a label for the row, not the row's most important
   value; at full saturation it pulled the eye before the player's name. */
.hsbd-transfer-dir--in {
  background: #eefbf3;
  color: #15803d;
}

.hsbd-transfer-dir--out {
  background: #fef1f1;
  color: #b91c1c;
}

.hsbd-transfer-who,
.hsbd-transfer-club {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsbd-transfer-who > a,
.hsbd-transfer-who > strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hsbd-text-title);
}

.hsbd-transfer-who > a:hover {
  color: var(--hsbd-primary);
  text-decoration: underline;
}

.hsbd-transfer-club,
.hsbd-transfer-date {
  font-size: 12px;
  color: var(--hsbd-text-muted);
}

.hsbd-transfer-fee {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

/* A dash, not a blank: an empty cell reads as a rendering fault, while a dash
   says the feed has no figure for this move. */
.hsbd-transfer-empty {
  color: #cbd5e1;
}

@media (max-width: 720px) {
  .hsbd-transfer-head {
    display: none;
  }
  /* The club and the date drop under the name rather than shrinking four
     columns into a phone's width. */
  .hsbd-transfer-item {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    row-gap: 2px;
  }
  .hsbd-transfer-club {
    grid-column: 2;
  }
  .hsbd-transfer-date {
    grid-column: 3;
  }
}

.hsbd-transfer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  white-space: nowrap;
}

/* The fee is the provider's own wording, which is why it is a string and not
   a formatted number: transfer_type is an opaque code and fee_description is
   the only phrasing we are entitled to print. */
.hsbd-transfer-fee {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

.hsbd-transfer-meta > time {
  font-size: 11px;
  color: var(--hsbd-text-muted);
}

.hsbd-transfer-note {
  margin-top: 10px;
  font-size: 11.5px;
}

/* On-pitch averages. */
.hsbd-team-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  margin: 0;
}

/* Value first and large, then the metric it belongs to. The label and the
   figure used to sit side by side at similar weight, competing for the eye;
   the figure is what the reader came for and the label only says which. */
.hsbd-team-stat {
  /* A column, stated rather than relied on: something upstream lays dt and
     dd out inline, which put "15.2 DỨT ĐIỂM" on one line and undid the whole
     point of leading with the figure. */
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hsbd-team-stat-value {
  display: block;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--hsbd-text-title);
}

.hsbd-team-stat-label {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 600;
  /* Lifted from the muted grey: at 11px uppercase it sat under the contrast
     floor for body text. */
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsbd-team-stat-rank {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

.hsbd-team-stat-delta {
  margin: 3px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Direction is carried by the arrow and the sign as well as the colour, so
   the comparison survives being read in greyscale. */
.hsbd-team-stat-delta--up { color: #15803d; }
.hsbd-team-stat-delta--down { color: #b91c1c; }
.hsbd-team-stat-delta--level { color: #64748b; }

.hsbd-sec-header--stacked {
  display: block;
  margin-bottom: 16px;
}

.hsbd-sec-sub {
  margin: 4px 0 0 11px;
  font-size: 12px;
  color: var(--hsbd-text-muted, #64748b);
}

@media (max-width: 768px) {
  /* The rank box and the figures stop sharing a row: at 414px the figures got
     about 180px and "13:5" wrapped mid-value. */
  .hsbd-club-standing {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .hsbd-club-standing__rank {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 8px 12px;
  }

  .hsbd-club-standing__rank > strong {
    font-size: 26px;
  }

  .hsbd-club-standing__rank > span {
    margin-top: 0;
  }

  /* A section note is a qualifier, not a headline. It needs its own line on a
     phone, and the header is nowrap by default, so "VỊ TRÍ TRÊN BẢNG XẾP
     HẠNG" was squeezed into five lines to make room for it. */
  .hsbd-sec-header {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .hsbd-sec-note {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }

  /* Two columns, not auto-fit: at 414px auto-fit produced a fourth column too
     narrow for its own label and "BÀN THẮNG" dropped its value to a line of
     its own. */
  .hsbd-club-standing__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hsbd-club-standing__figures dd {
    white-space: normal;
  }

  .hsbd-transfer-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
  }
}

/* A leaderboard row reads as a person: portrait, name, crest, number. */
.hsbd-leader-photo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef1f5;
  border: 1px solid #e3e7ee;
}

.hsbd-leader-row .hsbd-leader-who small {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hsbd-leader-row .hsbd-leader-who small img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Six small boards in one card rather than six identical cards stacked: the
   stack pushed the table and the fixtures a screen and a half down the page. */
.hsbd-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hsbd-stat-board {
  border: 1px solid #edf1f6;
  border-radius: 10px;
  padding: 12px 12px 6px;
  min-width: 0;
}

.hsbd-stat-board-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hsbd-text-title);
}

.hsbd-stat-board .hsbd-leader-row {
  grid-template-columns: 16px 30px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 6px 0;
}

.hsbd-stat-board .hsbd-leader-photo {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.hsbd-stat-board .hsbd-leader-who { font-size: 12.5px; }
.hsbd-stat-board .hsbd-leader-who > small { font-size: 10.5px; }
.hsbd-stat-board .hsbd-leader-value { font-size: 13px; }

@media (max-width: 1100px) {
  .hsbd-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .hsbd-stat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* In the sidebar the pitch is half as wide, so the names below each shirt have
   to shrink with it or they collide. */
.hsbd-sidebar .hsbd-pitch-man img,
.hsbd-sidebar .hsbd-pitch-shirt { width: 30px; height: 30px; }
.hsbd-sidebar .hsbd-pitch-name { font-size: 10px; max-width: 74px; }
.hsbd-sidebar .hsbd-pitch-club { font-size: 9px; max-width: 74px; }

/* One matchday at a time. The strip scrolls sideways because a season is 38
   rounds long and the page is not. */
.hsbd-round-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}

.hsbd-round-pill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 108px;
  padding: 8px 14px;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  background: #fff;
  color: var(--hsbd-text-title);
  text-decoration: none;
}

.hsbd-round-pill strong { font-size: 13px; font-weight: 700; }
.hsbd-round-pill span { font-size: 11px; color: #64748b; }
.hsbd-round-pill:hover { border-color: #cbd5e1; }

.hsbd-round-pill.is-active {
  background: var(--hsbd-green, #16a34a);
  border-color: var(--hsbd-green, #16a34a);
  color: #fff;
}

.hsbd-round-pill.is-active span { color: rgba(255, 255, 255, 0.85); }

.hsbd-fixture-day {
  margin: 14px 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
}

/* Where the table was cut between the top five and the club's own row. */
.hsbd-standings-gap td {
  text-align: center;
  color: #cbd5e1;
  letter-spacing: 4px;
  padding: 2px 0;
}

/* Bảng tỉ số: hai đội, tỉ số ở giữa, người ghi bàn ngay dưới. */
.hsbd-match-summary-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: #64748b;
}

.hsbd-match-summary-comp,
.hsbd-match-summary-when {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbd-match-summary-comp a {
  font-weight: 700;
  color: var(--hsbd-text-title);
}

.hsbd-match-summary-title {
  margin: 0 0 12px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center;
  color: var(--hsbd-text-title);
}

.hsbd-match-summary-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 22px 0 6px;
}

.hsbd-match-summary-side {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hsbd-match-summary-side--home { justify-content: flex-end; text-align: right; }
.hsbd-match-summary-side--away { justify-content: flex-start; }

.hsbd-match-summary-crest {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 64px;
}

.hsbd-match-summary-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--hsbd-text-title);
}

.hsbd-match-summary-name a { color: inherit; }

.hsbd-match-summary-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hsbd-match-summary-score strong {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--hsbd-text-title);
}

.hsbd-match-summary-score--vs { font-size: 26px !important; color: #94a3b8 !important; }

.hsbd-match-summary-state {
  padding: 3px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.hsbd-match-summary-state.is-finished { background: #eef2ff; color: #4338ca; }

/* Hai danh sách ghi bàn đứng đúng dưới hai đội, chừa khoảng giữa bằng cụm tỉ
   số ở trên — nếu để sát nhau thì trông như một danh sách gãy đôi. */
.hsbd-match-summary-scorers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
  gap: 6px;
  padding-top: 14px;
}

.hsbd-scorer-list--home { grid-column: 1; }
.hsbd-scorer-list--away { grid-column: 3; }

.hsbd-scorer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}

.hsbd-scorer-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hsbd-scorer-list--home li { justify-content: flex-end; }

.hsbd-scorer-name { font-weight: 600; color: var(--hsbd-text-title); }
.hsbd-scorer-minute { color: #64748b; font-size: 12px; }

/* Quả bóng cạnh tên người ghi bàn, vẽ bằng CSS để không phải tải ảnh. */
.hsbd-scorer-ball {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #334155;
  flex: 0 0 11px;
}

@media (max-width: 720px) {
  .hsbd-match-summary-board { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hsbd-match-summary-side--home { justify-content: flex-start; text-align: left; }
  .hsbd-match-summary-name { font-size: 18px; }
}

@media (max-width: 480px) {
  .hsbd-match-summary-title { font-size: 18px !important; }
}

/* Diễn biến hai cột, cột phút nằm giữa. */
.hsbd-timeline-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

.hsbd-timeline-head-team { display: flex; align-items: center; gap: 8px; }

.hsbd-timeline2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
}

/* Khối diễn biến ở lại DOM (rỗng, ẩn) cho trận chưa có sự kiện, để script
   live-score chèn dòng vào mà khỏi tự dựng lại khung — display:flex ở trên
   thắng [hidden] mặc định của trình duyệt nên phải nói lại ở đây. */
.hsbd-timeline-head[hidden],
.hsbd-timeline2[hidden] { display: none; }

/* Mỗi dòng là một lưới ba cột: nửa sân nhà, cột phút, nửa sân khách. Ô sự
   kiện nhảy sang cột 3 khi đó là pha của đội khách. */
.hsbd-tl2-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.hsbd-tl2-cell {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f8fafc;
  min-width: 0;
}

/* Dòng không thuộc đội nào (vd bù giờ) — căn giữa như một mốc chung của trận
   thay vì rơi vào nửa sân nhà/khách; đổi hẳn sang flex để cụm icon+chữ và cột
   phút đứng cạnh nhau làm một khối giữa hàng, tránh phải tính lại layout lưới
   3 cột (và đè luôn bộ grid-template-columns 2 cột ở breakpoint di động bên
   dưới, không cần lặp lại riêng cho mobile). width:auto đè `.hsbd-tl2-cell
   {width:100%}` (khai báo chung, không phân biệt is-neutral) ở dưới — nếu
   không ô sự kiện sẽ chiếm hết chiều ngang hàng, khiến justify-content:center
   của hàng cha không còn chỗ trống để căn giữa. */
.hsbd-tl2-row.is-neutral {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hsbd-tl2-row.is-neutral .hsbd-tl2-cell {
  justify-content: center;
  flex: 0 1 auto;
  width: auto;
  border-left: none; /* đè viền trái xanh/đỏ theo đội nhà/khách ở màn hẹp bên dưới — dòng này không thuộc đội nào */
}

.hsbd-tl2-row.is-away .hsbd-tl2-cell {
  grid-column: 3;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.hsbd-tl2-minute {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #1e293b;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.hsbd-tl2-icon {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: 0 0 13px;
  background: var(--hsbd-ev-color, #94a3b8);
}

/* Thẻ là hình chữ nhật dựng đứng, không phải chấm tròn. */
.hsbd-tl2-icon--yellow_card,
.hsbd-tl2-icon--second_yellow,
.hsbd-tl2-icon--red_card {
  width: 10px;
  height: 14px;
  border-radius: 2px;
  flex-basis: 10px;
}

.hsbd-tl2-icon--goal,
.hsbd-tl2-icon--penalty_goal {
  background: #fff;
  border: 2px solid #1e293b;
}

.hsbd-tl2-text { min-width: 0; font-size: 13px; }
.hsbd-tl2-row.is-away .hsbd-tl2-text { text-align: left; }
.hsbd-tl2-row:not(.is-away) .hsbd-tl2-text { text-align: right; }
.hsbd-tl2-name { font-weight: 700; color: var(--hsbd-text-title); }
.hsbd-tl2-text small { display: block; font-size: 11.5px; color: #64748b; }

.hsbd-tl2-sub { display: flex; flex-direction: column; gap: 1px; }
.hsbd-tl2-out { font-size: 12.5px; color: #dc2626; }
.hsbd-tl2-in { font-size: 12.5px; font-weight: 700; color: #16a34a; }

/* Mũi tên xuống cho người rời sân, lên cho người vào sân. */
.hsbd-tl2-out::before { content: "\25BC "; font-size: 9px; }
.hsbd-tl2-in::before { content: "\25B2 "; font-size: 9px; }

@media (max-width: 720px) {
  .hsbd-tl2-row,
  .hsbd-tl2-row.is-away { grid-template-columns: 52px minmax(0, 1fr); }
  .hsbd-tl2-cell,
  .hsbd-tl2-row.is-away .hsbd-tl2-cell {
    grid-column: 2;
    justify-content: flex-start;
    flex-direction: row;
  }
  .hsbd-tl2-minute { grid-column: 1; }
  .hsbd-tl2-row:not(.is-away) .hsbd-tl2-text { text-align: left; }
}

/* Hai đội hình trên một mặt sân nằm ngang: nhà bên trái, khách bên phải. */
.hsbd-lineup-heads {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}

.hsbd-lineup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hsbd-lineup-head > span { display: flex; flex-direction: column; min-width: 0; }
.hsbd-lineup-head strong { font-size: 14px; color: var(--hsbd-text-title); }
.hsbd-lineup-head small { font-size: 11.5px; color: #64748b; }
.hsbd-lineup-head--away { text-align: right; }
.hsbd-lineup-head--away > span { align-items: flex-end; }

.hsbd-lineup-formation {
  padding: 4px 10px;
  border-radius: 8px;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

/* Sọc cỏ: mười hai dải dọc luân phiên hai sắc xanh. */
.hsbd-pitch2 {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background-color: #17914a;
  background-image: repeating-linear-gradient(90deg, #17914a 0 8.333%, #158441 8.333% 16.666%);
}

.hsbd-pitch2-mark {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.hsbd-pitch2-mark--halfway {
  top: 0;
  bottom: 0;
  left: 50%;
  border-width: 0 0 0 2px;
}

.hsbd-pitch2-mark--circle {
  top: 50%;
  left: 50%;
  width: 18%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.hsbd-pitch2-mark--box-left,
.hsbd-pitch2-mark--box-right {
  top: 22%;
  bottom: 22%;
  width: 13%;
}

.hsbd-pitch2-mark--box-left { left: 0; border-left: none; }
.hsbd-pitch2-mark--box-right { right: 0; border-right: none; }

.hsbd-pitch2-half {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  display: flex;
  padding: 10px 6px;
}

.hsbd-pitch2-half--away { flex-direction: row-reverse; }

.hsbd-pitch2-line {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.hsbd-pitch2-man {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f8fafc;
  color: #0f172a;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.hsbd-pitch2-man--away { background: #8b1538; color: #fff; }
a.hsbd-pitch2-man:hover { transform: scale(1.08); }

.hsbd-lineup-sheets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding-top: 18px;
}

.hsbd-lineup-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.hsbd-lineup-group h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--hsbd-text-title);
}

.hsbd-lineup-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
}

.hsbd-lineup-group li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.hsbd-lineup-group li > a,
.hsbd-lineup-group li > span:not(.hsbd-lineup-number) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsbd-lineup-number {
  flex: 0 0 22px;
  text-align: right;
  font-weight: 700;
  color: #94a3b8;
  font-size: 11.5px;
}

.hsbd-lineup-group small { color: #64748b; font-size: 11px; }

@media (max-width: 900px) {
  .hsbd-lineup-sheets { grid-template-columns: minmax(0, 1fr); }
}

/* Thống kê hai đội: hai thanh chung một thang, nhãn ở giữa. */
.hsbd-stat-compare-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

.hsbd-stat-compare-head span { display: flex; align-items: center; gap: 8px; }

.hsbd-stat-compare-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}

.hsbd-stat-compare-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 190px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
}

.hsbd-stat-compare-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--hsbd-text-title);
  text-align: right;
}

.hsbd-stat-compare-value--away { text-align: left; }

.hsbd-stat-compare-label {
  text-align: center;
  font-size: 12.5px;
  color: #64748b;
}

.hsbd-stat-compare-track {
  height: 7px;
  border-radius: 999px;
  background: #eef2f7;
  display: flex;
  overflow: hidden;
}

/* Thanh của đội nhà mọc từ phải sang trái, để hai thanh gặp nhau ở nhãn. */
.hsbd-stat-compare-track--left { justify-content: flex-end; }

.hsbd-stat-compare-fill { height: 100%; border-radius: 999px; }
.hsbd-stat-compare-fill--home { background: #2563eb; }
.hsbd-stat-compare-fill--away { background: #8b1538; }

@media (max-width: 720px) {
  .hsbd-stat-compare-row { grid-template-columns: 44px minmax(0, 1fr) 110px minmax(0, 1fr) 44px; gap: 6px; }
  .hsbd-stat-compare-label { font-size: 11px; }
}

/* Phong độ hai đội: chuỗi kết quả gần nhất, kèm bảng kê thắng/hòa/thua. */
.hsbd-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.hsbd-form-side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-form-side-head > span:not(.hsbd-form-pills) { display: flex; flex-direction: column; min-width: 0; }
.hsbd-form-side-head strong { font-size: 13.5px; color: var(--hsbd-text-title); }
.hsbd-form-side-head small { font-size: 11px; color: #64748b; }
.hsbd-form-pills { display: flex; gap: 4px; margin-left: auto; }

.hsbd-form-pill {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex: 0 0 20px;
}

.hsbd-form-pill--w { background: #16a34a; }
.hsbd-form-pill--d { background: #94a3b8; }
.hsbd-form-pill--l { background: #dc2626; }

.hsbd-form-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding-top: 10px;
}

.hsbd-form-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hsbd-form-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.hsbd-form-date { color: #94a3b8; flex: 0 0 34px; }

.hsbd-form-fixture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--hsbd-text-title);
}

.hsbd-form-team {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.hsbd-form-team--away { text-align: left; }
.hsbd-form-score { font-weight: 700; white-space: nowrap; }

.hsbd-form-tally {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.hsbd-form-tally strong { color: var(--hsbd-text-title); font-size: 14px; margin-right: 4px; }

/* Các trận khác cùng vòng, dạng thẻ nhỏ xếp lưới. */
.hsbd-round-sibling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.hsbd-round-sibling {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #edf1f6;
  border-radius: 10px;
  color: var(--hsbd-text-title);
  text-decoration: none;
}

.hsbd-round-sibling:hover { border-color: #cbd5e1; }
.hsbd-round-sibling-top { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; }

.hsbd-round-sibling-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.hsbd-round-sibling-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.hsbd-round-sibling-side small {
  font-size: 10.5px;
  color: #64748b;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.hsbd-round-sibling-body strong { font-size: 15px; white-space: nowrap; }

@media (max-width: 900px) {
  .hsbd-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Trang trận đấu là một cột: không có cột phải nào tranh chỗ với mặt sân. */
.hsbd-match-single {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cùng một dải breadcrumb như mọi trang khác — chữ nhỏ trên nền trang, không
   phải một thẻ trắng riêng — chỉ thêm ngày và sân ở đầu kia. */
.hsbd-match-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 0;
  font-size: 12px;
  color: var(--hsbd-text-muted);
}

.hsbd-match-topbar a { color: var(--hsbd-text-muted); text-decoration: none; }
.hsbd-match-topbar a:hover { color: var(--hsbd-primary); }
.hsbd-match-topbar-path > span[aria-hidden] { color: #94a3b8; }
.hsbd-match-topbar-path img { opacity: 0.9; }

.hsbd-match-topbar-path,
.hsbd-match-topbar-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsbd-match-topbar-path strong { color: var(--hsbd-text-title); font-weight: 700; }
.hsbd-match-topbar-comp { font-weight: 600; }

/* Ba cột: danh sách đội nhà, mặt sân, danh sách đội khách — cùng thứ tự với
   những gì vẽ trên sân. */
.hsbd-lineup-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: 18px;
  align-items: start;
}

.hsbd-lineup-col { min-width: 0; }
.hsbd-lineup-col--pitch { padding-top: 4px; }

.hsbd-lineup-columns .hsbd-lineup-head { padding-bottom: 12px; }

.hsbd-lineup-columns .hsbd-lineup-sheet {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 0;
}

.hsbd-lineup-columns .hsbd-lineup-group ul { font-size: 12px; }

@media (max-width: 1000px) {
  .hsbd-lineup-columns { grid-template-columns: minmax(0, 1fr); }
  .hsbd-lineup-col--pitch { order: -1; }
}

/* Đường dọc chạy suốt giữa hai cột: các mốc phút là những nút trên cùng một
   trục thời gian, không phải các nhãn rời rạc. */
.hsbd-timeline2 {
  position: relative;
}

.hsbd-timeline2::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #e2e8f0;
  border-radius: 2px;
}

.hsbd-tl2-minute {
  position: relative;
  z-index: 1;
}

/* Ô sự kiện trải hết nửa của mình, để hai bên cân nhau. */
.hsbd-tl2-cell { width: 100%; }

/* ---- Trang trận đấu trên màn hình hẹp ---- */
@media (max-width: 720px) {
  /* Trục dọc thuộc về bố cục hai bên; ở một cột nó cắt ngang nội dung. */
  .hsbd-timeline2::before { display: none; }

  /* Không còn trái/phải thì phải nói ra đội nào, nếu không mọi dòng giống nhau. */
  .hsbd-tl2-row { position: relative; }

  .hsbd-tl2-cell,
  .hsbd-tl2-row.is-away .hsbd-tl2-cell {
    border-left: 3px solid #2563eb;
  }

  .hsbd-tl2-row.is-away .hsbd-tl2-cell { border-left-color: #8b1538; }

  /* Bảng tỉ số: hai đội thành hai hàng, tỉ số ở giữa, tên căn trái cả hai. */
  .hsbd-match-summary-board {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px 12px;
    padding-top: 14px;
  }

  .hsbd-match-summary-side {
    display: contents;
  }

  .hsbd-match-summary-crest { grid-column: 1; width: 44px; height: 44px; flex-basis: 44px; justify-self: center; }
  .hsbd-match-summary-name { grid-column: 2; font-size: 17px; text-align: left; }
  .hsbd-match-summary-side--home .hsbd-match-summary-crest { order: -1; }

  .hsbd-match-summary-score {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 10px;
    padding: 4px 0;
  }

  .hsbd-match-summary-score strong { font-size: 30px; }

  .hsbd-match-summary-score { justify-content: center; }

  /* Người ghi bàn: một cột, căn trái. Xếp chung thì phải nói bàn của ai —
     cùng mã màu với dòng sự kiện phía dưới. */
  .hsbd-match-summary-scorers { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hsbd-scorer-list--home,
  .hsbd-scorer-list--away { grid-column: 1; }
  .hsbd-scorer-list--home li { justify-content: flex-start; }
  .hsbd-scorer-list--home li .hsbd-scorer-ball { order: -1; }

  .hsbd-scorer-list li {
    padding-left: 9px;
    border-left: 3px solid #2563eb;
  }

  .hsbd-scorer-list--away li { border-left-color: #8b1538; }

  /* Thống kê: thanh quá ngắn thì không so sánh được gì — nhãn lên trên. */
  .hsbd-stat-compare-row {
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr) 54px;
    grid-template-areas:
      "label label label label"
      "lval lbar rbar rval";
    gap: 4px 8px;
  }

  .hsbd-stat-compare-label { grid-area: label; text-align: center; }
  .hsbd-stat-compare-value { grid-area: lval; }
  .hsbd-stat-compare-track--left { grid-area: lbar; }
  .hsbd-stat-compare-track--right { grid-area: rbar; }
  .hsbd-stat-compare-value--away { grid-area: rval; }

  /* Bảng thống kê cầu thủ 40 dòng: cho cuộn ngang thay vì bóp mất cột. */
  .hsbd-underapi-match .hsbd-table-responsive { overflow-x: auto; }
  .hsbd-underapi-match .hsbd-table-responsive table { min-width: 560px; }
}

/* ======================= TRANG CHỦ ======================= */

.hsbd-home-hero {
  background: linear-gradient(135deg, #0b1220 0%, #12203a 55%, #0f2d24 100%);
  color: #fff;
  padding: 54px 0 46px;
  margin-bottom: 26px;
}

.hsbd-home-hero-title {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
}

.hsbd-home-hero-title span { color: var(--hsbd-primary, #16a34a); }

.hsbd-home-hero-sub {
  margin: 0 0 22px;
  max-width: 620px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.hsbd-home-hero-search {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 620px;
  margin-bottom: 18px;
}

/* Theme cha đặt chiều cao, lề dưới và bóng riêng cho input, nên ô tìm kiếm
   thấp hơn nút và lệch lên trên. Khai báo lại đủ cả ba thì hai bên bằng nhau. */
.hsbd-home-hero-search input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 46px;
  margin: 0;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: #fff;
  font-size: 14px;
  line-height: normal;
}

/* Flatsome tô chữ input đang focus thành #333 (flatsome.css nạp sau file này);
   ô này nằm trên nền tối nên phải giữ chữ trắng cả lúc đang gõ. */
.hsbd-home-hero-search input[type="text"]:focus {
  outline: none;
  border-color: var(--hsbd-primary, #16a34a);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.hsbd-home-hero-search input::placeholder { color: rgba(255, 255, 255, 0.5); }

.hsbd-home-hero-search button {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 46px;
  margin: 0;
  padding: 0 22px;
  white-space: nowrap;
  line-height: normal;
  border: none;
  border-radius: 10px;
  background: var(--hsbd-primary, #16a34a);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* Tiêu đề khối: tên khối, một dòng giải thích, và lối ra ở đầu kia. */
.hsbd-home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.hsbd-home-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--hsbd-text-title);
}

.hsbd-home-head p { margin: 3px 0 0; font-size: 12.5px; color: #64748b; }

.hsbd-home-more {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  text-decoration: none;
  white-space: nowrap;
}

.hsbd-home-more:hover { border-color: #cbd5e1; }

/* Dải thẻ cuộn ngang: mười câu lạc bộ không xuống dòng thành hai hàng lệch.
   Thanh cuộn bị ẩn và thay bằng hai nút ở hai đầu — một thanh cuộn xám chạy
   ngang dưới mỗi khối làm trang trông như một bảng tính. */
.hsbd-home-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.hsbd-home-rail::-webkit-scrollbar { display: none; }

.hsbd-home-rail-wrap { position: relative; }

.hsbd-rail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: var(--hsbd-text-title);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.hsbd-rail-nav:hover { border-color: #cbd5e1; }
.hsbd-rail-nav[hidden] { display: none; }
.hsbd-rail-nav--prev { left: -12px; }
.hsbd-rail-nav--next { right: -12px; }

@media (max-width: 720px) {
  .hsbd-rail-nav { display: none; }
}

.hsbd-home-rail > * { flex: 0 0 auto; }

.hsbd-home-club,
.hsbd-home-league,
.hsbd-home-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 132px;
  padding: 14px 10px;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #fff;
  color: var(--hsbd-text-title);
  text-decoration: none;
  text-align: center;
}

.hsbd-home-club:hover,
.hsbd-home-league:hover,
.hsbd-home-player:hover { border-color: #cbd5e1; }

.hsbd-home-club img,
.hsbd-home-league img { width: 42px; height: 42px; object-fit: contain; }

.hsbd-home-club strong,
.hsbd-home-league strong,
.hsbd-home-player strong {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

.hsbd-home-club small,
.hsbd-home-league small,
.hsbd-home-player small { font-size: 11px; color: #64748b; }

.hsbd-home-player { width: 146px; }

.hsbd-home-player-photo { position: relative; display: inline-flex; }

.hsbd-home-player-photo > img:first-child {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef1f5;
}

.hsbd-home-player-crest {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 1px;
}

.hsbd-home-player-pos {
  font-size: 11px;
  color: #475569;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 10px;
}

/* Tab dùng chung cho trung tâm trận đấu và hai bảng bên dưới. */
.hsbd-home-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.hsbd-home-tab {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  cursor: pointer;
}

.hsbd-home-tab.is-active {
  background: var(--hsbd-primary, #16a34a);
  border-color: var(--hsbd-primary, #16a34a);
  color: #fff;
}

.hsbd-home-tabs--small .hsbd-home-tab { padding: 5px 11px; font-size: 11.5px; }

.hsbd-home-match {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 268px;
  padding: 14px;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #fff;
  color: var(--hsbd-text-title);
  text-decoration: none;
}

.hsbd-home-match:hover { border-color: #cbd5e1; }

.hsbd-home-match-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

.hsbd-home-match-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsbd-home-match-when.is-live { color: #dc2626; font-weight: 700; }

.hsbd-home-match-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.hsbd-home-match-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.hsbd-home-match-side img { width: 34px; height: 34px; object-fit: contain; }

.hsbd-home-match-side small {
  font-size: 11px;
  color: #475569;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.hsbd-home-match-body strong { font-size: 18px; font-weight: 800; white-space: nowrap; }

.hsbd-home-match-venue {
  font-size: 11px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ba khối cuối đứng cạnh nhau: bảng xếp hạng rộng nhất, thống kê hẹp nhất. */
.hsbd-home-trio {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 16px;
  align-items: start;
}

.hsbd-home-board .hsbd-home-head,
.hsbd-home-stats .hsbd-home-head { margin-bottom: 10px; }

.hsbd-home-table { font-size: 12.5px; }
.hsbd-home-table th { font-size: 11px; }
.hsbd-home-table td { padding: 7px 6px; }

.hsbd-home-table-club { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hsbd-home-table-club img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px; }
.hsbd-home-table-club a { color: var(--hsbd-text-title); }

.hsbd-home-board-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hsbd-primary, #16a34a);
  text-decoration: none;
}

.hsbd-home-stats dl { margin: 0; display: flex; flex-direction: column; }

.hsbd-home-stats dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

.hsbd-home-stats dl > div:last-child { border-bottom: none; }
.hsbd-home-stats dt { display: block; font-size: 12.5px; color: #64748b; margin: 0; }
.hsbd-home-stats dd { display: block; margin: 0; font-size: 15px; font-weight: 800; color: var(--hsbd-text-title); }

.hsbd-home-news {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.hsbd-home-news-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--hsbd-text-title);
  text-decoration: none;
}

.hsbd-home-news-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #e2e8f0;
}

.hsbd-home-news-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hsbd-home-news-thumb small {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 10.5px;
}

.hsbd-home-news-card strong { font-size: 13px; font-weight: 700; line-height: 1.4; }
.hsbd-home-news-card > small { font-size: 11px; color: #94a3b8; }

@media (max-width: 1100px) {
  .hsbd-home-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .hsbd-home-hero { padding: 36px 0 32px; }
  .hsbd-home-hero-title { font-size: 28px; }
  .hsbd-home-hero-search { flex-direction: column; }
  .hsbd-home-trio { grid-template-columns: minmax(0, 1fr); }

  /* Tiêu đề và lối ra ở cùng một hàng: xếp dọc thì "Xem tất cả" chiếm trọn
     một dòng trước mỗi khối, đẩy nội dung xuống gần một màn hình. */
  .hsbd-home-head { align-items: center; gap: 10px; }
  .hsbd-home-head h2 { font-size: 17px; }
  .hsbd-home-head p { font-size: 11.5px; }

  .hsbd-home-more {
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--hsbd-primary, #16a34a);
  }

  .hsbd-home-more::after { content: " \203A"; }

  /* Dải thẻ chạy hết bề ngang màn hình rồi mới dừng, chứ không bị cắt cụt ở
     mép container — thẻ cuối luôn còn một khoảng thở bên phải. */
  .hsbd-home-rail {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Tab cuộn ngang thay vì gãy thành ba dòng. */
  .hsbd-home-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 2px;
  }

  .hsbd-home-tabs::-webkit-scrollbar { display: none; }
  .hsbd-home-tab { flex: 0 0 auto; }

  /* Bảng xếp hạng: tên CLB không xuống hai dòng làm hàng cao gấp đôi. */
  .hsbd-home-table { font-size: 12px; }
  .hsbd-home-table td { padding: 6px 4px; }
  .hsbd-home-table-club { max-width: 118px; }
  .hsbd-home-table-club a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Tin tức một cột thì ảnh 16:9 cao quá nửa màn hình; xếp ngang lại. */
  .hsbd-home-news { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .hsbd-home-news-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-areas: "thumb title" "thumb meta";
    align-items: start;
    column-gap: 12px;
    row-gap: 4px;
  }

  .hsbd-home-news-thumb { grid-area: thumb; }
  .hsbd-home-news-card strong { grid-area: title; }
  .hsbd-home-news-card > small { grid-area: meta; }
}

/* Ảnh hero nằm sau chữ, neo mép phải: chữ luôn đọc được kể cả khi ảnh chưa có
   hoặc màn hình quá hẹp để ảnh còn chỗ. */
.hsbd-home-hero { position: relative; overflow: hidden; }

.hsbd-home-hero-art {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 58%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  z-index: 0;
}

.hsbd-home-hero-inner { position: relative; z-index: 1; }
.hsbd-home-hero.has-art .hsbd-home-hero-title,
.hsbd-home-hero.has-art .hsbd-home-hero-sub,
.hsbd-home-hero.has-art .hsbd-home-hero-search { max-width: 620px; }

@media (max-width: 900px) {
  .hsbd-home-hero-art { opacity: 0.22; max-width: 100%; }
}

/* Dưới 480px container thu còn 12px, dải thẻ phải tràn đúng bằng đó. */
@media (max-width: 480px) {
  .hsbd-home-rail,
  .hsbd-home-tabs {
    margin-left: -12px;
    margin-right: -12px;
  }

  .hsbd-home-rail {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hsbd-home-tabs { padding: 0 12px 2px; }
}

/* ==========================================================================
   16. BÀI VIẾT ĐƠN (SINGLE POST) — post_type "post" (single.php)
   ========================================================================== */

.hsbd-single-post {
  max-width: 760px;
}

.hsbd-single-post-card {
  padding: 28px 32px 32px;
}

.hsbd-single-post-cat {
  margin-bottom: 14px;
}

.hsbd-single-post-title {
  font-family: var(--hsbd-font-sans);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--hsbd-text-title);
  margin: 0 0 12px;
}

.hsbd-single-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--hsbd-text-muted);
  margin-bottom: 20px;
}

.hsbd-single-post-meta-sep {
  color: var(--hsbd-border);
}

.hsbd-single-post-thumb {
  margin-bottom: 24px;
}

.hsbd-single-post-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--hsbd-radius);
  box-shadow: var(--hsbd-shadow-sm);
}

/* Nội dung the_content(): hỗ trợ các block cơ bản (đoạn, heading, list, ảnh, quote, link) */
.hsbd-single-post-content {
  font-family: var(--hsbd-font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--hsbd-text-body);
}

.hsbd-single-post-content > * + * {
  margin-top: 18px;
}

.hsbd-single-post-content h2,
.hsbd-single-post-content h3,
.hsbd-single-post-content h4 {
  font-weight: 700;
  line-height: 1.35;
  color: var(--hsbd-text-title);
  margin-top: 32px;
}

.hsbd-single-post-content h2 { font-size: 24px; }
.hsbd-single-post-content h3 { font-size: 20px; }
.hsbd-single-post-content h4 { font-size: 17px; }

.hsbd-single-post-content ul,
.hsbd-single-post-content ol {
  padding-left: 22px;
}

.hsbd-single-post-content li + li {
  margin-top: 6px;
}

.hsbd-single-post-content a {
  color: var(--hsbd-primary);
  text-decoration: underline;
}

.hsbd-single-post-content a:hover {
  color: var(--hsbd-primary-hover);
}

.hsbd-single-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hsbd-radius-sm);
}

.hsbd-single-post-content figcaption {
  font-size: 13px;
  color: var(--hsbd-text-muted);
  text-align: center;
  margin-top: 8px;
}

.hsbd-single-post-content blockquote {
  margin: 0;
  padding: 4px 20px;
  border-left: 3px solid var(--hsbd-primary);
  color: var(--hsbd-text-title);
  font-style: italic;
}

.hsbd-single-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hsbd-border);
}

/* Khối bình luận: bọc comments_template() gốc Flatsome, chỉnh lại màu/khoảng cách cho khớp HSBD */
.hsbd-single-post-comments {
  padding: 28px 32px 32px;
}

.hsbd-single-post-comments #comments-title,
.hsbd-single-post-comments .comments-title {
  font-family: var(--hsbd-font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  margin: 0 0 20px;
}

.hsbd-single-post-comments .comment-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.hsbd-single-post-comments .comment-list .children {
  list-style: none;
  padding-left: 24px;
  margin: 0;
}

.hsbd-single-post-comments li.comment {
  padding: 18px 0;
  border-top: 1px solid var(--hsbd-border);
}

.hsbd-single-post-comments li.comment:first-child {
  border-top: none;
  padding-top: 0;
}

.hsbd-single-post-comments .comment-author img {
  border-radius: var(--hsbd-radius-full);
}

.hsbd-single-post-comments .fn,
.hsbd-single-post-comments cite.fn {
  font-style: normal;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

.hsbd-single-post-comments .comment-content {
  color: var(--hsbd-text-body);
  font-size: 14px;
  line-height: 1.6;
  margin: 6px 0;
}

.hsbd-single-post-comments .comment-meta,
.hsbd-single-post-comments .comment-metadata {
  font-size: 12px;
  color: var(--hsbd-text-muted);
}

.hsbd-single-post-comments .comment-reply-link {
  color: var(--hsbd-primary);
  font-weight: 600;
  text-decoration: none;
}

.hsbd-single-post-comments #respond {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hsbd-border);
}

.hsbd-single-post-comments #reply-title {
  font-family: var(--hsbd-font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  margin: 0 0 16px;
}

.hsbd-single-post-comments #commentform label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hsbd-text-title);
  margin-bottom: 6px;
}

.hsbd-single-post-comments #commentform p {
  margin: 0 0 16px;
}

.hsbd-single-post-comments #commentform input[type="text"],
.hsbd-single-post-comments #commentform input[type="email"],
.hsbd-single-post-comments #commentform input[type="url"],
.hsbd-single-post-comments #commentform textarea {
  width: 100%;
  border: 1px solid var(--hsbd-border);
  border-radius: var(--hsbd-radius-sm);
  padding: 10px 14px;
  font-family: var(--hsbd-font-sans);
  font-size: 14px;
  color: var(--hsbd-text-title);
  background: var(--hsbd-card-bg);
  outline: none;
  box-sizing: border-box;
  transition: var(--hsbd-transition);
}

.hsbd-single-post-comments #commentform textarea {
  min-height: 120px;
  resize: vertical;
}

.hsbd-single-post-comments #commentform input[type="text"]:focus,
.hsbd-single-post-comments #commentform input[type="email"]:focus,
.hsbd-single-post-comments #commentform input[type="url"]:focus,
.hsbd-single-post-comments #commentform textarea:focus {
  border-color: var(--hsbd-primary);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.12);
}

.hsbd-single-post-comments #commentform input[type="submit"] {
  display: inline-block;
  background: var(--hsbd-primary);
  color: #ffffff;
  font-family: var(--hsbd-font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--hsbd-radius-full);
  border: none;
  cursor: pointer;
  transition: var(--hsbd-transition);
}

.hsbd-single-post-comments #commentform input[type="submit"]:hover {
  background: var(--hsbd-primary-hover);
}

@media (max-width: 480px) {
  .hsbd-single-post-card,
  .hsbd-single-post-comments {
    padding: 20px 16px 24px;
  }

  .hsbd-single-post-title {
    font-size: 24px;
  }

  .hsbd-single-post-content {
    font-size: 15px;
  }
}

/* Fix 1: .hsbd-tag là flex item trực tiếp của .hsbd-card (display:flex; flex-direction:column),
   nên bị "blockify" + kéo giãn hết chiều ngang theo align-items:stretch mặc định — ghim lại
   thành pill ôm chữ. */
.hsbd-single-post-cat {
  align-self: flex-start;
}

/* Fix 2: comments.php dùng lại class_container mặc định đổi tên 'hsbd-comment-respond'
   (không phải 'comment-respond' của Flatsome) nên bỏ được nền/viền lồng của Flatsome;
   khối #respond chỉ còn đường kẻ phân cách phẳng với card HSBD. */
.hsbd-single-post-comments #respond {
  background: transparent;
  padding: 24px 0 0;
}

/* Fix 3: checkbox đồng ý cookie phải nằm cùng hàng với nhãn — loại trừ khỏi rule
   "label { display:block }" chung áp cho các trường tên/email/website/bình luận. */
.hsbd-single-post-comments #commentform p.comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsbd-single-post-comments #commentform p.comment-form-cookies-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}

.hsbd-single-post-comments #commentform p.comment-form-cookies-consent label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
  color: var(--hsbd-text-body);
}

/* Bố cục avatar + nội dung cho callback wp_list_comments riêng (comments.php) */
.hsbd-single-post-comments .hsbd-comment-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.hsbd-single-post-comments .hsbd-comment-avatar {
  flex-shrink: 0;
}

.hsbd-single-post-comments .hsbd-comment-avatar img {
  display: block;
  border-radius: var(--hsbd-radius-full);
}

.hsbd-single-post-comments .hsbd-comment-body {
  flex: 1;
  min-width: 0;
}

.hsbd-single-post-comments .hsbd-comment-pending {
  display: block;
  font-style: italic;
  font-size: 12px;
  color: var(--hsbd-text-muted);
  margin-top: 4px;
}

.hsbd-single-post-comments .hsbd-comment-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
}

.hsbd-single-post-comments .hsbd-no-comments {
  color: var(--hsbd-text-muted);
  font-size: 14px;
}

/* ==========================================================================
   16b. DANH SÁCH BÀI VIẾT (ARCHIVE) — category.php/tag.php/date archive
   dùng chung archive.php. Danh sách dọc đơn giản (không lưới); bài có ảnh
   đại diện thì ảnh nằm trái nội dung, xuống trên nội dung ở di động.
   ========================================================================== */

.hsbd-archive-posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hsbd-card.hsbd-archive-post {
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.hsbd-archive-post-thumb {
  display: block;
  flex: 0 0 240px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #e2e8f0;
}

.hsbd-archive-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flex column như .hsbd-card để margin meta/excerpt không collapse (giữ 30px như khi chưa có wrapper). */
.hsbd-archive-post-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .hsbd-card.hsbd-archive-post {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .hsbd-archive-post-thumb {
    flex-basis: auto;
    width: 100%;
  }
}

.hsbd-archive-post-title {
  margin: 0 0 8px;
}

.hsbd-archive-post-title a {
  font-family: var(--hsbd-font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  text-decoration: none;
}

.hsbd-archive-post-title a:hover {
  color: var(--hsbd-primary);
}

.hsbd-archive-post-excerpt {
  margin: 10px 0 0;
  color: var(--hsbd-text-body);
}

.hsbd-archive-pagination {
  margin-top: 32px;
}

/* ============================================================
   Lịch thi đấu archive (/tran-dau/) — one-day schedule view.
   Classes are scoped under hsbd-schedule-* so nothing here reaches the
   match-list classes shared with club/competition/player match widgets.
   ============================================================ */

.hsbd-schedule-h1 {
  font-size: 24px;
}

.hsbd-schedule-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hsbd-schedule-head-left {
  min-width: 0;
  flex: 1 1 auto;
}

.hsbd-schedule-head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.hsbd-schedule-count-pill {
  display: inline-flex;
  align-items: center;
  background: var(--hsbd-primary-light);
  color: var(--hsbd-primary);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--hsbd-radius-full);
  white-space: nowrap;
}

.hsbd-schedule-subtitle {
  margin: 0;
  font-size: 13.5px;
  color: var(--hsbd-text-muted);
}

.hsbd-schedule-date-controls {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

/* Flatsome applies its own button padding/line-height to `a`/`button`
   elements inside content, which is what forced the related-carousel arrows
   to be re-pinned with !important in 181b922. The date controls and CTA
   below are the same kind of element, so they get the same treatment. */
.hsbd-schedule-date-btn,
.hsbd-schedule-date-picker-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-radius: var(--hsbd-radius-full) !important;
  border: 1px solid var(--hsbd-border) !important;
  background: #ffffff !important;
  color: var(--hsbd-text-body) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: var(--hsbd-transition);
}

.hsbd-schedule-date-btn:hover {
  border-color: var(--hsbd-primary) !important;
  color: var(--hsbd-primary) !important;
}

.hsbd-schedule-date-btn.is-active {
  background: var(--hsbd-primary) !important;
  border-color: var(--hsbd-primary) !important;
  color: #ffffff !important;
}

.hsbd-schedule-date-picker {
  position: relative;
  display: inline-flex;
}

.hsbd-schedule-date-picker.is-active .hsbd-schedule-date-picker-label {
  background: var(--hsbd-primary) !important;
  border-color: var(--hsbd-primary) !important;
  color: #ffffff !important;
}

.hsbd-schedule-date-picker-caret {
  font-size: 11px;
}

/* The real <input type=date> sits transparent over the styled label, so a
   click anywhere on the pill opens the native picker; the label's own text
   is what the reader actually sees. */
.hsbd-schedule-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Chrome/Safari chỉ mở lịch khi bấm trúng icon lịch ở mép phải ô date, bấm
   vào phần chữ chỉ chọn ngày/tháng/năm. Kéo icon (vô hình) phủ kín cả nút. */
.hsbd-schedule-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.hsbd-schedule-date-submit {
  margin-left: 6px;
  border-radius: var(--hsbd-radius-full);
  border: 1px solid var(--hsbd-border);
  background: #ffffff;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Competition filter bar */
.hsbd-schedule-filter-bar {
  flex-direction: row;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hsbd-schedule-filter-bar::-webkit-scrollbar {
  height: 4px;
}

.hsbd-schedule-filter-track {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: max-content;
}

.hsbd-schedule-filter-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--hsbd-radius-full);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hsbd-text-body);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--hsbd-transition);
}

.hsbd-schedule-filter-pill:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--hsbd-border);
}

.hsbd-schedule-filter-pill:hover:not(.is-active) {
  color: var(--hsbd-primary);
}

.hsbd-schedule-filter-pill.is-active {
  background: var(--hsbd-primary);
  color: #ffffff;
}

.hsbd-schedule-filter-pill.is-active::after {
  display: none;
}

.hsbd-schedule-filter-logo {
  border-radius: 3px;
  object-fit: contain;
}

/* Groups */
.hsbd-schedule-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hsbd-schedule-group {
  padding: 0;
  overflow: hidden;
}

.hsbd-schedule-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hsbd-border);
}

.hsbd-schedule-group-logo {
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}

.hsbd-schedule-group-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--hsbd-text-title);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsbd-schedule-fav-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--hsbd-transition);
}

.hsbd-schedule-fav-btn:hover {
  background: var(--hsbd-primary-light) !important;
  color: #f59e0b;
}

.hsbd-schedule-fav-btn svg {
  width: 18px !important;
  height: 18px !important;
  pointer-events: none;
}

.hsbd-schedule-fav-btn[aria-pressed="true"] {
  color: #f59e0b;
}

.hsbd-schedule-fav-btn[aria-pressed="true"] svg {
  fill: currentColor;
}

.hsbd-schedule-group-round {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--hsbd-primary);
  text-decoration: none;
  white-space: nowrap;
}

.hsbd-schedule-group-round:hover {
  text-decoration: underline;
}

.hsbd-schedule-date-strip {
  padding: 8px 20px;
  background: #f8fafc;
  color: var(--hsbd-text-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.hsbd-schedule-rows {
  display: flex;
  flex-direction: column;
}

.hsbd-schedule-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 88px minmax(0, 1fr) 128px 172px;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid #eef1f5;
  font-size: 13.5px;
}

.hsbd-schedule-row:last-child {
  border-bottom: none;
}

.hsbd-schedule-row-time {
  grid-column: 1;
  font-weight: 700;
  color: var(--hsbd-text-title);
}

.hsbd-schedule-row-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hsbd-schedule-row-team--home {
  grid-column: 2;
}

/* Desktop/tablet: away stays its own left-aligned column, crest then name —
   the markup order. Home mirrors to the right (see
   .hsbd-schedule-row-team--home in the ≥481px block) so the score sits
   between two crests, but away itself doesn't change. */
.hsbd-schedule-row-team--away {
  grid-column: 4;
}

.hsbd-schedule-crest-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.hsbd-schedule-crest-slot img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hsbd-schedule-team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--hsbd-text-title);
}

.hsbd-schedule-row-center {
  grid-column: 3;
  text-align: center;
  font-weight: 700;
}

.hsbd-schedule-vs {
  color: var(--hsbd-text-muted);
  font-weight: 600;
  font-size: 12.5px;
}

.hsbd-schedule-score {
  color: var(--hsbd-text-title);
}

.hsbd-schedule-row-status {
  grid-column: 5;
  display: flex;
  justify-content: center;
}

.hsbd-schedule-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--hsbd-radius-full);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  background: #f1f5f9;
  color: var(--hsbd-text-muted);
}

.hsbd-schedule-status-pill.is-live {
  background: #fee2e2;
  color: #dc2626;
}

.hsbd-schedule-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
}

.hsbd-schedule-status-pill.is-finished {
  background: #e2e8f0;
  color: #334155;
}

.hsbd-schedule-status-pill.is-postponed,
.hsbd-schedule-status-pill.is-cancelled {
  background: #fef3c7;
  color: #92400e;
}

.hsbd-schedule-row-cta {
  grid-column: 6;
  display: flex;
  justify-content: flex-end;
}

.hsbd-schedule-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: var(--hsbd-radius-full) !important;
  border: 1.5px solid var(--hsbd-primary) !important;
  background: #ffffff !important;
  color: var(--hsbd-primary) !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: var(--hsbd-transition);
}

.hsbd-schedule-cta-btn:hover {
  background: var(--hsbd-primary-light) !important;
}

.hsbd-schedule-cta-btn.is-live {
  background: var(--hsbd-primary) !important;
  color: #ffffff !important;
}

.hsbd-schedule-cta-btn.is-live:hover {
  background: var(--hsbd-primary-hover) !important;
}

.hsbd-schedule-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--hsbd-text-body);
}

.hsbd-schedule-empty p {
  margin: 0 0 14px;
  font-size: 15px;
}

.hsbd-schedule-empty-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.hsbd-schedule-empty-links a {
  color: var(--hsbd-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 13.5px;
}

.hsbd-schedule-empty-links a:hover {
  text-decoration: underline;
}

@media (min-width: 481px) {
  .hsbd-schedule-row {
    min-height: 60px;
  }
  .hsbd-schedule-row-time {
    font-size: 15px;
  }
  /* Markup is crest-then-name (shared with away); flipping the visual order
     and alignment here instead of in the markup keeps the ≤480 layout,
     which reuses the same markup, pixel-identical. */
  .hsbd-schedule-row-team--home {
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
  }
  .hsbd-schedule-team-name {
    font-size: 15.5px;
  }
  .hsbd-schedule-vs {
    font-size: 15px;
  }
  .hsbd-schedule-score {
    font-size: 18px;
    font-weight: 700;
  }
}

@media (max-width: 1024px) {
  .hsbd-schedule-row {
    grid-template-columns: 60px minmax(0, 1fr) 64px minmax(0, 1fr) 104px 140px;
    gap: 8px;
    padding: 10px 14px;
  }
  .hsbd-schedule-crest-slot,
  .hsbd-schedule-crest-slot img {
    width: 28px;
    height: 28px;
  }
  .hsbd-schedule-team-name {
    font-size: 14px;
  }
  .hsbd-schedule-group-head { padding: 14px; }
  .hsbd-schedule-date-strip { padding: 8px 14px; }
}

@media (max-width: 768px) {
  .hsbd-schedule-head {
    flex-direction: column;
    align-items: stretch;
  }
  /* align-items:stretch can't size these two: with flex-direction:column and
     an auto (content-based) container height, the browser sizes a stretched
     item's cross axis (width, here) off its own content instead — and the
     all-caps nowrap H1 is wide enough to push that past the container. An
     explicit width is definite and skips that content-based sizing. */
  .hsbd-schedule-head-left,
  .hsbd-schedule-date-controls {
    width: 100%;
  }
  .hsbd-schedule-date-controls {
    /* A flex item's default min-width is auto, which ignores the parent's
       100% and lets this row push the whole page wider instead of scrolling
       on its own — min-width:0 is what lets overflow-x actually clip it. */
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .hsbd-schedule-date-btn,
  .hsbd-schedule-date-picker {
    flex-shrink: 0;
  }
  .hsbd-schedule-row {
    grid-template-columns: 50px minmax(0, 1fr) 46px minmax(0, 1fr) 90px 120px;
  }
  .hsbd-schedule-cta-btn {
    padding: 0 10px !important;
    font-size: 12px;
  }
}

/* Phone: each row folds to [time · status] then [home | score/vs | away],
   with the CTA as its own full-width line underneath. A full-width label
   stays legible at this width; an icon-only button would need a tooltip to
   say what it does, which is worse on a touch device than just more height. */
@media (max-width: 480px) {
  /* .hsbd-sec-title (shared with every other HSBD archive) sets
     white-space:nowrap; this title is long enough in all-caps that it needs
     to wrap at phone width instead of carrying the row wider than the
     viewport. Scoped to this page's own class, not the shared rule. */
  .hsbd-schedule-h1 {
    white-space: normal;
    font-size: 20px;
  }
  .hsbd-schedule-head-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* align-items:flex-start sizes a flex item to its own content instead of
     the row's available width, so the subtitle shrank to one unwrapped line
     and ran past the viewport edge instead of wrapping. */
  .hsbd-schedule-subtitle {
    width: 100%;
  }
  .hsbd-schedule-date-btn,
  .hsbd-schedule-date-picker-label {
    padding: 0 12px !important;
    font-size: 12.5px;
  }
  .hsbd-schedule-filter-bar {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .hsbd-schedule-group-head {
    flex-wrap: wrap;
    padding: 12px 14px;
  }
  .hsbd-schedule-date-strip {
    padding: 8px 14px;
  }
  .hsbd-schedule-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "time   time   status"
      "home   center away"
      "cta    cta    cta";
    row-gap: 8px;
    padding: 12px 14px;
  }
  .hsbd-schedule-row-time { grid-area: time; }
  .hsbd-schedule-row-status { grid-area: status; justify-content: flex-end; }
  .hsbd-schedule-row-team--home { grid-area: home; }
  .hsbd-schedule-row-center { grid-area: center; }
  /* Markup is crest-then-name (same as home) so the desktop/tablet column is
     plain left-aligned; row-reverse is what puts this phone layout back to
     "name, then crest" against the row's right edge, matching how it looked
     before the desktop column rework. */
  .hsbd-schedule-row-team--away {
    grid-area: away;
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: right;
  }
  .hsbd-schedule-crest-slot,
  .hsbd-schedule-crest-slot img {
    width: 22px;
    height: 22px;
  }
  .hsbd-schedule-team-name {
    max-width: 88px;
    font-size: 13.5px;
  }
  .hsbd-schedule-row-cta {
    grid-area: cta;
    justify-content: stretch;
  }
  .hsbd-schedule-cta-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}