*{box-sizing:border-box}
body{margin:0;background:#eef2f7;font-family:'Sarabun',sans-serif;color:#111827}

/* ---------- แถบควบคุม ---------- */
.panel{max-width:960px;margin:20px auto;padding:0 16px}
.back{color:#2563eb;text-decoration:none;font-size:.95rem}
.tabs{display:flex;gap:8px;margin:14px 0}
.tab{flex:1;text-align:center;padding:10px;border:1px solid #d1d5db;border-radius:10px;
     background:#fff;color:#374151;text-decoration:none;font-size:.9rem}
.tab.on{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:600}

.alert{border-radius:12px;padding:14px 16px;margin-bottom:14px}
.alert p{margin:6px 0}
.alert.ok{background:#f0fdf4;border:1px solid #86efac}
.alert.warn{background:#fffbeb;border:1px solid #fcd34d}
.alert .hint{font-size:.88rem;color:#92400e}
.bar{height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden;margin:8px 0 6px}
.bar span{display:block;height:100%;background:#f59e0b}

.namebox{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px}
.namebox label{display:block;font-weight:600;margin-bottom:8px}
.namebox input{width:100%;padding:13px 14px;border:1px solid #d1d5db;border-radius:10px;
               font-family:inherit;font-size:1.15rem}
.namebox input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #dbeafe}
.row{display:flex;gap:10px;margin-top:12px}
.btn{flex:1;padding:13px;border-radius:10px;font-family:inherit;font-size:1rem;
     font-weight:600;cursor:pointer;border:1px solid #d1d5db}
.btn.ghost{background:#fff;color:#374151}
.btn.solid{background:#2563eb;border-color:#2563eb;color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.msg{display:block;margin-top:8px;font-size:.88rem;color:#6b7280}
.msg.ok{color:#16a34a}
.msg.err{color:#ef4444}
.tips{margin:14px 0 0;padding-left:18px;color:#6b7280;font-size:.85rem;line-height:1.7}

/* ---------- ใบประกาศ A4 แนวนอน ---------- */
.sheet{width:297mm;height:210mm;margin:24px auto;background:#fff;
       box-shadow:0 10px 40px rgba(0,0,0,.15);position:relative;overflow:hidden}
.frame{position:absolute;inset:10mm;border:3px solid #1e3a8a;border-radius:4px;
       padding:12mm 16mm;text-align:center;display:flex;flex-direction:column;
       justify-content:center;background:
       radial-gradient(circle at 50% 0,rgba(37,99,235,.05),transparent 60%)}
.frame::before{content:'';position:absolute;inset:4mm;border:1px solid #93c5fd;border-radius:2px}

.corner{position:absolute;width:16mm;height:16mm;border:3px solid #b91c1c}
.corner.tl{top:6mm;left:6mm;border-right:0;border-bottom:0}
.corner.tr{top:6mm;right:6mm;border-left:0;border-bottom:0}
.corner.bl{bottom:6mm;left:6mm;border-right:0;border-top:0}
.corner.br{bottom:6mm;right:6mm;border-left:0;border-top:0}

.seal{position:absolute;top:8mm;left:50%;transform:translateX(-50%);
      width:22mm;height:22mm;border-radius:50%;background:#b91c1c;color:#fff;
      display:flex;align-items:center;justify-content:center;
      font-size:12pt;font-weight:700;letter-spacing:1px;
      box-shadow:0 0 0 3px #fff,0 0 0 5px #b91c1c}

.head-th{font-family:'Noto Serif Thai',serif;font-size:30pt;font-weight:700;
         color:#1e3a8a;margin:18mm 0 0;letter-spacing:2px}
.head-en{font-size:11pt;letter-spacing:5px;color:#6b7280;margin:2mm 0 8mm}
.lead{font-size:13pt;color:#374151;margin:0 0 4mm}
.name{font-family:'Noto Serif Thai',serif;font-size:34pt;font-weight:700;
      color:#111827;margin:0 0 4mm;padding-bottom:3mm;line-height:1.25;
      border-bottom:2px dotted #cbd5e1;display:inline-block;padding-inline:14mm}
.desc{font-size:13pt;line-height:2;color:#374151;margin:4mm 0 0}

.foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14mm}
.foot .col{flex:1;font-size:10pt;color:#374151}
.foot .col small{display:block;color:#6b7280;font-size:8.5pt;margin-top:1mm}
.foot .line{width:52mm;height:1px;background:#374151;margin:0 auto 2mm}
.foot .mid .date{font-weight:700;font-size:11pt;color:#1e3a8a}

/* ลายน้ำ "ตัวอย่าง" ตอนยังไม่ผ่านเกณฑ์ */
.sheet.draft::after{content:'ตัวอย่าง';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-28deg);font-size:110pt;font-weight:700;
  color:rgba(239,68,68,.12);letter-spacing:8px;pointer-events:none}

/* ---------- โหมดพิมพ์ ---------- */
@page{size:A4 landscape;margin:0}
@media print{
  body{background:#fff}
  .no-print{display:none !important}
  .sheet{margin:0;box-shadow:none;width:297mm;height:210mm;
         page-break-after:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- ย่อให้พอดีจอมือถือ ---------- */
@media screen and (max-width:1100px){
  .sheet{transform:scale(.62);transform-origin:top center;margin-bottom:-80mm}
}
@media screen and (max-width:700px){
  .sheet{transform:scale(.33);margin-bottom:-142mm}
}

/* ------------ รายการบทที่ยังไม่ผ่าน----------- */
.remain{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.remain small{width:100%;color:#92400e;font-size:.8rem}
.remain a{display:inline-block;padding:3px 10px;border-radius:99px;
  background:#fff;border:1px solid #fcd34d;color:#92400e;font-size:.78rem;text-decoration:none}
.remain span{font-size:.78rem;color:#92400e}