:root {
  --bg: #F3F6F9; --card: #FFFFFF; --border: #DCE3EA; --text: #0E2A47; --muted: #54677A;
  --primary: #0B6AAE; --primary-text: #FFFFFF; --focus: #1180C7;
  --ok-bg: #E6F4EA; --ok-fg: #17603A; --err-bg: #FDECEA; --err-fg: #9B2B20; --warn-bg: #FFF4DB; --warn-fg: #7A5200;
  --st-in-bg: #E4E9EF; --st-in-fg: #34495E;
  --st-out-bg: #DCEEFB; --st-out-fg: #0B5C99;
  --st-arr-bg: #FFF0CC; --st-arr-fg: #7A5200;
  --st-exp-bg: #D8F1EA; --st-exp-fg: #0E6650;
  --radius: 12px; --field-bg: #FFFFFF; --field-border: #8EA4C2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --field-bg: #1A1F27; --field-border: #6B7F99;
    --bg: #1B1F26; --card: #232830; --border: #343B47; --text: #E8EEF4; --muted: #9FB0C1;
    --primary: #4DAEEA; --primary-text: #0B1B2B; --focus: #4DAEEA;
    --ok-bg: #1D3A2A; --ok-fg: #8FD6A8; --err-bg: #43211E; --err-fg: #F2A39B; --warn-bg: #3F3416; --warn-fg: #F0CE7B;
    --st-in-bg: #343B47; --st-in-fg: #C9D4DF;
    --st-out-bg: #1B3A55; --st-out-fg: #8CCBF4;
    --st-arr-bg: #4A3C14; --st-arr-fg: #F0CE7B;
    --st-exp-bg: #1B4238; --st-exp-fg: #8FDBC2;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Prompt', 'Noto Sans Thai', 'Leelawadee UI', Tahoma, system-ui, sans-serif;
  font-size: 16px; line-height: 1.55;
}
a { color: var(--primary); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; line-height: 1.3; }
h2 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
p { margin: .5rem 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }

