/* =====================================================================
   ตัวเอกสารราชการ + สไตล์สำหรับสั่งพิมพ์
   หน่วยวัดอ้างอิงระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ
   ===================================================================== */

/* ---- ฟอนต์: ใช้ TH Sarabun ที่ติดตั้งในเครื่องก่อน ถ้าไม่มีค่อยใช้ไฟล์ Sarabun ที่ฝังมา ----
   Sarabun โดย Cadson Demak, สัญญาอนุญาต SIL Open Font License 1.1
   แยกเป็นชุดอักษรไทยกับละติน เบราว์เซอร์จะโหลดเฉพาะชุดที่ใช้จริง ---- */
/* ปกติ — อักษรไทย */
@font-face{
  font-family:'SarabunDoc';
  src:local('TH SarabunPSK'),
      local('TH Sarabun New'),
      local('THSarabunNew'),
      local('TH SarabunIT๙'),
      local('Sarabun'),
      url('../fonts/Sarabun-Regular-thai.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* ปกติ — อักษรละตินและตัวเลขอารบิก */
@font-face{
  font-family:'SarabunDoc';
  src:local('TH SarabunPSK'),
      local('TH Sarabun New'),
      local('THSarabunNew'),
      local('TH SarabunIT๙'),
      local('Sarabun'),
      url('../fonts/Sarabun-Regular-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ตัวหนา — อักษรไทย */
@font-face{
  font-family:'SarabunDoc';
  src:local('TH SarabunPSK Bold'),
      local('TH Sarabun New Bold'),
      local('THSarabunNew-Bold'),
      local('Sarabun Bold'),
      url('../fonts/Sarabun-Bold-thai.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* ตัวหนา — อักษรละตินและตัวเลขอารบิก */
@font-face{
  font-family:'SarabunDoc';
  src:local('TH SarabunPSK Bold'),
      local('TH Sarabun New Bold'),
      local('THSarabunNew-Bold'),
      local('Sarabun Bold'),
      url('../fonts/Sarabun-Bold-latin.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ตัวเอียง — อักษรไทย */
@font-face{
  font-family:'SarabunDoc';
  src:local('TH SarabunPSK Italic'),
      local('TH Sarabun New Italic'),
      local('Sarabun Italic'),
      url('../fonts/Sarabun-Italic-thai.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* ตัวเอียง — อักษรละตินและตัวเลขอารบิก */
@font-face{
  font-family:'SarabunDoc';
  src:local('TH SarabunPSK Italic'),
      local('TH Sarabun New Italic'),
      local('Sarabun Italic'),
      url('../fonts/Sarabun-Italic-latin.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --doc-size:16pt;
  --doc-lh:1.35;
  --indent:2.5cm;
  /* ค่าทั้งหมดวัดจากแบบฟอร์มราชการต้นฉบับ (.docx) หน่วยเดิมเป็น twip */
  --mt:1.5cm; --mb:2cm; --ml:3cm; --mr:2cm;
  /* การจัดข้อความในย่อหน้า
     ชิดซ้าย        = left    / auto
     ชิดขอบสองด้าน  = justify / auto             (ยืดเฉพาะช่องว่างระหว่างคำ)
     กระจายแบบไทย   = justify / inter-character  (ตรงกับ w:jc=thaiDistribute ของต้นฉบับ)
     inter-character ต้องใช้คู่กับ text-align:justify เสมอ ลำพังตัวเดียวไม่มีผล */
  --align:justify;
  --text-justify:inter-character;
  /* ระยะเว้นก่อนย่อหน้า — ต้นฉบับใช้ spacing before 120 twip = 6 pt */
  --para-space:6pt;
  /* ระยะจากขอบซ้ายของกระดาษถึงชื่อในวงเล็บของบล็อกลงชื่อ (ต้นฉบับ 8 ซม. จากขอบซ้าย) */
  --sig-left:11cm;
  /* ระยะห่างระหว่างชื่อส่วนราชการกับเบอร์โทรในบันทึกข้อความ */
  --tel-gap:1.5cm;
  /* หนังสือภายนอก: ระยะก่อนส่วนราชการเจ้าของเรื่องและโทรศัพท์ด้านล่างซ้าย */
  --tail-gap:.5cm;
  /* เลื่อนบรรทัดยศในบล็อกลงชื่อ เทียบกับวงเล็บเปิดของชื่อ (ค่าลบ = ไปทางซ้าย)
     ค่า 0 = ตัวอักษรตัวสุดท้ายของยศจบพอดีที่วงเล็บเปิด */
  --sig-rank-shift:0cm;
  /* การวางบรรทัดตำแหน่ง/วันที่/คำลงท้ายในบล็อกลงชื่อ
     กึ่งกลางกับชื่อ = 50% / center   ชิดซ้าย = 0 / flex-start  (ดู .sig-sub) */
  --sig-sub-shift:50%;
  --sig-sub-just:center;
  /* บันทึกข้อความ: ตำแหน่งคำว่า "วันที่" วัดจากขอบซ้ายของกรอบเนื้อหา */
  --memo-date-col:7.95cm;
  /* หนังสือภายนอก: บล็อกส่วนราชการ และบรรทัดวันที่ วัดจากขอบซ้ายของกรอบเนื้อหา */
  --ext-agency-left:9.69cm;
  --ext-date-left:8cm;
  /* คำสั่ง/ประกาศ: บรรทัด "สั่ง ณ วันที่" วัดจากขอบซ้ายของกรอบเนื้อหา */
  --decree-date-left:4.5cm;
}

/* ---------- แผ่นกระดาษ ---------- */
.paper{
  position:relative;
  width:210mm;
  min-height:297mm;
  /* .paper-wrap เป็น flex container ถ้าไม่ล็อกไว้ กระดาษจะถูกบีบเมื่อจอแคบกว่า A4 */
  flex:0 0 auto;
  padding:var(--mt) var(--mr) var(--mb) var(--ml);
  background:#fff;
  color:#000;
  box-shadow:0 1px 3px rgba(16,24,40,.14), 0 12px 32px rgba(16,24,40,.12);
  font-family:'SarabunDoc','TH SarabunPSK','TH Sarabun New','Sarabun','Leelawadee UI','Tahoma',sans-serif;
  font-size:var(--doc-size);
  line-height:var(--doc-lh);
  /* เส้นบอกแนวตัดหน้าใน preview */
  background-image:repeating-linear-gradient(
      to bottom,
      transparent 0, transparent calc(297mm - 1px),
      #e2e6ee calc(297mm - 1px), #e2e6ee 297mm);
  background-repeat:repeat-y;
}

/* ---------- องค์ประกอบร่วม ---------- */
/* ข้อความไทยยาว ๆ ที่ไม่มีเว้นวรรคเลยจะไม่มีจุดตัดบรรทัด และทะลุขอบกระดาษออกไป
   บังคับให้ตัดได้เมื่อจำเป็น เพื่อให้เนื้อหาอยู่ในกรอบตามระยะขอบที่ตั้งไว้เสมอ */
.doc{overflow-wrap:break-word}
.doc p{margin:0;min-width:0}
.doc .sp{height:1em}
.doc .sp-half{height:.5em}
.doc .center{text-align:center}
.doc .right{text-align:right}
.doc .bold{font-weight:700}

/* ตราครุฑ */
.garuda{display:block;margin:0 auto;height:3cm;width:auto}
.garuda.sm{height:1.5cm;margin:0}
.garuda-box{display:flex;justify-content:center}

/* ย่อหน้าเนื้อความ */
.doc .para{
  text-indent:var(--indent);
  text-align:var(--align); text-justify:var(--text-justify);
  margin:var(--para-space) 0 0;
}
.doc .para.noindent{text-indent:0}
.doc .docx-imported-content{min-width:0}
.doc .docx-imported-paragraph.docx-align-center{text-align:center;text-indent:0}
.doc .docx-imported-paragraph.docx-align-right{text-align:right;text-indent:0}
.doc .docx-imported-paragraph.docx-align-left{text-align:left}
.doc .docx-imported-paragraph.docx-align-both{text-align:justify}
.doc .docx-import-table{width:100%;table-layout:auto;margin:10pt 0;break-inside:avoid}
.doc .docx-import-table td{min-width:1.7cm;white-space:normal;overflow-wrap:anywhere;vertical-align:top}

/* บรรทัดหัวข้อแบบ "เรื่อง  ....." (แขวนบรรทัดที่สอง) */
.doc .kv{
  display:flex; align-items:baseline; gap:0;
  margin:var(--para-space) 0 0;
}
.doc .kv > .k{flex:0 0 auto; white-space:pre}
/* ค่าของบรรทัด เรื่อง / เรียน / อ้างถึง / สิ่งที่ส่งมาด้วย — ชิดซ้ายเสมอ ไม่ตามค่าตั้งค่า
   ต้นฉบับกำหนดย่อหน้าพวกนี้เป็น jc=None (ชิดซ้าย) มีแต่เนื้อความที่เป็น thaiDistribute
   ถ้าปล่อยให้ตามค่าตั้งค่า บรรทัดเรื่องที่ยาวจนตัดสองบรรทัดจะโดนเกลี่ยช่องไฟด้วย ซึ่งผิดแบบ */
.doc .kv > .v{flex:1 1 auto; min-width:0; text-align:left}

/* เส้นคั่น */
.doc .rule-full{border:0;border-top:1px solid #000;margin:.35em 0 .5em}
.doc .rule-double{border:0;border-top:3px double #000;margin:.35em 0 .5em}
/* ต้นฉบับใช้เครื่องหมายขีด 57 ตัว ที่ขนาด 16 pt ได้ความยาวราว 10.5 ซม. */
.doc .rule-short{border:0;border-top:1px solid #000;width:10.5cm;margin:.35em auto 0}

/* บล็อกลงชื่อ — กันไม่ให้ถูกตัดข้ามหน้า */
/* ---------- บล็อกลงชื่อ ----------
   แบบฟอร์มต้นฉบับวางชื่อในวงเล็บชิดซ้ายที่ 8 ซม. จากขอบซ้าย (= 11 ซม. จากขอบกระดาษ)
   แล้วกำกับไว้ว่า "ตำแหน่ง (ปรับให้กึ่งกลางกับชื่อเต็ม)"
   ที่นี่จึงยึดชื่อเป็นหลัก แล้วให้บรรทัดอื่นจัดกึ่งกลางกับชื่อโดยอัตโนมัติ */
.doc .sig{
  break-inside:avoid; page-break-inside:avoid;
  /* .sig อยู่ในกรอบเนื้อหาซึ่งเริ่มที่ขอบซ้ายอยู่แล้ว จึงหักระยะขอบออก */
  margin-left:calc(var(--sig-left) - var(--ml));
}
/* ความกว้างของกล่องนี้ = ความกว้างของบรรทัดชื่อเท่านั้น
   บรรทัดอื่นตั้ง width:0 จึงไม่มีผลต่อความกว้าง แล้วล้นออกสองข้างอย่างสมมาตร */
.doc .sig-anchor{display:inline-block; text-align:left}
.doc .sig-name{white-space:nowrap}
/* ช่องไฟด้านในวงเล็บ ตามแบบ ( ชื่อ ) */
.doc .sig-name .nm{padding:0 .45em}
/* ยศ/คำนำหน้า — ลายมือชื่อเขียนต่อท้ายบนบรรทัดเดียวกัน จึงวางให้ยศ *จบ* ที่วงเล็บเปิดของชื่อ
   แล้วปล่อยพื้นที่ทางขวาไว้เซ็น  พ.ต.อ. กับ พันตำรวจเอก จึงจบที่จุดเดียวกันเสมอ
   กล่องกว้าง 0 + justify-content:flex-end ทำให้ข้อความล้นออกทางซ้ายจากจุดนั้น
   (เหตุผลที่ใช้ flex ไม่ใช่ text-align ดูคอมเมนต์ของ .sig-sub ข้างล่าง) */
.doc .sig-rank{
  width:0; white-space:nowrap;
  margin-left:var(--sig-rank-shift);
  display:flex; justify-content:flex-end;
}
/* ตำแหน่ง / วันที่ / คำลงท้าย
   ค่าเริ่มต้นยึด *จุดกึ่งกลางของชื่อ* เป็นหลัก แล้วล้นออกสองข้างเท่ากัน
   ตรงตามที่แบบฟอร์มต้นฉบับกำกับไว้ว่า "ตำแหน่ง (ปรับให้กึ่งกลางกับชื่อเต็ม)"
   จุดยึดจึงคงที่เสมอ ไม่ว่าจะพิมพ์คำย่อ ("ผกก.สภ.โนนนารายณ์")
   หรือคำเต็ม ("ผู้กำกับการสถานีตำรวจภูธร…") — เป็นคนละจุดยึดกับบรรทัดยศที่ยึดวงเล็บเปิด

   โหมดชิดซ้าย (--sig-sub-shift:0 / --sig-sub-just:flex-start) ยังเลือกได้ในหน้าตั้งค่า
   ถ้าต้องการให้ขอบซ้ายคงที่แทนจุดกึ่งกลาง

   width:0 ทั้งสองโหมด เพื่อไม่ให้บรรทัดนี้ไปกำหนดความกว้างของบล็อก
   และใช้ flex ไม่ใช่ text-align เพราะ text-align:center ไม่จัดกึ่งกลาง
   ข้อความที่ล้นกล่องกว้าง 0 (Chrome ชิดซ้ายให้แทน) ส่วน justify-content ทำได้ */
.doc .sig-sub{
  width:0; margin-left:var(--sig-sub-shift);
  display:flex; justify-content:var(--sig-sub-just);
  white-space:nowrap;
}

/* บล็อกท้ายหนังสือภายนอก (ส่วนราชการเจ้าของเรื่อง) */
.doc .tail{margin-top:var(--tail-gap);break-inside:avoid}
.doc .tail div{margin:0}

/* หัวหนังสือภายนอก: ที่ (ซ้าย) + ส่วนราชการ (ขวา) */
.doc .head-row{display:flex;align-items:flex-start}
.doc .head-row .head-left{flex:0 0 var(--ext-agency-left);min-width:0;white-space:pre-line}
.doc .head-row .head-right{flex:1 1 auto;min-width:0;text-align:left;white-space:pre-line}
/* บรรทัดวันที่ของหนังสือภายนอก ชิดซ้ายที่ระยะคงที่ ไม่ใช่กึ่งกลางหน้า */
.doc .ext-date{margin:var(--para-space) 0 0; padding-left:var(--ext-date-left)}
/* บรรทัด "สั่ง ณ วันที่" / "ประกาศ ณ วันที่" ชิดซ้ายที่ระยะคงที่ */
.doc .decree-date{margin:calc(var(--para-space) * 2) 0 0; padding-left:var(--decree-date-left)}
/* บรรทัดวันที่ต้องใช้ฟอนต์เอกสารเดียวกับเนื้อหาเสมอ
   เพื่อไม่ให้เบราว์เซอร์เลือกฟอนต์สำรองคนละแบบสำหรับตัวเลข */
.doc .ext-date,.doc .decree-date,.doc .memo-cols .memo-line{
  font-family:'SarabunDoc','TH Sarabun New','TH SarabunPSK','Sarabun','Leelawadee UI','Tahoma',sans-serif !important;
  font-size:var(--doc-size);
  font-weight:400;
  font-style:normal;
  font-synthesis:none;
}

/* บันทึกข้อความ */
.doc .memo-head{display:flex;align-items:flex-end;gap:.6cm;margin-bottom:.2em}
.doc .memo-title{
  font-size:29pt; font-weight:700; line-height:1;
  flex:1 1 auto; text-align:center;
}
.doc .memo-label{font-weight:700;font-size:20pt;line-height:1.25}
.doc .memo-line{display:flex;align-items:baseline;gap:.2cm}
.doc .memo-line .memo-label{flex:0 0 auto}
/* ห้ามชื่อส่วนราชการยุบ เพราะ flexbox บีบต่ำกว่าความกว้างจริงเพียงเศษพิกเซล
   ก็ทำให้ตัดบรรทัดแล้ว ให้ตัวคั่นก่อนเบอร์โทรเป็นตัวรับการยุบแทน
   max-width กันไว้กรณีชื่อยาวเกินหน้ากระดาษจริง ๆ จะได้ตัดบรรทัดในตัวเอง */
.doc .memo-line .memo-val{flex:0 0 auto;max-width:100%;font-size:var(--doc-size);align-self:center}
/* เบอร์โทรท้ายบรรทัดส่วนราชการ
   ระยะห่างทำเป็นตัวคั่นแยกต่างหาก (ไม่ใช่ padding) เพื่อให้ยุบได้เมื่อที่ไม่พอ
   เบอร์โทรจะได้ไม่เด้งลงบรรทัดใหม่ ไม่ว่าจะตั้งระยะไว้กว้างแค่ไหน */
/* ค่าย่อสูงมาก เพื่อให้ตัวคั่นยุบจนหมดก่อน ชื่อส่วนราชการจึงค่อยถูกบีบ */
/* หัก gap ของ flex ที่ขนาบสองข้างออก ระยะที่ตั้งไว้จะได้ตรงตามจริง */
.doc .memo-line .memo-gap{flex:0 999 max(0cm, calc(var(--tel-gap) - .4cm)); min-width:0}
.doc .memo-line .memo-tel{
  flex:0 0 auto; align-self:center;
  font-size:var(--doc-size);
  white-space:nowrap;
}
.doc .memo-cols{display:flex}
.doc .memo-cols > :first-child{flex:0 0 var(--memo-date-col)}
.doc .memo-cols > :last-child{flex:1 1 auto}

/* รายการมีลำดับ (ผู้มาประชุม / ระเบียบวาระ) */
.doc .list{margin:var(--para-space) 0 0}
.doc .list .li + .li{margin-top:var(--para-space)}
.doc .list .li{
  padding-left:1.6cm; text-indent:-1.6cm; margin-left:var(--indent);
  text-align:var(--align); text-justify:var(--text-justify);
}
.doc .agenda-title{margin:.5em 0 .15em; font-weight:700; text-indent:0}

/* โครงการ: หัวข้อ 1..10 ชิดซ้ายสุด ไม่ย่อหน้า
   ต้นฉบับใช้ตัวธรรมดา แต่เว็บนี้ทำตัวหนาเพื่อให้แยกหัวข้อกับเนื้อหาออกจากกันได้ในหน้าจอ */
.doc .sec-head{margin:calc(var(--para-space) * 2) 0 0; font-weight:700; text-indent:0}
.doc .sec-head:first-of-type{margin-top:0}

/* หนังสือรับรอง: กรอบรูปถ่าย */
.doc .photo-box{
  width:4cm;height:6cm;border:1px solid #000;
  display:grid;place-items:center;text-align:center;
  font-size:12pt;line-height:1.3;margin-top:1em;
}

/* บังคับขึ้นหน้าใหม่ */
.doc .pagebreak{break-before:page;page-break-before:always;height:0}

/* =====================================================================
   สั่งพิมพ์
   ===================================================================== */
@page{
  size:A4;
  margin:0;
}
@media print{
  html,body{background:#fff;overflow:visible;height:auto;margin:0}
  .no-print{display:none !important}
  .layout{display:block;height:auto}
  .preview{display:block;background:#fff}
  .paper-wrap{display:block;padding:0;overflow:visible}
  .paper{
    width:210mm; min-height:297mm;
    padding:var(--mt) var(--mr) var(--mb) var(--ml);
    margin:0;
    box-shadow:none; background-image:none;
    zoom:1 !important;
    break-after:avoid; page-break-after:avoid;
  }
}