/* =========================================================================
   Theme MBHX Runners — biến CSS tập trung, dễ đổi bảng màu sau này.
   Ghi đè biến CSS của Bootstrap 5.3 (--bs-*) để tái sử dụng component có sẵn
   (btn, card, badge, table...) nhưng theo đúng bảng màu/typography riêng.
   ========================================================================= */

/* Font "Lexend" cho riêng tiêu đề lớn ở banner (xem .banner-title) — tự lưu file font trong
   assets/fonts/ thay vì tải qua Google Fonts, để không phụ thuộc mạng/trình duyệt của người xem
   (ad-block, VPN, mạng chặn Google Fonts...). Chỉ cần 2 file: 1 cho chữ Latin thường, 1 cho các
   ký tự có dấu tiếng Việt — đúng cách Google Fonts tự tách nhỏ theo unicode-range.
*/
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/lexend-800-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/lexend-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Bảng màu ---- */
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-primary-light: #eef2ff;

  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;

  --color-danger: #e11d48;
  --color-danger-bg: #fff1f2;
  --color-danger-border: #fecdd3;

  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #64748b;

  /* ---- Bo góc & bóng đổ ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* ---- Ghi đè biến Bootstrap để đồng bộ toàn site ---- */
  --bs-font-sans-serif: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);

  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-link-hover-color-rgb: 67, 56, 202;

  --bs-success: var(--color-success);
  --bs-success-rgb: 5, 150, 105;
  --bs-success-bg-subtle: var(--color-success-bg);
  --bs-success-border-subtle: var(--color-success-border);
  --bs-success-text-emphasis: var(--color-success);

  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 225, 29, 72;
  --bs-danger-bg-subtle: var(--color-danger-bg);
  --bs-danger-border-subtle: var(--color-danger-border);
  --bs-danger-text-emphasis: var(--color-danger);

  --bs-warning-bg-subtle: var(--color-warning-bg);
  --bs-warning-text-emphasis: var(--color-warning);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Chuyển trang mượt hơn ở trình duyệt hỗ trợ View Transitions (Chrome/Edge);
   trình duyệt khác bỏ qua at-rule này một cách an toàn. */
@view-transition {
  navigation: auto;
}

html, body {
  background: var(--color-bg);
}

body {
  font-family: var(--bs-font-sans-serif);
  color: var(--color-text);
}

