/* admin.css — หลังบ้าน v2 (อ้างอิงเลย์เอาต์ Brickline / Bronex บน Dribbble) */
.adm{background:var(--bg)}
.app{min-height:100vh;padding:0 var(--gut) 56px;max-width:1520px;margin:0 auto}
/* ---------- แถบบน ---------- */
.tbar{display:flex;align-items:center;gap:28px;height:76px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;background:rgba(238,234,226,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px}
.brand .mk{width:36px;height:36px;border-radius:50%;background:var(--dk);color:#fff;display:grid;place-items:center}
.brand .mk .ic{width:18px;height:18px;stroke-width:1.8}
.brand b{font-family:var(--f-disp);font-weight:650;font-size:20px;letter-spacing:-.02em}
.brand b i{font-style:normal;font-weight:400;color:var(--mute);margin-left:4px;font-size:13px;letter-spacing:.06em;vertical-align:2px}
.tnav{display:flex;gap:4px;margin-left:14px}
.tnav .mi{position:relative;padding:8px 14px;border-radius:99px;font-size:14.5px;color:var(--ink2);display:flex;gap:7px;align-items:center;transition:background .25s,color .25s}
.tnav .mi:hover{background:rgba(22,24,20,.05)}
.tnav .mi.on{background:var(--dk);color:#fff}
.nb{min-width:19px;height:19px;border-radius:10px;background:var(--g);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 5px;font-family:var(--f-disp)}
.tnav .mi.on .nb{background:var(--gl);color:var(--dk)}
.tbar .tr{margin-left:auto;display:flex;gap:8px;align-items:center}
.tsrch{display:flex;align-items:center;gap:8px;height:42px;padding:0 10px 0 14px;border-radius:99px;border:1px solid var(--line2);color:var(--mute);font-size:13.5px;width:270px;cursor:text}
.tsrch .ic{width:17px;height:17px}
.tsrch kbd{margin-left:auto;font:500 11px var(--f-disp);border:1px solid var(--line2);border-radius:6px;padding:1px 6px;color:var(--mute)}
.ib{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;position:relative;transition:background .2s;flex:none}
.ib:hover{background:var(--card)}
.ib .ic{width:18px;height:18px}
.ib.sm{width:34px;height:34px}
.ib .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 0 2px var(--bg)}
.me{width:42px;height:42px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:600}
.bnav{display:none}
/* ---------- หัวหน้า ---------- */
.pg{padding-top:34px}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.eyb{font-size:12.5px;color:var(--mute);letter-spacing:.02em;margin-bottom:8px}
.hd h1{font-family:var(--f-disp);font-weight:600;font-size:clamp(30px,3.5vw,50px);line-height:1.12;letter-spacing:-.025em}
.hd h1 span{display:block;color:var(--mute2);font-weight:500}
.hd-act{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:99px;font-weight:500;font-size:14.5px;white-space:nowrap;transition:transform .2s,background .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn .ic{width:17px;height:17px}
.btn.dk{background:var(--dk);color:#fff}
.btn.dk:hover{background:#2A2E27}
.btn.g{background:var(--g);color:#fff}
.btn.ln{border:1px solid var(--line2);background:transparent}
.btn.ln:hover{background:var(--card)}
.btn.sm{height:38px;padding:0 16px;font-size:13.5px}
.srch{display:flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:99px;border:1px solid var(--line2);background:var(--card);width:260px}
.srch .ic{width:17px;height:17px;color:var(--mute)}
.srch input{border:0;outline:0;background:none;width:100%;font-size:14px}
.seg{display:inline-flex;background:var(--bg2);border-radius:99px;padding:4px;gap:2px}
.seg button{height:38px;min-width:42px;padding:0 14px;border-radius:99px;font-size:13.5px;color:var(--ink2);display:grid;place-items:center;transition:background .25s,color .25s}
.seg button .ic{width:17px;height:17px}
.seg button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)}
/* ---------- การ์ด ---------- */
.cd{background:var(--card);border-radius:var(--r-l);padding:24px;box-shadow:var(--sh);position:relative;min-width:0}
.cd.np{padding:0;overflow:hidden}
.ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:4px 11px;border-radius:99px;background:var(--gt);color:var(--g);white-space:nowrap}
.tag .ic{width:14px;height:14px}
.tag.lt{background:var(--bg)}
.tag.bad{background:rgba(164,73,44,.22);color:#F0B9A5}
.tag.wt{background:rgba(251,250,247,.94);color:var(--ink)}
.lnk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--g);font-weight:500}
.lnk .ic{width:15px;height:15px;transition:transform .3s}
.lnk:hover .ic{transform:translateX(3px)}
.sub{font-size:13.5px;color:var(--mute)}
.acc{color:var(--g);font-weight:600}
.mute{color:var(--mute)}
.dgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-bottom:18px}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c8{grid-column:span 8}
.enter .cd,.enter .pcard,.enter .col{animation:up .7s var(--ease) both}
.enter .dgrid>.cd:nth-child(2){animation-delay:.05s}.enter .dgrid>.cd:nth-child(3){animation-delay:.1s}.enter .dgrid>.cd:nth-child(4){animation-delay:.15s}.enter .dgrid>.cd:nth-child(5){animation-delay:.2s}.enter .dgrid>.cd:nth-child(6){animation-delay:.25s}.enter .dgrid>.cd:nth-child(n+7){animation-delay:.3s}
/* การ์ดตัวเลขหลัก (สีเขียว) */
.hcd{background:var(--g);color:#fff;display:flex;flex-direction:column;overflow:hidden}
.hcd .lbl{color:rgba(255,255,255,.62)}
.hcd .tag{background:rgba(255,255,255,.12);color:#E6F0E9}
.hcd .big{font-family:var(--f-disp);font-weight:600;font-size:clamp(48px,5vw,76px);line-height:1;letter-spacing:-.035em;margin:6px 0 10px}
.hcd .sub{color:rgba(255,255,255,.62)}
.bars{display:flex;gap:10px;align-items:flex-end;height:160px;margin-top:auto;padding-top:40px}
.bars .b{flex:1;height:100%;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:8px}
.bars i{display:block;height:var(--h);background:rgba(255,255,255,.13);border-radius:8px;position:relative;transform-origin:bottom;animation:grow .9s var(--ease) both;animation-delay:var(--d)}
.bars .b:hover i{background:rgba(255,255,255,.24)}
.bars .pick i,.bars .pick:hover i{background:var(--gl)}
.bars i{transition:background .3s}
.bars em{opacity:0;transition:opacity .3s}.bars .pick em{opacity:1}
.bars .b::before{content:attr(data-tip);position:absolute;left:50%;bottom:calc(var(--th,100%) + 8px);top:-34px;bottom:auto;transform:translate(-50%,4px);background:var(--dk);color:#fff;font:500 12px var(--f-body);padding:4px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5;height:fit-content}
.bars .b:hover::before{opacity:1;transform:translate(-50%,0)}
.bars .now span::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:3px auto 0}
.swap{animation:swp .45s var(--ease)}
@keyframes swp{from{opacity:0;transform:translateY(5px)}}
.bars em{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font:600 13px var(--f-disp);font-style:normal;color:#fff}
.bars span{font-size:11.5px;text-align:center;color:rgba(255,255,255,.55)}
.bars .pick span{color:#fff;font-weight:600}
@keyframes grow{from{transform:scaleY(0)}}
.hcd.slim .big{margin-bottom:18px}
.split{display:flex;gap:4px;height:12px;margin-top:auto;margin-bottom:12px}
.split i{border-radius:6px;background:var(--gl)}
.split i.pending,.split i.partial{background:rgba(255,255,255,.2)}
.mid{font-family:var(--f-disp);font-weight:600;font-size:58px;line-height:1;letter-spacing:-.04em;margin:4px 0 6px}
.mid small{font-size:18px;color:var(--mute);letter-spacing:0;font-weight:500}
/* ช่องทางลูกค้า */
.funnel{list-style:none;display:grid;gap:9px;margin-top:20px}
.funnel li{display:grid;grid-template-columns:72px 1fr 26px;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.funnel i{height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
.funnel b{display:block;height:100%;width:var(--w);background:var(--g);opacity:var(--o);border-radius:99px;transform-origin:left;animation:growx .9s var(--ease) both;animation-delay:var(--d)}
.funnel em{font-style:normal;text-align:right;font-weight:600}
@keyframes growx{from{transform:scaleX(0)}}
/* นัด */
.sched{list-style:none;display:grid}
.sched li{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center}
.sched li:last-child{border:0}
.sched .t b{display:block;font-size:17px;font-weight:600;line-height:1.1}
.sched small,.todo small,.watch small{display:block;font-size:12.5px;color:var(--mute);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched li>div:last-child b{display:block;font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched li>div{min-width:0}
.cd .lnk{margin-top:10px}
/* ลูกค้าล่าสุด */
.who{display:flex;gap:12px;align-items:center}
.who b{font-size:17px;font-weight:600;display:block;line-height:1.3}
.who small{font-size:12.5px;color:var(--mute)}
.av{width:46px;height:46px;border-radius:50%;background:var(--gt);color:var(--g);display:grid;place-items:center;font-weight:600;font-size:17px;flex:none}
.av.sm{width:36px;height:36px;font-size:14px}
.av.xs{width:22px;height:22px;font-size:10.5px}
.av.lg{width:56px;height:56px;font-size:21px;background:var(--g);color:#fff}
.spot{display:flex;flex-direction:column}
.spot .acts{margin-top:auto}
.spot .q{background:var(--bg);border-radius:16px;padding:14px 16px 12px;margin:16px 0;font-size:14px;line-height:1.6;color:var(--ink2)}
.pp{display:flex;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line2)}
.pp img{width:52px;height:40px;border-radius:9px;object-fit:cover;flex:none}
.pp b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.pp small{font-size:12px;color:var(--mute)}
.pp small small{font-size:inherit}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.cd.new,.kc.new,tr.new td{animation:newg 2.4s var(--ease) 2}
@keyframes newg{0%{box-shadow:0 0 0 0 rgba(29,74,56,.55)}60%{box-shadow:0 0 0 10px rgba(29,74,56,0)}}
tr.new td{background:var(--gt)!important;animation:none}
/* สต็อก trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);margin:6px 0 22px}
.trio div{padding-right:14px;border-right:1px solid var(--line)}
.trio div+div{padding-left:18px}
.trio div:last-child{border:0}
.trio b{display:block;font-family:var(--f-disp);font-weight:600;font-size:46px;line-height:1.05;letter-spacing:-.035em}
.trio b small{font-size:18px;color:var(--mute2);letter-spacing:0}
.trio span{font-size:13px;color:var(--mute)}
.occb{display:flex;gap:4px;height:34px}
.occb i{flex:1;border-radius:6px;background:var(--g);animation:up .6s var(--ease) both}
.occb i.reserved{background:var(--gl)}
.occb i.sold,.occb i.rented{background:var(--bg2)}
.lgd{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--mute)}
.lgd span{display:flex;gap:6px;align-items:center}
.lgd i{width:9px;height:9px;border-radius:3px;background:var(--g)}
.lgd i.reserved{background:var(--gl)}.lgd i.sold{background:var(--bg2)}
/* การ์ดดำ */
.dark{background:var(--dk);color:#EDEBE4}
.dark .lbl{color:rgba(237,235,228,.55)}
.todo{list-style:none}
.todo a{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.todo li:last-child a{border:0}
.todo b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo div{min-width:0}
.todo small{color:rgba(237,235,228,.5)}
.chk{width:18px;height:18px;border-radius:6px;border:1.5px solid rgba(255,255,255,.3)}
.fu{font-size:12.5px;white-space:nowrap;font-weight:500}
.fu.late{color:var(--bad)}
.fu.due{color:var(--g)}
.dark .fu{color:rgba(237,235,228,.7)}
.dark .fu.late{color:#E69A80}
.dark .fu.due{color:var(--gl)}
/* ทรัพย์เด่น */
.fcard{display:grid;grid-template-columns:minmax(0,1.05fr) 1fr;padding:0;overflow:hidden}
.fim{position:relative;min-height:250px}
.fim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fcard:hover .fim img{transform:scale(1.04)}
.fim .tag{position:absolute;left:16px;top:16px}
.fb{padding:26px 28px;display:flex;flex-direction:column}
.fb h3{font-family:var(--f-disp);font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin-top:2px}
.fp{font-size:30px;font-weight:600;color:var(--g);letter-spacing:-.02em;margin:4px 0 12px}
.fp small,.num small{font-family:var(--f-body);font-size:.5em;color:var(--mute);font-weight:400;margin-left:2px;letter-spacing:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.chips span{font-size:12.5px;padding:4px 11px;border-radius:99px;border:1px solid var(--line2);color:var(--ink2)}
.fb .acts{margin-top:auto}
.watch{list-style:none}
.watch li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.watch li:last-child{border:0}
.watch img{width:44px;height:44px;border-radius:11px;object-fit:cover}
.watch div{min-width:0}
.watch b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ป้าย */
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:3px 10px;border-radius:99px;background:var(--bg);color:var(--ink2);white-space:nowrap;line-height:1.55}
.pill.g{background:var(--gt);color:var(--g)}
.pill.warn{background:#EFE8D8;color:#7A6232}
.pill.bad{background:var(--badt);color:var(--bad)}
.pill.st-new{background:var(--g);color:#fff}
.pill.st-contacted,.pill.st-viewing,.pill.st-nego{background:var(--gt);color:var(--g)}
.pill.on-img{position:absolute;left:12px;top:12px;background:rgba(251,250,247,.94);color:var(--ink)}
.pill.on-img.g{color:var(--g)}
/* ---------- เครื่องมือ / แท็บ ---------- */
.tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.tools .tr{display:flex;gap:8px;align-items:center}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:0}
.crm .tabs{margin-bottom:16px}
.tabs button{height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line2);font-size:13.5px;display:flex;gap:8px;align-items:center;transition:all .25s;color:var(--ink2)}
.tabs button span{font:600 12px var(--f-disp);color:var(--mute)}
.tabs button.on{background:var(--dk);border-color:var(--dk);color:#fff}
.tabs button.on span{color:var(--gl)}
.sel{height:40px;border-radius:99px;border:1px solid var(--line2);padding:0 34px 0 16px;font-size:13.5px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23151713' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;-webkit-appearance:none}
.sumr{font-size:13px;color:var(--mute);gap:10px}
.sumr b{font-size:22px;color:var(--ink);font-weight:600}
/* ---------- ตาราง ---------- */
.tb{width:100%;border-collapse:collapse;font-size:14px}
.tb th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500;text-align:left;padding:16px 18px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tb td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.tb tr:last-child td{border-bottom:0}
.tb td small{display:block;font-size:12px;color:var(--mute);line-height:1.45}
.tb td b{font-weight:600}
.tb .r{text-align:right}
.tb .strong{font-weight:600;font-size:15px}
.tb.hov tbody tr{cursor:pointer;transition:background .2s}
.tb.hov tbody tr:hover td{background:rgba(22,24,20,.025)}
.tb tr.on td{background:var(--gt)}
.tb tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.pc{display:flex;gap:12px;align-items:center}
.pc img{width:56px;height:42px;border-radius:9px;object-fit:cover;flex:none}
.pc b{display:block;font-size:14px;line-height:1.35}
.w4{font-weight:500!important}
.stack{display:flex;align-items:center;gap:12px}
.stack img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid var(--card);margin-right:-24px;flex:none}
.stack img:last-of-type{margin-right:0}
.stack span{margin-left:4px}
.stack b{font:600 12.5px var(--f-disp);letter-spacing:.02em}
.per{min-width:220px}
.pl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mute);margin-bottom:6px}
.pbar{height:6px;border-radius:99px;background:var(--bg);overflow:hidden;margin-bottom:5px}
.pbar i{display:block;height:100%;width:var(--w);background:var(--g);border-radius:99px;transform-origin:left;animation:growx 1s var(--ease) both}
.pbar.bad i{background:var(--bad)}
/* ---------- CRM ---------- */
.cmain{min-width:0}
.crm{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:18px;align-items:start}
.board{display:grid;grid-template-columns:repeat(5,minmax(186px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.col{background:var(--bg2);border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:10px;min-height:520px}
.colh{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 2px;font-size:13.5px;font-weight:600}
.colh span{display:flex;gap:8px;align-items:center}
.colh i{width:8px;height:8px;border-radius:50%;background:var(--g);opacity:.35}
.col-new .colh i{opacity:1}.col-contacted .colh i{opacity:.75}.col-viewing .colh i{opacity:.6}.col-nego .colh i{opacity:.45}.col-closed .colh i{background:var(--mute2);opacity:1}
.colh em{font:600 12px var(--f-disp);font-style:normal;background:var(--card);border-radius:99px;padding:1px 9px;color:var(--ink2)}
.kc{background:var(--card);border-radius:14px;padding:6px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.kc:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.25)}
.kc.on{box-shadow:0 0 0 2px var(--g)}
.kc.moved{animation:up .5s var(--ease)}
.kim{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--bg)}
.kim img{width:100%;height:100%;object-fit:cover}
.kt{position:absolute;left:7px;top:7px;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:99px;background:rgba(251,250,247,.92)}
.kb{padding:9px 6px 5px}
.kb b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.kb small{display:block;font-size:12px;color:var(--mute);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf{display:flex;justify-content:space-between;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;align-items:center}
.kf .num{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-closed .kc{opacity:.7}
.det{position:sticky;top:96px;padding:22px}
.det h3{font-family:var(--f-disp);font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.steps{display:grid;grid-template-columns:repeat(5,1fr);background:var(--g);border-radius:16px;padding:12px 6px 10px;margin:18px 0 14px;position:relative}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:19px;height:2px;background:rgba(255,255,255,.18)}
.steps button{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;color:rgba(255,255,255,.55);position:relative;line-height:1.25;text-align:center;padding:0 2px}
.steps i{width:12px;height:12px;border-radius:50%;background:var(--g);border:2px solid rgba(255,255,255,.35);transition:all .3s}
.steps .past{color:rgba(255,255,255,.8)}
.steps .past i{background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.75)}
.steps .on{color:#fff;font-weight:600}
.steps .on i{background:var(--gl);border-color:var(--gl);box-shadow:0 0 0 4px rgba(196,220,203,.25);transform:scale(1.15)}
.det .pp{border:1px solid var(--line);border-radius:14px;padding:8px;margin:0}
.det .pp img{width:64px;height:48px}
.msg{font-size:14px;line-height:1.6;color:var(--ink2);background:var(--bg);border-radius:14px;padding:12px 14px;margin:12px 0}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:14px 0 16px}
.dl dt{font-size:11.5px;color:var(--mute)}
.dl dd{font-size:14px;font-weight:500}
.dl input{border:1px solid var(--line2);border-radius:8px;padding:3px 8px;font-size:13px;background:#fff;width:100%}
.nf{display:flex;gap:6px;margin-bottom:12px}
.nf input{flex:1;min-width:0;height:40px;border:1px solid var(--line2);border-radius:99px;padding:0 14px;font-size:13.5px;outline:0;background:#fff}
.nf input:focus{border-color:var(--g)}
.notes{list-style:none;max-height:210px;overflow:auto}
.notes li{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:8px 0;position:relative}
.notes li i{width:8px;height:8px;border-radius:50%;background:var(--g);margin-top:8px}
.notes li:not(:last-child)::after{content:"";position:absolute;left:3.5px;top:22px;bottom:-6px;width:1px;background:var(--line2)}
.notes p{font-size:13.5px;line-height:1.5}
.notes small{font-size:11.5px;color:var(--mute)}
.notes li:first-child p{font-weight:500}
/* ---------- สต็อกแบบการ์ด ---------- */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pcard{background:var(--card);border-radius:20px;padding:8px;box-shadow:var(--sh);animation-delay:var(--d)!important}
.pim{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.pim img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover .pim img{transform:scale(1.05)}
.pim .code{position:absolute;right:10px;top:10px;font:600 11px var(--f-disp);letter-spacing:.04em;color:#fff;background:rgba(21,23,19,.55);padding:3px 8px;border-radius:99px;backdrop-filter:blur(4px)}
.pcard.sold .pim img,.pcard.rented .pim img{filter:grayscale(.7) brightness(.92)}
.pb{padding:12px 8px 6px}
.pt{display:flex;flex-direction:column;gap:2px}
.pt b{font-size:15px;font-weight:600;line-height:1.35}
.pr{font-size:21px;font-weight:650;white-space:nowrap;letter-spacing:-.01em}
.pb>small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.pft{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.ow{display:flex;gap:7px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc b{font-size:14px}
/* ---------- มือถือ ---------- */
@media (max-width:1180px){.c3,.c4,.c5{grid-column:span 6}.c6,.c8{grid-column:span 12}.crm{grid-template-columns:1fr}.det{position:static}.tsrch{display:none}}
@media (max-width:900px){
  .app{padding:0 16px 96px}
  .tbar{height:64px;gap:10px}.tnav,.tbar .ib{display:none}
  .me{width:36px;height:36px;font-size:14px}
  .pg{padding-top:22px}
  .hd{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:20px}
  .hd h1{font-size:32px}
  .hd-act{width:100%}.srch{flex:1;width:auto;height:42px}
  .dgrid{gap:12px}.c3,.c4,.c5,.c6,.c8{grid-column:span 12}
  .cd{padding:20px;border-radius:20px}
  .hcd .big{font-size:52px}.bars{height:120px;gap:6px}
  .fcard{grid-template-columns:1fr}.fim{min-height:200px}
  .board{grid-template-columns:repeat(5,78%);scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px}
  .col{scroll-snap-align:start;min-height:0}
  .cd.np{overflow-x:auto}.tb{min-width:640px}
  .sgrid{grid-template-columns:1fr 1fr;gap:10px}.pcard{border-radius:16px;padding:6px}.pt{flex-direction:column;gap:0}.pft{display:none}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--dk);border-radius:22px;padding:8px;box-shadow:0 20px 40px -14px rgba(0,0,0,.5)}
  .bnav .mi{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:rgba(255,255,255,.55);padding:6px 0;border-radius:14px;position:relative}
  .bnav .mi .ic{width:20px;height:20px}
  .bnav .mi.on{background:rgba(255,255,255,.1);color:#fff}
  .bnav .nb{position:absolute;top:2px;right:calc(50% - 22px);min-width:16px;height:16px;font-size:10px}
  .adm .demo-tag{bottom:auto;top:20px;left:auto;right:64px}
}