:root {
  /* tên biến cũ giữ nguyên để không phải sửa từng trang — giá trị lấy từ design tokens (brand.css) */
  --navy: var(--mx-navy); --blue: var(--mx-blue); --cyan: var(--mx-cyan);
  --ink: var(--mx-text); --ink-2: var(--mx-text-2); --ink-3: var(--mx-text-3); --muted: var(--mx-slate);
  --line: var(--mx-line); --line-strong: var(--mx-line-strong); --bg: var(--mx-cloud); --card: var(--mx-white);
  --tint: var(--mx-tint); --tint-2: var(--mx-tint-2);
  --ok: var(--mx-ok); --warn: var(--mx-warn); --bad: var(--mx-bad); --nosrc: var(--mx-nosrc);
  --top-h: 97px;             /* thanh trên + hàng trang con */
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--mx-font-body);
  font-size: 14px; line-height: var(--mx-lh-body); -webkit-text-size-adjust: 100%; }
a { color: var(--blue); }
h1, h2, h3, h4 { font-family: var(--mx-font-heading); line-height: var(--mx-lh-heading); }
h1 { line-height: var(--mx-lh-tight); }
.rp-side-title, .card-title { font-family: var(--mx-font-heading); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.muted { color: var(--muted); }
.narrow { max-width: 640px; margin: 56px auto; padding: 0 16px; }
.narrow h1 { font-size: 22px; color: var(--navy); }

/* ---- trang chủ ---- */
.home { max-width: 960px; margin: 0 auto; padding: 40px 20px 64px; }
.home h1 { margin: 0; font-size: 26px; font-weight: 700; color: var(--navy); }
.home > .muted { margin: 2px 0 0; }
.space { margin-top: 36px; }
.space h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--blue); box-shadow: var(--mx-shadow-md); }
.card-title { font-weight: 600; font-size: 15px; color: var(--navy); }
.card-desc { color: var(--muted); font-size: 13px; }

/* ---- đăng nhập ---- */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-box { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 28px; }
.login-box h1 { color: var(--navy); margin: 0 0 4px; font: 700 24px/1.3 var(--mx-font-brand); letter-spacing: -.01em; }
.login-box label { display: block; margin-top: 14px; font-weight: 600; font-size: 13px; }
.login-box input { display: block; width: 100%; margin-top: 4px; padding: 10px; font: inherit;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--ink); }
.login-box input:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
button.primary { margin-top: 18px; width: 100%; padding: 10px; border: 0; border-radius: 8px;
  background: var(--mx-primary); color: var(--mx-white); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s; }
button.primary:hover { background: var(--navy); }
.alert { padding: 9px 12px; border-radius: 8px; margin-top: 12px; font-size: 13px; }
.alert.error { background: var(--mx-bad-bg); color: var(--mx-bad-ink); }
.alert.info { background: var(--mx-ok-bg); color: var(--ok); }

@media (max-width: 860px) {
  .home { padding: 28px 16px 48px; }
}