/* ===== โมเดล (dialog.mdl) — การ์ดหัวไล่สี + ฟอร์มกลุ่มฟิลด์ + ท้ายเทา ใช้ร่วมทุกหน้า ===== */
dialog.mdl{
  --m-green:#059669;--m-green-d:#047857;--m-g50:#f8fafc;--m-g100:#f1f5f9;--m-g200:#e2e8f0;--m-g300:#cbd5e1;--m-g400:#94a3b8;--m-g500:#64748b;--m-g600:#475569;--m-g800:#1e293b;--m-g900:#0f172a;--m-red:#ef4444;
  --m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
  border:0;padding:0;background:#fff;color:var(--m-g800);font-family:'Sarabun','Segoe UI',sans-serif;
  box-shadow:0 10px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);overflow:auto;
}
dialog.mdl::backdrop{background:rgba(15,23,42,.5);backdrop-filter:blur(2px)}
dialog.mdl[open]{animation:mdl-up .3s ease}
@keyframes mdl-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){dialog.mdl[open]{animation:none}}

/* ไอคอนประจำหัวโมเดล */
dialog.mdl#acc-dlg,dialog.mdl#perm-dlg{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
dialog.mdl#pickdlg,dialog.mdl#addr-dlg{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E")}
dialog.mdl#ship{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='14' height='10' rx='2'/%3E%3Cpath d='M15 10h4l3 3v3h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E")}
dialog.mdl#post-dlg,dialog.mdl#edit-dlg{--m-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E")}

