body {
    background-color: #0b1325;
    color: #e2e8f0;
    overflow-x: hidden;
    margin-top: 45px;
}

.sp-sticky-header {
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100%; 
    height: 45px !important;
    background-color: #000 !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important;
    z-index: 99999 !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important; 
    font-family: Arial, sans-serif !important;
}

.left-group, .right-group { display: flex; align-items: center; height: 100%; }

.sp-back-to-soha-new {
    display: flex; align-items: center; justify-content: center; 
    width: 45px; height: 45px;
    background-color: #007f74; color: white; font-size: 18px; cursor: pointer;
    transition: all 0.3s ease;
}
.sp-back-to-soha-new:hover { background-color: #00665d; }

.emg-icon-svg { fill: currentColor; width: 20px; height: 20px; }
.sp-mag-logo-new { margin-left: 15px; display: flex; align-items: center; }
.sp-mag-logo-new img { height: 24px; width: auto; display: block; }

.center-logo {
    position: absolute; left: 50%; transform: translateX(-50%); 
    pointer-events: none; user-select: none;
    display: flex; align-items: center; justify-content: center;
}
.center-logo img { height: 26px; width: auto; display: block; }

.mobile-emag-logo { display: none; height: 24px; width: auto; margin-right: 15px; }

.fb-custom-btn {
    display: flex; align-items: center; gap: 6px; color: white; 
    font-size: 13px; font-weight: bold; cursor: pointer; opacity: 0.9;
    margin-right: 15px; transition: all 0.3s ease; text-decoration: none;
}
.fb-custom-btn:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 768px) { 
    .center-logo, .fb-custom-btn { display: none !important; } 
    .mobile-emag-logo { display: block !important; }
}

.drop-cap::first-letter {
    float: left; font-size: 5.5rem; line-height: 0.8;
    padding-top: 0.2rem; padding-right: 0.75rem; padding-left: 0;
    color: #d4af37; font-family: 'Playfair Display', serif; font-weight: 700;
}

p { margin-bottom: 2.25rem; text-align: justify; }

.fade-in-up {
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

#progress-bar {
    position: fixed; top: 45px; left: 0; height: 4px;
    background: linear-gradient(90deg, #d4af37, #fff6d9); width: 0%; z-index: 99998; transition: width 0.1s;
}

.chart-bar-fill {
    transition: width 1.5s ease-out;
}

.race-widget-wrapper {
  --primary-blue: #003060; 
  --gold-solid: #bf953f;
  --bg-white: #ffffff;
  --text-dark: #333;
  --text-gray: #555;
  --track-bg: #e0e0e0;
  
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.race-widget-wrapper *, 
.race-widget-wrapper *::before, 
.race-widget-wrapper *::after { 
  box-sizing: border-box; 
}

.race-chart-container {
    margin: 20px auto; 
    padding: 40px 30px; 
    background: var(--bg-white); 
    border: 1px solid #eee; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 980px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden; 
}

.race-title {
    text-align: center; 
    color: var(--primary-blue); 
    font-size: 18px;
    font-weight: 800; 
    text-transform: uppercase; 
    margin-bottom: 50px;
    letter-spacing: 0.5px;
}

.race-row { 
    position: relative; 
    margin-bottom: 60px; 
    width: 100%; 
}
.race-row:last-child { margin-bottom: 80px; }

.race-info { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 10px; 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--text-gray); 
}

.race-info span:first-child {
    color: var(--primary-blue);
    font-weight: 700;
}

.race-time { 
    color: var(--primary-blue); 
    font-weight: 800; 
}

.track-line { 
    height: 6px; 
    background: var(--track-bg); 
    border-radius: 3px; 
    position: relative; 
    width: 100%; 
}
.track-line::after { 
    content: ""; 
    position: absolute; 
    right: 0; 
    top: -10px; 
    bottom: -10px; 
    width: 4px; 
    background: #333; 
}

.vehicle-wrap {
    position: absolute; 
    top: -45px; 
    left: -100px;
    width: 80px;
    animation-name: race-move; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    z-index: 3;
    will-change: left;
}

.v-moto { width: 50px; top: -42px; animation-duration: 30s; }
.v-bus { width: 90px; top: -45px; animation-duration: 21.8s; }
.v-car { width: 70px; top: -28px; animation-duration: 13.6s; }
.v-hsr { width: 200px; top: -50px; animation-duration: 3.6s; }

.vehicle-icon { 
    width: 100%; 
    height: auto; 
    display: block;
}

.blend-multiply { 
    mix-blend-mode: multiply; 
}

.vehicle-tooltip {
    position: absolute; 
    top: -25px; 
    left: 50%; 
    transform: translateX(-50%);
    background: #222; 
    color: #fff; 
    padding: 3px 8px; 
    border-radius: 3px;
    font-size: 10px; 
    font-weight: 700; 
    white-space: nowrap; 
    opacity: 0; 
    transition: 0.3s;
}
.v-hsr .vehicle-tooltip {
    top: -30px; 
}
.race-row:hover .vehicle-tooltip { opacity: 1; }

@keyframes race-move { 
    0% { left: -20%; } 
    100% { left: 105%; } 
}

.race-row.highlight .track-line { 
    background: linear-gradient(90deg, #e3f2fd, #90caf9); 
}
.race-row.highlight .vehicle-wrap { 
    animation-timing-function: linear; 
}

@media (max-width: 768px) {
    .race-chart-container {
        width: 100%;
        padding: 30px 15px;
        border: none;
        box-shadow: none;
    }
    .v-moto { width: 40px; top: -35px; } 
    .v-car { width: 55px; top: -22px; } 
    .v-bus { width: 70px; top: -38px; } 
    .v-hsr { width: 130px; top: -35px; }
    .race-title { font-size: 16px; margin-bottom: 40px; }
    .race-info { font-size: 12px; }
    .race-row:last-child { margin-bottom: 60px; }
}