:root{
  --maroon:#a4152e; --maroon-d:#7e0f22; --maroon-l:#c8324a;
  --gold:#d4af37; --gold-d:#b6932a;
  --ink:#1f2430; --muted:#5b6470; --line:#ddd8cc; --bg:#faf8f4;
  --ok:#0f6e56; --ok-bg:#e1f5ee; --warn:#9a3412; --warn-bg:#fef3c7;
  --info:#1e40af; --info-bg:#eff6ff; --danger:#b42318; --danger-bg:#fdeceb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",Tahoma,system-ui,sans-serif;color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.65;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--maroon);text-decoration:none}a:hover{text-decoration:underline}
.ic{vertical-align:-5px;margin-inline-end:9px;flex:none}

/* ===== header (แดงเลือดหมูแต่งทอง + โลโก้) ===== */
.topbar{display:flex;align-items:center;gap:18px;padding:12px 20px;flex-wrap:wrap;
  background:var(--maroon);border-bottom:4px solid var(--gold)}
.brandlogo{height:42px;width:auto;display:block}
.topbar nav{display:flex;gap:8px;flex:1;flex-wrap:wrap;justify-content:center}
.topbar nav a{color:#f6ecdd;padding:9px 14px;border-radius:9px;font-size:16px;display:inline-flex;align-items:center;white-space:nowrap}
.topbar nav a:hover,.topbar nav a.on{background:rgba(212,175,55,.22);color:#fff;text-decoration:none}
.userbox{display:flex;align-items:center;gap:12px}
.who{color:var(--gold);font-size:15px}
.userbox .link{color:#f6ecdd;display:inline-flex;align-items:center}
.badge-role{font-size:14px;background:var(--gold);color:var(--maroon-d);padding:4px 12px;border-radius:999px;font-weight:700}

/* ===== content ===== */
.wrap{max-width:1280px;width:100%;margin:24px auto;padding:0 18px;flex:1}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:20px}
.card.narrow{max-width:480px;margin:40px auto}
h1{font-size:25px;margin:0 0 10px;color:var(--maroon-d);display:flex;align-items:center}
h2{font-size:19px;margin:20px 0 10px}
.muted{color:var(--muted)}.empty{color:var(--muted);padding:22px 0;font-size:17px}
.lead{color:var(--muted);font-size:15px;margin:0 0 18px}

label{display:block;margin:14px 0;font-size:16px;font-weight:600}
input,select,textarea{width:100%;margin-top:7px;padding:13px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:17px;font-weight:400;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.28)}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inline{display:inline}

.btn,.btn-sm{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;font:inherit;font-weight:700;border-radius:10px}
.btn{background:var(--maroon);color:#fff;padding:14px 24px;font-size:17px}
.btn:hover{background:var(--maroon-d)}
.btn-gold{background:var(--gold);color:var(--maroon-d)}.btn-gold:hover{background:var(--gold-d)}
.btn-sm{background:var(--maroon);color:#fff;padding:11px 18px;font-size:16px}
.btn-sm:hover{background:var(--maroon-d);text-decoration:none}
.btn-ok{background:var(--ok)}.btn-ok:hover{background:#0b5544}
.btn-danger{background:var(--danger)}.btn-danger:hover{background:#8f1d14}
.link{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:15px;padding:0}

/* ===== ตาราง คอลัมน์ใหญ่ ชัดเจน ===== */
table.data{width:100%;border-collapse:collapse;margin-top:14px}
table.data th,table.data td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:17px}
table.data th{font-size:15px;color:#fff;background:var(--maroon);font-weight:700}
table.data th:first-child{border-top-left-radius:10px}table.data th:last-child{border-top-right-radius:10px}
table.data tbody tr:nth-child(even){background:#fbf8f1}
.r{text-align:right}.money{font-variant-numeric:tabular-nums;font-weight:700}

.badge{font-size:15px;padding:5px 13px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;white-space:nowrap}
.b-announced{background:#fff7ed;color:#9a3412;border-color:#fdba74}
.b-confirmed{background:var(--info-bg);color:var(--info);border-color:#93c5fd}
.b-paid{background:var(--ok-bg);color:var(--ok);border-color:#6ee7c0}
.b-pending{background:var(--warn-bg);color:var(--warn);border-color:#fcd34d}
.b-rejected{background:var(--danger-bg);color:var(--danger);border-color:#f5a3a0}
.b-ok{background:var(--ok-bg);color:var(--ok);border-color:#6ee7c0}

.flash{padding:14px 18px;border-radius:10px;margin-bottom:16px;font-size:17px;font-weight:600}
.flash-ok{background:var(--ok-bg);color:var(--ok)}
.flash-warn{background:var(--warn-bg);color:var(--warn)}

.grid{display:grid;grid-template-columns:300px 1fr;gap:24px}
.rounds{list-style:none;margin:0;padding:0}
.rounds li{border:1.5px solid var(--line);border-radius:10px;margin-bottom:10px}
.rounds li a{display:block;padding:14px 16px;color:var(--ink);font-size:17px}
.rounds li a span{display:block;font-size:14px}
.rounds li.active{border-color:var(--gold);background:#fdf7e7}
code{background:#f4efe3;padding:2px 8px;border-radius:6px;font-size:15px}

.item{border:1.5px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px}
.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.amt{font-size:26px;font-weight:700;margin:10px 0;font-variant-numeric:tabular-nums}

.avatar{width:64px;height:64px;border-radius:50%;background:var(--maroon);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex:none;object-fit:cover}
.kv{width:100%}.kv td{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
.kv td:first-child{color:var(--muted);width:40%}
.thumb{width:60px;height:60px;border-radius:10px;border:1.5px solid var(--line);object-fit:cover;background:#f4efe3}
.notice{display:flex;gap:10px;align-items:center;padding:13px 16px;border-radius:10px;font-size:16px}
.notice-warn{background:var(--warn-bg);color:var(--warn)}
.notice-info{background:var(--info-bg);color:var(--info)}

/* ===== footer (แดงเลือดหมู ขอบทอง ข้อความขาวบรรทัดเดียว) ===== */
.foot{background:var(--maroon);border-top:4px solid var(--gold);padding:15px 10px;text-align:center}
.foot span{color:#fff;white-space:nowrap;font-size:clamp(10px,2.8vw,14px);letter-spacing:.3px;font-weight:600}

/* ===== responsive (มือถือ) ===== */
@media(max-width:720px){
  body{font-size:17px}
  .grid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .topbar{gap:12px;padding:11px 14px}
  .brandlogo{height:36px}
  .topbar nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
  .topbar nav a{white-space:nowrap}
  .wrap{margin:16px auto}
  .card{padding:18px}
  .btn{width:100%}
  table.data thead{display:none}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{border:1.5px solid var(--line);border-radius:12px;margin-bottom:12px;padding:8px 14px;background:#fff !important}
  table.data td{border:0;padding:9px 0;text-align:left !important;font-size:18px}
  table.data td::before{content:attr(data-label);display:block;font-size:13px;color:var(--muted);font-weight:600}
}

/* ===== ปุ่มแสดง/ซ่อนรหัสผ่าน + จดจำชื่อผู้ใช้ ===== */
.pw-wrap{position:relative;margin-top:7px}
.pw-wrap input{margin-top:0;padding-right:50px;width:100%}
.pw-toggle{position:absolute;right:6px;top:0;height:100%;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--muted);padding:0 10px}
.pw-toggle:hover{color:var(--maroon)}
.remember{display:flex;align-items:center;gap:9px;font-weight:400;font-size:16px;margin:14px 0}
.remember input{width:auto;margin:0}

/* ===== หน้ารอโอน: ตาราง + ฟอร์มกะทัดรัด + โหมดพิมพ์ ===== */
.bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.print-only{display:none}
.payouts .acct{font-weight:700}
.payouts .qr-btn{margin-left:10px;padding:5px 11px;font-size:14px;white-space:nowrap}
.payform{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.payform input[type=text]{width:160px;margin:0}
.payform input[type=file]{max-width:170px;margin:0}
.payform .btn-ok{margin:0}
@media print{
  .topbar,.foot,.no-print,.flash,.col-action{display:none !important}
  .wrap{margin:0;padding:0;max-width:none}
  .card{border:0;border-radius:0;box-shadow:none;padding:0;margin:0}
  .print-only{display:block;margin:0 0 12px}
  .print-head strong{font-size:18px}
  .print-head span{display:block;color:#000;font-size:13px}
  table.data{font-size:12.5px;width:100%}
  table.data th,table.data td{padding:7px 8px;border-bottom:1px solid #999}
  .data thead{display:table-header-group;background:#eee}
  table.data tr{page-break-inside:avoid}
  a[href]:after{content:""}
}

/* ===== หน้าประกาศใหม่: การ์ดรูปจัตุรัส 1:1 + รหัสสีน้ำเงิน ===== */
.code{color:#1d4ed8;font-weight:700}
.cover-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.cover-card{display:block;text-decoration:none;color:inherit;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.cover-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);text-decoration:none}
.cover-img{position:relative;width:100%;aspect-ratio:2/1;min-height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cover-img img{width:100%;height:100%;object-fit:cover;display:block}
.cover-ph{color:#fff;font-size:23px;font-weight:700;text-align:center;padding:12px;line-height:1.4}
.cover-label{padding:14px 16px;font-size:19px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cover-label .muted{font-size:14px;font-weight:400}
.cover-admin{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.cover-admin .cover-label{justify-content:center}
.cover-admin form{padding:0 14px 14px;display:flex;flex-direction:column;gap:9px}
@media(max-width:720px){ .cover-grid{grid-template-columns:1fr;gap:10px} }

/* ===== แยกประเภท (หัวข้อ/แถบ) + แบ่งหน้า ===== */
.sec-h{font-size:18px;font-weight:700;color:#7e0f22;margin:20px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--gold)}
.sec-h:first-of-type{margin-top:10px}
.payouts .sec-row td{background:#7e0f22;color:#fff;font-weight:700;font-size:15px;padding:9px 12px}
.pager{display:flex;flex-direction:column;gap:14px;align-items:center;margin:24px 0 6px}
.pager-main{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.pager-status{font-size:16px;color:#5b5246;font-weight:600}
.pg-next{background:var(--gold);color:#5a3d00;border:0;padding:15px 30px;border-radius:12px;font-size:20px;font-weight:800;text-decoration:none;box-shadow:0 2px 7px rgba(0,0,0,.14)}
.pg-next:hover{filter:brightness(.96);text-decoration:none}
.pg-prev{background:#fff;color:var(--maroon);border:1.5px solid var(--maroon);padding:14px 24px;border-radius:12px;font-size:17px;font-weight:700;text-decoration:none}
.pg-prev:hover{background:#fbeaec;text-decoration:none}
.pager-nums{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pager-nums a,.pager-nums .pg-cur,.pager-nums .pg-dots{min-width:48px;height:48px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-size:18px;text-decoration:none}
.pager-nums a{border:1.5px solid var(--line);color:var(--maroon);background:#fff;font-weight:700}
.pager-nums a:hover{background:#fbeaec;text-decoration:none}
.pager-nums .pg-cur{background:var(--maroon);color:#fff;font-weight:800}
.pager-nums .pg-dots{color:#999;min-width:20px}
@media print{ .pager{display:none} }

/* ===== การ์ดเลือกประเภท (แดชบอร์ด/อนุมัติ/รอโอน) — แบบเดียวกับหน้าประกาศ ===== */
.tcard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:14px}
.tcard{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:box-shadow .1s}
.tcard:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);text-decoration:none}
.tcard-top{padding:28px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-align:center}
.tcard-top svg{width:38px;height:38px}
.tcard-label{font-size:19px;font-weight:700}
.tcard-foot{padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
.tcard-foot .muted{font-size:14px}
.tcard-count{font-size:24px;font-weight:800;color:var(--maroon)}

/* ปุ่มกลับใหญ่ (อยู่ด้านล่างคู่กับหน้าถัดไป) */
.btn-back-lg{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--maroon);border:1.5px solid var(--maroon);padding:14px 30px;border-radius:12px;font-size:18px;font-weight:700;text-decoration:none}
.btn-back-lg:hover{background:#fbeaec;text-decoration:none}
@media(max-width:720px){
  .pager-main{width:100%}
  .pager-main a{flex:1 1 auto}
  .pg-next,.pg-prev,.btn-back-lg{width:100%;justify-content:center;text-align:center}
}

/* ===== แถบเมนูล่างมือถือ (bottom navigation) + แผงเพิ่มเติม ===== */
.botbar{display:none}
.botcell{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 8px;color:#8a8275;text-decoration:none;background:none;border:0;font-family:inherit;cursor:pointer;font-size:10.5px;line-height:1.15;text-align:center}
.botcell .bi{width:36px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:9px}
.botcell .bi svg{width:23px;height:23px}
.botcell.on{color:var(--maroon)}
.botcell.on .bi{background:#fbe9ec}
.botcell:hover{text-decoration:none}
.moresheet-ov{position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:120;display:none}
.moresheet-ov.open{display:block}
.moresheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.22);z-index:130;transform:translateY(110%);transition:transform .22s ease;padding-bottom:10px}
.moresheet.open{transform:none}
.moresheet-grip{display:block;width:46px;height:5px;border-radius:3px;background:#ddd;border:0;margin:9px auto 6px;padding:0;cursor:pointer}
.moresheet-user{display:flex;align-items:center;gap:10px;padding:6px 22px 12px;font-size:17px;font-weight:700;color:var(--maroon);border-bottom:1px solid #f0ece2;margin-bottom:4px}
.moresheet-user .badge-role{font-weight:700}
.moresheet-title{padding:2px 22px 6px;font-size:13px;color:#9a9183;font-weight:700}
.moresheet-row{display:flex;align-items:center;gap:14px;padding:15px 22px;font-size:17px;color:#333;text-decoration:none;width:100%}
.moresheet-row svg{color:var(--maroon)}
.moresheet-row.on{color:var(--maroon);font-weight:700}
.moresheet-row.out{border-top:1px solid #f0ece2;margin-top:4px;padding:0}
.moresheet-row.out button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;color:var(--maroon);font-weight:700;font-size:17px;font-family:inherit;padding:15px 22px;cursor:pointer}

@media(max-width:720px){
  .topbar{justify-content:center}
  .topbar .topnav{display:none}
  .userbox{display:none}
  .botbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e6e0d5;box-shadow:0 -2px 10px rgba(0,0,0,.07);z-index:110}
  body{padding-bottom:66px}
}
@media print{ .botbar,.moresheet,.moresheet-ov{display:none !important} }

/* ===== Dropdown ประเทศ (กำหนดเอง รองรับรูปธงชาติ) ===== */
.cdrop{position:relative}
.cdrop-field{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:7px;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:16px;font-family:inherit;cursor:pointer;text-align:left}
.cdrop-field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.28)}
.cdrop.open .cdrop-field{border-color:var(--gold)}
.cdrop-current{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cdrop-ph{color:var(--muted)}
.cdrop-field svg{flex:0 0 auto;transition:transform .18s}
.cdrop.open .cdrop-field svg{transform:rotate(180deg)}
.cdrop-list{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.16);max-height:300px;overflow-y:auto;display:none}
.cdrop.open .cdrop-list{display:block}
.cdrop-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:9px;font-size:16px;cursor:pointer}
.cdrop-opt:hover,.cdrop-opt.on{background:#fbe9ec}
.cdrop-opt.on{font-weight:700}
.flag{width:26px;height:19px;object-fit:cover;border-radius:3px;border:1px solid rgba(0,0,0,.12);flex:0 0 auto;display:inline-block}

/* ===== ช่องกรอกสีเหลืองอ่อน (เฉพาะหน้าสมัคร .form-yellow) ===== */
.form-yellow input:not([type=checkbox]):not([type=radio]),
.form-yellow textarea,
.form-yellow select,
.form-yellow .cdrop-field{background:#fff8db}
.form-yellow input:not([type=checkbox]):not([type=radio]):focus,
.form-yellow textarea:focus,
.form-yellow select:focus,
.form-yellow .cdrop.open .cdrop-field{background:#fffdf0}
/* ทับพื้นสีฟ้าของ autofill (Chrome) ให้เป็นเหลืองอ่อน */
.form-yellow input:-webkit-autofill,
.form-yellow input:-webkit-autofill:hover,
.form-yellow input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff8db inset;
  box-shadow:0 0 0 1000px #fff8db inset;
  -webkit-text-fill-color:var(--ink);
}

/* ===== ตารางรายชื่อ "แถวเดียวต่อรายการ" บนมือถือ (เฉพาะ .rowmobile) ===== */
@media(max-width:720px){
  table.data.rowmobile{display:table;width:100%;table-layout:auto;margin-top:12px}
  table.data.rowmobile thead{display:table-header-group}
  table.data.rowmobile tbody{display:table-row-group}
  table.data.rowmobile tr{display:table-row;border:0 !important;border-radius:0;margin:0;padding:0;background:transparent !important}
  table.data.rowmobile tbody tr:nth-child(even){background:#fbf8f1 !important}
  table.data.rowmobile th{display:table-cell;font-size:12px;padding:9px 6px}
  table.data.rowmobile td{display:table-cell;width:auto !important;border:0 !important;border-bottom:1px solid var(--line) !important;padding:11px 6px !important;font-size:14px !important;text-align:left !important;vertical-align:middle;word-break:break-word}
  table.data.rowmobile th.r,table.data.rowmobile td.r{text-align:right !important}
  table.data.rowmobile td::before{content:none !important;display:none !important}
  table.data.rowmobile .badge{font-size:11.5px;padding:3px 9px}
  table.data.rowmobile .code{font-size:14px}
}

/* ===== กล่องดูสลิปโอน (lightbox) ===== */
.slipbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;align-items:center;justify-content:center;padding:20px;overflow:auto}
.slipbox.open{display:flex}
.slipbox-img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:zoom-in;background:#fff}
.slipbox-img.zoom{max-width:none;max-height:none;cursor:zoom-out}
.slipbox-x{position:fixed;top:14px;right:18px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--maroon);font-size:22px;font-weight:700;cursor:pointer;line-height:1;z-index:201}

/* ===== ปุ่มจัดการในหน้ารอโอน (workspace) ===== */
.pay-actions,.pay-paid{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center}
.payform-slip{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.payform-slip input[type=file]{max-width:165px;margin:0;font-size:13px;padding:8px}
.payform-slip .btn-sm,.pay-actions .btn-sm{margin:0}
.linkbtn{background:none;border:0;color:var(--maroon);text-decoration:underline;cursor:pointer;font:inherit;padding:0;font-size:13px}
.linkbtn-undo{color:#9a3412}
.thumb-btn{padding:0;border:0;background:none;cursor:pointer;line-height:0}
.btn-slip{cursor:pointer}

/* ===== ตั้งรหัสผ่านใหม่ในหน้าจัดการสมาชิก ===== */
.pwform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pwtoggle{display:none}
@media(max-width:720px){
  .pwtoggle{display:inline-flex;align-items:center;gap:6px;color:var(--maroon);font-weight:700;font-size:14px;padding:9px 13px;border:1.5px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}
  .pwform{display:none}
  .pwform.show{display:flex;margin-top:9px}
}

/* ===== ข้อตกลงการยืนยันตัวตน ===== */
.agreement{margin:6px 0 4px}
.agreement summary{cursor:pointer;display:flex;align-items:center;gap:7px;color:var(--maroon);font-weight:700;font-size:14px;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;background:#fff;list-style:none}
.agreement summary::-webkit-details-marker{display:none}
.agreement[open] summary{border-radius:9px 9px 0 0}
.agreement-body{border:1px solid var(--line);border-top:0;border-radius:0 0 9px 9px;padding:14px 16px;max-height:320px;overflow:auto;font-size:13.5px;line-height:1.6;background:#fffdf8}
.agreement-body ol{margin:8px 0 0;padding-left:22px}
.agreement-body li{margin-bottom:8px}
.agree-check{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.55;margin:12px 0 16px;cursor:pointer}
.agree-check input[type=checkbox]{width:24px;height:24px;margin:1px 0 0;flex:none;accent-color:var(--maroon);cursor:pointer}

/* ตารางสดในหน้านำเข้า (แสดงผลตามที่วาง) */
.import-grid{margin:10px 0 14px;overflow:auto;max-height:430px;border:1px solid #eadfce;border-radius:12px;background:#fff}
.import-grid:empty{display:none;border:0;margin:0}
.import-grid-count{font-size:12.5px;color:#6b7280;padding:9px 12px 2px}
.import-table{font-size:13px;margin:4px 0 0}
.import-table th{position:sticky;top:0;z-index:1;white-space:nowrap}
.import-table td.muted{color:#9ca3af}
.import-table td,.import-table th{padding:7px 10px}
@media(max-width:720px){
  .import-table{display:table;font-size:12.5px}
  .import-table thead{display:table-header-group}
  .import-table tbody{display:table-row-group}
  .import-table tr{display:table-row;border:0;margin:0;padding:0;background:transparent !important}
  .import-table td{display:table-cell;padding:6px 9px;text-align:left !important;font-size:12.5px}
  .import-table td::before{display:none;content:none}
  .import-table th{display:table-cell}
}

/* ===== สิทธิ์รายคน (ผู้ดูแล) ===== */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:4px 0}
.perm-item{display:flex;align-items:center;gap:7px;font-size:13.5px;margin:0;font-weight:400}
.perm-item input{width:auto;margin:0}
@media (max-width:560px){ .perm-grid{grid-template-columns:1fr} }
/* ประเภทรหัส: การ์ดเลือกประเภท (สมาชิก/ศูนย์) — ยุบเป็น 1 คอลัมน์บนจอแคบ */
@media (max-width:460px){ .typegrid{grid-template-columns:1fr !important} }
/* กล่องอัพโหลดไฟล์แบบชัดเจน (สัญลักษณ์ + สีต่างกันต่อช่อง) — ตั้งสีผ่าน --ub/--ubbg/--ubtx ที่ตัว label */
.uploadbox{display:flex;align-items:flex-start;gap:11px;border:1.5px dashed var(--ub,#bbb);border-radius:12px;padding:11px 12px;background:var(--ubbg,#fff);margin:0 0 10px;cursor:pointer}
.uploadbox .ub-ic{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--ub,#888)}
.uploadbox .ub-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.uploadbox .ub-title{font-weight:600;font-size:14px;color:var(--ubtx,#333)}
.uploadbox .ub-hint{font-size:12px;color:var(--muted,#8a8a8a)}
.uploadbox input[type=file]{margin-top:6px;font-size:12.5px;max-width:100%;background:transparent;border:0;padding:0}
.uploadbox input[type=file]::file-selector-button{border:1px solid var(--ub,#888);background:#fff;color:var(--ubtx,#333);border-radius:8px;padding:6px 12px;margin-right:8px;cursor:pointer;font-weight:600}
/* ===== ปุ่มดาวน์โหลดหนังสือยินยอมบน header (ลิงก์ตรง สีทอง — สมาชิก/ศูนย์) ===== */
.consent-dl-desktop{display:inline-flex;align-items:center}
.consent-dl-desktop:hover,.consent-dl-mobile:hover{filter:brightness(1.05)}
.consent-dl-mobile{display:none}
@media(max-width:720px){
  .topbar{position:relative}
  .consent-dl-desktop{display:none}
  .consent-dl-mobile{display:inline-flex;align-items:center;justify-content:center;position:absolute;left:6px;top:50%;transform:translateY(-50%);z-index:120}
}

/* ===== หน้ารอโอน (มือถือ): การ์ด 1 ใบต่อ 1 รายการ — อ่านง่าย เป็นระเบียบ สมดุล ===== */
@media (max-width:720px){
  table.data.payouts tr{border:1.5px solid var(--line);border-radius:14px;margin-bottom:14px;padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
  table.data.payouts td{padding:8px 0 !important;font-size:15px !important;border-bottom:1px solid #f1ede4 !important}
  table.data.payouts td:last-child{border-bottom:0 !important;padding-bottom:2px !important}
  table.data.payouts td::before{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:3px}
  /* ลำดับ + รหัส อยู่บรรทัดบน อ่านไว */
  table.data.payouts td:first-child{color:var(--muted);font-size:13px !important;padding-bottom:2px !important;border-bottom:0 !important}
  table.data.payouts td:first-child::before{display:inline;margin-right:5px}
  table.data.payouts .code{font-size:19px;font-weight:800}
  /* ยอดโอนสุทธิ ให้เด่นชัด */
  table.data.payouts td.money{font-size:23px !important;font-weight:800;color:var(--maroon);text-align:left !important}
  /* แถบสถานะ/จัดการ: ปุ่มเต็มความกว้าง กดง่าย ไม่ล้นจอ */
  table.data.payouts .pay-actions,table.data.payouts .pay-paid{flex-direction:column;align-items:stretch;gap:9px;width:100%}
  table.data.payouts .pay-actions>.badge,table.data.payouts .pay-paid>.badge{align-self:flex-start}
  table.data.payouts .pay-actions form,table.data.payouts .pay-paid form{width:100%;margin:0}
  table.data.payouts .pay-actions .btn-ok,table.data.payouts .pay-actions .btn-sm,table.data.payouts .pay-paid .btn-sm{width:100%;justify-content:center;padding:12px 14px;font-size:15px}
  table.data.payouts .payform-slip{flex-direction:column;align-items:stretch;gap:8px;width:100%}
  table.data.payouts .payform-slip input[type=file]{max-width:100%;width:100%;font-size:13px;padding:10px}
  table.data.payouts .pay-paid .linkbtn-undo{align-self:center;padding:6px}
}