:root{--primary:#0052CC;--primary-hover:#003D99;--accent:#FF3B30;--accent-green:#34C759;--page-bg:#F8F9FA;--surface:#FFFFFF;--surface-strong:#0A192F;--text-main:#1C1C1E;--text-muted:#636366;--text-light:#F2F2F7;--border:#E5E5EA;--card-shadow:0 4px 12px rgba(0,0,0,0.05);--transition:all 0.3s ease}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color:var(--page-bg);color:var(--text-main);overflow-x:hidden;line-height:1.6}.custom-card{background-color:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:var(--card-shadow);transition:var(--transition)}.custom-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.08)}.layout-container{display:flex;min-height:100vh}.sidebar-nav{width:260px;background-color:var(--surface-strong);color:var(--text-light);position:fixed;top:0;bottom:0;left:0;z-index:100;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.sidebar-brand img{max-height:45px;width:auto}.sidebar-menu .nav-link{color:rgba(255,255,255,0.75);padding:12px 16px;border-radius:8px;margin-bottom:8px;transition:var(--transition);display:flex;align-items:center;gap:12px}.sidebar-menu .nav-link:hover,.sidebar-menu .nav-link.active{color:#fff;background-color:var(--primary)}.main-content{margin-left:260px;flex-grow:1;padding:24px;width:calc(100% - 260px)}.mobile-header{display:none;background-color:var(--surface-strong);padding:12px 20px;position:sticky;top:0;z-index:1010}.hero-banner{background:linear-gradient(135deg,#0A192F 0%,#0D3366 100%);border-radius:16px;color:#fff;padding:48px;margin-bottom:30px;position:relative;overflow:hidden}.hero-banner::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 80% 50%,rgba(0,82,204,0.3) 0%,transparent 60%);pointer-events:none}.hero-title{font-size:2.8rem;font-weight:800;margin-bottom:16px;line-height:1.2}.hero-img{border-radius:12px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,0.3);max-height:320px;width:100%}.status-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:0.8rem;font-weight:600}.status-upcoming{background-color:#E2F0FF;color:var(--primary)}.status-live{background-color:#FFEBEB;color:var(--accent)}.status-ended{background-color:#E5E5EA;color:var(--text-muted)}.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.group-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}.group-header{background-color:var(--primary);color:#fff;font-weight:bold;padding:10px 15px;text-align:center}.group-list{padding:10px 15px;margin:0;list-style:none}.group-list li{padding:8px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;font-size:0.95rem}.group-list li:last-child{border-bottom:none}.news-list-item{padding:16px 0;border-bottom:1px solid var(--border)}.news-list-item:last-child{border-bottom:none}.news-date{font-size:0.85rem;color:var(--text-muted);margin-bottom:4px}.guide-box{display:flex;gap:20px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--border);margin-bottom:20px}.guide-box img{width:240px;object-fit:cover}.guide-content{padding:20px;flex-grow:1}.faq-item{border-bottom:1px solid var(--border);padding:16px 0}.faq-question{font-weight:600;color:var(--text-main);font-size:1.1rem;cursor:pointer;position:relative;padding-right:30px}.faq-question::after{content:"\F282";font-family:"bootstrap-icons";position:absolute;right:0;top:50%;transform:translateY(-50%);transition:var(--transition)}.faq-question.collapsed::after{transform:translateY(-50%) rotate(-90deg)}.faq-answer{color:var(--text-muted);padding-top:8px;font-size:0.95rem}@media (max-width:1200px){.sidebar-nav{width:220px}.main-content{margin-left:220px;width:calc(100% - 220px)}}@media (max-width:991px){.layout-container{flex-direction:column}.sidebar-nav{display:none}.mobile-header{display:flex;justify-content:space-between;align-items:center}.main-content{margin-left:0;width:100%;padding:15px}.hero-banner{padding:24px}.hero-title{font-size:1.8rem}.guide-box{flex-direction:column}.guide-box img{width:100%;height:200px}}