:root {
      /* Typography */
      --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      --font-display: 'Plus Jakarta Sans', sans-serif;

      /* Frankli-inspired Deep Teal & Natural Palette */
      --fk-teal-dark: #07252a;
      --fk-teal: #0b383f;
      --fk-teal-light: #144e57;
      --fk-teal-surface: #1a5c66;
      --fk-teal-glow: rgba(11, 56, 63, 0.2);

      /* Warm Cream Content Deck Palette (Dịu Mắt, Sang Trọng, Tránh Chói Sáng) */
      --fk-bg: #f5eedf;
      --fk-card: #fcf9f2;
      --fk-card-subtle: #f3ecd9;
      
      --fk-text-main: #132427;
      --fk-text-muted: #5f7478;
      --fk-border: rgba(11, 56, 63, 0.1);
      --fk-border-light: #e5dcce;

      /* Running Athletic Accents */
      --fk-gold: #f5a623;
      --fk-gold-light: #fcd34d;
      --fk-gold-dark: #d98205;
      --fk-orange: #ff6b35;
      --fk-coral: #f26419;
      --fk-emerald: #10b981;
      --fk-emerald-light: #d1fae5;
      --fk-sky: #0284c7;

      /* Shadows & Radii */
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius-full: 9999px;

      --shadow-sm: 0 2px 8px rgba(11, 56, 63, 0.04);
      --shadow-md: 0 6px 20px rgba(11, 56, 63, 0.06);
      --shadow-lg: 0 12px 36px rgba(11, 56, 63, 0.09);
    }

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

    html {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      background-color: #07252a;
      background-image: 
        radial-gradient(circle at 15% 15%, rgba(245, 166, 35, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 85% 60%, rgba(16, 185, 129, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(56, 189, 248, 0.12) 0%, transparent 45%),
        linear-gradient(180deg, #07252a 0%, #0b383f 40%, #082d33 100%);
      background-attachment: fixed;
      color: var(--fk-text-main);
      min-height: 100vh;
      width: 100%;
      max-width: 100%;
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
      overflow-x: hidden;
    }

    /* ═══ 1. Floating 3D Action Bar (Pinned to Top Right - Compact Sleek) ═════ */
    .hero-top-bar-3d {
      position: absolute;
      top: 12px;
      right: 18px;
      left: auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      z-index: 30;
      flex-wrap: wrap;
    }

    .hero-top-row-main {
      display: contents;
    }

    .live-status-badge {
      background: rgba(7, 37, 42, 0.85);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: var(--radius-full);
      padding: 4px 10px;
      font-size: 10.5px;
      font-weight: 700;
      color: #e2ecec;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    }
    .live-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--fk-gold);
      box-shadow: 0 0 8px rgba(245, 166, 35, 0.9);
      animation: pulseDot 2s infinite;
    }
    @keyframes pulseDot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.3); opacity: 0.7; }
    }

    .hero-top-actions-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-3d-glass {
      background: rgba(7, 37, 42, 0.85);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: var(--radius-full);
      padding: 4.5px 12px;
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.25);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
      font-family: var(--font-heading);
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    .btn-3d-glass:hover {
      transform: translateY(-1.5px) scale(1.03);
      background: rgba(11, 56, 63, 0.95);
      border-color: rgba(245, 166, 35, 0.75);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(245, 166, 35, 0.3);
    }

    .btn-3d-gold {
      background: linear-gradient(135deg, #fcd34d 0%, #f5a623 50%, #d97706 100%);
      color: #07252a;
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.8);
      font-weight: 800;
    }
    .btn-3d-gold:hover {
      transform: translateY(-2px) scale(1.06);
      box-shadow: 0 14px 34px rgba(245, 166, 35, 0.7);
      color: #07252a;
    }

    .spinner {
      width: 13px;
      height: 13px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: none;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ═══ 2. Full-Viewport Hero Section (Grand Running Artboard) ═ */
    .hero-section {
      background: transparent;
      color: #ffffff;
      min-height: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 0 36px 0;
      position: relative;
    }

    /* Grand Expansive Canvas Height on Desktop / Landscape */
    .hero-art-canvas {
      width: 100%;
      flex: 1;
      min-height: 440px;
      height: 56vh;
      max-height: 600px;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-art-svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @media (max-width: 900px) {
      .hero-section { min-height: auto; padding-bottom: 20px; }
      .hero-art-canvas { min-height: 220px; height: 28vh; }
    }

    /* Tối ưu riêng cho màn hình dọc điện thoại (Mobile Portrait < 768px): Gọn gàng, chuẩn xác, triệt tiêu hoàn toàn tràn ngang */
    @media (max-width: 768px) {
      .hero-section {
        padding-top: 10px;
        padding-bottom: 16px;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .hero-top-bar-3d {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .hero-top-row-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
      }
      .live-status-badge {
        display: inline-flex;
        font-size: 9.5px;
        padding: 3.5px 8px;
        flex-shrink: 0;
      }
      .hero-top-actions-group {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        gap: 5px;
        padding: 2px 2px 4px 2px;
        box-sizing: border-box;
      }
      .hero-top-actions-group::-webkit-scrollbar {
        display: none;
      }
      .hero-top-actions-group .btn-3d-glass {
        flex: 1 0 auto;
        min-width: fit-content;
        width: auto;
        justify-content: center;
        padding: 4.5px 8px;
        font-size: 10.5px;
        letter-spacing: -0.15px;
        white-space: nowrap;
        border-radius: var(--radius-full);
      }
      .btn-user-profile {
        max-width: 180px;
      }
      .btn-user-profile .user-name-label {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn-3d-glass {
        font-size: 10.5px;
        padding: 4px 8px;
      }
      .hero-art-canvas {
        min-height: unset;
        max-height: unset;
        height: auto;
        aspect-ratio: 1440 / 350;
        width: calc(100% - 20px);
        margin: 0 auto;
        background: linear-gradient(180deg, rgba(7, 37, 42, 0.95) 0%, rgba(11, 56, 63, 0.95) 100%);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 16px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
        overflow: hidden;
      }
      .hero-art-svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .hero-inner {
      max-width: 1240px;
      width: 100%;
      margin: 24px auto 0 auto;
      padding: 0 16px;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      align-items: center;
      gap: 24px;
      position: relative;
      z-index: 2;
    }

    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; gap: 20px; margin-top: 16px; }
    }

    /* Left Hero Branding & 3D Spinning Gold Laurel Medallion */
    .hero-branding {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 20px;
    }
    .hero-brand-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      min-width: 0;
    }

    .hero-laurel-medallion {
      width: 96px;
      height: 96px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .hero-laurel-medallion:hover {
      transform: scale(1.1);
    }

    .medallion-flip-y {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: spinMedallionSmooth 3.8s ease-in-out infinite;
      transform-origin: center center;
      will-change: transform, filter;
    }

    @keyframes spinMedallionSmooth {
      0% {
        transform: scaleX(1);
        filter: drop-shadow(0 6px 18px rgba(245, 166, 35, 0.55)) brightness(1);
      }
      25% {
        transform: scaleX(0.06);
        filter: drop-shadow(0 6px 8px rgba(245, 166, 35, 0.35)) brightness(1.22);
      }
      50% {
        transform: scaleX(1);
        filter: drop-shadow(0 6px 18px rgba(245, 166, 35, 0.55)) brightness(1);
      }
      75% {
        transform: scaleX(0.06);
        filter: drop-shadow(0 6px 8px rgba(245, 166, 35, 0.35)) brightness(1.22);
      }
      100% {
        transform: scaleX(1);
        filter: drop-shadow(0 6px 18px rgba(245, 166, 35, 0.55)) brightness(1);
      }
    }

    .hero-pill-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(245, 166, 35, 0.18);
      border: 1px solid rgba(245, 166, 35, 0.45);
      color: var(--fk-gold-light);
      padding: 4px 12px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .hero-title-main {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: -0.2px;
      line-height: 1.15;
      margin-bottom: 5px;
    }
    .hero-title-main span {
      color: var(--fk-gold);
    }

    .hero-desc {
      font-size: 13px;
      color: #cbdade;
      line-height: 1.5;
      max-width: 480px;
    }

    @media (max-width: 900px) {
      .hero-branding { gap: 16px; }
      .hero-laurel-medallion { width: 80px; height: 80px; }
      .hero-title-main { font-size: 26px; }
      .hero-desc { font-size: 12px; }
    }

    @media (max-width: 600px) {
      .hero-branding { gap: 14px; }
      .hero-laurel-medallion { width: 72px; height: 72px; }
      .hero-pill-tag { font-size: 9.5px; padding: 3px 9px; margin-bottom: 3px; }
      .hero-title-main { font-size: 20px; margin-bottom: 3px; }
      .hero-desc { font-size: 11.5px; line-height: 1.35; }
    }

    @media (max-width: 400px) {
      .hero-branding { gap: 10px; }
      .hero-laurel-medallion { width: 62px; height: 62px; }
      .hero-title-main { font-size: 18px; }
      .hero-desc { font-size: 11px; line-height: 1.3; }
    }

    /* Right Hero Stats Matrix (Floating Decks) */
    .hero-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    @media (max-width: 480px) {
      .hero-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    }

    .hero-stat-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: var(--radius-md);
      padding: 12px 10px;
      text-align: center;
      transition: all 0.25s ease;
    }
    .hero-stat-card:hover {
      background: rgba(255, 255, 255, 0.14);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .hero-stat-lbl {
      font-size: 9.5px;
      font-weight: 700;
      color: #9cb5b8;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      margin-bottom: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hero-stat-val {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 900;
      color: #ffffff;
      line-height: 1.1;
    }

    @media (max-width: 480px) {
      .hero-laurel { width: 66px; height: 66px; }
      .hero-laurel .icon { font-size: 22px; }
    }

    .hero-pill-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(245, 166, 35, 0.18);
      border: 1px solid rgba(245, 166, 35, 0.45);
      color: var(--fk-gold-light);
      padding: 4px 12px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .hero-title-main {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: -0.2px;
      line-height: 1.15;
      margin-bottom: 6px;
    }
    .hero-title-main span {
      color: var(--fk-gold);
    }

    @media (max-width: 480px) {
      .hero-title-main { font-size: 24px; }
    }

    .hero-desc {
      font-size: 13.5px;
      color: #cbdade;
      line-height: 1.55;
      max-width: 520px;
    }

    @media (max-width: 480px) {
      .hero-desc { display: none; }
    }

    /* Right Hero Stats Matrix (Floating Decks) */
    .hero-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    @media (max-width: 480px) {
      .hero-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    }

    .hero-stat-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: var(--radius-md);
      padding: 12px 10px;
      text-align: center;
      transition: all 0.25s ease;
    }
    .hero-stat-card:hover {
      background: rgba(255, 255, 255, 0.14);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .hero-stat-lbl {
      font-size: 9.5px;
      font-weight: 700;
      color: #9cb5b8;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      margin-bottom: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hero-stat-val {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 900;
      color: #ffffff;
      line-height: 1.1;
    }

    /* ═══ 4. Frankli Modular Masonry App Deck ("Xếp Gạch") ══════ */
    .frankli-masonry-wrapper {
      position: relative;
      width: 100%;
      background: transparent;
      padding: 30px 16px 90px 16px;
      perspective: 1400px;
      perspective-origin: center 25%;
      overflow: visible;
    }

    /* Outer Running-Themed Athletic Artwork (Sitting Completely Outside the App Deck) */
    .outer-doodles-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
      z-index: 1;
    }
    .outer-doodle {
      position: absolute;
      pointer-events: none;
      transition: none !important;
      will-change: transform;
      filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.65));
    }
    .outer-doodle-runner-female {
      left: calc(50% - 620px - 260px);
      top: 90px;
      width: 240px;
      height: 240px;
    }
    .outer-doodle-champion-gate {
      right: calc(50% - 620px - 260px);
      top: 60px;
      width: 240px;
      height: 240px;
    }
    .outer-doodle-smartwatch {
      left: calc(50% - 620px - 260px);
      top: 680px;
      width: 240px;
      height: 240px;
    }
    .outer-doodle-torch {
      right: calc(50% - 620px - 260px);
      top: 670px;
      width: 250px;
      height: 250px;
    }
    .outer-doodle-shoe {
      left: calc(50% - 620px - 260px);
      top: 1220px;
      width: 240px;
      height: 200px;
    }
    .outer-doodle-vo2pulse {
      right: calc(50% - 620px - 260px);
      top: 1220px;
      width: 240px;
      height: 200px;
    }
    .outer-doodle-bib-medal {
      left: calc(50% - 620px - 260px);
      top: 1780px;
      width: 240px;
      height: 240px;
    }
    .outer-doodle-cheer {
      right: calc(50% - 620px - 260px);
      top: 1780px;
      width: 250px;
      height: 240px;
    }

    @media (max-width: 1750px) {
      .outer-doodle-runner-female { left: calc(50% - 620px - 210px); width: 190px; height: 190px; }
      .outer-doodle-champion-gate { right: calc(50% - 620px - 210px); width: 190px; height: 190px; }
      .outer-doodle-smartwatch { left: calc(50% - 620px - 210px); width: 190px; height: 190px; }
      .outer-doodle-torch { right: calc(50% - 620px - 210px); width: 200px; height: 200px; }
      .outer-doodle-shoe { left: calc(50% - 620px - 210px); width: 190px; height: 160px; }
      .outer-doodle-vo2pulse { right: calc(50% - 620px - 210px); width: 190px; height: 160px; }
      .outer-doodle-bib-medal { left: calc(50% - 620px - 210px); width: 190px; height: 190px; }
      .outer-doodle-cheer { right: calc(50% - 620px - 210px); width: 200px; height: 190px; }
    }
    @media (max-width: 1500px) {
      .outer-doodle-runner-female { left: 8px; width: 145px; height: 145px; }
      .outer-doodle-champion-gate { right: 8px; width: 145px; height: 145px; }
      .outer-doodle-smartwatch { left: 8px; width: 145px; height: 145px; }
      .outer-doodle-torch { right: 8px; width: 150px; height: 150px; }
      .outer-doodle-shoe { left: 8px; width: 145px; height: 125px; }
      .outer-doodle-vo2pulse { right: 8px; width: 145px; height: 125px; }
      .outer-doodle-bib-medal { left: 8px; width: 145px; height: 145px; }
      .outer-doodle-cheer { right: 8px; width: 150px; height: 145px; }
    }
    @media (max-width: 1280px) {
      .outer-doodles-container { display: none; }
    }

    .frankli-app-deck {
      max-width: 1240px;
      margin: 0 auto;
      background: var(--fk-bg);
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
      display: flex;
      position: relative;
      transform-style: preserve-3d;
      z-index: 2;
      overflow: visible;
    }

    /* ═══ Standalone Chat Lounge Card (Floats directly on dark canvas - Compact Lounge) ═══ */
    .frankli-chat-deck {
      max-width: 860px;
      margin: 0 auto 50px auto;
      background: var(--fk-bg);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
      padding: 14px 18px;
      position: relative;
      z-index: 2;
      transform-style: preserve-3d;
    }

    /* ═══ Transition Section Divider on Dark Teal Canvas (Frankli Social Proof Style) ═══ */
    .frankli-section-divider {
      max-width: 1240px;
      margin: 44px auto 22px auto;
      text-align: center;
      position: relative;
      z-index: 2;
    }
    .divider-pill-athletic {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--fk-gold);
      background: rgba(245, 166, 35, 0.12);
      border: 1px solid rgba(245, 166, 35, 0.32);
      padding: 6px 18px;
      border-radius: var(--radius-full);
      margin-bottom: 6px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    }
    .divider-sub-athletic {
      font-size: 12px;
      color: #9cb5b8;
      font-weight: 500;
    }
    .frankli-news-divider {
      margin: 4px auto 26px auto;
    }
    .divider-pill-green {
      color: #34d399 !important;
      background: rgba(16, 185, 129, 0.14) !important;
      border-color: rgba(52, 211, 153, 0.45) !important;
      text-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
      box-shadow: 0 4px 18px rgba(16, 185, 129, 0.25) !important;
    }

    /* Dynamic Scatter & Fast Assembly Bricks */
    .scatter-brick {
      transform-style: preserve-3d;
      will-change: transform;
      transition: none !important;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      position: relative;
    }
    
    /* Left Sidebar Rail */
    .app-sidebar-rail {
      width: 60px;
      background: #07252a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      gap: 16px;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      border-top-left-radius: 28px;
      border-bottom-left-radius: 28px;
      flex-shrink: 0;
      z-index: 10;
    }
    .rail-brand-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #0b383f, #07252a);
      border: 1.5px solid var(--fk-gold);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      box-shadow: 0 4px 12px rgba(245, 166, 35, 0.25);
    }
    .rail-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9cb5b8;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .rail-icon-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
      transform: scale(1.08);
    }
    .rail-icon-btn.active {
      background: var(--fk-teal);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(11, 56, 63, 0.4);
    }

    /* Main Workspace */
    .app-workspace {
      flex: 1;
      padding: 22px;
      min-width: 0;
      background: var(--fk-bg);
      border-top-right-radius: 28px;
      border-bottom-right-radius: 28px;
      transform-style: preserve-3d;
    }

    /* Top Capsule Motto Row (Frankli Style) */
    .app-motto-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }
    .motto-card {
      background: var(--fk-card);
      border: 1px solid var(--fk-border-light);
      border-radius: 16px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 2px 8px rgba(11, 56, 63, 0.03);
      transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    .motto-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(11, 56, 63, 0.06);
      border-color: rgba(11, 56, 63, 0.16);
    }
    .motto-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: #ebe2ce;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      flex-shrink: 0;
    }
    .motto-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--fk-text-main);
      margin-bottom: 2px;
    }
    .motto-sub {
      font-size: 11px;
      color: var(--fk-text-muted);
      line-height: 1.3;
    }

    /* Streamlined Masonry Brick Grid (2-Column) */
    .masonry-row-streamlined {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 20px;
      margin-bottom: 26px;
    }
    @media (max-width: 900px) {
      .masonry-row-streamlined {
        grid-template-columns: 1fr;
      }
      .app-sidebar-rail {
        display: none;
      }
      .app-workspace {
        padding: 14px;
      }
    }

    /* Video Top Spotlight Container (Nằm trên Bảng Tin CLB, nền tối Dark Teal hòa quyện tuyệt đối) */
    .video-top-spotlight-section {
      max-width: 960px;
      margin: 0 auto 32px auto;
      position: relative;
      z-index: 10;
      padding: 0 16px;
      box-sizing: border-box;
      width: 100%;
    }

    /* Video Spotlight Card */
    .video-spotlight-card {
      margin-bottom: 0;
      background: linear-gradient(135deg, rgba(7, 37, 42, 0.96), rgba(15, 23, 42, 0.98)) !important;
      border: 1px solid rgba(56, 189, 248, 0.35) !important;
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55), 0 0 25px rgba(56, 189, 248, 0.12) !important;
      border-radius: 24px !important;
      color: #ffffff !important;
      padding: 16px 20px 20px 20px;
      box-sizing: border-box;
      width: 100%;
      transform-style: preserve-3d;
      will-change: transform;
      transition: none !important;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .video-brick-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .video-brick-title {
      font-size: 15px;
      font-weight: 800;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .btn-video-unmute {
      font-size: 11px;
      padding: 4px 12px;
      background: #f59e0b;
      color: #0f172a;
      font-weight: 800;
      border: none;
      cursor: pointer;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .btn-sound-desktop {
      display: inline;
    }
    .btn-sound-mobile {
      display: none;
    }
    .video-standalone-container {
      max-width: 920px;
      margin: 0 auto;
      width: 100%;
    }
    .video-embed-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
      border: 1.5px solid rgba(255, 255, 255, 0.14);
      background: #000;
    }
    .video-embed-wrapper iframe,
    .video-embed-wrapper video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      object-fit: cover;
      pointer-events: none; /* Khóa hoàn toàn tương tác của YouTube */
    }
    .video-touch-shield {
      position: absolute;
      inset: 0;
      z-index: 10;
      background: transparent;
      cursor: pointer;
    }
    @media (max-width: 600px) {
      .video-spotlight-card {
        margin-bottom: 16px;
        padding: 12px 10px !important;
      }
      .video-brick-title {
        font-size: 12.5px !important;
        white-space: nowrap !important;
      }
      .btn-video-unmute {
        font-size: 10.5px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
      }
      .btn-sound-desktop {
        display: none !important;
      }
      .btn-sound-mobile {
        display: inline !important;
      }
      .video-embed-wrapper {
        padding-bottom: 63% !important; /* Tăng chiều dọc cho màn hình điện thoại, xem to và rõ hơn */
        border-radius: 11px !important;
      }
    }

    .brick-card {
      background: var(--fk-card);
      border: 1px solid var(--fk-border-light);
      border-radius: 20px;
      padding: 18px 20px;
      box-shadow: 0 4px 16px rgba(11, 56, 63, 0.04);
      transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    .brick-card:hover {
      box-shadow: 0 8px 24px rgba(11, 56, 63, 0.07);
    }
    .brick-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .brick-title {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 800;
      color: var(--fk-text-main);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Brick 1: Goals Radial Chart */
    .goals-chart-wrap {
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .radial-donut-box {
      position: relative;
      width: 100px;
      height: 100px;
      flex-shrink: 0;
    }
    .donut-center-text {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .donut-count {
      font-family: var(--font-heading);
      font-size: 19px;
      font-weight: 900;
      color: var(--fk-teal);
      line-height: 1;
    }
    .donut-lbl {
      font-size: 9.5px;
      font-weight: 700;
      color: #64748b;
      margin-top: 2px;
    }
    .goals-breakdown-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }
    .goal-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11.5px;
    }
    .goal-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2.5px 7px;
      border-radius: 6px;
      font-weight: 800;
      font-size: 11px;
    }
    .goal-tag-green { background: #e0f2fe; color: #0369a1; }
    .goal-tag-yellow { background: #fef3c7; color: #b45309; }
    .goal-tag-red { background: #fee2e2; color: #b91c1c; }
    .goal-desc {
      font-weight: 600;
      color: #475569;
    }

    .quarter-tabs-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid #f1f5f9;
    }
    .q-tab {
      flex: 1;
      padding: 4px 0;
      text-align: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s;
    }
    .q-tab:hover, .q-tab.active {
      background: var(--fk-teal);
      color: #ffffff;
      border-color: var(--fk-teal);
    }

    /* Brick 2: Upcoming Deadlines & Races */
    .deadlines-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .deadline-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 12px;
      background: #f6efe1;
      border-radius: 12px;
      border: 1px solid #e3d8c5;
      transition: all 0.2s;
    }
    .deadline-item:hover {
      background: #ede3ce;
      border-color: rgba(11, 56, 63, 0.18);
      transform: translateX(3px);
    }
    .deadline-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .deadline-icon {
      font-size: 16px;
    }
    .deadline-text {
      font-size: 12px;
      font-weight: 700;
      color: var(--fk-text-main);
    }
    .deadline-sub {
      font-size: 10.5px;
      color: #64748b;
    }
    .deadline-pill {
      font-size: 10px;
      font-weight: 800;
      padding: 2.5px 8px;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }
    .pill-red { background: #fee2e2; color: #b91c1c; }
    .pill-amber { background: #fef3c7; color: #b45309; }
    .ft-filter-btn {
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 10px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: var(--font-heading);
    }
    .ft-filter-btn:hover {
      color: #0f172a;
    }
    .ft-filter-btn.active {
      background: #ffffff;
      color: #0b383f;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }

    /* Brick 2: Featured Runners Week, Month & Year */
    .featured-dual-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .featured-block {
      background: transparent;
    }

    .featured-runners-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    @media (max-width: 990px) {
      .featured-runners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }
    }
    @media (max-width: 600px) {
      .featured-runners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .featured-dual-container {
        gap: 8px;
      }
    }

    /* Brick 3: To-dos */
    .todos-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .todo-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 10px;
      border-radius: 10px;
      transition: background 0.2s;
      cursor: pointer;
    }
    .todo-item:hover {
      background: #f1f7f7;
    }
    .todo-left {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12px;
      font-weight: 600;
      color: var(--fk-text-main);
    }
    .todo-checkbox {
      width: 15px;
      height: 15px;
      accent-color: var(--fk-teal);
      cursor: pointer;
    }
    .todo-badge {
      font-size: 10px;
      font-weight: 700;
      background: #e2ecec;
      color: var(--fk-teal);
      padding: 2px 7px;
      border-radius: var(--radius-full);
    }

    /* Leaderboard Brick Container (Transparent so sub-panels float independently on dark canvas) */
    .leaderboard-brick {
      max-width: 1240px;
      margin: 0 auto 60px auto;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      position: relative;
      z-index: 2;
      transform-style: preserve-3d;
    }

    /* ═══ Filter Tabs Bar (Pill Container - Standalone Card) ═══ */
    .filter-bar {
      background: var(--fk-card);
      border: 1.5px solid rgba(255, 255, 255, 0.22);
      border-radius: 20px;
      padding: 10px 16px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    }

    .filter-segments-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .filter-section-group {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: var(--radius-full);
      transition: all 0.2s ease;
    }

    /* ── PHẦN 1: THỬ THÁCH VÉT MỠ (Rực rỡ Cam Cháy / Warm Fire Orange) ── */
    .section-vetmo-group {
      background: linear-gradient(135deg, rgba(254, 215, 170, 0.35), rgba(255, 237, 213, 0.2));
      border: 2px solid #ea580c;
      box-shadow: 0 3px 12px rgba(234, 88, 12, 0.18);
    }

    .section-vetmo-group .filter-group-badge {
      color: #c2410c;
      font-size: 11.5px;
      font-weight: 900;
    }

    .section-vetmo-group .badge-num {
      background: #ea580c;
      color: #ffffff;
      width: 20px;
      height: 20px;
      font-size: 11px;
      box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4);
    }

    /* ── PHẦN 2: KẾT QUẢ THỐNG KÊ (Xanh Dương Hoàng Gia / Electric Cobalt Blue - Tương Phản Tuyệt Đối) ── */
    .section-stats-group {
      background: linear-gradient(135deg, rgba(219, 234, 254, 0.45), rgba(224, 231, 255, 0.3));
      border: 2px solid #2563eb;
      box-shadow: 0 3px 12px rgba(37, 99, 235, 0.18);
    }

    .section-stats-group .filter-group-badge {
      color: #1d4ed8;
      font-size: 11.5px;
      font-weight: 900;
    }

    .section-stats-group .badge-num {
      background: #2563eb;
      color: #ffffff;
      width: 20px;
      height: 20px;
      font-size: 11px;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
    }

    .section-stats-group .tab-pill {
      background: #ffffff !important;
      color: #2563eb !important;
      border: 1.5px solid #93c5fd !important;
      font-weight: 800;
    }

    .section-stats-group .tab-pill:hover {
      background: #eff6ff !important;
      color: #1d4ed8 !important;
      border-color: #60a5fa !important;
    }

    .section-stats-group .tab-pill.active {
      background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
      color: #ffffff !important;
      border: 1.5px solid #1e40af !important;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
    }

    .section-stats-group .filter-select {
      background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center !important;
      border: 1.5px solid #93c5fd !important;
      color: #1e40af !important;
      font-weight: 800;
    }

    .section-stats-group .filter-select:focus {
      border-color: #2563eb !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
    }

    /* ── PHẦN 3: NHẬT KÝ BÀI TẬP (Màu Xanh Biển Thể Thao / Cyan-Sky) ── */
    .section-act-group {
      background: linear-gradient(135deg, rgba(224, 242, 254, 0.55), rgba(240, 249, 255, 0.35));
      border: 2px solid #0284c7;
      box-shadow: 0 3px 12px rgba(2, 132, 199, 0.18);
    }
    .section-act-group .filter-group-badge {
      color: #0369a1;
      font-size: 11.5px;
      font-weight: 900;
    }
    .section-act-group .badge-num {
      background: #0284c7;
      color: #ffffff;
      width: 20px;
      height: 20px;
      font-size: 11px;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
    }

    .filter-group-badge {
      font-family: var(--font-heading);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding-right: 4px;
      white-space: nowrap;
    }

    .badge-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      font-size: 10.5px;
      font-weight: 900;
      font-family: var(--font-heading);
    }

    .tab-pills-subgroup {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .filter-section-divider-v {
      width: 2px;
      height: 36px;
      background: linear-gradient(to bottom, rgba(234, 88, 12, 0.45), rgba(37, 99, 235, 0.45));
      margin: 0 4px;
      border-radius: 2px;
    }

    .filter-tools-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-excel-pill {
      background: #ecfdf5 !important;
      color: #047857 !important;
      border: 1px solid #a7f3d0 !important;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 1px 4px rgba(4, 120, 87, 0.1);
    }
    .btn-excel-pill:hover {
      background: #d1fae5 !important;
      color: #065f46 !important;
    }

    @media (max-width: 992px) {
      .filter-section-divider-v { display: none; }
      .filter-segments-wrapper { width: 100%; justify-content: flex-start; }
      .filter-tools-right { width: 100%; justify-content: space-between; margin-top: 6px; }
    }

    .tab-pills-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tab-pill {
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      border: 1px solid transparent;
      background: #e8dfcc;
      color: #43585b;
      transition: all 0.2s ease;
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .tab-pill:hover {
      background: #ded3bd;
      color: var(--fk-teal);
    }
    .tab-pill.active {
      background: var(--fk-teal);
      color: #ffffff;
      box-shadow: 0 3px 10px var(--fk-teal-glow);
    }

    .filter-select {
      appearance: none;
      -webkit-appearance: none;
      padding: 6px 24px 6px 10px;
      background: #f6eee0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230b383f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center;
      border: 1px solid #dcd0bc;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 700;
      color: var(--fk-text-main);
      font-family: var(--font-body);
      cursor: pointer;
      transition: border-color 0.2s;
    }
    .filter-select:focus {
      outline: none;
      border-color: var(--fk-teal);
    }

    .search-filter-box {
      display: flex;
      align-items: center;
      background: #f6eee0;
      border: 1px solid #dcd0bc;
      border-radius: var(--radius-full);
      padding: 0 10px;
      min-width: 190px;
    }
    @media (max-width: 600px) {
      .search-filter-box { width: 100%; min-width: 100%; margin-top: 4px; }
    }

    .search-filter-box svg { color: #8da4a7; flex-shrink: 0; }
    .search-filter-input {
      border: none;
      background: transparent;
      padding: 6px 8px;
      font-size: 12px;
      color: var(--fk-text-main);
      font-family: var(--font-body);
      width: 100%;
    }
    .search-filter-input:focus { outline: none; }

    /* ═══ Vét Mỡ Cuối Tuần Special Styles ═══════════════════════ */
    .tab-pill-vetmo {
      background: linear-gradient(135deg, var(--fk-orange), var(--fk-coral)) !important;
      color: #ffffff !important;
      border: none !important;
      box-shadow: 0 3px 12px rgba(255, 107, 53, 0.4);
      animation: pulseGlow 2.5s infinite ease-in-out;
    }
    .tab-pill-vetmo.active {
      background: linear-gradient(135deg, #c2410c, #9a3412) !important;
      box-shadow: 0 4px 14px rgba(194, 65, 12, 0.5) !important;
    }
    @keyframes pulseGlow {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.03); }
    }

    .vetmo-panel {
      background: linear-gradient(135deg, #0b383f 0%, #07252a 100%);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 22px;
      padding: 22px 26px;
      margin-bottom: 24px;
      color: #ffffff;
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.35);
    }
    .vetmo-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .vetmo-slogan {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .vetmo-icon-fire {
      font-size: 30px;
      line-height: 1;
      filter: drop-shadow(0 2px 8px rgba(255, 107, 53, 0.6));
    }
    .vetmo-slogan-title {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 900;
      color: var(--fk-gold-light);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .vetmo-slogan-sub {
      font-size: 12.5px;
      color: #cbdade;
      margin-top: 2px;
    }
    .vetmo-subtabs-group {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(3, 20, 24, 0.75);
      padding: 3.5px;
      border-radius: var(--radius-full);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    .vetmo-subtab-btn {
      padding: 5px 12px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      border: 1px solid transparent;
      background: transparent;
      color: #9cb5b8;
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.2px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    .vetmo-subtab-btn:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
    }
    .vetmo-subtab-btn.active {
      background: linear-gradient(180deg, #fcd34d 0%, #f5a623 50%, #d97706 100%);
      color: #07252a;
      font-weight: 900;
      border: 1px solid #fde68a;
      box-shadow: 0 3px 10px rgba(245, 166, 35, 0.5), inset 0 1px 1px #ffffff, inset 0 -2px 3px rgba(180, 83, 9, 0.5);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(0, 0, 0, 0.15);
      transform: translateY(-1px);
    }
    .btn-register-target {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      border: none;
      padding: 7px 18px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      font-family: var(--font-heading);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 3px 10px rgba(217, 119, 6, 0.4);
      transition: all 0.2s;
    }
    .btn-register-target:hover {
      background: linear-gradient(135deg, #d97706, #b45309);
      transform: translateY(-1px);
    }
    .btn-export-excel {
      background: #107c41;
      color: #ffffff;
      border: none;
      padding: 7px 16px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      font-family: var(--font-heading);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 3px 10px rgba(16, 124, 65, 0.4);
      transition: all 0.2s;
    }
    .btn-export-excel:hover {
      background: #0b5c30;
      transform: translateY(-1px);
    }

    .vetmo-mode-bar {
      transition: all 0.2s ease;
    }
    #phongThanRangeControls input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(0.85);
      cursor: pointer;
    }

    .vetmo-stats-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .vetmo-stat-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      text-align: center;
    }
    .vetmo-stat-lbl {
      font-size: 9.5px;
      color: #9cb5b8;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .vetmo-stat-val {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 900;
      color: #ffffff;
      margin-top: 2px;
    }

    .progress-bar-box {
      width: 100%;
      min-width: 120px;
      max-width: 180px;
    }
    .progress-bar-track {
      width: 100%;
      height: 8px;
      background: #e2ecec;
      border-radius: var(--radius-full);
      overflow: hidden;
      margin-top: 4px;
    }
    .progress-bar-fill {
      height: 100%;
      border-radius: var(--radius-full);
      transition: width 0.4s ease;
    }
    .progress-bar-fill.success {
      background: linear-gradient(90deg, #10b981, #059669);
    }
    .progress-bar-fill.almost {
      background: linear-gradient(90deg, #f59e0b, #d97706);
    }
    .progress-bar-fill.running {
      background: linear-gradient(90deg, #f97316, #ea580c);
    }
    .progress-bar-fill.pending {
      background: #cbd5e1;
    }
    .progress-bar-fill.leave {
      background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 5px, #e2e8f0 5px, #e2e8f0 10px);
    }

    .badge-status {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 9px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 800;
      font-family: var(--font-heading);
      white-space: nowrap;
    }
    .badge-status-completed {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }
    .badge-status-almost {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }
    .badge-status-running {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }
    .badge-status-pending {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }
    .badge-status-leave {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .btn-edit-target {
      padding: 3px 9px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 700;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s;
    }
    .btn-edit-target:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
    }

    /* ═══ 5. Live Ticker Strip (Fat Shredding & Registration Warning Marquee) ═════════ */
    .live-strip {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
      border: 1px solid #fde68a;
      border-radius: 16px;
      padding: 9px 14px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 11.5px;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
      overflow: hidden;
    }

    .live-tag-alert {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #ffffff;
      font-weight: 800;
      font-size: 9px;
      padding: 2.5px 6px;
      border-radius: var(--radius-full);
      display: inline-flex;
      align-items: center;
      gap: 3px;
      text-transform: uppercase;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
      animation: pulseAlert 2s infinite ease-in-out;
      font-family: var(--font-heading);
      letter-spacing: 0.2px;
    }
    @keyframes pulseAlert {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.88; transform: scale(1.04); }
    }

    .live-marquee-container {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      cursor: pointer;
    }

    .live-marquee-content {
      display: inline-block;
      white-space: nowrap;
      animation: marqueeScroll 40s linear infinite;
      padding-left: 100%;
      color: #334155;
      font-size: 11px;
      font-weight: 600;
    }
    .live-marquee-container:hover .live-marquee-content {
      animation-play-state: paused;
    }

    .live-alert-tag-red {
      color: #ffffff;
      background: #dc2626;
      padding: 1px 4.5px;
      border-radius: 4px;
      margin: 0 1.5px;
      font-weight: 800;
      font-size: 10px;
      display: inline-block;
    }
    .live-alert-tag-yellow {
      color: #07252a;
      background: #fcd34d;
      padding: 1px 4.5px;
      border-radius: 4px;
      margin: 0 1.5px;
      font-weight: 800;
      font-size: 10px;
      display: inline-block;
    }
    .live-alert-note-red {
      color: #dc2626;
      font-weight: 700;
      font-size: 10px;
      margin-left: 2px;
    }
    .live-alert-guide {
      color: #0284c7;
      font-weight: 700;
      font-size: 10px;
    }

    @keyframes marqueeScroll {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
    }

    .live-action-btn {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      font-weight: 800;
      font-size: 10px;
      padding: 3.5px 10px;
      border-radius: var(--radius-full);
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
      font-family: var(--font-heading);
      transition: all 0.2s;
      white-space: nowrap;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .live-action-btn:hover {
      background: linear-gradient(135deg, #d97706, #b45309);
      transform: translateY(-1px);
    }

    /* ═══ 6. Leaderboard Table (Frankli Elegant Deck) ═════════ */
    .table-wrapper {
      background: var(--fk-card);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    }

    .bxh-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 13px;
      white-space: nowrap;
      text-align: left;
    }

    /* SOLID DEEP TEAL / GOLD HEADER (Sticky Top on scroll) */
    .bxh-table thead th {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--fk-teal);
      color: #ffffff;
      padding: 12px 14px;
      font-family: var(--font-heading);
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    .bxh-table tbody td {
      padding: 12px 14px;
      border-bottom: 1px solid #ebe2d0;
      color: #1e293b;
      vertical-align: middle;
      font-weight: 500;
      background-color: var(--fk-card);
      transition: background-color 0.15s;
    }

    .bxh-table tbody tr:nth-child(even) td {
      background-color: #f7f1e4;
    }
    .bxh-table tbody tr:hover td {
      background-color: #ede3d0;
    }

    /* ═══ Desktop Table View vs Mobile Cards View ══════════════ */
    .desktop-table-view {
      display: block;
      width: 100%;
    }
    .mobile-cards-view {
      display: none;
      width: 100%;
    }

    /* ═══ Mobile Portrait Card: Vét Mỡ Cuối Tuần ═══════════════ */
    .vetmo-card-mob {
      background: var(--fk-card);
      border: 1px solid var(--fk-border-light);
      border-radius: 16px;
      padding: 11px 12px;
      box-shadow: 0 2px 8px rgba(11, 56, 63, 0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: all 0.2s ease;
    }
    .vetmo-card-mob:active {
      background: #ede3ce;
    }

    .vm-mob-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .vm-mob-user {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      flex: 1;
    }
    .vm-mob-rank {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 900;
      color: #475569;
      width: 18px;
      text-align: center;
      flex-shrink: 0;
    }
    .vm-mob-user-text {
      min-width: 0;
      flex: 1;
    }
    .vm-mob-name {
      font-family: var(--font-heading);
      font-size: 11.5px;
      font-weight: 800;
      color: var(--fk-text-main);
      white-space: normal;
      word-break: break-word;
      line-height: 1.25;
      text-transform: uppercase;
      letter-spacing: 0.1px;
    }
    .vm-mob-club {
      font-size: 9px;
      color: var(--fk-text-muted);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 1px;
    }
    .vm-mob-badges {
      display: flex;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
    }
    .vm-mob-badges .badge-status {
      font-size: 9px;
      padding: 2px 5px;
      gap: 2px;
    }

    .vm-mob-stats-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 3.5px;
    }
    .vm-mob-stat-box {
      background: #f6efe1;
      border: 1px solid #e3d8c5;
      border-radius: 7px;
      padding: 4px 2px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      overflow: hidden;
    }
    .vm-mob-stat-box.vm-box-actual {
      background: #e0f2fe;
      border-color: #bae6fd;
    }
    .vm-mob-stat-lbl {
      font-size: 7.5px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.1px;
      margin-bottom: 1.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .vm-mob-stat-val {
      font-family: var(--font-heading);
      font-size: 10px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .vm-mob-subtag {
      font-size: 7.5px;
      font-weight: 800;
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1;
    }
    .vm-chip-blue {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 3px;
      padding: 0 2px;
      display: inline-block;
    }
    .vm-chip-gold {
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 3px;
      padding: 0 2px;
      display: inline-block;
    }
    .vm-mob-punish-tag {
      font-size: 8px;
      color: #dc2626;
      font-weight: 800;
      display: block;
    }

    .vm-mob-progress-box {
      width: 100%;
    }
    .vm-mob-progress-box .progress-bar-box {
      max-width: 100%;
      min-width: 100%;
    }

    /* ═══ Mobile Portrait Card: Leaderboard (Tuần/Tháng/Năm) ═══ */
    .bxh-card-mob {
      background: var(--fk-card);
      border: 1px solid var(--fk-border-light);
      border-radius: 16px;
      padding: 11px 12px;
      box-shadow: 0 2px 8px rgba(11, 56, 63, 0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .bxh-mob-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .bxh-mob-user {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      flex: 1;
    }
    .bxh-mob-rank {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 900;
      color: #475569;
      width: 18px;
      text-align: center;
      flex-shrink: 0;
    }
    .bxh-mob-user-text {
      min-width: 0;
      flex: 1;
    }
    .bxh-mob-name {
      font-family: var(--font-heading);
      font-size: 11.5px;
      font-weight: 800;
      color: var(--fk-text-main);
      white-space: normal;
      word-break: break-word;
      line-height: 1.25;
      text-transform: uppercase;
      letter-spacing: 0.1px;
    }
    .bxh-mob-club {
      font-size: 9px;
      color: var(--fk-text-muted);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 1px;
    }
    .bxh-mob-top-right {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .bxh-mob-top-right .badge-vo2max {
      font-size: 9px;
      padding: 1px 4.5px;
    }

    .bxh-mob-main-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f6efe1;
      border: 1px solid #e3d8c5;
      border-radius: 10px;
      padding: 7px 12px;
    }
    .bxh-mob-dist {
      display: flex;
      align-items: baseline;
      gap: 3px;
    }
    .bxh-mob-km-num {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 900;
      color: var(--fk-teal);
    }
    .bxh-mob-km-unit {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
    }
    .bxh-mob-pace-box {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11.5px;
    }

    .bxh-mob-prs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
    }
    .bxh-mob-pr-tile {
      background: #fdfbf7;
      border: 1px solid #ece4d5;
      border-radius: 8px;
      padding: 4px 2px;
      text-align: center;
    }
    .bxh-pr-lbl {
      font-size: 8.5px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      margin-bottom: 1px;
      display: block;
    }
    .bxh-pr-val {
      font-family: var(--font-heading);
      font-size: 11px;
      font-weight: 800;
      color: #0f172a;
    }

    /* MOBILE PORTRAIT OPTIMIZATION & STICKY HEADER (Frankli Mobile Cleanliness) */
    @media (max-width: 768px) {
      .frankli-masonry-wrapper {
        padding: 0 8px 30px 8px;
        overflow: hidden;
      }
      .frankli-app-deck {
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.14);
      }
      .app-workspace {
        padding: 12px 8px;
      }
      .app-motto-row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
      }
      .motto-card {
        padding: 10px 12px;
        border-radius: 14px;
        gap: 10px;
        transform: none !important;
        box-shadow: 0 2px 6px rgba(11, 56, 63, 0.04) !important;
      }
      .motto-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
        border-radius: 8px;
      }
      .motto-title { font-size: 12px; }
      .motto-sub { font-size: 10.5px; }

      .masonry-row-streamlined {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
      }
      .brick-card {
        padding: 14px 12px;
        border-radius: 16px;
        transform: none !important;
        box-shadow: 0 4px 12px rgba(11, 56, 63, 0.04) !important;
      }
      .frankli-chat-deck {
        margin-top: 18px;
        border-radius: 18px;
        padding: 12px 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        transform: none !important;
      }
      .frankli-section-divider {
        margin: 28px auto 14px auto;
      }
      .frankli-news-divider {
        margin: 4px auto 14px auto;
      }
      .divider-pill-athletic {
        font-size: 11px;
        padding: 4px 12px;
      }
      .divider-sub-athletic {
        font-size: 10px;
      }
      .leaderboard-brick {
        padding: 0 !important;
        margin-bottom: 30px;
        transform: none !important;
        box-shadow: none !important;
      }
      .filter-bar {
        padding: 8px 10px;
        gap: 6px;
        border-radius: 14px;
      }
      .tab-pill {
        padding: 5px 9px;
        font-size: 11px;
      }
      .filter-select {
        padding: 5px 20px 5px 8px;
        font-size: 11px;
      }

      .vetmo-subtabs-group {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3px;
        padding: 2.5px;
      }
      .vetmo-subtab-btn {
        font-size: 9.5px;
        padding: 4px 6px;
        flex: 1;
        text-align: center;
        letter-spacing: 0px;
        white-space: nowrap;
      }
      .vetmo-subtab-btn.active {
        box-shadow: 0 2px 6px rgba(245, 166, 35, 0.4), inset 0 1px 1px #ffffff;
      }

      .live-strip {
        padding: 4px 8px;
        gap: 6px;
        margin-bottom: 10px;
        border-radius: 12px;
      }
      .live-tag-alert {
        font-size: 8.5px;
        padding: 2px 5px;
        gap: 2px;
        letter-spacing: 0.1px;
      }
      .live-marquee-content {
        font-size: 10px;
      }
      .live-alert-tag-red, .live-alert-tag-yellow {
        font-size: 9px;
        padding: 1px 3.5px;
      }
      .live-alert-note-red, .live-alert-guide {
        font-size: 9.5px;
      }

      .bxh-table thead th {
        padding: 8px 6px;
        font-size: 10.5px;
      }
      .bxh-table tbody td {
        padding: 8px 6px;
        font-size: 11.5px;
      }

      /* Horizontal & Vertical Sticky on mobile */
      .bxh-table thead th.th-sticky-rank {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 20;
        background: var(--fk-teal);
        width: 30px;
        min-width: 30px;
        max-width: 30px;
        padding: 8px 2px !important;
        text-align: center;
      }
      .bxh-table tbody td.td-sticky-rank {
        position: sticky;
        left: 0;
        z-index: 5;
        width: 30px;
        min-width: 30px;
        max-width: 30px;
        padding: 8px 2px !important;
        text-align: center;
      }
      .bxh-table tbody tr:nth-child(odd) td.td-sticky-rank { background-color: var(--fk-card); }
      .bxh-table tbody tr:nth-child(even) td.td-sticky-rank { background-color: #f7f1e4; }

      .bxh-table thead th.th-sticky-comp {
        position: sticky;
        top: 0;
        left: 30px;
        z-index: 20;
        background: var(--fk-teal);
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
      }
      .bxh-table tbody td.td-sticky-comp {
        position: sticky;
        left: 30px;
        z-index: 5;
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
      }
      .bxh-table tbody tr:nth-child(odd) td.td-sticky-comp { background-color: var(--fk-card); }
      .bxh-table tbody tr:nth-child(even) td.td-sticky-comp { background-color: #f7f1e4; }

      .col-rank {
        width: 30px;
        min-width: 30px;
        font-size: 12px;
      }

      .competitor-cell {
        min-width: 125px;
        gap: 6px;
      }
      .competitor-avatar, .competitor-default-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }
      .competitor-name {
        font-size: 11px;
        white-space: normal;
        word-break: break-word;
        line-height: 1.2;
      }
      .competitor-club {
        font-size: 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .mark-val {
        font-size: 11.5px;
      }
      .pace-sub {
        font-size: 9px;
      }
      .badge-vo2max {
        font-size: 10.5px;
        padding: 1px 5px;
      }
    }

    /* Switch to single-frame cards on Mobile Portrait */
    @media (max-width: 768px) and (orientation: portrait), (max-width: 520px) {
      .desktop-table-view {
        display: none !important;
      }
      .mobile-cards-view {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }
      .table-wrapper {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        padding: 0 !important;
      }
    }

    /* Keep table view on Mobile Landscape or Desktop */
    @media (orientation: landscape) and (min-width: 521px) {
      .desktop-table-view {
        display: block !important;
      }
      .mobile-cards-view {
        display: none !important;
      }
      .table-wrapper {
        background: var(--fk-card) !important;
        border: 1px solid var(--fk-border) !important;
        box-shadow: var(--shadow-md) !important;
        overflow-x: auto !important;
      }
    }

    /* Columns styling */
    .col-rank {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 14px;
      color: #475569;
      width: 42px;
      min-width: 42px;
      text-align: center;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    .competitor-cell {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 180px;
    }

    .competitor-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      cursor: pointer;
      border: 1.5px solid var(--fk-gold);
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transition: transform 0.2s;
    }
    .competitor-avatar:hover {
      transform: scale(1.08);
    }

    .competitor-default-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--fk-teal);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
      cursor: pointer;
      flex-shrink: 0;
      border: 1.5px solid var(--fk-gold);
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transition: transform 0.2s;
    }
    .competitor-default-avatar:hover {
      transform: scale(1.08);
    }

    .competitor-name {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 14px;
      color: var(--fk-text-main);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.2px;
      transition: color 0.15s;
    }
    .competitor-name:hover { color: var(--fk-coral); text-decoration: underline; }

    .competitor-club {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--fk-text-muted);
    }

    .mark-val {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 14px;
      color: #0f172a;
    }

    .pace-sub {
      font-size: 10.5px;
      color: var(--fk-text-muted);
      font-weight: 500;
    }

    .badge-vo2max {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      background: #e0f2fe;
      color: #0369a1;
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 13.5px;
      border: 1px solid #bae6fd;
    }

    .cmp-checkbox {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--fk-teal);
    }

    /* ═══ 7. Floating Compare Bar ══════════════════════════════ */
    .cmp-floating-bar {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(120px);
      background: #0f2327;
      color: #ffffff;
      padding: 10px 22px;
      border-radius: var(--radius-full);
      box-shadow: 0 12px 36px rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      gap: 16px;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
      border: 1.5px solid rgba(255, 255, 255, 0.25);
    }
    .cmp-floating-bar.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    /* ═══ 8. Modals (Frankli Style Cards & Gauges) ═════════════ */
    .v-overlay {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      height: 100dvh;
      background: rgba(7, 37, 42, 0.75);
      backdrop-filter: blur(8px);
      z-index: 100000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .v-overlay.active { opacity: 1; }

    .v-modal {
      background: #ffffff;
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 640px;
      max-height: calc(100dvh - 32px);
      max-height: calc(100vh - 32px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(7, 37, 42, 0.35);
      border: 1px solid var(--fk-border);
      animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      margin: auto;
      position: relative;
    }
    @keyframes modalPop {
      0% { transform: scale(0.92); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    .v-header {
      background: var(--fk-teal);
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid var(--fk-gold);
      flex-shrink: 0;
    }

    .v-title {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.3px;
      color: #ffffff;
      text-transform: uppercase;
    }
    .v-subtitle { font-size: 11px; color: #a4c4c8; }

    .v-close {
      background: rgba(255, 255, 255, 0.12);
      border: none;
      color: #ffffff;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }
    .v-close:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .v-body {
      padding: 18px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1 1 auto;
      min-height: 0;
    }

    .v-modal-actions {
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      flex-wrap: wrap;
      position: sticky;
      bottom: -18px;
      background: #ffffff;
      padding: 10px 0 8px 0;
      border-top: 1px solid #f1f5f9;
      z-index: 10;
    }

    @media (max-width: 640px) {
      .v-overlay {
        padding: 6px 6px calc(14px + env(safe-area-inset-bottom, 0px)) 6px;
        align-items: flex-start !important;
      }
      .v-modal {
        max-height: calc(100dvh - 12px);
        max-height: calc(100vh - 12px);
        border-radius: 14px;
        margin: 4px auto auto auto;
      }
      .v-header {
        padding: 11px 14px;
      }
      .v-title {
        font-size: 15px;
      }
      .v-subtitle {
        font-size: 10px;
      }
      .v-body {
        padding: 12px 12px 20px 12px;
      }
      .v-modal-actions {
        bottom: -20px;
        padding: 8px 0 6px 0;
      }
    }

    .vo2-highlight-card {
      background: #f8fafb;
      border: 1px solid var(--fk-border-light);
      border-radius: var(--radius-md);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .vo2-val-big {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 900;
      color: #0369a1;
      line-height: 1;
    }

    /* ═══ Visual Gauge Meter Scales ════════════════════════════ */
    .gauge-scale-box {
      margin: 8px 0;
      position: relative;
    }
    .gauge-track {
      height: 7px;
      border-radius: var(--radius-full);
      display: flex;
      overflow: visible;
      position: relative;
      background: #e2ecec;
      margin-top: 14px;
      margin-bottom: 4px;
    }
    .gauge-seg {
      height: 100%;
      position: relative;
    }
    .gauge-seg:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
    .gauge-seg:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
    
    .gauge-pointer {
      position: absolute;
      top: -12px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 5;
    }
    .gauge-pin {
      width: 4px;
      height: 15px;
      background: #0f2327;
      border-radius: 2px;
      border: 1px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    .gauge-needle {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #0f2327;
      margin-bottom: -1px;
    }
    .gauge-labels {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      color: var(--fk-text-muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.2px;
    }

    /* 5 Pace Zones Grid */
    .pace-zones-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      margin-top: 6px;
    }
    @media (max-width: 580px) {
      .pace-zones-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .pace-zone-card {
      background: #ffffff;
      border: 1px solid var(--fk-border-light);
      border-radius: var(--radius-sm);
      padding: 7px 8px;
      text-align: center;
      transition: transform 0.2s;
    }
    .pace-zone-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .pz-title {
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.2px;
    }
    .pz-range {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 900;
      color: #0f172a;
      margin: 2px 0;
      line-height: 1.1;
    }
    .pz-desc {
      font-size: 8.5px;
      color: var(--fk-text-muted);
      line-height: 1.2;
    }

    /* Race Predictor Matrix */
    .race-pred-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    @media (max-width: 580px) {
      .race-pred-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .race-pred-card {
      background: #f8fafb;
      border: 1px solid var(--fk-border-light);
      border-radius: var(--radius-md);
      padding: 10px 10px;
      text-align: center;
      transition: all 0.2s ease;
    }
    .race-pred-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(11, 56, 63, 0.08);
    }
    .race-pred-dist {
      font-size: 10.5px;
      font-weight: 900;
      color: #475569;
      font-family: var(--font-heading);
      letter-spacing: 0.2px;
      text-transform: uppercase;
    }
    .race-pred-time {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 900;
      color: #0f172a;
      margin: 3px 0;
      line-height: 1.1;
    }
    .race-pred-pace {
      font-size: 11px;
      font-weight: 600;
      color: var(--fk-text-muted);
    }
    .race-pred-pr {
      font-size: 10px;
      color: #94a3b8;
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px dashed var(--fk-border-light);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ═══ 9. Floating Help Button ══════════════════════════════ */
    .floating-bm-btn {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #fcd34d 0%, var(--fk-gold) 100%);
      color: #0f2327;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 20px rgba(245, 166, 35, 0.45);
      cursor: pointer;
      z-index: 90;
      text-decoration: none;
      transition: all 0.25s ease;
    }
    .floating-bm-btn:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 8px 24px rgba(245, 166, 35, 0.6);
    }

    /* ═══ 11. User Profile & Admin Badge on Header ══════════════ */
    .btn-user-profile {
      background: linear-gradient(135deg, rgba(11, 56, 63, 0.95), rgba(7, 37, 42, 0.95));
      border: 1.5px solid rgba(245, 166, 35, 0.5);
      color: #ffffff;
      padding: 4px 10px;
      gap: 6px;
      position: relative;
    }
    .btn-user-profile:hover {
      border-color: var(--fk-gold);
      box-shadow: 0 0 14px rgba(245, 166, 35, 0.4);
    }
    .user-avatar-badge {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--fk-gold);
      color: #07252a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 900;
      flex-shrink: 0;
      overflow: hidden;
    }
    .user-avatar-badge img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .user-name-label {
      font-size: 11px;
      font-weight: 800;
      max-width: 90px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-role-badge {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #ffffff;
      font-size: 8.5px;
      font-weight: 900;
      padding: 1.5px 5px;
      border-radius: var(--radius-full);
      letter-spacing: 0.3px;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    }

    /* ═══ 12. Floating Quick Access Button (Bảng Phong Thần - Nhỏ gọn tinh tế) ═════════ */
    .phongthan-float-btn {
      position: fixed;
      left: 18px;
      right: auto;
      bottom: 18px;
      background: linear-gradient(135deg, rgba(11, 56, 63, 0.95) 0%, rgba(7, 37, 42, 0.95) 100%);
      color: #fef08a;
      border: 1.5px solid #f59e0b;
      border-radius: var(--radius-full);
      padding: 6px 12px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-heading);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(245, 158, 11, 0.3);
      z-index: 1000;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      animation: ptFloatPulse 3.5s infinite ease-in-out;
      letter-spacing: 0.2px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    @keyframes ptFloatPulse {
      0%, 100% {
        border-color: #f59e0b;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(245, 158, 11, 0.35);
      }
      50% {
        border-color: #fde047;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 26px rgba(245, 158, 11, 0.6);
      }
    }
    .phongthan-float-btn:hover,
    .chat-float-btn:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(251, 191, 36, 0.6);
      border-color: #fde047;
      color: #ffffff;
    }
    .chat-unread-dot {
      width: 9px;
      height: 9px;
      background: #ef4444;
      border-radius: 50%;
      box-shadow: 0 0 8px #ef4444;
      animation: pulseAlert 1.8s infinite ease-in-out;
    }

    .chat-drawer {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 380px;
      max-width: calc(100vw - 32px);
      height: 520px;
      max-height: calc(100vh - 110px);
      background: #fcfaf5;
      border: 2px solid var(--fk-teal);
      border-radius: 20px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
      z-index: 1001;
      display: none;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(20px) scale(0.95);
      opacity: 0;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .chat-drawer.active {
      display: flex;
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .chat-header {
      background: linear-gradient(135deg, #0b383f 0%, #07252a 100%);
      color: #ffffff;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1.5px solid rgba(245, 166, 35, 0.4);
    }
    .chat-title-box {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .chat-title {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 900;
      color: var(--fk-gold-light);
    }
    .chat-online-badge {
      font-size: 10px;
      color: #86efac;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .chat-close-btn {
      background: rgba(255, 255, 255, 0.12);
      border: none;
      color: #ffffff;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .chat-close-btn:hover {
      background: rgba(239, 68, 68, 0.8);
    }

    .chat-messages-box {
      flex: 1;
      overflow-y: auto;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #fcf9f2;
      scroll-behavior: smooth;
    }
    .chat-messages-box::-webkit-scrollbar {
      width: 5px;
    }
    .chat-messages-box::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.03);
      border-radius: 4px;
    }
    .chat-messages-box::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 4px;
    }
    .chat-messages-box::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }
    .chat-msg-item {
      display: flex;
      gap: 7px;
      align-items: flex-start;
    }
    .chat-msg-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #0b383f;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 900;
      flex-shrink: 0;
      border: 1px solid var(--fk-gold);
      overflow: hidden;
    }
    .chat-msg-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .chat-msg-content {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e3d8c5;
      border-radius: 10px;
      border-top-left-radius: 3px;
      padding: 4px 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
      position: relative;
    }
    .chat-msg-content.mine {
      background: #fef9c3;
      border-color: #fde047;
    }
    .chat-msg-content.admin-msg {
      background: linear-gradient(135deg, #eff6ff 0%, #fffbeb 100%);
      border: 1.5px solid #f59e0b;
      box-shadow: 0 2px 8px rgba(245, 166, 35, 0.15);
    }
    .chat-msg-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      margin-bottom: 1px;
    }
    .chat-msg-author {
      font-size: 10.5px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .chat-msg-admin-crown {
      color: #b91c1c;
      font-size: 8.5px;
      font-weight: 900;
      background: linear-gradient(135deg, #fee2e2, #fef3c7);
      border: 1px solid #fcd34d;
      padding: 1px 5px;
      border-radius: var(--radius-full);
      letter-spacing: 0.2px;
    }
    .badge-custom-runner {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 9.5px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: var(--radius-full);
      background: linear-gradient(135deg, #fffbeb, #fef3c7);
      color: #b45309;
      border: 1px solid #fcd34d;
      box-shadow: 0 1px 3px rgba(245, 166, 35, 0.2);
      font-family: var(--font-heading);
      white-space: nowrap;
    }
    .chat-msg-time {
      font-size: 9px;
      color: #94a3b8;
    }
    .chat-msg-text {
      font-size: 11px;
      color: #334155;
      line-height: 1.35;
      word-break: break-word;
    }
    .chat-msg-del-btn {
      background: none;
      border: none;
      color: #ef4444;
      font-size: 10px;
      cursor: pointer;
      opacity: 0.6;
      padding: 0 2px;
    }
    .chat-msg-del-btn:hover {
      opacity: 1;
    }

    /* Action buttons in message header (Like, Thả cảm xúc, Trả lời) */
    .chat-msg-action-btn {
      background: none;
      border: none;
      color: #64748b;
      font-size: 9.5px;
      font-weight: 700;
      cursor: pointer;
      padding: 1px 5px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      transition: all 0.15s ease;
      line-height: 1.2;
    }
    .chat-msg-action-btn:hover {
      background: rgba(0, 0, 0, 0.06);
      color: #1e293b;
    }
    .chat-msg-action-btn.liked {
      color: #2563eb;
      font-weight: 800;
      background: #eff6ff;
    }

    /* Reaction Pills on Message */
    .chat-msg-reactions-wrap {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 5px;
      padding-top: 2px;
    }
    .chat-react-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 1.5px 6px;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      line-height: 1;
    }
    .chat-react-pill:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
      transform: scale(1.06);
    }
    .chat-react-pill.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      font-weight: 800;
      box-shadow: 0 1px 4px rgba(59, 130, 246, 0.25);
    }
    .chat-react-pill .react-emoji {
      font-size: 12px;
      line-height: 1;
    }
    .chat-react-pill .react-count {
      font-size: 10px;
      font-weight: 800;
      color: #475569;
    }
    .chat-react-pill.active .react-count {
      color: #1d4ed8;
    }
    .chat-react-add-btn {
      background: transparent;
      border: 1px dashed #94a3b8;
      border-radius: 12px;
      padding: 1px 6px;
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      cursor: pointer;
      transition: all 0.15s;
      line-height: 1.2;
    }
    .chat-react-add-btn:hover {
      background: #f1f5f9;
      border-color: #2563eb;
      color: #2563eb;
      transform: scale(1.08);
    }

    /* Floating Reaction Picker Popover */
    .chat-reaction-picker-popover {
      position: fixed;
      z-index: 99999;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 30px;
      padding: 4px 8px;
      display: flex;
      align-items: center;
      gap: 3px;
      box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.22), 0 4px 10px -2px rgba(0, 0, 0, 0.1);
      animation: pickerPopIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes pickerPopIn {
      0% { opacity: 0; transform: scale(0.7) translateY(8px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .picker-emoji-btn {
      background: transparent;
      border: none;
      font-size: 20px;
      line-height: 1;
      padding: 4px 5px;
      cursor: pointer;
      border-radius: 50%;
      transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.15s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .picker-emoji-btn:hover {
      transform: scale(1.38) translateY(-4px);
      background: #eff6ff;
    }
    .picker-emoji-btn:active {
      transform: scale(1.1);
    }

    /* ═══ Fitness In-Depth Timeframe Switcher (7 Ngày / 30 Ngày / 90 Ngày) ═══ */
    .fitness-timeframe-selector {
      display: flex;
      align-items: center;
      background: #e2e8f0;
      border-radius: var(--radius-full);
      padding: 2.5px;
      gap: 2.5px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .btn-fit-timeframe {
      background: transparent;
      border: none;
      font-family: var(--font-heading);
      font-size: 10px;
      font-weight: 800;
      color: #475569;
      padding: 3px 9px;
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: all 0.18s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      line-height: 1.2;
    }
    .btn-fit-timeframe:hover {
      color: #0f172a;
      background: rgba(255, 255, 255, 0.5);
    }
    .btn-fit-timeframe.active {
      background: #ffffff;
      color: #1d4ed8;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      font-weight: 900;
    }

    .chat-quick-reactions {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      background: #f4ecda;
      border-top: 1px solid #e3d8c5;
      overflow-x: auto;
    }
    .chat-react-btn {
      background: #ffffff;
      border: 1px solid #dcd0bc;
      border-radius: var(--radius-full);
      padding: 1.5px 6px;
      font-size: 11.5px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .chat-react-btn:hover {
      transform: scale(1.15);
      background: #fef08a;
      border-color: #f59e0b;
    }

    .chat-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      background: #ffffff;
      border-top: 1px solid #e3d8c5;
    }
    .chat-input-field {
      flex: 1;
      padding: 5px 10px;
      border: 1px solid #cbd5e1;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-family: var(--font-body);
      color: #0f172a;
      background: #f8fafc;
    }
    .chat-input-field:focus {
      outline: none;
      border-color: var(--fk-teal);
      background: #ffffff;
    }
    .chat-send-btn {
      background: var(--fk-teal);
      color: #ffffff;
      border: none;
      border-radius: var(--radius-full);
      padding: 5px 11px;
      font-size: 11px;
      font-weight: 800;
      font-family: var(--font-heading);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .chat-send-btn:hover {
      background: var(--fk-teal-surface);
    }

    /* ═══ Chat Reply & Image Attachments Styling ══════════════════ */
    .chat-msg-reply-btn {
      background: none;
      border: none;
      color: #64748b;
      font-size: 9.5px;
      font-weight: 700;
      cursor: pointer;
      opacity: 0.65;
      padding: 1px 4px;
      border-radius: 4px;
      transition: all 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .chat-msg-reply-btn:hover {
      opacity: 1;
      color: var(--fk-teal);
      background: rgba(11, 56, 63, 0.08);
    }

    .chat-msg-quote-box {
      display: flex;
      align-items: stretch;
      gap: 6px;
      background: rgba(11, 56, 63, 0.05);
      border-radius: 6px;
      padding: 3px 7px;
      margin-bottom: 4px;
      cursor: pointer;
      transition: background 0.15s;
      border-left: 3px solid var(--fk-teal);
    }
    .chat-msg-quote-box:hover {
      background: rgba(11, 56, 63, 0.1);
    }
    .chat-msg-content.mine .chat-msg-quote-box {
      background: rgba(0, 0, 0, 0.05);
      border-left-color: var(--fk-gold-dark);
    }
    .quote-body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .quote-name {
      font-size: 9.5px;
      font-weight: 800;
      color: var(--fk-teal);
      line-height: 1.2;
    }
    .chat-msg-content.mine .quote-name {
      color: #92400e;
    }
    .quote-text {
      font-size: 10px;
      color: #64748b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 260px;
    }

    .chat-reply-bar-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #f4ecda;
      border-top: 1px solid #e2d8c6;
      padding: 5px 12px;
      font-size: 11px;
    }
    .chat-reply-bar-left {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
    }
    .chat-reply-info {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
      white-space: nowrap;
    }
    .chat-reply-to-name {
      font-weight: 800;
      color: var(--fk-teal);
      font-size: 10.5px;
    }
    .chat-reply-to-preview {
      font-size: 10.5px;
      color: #64748b;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .chat-reply-cancel-btn {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      padding: 0 4px;
      line-height: 1;
    }
    .chat-reply-cancel-btn:hover {
      color: #ef4444;
    }

    .chat-upload-img-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: var(--radius-full);
      padding: 4px 8px;
      font-size: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      flex-shrink: 0;
      line-height: 1;
    }
    .chat-upload-img-btn:hover {
      background: #e2e8f0;
      border-color: var(--fk-teal);
      transform: scale(1.06);
    }

    .chat-img-preview-box {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      padding: 6px 10px;
    }
    .chat-img-preview-thumb {
      width: 42px;
      height: 42px;
      border-radius: 6px;
      object-fit: cover;
      border: 1px solid #cbd5e1;
    }
    .chat-img-preview-remove {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ef4444;
      color: #ffffff;
      border: none;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

    .chat-msg-image-bubble {
      margin-top: 5px;
      border-radius: 8px;
      overflow: hidden;
      max-width: 240px;
    }
    .chat-attached-img {
      max-width: 100%;
      max-height: 200px;
      border-radius: 8px;
      display: block;
      cursor: zoom-in;
      transition: transform 0.2s, box-shadow 0.2s;
      object-fit: cover;
    }
    .chat-attached-img:hover {
      transform: scale(1.02);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

    .chat-msg-highlight {
      animation: chatHighlightPulse 1.6s ease;
    }
    @keyframes chatHighlightPulse {
      0%, 100% { background: transparent; }
      30%, 70% { background: rgba(245, 166, 35, 0.25); border-radius: 8px; }
    }

    .chat-lightbox-overlay {
      position: fixed;
      inset: 0;
      background: rgba(7, 37, 42, 0.92);
      backdrop-filter: blur(8px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .chat-lightbox-img {
      max-width: 90vw;
      max-height: 85vh;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.2);
      object-fit: contain;
    }
    .chat-lightbox-close {
      position: absolute;
      top: 20px;
      right: 25px;
      color: #ffffff;
      font-size: 30px;
      cursor: pointer;
      font-weight: 700;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
      transition: transform 0.15s;
    }
    .chat-lightbox-close:hover {
      transform: scale(1.2);
      color: var(--fk-gold);
    }

    /* ═══ 13. Admin Runner Console & Pinned Announcements ═════ */
    .chat-pinned-banner {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
      border-bottom: 1.5px solid #fcd34d;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      color: #78350f;
      box-shadow: 0 2px 6px rgba(245, 166, 35, 0.15);
      position: relative;
      z-index: 10;
    }
    .chat-pinned-content {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 1;
    }
    .chat-pinned-badge {
      background: #f59e0b;
      color: #ffffff;
      font-size: 9px;
      font-weight: 900;
      padding: 1.5px 6px;
      border-radius: var(--radius-full);
      letter-spacing: 0.3px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .chat-pinned-text {
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 11px;
      color: #92400e;
    }
    .chat-pinned-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .chat-pinned-btn {
      background: rgba(180, 83, 9, 0.1);
      border: 1px solid rgba(180, 83, 9, 0.2);
      color: #92400e;
      border-radius: 4px;
      padding: 1px 6px;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.15s;
    }
    .chat-pinned-btn:hover {
      background: #f59e0b;
      color: #ffffff;
    }

    /* Admin Runner Console Styles */
    .admin-pill-group {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      padding-bottom: 4px;
      margin-bottom: 12px;
    }
    .admin-filter-pill {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .admin-filter-pill.active {
      background: var(--fk-teal);
      color: #ffffff;
      border-color: var(--fk-teal);
      box-shadow: 0 2px 6px rgba(11, 56, 63, 0.25);
    }
    .admin-filter-pill:hover:not(.active) {
      background: #e2e8f0;
    }

    .admin-runner-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      transition: all 0.2s ease;
    }
    .admin-runner-card:hover {
      border-color: var(--fk-gold);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }
    .admin-runner-card.is-blocked {
      background: #fef2f2;
      border-color: #fca5a5;
    }
    .admin-runner-card.is-hidden {
      opacity: 0.75;
      background: #f8fafc;
    }
    .admin-runner-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }
    .admin-runner-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .btn-act {
      border: none;
      padding: 4px 9px;
      border-radius: 6px;
      font-size: 10.5px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .btn-act-approve { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
    .btn-act-approve:hover { background: #16a34a; color: #ffffff; }
    .btn-act-unapprove { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
    .btn-act-unapprove:hover { background: #f59e0b; color: #ffffff; }
    .btn-act-badge { background: #fdf4ff; color: #a21caf; border: 1px solid #f0abfc; }
    .btn-act-badge:hover { background: #c026d3; color: #ffffff; }
    .btn-act-hide { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
    .btn-act-hide:hover { background: #64748b; color: #ffffff; }
    .btn-act-block { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
    .btn-act-block:hover { background: #dc2626; color: #ffffff; }
    .btn-act-kick { background: #450a0a; color: #fee2e2; border: 1px solid #7f1d1d; }
    .btn-act-kick:hover { background: #000000; color: #ffffff; }

    /* ═══ 10. Footer ════════════════════════════════════════════ */
    .site-footer {
      background: var(--fk-teal-dark);
      color: #9cb5b8;
      text-align: center;
      padding: 24px 16px;
      font-size: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      font-weight: 500;
    }



    /* ══════════════════════════════════════════════════════════════
       ACTIVITIES TAB & COROS PACE ZONES STYLES
       ══════════════════════════════════════════════════════════════ */
    .tab-pill-activities {
      background: rgba(14, 165, 233, 0.12);
      color: #0284c7;
      border: 1px solid rgba(14, 165, 233, 0.35);
      font-weight: 800;
    }
    .tab-pill-activities:hover {
      background: rgba(14, 165, 233, 0.22);
      color: #0369a1;
      border-color: #0284c7;
    }
    .tab-pill-activities.active {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
      color: #ffffff !important;
      border-color: #38bdf8 !important;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
    }

    .activities-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    }
    .act-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f1f5f9;
    }
    .act-header-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .act-header-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #e0f2fe;
      color: #0284c7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
    }
    .act-header-title {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.2px;
    }
    .act-header-sub {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }
    .act-selectors-group {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .act-runner-selector-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      padding: 4px 10px;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
    }
    .act-sel-label {
      font-size: 11.5px;
      font-weight: 700;
      color: #475569;
    }
    .act-runner-dropdown {
      border: none;
      background: transparent;
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a;
      outline: none;
      cursor: pointer;
      max-width: 220px;
    }
    .btn-refresh-act {
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #cbd5e1;
      padding: 6px 14px;
      border-radius: 9999px;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-refresh-act:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .act-summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px;
      margin-bottom: 22px;
    }
    .act-summary-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 14px;
      text-align: center;
    }
    .act-sum-lbl {
      font-size: 10px;
      font-weight: 800;
      color: #64748b;
      letter-spacing: 0.3px;
      margin-bottom: 4px;
    }
    .act-sum-val {
      font-size: 18px;
      font-weight: 900;
      color: #0f172a;
    }
    .act-sum-val.text-gold {
      color: #d97706;
    }
    .act-sum-unit {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    /* Activity Feed Items (Intervals.icu style) */
    .act-list-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .act-item-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }
    .act-item-card:hover {
      transform: translateY(-2px);
      border-color: #38bdf8;
      box-shadow: 0 8px 20px -4px rgba(2, 132, 199, 0.12);
    }
    .act-item-left {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 220px;
    }
    .act-item-sport-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #ecfeff;
      color: #0891b2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      border: 1px solid #cffafe;
    }
    .act-item-name {
      font-size: 13.5px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.3;
    }
    .act-item-date {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }
    .act-item-runner-tag {
      font-size: 10px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 1px 6px;
      border-radius: 4px;
      margin-left: 4px;
    }

    .act-item-metrics {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .act-m-col {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .act-m-val {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
    }
    .act-m-lbl {
      font-size: 9.5px;
      color: #94a3b8;
      font-weight: 600;
      text-transform: uppercase;
    }
    .act-item-action {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1f5f9;
      color: #0284c7;
      font-size: 12px;
      font-weight: 800;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      white-space: nowrap;
    }
    .act-item-card:hover .act-item-action {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    /* COROS PACE ZONES CARD (Dark Mode Luxury Styling) */
    .coros-card-wrap {
      background: #111827;
      border: 1px solid #1f2937;
      border-radius: 16px;
      padding: 16px;
      color: #ffffff;
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }
    .coros-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #374151;
      padding-bottom: 10px;
      margin-bottom: 14px;
    }
    .coros-badge-pace {
      font-size: 13px;
      font-weight: 800;
      color: #ffffff;
      border-bottom: 2px solid #ef4444;
      padding-bottom: 4px;
    }
    .coros-zones-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .coros-zone-row {
      display: grid;
      grid-template-columns: 140px 100px 1fr 45px 55px;
      align-items: center;
      gap: 12px;
      font-size: 12px;
    }
    .coros-zone-name {
      color: #cbd5e1;
      font-weight: 600;
      white-space: nowrap;
    }
    .coros-zone-range {
      color: #94a3b8;
      font-family: monospace;
      font-size: 11px;
    }
    .coros-bar-track {
      background: #1f2937;
      height: 10px;
      border-radius: 9999px;
      overflow: hidden;
      position: relative;
    }
    .coros-bar-fill {
      height: 100%;
      border-radius: 9999px;
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .coros-zone-pct {
      font-weight: 800;
      color: #ffffff;
      text-align: right;
    }
    .coros-zone-time {
      color: #94a3b8;
      text-align: right;
      font-size: 11.5px;
      font-family: monospace;
    }

    /* Splits table in detail modal */
    .act-card-inner {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px;
    }
    .act-table-splits {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      text-align: left;
    }
    .act-table-splits th {
      background: #f1f5f9;
      color: #475569;
      font-weight: 800;
      padding: 8px 10px;
      border-bottom: 1px solid #e2e8f0;
    }
    .act-table-splits td {
      padding: 8px 10px;
      border-bottom: 1px solid #f1f5f9;
      color: #0f172a;
    }
    .act-table-splits tr:nth-child(even) {
      background: #f8fafc;
    }

    .act-metric-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      text-align: center;
    }
    .act-metric-title {
      font-size: 9.5px;
      font-weight: 800;
      color: #64748b;
      margin-bottom: 2px;
    }
    .act-metric-val {
      font-size: 16px;
      font-weight: 900;
      color: #0f172a;
    }
    .act-metric-sub {
      font-size: 9.5px;
      color: #94a3b8;
    }

    @media (max-width: 640px) {
      .coros-zone-row {
        grid-template-columns: 110px 80px 1fr 38px 45px;
        gap: 6px;
        font-size: 10.5px;
      }
      .act-item-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .act-item-metrics {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
      }
      .act-m-col {
        align-items: flex-start;
      }
      .act-item-action {
        width: 100%;
      }
    }

    /* ══════════════════════════════════════════════════════════════
       INTERVALS.ICU ACTIVITY DETAIL MODAL STYLES (MATCHING SCREENSHOT)
       ══════════════════════════════════════════════════════════════ */
    .icu-modal-container {
      background: #f8fafc;
      border-radius: 12px;
      width: 100%;
      max-width: 1280px;
      max-height: 94vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45);
      border: 1px solid #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    .icu-top-bar {
      background: #ffffff;
      padding: 10px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e2e8f0;
    }
    .icu-brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .icu-logo-text {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.3px;
    }
    .icu-runner-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f1f5f9;
      padding: 3px 10px;
      border-radius: 9999px;
      font-size: 11.5px;
      font-weight: 700;
      color: #334155;
    }
    .icu-runner-ava {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0284c7;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      overflow: hidden;
    }
    .icu-close-btn {
      background: none;
      border: none;
      font-size: 24px;
      color: #64748b;
      cursor: pointer;
      line-height: 1;
      padding: 0 4px;
    }
    .icu-close-btn:hover {
      color: #0f172a;
    }

    /* 6 Nhóm thống số Header Deck chuẩn Intervals.icu */
    .icu-header-deck {
      background: #ffffff;
      padding: 14px 18px;
      display: grid;
      grid-template-columns: 50px 1.4fr 1.1fr 1.3fr 1.2fr 1.1fr 1fr;
      gap: 14px;
      align-items: center;
      border-bottom: 1px solid #e2e8f0;
      font-size: 12px;
    }
    .icu-sport-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .icu-sport-circle {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .icu-nav-arrows {
      display: flex;
      gap: 8px;
      font-size: 11px;
      color: #64748b;
      cursor: pointer;
      font-weight: 800;
    }
    .icu-stat-block {
      display: flex;
      flex-direction: column;
      gap: 2px;
      color: #334155;
    }
    .icu-stat-date {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }
    .icu-stat-highlight {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }
    .icu-big-num {
      font-size: 17px;
      font-weight: 900;
      color: #0f172a;
    }
    .icu-sep {
      color: #94a3b8;
      font-weight: 400;
    }
    .icu-big-time {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
    }
    .icu-stat-sub {
      font-size: 11px;
      color: #64748b;
    }
    .icu-stat-line {
      font-size: 12px;
      color: #334155;
    }
    .icu-stat-row-3 {
      display: flex;
      gap: 10px;
      font-size: 11.5px;
    }
    .icu-sub-lbl {
      font-size: 9.5px;
      color: #94a3b8;
      font-weight: 600;
      text-transform: uppercase;
    }
    .icu-pct-sub {
      font-size: 10.5px;
      color: #94a3b8;
      font-weight: 600;
    }
    .icu-device-block {
      text-align: right;
    }
    .icu-device-name {
      font-size: 11px;
      font-weight: 700;
      color: #475569;
    }
    .icu-device-tag {
      display: inline-block;
      font-size: 9.5px;
      font-weight: 800;
      background: #e0f2fe;
      color: #0369a1;
      padding: 1px 6px;
      border-radius: 4px;
      margin-top: 3px;
    }

    /* Dải Laps Strip */
    .icu-laps-strip {
      background: #f1f5f9;
      padding: 6px 18px;
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid #e2e8f0;
      color: #475569;
      overflow-x: auto;
      white-space: nowrap;
    }
    .icu-laps-title {
      font-weight: 800;
      color: #0f172a;
    }
    .icu-laps-data {
      color: #64748b;
    }

    /* Sub-tabs bar (đúng chỗ khoanh đỏ trong ảnh) */
    .icu-subtabs-bar {
      background: #ffffff;
      border-bottom: 2px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 18px;
    }
    .icu-subtabs-left {
      display: flex;
      gap: 4px;
    }
    .icu-tab-btn {
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      padding: 10px 14px;
      font-size: 11.5px;
      font-weight: 800;
      color: #64748b;
      cursor: pointer;
      margin-bottom: -2px;
      letter-spacing: 0.3px;
      transition: all 0.15s ease;
    }
    .icu-tab-btn:hover {
      color: #0284c7;
    }
    .icu-tab-btn.active {
      color: #0284c7;
      border-bottom-color: #0284c7;
      background: rgba(2, 132, 199, 0.04);
    }
    .icu-subtabs-right {
      display: flex;
      gap: 12px;
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
    }
    .icu-subtab-tool {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .icu-subtab-tool:hover {
      text-decoration: underline;
    }

    /* Tab Content Deck */
    .icu-tab-content-deck {
      padding: 16px;
      overflow-y: auto;
      background: #f8fafc;
      flex: 1;
    }
    .icu-panel-view {
      display: grid;
      grid-template-columns: 290px 240px 1.4fr 220px;
      gap: 14px;
      align-items: start;
    }
    .icu-panel-head {
      font-size: 10px;
      font-weight: 800;
      color: #64748b;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    /* 7 Zones Table */
    .icu-col-zones {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
    }
    .icu-table-zones {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .icu-table-zones td {
      padding: 5px 4px;
      border-bottom: 1px solid #f1f5f9;
    }
    .icu-zone-tag {
      font-weight: 800;
      font-size: 10.5px;
      white-space: nowrap;
    }
    .icu-zone-bar-box {
      width: 45px;
      height: 8px;
      background: #f1f5f9;
      border-radius: 4px;
      overflow: hidden;
    }
    .icu-zone-bar-in {
      height: 100%;
      border-radius: 4px;
    }

    /* Histogram & Curves Columns */
    .icu-col-histogram, .icu-col-curves {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
    }
    .icu-chart-legend-sub {
      font-size: 10.5px;
      margin-top: 6px;
      text-align: center;
    }

    /* Summary & Settings Box */
    .icu-col-summary {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      font-size: 11.5px;
    }
    .icu-load-box {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f8fafc;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      margin-bottom: 10px;
    }
    .icu-load-row {
      display: flex;
      justify-content: space-between;
      color: #334155;
    }
    .icu-load-explain {
      font-size: 10.5px;
      color: #64748b;
      line-height: 1.4;
    }

    @media (max-width: 992px) {
      .icu-header-deck {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .icu-sport-col {
        grid-column: span 2;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
      }
      .icu-device-block {
        text-align: left;
      }
      .icu-panel-view {
        grid-template-columns: 1fr;
      }
    }

    /* ══════════════════════════════════════════════════════════════
       TRAINING PLAN & COACH STYLES (CÁ NHÂN HOÁ)
       ══════════════════════════════════════════════════════════════ */
    .tab-pill-plan {
      background: rgba(16, 185, 129, 0.12);
      color: #059669;
      border: 1px solid rgba(16, 185, 129, 0.35);
      font-weight: 800;
    }
    .tab-pill-plan:hover {
      background: rgba(16, 185, 129, 0.22);
      color: #047857;
      border-color: #10b981;
    }
    .tab-pill-plan.active {
      background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
      color: #ffffff !important;
      border-color: #34d399 !important;
      box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
    }

    .plan-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    }
    .plan-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 22px;
      padding-bottom: 18px;
      border-bottom: 1px solid #f1f5f9;
    }
    .plan-header-info {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .plan-header-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: #ecfdf5;
      color: #059669;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
    }
    .plan-header-title {
      font-size: 17px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: 0.5px;
    }
    .plan-header-sub {
      font-size: 12.5px;
      color: #64748b;
      margin-top: 2px;
    }
    .plan-auth-badge-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* Auth prompt notice card */
    .plan-auth-notice {
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      border: 2px dashed #cbd5e1;
      border-radius: 18px;
      padding: 40px 24px;
      text-align: center;
      max-width: 600px;
      margin: 20px auto;
    }
    .plan-auth-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }
    .plan-auth-title {
      font-size: 19px;
      font-weight: 900;
      color: #0f172a;
      margin-bottom: 8px;
    }
    .plan-auth-desc {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 20px;
    }
    .btn-plan-login {
      background: linear-gradient(135deg, #059669 0%, #047857 100%);
      color: #ffffff;
      font-weight: 800;
      border: none;
      padding: 12px 24px;
      border-radius: 12px;
      font-size: 14px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
    }
    .btn-plan-login:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
    }

    /* Runner Identity Card Bar */
    .plan-runner-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 20px;
    }
    .plan-runner-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .plan-runner-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #059669;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 18px;
      overflow: hidden;
      border: 2px solid #34d399;
    }
    .plan-runner-name {
      font-size: 15px;
      font-weight: 900;
      color: #0f172a;
    }
    .plan-runner-club {
      font-size: 12px;
      color: #059669;
      font-weight: 700;
    }
    .plan-prs-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .plan-pr-pill {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 11.5px;
      color: #475569;
      font-weight: 600;
    }
    .plan-pr-pill strong {
      color: #0284c7;
      margin-left: 2px;
    }

    /* Plan Creation Wizard */
    .plan-wizard-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    }
    .plan-wz-title {
      font-size: 16px;
      font-weight: 900;
      color: #0f172a;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .plan-wz-sub {
      font-size: 12.5px;
      color: #64748b;
      margin-bottom: 22px;
    }
    .plan-form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-bottom: 24px;
    }
    .plan-field-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .plan-field-label {
      font-size: 12.5px;
      font-weight: 800;
      color: #334155;
    }
    .plan-choice-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .plan-choice-btn {
      padding: 8px 16px;
      border-radius: 10px;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .plan-choice-btn:hover {
      border-color: #059669;
      color: #059669;
    }
    .plan-choice-btn.active {
      background: #ecfdf5;
      border-color: #059669;
      color: #059669;
      box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
    }
    .plan-input-time {
      padding: 10px 14px;
      border-radius: 10px;
      border: 1.5px solid #cbd5e1;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      width: 100%;
      outline: none;
      transition: border-color 0.2s;
    }
    .plan-input-time:focus {
      border-color: #059669;
    }
    .plan-pace-preview-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #eff6ff;
      color: #0284c7;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 700;
      margin-top: 4px;
    }
    .btn-create-plan-submit {
      background: linear-gradient(135deg, #059669 0%, #047857 100%);
      color: #ffffff;
      font-size: 15px;
      font-weight: 900;
      border: none;
      padding: 14px 28px;
      border-radius: 12px;
      cursor: pointer;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all 0.2s ease;
      box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
    }
    .btn-create-plan-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(5, 150, 105, 0.45);
    }

    /* Methodology Cards */
    .plan-method-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
      margin-top: 6px;
    }
    .plan-method-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    .plan-method-card:hover {
      border-color: #059669;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
    }
    .plan-method-card.active {
      border-color: #059669;
      background: #ecfdf5;
      box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
    }
    .plan-method-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 6px;
      background: #059669;
      color: #ffffff;
      margin-bottom: 6px;
    }
    .plan-method-title {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 4px;
    }
    .plan-method-desc {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.45;
    }
    .plan-badge-methodology {
      background: rgba(255, 255, 255, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.4);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12.5px;
      font-weight: 800;
      color: #fef08a;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Active Plan View */
    .plan-hero-banner {
      background: linear-gradient(135deg, #064e3b 0%, #065f46 60%, #047857 100%);
      border-radius: 18px;
      padding: 24px;
      color: #ffffff;
      margin-bottom: 22px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 25px -5px rgba(6, 78, 59, 0.4);
    }
    .plan-hero-banner::after {
      content: '🎯';
      position: absolute;
      right: 20px;
      bottom: -15px;
      font-size: 120px;
      opacity: 0.12;
      pointer-events: none;
    }
    .plan-hero-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .plan-hero-dist-sub {
      font-size: 26px;
      font-weight: 900;
      letter-spacing: -0.5px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .plan-badge-countdown {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.35);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 800;
      color: #a7f3d0;
    }
    .plan-hero-meta-row {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      font-size: 13px;
      color: #d1fae5;
    }
    .plan-hero-meta-row strong {
      color: #ffffff;
    }
    .plan-progress-container {
      margin-top: 14px;
    }
    .plan-progress-header {
      display: flex;
      justify-content: space-between;
      font-size: 12.5px;
      font-weight: 700;
      color: #d1fae5;
      margin-bottom: 6px;
    }
    .plan-progress-bar-bg {
      height: 10px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      overflow: hidden;
    }
    .plan-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
      border-radius: 10px;
      transition: width 0.5s ease;
      box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
    }

    /* 1000-Point Readiness & Mastery Panel */
    .plan-readiness-panel {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 22px;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    }
    .plan-readiness-head {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 18px;
      border-bottom: 1px dashed #e2e8f0;
    }
    .plan-score-badge-wrap {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 20px;
      text-align: center;
      min-width: 150px;
      flex: 0 0 auto;
    }
    .plan-score-num {
      font-size: 38px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -1px;
    }
    .plan-score-denom {
      font-size: 10px;
      font-weight: 800;
      color: #64748b;
      margin-top: 4px;
      letter-spacing: 0.5px;
    }
    .plan-score-tier {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 20px;
      margin-top: 6px;
    }
    .plan-score-desc-col {
      flex: 1 1 300px;
    }
    .plan-score-title {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.2px;
      margin-bottom: 4px;
    }
    .plan-score-advice {
      font-size: 13px;
      color: #334155;
      line-height: 1.45;
      margin-bottom: 10px;
    }
    .plan-score-breakdown-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 11.5px;
      color: #64748b;
    }
    .plan-score-breakdown-row strong {
      color: #0f172a;
    }

    /* Phase Gates */
    .plan-gates-section-title {
      font-size: 11px;
      font-weight: 800;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 16px;
      margin-bottom: 12px;
    }
    .plan-gates-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
    }
    .plan-gate-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      transition: all 0.2s ease;
    }
    .plan-gate-card.gate-unlocked {
      background: #f0fdf4;
      border-color: #86efac;
    }
    .plan-gate-card.gate-active {
      background: #eff6ff;
      border-color: #93c5fd;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    }
    .plan-gate-card.gate-warning {
      background: #fffbeb;
      border-color: #fde68a;
    }
    .plan-gate-card.gate-locked {
      opacity: 0.65;
    }
    .plan-gate-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .plan-gate-badge {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
    }
    .plan-gate-card.gate-unlocked .plan-gate-badge {
      background: #dcfce7;
      color: #166534;
      border-color: #86efac;
    }
    .plan-gate-card.gate-active .plan-gate-badge {
      background: #dbeafe;
      color: #1e40af;
      border-color: #93c5fd;
    }
    .plan-gate-score {
      font-size: 11px;
      color: #64748b;
    }
    .plan-gate-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 4px;
    }
    .plan-gate-desc {
      font-size: 11px;
      color: #64748b;
      line-height: 1.4;
    }

    /* Core Spine Workout Pills */
    .plan-wo-spine-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #fffbeb;
      color: #b45309;
      border: 1px solid #fde68a;
      font-size: 9.5px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 6px;
      letter-spacing: 0.3px;
      margin-top: 4px;
    }
    .plan-wo-card.wo-is-spine {
      border-left: 4px solid #f59e0b !important;
    }

    /* Target Paces Strip (5 Zones) */
    .plan-paces-deck {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      margin-bottom: 22px;
    }
    .plan-pace-tile {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      text-align: center;
    }
    .plan-pace-lbl {
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      margin-bottom: 4px;
      text-transform: uppercase;
    }
    .plan-pace-val {
      font-size: 15px;
      font-weight: 900;
      color: #0f172a;
    }
    .plan-pace-val.color-easy { color: #0284c7; }
    .plan-pace-val.color-target { color: #059669; }
    .plan-pace-val.color-threshold { color: #ea580c; }
    .plan-pace-val.color-interval { color: #dc2626; }

    /* Action bar */
    .plan-actions-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid #f1f5f9;
    }
    .plan-actions-left {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .btn-plan-tool {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }
    .btn-plan-tool:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .btn-plan-tool.btn-reduce-load {
      background: #fef2f2;
      border-color: #fca5a5;
      color: #b91c1c;
    }
    .btn-plan-tool.btn-reduce-load:hover {
      background: #fee2e2;
    }
    .btn-plan-tool.btn-export-plan-excel {
      background: #f0fdf4;
      border-color: #86efac;
      color: #15803d;
      font-weight: 800;
    }
    .btn-plan-tool.btn-export-plan-excel:hover {
      background: #dcfce7;
      border-color: #22c55e;
      color: #166534;
    }

    .btn-hero-export-excel {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      color: #15803d;
      border: 1.5px solid #86efac;
      padding: 7px 15px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .btn-hero-export-excel:hover {
      background: #f0fdf4;
      border-color: #22c55e;
      color: #166534;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    }

    /* Weeks Navigation Tabs */
    .plan-weeks-strip {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 10px;
      margin-bottom: 18px;
    }
    .plan-week-pill {
      flex: 0 0 auto;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 14px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      min-width: 90px;
    }
    .plan-week-pill:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
    }
    .plan-week-pill.active {
      border-color: #059669;
      background: #ecfdf5;
      box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
    }
    .plan-week-num {
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
    }
    .plan-week-pill.active .plan-week-num {
      color: #059669;
    }
    .plan-week-phase-badge {
      font-size: 10px;
      font-weight: 800;
      border-radius: 4px;
      padding: 1px 5px;
      display: inline-block;
      margin-top: 3px;
    }
    .badge-phase-base { background: #e0f2fe; color: #0284c7; }
    .badge-phase-build { background: #fef3c7; color: #b45309; }
    .badge-phase-peak { background: #fee2e2; color: #b91c1c; }
    .badge-phase-taper { background: #ecfdf5; color: #047857; }
    .badge-phase-recovery { background: #f0fdf4; color: #16a34a; border: 1px dashed #86efac; }

    /* Workouts list for selected week */
    .plan-week-summary-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 18px;
      margin-bottom: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .plan-week-summary-title {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
    }
    .plan-week-summary-km {
      font-size: 13.5px;
      color: #475569;
    }
    .plan-week-summary-km strong {
      color: #059669;
    }

    .plan-workouts-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .plan-wo-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 16px;
      display: grid;
      grid-template-columns: 140px 1fr auto;
      align-items: center;
      gap: 16px;
      transition: all 0.2s ease;
    }
    .plan-wo-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    .plan-wo-card.status-completed {
      border-left: 5px solid #10b981;
      background: #fafffc;
    }
    .plan-wo-card.status-partial {
      border-left: 5px solid #f59e0b;
      background: #fffdf5;
    }
    .plan-wo-card.status-missed {
      border-left: 5px solid #ef4444;
      background: #fffafa;
    }
    .plan-wo-card.status-rest {
      border-left: 5px solid #94a3b8;
      background: #f8fafc;
      opacity: 0.85;
    }

    .plan-wo-day-col {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .plan-wo-day-name {
      font-size: 14px;
      font-weight: 900;
      color: #0f172a;
    }
    .plan-wo-day-date {
      font-size: 11.5px;
      color: #64748b;
    }
    .plan-wo-type-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      margin-top: 4px;
      width: fit-content;
    }
    .tag-type-easy { background: #e0f2fe; color: #0284c7; }
    .tag-type-quality { background: #fee2e2; color: #b91c1c; }
    .tag-type-longrun { background: #fef3c7; color: #b45309; }
    .tag-type-rest { background: #f1f5f9; color: #64748b; }

    .plan-wo-info-col {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .plan-wo-title {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
    }
    .plan-wo-desc {
      font-size: 12.5px;
      color: #475569;
      line-height: 1.5;
    }
    .plan-wo-actual-box {
      margin-top: 6px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      color: #065f46;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .plan-wo-target-col {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      text-align: right;
    }
    .plan-wo-target-km {
      font-size: 16px;
      font-weight: 900;
      color: #059669;
    }
    .plan-wo-target-pace {
      font-size: 12px;
      font-weight: 700;
      color: #ea580c;
    }
    .plan-wo-badge-status {
      font-size: 11px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .badge-wo-done { background: #d1fae5; color: #065f46; }
    .badge-wo-part { background: #fef3c7; color: #92400e; }
    .badge-wo-miss { background: #fee2e2; color: #991b1b; }
    .badge-wo-pend { background: #e0f2fe; color: #075985; }
    .badge-wo-rest { background: #f1f5f9; color: #64748b; }
    .badge-wo-rest-ok { background: #ccfbf1; color: #0f766e; border: 1px solid #99f6e4; }
    .badge-wo-rest-warn { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
    .badge-wo-rest-done { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

    /* Coach Callout Feedback */
    .plan-wo-coach-callout {
      margin-top: 9px;
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.5;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .coach-callout-icon {
      font-size: 14px;
      line-height: 1.2;
      flex-shrink: 0;
    }
    .coach-callout-content {
      flex: 1;
    }
    .coach-callout-title {
      font-weight: 800;
      margin-right: 4px;
    }
    .callout-positive, .callout-success {
      background: #ecfdf5;
      color: #065f46;
      border-left: 3px solid #10b981;
    }
    .callout-warning {
      background: #fffbeb;
      color: #92400e;
      border-left: 3px solid #f59e0b;
    }
    .callout-danger {
      background: #fef2f2;
      color: #991b1b;
      border-left: 3px solid #ef4444;
    }
    .callout-info, .callout-rest {
      background: #f8fafc;
      color: #334155;
      border-left: 3px solid #64748b;
    }

    /* Splits & Pacing Section */
    .plan-wo-splits-section {
      margin-top: 8px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      background: #f8fafc;
    }
    .plan-wo-splits-header {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .plan-pacing-pill {
      font-size: 11px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .pill-negative {
      background: #ccfbf1;
      color: #0f766e;
      border: 1px solid #99f6e4;
    }
    .pill-even {
      background: #d1fae5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }
    .pill-positive {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }
    .btn-toggle-splits {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 11.5px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-toggle-splits:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
    }
    .btn-wo-full-analytics {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 11.5px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      margin-left: auto;
      transition: all 0.15s ease;
    }
    .btn-wo-full-analytics:hover {
      background: #dbeafe;
      border-color: #93c5fd;
    }
    .plan-wo-splits-table-wrap {
      margin-top: 8px;
      border-top: 1px dashed #cbd5e1;
      padding-top: 8px;
      max-height: 260px;
      overflow-y: auto;
    }
    .splits-summary-tip {
      font-size: 11.5px;
      color: #475569;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 5px 8px;
      margin-bottom: 6px;
    }
    .plan-splits-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11.5px;
    }
    .plan-splits-table th {
      text-align: left;
      padding: 4px 6px;
      color: #64748b;
      font-weight: 700;
      border-bottom: 1px solid #e2e8f0;
    }
    .plan-splits-table td {
      padding: 5px 6px;
      border-bottom: 1px solid #f1f5f9;
      color: #1e293b;
    }
    .plan-splits-table tr:last-child td {
      border-bottom: none;
    }
    .plan-splits-table tr.split-fastest {
      background: rgba(16, 185, 129, 0.08);
    }
    .plan-splits-table tr.split-slowest {
      background: rgba(249, 115, 22, 0.08);
    }
    .badge-split-fast {
      font-size: 9.5px;
      font-weight: 800;
      background: #d1fae5;
      color: #065f46;
      padding: 1px 5px;
      border-radius: 4px;
      margin-left: 4px;
    }
    .badge-split-slow {
      font-size: 9.5px;
      font-weight: 800;
      background: #ffedd5;
      color: #c2410c;
      padding: 1px 5px;
      border-radius: 4px;
      margin-left: 4px;
    }

    @media (max-width: 768px) {
      .plan-wo-card {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .plan-wo-target-col {
        align-items: flex-start;
        text-align: left;
        flex-direction: row;
        flex-wrap: wrap;
      }
    }

    /* ═══ Bảng Phong Thần Fine & Member Badges ═══ */
    .badge-fine-amount {
      font-family: var(--font-heading, sans-serif);
      font-size: 12px;
      font-weight: 900;
      padding: 3px 10px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid rgba(239, 68, 68, 0.3);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .badge-fine-amount:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
    }
    .badge-fine-ok {
      background: #dcfce7;
      color: #15803d;
      font-weight: 800;
      font-size: 11px;
      padding: 2.5px 8px;
      border-radius: 9999px;
      border: 1px solid #bbf7d0;
    }
    .badge-fine-free {
      background: #e0f2fe;
      color: #0369a1;
      font-weight: 800;
      font-size: 11px;
      padding: 2.5px 8px;
      border-radius: 9999px;
      border: 1px solid #bae6fd;
    }
    .badge-fine-paid {
      background: #dcfce7;
      color: #15803d;
      font-weight: 800;
      font-size: 9.5px;
      padding: 1.5px 6px;
      border-radius: 4px;
      border: 1px solid #bbf7d0;
      display: inline-block;
    }
    .badge-fine-unpaid {
      background: #fee2e2;
      color: #b91c1c;
      font-weight: 800;
      font-size: 9.5px;
      padding: 1.5px 6px;
      border-radius: 4px;
      border: 1px solid #fecaca;
      display: inline-block;
    }
    .phongthan-member-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid #f1f5f9;
      border-radius: 8px;
      transition: background 0.15s;
    }
    .phongthan-member-row:hover {
      background: #f8fafc;
    }

    /* ══════════════════════════════════════════════════════════════
       KHUNG RIÊNG BẢNG PHONG THẦN (CHỚP NHÁY NỔI BẬT)
       ══════════════════════════════════════════════════════════════ */
    .phongthan-spotlight-brick {
      background: linear-gradient(145deg, #0d2227 0%, #171004 45%, #071e22 100%) !important;
      border: 2px solid #f59e0b !important;
      border-radius: var(--radius-lg);
      padding: 18px 24px;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), 0 0 25px rgba(245, 158, 11, 0.28) !important;
      margin-bottom: 24px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      animation: ptGlowPulse 4s infinite ease-in-out;
    }
    .phongthan-spotlight-brick:hover {
      border-color: #fde047;
      transform: translateY(-3px) scale(1.006);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65), 0 0 40px rgba(245, 158, 11, 0.55);
    }
    .pt-spotlight-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .pt-spotlight-left {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .pt-spotlight-right {
      flex-shrink: 0;
    }
    .pt-spotlight-right .btn-open-phongthan-arena {
      width: auto;
      min-width: 250px;
      padding: 13px 22px;
    }
    @keyframes ptGlowPulse {
      0%, 100% {
        border-color: #f59e0b;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), 0 0 22px rgba(245, 158, 11, 0.25);
      }
      50% {
        border-color: #fbbf24;
        box-shadow: 0 14px 42px rgba(0, 0, 0, 0.65), 0 0 36px rgba(245, 158, 11, 0.45);
      }
    }
    .pt-pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ef4444;
      display: inline-block;
      box-shadow: 0 0 8px #ef4444;
      animation: ptDotBlink 1.4s infinite;
      margin-right: 2px;
      flex-shrink: 0;
    }
    @keyframes ptDotBlink {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.3; transform: scale(0.8); }
    }
    .pt-badge-pill {
      font-size: 10.5px;
      font-weight: 900;
      color: #fef08a;
      background: rgba(245, 158, 11, 0.2);
      border: 1.5px solid rgba(245, 158, 11, 0.6);
      padding: 4px 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      white-space: nowrap;
      width: fit-content;
    }
    .pt-card-title-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 4px 0 0 0;
    }
    .pt-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f97316, #eab308);
      color: #07252a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 900;
      box-shadow: 0 4px 16px rgba(249, 115, 22, 0.5);
      flex-shrink: 0;
    }
    .pt-card-title-col {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    /* Chớp nháy nổi bật neon strobe */
    .pt-card-title {
      font-size: 19px;
      font-weight: 900;
      font-family: var(--font-heading);
      letter-spacing: 0.5px;
      line-height: 1.25;
      white-space: nowrap;
      animation: ptTitleStrobe 1.6s infinite ease-in-out;
    }
    @keyframes ptTitleStrobe {
      0%, 100% {
        color: #fef08a;
        text-shadow: 0 0 10px rgba(250, 204, 21, 0.9), 0 0 22px rgba(245, 158, 11, 0.7);
        opacity: 1;
      }
      45% {
        color: #ffffff;
        text-shadow: 0 0 18px #fde047, 0 0 32px #f97316, 0 0 48px #ef4444;
        opacity: 1;
      }
      50% {
        color: #fef08a;
        text-shadow: 0 0 5px rgba(250, 204, 21, 0.4);
        opacity: 0.7;
      }
      55% {
        color: #ffffff;
        text-shadow: 0 0 22px #fde047, 0 0 38px #f97316, 0 0 55px #ef4444;
        opacity: 1;
      }
      60% {
        color: #fef08a;
        text-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
        opacity: 0.75;
      }
      75% {
        color: #ffffff;
        text-shadow: 0 0 16px #fde047, 0 0 28px #f97316;
        opacity: 1;
      }
    }
    .pt-card-slogan {
      font-size: 12px;
      font-weight: 900;
      color: #f97316;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      white-space: nowrap;
      margin-top: 3px;
    }
    /* Super Prominent Single-Line CTA Button */
    .btn-open-phongthan-arena {
      width: 100%;
      background: linear-gradient(135deg, #f97316 0%, #f59e0b 50%, #eab308 100%);
      color: #07252a;
      border: 1px solid rgba(255, 255, 255, 0.35);
      font-weight: 900;
      font-size: 13.5px;
      padding: 13px 18px;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
      box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45), 0 0 15px rgba(245, 158, 11, 0.3);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      letter-spacing: 0.4px;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .btn-open-phongthan-arena:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 8px 26px rgba(249, 115, 22, 0.65), 0 0 22px rgba(251, 191, 36, 0.5);
      background: linear-gradient(135deg, #ea580c 0%, #f59e0b 50%, #fde047 100%);
    }
    @media (max-width: 768px) {
      .phongthan-spotlight-brick {
        padding: 15px 16px;
        margin-bottom: 16px;
      }
      .pt-spotlight-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      .pt-spotlight-right .btn-open-phongthan-arena {
        width: 100%;
        min-width: 0;
        font-size: 12.5px;
        padding: 11px 14px;
      }
      .pt-card-title {
        font-size: 16.5px;
      }
      .pt-card-slogan {
        font-size: 11px;
      }
    }

    /* ══════════════════════════════════════════════════════════════
       GIAO DIỆN CHUYÊN BIỆT: BẢNG PHONG THẦN & KẾT QUẢ THỐNG KÊ
       ══════════════════════════════════════════════════════════════ */
    .phongthan-arena-overlay {
      position: fixed !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
      background: rgba(4, 21, 25, 0.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: 99990 !important;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .phongthan-arena-overlay.active {
      display: flex !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    .phongthan-arena-modal {
      background: #07252a;
      border: 1.5px solid rgba(245, 166, 35, 0.5);
      border-radius: 20px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(245, 158, 11, 0.2);
      width: 100%;
      max-width: 1320px;
      height: 94vh;
      max-height: 94vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      margin: auto;
    }
    .phongthan-arena-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      background: linear-gradient(135deg, #0b383f, #07252a);
      border-bottom: 1.5px solid rgba(245, 166, 35, 0.35);
      flex-shrink: 0;
    }
    .arena-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .arena-logo-box {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #07252a;
      font-size: 20px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
      flex-shrink: 0;
    }
    .arena-title {
      font-size: 16px;
      font-weight: 900;
      color: #fcd34d;
      font-family: var(--font-heading);
      letter-spacing: 0.4px;
    }
    .arena-subtitle {
      font-size: 11.5px;
      color: #9cb5b8;
      margin-top: 2px;
    }
    .btn-close-desktop {
      display: inline;
    }
    .btn-close-mobile {
      display: none;
    }
    .btn-arena-close {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #f8fafc;
      font-size: 12px;
      font-weight: 800;
      padding: 7px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .btn-arena-close:hover {
      background: #ef4444;
      border-color: #ef4444;
      color: #ffffff;
      transform: scale(1.03);
    }
    .arena-tabs-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 18px;
      background: rgba(15, 23, 42, 0.85);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
      flex-wrap: wrap;
      gap: 10px;
    }
    .arena-tabs-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .arena-tab-pill {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #cbd5e1;
      font-size: 11.5px;
      font-weight: 800;
      padding: 7px 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .arena-tab-pill:hover {
      background: rgba(255, 255, 255, 0.14);
      color: #ffffff;
    }
    .arena-tab-pill.active {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #07252a;
      border-color: #f59e0b;
      box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
    }
    .arena-tabs-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .arena-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px;
      background: #07252a;
    }
    .arena-modal-body::-webkit-scrollbar {
      width: 8px;
    }
    .arena-modal-body::-webkit-scrollbar-track {
      background: #0b2f36;
    }
    .arena-modal-body::-webkit-scrollbar-thumb {
      background: #d97706;
      border-radius: 4px;
    }
    @media (max-width: 768px) {
      .btn-close-desktop {
        display: none !important;
      }
      .btn-close-mobile {
        display: inline !important;
      }
      .phongthan-arena-overlay {
        padding: 0 !important;
        align-items: flex-start !important;
      }
      .phongthan-arena-modal {
        max-height: 100dvh !important;
        height: 100dvh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        border: none !important;
      }
      .phongthan-arena-header {
        padding: 8px 10px !important;
        background: #07252a !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
      }
      .arena-logo-box {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
        border-radius: 7px !important;
      }
      .arena-header-left {
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 !important;
      }
      .arena-header-text {
        min-width: 0 !important;
        flex: 1 !important;
      }
      .arena-title {
        font-size: 12px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
      }
      .arena-subtitle {
        display: none !important; /* Hide subtitle on mobile to save vertical space */
      }
      .btn-arena-close {
        padding: 4px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
      }
      .arena-tabs-bar {
        padding: 6px 8px !important;
        gap: 6px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: rgba(15, 23, 42, 0.95) !important;
      }
      .arena-tabs-left {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
      }
      .arena-tab-pill {
        padding: 4px 8px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
      }
      .arena-tabs-right {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
      }
      .btn-excel-pill {
        padding: 4px 8px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
      }
      .search-filter-box {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
      }
      .search-filter-input {
        font-size: 11px !important;
        padding: 4px 8px 4px 22px !important;
        height: 28px !important;
      }
      .arena-modal-body {
        padding: 6px 6px calc(30px + env(safe-area-inset-bottom, 15px)) 6px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }

      /* Panel inside Arena on Mobile */
      .vetmo-panel {
        padding: 8px 8px !important;
        border-radius: 10px !important;
      }
      .vetmo-slogan {
        gap: 6px !important;
      }
      .vetmo-icon-fire {
        width: 26px !important;
        height: 26px !important;
        font-size: 13px !important;
      }
      .vetmo-slogan-title {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
      }
      .vetmo-slogan-sub {
        display: none !important; /* Hide long slogan on mobile portrait to reduce clutter */
      }
      .phongthan-season-banner {
        font-size: 10.5px !important;
        padding: 2px 6px !important;
        margin-top: 4px !important;
      }

      /* 2-Column Action Buttons Grid on Mobile */
      .vetmo-action-buttons-group {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
        width: 100% !important;
        margin-top: 6px !important;
      }
      .vetmo-action-buttons-group button {
        width: 100% !important;
        padding: 6px 6px !important;
        font-size: 10.5px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 6px !important;
      }

      /* Subtabs: 3 equal columns */
      .vetmo-subtabs-group {
        width: 100% !important;
        display: flex !important;
        gap: 3px !important;
      }
      .vetmo-subtab-btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 5px 3px !important;
        font-size: 9.5px !important;
        white-space: nowrap !important;
      }

      /* Mode Switcher */
      .vetmo-mode-bar {
        padding: 6px 8px !important;
        margin-top: 8px !important;
        gap: 6px !important;
      }
      .lbl-mode-text {
        display: none !important; /* Save space on mobile */
      }
      .pt-range-presets-scroll {
        display: flex !important;
        gap: 4px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
      }
      .pt-range-presets-scroll::-webkit-scrollbar {
        display: none !important;
      }
      .pt-range-presets-scroll .tab-pill {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        padding: 3px 6px !important;
      }
      .pt-range-action-btns {
        display: flex !important;
        gap: 5px !important;
        width: 100% !important;
      }
      .pt-range-action-btns button {
        flex: 1 !important;
        padding: 5px 6px !important;
        font-size: 10.5px !important;
        justify-content: center !important;
        text-align: center !important;
      }

      /* Summary Stats: Compact 3-Column Grid */
      .vetmo-stats-cards {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        margin-top: 8px !important;
      }
      .vetmo-stat-card {
        padding: 5px 3px !important;
        border-radius: 6px !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.05) !important;
      }
      .vetmo-stat-lbl {
        font-size: 7px !important;
        line-height: 1.1 !important;
        margin-bottom: 1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
      .vetmo-stat-val {
        font-size: 12px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      /* Live Warning Strip */
      .live-strip {
        margin: 6px 0 !important;
        padding: 4px 6px !important;
        border-radius: 6px !important;
      }
      .live-tag-alert {
        font-size: 8.5px !important;
        padding: 1.5px 5px !important;
      }
      .live-marquee-content {
        font-size: 10.5px !important;
      }

      /* Weekly Mobile Card */
      .vetmo-card-mob {
        padding: 8px 8px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
        margin-bottom: 6px !important;
        gap: 5px !important;
      }
      .vm-mob-rank {
        font-size: 12px !important;
        font-weight: 900 !important;
        width: 20px !important;
        text-align: center !important;
      }
      .vm-mob-avatar {
        width: 32px !important;
        height: 32px !important;
      }
      .vm-mob-name {
        font-size: 11.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
      }
      .vm-mob-club {
        font-size: 8.5px !important;
        color: #64748b !important;
      }
      .vm-mob-badges .badge-status {
        font-size: 8px !important;
        padding: 1.5px 4px !important;
      }
      .vm-mob-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3px !important;
        margin: 5px 0 !important;
      }
      .vm-mob-stat-box {
        padding: 3px 1px !important;
        border-radius: 5px !important;
        text-align: center !important;
        min-width: 0 !important;
      }
      .vm-mob-stat-lbl {
        font-size: 7px !important;
        font-weight: 800 !important;
        color: #64748b !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
      .vm-mob-stat-val {
        font-size: 10.5px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      /* Range Mobile Card */
      .mobile-runner-card {
        padding: 8px 8px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
        margin-bottom: 6px !important;
      }
      .mobile-runner-name {
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
      }
      .mobile-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
        margin-top: 5px !important;
      }
      .mobile-stat-item {
        padding: 3px 2px !important;
        border-radius: 5px !important;
        text-align: center !important;
      }
      .mobile-stat-item .m-val {
        font-size: 10.5px !important;
        font-weight: 900 !important;
      }
      .mobile-stat-item .m-lbl {
        font-size: 7px !important;
      }

      .phongthan-float-btn {
        position: fixed !important;
        left: 12px !important;
        right: auto !important;
        bottom: 14px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-width: 1.5px !important;
        gap: 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        z-index: 9999 !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(245, 158, 11, 0.4) !important;
      }
      .phongthan-float-btn .pt-float-icon {
        font-size: 12px !important;
      }
      .phongthan-float-btn .pt-float-text {
        display: inline !important;
        font-weight: 800 !important;
      }
    }

    /* ═══ Nút Đăng Ký Vào Phong Thần & Modal Phong Thần ═══ */
    .btn-join-phongthan-gold {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: #ffffff !important;
      font-weight: 800;
      border: 1px solid #34d399;
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .btn-join-phongthan-gold:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
      background: linear-gradient(135deg, #059669 0%, #047857 100%);
    }

    .btn-spotlight-join-pt {
      background: rgba(245, 158, 11, 0.15);
      color: #fcd34d !important;
      border: 1.5px solid #f59e0b;
      padding: 9px 16px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .btn-spotlight-join-pt:hover {
      background: #f59e0b;
      color: #07252a !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
    }

    .btn-pt-join-tab {
      background: #f1f5f9;
      color: #475569;
      border: 1.5px solid #cbd5e1;
      padding: 10px 14px;
      border-radius: 10px;
      font-weight: 800;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.15s ease;
    }
    .btn-pt-join-tab.active {
      background: #0b383f;
      color: #fcd34d;
      border-color: #f59e0b;
      box-shadow: 0 3px 10px rgba(11, 56, 63, 0.2);
    }

    .pt-chip-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      font-weight: 800;
      font-size: 12.5px;
      padding: 6px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .pt-chip-btn:hover {
      border-color: #f59e0b;
      color: #b45309;
    }
    .pt-chip-btn.active {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #92400e;
      font-weight: 900;
    }

    @media (max-width: 600px) {
      .btn-join-phongthan-gold {
        padding: 6px 10px !important;
        font-size: 11px !important;
      }
      .btn-spotlight-join-pt {
        padding: 7px 12px !important;
        font-size: 11.5px !important;
      }
    }

    /* ══════════════════════════════════════════════════════════════════
       THỬ THÁCH RACE & KÈO TREO THƯỞNG — RESPONSIVE DESKTOP & MOBILE
       ══════════════════════════════════════════════════════════════════ */
    .race-challenge-spotlight-brick .pt-spotlight-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    .race-challenge-spotlight-brick .pt-spotlight-left {
      flex: 1 1 320px;
      min-width: 0;
    }
    .race-challenge-spotlight-brick .pt-card-title-col {
      min-width: 0;
    }
    .race-challenge-spotlight-brick .pt-card-title {
      white-space: normal;
      line-height: 1.2;
      word-break: break-word;
    }
    .race-challenge-spotlight-brick .pt-card-slogan {
      white-space: normal !important;
      line-height: 1.35;
      word-break: break-word;
      margin-top: 3px;
    }
    .race-challenge-spotlight-brick .pt-spotlight-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      flex: 0 1 auto;
      max-width: 100%;
    }
    .race-challenge-spotlight-brick .pt-spotlight-right .btn-open-phongthan-arena {
      min-width: 0 !important;
      width: auto !important;
      padding: 10px 16px !important;
      font-size: 12.5px !important;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .race-challenge-spotlight-brick .pt-spotlight-right .btn-spotlight-join-pt {
      min-width: 0 !important;
      width: auto !important;
      padding: 9px 14px !important;
      font-size: 12px !important;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Race Challenge Table Desktop — fit 100% width with zero horizontal scroll */
    .rc-bxh-table {
      white-space: normal !important;
      width: 100% !important;
      min-width: 0 !important;
      border-collapse: collapse;
      table-layout: auto;
    }
    .rc-bxh-table thead th {
      white-space: normal !important;
      line-height: 1.2;
      padding: 7px 6px !important;
      font-size: 10.5px !important;
      vertical-align: middle;
    }
    .rc-bxh-table tbody td {
      white-space: normal !important;
      word-break: break-word;
      vertical-align: middle;
      padding: 7px 6px !important;
      font-size: 12px;
    }

    /* Compact Admin Cell inside PC Table */
    .rc-admin-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }
    .rc-lock-tag {
      font-size: 9.5px;
      font-weight: 800;
      color: #475569;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 1.5px 5px;
      border-radius: 4px;
      white-space: nowrap;
      line-height: 1.15;
    }
    .rc-admin-btn {
      background: #fffbeb;
      color: #b45309;
      border: 1px solid #fcd34d;
      border-radius: 4px;
      padding: 2.5px 6px;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
      line-height: 1.15;
      transition: all 0.15s;
    }
    .rc-admin-btn:hover {
      background: #fef3c7;
      border-color: #f59e0b;
    }

    /* Compact Stats Cards for Race Challenge */
    .rc-compact-stats-cards {
      gap: 8px !important;
    }
    .rc-compact-stats-cards .vetmo-stat-card {
      padding: 6px 8px !important;
      border-radius: 8px !important;
    }
    .rc-compact-stats-cards .vetmo-stat-lbl {
      font-size: 9.5px !important;
      margin-bottom: 2px !important;
    }
    .rc-compact-stats-cards .vetmo-stat-val {
      font-size: 15px !important;
      line-height: 1.15 !important;
    }

    /* ── KHU VỰC 1: HỘP CHỨC NĂNG ĐĂNG KÝ MỚI / GHI DANH ── */
    .rc-register-zone {
      margin-top: 8px;
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(15, 23, 42, 0.75) 100%);
      border: 1.5px dashed rgba(251, 191, 36, 0.6);
      border-radius: 11px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .rc-register-zone-label {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      font-size: 12px;
      font-weight: 900;
      color: #fef08a;
    }
    .rc-zone-step-badge {
      background: linear-gradient(135deg, #f59e0b, #ea580c);
      color: #ffffff;
      font-size: 10px;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 5px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
    }
    .rc-zone-step-badge.rc-badge-blue {
      background: linear-gradient(135deg, #0284c7, #2563eb);
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
    }
    .rc-register-zone-hint {
      font-size: 10.5px;
      font-weight: 700;
      color: #fde68a;
      opacity: 0.9;
    }
    .rc-register-btn-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }
    .rc-btn-create {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 11px;
      border-radius: 9px;
      cursor: pointer;
      text-align: left;
      transition: all 0.18s ease;
      color: #ffffff;
    }
    .rc-btn-create:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
    }
    .rc-btn-create-challenge {
      background: linear-gradient(135deg, #059669 0%, #047857 100%);
      border: 1.5px solid #6ee7b7;
      box-shadow: 0 3px 10px rgba(16, 185, 129, 0.28);
    }
    .rc-btn-create-bounty {
      background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
      border: 1.5px solid #fda4af;
      box-shadow: 0 3px 10px rgba(225, 29, 72, 0.28);
    }
    .rc-btn-create-h2h {
      background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
      border: 1.5px solid #c4b5fd;
      box-shadow: 0 3px 10px rgba(124, 58, 237, 0.28);
    }
    .rc-plus-circle {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #ffffff;
      color: #0f172a;
      font-size: 16px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      line-height: 1;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    .rc-btn-create-challenge .rc-plus-circle { color: #047857; }
    .rc-btn-create-bounty .rc-plus-circle { color: #be123c; }
    .rc-btn-create-h2h .rc-plus-circle { color: #5b21b6; }
    .rc-btn-create-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .rc-btn-create-title {
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
      color: #ffffff;
    }
    .rc-btn-create-sub {
      font-size: 10px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.88);
      line-height: 1.2;
      margin-top: 1px;
    }

    /* ── KHU VỰC 2: KHUNG BẢNG TỔNG HỢP DỮ LIỆU (SHEET TABS) ── */
    .rc-summary-board-zone {
      margin-top: 10px;
    }
    .rc-summary-board-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .rc-summary-board-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 900;
      color: #7dd3fc;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .rc-sheet-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: -2px;
      position: relative;
      z-index: 2;
    }
    .rc-sheet-tabs .rc-subtab-btn {
      padding: 8px 12px;
      border-radius: 10px 10px 0 0;
      border: 1.5px solid rgba(148, 163, 184, 0.35);
      border-bottom: none;
      background: rgba(15, 23, 42, 0.85);
      color: #94a3b8;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      text-align: left;
      transition: all 0.18s ease;
    }
    .rc-sheet-tabs .rc-subtab-btn:hover:not(.active) {
      background: rgba(30, 41, 59, 0.95);
      color: #e2e8f0;
    }
    .rc-sheet-tabs .rc-subtab-btn.active {
      background: #f8fafc !important;
      color: #0f172a !important;
      border-color: #cbd5e1;
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.18);
    }
    #rcSubTabBtnChallenge.active {
      border-top: 4px solid #10b981 !important;
    }
    #rcSubTabBtnBounty.active {
      border-top: 4px solid #e11d48 !important;
    }
    #rcSubTabBtnH2H.active {
      border-top: 4px solid #7c3aed !important;
    }
    .rc-sheet-icon {
      font-size: 15px;
      flex-shrink: 0;
    }
    .rc-sheet-tab-text {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }
    .rc-sheet-tabs .rc-subtab-label {
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
      color: inherit;
    }
    #rcSubTabBtnChallenge.active .rc-subtab-label { color: #047857; }
    #rcSubTabBtnBounty.active .rc-subtab-label { color: #be123c; }
    #rcSubTabBtnH2H.active .rc-subtab-label { color: #5b21b6; }
    .rc-sheet-tabs .rc-subtab-desc {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.2;
      margin-top: 1px;
    }
    .rc-sheet-count-badge {
      background: rgba(255, 255, 255, 0.12);
      color: #e2e8f0;
      padding: 2px 8px;
      border-radius: 99px;
      font-size: 10.5px;
      font-weight: 900;
      white-space: nowrap;
      flex-shrink: 0;
    }
    #rcSubTabBtnChallenge.active .rc-sheet-count-badge {
      background: #d1fae5;
      color: #065f46;
      border: 1px solid #6ee7b7;
    }
    #rcSubTabBtnBounty.active .rc-sheet-count-badge {
      background: #ffe4e6;
      color: #9f1239;
      border: 1px solid #fda4af;
    }
    #rcSubTabBtnH2H.active .rc-sheet-count-badge {
      background: #ede9fe;
      color: #5b21b6;
      border: 1px solid #c4b5fd;
    }

    /* Unified Table Frame connected under Sheet Tabs */
    .rc-table-frame {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 0 0 10px 10px;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    .rc-table-toolbar {
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      padding: 7px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .rc-contextual-add-btn {
      padding: 5px 11px;
      border-radius: 7px;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
      border: 1.5px solid #059669;
      background: #ecfdf5;
      color: #047857;
      transition: all 0.15s;
    }
    .rc-contextual-add-btn:hover {
      filter: brightness(0.96);
    }
    .rc-contextual-add-btn.rc-ctx-bounty {
      border-color: #e11d48;
      background: #fff1f2;
      color: #be123c;
    }
    .rc-contextual-add-btn.rc-ctx-h2h {
      border-color: #7c3aed;
      background: #f5f3ff;
      color: #5b21b6;
    }

    /* Responsive Form Grids inside Race Modals */
    .rc-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .rc-grid-2-asym {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 10px;
    }
    .rc-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .rc-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    /* Mobile Cards for Thử Thách Race */
    .rc-mob-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 11px;
      padding: 9px 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      color: #0f172a;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .rc-mob-card.rc-mob-passed {
      border-left: 4px solid #10b981;
    }
    .rc-mob-card.rc-mob-failed {
      border-left: 4px solid #ef4444;
    }
    .rc-mob-card.rc-mob-sandbag {
      border-left: 4px solid #f59e0b;
    }
    .rc-mob-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 6px;
    }
    .rc-mob-runner {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      flex: 1;
    }
    .rc-mob-runner-info {
      min-width: 0;
      flex: 1;
    }
    .rc-mob-runner-name {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.2;
      word-break: break-word;
    }
    .rc-mob-race-line {
      font-size: 10.5px;
      font-weight: 700;
      color: #0369a1;
      margin-top: 1px;
      line-height: 1.25;
      word-break: break-word;
    }
    .rc-mob-stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }
    .rc-mob-stats-grid-2x2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
    }
    .rc-mob-stat-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 7px;
      padding: 5px 5px;
      text-align: center;
      min-width: 0;
    }
    .rc-mob-stat-lbl {
      font-size: 8.5px;
      font-weight: 800;
      color: #64748b;
      text-transform: uppercase;
      margin-bottom: 1px;
    }
    .rc-mob-stat-val {
      font-family: var(--font-heading);
      font-size: 11.5px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.15;
      word-break: break-word;
    }
    .rc-mob-stat-sub {
      font-size: 9px;
      font-weight: 700;
      color: #475569;
      margin-top: 1px;
      line-height: 1.15;
      word-break: break-word;
    }
    .rc-mob-bounty-box {
      background: #fff1f2;
      border: 1px solid #fecdd3;
      border-radius: 7px;
      padding: 5px 8px;
      font-size: 11px;
      color: #1e293b;
      line-height: 1.35;
      word-break: break-word;
    }
    /* Vertical-Friendly H2H Mobile Cards */
    .rc-h2h-mob-card {
      gap: 5px;
    }
    .rc-h2h-fighter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      padding: 6px 8px;
      border-radius: 8px;
    }
    .rc-fighter-blue {
      background: linear-gradient(135deg, #eff6ff, #e0f2fe);
      border: 1.5px solid #93c5fd;
    }
    .rc-fighter-red {
      background: linear-gradient(135deg, #fff1f2, #ffe4e6);
      border: 1.5px solid #fda4af;
    }
    .rc-h2h-fighter-left {
      display: flex;
      align-items: center;
      gap: 7px;
      flex: 1;
      min-width: 0;
    }
    .rc-h2h-fighter-name {
      font-size: 12.5px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.2;
      word-break: break-word;
    }
    .rc-h2h-fighter-sub {
      font-size: 10px;
      font-weight: 700;
      color: #334155;
      margin-top: 1px;
      line-height: 1.2;
      word-break: break-word;
    }
    .rc-h2h-stake-pill {
      flex-shrink: 0;
      padding: 4px 8px;
      border-radius: 7px;
      text-align: right;
      min-width: 78px;
    }
    .rc-stake-blue {
      background: #ffffff;
      border: 1.5px solid #60a5fa;
      box-shadow: 0 2px 5px rgba(37, 99, 235, 0.12);
    }
    .rc-stake-red {
      background: #ffffff;
      border: 1.5px solid #fb7185;
      box-shadow: 0 2px 5px rgba(225, 29, 72, 0.12);
    }
    .rc-h2h-stake-lbl {
      font-size: 8px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.2px;
      color: #64748b;
    }
    .rc-h2h-stake-val {
      font-family: var(--font-heading);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.15;
      margin-top: 1px;
    }
    .rc-stake-blue .rc-h2h-stake-val {
      color: #1d4ed8;
    }
    .rc-stake-red .rc-h2h-stake-val {
      color: #be123c;
    }
    .rc-h2h-vs-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: -2px 0;
    }
    .rc-h2h-vs-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 1.5px 9px;
      border-radius: 999px;
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border: 1px solid #f59e0b;
      color: #92400e;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.3px;
    }
    .rc-h2h-mob-result-box {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 7px;
      padding: 5px 8px;
    }
    .rc-mob-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: wrap;
      padding-top: 4px;
      border-top: 1px dashed #e2e8f0;
    }

    @media (max-width: 768px) {
      .race-challenge-spotlight-brick .pt-spotlight-right {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px !important;
      }
      .race-challenge-spotlight-brick .pt-spotlight-right .btn-open-phongthan-arena {
        grid-column: 1 / -1;
        width: 100% !important;
        justify-content: center;
        padding: 8px 10px !important;
        font-size: 11.5px !important;
      }
      .race-challenge-spotlight-brick .pt-spotlight-right .btn-spotlight-join-pt {
        width: 100% !important;
        justify-content: center;
        padding: 7px 4px !important;
        font-size: 10px !important;
      }
      .rc-utility-btns {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 5px !important;
      }
      .rc-utility-btns button {
        width: 100%;
        justify-content: center;
        padding: 5px 6px !important;
        font-size: 10px !important;
      }
      .rc-register-zone {
        padding: 7px 8px !important;
        gap: 6px !important;
      }
      .rc-register-zone-hint {
        display: none !important;
      }
      .rc-register-btn-group {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
      }
      .rc-btn-create {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 6px 4px !important;
        gap: 3px !important;
      }
      .rc-plus-circle {
        width: 20px;
        height: 20px;
        font-size: 13px;
      }
      .rc-btn-create-title {
        font-size: 10px !important;
      }
      .rc-btn-create-sub {
        display: none !important;
      }
      .arena-tabs-left {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px !important;
      }
      .arena-tabs-left .arena-tab-pill {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 6px 6px !important;
        font-size: 10.5px !important;
        white-space: normal !important;
        line-height: 1.2;
      }
      .rc-grid-2,
      .rc-grid-2-asym,
      .rc-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
      .rc-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
      }
      .rc-sheet-tabs {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
      }
      .rc-sheet-tabs .rc-subtab-btn {
        padding: 6px 4px !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2px !important;
      }
      .rc-sheet-icon {
        display: none !important;
      }
      .rc-sheet-tabs .rc-subtab-label {
        font-size: 9.5px !important;
      }
      .rc-sheet-tabs .rc-subtab-desc {
        display: none !important;
      }
      .rc-sheet-count-badge {
        font-size: 9px !important;
        padding: 1px 6px !important;
      }
      .rc-table-toolbar {
        padding: 6px 8px !important;
        gap: 5px !important;
      }
      #raceChallengeFilterPills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      #raceChallengeFilterPills::-webkit-scrollbar {
        display: none;
      }
      #raceChallengeFilterPills .tab-pill {
        flex-shrink: 0;
        font-size: 10px !important;
        padding: 4px 8px !important;
        white-space: nowrap;
      }
      .rc-contextual-add-btn {
        width: 100%;
        text-align: center;
        padding: 5px 8px !important;
        font-size: 10.5px !important;
      }
      .rc-lock-note {
        display: none !important;
      }
    }