:root{--form-orange:#f26b21;--form-ink:#111;--form-soft:#f3f3f1;--form-line:#d7d7d2;--form-muted:#6a6a67}
body{background:#fff}.site-header nav .active{color:var(--form-orange)}
.document-heading{max-width:1240px;margin:auto;padding:56px 28px 34px;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}.document-heading .back-link{grid-column:1/-1;width:max-content;border-bottom:1px solid var(--form-ink);font-weight:600}.document-heading h1{font-size:clamp(3.1rem,6vw,6.3rem);line-height:.9;letter-spacing:-.06em;margin:0;font-weight:600}.document-heading h1 em{font-style:normal;color:var(--form-orange)}.document-heading>p{color:var(--form-muted);font-size:1.08rem;margin:0 0 8px}
.usage-warning{max-width:1184px;margin:0 auto 24px;background:#fff7f1;border:1px solid #f3c9b1;padding:18px 22px;display:flex;gap:16px;align-items:flex-start}.warning-icon{width:32px;height:32px;border-radius:50%;background:var(--form-orange);color:#fff;display:grid;place-items:center;font:700 1rem Manrope;flex:none}.usage-warning b{font-size:1.02rem}.usage-warning p{margin:3px 0 0;color:#75584a;font-size:.9rem}
.document-workspace{max-width:1240px;margin:0 auto;padding:0 28px 90px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);gap:22px;align-items:start}.editor-panel{border:1px solid var(--form-line);background:#fff}.form-section{padding:28px;border-bottom:1px solid var(--form-line)}.section-title{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}.section-title>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--form-ink);color:#fff;font:700 .78rem Manrope;flex:none}.section-title h2{font-size:1.2rem;margin:0}.section-title p{color:var(--form-muted);font-size:.84rem;margin:2px 0 0}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field-grid .wide{grid-column:1/-1}.field{display:block;font-weight:600;min-width:0}.field>span{display:block;font-size:.88rem;margin-bottom:7px}.field>span i{font-style:normal;color:var(--form-orange)}.field>span small{font-weight:400;color:var(--form-muted);margin-left:5px}.field input,.field textarea,.field select{width:100%;min-height:48px;border:1px solid #bbb;background:#fff;padding:11px 13px;color:var(--form-ink);font:500 .95rem "IBM Plex Sans Thai";border-radius:0;outline:none}.field textarea{resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--form-orange);box-shadow:0 0 0 3px #f26b211c}
.field .generated-field{background:#f1f1ee;color:#444;font-family:Manrope,"IBM Plex Sans Thai",sans-serif;font-weight:700;letter-spacing:.04em}
.expense-rows{display:grid;gap:12px}.expense-row{display:grid;grid-template-columns:135px 1fr 130px 36px;gap:9px;align-items:end;padding:14px;background:var(--form-soft)}.expense-row .field>span{font-size:.78rem}.remove-expense{height:48px;border:0;background:#fff;color:#8b3820;font-size:1.3rem;cursor:pointer}.remove-expense:disabled{opacity:.3;cursor:not-allowed}.add-expense{margin-top:12px;border:0;background:none;color:var(--form-orange);padding:8px 0;font:600 .9rem "IBM Plex Sans Thai";cursor:pointer}.reason-field{margin-top:15px}
.optional-section{border-bottom:1px solid var(--form-line)}.optional-section summary{cursor:pointer;list-style:none;padding:20px 28px;display:flex;justify-content:space-between;gap:16px;font-weight:600}.optional-section summary::-webkit-details-marker{display:none}.optional-section summary b{color:var(--form-orange);font-size:.82rem}.optional-section[open] summary{border-bottom:1px solid var(--form-line)}.optional-body{padding:24px 28px;background:#fafafa}
.output-section{padding:28px}.output-section h2{font-size:1.2rem;margin:0 0 14px}.copy-options{display:grid;gap:9px}.copy-options>label{border:1px solid var(--form-line);padding:12px 13px;display:flex;align-items:center;gap:12px;cursor:pointer}.copy-options input,.confirm-row input{width:19px;height:19px;accent-color:var(--form-orange);flex:none}.copy-options b,.copy-options small{display:block}.copy-options small{color:var(--form-muted);font-size:.75rem}.extra-copy{justify-content:space-between}.extra-copy select{min-height:38px;border:1px solid #aaa;background:#fff;padding:5px 10px;font-family:"IBM Plex Sans Thai"}.confirm-row{display:flex;gap:11px;align-items:flex-start;margin:18px 0 0;color:var(--form-muted);font-size:.83rem;line-height:1.5;cursor:pointer}.confirm-row input{margin-top:2px}.form-error{min-height:22px;color:#b53b00;font-size:.84rem;font-weight:600;margin:8px 0}.output-actions{display:grid;gap:9px}.output-actions button{min-height:52px;border:0;padding:13px 15px;font:600 .94rem "IBM Plex Sans Thai";display:flex;justify-content:space-between;cursor:pointer}.primary-action{background:var(--form-orange);color:#fff}.secondary-action{background:var(--form-ink);color:#fff}.privacy-copy{display:block;margin-top:12px;color:var(--form-muted);font-size:.74rem}
.defaults-box{margin-top:16px;padding:15px;border:1px solid var(--form-line);background:#fafafa}.defaults-box>div:first-child b,.defaults-box>div:first-child small{display:block}.defaults-box>div:first-child small{margin-top:2px;color:var(--form-muted);font-size:.78rem;line-height:1.45}.defaults-actions{display:flex;gap:8px;margin-top:12px}.defaults-actions button{border:1px solid var(--form-ink);background:#fff;min-height:38px;padding:8px 12px;font:600 .8rem "IBM Plex Sans Thai";cursor:pointer}.defaults-actions button:first-child{background:var(--form-ink);color:#fff}.defaults-box p{min-height:18px;margin:7px 0 0;color:#4f6c43;font-size:.76rem}
.preview-panel{position:sticky;top:18px;background:var(--form-ink);padding:18px}.preview-label{color:#fff;display:flex;justify-content:space-between;gap:10px;margin-bottom:14px}.preview-label span{font-weight:600}.preview-label small{color:#fff8}.certificate-page{position:relative;background:#fff;color:#111;width:100%;aspect-ratio:210/297;padding:5% 6.8% 6.5%;font-family:"IBM Plex Sans Thai",sans-serif;font-size:clamp(8px,.78vw,12px);line-height:1.45;box-shadow:0 7px 24px #0005;overflow:hidden}.certificate-topline{display:flex;justify-content:flex-end;align-items:flex-start;min-height:3.2em;margin-bottom:2.2%}.copy-label{font-weight:700;border:1px solid #111;padding:3px 10px;white-space:nowrap}.certificate-header{text-align:center;border-bottom:2px solid #111;padding-bottom:3%;margin-bottom:3%}.certificate-header h2{font-size:2.15em;margin:0 0 1%;line-height:1.15}.certificate-header>strong{font-size:1.18em}.company-extra{display:flex;flex-direction:column;color:#444;min-height:1.4em}.document-meta{display:flex;justify-content:space-between;text-align:left;margin-top:2%;font-size:.88em}.expense-table{width:100%;border-collapse:collapse;table-layout:fixed}.expense-table th,.expense-table td{border:1px solid #777;padding:1.4% 1.5%;vertical-align:top}.expense-table th{background:#eee;font-weight:700}.expense-table th:first-child{width:21%}.expense-table th:last-child{width:23%;text-align:right}.expense-table td:last-child{text-align:right}.expense-table tbody td{height:3.1em}.expense-table tfoot td{font-weight:700}.amount-words{border:1px solid #777;border-top:0;margin:0;padding:1.5%}.payment-extra{min-height:1.5em;margin-top:2%;color:#444}.certification{margin:3.3% 0 1.8%;text-indent:2.5em}.reason-line{margin:0 0 3%}.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;text-align:center;margin:6% 1% 4%}.signature-grid>div{display:flex;flex-direction:column;min-width:0}.signature-grid .signature-line{margin-bottom:1%}.signature-grid p{margin:1% 0 0;font-weight:600}.signature-grid small{min-height:1.5em}.signature-grid>div>span:last-child{margin-top:7%;font-size:.88em}.certificate-note{border:1px solid #888;padding:2.2%;background:#fafafa;font-size:.84em;margin-top:auto}.certificate-note b{color:var(--form-orange)}.certificate-note p{margin:.5% 0 1.2%}.certificate-note strong{display:block;font-size:.95em}
.document-cta{max-width:1184px;margin:0 auto 90px;background:var(--form-ink);color:#fff;padding:34px 38px;display:flex;align-items:flex-end;justify-content:space-between;gap:38px;border-left:6px solid var(--form-orange)}.document-cta p{margin:0 0 7px;color:var(--form-orange);font-size:.78rem;font-weight:700;letter-spacing:.08em}.document-cta h2{margin:0 0 10px;font-size:clamp(1.65rem,3vw,2.45rem);line-height:1.1}.document-cta span{display:block;max-width:680px;color:#bbb;font-size:.92rem;line-height:1.65}.document-cta>a{flex:none;min-width:230px;background:var(--form-orange);color:#fff;padding:15px 17px;display:flex;justify-content:space-between;gap:18px;font-weight:600}.document-cta>a b{font-family:Manrope}
#print-container{display:none}footer .footer-brand{filter:none}
@media(max-width:1050px){.document-workspace{grid-template-columns:1fr}.preview-panel{position:static}.certificate-page{max-width:760px;margin:auto;font-size:clamp(9px,1.25vw,12px)}}
@media(max-width:680px){.document-heading{grid-template-columns:1fr;gap:25px;padding:42px 20px 28px}.document-heading h1{font-size:3.45rem}.usage-warning{margin:0 20px 20px}.document-workspace{padding:0 20px 70px}.form-section,.output-section{padding:22px 18px}.field-grid{grid-template-columns:1fr}.field-grid .wide{grid-column:auto}.expense-row{grid-template-columns:1fr 1fr}.expense-row .detail-field{grid-column:1/-1;grid-row:2}.remove-expense{grid-column:1/-1;grid-row:3;justify-self:end;width:42px}.optional-section summary{padding:18px}.optional-body{padding:20px 18px}.defaults-actions{flex-direction:column}.document-cta{margin:0 20px 70px;padding:28px 22px;align-items:stretch;flex-direction:column;gap:24px}.document-cta>a{min-width:0}.preview-panel{padding:10px}.certificate-page{font-size:7px}.preview-label{padding:5px 4px}.signature-grid{gap:4%}}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{margin:0!important;padding:0!important;background:#fff}.no-print{display:none!important}#print-container{display:block!important}#print-container>*{break-after:page;page-break-after:always}#print-container>*:last-child{break-after:auto!important;page-break-after:auto!important}.certificate-page{width:210mm;height:296mm;box-sizing:border-box;aspect-ratio:auto;padding:10mm 14mm 12mm;box-shadow:none;font-size:10.5pt;overflow:hidden}.certificate-topline{min-height:10mm;margin-bottom:3mm}.certificate-header{padding-bottom:4mm;margin-bottom:4mm}.expense-table th,.expense-table td{padding:2.2mm}.expense-table tbody td{height:11mm}.certificate-note{font-size:8.5pt}.signature-grid{margin-top:12mm}}
.certificate-page,.company-extra span,.expense-table td,.certification,.reason-line,.signature-grid p,.certificate-note{overflow-wrap:anywhere;word-break:break-word}.company-extra span,.expense-table td,.certification,.reason-line{white-space:pre-wrap}.signature-grid>div{min-width:0}
.certificate-page.certificate-dense{font-size:clamp(7.3px,.7vw,10.5px)}.certificate-page.certificate-dense .certificate-header{padding-bottom:2%;margin-bottom:2%}.certificate-page.certificate-dense .signature-grid{margin-top:4%}.certificate-page.certificate-dense .certificate-note{font-size:.78em}@media print{.certificate-page.certificate-dense{font-size:9.2pt}.certificate-page.certificate-dense .signature-grid{margin-top:8mm}}
