@import url("https://fonts.googleapis.com/css?family=Prompt&display=swap:300,400,600,700");
    :root {
       --backdrop: rgba(18, 22, 33, .55);
       --panel-bg: #fff;
       --panel-w: min(520px, 92vw);
       --radius: 18px;
       --shadow: 0 20px 60px rgba(0, 0, 0, .14);
       --border: #e9edf3;
       --ink: #1f2937;
       --muted: #6b7280;
       --hint: #9ca3af;
       --primary: #ff6068;
       /* น้ำเงินคล้ายในตัวอย่าง */
       --primary-press: #2563eb;
   }
   
   * {
       box-sizing: border-box;
   }
   
   body {
       margin: 0;
       font-family: 'Prompt', sans-serif;
       color: var(--ink);
   }
   /* Utilities (คงไว้ตามของเดิม) */
   
   .d-none,
   .hidden {
       display: none !important;
   }
   
   .text-danger {
       color: #dc2626;
   }
   
   .small {
       font-size: .875rem;
   }
   
   .mt-2 {
       margin-top: .5rem;
   }
   
   .mt-3 {
       margin-top: .75rem;
   }
   
   .mb-2 {
       margin-bottom: .5rem;
   }
   
   .my-1 {
       margin-top: .25rem;
       margin-bottom: .25rem;
   }
   /* ปุ่ม */
   
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: .5rem;
       padding: .65rem 1rem;
       border: 1px solid var(--border);
       border-radius: 10px;
       background: #111;
       color: #fff;
       cursor: pointer;
       font-weight: 600;
   }
   
   .btn:disabled {
       opacity: .6;
       cursor: not-allowed;
   }
   
   .btn.primary {
       background: var(--primary);
       border-color: transparent;
   }
   
   .btn.primary:active {
       background: var(--primary-press);
   }
   
   .btn.icon {
       width: 36px;
       height: 36px;
       padding: 0;
       border-radius: 999px;
       background: #fff;
       color: #6b7280;
   }
   /* Modal shell */
   
   .modal {
       position: fixed;
       inset: 0;
       display: grid;
       place-items: center;
       visibility: hidden;
       pointer-events: none;
   }
   
   .modal.is-open {
       visibility: visible;
       pointer-events: auto;
   }
   
   .modal__backdrop {
       position: absolute;
       inset: 0;
       background: var(--backdrop);
       opacity: 0;
       transition: opacity .2s ease-out;
   }
   
   .modal.is-open .modal__backdrop {
       opacity: 1;
   }
   
   .modal__panel {
       position: relative;
       width: var(--panel-w);
       max-height: 86vh;
       overflow: auto;
       background: var(--panel-bg);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       border: 1px solid var(--border);
       transform: translateY(10px) scale(.98);
       opacity: 0;
       transition: transform .2s ease-out, opacity .2s ease-out;
       padding: 28px 28px 22px;
   }
   
   .modal.is-open .modal__panel {
       transform: translateY(0) scale(1);
       opacity: 1;
   }
   /* ปุ่มปิดมุมขวาบน */
   
   .modal__close {
       position: absolute;
       top: 12px;
       right: 12px;
   }
   /* ส่วน hero + หัวเรื่อง + คำอธิบาย */
   
   .hero {
       display: flex;
       align-items: center;
       justify-content: center;
       margin-top: 6px;
       margin-bottom: 8px;
   }
   
   .hero img {
       width: 180px;
       height: 180px;
       object-fit: contain;
   }
   
   .modal__title {
       font-family: 'Prompt', sans-serif;
       font-size: 1.5rem;
       font-weight: 800;
       text-align: center;
       margin: 8px 0 6px;
   }
   
   .subtitle {
       text-align: center;
       color: var(--muted);
       margin: 0 8px 18px;
       line-height: 1.55;
   }
   /* เนื้อหาเดิมของคุณ */
   
   .modal__body {
       color: #333;
       margin-top: 15px;
   }
   
   .modal__body label {
       font-size: 14px !important;
       color: #30336b !important;
       margin-left: 8px;
   }
   
   .modal__body .form-text {
       font-size: 12px !important;
       color: #878787 !important;
   }
   /* เช็คบ็อกซ์เรียงบรรทัดสวย ๆ */
   
   .form-check {
       display: flex;
       align-items: center;
       gap: .5rem;
   }
   
   .form-check-input {
       width: 18px;
       height: 18px;
   }
   /* ส่วนท้าย */
   
   .modal__footer {
       display: flex;
       gap: 10px;
       justify-content: flex-end;
       margin-top: 18px;
       position: sticky;
       bottom: -1px;
       background: #fff;
       padding-top: 8px;
   }
   /* ลด transition เมื่อ aria-hidden */
   
   .modal[aria-hidden="true"] .modal__panel,
   .modal[aria-hidden="true"] .modal__backdrop {
       transition: none;
   }