@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600&display=swap');
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Kanit', Tahoma, sans-serif; color: #222; background: linear-gradient(180deg, #f3e9ec 0%, #fff 320px); min-height: 100vh; }
a { text-decoration: none; }
.page { max-width: 620px; margin: 0 auto; padding: 24px 16px 60px; }
.page.wide { max-width: 1000px; }

.btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #45342f; color: #fff; border-radius: 4px; font-size: 14px; font-weight: 500; }
.btn-back:hover { background: #5b463f; }
.topnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* ตารางราคา (ตามรูปตัวอย่าง) */
.price-frame { border: 3px solid #111; border-radius: 14px; padding: 6px; background: #fff; }
.price-scroll { max-height: 260px; overflow-y: auto; }
table.price-table { width: 100%; border-collapse: collapse; text-align: center; font-size: 14px; }
.price-table th { background: #555; color: #fff; border: 2px solid #8b0000; padding: 8px 6px; font-weight: 500; position: sticky; top: 0; }
.price-table td { border: 2px solid #8b0000; padding: 8px 6px; font-weight: 500; }

.alert-info { margin: 14px 0; padding: 10px 14px; background: #d9edf7; color: #31708f; border: 1px solid #bce8f1; border-radius: 4px; font-size: 14px; }

.card { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 22px; margin-top: 14px; }
.card h2 { margin: 0 0 16px; font-size: 24px; font-weight: 500; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 6px; }
input[type=text], select, input[type=file] { width: 100%; padding: 9px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; font-family: inherit; background: #fff; }
.btn { display: block; width: 100%; padding: 10px; border: 0; border-radius: 4px; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; font-family: inherit; text-align: center; }
.btn-primary { background: #007bff; } .btn-primary:hover { background: #0069d9; }
.btn-green { background: #138f2d; } .btn-green:hover { background: #0e6b22; }
.btn-red { background: #d9534f; } .btn-red:hover { background: #c9302c; }
.btn-sm { display: inline-block; width: auto; padding: 6px 14px; font-size: 14px; }

.tips { margin: 18px 4px; font-size: 14px; line-height: 1.8; }
.tips .hl { color: #00f; font-weight: 500; }
.tips .warn { color: #d9534f; font-weight: 500; }

.msg { padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; font-size: 14px; }
.msg.err { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.msg.ok  { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

.lookup { margin-top: 18px; display: flex; gap: 6px; }
.lookup input { flex: 1; }
.lookup button { width: auto; padding: 9px 16px; }

/* หน้าจ่ายเงิน */
.pay-info p { margin: 6px 0; }
.amount { color: #d9534f; font-size: 30px; font-weight: 600; margin: 4px 0; }
.qr-box { text-align: center; background: #f9f9f9; border: 1px dashed #ccc; border-radius: 8px; padding: 14px; margin: 14px 0; }
.qr-box img { width: 220px; height: 220px; object-fit: contain; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #fff; }
.badge.PENDING { background: #e69500; } .badge.WAITING { background: #0275d8; }
.badge.SUCCESS { background: #138f2d; } .badge.REJECTED { background: #d9534f; }

/* แอดมิน */
table.list { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.list th, .list td { border: 1px solid #ddd; padding: 8px; text-align: center; vertical-align: middle; }
.list th { background: #f5f5f5; }
.list img.thumb { max-width: 90px; max-height: 90px; border: 1px solid #ccc; border-radius: 4px; }
.table-wrap { overflow-x: auto; }
.actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.actions form { margin: 0; }
h3 { margin: 28px 0 10px; font-weight: 500; }