*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;background:#040812;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.page{width:100%;min-height:100vh;background:#050914}

/* ẢNH CHỈ LÀ NỀN. Tất cả nút bên dưới là HTML riêng. */
.hero-stage{
  position:relative;
  width:100%;
  aspect-ratio:1560/1008;
  min-height:540px;
  max-height:100vh;
  overflow:hidden;
  background:#07101f url('noel-ninja-bg.png') center center/cover no-repeat;
}
.hero-stage:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 68%, rgba(255,179,69,.22), transparent 20%),
    linear-gradient(180deg, rgba(4,7,18,.18), rgba(4,7,18,.02) 30%, rgba(4,7,18,.25) 100%);
  pointer-events:none;
}
.hero-stage:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:18%;
  background:linear-gradient(180deg,rgba(2,5,12,0),rgba(2,5,12,.62));
  pointer-events:none;
}

.hero-top-nav{
  position:absolute;
  left:var(--topnav-left);
  top:var(--topnav-top);
  width:var(--topnav-width);
  transform:translateX(-50%);
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--topnav-gap);
}

.hero-action-panel{
  position:absolute;
  left:var(--panel-left);
  top:var(--panel-top);
  width:var(--panel-width);
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:var(--panel-gap);
  align-items:center;
}
.hero-action-row{
  width:100%;
  display:grid;
  gap:var(--button-gap);
}
.hero-action-row-primary{grid-template-columns:repeat(3,minmax(0,1fr));}
.hero-action-row-secondary{grid-template-columns:repeat(2,minmax(0,1fr));}
.hero-action-row-secondary-two{width:66.666%;margin:0 auto;}

.game-btn{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid rgba(255,234,182,.78);
  color:#fff8dd;
  font-weight:900;
  font-size:clamp(13px,1vw,17px);
  letter-spacing:.02em;
  text-align:center;
  text-shadow:0 2px 4px rgba(0,0,0,.65);
  box-shadow:0 10px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.2);
  backdrop-filter:blur(5px);
  overflow:hidden;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.game-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%,rgba(255,255,255,.08));
  z-index:-1;
}
.game-btn::after{
  content:"";
  position:absolute;
  left:10%;right:10%;top:0;
  height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  border-radius:0 0 18px 18px;
  opacity:.72;
  z-index:-1;
}
.game-btn:hover,.game-btn:focus-visible{
  transform:translateY(-3px) scale(1.025);
  filter:brightness(1.08);
  box-shadow:0 16px 34px rgba(0,0,0,.48), 0 0 22px rgba(255,160,45,.22), inset 0 1px 0 rgba(255,255,255,.32);
  outline:none;
}
.game-btn-primary{
  min-height:64px;
  background:linear-gradient(180deg,rgba(255,196,92,.97),rgba(216,112,22,.97) 52%,rgba(123,42,8,.98));
  color:#fffdf3;
  border-color:rgba(255,241,181,.96);
}
.game-btn-top{
  min-height:48px;
  padding:11px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(54,22,40,.88),rgba(25,10,28,.94));
  border-color:rgba(255,210,126,.76);
}
.game-btn-secondary{
  background:linear-gradient(180deg,rgba(104,25,38,.96),rgba(52,14,28,.96) 56%,rgba(22,10,24,.98));
}
.game-btn.login{
  background:linear-gradient(180deg,rgba(53,97,174,.96),rgba(23,49,103,.96) 58%,rgba(12,25,62,.98));
}
.btn-icon{
  font-size:1.18em;
  line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.btn-text{white-space:nowrap}

.systems-section{padding:28px 18px 40px;background:radial-gradient(circle at top,#18223b 0,#0b1322 38%,#05080e 100%)}
.systems-wrap{width:min(1280px,100%);margin:0 auto}.section-head{text-align:center;margin-bottom:18px}.section-head h2{margin:0 0 6px;color:#ffd36c;font-size:42px;line-height:1.1;font-family:Georgia,'Times New Roman',serif;text-shadow:0 2px 10px rgba(0,0,0,.45)}.section-head p{margin:0;color:#c7b48b;font-size:16px}.systems-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.system-card{overflow:hidden;border-radius:14px;border:1px solid rgba(240,186,83,.58);background:linear-gradient(180deg,rgba(19,35,56,.95) 0,rgba(10,18,30,.96) 100%);box-shadow:0 14px 34px rgba(0,0,0,.34)}.system-thumb{aspect-ratio:16/9;background:#111;overflow:hidden}.system-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top}.system-body{padding:14px 16px 18px}.system-body h3{margin:0 0 6px;color:#ffd36a;font-size:25px;line-height:1.15}.system-body p{margin:0;color:#d3d9e1;font-size:15px;line-height:1.5}

@media(max-width:1024px){
  .hero-stage{min-height:620px;background-position:48% center}
  .hero-top-nav{width:min(92%,900px)}
  .hero-action-panel{width:min(88%,820px)}
}

@media(max-width:767px){
  /* MOBILE: giữ nhân vật + logo cân đối, tránh crop quá sát như bản cũ */
  .hero-stage{
    aspect-ratio:auto;
    min-height:780px;
    max-height:none;
    background-size:auto 780px;
    background-position:50% top;
    background-repeat:no-repeat;
    background-color:#07101f;
  }
  .hero-stage:before{
    background:
      linear-gradient(180deg,rgba(4,7,18,.20),rgba(4,7,18,0) 20%,rgba(4,7,18,.08) 62%,rgba(4,7,18,.46) 100%);
  }
  .hero-stage:after{height:12%;}

  .hero-top-nav{
    width:calc(100% - 20px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .hero-action-panel{
    width:calc(100% - 20px);
    gap:9px;
  }
  .hero-action-row-primary{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hero-action-row-secondary{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-action-row-secondary-two{width:68%;}

  .game-btn{
    min-height:46px;
    padding:9px 8px;
    border-radius:12px;
    font-size:12px;
    gap:6px;
    box-shadow:0 7px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -2px 0 rgba(0,0,0,.18);
  }
  .game-btn::before{border-radius:11px;}
  .game-btn-top{min-height:45px;padding:9px 8px;}
  .game-btn-primary{min-height:50px;}
  .btn-icon{font-size:1.08em;}
  .btn-text{white-space:nowrap;}

  .systems-section{padding:18px 10px 24px}.section-head h2{font-size:27px}.section-head p{font-size:13px}.systems-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.system-card{border-radius:10px}.system-body{padding:10px 10px 12px}.system-body h3{font-size:16px}.system-body p{font-size:12px;line-height:1.35}
}

@media(max-width:430px){
  .hero-stage{
    min-height:760px;
    background-size:auto 760px;
    background-position:50% top;
  }
  .hero-top-nav{width:calc(100% - 16px);gap:7px;}
  .hero-action-panel{width:calc(100% - 16px);gap:8px;}
  .game-btn{font-size:11.5px;padding:8px 6px;min-height:44px;}
  .game-btn-primary{min-height:48px;}
  .hero-action-row-secondary-two{width:72%;}
}