main {
  animation: fadeInUp 320ms ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-muted-soft {
  color: var(--color-text-muted) !important;
}

/* ---- Navbar ---- */
.navbar {
  background: var(--color-surface) !important;
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nav-link {
  font-weight: 500;
  transition: color var(--transition-fast);
}

/* ---- Buttons ---- */
.btn {
  font-weight: 600;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  box-shadow: 0 2px 8px rgba(79, 70, 229, .25);
}

.btn-primary:hover {
  box-shadow: 0 6px 16px rgba(79, 70, 229, .3);
}

/* ---- Cards ---- */
.card {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.member-card {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.member-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ---- Avatar ---- */
.avatar-ring {
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
}

.avatar-initials {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ---- Banner đội (trang chủ) ---- */
.team-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .14), transparent 45%),
    linear-gradient(120deg, #1e1b4b 0%, #4338ca 45%, #7c3aed 80%, #db2777 120%);
  background-size: 100% 100%, 160% 160%;
  box-shadow: 0 20px 45px rgba(67, 56, 202, .32), 0 4px 10px rgba(15, 23, 42, .12);
  animation: bannerShift 14s ease-in-out infinite alternate;
}

@keyframes bannerShift {
  from { background-position: 0 0, 0% 50%; }
  to { background-position: 0 0, 100% 50%; }
}

.banner-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bn-sun {
  animation: sunPulse 6s ease-in-out infinite alternate;
  transform-origin: 980px 120px;
}

@keyframes sunPulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.bn-road {
  animation: roadRun 2.4s linear infinite;
}

@keyframes roadRun {
  to { stroke-dashoffset: -52; }
}

.banner-content {
  position: relative;
  padding: 3.25rem 2.5rem 2.5rem;
  max-width: 720px;
}

.banner-eyebrow {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.banner-title {
  margin: 1rem 0 .5rem;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  font-weight: 800;
  /* line-height: 1 cắt mất dấu nặng/dấu mũ của chữ tiếng Việt (vd "Ệ") ở cỡ chữ lớn — cần
     khoảng hở tối thiểu để dấu không bị đè lên dòng dưới hoặc bị viền ngoài cắt. */
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .25);
  /* Dùng riêng "Lexend" (tự lưu file, xem @font-face ở đầu file) cho tiêu đề lớn này — nét đậm,
     hiện đại gần giống Be Vietnam Pro, các chữ nhỏ hơn ở nơi khác vẫn giữ Be Vietnam Pro như cũ. */
  font-family: 'Lexend', 'Be Vietnam Pro', system-ui, sans-serif;
}

.banner-title span {
  /* NGUYÊN NHÂN THẬT của lỗi "mất dấu" từng gặp ở chữ có dấu mũ + dấu hỏi/ngã (Ẩ, Ẫ, Ể, Ễ, Ổ,
     Ỗ, Ẳ, Ẵ, Ở, Ỡ, Ử, Ữ): KHÔNG phải do font, mà do gradient + background-clip:text (tô màu qua
     "mặt nạ" hình chữ) xung đột với GPU render trên một số máy khi chữ cỡ lớn — chữ nhỏ hơn ở
     nơi khác dùng màu thường (không qua background-clip) không hề bị. Đã xác nhận: đổi font vẫn
     lỗi, chỉ bỏ hẳn background-clip:text (dùng màu đặc thay vì gradient) mới hết. ĐỪNG quay lại
     dùng background-clip:text cho chữ cỡ lớn nếu không muốn lỗi tái diễn. Màu cam lấy từ mặt
     trời trong hình banner (.bn-sun) cho đồng bộ. */
  color: #fb923c;
}

.banner-tagline {
  margin: 0 0 1.6rem;
  max-width: 34rem;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: rgba(255, 255, 255, .88);
}

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.banner-btn {
  border-radius: var(--radius-pill);
  padding: .7rem 1.6rem;
  font-weight: 700;
}

.btn-strava {
  background: #fc4c02;
  border-color: #fc4c02;
  color: #fff;
  box-shadow: 0 8px 22px rgba(252, 76, 2, .45);
}

.btn-strava:hover {
  background: #e34402;
  border-color: #e34402;
  color: #fff;
  box-shadow: 0 12px 28px rgba(252, 76, 2, .55);
}

.btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .7);
}

.banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.banner-stat {
  display: flex;
  flex-direction: column;
  min-width: 108px;
  padding: .7rem 1.1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}

.banner-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
}

.banner-stat-num small {
  font-size: .8rem;
  font-weight: 600;
  opacity: .75;
}

.banner-stat-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
}

.banner-sports {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  pointer-events: none;
}

.banner-sport {
  position: absolute;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  font-size: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
  animation: sportFloat 5s ease-in-out infinite alternate;
}

.banner-sport.s1 { top: 14%; right: 38%; }
.banner-sport.s2 { top: 44%; right: 12%; width: 100px; height: 100px; font-size: 3rem; animation-delay: -1.6s; }
.banner-sport.s3 { top: 62%; right: 48%; width: 72px; height: 72px; font-size: 2.2rem; animation-delay: -3.2s; }
.banner-sport.s4 { top: 6%; right: 8%; width: 60px; height: 60px; font-size: 1.9rem; animation-delay: -0.8s; }

@keyframes sportFloat {
  from { transform: translateY(-8px); }
  to { transform: translateY(8px); }
}

@media (max-width: 767px) {
  .banner-sports { display: none; }
  .banner-content { padding: 2.25rem 1.4rem 1.6rem; }
  .banner-stat { flex: 1 1 0; min-width: 0; padding: .6rem .8rem; }
  .banner-stat-num { font-size: 1.15rem; }
  .banner-btn { flex: 1 1 100%; text-align: center; }
}

