*{margin:0;padding:0;box-sizing:border-box}
  :root{
    --neon:#00ff88;
    --dark:#0a0a0f;
    --card:#111118;
    --border:#1e1e2e;
    --muted:#6b6b8a;
    --white:#f0f0ff;
    --accent:#ff3c6f;
    --gold:#ffd060;
    --blue:#3c8cff;
  }
  body{background:var(--dark);color:var(--white);font-family: 'Segoe UI', Arial, sans-serif;;;min-height:100vh;overflow-x:hidden}
  body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,136,0.015) 2px,rgba(0,255,136,0.015) 4px);pointer-events:none;z-index:1000}

  header{border-bottom:1px solid var(--border);padding:0 2rem;position:sticky;top:0;z-index:100;background:rgba(10,10,15,0.95);backdrop-filter:blur(12px)}
  .header-top{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
  .logo{font-family: 'Segoe UI', Arial, sans-serif;;font-size:2rem;letter-spacing:3px;color:var(--white)}
  .logo span{color:var(--neon)}
  .logo-sub{font-family: 'Segoe UI', Arial, sans-serif;;font-size:10px;color:var(--muted);letter-spacing:4px;margin-top:-6px}
  .nav{display:flex;gap:0;border:1px solid var(--border)}
  .nav-item{padding:0.45rem 1.1rem;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-right:1px solid var(--border);transition:all 0.2s;color:var(--muted);font-family:'IBM Plex Mono',monospace}
  .nav-item:last-child{border-right:none}
  .nav-item:hover,.nav-item.active{background:var(--neon);color:#000}
  .ticker{background:var(--card);border-top:1px solid var(--border);padding:0.4rem 0;overflow:hidden;position:relative}
  .ticker::before{content:'BREAKING';background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:0.3rem 0.8rem;letter-spacing:2px;font-family:'IBM Plex Mono',monospace;position:absolute;left:0;top:0;z-index:2;height:100%;display:flex;align-items:center}
  .ticker-track{display:flex;gap:3rem;animation:ticker 30s linear infinite;padding-left:120px;white-space:nowrap}
  .ticker-item{font-size:12px;color:var(--muted);font-family: 'Segoe UI', Arial, sans-serif;}
  .ticker-item span{color:var(--neon)}
  @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .hero{display:grid;grid-template-columns:1fr 380px;gap:1px;background:var(--border);margin:0}
  .hero-main{background:var(--dark);padding:2.5rem;cursor:pointer;position:relative;overflow:hidden}
  .hero-main::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,255,136,0.03),transparent);pointer-events:none}
  .hero-main:hover .hero-title{color:var(--neon)}
  .hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:0.3rem 0.8rem;letter-spacing:2px;font-family:'IBM Plex Mono',monospace;margin-bottom:1.2rem}
  .hero-badge::before{content:'▶';font-size:8px}
  .hero-title{font-size:2.8rem;font-weight:700;line-height:1.1;transition:color 0.2s;margin-bottom:1rem;letter-spacing:-0.5px}
  .hero-title em{color:var(--neon);font-style:normal}
  .hero-desc{color:var(--muted);font-size:0.95rem;line-height:1.6;max-width:540px;margin-bottom:1.5rem}
  .hero-meta{display:flex;align-items:center;gap:1.5rem;font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--muted)}
  .hero-meta .cat{color:var(--neon)}
  .hero-img{width:100%;height:200px;background:linear-gradient(135deg,#0d2a1a 0%,#1a0d1a 50%,#0d1a2a 100%);border:1px solid rgba(0,255,136,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;position:relative;overflow:hidden}
  .hero-img::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,255,136,0.04) 10px,rgba(0,255,136,0.04) 11px)}
  .pixel-art{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--neon);line-height:1.2;text-align:center;opacity:0.7}

  .sidebar-stack{background:var(--dark);display:flex;flex-direction:column;gap:1px;background:var(--border)}
  .sidebar-item{background:var(--dark);padding:1.25rem 1.5rem;cursor:pointer;display:flex;gap:1rem;align-items:flex-start;transition:background 0.2s}
  .sidebar-item:hover{background:var(--card)}
  .sidebar-num{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--border);min-width:40px;line-height:1}
  .sidebar-item:hover .sidebar-num{color:var(--neon)}
  .sidebar-cat{font-size:9px;font-family:'IBM Plex Mono',monospace;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:4px}
  .sidebar-title{font-size:0.88rem;font-weight:600;line-height:1.3;margin-bottom:4px}
  .sidebar-time{font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace}

  .section-header{display:flex;align-items:center;gap:1rem;padding:1.5rem 2rem 1rem;border-bottom:1px solid var(--border)}
  .section-label{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:3px}
  .section-line{flex:1;height:1px;background:var(--border)}
  .section-more{font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--neon);cursor:pointer;letter-spacing:1px}

  .cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin:0}
  .card{background:var(--dark);padding:1.5rem;cursor:pointer;transition:background 0.2s;position:relative}
  .card:hover{background:var(--card)}
  .card-thumb{height:120px;margin-bottom:1rem;position:relative;overflow:hidden}
  .card-thumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:9px;line-height:1.4;text-align:center}
  .game-card .card-thumb-bg{background:linear-gradient(135deg,#1a0d2a,#0d0d1a);color:rgba(255,60,111,0.6);border:1px solid rgba(255,60,111,0.15)}
  .tech-card .card-thumb-bg{background:linear-gradient(135deg,#0d1a1a,#0d0d1a);color:rgba(0,255,136,0.6);border:1px solid rgba(0,255,136,0.15)}
  .review-card .card-thumb-bg{background:linear-gradient(135deg,#1a1a0d,#0d0d1a);color:rgba(255,208,96,0.6);border:1px solid rgba(255,208,96,0.15)}
  .card-tag{position:absolute;top:8px;left:8px;font-size:9px;font-family:'IBM Plex Mono',monospace;padding:3px 8px;letter-spacing:1px;font-weight:700}
  .tag-game{background:rgba(255,60,111,0.15);color:var(--accent);border:1px solid rgba(255,60,111,0.3)}
  .tag-tech{background:rgba(0,255,136,0.1);color:var(--neon);border:1px solid rgba(0,255,136,0.25)}
  .tag-review{background:rgba(255,208,96,0.1);color:var(--gold);border:1px solid rgba(255,208,96,0.25)}
  .card-title{font-size:0.9rem;font-weight:600;line-height:1.35;margin-bottom:0.5rem}
  .card:hover .card-title{color:var(--neon)}
  .card-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--muted)}
  .card-views{color:var(--neon)}
  .score-bar{display:flex;gap:0.5rem;margin-bottom:0.6rem}
  .score-block{flex:1;height:4px}
  .score-filled{background:var(--gold)}
  .score-empty{background:var(--border)}

  .esports-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
  .match-card{background:var(--dark);padding:1.5rem;cursor:pointer;transition:background 0.2s}
  .match-card:hover{background:var(--card)}
  .match-status{font-size:9px;font-family:'IBM Plex Mono',monospace;color:var(--accent);letter-spacing:2px;margin-bottom:0.75rem;display:flex;align-items:center;gap:6px}
  .live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
  .match-teams{display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem}
  .team{flex:1;text-align:center}
  .team-name{font-weight:700;font-size:0.85rem}
  .team-score{font-family:'Bebas Neue',sans-serif;font-size:2rem;line-height:1}
  .t1-score{color:var(--neon)}
  .t2-score{color:var(--muted)}
  .vs{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--border)}
  .match-game{font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace;letter-spacing:1px}

  footer{border-top:1px solid var(--border);padding:2rem;text-align:center;margin-top:0}
  .footer-logo{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:3px;color:var(--muted);margin-bottom:0.5rem}
  .footer-logo span{color:var(--neon)}
  .footer-sub{font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--border);letter-spacing:2px}
    *{margin:0;padding:0;box-sizing:border-box}
  :root{
    --neon:#00ff88;--dark:#0a0a0f;--card:#111118;--border:#1e1e2e;
    --muted:#6b6b8a;--white:#f0f0ff;--accent:#ff3c6f;--gold:#ffd060;
  }
  body{background:var(--dark);color:var(--white);font-family:'Outfit',sans-serif}

  footer{border-top:2px solid var(--border);background:var(--dark)}

  .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:0;border-bottom:1px solid var(--border)}

  .footer-brand{padding:2.5rem 2rem;border-right:1px solid var(--border)}
  .footer-logo{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:4px;line-height:1;margin-bottom:0.3rem}
  .footer-logo span{color:var(--neon)}
  .footer-tagline{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:3px;margin-bottom:1.2rem}
  .footer-desc{font-size:0.82rem;color:var(--muted);line-height:1.6;margin-bottom:1.5rem;max-width:240px}
  .footer-newsletter{display:flex;gap:0}
  .footer-input{background:var(--card);border:1px solid var(--border);border-right:none;color:var(--white);padding:0.5rem 0.8rem;font-size:11px;font-family:'IBM Plex Mono',monospace;outline:none;width:160px}
  .footer-input::placeholder{color:var(--muted)}
  .footer-btn{background:var(--neon);color:#000;border:none;padding:0.5rem 0.8rem;font-size:10px;font-weight:700;font-family:'IBM Plex Mono',monospace;letter-spacing:1px;cursor:pointer;white-space:nowrap}
  .footer-btn:hover{background:#00cc70}

  .footer-col{padding:2.5rem 1.5rem;border-right:1px solid var(--border)}
  .footer-col:last-child{border-right:none}
  .col-title{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:3px;color:var(--neon);margin-bottom:1.2rem;display:flex;align-items:center;gap:8px}
  .col-title::after{content:'';flex:1;height:1px;background:var(--border)}
  .col-links{display:flex;flex-direction:column;gap:0.6rem}
  .col-link{font-size:0.82rem;color:var(--muted);cursor:pointer;transition:color 0.15s;font-family:'IBM Plex Mono',monospace;display:flex;align-items:center;gap:6px}
  .col-link::before{content:'›';color:var(--border);transition:color 0.15s}
  .col-link:hover{color:var(--white)}
  .col-link:hover::before{color:var(--neon)}

  .social-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:0}
  .social-btn{display:flex;align-items:center;gap:8px;padding:0.55rem 0.7rem;border:1px solid var(--border);cursor:pointer;transition:all 0.15s;background:var(--card)}
  .social-btn:hover{border-color:var(--neon);background:#0d1a13}
  .social-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:'IBM Plex Mono',monospace;flex-shrink:0}
  .si-yt{color:#ff4444}
  .si-fb{color:#3c8cff}
  .si-tg{color:#26a5e4}
  .si-tt{color:var(--white)}
  .si-tw{color:#1da1f2}
  .si-dc{color:#7289da}
  * {
    font-family: Arial, sans-serif;
}
  .social-name{font-size:10px;font-weight:700;font-family:'IBM Plex Mono',monospace;letter-spacing:1px}
  .social-count{font-size:9px;color:var(--muted);font-family:'IBM Plex Mono',monospace}

  .faq-list{display:flex;flex-direction:column;gap:0}
  .faq-item{border-bottom:1px solid var(--border);cursor:pointer}
  .faq-q{padding:0.75rem 0;font-size:0.8rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px;transition:color 0.15s;font-family:'IBM Plex Mono',monospace;line-height:1.3}
  .faq-q:hover{color:var(--white)}
  .faq-arrow{color:var(--border);font-size:10px;flex-shrink:0;transition:all 0.2s}
  .faq-item.open .faq-q{color:var(--neon)}
  .faq-item.open .faq-arrow{color:var(--neon);transform:rotate(90deg)}
  .faq-a{font-size:0.78rem;color:var(--muted);line-height:1.5;padding:0 0 0.75rem;display:none;font-family:'Outfit',sans-serif}
  .faq-item.open .faq-a{display:block}

  .footer-mid{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--border)}
  .stat-box{padding:1.2rem 2rem;border-right:1px solid var(--border);display:flex;align-items:center;gap:1rem}
  .stat-box:last-child{border-right:none}
  .stat-num{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--neon);line-height:1}
  .stat-label{font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace;letter-spacing:1px}

  .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem}
  .footer-copy{font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--border)}
  .footer-copy span{color:var(--muted)}
  .footer-legal{display:flex;gap:1.5rem}
  .legal-link{font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--border);cursor:pointer;transition:color 0.15s}
  .legal-link:hover{color:var(--muted)}
  /* 🎯 ĐỔI FONT TỪ ESPORTS TRỞ XUỐNG */
.esports-grid,
footer,
.footer-top,
.footer-mid,
.footer-bottom,
.match-card,
.stat-box,
.footer-col,
.footer-brand {
  font-family: Arial, sans-serif !important;
}
/* 🎯 ĐỔI TEXT THÀNH MÀU TRẮNG */
.esports-grid *,
footer * {
  color: #ffffff !important;
}
body {
    background: #0a0a0f;
    color: #fff;
}
body {
    font-family: 'Outfit', sans-serif;
    background: radial-gradient(circle at 20% 20%, #0f2027, #0a0a0f);
    color: #e0e0e0;
}
body {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(135deg, #0a0a0f, #0f2027);
    color: #e0e0e0;
}

/* hiệu ứng grid nhẹ */
body::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 40px
    );
    pointer-events: none;
}
/* FOOTER */
footer{
  background:#08080d;
  border-top:1px solid var(--border);
  margin-top:1px;
}

.footer-mid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  border-bottom:1px solid var(--border);
}

.stat-box{
  background:var(--dark);
  padding:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.stat-num{
  font-size:2rem;
  font-weight:700;
  color:var(--neon);
  line-height:1;
}

.stat-label{
  margin-top:6px;
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
}

.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:2rem;
  padding:2.5rem 2rem;
  border-bottom:1px solid var(--border);
}

.footer-logo{
  font-size:1.8rem;
  font-weight:700;
  letter-spacing:3px;
}

.footer-logo span{
  color:var(--neon);
}

.footer-tagline{
  font-size:10px;
  letter-spacing:4px;
  color:var(--muted);
  margin-top:2px;
}

.footer-desc{
  margin-top:1rem;
  color:var(--muted);
  font-size:0.85rem;
  line-height:1.6;
  max-width:340px;
}

.footer-newsletter{
  display:flex;
  margin-top:1.2rem;
  border:1px solid var(--border);
  overflow:hidden;
}

.footer-input{
  flex:1;
  background:#0d0d14;
  border:none;
  padding:0.85rem 1rem;
  color:var(--white);
  outline:none;
  font-family:inherit;
}

.footer-btn{
  border:none;
  background:var(--neon);
  color:#000;
  font-weight:700;
  padding:0 1.1rem;
  cursor:pointer;
  transition:0.2s;
}

.footer-btn:hover{
  opacity:0.85;
}

.col-title{
  font-size:0.9rem;
  font-weight:700;
  margin-bottom:1rem;
  letter-spacing:2px;
  text-transform:uppercase;
}

.col-links{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}

.col-link{
  color:var(--muted);
  font-size:0.82rem;
  cursor:pointer;
  transition:0.2s;
}

.col-link:hover{
  color:var(--neon);
  transform:translateX(4px);
}

.social-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.7rem;
}

