/* Bảng màu lấy nguyên từ GoblinRun/Design/GentlePalette.swift — trang web và app
   phải trông cùng một họ, nếu không người dùng bấm từ App Store sang đây sẽ
   tưởng vào sai chỗ. Đừng đặt màu mới ở đây; sửa thì sửa cả hai nơi. */
:root{
  --page-a:#EFF0F4; --page-b:#E5E7EE; --card:#FFFFFF;
  --ink:#151A19;      /* 17,59:1 trên card */
  --muted:#5C6B67;    /* 5,59:1 trên card */
  --label:#6A7773;    /* 4,67:1 — KHÔNG dùng #93A09C, nó chỉ đạt 2,71:1 */
  --hair:#E4E7E6;
  --ok-tint:#DFF3EC; --ok-deep:#0B6B58; --ok-ui:#12876E;
  --warn-tint:#FDF0D5; --warn-deep:#7A4E06;
  --now-tint:#FCE7DE; --now-deep:#9C3412;
  --r-card:26px; --r-inner:18px; --r-pill:999px;
  --sh-card:0 1px 2px rgba(21,26,25,.04), 0 10px 24px -12px rgba(21,26,25,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:linear-gradient(180deg,var(--page-a),var(--page-b)) fixed;
  color:var(--ink);
  font:400 17px/1.62 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:0 20px 80px;
}
.wrap{max-width:720px;margin:0 auto}

header{padding:52px 0 30px;display:flex;align-items:center;gap:16px}
header .mark{
  width:60px;height:60px;flex:0 0 60px;border-radius:14px;
  background:var(--ok-tint);display:grid;place-items:center;font-size:34px;line-height:1;
  box-shadow:var(--sh-card);
}
header h1{font-size:27px;line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:0}
header p{margin:3px 0 0;color:var(--muted);font-size:15.5px}

nav{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 30px}
nav a{
  font-size:14px;font-weight:700;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:9px 16px;
}
nav a[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.card{
  background:var(--card);border-radius:var(--r-card);padding:28px 30px;
  box-shadow:var(--sh-card);margin:0 0 18px;
}
.card.ok{background:var(--ok-tint)}
h2{font-size:21px;line-height:1.28;font-weight:800;letter-spacing:-.015em;margin:0 0 12px}
h3{font-size:16px;font-weight:800;margin:26px 0 8px;letter-spacing:-.005em}
h3:first-child{margin-top:0}
p{margin:0 0 13px}
p:last-child{margin-bottom:0}
strong{font-weight:700}
ul{margin:0 0 13px;padding-left:22px}
li{margin:0 0 7px}
a{color:var(--ok-deep);text-decoration-thickness:2px;text-underline-offset:2px}
.lede{font-size:19px;line-height:1.55;color:var(--ink)}
.small{font-size:14.5px;color:var(--muted)}
.eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--label);margin:0 0 9px;
}
.en{border-top:1px solid var(--hair);margin-top:24px;padding-top:22px}
.en .eyebrow{color:var(--label)}
table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
th{font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
td:first-child{font-weight:700;white-space:nowrap}
code{
  font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--page-b);padding:2px 6px;border-radius:6px;
}
footer{margin-top:34px;color:var(--label);font-size:14px;text-align:center}
footer a{color:var(--label)}
@media (max-width:560px){
  header{padding:34px 0 22px}
  header h1{font-size:23px}
  .card{padding:22px 20px}
  body{font-size:16.5px}
}