/* ============================================================
   manual.css — คู่มือการใช้งาน (A4 พิมพ์ได้ / บันทึกเป็น PDF)
   ⚠ แก้ระบบเมื่อไร ต้องปรับ manual.php + ไฟล์นี้ให้ตรงด้วยเสมอ
   ============================================================ */
:root{
    --mn-blue:#2563eb; --mn-blue-d:#1d4ed8; --mn-blue-l:#eff6ff;
    --mn-ink:#1e293b; --mn-mute:#64748b; --mn-line:#e2e8f0;
    --mn-bg:#f1f5f9; --mn-ok:#16a34a; --mn-warn:#f59e0b; --mn-red:#dc2626;
    --mn-paper:210mm; --mn-pad:16mm;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.mn{
    background:var(--mn-bg); color:var(--mn-ink);
    font-family:'Sarabun','TH Sarabun New',sans-serif;
    font-size:14.5px; line-height:1.62; padding:0 0 40px;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

/* ---------- แถบเครื่องมือ ---------- */
.mn-bar{
    position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px;
    flex-wrap:wrap; justify-content:center;
    background:#fff; border-bottom:1px solid var(--mn-line); padding:10px 16px;
    box-shadow:0 2px 10px rgba(15,23,42,.06);
}
.mn-btn{
    display:inline-block; border:0; cursor:pointer; font:inherit; font-weight:600;
    background:var(--mn-blue); color:#fff; padding:8px 16px; border-radius:10px;
    text-decoration:none; line-height:1.4;
}
.mn-btn:hover{background:var(--mn-blue-d)}
.mn-btn--ghost{background:#fff; color:var(--mn-blue); border:1px solid var(--mn-line)}
.mn-btn--ghost:hover{background:var(--mn-blue-l)}
.mn-switch{display:inline-flex; background:#f1f5f9; border-radius:12px; padding:3px; gap:3px}
.mn-switch button{
    border:0; background:transparent; font:inherit; font-weight:600; color:var(--mn-mute);
    padding:6px 14px; border-radius:9px; cursor:pointer;
}
.mn-switch button.on{background:#fff; color:var(--mn-blue); box-shadow:0 1px 4px rgba(15,23,42,.12)}
.mn-hint{
    max-width:var(--mn-paper); margin:14px auto 0; padding:0 12px;
    color:var(--mn-mute); font-size:13.5px; text-align:center;
}

/* ---------- หน้ากระดาษ A4 ---------- */
.mn-page{
    width:var(--mn-paper); min-height:297mm; margin:18px auto; background:#fff;
    padding:var(--mn-pad); border-radius:4px;
    box-shadow:0 4px 18px rgba(15,23,42,.10);
    page-break-after:always; break-after:page; position:relative;
}
.mn-page:last-of-type{page-break-after:auto; break-after:auto}

/* ---------- ปก ---------- */
.mn-cover{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.mn-cover__seal{width:120px; height:auto; margin-bottom:26px}
.mn-cover h1{font-size:40px; margin:0 0 10px; color:var(--mn-blue-d); font-weight:700}
.mn-cover__sub{font-size:20px; margin:0 0 6px; color:var(--mn-ink)}
.mn-cover__org{font-size:26px; font-weight:700; margin:6px 0 0}
.mn-cover__rule{width:90px; height:4px; background:var(--mn-blue); border-radius:4px; margin:26px 0}
.mn-cover__meta{font-size:16px; color:var(--mn-mute); margin:0}
.mn-cover__note{
    position:absolute; left:var(--mn-pad); right:var(--mn-pad); bottom:22mm;
    font-size:13px; color:var(--mn-mute); margin:0;
}

/* ---------- สารบัญ ---------- */
.mn-toc{list-style:none; margin:18px 0 0; padding:0; counter-reset:none}
.mn-toc li{margin:0 0 2px}
.mn-toc a{
    display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--mn-ink);
    padding:5px 10px; border-radius:9px;
}
.mn-toc a:hover{background:var(--mn-blue-l)}
.mn-toc span{flex:1 1 auto}
.mn-toc span::after{
    content:''; display:inline-block; width:100%; margin-left:8px;
    border-bottom:1px dotted #cbd5e1; transform:translateY(-4px);
}
.mn-toc b{color:var(--mn-blue); font-size:17px; min-width:2.2em; text-align:right}

/* ---------- หัวข้อ ---------- */
.mn-h2{
    font-size:23px; margin:0 0 12px; padding-bottom:8px; color:var(--mn-blue-d);
    border-bottom:3px solid var(--mn-blue); display:flex; align-items:center; gap:12px;
}
.mn-num{
    background:var(--mn-blue); color:#fff; width:38px; height:38px; flex:0 0 38px;
    border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
    font-size:19px;
}
.mn-h3{font-size:17px; margin:15px 0 7px; color:var(--mn-ink)}
.mn-h3::before{content:'▍'; color:var(--mn-blue); margin-right:6px}

/* ---------- กล่องข้อความ ---------- */
.mn-why,.mn-tip,.mn-warn{
    border-radius:11px; padding:9px 13px; margin:10px 0; font-size:14px;
    border-left:5px solid; page-break-inside:avoid; break-inside:avoid;
}
.mn-why{background:var(--mn-blue-l); border-color:var(--mn-blue)}
.mn-why b{color:var(--mn-blue-d)}
.mn-tip{background:#f0fdf4; border-color:var(--mn-ok)}
.mn-tip b{color:#15803d}
.mn-warn{background:#fffbeb; border-color:var(--mn-warn)}
.mn-warn b{color:#b45309}

.mn-steps,.mn-list{margin:8px 0 12px; padding-left:24px}
.mn-steps li,.mn-list li{margin-bottom:4px}
.mn-steps{counter-reset:st; list-style:none; padding-left:0}
.mn-steps>li{position:relative; padding-left:34px; margin-bottom:6px}
.mn-steps>li::before{
    counter-increment:st; content:counter(st);
    position:absolute; left:0; top:2px; width:23px; height:23px; border-radius:50%;
    background:var(--mn-blue); color:#fff; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.kbd{
    display:inline-block; border:1px solid #cbd5e1; border-bottom-width:2px; border-radius:5px;
    padding:0 6px; font-size:12.5px; background:#f8fafc; font-family:inherit;
}

/* ---------- ตาราง ---------- */
.mn-table{width:100%; border-collapse:collapse; margin:8px 0 11px; font-size:14px;
    page-break-inside:avoid; break-inside:avoid}
.mn-table th{background:var(--mn-blue); color:#fff; text-align:left; font-weight:600; padding:7px 10px}
.mn-table td{border:1px solid var(--mn-line); padding:6px 10px; vertical-align:top}
.mn-table tbody tr:nth-child(even) td{background:#f8fafc}
.mn-table--perm td:not(:first-child){text-align:center; white-space:nowrap}
.mn-table--perm th:not(:first-child){text-align:center}
.mn-table .y{color:var(--mn-ok); font-weight:700}
.mn-table .n{color:var(--mn-mute)}
.mn-faq td.q{width:32%; font-weight:600; background:var(--mn-blue-l); color:var(--mn-blue-d)}

.mn-end{
    margin-top:34px; padding-top:18px; border-top:2px solid var(--mn-line);
    text-align:center; color:var(--mn-mute); font-size:14px;
}
.mn-end__t{font-weight:700; color:var(--mn-ink); font-size:17px; margin-bottom:4px}

/* ============================================================
   ภาพหน้าจอจริงของระบบ (img/manual/*.jpg)
   ============================================================ */
.mn-fig{margin:11px 0 14px; page-break-inside:avoid; break-inside:avoid; text-align:center}
.mn-fig figcaption{font-size:12.5px; color:var(--mn-mute); margin-top:7px; line-height:1.5}
.mn-shot{
    display:block; margin:0 auto; max-width:100%; height:auto;
    max-height:118mm; width:auto; object-fit:contain;
    border:1px solid #cbd5e1; border-radius:10px;
    box-shadow:0 2px 10px rgba(15,23,42,.10);
}
.mn-shot--phone{max-width:270px; max-height:150mm; border-radius:16px}
/* ภาพยาวมาก ๆ ไม่ให้กินทั้งหน้ากระดาษ */
.mn-fig--tall .mn-shot{max-height:150mm; width:auto}

/* ============================================================
   สลับฉบับ เดสก์ท็อป / มือถือ
   ============================================================ */
body[data-mode="desktop"] .only-mobile{display:none}
body[data-mode="mobile"]  .only-desktop{display:none}

/* ============================================================
   จอเล็ก — ย่อกระดาษให้พอดีจอ (ไม่กระทบการพิมพ์)
   ============================================================ */
@media screen and (max-width:820px){
    :root{--mn-paper:100%; --mn-pad:16px}
    body.mn{font-size:14.5px}
    .mn-page{min-height:0; margin:12px 8px; width:auto}
    .mn-bar{gap:8px; padding:8px 10px}
    .mn-btn,.mn-switch button{padding:7px 11px; font-size:13px}
    .mn-h2{font-size:20px}
    .mn-num{width:32px; height:32px; flex-basis:32px; font-size:16px}
    .mn-cover h1{font-size:30px}
    .mn-cover__org{font-size:21px}
    .mn-cover__note{position:static; margin-top:26px}
    .mn-table{font-size:13px}
    .mn-table th,.mn-table td{padding:7px 8px}
    .mn-fig{overflow-x:auto; -webkit-overflow-scrolling:touch}
    .mn-shot--phone{max-width:250px}
    .mn-table--perm{display:block; overflow-x:auto; white-space:nowrap}
}

/* ============================================================
   การพิมพ์ — A4 จริง
   ============================================================ */
@page{size:A4 portrait; margin:0}
@media print{
    html,body.mn{background:#fff !important; font-size:14px}
    .noprint,.mn-bar,.mn-hint{display:none !important}
    .mn-page{
        width:210mm; min-height:296mm; margin:0; padding:16mm;
        box-shadow:none; border-radius:0;
        page-break-after:always; break-after:page;
    }
    .mn-page:last-of-type{page-break-after:auto; break-after:auto}
    .mn-toc a{padding:5px 0}
    .mn-toc a:hover{background:none}
    .mn-fig,.mn-table,.mn-why,.mn-tip,.mn-warn{page-break-inside:avoid; break-inside:avoid}
    .mn-h2,.mn-h3{page-break-after:avoid; break-after:avoid}
    .mn-shot{box-shadow:none}
    /* ฉบับที่กำลังดูอยู่เท่านั้นที่ถูกพิมพ์ (กฎสลับด้านบนยังทำงาน) */
}

/* สำรอง: ถ้า JS ไม่ทำงาน ให้เลือกฉบับตามขนาดจอด้วย CSS */
@media screen and (max-width:820px){ body.mn:not([data-mode]) .only-desktop{display:none} }
@media screen and (min-width:821px){ body.mn:not([data-mode]) .only-mobile{display:none} }

.mn-h2 small{font-size:.62em; font-weight:400; color:var(--mn-mute)}