body {
    font-family: 'Montserrat', sans-serif;
    background-color: #fdfbf7; 
    color: #1e293b; 
    overflow-x: hidden;
    margin-top: 45px; 
}
.playfair { font-family: 'Playfair Display', serif; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #fdfbf7; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

.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; 
}
.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;
}
.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;
}

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

.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-progress {
    position: fixed;
    top: 45px;
    left: 0;
    height: 3px;
    background: linear-gradient(to right, #007f74, #0a1d37);
    z-index: 100;
    width: 0%;
}

.simulation-container {
    background: linear-gradient(to bottom, #020617, #0f172a);
    position: relative;
    overflow: hidden;
}

.building-realistic { fill: #1e293b; opacity: 0.6; }
.window-light { fill: #fbbf24; opacity: 0.3; }

#metro-train-realistic {
    offset-path: path('M -150 240 L 1050 240');
    animation: moveTrainSync 12s infinite linear;
}
@keyframes moveTrainSync {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}

@keyframes stationHighlightS0 {
    0%, 5% { opacity: 1; filter: drop-shadow(0 0 15px #0ea5e9); stroke: #fff; }
    10%, 100% { opacity: 0.3; filter: none; stroke: #0ea5e9; }
}
@keyframes stationHighlightSC {
    0%, 25% { opacity: 0.3; filter: none; stroke: #0ea5e9; }
    30%, 40% { opacity: 1; filter: drop-shadow(0 0 15px #0ea5e9); stroke: #fff; }
    45%, 100% { opacity: 0.3; filter: none; stroke: #0ea5e9; }
}
@keyframes stationHighlightSA {
    0%, 55% { opacity: 0.3; filter: none; stroke: #0ea5e9; }
    60%, 70% { opacity: 1; filter: drop-shadow(0 0 15px #0ea5e9); stroke: #fff; }
    75%, 100% { opacity: 0.3; filter: none; stroke: #0ea5e9; }
}
@keyframes stationHighlightLT {
    0%, 85% { opacity: 0.3; filter: none; stroke: #f97316; }
    90%, 100% { opacity: 1; filter: drop-shadow(0 0 15px #f97316); stroke: #fff; }
}

.glow-s0 { animation: stationHighlightS0 12s infinite; }
.glow-sc { animation: stationHighlightSC 12s infinite; }
.glow-sa { animation: stationHighlightSA 12s infinite; }
.glow-longthanh { animation: stationHighlightLT 12s infinite; }

.station-label {
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 8px 16px;
    font-size: 15px; 
    font-weight: 800;
    border-radius: 4px;
    white-space: nowrap;
    position: absolute;
    transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: none;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
.station-label::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgba(0,0,0,0.9);
}

#neonGlowReal {
    filter: drop-shadow(0 0 8px #0ea5e9);
}