/* ============================================================================
 *  ช้าง ไพล์ (Chang Pile) — manual.css
 *  สไตล์กลางของ "คู่มือการใช้งานเว็บแอป" ทั้ง 4 เล่ม
 *    · manual-earthquake.html   โปรแกรมคำนวณแรงแผ่นดินไหว มยผ.1301/1302-61
 *    · manual-wind.html         โปรแกรมคำนวณแรงลม มยผ.1311-50
 *    · manual-cpm-planner.html  CPM Planner วางแผนงานก่อสร้าง
 *    · manual-erp-studio.html   ERP Studio ระบบบริหารงานก่อสร้าง
 *
 *  ไฟล์นี้เป็น "ส่วนต่อขยาย" ของ policy.css — ต้องโหลด policy.css ก่อนเสมอ
 *  เพื่อให้แถบบน ปุ่มกลับขึ้นด้านบน กล่อง section ตาราง และฉบับพิมพ์ A4
 *  หน้าตาเหมือนหน้านโยบายทุกประการ แก้ที่เดียวเปลี่ยนพร้อมกันทั้งเว็บ
 * ========================================================================== */

/* ---- โครงหน้า: สารบัญค้างซ้าย + เนื้อหาขวา ---- */
.wrap.mwrap{max-width:1180px}
.mlayout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:26px;align-items:start;margin-top:16px}
.mbody{min-width:0}                      /* กันตารางกว้างดันคอลัมน์จนล้นกรอบ */
.mbody > section:first-child{margin-top:0}

.toc{position:sticky;top:18px;background:#fff;border:1px solid #EADFCE;border-radius:18px;
     padding:18px 16px;box-shadow:0 24px 50px -44px rgba(23,45,70,.4)}
.toc h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#8A7A63;
        font-family:"Kanit",sans-serif;font-weight:600;margin-bottom:10px}
.toc a{display:flex;align-items:baseline;gap:9px;padding:8px 10px;border-radius:10px;
       font-size:13.5px;font-weight:500;color:#4A6178;line-height:1.5;
       border-left:3px solid transparent;transition:background .16s,color .16s,border-color .16s}
