: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:not([data-theme="light"]) {
    --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;
  } }
:root[data-theme="dark"] {
    --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) { :root:not([data-theme="light"]) .snav { background: #0d4a78; } }
:root[data-theme="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) { :root:not([data-theme="light"]) .snav { background: var(--card); } :root:not([data-theme="light"]) .sbar-top { background: linear-gradient(100deg, #0A1624, #0B3A66); } }
:root[data-theme="dark"] .snav { background: var(--card); } :root[data-theme="dark"] .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) { :root:not([data-theme="light"]) .notice.n1 { background: #3A2323; border-color: #5A3535; color: #F3CFCF; } :root:not([data-theme="light"]) .notice.n2 { background: #3A3220; border-color: #5A4E2C; color: #F2E2B4; } }
:root[data-theme="dark"] .notice.n1 { background: #3A2323; border-color: #5A3535; color: #F3CFCF; } :root[data-theme="dark"] .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) { :root:not([data-theme="light"]) input[readonly], :root:not([data-theme="light"]) textarea[readonly] { background: #20262f; } :root:not([data-theme="light"]) ::placeholder { color: #7d8b9c; } }
:root[data-theme="dark"] input[readonly], :root[data-theme="dark"] textarea[readonly] { background: #20262f; } :root[data-theme="dark"] ::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) { :root:not([data-theme="light"]) .pod-form { background: #1c232d; border-color: #33404f; } }
:root[data-theme="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: #0B1F3A; border: 1px solid rgba(255, 255, 255, .15); }
.ct-cta .ct-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ct-cta::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(7, 18, 40, .92), rgba(7, 18, 40, .25)); pointer-events: none; }
.ct-cta > b, .ct-cta > .sb-btn { position: relative; z-index: 2; }
.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; } }
:root[data-theme="dark"] .rcn .c-yd { background: #1E2B38; } :root[data-theme="dark"] .rcn th.c-yd { background: #243645; } :root[data-theme="dark"] .rcn .g-yd { background: #1F4666; color: #BFE0FA; } :root[data-theme="dark"] .rcn .c-lm { background: #1E2F26; } :root[data-theme="dark"] .rcn th.c-lm { background: #25402F; } :root[data-theme="dark"] .rcn .g-lm { background: #1F5A38; color: #C5F0D6; } :root[data-theme="dark"] .rcn .g-ref, :root[data-theme="dark"] .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; } }
:root[data-theme="dark"] .ydcmp.ok { background: #1E3A2A; color: #9ADFB5; } :root[data-theme="dark"] .ydcmp.warn { background: #3C3318; color: #F1D38A; } :root[data-theme="dark"] .ydcmp.bad { background: #432222; color: #F5A9A9; } :root[data-theme="dark"] .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; } }
:root[data-theme="dark"] .sla.ok { background: #1E3A2A; color: #9ADFB5; } :root[data-theme="dark"] .sla.soon { background: #3C3318; color: #F1D38A; } :root[data-theme="dark"] .sla.late { background: #432222; color: #F5A9A9; } :root[data-theme="dark"] .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; }


/* ===== โหมดสี + มือถือ (0.50.0) ===== */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.themebtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; font: inherit; cursor: pointer; padding: 0; flex: none; }
.themebtn:hover { background: rgba(255,255,255,.22); }
.themebtn span::before { content: '\25D0'; font-size: 1.15rem; line-height: 1; }
:root[data-thememode="light"] .themebtn span::before { content: '\2600'; }
:root[data-thememode="dark"] .themebtn span::before { content: '\263E'; }
.themebtn.wide { width: auto; height: 46px; padding: 0 14px; border-radius: 10px; color: var(--text); border-color: var(--border); background: var(--bg); justify-content: flex-start; }
.themebtn.wide em { font-style: normal; font-size: .94rem; }
.is-site:not(.is-auth):not(.is-doc) .themebtn { display: none; }
.burger, .btabs, .dr-head, .dr-foot, .dr-bk, .sb-m-only { display: none; }
.tscroll { display: contents; }

@media (max-width: 819px) {
  body.is-cust, body.is-staff { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.dr-open { overflow: hidden; }
  /* หัวเว็บกะทัดรัด: โลโก้ + กระดิ่ง/ตะกร้า + โหมดสี + ปุ่มเมนู */
  body .sbar-top { flex-wrap: wrap; padding: 8px 12px; gap: 6px 8px; }
  body .sbar-top .brand { gap: 8px; }
  body:is(.is-staff, .is-cust) .logo { height: 42px; }
  .sbar-user { margin-left: auto; gap: 8px; }
  .sbar-user .ver, .sbar-user .uchip, .sbar-user form.inline { display: none; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); padding: 0 10px; cursor: pointer; flex: none; }
  .burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  body .hdann { order: 3; flex: 1 1 100%; margin: 0; padding: 6px 10px; font-size: .8rem; }
  .sbar-user .hbell, .sbar-user .cart-ic { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

  /* เมนูแบบแผ่นเลื่อนขึ้นจากด้านล่าง (นิ้วโป้งเอื้อมถึง ไม่ต้องเอื้อมไปมุมขวา) */
  .dr-bk { display: block; position: fixed; inset: 0; background: rgba(5,15,30,.55); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 25; }
  .sitebar + .dr-bk { z-index: 15; }
  body.dr-open .dr-bk { opacity: 1; pointer-events: auto; }
  body.dr-open .btabs { display: none; }
  body .snav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 84vh; z-index: 70; background: var(--card); overflow-y: auto; box-shadow: 0 -12px 34px rgba(0,0,0,.4); display: none; flex-direction: column; border: 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  body.dr-open .snav { display: flex; animation: sheet-in .22s ease; }
  @keyframes sheet-in { from { transform: translateY(35%); opacity: .5; } to { transform: none; opacity: 1; } }
  body .snav .snav-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; max-width: none; flex: none; overflow: visible; }
  body .snav a { padding: 14px 12px; border-radius: 12px; font-size: .98rem; box-shadow: none; background: var(--bg); border: 1px solid var(--border); }
  body .snav a.on { color: var(--primary); border-color: var(--primary); background: var(--card); box-shadow: none; }
  .dr-head { display: flex; align-items: center; gap: 12px; padding: 14px; background: linear-gradient(100deg, #0A2540, #0B4F8A); color: #fff; }
  .dr-who { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
  .dr-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dr-who small { opacity: .75; }
  .dr-x { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 8px; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; }
  .dr-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-top: 1px solid var(--border); }
  .dr-foot .btn, .dr-foot form { width: 100%; }

  /* แถบเมนูลัดด้านล่าง */
  .btabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(11,42,74,.1); }
  .btabs a, .btabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 2px; font: inherit; font-size: .72rem; font-weight: 500; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; }
  .btabs .ico { width: 22px; height: 22px; }
  .btabs a.on { color: var(--primary); font-weight: 600; }
  .btabs a.on .ico { stroke-width: 2.3; }
  #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* พื้นที่เนื้อหา · ฟอร์ม · ปุ่ม ให้นิ้วแตะง่าย */
  .wrap, body.is-staff .wrap, body.is-cust .wrap { padding: 14px 12px 24px; }
  .card { padding: 14px; }
  h1 { font-size: 1.3rem; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea { font-size: 16px; min-height: 44px; }
  .btn, button.btn, a.btn { min-height: 44px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; padding: 9px 14px; }
  body:is(.is-staff, .is-cust) main.wrap > .tabs, body.is-staff main.wrap > .tabs.wide, .tabs { display: flex; width: 100%; max-width: 100%; min-width: 0; }
  body:is(.is-staff, .is-cust) main.wrap > .tabs a, .is-cust .tabs a { padding: 8px 14px; font-size: .9rem; }
  .pg-head { flex-wrap: wrap; } .pg-head .tabs { flex: 1 1 100%; }
  .actions { flex-wrap: wrap; gap: 8px; }

  /* หน้าสาธารณะ: เมนูเป็นลิ้นชักหล่นลงมา */
  .sitebar .sb-in { position: relative; padding: 6px 12px; gap: 10px; }
  .sb-brand .logo { height: 42px; }
  .sb-r { margin-left: auto; gap: 6px; }
  .sb-r .sb-lang, .sb-r .themebtn { display: none; }
  .sb-r .sb-btn, .sb-r .sb-btn:not(.gold) { display: inline-flex; padding: 8px 12px; font-size: .84rem; }
  .sb-r .sb-btn.gold { padding: 8px 13px; }
  .sb-m-lang { display: block; padding: 12px 10px 4px; }
  .sb-m-lang .sb-lang { display: inline-flex; }
  .sitebar .sb-nav a.sb-m-only { display: block; }
  .sitebar .sb-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex: none; gap: 0; padding: 6px 12px 14px; background: #0B1F3A; border-bottom: 1px solid rgba(255,176,32,.3); box-shadow: 0 14px 24px rgba(0,0,0,.35); z-index: 25; overflow: visible; }
  body.dr-open .sitebar .sb-nav { display: flex; }
  .sitebar .sb-nav a { padding: 14px 10px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; box-shadow: none; }
  .sitebar .sb-nav a.on { color: var(--gold); box-shadow: none; }
  .sb-m-only { display: block; }
}

/* ตารางแบบการ์ดบนมือถือ (app.js ใส่ data-l ให้แต่ละช่อง) */
@media (max-width: 760px) {
  .tscroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
  .tscroll > table { min-width: 560px; }
  table.rt, table.rt tbody, table.rt tfoot, table.rt tr, table.rt td { display: block; width: 100%; }
  table.rt { border: 0; background: transparent; min-width: 0; }
  table.rt thead { display: none; }
  table.rt tr { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; }
  table.rt td { border: 0; padding: 6px 0; display: flex; gap: 12px; justify-content: space-between; align-items: baseline; text-align: right; min-height: 0; overflow-wrap: anywhere; }
  table.rt td::before { content: attr(data-l); flex: 0 0 36%; max-width: 44%; text-align: left; color: var(--muted); font-size: .8rem; font-weight: 500; }
  table.rt td .rt-v { flex: 1; min-width: 0; text-align: right; }
  table.rt td .rt-v > * { text-align: inherit; }
  table.rt td:not([data-l])::before { display: none; }
  table.rt td:not([data-l]) { justify-content: flex-start; text-align: left; }
  table.rt td:empty { display: none; }
  table.rt td + td { border-top: 1px dashed var(--border); }
  table.rt tr.rt-one { border: 0; background: transparent; text-align: center; color: var(--muted); }
  table.rt td img { max-width: 64px; height: auto; border-radius: 8px; }
  table.rt td .btn, table.rt td a.btn { min-height: 40px; }
}

/* ===== หน้าสาธารณะบนมือถือ (0.50.1): บริการ · อัตราค่าบริการ · ขั้นตอน · ติดต่อ — ต้องอยู่ท้ายไฟล์เพื่อชนะกฎจอใหญ่ด้านบน ===== */
@media (max-width: 860px) {
  .st-pg { padding: 16px 14px 26px; display: block; }
  .st-head h1 { font-size: 1.5rem; }
  .st-head p { font-size: .95rem; margin-bottom: 14px; }
  .svc { grid-template-columns: 1fr; gap: 12px; display: grid; }
  .svc-tabs { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .svc-tabs::-webkit-scrollbar { display: none; }
  .svc-tab { flex: none; font-size: .95rem; padding: 7px 14px 7px 8px; }
  .svc-tab img { width: 36px; height: 36px; }
  .svc-panels { min-height: 0; }
  .svc-p { grid-template-columns: 1fr; padding: 18px; gap: 12px; height: auto; }
  .svc-art { display: none; }
  .svc-p h2 { font-size: 1.35rem; }
  .svc-d { font-size: .98rem; }
  .ticks { gap: 10px; margin: 14px 0 16px; }
  .ticks li { font-size: .95rem; }
  .svc-act { flex-direction: column; align-items: stretch; gap: 10px; }
  .svc-act .sb-btn { width: 100%; padding: 13px 20px; }
  .rt-grid, .how-grid, .ct-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .rt-cards, .ct-cards { grid-template-columns: 1fr; }
  .rt-card { padding: 16px 18px; }
  .rt-v b { font-size: 2.2rem; }
  .calc { padding: 16px; }
  .calc-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .calc-row.three { grid-template-columns: 1fr 1fr 1fr; }
  .steps { grid-auto-rows: auto; gap: 10px; }
  .steps li { padding: 14px; gap: 12px; align-items: flex-start; }
  .steps .sn { width: 38px; height: 38px; font-size: 1.1rem; }
  .steps b { font-size: 1.02rem; }
  .steps p { font-size: .9rem; }
  .how-art img { height: auto; aspect-ratio: 16 / 10; }
  .how-art .sb-btn { left: 12px; bottom: 12px; }
  .ct-cta { min-height: 170px; padding: 18px; }
  .ct-c { padding: 14px 16px; }
  .faq details { padding: 12px 14px; }
  .hero-cta .sb-btn.big { flex: 1 1 100%; width: 100%; }
}
/* สวิตช์ภาษาในเมนูมือถือ */
@media (max-width: 819px) {
  .sitebar .sb-nav .sb-m-lang .sb-lang a { padding: 8px 18px; font-size: .9rem; border: 0; color: #c9d6e8; }
  .sitebar .sb-nav .sb-m-lang .sb-lang a.on { background: var(--gold); color: #1a1200; }
}

/* ===== มือถือ รอบ 2 (0.50.2): หน้าข้างใน — ต้องอยู่ท้ายไฟล์เพื่อชนะกฎจอใหญ่ที่เขียนทับด้านบน ===== */
@media (max-width: 1000px) {
  .pod2, .pod2.cust { grid-template-columns: minmax(0, 1fr); }
  .pod2-side { position: static; }
  .pod2-items { max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  main p, main li, main td, main .muted, main small, main h1, main h2 { overflow-wrap: anywhere; }
  main table:not(.rt) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.rt td b, table.rt td strong { font-size: 1rem; }
  table.rt td .rt-v { font-size: .95rem; }
  .ps-top, .ps-new, .pod2-h, .pod-head { flex-wrap: wrap; gap: 8px; }
  .ps-new select, .ps-new input { max-width: 100%; min-width: 0; }
  .pi-card { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .pi-main, .pi-none { width: 72px; height: 72px; }
  .pod-steps { flex-wrap: wrap; }
  .pod-steps li { flex: 1 1 45%; }
}

/* ===== แอปมือถือฝั่งลูกค้า (0.51.0) — แบบ C: กรมท่าเดิม + แดงเป็นสีเน้น ===== */
:root { --accent: #E4262B; --accent-bg: #FDE8E6; }
.mh, .mep { display: none; }
@media (max-width: 819px) {
  .d-only { display: none !important; }
  .mh, .mep { display: block; }
  body.is-cust .snav, body.is-cust .dr-bk { display: none !important; }
  /* สีเน้นแดง: ปุ่มหลัก ราคา จุดแจ้งเตือน */
  body.is-cust .btn:not(.ghost), body.is-cust button.btn:not(.ghost) { background: var(--accent); border-color: var(--accent); color: #fff; }
  body.is-cust .hbell b, body.is-cust .walletchip { background: var(--accent); color: #fff; }
  body.is-cust main.wrap > h1 { font-size: 1.1rem; margin: 2px 0 8px; }
  /* หัวหน้า: แถบค้นหา + ชื่อ + กระเป๋า */
  .mh-top { margin: -14px -12px 0; padding: 10px 12px 52px; background: linear-gradient(100deg, #0A2540, #0B4F8A 70%, #0B6AAE); color: #fff; }
  .mh-search { display: flex; background: #fff; border-radius: 9px; overflow: hidden; }
  .mh-search input { flex: 1; border: 0; box-shadow: none; border-radius: 0; background: transparent; color: #0E2A47; min-height: 40px; padding: 8px 12px; }
  .mh-search button { border: 0; background: transparent; padding: 0 14px; font-size: 1rem; cursor: pointer; }
  .mh-hi { margin: 9px 0 10px; font-size: .84rem; }
  .mh-code { background: rgba(255,255,255,.2); border-radius: 999px; padding: 1px 9px; font-size: .74rem; }
  .mh-wallet { margin: 0 0 -46px; position: relative; box-shadow: 0 6px 18px rgba(11,42,74,.18); }
  .mhw-r { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .mhw-r small { color: var(--muted); }
  .mhw-b { font-size: 1.55rem; font-weight: 700; color: var(--primary); line-height: 1.2; }
  .mhw-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
  .me-wallet .mhw-btns { grid-template-columns: repeat(3, 1fr); }
  .mhw-btns .btn { padding: 8px 4px; font-size: .82rem; text-align: center; min-height: 38px; margin: 0; }
  .mh > .mh-grid { margin-top: 58px; }
  .mh .card, .mep .card { margin: 10px 0; padding: 12px; border-radius: 12px; }
  .mh .dc-h, .mep .dc-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .mh .dc-h h2, .mep .dc-h h2 { margin: 0; font-size: .95rem; }
  .mh .dc-h a, .mep .dc-h a { font-size: .78rem; }
  .mh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 0; text-align: center; }
  .mh-grid a { color: var(--text); text-decoration: none; font-size: .72rem; line-height: 1.25; }
  .mh-grid i { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 4px; border-radius: 13px; font-style: normal; font-size: 20px; }
  .mh-grid .c1 { background: #E3F1FC; } .mh-grid .c2 { background: #FFF1D6; } .mh-grid .c3 { background: #E4F6EC; } .mh-grid .c4 { background: #FDE7E4; } .mh-grid .c5 { background: #EDE7FA; }
  .mh-strip { display: flex; gap: 8px; align-items: center; background: #FFF4DB; color: #7A5200; border-radius: 10px; padding: 9px 12px; margin: 10px 0; font-size: .82rem; text-decoration: none; }
  .mh-strip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mh-pipe { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; }
  .mh-pipe a { color: var(--muted); font-size: .66rem; text-decoration: none; line-height: 1.2; }
  .mh-pipe b { display: block; font-size: 1.3rem; color: var(--primary); font-weight: 700; }
  .mh-pipe a.hot b { color: var(--accent); }
  .mh .dlist, .mh .todo { margin: 0; padding: 0; list-style: none; }
  .mh .dmark { margin-top: 6px; }
  /* แท็บ "ฉัน" */
  .me-top { margin: -14px -12px 0; padding: 14px 12px 48px; background: linear-gradient(100deg, #0A2540, #0B4F8A 70%, #0B6AAE); }
  .me-prof { display: flex; gap: 12px; align-items: center; color: #fff; }
  .me-prof .avatar { width: 48px; height: 48px; font-size: 1.2rem; flex: none; }
  .me-prof b { font-size: 1.1rem; }
  .me-sub { font-size: .8rem; opacity: .85; }
  .me-bell { margin-left: auto; position: relative; font-size: 1.35rem; color: #fff; text-decoration: none; }
  .me-bell b { position: absolute; top: -6px; right: -8px; background: var(--accent); color: #fff; border-radius: 9px; font-size: .62rem; padding: 0 5px; font-weight: 700; }
  .me-wallet { margin-top: -36px; position: relative; box-shadow: 0 6px 18px rgba(11,42,74,.16); }
  .me-tiles { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
  .me-tiles a { color: var(--text); text-decoration: none; font-size: .72rem; line-height: 1.25; }
  .me-tiles i { position: relative; display: block; font-style: normal; font-size: 24px; margin-bottom: 2px; }
  .me-tiles i b { position: absolute; top: -4px; right: calc(50% - 24px); background: var(--primary); color: #fff; border-radius: 9px; font-size: .62rem; padding: 0 5px; font-weight: 600; line-height: 1.5; font-style: normal; }
  .me-tiles i b.hot { background: var(--accent); }
  .me-menu { padding: 0 !important; overflow: hidden; }
  .me-row { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .92rem; }
  .me-row:first-child { border-top: 0; }
  .me-i { width: 26px; text-align: center; font-size: 1.1rem; }
  .me-l { flex: 1; }
  .me-h { color: var(--accent); font-size: .78rem; }
  .me-row > i { color: var(--muted); font-style: normal; }
  .me-theme { height: 36px; background: var(--bg); color: var(--text); border-color: var(--border); }
  .me-out .btn { margin-top: 6px; }
  /* แถบล่าง: ปุ่ม "พัสดุ" ตรงกลางเด่น (สีทอง) */
  .btabs a.mid { position: relative; }
  .btabs a.mid .ico { width: 46px; height: 46px; padding: 11px; margin-top: -22px; border-radius: 50%; background: linear-gradient(180deg, #FFC95C, #FFB020); color: #1a1200; box-shadow: 0 4px 10px rgba(255,176,32,.5); stroke-width: 2; }
  .btabs a.mid span { color: #9a6a00; font-weight: 700; }
  .btabs a.mid.on span { color: #7a5200; }
  /* แท็บสถานะแบบขีดเส้นใต้ (ฝั่งลูกค้า) */
  body.is-cust .tabs { background: var(--card); margin: 0 -12px 8px; padding: 0 6px; border-bottom: 1px solid var(--border); gap: 0; }
  body.is-cust .tabs a { border: 0; border-radius: 0; background: transparent; padding: 11px 12px; border-bottom: 2px solid transparent; font-size: .88rem; color: var(--muted); }
  body.is-cust .tabs a.on { background: transparent; color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
  body.is-cust .tabs a.tab-hot { color: var(--accent); background: transparent; box-shadow: none; border-color: transparent; font-weight: 600; }
  body.is-cust .tabs a.tab-hot.on { border-bottom-color: var(--accent); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mh-strip { background: #3F3416; color: #F0CE7B; }
  :root:not([data-theme="light"]) .mh-grid i { filter: brightness(.82); }
}
:root[data-theme="dark"] .mh-strip { background: #3F3416; color: #F0CE7B; }
:root[data-theme="dark"] .mh-grid i { filter: brightness(.82); }
/* แก้ลำดับความสำคัญ: หัวเต็มจอ + กล่องกระเป๋าซ้อนขอบหัว */
@media (max-width: 819px) {
  .mh .mh-top, .mep .me-top { width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; padding-left: 12px; padding-right: 12px; }
  .mh .mh-wallet { margin: 0 0 -46px; }
  .mep .me-wallet { margin: -36px 0 10px; }
}

/* ===== แอปมือถือ รอบ 2–3 (0.52.0): ตัวหนังสือเล็กลง · ปุ่มหลักติดล่าง · ไม่ตกบรรทัด · แดชบอร์ดหลังร้าน ===== */
/* แก้ช่องเลือกตัวเชื่อมในหน้าตั้งค่าซิงก์ (จอคอม) ที่ตัวอักษรถูกตัด */
.sp-head .sc-conn { max-width: 300px; min-width: 200px; height: 38px; padding: 6px 30px 6px 10px; line-height: 1.3; font-size: .9rem; text-overflow: ellipsis; }
.sh { display: none; }
@media (max-width: 819px) {
  html { font-size: 14px; }
  .sh { display: block; }
  /* ไม่ให้ข้อความตกบรรทัดในจุดที่เป็นป้าย/ปุ่ม/แท็บ */
  .btn, .pill, .chip, .st, .hbtn, .tabs a, .mh-grid a, .mh-pipe a, .me-tiles a, .btabs a span, .btabs button span, .sh-tiles a, .me-h { white-space: nowrap; }
  .mh-grid a, .mh-pipe a, .me-tiles a, .sh-tiles a { overflow: hidden; text-overflow: ellipsis; }
  main.wrap > h1, .dc-h h2, .pod-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .dlist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .dlist li > a, .dlist li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
  table.rt td::before { white-space: nowrap; }
  table.rt td .rt-v { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* ปุ่มหลักของหน้า (ส่งคำขอ/ชำระเงิน/ส่งคำสั่งซื้อ) ลอยติดขอบล่างเหนือแถบเมนู */
  button[data-sticky] { position: fixed; left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 36; width: auto; min-height: 46px; font-size: 1rem; font-weight: 700; border-radius: 12px; box-shadow: 0 8px 20px rgba(228,38,43,.35); margin: 0; }
  button[data-sticky][disabled] { opacity: .55; box-shadow: none; }
  body:has(button[data-sticky]) { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  /* หน้ารายละเอียด: ปุ่มกลับกะทัดรัด */
  .pod-back, p > a[href^="/parcels"], .crumb a { font-size: .85rem; }
  .pod-head { gap: 6px; margin-bottom: 6px; }
  /* แดชบอร์ดหลังร้าน */
  .sh-todo { margin: 0 0 -46px !important; position: relative; box-shadow: 0 6px 18px rgba(11,42,74,.18); }
  .sh .mh-top { margin: -14px 0 0; padding-bottom: 56px; }
  .sh .mh-top, .sh .mh-top * { box-sizing: border-box; }
  .sh .mh-grid { margin-top: 58px; }
  .sh .card { margin: 10px 0; padding: 12px; border-radius: 12px; }
  .sh .dc-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .sh .dc-h h2 { margin: 0; font-size: .95rem; }
  .sh .dc-h a { font-size: .78rem; }
  .sh .dlist { margin: 0; padding: 0; list-style: none; }
  .sh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .sh-tiles a { border-radius: 10px; padding: 8px 4px; text-align: center; font-size: .72rem; line-height: 1.2; text-decoration: none; }
  .sh-tiles b { display: block; font-size: 1.35rem; }
  .sh-tiles .t1 { background: #E3F1FC; color: #0B5C99; } .sh-tiles .t2 { background: #FDE8E6; color: #B42318; } .sh-tiles .t3 { background: #FFF1D6; color: #7A5200; }
  .sh-tiles .t4 { background: #EDE7FA; color: #5B3FA8; } .sh-tiles .t5 { background: #E4F6EC; color: #17603A; } .sh-tiles .t6 { background: #E4E9EF; color: #34495E; }
  .sh-notice { background: #FFF4DB; color: #7A5200; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sh-tiles a { filter: brightness(.82); }
  :root:not([data-theme="light"]) .sh-notice { background: #3F3416; color: #F0CE7B; }
}
:root[data-theme="dark"] .sh-tiles a { filter: brightness(.82); }
:root[data-theme="dark"] .sh-notice { background: #3F3416; color: #F0CE7B; }
@media (max-width: 819px) {
  .sh .mh-top { width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; padding-left: 12px; padding-right: 12px; }
}

/* ===== มือถือ: การ์ดแน่นขึ้น (2 ช่องต่อบรรทัด) + สีเน้นตามสถานะ + ประกาศบรรทัดเดียว (0.53.0) ===== */
@media (max-width: 819px) {
  /* ประกาศหัวเว็บ: บรรทัดเดียว แตะเพื่อขยาย */
  body .hdann { padding: 4px 10px; font-size: .74rem; gap: 6px; cursor: pointer; }
  body .hdann .ann-t p { margin: 0; }
  body .hdann:not(.open) .ann-t p:not(:first-child) { display: none; }
  body .hdann:not(.open) .ann-t p:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body .hdann .ico { width: 14px; height: 14px; }
  /* ระยะห่างกระชับ */
  .wrap, body.is-staff .wrap, body.is-cust .wrap { padding: 10px 10px 20px; }
  .card { padding: 11px 12px; margin-bottom: 9px; }
  label { margin: 9px 0 3px; font-size: .86rem; }
  main.wrap > h1 { border-left: 4px solid var(--accent); padding-left: 8px; font-size: 1.05rem; margin: 0 0 8px; line-height: 1.3; }
  .card > h2:first-child, .dc-h h2 { border-left: 3px solid var(--primary); padding-left: 7px; }
}
@media (max-width: 760px) {
  table.rt tr { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; padding: 9px 12px 9px 11px; margin: 0 0 8px; position: relative; border-left: 4px solid #C9D6E5; }
  table.rt tr[data-tone="ok"] { border-left-color: #18A058; }
  table.rt tr[data-tone="warn"] { border-left-color: #F5A524; }
  table.rt tr[data-tone="bad"] { border-left-color: #E4262B; }
  table.rt tr[data-tone="info"] { border-left-color: #0B6AAE; }
  table.rt td { display: block; padding: 0; border: 0 !important; text-align: left; min-width: 0; width: auto; }
  table.rt td::before { display: block; flex: none; max-width: none; margin-bottom: 1px; font-size: .7rem; letter-spacing: .01em; }
  table.rt td .rt-v { display: block; text-align: left; font-size: .86rem; flex: none; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
  table.rt td.rt-title { grid-column: 1 / -1; font-weight: 700; font-size: .95rem; padding: 0 28px 4px 0; border-bottom: 1px solid var(--border) !important; margin-bottom: 1px; }
  table.rt td.rt-title::before { display: none; }
  table.rt td.rt-w { grid-column: 1 / -1; }
  table.rt td.rt-nil { display: none; }
  table.rt td.rt-chk { position: absolute; top: 8px; right: 10px; width: auto; }
  table.rt td.rt-chk input { width: 20px; height: 20px; min-height: 0; }
  table.rt td .btn, table.rt td button { margin: 2px 4px 2px 0; }
  table.rt tr.rt-one { display: block; border-left-width: 1px; }
}
/* หน้าตั้งค่าซิงก์: หัวการ์ดให้ขึ้นบรรทัดใหม่ได้ (เดิมตัวหนังสือถูกบีบเป็นแนวตั้ง) */
@media (max-width: 819px) {
  .sp-head { flex-wrap: wrap; gap: 8px; }
  .sp-head > div:not(.grow) { flex: 1 1 calc(100% - 52px); min-width: 0; }
  .sp-head .grow { display: none; }
  .sp-head .sc-conn { max-width: none; flex: 1 1 100%; min-width: 0; }
  .sp-head .check { flex: 1 1 100%; margin: 0; }
  .sp-card { overflow: hidden; }
}
.mh-top .card, .sh-todo { color: var(--text); }

/* ===== มือถือ รอบ 4 (0.54.0): แน่นขึ้นอีก — 3 ช่องต่อบรรทัด · ตารางหลายชั้น · หน้าสั่งซื้อหลังร้าน · ฟอร์มประกาศ ===== */
@media (max-width: 819px) {
  html { font-size: 13px; }
  .pc-grid, .sp-grid2, .sp-ta, .sp-ta.cols-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .pod-cust .pc-name { font-size: .95rem; }
  .pod-cust summary { flex-wrap: wrap; row-gap: 2px; }
  .pod-cust .pc-remark textarea { width: 100%; }
  .kvi { grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; }
  .sp-ta textarea, .sp-ta input { min-width: 0; width: 100%; }
}
@media (max-width: 760px) {
  table.rt tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 8px 10px 8px 10px; margin: 0 0 7px; }
  table.rt td.rt-m { grid-column: span 2; }
  table.rt td.rt-w, table.rt td.rt-title { grid-column: 1 / -1; }
  table.rt td::before { font-size: .66rem; line-height: 1.15; }
  table.rt td .rt-v { font-size: .88rem; line-height: 1.3; }
  table.rt td.rt-title { font-size: .98rem; padding-bottom: 3px; }
  table.rt td .pill, table.rt td .chip, table.rt td .st { font-size: .72rem; padding: 1px 8px; }
  .tscroll { margin: 0 -2px; }
  .tscroll table { font-size: .8rem; }
  .tscroll th, .tscroll td { white-space: nowrap; padding: 6px 9px; text-align: left; }
  .tscroll td.num, .tscroll th.num { text-align: right; }
}
/* แถบค้นหา/ตัวกรอง: กริด 2 ช่องต่อบรรทัด ชื่อช่องอยู่เหนือช่อง (กินที่น้อยลง) */
@media (max-width: 819px) {
  form.toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; align-items: end; margin-bottom: 8px; }
  form.toolbar > div { min-width: 0; }
  form.toolbar > div.grow { grid-column: 1 / -1; }
  form.toolbar label { display: block; margin: 0 0 2px; font-size: .72rem; color: var(--muted); font-weight: 500; }
  form.toolbar input, form.toolbar select { min-height: 38px; padding: 6px 9px; font-size: 16px; }
  form.toolbar > button.btn, form.toolbar > .btn { min-height: 38px; align-self: end; }
  form.toolbar > button.btn:last-child { grid-column: 1 / -1; }
}
/* แถบค้นหา/ตัวกรอง (แก้ลำดับความสำคัญให้ชนะกฎหลังบ้านเดิม) */
@media (max-width: 819px) {
  body main.wrap form.toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 8px !important; align-items: end !important; margin: 0 0 8px !important; width: 100%; }
  body main.wrap form.toolbar > div { display: block !important; min-width: 0 !important; margin: 0 !important; }
  body main.wrap form.toolbar > div.grow { grid-column: 1 / -1 !important; }
  body main.wrap form.toolbar label { display: block !important; margin: 0 0 2px !important; font-size: .72rem !important; color: var(--muted); font-weight: 500; white-space: nowrap; }
  body main.wrap form.toolbar input, body main.wrap form.toolbar select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 38px; padding: 6px 9px; }
  body main.wrap form.toolbar > button.btn, body main.wrap form.toolbar > .btn { min-height: 38px; align-self: end; margin: 0 !important; }
  body main.wrap form.toolbar > button.btn:last-child { grid-column: 1 / -1; }
}

/* ===== มือถือ รอบ 5 (0.56.0): ไอคอนเส้น · ข้อความไม่ถูกตัด · ปุ่มเรียงเต็มแถว · ช่องกรอกสั้นวางคู่กัน ===== */
.mh-grid i svg, .me-tiles i svg, .sh .mh-grid i svg { width: 22px; height: 22px; stroke-width: 1.9; }
.me-i svg { width: 18px; height: 18px; color: var(--primary); }
.mh-grid .c1 { color: #0B6AAE; } .mh-grid .c2 { color: #B7791F; } .mh-grid .c3 { color: #1F8A5B; } .mh-grid .c4 { color: #C93636; } .mh-grid .c5 { color: #6B4FC4; }
.me-tiles i { color: var(--primary); }
.me-tiles a:nth-child(2) i { color: #C93636; }
@media (max-width: 819px) {
  /* ข้อความไม่ถูกตัดด้วย … — ให้ขึ้นบรรทัดใหม่ได้ (ยกเว้นป้ายสั้นๆ ที่ยังไม่ตกบรรทัด) */
  main.wrap > h1, .dc-h h2, .pod-title { white-space: normal; overflow: visible; text-overflow: clip; }
  .dlist li > a, .dlist li > span:first-child { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .mh-strip span { white-space: normal; overflow: visible; }
  body .hdann:not(.open) .ann-t p:first-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  input::placeholder, textarea::placeholder { font-size: .86rem; }
  /* แถวปุ่ม: เรียงเต็มความกว้างเท่ากัน */
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .actions > a.btn, .actions > button.btn, .actions > form { flex: 1 1 auto; text-align: center; margin: 0; }
  .actions > form > button.btn { width: 100%; }
  .cart-btns { display: flex; flex-wrap: wrap; gap: 8px; }
  .cart-btns .btn { flex: 1 1 auto; text-align: center; }
  /* ช่องกรอกสั้นวางคู่กัน (ลดพื้นที่ว่าง) */
  .row2, .row3, .calc-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 10px; }
  .row2 > div, .row3 > div { min-width: 0; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  /* การ์ดส่วนหัวหน้ารายละเอียด/ฟอร์ม: ลดช่องว่างบนล่าง */
  .card h2 { margin: 0 0 6px; font-size: .95rem; }
  .card p { margin: 4px 0; }
  .pagebar, .pg-line { gap: 6px; margin-bottom: 8px; }
}
/* ช่องเลือกสมาชิกแบบค้นหา + หัวกลุ่มตะกร้า */
.mpick{position:relative}
.mpick .mp-q{width:100%;padding-right:30px}
.mpick::after{content:"\25BE";position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.mp-list{position:absolute;z-index:30;left:0;right:0;top:100%;margin:2px 0 0;padding:4px;list-style:none;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:280px;overflow:auto}
.mp-list li{padding:7px 10px;border-radius:7px;cursor:pointer}
.mp-list li.on,.mp-list li:hover{background:rgba(214,40,57,.12)}
.mp-list .mp-empty{color:var(--muted);cursor:default}
.cartgrp{margin:0 0 18px;padding-bottom:6px;border-bottom:2px solid var(--border)}
.cartgrp .cg-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.cartgrp .cg-n{margin-left:auto}

/* 0.57.1 การ์ดตารางบนมือถือ: ตัดระยะห่างซ้อน อัดข้อมูลให้แน่น ชื่อ/ข้อความยาวขึ้นครบ ไม่ถูกตัด */
@media (max-width: 760px) {
  body main table.rt tr { gap: 3px 10px; padding: 8px 10px; grid-auto-flow: row dense; }
  body main table.rt td { padding: 0 !important; margin: 0; min-height: 0; line-height: 1.25; }
  body main table.rt td::before { margin-bottom: 0; line-height: 1.1; }
  body main table.rt td .rt-v { display: block; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  body main table.rt td.rt-title { padding: 0 28px 3px 0 !important; margin: 0 0 2px; }
  body main table.rt td[data-l="ชื่อผู้ใช้"], body main table.rt td[data-l="ชื่อ"], body main table.rt td[data-l="สมาชิก"], body main table.rt td[data-l="ลูกค้า"], body main table.rt td[data-l="ชื่อสินค้า"], body main table.rt td[data-l="สินค้า"] { grid-column: 1 / -1; }
  body main table.rt td[data-l="จัดการ"] { grid-column: 1 / -1; }
  body main table.rt td[data-l="จัดการ"]::before { display: none; }
  body main table.rt td[data-l="จัดการ"] .btn, body main table.rt td[data-l="จัดการ"] a.btn { min-height: 34px; padding: 5px 14px; margin: 2px 6px 0 0; }
  body main table.rt td img { max-width: 40px; max-height: 40px; }
}

@media (max-width: 760px) {
  body main table.rt td .btn, body main table.rt td a.btn, body main table.rt td button.btn { min-height: 32px; padding: 4px 12px; font-size: .85rem; margin: 2px 6px 0 0; line-height: 1.2; }
  body main table.rt td .ocell, body main table.rt td .pc-row { margin: 0; padding: 0; }
}

/* แถบเมนูล่างหลังร้าน 8 ช่อง: ตัวหนังสือเล็กลง ขึ้น 2 บรรทัดได้ */
@media (max-width: 819px) {
  .btabs.many a, .btabs.many button { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 5px 1px; gap: 1px; font-size: .62rem; line-height: 1.1; text-align: center; }
  .btabs.many a span, .btabs.many button span { white-space: normal; overflow-wrap: anywhere; }
  .btabs.many .ico { width: 20px; height: 20px; }
}

/* 0.57.3 การ์ดสมาชิกบนมือถือ: ทุกช่องอยู่ตำแหน่งตายตัว (ช่องว่างไม่ทำให้ช่องอื่นเลื่อน) */
@media (max-width: 760px) {
  body main table.rt.memlist tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "seq st" "name name" "mail mail" "tel line" "code par" "yd yd" "by at" "act act"; gap: 4px 10px; }
  body main table.rt.memlist td { grid-column: auto !important; min-width: 0; }
  body main table.rt.memlist td.rt-nil { display: none; }
  body main table.rt.memlist td:nth-child(1) { grid-area: seq !important; font-weight: 700; padding: 0 !important; border: 0 !important; margin: 0; }
  body main table.rt.memlist td:nth-child(1)::before, body main table.rt.memlist td:nth-child(2)::before, body main table.rt.memlist td:nth-child(9)::before, body main table.rt.memlist td:nth-child(12)::before { display: none; }
  body main table.rt.memlist td:nth-child(2) { grid-area: name !important; font-size: .95rem; padding: 0 !important; border: 0 !important; margin: 0; }
  body main table.rt.memlist td:nth-child(3) { grid-area: mail !important; }
  body main table.rt.memlist td:nth-child(3) .rt-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  body main table.rt.memlist td:nth-child(3) br { display: none; }
  body main table.rt.memlist td:nth-child(4) { grid-area: tel !important; }
  body main table.rt.memlist td:nth-child(5) { grid-area: line !important; }
  body main table.rt.memlist td:nth-child(6) { grid-area: code !important; }
  body main table.rt.memlist td:nth-child(7) { grid-area: yd !important; }
  body main table.rt.memlist td:nth-child(8) { grid-area: par !important; }
  body main table.rt.memlist td:nth-child(9) { grid-area: st !important; justify-self: end; padding: 0 28px 0 0 !important; }
  body main table.rt.memlist td:nth-child(10) { grid-area: by !important; }
  body main table.rt.memlist td:nth-child(11) { grid-area: at !important; }
  body main table.rt.memlist td:nth-child(12) { grid-area: act !important; border-top: 1px solid var(--border) !important; padding-top: 6px !important; }
  body main table.rt.memlist td .codecell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  body main table.rt.memlist td .psname { flex-basis: 100%; }
}

@media (max-width: 760px) {
  body main table.rt.memlist td .linkbtn, body main table.rt.memlist td button.linkbtn { font-size: .8rem; padding: 0 4px; min-height: 0; margin: 0; }
  body main table.rt.memlist td:nth-child(7) .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; }
  body main table.rt.memlist td:nth-child(7) form { margin: 0; }
}

/* 0.57.4 การ์ดสมาชิก: อีเมลอยู่ขวาของชื่อ · รหัสจับคู่ YD ข้างรหัสลูกค้า · ปุ่มเท่ากัน */
@media (max-width: 760px) {
  body main table.rt.memlist tr { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "seq seq seq seq st st" "name name name mail mail mail" "tel tel tel line line line" "code code code yd yd yd" "par par by by at at" "act act act act act act"; gap: 5px 8px; }
  body main table.rt.memlist td:nth-child(3) { grid-area: mail !important; }
  body main table.rt.memlist td:nth-child(3) .rt-v { display: block; font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; word-break: break-all; }
  body main table.rt.memlist td:nth-child(3) .pill { display: inline-block; margin-top: 2px; }
  body main table.rt.memlist td:nth-child(2) .small, body main table.rt.memlist td:nth-child(2) .muted { font-size: .74rem; }
  body main table.rt.memlist td:nth-child(6) { grid-area: code !important; }
  body main table.rt.memlist td:nth-child(7) { grid-area: yd !important; }
  body main table.rt.memlist td:nth-child(8) { grid-area: par !important; }
  body main table.rt.memlist td:nth-child(10) { grid-area: by !important; }
  body main table.rt.memlist td:nth-child(11) { grid-area: at !important; }
  body main table.rt.memlist td:nth-child(10) .rt-v, body main table.rt.memlist td:nth-child(11) .rt-v { font-size: .74rem; }
  body main table.rt.memlist td:nth-child(12) .rt-v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  body main table.rt.memlist td:nth-child(12) form { margin: 0; display: flex; }
  body main table.rt.memlist td:nth-child(12) .btn, body main table.rt.memlist td:nth-child(12) a.btn, body main table.rt.memlist td:nth-child(12) button.btn { margin: 0 !important; height: 34px; min-height: 34px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
}

/* 0.57.5 การ์ดพัสดุ (หลังร้าน) บนมือถือ: รหัส/PO/ORD ซ้าย · ค่าบรรทุกขวา · อัดให้สั้นลงครึ่งหนึ่ง */
@media (max-width: 760px) {
  body main table.rt.ptable tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "main fee" "memo own" "dates dates" "att act"; gap: 5px 10px; padding: 8px 10px; }
  body main table.rt.ptable td { grid-column: auto !important; min-width: 0; padding: 0 !important; border: 0 !important; margin: 0; }
  body main table.rt.ptable td.rt-nil { display: none; }
  body main table.rt.ptable td:nth-child(1) { grid-area: main !important; }
  body main table.rt.ptable td:nth-child(2) { grid-area: memo !important; }
  body main table.rt.ptable td:nth-child(3) { grid-area: own !important; }
  body main table.rt.ptable td:nth-child(4) { grid-area: fee !important; }
  body main table.rt.ptable td:nth-child(5) { grid-area: dates !important; border-top: 1px dashed var(--border) !important; padding-top: 4px !important; }
  body main table.rt.ptable td:nth-child(6) { grid-area: att !important; align-self: center; }
  body main table.rt.ptable td:nth-child(8) { grid-area: act !important; justify-self: end; align-self: center; }
  body main table.rt.ptable td:nth-child(1)::before, body main table.rt.ptable td:nth-child(8)::before { display: none; }
  body main table.rt.ptable td:nth-child(1) { font-weight: 400; font-size: .85rem; }
  body main table.rt.ptable .pcell { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
  body main table.rt.ptable .pc-main { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  body main table.rt.ptable .pc-main .pc-k { display: none; }
  body main table.rt.ptable .pc-main .pk { font-size: .95rem; font-weight: 700; }
  body main table.rt.ptable .pc-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; margin: 0; }
  body main table.rt.ptable .pc-row:nth-of-type(3) { grid-column: 1 / -1; }
  body main table.rt.ptable .pc-row .pc-k { font-size: .62rem; color: var(--muted); font-weight: 500; line-height: 1.1; }
  body main table.rt.ptable .pc-row .pill, body main table.rt.ptable .pc-row .mono { font-size: .78rem; }
  body main table.rt.ptable td:nth-child(2) .pill { font-size: .78rem; }
  body main table.rt.ptable td:nth-child(4) .rt-v { font-size: .78rem; line-height: 1.3; }
  body main table.rt.ptable td:nth-child(5) .rt-v { font-size: .74rem; line-height: 1.3; }
  body main table.rt.ptable .ocell .oc-name { font-size: .88rem; font-weight: 600; }
  body main table.rt.ptable td:nth-child(8) .btn { height: 32px; min-height: 32px; padding: 0 18px; margin: 0; display: inline-flex; align-items: center; }
}

@media (max-width: 760px) {
  body main table.rt.ptable tr { grid-template-areas: "main fee" "memo own" "dates act" "att att"; }
  body main table.rt.ptable .pc-row:nth-of-type(3) { grid-column: auto; }
  body main table.rt.ptable .pc-row:nth-of-type(4) { grid-column: 1 / -1; }
  body main table.rt.ptable td:nth-child(5) { align-self: center; }
  body main table.rt.ptable td:nth-child(8) { align-self: center; justify-self: end; }
  body main table.rt.ptable td:nth-child(6) { grid-area: att !important; }
  body main table.rt.ptable td:nth-child(2) .rt-v, body main table.rt.ptable td:nth-child(2) .pill { max-width: 100%; }
}

@media (max-width: 760px) {
  body main table.rt.ptable .pcell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; min-width: 0; }
  body main table.rt.ptable .pc-row > * { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  body main table.rt.ptable .pc-row .pc-k { white-space: nowrap; }
}

/* 0.57.6 การ์ดคำสั่งซื้อ (หลังร้าน) บนมือถือ: เลข PO + ชื่อ + รูป บรรทัดเดียว · ตัวเลขเรียง 3 ช่อง · ปุ่มเล็กขวาล่าง */
@media (max-width: 760px) {
  body.is-staff main table.rt.polist tr { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "po po user user user img" "date date date st st st" "sc sc sc sy sy sy" "mt mt qt qt g1 g1" "g2 g2 sh sh sv sv" "dc dc tot tot act act"; gap: 4px 8px; align-items: start; }
  body.is-staff main table.rt.polist td { grid-column: auto !important; min-width: 0; padding: 0 !important; border: 0 !important; margin: 0; }
  body.is-staff main table.rt.polist td.rt-nil { display: none; }
  body.is-staff main table.rt.polist td:nth-child(1) { grid-area: po !important; font-size: .9rem; padding: 0 !important; margin: 0; }
  body.is-staff main table.rt.polist td:nth-child(2) { grid-area: user !important; }
  body.is-staff main table.rt.polist td:nth-child(3) { grid-area: img !important; justify-self: end; align-self: start; }
  body.is-staff main table.rt.polist td:nth-child(4) { grid-area: date !important; }
  body.is-staff main table.rt.polist td:nth-child(5) { grid-area: st !important; }
  body.is-staff main table.rt.polist td:nth-child(6) { grid-area: sc !important; }
  body.is-staff main table.rt.polist td:nth-child(7) { grid-area: sy !important; }
  body.is-staff main table.rt.polist td:nth-child(8) { grid-area: mt !important; }
  body.is-staff main table.rt.polist td:nth-child(9) { grid-area: qt !important; }
  body.is-staff main table.rt.polist td:nth-child(10) { grid-area: g1 !important; }
  body.is-staff main table.rt.polist td:nth-child(11) { grid-area: g2 !important; }
  body.is-staff main table.rt.polist td:nth-child(12) { grid-area: sh !important; }
  body.is-staff main table.rt.polist td:nth-child(13) { grid-area: sv !important; }
  body.is-staff main table.rt.polist td:nth-child(14) { grid-area: dc !important; }
  body.is-staff main table.rt.polist td:nth-child(15) { grid-area: tot !important; }
  body.is-staff main table.rt.polist td:nth-child(16) { grid-area: act !important; justify-self: end; align-self: end; }
  body.is-staff main table.rt.polist td:nth-child(1)::before, body.is-staff main table.rt.polist td:nth-child(3)::before, body.is-staff main table.rt.polist td:nth-child(16)::before { display: none; }
  body.is-staff main table.rt.polist td:nth-child(3) img { width: 40px; height: 40px; max-width: 40px; max-height: 40px; object-fit: cover; border-radius: 8px; }
  body.is-staff main table.rt.polist td:nth-child(2) .rt-v { font-size: .86rem; line-height: 1.25; }
  body.is-staff main table.rt.polist td.num .rt-v, body.is-staff main table.rt.polist td.num { text-align: left; }
  body.is-staff main table.rt.polist td:nth-child(15) .rt-v, body.is-staff main table.rt.polist td:nth-child(15) b, body.is-staff main table.rt.polist td:nth-child(15) strong { font-size: 1rem; }
  body.is-staff main table.rt.polist td:nth-child(16) .btn, body.is-staff main table.rt.polist td:nth-child(16) a.btn { height: 30px; min-height: 30px; padding: 0 12px; font-size: .78rem; margin: 0; display: inline-flex; align-items: center; }
  body.is-staff main table.rt.polist td:nth-child(4) .rt-v, body.is-staff main table.rt.polist td:nth-child(6) .rt-v, body.is-staff main table.rt.polist td:nth-child(7) .rt-v { font-size: .82rem; }
}

@media (max-width: 760px) {
  body.is-staff main table.rt.polist tr { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "po po po po user user user user user user user img" "date date date date date date st st st st st st" "sc sc sc sc sc sc sy sy sy sy sy sy" "mt mt mt mt qt qt qt qt g1 g1 g1 g1" "g2 g2 g2 g2 sh sh sh sh sv sv sv sv" "dc dc dc dc tot tot tot tot act act act act"; gap: 4px 6px; }
  body.is-staff main table.rt.polist td:nth-child(1) { font-size: .8rem; white-space: nowrap; }
  body.is-staff main table.rt.polist td:nth-child(1) a { white-space: nowrap; }
  body.is-staff main table.rt.polist td:nth-child(2) .rt-v { font-size: .8rem; line-height: 1.2; }
  body.is-staff main table.rt.polist td:nth-child(3) img { width: 32px; height: 32px; max-width: 32px; max-height: 32px; }
}

/* 0.57.8 ปุ่ม ก่อนหน้า/ถัดไป บนมือถือ: เล็กลงให้สมส่วนกับหน้าที่ย่อแล้ว */
@media (max-width: 760px) {
  body main .pager { gap: 8px; margin: 6px 0 10px; font-size: .74rem; }
  body main .pager .btn, body main .pager a.btn, body main .pager span.btn { min-height: 28px; height: 28px; padding: 0 12px; font-size: .74rem; line-height: 1; display: inline-flex; align-items: center; border-radius: 8px; margin: 0; }
}

/* 0.57.9 ช่องกรอง/ปุ่มกรอง/แท็บ/ชิป บนมือถือ: ขนาดเดียวกันทุกหน้า (หลังร้าน + ลูกค้า) กระชับขึ้น */
@media (max-width: 760px) {
  /* ฟอร์มค้นหา/กรอง */
  body main.wrap form.toolbar { gap: 4px 8px !important; margin: 0 0 6px !important; }
  body main.wrap form.toolbar label { font-size: .66rem !important; margin: 0 0 1px !important; line-height: 1.1; }
  body main.wrap form.toolbar input, body main.wrap form.toolbar select { min-height: 32px !important; height: 32px; padding: 2px 9px !important; border-radius: 8px; line-height: 1.2; }
  body main.wrap form.toolbar select { padding-right: 24px !important; }
  body main.wrap form.toolbar > button.btn, body main.wrap form.toolbar > .btn, body main.wrap form.toolbar .mf-act .btn, body main.wrap form.toolbar .actions .btn { min-height: 32px !important; height: 32px; padding: 0 16px !important; font-size: .8rem !important; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
  /* แท็บ/ชิปสถานะ (หลังร้าน: แคปซูล · ลูกค้า: ขีดเส้นใต้) */
  body main.wrap .tabs { gap: 5px; margin: 0 0 6px; padding-bottom: 2px; }
  body.is-staff main.wrap .tabs a { min-height: 28px; padding: 0 11px !important; font-size: .76rem !important; display: inline-flex; align-items: center; gap: 4px; }
  body.is-staff main.wrap .tabs a .pill { font-size: .66rem; padding: 0 6px; min-height: 0; line-height: 1.5; }
  body.is-cust main.wrap .tabs a { padding: 7px 10px !important; font-size: .78rem !important; }
  .slabar { gap: 5px 6px; margin: 0 0 6px; }
  .slabar .slab { min-height: 26px; padding: 0 10px; font-size: .72rem; display: inline-flex; align-items: center; gap: 3px; }
  .slabar .small { font-size: .72rem; }
  /* ปุ่มหัวหน้า (ส่งออก Excel / ลูกค้าแจ้งเลขพัสดุ / ฯลฯ) */
  body main.wrap .pg-head .btn, body main.wrap .pg-line .btn, body main.wrap .pagebar .btn { min-height: 28px !important; height: 28px; padding: 0 12px !important; font-size: .74rem !important; border-radius: 8px; display: inline-flex; align-items: center; }
  body main.wrap .pg-head { gap: 6px; margin-bottom: 6px; }
}

/* 0.57.10 แถบแบ่งหน้า: ก่อนหน้า/ถัดไปแสดงเสมอ + เลขหน้า */
.pager.pg-num { flex-wrap: wrap; gap: 6px; }
.pager.pg-num .pg-nums { display: inline-flex; align-items: center; gap: 4px; }
.pager.pg-num .pg-gap { color: var(--muted); padding: 0 2px; }
.pager.pg-num .pg-off { opacity: .4; cursor: default; pointer-events: none; }
.pager.pg-num .pg-cur { pointer-events: none; }
.pager.pg-num .pg-sum { flex-basis: 100%; text-align: center; font-size: .78rem; color: var(--muted); }
.pager.pg-top { margin: 0 0 6px; justify-content: flex-end; }
.pager.pg-top .pg-sum { flex-basis: auto; }
@media (max-width: 760px) {
  .pager.pg-top { display: none; }
  body main .pager.pg-num .btn.small { min-width: 28px; justify-content: center; padding: 0 9px; }
  body main .pager.pg-num .pg-sum { font-size: .7rem; }
}

/* 0.57.11 ปุ่ม/ช่องกรอกทั่วไปบนมือถือ: เล็กลงทั้งระบบ (หลังร้าน + ลูกค้า) ให้พื้นที่แสดงผลกว้างขึ้น */
@media (max-width: 760px) {
  body main.wrap .btn:not([data-sticky]), body main.wrap button.btn:not([data-sticky]), body main.wrap a.btn:not([data-sticky]) { min-height: 32px; padding: 0 14px; font-size: .8rem; line-height: 1.2; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
  body main.wrap .btn.small:not([data-sticky]), body main.wrap button.btn.small:not([data-sticky]), body main.wrap a.btn.small:not([data-sticky]) { min-height: 28px; padding: 0 11px; font-size: .74rem; }
  body main.wrap .actions { gap: 6px; }
  body main.wrap .actions .btn { margin: 0; }
  body main.wrap form.inline { margin: 0; }
  body main.wrap input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), body main.wrap select { min-height: 34px; padding-top: 3px; padding-bottom: 3px; border-radius: 8px; }
  body main.wrap .iconbtn { width: 28px; height: 28px; min-height: 0; padding: 0; }
  body main.wrap details > summary.btn { min-height: 30px; }
}

@media (max-width: 760px) {
  /* กรอบวางรูปบนมือถือ: ไม่มีคีย์บอร์ด Ctrl+V → เหลือแค่ปุ่มเลือกไฟล์ */
  .dropzone { padding: 10px; min-height: 0; border-width: 1.5px; }
  .dropzone .dz-ico, .dropzone .dz-main, .dropzone .dz-sub, .pf-tip { display: none; }
  .dropzone .dz-pick { margin: 0; }
  .pf-label { font-size: .8rem; margin-bottom: 4px; }
  .pf-fields label { font-size: .78rem; margin: 6px 0 2px; }
  .pf-fields input, .pf-fields textarea { font-size: 16px; }
  .pf-card, .pf-shot { padding: 10px; }
}

/* 0.57.11 การ์ดคำสั่งซื้อของลูกค้า (มือถือ): กระชับ ตำแหน่งตายตัว */
@media (max-width: 760px) {
  body.is-cust main table.rt.polist tr { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "po po po po date date date date date date img img" "st st st st mt mt mt mt qt qt qt qt" "g1 g1 g1 g1 g2 g2 g2 g2 sh sh sh sh" "sv sv sv sv dc dc dc dc tot tot tot tot" "act act act act act act act act act act act act"; gap: 4px 6px; align-items: start; }
  body.is-cust main table.rt.polist td { grid-column: auto !important; min-width: 0; padding: 0 !important; border: 0 !important; margin: 0; }
  body.is-cust main table.rt.polist td.rt-nil { display: none; }
  body.is-cust main table.rt.polist td:nth-child(1) { grid-area: po !important; }
  body.is-cust main table.rt.polist td:nth-child(2) { grid-area: img !important; }
  body.is-cust main table.rt.polist td:nth-child(3) { grid-area: date !important; }
  body.is-cust main table.rt.polist td:nth-child(4) { grid-area: st !important; }
  body.is-cust main table.rt.polist td:nth-child(5) { grid-area: mt !important; }
  body.is-cust main table.rt.polist td:nth-child(6) { grid-area: qt !important; }
  body.is-cust main table.rt.polist td:nth-child(7) { grid-area: g1 !important; }
  body.is-cust main table.rt.polist td:nth-child(8) { grid-area: g2 !important; }
  body.is-cust main table.rt.polist td:nth-child(9) { grid-area: sh !important; }
  body.is-cust main table.rt.polist td:nth-child(10) { grid-area: sv !important; }
  body.is-cust main table.rt.polist td:nth-child(11) { grid-area: dc !important; }
  body.is-cust main table.rt.polist td:nth-child(12) { grid-area: tot !important; }
  body.is-cust main table.rt.polist td:nth-child(13) { grid-area: act !important; }
  body.is-cust main table.rt.polist td:nth-child(1) { font-size: .85rem; white-space: nowrap; }
  body.is-cust main table.rt.polist td:nth-child(1)::before, body.is-cust main table.rt.polist td:nth-child(2)::before, body.is-cust main table.rt.polist td:nth-child(13)::before { display: none; }
  body.is-cust main table.rt.polist td:nth-child(2) { justify-self: end; }
  body.is-cust main table.rt.polist td:nth-child(2) img { width: 32px; height: 32px; max-width: 32px; max-height: 32px; object-fit: cover; border-radius: 8px; }
  body.is-cust main table.rt.polist td:nth-child(13) { justify-self: end; }
  body.is-cust main table.rt.polist td:nth-child(13) .btn { height: 30px; min-height: 30px; padding: 0 12px; font-size: .78rem; }
  body.is-cust main table.rt.polist td:nth-child(12) .rt-v, body.is-cust main table.rt.polist td:nth-child(12) b { font-size: 1rem; }
  body.is-cust main table.rt.polist td.num, body.is-cust main table.rt.polist td.num .rt-v { text-align: left; }
}

/* 0.57.12 หน้ารายงาน/ตั้งค่าบนมือถือ: ช่องวันที่-เวลา ช่องติ๊ก ตารางตั้งเวลา */
@media (max-width: 760px) {
  body main.wrap input[type=date], body main.wrap input[type=time], body main.wrap input[type=datetime-local], body main.wrap input[type=month] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 34px; height: 34px; padding: 2px 9px; line-height: 1.2; text-align: left; background-color: var(--card); }
  body main.wrap input[type=date]::-webkit-date-and-time-value, body main.wrap input[type=time]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; margin: 0; }
  body main.wrap input[type=date]::-webkit-calendar-picker-indicator, body main.wrap input[type=time]::-webkit-calendar-picker-indicator { width: 16px; height: 16px; padding: 0; margin: 0 0 0 4px; }
  body main.wrap input[type=checkbox], body main.wrap input[type=radio] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0 6px 0 0; flex: 0 0 auto; }
  body main.wrap label.check { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 2px 0; }
  /* ตารางตั้งเวลาซิงก์: ชิปวัน จ-อา เรียงต่อกัน ไม่ขึ้นเป็นแท่งเต็มบรรทัด */
  body main.wrap .sc-days { display: flex !important; flex-wrap: wrap; gap: 5px; }
  body main.wrap .sc-days .dchk { display: inline-flex; width: auto !important; flex: 0 0 auto; padding: 3px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); margin: 0; }
  body main.wrap .sc-days .dchk span { font-size: .8rem; }
  body main.wrap .sp-card .sp-body { padding: 10px 12px; }
  body main.wrap .sp-card .sp-head { padding: 10px 12px; }
  body main.wrap .sp-f label { font-size: .78rem; margin-bottom: 2px; }
  body main.wrap .sp-fields { gap: 8px; }
  body main.wrap .sp-card textarea { font-size: 16px; min-height: 64px; }
  body main.wrap table.sc-plan td, body main.wrap table.sc-hours td { padding: 3px 0 !important; }
}

@media (max-width: 760px) {
  body main.wrap .sc-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 6px; }
  body main.wrap .sc-tabs a { min-height: 28px; padding: 0 11px; font-size: .76rem; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; }
  body main.wrap .sc-status, body main.wrap .sc-page > .pill, body main.wrap .sc-page > p { font-size: .76rem; }
  body main.wrap .sp-card .sp-head h2, body main.wrap .sp-card .sp-head strong { font-size: .98rem; }
  body main.wrap .sp-card .sp-head p, body main.wrap .sp-card .sp-head .small { font-size: .74rem; }
  body main.wrap .sp-ico { width: 34px; height: 34px; font-size: 1rem; }
  body main.wrap .tabs { flex-wrap: nowrap; overflow-x: auto; }
}

@media (max-width: 760px) {
  body main.wrap input[type=date], body main.wrap input[type=time], body main.wrap input[type=datetime-local], body main.wrap input[type=month] { width: auto; min-width: 8.5em; }
  body main.wrap form.toolbar input[type=date], body main.wrap form.toolbar input[type=time], body main.wrap .sp-f input[type=time], body main.wrap .sp-f input[type=date] { width: 100%; }
  body main.wrap input[type=checkbox], body main.wrap input[type=radio], body main.wrap label.check input[type=checkbox], body main.wrap .check input { width: 18px !important; height: 18px !important; min-width: 18px; min-height: 0 !important; padding: 0 !important; margin: 0 !important; flex: 0 0 18px; }
  body main.wrap input[type=number], body main.wrap .sp-card input[type=text] { min-width: 0; }
}

@media (max-width: 760px) { body main.wrap .sc-days { padding-right: 30px !important; } }

/* 0.57.13 แถบชิปคำสั่งซื้อ (หลังร้าน) บนมือถือ: ชิปทั้งหมดอยู่แถวเดียว · ลิงก์ตั้งค่าเวลาอยู่ท้ายแท็บ */
@media (max-width: 760px) {
  .slabar { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; scrollbar-width: none; margin: 0 0 6px; }
  .slabar::-webkit-scrollbar { display: none; }
  .slabar .slab, .slabar .slab.late, .slabar .slab.soon { flex: 0 0 auto; min-height: 24px; padding: 0 7px; font-size: .64rem; gap: 2px; white-space: nowrap; border-radius: 999px; }
  .slabar .grow { display: none; }
  body main.wrap .tabs a.tab-set { border: 0; background: transparent; box-shadow: none; padding: 0 6px !important; font-size: .72rem !important; color: var(--primary); text-decoration: underline; min-height: 28px; flex: 0 0 auto; }
}

/* 0.57.14 หน้าข้อมูลขนส่ง (ชุดราคา) บนมือถือ: การ์ดต่อประเภท — ชื่อประเภท+กำไร แถวบน · ต้นทุน YD (ฟ้า) / ราคาขาย (เขียว) 4 ช่องแถวล่าง */
@media (max-width: 760px) {
  table.ps { display: block; width: 100%; border: 0; background: transparent; }
  table.ps thead { display: none; }
  table.ps tbody { display: block; }
  table.ps tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "code code pm pm" "c1 c2 s1 s2"; gap: 5px 6px; padding: 8px 10px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  table.ps td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; text-align: left; width: auto; }
  table.ps td.ps-code { grid-area: code; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  table.ps td.ps-code b { font-size: 1.05rem; }
  table.ps td.ps-code span { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.ps td.pm { grid-area: pm; text-align: right; font-size: .74rem; white-space: nowrap; align-self: center; }
  table.ps td:nth-child(2) { grid-area: c1; }
  table.ps td:nth-child(3) { grid-area: c2; }
  table.ps td:nth-child(4) { grid-area: s1; }
  table.ps td:nth-child(5) { grid-area: s2; }
  table.ps td:nth-child(n+2):nth-child(-n+5)::before { display: block; font-size: .6rem; line-height: 1.1; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
  table.ps td:nth-child(2)::before { content: "ต้นทุน บาท/กก."; }
  table.ps td:nth-child(3)::before { content: "ต้นทุน บาท/คิว"; }
  table.ps td:nth-child(4)::before { content: "ขาย บาท/กก."; }
  table.ps td:nth-child(5)::before { content: "ขาย บาท/คิว"; }
  table.ps td.c-cost { background: rgba(59, 130, 246, .10); border-radius: 8px; padding: 4px 7px !important; font-size: .86rem; align-self: stretch; }
  table.ps td.c-sell { background: rgba(24, 160, 88, .10); border-radius: 8px; padding: 4px 4px !important; align-self: stretch; }
  table.ps td.c-sell input { width: 100%; min-width: 0; min-height: 30px; height: 30px; padding: 0 6px; font-size: 16px; font-weight: 600; }
  table.ps td.center { grid-column: 1 / -1; }
  .ps-box { margin: 0 0 8px; }
  .ps-box > h2 { font-size: .95rem; margin: 6px 0; }
  .ps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; }
  .ps-bar label { font-size: .74rem; }
  .ps-bar input { flex: 1 1 130px; min-width: 0; }
  .ps-bar .grow { display: none; }
  .ps-bar .btn { margin: 0; }
  .ps-rule { font-size: .72rem; line-height: 1.35; }
}

@media (max-width: 760px) {
  .ps-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
  .ps-kinds a { padding: 7px 9px; border-radius: 10px; }
  .ps-kinds a b { font-size: .8rem; display: block; line-height: 1.2; }
  .ps-kinds a small { font-size: .62rem; line-height: 1.25; display: block; }
  .ps-top { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 8px; }
  .ps-sets { display: flex; flex-wrap: wrap; gap: 5px; }
  .ps-sets a { min-height: 28px; padding: 0 11px; font-size: .78rem; display: inline-flex; align-items: center; gap: 4px; }
  .ps-new { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; width: 100%; }
  .ps-new input { flex: 1 1 110px; min-width: 0; }
  .ps-new select { flex: 1 1 130px; min-width: 0; }
  .ps-yd { display: flex; align-items: center; gap: 8px; }
}

/* 0.57.15 หน้าเรทเงินหยวน บนมือถือ: เรทขาย | เรทต้นทุน | กำไร เทียบกันแนวนอนในการ์ดเดียว */
@media (max-width: 760px) {
  table.sp-rates { display: block; width: 100%; border: 0; background: transparent; }
  table.sp-rates thead { display: none; }
  table.sp-rates tbody { display: block; }
  table.sp-rates tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name name name" "s c p"; gap: 5px 6px; padding: 8px 10px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  table.sp-rates td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; text-align: left; width: auto; }
  table.sp-rates td:nth-child(1) { grid-area: name; font-size: .98rem; }
  table.sp-rates td:nth-child(2) { grid-area: s; }
  table.sp-rates td:nth-child(3) { grid-area: c; }
  table.sp-rates td:nth-child(4) { grid-area: p; text-align: right; }
  table.sp-rates td:nth-child(n+2)::before { display: block; font-size: .6rem; line-height: 1.1; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
  table.sp-rates td:nth-child(2)::before { content: "เรทขาย ฿/¥1"; }
  table.sp-rates td:nth-child(3)::before { content: "เรทต้นทุน ฿/¥1"; }
  table.sp-rates td:nth-child(4)::before { content: "กำไรต่อ ¥1"; }
  table.sp-rates td.c-sell { background: rgba(24, 160, 88, .10); border-radius: 8px; padding: 4px !important; }
  table.sp-rates td.c-cost { background: rgba(59, 130, 246, .10); border-radius: 8px; padding: 4px !important; }
  table.sp-rates td.c-sell input, table.sp-rates td.c-cost input { width: 100%; min-width: 0; min-height: 30px; height: 30px; padding: 0 6px; font-size: 16px; font-weight: 600; }
  table.sp-rates td:nth-child(4) b { font-size: 1.05rem; display: block; padding-top: 8px; }
}

/* 0.57.16 ตารางซิงก์ตามช่วงเวลา บนมือถือ: วัน (ชิป) แถวบน · ตั้งแต่ | ถึง | ทุก | ถี่ขึ้น 4 ช่องแถวล่าง */
@media (max-width: 760px) {
  body main.wrap table.sc-plan tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "days days days days" "f t e q"; gap: 6px 6px; padding: 8px 10px; position: relative; }
  body main.wrap table.sc-plan td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; width: auto; grid-column: auto !important; }
  body main.wrap table.sc-plan td.rt-chk { position: absolute; top: 8px; right: 10px; width: auto; }
  body main.wrap table.sc-plan td.rt-chk::before { display: none; }
  body main.wrap table.sc-plan td.sc-days { grid-area: days !important; padding-right: 30px !important; }
  body main.wrap table.sc-plan td.sc-days::before { display: none; }
  body main.wrap table.sc-plan td:nth-child(3) { grid-area: f; }
  body main.wrap table.sc-plan td:nth-child(4) { grid-area: t; }
  body main.wrap table.sc-plan td:nth-child(5) { grid-area: e; }
  body main.wrap table.sc-plan td:nth-child(6) { grid-area: q; }
  body main.wrap table.sc-plan td::before { display: block; font-size: .6rem; line-height: 1.1; margin-bottom: 2px; white-space: nowrap; }
  body main.wrap table.sc-plan input[type=time], body main.wrap table.sc-plan input.sc-n, body main.wrap table.sc-plan input[type=text] { width: 100%; min-width: 0; padding: 2px 5px; height: 32px; min-height: 32px; text-align: center; }
  body main.wrap table.sc-plan input[type=time]::-webkit-calendar-picker-indicator { display: none; }
  body main.wrap table.sc-plan input[type=time]::-webkit-date-and-time-value { text-align: center; }
  body main.wrap .sc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  body main.wrap .sc-line input.sc-full { flex: 1 1 100px; min-width: 0; width: auto; }
}

/* 0.57.17 ปุ่มตาแสดง/ซ่อนรหัสผ่าน */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 44px !important; box-sizing: border-box; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pw-eye:hover, .pw-eye:focus-visible { color: var(--primary); background: rgba(11, 106, 174, .10); outline: none; }
.pw-eye svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .pw-eye { width: 34px; height: 34px; } }

/* 0.57.19 หน้าเลือกประเภทบัญชีก่อนสมัคร (พื้นขาว/ฟ้า) + ป้ายและแท็บสลับในหน้ากรอกข้อมูล */
.regchoose { max-width: 760px; margin: 10px auto; padding: 26px 26px 20px; text-align: center; }
.regchoose h1 { margin: 0 0 6px; font-size: 1.55rem; }
.regchoose .rc-lead { margin: 0 auto 18px; max-width: 520px; }
.rc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 14px; text-align: center; }
.rc-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 16px; background: var(--card); border: 2px solid #BBD7EE; border-top: 6px solid var(--rc, #0B6AAE); border-radius: 18px; color: var(--text); text-decoration: none; transition: transform .12s, background .12s, border-color .12s; }
.rc-opt:hover, .rc-opt:focus-visible { background: rgba(11, 106, 174, .09); border-color: var(--rc, #0B6AAE); transform: translateY(-2px); outline: none; }
.rc-p { --rc: #0B6AAE; }
.rc-c { --rc: #0B3D91; }
.rc-ic { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--rc); color: #fff; margin-bottom: 4px; }
.rc-opt strong { font-size: 1.25rem; color: var(--rc); }
.rc-desc { font-size: .9rem; color: var(--muted); line-height: 1.45; }
.rc-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rc-tags em { font-style: normal; font-size: .76rem; padding: 2px 10px; border-radius: 999px; background: rgba(11, 106, 174, .12); color: #0B5A93; }
.rc-go { margin-top: 6px; font-weight: 600; color: #fff; background: var(--rc); border-radius: 10px; padding: 7px 22px; font-size: .92rem; }
.rc-foot { margin: 6px 0 0; color: var(--muted); }
@media (max-width: 640px) { .rc-grid { grid-template-columns: 1fr; } .regchoose { padding: 18px 14px; } .rc-ic { width: 72px; height: 72px; } }
.reg-kind { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: .78rem; font-weight: 600; padding: 3px 11px; border-radius: 999px; background: rgba(11, 106, 174, .13); color: #0B5A93; }
.reg-kind.co { background: rgba(11, 61, 145, .14); color: #0B3D91; }
.acct-tabs a[aria-current="page"], .acct-tabs a.on { background: #0B6AAE; color: #fff; }
.regco .acct-tabs a.on { background: #0B3D91; color: #fff; }

/* 0.57.20 แถบสร้างผู้ใช้ที่ YD ในหน้าสมาชิก */
.ydbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; margin: 0 0 8px; }
.ydbar form { margin: 0; }

/* 0.57.21 หน้าเลือกประเภทบัญชี: ปุ่ม "เลือกแบบนี้" ของสองการ์ดอยู่แถวเดียวกัน */
.rc-grid { align-items: stretch; }
.rc-opt { height: 100%; box-sizing: border-box; }
.rc-opt .rc-tags { min-height: 58px; align-content: flex-start; }
.rc-opt .rc-go { margin-top: auto; }

/* 0.57.26 คำอธิบายขั้นตอน: ลืมรหัสผ่าน */
.forgot-steps, .helpsteps { margin: 6px 0 12px; padding-left: 20px; line-height: 1.5; text-align: left; }
.forgot-steps li, .helpsteps li { margin: 3px 0; }
.resetbox form { margin: 4px 0 0; }

/* หน้าต่างยืนยันก่อนทำรายการที่ย้อนไม่ได้ (app.js) */
.cf-back{position:fixed;inset:0;z-index:9999;background:rgba(10,25,45,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.cf-box{background:#fff;color:#1f2d3d;border-radius:14px;max-width:440px;width:100%;padding:18px 18px 14px;box-shadow:0 20px 50px rgba(0,0,0,.35);border-top:5px solid #0b6aae}
.cf-box.cf-danger{border-top-color:#c62828}
.cf-title{font-size:16px;font-weight:700;line-height:1.4;margin-bottom:8px;word-break:break-word}
.cf-warn{background:#fff7e6;border:1px solid #f5d9a0;color:#6b4a00;border-radius:8px;padding:8px 10px;font-size:13.5px;line-height:1.5;margin-bottom:10px}
.cf-lbl{display:block;font-size:13px;margin:6px 0 4px}
.cf-in{width:100%;box-sizing:border-box;font-size:16px;padding:8px 10px}
.cf-tick{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:8px 0;cursor:pointer}
.cf-tick input{margin-top:3px;width:18px;height:18px}
.cf-row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.cf-row .btn{min-width:96px}
.cf-row .btn:disabled{opacity:.45;cursor:not-allowed}
.cf-row .cf-yes{background:#c62828;border-color:#c62828;color:#fff}

/* โลโก้ธนาคารในตาราง/ประวัติ */
.bkcell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bkcell .bk { width: 24px; height: 24px; font-size: .55rem; }
img.bk-img { object-fit: contain; }

/* ===== แถบโฆษณา (services/promo.js) ===== */
.promo { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 16px; overflow: hidden; color: #fff; font-weight: 600; font-size: .95rem; text-align: center; justify-content: center; background: linear-gradient(90deg, #0b2a4a 0%, #0b6aae 50%, #0b2a4a 100%); border-bottom: 1px solid rgba(255, 176, 32, .35); }
.promo strong { color: #ffd45a; font-weight: 700; text-shadow: 0 0 10px rgba(255, 176, 32, .45); }
.promo-tag { flex: none; color: #ffb020; font-size: 1rem; }
.promo ul { list-style: none; margin: 0; padding: 0; }
.promo-fade .promo-ul { position: relative; display: grid; flex: 0 1 auto; min-width: 0; }
.promo-fade .promo-ul li { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.promo-fade .promo-ul li.on { opacity: 1; transform: none; pointer-events: auto; }
.promo-static .promo-ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; }
.promo-static .promo-ul li + li::before { content: '•'; color: #ffb020; margin-right: 26px; }
.promo-marquee { justify-content: flex-start; }
.promo-mq { display: flex; width: max-content; animation: promo-run 28s linear infinite; }
.promo-mq:hover { animation-play-state: paused; }
.promo-mq ul { display: flex; flex: none; }
.promo-mq li { flex: none; padding: 0 36px; white-space: nowrap; }
.promo-mq li::after { content: '★'; margin-left: 72px; color: #ffb020; }
@keyframes promo-run { to { transform: translateX(-50%); } }
.promo.blink .promo-tag { animation: promo-blink 1.1s ease-in-out infinite; }
.promo.blink strong { animation: promo-glow 1.6s ease-in-out infinite; }
@keyframes promo-blink { 50% { opacity: .25; transform: scale(.8); } }
@keyframes promo-glow { 50% { color: #fff; text-shadow: 0 0 14px rgba(255, 212, 90, .9); } }
@media (max-width: 760px) { .promo { font-size: .86rem; padding: 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .promo-mq { animation: none; } .promo.blink .promo-tag, .promo.blink strong { animation: none; } .promo-fade .promo-ul li { transition: none; } }
.is-home .hero { min-height: max(520px, calc(100dvh - var(--sb-h) - var(--sf-h) - 38px)); }

/* แถบโฆษณาขนาดใหญ่ (หน้าแรก) — ริบบิ้นสีส้ม + ข้อความใหญ่ + เส้นทแยงแบบป้ายโฆษณา */
.promo-lg { min-height: 84px; padding: 10px 18px 10px 0; justify-content: flex-start; gap: 22px; font-size: clamp(1.15rem, 2.8vw, 2rem); font-weight: 700; letter-spacing: .2px; background: linear-gradient(105deg, #07162b 0 58%, #e08a00 58% 59.4%, #ffffff 59.4% 60.2%, #7a3d00 60.2% 62%, #0b2a4a 62%); border-bottom: 3px solid #ffb020; }
.promo-lg .promo-tag { align-self: stretch; display: flex; align-items: center; padding: 0 30px 0 22px; margin: -10px 0; background: linear-gradient(180deg, #ffc233, #f59e0b); color: #1a1200; font-size: 1.05rem; font-weight: 800; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); white-space: nowrap; }
.promo-lg strong { color: #ffc233; font-size: 1.12em; text-shadow: 0 2px 12px rgba(255, 176, 32, .55); }
.promo-lg.promo-fade .promo-ul { flex: 1; text-align: left; }
.promo-lg.promo-static .promo-ul { justify-content: flex-start; font-size: .72em; }
.promo-lg .promo-dots { position: absolute; right: 16px; bottom: 7px; display: flex; gap: 6px; }
.promo-lg .promo-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.promo-lg .promo-dots i.on { background: #ffb020; box-shadow: 0 0 8px #ffb020; }
.promo-lg .promo-mq li { font-size: 1em; }
@media (max-width: 760px) { .promo-lg { min-height: 70px; gap: 12px; font-size: 1.05rem; } .promo-lg .promo-tag { padding: 0 24px 0 12px; font-size: .85rem; } .promo-lg .promo-dots { display: none; } }
.is-home .hero { min-height: max(520px, calc(100dvh - var(--sb-h) - var(--sf-h) - 84px)); }

/* แถบโฆษณา: ไม่มีไอคอน/ป้าย · ทุกหน้าขนาดและตำแหน่งเดียวกัน (ใต้เมนูบน) · ข้อความเริ่มชิดซ้ายพร้อมเส้นทแยงทองด้านขวา */
.promo-lg { padding-left: max(20px, calc((100vw - 1600px) / 2 + 28px)); }
.promo-lg .promo-tag { display: none; }
@media (max-width: 760px) { .promo-lg { padding-left: 14px; } }

/* หน้าข้อกำหนด: เต็มความกว้าง แบ่งเป็นคอลัมน์ ตัวอักษรกระชับ ให้อยู่ใน 1 หน้าจอเท่าที่ได้ */
.site-doc:has(.terms-doc) { max-width: none; padding: 14px 24px 18px; }
.terms-doc { max-width: none; padding: 12px 18px 14px; }
.terms-doc h1 { font-size: 1.25rem; margin: 0 0 8px; }
.terms-doc .terms-box { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .35); }
.terms-doc .terms-box ul { margin: 4px 0 0; padding-left: 18px; columns: 2 380px; column-gap: 28px; }
.terms-doc .terms-box li { margin: 1px 0; break-inside: avoid; }
.terms-cols { columns: 3 340px; column-gap: 28px; font-size: .86rem; line-height: 1.5; }
.terms-cols p { margin: 0 0 5px; break-inside: avoid; }
.terms-doc > p, .terms-doc > .muted { font-size: .8rem; margin: 6px 0 0; }
.terms-box { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .35); }
.terms-box ul { margin: 4px 0 6px; padding-left: 18px; }
.terms-box .check { margin-top: 4px; }

/* หน้าลูกค้า: ขั้นตอนเป็นรายการลำดับเลขธรรมดา (กันสไตล์ .steps ของหน้าเว็บสาธารณะเล็ดลอดมา) */
.is-cust .steps { display: block; list-style: decimal; padding: 0 0 0 22px; margin: 4px 0; gap: 0; }
.is-cust .steps li { display: list-item; gap: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; align-items: initial; }
.is-cust .steps b { color: inherit; font-size: inherit; }
.note-crate { margin: 10px 0 4px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .35); font-size: .92rem; }
.note-crate ul { margin: 4px 0 0; padding-left: 20px; }

/* หน้ารหัสและที่อยู่โกดัง: 3 คอลัมน์บน (ขั้นตอน/ทางรถ/ทางเรือ) + ตารางราคา 4 ช่องล่าง ให้พอดี 1 หน้าจอ */
.guide-top { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; align-items: start; }
.guide-top .shipcard { margin: 0; padding: 10px 14px; }
.guide-top .shipcard h2 { font-size: 1rem; margin: 0 0 6px; }
.guide-top .codebig { font-size: 1.15rem; margin: 2px 0 6px; }
.guide-top label { font-size: .82rem; margin: 4px 0 2px; }
.guide-top .copyrow input, .guide-top .copyrow textarea { padding: 4px 8px; font-size: .88rem; }
.guide-top .copyrow textarea { height: 46px; }
.guide-top .steps { font-size: .86rem; }
.guide-rates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.gr-cell { margin: 0; padding: 8px 10px; }
.gr-cell h3 { font-size: .92rem; margin: 0 0 4px; }
.guide-foot { margin: 6px 2px 0; }
.note-crate .nc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; }
.note-crate .nc-t { font-weight: 600; min-width: 150px; }
.note-crate .nc-t i { font-weight: 400; font-style: normal; color: var(--muted, #667); font-size: .85em; }
.note-crate .nc-m { font-size: .8rem; opacity: .75; margin-right: 6px; }
.note-crate code.lbl, code.lbl { white-space: nowrap; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: rgba(11, 79, 138, .1); }
@media (max-width: 1100px) { .guide-top { grid-template-columns: 1fr 1fr; } .guide-top > :first-child { grid-column: 1 / -1; } .guide-rates { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .guide-top, .guide-rates { grid-template-columns: 1fr; } }
.note-crate .nc-t { flex: 0 0 100%; min-width: 0; }
.note-crate .nc-p { white-space: nowrap; font-size: .85rem; }

/* ตารางรหัส 3 ประเภท: ปกติ / ตีลังไม้ / ตรวจ QC แยกสีชัดเจน */
.code-kinds { margin: 10px 0 4px; }
.code-kinds h3 { font-size: .95rem; margin: 0 0 6px; }
.ck { width: 100%; border-collapse: separate; border-spacing: 0 5px; }
.ck th { font-size: .78rem; text-align: left; font-weight: 600; opacity: .75; padding: 0 8px; }
.ck td { padding: 7px 8px; vertical-align: middle; border-top: 1px solid rgba(128, 128, 128, .25); border-bottom: 1px solid rgba(128, 128, 128, .25); }
.ck td:first-child { border-left: 5px solid var(--ck, #2e9d5b); border-radius: 8px 0 0 8px; border-left-width: 5px; border-left-style: solid; }
.ck td:last-child { border-right: 1px solid rgba(128, 128, 128, .25); border-radius: 0 8px 8px 0; }
.ck tr.ck-normal { --ck: #2e9d5b; } .ck tr.ck-crate { --ck: #e08a00; } .ck tr.ck-qc { --ck: #1c6fd1; }
.ck tr td { background: color-mix(in srgb, var(--ck) 9%, transparent); }
.ck-badge { display: inline-block; font-weight: 800; font-size: .88rem; padding: 1px 9px; border-radius: 999px; color: #fff; background: var(--ck); }
.ck td small { display: block; margin-top: 2px; font-size: .75rem; opacity: .8; }
.ck code.lbl { font-size: .92rem; }

/* หน้ารหัสและที่อยู่โกดัง v2: คอลัมน์ขวา 2 ช่อง = การ์ดที่อยู่ + ตารางราคาทั่วไป + ตารางสินค้าที่สั่งผ่าน LM (กว้างเท่ากัน) */
.gcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gcol > * { margin: 0 !important; }
.guide-top .copyrow textarea { height: 68px; }
.gcol .gr-cell { padding: 6px 10px; }
.gcol .gr-cell h3 { margin: 0 0 3px; }
.gcol .gr-cell td, .gcol .gr-cell th { padding-top: 3px; padding-bottom: 3px; }
.gcol { gap: 6px; }
.gcol .gr-cell td, .gcol .gr-cell th { padding-top: 2px; padding-bottom: 2px; font-size: .84rem; }
.gcol .gr-cell { padding: 5px 10px 6px; }
.guide-top .shipcard { padding: 8px 12px; }
.guide-top .copyrow { margin-bottom: 2px; }
.gcol .gr-cell .t td, .gcol .gr-cell .t th { padding: 1px 8px; line-height: 1.2; height: auto; }
.gcol .gr-cell .tablewrap { margin: 0; }
/* ตารางราคาบน/ล่างใช้สัดส่วนคอลัมน์เดียวกัน ตัวเลขตรงแนวกัน */
.gcol .gr-cell table { table-layout: fixed; width: 100%; }
.gcol .gr-cell th:nth-child(1), .gcol .gr-cell td:nth-child(1) { width: 46%; }
.gcol .gr-cell th:nth-child(2), .gcol .gr-cell td:nth-child(2), .gcol .gr-cell th:nth-child(3), .gcol .gr-cell td:nth-child(3) { width: 27%; }

/* ข้อสำคัญ: เรียงเต็มคอลัมน์ซ้ายก่อนแล้วจึงขึ้นคอลัมน์ขวา (ข้อ ≤ 2 ใช้คอลัมน์เดียว) */
.terms-doc .terms-box ul.kp { columns: auto; display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.terms-doc .terms-box ul.kp-1c { display: block; }
.terms-doc .terms-box ul.kp-r2 { grid-template-rows: repeat(2, auto); }
.terms-doc .terms-box ul.kp-r3 { grid-template-rows: repeat(3, auto); }
.terms-doc .terms-box ul.kp-r4 { grid-template-rows: repeat(4, auto); }
.terms-doc .terms-box ul.kp-r5 { grid-template-rows: repeat(5, auto); }
.terms-doc .terms-box ul.kp-r6 { grid-template-rows: repeat(6, auto); }
.terms-doc .terms-box ul.kp-r7 { grid-template-rows: repeat(7, auto); }
.terms-doc .terms-box ul.kp-r8 { grid-template-rows: repeat(8, auto); }
.terms-doc .terms-box ul.kp-r9 { grid-template-rows: repeat(9, auto); }
.terms-doc .terms-box ul.kp-r10 { grid-template-rows: repeat(10, auto); }
@media (max-width: 760px) { .terms-doc .terms-box ul.kp { display: block; } }

.terms-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.terms-head h1 { margin: 0; }

/* ยืนยันอีเมล: หน้า "ตรวจอีเมล" หลังสมัคร + หน้าล็อกสำหรับคนที่ยังไม่ยืนยัน */
.checkmail { text-align: center; }
.checkmail .cm-ic { font-size: 2.6rem; line-height: 1; }
.checkmail h1 { margin: 6px 0 10px; }
.checkmail .cm-must { background: #fff4e0; color: #8a4b00; border: 1px solid #f5c26b; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.checkmail .cm-mail { word-break: break-all; }
.checkmail .cm-steps { list-style: none; padding: 0; margin: 14px 0; text-align: left; display: grid; gap: 8px; }
.checkmail .cm-steps li { display: flex; gap: 10px; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.checkmail .cm-steps li > b { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0B4F8A; color: #fff; font-size: .8rem; }
.checkmail .cm-help { text-align: left; border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 10px; font-size: .92rem; }
.checkmail .cm-help ul { margin: 4px 0 10px; padding-left: 20px; }
.checkmail .ok-note { background: #e8f6ec; color: #17653a; }
:root[data-theme=dark] .checkmail .cm-must { background: #3a2a10; color: #ffd493; border-color: #a86a12; }
:root[data-theme=dark] .checkmail .ok-note { background: #12331f; color: #8be0aa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .checkmail .cm-must { background: #3a2a10; color: #ffd493; border-color: #a86a12; } :root:not([data-theme=light]) .checkmail .ok-note { background: #12331f; color: #8be0aa; } }

/* สถิติการใช้งานเว็บ: แดชบอร์ดกราฟ SVG ในหน้าจอเดียว */
.usg { display: grid; gap: 10px; }
.usg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.usg-head h1 { margin: 0; }
.usg-tabs { margin: 0; }
.usg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.usg-r2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.usg-r3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.usg-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.usg-card h2 { margin: 0 0 6px; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.usg-lg { font-size: .74rem; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.usg-lg i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: #0B6AAE; margin-left: 6px; }
.usg-lg i.v2 { background: #f5a623; }
.usg-empty { color: var(--muted); font-size: .88rem; margin: 18px 0; text-align: center; }
.usg-line { width: 100%; height: 170px; display: block; }
.usg-grid { stroke: var(--border); stroke-width: 1; }
.usg-ax { fill: var(--muted); font-size: 9px; }
.usg-area { fill: rgba(11, 106, 174, .16); }
.usg-v1 { fill: none; stroke: #0B6AAE; stroke-width: 2; vector-effect: non-scaling-stroke; }
.usg-v2 { fill: none; stroke: #f5a623; stroke-width: 1.6; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.usg-tip { fill: transparent; }
.usg-tip:hover { fill: rgba(11, 106, 174, .10); }
.usg-fun { display: grid; gap: 9px; padding-top: 4px; }
.usg-frow { display: grid; grid-template-columns: 112px minmax(0, 1fr) 70px; align-items: center; gap: 8px; font-size: .86rem; }
.usg-frow svg, .usg-row svg { width: 100%; height: 10px; display: block; }
.usg-frow b { text-align: right; } .usg-frow small { color: var(--muted); font-weight: 500; }
.usg-bg { fill: var(--border); opacity: .55; }
.usg-fg { fill: #0B6AAE; }
.usg-fg.f1 { fill: #2f8fd0; } .usg-fg.f2 { fill: #1c8a4e; } .usg-fg.f3 { fill: #f5a623; }
.usg-bars { display: grid; gap: 7px; }
.usg-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: .82rem; }
.usg-row .usg-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.usg-row b { min-width: 24px; text-align: right; }
.usg-donut { display: flex; align-items: center; gap: 12px; }
.usg-donut svg { width: 112px; height: 112px; flex: none; }
.usg-donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.usg-donut li { display: flex; align-items: center; gap: 6px; }
.usg-donut li i, .usg-arc { background: #0B6AAE; }
.usg-donut li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.usg-arc.c0, .usg-donut li i.c0 { stroke: #0B6AAE; background: #0B6AAE; }
.usg-arc.c1, .usg-donut li i.c1 { stroke: #f5a623; background: #f5a623; }
.usg-arc.c2, .usg-donut li i.c2 { stroke: #1c8a4e; background: #1c8a4e; }
.usg-arc.c3, .usg-donut li i.c3 { stroke: #8a6cd1; background: #8a6cd1; }
.usg-arc { background: none; }
.usg-bg2 { stroke: var(--border); opacity: .55; }
.usg-dn { fill: var(--text); font-size: 6px; font-weight: 800; }
.usg-note { margin: 0; font-size: .74rem; color: var(--muted); }
@media (max-width: 1100px) { .usg-r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .usg-kpis, .usg-r2, .usg-r3 { grid-template-columns: minmax(0, 1fr); } .usg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* เอกสารการเงิน (ใบเสร็จ/ใบรับเงินฝาก/ใบลดหนี้): หน้าจอ + พิมพ์ A4 */
.taxdoc { background: #fff; color: #111; max-width: 820px; margin: 10px auto; padding: 28px 32px; border: 1px solid var(--border); border-radius: 10px; font-size: .92rem; line-height: 1.5; }
.taxdoc h1 { margin: 0; font-size: 1.35rem; text-align: right; color: #0B2A47; }
.taxdoc .td-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.taxdoc .td-seller b { font-size: 1.05rem; }
.taxdoc .td-meta { text-align: right; font-size: .88rem; }
.taxdoc .td-meta .td-no { font-size: 1.05rem; font-weight: 700; }
.taxdoc .td-void { color: #b42318; border: 3px solid #b42318; display: inline-block; padding: 2px 14px; font-weight: 800; transform: rotate(-6deg); margin: 6px 0; }
.taxdoc .td-buyer { margin: 14px 0; padding: 10px 12px; border: 1px solid #cfd8e1; border-radius: 8px; }
.taxdoc table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.taxdoc th, .taxdoc td { border: 1px solid #cfd8e1; padding: 6px 8px; text-align: left; }
.taxdoc th { background: #eef3f8; }
.taxdoc td.num, .taxdoc th.num { text-align: right; white-space: nowrap; }
.taxdoc .td-sum { margin-left: auto; width: 56%; }
.taxdoc .td-sum td { border: 0; border-bottom: 1px solid #e3e9ef; }
.taxdoc .td-grand td { font-weight: 800; font-size: 1.02rem; border-top: 2px solid #0B2A47; }
.taxdoc .td-note { font-size: .82rem; color: #444; margin-top: 8px; }
.taxdoc .td-sign { display: flex; justify-content: space-between; margin-top: 36px; font-size: .85rem; }
.taxdoc .td-sign div { width: 44%; border-top: 1px solid #888; text-align: center; padding-top: 4px; }
.td-actions { display: flex; gap: 8px; flex-wrap: wrap; max-width: 820px; margin: 8px auto; }
@media print {
  body { background: #fff !important; }
  .topbar, .snav, .btabs, .foot, .dr-bk, .tabs, .no-print, .flash, .pagebar, .td-actions, .sbar-top, header { display: none !important; }
  .taxdoc { border: 0; box-shadow: none; margin: 0; padding: 0; max-width: none; }
  main.wrap, .wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; }
}

/* หน้าบัญชี: พอดี 1 จอ — ฟอร์มอยู่ในกล่องพับ (details.fitform) ตารางเดียวต่อหน้า (กลไก fit ใน app.js ล็อกหัวตาราง เลื่อนเฉพาะแถว) */
details.fitform { margin: 6px 0; padding: 6px 12px; }
details.fitform > summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
details.fitform[open] { padding-bottom: 12px; }
body.fit main.wrap > details.fitform { margin-top: 4px; }
body.fit main.wrap > .tabs { margin: 2px 0 4px; }
.acv { display: grid; gap: 8px; }
.acv .note { margin: 0; }
.acv-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.acv-kpis .kpi { padding: 7px 12px; }
.acv-kpis .kpi .k-v { font-size: 1.2rem; }
.acv-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; align-items: start; }
.acv-tbc { padding: 8px 12px; }
.acv-tbh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 4px; }
.acv-tbh h2 { margin: 0; font-size: .95rem; }
.acv-tb { max-height: calc(100vh - 345px); min-height: 150px; overflow: auto; }
.acv-tb thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); }
.acv-scope { margin-top: 8px; }
.acv-scope summary { cursor: pointer; }
@media (max-width: 1000px) { .acv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acv-grid { grid-template-columns: minmax(0, 1fr); } .acv-tb { max-height: none; } }

.vatrates { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.vatrates label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.vatrates input { width: 3.2rem; padding: 3px 6px; }

/* ===== หน้าแรกมือถือ "Royal Grid" (แบบ 1) — ใช้ร่วมกันหน้าบ้าน/หลังบ้าน (views/royalgrid.js) · ธีมน้ำเงิน–แดง · ใช้ตัวแปรสีเพื่อรองรับโหมดมืดอัตโนมัติ ===== */
.rg { display: block; }
.rg-top { width: 100vw; margin: -14px 0 0 calc(50% - 50vw); padding: 12px 14px 42px; background: linear-gradient(160deg, #0B2A47, #0B4F8A 65%, #1177C7); color: #fff; box-sizing: border-box; }
.rg-row { display: flex; align-items: center; gap: 8px; }
.rg-hi { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.3; opacity: .98; }
.rg-hi b { display: block; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-tag { display: inline-block; background: rgba(255,255,255,.2); border-radius: 999px; padding: 1px 10px; font-size: .78rem; margin-top: 3px; }
.rg-pill { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; min-height: 44px; background: #fff; color: #0B2A47; border-radius: 14px; padding: 4px 12px; text-decoration: none; line-height: 1.15; }
.rg-pill small { color: #5B7087; font-size: .72rem; }
.rg-pill b { font-size: 1.1rem; white-space: nowrap; }
.rg-plus { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #E4262B; color: #fff; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; text-decoration: none; box-shadow: 0 3px 8px rgba(228,38,43,.5); }
.rg-search { display: flex; align-items: center; background: #fff; border-radius: 12px; margin-top: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.rg-search input { flex: 1; min-width: 0; border: 0; box-shadow: none; border-radius: 0; background: transparent; color: #0E2A47; min-height: 44px; padding: 0 12px; font-size: 16px; }
.rg-search button { border: 0; background: transparent; color: #0B4F8A; width: 46px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.rg-search svg { width: 20px; height: 20px; }
.rg-chips { display: flex; gap: 6px; margin-top: 9px; overflow-x: auto; scrollbar-width: none; }
.rg-chips::-webkit-scrollbar { display: none; }
.rg-chip { flex: none; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 5px 10px; font-size: .8rem; white-space: nowrap; }
.rg-chip b { color: #FFB8B2; }
.rg-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 20px; margin: -28px 0 10px; padding: 14px 2px 8px; box-shadow: 0 8px 22px rgba(11,42,71,.2); }
.rg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 0; }
.rg-t { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text); padding: 2px 0 4px; min-height: 44px; -webkit-tap-highlight-color: transparent; }
.rg-t:active .rg-i { transform: scale(.94); }
.rg-i { position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #1B8AD3, #0B4F8A); box-shadow: 0 4px 10px rgba(11,79,138,.32); transition: transform .12s; }
.rg-t.hot .rg-i { background: linear-gradient(145deg, #FF5A4F, #E4262B); box-shadow: 0 4px 10px rgba(228,38,43,.38); }
.rg-i svg { width: 26px; height: 26px; stroke-width: 1.8; }
.rg-b { position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #E4262B; color: #fff; font-size: .74rem; font-weight: 700; font-style: normal; display: grid; place-items: center; border: 2px solid var(--card); box-sizing: border-box; }
.rg-t.hot .rg-b { background: #fff; color: #E4262B; border-color: #E4262B; }
.rg-l { font-size: .8rem; line-height: 1.2; margin-top: 6px; text-align: center; padding: 0 2px; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rg-alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 14px; padding: 11px 14px; margin: 0 0 10px; text-decoration: none; font-size: .88rem; line-height: 1.3; min-height: 44px; }
.rg-alert b { flex: none; white-space: nowrap; }
.rg-alert.bad { background: var(--err-bg); color: var(--err-fg); } .rg-alert.warn, .rg-alert.info { background: var(--warn-bg); color: var(--warn-fg); } .rg-alert.ok { background: var(--ok-bg); color: var(--ok-fg); }
.rg-ann { background: var(--warn-bg); color: var(--warn-fg); border-radius: 14px; margin: 0 0 10px; overflow: hidden; }
.rg-ann-h { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 12px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rg-ann-t { font-weight: 700; white-space: nowrap; }
.rg-ann-1 { flex: 1; min-width: 0; font-size: .84rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-ann.open .rg-ann-1 { visibility: hidden; flex: 1; }
.rg-dot { display: none; width: 9px; height: 9px; border-radius: 50%; background: #E4262B; flex: none; }
.rg-ann.fresh .rg-dot { display: inline-block; }
.rg-chev { flex: none; transition: transform .2s; }
.rg-ann.open .rg-chev { transform: rotate(180deg); }
.rg-ann-b { display: none; padding: 0 14px 12px; }
.rg-ann.open .rg-ann-b { display: block; }
.rg-ann-i + .rg-ann-i { border-top: 1px dashed currentColor; margin-top: 9px; padding-top: 9px; }
.rg-ann-i b { display: block; }
.rg-ann-i p { margin: 3px 0 0; font-size: .86rem; line-height: 1.45; opacity: .95; }
.rg-more { display: inline-block; margin-top: 8px; font-weight: 600; color: inherit; }

/* Royal Grid: ปุ่มกลางแถบล่าง = แดง (ธีมน้ำเงิน–แดง) · ช่องค้นหาพื้นขาวเสมอแม้โหมดมืด · ประกาศ: ส่วนตัวหนังสือจำกัดความสูง */
body.is-cust .btabs a.mid .ico, body.is-staff .btabs a.mid .ico { background: linear-gradient(180deg, #FF5A4F, #E4262B) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(228,38,43,.5) !important; }
body.is-cust .btabs a.mid span, body.is-staff .btabs a.mid span { color: #E4262B !important; }
.rg .rg-search input { background: #fff !important; color: #0E2A47 !important; border: 0 !important; box-shadow: none !important; }
.rg .rg-search input::placeholder { color: #7A8DA3; }
.rg-ann-i p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== แอปมือถือฝั่งลูกค้า (0.79.0) — คิดใหม่จากแอป YD: ไอคอนสีสด ตัวใหญ่ ปุ่มใหญ่ หน้าในมีปุ่มกลับ ไม่มีแถบล่าง ===== */
.ap, .abar { display: none; }
@media (max-width: 819px) {
  html:has(body.is-cust) { font-size: 15.5px; }
  body.is-cust .topbar { display: none; }
  .ap { display: block; }
  .ap-top { width: 100vw; margin: -14px 0 14px calc(50% - 50vw); padding: calc(14px + env(safe-area-inset-top)) 14px 18px; background: linear-gradient(160deg, #0B2A47, #0B4F8A 62%, #1177C7); color: #fff; box-sizing: border-box; border-radius: 0 0 26px 26px; }
  .ap-row { display: flex; align-items: center; gap: 10px; }
  .ap-hi { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.3; }
  .ap-hi b { display: block; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ap-tag { display: inline-block; background: rgba(255,255,255,.2); border-radius: 999px; padding: 1px 11px; font-size: .82rem; margin-top: 3px; }
  .ap-ib { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; text-decoration: none; }
  .ap-ib svg { width: 26px; height: 26px; }
  .ap-ib i { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: #E4262B; color: #fff; font-size: .75rem; font-weight: 700; font-style: normal; display: grid; place-items: center; box-sizing: border-box; border: 2px solid #0B4F8A; }
  .ap-bal { display: flex; align-items: center; gap: 10px; margin-top: 14px; background: #fff; border-radius: 20px; padding: 10px 10px 10px 18px; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
  .ap-bal-v { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: #0B2A47; line-height: 1.15; }
  .ap-bal-v small { color: #5B7087; font-size: .85rem; }
  .ap-bal-v b { font-size: 1.7rem; white-space: nowrap; }
  .ap-topup { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 20px 0 14px; border-radius: 16px; background: linear-gradient(145deg, #FF5A4F, #E4262B); color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; box-shadow: 0 5px 12px rgba(228,38,43,.4); white-space: nowrap; }
  .ap-topup span { font-size: 1.7rem; line-height: 1; font-weight: 500; }
  .ap-search { position: relative; display: flex; align-items: center; margin-top: 12px; background: #fff; border-radius: 16px; overflow: hidden; }
  .ap-s-i { position: absolute; left: 14px; color: #0B4F8A; display: grid; }
  .ap-s-i svg { width: 22px; height: 22px; }
  .ap-search input[type=search] { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; border-radius: 0; background: #fff !important; color: #0E2A47 !important; min-height: 52px; padding: 0 14px 0 46px; font-size: 16px; }
  .ap-search input::placeholder { color: #7A8DA3; }
  .ap .rg-alert { font-size: .98rem; min-height: 52px; border-radius: 16px; }
  .ap .rg-ann { border-radius: 16px; }
  .ap .rg-ann-h { min-height: 54px; font-size: 1rem; }
  .ap .rg-ann-i p { font-size: .95rem; }
  .ap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 4px; padding: 6px 0 10px; }
  .ap-t { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text); -webkit-tap-highlight-color: transparent; }
  .ap-t:active .ap-i { transform: scale(.93); }
  .ap-i { position: relative; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(160deg, #F6FAFF, #DCEBFB); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(11,79,138,.14); transition: transform .12s; }
  .ap-t.hot .ap-i { background: linear-gradient(160deg, #FFF6F5, #FFD9D6); box-shadow: 0 3px 8px rgba(228,38,43,.2); }
  .ap-i img { width: 62px; height: 62px; object-fit: contain; display: block; }
  .ap-b { position: absolute; top: -7px; right: -7px; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 12px; background: #E4262B; color: #fff; font-size: .8rem; font-weight: 700; font-style: normal; display: grid; place-items: center; border: 2px solid var(--bg); box-sizing: border-box; }
  .ap-l { font-size: .9rem; line-height: 1.38; font-weight: 600; margin-top: 5px; text-align: center; min-height: 2.76em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* แถบล่าง 3 ปุ่ม (หน้าแรก/พัสดุ/ฉัน) ใหญ่ขึ้น — เฉพาะหน้าแรกและหน้า "ฉัน" */
  body.is-cust .btabs a { min-height: 64px; font-size: .82rem; font-weight: 600; }
  body.is-cust .btabs .ico { width: 26px; height: 26px; }
  body.is-cust .btabs a.on { color: #E4262B; }

  /* หน้าใน: หัวมีปุ่มกลับกลม + ชื่อหน้า + ยอดเงิน + ตะกร้า · ไม่มีแถบล่าง */
  .abar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 35; padding: calc(8px + env(safe-area-inset-top)) 12px 10px; background: linear-gradient(100deg, #0B2A47, #0B4F8A); color: #fff; }
  .ab-back { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; text-decoration: none; }
  .ab-t { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ab-bal { flex: none; background: #fff; color: #0B2A47; border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; }
  .ab-cart { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; text-decoration: none; }
  .ab-cart svg { width: 26px; height: 26px; }
  .ab-cart i { position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #E4262B; color: #fff; font-size: .72rem; font-weight: 700; font-style: normal; display: grid; place-items: center; border: 2px solid #0B4F8A; box-sizing: border-box; }
  body.is-inner .btabs { display: none; }
  body.is-inner { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  body.is-inner main.wrap > h1:first-child { display: none; }
  body.is-inner main.wrap { padding-top: 12px; }
  body.is-inner button[data-sticky] { bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 54px; font-size: 1.08rem; border-radius: 16px; }
  body.is-inner:has(button[data-sticky]) { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  /* ปุ่ม/ช่องกรอกใหญ่ขึ้น นิ้วโป้งกดง่าย */
  body.is-cust main.wrap .btn:not([data-sticky]), body.is-cust main.wrap button.btn:not([data-sticky]), body.is-cust main.wrap a.btn:not([data-sticky]) { min-height: 46px; font-size: .95rem; border-radius: 12px; padding: 0 18px; }
  body.is-cust main.wrap input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), body.is-cust main.wrap select { min-height: 48px; font-size: 16px; }
  body.is-cust main.wrap .tabs a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ===== หน้าข้อมูลในแอปลูกค้า (0.80.0): อัตราค่าบริการ + ติดต่อเรา + ตั้งค่า ===== */
.ir h1, .ic h1 { margin: 0 0 12px; }
.ir-cnys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ir-cny { background: linear-gradient(160deg, #0B4F8A, #1177C7); color: #fff; border-radius: 16px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ir-cny small { font-size: .8rem; opacity: .9; line-height: 1.25; }
.ir-cny b { font-size: 1.55rem; line-height: 1.1; }
.ir-cny span { font-size: .75rem; opacity: .85; }
.ir-card h2 { margin: 0 0 4px; font-size: 1.05rem; }
.ir-wrap { overflow-x: auto; margin-top: 8px; }
.ir-t { width: 100%; border-collapse: collapse; font-size: .92rem; text-align: right; }
.ir-t th { background: var(--bg); padding: 7px 6px; font-weight: 600; text-align: center; border: 1px solid var(--border); white-space: nowrap; }
.ir-t td { padding: 9px 6px; border: 1px solid var(--border); }
.ir-t td:first-child { text-align: left; font-weight: 600; }
.ic-hero { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, #F6FAFF, #DCEBFB); color: #0B2A47; border-radius: 18px; padding: 12px 14px; margin-bottom: 12px; }
.ic-hero img { width: 76px; height: 76px; flex: none; }
.ic-hero b { font-size: 1.1rem; }
.ic-hero p { margin: 4px 0 0; font-size: .92rem; }
.ic-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ic-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; color: var(--text); text-decoration: none; min-height: 56px; }
.ic-i { font-size: 1.6rem; flex: none; }
.ic-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ic-t small { color: var(--muted); }
.ic-t b { font-size: 1.02rem; overflow-wrap: anywhere; }
.ic-go { font-size: 1.6rem; color: var(--muted); }
.ic-faq h2 { margin: 0 0 8px; font-size: 1.05rem; }
.ic-faq details { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.ic-faq summary { font-weight: 600; cursor: pointer; }
.ic-faq p { margin: 8px 0 0; font-size: .94rem; }
.st-menu { margin-bottom: 14px; }

/* ===== รูปพัสดุในแอปลูกค้า + สินค้าไม่มีเจ้าของ (0.80.0) ===== */
.pitem.has-ph { display: grid; grid-template-columns: 84px 1fr; gap: 4px 12px; align-items: start; }
.pitem .pitem-ph { grid-row: 1 / span 2; width: 84px; height: 84px; object-fit: cover; border-radius: 12px; background: var(--bg); }
.pgal { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 4px; }
.pgal img { height: 150px; width: auto; border-radius: 14px; display: block; background: var(--bg); }
.uo h1 { margin: 0 0 6px; }
.uo-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.uo-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 10px; color: var(--text); text-decoration: none; }
.uo-ph { width: 88px; height: 88px; flex: none; object-fit: cover; border-radius: 12px; background: var(--bg); display: grid; place-items: center; font-size: .75rem; color: var(--muted); }
.uo-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uo-trk { font-weight: 700; overflow-wrap: anywhere; }
.uo-i small { color: var(--muted); }
.uo-big { width: 100%; max-height: 320px; object-fit: contain; border-radius: 14px; background: var(--bg); margin-bottom: 10px; display: block; }
.uo .empty { text-align: center; }

/* โลโก้มุมขวาบนหน้าแรกแอป + แถวค้นหา/กระดิ่ง/ตะกร้า (0.80.0) */
@media (max-width: 819px) {
  .ap-logo { flex: none; display: flex; align-items: center; justify-content: center; height: 58px; padding: 4px 10px; border-radius: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25); }
  .ap-logo img { height: 46px; width: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
  .ap-tools { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
  .ap-tools .ap-search { flex: 1; min-width: 0; margin-top: 0; }
  .ap-tools .ap-ib { width: 52px; height: 52px; border-radius: 16px; }
}
@media (max-width: 819px) { .ir-t { font-size: .84rem; } .ir-t th, .ir-t td { padding: 8px 5px; white-space: nowrap; } .ir-t td:first-child { white-space: normal; } }

/* ฟอร์มบนมือถือ: ข้อความในช่องไม่ถูกตัด · ช่องข้อความยาวขยายตามเนื้อหา ไม่มีแถบเลื่อนซ้อนในหน้า (0.80.1) */
@media (max-width: 819px) {
  body.is-cust main.wrap textarea { min-height: 96px; line-height: 1.45; resize: none; }
  body.is-cust main.wrap input::placeholder, body.is-cust main.wrap textarea::placeholder { white-space: normal; }
  body.is-cust main.wrap .pf-card, body.is-cust main.wrap form { overflow: visible; }
}

/* iPhone: กันซูมค้างจากการแตะสองที (หน้าเหมือนเลื่อนไม่ได้) + ไม่ปล่อยให้ไหลออกด้านข้าง (0.80.4) */
@media (max-width: 819px) { html { touch-action: manipulation; } body.is-cust { overflow-x: clip; } }

/* เส้นกรอบปุ่มเมนูย่อย (แท็บใต้หัวเรื่อง) เข้มขึ้น ~20% ทั้งหน้าบ้านและหลังบ้าน ทุกโหมดสี (0.80.5) */
.tabs a:not(.on):not(.tab-hot), .pg-head .tabs a:not(.on):not(.tab-hot) { border-color: color-mix(in srgb, var(--border) 80%, var(--text)); }

/* หน้าแรกแอป: โลโก้ซ้าย · ทักทาย/ชื่อ ถัดมา · กระดิ่ง+ตะกร้าอยู่มุมขวา (0.81.0) */
@media (max-width: 819px) {
  .ap-row { gap: 10px; }
  .ap-row .ap-logo { height: 54px; padding: 4px 8px; border-radius: 16px; }
  .ap-row .ap-logo img { height: 42px; }
  .ap-row .ap-hi { font-size: .86rem; padding-left: 2px; }
  .ap-row .ap-hi b { font-size: 1.12rem; }
  .ap-row .ap-ib { width: 46px; height: 46px; }
  .ap-tools .ap-search { margin-top: 0; }
}

/* แท็บหัวเมนูย่อยบนมือถือ: ติดใต้แถบหัวตลอด เลื่อนไปมาในแนวนอนได้เมื่อล้นจอ (0.81.0) */
@media (max-width: 819px) {
  body.is-inner main.wrap > .tabs { position: sticky; top: var(--abar-h, 64px); z-index: 34; background: var(--bg); margin: 0 -14px 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
}

/* กระเป๋าเงินบนมือถือ: ปุ่มทำรายการ 2×2 สมดุล · ค้นหาสมุดบัญชีกระชับ (0.81.0) */
@media (max-width: 819px) {
  body.is-cust .walletcard { gap: 10px; padding: 12px; }
  body.is-cust .walletcard > div:first-child { flex: 1 1 100%; }
  body.is-cust .wallet-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  body.is-cust .wallet-act .btn { width: 100%; justify-content: center; text-align: center; padding: 0 8px; min-height: 48px; font-size: .95rem; white-space: nowrap; }
  body.is-cust .wallet-act .btn:first-child { font-weight: 700; }
  body.is-cust .wl-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; margin-bottom: 8px; }
  body.is-cust .wl-bar label { margin: 0 0 2px; font-size: .76rem; }
  body.is-cust .wl-bar select, body.is-cust .wl-bar input { width: 100%; min-width: 0; }
  body.is-cust .wl-bar .wl-btns { display: flex; gap: 8px; }
  body.is-cust .wl-bar .wl-btns .btn { flex: 1; padding: 0 8px; white-space: nowrap; justify-content: center; }
  body.is-cust main.wrap h2 { margin: 12px 0 6px; font-size: 1.05rem; }
}
.ir-t { table-layout: fixed; } .ir-t th:first-child { width: 34%; } .ir-t td:first-child { overflow-wrap: anywhere; }

/* หน้าตั้งค่าแบบรายการ (0.81.0) */
.st-sec { margin: 14px 4px 6px; font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.st-row { min-height: 56px; }
.st-row .me-go { margin-left: 4px; font-size: 1.4rem; color: var(--muted); line-height: 1; }
.st-row .me-h { margin-left: auto; color: var(--muted); font-size: .88rem; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uo-note { background: var(--warn-bg); color: var(--warn-fg); border-radius: 14px; padding: 10px 14px; font-size: .9rem; line-height: 1.45; margin: 8px 0 10px; }
.uo-note a { color: inherit; font-weight: 700; }
.uo-att { margin: 6px 0; }
.uo-att .btn { width: 100%; justify-content: center; }
.wl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.wl-h h2 { margin: 12px 0 6px; }
@media (max-width: 819px) { body.is-cust .wl-bar .wl-btns { display: flex; align-items: flex-end; } body.is-cust .wl-bar .wl-btns .btn { width: 100%; min-height: 48px; } }
.ir-cny small { min-height: 2.5em; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.25; }
.ir-cny .nw { white-space: nowrap; }

/* หน้ารายการข้อกำหนด/นโยบาย + หน้าอ่านเอกสารบนมือถือ (0.81.1) */
.doc-sub { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; margin-top: 1px; }
.docs-hub h1 { margin: 0 0 4px; }
@media (max-width: 819px) {
  body.is-cust .terms-head .btn, body.is-cust .terms-other { display: none !important; }
  body.is-cust .terms-doc { padding: 14px; }
}

/* รายละเอียดสินค้าไม่มีเจ้าของบนคอม: 2 คอลัมน์ ดูครบในหน้าเดียว (0.81.2) */
@media (min-width: 820px) {
  .uo:has(.uo-det) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .uo:has(.uo-det) > .uo-det { grid-row: 1 / span 4; margin: 0; }
  .uo:has(.uo-det) > .card { margin: 0; }
  .uo-big { max-height: 46vh; width: 100%; object-fit: contain; }
  .uo:has(.uo-det) textarea { min-height: 84px; max-height: 18vh; }
  .uo:has(.uo-det) .uo-att .btn { width: auto; }
}

/* รายการสินค้าไม่มีเจ้าของ (ลูกค้า): การ์ดกะทัดรัด 2 คอลัมน์พอดีจอบนคอม · แถบหัวบรรทัดเดียว (0.81.3) */
.uo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.uo-head h1 { margin: 0; }
.uo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 6px 0 10px; }
.uo-bar .tabs { margin: 0; }
.uo-search { display: flex; gap: 8px; flex: 0 1 420px; min-width: 240px; }
.uo-search input { flex: 1; min-width: 0; }
.uo-note { margin: 6px 0 8px; padding: 7px 12px; font-size: .86rem; }
.uo-card { position: relative; transition: border-color .12s, box-shadow .12s; }
.uo-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(11,79,138,.12); }
.uo-m { color: var(--muted); font-size: .84rem; } .uo-m i { font-style: normal; opacity: .85; }
.uo-go { flex: none; background: var(--warn-bg); color: var(--warn-fg); border-radius: 999px; padding: 6px 12px; font-size: .84rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 820px) {
  .uo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0 0 6px; }
  .uo-listpg .uo-ph { width: 76px; height: 76px; }
  .uo-listpg .uo-card { padding: 8px 12px 8px 8px; }
  .uo-listpg .pager { margin: 8px 0 0; }
}
/* แถบแบ่งหน้า: ช่องไปหน้าที่ต้องการ (ทุกหน้าที่แบ่งหน้า ทั้งหน้าบ้าน/หลังบ้าน/มือถือ) */
.pg-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: .84rem; color: var(--muted); }
.pg-jump label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: inherit; color: inherit; }
.pg-jump input[type=number] { width: 72px; min-height: 32px; padding: 2px 8px; text-align: center; }
.pg-jump .btn { min-height: 32px; }
@media (max-width: 819px) {
  .pager.pg-num .pg-far, .pager.pg-num .pg-gap + .pg-n.pg-far { display: none !important; }
  .pager.pg-num .pg-nums { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .pg-jump { flex-basis: 100%; justify-content: center; margin: 4px 0 0; }
  .pg-jump input[type=number] { min-height: 44px; font-size: 16px; width: 84px; }
  .pg-jump .btn { min-height: 44px; }
  body.is-cust .uo-search { flex: 1 1 100%; }
  body.is-cust .uo-search .btn, body.is-cust .uo-search input { min-height: 48px; }
}
@media (min-width: 820px) {
  .uo-listpg .uo-head { margin-top: -4px; }
  .uo-listpg .uo-head h1 { font-size: 1.25rem; }
  .uo-listpg .uo-ph { width: 62px; height: 62px; }
  .uo-listpg .uo-card { padding: 6px 10px 6px 6px; gap: 10px; }
  .uo-listpg .uo-i { gap: 0; line-height: 1.3; }
  .uo-listpg .uo-list { gap: 6px 12px; }
  .uo-listpg .uo-bar { margin: 4px 0 8px; }
  .uo-listpg .uo-bar .tabs a { padding: 4px 12px; }
  .uo-listpg .uo-search input, .uo-listpg .uo-search .btn { min-height: 34px; padding-top: 0; padding-bottom: 0; }
  .uo-listpg .uo-note { margin: 4px 0 6px; padding: 5px 12px; }
  .uo-listpg .pager { margin: 6px 0 0; }
  .uo-listpg .pager.pg-num .pg-sum { flex-basis: auto; }
}
@media (min-width: 1100px) { .uo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .uo-listpg .uo-go { padding: 5px 10px; font-size: .8rem; } }

/* ดูรูปในหน้า (lightbox) 0.81.5 */
body.lb-open { overflow: hidden; }
.lb { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(5, 10, 20, .94); align-items: center; justify-content: center; touch-action: pinch-zoom; }
.lb.on { display: flex; }
.lb-img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; display: block; }
.lb-x { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 2; }
.lb-n { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; z-index: 2; border-radius: 12px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb.single .lb-n { display: none; }
.lb-c { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #fff; font-size: .9rem; opacity: .85; }

/* ปุ่มประกาศด่วนจากโกดัง + กล่องข้อความ (0.81.6) */
.ap-nt { position: relative; border: 0; cursor: pointer; font: inherit; }
.ap-nt .ap-dot { display: none; position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%; background: #E4262B; border: 2px solid #0B4F8A; }
.ap-nt.fresh .ap-dot { display: block; }
.ap-nt.fresh { animation: ydpulse 1.8s ease-in-out 3; }
@keyframes ydpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,176,32,.0); } 50% { box-shadow: 0 0 0 7px rgba(255,176,32,.35); } }
.ydm { position: fixed; inset: 0; z-index: 9000; background: rgba(5, 12, 24, .72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
.ydm[hidden] { display: none; }
.ydm-card { width: min(420px, 100%); max-height: 72vh; max-height: 72dvh; overflow-y: auto; background: var(--card); color: var(--text); border-radius: 20px; padding: 18px 18px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.45); border-top: 5px solid #E4262B; }
.ydm-card h2 { margin: 0 0 10px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; color: #C81E24; }
.ydm-card h2 .ico { width: 22px; height: 22px; }
.ydm-b p { margin: 0 0 10px; line-height: 1.55; font-size: 1rem; overflow-wrap: anywhere; }
.ydm-b p:last-child { margin-bottom: 0; }
.ydm-b .ydm-h { font-weight: 700; }
.ydm-x { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
@media (max-width: 819px) {
  .ap-row .ap-ib { width: 42px; height: 42px; }
  .ap-row .ap-ib svg { width: 23px; height: 23px; }
  .ap-row .ap-logo { height: 48px; padding: 3px 7px; }
  .ap-row .ap-logo img { height: 36px; }
  .ap-row { gap: 8px; }
  .ap-row .ap-hi b { font-size: 1.02rem; }
}

/* แถบประกาศในหัวเว็บ: ทุกหน้า (หน้าบ้าน/หลังบ้าน) · หน้าแรก/แดชบอร์ดกางเต็ม หน้าอื่นย่อเป็นบรรทัดเดียว กดเพื่อกาง (0.81.8) */
.hdann { cursor: pointer; }
.hdann:not(.open) .ann-t p:not(:first-child) { display: none; }
.hdann:not(.open) .ann-t p:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdann:not(.open) .ann-t { flex: 1; }

/* ปุ่มเลือกจำนวน (− 1 +) แบบแคปซูล กะทัดรัด สวยงามทุกหน้าของหน้าบ้าน (0.81.10) */
body.is-cust .qty { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--primary); border-radius: 999px; overflow: hidden; background: var(--card); vertical-align: middle; }
body.is-cust main.wrap .qty .btn:not([data-sticky]), body.is-cust main.wrap .qty button.btn:not([data-sticky]) { min-height: 38px !important; width: 40px; height: 38px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--primary) !important; font-size: 1.25rem !important; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
body.is-cust main.wrap .qty .btn:not([data-sticky]):active { background: rgba(11,79,138,.14) !important; }
body.is-cust .qty > b { min-width: 34px; text-align: center; font-size: 1.05rem; padding: 0 2px; }
body.is-cust main.wrap .qty input[type=text], body.is-cust .qty input[type=text] { width: 52px !important; min-height: 38px !important; height: 38px; padding: 0 !important; text-align: center; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; font-size: 1.05rem; font-weight: 700; }
@media (max-width: 819px) {
  body.is-cust table.cart td:last-child .btn, body.is-cust table.cart td:last-child button.btn { min-height: 40px !important; width: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
  body.is-cust .pf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
  body.is-cust .pf-row > div { flex: 0 1 auto; }
  body.is-cust .pf-row .inline-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  body.is-cust .pf-row #price { width: 140px; }
}

/* หน้าเลือกสินค้า: สินค้าที่มีทั้งสีและขนาดแสดงเป็น 2 แถว (สี / ขนาด) */
.prodcard .pc-msg { min-height: 1.2em; margin-top: 6px; color: var(--danger, #b42318); }

/* โหมดมืด: ฟอร์มเลือกสินค้า (กล่อง กรอบวางรูป แถบเรท หมายเหตุ ฯลฯ) ใช้สีเข้มชุดเดียวกับทั้งเว็บ */
:root[data-theme="dark"] .prod2 { background: #232830; border-color: #343B47; }
:root[data-theme="dark"] .prod2 label, :root[data-theme="dark"] .pf-label { color: #C9D4DF; }
:root[data-theme="dark"] .prod2 .req { color: #F2A39B; }
:root[data-theme="dark"] .prod2 input[type=text], :root[data-theme="dark"] .prod2 input[type=url], :root[data-theme="dark"] .prod2 textarea { background: #1A1F27; border-color: #6B7F99; color: #E8EEF4; box-shadow: none; }
:root[data-theme="dark"] .prod2 ::placeholder { color: #9FB0C1; }
:root[data-theme="dark"] .prod2 input:focus, :root[data-theme="dark"] .prod2 textarea:focus { border-color: #4DAEEA; outline-color: rgba(77, 174, 234, .35); }
:root[data-theme="dark"] .prod2 .pf-notebox { background: #3F3416; border-color: #6B5A22; border-left-color: #E0A800; }
:root[data-theme="dark"] .prod2 .pf-notebox label { color: #F0CE7B; }
:root[data-theme="dark"] .prod2 .pf-notebox textarea { background: #1A1F27; border-color: #6B5A22; }
:root[data-theme="dark"] .pf-pricehint { background: #3F3416; border-color: #6B5A22; border-left-color: #E0A800; color: #F0CE7B; }
:root[data-theme="dark"] .pf-bar { background: #1D3A2A; border-color: #2C5A42; color: #CFEFDC; }
:root[data-theme="dark"] .pf-bar .muted { color: #CFEFDC; opacity: .85; }
:root[data-theme="dark"] .dropzone { background: #1A1F27; border-color: #4DAEEA; }
:root[data-theme="dark"] .dropzone:hover, :root[data-theme="dark"] .dropzone:focus, :root[data-theme="dark"] .dropzone.over { background: #1B3A55; border-color: #8CCBF4; }
:root[data-theme="dark"] .dropzone.got { background: #1D3A2A; border-color: #8FD6A8; }
:root[data-theme="dark"] .dropzone.full { background: #3F3416; border-color: #C98A00; }
:root[data-theme="dark"] .dz-main { color: #8CCBF4; }
:root[data-theme="dark"] .dz-sub { color: #9FB0C1; }
:root[data-theme="dark"] .linkstat.ok { background: #1D3A2A; border-color: #2C5A42; color: #8FD6A8; }
:root[data-theme="dark"] .linkstat.warn { background: #3F3416; border-color: #6B5A22; color: #F0CE7B; }
:root[data-theme="dark"] .linkstat.bad { background: #43211E; border-color: #7A3B35; color: #F2A39B; }
:root[data-theme="dark"] .prodcard .pc-opt.on { background: #1B3A55; border-color: #4DAEEA; box-shadow: 0 0 0 2px rgba(77, 174, 234, .3); }
:root[data-theme="dark"] .prodcard .pc-msg { color: #F2A39B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prod2 { background: #232830; border-color: #343B47; }
  :root:not([data-theme="light"]) .prod2 label, :root:not([data-theme="light"]) .pf-label { color: #C9D4DF; }
  :root:not([data-theme="light"]) .prod2 .req { color: #F2A39B; }
  :root:not([data-theme="light"]) .prod2 input[type=text], :root:not([data-theme="light"]) .prod2 input[type=url], :root:not([data-theme="light"]) .prod2 textarea { background: #1A1F27; border-color: #6B7F99; color: #E8EEF4; box-shadow: none; }
  :root:not([data-theme="light"]) .prod2 ::placeholder { color: #9FB0C1; }
  :root:not([data-theme="light"]) .prod2 input:focus, :root:not([data-theme="light"]) .prod2 textarea:focus { border-color: #4DAEEA; outline-color: rgba(77, 174, 234, .35); }
  :root:not([data-theme="light"]) .prod2 .pf-notebox { background: #3F3416; border-color: #6B5A22; border-left-color: #E0A800; }
  :root:not([data-theme="light"]) .prod2 .pf-notebox label { color: #F0CE7B; }
  :root:not([data-theme="light"]) .prod2 .pf-notebox textarea { background: #1A1F27; border-color: #6B5A22; }
  :root:not([data-theme="light"]) .pf-pricehint { background: #3F3416; border-color: #6B5A22; border-left-color: #E0A800; color: #F0CE7B; }
  :root:not([data-theme="light"]) .pf-bar { background: #1D3A2A; border-color: #2C5A42; color: #CFEFDC; }
  :root:not([data-theme="light"]) .pf-bar .muted { color: #CFEFDC; opacity: .85; }
  :root:not([data-theme="light"]) .dropzone { background: #1A1F27; border-color: #4DAEEA; }
  :root:not([data-theme="light"]) .dropzone:hover, :root:not([data-theme="light"]) .dropzone:focus, :root:not([data-theme="light"]) .dropzone.over { background: #1B3A55; border-color: #8CCBF4; }
  :root:not([data-theme="light"]) .dropzone.got { background: #1D3A2A; border-color: #8FD6A8; }
  :root:not([data-theme="light"]) .dropzone.full { background: #3F3416; border-color: #C98A00; }
  :root:not([data-theme="light"]) .dz-main { color: #8CCBF4; }
  :root:not([data-theme="light"]) .dz-sub { color: #9FB0C1; }
  :root:not([data-theme="light"]) .linkstat.ok { background: #1D3A2A; border-color: #2C5A42; color: #8FD6A8; }
  :root:not([data-theme="light"]) .linkstat.warn { background: #3F3416; border-color: #6B5A22; color: #F0CE7B; }
  :root:not([data-theme="light"]) .linkstat.bad { background: #43211E; border-color: #7A3B35; color: #F2A39B; }
  :root:not([data-theme="light"]) .prodcard .pc-opt.on { background: #1B3A55; border-color: #4DAEEA; box-shadow: 0 0 0 2px rgba(77, 174, 234, .3); }
  :root:not([data-theme="light"]) .prodcard .pc-msg { color: #F2A39B; }
}

/* ข้อความว่างของตารางต้องขึ้นบรรทัดใหม่ ไม่ล้นจอ (ตารางแบบ compact ตั้ง nowrap ไว้) */
table.t.compact td.empty { white-space: normal; }

/* หน้าแก้ไขสมาชิก: ตารางราคาแบบกำหนดเองอยู่ทางขวาของฟอร์ม (จอแคบ = ขึ้นใต้ฟอร์ม) */
.mp-wrap { display: flex; gap: 16px; align-items: flex-start; }
.mp-wrap > .regcard { flex: 0 1 700px; min-width: 0; }
.mp-aside { flex: 1 1 560px; min-width: 0; display: grid; gap: 12px; }
.mp-aside .cp-panel[hidden] { display: none; }
.cp-panel h2 { margin: 0 0 6px; font-size: 1rem; }
.cp-scroll { overflow-x: auto; }
.cp-t { min-width: 540px; }
.cp-t th, .cp-t td { padding: 4px 6px; text-align: center; vertical-align: top; }
.cp-t thead th { white-space: nowrap; }
.cp-t input[type=text] { width: 64px; padding: 4px 6px; text-align: right; }
.cp-t small { display: block; font-size: .7rem; line-height: 1.2; }
.cp-t .cp-off { white-space: nowrap; font-size: .78rem; }
.cp-t .cp-off .check { margin: 0; gap: 4px; }
.cp-tg { margin-top: 4px; font-size: .84rem; }
@media (max-width: 1180px) { .mp-wrap { flex-direction: column; } .mp-wrap > .regcard, .mp-aside { flex: 1 1 auto; width: 100%; } }

.dtcfg{padding:6px 12px;margin-bottom:8px}.dtcfg summary{cursor:pointer;line-height:1.6}.dtcfg-f{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin-top:8px}.dtcfg-f label{display:flex;flex-direction:column;font-size:.8rem;gap:2px}.dtcfg-f input,.dtcfg-f select{width:9.5rem;min-height:34px;padding:4px 8px}.dtcfg-n{flex:1 1 100%}

.pf-gate{margin:8px 0;padding:8px 12px;font-size:.9rem}.pf-gate[hidden]{display:none}#prodform button[type=submit]:disabled{opacity:.5;cursor:not-allowed}