.social-btn{
  display:flex;
  align-items:center;
  gap:0.8rem;
  border:1px solid var(--border);
  padding:0.75rem;
  cursor:pointer;
  transition:0.2s;
}

.social-btn:hover{
  background:var(--card);
  border-color:var(--neon);
}

.social-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  border-radius:10px;
  flex-shrink:0;
}

.si-yt{background:#2a0a0a;color:#ff4d4d}
.si-fb{background:#0a1730;color:#4d8dff}
.si-tg{background:#081d2d;color:#55bfff}
.si-tt{background:#201020;color:#ff66d9}
.si-tw{background:#111;color:#fff}
.si-dc{background:#1b1730;color:#8d7dff}

.social-name{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
}

.social-count{
  font-size:10px;
  color:var(--muted);
  margin-top:2px;
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}

.faq-item{
  border:1px solid var(--border);
  overflow:hidden;
}

.faq-q{
  padding:0.9rem;
  cursor:pointer;
  font-size:0.82rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:0.2s;
}

.faq-q:hover{
  background:var(--card);
}

.faq-arrow{
  color:var(--neon);
  transition:0.2s;
}

.faq-a{
  max-height:0;
  overflow:hidden;
  transition:0.3s ease;
  color:var(--muted);
  font-size:0.78rem;
  line-height:1.5;
  padding:0 0.9rem;
}

.faq-item.active .faq-a{
  max-height:200px;
  padding:0 0.9rem 0.9rem;
}

.faq-item.active .faq-arrow{
  transform:rotate(90deg);
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
  flex-wrap:wrap;
  gap:1rem;
}

.footer-copy{
  font-size:0.78rem;
  color:var(--muted);
}

.footer-copy span{
  color:var(--neon);
}

.footer-legal{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.legal-link{
  font-size:0.75rem;
  color:var(--muted);
  cursor:pointer;
  transition:0.2s;
}

.legal-link:hover{
  color:var(--white);
}

/* MOBILE */
@media(max-width:1100px){

  .footer-top{
    grid-template-columns:1fr 1fr;
  }

  .reviews-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .featured-review{
    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  .footer-top{
    grid-template-columns:1fr;
  }

  .footer-mid{
    grid-template-columns:1fr;
  }

  .reviews-grid{
    grid-template-columns:1fr;
  }

  .page-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .ph-stats{
    width:100%;
    justify-content:space-between;
  }

  .nav{
    overflow-x:auto;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

}