/* กรอบเนื้อหา: form หรือ .mdl-in */
dialog.mdl :is(form,.mdl-in){padding:0!important;margin:0;position:relative}
/* หัวโมเดล */
dialog.mdl :is(form,.mdl-in)>h2{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:22px 60px 22px 28px;
  background:linear-gradient(135deg,#ecfdf5 0%,#fff 100%);border-bottom:1px solid var(--m-g200);
  font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.35;color:var(--m-g900);
}
dialog.mdl :is(form,.mdl-in)>h2::before{
  content:"";flex:none;width:44px;height:44px;border-radius:12px;
  background:var(--m-ic) center/22px 22px no-repeat,linear-gradient(135deg,var(--m-green),var(--m-green-d));
  box-shadow:0 4px 12px rgba(5,150,105,.3);
}
dialog.mdl h2 small{display:block;font-size:13px;font-weight:400;color:var(--m-g500);letter-spacing:0}
dialog.mdl :is(form,.mdl-in)>p{margin:-8px 28px 18px;font-size:13px;color:var(--m-g500)}
/* ปุ่มปิดมุมขวา (หน้าบ้าน) */
dialog.mdl .x{position:absolute;top:18px;right:18px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;background:var(--m-g100);color:var(--m-g600);font-size:20px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
dialog.mdl .x:hover{background:var(--m-g200);color:var(--m-g900)}

/* ตัวเนื้อหาเว้นขอบ 28px */
dialog.mdl :is(form,.mdl-in)>:not(h2):not(.x):not(.foot):not(.acts):not(input[type=hidden]):not(.hp):not(p){margin-left:28px;margin-right:28px}
dialog.mdl :is(form,.mdl-in)>:is(.fld,label,fieldset,.two,.pm-wrap){margin-bottom:20px}
dialog.mdl .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
dialog.mdl .two .fld{margin-bottom:0}

/* ป้ายชื่อฟิลด์ */
dialog.mdl :is(.fld,form>label){display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:var(--m-g800)}
dialog.mdl :is(.fld,form>label)>span,dialog.mdl fieldset>legend{font-size:14px;font-weight:600;color:var(--m-g800);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
dialog.mdl :is(.hint,.fld small,form>label small){font-size:12.5px;font-weight:400;color:var(--m-g500)}
dialog.mdl .fld>span small{font-style:italic;color:var(--m-g400)}
dialog.mdl fieldset{border:0;padding:0;min-width:0}
dialog.mdl fieldset>legend{padding:0;margin-bottom:8px}
dialog.mdl fieldset label{font-weight:500;font-size:14px;color:var(--m-g800)}
dialog.mdl .role-pick,dialog.mdl .kinds{display:flex;flex-direction:column;gap:8px}
dialog.mdl .role-pick label,dialog.mdl .kinds label{padding:10px 14px;border:1.5px solid var(--m-g200);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
dialog.mdl .role-pick label:hover,dialog.mdl .kinds label:hover{border-color:var(--m-g300)}
dialog.mdl .role-pick label:has(input:checked),dialog.mdl .kinds label:has(input:checked){border-color:var(--m-green);background:#f0fdf4}
dialog.mdl input[type=radio]{accent-color:var(--m-green)}

/* ช่องกรอก */
dialog.mdl :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=color]):not([type=range]),select,textarea){
  width:100%;box-sizing:border-box;padding:12px 16px;border:1.5px solid var(--m-g200);border-radius:10px;background:#fff;
  font:inherit;font-size:14.5px;font-weight:400;color:var(--m-g800);outline:0;transition:border-color .2s,box-shadow .2s;
}
dialog.mdl textarea{min-height:92px;resize:vertical;line-height:1.55}
dialog.mdl :is(input,select,textarea)::placeholder{color:var(--m-g400)}
dialog.mdl :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):hover{border-color:var(--m-g300)}
dialog.mdl :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select,textarea):focus{border-color:var(--m-green);box-shadow:0 0 0 4px rgba(5,150,105,.12)}
dialog.mdl select{appearance:none;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
dialog.mdl select:disabled,dialog.mdl input:disabled,dialog.mdl input[readonly]{background-color:var(--m-g50);color:var(--m-g500);cursor:not-allowed}
dialog.mdl input[type=color]{width:56px;height:42px;padding:3px;border:1.5px solid var(--m-g200);border-radius:10px;background:#fff;cursor:pointer}

/* อัปโหลดไฟล์ — กล่องประ */
dialog.mdl input[type=file]{width:100%;box-sizing:border-box;padding:22px 16px;border:2px dashed var(--m-g300);border-radius:10px;background:var(--m-g50);font:inherit;font-size:13.5px;color:var(--m-g500);cursor:pointer;transition:border-color .2s,background .2s}
dialog.mdl input[type=file]:hover{border-color:var(--m-green);background:#f0fdf4}
dialog.mdl input[type=file]::file-selector-button{margin-right:14px;padding:8px 16px;border:0;border-radius:8px;background:var(--m-green);color:#fff;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:background .15s}
dialog.mdl input[type=file]::file-selector-button:hover{background:var(--m-green-d)}
dialog.mdl .mdl-prev{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
dialog.mdl .mdl-prev figure{margin:0;display:flex;align-items:center;gap:8px;max-width:100%;padding:6px 10px 6px 6px;border:1px solid var(--m-g200);border-radius:10px;background:#fff;font-size:12.5px;font-weight:500;color:var(--m-g600)}
dialog.mdl .mdl-prev img,dialog.mdl .mdl-prev .mdl-fi{width:54px;height:36px;object-fit:cover;border-radius:6px;background:var(--m-g100);flex:none;display:grid;place-items:center}
dialog.mdl .mdl-prev figcaption{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.mdl .cur img.th{width:90px;height:54px;object-fit:cover;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* ช่องติ๊ก = สวิตช์ แถวเทา (เหมือนแถว "แสดงบนเว็บ") */
dialog.mdl :is(label.fld,form>label):has(>input[type=checkbox]){flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:var(--m-g50);border:1.5px solid var(--m-g200);border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s}
dialog.mdl :is(label.fld,form>label):has(>input[type=checkbox]):hover{background:#fff;border-color:var(--m-g300)}
dialog.mdl input[type=checkbox]:not(.pm input):not(.pin-opt input){appearance:none;-webkit-appearance:none;position:relative;flex:none;width:50px;height:28px;margin:0;border-radius:999px;background:var(--m-g300);cursor:pointer;transition:background .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
dialog.mdl input[type=checkbox]:not(.pm input):not(.pin-opt input)::before{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.15);transition:transform .3s cubic-bezier(.4,0,.2,1)}
dialog.mdl input[type=checkbox]:not(.pm input):not(.pin-opt input):checked{background:linear-gradient(135deg,var(--m-green),var(--m-green-d));box-shadow:0 0 12px rgba(5,150,105,.4)}
dialog.mdl input[type=checkbox]:not(.pm input):not(.pin-opt input):checked::before{transform:translateX(22px)}
dialog.mdl input[type=checkbox]:focus-visible{outline:3px solid rgba(5,150,105,.35);outline-offset:2px}
dialog.mdl .pm input,dialog.mdl .pin-opt input{accent-color:var(--m-green)}

/* ท้ายโมเดล: ปุ่ม */
dialog.mdl :is(.foot,.acts){display:flex;justify-content:flex-end;gap:12px;margin:26px 0 0;padding:18px 28px;background:var(--m-g50);border-top:1px solid var(--m-g200);position:sticky;bottom:0}
dialog.mdl :is(.foot,.acts) :is(.btn,button){display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 26px;min-height:0;border:1.5px solid var(--m-g300);border-radius:10px;background:#fff;color:var(--m-g600);font:inherit;font-size:14.5px;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:all .2s ease;box-shadow:none}
dialog.mdl :is(.foot,.acts) :is(.btn,button):hover{background:var(--m-g100);color:var(--m-g800);border-color:var(--m-g400)}
dialog.mdl :is(.foot,.acts) :is(button[type=submit],#pickok,#locok){border-color:var(--m-green);background:var(--m-green);color:#fff;box-shadow:0 2px 10px rgba(5,150,105,.3)}
dialog.mdl :is(.foot,.acts) :is(button[type=submit],#pickok,#locok):hover{background:var(--m-green-d);border-color:var(--m-green-d);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(5,150,105,.4)}
dialog.mdl :is(.foot,.acts) button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
dialog.mdl .form-note{font-size:12.5px;color:var(--m-g500)}

@media(max-width:560px){
  dialog.mdl :is(form,.mdl-in)>h2{padding:18px 54px 18px 20px;font-size:18px}
  dialog.mdl :is(form,.mdl-in)>:not(h2):not(.x):not(.foot):not(.acts):not(input[type=hidden]):not(.hp):not(p){margin-left:20px;margin-right:20px}
  dialog.mdl :is(form,.mdl-in)>p{margin-left:20px;margin-right:20px}
  dialog.mdl :is(.foot,.acts){flex-direction:column-reverse;padding:16px 20px}
  dialog.mdl :is(.foot,.acts) :is(.btn,button){width:100%}
  dialog.mdl .two{grid-template-columns:1fr}
}

/* ===== v2: หัวโมเดลมีบรรทัดรอง, ช่องกรอกมีไอคอนซ้าย, กล่องอัปโหลดลากวาง, ปุ่มบันทึกมีติ๊กถูก (ใช้คู่ js/modal.js) ===== */
dialog.mdl :is(form,.mdl-in)>.mdl-hd{display:flex;align-items:center;gap:14px;margin:0 0 22px!important;padding:24px 60px 24px 28px;background:linear-gradient(135deg,#ecfdf5 0%,#fff 100%);border-bottom:1px solid var(--m-g200)}
dialog.mdl .mdl-hd::before{content:"";flex:none;width:44px;height:44px;border-radius:12px;background:var(--m-ic) center/22px 22px no-repeat,linear-gradient(135deg,var(--m-green),var(--m-green-d));box-shadow:0 4px 12px rgba(5,150,105,.3)}
dialog.mdl .mdl-hd>div{min-width:0}
dialog.mdl .mdl-hd h2{margin:0;padding:0;background:none;border:0;display:block;font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.35;color:var(--m-g900)}
dialog.mdl .mdl-hd h2::before{display:none}
dialog.mdl .mdl-hd .mdl-sub{margin:2px 0 0;font-size:13px;color:var(--m-g500)}

/* ช่องกรอกมีไอคอนด้านซ้ายในกรอบเดียวกัน */
dialog.mdl .mdl-iw{display:flex;align-items:center;background:#fff;border:1.5px solid var(--m-g200);border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
dialog.mdl .mdl-iw:hover{border-color:var(--m-g300)}
dialog.mdl .mdl-iw:focus-within{border-color:var(--m-green);box-shadow:0 0 0 4px rgba(5,150,105,.12)}
dialog.mdl .mdl-iw>svg{flex:none;margin-left:14px;width:18px;height:18px;stroke:var(--m-g400);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
dialog.mdl .mdl-iw:focus-within>svg{stroke:var(--m-green)}
dialog.mdl .mdl-iw>input{flex:1;min-width:0;width:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;padding:12px 14px!important;border-radius:0!important}

/* กล่องอัปโหลด: ไอคอน + ข้อความ + พรีวิว + ปุ่มลบ */
dialog.mdl .mdl-up{position:relative;border:2px dashed var(--m-g300);border-radius:10px;background:var(--m-g50);padding:26px 18px;text-align:center;cursor:pointer;transition:all .25s ease;overflow:hidden}
dialog.mdl .mdl-up:hover,dialog.mdl .mdl-up.drag{border-color:var(--m-green);background:#f0fdf4}
dialog.mdl .mdl-up.has-file{border-style:solid;border-color:var(--m-green);background:#f0fdf4;padding:16px}
dialog.mdl .mdl-up>input[type=file]{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0;cursor:pointer;z-index:1}
dialog.mdl .mdl-up-ic{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .25s}
dialog.mdl .mdl-up:hover .mdl-up-ic{transform:translateY(-2px);box-shadow:0 6px 16px rgba(5,150,105,.2)}
dialog.mdl .mdl-up-ic svg{width:24px;height:24px;stroke:var(--m-green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
dialog.mdl .mdl-up-t{font-size:14px;font-weight:600;color:#334155}
dialog.mdl .mdl-up-t span{color:var(--m-green)}
dialog.mdl .mdl-up-h{font-size:12.5px;font-weight:400;color:var(--m-g500);margin-top:4px}
dialog.mdl .mdl-up.has-file .mdl-up-ic,dialog.mdl .mdl-up.has-file .mdl-up-t,dialog.mdl .mdl-up.has-file .mdl-up-h{display:none}
dialog.mdl .mdl-up .mdl-prev{display:none;margin:0;text-align:left;position:relative;z-index:2;pointer-events:none}
dialog.mdl .mdl-up.has-file .mdl-prev{display:flex}
dialog.mdl .mdl-up .mdl-prev figure{border:0;background:transparent;padding:0;gap:14px;flex:1 1 100%}
dialog.mdl .mdl-up .mdl-prev img,dialog.mdl .mdl-up .mdl-prev .mdl-fi{width:90px;height:54px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
dialog.mdl .mdl-up .mdl-prev figcaption{font-size:13.5px;font-weight:600;color:var(--m-g800)}
dialog.mdl .mdl-up .mdl-prev figcaption small{display:block;margin-top:2px;font-size:12px;font-weight:400;font-style:normal;color:var(--m-g500)}
dialog.mdl .mdl-up .mdl-rm{position:absolute;top:10px;right:10px;z-index:3;display:none;align-items:center;gap:6px;padding:7px 12px;border:1.5px solid var(--m-g300);border-radius:10px;background:#fff;color:var(--m-g600);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
dialog.mdl .mdl-up .mdl-rm:hover{background:var(--m-g100);color:var(--m-g800);border-color:var(--m-g400)}
dialog.mdl .mdl-up.has-file .mdl-rm{display:inline-flex}
dialog.mdl .mdl-rm svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ปุ่มบันทึกมีเครื่องหมายถูก */
dialog.mdl :is(.foot,.acts) :is(button[type=submit],#pickok,#locok)::before{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:560px){dialog.mdl :is(form,.mdl-in)>.mdl-hd{padding:20px 54px 20px 20px}dialog.mdl .mdl-hd h2{font-size:18px}dialog.mdl .mdl-up .mdl-rm{position:static;margin-top:10px}}
dialog.mdl .mdl-fi svg{width:20px;height:20px;stroke:var(--m-g500);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}