/* Trang web của app Tính điểm Billiard: cùng tông tối và font Manrope với app. */
@font-face { font-family: Manrope; src: url(/assets/Manrope_400Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url(/assets/Manrope_700Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --bg: #171923;
  --bg-2: #221d2a;
  --text: #f2f3f7;
  --muted: #b9bcc8;
  --line: rgba(242, 243, 247, 0.14);
  --accent: #f5b82e;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(160deg, #1b1f2c 0%, var(--bg) 55%, var(--bg-2) 100%) fixed;
  color: var(--text);
  font: 400 17px/1.6 Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }

header.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
header.brand img { width: 56px; height: 56px; border-radius: 13px; }
header.brand a { color: inherit; text-decoration: none; font-weight: 700; font-size: 20px; }

h1 { font-size: 30px; line-height: 1.25; margin: 0 0 6px; }
h2 { font-size: 20px; line-height: 1.35; margin: 32px 0 8px; }
h3 { font-size: 17px; margin: 22px 0 4px; }
p, li { color: var(--text); }
.muted { color: var(--muted); font-size: 15px; }
ul { padding-left: 22px; }
a { color: var(--accent); }

.links { display: grid; gap: 12px; margin-top: 28px; }
.links a {
  display: block; padding: 16px 18px; border: 1.5px solid rgba(242, 243, 247, 0.4); border-radius: 14px;
  color: var(--text); text-decoration: none; font-weight: 700;
}
.links a span { display: block; font-weight: 400; color: var(--muted); font-size: 15px; }

.contact {
  margin-top: 16px; padding: 16px 18px; border: 1.5px dashed rgba(242, 243, 247, 0.4); border-radius: 14px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 24px; }

footer { margin-top: 48px; color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); }