/* คู่มือในระบบ (/manual/*) — prefix gm- ทุกคลาส กันชนกับธีม (ธีมมี .page .row .step อยู่แล้ว) */
:root {
  --gm-ink: #1f2433; --gm-muted: #5d6475; --gm-brand: #6259ca; --gm-brand-soft: #efeefb;
  --gm-ok-soft: #e4f6f0; --gm-warn-soft: #fff4e0; --gm-bad: #d93838; --gm-bad-soft: #fdecec; --gm-line: #e3e5ee;
}
body.gm-body { background: #f0f0f5; color: var(--gm-ink); margin: 0; }
.gm { max-width: 920px; margin: 0 auto; padding: 16px; font-size: 16px; line-height: 1.6; }
.gm * { box-sizing: border-box; }
.gm h1 { font-size: 30px; line-height: 1.25; margin: 0 0 6px; color: inherit; }
.gm h2 { font-size: 21px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; color: var(--gm-ink); }
.gm h3 { font-size: 17px; margin: 14px 0 6px; color: var(--gm-ink); }
.gm p { margin: 4px 0 8px; }
.gm ul, .gm ol { margin: 4px 0 8px; padding-left: 22px; }
.gm ul { list-style: disc; }
.gm ol { list-style: decimal; }
.gm h1, .gm h2, .gm h3 { font-weight: 700; }
.gm li { margin: 2px 0; }

.gm-toolbar { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--gm-line); border-radius: 12px; padding: 8px 12px; margin-bottom: 14px; }
.gm-toolbar .gm-brandname { font-weight: 700; color: var(--gm-brand); }
.gm-toolbar .gm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gm-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.gm-toc a { background: #fff; border: 1px solid var(--gm-line); border-radius: 20px; padding: 3px 12px; font-size: 14px; color: var(--gm-brand); text-decoration: none; }

.gm-page { background: #fff; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(30, 30, 60, .06); }
.gm-num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--gm-brand); color: #fff; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex: none; }
.gm-sub { color: var(--gm-muted); }
.gm-shot { display: block; max-width: 100%; height: auto; border: 1px solid var(--gm-line); border-radius: 10px; box-shadow: 0 2px 8px rgba(30, 30, 60, .08); margin: 0 auto; }
.gm-cap { color: var(--gm-muted); font-size: 13px; text-align: center; margin-top: 4px; }
.gm-row { display: flex; gap: 18px; align-items: flex-start; }
.gm-row > * { flex: 1; min-width: 0; }
.gm-box { border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.gm-box b.gm-t { display: block; margin-bottom: 2px; }
.gm-info { background: var(--gm-brand-soft); }
.gm-ok { background: var(--gm-ok-soft); }
.gm-warn { background: var(--gm-warn-soft); }
.gm-bad { background: var(--gm-bad-soft); }
.gm-step { border: 1px solid var(--gm-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; break-inside: avoid; }
.gm-hero { background: linear-gradient(135deg, #6259ca, #8a7ff0); color: #fff; border-radius: 16px; padding: 24px; }
.gm-hero .gm-sub { color: #e6e3ff; font-size: 17px; }
.gm-flow { display: flex; gap: 10px; margin: 14px 0 6px; }
.gm-flow div { flex: 1; background: var(--gm-brand-soft); border-radius: 10px; padding: 10px 6px; text-align: center; font-size: 14px; }
.gm-flow b { display: block; font-size: 22px; color: var(--gm-brand); }
.gm-cmp { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 15px; }
.gm-cmp th, .gm-cmp td { border: 1px solid var(--gm-line); padding: 7px 10px; text-align: left; vertical-align: top; }
.gm-cmp th { background: #f6f7fb; }
.gm-cmp td.gm-bad { background: var(--gm-bad-soft); }
.gm-cmp td.gm-ok { background: var(--gm-ok-soft); }
.gm-kbd { display: inline-block; border: 1px solid #c9cbd6; border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; font-size: 13px; background: #fff; }
.gm-faq { border-left: 4px solid var(--gm-brand); padding: 4px 12px; margin: 10px 0; break-inside: avoid; }
.gm-faq > b:first-child { display: block; }
.gm-step-title { font-size: 21px; }

/* ภาพประกอบมือถือ (วาดด้วย CSS ไม่ใช่ภาพหน้าจอจริงของแอป) */
.gm-phone { width: 180px; margin: 0 auto; border: 9px solid #23252e; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.gm-phone.gm-sm { width: 150px; border-width: 7px; border-radius: 24px; }
.gm-phone .gm-scr { height: 290px; position: relative; padding: 14px 12px; font-size: 13px; line-height: 1.45; }
.gm-phone.gm-sm .gm-scr { height: 260px; font-size: 12px; }
.gm-phone .gm-bar { height: 16px; display: flex; justify-content: center; }
.gm-phone .gm-bar i { width: 60px; height: 5px; border-radius: 3px; background: #23252e; margin-top: -4px; }
.gm-phone .gm-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.gm-app-ic { width: 46px; height: 46px; border-radius: 12px; background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); display: flex; align-items: center; justify-content: center; flex: none; }
.gm-app-ic span { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: block; }
.gm-search { border: 1px solid #d8dae3; border-radius: 18px; padding: 5px 10px; color: #555; margin-bottom: 12px; font-size: 12px; }
.gm-btn-g { background: #1a73e8; color: #fff; border-radius: 16px; padding: 4px 0; text-align: center; font-weight: 600; margin-top: 10px; }
.gm-fab { position: absolute; right: 14px; bottom: 16px; width: 46px; height: 46px; border-radius: 14px; background: #c2e7ff; color: #0b57d0; font-size: 26px; line-height: 44px; text-align: center; }
.gm-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #f2f4fa; border-radius: 16px 16px 0 0; padding: 12px 14px 16px; }
.gm-sheet div { padding: 8px 4px; border-radius: 8px; }
.gm-hl { outline: 2.5px solid var(--gm-bad); outline-offset: 1px; }
.gm-sheet .gm-hl, .gm-acc.gm-hl { background: #fff; }
.gm-cam { position: absolute; inset: 0; background: #2b2d33; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; }
.gm-cam .gm-frame { width: 120px; height: 120px; border: 3px solid #fff; border-radius: 14px; background: repeating-linear-gradient(45deg, #ddd 0 6px, #fff 6px 12px); opacity: .85; }
.gm-acc { border-bottom: 1px solid #eceef4; padding: 8px; border-radius: 8px; }
.gm-acc .gm-n { color: #555; font-size: 12px; }
.gm-acc .gm-c { white-space: nowrap; font-size: 23px; letter-spacing: 2px; color: #0b57d0; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.gm-timer { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#0b57d0 0 65%, #d6e2fb 0); flex: none; }
.gm-illu { font-size: 12px; color: var(--gm-muted); text-align: center; margin-top: 6px; }

@media (max-width: 720px) {
  .gm { padding: 10px; font-size: 15px; }
  .gm h1 { font-size: 24px; }
  .gm-page { padding: 14px 12px; }
  .gm-row { flex-direction: column; }
  .gm-row > * { width: 100%; }
  .gm-flow { flex-wrap: wrap; }
  .gm-flow div { flex: 1 1 28%; }
  .gm-toolbar .gm-brandname { display: none; }
  .gm-shot[style*="width"] { width: 100% !important; }
}

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  body.gm-body { background: #fff; min-width: 0 !important; } /* bootstrap ตั้ง body min-width 992px ตอนพิมพ์ → Chrome ย่อทั้งหน้า ตัวหนังสือเล็ก */
  .gm { max-width: none; padding: 0; font-size: 12.5pt; }
  .gm-toolbar, .gm-toc { display: none !important; }
  .gm, .gm * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* contain: paint ตัดเศษสระ/วรรณยุกต์ที่ Chrome วาดหลุดไปขอบล่างตอนแบ่งหน้า (ไม่ล็อกความสูง — ฟอนต์ธีมสูงไม่เท่ากัน) */
  .gm-page { box-shadow: none; padding: 0; margin: 0; border-radius: 0; break-after: page; contain: paint; }
  .gm-page:last-child { break-after: auto; }
}