/* Màu lấy thẳng từ contracts/design-tokens/CandelaTokens.swift — trang web và app
   phải là cùng một sản phẩm, không phải hai thứ trông hao hao nhau. */
:root {
  --paper:#FAF6EF; --card:#FFFFFF; --ink:#2A2318; --sub:#8A8375;
  --teal:#1FA98F; --teal-deep:#0F6E5C; --gold:#F0B24A; --gold-soft:#FDF3DC;
  --gold-deep:#8A6510; --line:#E7E0D2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0B1626; --card:#13233A; --ink:#E9E4D8; --sub:#93A0B4;
    --teal:#37C6AA; --teal-deep:#9FE3D4; --gold:#E8B45A; --gold-soft:#33290F;
    --gold-deep:#F2CE8B; --line:#1E3050;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.wrap{max-width:720px; margin:0 auto; padding:0 22px 96px}
header.top{display:flex; align-items:center; gap:10px; padding:26px 0 8px}
header.top a.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.flame{width:22px;height:30px;flex:none}
.brand b{font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:20px; font-weight:600}
nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
nav a{color:var(--sub); text-decoration:none; font-size:14px}
nav a:hover, nav a[aria-current]{color:var(--teal-deep)}
h1{font-family:Georgia,"Times New Roman",serif; font-size:clamp(28px,5.2vw,40px); line-height:1.2; margin:32px 0 10px}
h2{font-family:Georgia,"Times New Roman",serif; font-size:22px; margin:38px 0 8px}
h3{font-size:16px; margin:26px 0 6px}
p,li{color:var(--ink)}
.lead{color:var(--sub); font-size:18px; margin-top:0}
small,.muted{color:var(--sub)}
a{color:var(--teal-deep)}
ul{padding-left:22px}
li{margin:5px 0}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:20px 22px; margin:20px 0;
}
.note{background:var(--gold-soft); border-color:var(--gold)}
table{border-collapse:collapse; width:100%; margin:16px 0; font-size:14.5px; display:block; overflow-x:auto}
th,td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
th{background:var(--gold-soft); font-weight:600}
footer{border-top:1px solid var(--line); margin-top:56px; padding-top:18px; font-size:13.5px; color:var(--sub)}
footer a{color:var(--sub)}
code{background:var(--gold-soft); padding:1px 5px; border-radius:5px; font-size:13.5px}