/* Trang hướng dẫn (spec guide-site, mockup ui/). Một tệp CSS, không JavaScript (R-154). */
:root { --bg:#f5f6f8; --surface:#fff; --fg:#1b2430; --muted:#5f6b78; --line:#cfd6de; --accent:#1d5fa8; --error:#b3261e;
  --note:#fff8db; --note-line:#e2c76b; --box:#eef1f5; font-family: system-ui, "Segoe UI", sans-serif; }
body { margin:0; background:var(--bg); color:var(--fg); }
.screen { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:0 0 24px; min-width:0; overflow:hidden; max-width:900px; margin:24px auto; }
@media (max-width:948px) { .screen { margin:0; border-radius:0; border-left:0; border-right:0; } }
.screen > section, .screen > .body { padding:0 24px; }
@media (max-width:520px) { .screen > section, .screen > .body { padding:0 16px; } }
.screen h1 { font-size:22px; margin:20px 0 8px; }
.screen h2 { font-size:17px; margin:24px 0 8px; padding-top:16px; border-top:1px solid var(--line); }
.screen h3 { font-size:15px; margin:16px 0 6px; }
.screen p, .screen li, .screen td, .screen th { font-size:14px; line-height:1.55; }
.screen label { display:block; margin-top:14px; font-weight:600; font-size:14px; }
.screen input, .screen textarea, .screen select { width:100%; box-sizing:border-box; margin-top:6px; padding:8px; border:1px solid var(--line); border-radius:6px; font:inherit; }
.screen .error { color:var(--error); font-size:13px; margin-top:8px; }
.screen .hint { color:var(--muted); font-size:13px; }
.screen button, .btn { display:inline-block; margin-top:14px; padding:8px 18px; border:0; border-radius:6px; background:var(--accent); color:#fff; font:inherit; font-size:14px; font-weight:600; text-decoration:none; }
.btn.phu { background:transparent; color:var(--accent); border:1px solid var(--accent); padding:5px 12px; font-size:13px; margin-top:8px; }
.top { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:12px 24px; border-bottom:1px solid var(--line); background:var(--box); font-size:14px; }
.top b { margin-right:auto; }
.top a { color:var(--accent); text-decoration:none; }
.top a.on { font-weight:700; text-decoration:underline; }
.box { background:var(--box); border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin:10px 0; }
.canh { border-left:4px solid var(--error); }
table { border-collapse:collapse; width:100%; }
th, td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.scroll { overflow-x:auto; }
code { font-size:13px; background:var(--box); padding:1px 4px; border-radius:4px; }
.the { border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin:8px 0; }
.the .dau { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; }
.nhan { font-size:12px; border:1px solid var(--line); border-radius:999px; padding:1px 8px; color:var(--muted); }
/* Sơ đồ bằng HTML: ngang trên máy tính, dọc trên điện thoại (không dùng ảnh, chữ không bị thu nhỏ) */
figure.so-do { margin:14px 0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fbfcfd; }
figure.so-do figcaption { font-size:13px; font-weight:600; color:var(--muted); margin-bottom:10px; }
.luong { display:flex; align-items:stretch; gap:0; }
.luong > .o { flex:1 1 0; min-width:0; border:1.5px solid var(--fg); border-radius:8px; padding:8px 10px; background:var(--surface); font-size:13px; line-height:1.4; }
.luong > .o b { display:block; font-size:14px; margin-bottom:2px; }
.luong > .o small { color:var(--muted); }
.luong > .o.nhan-manh { border-color:var(--accent); border-width:2px; }
.luong > .o.mo { border-style:dashed; color:var(--muted); }
.luong > .mui { flex:0 0 28px; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--muted); }
.luong > .mui::before { content:"→"; }
.ve { margin-top:8px; font-size:13px; color:var(--muted); text-align:center; border-top:1.5px dashed var(--line); padding-top:6px; }
.vung { font-size:12px; color:var(--muted); display:flex; gap:0; margin-bottom:4px; }
@media (max-width:640px) {
  .luong { flex-direction:column; }
  .luong > .mui { flex-basis:22px; }
  .luong > .mui::before { content:"↓"; }
}
.chon { display:grid; grid-template-columns:minmax(0,1.3fr) 28px minmax(0,1fr); gap:6px 0; align-items:center; font-size:13px; }
.chon .cau { border:1.5px solid var(--fg); border-radius:8px; padding:6px 10px; background:var(--surface); }
.chon .cc { border:2px solid var(--accent); border-radius:8px; padding:6px 10px; background:var(--surface); font-family:ui-monospace,Consolas,monospace; font-size:12.5px; }
.chon .mui { text-align:center; color:var(--muted); }
@media (max-width:520px) { .chon { grid-template-columns:1fr; } .chon .mui::before { content:"↓"; } .chon .mui { font-size:0; } .chon .mui::before { font-size:16px; } .chon .cc { margin-bottom:8px; } }
.moc { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; position:relative; }
.moc > div { border-top:4px solid var(--line); padding:8px 8px 0 0; font-size:12.5px; line-height:1.4; }
.moc > div.xong { border-top-color:var(--accent); }
.moc > div.nay { border-top-color:var(--accent); border-top-style:dashed; }
.moc b { display:block; font-size:13px; }
@media (max-width:640px) { .moc { grid-template-columns:1fr; } .moc > div { border-top:0; border-left:4px solid var(--line); padding:4px 0 10px 10px; } .moc > div.xong { border-left-color:var(--accent); } .moc > div.nay { border-left-color:var(--accent); border-left-style:dashed; } }

.top form { display:inline; margin:0; }
.top button { margin:0; padding:4px 12px; background:transparent; color:var(--accent); border:1px solid var(--accent); font-size:13px; }
.box.ok { border-left:4px solid #2e7d32; }
.box.loi { border-left:4px solid var(--error); color:var(--error); }
.the p { margin:6px 0; }
.the dl { margin:6px 0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:2px 10px; font-size:13px; }
.the dt { color:var(--muted); } .the dd { margin:0; overflow-wrap:anywhere; }
.hep { max-width:420px; }
.ten-trang { margin-top:20px; }
.cach { margin-top:18px; }
.screen form { margin:0; }