:root { --nen:#f7f6f2; --chu:#1d2321; --phu:#5b6662; --nhan:#1f6f5c; --the:#ffffff; --vien:#e3e1da; }
@media (prefers-color-scheme: dark) { :root { --nen:#141816; --chu:#e9ecea; --phu:#a6b0ac; --nhan:#5cc4a6; --the:#1c2220; --vien:#2a312e; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--nen); color:var(--chu); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header { max-width:860px; margin:0 auto; padding:20px 20px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
header nav a { margin-left:16px; color:var(--chu); text-decoration:none; font-weight:500; }
header nav a:hover { color:var(--nhan); }
main { max-width:860px; margin:0 auto; padding:32px 20px 48px; }
.logo { display:inline-block; font-weight:700; letter-spacing:.06em; background:var(--nhan); color:#fff; padding:6px 12px; border-radius:8px; text-decoration:none; }
h1 { font-size:clamp(28px,5vw,40px); line-height:1.2; margin:12px 0 12px; }
h2 { font-size:20px; margin:32px 0 10px; }
.phu { color:var(--phu); font-size:18px; margin:0 0 28px; }
.luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:28px; }
.the { background:var(--the); border:1px solid var(--vien); border-radius:12px; padding:18px; }
.the h3 { font-size:16px; margin:0 0 6px; }
.the p { margin:0; color:var(--phu); font-size:15px; }
table { border-collapse:collapse; width:100%; background:var(--the); border:1px solid var(--vien); border-radius:12px; overflow:hidden; }
td { padding:10px 14px; border-bottom:1px solid var(--vien); vertical-align:top; }
td:first-child { color:var(--phu); width:38%; }
tr:last-child td { border-bottom:0; }
a { color:var(--nhan); }
footer { max-width:860px; margin:0 auto; padding:18px 20px 40px; color:var(--phu); font-size:14px; border-top:1px solid var(--vien); }