.topbar { background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.topbar-in { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo { height: 34px; width: auto; display: block; }
.nav { margin-left: auto; display: flex; gap: 4px 14px; align-items: center; flex-wrap: wrap; }
.nav a, .linkbtn { color: var(--text); text-decoration: none; padding: 8px 4px; border-radius: 6px; font-size: .95rem; }
.nav a:hover, .linkbtn:hover { color: var(--primary); }
.nav a.on { color: var(--primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }
.nav-staff { margin-left: 0; flex: 1; }
.nav-staff .who { margin-left: auto; color: var(--muted); font-size: .85rem; }
.linkbtn { background: none; border: 0; cursor: pointer; font: inherit; font-size: .95rem; }
form.inline { display: inline; margin: 0; }
.badge-staff { background: var(--primary); color: var(--primary-text); font-size: .75rem; padding: 2px 8px; border-radius: 999px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 20px 16px 40px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.narrow { max-width: 440px; margin-left: auto; margin-right: auto; }
.mid { max-width: 640px; }
.foot { margin-top: 32px; text-align: center; color: var(--muted); font-size: .85rem; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: .95rem; }
.flash-ok { background: var(--ok-bg); color: var(--ok-fg); }
.flash-err { background: var(--err-bg); color: var(--err-fg); }
.note { background: var(--warn-bg); color: var(--warn-fg); padding: 10px 14px; border-radius: 8px; font-size: .92rem; }

label { display: block; font-weight: 500; margin: 14px 0 4px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--field-bg, #fff);
  border: 1.5px solid var(--field-border, #8ea4c2); border-radius: 8px; box-shadow: inset 0 1px 2px rgba(20,40,80,.08);
}
input:not([type]):hover, input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=search]:hover, input[type=url]:hover, input[type=number]:hover, input[type=tel]:hover, input[type=date]:hover, select:hover, textarea:hover { border-color: #5f7ea8; }
input[readonly], textarea[readonly] { background: #eef2f7; }
::placeholder { color: #8b97a8; opacity: 1; }
textarea { min-height: 160px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px;
}
.hint { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.err-text { color: var(--err-fg); font-size: .9rem; margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 16px; }
.check input { margin-top: 5px; width: 18px; height: 18px; flex: none; }

.btn {
  display: inline-block; background: var(--primary); color: var(--primary-text); border: 0; border-radius: 8px;
  padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { filter: brightness(1.08); }
.btn.block { display: block; width: 100%; margin-top: 18px; }
.btn.ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn.small { padding: 6px 12px; font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.st-in { background: var(--st-in-bg); color: var(--st-in-fg); }
.st-out { background: var(--st-out-bg); color: var(--st-out-fg); }
.st-arr { background: var(--st-arr-bg); color: var(--st-arr-fg); }
.st-exp { background: var(--st-exp-bg); color: var(--st-exp-fg); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--st-in-bg); color: var(--st-in-fg); font-size: .8rem; }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.bad { background: var(--err-bg); color: var(--err-fg); }

/* รายการพัสดุ: การ์ดบนมือถือ ตารางบนจอใหญ่ */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.toolbar .grow { flex: 1 1 220px; }
.toolbar label { margin: 0 0 4px; font-size: .85rem; color: var(--muted); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.tabs a { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--text); background: var(--card); font-size: .9rem; }
.tabs a.on { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }

.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pitem { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.pitem:hover { border-color: var(--primary); }
.pitem .row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.pitem .code { font-weight: 600; font-size: 1.02rem; word-break: break-all; }
.pitem .meta { color: var(--muted); font-size: .88rem; margin-top: 6px; display: flex; gap: 4px 14px; flex-wrap: wrap; }

table.t { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.t th, table.t td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: .92rem; vertical-align: top; }
table.t th { background: var(--bg); color: var(--muted); font-weight: 600; font-size: .82rem; white-space: nowrap; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.num, table.t th.num { text-align: right; }
.tablewrap { overflow-x: auto; }
.only-desktop { display: none; }
@media (min-width: 820px) {
  .only-desktop { display: block; }
  .only-mobile { display: none; }
}

.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 16px 0; color: var(--muted); font-size: .92rem; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; font-weight: 500; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 28px; }
.timeline li::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: -6px; width: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 2px solid var(--border); }
.timeline li.done::after { background: var(--primary); border-color: var(--primary); }
.timeline li.done strong { color: var(--text); }
.timeline li:not(.done) { color: var(--muted); }

.empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.grid2 { display: grid; gap: 16px; }
@media (min-width: 820px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.stat { font-size: 1.6rem; font-weight: 600; }
.cards-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.cards-row .card { margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
pre.out { background: var(--bg); border: 1px solid var(--border); padding: 12px; border-radius: 8px; overflow: auto; font-size: .82rem; max-height: 320px; }
.is-staff .wrap { max-width: 1240px; }

.preview-bar { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-fg); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: .92rem; }
.preview-bar a { color: inherit; font-weight: 600; }

.st-pre { background: var(--bg); color: var(--muted); border: 1px dashed var(--border); }

/* เมนูหลังร้านแบบกลุ่ม (เหมือน MM) */
.nav-staff { gap: 2px 6px; }
.nav-staff > a, .dd > summary { padding: 8px 8px; font-size: .92rem; }
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; color: var(--text); border-radius: 6px; user-select: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary:hover, .dd[open] > summary { color: var(--primary); }
.dd > summary.on { color: var(--primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }
.dd-menu { position: absolute; left: 0; top: 100%; z-index: 20; min-width: 230px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14); display: grid; }
.dd-menu a { padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.dd-menu a:hover { background: var(--bg); }
.dd-menu a.on { box-shadow: none; background: var(--bg); }
.soon { font-size: .68rem; background: var(--st-in-bg); color: var(--st-in-fg); padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
@media (max-width: 819px) { .dd-menu { position: static; box-shadow: none; } }
a.card, a.card:hover { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--primary); }
a.card .stat { color: var(--primary); }

/* ===== หลังร้าน: เต็มจอ + แถบเมนูแยกชัด ===== */
.is-staff .wrap { max-width: none; padding: 24px 28px 48px; }
.is-staff .logo { height: 56px; }
.logo { height: 44px; }
.topbar.staff { padding: 0; }
.sbar-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 28px; flex-wrap: wrap; }
.sbar-top .brand { gap: 14px; }
.sbar-user { display: flex; align-items: center; gap: 12px; }
.sbar-user .who { color: var(--muted); font-size: .88rem; }
.snav { background: var(--primary); border-top: 1px solid var(--border); }
.snav-in { padding: 0 16px; display: flex; flex-wrap: wrap; gap: 0 2px; }
.snav a, .snav .dd > summary { display: flex; align-items: center; gap: 6px; padding: 14px 11px; color: #fff; font-size: .95rem; white-space: nowrap; font-weight: 500; text-decoration: none; border-radius: 0; box-shadow: none; cursor: pointer; }
.snav a:hover, .snav .dd > summary:hover, .snav .dd[open] > summary { background: rgba(255,255,255,.16); color: #fff; }
.snav a.on, .snav .dd > summary.on { background: rgba(255,255,255,.24); color: #fff; font-weight: 600; box-shadow: inset 0 -3px 0 #fff; }
.snav .chev { transition: transform .15s; }
.snav .dd[open] .chev { transform: rotate(180deg); }
.snav .dd-menu { top: 100%; left: 0; min-width: 260px; border-radius: 0 0 12px 12px; border-top: 0; padding: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.snav .dd-menu a { color: var(--text); padding: 10px 12px; border-radius: 8px; font-weight: 400; font-size: .97rem; }
.snav .dd-menu a:hover { background: var(--bg); color: var(--primary); }
.snav .dd-menu a.on { background: var(--bg); color: var(--primary); font-weight: 600; box-shadow: none; }
.snav .soon { background: var(--st-in-bg); color: var(--st-in-fg); }
@media (prefers-color-scheme: dark) { .snav { background: #0d4a78; } }
@media (max-width: 819px) {
  .sbar-top { padding: 8px 16px; } .is-staff .wrap { padding: 16px; }
  .snav-in { padding: 0 8px; } .snav .dd-menu { position: absolute; }
}

/* ===== หลังร้าน v2: หัวเข้ม + แถบเมนูขาวมีไอคอน (โครงเหมือน MM แต่ละเอียดกว่า) ===== */
.topbar.staff { background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.sbar-top { background: linear-gradient(100deg, #0A2540 0%, #0B4F8A 60%, #0B6AAE 100%); padding: 12px 28px; }
.is-staff .logo { height: 60px; }
.sbar-top .badge-staff { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); font-size: .78rem; padding: 3px 10px; }
.sbar-user { gap: 14px; color: #fff; }
.sbar-user .ver { font-size: .78rem; opacity: .7; }
.uchip { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px 16px 5px 6px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #0B4F8A; display: grid; place-items: center; font-weight: 700; }
.uname { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: .95rem; }
.uname small { font-weight: 400; opacity: .75; font-size: .75rem; }
.hbtn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: .9rem; cursor: pointer; }
.hbtn:hover { background: rgba(255,255,255,.15); }
.snav { background: var(--card); border-top: 0; box-shadow: 0 2px 10px rgba(11,42,74,.08); }
.snav-in { max-width: none; padding: 0 20px; justify-content: space-between; flex-wrap: nowrap; overflow: visible; }
.snav a, .snav .dd > summary { color: var(--text); padding: 15px 12px; font-size: .95rem; font-weight: 500; gap: 8px; white-space: nowrap; box-shadow: none; position: relative; }
.snav .ico { color: var(--muted); flex: none; }
.snav a:hover, .snav .dd > summary:hover, .snav .dd[open] > summary { background: var(--bg); color: var(--primary); }
.snav a:hover .ico, .snav .dd > summary:hover .ico, .snav .dd[open] > summary .ico { color: var(--primary); }
.snav a.on, .snav .dd > summary.on { background: transparent; color: var(--primary); font-weight: 600; box-shadow: inset 0 -3px 0 var(--primary); }
.snav a.on .ico, .snav .dd > summary.on .ico { color: var(--primary); }
.snav .chev { color: var(--muted); }
.snav .dd-menu { border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: 0 0 12px 12px; }
.snav .soon { background: var(--st-in-bg); color: var(--st-in-fg); }
@media (prefers-color-scheme: dark) { .snav { background: var(--card); } .sbar-top { background: linear-gradient(100deg, #0A1624, #0B3A66); } }
@media (max-width: 1100px) { .snav-in { flex-wrap: wrap; justify-content: flex-start; } }

/* การ์ดประกาศบนแดชบอร์ด */
.notice { border-radius: var(--radius); padding: 18px 22px; margin-bottom: 16px; border: 1px solid; white-space: pre-line; line-height: 1.8; }
.notice.n1 { background: #FDF0F0; border-color: #F3D0D0; color: #5B1F1F; }
.notice.n2 { background: #FFF8E8; border-color: #F1E0B0; color: #5A4210; }
@media (prefers-color-scheme: dark) { .notice.n1 { background: #3A2323; border-color: #5A3535; color: #F3CFCF; } .notice.n2 { background: #3A3220; border-color: #5A4E2C; color: #F2E2B4; } }
.notice h2 { margin: 0 0 8px; font-size: 1.05rem; }
.snav-in > a .soon { display: none; }
.snav a, .snav .dd > summary { padding: 15px 9px; font-size: .93rem; gap: 7px; }
.snav .dd[open] .chev { transform: none; }
.snav .dd-menu a { padding: 10px 12px; }
/* v0.4: เมนูแน่นขึ้นให้พอดีจอ 1280–1440 */
.nav-staff { gap: 0 2px; }
.nav-staff > a, .dd > summary { padding: 8px 6px; font-size: .9rem; }
/* v0.4.1: ตะกร้า/ค้นหาสินค้า */
.cart-ic { position: relative; color: #fff; text-decoration: none; font-size: 1.15rem; padding: 6px 8px; }
.cart-badge { position: absolute; top: -2px; right: -2px; background: #e5484d; color: #fff; border-radius: 999px; font-size: .68rem; min-width: 18px; text-align: center; padding: 1px 4px; }
.box-green { background: #e3f5ee; border: 1px solid #bfe6d6; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-size: .9rem; }
.box-warm { background: #fbf3e8; border: 1px solid #f0dcc0; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-size: .88rem; }
.box-warm p { margin: 4px 0; }
.crumb { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.urlbar { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.urlbar .grow { flex: 1; }
.prod-grid { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 24px; align-items: start; }
.prod-img img { width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.noimg { height: 200px; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); }
.inline-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qty { display: inline-flex; gap: 6px; align-items: center; }
.cartprod { display: flex; gap: 10px; align-items: center; }
.cartprod img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.note.err { color: var(--bad-fg, #b42318); }
@media (max-width: 720px) { .prod-grid { grid-template-columns: 1fr; } }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); margin: 4px 6px 0 0; }
.thumbs.big .thumb { width: 160px; height: 160px; }
.attprev { display: flex; flex-wrap: wrap; }
#exp-text { width: 100%; font-family: inherit; }
@media print { .nav-staff, header, .actions, .toolbar { display: none !important; } }
textarea { font-family: inherit; font-size: inherit; }

/* หน้าพัสดุหลังร้าน (แบบเดียวกับ MM) */
.ptable td { vertical-align: top; }
.ptable .pk { font-weight: 700; word-break: break-all; }
.ptype { display: inline-block; background: #3b3a98; color: #fff; border-radius: 4px; padding: 1px 8px; font-size: 12px; font-weight: 600; margin: 2px 0; }
.pthumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; margin: 0 4px 4px 0; background: #eef1f5; border: 1px solid var(--border, #dde3ea); }
.pthumb.big { width: 140px; height: 140px; }
.btn.danger{background:#b42318;border-color:#b42318;color:#fff}

.hdann { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0 8px; padding: 6px 14px; border-radius: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: .76rem; line-height: 1.4; }
.hdann .ico { flex: none; color: #FFD479; }
.hdann .ann-t { min-width: 0; }
.hdann p { margin: 0; opacity: .92; overflow-wrap: anywhere; }
.hdann p.ann-h { font-weight: 600; opacity: 1; }
.ann { display: flex; align-items: flex-start; gap: 10px; max-width: 1120px; margin: 10px auto 0; padding: 8px 14px; border-radius: 10px;
  background: var(--warn-bg); color: var(--warn-fg); font-size: .8rem; line-height: 1.45; }
.ann .ico { flex: none; margin-top: 2px; }
.ann p { margin: 0; overflow-wrap: anywhere; }
.ann p.ann-h { font-weight: 600; }
@media (max-width: 720px) { .hdann { order: 3; flex-basis: 100%; margin: 0; } }

/* ---------- ประกาศ: หลังร้าน ---------- */
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ann-list { display: grid; gap: 12px; margin-top: 14px; }
.ann-card { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.ann-card.draft { border-style: dashed; }
.ann-thumb { position: relative; width: 120px; height: 84px; border-radius: 8px; background: var(--bg, #f3f6fa); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ann-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ann-count { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: .72rem; padding: 1px 6px; border-radius: 99px; }
.ann-main h3 { margin: 4px 0; font-size: 1.02rem; }
.ann-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ann-snip { margin: 2px 0 4px; }
.ann-act { display: flex; flex-direction: column; gap: 6px; }
.ann-act form { margin: 0; }
.ann-form textarea { min-height: 220px; }
.ann-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 10px 0; }
.ann-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 10px; }
.ann-img { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--card); }
.ann-img img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 6px; }
@media (max-width: 720px) { .ann-card { grid-template-columns: 1fr; } .ann-thumb { width: 100%; height: 150px; } .ann-act { flex-direction: row; } }

/* ---------- ประกาศ: ฝั่งลูกค้า ---------- */
.news-list { display: grid; gap: 18px; margin-top: 14px; }
.news-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; scroll-margin-top: 80px; }
.news-hero { display: block; background: #0A2540; }
.news-hero img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
.news-in { padding: 16px 18px 18px; }
.news-meta { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.news-card h2 { margin: 4px 0 10px; font-size: 1.2rem; line-height: 1.35; }
.news-body { white-space: pre-line; line-height: 1.65; margin: 0; overflow-wrap: anywhere; }
.news-more { margin-top: 8px; }
.news-more summary { cursor: pointer; color: var(--brand, #0B6AAE); font-weight: 500; }
.news-more[open] summary { margin-bottom: 8px; }
.news-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.news-thumbs img { height: 90px; width: auto; border-radius: 8px; border: 1px solid var(--border); display: block; }
.news-box { background: var(--card); border: 1px solid var(--border); border-left: 4px solid #0B6AAE; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.news-box-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.news-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.news-box li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.news-box li a { text-decoration: none; color: inherit; font-weight: 500; }
.news-box li a:hover { text-decoration: underline; }

/* หัวตารางคลิกเรียงได้ + ตารางแบบกะทัดรัด */
.sortlink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.sortlink .arr { font-size: .7rem; opacity: .35; }
.sortlink:hover .arr, .sortlink.on .arr { opacity: 1; }
.sortlink.on { color: var(--primary, #0b5cab); }
table.t.compact th, table.t.compact td { padding: 6px 8px; font-size: .84rem; vertical-align: middle; white-space: nowrap; }
table.t.compact th { font-size: .76rem; }
table.t.compact .pthumb { width: 34px; height: 34px; margin: 0 2px 0 0; }
.thumbcell { display: inline-flex; align-items: center; gap: 2px; }
.thumbcell .more { font-size: .72rem; color: var(--muted); }
.pill.bill-ok { background: #e3f6ea; color: #14683a; }
.pill.bill-no { background: #fff1d6; color: #8a5a00; }
.shipwrap .toolbar { margin-bottom: 8px; }

/* หน้าค้นหาสินค้าพรีออเดอร์ (ฟอร์มกะทัดรัด 1 หน้าจอ) */
.pf-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #e3f5ee; border: 1px solid #bfe6d6; border-radius: 10px; padding: 6px 14px; margin: 0 0 10px; font-size: .84rem; position: relative; }
.pf-bar details summary { cursor: pointer; color: #8a5a00; font-weight: 600; }
.pf-pop { position: absolute; right: 0; top: 100%; z-index: 20; width: min(560px, 92vw); margin-top: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.pf-card { padding: 14px 18px; }
.pf-how { margin: 0 0 10px; }
.prod2 { display: grid; grid-template-columns: 330px 1fr; gap: 20px; align-items: start; background: #f1f5fb; border: 1px solid #d3deee; border-radius: 12px; padding: 14px 16px; }
.prod2 label { font-size: .8rem; font-weight: 700; color: #26405f; margin: 8px 0 3px; }
.prod2 .req { color: #c0392b; font-weight: 600; font-size: .72rem; margin-left: 4px; }
.prod2 input[type=text], .prod2 input[type=url], .prod2 textarea { background: #fff; border: 1.5px solid #8ea4c2; border-radius: 8px; padding: 8px 10px; font-size: .9rem; box-shadow: inset 0 1px 2px rgba(20,40,80,.08); }
.prod2 textarea { min-height: 0; font-family: inherit; }
.prod2 input:focus, .prod2 textarea:focus { border-color: #0b5cab; outline: 3px solid rgba(11,92,171,.25); outline-offset: 0; }
.prod2 ::placeholder { color: #8b97a8; }
.pf-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.pf-row .grow { flex: 1; min-width: 200px; }
.pf-act { margin-top: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pf-label { font-size: .8rem; font-weight: 700; color: #26405f; margin-bottom: 4px; }
.dropzone { position: relative; text-align: center; border: 2.5px dashed #5b86c1; background: #fff; border-radius: 12px; padding: 16px 10px 12px; cursor: pointer; transition: .15s; }
.dropzone:hover, .dropzone:focus, .dropzone.over { background: #eaf3ff; border-color: #0b5cab; outline: none; }
.dropzone.got { background: #e3f6ea; border-color: #1c8a4e; }
.dropzone.full { background: #fff1d6; border-color: #c98a00; }
.dz-ico { font-size: 1.8rem; line-height: 1; }
.dz-main { font-size: 1.05rem; font-weight: 700; color: #0b3d75; margin-top: 4px; }
.dz-sub { font-size: .76rem; color: #5b6b80; margin: 4px 0 8px; }
.dz-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
kbd { background: #fff; border: 1px solid #9fb0c8; border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font: 600 .78rem ui-monospace, Menlo, Consolas, monospace; }
.attprev.pv { gap: 8px; margin-top: 8px; min-height: 0; }
.pvi { position: relative; display: inline-block; }
.pvi .thumb { width: 94px; height: 94px; margin: 0; border: 1.5px solid #8ea4c2; background: #fff; }
.pvx { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: #c0392b; color: #fff; font-size: .72rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.pvx:hover { background: #8e1f14; }
.pf-tip { margin: 6px 0 0; }
@media (max-width: 860px) { .prod2 { grid-template-columns: 1fr; } }
.prod2 .inline-row input[type=text] { width: 150px; max-width: 150px; flex: none; }

.prod2 .pf-notebox { margin-top: 8px; background: #fff8dc; border: 1.5px solid #e2c870; border-left: 5px solid #e0a800; border-radius: 8px; padding: 6px 12px 10px; }
.prod2 .pf-notebox label { color: #7a5a00; margin-top: 2px; }
.prod2 .pf-notebox textarea { border-color: #d9bd62; background: #fffef7; }
.prod2 .pf-row > div { flex: 0 1 auto; }
/* ตะกร้า + ส่งออกให้ล่าม */
.cartwrap { max-height: 52vh; overflow: auto; }
table.t.compact.cart td { white-space: normal; }
.cartprod { display: flex; gap: 10px; align-items: flex-start; }
.cp-thumbs { display: flex; gap: 4px; flex: none; }
.cp-thumbs img, .cp-thumbs .thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; border: 1px solid #b6c4d8; margin: 0; }
.cp-txt { min-width: 0; }
.cp-title { font-weight: 600; }
.cp-var { color: #45546a; max-width: 62ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-note { display: inline-block; margin-top: 2px; background: #fff8dc; border: 1px solid #e2c870; border-radius: 6px; padding: 0 8px; color: #7a5a00; }
.cart-sum { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin: 8px 2px; font-size: .9rem; }
.prod2.cart-act { grid-template-columns: none; display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 6px; }
.prod2.cart-act .grow { flex: 1 1 260px; }
.prod2.cart-act select { background: #fff; border: 1.5px solid #8ea4c2; border-radius: 8px; padding: 8px 10px; font-size: .9rem; }
.cart-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.exp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.exp-text textarea { min-height: 0; height: 58vh; font-size: .82rem; }
.exp-items { max-height: calc(58vh + 54px); overflow: auto; display: grid; gap: 10px; padding-right: 4px; }
.exp-card { padding: 10px 14px; margin: 0; }
.exp-head { font-size: .95rem; margin-bottom: 4px; }
.exp-url { word-break: break-all; margin: 2px 0; }
.exp-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.exp-thumbs .thumb { width: 84px; height: 84px; }
@media (max-width: 900px) { .exp-grid { grid-template-columns: 1fr; } }
.toolbar select { width: auto; min-width: 130px; }
/* หน้าพัสดุทั้งหมด: หัวแถวเดียว + ตารางกะทัดรัด */
.pg-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.pg-head h1 { margin: 0; font-size: 1.35rem; }
.pg-head .tabs { margin: 0; gap: 6px; flex: 1; }
.pg-head .tabs a { padding: 4px 11px; font-size: .84rem; }
.xmenu { position: relative; }
.xmenu > summary { list-style: none; cursor: pointer; }
.xmenu > summary::-webkit-details-marker { display: none; }
.xmenu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 420px; max-width: 90vw; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.xmenu-pop .actions { margin: 0 0 8px; }
.toolbar.slim { margin-bottom: 8px; gap: 8px; }
.toolbar.slim label { font-size: .76rem; margin-bottom: 2px; }
.toolbar.slim input[type=search], .toolbar.slim select { padding: 6px 10px; font-size: .86rem; }
.toolbar.slim .btn { padding: 7px 16px; }
table.ptable td, table.ptable th { padding: 5px 10px; font-size: .82rem; line-height: 1.4; vertical-align: middle; }
table.ptable .pthumb { width: 38px; height: 38px; margin: 0 3px 0 0; }
table.ptable .pk { font-weight: 700; }
.pf-how { display: none; }

@media (prefers-color-scheme: dark) { input[readonly], textarea[readonly] { background: #20262f; } ::placeholder { color: #7d8b9c; } }
/* รายละเอียดพรีออเดอร์ */
.pod-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pod-head h1 { margin: 0; font-size: 1.35rem; }
.pod-head .grow { flex: 1; }
.pod-head form { display: inline; }
.pod-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr); gap: 14px; align-items: stretch; margin-bottom: 12px; }
.pod-grid .card { margin: 0; padding: 14px 16px; }
.pod-grid h2 { margin: 0 0 8px; font-size: 1rem; }
.kvc { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: .9rem; }
.kvc dt { color: var(--muted); }
.kvc dd { margin: 0; font-weight: 600; }
.kvc .tot { font-size: 1.1rem; color: var(--primary); }
.pod-form { background: #f1f5fb; border: 1px solid #d3deee; border-radius: 10px; padding: 10px 14px 14px; }
@media (prefers-color-scheme: dark) { .pod-form { background: #1c232d; border-color: #33404f; } }
.pod-form label { font-size: .8rem; font-weight: 700; margin: 6px 0 3px; }
.pod-form textarea { min-height: 0; font-family: inherit; }
.pod-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pod-save { margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.pod-items { padding: 10px 14px; margin: 0; }
.pod-items h2 { margin: 0 0 6px; font-size: 1rem; display: flex; gap: 10px; align-items: center; }
@media (max-width: 900px) { .pod-grid { grid-template-columns: 1fr; } .pod-fields { grid-template-columns: 1fr; } }
.pod-items table.t.compact td:first-child { white-space: normal; }
input[type=file]:not(.dz-file) { width: 100%; padding: 7px 10px; border: 1.5px dashed var(--field-border, #8ea4c2); border-radius: 8px; background: var(--field-bg, #fff); }
/* กันลากขยายช่องกรอกจนหน้าเลื่อนซ้ายขวา */
textarea { resize: vertical; max-width: 100%; }
.prod2 textarea, .pod-form textarea { resize: none; }
.prod2 textarea[name=note] { height: 58px; }
.prod2 textarea[name=variant] { height: 62px; }

.linkstat { margin: 5px 0 0; padding: 5px 10px; border-radius: 7px; font-size: .8rem; border: 1px solid transparent; font-weight: 500; }
.linkstat[hidden] { display: none; }
.linkstat.ok { background: #e3f6ea; border-color: #9fd5b4; color: #14683a; }
.linkstat.warn { background: #fff1d6; border-color: #e6c36f; color: #7a5200; }
.linkstat.bad { background: #fdecea; border-color: #e5a29a; color: #9b2b20; }
.linkprev { margin-left: 10px; padding: 2px 10px; font: inherit; font-size: .78rem; border: 1.5px solid currentColor; border-radius: 6px; background: #fff; color: #0b5cab; cursor: pointer; }
.linkprev:hover { background: #eaf3ff; }
.prod2 .qty input[type=text] { width: 64px; text-align: center; }

/* คำใบ้ใต้ช่องชื่อสินค้า (ดึงอัตโนมัติ) */
.titlehint{font-size:.78rem;color:var(--muted,#6b7280);margin:3px 0 10px}

/* ---- หน้าบ้านลูกค้า: กระเป๋าเงิน / ขนส่งจากจีน / ใบแจ้งหนี้ / จัดส่ง (0.10.0) ---- */
.walletchip { font-weight: 700; }
.walletcard { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.walletbig { font-size: 1.9rem; font-weight: 800; color: var(--primary); line-height: 1.2; }
.wallet-act { display: flex; flex-wrap: wrap; gap: 8px; }
.amt-in { color: var(--ok-fg); font-weight: 700; }
.amt-out { color: var(--err-fg); font-weight: 700; }
.wform { max-width: 640px; }
.wform label { display: block; font-weight: 600; margin: 12px 0 4px; }
.wform input[type=text], .wform input[type=number], .wform input[type=datetime-local], .wform textarea, .wform select { width: 100%; box-sizing: border-box; }
.req { color: var(--err-fg); font-size: .75rem; font-weight: 600; margin-left: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .row2, .row3 { grid-template-columns: 1fr; } }
.bankpick, .parcelpick { display: grid; gap: 8px; }
.bankopt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; font-weight: 400 !important; margin: 0 !important; }
.bankopt input { margin-top: 4px; }
.bankopt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.warn-note, .ok-note { padding: 10px 14px; border-radius: 10px; }
.warn-note { background: var(--warn-bg); color: var(--warn-fg); }
.ok-note { background: var(--ok-bg); color: var(--ok-fg); }
.notice-line { padding: 8px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-fg); }
.paybox { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin: 12px 0; }
.grid2c { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 14px 0; }
.codebig { font-size: 1.7rem; font-weight: 800; letter-spacing: .04em; color: var(--primary); font-family: ui-monospace, Menlo, Consolas, monospace; margin: 4px 0 8px; }
.copyrow { display: flex; gap: 8px; align-items: flex-start; }
.copyrow input, .copyrow textarea { flex: 1; min-width: 0; }
.steps { padding-left: 20px; line-height: 1.8; }
.labels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.label { border: 2px dashed var(--field-border); border-radius: 8px; padding: 14px; text-align: center; }
.label-code { font-size: 1.8rem; font-weight: 800; letter-spacing: .05em; font-family: ui-monospace, Menlo, Consolas, monospace; }
.label-sub { font-size: .8rem; color: var(--muted); margin-top: 4px; }
@media print {
  header, nav, footer, .noprint, .shipcard, .steps, .tabs { display: none !important; }
  .labelsheet { border: 0; box-shadow: none; }
  .label { break-inside: avoid; border-color: #000; }
  .label-code, .label-sub { color: #000; }
}

/* ===== หน้าบ้านลูกค้า: หน้าตา/ธีมเดียวกับหลังร้าน เต็มจอ กระชับ (0.10.2) ===== */
.is-cust .wrap { max-width: none; padding: 14px 28px 20px; }
.is-cust .logo { height: 48px; }
.is-cust .sbar-top { padding: 8px 28px; }
.is-cust .snav a { padding: 12px 14px; }
.is-cust .snav-in { justify-content: flex-start; gap: 4px; }
.is-cust .snav .walletchip { background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: .85rem; margin-left: 2px; }
.is-cust .ann { max-width: none; margin: 8px 28px 0; padding: 6px 12px; }
.is-cust h1 { font-size: 1.3rem; margin: 0 0 8px; }
.is-cust h2 { font-size: 1.05rem; margin: 10px 0 6px; }
.is-cust h3 { font-size: .98rem; margin: 8px 0 4px; }
.is-cust .card { padding: 12px 16px; margin-bottom: 10px; }
.is-cust .tabs { margin: 0 0 8px; gap: 6px; }
.is-cust .tabs a { padding: 4px 12px; font-size: .88rem; }
.is-cust .preview-bar { padding: 5px 12px; margin-bottom: 8px; font-size: .85rem; }
.is-cust .foot { margin: 10px 0 0; font-size: .8rem; }
.is-cust .wform { max-width: 880px; }
.is-cust .wform label { margin: 8px 0 3px; font-size: .9rem; }
.is-cust .notice-line, .is-cust .paybox { margin: 6px 0; padding: 8px 12px; }
.is-cust .walletbig { font-size: 1.6rem; }
.is-cust .steps { line-height: 1.55; margin: 4px 0; }
.is-cust .codebig { font-size: 1.4rem; margin: 2px 0 4px; }
.is-cust .grid2c { margin: 8px 0; gap: 10px; }
.is-cust .label { padding: 8px; }
.is-cust .label-code { font-size: 1.4rem; }
.is-cust .labels { grid-template-columns: repeat(4, 1fr); }
.is-cust table.t th, .is-cust table.t td { padding: 6px 10px; }
.is-cust input[type=text], .is-cust input[type=number], .is-cust input[type=search], .is-cust input[type=datetime-local], .is-cust input[type=date], .is-cust select, .is-cust textarea { border: 1.5px solid var(--field-border); background: var(--field-bg); border-radius: 8px; padding: 8px 10px; }
.is-cust input:focus, .is-cust select:focus, .is-cust textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.is-cust .wform textarea { resize: none; }
@media (max-width: 819px) { .is-cust .wrap, .is-cust .sbar-top { padding-left: 14px; padding-right: 14px; } .is-cust .snav-in { flex-wrap: wrap; } .is-cust .labels { grid-template-columns: repeat(2, 1fr); } }
.grid3c { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 10px; align-items: start; }
.is-cust .grid2c { grid-template-columns: 1fr 2fr; }
.is-cust .shipcard h2 { margin: 0 0 4px; }
.is-cust .shipcard label { margin: 6px 0 2px; font-size: .85rem; font-weight: 600; display: block; }
.is-cust .copyrow input, .is-cust .copyrow textarea { padding: 5px 8px; }
.is-cust .grid2c .grid2c { grid-template-columns: 1fr 1fr; margin: 0; }
@media (max-width: 1100px) { .grid3c, .is-cust .grid2c { grid-template-columns: 1fr; } }
@media print { .grid3c { display: none; } }
.is-cust .copyrow textarea { height: 3.4em; min-height: 0; resize: none; }
/* ขนส่งจากจีน: ตารางพัสดุ + ใบชำระค่าสินค้า */
.pickbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 12px; margin: 0 0 6px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; position: sticky; top: 0; z-index: 3; }
.pickbar .grow { flex: 1; }
.paygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.paygrid .terms { white-space: pre-line; max-height: 150px; overflow: auto; line-height: 1.5; margin-bottom: 6px; }
.paygrid h2 { margin: 0 0 6px; }
.is-cust .paygrid textarea { resize: none; }
.sumbox { margin: 8px 0 0 auto; max-width: 420px; }
@media (max-width: 1000px) { .paygrid { grid-template-columns: 1fr; } }
.is-cust table.t.compact { font-size: .82rem; }
.is-cust .tablewrap { overflow-x: auto; }
.is-cust .paygrid textarea { height: 4.6em; }
.is-cust .paygrid select { width: 100%; }
.is-cust .paygrid textarea { min-height: 0; height: 4.2em; }
/* รายการส่งออกสินค้า (ซิงก์จาก YD): หน้าตาตาม YD */
table.t.ydt { font-size: .84rem; }
table.t.ydt th { white-space: nowrap; vertical-align: middle; text-align: center; }
table.t.ydt td { vertical-align: middle; padding: 6px 8px; line-height: 1.35; }
table.t.ydt td:nth-child(2), table.t.ydt td:nth-child(3), table.t.ydt td:nth-child(4), table.t.ydt td:nth-child(6), table.t.ydt td:nth-child(7), table.t.ydt td:nth-child(8), table.t.ydt td:nth-child(9), table.t.ydt td:nth-child(11), table.t.ydt td:nth-child(12) { text-align: center; }
.ydt .d9 { font-size: .74rem; }
.ydt .red, .red { color: #d9362b; }
.ydt th .red { font-weight: 600; }
.yst { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: .75rem; font-weight: 600; background: #ffe9b0; color: #7a5200; }
.yst.ok { background: #2ecc71; color: #fff; }
.yst.bad { background: #e5484d; color: #fff; }
.yst.warn { background: #2ecc71; color: #fff; }
.ypen { color: var(--primary); text-decoration: none; font-size: 1.1rem; }

/* ===== ธีมกระชับ หลังบ้าน+หน้าบ้านลูกค้า (ทุกเมนู): หัวบางลง หัวหน้า/ตัวกรองแถวเดียว ===== */
body:is(.is-staff, .is-cust) .sbar-top { padding: 6px 24px; }
body:is(.is-staff, .is-cust) .logo { height: 42px; }
body:is(.is-staff, .is-cust) .snav a, body:is(.is-staff, .is-cust) .snav .dd > summary { padding-top: 10px; padding-bottom: 10px; }
body:is(.is-staff, .is-cust) main.wrap { padding: 12px 20px 16px; }
body:is(.is-staff, .is-cust) main.wrap > h1 { display: inline-block; vertical-align: middle; font-size: 1.25rem; margin: 0 14px 8px 0; white-space: nowrap; }
body:is(.is-staff, .is-cust) main.wrap > .tabs { display: inline-flex; vertical-align: middle; margin: 0 0 8px; gap: 6px; }
body:is(.is-staff, .is-cust) main.wrap > .tabs a { padding: 3px 12px; font-size: .84rem; }
body:is(.is-staff, .is-cust) main.wrap > .toolbar { align-items: center; gap: 6px 8px; margin: 0 0 8px; }
body:is(.is-staff, .is-cust) main.wrap > .toolbar > div { display: flex; align-items: center; gap: 6px; }
body:is(.is-staff, .is-cust) main.wrap > .toolbar .grow { flex: 1 1 240px; }
body:is(.is-staff, .is-cust) main.wrap > .toolbar .grow input { width: 100%; }
body:is(.is-staff, .is-cust) main.wrap > .toolbar label { white-space: nowrap; margin: 0; font-size: .78rem; }
body:is(.is-staff, .is-cust) main.wrap > .toolbar input, body:is(.is-staff, .is-cust) main.wrap > .toolbar select { padding: 4px 8px; font-size: .84rem; min-height: 0; width: auto; }
body:is(.is-staff, .is-cust) main.wrap > .toolbar .grow input { width: 100%; }
body:is(.is-staff, .is-cust) main.wrap > .toolbar .btn { padding: 5px 14px; font-size: .85rem; }
body:is(.is-staff, .is-cust) main.wrap > .pager { margin: 8px 0; }
body:is(.is-staff, .is-cust) th a.sortlink { color: inherit; text-decoration: none; }

/* หน้ารายการ (ตารางเดียว) บนจอกว้าง: พอดีจอ หัวตารางล็อก เลื่อนเฉพาะแถว (app.js ตั้ง class fit + ความสูง) */
body:is(.is-staff, .is-cust).fit { height: 100vh; overflow: hidden; }
body.fit main.wrap { padding-bottom: 4px; }
body.fit main.wrap > .tablewrap { overflow: auto; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
body.fit table.t { border: 0; border-radius: 0; overflow: visible; border-collapse: separate; border-spacing: 0; }
body.fit table.t thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); box-shadow: 0 1px 0 var(--border); padding-top: 6px; padding-bottom: 6px; }
body.fit main.wrap > .pager { margin: 4px 0 0; }
body.fit main.wrap > p.small { margin: 2px 0 0; text-align: center; }
body.fit main.wrap > ul.plist { overflow: auto; margin: 0; padding: 0 4px 0 0; }
body.is-cust main.wrap > p.muted.small { display: inline-block; vertical-align: middle; margin: 0 14px 8px 0; }

/* การ์ดสินค้าที่ค้นหาจากลิงก์ (หน้าเลือกสินค้า) */
.prodcard { border: 1px solid var(--border); border-left: 5px solid #5b86c1; border-radius: 10px; background: var(--card); padding: 10px 14px 12px; margin: 8px 0 10px; }
.prodcard .pc-note { color: var(--muted, #64748b); font-size: .9rem; }
.prodcard .pc-title { font-weight: 700; line-height: 1.35; font-size: 1.02rem; }
.prodcard .pc-shop { margin-top: 2px; }
.prodcard .pc-lab { margin: 10px 0 5px; font-size: .85rem; font-weight: 600; color: var(--muted, #64748b); }
.prodcard .pc-opts { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow: auto; padding: 2px; }
.prodcard .pc-opt { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--bg); border-radius: 8px; padding: 4px 9px; cursor: pointer; font: inherit; text-align: left; max-width: 100%; }
.prodcard .pc-opt:hover { border-color: #5b86c1; }
.prodcard .pc-opt.on { border-color: #0b5cab; background: #eaf3ff; box-shadow: 0 0 0 2px rgba(11, 92, 171, .25); }
.prodcard .pc-oimg { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex: none; }
.prodcard .pc-oname { font-size: .86rem; }
.prodcard .pc-oprice { font-size: .78rem; color: var(--muted, #64748b); white-space: nowrap; }
/* รูปสินค้าใหญ่ แทนกรอบวางรูป */
.prodgallery { text-align: center; }
.prodgallery .pg-main { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: block; }
.prodgallery .pg-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.prodgallery .pg-th { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; background: #fff; }
.prodgallery .pg-th:hover { border-color: #0b5cab; }
.attoggle { margin-top: 8px; }
[hidden] { display: none !important; }
.pf-pricehint { margin: 8px 0 0; padding: 7px 12px; font-size: .82rem; line-height: 1.45; background: #fff8dc; border: 1px solid #e2c870; border-left: 5px solid #e0a800; border-radius: 8px; color: #6b4e00; }

/* แถบโหมดทดลอง (เว็บทดลองพอร์ต 3001) */
.modebar { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; padding: 5px 14px; background: #f59e0b; color: #1f1300; font-size: .85rem; font-weight: 500; text-align: center; }
.modebar a { color: #1f1300; font-weight: 700; text-decoration: underline; }
body.is-test .topbar.staff { box-shadow: inset 0 -3px 0 #f59e0b; }

/* หัวหน้าแบบมีปุ่มด้านขวา + หน้าผู้ใช้งาน */
.pagebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.pagebar .pb-t { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pagebar h1 { margin: 0; font-size: 1.25rem; }
.pagebar .pb-sub { color: var(--muted, #64748b); font-size: .85rem; }
.ucell { display: inline-flex; align-items: center; gap: 10px; }
.ucell .uc-t { display: flex; flex-direction: column; line-height: 1.25; }
.ucell .uc-t small { color: var(--muted, #64748b); }
.avatar.sm { width: 32px; height: 32px; flex: none; background: #0B4F8A; color: #fff; font-size: .95rem; }
.userform { max-width: 880px; }
.userform .roles-help { background: var(--bg); border: 1px solid var(--border); border-left: 5px solid #5b86c1; border-radius: 8px; padding: 8px 14px; font-size: .88rem; }
.userform .roles-help ul { margin: 6px 0 2px; padding-left: 20px; }
.userform .roles-help li { margin: 2px 0; }
.userform .req { color: #c0392b; font-size: .75rem; font-weight: 600; }

.grid2 > .full { grid-column: 1 / -1; }
.userlist .tablewrap { margin-bottom: 8px; }
.userform .lockhint { margin-top: 6px; padding: 6px 10px; background: #fff8dc; border: 1px solid #e2c870; border-radius: 8px; color: #6b4e00; line-height: 1.4; }

/* หน้าสมัครสมาชิก (หน้าเดียว ไม่ต้องเลื่อน) */
.regcard { max-width: 860px; margin: 6px auto 10px; padding: 14px 26px 12px; }
.regcard .reg-head h1 { margin: 0 0 2px; font-size: 1.45rem; }
.regcard .reg-head p { margin: 0; font-size: .9rem; }
.regcard .req { color: #c0392b; font-weight: 700; }
.regcard .opt { color: var(--muted, #64748b); font-weight: 400; font-size: .78rem; }
.regsteps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 8px 0 8px; font-size: .78rem; color: var(--muted, #64748b); }
.regsteps li { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px 2px 3px; }
.regsteps li b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0B4F8A; color: #fff; font-size: .72rem; }
.reg-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 16px; }
.reg-grid .fld { grid-column: span 3; }
.reg-grid .fld.third { grid-column: span 2; }
.reg-grid .span2 { grid-column: 1 / -1; }
.reg-grid .fld.span2 { grid-column: 1 / -1; }
.reg-grid label { margin: 0 0 3px; font-size: .86rem; font-weight: 600; }
.reg-grid input[type=text], .reg-grid input[type=email], .reg-grid input[type=tel], .reg-grid input[type=password], .reg-grid textarea { width: 100%; box-sizing: border-box; padding: 8px 11px; border: 1.5px solid var(--field-border, #b8c4d6); background: var(--field-bg, #fff); border-radius: 8px; font: inherit; }
.reg-grid textarea { resize: vertical; min-height: 46px; }
.reg-grid input:focus, .reg-grid textarea:focus { outline: 2px solid var(--focus, #5b86c1); outline-offset: 1px; }
.reg-grid .fld.bad input, .reg-grid .fld.bad textarea { border-color: #d64545; }
.reg-grid .hint { margin-top: 2px; font-size: .76rem; line-height: 1.3; }
.reg-grid .err-text { margin-top: 2px; font-size: .8rem; }
.pwwrap { position: relative; }
.pwwrap input { padding-right: 42px; }
.pwtoggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: 1.05rem; padding: 4px 8px; line-height: 1; }
.pwmatch { min-height: 1.1em; margin-top: 2px; font-size: .8rem; }
.pwmatch.ok { color: #14683a; }
.pwmatch.bad { color: #c0392b; }
.reg-foot .check { margin-top: 4px; font-size: .9rem; }
.reg-foot .btn.block { margin-top: 10px; padding: 11px 14px; font-size: 1.05rem; }
.reg-foot p { margin: 8px 0 0; }
@media (max-width: 720px) { .reg-grid { grid-template-columns: 1fr; } .reg-grid .fld, .reg-grid .fld.third { grid-column: 1 / -1; } .regcard { padding: 16px; } }

/* ช่องที่อยู่แบบเลือกจากรายการ */
.addrpicker .addr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.addrpicker .addr-search { position: relative; }
.addrpicker .addr-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin: 2px 0 0; padding: 0; list-style: none; max-height: 270px; overflow: auto; background: var(--card); border: 1.5px solid #5b86c1; border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.addrpicker .addr-list li { display: flex; align-items: baseline; gap: 8px; padding: 7px 11px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: .9rem; }
.addrpicker .addr-list li:last-child { border-bottom: 0; }
.addrpicker .addr-list li.on { background: rgba(91, 134, 193, .22); }
.addrpicker .addr-list li b { font-weight: 600; white-space: nowrap; }
.addrpicker .addr-list li span { color: var(--muted, #64748b); font-size: .82rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addrpicker .addr-list li em { font-style: normal; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.addrpicker .addr-list li.addr-none { cursor: default; color: var(--muted, #64748b); }
.addrpicker .addr-chip { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 10px; background: rgba(34, 160, 90, .13); border: 1.5px solid rgba(34, 160, 90, .6); border-radius: 8px; font-size: .88rem; }
.addrpicker .addr-chip .ac-ok { color: #1c8a4e; font-weight: 700; }
.addrpicker .addr-chip .ac-t { flex: 1; min-width: 0; line-height: 1.25; }
.addrpicker .addr-chip .ac-pcs { font-weight: 700; }
.addrpicker .addr-chip select { width: auto; padding: 3px 6px; border-radius: 6px; font: inherit; font-weight: 700; }
.addrpicker .addr-chip .ac-change { border: 0; background: transparent; color: #0b5cab; text-decoration: underline; cursor: pointer; font: inherit; padding: 2px 4px; }
.addrpicker.bad .addr-row input { border-color: #d64545; }
@media (max-width: 720px) { .addrpicker .addr-row { grid-template-columns: 1fr; } }

/* สมัครสมาชิก: แท็บประเภทบัญชี + ส่วนนิติบุคคล */
.reg-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.regcard .reg-head h1 { margin: 0; }
.regco { max-width: 940px; }
.acct-tabs { display: inline-flex; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.acct-tabs a { padding: 5px 15px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.acct-tabs a:hover { background: rgba(91, 134, 193, .18); }
.acct-tabs a.on { background: #0B4F8A; color: #fff; }
.reg-grid .fld.w4 { grid-column: span 4; }
.branchrow .br-radios { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-height: 40px; }
.branchrow .br-lab { font-weight: 600; font-size: .86rem; }
.reg-grid .radio { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; font-size: .9rem; cursor: pointer; padding: 5px 13px; border: 1.5px solid var(--field-border, #b8c4d6); border-radius: 999px; }
.reg-grid .radio input { width: auto; margin: 0; }
.reg-grid .radio:has(input:checked) { border-color: #0b5cab; background: rgba(11, 92, 171, .16); }
.branchrow .br-code { display: inline-flex; align-items: center; gap: 8px; }
.branchrow .br-code label { margin: 0; font-weight: 600; font-size: .84rem; }
.reg-grid .br-code input[type=text] { width: 110px; }
.cobadge { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 6px; background: rgba(91, 134, 193, .2); font-size: .78rem; }
.regco { padding-top: 10px; padding-bottom: 8px; }
.regco .regsteps { margin: 6px 0 6px; }
.regco .reg-grid { gap: 3px 16px; }
.regco .reg-grid input[type=text], .regco .reg-grid input[type=email], .regco .reg-grid input[type=tel], .regco .reg-grid input[type=password] { padding: 6px 10px; }
.regco .reg-grid label { margin-bottom: 2px; font-size: .83rem; }
.regco .reg-foot .btn.block { margin-top: 6px; padding: 9px 14px; }
.regco .reg-foot p { margin: 4px 0 0; }
.regco .branchrow .br-radios { min-height: 34px; }
/* จอเตี้ย (โน้ตบุ๊ก): ซ่อนแถบขั้นตอน และบีบข้อความเงื่อนไข เพื่อให้ฟอร์มสมัครอยู่ในหนึ่งจอ */
@media (max-height: 840px) {
  .regcard .regsteps { display: none; }
  .regcard .reg-head { margin-bottom: 6px; }
  .reg-grid .hint, .reg-grid .pwmatch, .reg-grid .err-text { font-size: .72rem; line-height: 1.15; margin-top: 1px; }
  .reg-grid .pwmatch { min-height: 0; }
}
.reg-grid .avail.ok { color: #1c8a4e; font-weight: 700; }
.reg-grid .avail.bad { color: #d64545; font-weight: 700; }
.reg-grid .hint .h-main { word-break: break-word; }

/* แก้ไขสมาชิก (หลังบ้าน): กริดสามช่องต่อแถว พอดีหนึ่งจอ */
.staffedit { max-width: 980px; margin: 0 0 10px; padding: 14px 22px 12px; }
.staffedit .staff-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.staffedit .staff-foot .small { margin-left: auto; }
.reg-grid select { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1.5px solid var(--field-border, #b8c4d6); background: var(--field-bg, #fff); border-radius: 8px; font: inherit; }
.reg-grid input:disabled { opacity: .72; background: var(--bg); cursor: not-allowed; }
.staffedit .reg-grid label, .staffedit label { margin-bottom: 2px; }

/* รายการสมาชิก: ช่องรหัสลูกค้า = ป้ายรหัส + ปุ่มดินสอ (กดแล้วมีกล่องเล็กลอย ไม่ดันแถว) */
.codecell { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
details.codepop { display: inline-block; }
details.codepop > summary { list-style: none; cursor: pointer; }
details.codepop > summary::-webkit-details-marker { display: none; }
.iconbtn { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); font-size: .9rem; line-height: 1; }
.iconbtn:hover { border-color: #5b86c1; background: rgba(91, 134, 193, .18); }
details.codepop .pop { position: fixed; z-index: 70; width: 270px; padding: 10px 12px 12px; background: var(--card); border: 1.5px solid #5b86c1; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); white-space: normal; }
details.codepop .pop label { display: block; margin: 0 0 4px; font-size: .84rem; font-weight: 600; }
details.codepop .pop input[type=text] { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1.5px solid var(--field-border, #b8c4d6); background: var(--field-bg, #fff); border-radius: 8px; font: inherit; }
details.codepop .pop .hint { margin: 4px 0 0; font-size: .74rem; line-height: 1.25; }
details.codepop .pop .pop-act { margin-top: 8px; text-align: right; }

/* รายการสมาชิก: คอลัมน์เยอะ ให้พอดีจอ 1366 — ช่องไฟแคบลง ปุ่มท้ายแถวเรียงแนวตั้ง */
table.memlist th, table.memlist td { padding: 6px 8px; vertical-align: top; }
table.memlist td:last-child { white-space: nowrap; }
table.memlist td:first-child { max-width: 300px; }
table.memlist td:first-child .small { white-space: normal; }
table.memlist td:last-child form.inline { margin: 0; display: inline; }
table.memlist .pill { white-space: nowrap; }
.btn.ghost.stop { color: #d64545; border-color: #d64545; }
.btn.ghost.stop:hover { background: #d64545; color: #fff; }
.btn.ghost.go { color: #1c8a4e; border-color: #1c8a4e; }
.btn.ghost.go:hover { background: #1c8a4e; color: #fff; }

/* รายการสมาชิก: แถวค้นหา + ตัวกรอง (ช่องค้นหาแคบลง ตัวกรองอยู่แถวเดียวกัน) */
body.is-staff main.wrap > .mem-filter { gap: 6px 16px; align-items: center; margin-bottom: 8px; }
body.is-staff main.wrap > .mem-filter .mf-q input { width: 250px; }
body.is-staff main.wrap > .mem-filter select { min-width: 140px; }
.mem-filter .mf-act { display: flex; gap: 8px; align-items: center; }
table.memlist th { white-space: normal; line-height: 1.2; }
table.memlist th .sortlink { white-space: nowrap; }
table.memlist .seq { font-weight: 700; white-space: nowrap; }
table.memlist td:nth-child(4), table.memlist td:nth-child(11), table.memlist td:nth-child(12) { white-space: nowrap; }
table.memlist th:first-child .sortlink { white-space: normal; }
table.memlist td:nth-child(2) { max-width: 250px; }
table.memlist td:nth-child(2) .small { white-space: normal; }
table.memlist td:nth-child(3) { max-width: 170px; word-break: break-all; }

/* ===== หน้าแรกลูกค้า (Dashboard) ===== */
.dhero { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(300px, 1.3fr) auto; gap: 14px 22px; align-items: center; padding: 14px 20px; margin: 0 0 12px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, #0A2540 0%, #0B4F85 60%, #0B6AAE 100%); }
.dhero h1 { margin: 0; font-size: 1.45rem; color: #fff; line-height: 1.2; }
.dhero .dh-hi { font-size: .82rem; opacity: .8; }
.dhero .dh-sub { font-size: .88rem; opacity: .9; margin-top: 2px; }
.dhero .dh-sub b { background: rgba(255,255,255,.16); padding: 1px 8px; border-radius: 6px; letter-spacing: .5px; }
.dhero .dh-mt { font-size: .72rem; opacity: .75; margin-bottom: 4px; }
.dhero .dmark { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.dhero .dm-l { font-size: .78rem; width: 68px; flex: none; opacity: .9; }
.dhero .dmark input { flex: 1; min-width: 0; padding: 4px 9px; font-weight: 700; letter-spacing: .5px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.dhero .btn.ghost.light { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.dhero .btn.ghost.light:hover { background: rgba(255,255,255,.15); }
.dhero .dmark .btn.ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.dhero .dh-act { display: flex; flex-direction: column; gap: 6px; }
.dhero .dh-act .btn { white-space: nowrap; text-align: center; margin: 0; }
.dash { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: 12px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px; color: var(--text); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.kpi:hover { box-shadow: 0 4px 14px rgba(11,42,71,.12); transform: translateY(-1px); }
.kpi .k-l { font-size: .78rem; color: var(--muted); font-weight: 600; }
.kpi .k-v { font-size: 1.45rem; font-weight: 800; line-height: 1.25; color: var(--primary); }
.kpi .k-s { font-size: .76rem; color: var(--muted); }
.kpi.bad { border-left-color: #d64545; } .kpi.bad .k-v { color: #c0392b; }
.kpi.ok { border-left-color: #1c8a4e; } .kpi.ok .k-v { color: #1c8a4e; }
.dcard { padding: 12px 16px; margin: 0; }
.dcard .dc-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.dcard .dc-h h2 { margin: 0; font-size: 1rem; }
.dcard .dc-h a { font-size: .82rem; }
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pipe a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 10px; background: var(--bg); color: var(--muted); text-decoration: none; text-align: center; }
.pipe a.has { background: #E3F0FA; color: var(--primary); }
.pipe a:hover { outline: 2px solid var(--primary); }
.pipe .p-n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.pipe .p-l { font-size: .74rem; font-weight: 600; }
.pipe i { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); z-index: 1; font-size: 1.1rem; }
.dash-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dlist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.dlist li:last-child { border-bottom: 0; }
.dlist.news li { flex-direction: column; align-items: flex-start; gap: 0; }
.dlist .amt-in { color: #1c8a4e; } .dlist .amt-out { color: #c0392b; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border-left: 4px solid var(--primary); background: var(--bg); font-size: .86rem; }
.todo li.bad { border-left-color: #d64545; background: var(--err-bg); }
.todo li.warn { border-left-color: #d99a00; background: var(--warn-bg); }
.todo li.ok { border-left-color: #1c8a4e; background: var(--ok-bg); }
.todo .btn { flex: none; margin: 0; white-space: nowrap; }
.dok { margin: 4px 0; color: var(--ok-fg); font-weight: 600; }
.drate { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: .9rem; }
.drate dt { color: var(--muted); } .drate dd { margin: 0; font-weight: 700; text-align: right; }
@media (max-width: 1100px) { .dash { grid-template-columns: 1fr; } .dash-cols { grid-template-columns: 1fr 1fr; } .dhero { grid-template-columns: 1fr; } .dhero .dh-act { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 640px) { .dash-kpis { grid-template-columns: 1fr 1fr; } .dash-cols { grid-template-columns: 1fr; } .pipe { grid-template-columns: repeat(3, 1fr); } .pipe i { display: none; } }
.dhero { padding: 10px 18px; margin-bottom: 10px; }
.dhero .dh-act { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 250px; }
.dash, .dash-main, .dash-side { gap: 10px; }
.dlist li { padding: 4px 0; }
.dcard { padding: 10px 14px; }
.pipe a { padding: 6px 4px; }
.pipe .p-n { font-size: 1.3rem; }

/* ===== ข้อมูลขนส่ง: ชุดราคาขาย (ต้นทุน YD = สีฟ้า · ราคาขาย = สีเขียว) ===== */
.ps-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 2px 0 8px; }
.ps-sets { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-sets a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ps-sets a small { font-weight: 600; font-size: .72rem; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.ps-sets a.on { background: #1c8a4e; border-color: #1c8a4e; color: #fff; } .ps-sets a.on small { background: rgba(255,255,255,.25); color: #fff; }
.ps-new, .ps-yd { display: flex; align-items: center; gap: 6px; margin: 0; }
.ps-new input { width: 170px; } .ps-new select { min-width: 230px; max-width: 320px; width: auto; text-overflow: clip; }
.ps-yd { margin-left: auto; }
.ps-new input, .ps-new select, .ps-bar input { padding: 5px 9px; }
.ps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.ps-bar label { font-weight: 600; margin: 0; } .ps-bar input { width: 170px; font-weight: 700; } .ps-bar .grow { flex: 1; } .ps-bar .btn { margin: 0; }
.ps-legend { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.ps-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } .lg-cost { background: rgba(11,106,174,.35); } .lg-sell { background: rgba(28,138,78,.4); }
.ps-rule { margin: 6px 2px; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.ps-box { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
.ps-box h2 { margin: 0; padding: 8px 12px; font-size: 1rem; border-bottom: 1px solid var(--border); }
table.ps { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.ps th, table.ps td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.ps th { font-size: .78rem; text-align: center; font-weight: 700; } table.ps th:first-child, table.ps td:first-child { text-align: left; }
table.ps td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.ps .c-cost { background: rgba(11,106,174,.12); } table.ps th.c-cost { background: rgba(11,106,174,.22); color: #0B5C99; }
table.ps .c-sell { background: rgba(28,138,78,.14); } table.ps th.c-sell { background: rgba(28,138,78,.26); color: #17603A; }
table.ps .ps-code { display: flex; flex-direction: column; line-height: 1.2; min-width: 120px; }
table.ps input.pin { width: 82px; padding: 4px 6px; text-align: right; font-weight: 700; border-color: #1c8a4e; background: var(--card); }
table.ps input.pin.bad { border-color: #d64545; background: var(--err-bg); color: var(--err-fg); }
table.ps .pm { white-space: nowrap; font-size: .8rem; font-weight: 700; color: #1c8a4e; } table.ps .pm.bad { color: #d64545; }
.ps-adv { margin: 10px 0 0; } .ps-adv summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.ps-addtype { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; } .ps-addtype input { width: 130px; }
.ps-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ps-notes label { font-size: .82rem; } .ps-notes textarea { width: 100%; }
@media (max-width: 1100px) { .ps-grid, .ps-notes { grid-template-columns: 1fr; } }
.codecell .psname { flex-basis: 100%; margin-top: 2px; line-height: 1.1; }
table.ps .ps-code { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; max-width: 210px; }
table.ps .ps-code b { flex: none; min-width: 22px; }
table.ps .ps-code span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.ps th, table.ps td { padding: 4px 8px; }
table.ps input.pin { padding: 3px 6px; }
.codecell { flex-wrap: wrap; }

/* ===== หน้ารายละเอียดพรีออเดอร์ (หลังร้าน): การ์ดสินค้า + แถบสรุปยอดด้านขวา ===== */
.pod-head { align-items: center; }
.pod-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pod-back { font-size: .85rem; }
.pod-steps { display: flex; gap: 0; list-style: none; margin: 0 0 12px; padding: 0; }
.pod-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--card); border: 1px solid var(--border); color: var(--muted); font-size: .85rem; font-weight: 600; }
.pod-steps li:first-child { border-radius: 10px 0 0 10px; } .pod-steps li:last-child { border-radius: 0 10px 10px 0; } .pod-steps li + li { border-left: 0; }
.pod-steps li i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); font-size: .78rem; }
.pod-steps li.done { color: #1c8a4e; } .pod-steps li.done i { background: #1c8a4e; color: #fff; }
.pod-steps li.now { background: var(--primary); border-color: var(--primary); color: #fff; } .pod-steps li.now i { background: rgba(255,255,255,.25); color: #fff; }
.pod2 { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.pod2-main { display: grid; gap: 10px; min-width: 0; }
.pod2-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pod2-h h2 { margin: 0; font-size: 1.05rem; }
.pod2-side { display: grid; gap: 12px; position: sticky; top: 8px; }
.pod2-side .card { margin: 0; padding: 12px 16px; } .pod2-side h2 { margin: 0 0 8px; font-size: .98rem; }
.pi-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(11,42,71,.05); }
.pi-pics { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.pi-main { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); display: block; }
.pi-sub { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.pi-none { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: .85rem; }
.pi-top { display: flex; gap: 8px; align-items: baseline; } .pi-no { color: var(--muted); font-weight: 700; font-size: .85rem; }
.pi-name { margin: 0; font-size: 1rem; line-height: 1.3; word-break: break-word; }
.pi-link { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-site { background: var(--primary); color: #fff; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.pi-spec { font-size: .88rem; margin: 2px 0; } .pi-note { font-size: .86rem; padding: 4px 8px; margin: 4px 0; border-radius: 8px; background: var(--warn-bg); color: var(--warn-fg); }
.pi-warn { margin-top: 6px; font-size: .84rem; color: var(--err-fg); background: var(--err-bg); padding: 4px 8px; border-radius: 8px; }
.pi-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pi-edit label { display: flex; flex-direction: column; font-size: .76rem; font-weight: 700; color: var(--muted); gap: 2px; margin: 0; }
.pi-edit input[type=text], .pi-edit input:not([type]) { width: 100px; padding: 5px 8px; font-weight: 700; color: var(--text); }
.pi-edit input[readonly] { background: var(--bg); }
.pi-chk { flex-direction: row !important; align-items: center; gap: 5px !important; font-size: .85rem !important; color: var(--text) !important; font-weight: 600 !important; }
.pi-sum { margin-left: auto; text-align: right; display: flex; flex-direction: column; line-height: 1.25; } .pi-sum b { font-size: 1.1rem; color: var(--primary); }
.pod-cust .pc-name { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.pod-cust textarea { width: 100%; min-height: 0; }
.pod-cost .pod-fields { grid-template-columns: 1fr; gap: 8px; } .pod-cost label { font-size: .8rem; font-weight: 700; margin: 0 0 2px; } .pod-cost input { width: 100%; font-weight: 700; }
.pod-total .ps-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: .9rem; border-bottom: 1px solid var(--border); } .pod-total .ps-row.neg b { color: #c0392b; }
.pod-total .ps-grand { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; margin: 8px 0 4px; border-radius: 10px; background: linear-gradient(120deg, #0A2540, #0B6AAE); color: #fff; } .pod-total .ps-grand b { font-size: 1.5rem; }
.pod-total .btn.block { margin-top: 6px; }
@media (max-width: 1000px) { .pod2 { grid-template-columns: 1fr; } .pod2-side { position: static; } .pi-card { grid-template-columns: 100px minmax(0, 1fr); } .pi-main, .pi-none { width: 100px; height: 100px; } .pod-steps { flex-wrap: wrap; } }
.pod2-side { position: static; }

/* ===== พรีออเดอร์: จัดให้กระชับ พอดีหนึ่งจอ (ทับค่าด้านบน) ===== */
.pod-head { margin-bottom: 6px; } .pod-head h1 { font-size: 1.2rem; }
.pod-steps { margin-bottom: 8px; } .pod-steps li { padding: 4px 10px; font-size: .8rem; } .pod-steps li i { width: 18px; height: 18px; font-size: .7rem; }
.pod2 { gap: 10px; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); }
.pod2-main { gap: 8px; }
.pod-cust { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0; }
.pod-cust summary { display: flex; align-items: center; gap: 12px; padding: 7px 12px; cursor: pointer; list-style: none; }
.pod-cust summary::-webkit-details-marker { display: none; }
.pod-cust summary::before { content: '▾'; color: var(--muted); font-size: .8rem; } .pod-cust:not([open]) summary::before { content: '▸'; }
.pod-cust .pc-name { font-weight: 700; } .pod-cust .pc-meta { color: var(--muted); font-size: .82rem; } .pod-cust .grow { flex: 1; }
.pod-cust .pc-wal { font-size: .85rem; } .pod-cust .pc-wal b { font-size: .95rem; }
.pod-cust[open] .pc-meta { display: none; }
.pc-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding: 0 12px 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.kvi { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; font-size: .85rem; align-content: start; } .kvi dt { color: var(--muted); } .kvi dd { margin: 0; font-weight: 600; }
.pc-remark label { font-size: .78rem; font-weight: 700; margin: 0 0 2px; display: block; } .pc-remark textarea { width: 100%; min-height: 0; padding: 5px 8px; }
.pod2-h h2 { font-size: .95rem; }
.pod2-items { display: grid; gap: 8px; max-height: calc(100vh - 345px); min-height: 160px; overflow-y: auto; padding-right: 2px; }
.pi-card { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 12px; }
.pi-main, .pi-none { width: 96px; height: 96px; } .pi-sub { width: 28px; height: 28px; }
.pi-name { font-size: .93rem; } .pi-link { margin: 2px 0; font-size: .8rem; } .pi-spec { font-size: .83rem; } .pi-note { font-size: .8rem; padding: 2px 8px; margin: 2px 0; }
.pi-edit { margin-top: 4px; padding-top: 6px; gap: 6px 12px; } .pi-edit input[type=text], .pi-edit input:not([type]) { width: 84px; padding: 3px 7px; }
.pi-sum b { font-size: 1rem; }
.pod2-side { gap: 8px; } .pod2-side .card { padding: 8px 14px; } .pod2-side h2 { margin: 0 0 6px; font-size: .92rem; }
.pod-cost .pod-fields { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .pod-cost label { font-size: .72rem; line-height: 1.15; }
.pod-total .ps-row { padding: 2px 0; font-size: .85rem; }
.pod-total .ps-grand { padding: 6px 12px; margin: 6px 0 2px; } .pod-total .ps-grand b { font-size: 1.35rem; }
.pod-total p { margin: 2px 0; }

/* ===== หน้าคำสั่งซื้อของลูกค้า (อ่านอย่างเดียว) ใช้แบบเดียวกับหลังร้าน ===== */
.pod2.cust { grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); }
.pod-explain { display: flex; gap: 12px; align-items: flex-start; padding: 8px 14px; margin: 0 0 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); border-left: 5px solid var(--primary); }
.pod-explain.pending { border-left-color: #d99a00; background: var(--warn-bg); color: var(--warn-fg); }
.pod-explain.confirmed { border-left-color: var(--primary); } .pod-explain.paid, .pod-explain.done { border-left-color: #1c8a4e; } .pod-explain.cancelled { border-left-color: #d64545; background: var(--err-bg); color: var(--err-fg); }
.pod-explain .pe-ic { font-size: 1.3rem; line-height: 1.2; } .pod-explain .small { margin-top: 2px; }
.pod-cust-ro { margin: 0; padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; } .pod-cust-ro .kvi { grid-template-columns: auto auto auto auto; gap: 2px 12px; }
.pod-cust-ro .pi-note { margin: 0; }
.pi-ro { align-items: center; } .pi-ro > span { display: flex; flex-direction: column; font-size: .95rem; line-height: 1.2; } .pi-ro > span b { font-size: 1rem; } .pi-ro .pill { align-self: center; }
.ps-grand.wait b { font-size: 1.05rem; }
.pod-total .paybox { margin-top: 8px; display: grid; gap: 6px; } .pod-total .paybox .btn { margin: 0; }
.pod-total .ps-row b { text-align: right; }

/* ===== รูปย่อในรายการคำสั่งซื้อ (หน้าวันที่สั่งซื้อ) ===== */
.otn { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); display: block; }
.otn.none { display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--muted); opacity: .6; }
.otn { width: 30px; height: 30px; }
table.polist th { white-space: normal; line-height: 1.15; vertical-align: bottom; } table.polist th .sortlink { white-space: normal; }
table.polist th, table.polist td { padding-left: 7px; padding-right: 7px; }
table.polist td:nth-child(2) { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-cust table.polist td:nth-child(2) { max-width: none; }
.bk-kbank { --bk: #138f2d; }
.bk-scb { --bk: #4e2e7f; }
.bk-bbl { --bk: #1e4598; }
.bk-ktb { --bk: #00a6e6; }
.bk-bay { --bk: #fec43b; }
.bk-ttb { --bk: #0f6cb6; }
.bk-gsb { --bk: #eb198d; }
.bk-baac { --bk: #4b9b3e; }
.bk-ghb { --bk: #f57d20; }
.bk-uob { --bk: #0b3979; }
.bk-cimb { --bk: #7e2f36; }
.bk-lhb { --bk: #6d6e71; }
.bk-kkp { --bk: #5b3a9b; }
.bk-tisco { --bk: #12418a; }
.bk-icbc { --bk: #c4161c; }
.bk-exim { --bk: #0096d6; }
.bk-sme { --bk: #f7941d; }
.bk-isbt { --bk: #007a3d; }
.bk-sc { --bk: #0473ea; }

/* ===== เมนูหลังบ้านแบบแท็บย่อย (เหมือนหน้าบ้าน) ===== */
body.is-staff main.wrap > .tabs.wide { display: flex; margin: 2px 0 10px; }
body.is-staff main.wrap > h1 + .tabs { margin-left: 4px; }

/* ===== ป้ายธนาคาร + หน้าบัญชีธนาคาร ===== */
.bk { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bk, #64748b); color: #fff; font-weight: 800; font-size: .62rem; letter-spacing: -.2px; box-shadow: 0 1px 3px rgba(0,0,0,.25); object-fit: contain; }
img.bk-img { background: #fff; padding: 3px; }
.bk-bay { color: #3b2a00; } .bk-other { font-size: .95rem; }
.bk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.bk-intro { margin: 0 0 8px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bk-card { position: relative; border-radius: 16px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #0A2540 0%, #12467b 100%); box-shadow: 0 4px 14px rgba(11,42,71,.22); overflow: hidden; }
.bk-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.07); }
.bk-card.off { filter: grayscale(.85); opacity: .7; }
.bk-top { display: flex; align-items: center; gap: 10px; } .bk-name { display: flex; flex-direction: column; gap: 3px; } .bk-name b { font-size: .95rem; line-height: 1.2; } .bk-name .pill { align-self: flex-start; }
.bk-num { margin: 12px 0 4px; font: 700 1.3rem/1.2 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 1px; }
.bk-holder { font-size: .88rem; opacity: .95; } .bk-holder .muted { color: rgba(255,255,255,.65); }
.bk-act { margin-top: 10px; position: relative; z-index: 1; }
.bk-act .btn.ghost { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.bk-edit[open] { background: var(--card); color: var(--text); border-radius: 12px; padding: 8px 10px; } .bk-edit[open] summary { margin-bottom: 8px; color: var(--text); border-color: var(--border); }
.bk-form { display: grid; gap: 4px; } .bk-form label { font-size: .78rem; font-weight: 700; margin: 4px 0 0; } .bk-form input[type=text], .bk-form input:not([type]), .bk-form select { width: 100%; padding: 6px 9px; }
.bk-form .check { display: flex; align-items: center; gap: 6px; font-weight: 600; } .bk-fa { display: flex; gap: 8px; margin-top: 6px; }
.bk-add { margin: 0; padding: 14px 16px; position: sticky; top: 8px; } .bk-add h2 { margin: 0 0 6px; font-size: 1rem; } .bk-add code { font-size: .78rem; }
.bk-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 10px; border: 2px dashed var(--border); border-radius: 16px; background: var(--card); } .bk-empty-ic { font-size: 2rem; }
@media (max-width: 900px) { .bk-wrap { grid-template-columns: 1fr; } .bk-add { position: static; } }
.bankopt { display: flex; align-items: center; gap: 10px; }

.bk-card { background: linear-gradient(135deg, color-mix(in srgb, var(--bk, #12467b) 62%, #0A2540) 0%, #0A2540 135%); }
.bkc-kbank { --bk: #138f2d; }
.bkc-scb { --bk: #4e2e7f; }
.bkc-bbl { --bk: #1e4598; }
.bkc-ktb { --bk: #00a6e6; }
.bkc-bay { --bk: #fec43b; }
.bkc-ttb { --bk: #0f6cb6; }
.bkc-gsb { --bk: #eb198d; }
.bkc-baac { --bk: #4b9b3e; }
.bkc-ghb { --bk: #f57d20; }
.bkc-uob { --bk: #0b3979; }
.bkc-cimb { --bk: #7e2f36; }
.bkc-lhb { --bk: #6d6e71; }
.bkc-kkp { --bk: #5b3a9b; }
.bkc-tisco { --bk: #12418a; }
.bkc-icbc { --bk: #c4161c; }
.bkc-exim { --bk: #0096d6; }
.bkc-sme { --bk: #f7941d; }
.bkc-isbt { --bk: #007a3d; }
.bkc-sc { --bk: #0473ea; }

/* ===== หน้าตั้งค่า (การ์ดสี หัวไอคอน กริดช่องกรอก) ===== */
.sp-card { --ac: #475569; --ac-bg: rgba(71,85,105,.12); background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--ac); border-radius: 14px; box-shadow: 0 1px 3px rgba(11,42,71,.06); margin: 0 0 12px; }
.ac-blue { --ac: #0B6AAE; --ac-bg: rgba(11,106,174,.12); } .ac-green { --ac: #1c8a4e; --ac-bg: rgba(28,138,78,.13); } .ac-amber { --ac: #d99a00; --ac-bg: rgba(217,154,0,.15); }
.ac-purple { --ac: #7a4fd1; --ac-bg: rgba(122,79,209,.13); } .ac-teal { --ac: #0e8a8a; --ac-bg: rgba(14,138,138,.13); } .ac-rose { --ac: #d6456b; --ac-bg: rgba(214,69,107,.12); } .ac-slate { --ac: #475569; --ac-bg: rgba(71,85,105,.12); }
.sp-head { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: linear-gradient(90deg, var(--ac-bg), transparent 75%); border-bottom: 1px solid var(--border); list-style: none; cursor: default; }
.sp-head h2 { margin: 0; font-size: 1rem; line-height: 1.2; } .sp-head p { margin: 1px 0 0; font-size: .8rem; color: var(--muted); } .sp-head .grow { flex: 1; }
.sp-ic { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--ac); font-size: 1.15rem; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.sp-body { padding: 12px 16px; display: grid; gap: 10px; }
.sp-note { padding: 6px 16px; border-bottom: 1px solid var(--border); }
.sp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; }
.sp-f label { display: block; font-size: .8rem; font-weight: 700; margin: 0 0 3px; color: var(--text); }
.sp-f input[type=text], .sp-f input[type=email], .sp-f input[type=password], .sp-f select, .sp-f textarea, .sp-f input:not([type]) { width: 100%; padding: 6px 10px; }
.sp-f textarea { min-height: 70px; font-family: inherit; }
.sp-checks { display: flex; flex-wrap: wrap; gap: 6px 22px; } .sp-checks .check { margin: 0; }
.sp-ta { display: grid; gap: 10px 16px; } .sp-ta.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-ta.rows-1 textarea { height: clamp(120px, calc(100vh - 330px), 560px); } .sp-ta.rows-2 textarea { height: clamp(80px, calc((100vh - 470px) / 2), 280px); } .sp-ta.rows-3 textarea { height: clamp(70px, calc((100vh - 520px) / 3), 200px); }
.sp-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; border-top: 1px solid var(--border); background: var(--bg); border-radius: 0 0 12px 12px; } .sp-foot .btn { margin: 0; }
.sp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .sp-grid2 > .sp-card { margin: 0; }
@media (max-width: 1000px) { .sp-grid2, .sp-ta.cols-2 { grid-template-columns: 1fr; } }
table.sp-rates { width: 100%; border-collapse: collapse; } .sp-rates th, .sp-rates td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.sp-rates th { font-size: .78rem; } .sp-rates td.num { text-align: right; } .sp-rates input { width: 130px; padding: 5px 9px; text-align: right; font-weight: 700; }
.sp-rates .c-sell { background: rgba(28,138,78,.12); } .sp-rates th.c-sell { background: rgba(28,138,78,.24); color: #17603A; } .sp-rates .c-cost { background: rgba(11,106,174,.12); } .sp-rates th.c-cost { background: rgba(11,106,174,.22); color: #0B5C99; }

/* แดชบอร์ด Sync */
.sp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.sp-kpi { display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--kc, #0B6AAE); }
.sp-kpi .k-l { font-size: .76rem; color: var(--muted); font-weight: 600; } .sp-kpi .k-v { font-size: 1.6rem; line-height: 1.15; color: var(--kc, #0B6AAE); } .sp-kpi .k-v.k-sm { font-size: 1rem; padding: 6px 0; }
.k-blue { --kc: #0B6AAE; } .k-green { --kc: #1c8a4e; } .k-amber { --kc: #d99a00; } .k-rose { --kc: #d6456b; } .k-purple { --kc: #7a4fd1; }
.sp-sync { margin-bottom: 10px; } .sp-danger summary { cursor: pointer; } .sp-danger[open] summary { border-bottom: 1px solid var(--border); }
.sp-hist .tablewrap { max-height: calc(100vh - 470px); min-height: 120px; overflow: auto; }
.sp-hist .tablewrap thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
@media (max-width: 1000px) { .sp-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ประเภทการจัดส่ง */
.dt-list { display: grid; gap: 8px; }
.dt-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.dt-no { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: #0B6AAE; }
.dt-c1 { background: #1c8a4e; } .dt-c2 { background: #d99a00; } .dt-c3 { background: #7a4fd1; } .dt-c4 { background: #0e8a8a; } .dt-c5 { background: #d6456b; }
.dt-txt { display: flex; flex-direction: column; min-width: 0; } .dt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.dt-edit { position: relative; } .dt-edit[open] { grid-column: 1 / -1; }
.sp-ta.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-ta.has-short.rows-1 textarea { height: clamp(100px, calc(100vh - 520px), 400px); } .sp-ta.has-short.rows-2 textarea { height: clamp(70px, calc((100vh - 640px) / 2), 200px); }
.sp-ta.rows-1:not(.has-short) textarea { height: clamp(120px, calc(100vh - 390px), 560px); }
.rb-list { display: grid; gap: 8px; } .rb-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .rb-row form { margin: 0; }
.pill.memo { background: #E3F0FA; color: #0B5C99; font-weight: 700; } .head-add { margin: 0 0 8px; }
.st-ord { background: #FFF4DB; color: #7A5200; }
.pipe { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 640px) { .pipe { grid-template-columns: repeat(3, 1fr); } }
.st-ord { background: #FFF4DB; color: #7A5200; }
.pipe { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 640px) { .pipe { grid-template-columns: repeat(3, 1fr); } }

/* ===== คำสั่งซื้อ: แผงข้อมูลจาก YD (สีน้ำเงิน) / ป้ายขั้นตอน ===== */
.flowchip { font-size: .8rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.flowchip.f-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: transparent; } .flowchip.f-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: transparent; } .flowchip.f-bad { background: var(--err-bg); color: var(--err-fg); border-color: transparent; } .flowchip.f-info { background: rgba(11,106,174,.14); color: #0B5C99; border-color: transparent; }
.ydtag { margin-top: 2px; font-size: .74rem; font-weight: 700; color: #0B5C99; background: rgba(11,106,174,.14); padding: 1px 8px; border-radius: 999px; display: inline-block; }
.yd-panel { margin-top: 10px; border: 1px solid #0B6AAE; border-top-width: 4px; border-radius: 12px; background: var(--card); }
.yd-panel summary { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; background: linear-gradient(90deg, rgba(11,106,174,.16), transparent 70%); list-style: none; } .yd-panel summary .grow { flex: 1; }
.yd-badge { background: #0B6AAE; color: #fff; font-weight: 800; border-radius: 8px; padding: 1px 9px; font-size: .8rem; } .ydp { background: rgba(11,106,174,.16); color: #0B5C99; font-weight: 700; padding: 2px 10px; border-radius: 999px; font-size: .82rem; }
.yd-body { padding: 8px 14px 12px; display: grid; gap: 8px; } .ydhow { margin: 0; padding: 7px 10px; border-radius: 10px; background: rgba(11,106,174,.1); }
table.ydt { width: 100%; border-collapse: collapse; font-size: .88rem; } .ydt th, .ydt td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; } .ydt .num { text-align: right; } .ydt .ydc { background: rgba(11,106,174,.1); color: #0B5C99; font-weight: 700; } .ydt tr.diff td:not(.ydc) { background: rgba(214,69,107,.07); }
.ydok { color: #1c8a4e; font-weight: 700; } .ydno { color: #d6456b; font-weight: 700; } .ydnote { color: #0B5C99; }
.ydlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; } .ydlog .lk { font-size: .72rem; font-weight: 700; padding: 0 7px; border-radius: 999px; background: rgba(11,106,174,.16); color: #0B5C99; } .ydlog li.k-change .lk { background: rgba(28,138,78,.16); color: #17603A; }

/* ป้ายขนส่ง รถ/เรือ (หลังบ้านคำสั่งซื้อ) + กล่องเตือนรายการซ้ำใน YD */
.mchip { display: inline-block; font-size: .85rem; font-weight: 800; padding: 2px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); white-space: nowrap; }
.mchip.m-truck { background: #FFF1D6; color: #8A4B00; border-color: #F2B84B; } .mchip.m-sea { background: #DDF0FF; color: #07508A; border-color: #6DB6EC; }
.dupbox { margin: 8px 0; padding: 10px 14px; border: 2px solid #E0A100; background: #FFF8E1; border-radius: 10px; display: grid; gap: 6px; } .dupbox .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* แจ้งพัสดุที่สั่งเอง (ลูกค้า) */
.pg-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pg-line h1 { margin: 0; }
.inb-hero { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 14px 18px; margin-bottom: 12px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, #0B3A5E, #0B6AAE); }
.inb-hero h2 { margin: 0 0 4px; color: #fff; font-size: 1.25rem; } .inb-hero p { margin: 4px 0; max-width: 60ch; } .inb-hero .muted { color: rgba(255,255,255,.8); }
.inb-mark { display: grid; gap: 4px; padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.14); } .inb-mark .muted { color: rgba(255,255,255,.8); }
.inb-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 12px; align-items: start; } @media (max-width: 800px) { .inb-grid { grid-template-columns: 1fr; } }
.inb-form form { display: grid; gap: 6px; } .inb-form textarea { font-family: ui-monospace, Consolas, monospace; }
.inb-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .inb-ul li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; } .inb-ul li.got { background: var(--ok-bg); border-color: transparent; }

/* พัสดุของคำสั่งซื้อ + ป้ายเลขสามฝั่ง (LM เขียว-เทา / YD น้ำเงิน / ร้านค้า ส้ม) */
.idchip { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; font-family: ui-monospace, Consolas, monospace; text-decoration: none; }
.idchip.lm { background: #E7F6EC; color: #11663A; border-color: #9AD4B0; } .idchip.yd { background: rgba(11,106,174,.14); color: #0B5C99; border-color: #7FB6DE; } .idchip.seller { background: #FFF1D6; color: #8A4B00; border-color: #F2B84B; }
.op-staff { margin: 8px 0; display: grid; gap: 8px; } .op-ids { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.op-panel { margin-top: 10px; } .op-panel .pickbar { margin-top: 8px; }

/* แท็บ "แจ้งพัสดุที่สั่งเอง" กล่องสีแดงเด่น */
.tabs a.tab-hot { background: #D92D20; color: #fff; border-color: #B42318; font-weight: 800; box-shadow: 0 2px 6px rgba(217,45,32,.35); } .tabs a.tab-hot:hover { background: #B42318; color: #fff; } .tabs a.tab-hot.on { background: #912018; border-color: #912018; }
.btn.hot { background: #D92D20; color: #fff; border-color: #B42318; font-weight: 800; box-shadow: 0 2px 6px rgba(217,45,32,.35); } .btn.hot:hover { background: #B42318; color: #fff; }

/* จัดส่งในไทย: หัวกลุ่มวิธีส่ง */
.dl-grp { margin: 14px 0 6px; font-size: .95rem; color: var(--muted, #667); }

/* ตั้งค่าประเภทจัดส่ง: ช่องค้นหาในบรรทัดหัว + ฟอร์มแก้ไขพอดีจอ */
.dt-search input { width: 180px; padding: 4px 10px; }
.pg-line form.inline { display: inline-block; margin: 0; }
.dtx { padding: 12px 16px; margin: 0; }
.dtx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; align-items: start; }
.dtx-grid label { display: block; font-size: .78rem; font-weight: 700; margin: 0 0 2px; }
.dtx-grid input:not([type=checkbox]), .dtx-grid select, .dtx-grid textarea { width: 100%; padding: 5px 9px; }
.dtx-grid .span2 { grid-column: span 2; }
.dtx-prev table { width: 100%; }
.dtx-act { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
@media (max-width: 820px) { .dtx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* แจ้งเตือนในเว็บ: กระดิ่งหัวเว็บ · แถบหน้าแรก · หน้ารายการ · ตารางหลังบ้าน */
.hbell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: inherit; text-decoration: none; margin-right: 4px; }
.hbell:hover { background: rgba(255,255,255,.12); }
.hbell b { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: .68rem; line-height: 18px; text-align: center; }
.hbell.has svg { animation: hbell-ring 1.6s ease-in-out 1; }
@keyframes hbell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
.nt-strip { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 8px 14px; border: 1px solid #e5484d; border-left-width: 5px; border-radius: 10px; background: var(--card); color: inherit; text-decoration: none; font-size: .9rem; }
.nt-strip b { white-space: nowrap; color: #e5484d; }
.nt-s-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-s-go { white-space: nowrap; font-weight: 600; }
.nt-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.nt-list li { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.nt-list li.new { border-color: #e5484d; background: color-mix(in srgb, #e5484d 7%, var(--card)); font-weight: 600; }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.nt-list li.new .nt-dot { background: #e5484d; }
.nf-in { width: 100%; min-width: 220px; padding: 4px 8px; font-size: .84rem; }
.nf-prev { font-size: .82rem; display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.nf-vars { white-space: nowrap; }
/* สำรองข้อมูล: แถบตั้งค่าในบรรทัดหัว */
.bk-set { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-set .bk-t { display: inline-flex; align-items: center; gap: 4px; font-size: .84rem; margin: 0; }
.bk-set input[type=text], .bk-set input:not([type]) { padding: 3px 8px; width: auto; }
.bk-set .check, .bk-set .bk-t { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; margin: 0; font-size: .84rem; white-space: nowrap; }
.bk-set .check input { width: auto; margin: 0; }

/* ================= เว็บสาธารณะ (หน้าแรก บริการ เรต ขั้นตอน ติดต่อ + สมัคร/เข้าสู่ระบบ) — ธีม Navy Gold ================= */
body.is-site { --nv: #0B1F3A; --gold: #FFB020; --gold2: #FFC95C; --sb-h: 62px; --sf-h: 42px; background: var(--nv); color: #e8eef7; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.is-site main.wrap { max-width: none; width: 100%; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
body.is-site main.wrap > .flash { margin: 10px 20px 0; }
body.is-site :focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
body.is-site.is-auth, body.is-site.is-doc { background: var(--bg); color: var(--text); }

.sitebar { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, #0A1B34, #0B1F3A); border-bottom: 1px solid rgba(255, 176, 32, .3); }
.sb-in { max-width: 1320px; min-height: var(--sb-h); margin: 0 auto; padding: 6px 20px; display: flex; align-items: center; gap: 22px; }
.sb-brand { display: inline-flex; }
.sb-brand .logo { height: 32px; }
.sb-nav { display: flex; gap: 2px; flex: 1; }
.sb-nav a { color: #c9d6e8; text-decoration: none; padding: 8px 13px; border-radius: 8px; font-size: .92rem; font-weight: 500; white-space: nowrap; }
.sb-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sb-nav a.on { color: #fff; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 8px 8px 0 0; }
.sb-r { display: flex; align-items: center; gap: 10px; }
.sb-lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; overflow: hidden; }
.sb-lang a { color: #c9d6e8; text-decoration: none; padding: 4px 12px; font-size: .8rem; font-weight: 600; }
.sb-lang a.on { background: var(--gold); color: #1a1200; }
.sb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, .32); background: transparent; white-space: nowrap; cursor: pointer; transition: background .2s, filter .2s, transform .2s; }
.sb-btn:hover { background: rgba(255, 255, 255, .12); }
.sb-btn.gold { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1200; border-color: transparent; box-shadow: 0 8px 22px -8px rgba(255, 176, 32, .75); }
.sb-btn.gold:hover { filter: brightness(1.07); transform: translateY(-1px); }
.sb-btn.glass { background: rgba(255, 255, 255, .13); backdrop-filter: blur(6px); }
.sb-btn.big { padding: 13px 30px; font-size: 1.02rem; }

.sitefoot { margin-top: auto; min-height: var(--sf-h); display: flex; justify-content: space-between; align-items: center; gap: 4px 20px; flex-wrap: wrap; padding: 8px 20px; background: #08162b; color: #8fa3bf; font-size: .78rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.sitefoot a { color: #b8c8de; text-decoration: none; margin-left: 16px; }
.sitefoot a:hover { color: var(--gold); }
.sitefoot .ver { color: var(--gold); font-weight: 600; }

/* หน้าแรก: ภาพ/วิดีโอเต็มจอ ข้อความซ้าย การ์ดบริการ 4 ใบด้านล่าง — จบในหนึ่งจอ */
.hero { position: relative; flex: 1; min-height: calc(100dvh - var(--sb-h) - var(--sf-h)); min-height: max(560px, calc(100dvh - var(--sb-h) - var(--sf-h))); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--nv); }
.hero-media { position: absolute; inset: 0; }
.hero-img, .hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero-vid { opacity: 0; transition: opacity 1.4s ease; }
.hero-vid.on { opacity: 1; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 18, 40, .95) 0%, rgba(7, 18, 40, .8) 32%, rgba(7, 18, 40, .3) 62%, rgba(7, 18, 40, 0) 100%), linear-gradient(0deg, rgba(7, 18, 40, .88) 0%, rgba(7, 18, 40, 0) 40%); }
.hero-in { position: relative; flex: 1; display: flex; align-items: center; width: 100%; max-width: 1320px; margin: 0 auto; padding: 26px 20px 8px; }
.hero-copy { max-width: 610px; }
.kicker { display: inline-block; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold2); border: 1px solid rgba(255, 176, 32, .45); padding: 5px 13px; border-radius: 999px; background: rgba(255, 176, 32, .09); }
.hero h1 { font-size: clamp(2rem, 4.3vw, 3.6rem); line-height: 1.12; margin: 16px 0 12px; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 26px rgba(0, 0, 0, .45); }
.hero .lead { font-size: clamp(.95rem, 1.25vw, 1.12rem); color: #d3deee; max-width: 540px; margin: 0 0 22px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-pts { list-style: none; display: flex; gap: 6px 20px; flex-wrap: wrap; padding: 0; margin: 20px 0 0; font-size: .86rem; color: #c0d0e6; }
.hero-pts li::before { content: '✓'; color: var(--gold); margin-right: 7px; font-weight: 700; }
.hero-cards { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 8px 20px 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hc { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 8px; border-radius: 18px; text-decoration: none; background: rgba(11, 31, 58, .62); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .15); color: #fff; transition: transform .2s, border-color .2s, background .2s; }
.hc:hover { transform: translateY(-3px); border-color: var(--gold); background: rgba(11, 31, 58, .82); }
.hc img { width: 66px; height: 66px; object-fit: contain; flex: none; }
.hc-t b { display: block; font-size: .98rem; line-height: 1.25; }
.hc-t small { color: var(--gold2); font-size: .78rem; }

/* หน้าย่อย: พื้นหลังกรมท่า หัวเรื่อง + เนื้อหา 1 จอ */
body.is-site:not(.is-home):not(.is-auth):not(.is-doc) { background: radial-gradient(1100px 560px at 85% -8%, rgba(36, 92, 170, .38), transparent 70%), radial-gradient(700px 400px at -5% 105%, rgba(255, 176, 32, .1), transparent 70%), var(--nv); }
.st-pg { width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 20px 24px; color: #e8eef7; }
.st-head h1 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 4px; }
.st-head p { color: #a9bad2; margin: 0 0 18px; max-width: 760px; }
.st-pg a:not(.sb-btn) { color: var(--gold2); }
.st-pg small { display: block; color: #9db0cb; font-size: .76rem; }

.svc { display: grid; grid-template-columns: 270px 1fr; gap: 18px; align-items: stretch; position: relative; }
.svc-r { position: absolute; opacity: 0; pointer-events: none; }
.svc-tabs { display: flex; flex-direction: column; gap: 10px; }
.svc-tab { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 8px; border-radius: 16px; cursor: pointer; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #cdd9ea; font-weight: 600; transition: border-color .2s, background .2s, color .2s; }
.svc-tab:hover { background: rgba(255, 255, 255, .09); }
.svc-tab img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.svc-panels { position: relative; min-height: 380px; }
.svc-p { display: none; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: center; height: 100%; padding: 26px 32px; border-radius: 22px; background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .15); }
#svc-order:checked ~ .svc-panels .p-order, #svc-ship:checked ~ .svc-panels .p-ship, #svc-delivery:checked ~ .svc-panels .p-delivery, #svc-transfer:checked ~ .svc-panels .p-transfer { display: grid; }
#svc-order:checked ~ .svc-tabs .t-order, #svc-ship:checked ~ .svc-tabs .t-ship, #svc-delivery:checked ~ .svc-tabs .t-delivery, #svc-transfer:checked ~ .svc-tabs .t-transfer { border-color: var(--gold); background: rgba(255, 176, 32, .13); color: #fff; }
#svc-order:focus-visible ~ .svc-tabs .t-order, #svc-ship:focus-visible ~ .svc-tabs .t-ship, #svc-delivery:focus-visible ~ .svc-tabs .t-delivery, #svc-transfer:focus-visible ~ .svc-tabs .t-transfer { outline: 2px solid var(--gold2); outline-offset: 2px; }
.svc-p h2 { font-size: 1.7rem; color: #fff; margin: 0 0 6px; }
.svc-d { color: #c3d1e6; margin: 0; }
.ticks { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 9px; }
.ticks li { padding-left: 28px; position: relative; color: #dfe8f5; font-size: .95rem; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #1a1200; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.svc-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rate-pill { background: rgba(255, 176, 32, .14); color: var(--gold2); border: 1px solid rgba(255, 176, 32, .5); padding: 6px 15px; border-radius: 999px; font-weight: 600; font-size: .88rem; }
.svc-art { display: grid; place-items: center; }
.svc-art img { width: min(100%, 340px); height: auto; filter: drop-shadow(0 22px 44px rgba(255, 176, 32, .22)); }

.rt-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; }
.rt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.rt-card, .rt-cny, .calc { background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .15); border-radius: 20px; }
.rt-card { padding: 18px 20px; }
.rt-h { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; color: #fff; margin-bottom: 12px; }
.rt-v { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-v span { display: block; }
.rt-v b { display: block; font-size: 1.7rem; color: var(--gold2); line-height: 1.15; }
.rt-cny { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; padding: 14px 20px; margin-bottom: 10px; color: #fff; }
.rt-cny span { color: var(--gold2); font-weight: 700; font-size: 1.1rem; }
.rt-cny span small { font-weight: 400; }
.calc { padding: 20px 22px; }
.calc h2 { margin: 0 0 12px; color: #fff; font-size: 1.15rem; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.calc-row.three { grid-template-columns: repeat(3, 1fr); }
.calc label { display: block; font-size: .8rem; color: #b9c8de; margin: 0; }
.calc input, .calc select { width: 100%; margin-top: 4px; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(8, 22, 43, .55); border: 1px solid rgba(255, 255, 255, .1); }
.calc-out b { display: block; font-size: 1.25rem; color: #fff; }
.calc-out .tot b { color: var(--gold2); font-size: 1.55rem; }
.calc .muted { color: #9db0cb; margin: 10px 0 0; }
.st-pg .muted { color: #9db0cb; }

.how-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: s; }
.steps li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.steps .sn { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1200; font-weight: 700; display: grid; place-items: center; font-size: 1.1rem; }
.steps b { color: #fff; font-size: 1.05rem; }
.steps p { margin: 2px 0 0; color: #b9c8de; font-size: .92rem; }
.how-art { position: relative; }
.how-art img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.how-art .sb-btn { position: absolute; left: 18px; bottom: 18px; }

.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.ct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-c { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); min-width: 0; overflow-wrap: anywhere; }
.ct-c b, .ct-c a { color: #fff; font-weight: 600; text-decoration: none; }
.ct-c a { color: var(--gold2); }
.ct-i { font-size: 1.5rem; flex: none; }
.ct-empty, .ct-about { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .22); color: #c3d1e6; }
.ct-about { margin-top: 12px; border-style: solid; white-space: pre-line; font-size: .92rem; }
.faq h2 { margin: 0 0 10px; color: #fff; font-size: 1.15rem; }
.faq details { border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); margin-bottom: 8px; padding: 10px 16px; }
.faq summary { cursor: pointer; font-weight: 600; color: #fff; }
.faq details[open] { border-color: rgba(255, 176, 32, .5); }
.faq p { margin: 8px 0 2px; color: #b9c8de; font-size: .92rem; }

/* หน้าสมัคร/เข้าสู่ระบบ: ภาพซ้าย ฟอร์มขวา */
.auth { flex: 1; display: grid; grid-template-columns: minmax(300px, 38%) 1fr; min-height: calc(100dvh - var(--sb-h) - var(--sf-h)); }
body.is-reg .auth { grid-template-columns: minmax(220px, 21%) 1fr; }
.auth-art { position: relative; background: var(--nv) url(/site/auth-bg.jpg) center top / cover no-repeat; display: flex; align-items: flex-end; overflow: hidden; }
.auth-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 18, 40, .92) 0%, rgba(7, 18, 40, 0) 58%); }
.auth-art-t { position: relative; z-index: 1; padding: 26px 28px 30px; color: #fff; }
.auth-art-t b { display: block; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.25; margin-bottom: 12px; }
.auth-art-t ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .92rem; color: #d3deee; }
.auth-art-t li::before { content: '✓'; color: var(--gold); margin-right: 8px; font-weight: 700; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 18px 20px; min-width: 0; }
.auth-form > .card { width: 100%; box-shadow: 0 24px 60px -28px rgba(11, 31, 58, .5); margin-bottom: 0; }
.auth-form > .card.narrow { max-width: 440px; }
.site-doc { width: 100%; max-width: 900px; margin: 0 auto; padding: 22px 16px 34px; }

@media (max-width: 1180px) { body.is-reg .auth { grid-template-columns: 1fr; } body.is-reg .auth-art { display: none; } }
@media (max-width: 980px) {
  .hero-cards { grid-template-columns: repeat(2, 1fr); }
  .rt-grid, .how-grid, .ct-grid { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; }
  .svc-tabs { flex-direction: row; overflow-x: auto; }
  .svc-tab { flex: none; }
}
@media (max-width: 860px) {
  .sb-in { flex-wrap: wrap; gap: 6px 12px; padding: 8px 14px; }
  .sb-brand { order: 1; } .sb-r { order: 2; margin-left: auto; }
  .sb-nav { order: 3; flex: 1 0 100%; overflow-x: auto; padding-bottom: 2px; }
  .auth { grid-template-columns: 1fr; } .auth-art { display: none; }
  .hero { min-height: 0; }
  .hero-shade { background: linear-gradient(180deg, rgba(7, 18, 40, .7), rgba(7, 18, 40, .9)); }
  .hero-in { padding-top: 30px; }
  .svc-p { grid-template-columns: 1fr; padding: 20px; } .svc-art { display: none; }
  .ct-cards, .rt-cards, .calc-out { grid-template-columns: 1fr; }
  .calc-row.three { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) { .sb-r .sb-btn:not(.gold) { display: none; } .hero-cards { grid-template-columns: 1fr; } .sitefoot { justify-content: center; text-align: center; } .sitefoot a:first-child { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .hc, .sb-btn, .svc-tab { transition: none; } }


/* ---- เว็บสาธารณะ รอบ 2: โลโก้ใหญ่ขึ้น · ทุกหน้าเต็มจอ (ขยายตามขนาดหน้าจอ) ---- */
body.is-site { --sb-h: 76px; --sf-h: 44px; }
.sb-in { max-width: 1600px; min-height: var(--sb-h); padding: 6px 28px; gap: 28px; }
.sb-brand .logo { height: 50px; filter: drop-shadow(0 2px 10px rgba(17, 128, 199, .35)); }
.sb-nav a { font-size: 1rem; padding: 9px 15px; }
.sb-btn { padding: 9px 22px; font-size: .95rem; }
.sb-lang a { padding: 5px 13px; font-size: .85rem; }

/* หน้าแรก: ข้อความและการ์ดใหญ่ขึ้นบนจอกว้าง */
.hero-in, .hero-cards { max-width: 1600px; padding-left: 28px; padding-right: 28px; }
.hero-copy { max-width: min(720px, 52vw); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 4.4rem); }
.hero .lead { font-size: clamp(1rem, 1.35vw, 1.3rem); max-width: 640px; }
.hero-cta .sb-btn.big { padding: 15px 34px; font-size: 1.08rem; }
.hero-pts { font-size: clamp(.86rem, 1vw, 1rem); }
.hc { padding: 12px 18px 12px 10px; }
.hc img { width: clamp(64px, 5.4vw, 92px); height: clamp(64px, 5.4vw, 92px); }
.hc-t b { font-size: clamp(.98rem, 1.2vw, 1.2rem); }
.hc-t small { font-size: clamp(.78rem, .9vw, .95rem); }

/* หน้าย่อย: เนื้อหากินพื้นที่ทั้งจอ */
.st-pg { max-width: 1500px; flex: 1; display: flex; flex-direction: column; padding: 22px 28px 26px; }
.st-head h1 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.st-head p { font-size: clamp(.95rem, 1.2vw, 1.15rem); margin-bottom: 20px; }
.svc, .rt-grid, .how-grid, .ct-grid { flex: 1; min-height: 0; align-items: stretch; }

.svc { grid-template-columns: clamp(250px, 24%, 360px) 1fr; }
.svc-tabs { gap: 14px; }
.svc-tab { flex: 1; font-size: clamp(1rem, 1.3vw, 1.3rem); padding: 10px 18px 10px 12px; }
.svc-tab img { width: clamp(46px, 4.6vw, 76px); height: clamp(46px, 4.6vw, 76px); }
.svc-panels { min-height: 0; }
.svc-p { padding: clamp(24px, 3vw, 48px); gap: 28px; }
.svc-p h2 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); }
.svc-d { font-size: clamp(1rem, 1.3vw, 1.25rem); }
.ticks { gap: 12px; margin: 22px 0 26px; }
.ticks li { font-size: clamp(.98rem, 1.2vw, 1.15rem); padding-left: 32px; }
.ticks li::before { width: 22px; height: 22px; top: 3px; font-size: .78rem; }
.rate-pill { font-size: clamp(.9rem, 1.1vw, 1.05rem); padding: 8px 18px; }
.svc-act .sb-btn { padding: 12px 28px; font-size: 1.02rem; }
.svc-art img { width: min(100%, 52vh, 460px); }

.rt-left { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.rt-cards { flex: 1; margin: 0; }
.rt-card { display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; }
.rt-h { font-size: clamp(1.1rem, 1.5vw, 1.4rem); margin-bottom: 16px; }
.rt-v b { font-size: clamp(2rem, 3.4vw, 3.3rem); }
.rt-v small { font-size: clamp(.8rem, .95vw, .95rem); }
.rt-cny { padding: 18px 26px; margin: 0; font-size: clamp(.95rem, 1.2vw, 1.15rem); }
.rt-cny span { font-size: clamp(1.15rem, 1.6vw, 1.5rem); }
.rt-left > p.small { margin: 0; font-size: .9rem; }
.calc { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 2.4vw, 36px); }
.calc h2 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); margin-bottom: 18px; }
.calc input, .calc select { padding: 11px 12px; font-size: 1.05rem; }
.calc label { font-size: .9rem; }
.calc-row { gap: 14px; margin-bottom: 14px; }
.calc-out b { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
.calc-out .tot b { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }

.how-grid { grid-template-columns: 1.05fr .95fr; gap: 32px; }
.steps { grid-auto-rows: 1fr; align-content: stretch; gap: 16px; }
.steps li { align-items: center; padding: 16px 24px; gap: 20px; }
.steps .sn { width: clamp(42px, 3.6vw, 58px); height: clamp(42px, 3.6vw, 58px); font-size: clamp(1.2rem, 1.8vw, 1.7rem); }
.steps b { font-size: clamp(1.05rem, 1.5vw, 1.45rem); }
.steps p { font-size: clamp(.92rem, 1.1vw, 1.08rem); }
.how-art { min-height: 0; }
.how-art img { height: 100%; aspect-ratio: auto; }

.ct-grid { gap: 32px; }
.ct-left { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.ct-cards { gap: 14px; }
.ct-c { padding: 18px 20px; font-size: clamp(.98rem, 1.2vw, 1.15rem); }
.ct-c small { font-size: .82rem; }
.ct-i { font-size: 1.9rem; }
.ct-cta { position: relative; flex: 1; min-height: 190px; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 24px 26px; background: linear-gradient(0deg, rgba(7, 18, 40, .92), rgba(7, 18, 40, .25)), url(/site/warehouse.jpg) center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .15); }
.ct-cta b { font-size: clamp(1.2rem, 1.8vw, 1.7rem); color: #fff; line-height: 1.3; }
.ct-cta .sb-btn { align-self: flex-start; }
.faq h2 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.faq details { padding: 14px 20px; border-radius: 16px; }
.faq summary { font-size: clamp(1rem, 1.25vw, 1.2rem); }
.faq p { font-size: clamp(.92rem, 1.1vw, 1.08rem); }

@media (max-width: 980px) {
  .st-pg { padding: 18px 16px 22px; }
  .svc-tab { flex: none; }
  .svc-art img { width: min(100%, 300px); }
  .how-art img { height: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 860px) {
  .sb-brand .logo { height: 40px; }
  .sb-in { padding: 8px 14px; gap: 6px 12px; }
  .hero-copy { max-width: none; }
}


/* ภาพประกอบหน้าสมัคร/เข้าสู่ระบบ: แสดงแผนที่เต็มความกว้าง (ไม่ให้ตัดจีน/ไทยหลุดขอบ) ส่วนล่างต่อสีกรมท่าเข้มของภาพ */
.auth-art { background: #00082C url(/site/auth-bg.jpg) center top / 100% auto no-repeat; }


/* หน้าอัตราค่าบริการ: ภาพ 3D รถ/เรือ บนการ์ด */
.rt-card { justify-content: flex-start; gap: 0; padding: 14px 20px 22px; }
.rt-img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; object-position: center; margin-bottom: 6px; }
.rt-h { margin-bottom: 8px; }


/* ปุ่มหยุด/เล่นวิดีโอพื้นหลังหน้าแรก */
.hero-pp { position: absolute; z-index: 3; right: 28px; top: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(11, 31, 58, .55); backdrop-filter: blur(8px); color: #fff; font-size: .7rem; cursor: pointer; display: grid; place-items: center; padding: 0; }
.hero-pp[hidden] { display: none; }
.hero-pp:hover { background: rgba(255, 176, 32, .85); color: #1a1200; }


/* ข้อความแจ้ง (เช่น ออกจากระบบแล้ว) บนหน้าสาธารณะ: ลอยทับด้านบน ไม่ดันเนื้อหา และเลือนหายเองใน 5 วินาที */
body.is-site main.wrap > .flash { position: fixed; z-index: 30; top: calc(var(--sb-h) + 14px); left: 50%; transform: translateX(-50%); margin: 0; min-width: 240px; max-width: 90vw; text-align: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); animation: flash-out 5s ease forwards; }
@keyframes flash-out { 0%, 80% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

/* ตารางพัสดุหลังบ้าน: ช่องรายละเอียดแบบ MMT (รหัสพัสดุ · PO · ORD · ล็อต/ลำดับ) */
.pcell { display: grid; gap: 3px; min-width: 330px; }
.pcell .pc-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pcell .pc-main .pk { font-size: 1.05rem; font-weight: 700; word-break: break-all; }
.pcell .pc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: .86rem; }
.pcell .pc-k { color: var(--muted); font-size: .78rem; min-width: 104px; }
.pcell .pc-own { margin-top: 2px; padding-top: 3px; border-top: 1px dashed var(--border); }
.nodata { color: var(--muted); font-size: .8rem; font-style: italic; opacity: .8; }
.pill.st-wait { background: #FFF1D6; color: #8A5300; }

/* พัสดุหลังบ้าน: คอลัมน์เจ้าของ (ชื่อ · LMC-xxx · P-xxxxx) และหัวตารางเรียงได้ */
.ptable .ocell { min-width: 190px; }
.ptable .oc-name { font-weight: 700; color: var(--ok-fg, #0a6b3a); }
.ptable .oc-none { color: var(--muted); font-style: italic; }
.ptable .oc-codes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; }
.pill.seq { background: #EEE8FB; color: #4B2E9B; font-weight: 700; }
.ptable th .th-sub { font-weight: 400; font-size: .76rem; margin-top: 2px; }
.ptable th .sortlink { color: inherit; text-decoration: none; white-space: nowrap; }
.ptable th .sortlink .arr { margin-left: 3px; opacity: .45; font-size: .7em; } .ptable th .sortlink.on .arr { opacity: 1; }

/* ข้อมูลขนส่ง: เลือกแบบชุดราคา (ขนส่งอย่างเดียว / สั่งซื้อ PO) */
.ps-kinds { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.ps-kinds a { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); text-decoration: none; }
.ps-kinds a b { font-size: 1rem; } .ps-kinds a small { color: var(--muted); }
.ps-kinds a.on { border-color: #1180C7; background: #E8F3FB; box-shadow: inset 0 0 0 1px #1180C7; } .ps-kinds a.on b { color: #0B5C99; }

/* Statement LM ↔ YD */
.stcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.stc { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.stc .stc-k { color: var(--muted); font-size: .8rem; } .stc b { font-size: 1.25rem; } .stc small { color: var(--muted); }
.stc.main { border-color: #1180C7; background: #E8F3FB; } .stc.warn { border-color: #E0A800; background: #FFF8E1; } .stc.ok { border-color: #1c8a4e; background: #E7F6EC; }
.st-sec h3 { margin: 14px 0 6px; font-size: 1rem; } .st-add { margin-top: 10px; } .st-add form { margin-top: 10px; }
.amt-in { color: #1c8a4e; font-weight: 600; } .amt-out { color: #c0392b; font-weight: 600; }

/* Statement: ตารางเทียบ YD (ฟ้า) ↔ LM (เขียว) */
.rcn th, .rcn td { vertical-align: middle; }
.rcn .g-yd { background: #CFE4F6; color: #0B4A7A; text-align: center; } .rcn .g-lm { background: #CDEBD8; color: #14663A; text-align: center; }
.rcn .g-ref, .rcn .g-res { background: #ECEFF3; text-align: center; } .rcn .rc-grp small { font-weight: 400; }
.rcn .c-yd { background: #F1F7FC; } .rcn th.c-yd { background: #E1EEF9; } .rcn .c-lm { background: #F0F9F3; } .rcn th.c-lm { background: #DEF2E5; }
.rcn td.c-lm { border-left: 0; } .rcn th.c-lm:first-of-type, .rcn td.c-lm:first-of-type { border-left: 2px solid #fff; }
.rcn tbody tr td:first-child { box-shadow: inset 5px 0 0 var(--vc, #9aa7b4); }
.rcn tr.v-ok { --vc: #1c8a4e; } .rcn tr.v-warn { --vc: #E0A800; } .rcn tr.v-bad { --vc: #c0392b; } .rcn tr.v-info { --vc: #1180C7; } .rcn tr.v-mute { --vc: #9aa7b4; }
.rcn .rc-none { color: var(--muted); font-style: italic; font-size: .82rem; opacity: .8; }
.rcn .rc-diff { color: #c0392b; font-weight: 700; } .rcn .rc-res { white-space: nowrap; } .rcn .rc-res small { display: block; }
.vd { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; text-decoration: none; }
.vd.ok { background: #D8F0E0; color: #14663A; } .vd.info { background: #DCEBF8; color: #0B5C99; } .vd.warn { background: #FFEFC2; color: #8A5300; } .vd.bad { background: #FBDADA; color: #A32020; } .vd.mute { background: #E7EAEE; color: #5b6772; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; align-items: center; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rcn .c-yd { background: #1E2B38; } :root:not([data-theme="light"]) .rcn th.c-yd { background: #243645; } :root:not([data-theme="light"]) .rcn .g-yd { background: #1F4666; color: #BFE0FA; }
  :root:not([data-theme="light"]) .rcn .c-lm { background: #1E2F26; } :root:not([data-theme="light"]) .rcn th.c-lm { background: #25402F; } :root:not([data-theme="light"]) .rcn .g-lm { background: #1F5A38; color: #C5F0D6; }
  :root:not([data-theme="light"]) .rcn .g-ref, :root:not([data-theme="light"]) .rcn .g-res { background: #2A313B; }
}

/* ตรวจก่อนวางบิลลูกค้า */
.bc-box h2 { margin: 0 0 8px; } .bc-ok { border-left: 6px solid #1c8a4e; background: #E7F6EC; } .bc-warn { border-left: 6px solid #E0A800; background: #FFF8E1; } .bc-bad { border-left: 6px solid #c0392b; background: #FDECEC; }
.bc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .bc-list li { display: flex; gap: 8px; align-items: flex-start; }
.bc-i { flex: none; width: 22px; text-align: center; font-weight: 700; } .bc-b { color: #A32020; font-weight: 600; } .bc-w { color: #8A5300; font-weight: 600; } .bc-o { color: #14663A; } .bc-n { color: var(--muted); }
.bc-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 12px 0; } @media (max-width: 900px) { .bc-cols { grid-template-columns: 1fr; } }
.bc-act { margin-top: 12px; } .unbill { display: inline-block; }

/* กล่องเทียบ YD เรียกเก็บ ↔ LM เก็บลูกค้า (หน้าคำสั่งซื้อหลังร้าน) */
.ydcmp { margin: 10px 0 6px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--border); background: var(--card); }
.ydcmp-h { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; }
.ydcmp-grid { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; } .ydcmp-grid b { text-align: right; font-size: 1.05rem; }
.ydcmp-grid .res { margin-top: 4px; padding-top: 6px; border-top: 1px dashed currentColor; font-weight: 700; } .ydcmp-grid b.res { font-size: 1.2rem; }
.ydcmp p { margin: 6px 0 0; color: var(--muted); }
.ydcmp.ok { border-color: #1c8a4e; background: #E7F6EC; color: #14663A; } .ydcmp.warn { border-color: #E0A800; background: #FFF8E1; color: #8A5300; } .ydcmp.bad { border-color: #c0392b; background: #FDECEC; color: #A32020; } .ydcmp.none { background: #F1F3F6; }
.ydcmp.ok .ydcmp-grid, .ydcmp.warn .ydcmp-grid, .ydcmp.bad .ydcmp-grid { color: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ydcmp.ok { background: #1E3A2A; color: #9ADFB5; } :root:not([data-theme="light"]) .ydcmp.warn { background: #3C3318; color: #F1D38A; } :root:not([data-theme="light"]) .ydcmp.bad { background: #432222; color: #F5A9A9; } :root:not([data-theme="light"]) .ydcmp.none { background: #2A313B; } }

/* หน้าตรวจก่อนวางบิล: บีบให้อยู่ในหน้าจอเดียว */
.bc-page .card { padding: 10px 14px; margin: 0; } .bc-page h2 { font-size: 1.02rem; margin: 0 0 6px; }
.bc-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 2px 0 8px; } .bc-title h1 { font-size: 1.35rem; margin: 0; }
.bc-top { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; margin-bottom: 10px; } .bc-page .bc-list { gap: 3px; font-size: .92rem; }
.bc-cost dl.kvc { margin: 0; } .bc-cost .bc-rule { margin: 6px 0 0; font-size: .78rem; }
.bc-items { margin-bottom: 10px; } .bc-mid { display: grid; grid-template-columns: 1fr minmax(270px, 340px); gap: 14px; align-items: start; } .bc-mid dl.kvc { margin: 0; }
.bc-page .bc-sum dt, .bc-page .bc-sum dd { padding: 2px 0; font-size: .92rem; } .bc-page .t.compact th, .bc-page .t.compact td { padding: 4px 8px; }
.bc-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .bc-act .actions { display: flex; gap: 8px; margin: 0; } .bc-actt { font-size: .9rem; flex: 1 1 360px; }
@media (max-width: 900px) { .bc-top, .bc-mid { grid-template-columns: 1fr; } }

/* ===== แถบแจ้งสถานะ (toast) ===== */
.flash, body.is-site main.wrap > .flash { display: none !important; } /* ข้อความจากเซิร์ฟเวอร์ถูกแปลงเป็น toast โดย app.js */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 3000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; max-width: calc(100vw - 24px); }
.toast { --ac: #1180C7; pointer-events: auto; position: relative; display: flex; align-items: center; gap: 10px; min-width: 250px; max-width: 400px; padding: 11px 36px 12px 12px; border-radius: 12px; background: var(--card, #fff); color: var(--text, #0E2A47);
  border: 1px solid var(--border, #DCE3EA); border-left: 4px solid var(--ac); box-shadow: 0 12px 30px -12px rgba(11, 31, 58, .45), 0 2px 6px rgba(11, 31, 58, .12); font-size: .93rem; line-height: 1.35; overflow: hidden; animation: toast-in .24s cubic-bezier(.2, .8, .2, 1) both; }
.toast.out { animation: toast-out .2s ease forwards; }
.toast .ti { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ac); color: #fff; font-weight: 700; font-size: .85rem; }
.toast .tt { flex: 1; min-width: 0; word-break: break-word; }
.toast .tx { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--muted, #54677A); cursor: pointer; font-size: .8rem; line-height: 1; }
.toast .tx:hover { background: rgba(120, 135, 150, .18); }
.toast .tp { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--ac); opacity: .55; transform-origin: left; animation: toast-bar linear forwards; }
.toast.hold .tp { animation-play-state: paused; }
.toast.t-ok { --ac: #1c8a4e; } .toast.t-err { --ac: #c0392b; } .toast.t-warn { --ac: #d68a00; } .toast.t-info { --ac: #1180C7; } .toast.t-busy { --ac: #1180C7; }
.toast.t-warn .ti { color: #fff; }
.toast .ti.spin { background: transparent; border: 3px solid rgba(17, 128, 199, .25); border-top-color: #1180C7; animation: toast-spin .8s linear infinite; width: 22px; height: 22px; padding: 0; }
.toast.t-busy { padding-right: 14px; }
.is-busy { cursor: progress; opacity: .75; }
@keyframes toast-in { from { opacity: 0; transform: translateX(26px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(26px); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toast-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { #toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; } .toast { max-width: none; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation: none; } .toast .tp { animation-duration: 0s !important; } .toast .ti.spin { animation-duration: 2s; } }
@media print { #toasts { display: none; } }

/* ตัวนับเวลาตอบกลับ (SLA) */
.sla { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.sla.ok { background: #E1F2E8; color: #14663A; } .sla.soon { background: #FFEFC2; color: #8A5300; } .sla.late { background: #FBDADA; color: #A32020; animation: sla-pulse 1.6s ease-in-out infinite; }
.sla.paused { background: repeating-linear-gradient(135deg, #E7EAEE, #E7EAEE 6px, #DCE1E7 6px, #DCE1E7 12px); color: #4b5866; animation: none; }
.sla.met { color: #14663A; } .sla.missed { color: #A32020; } .sla.mute { color: var(--muted); font-weight: 500; }
@keyframes sla-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .0); } 50% { box-shadow: 0 0 0 4px rgba(192, 57, 43, .22); } }
.slapair { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-left: 8px; } .sl-l { font-size: .75rem; color: var(--muted); }
.slabar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.slab { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; font-size: .88rem; }
.slab.late { border-color: #c0392b; background: #FDECEC; color: #A32020; } .slab.soon { border-color: #E0A800; background: #FFF8E1; color: #8A5300; } .slab.on { box-shadow: 0 0 0 2px currentColor; } .slab.clr { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sla.ok { background: #1E3A2A; color: #9ADFB5; } :root:not([data-theme="light"]) .sla.soon { background: #3C3318; color: #F1D38A; } :root:not([data-theme="light"]) .sla.late { background: #432222; color: #F5A9A9; } :root:not([data-theme="light"]) .sla.paused { background: #2A313B; color: #B9C4CF; } }
@media (prefers-reduced-motion: reduce) { .sla.late { animation: none; } }
/* ตั้งค่า → ตารางเวลา & SLA */
.sc-now { padding: 10px 14px; border-left: 5px solid #1180C7; margin-bottom: 10px; } .sc-now.open { border-color: #1c8a4e; background: #E7F6EC; } .sc-now.closed { border-color: #6b5bd2; background: #EEE8FB; } .sc-now.off { border-color: #9aa7b4; }
.sc-days { display: flex; gap: 4px; flex-wrap: wrap; } .dchk { padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; } .sc-n { width: 64px; } .sc-hours td { padding: 2px 6px; }
.sc-sug { margin-top: 8px; padding: 10px; border-radius: 8px; background: #FFF8E1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lh { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin: 8px 0 2px; } .lh-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .lh-col small { height: 14px; font-size: .7rem; color: var(--muted); }
.lh-bar { width: 100%; background: #1180C7; border-radius: 3px 3px 0 0; min-height: 2px; display: block; }
.lh-bar.p0 { height: 0%; } .lh-bar.p5 { height: 5%; } .lh-bar.p10 { height: 10%; } .lh-bar.p15 { height: 15%; } .lh-bar.p20 { height: 20%; } .lh-bar.p25 { height: 25%; } .lh-bar.p30 { height: 30%; } .lh-bar.p35 { height: 35%; } .lh-bar.p40 { height: 40%; } .lh-bar.p45 { height: 45%; } .lh-bar.p50 { height: 50%; } .lh-bar.p55 { height: 55%; } .lh-bar.p60 { height: 60%; } .lh-bar.p65 { height: 65%; } .lh-bar.p70 { height: 70%; } .lh-bar.p75 { height: 75%; } .lh-bar.p80 { height: 80%; } .lh-bar.p85 { height: 85%; } .lh-bar.p90 { height: 90%; } .lh-bar.p95 { height: 95%; } .lh-bar.p100 { height: 100%; }

/* ตั้งค่าซิงก์ YD & เวลา: แท็บ + จัดให้พอดี 1 หน้าจอ */
.sc-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.sc-tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.sc-tabs a.on { background: #1180C7; border-color: #1180C7; color: #fff; }
.sc-tabs .sc-now { margin: 0; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); border-left-width: 1px; background: var(--card); font-size: .85rem; }
.sc-tabs .sc-now.open { border-color: #1c8a4e; background: #E7F6EC; } .sc-tabs .sc-now.closed { border-color: #6b5bd2; background: #EEE8FB; }
.sc-page .sp-card { margin: 0; } .sc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } .sc-col { display: grid; gap: 12px; }
@media (max-width: 1000px) { .sc-two { grid-template-columns: 1fr; } }
.sc-page .sp-head { padding: 8px 14px; } .sc-page .sp-head h2 { font-size: 1.02rem; } .sc-page .sp-head p { margin: 0; font-size: .8rem; } .sc-page .sp-body { padding: 10px 14px; } .sc-page .sp-foot { padding: 8px 14px; }
.sc-page .sp-f { margin-bottom: 6px; } .sc-page .sp-f label, .sc-page label { font-size: .85rem; } .sc-page .sp-f input, .sc-page .sp-f select { padding: 5px 9px; height: 34px; } .sc-page textarea { padding: 6px 9px; }
.sc-page .sc-t { width: 104px; min-width: 0; padding: 3px 6px; height: 32px; } .sc-page .sc-n { width: 64px; min-width: 0; height: 32px; padding: 3px 8px; } .sc-page .sc-full { width: 170px; height: 32px; }
.sc-plan td, .sc-plan th { padding: 3px 6px; } .dchk { padding: 0 5px; } .sc-hours td { padding: 1px 6px; } .sc-hours .sc-t { width: 112px; }
.sc-pair, .sc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } .sc-conn { max-width: 250px; height: 34px; }
.sc-line { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; } .sc-tip { margin: 6px 0 0; } .sc-kv { margin: 6px 0; } .sc-page .lh { height: 60px; margin: 4px 0 0; }
.sc-ann { margin-top: 6px; } .sc-diag pre { max-height: 200px; overflow: auto; white-space: pre-wrap; }

/* กล่องเทียบต้นทุน YD (ประมาณการ / จ่ายจริง) */
.ydcmp.est { border-style: dashed; } .ydcmp.final { border-width: 2px; }
.ydcmp .stg { font-size: .76rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 6px; } .ydcmp .stg.est { background: #FFEFC2; color: #8A5300; } .ydcmp .stg.fin { background: #D8F0E0; color: #14663A; }
.ydcmp-t { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 4px 0; } .ydcmp-t th { font-weight: 500; font-size: .76rem; color: var(--muted); text-align: left; padding: 2px 0; } .ydcmp-t td { padding: 2px 0; }
.ydcmp-t .num { text-align: right; } .ydcmp-t tr.sum td { border-top: 1px solid currentColor; padding-top: 3px; }
.ydcmp-res { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 6px; border-top: 1px dashed currentColor; font-weight: 700; } .ydcmp-res b { font-size: 1.2rem; }
.ydcmp-bk { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; opacity: .9; }

/* ตั้งค่าซิงก์ YD & เวลา: แท็บเวลาทำการให้พอดีจอ */
.sc-page .sc-hours td { padding: 0 6px; height: 34px; } .sc-page .sc-hours .check { padding: 0; margin: 0; } .sc-page .sc-hours .sc-t { height: 28px; }
.sc-page textarea { min-height: 0; } .sc-page #sc_h { height: 54px; } .sc-page #sc_em { height: 96px; } .sc-page #br { height: 110px; }

/* หน้าคำสั่งซื้อหลังร้าน: บีบให้เห็นปุ่มบันทึกในจอเดียว */
.pod2-side { gap: 8px; } .pod2-side .card { padding: 8px 12px; } .pod2-side h2 { margin: 0 0 4px; font-size: .92rem; }
.pod-cost .pod-fields { grid-template-columns: repeat(3, 1fr); gap: 6px; } .pod-cost input { height: 30px; padding: 2px 8px; } .pod-cost label { font-size: .72rem; margin: 0; }
.pod-total .ps-row { padding: 1px 0; font-size: .85rem; } .pod-total .ps-grand { padding: 6px 12px; margin: 4px 0 2px; } .pod-total .ps-grand b { font-size: 1.3rem; } .pod-total .btn.block { margin-top: 4px; padding: 7px 12px; }
.ydcmp { margin: 6px 0 4px; padding: 5px 10px; border-radius: 8px; } .ydcmp-h { flex-wrap: nowrap; gap: 6px; margin-bottom: 2px; font-size: .84rem; white-space: nowrap; } .ydcmp .stg { margin-left: 0; font-size: .7rem; padding: 0 7px; }
.ydcmp-t { font-size: .78rem; margin: 2px 0; } .ydcmp-t th { font-size: .68rem; padding: 0; } .ydcmp-t td { padding: 1px 0; line-height: 1.3; } .ydcmp-t tr.sum td { padding-top: 1px; }
.ydcmp-res { margin-top: 2px; padding-top: 3px; } .ydcmp-res b { font-size: 1.05rem; } .ydcmp-bk { margin-top: 1px; gap: 2px 10px; font-size: .74rem; }