:root{
  --bg:#0b1220; --muted:#111a2e; --card:#0f1a33; --text:#e5ecff; --sub:#a9b7d9; --accent:#53d1ff;
  --primary:#4f8cff; --primary-2:#3d74db; --ok:#28c76f; --warn:#ffb020;
}
*{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

.site-header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:rgba(15,26,51,.6);backdrop-filter:blur(8px);position:sticky;top:0;border-bottom:1px solid #1b2745}
.brand{display:flex;gap:12px;align-items:center}
.logo{font-size:28px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text .tagline{font-size:12px;color:var(--sub)}

.nav{display:flex;gap:12px;align-items:center}
.nav-link{color:var(--sub);text-decoration:none;padding:8px 10px;border-radius:10px}
.nav-link:hover{color:var(--text);background:#0e1932}
.btn-signup{padding:8px 14px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--primary));color:#001127;text-decoration:none;font-weight:700}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;max-width:1100px;margin:34px auto;padding:0 18px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:18px}}

.hero-info h1{font-size:36px;margin:0 0 10px}
.accent{color:var(--accent)}
.lead{color:var(--sub);margin:0 0 18px}

.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.features{grid-template-columns:1fr}}
.feature{display:flex;gap:12px;align-items:flex-start;background:var(--muted);padding:14px;border:1px solid #1b2745;border-radius:14px}
.icon{font-size:22px;line-height:1.1}

.card{background:var(--card);border:1px solid #1b2745;border-radius:16px;padding:18px}
.login-card{min-width:300px}
h2{margin-top:0}
h3{color:white}
label{display:block;margin:12px 0 6px;color:var(--sub);font-size:14px}
input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid #22345d;background:#0c1530;color:var(--text);outline:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(83,209,255,.15)}

.btn-primary{width:100%;margin-top:14px;padding:12px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#031026;font-weight:700;cursor:pointer}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{padding:10px 14px;border-radius:10px;background:#0f1a33;border:1px solid #1b2745;color:var(--text);cursor:pointer}
.hint{margin-top:10px;color:var(--sub)}
.msg{margin-top:10px;font-size:14px}
.msg.ok{color:var(--ok)} .msg.err{color:#ff6b6b}

dialog{border:none;border-radius:14px;padding:0;max-width:420px;width:95%}
.dialog-card{background:var(--card);border:1px solid #1b2745;border-radius:14px;padding:16px}
.dialog-card .row{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

.site-footer{text-align:center;color:var(--sub);padding:24px 10px;border-top:1px solid #1b2745;margin-top:34px}

/* === Modal Register — bản dịu mắt, chuyên nghiệp === */
:root{
  /* Bề mặt modal tách biệt nền */
  --modal-surface:#0e1424;   /* navy trầm, ít ánh xanh */
  --modal-border:#1e2a46;    /* viền tinh tế */
  --modal-shadow:0 20px 60px rgba(0,0,0,.55);
}

/* Nền mờ phía sau */
dialog::backdrop{
  background:rgba(6,10,20,.55);
  backdrop-filter:blur(2px);
}

/* Card đăng ký */
dialog{border:none;border-radius:16px;padding:0;max-width:460px;width:95%}
.dialog-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) ,
    var(--modal-surface);
  border:1px solid var(--modal-border);
  border-radius:16px;
  box-shadow:var(--modal-shadow);
  padding:18px;
}

/* Tiêu đề và bố cục */
.dialog-card h3{margin:0 0 10px;color:#eef2ff;letter-spacing:.2px}
.dialog-card .row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.04)}

/* Trường nhập – đồng bộ màu, focus mềm */
.dialog-card input{
  background:#0b1530;              /* tối hơn nền modal một chút */
  border:1px solid #203156;
  color:#eaf0ff;
}
.dialog-card input:focus{
  border-color:#5cc7ff;
  box-shadow:0 0 0 3px rgba(92,199,255,.14);
}

/* Nút trong modal: bớt “ồn” so với ngoài */
dialog .btn-primary{
  background:#3b7bff;              /* bỏ gradient cho calm tone */
  color:#fff;
}
dialog .btn-primary:hover{filter:brightness(1.06)}
dialog .btn-secondary{
  background:transparent;
  border:1px solid #2a3b60;
}
.site-footer{margin-top:24px;padding:12px 0}
.stats-row{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap
}
.stat{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:10px 14px;border-radius:12px
}
.stat .icon{font-size:18px}
.stat .num{font-weight:700;margin-right:4px}
.stat .label{color:#a9b7d9;font-size:13px}