:root{
  /* โทนสีจากโลโก้ CASA GRAND: เขียวน้ำทะเลเข้ม + ฟ้าอมเขียวอ่อน + ลายหกเหลี่ยม */
  --brand:#036975; --brand-dark:#024e57; --brand-2:#03989e; --brand-ink:#ffffff; --brand-soft:#ddf1f1; --brand-tint:#f0f9f9;
  --bg:#f4f9f8; --panel:#ffffff; --ink:#1c2b2a; --muted:#5b6f6c; --line:#d8e7e4;
  --warn:#a85d10; --warn-soft:#fcf0e2; --bad:#b3261e; --bad-soft:#fbe9e7; --ok:#2f7d4f; --ok-soft:#e5f3ea;
  --radius:12px;
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48'%3E%3Cpath d='M0 24 L14 0 H42 L56 24 L42 48 H14 Z M56 24 H84' fill='none' stroke='%23d6ecec' stroke-width='1.2'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;color:var(--ink);font:15px/1.55 "Sarabun","Leelawadee UI","Tahoma",system-ui,sans-serif}
body{background:var(--bg) var(--hex) repeat fixed;background-size:84px 48px}
a{color:var(--brand)}
header.top{background:#fff;color:var(--ink);padding:8px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-bottom:3px solid var(--brand);box-shadow:0 2px 10px rgba(3,105,117,.08);position:sticky;top:0;z-index:20}
header.top .title{display:flex;align-items:center;gap:10px;text-decoration:none}
header.top .title img.niti{height:44px;width:44px;border-radius:8px;display:block}
header.top .title img.wm{height:30px;display:block}
header.top nav{display:flex;gap:2px;flex-wrap:wrap}
header.top nav a{color:var(--brand-dark);text-decoration:none;padding:6px 12px;border-radius:20px;font-weight:500}
header.top nav a:hover{background:var(--brand-tint)}
header.top nav a.on{background:var(--brand);color:#fff}
header.top .who{margin-left:auto;font-size:13px;display:flex;gap:10px;align-items:center;color:var(--muted)}
header.top .who button{padding:3px 12px;border-color:var(--brand);color:var(--brand)}
main{max-width:1200px;margin:0 auto;padding:20px}
h1{font-size:22px;margin:0 0 4px;color:var(--brand-dark)} h2{font-size:17px;margin:24px 0 8px} .sub{color:var(--muted);margin:0 0 16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
input,select,textarea,button{font:inherit}
input,select,textarea{border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:#fff;color:var(--ink);min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 14px;cursor:pointer;color:var(--ink)}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.primary:hover{background:var(--brand-dark)} button:hover{border-color:var(--brand)}
button.danger{color:var(--bad);border-color:#efc7c3}
button.small{padding:3px 9px;font-size:13px}
button:disabled{opacity:.5;cursor:default}
a.btnlink{border:1px solid var(--brand);border-radius:7px;padding:6px 12px;text-decoration:none;color:var(--brand);background:#fff;display:inline-block} a.btnlink:hover{background:var(--brand-tint)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:13px;color:var(--brand-dark);font-weight:600;background:var(--brand-tint);position:sticky;top:0}
tr.click{cursor:pointer} tr.click:hover td{background:var(--brand-tint)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);max-height:70vh}
.tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;background:#eef0ee;color:var(--muted);white-space:nowrap}
.tag.ok{background:var(--ok-soft);color:var(--ok)} .tag.warn{background:var(--warn-soft);color:var(--warn)} .tag.bad{background:var(--bad-soft);color:var(--bad)} .tag.brand{background:var(--brand-soft);color:var(--brand)}
.check{color:var(--warn);font-size:13px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-decoration:none;color:var(--ink)}
.tile{border-left:4px solid var(--brand)} .tile:hover{border-color:var(--brand);background:var(--brand-tint)} .tile b{color:var(--brand-dark)} .tile b{display:block;font-size:16px;margin-bottom:2px} .tile span{color:var(--muted);font-size:13px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.stat{border-top:3px solid var(--brand-soft)} .stat .v{font-size:22px;font-weight:700;color:var(--brand-dark);font-variant-numeric:tabular-nums} .stat .l{color:var(--muted);font-size:13px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px}
.form label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:3px}
.form label.wide{grid-column:1/-1}
dialog{border:none;border-radius:12px;padding:0;width:min(560px,94vw);box-shadow:0 10px 40px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog .hd{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700}
dialog .bd{padding:16px 18px} dialog .ft{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.msg{position:fixed;right:16px;bottom:16px;background:#1d2421;color:#fff;padding:10px 16px;border-radius:8px;opacity:0;transition:opacity .2s;z-index:50;max-width:80vw}
.msg.show{opacity:1} .msg.err{background:var(--bad)}
.muted{color:var(--muted)} .nowrap{white-space:nowrap} .right{text-align:right}
.login{max-width:380px;margin:10vh auto} .login .logo{display:block;width:120px;height:120px;border-radius:16px;margin:0 auto 14px;box-shadow:0 4px 14px rgba(3,105,117,.25)} .login .wm{display:block;height:46px;margin:0 auto 8px} .login .panel{box-shadow:0 8px 30px rgba(3,105,117,.12);border-top:4px solid var(--brand)}
dialog .hd{color:var(--brand-dark);background:var(--brand-tint)}
@media (max-width:640px){header.top .title img.niti{height:36px;width:36px} header.top .title img.wm{height:22px} main{padding:12px} .stats{grid-template-columns:1fr 1fr} header.top{padding:8px 12px} th,td{padding:6px}}
@media print{header.top,button{display:none} .tablewrap{max-height:none;border:none}}
/* เอกสารพิมพ์ (ใบแจ้งหนี้ / ใบเสร็จ) ขนาด A4 */
.doc-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px auto;max-width:210mm}
.doc{background:#fff;width:210mm;min-height:280mm;margin:0 auto 16px;padding:14mm 15mm;box-shadow:0 2px 14px rgba(0,0,0,.12);position:relative;font-size:14px;color:#111}
.doc .dh{display:flex;gap:14px;align-items:center;border-bottom:3px solid var(--brand);padding-bottom:10px}
.doc .dh img{height:62px;width:62px;border-radius:8px}
.doc .dh .org b{font-size:17px;color:var(--brand-dark)}
.doc .dh .ttl{margin-left:auto;text-align:right}
.doc .dh .ttl h1{margin:0;font-size:22px;color:var(--brand)}
.doc .meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin:12px 0}
.doc .meta div span{color:#555;display:inline-block;min-width:96px}
.doc table{width:100%;border-collapse:collapse;margin:8px 0}
.doc th,.doc td{border:1px solid #c9d8d5;padding:5px 8px;text-align:left}
.doc th{background:var(--brand-soft);color:var(--brand-dark)}
.doc td.num,.doc th.num{text-align:right}
.doc tr.sum td{font-weight:700;background:#f6fbfa}
.doc .paybox{display:flex;gap:18px;border:2px solid var(--brand);border-radius:10px;padding:12px;margin:12px 0;align-items:center}
.doc .paybox img.qr{width:44mm;height:44mm}
.doc .paybox .big{font-size:24px;font-weight:700;color:var(--brand-dark)}
.doc .small{font-size:12px;color:#444}
.doc ol{margin:4px 0;padding-left:20px}
.doc .sign{display:flex;justify-content:flex-end;margin-top:28px;text-align:center}
.doc .sign div{width:70mm;border-top:1px dotted #555;padding-top:4px}
.doc .void{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:110px;color:rgba(179,38,30,.18);transform:rotate(-25deg);font-weight:700;pointer-events:none}
@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  .doc-tools{display:none}
  .doc{box-shadow:none;margin:0;page-break-after:always;min-height:auto;height:296mm;overflow:hidden}
  .doc:last-child{page-break-after:auto}
  .doc th,.doc tr.sum td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* แจ้งเหตุฉุกเฉิน */
header.top .who button.sos{background:var(--bad);color:#fff;border-color:var(--bad);font-weight:700}
.alarm{position:fixed;inset:0;background:rgba(179,38,30,.92);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;animation:flash 1s infinite alternate}
.alarm .box{background:#fff;border-radius:16px;padding:24px;max-width:520px;width:100%;text-align:center}
.alarm h2{color:var(--bad);margin:6px 0}
@keyframes flash{from{background:rgba(179,38,30,.95)}to{background:rgba(120,10,10,.85)}}

.fgrid input,.fgrid select,.fgrid textarea{width:100%;min-width:0;box-sizing:border-box}

/* ===== เมนู 4 หมวด ===== */
:root{--g-front:#036975;--g-back:#4a6a8f;--g-acct:#9a6410;--g-sum:#6b4f96}
header.top{row-gap:6px}
header.top nav.groups{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
header.top nav.groups a{padding:7px 14px;border-radius:22px;font-weight:600;white-space:nowrap;border:1px solid transparent}
header.top nav.groups a.g-front.on{background:var(--g-front);color:#fff} header.top nav.groups a.g-back.on{background:var(--g-back);color:#fff}
header.top nav.groups a.g-acct.on{background:var(--g-acct);color:#fff} header.top nav.groups a.g-sum.on{background:var(--g-sum);color:#fff}
header.top nav.sub{flex-basis:100%;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 -20px -8px;padding:4px 20px 0;border-top:1px solid var(--line)}
header.top nav.sub a{font-size:14px;padding:6px 12px 8px;border-radius:0;white-space:nowrap;color:var(--muted);border-bottom:3px solid transparent}
header.top nav.sub a:hover{background:none;color:var(--ink)}
header.top nav.sub a.on{background:none;color:var(--ink);font-weight:700}
header.top nav.sub.g-front a.on{border-bottom-color:var(--g-front)} header.top nav.sub.g-back a.on{border-bottom-color:var(--g-back)}
header.top nav.sub.g-acct a.on{border-bottom-color:var(--g-acct)} header.top nav.sub.g-sum a.on{border-bottom-color:var(--g-sum)}
header.top .who a.gear{font-size:18px;text-decoration:none;color:var(--muted);padding:0 4px} header.top .who a.gear.on{color:var(--brand)}
@media (max-width:640px){header.top nav.sub{margin:0 -12px -8px;padding:4px 12px 0} header.top .who{font-size:12px;width:100%;justify-content:flex-end}}
/* หน้าหลักแบบหมวด */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.hub .grp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;border-top:5px solid var(--gc)}
.hub .grp h2{margin:0 0 2px;font-size:18px;color:var(--gc)} .hub .grp p{margin:0 0 10px;color:var(--muted);font-size:13px}
.hub .grp a.it{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--ink);border:1px solid transparent}
.hub .grp a.it:hover{background:var(--brand-tint);border-color:var(--line)}
.hub .grp a.it .n{font-size:12px;padding:1px 8px;border-radius:12px;background:#eef0ee;color:var(--muted);white-space:nowrap}
.hub .grp a.it .n.bad{background:var(--bad-soft);color:var(--bad);font-weight:700} .hub .grp a.it .n.warn{background:var(--warn-soft);color:var(--warn)}
.g-front{--gc:var(--g-front)} .g-back{--gc:var(--g-back)} .g-acct{--gc:var(--g-acct)} .g-sum{--gc:var(--g-sum)}
.kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:14px 0}
.kpi .k{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kpi .k .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)} .kpi .k .l{font-size:13px;color:var(--muted)}
.kpi .k .d{font-size:12px;margin-top:2px} .kpi .k .d.up{color:#c2552a} .kpi .k .d.down{color:#0090a0}
.sec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:14px 0}
.sec h2{margin:0 0 8px;font-size:17px;display:flex;align-items:center;gap:8px}
.sec h2 small{font-weight:400;color:var(--muted);font-size:13px;margin-left:auto}

.hub .grp a.it>span:first-child{white-space:nowrap;font-weight:500} .hub .grp a.it .n{white-space:normal;text-align:right;max-width:100%}
header.top nav.sub{flex-wrap:nowrap} header.top nav.groups{flex-wrap:nowrap}
@media (max-width:640px){header.top nav.groups{max-width:100%} .kpi{grid-template-columns:1fr 1fr} .kpi .k .v{font-size:19px}}
@media (max-width:640px){header.top nav.groups a{padding:6px 10px;font-size:14px}}
/* มือถือ: พื้นหลังลายแบบ fixed ทำให้วาดจอใหม่ทุกครั้งที่เลื่อน (หน่วง/เปลืองแบต) → เลื่อนตามหน้า */
@media (max-width:640px){body{background-attachment:scroll}}