:root{--primary: #f26b1d;--primary-dark: #d1530a;--primary-soft: #fff0e6;--violet: #e8490f;--ink: #171717;--ink-soft: #6b7280;--line: #e7e5e4;--bg: #faf9f7;--card: #ffffff;--ok: #059669;--warn: #d97706;--bad: #dc2626;--radius: 14px;--shadow: 0 1px 3px rgba(23, 23, 23, .06), 0 8px 24px rgba(23, 23, 23, .07);--font: "Noto Sans Thai", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{line-height:1.3;margin:0 0 .5rem}a{color:var(--primary);text-decoration:none}p{margin:0 0 .75rem}.container{max-width:1100px;margin:0 auto;padding:0 20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:10px;border:1px solid transparent;font:600 15px var(--font);cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff;box-shadow:0 4px 14px #f26b1d59}.btn-primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 20px #f26b1d73}.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}.btn-outline:not(:disabled):hover{border-color:var(--primary);color:var(--primary)}.btn-ghost{background:transparent;color:var(--ink-soft)}.btn-ghost:hover{background:#64748b1a;color:var(--ink)}.btn-danger{background:#fef2f2;color:var(--bad);border-color:#fecaca}.btn-danger:hover{background:var(--bad);color:#fff}.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px}.btn-lg{padding:14px 28px;font-size:16px;border-radius:12px}.btn-block{width:100%}.field{margin-bottom:16px}.field label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--ink)}.input,select.input,textarea.input{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;font:400 15px var(--font);color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #f26b1d24}textarea.input{resize:vertical;min-height:110px}.hint{font-size:12.5px;color:var(--ink-soft);margin-top:4px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:24px}.card-title{font-size:17px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}.badge-pending{background:#fef9c3;color:#854d0e}.badge-processing{background:#dbeafe;color:#1d4ed8}.badge-completed{background:#d1fae5;color:#065f46}.badge-cancelled{background:#fee2e2;color:#991b1b}.badge-closed{background:#e2e8f0;color:#475569}.badge-primary{background:var(--primary-soft);color:var(--primary-dark)}.alert{padding:12px 16px;border-radius:10px;font-size:14px;margin-bottom:16px}.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.alert-ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.topbar{position:sticky;top:0;z-index:40;background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:62px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink)}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--violet));color:#fff;font-size:18px}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:100;padding:20px}.modal{background:#fff;border-radius:16px;box-shadow:0 24px 64px #0f172a4d;width:100%;max-width:460px;padding:26px;max-height:90vh;overflow-y:auto}.modal h3{margin-bottom:16px}.table{width:100%;border-collapse:collapse;font-size:14px}.table th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:10px 12px;border-bottom:2px solid var(--line)}.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}.table tr:hover td{background:#fafbff}.row{display:flex;gap:12px;align-items:center}.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.grid{display:grid;gap:20px}.muted{color:var(--ink-soft);font-size:13.5px}.spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}.spin-dark{border-color:#f26b1d40;border-top-color:var(--primary)}@keyframes spin{to{transform:rotate(360deg)}}.fade-enter-active,.fade-leave-active{transition:opacity .18s ease}.fade-enter-from,.fade-leave-to{opacity:0}.page{padding:28px 0 64px}.empty{text-align:center;padding:40px 20px;color:var(--ink-soft)}.empty .icon{font-size:40px;margin-bottom:8px}.progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden}.progress>div{height:100%;background:linear-gradient(90deg,var(--primary),var(--violet));transition:width .2s}@media(max-width:720px){.container{padding:0 14px}.card-pad{padding:18px}}