/* Trang tải file cài máy in Ricoh.
   Người đọc là nhân viên văn phòng, không phải người kỹ thuật, và họ mở trang này lúc
   đang đứng cạnh một cái máy in chưa dùng được. Nên: chữ to, một nút duy nhất nổi hẳn
   lên, và mọi thứ khác xếp sau nó.

   Bảng màu XANH DƯƠNG chứ không phải xanh lá của trang quản lý nhà nghỉ — đây là mảng
   cho thuê máy in, khách hàng khác hẳn, và họ không bao giờ thấy hai trang cạnh nhau.

   ⚠️ KHÔNG dùng Google Fonts: CSP của hệ thống là `font-src 'self'` (src/app.js), nên
   font ngoài im lặng không tải và chữ rơi về mặc định trình duyệt. */

:root {
  --xanh: #14304a;
  --xanh-dam: #0d2337;
  --xanh-sang: #1d6fb8;
  --nen: #f7f9fb;
  --nen-the: #ffffff;
  --chu: #16202b;
  --chu-mo: #5b6b7a;
  --vien: #dde5ec;
  --vang-nen: #fdf6e3;
  --vang-vien: #e8d9a8;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.khung {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.2rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Grid/flex con mặc định không hẹp hơn nội dung tối thiểu của nó, nên một khối rộng
   (bảng, khối mã) kéo giãn cả trang và làm TOÀN TRANG cuộn ngang trên điện thoại.
   Đã dính một lần ở trang quản lý — xem CLAUDE.md. */
.khung > * { min-width: 0; }

/* ── đầu trang ──────────────────────────────────────────────────────── */

.dau { text-align: center; }

.nhan {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  background: #e7eff6;
  color: var(--xanh);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.dau h1 {
  margin: 0 0 .8rem;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--xanh-dam);
}

/* ── nút tải ────────────────────────────────────────────────────────── */

.khoi-tai { text-align: center; }

.nut-tai {
  display: inline-flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.1rem 2.4rem;
  border-radius: 14px;
  background: var(--xanh-sang);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(29, 111, 184, .28);
  transition: transform .12s ease, box-shadow .12s ease;
}

.nut-tai:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(29, 111, 184, .34); }
.nut-tai:active { transform: translateY(0); }

.nut-chu { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.nut-phu { font-size: .85rem; opacity: .85; }

.canh-hdh {
  margin: 1rem auto 0;
  max-width: 30rem;
  padding: .7rem 1rem;
  border: 1px solid var(--vang-vien);
  border-radius: 10px;
  background: var(--vang-nen);
  color: #6b4e00;
  font-size: .92rem;
}

/* ── các khối nội dung ──────────────────────────────────────────────── */

section h2 {
  margin: 0 0 1.1rem;
  font-size: 1.25rem;
  color: var(--xanh-dam);
}

/* Bốn dòng hướng dẫn. Không đánh số tròn, không thẻ viền — mỗi thứ trang trí là một
   thứ mắt phải lướt qua trước khi tới chữ. */
.day-gon {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.day-gon > li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.05rem;
}

.day-gon > li::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xanh-sang);
}

.day-gon a { color: var(--xanh-sang); }

/* ── câu hỏi hay gặp ────────────────────────────────────────────────── */

details {
  border: 1px solid var(--vien);
  border-radius: 10px;
  background: var(--nen-the);
  margin-bottom: .6rem;
  overflow: hidden;
}

summary {
  padding: .85rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--xanh-dam);
  list-style: none;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: '+';
  float: right;
  color: var(--chu-mo);
  font-weight: 400;
}

details[open] summary::after { content: '\2013'; }

details p { margin: 0 0 .7rem; padding: 0 1.1rem; color: var(--chu-mo); }
details p:last-child { margin-bottom: 1rem; }

/* Mục scan mở sẵn: đó là việc người dùng dễ bỏ sót nhất, và bỏ sót nó nghĩa là họ kết
   luận scan bị hỏng. Viền vàng để nó không lẫn vào đám câu hỏi bên dưới. */
details[open].nhac, details.nhac { border-color: var(--vang-vien); background: var(--vang-nen); }
details.nhac summary { color: #6b4e00; }

code {
  padding: .1rem .35rem;
  border-radius: 5px;
  background: #eef2f6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  word-break: break-all;
}

/* ── chân trang ─────────────────────────────────────────────────────── */

.chan {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid var(--vien);
  color: var(--chu-mo);
}

.chan a { color: var(--xanh-sang); font-weight: 600; }