.toc a:hover{background:#FBF7EF;color:#17385C}
.toc a.on{background:#FBF7EF;color:#17385C;font-weight:600;border-left-color:#E87E2B}
.toc a .n{flex:none;font-size:11.5px;font-weight:700;color:#B8860B;min-width:14px}

@media(max-width:980px){
  .mlayout{grid-template-columns:1fr;gap:16px}
  .toc{position:static;padding:16px 14px}
  .toc .list{display:flex;flex-wrap:wrap;gap:6px}
  .toc a{border-left:none;border:1px solid #EADFCE;padding:7px 12px;font-size:13px}
  .toc a.on{border-color:#E87E2B}
}

/* ---- แถบเริ่มต้นใช้งานเร็ว (ใต้หัวเรื่อง) ---- */
.quick{margin-top:16px;background:linear-gradient(135deg,#17385C,#1F4E79 62%,#255C8E);
       color:#EAF1F8;border-radius:18px;padding:24px 28px;
       box-shadow:0 26px 54px -40px rgba(23,45,70,.85)}
.quick h2{font-size:17px;color:#fff;display:flex;align-items:center;gap:9px}
.quick h2 svg{flex:none;color:#F0A968}
.quick .qsub{font-size:13.5px;color:#B9CCE0;margin-top:5px}
.quick ol{counter-reset:qs;margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;
          grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.quick ol li{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
             border-radius:13px;padding:13px 15px 14px 42px;font-size:13.5px;line-height:1.65;color:#E4EDF6}
.quick ol li b{display:block;color:#fff;font-family:"Kanit",sans-serif;font-weight:500;font-size:14px;margin-bottom:2px}
.quick ol li::before{counter-increment:qs;content:counter(qs);position:absolute;left:13px;top:13px;
                     width:21px;height:21px;border-radius:50%;background:#E87E2B;color:#fff;
                     font:700 12px/21px "Sarabun",sans-serif;text-align:center}

/* ---- ป้ายบอกสิทธิ์ / สถานะ ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
      padding:5px 12px;border-radius:99px;border:1px solid #EADFCE;background:#FBF7EF;color:#8A7A63}
.chip.free{background:#EAF1F8;border-color:#D3DEEB;color:#28486E}
.chip.member{background:#FCF4E8;border-color:#F0DFC0;color:#8A6410}
.chip.vip{background:linear-gradient(100deg,#B8860B,#E8B33C);border-color:#B8860B;color:#fff}
.chip.ok{background:#E1F3E8;border-color:#C4E6D2;color:#1B7A46}

/* ---- ชื่อปุ่มและชื่อเมนูที่อ้างถึงในเนื้อความ ---- */
.ui{display:inline-block;font-family:"Kanit",sans-serif;font-weight:500;font-size:13px;
    padding:1px 8px;border-radius:7px;background:#F3ECDF;color:#8A5A14;
    border:1px solid #E8D6B0;white-space:nowrap;line-height:1.7}
.ui.nav{background:#EAF1F8;border-color:#D3DEEB;color:#28486E}
.path{font-family:"Kanit",sans-serif;font-size:13px;color:#5A6B80}
.path b{color:#17385C;font-weight:500}

/* ---- ขั้นตอนแบบมีลำดับ ---- */
.steps{counter-reset:st;list-style:none;margin:16px 0 0;padding:0}
.steps > li{position:relative;padding:0 0 20px 46px;border-left:2px solid #F1E9DA;margin-left:14px}
.steps > li:last-child{border-left-color:transparent;padding-bottom:0}
.steps > li::before{counter-increment:st;content:counter(st);position:absolute;left:-16px;top:-2px;
                    width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #E87E2B;
                    color:#B95F14;font:700 13px/26px "Sarabun",sans-serif;text-align:center}
.steps > li > b{display:block;font-family:"Kanit",sans-serif;font-weight:500;font-size:15px;
                color:#17385C;line-height:1.45;margin-bottom:3px}
.steps > li p{margin:6px 0 0}
.steps > li ul{margin-top:7px}

/* ---- การ์ดหน้าจอ / แนวคิดหลัก ---- */
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));margin-top:16px}
.card{background:#FBF7EF;border:1px solid #EADFCE;border-radius:14px;padding:15px 17px}
.card h4{font-family:"Kanit",sans-serif;font-weight:600;font-size:14.5px;color:#17385C;margin:0;
         display:flex;align-items:baseline;gap:8px}
.card h4 .n{font-size:11.5px;font-weight:700;color:#B8860B}
.card p{margin:6px 0 0;font-size:13.5px;color:#5A6B80;line-height:1.7}
.card .tag{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:600;color:#8A7A63;
           background:#fff;border:1px solid #EADFCE;border-radius:99px;padding:3px 10px}

/* ---- กล่องหมายเหตุเพิ่มเติมจาก policy.css (.note / .warn) ---- */
.note.tip{border-color:#C4E6D2;background:#F1F9F4}
.note.tip b{color:#1B7A46}
.note.stop{border-color:#F2CFC9;background:#FDF2F0}
.note.stop b{color:#B3261E}
.note .lbl{display:block;font-family:"Kanit",sans-serif;font-weight:600;font-size:13px;
           margin-bottom:4px;color:#17385C}

/* ---- คำถามที่พบบ่อย / แก้ปัญหา ---- */
.faq{margin-top:14px;border-top:1px solid #F1E9DA}
.faq details{border-bottom:1px solid #F1E9DA}
.faq summary{cursor:pointer;list-style:none;padding:14px 34px 14px 2px;position:relative;
             font-family:"Kanit",sans-serif;font-weight:500;font-size:14.5px;color:#17385C}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:11px;font-size:19px;color:#B8860B;
                    font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:#B95F14}
.faq summary:focus-visible{outline:2px solid #E87E2B;outline-offset:2px;border-radius:8px}
.faq .a{padding:0 2px 16px;font-size:14px;color:#33475C;line-height:1.85}
.faq .a p{margin:0}
.faq .a p + p{margin-top:9px}
.faq .a ul{margin:9px 0 0;padding-left:22px}

/* ---- แถบคู่มือเล่มอื่น ---- */
.others{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:14px}
.others a{display:block;background:#fff;border:1px solid #EADFCE;border-left:4px solid #E8D6B0;
          border-radius:13px;padding:14px 16px;transition:transform .16s,box-shadow .16s,border-color .16s}
.others a:hover{transform:translateY(-2px);border-left-color:#E87E2B;
                box-shadow:0 18px 34px -26px rgba(23,45,70,.6)}
.others a b{display:block;font-family:"Kanit",sans-serif;font-weight:600;font-size:14.5px;color:#17385C}
.others a span{display:block;font-size:12.5px;color:#8A7A63;margin-top:3px;line-height:1.6}

/* ---- ปุ่มเปิดโปรแกรมจริง (ในหัวเรื่อง) ---- */
.openapp{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
         background:#E87E2B;color:#fff;font:600 14.5px/1 "Sarabun",sans-serif;
         padding:12px 20px;border-radius:11px;
         box-shadow:0 14px 28px -14px rgba(232,126,43,.9);transition:transform .18s,box-shadow .18s}
.openapp:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(232,126,43,1)}
.openapp svg{flex:none}

/* ---- ตารางอ้างอิงช่องกรอก: คอลัมน์แรกเป็นชื่อช่อง ---- */
table.fields td:first-child{font-weight:600;color:#17385C}
section code{font-family:"Sarabun",monospace;font-size:13px;
      background:#FBF7EF;border:1px solid #EADFCE;border-radius:6px;padding:1px 6px;color:#8A5A14}
.tscroll{overflow-x:auto;margin-top:14px}
.tscroll table{margin-top:0;min-width:540px}

@media(max-width:640px){
  .quick{padding:20px 18px}
  .steps > li{padding-left:38px}
  .openapp{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   ฉบับพิมพ์ A4
   ออกแบบให้อ่านรู้เรื่องแม้ผู้ใช้ "ไม่ได้" เปิดตัวเลือกกราฟิกพื้นหลัง
   ซึ่งเบราว์เซอร์ปิดไว้เป็นค่าเริ่มต้น — จึงเลี่ยงการสื่อความหมายด้วยสีพื้น
   แล้วใช้ "เส้นขอบซ้าย" กับน้ำหนักตัวอักษรแทนทั้งหมด
   ══════════════════════════════════════════════════════════════════════════ */
@media print{
  .toc,.openapp,.others,.otherwrap{display:none!important}
  .mlayout{display:block;margin-top:0}

  /* ── ชื่อปุ่มและชื่อเมนูในเนื้อความ ──────────────────────────────────
     บนจอเป็นชิปแบบ inline-block มีกรอบและ line-height ของตัวเอง
     พอขึ้นกระดาษกล่องนี้สูงกว่าบรรทัด แล้วไปทับบรรทัดถัดไป
     ⇒ พิมพ์เป็นข้อความล้วนในเครื่องหมายคำพูด ไม่มีกล่อง ไม่มีความสูงพิเศษ */
  .ui{display:inline;padding:0;border:none;background:none;border-radius:0;
      line-height:inherit;font-family:inherit;font-size:inherit;font-weight:700;color:#8A5A14;
      white-space:normal}
  .ui::before{content:"\201C"}
  .ui::after{content:"\201D"}

  /* ป้ายสิทธิ์ใต้หัวเรื่อง — เรียงเป็นบรรทัดเดียวคั่นด้วยจุด */
  .chips{display:block;margin-top:2mm;font-size:9.5pt;color:#5A6B80}
  .chip{display:inline;padding:0;border:none;background:none;border-radius:0;
        font-size:inherit;font-weight:600;color:inherit}
  .chip + .chip::before{content:" · ";font-weight:400;color:#A99A82}

  /* ── แถบเริ่มใช้งานเร็ว ─────────────────────────────────────────── */
  .quick{background:none;color:#12243A;border:none;border-left:2.5pt solid #17385C;
         border-radius:0;padding:0 0 0 4mm;margin-top:5mm;box-shadow:none}
  .quick h2{color:#17385C;font-size:12.5pt}
  .quick h2 svg{display:none}
  .quick .qsub{color:#5A6B80;font-size:9.5pt}
  .quick ol{display:block;margin-top:2.5mm}
  .quick ol li{position:relative;background:none;border:none;border-radius:0;color:#12243A;
               padding:0 0 2mm 7mm;font-size:10pt;line-height:1.7;
               break-inside:avoid;page-break-inside:avoid}
  .quick ol li::before{background:none;color:#8A5A14;font:700 10pt/1.7 "Sarabun",sans-serif;
                       left:0;top:0;width:6mm;height:auto;border-radius:0;text-align:left}
  .quick ol li b{color:#17385C;display:inline;margin-right:4px}

  /* ── การ์ดแนวคิด — ใช้เส้นขอบซ้ายแทนพื้นสี ─────────────────────── */
  .cards{display:block}
  .card{background:none;border:none;border-left:1.5pt solid #C9BCA4;border-radius:0;
        margin-top:3mm;padding:0 0 0 3.5mm;break-inside:avoid;page-break-inside:avoid}
  .card h4{font-size:11pt}
  .card p{font-size:10pt;margin-top:1mm}
  .card .tag{background:none;border:none;padding:0;margin-top:1mm;font-size:9pt;color:#8A7A63}

  /* ── กล่องหมายเหตุ — แยกชนิดด้วยสีเส้นขอบซ้าย ──────────────────── */
  .note{background:none;border:none;border-left:2pt solid #C9BCA4;border-radius:0;
        padding:0 0 0 3.5mm;margin-top:3mm;font-size:10pt;
        break-inside:avoid;page-break-inside:avoid}
  .note.warn{border-left-color:#B8860B}
  .note.tip{border-left-color:#1B7F4A}
  .note.stop{border-left-color:#B3261E}
  .note .lbl{font-size:10.5pt;margin-bottom:1mm}

  /* ── ขั้นตอนแบบมีลำดับ ──────────────────────────────────────────
     เส้นไทม์ไลน์แนวตั้งใช้ไม่ได้บนกระดาษ เพราะเวลาขึ้นหน้าใหม่
     เส้นจะค้างเป็นขีดสั้น ๆ ลอยอยู่ท้ายหน้าโดยไม่มีเนื้อหาต่อ */
  .steps{margin-top:3mm}
  .steps > li{border-left:none;margin-left:0;padding:0 0 3.5mm 9mm}
  .steps > li:last-child{padding-bottom:0}
  .steps > li::before{left:0;top:0;width:6.5mm;height:auto;border:none;background:none;
                      border-radius:0;color:#B95F14;
                      font:700 10.5pt/1.6 "Sarabun",sans-serif;text-align:left}
  /* หัวข้อขั้นตอนต้องไม่ค้างท้ายหน้าโดยไม่มีคำอธิบายตาม แต่ตัวขั้นตอนเอง
     ปล่อยให้ไหลข้ามหน้าได้ ถ้าห้ามตัดทั้งก้อนจะเกิดช่องว่างท้ายหน้าเยอะ */
  .steps > li > b{font-size:11pt;margin-bottom:1mm;break-after:avoid;page-break-after:avoid}

  /* ── คำถามที่พบบ่อย — กางทุกข้อ ตัดเครื่องหมายพับ ──────────────── */
  .faq{border-top:.8pt solid #DED2BC}
  .faq details{break-inside:avoid;page-break-inside:avoid;border-bottom:.8pt solid #EDE3D2}
  .faq summary{padding:2.5mm 0 1mm;font-size:11pt}
  .faq summary::after{display:none}
  .faq .a{display:block!important;padding:0 0 2.5mm;font-size:10pt}
  /* manual.js กาง <details> ทุกอันให้ตอน beforeprint อยู่แล้ว
     บรรทัดนี้เป็นตาข่ายรองรับกรณีสคริปต์ไม่ทำงาน — เบราว์เซอร์รุ่นใหม่
     เปิดเนื้อหาข้างในให้ได้จาก CSS ล้วน คำตอบจึงไม่หายไปจากกระดาษ */
  details::details-content{content-visibility:visible!important;block-size:auto!important}

  /* ── ตาราง ─────────────────────────────────────────────────────── */
  .tscroll{overflow:visible;break-inside:auto}
  .tscroll table{min-width:0}

  /* ── กติกาการขึ้นหน้าใหม่ ───────────────────────────────────────
     ตั้งไว้เท่าที่จำเป็นเท่านั้น กฎ "ห้ามตัดกลาง" ทุกอันมีต้นทุนเป็น
     ช่องว่างท้ายหน้า เพราะก้อนที่ลงไม่พอจะถูกยกไปทั้งก้อน
     ⇒ ห้ามตัดเฉพาะก้อนสั้นที่อ่านขาดตอนแล้วเสียความ (การ์ด · หมายเหตุ ·
       คำถามแต่ละข้อ · แถวตาราง) ส่วนก้อนยาวปล่อยให้ไหลข้ามหน้าได้ */
  section h2,section h3{break-after:avoid;page-break-after:avoid}
  section p,section li{orphans:2;widows:2}

  /* ── ความแน่นของหน้ากระดาษ ──────────────────────────────────────
     ระยะบรรทัด 1.75 ของฉบับหน้าจอกว้างเกินไปสำหรับกระดาษ ลดเหลือ 1.62
     ยังพอสำหรับสระบนล่างของภาษาไทย แต่ได้เนื้อหาต่อหน้าเพิ่มราว 8% */
  .mbody{line-height:1.62}
  section{margin-top:5mm}
  section p,section ul,section ol{margin-top:1.5mm}
  section li{margin-top:.8mm}
}