/* ---- Pill / badge trạng thái ---- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.badge-pill-ok {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-pill-bad {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge-pill-neutral {
  background: #f1f5f9;
  color: #475569;
}

.badge-pill-info {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ---- Ô trạng thái đạt/chưa đạt trong bảng: gọn — số/target 1 dòng + progress bar mảnh ---- */
.status-cell {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 78px;
}

.status-row {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  white-space: nowrap;
}

.status-num {
  font-weight: 700;
  font-size: .86rem;
  color: var(--color-text);
}

.status-sep {
  color: var(--color-text-muted);
  font-size: .72rem;
}

.status-target {
  color: var(--color-text-muted);
  font-size: .7rem;
}

.status-icon {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
}

.status-cell-ok .status-icon {
  color: var(--color-success);
}

.status-cell-bad .status-icon {
  color: var(--color-danger);
}

.progress-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

.status-cell-ok .progress-fill {
  background: var(--color-success);
}

.status-cell-bad .progress-fill {
  background: var(--color-danger);
}

/* ---- Bảng xếp hạng / bảng dữ liệu dùng chung ---- */
.lb-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lb-card .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lb-table {
  margin-bottom: 0;
  font-size: .92rem;
}

.lb-table thead th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .04em;
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.lb-table thead th .th-sort {
  color: inherit;
  text-decoration: none;
}

.lb-table thead th .th-sort:hover,
.lb-table thead th.th-sorted .th-sort {
  color: var(--color-primary);
}

.lb-table th,
.lb-table td {
  padding: .65rem .85rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

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

.lb-table tbody tr {
  transition: background-color var(--transition-fast);
}

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

.lb-table tbody tr.table-podium {
  background-color: var(--color-warning-bg);
}

.lb-table tbody tr.table-podium:hover {
  background-color: #fef3c7;
}

.rank-medal {
  font-size: 1rem;
}

/* Cột thành viên ghim bên trái khi cuộn ngang, để luôn biết đang xem hàng của ai trên mobile. */
.lb-table .member-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-border);
}

.lb-table thead th.member-cell {
  background: var(--color-bg);
  z-index: 2;
}

.lb-table tbody tr:hover .member-cell {
  background: var(--color-primary-light);
}

.lb-table tbody tr.table-podium .member-cell {
  background: #fdf6e8;
}

.lb-table tbody tr.table-podium:hover .member-cell {
  background: #fef3c7;
}

.member-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Thẻ leaderboard trên điện thoại (thay bảng, không cần kéo ngang) ---- */
.lb-mcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: .7rem .85rem;
}

.lb-mcard-podium {
  background: var(--color-warning-bg);
  border-color: #fde8b8;
}

.lb-mcard-head {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.lb-mcard-rank {
  min-width: 1.6rem;
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: .9rem;
}

.lb-mcard-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.lb-mcard-total {
  font-weight: 800;
  white-space: nowrap;
}

.lb-mcard-sports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .5rem;
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--color-border);
}

.lb-mcard-sports-single {
  margin-top: .5rem;
  padding-top: 0;
  border-top: none;
}

.lb-mcard-sport {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
}

.lb-mcard-sport-icon {
  font-size: .95rem;
  line-height: 1.6;
}

/* ---- Bộ lọc kỳ / môn ---- */
.filter-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .25rem;
  box-shadow: var(--shadow-sm);
}

.filter-group .btn {
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
}

/* ---- Responsive: đảm bảo bảng không vỡ layout trên di động ---- */
@media (max-width: 576px) {
  .filter-group .btn {
    padding: .3rem .5rem;
    font-size: .8rem;
  }

  .lb-table {
    font-size: .85rem;
  }

  .lb-table th,
  .lb-table td {
    padding: .55rem .6rem;
  }

  .status-cell {
    min-width: 68px;
  }

  .member-name {
    max-width: 88px;
  }

  .lb-table .avatar-ring {
    width: 26px !important;
    height: 26px !important;
  }
}