/* S7 · AgriPortal · ธีมเดียวทั้งแอป
 * ★ ตัวอักษร: calc((ฐาน + var(--fsadd)) * var(--fs)) ทุกที่ (มือถือ +0 · แท็บเล็ต +4 · เดสก์ท็อป +8) ห้าม px ตายตัว
 * ★ มุม: ลำดับมาตรฐาน 4·8·12·16·20 · ปุ่ม 12 · การ์ด 16 · ซ้อนชั้น = นอก − ระยะใน
 * ★ fit-width · กริด 1/2/3/4 คอลัมน์ · ระยะห่าง 16 (มือถือ) / 24 · ฟอนต์ Noto Sans Thai (ห้าม Leelawadee)
 */
:root {
  --bg: #F4F5FA; --card: #FFFFFF; --ink: #1C2340; --mut: #4F5675; --accent: #3B4BB8; --accent-ink: #FFFFFF;
  --accent-soft: #E6E9F8; --line: #DADDEB; --warn: #8A5A00; --warn-soft: #FFF3D6; --err: #A3243B; --err-soft: #FCE8EC; --ledger: #5B2E9E; --ledger-soft: #EFE7FB;
  --ok: #1E6B40; --ok-soft: #E1F3E8; --off: #8A9A90;
  --fsadd: 0px; --fs: 0.8; --gap: 16px;   /* ★ ตัวอักษรทั้งระบบ × 0.8 (founder 5 ต.ค. 2569 "ลดลง 20% ใช้พื้นที่มาก") · หน้าพิมพ์ (print.css) คงขนาดกระดาษเดิม */ --pad: 16px; --wrap: none; --side: clamp(16px, 3vw, 56px);   /* ★ fit-width ทุกหน้า (founder 12 ส.ค. · 3 ต.ค. 2569) · ไม่จำกัดกว้าง ไม่จัดกลาง */
  color-scheme: light;
}
@media (min-width: 768px) { :root { --fsadd: 4px; --gap: 24px; --pad: 24px; } }
@media (min-width: 1200px) { :root { --fsadd: 8px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11131F; --card: #1A1D2E; --ink: #E6E8F5; --mut: #AEB3CE; --accent: #9FA8F5; --accent-ink: #11131F;
    --accent-soft: #252A47; --line: #2E3350; --warn: #F2C46B; --warn-soft: #332914; --err: #F28B9C; --err-soft: #3A1A21; --ledger: #C4A6F5; --ledger-soft: #2C2143;
    --ok: #7DD3A0; --ok-soft: #173126; --off: #7D8F84; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Noto Sans Thai', system-ui, sans-serif;
  font-size: calc((16px + var(--fsadd)) * var(--fs)); line-height: 1.6; overflow-wrap: break-word; }   /* ★ ไม่ใช้ anywhere: ตัดกลางคำไทย (ผู้|บริโภค) เจอจากภาพจริง */
a { color: var(--accent); }
.num { font-family: 'Domine', 'Noto Sans Thai', serif; font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── แถบบน */
.top { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--line); }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--side); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700;
  font-size: calc((18px + var(--fsadd)) * var(--fs)); margin-right: auto; }
.brand svg { width: 28px; height: 28px; color: var(--accent); flex: none; }
.ctx { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctx label { font-size: calc((12px + var(--fsadd)) * var(--fs)); color: var(--mut); }
.ctx select { min-height: 40px; max-width: 100%; }
.who { font-size: calc((14px + var(--fsadd)) * var(--fs)); color: var(--mut); }

/* ── พื้นที่เนื้อหา */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: var(--pad) var(--side); }
.hero { margin: 8px 0 var(--gap); }
.eyebrow { margin: 0; color: var(--mut); font-size: calc((14px + var(--fsadd)) * var(--fs)); }
h1 { margin: 4px 0 8px; font-size: calc((24px + var(--fsadd)) * var(--fs)); line-height: 1.3; }
h2 { margin: 0 0 12px; font-size: calc((20px + var(--fsadd)) * var(--fs)); line-height: 1.35; }
h3 { margin: 0 0 8px; font-size: calc((16px + var(--fsadd)) * var(--fs)); }
p { margin: 0 0 12px; }
.muted { color: var(--mut); }
.small { font-size: calc((14px + var(--fsadd)) * var(--fs)); }

/* ── ปุ่ม (มุม 12 · หนาไม่เกิน 700 · ป้ายไม่มีตัวคั่น) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 20px;
  border-radius: 12px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.quiet { background: transparent; border-color: var(--line); color: var(--ink); font-weight: 400; }
.btn:focus-visible, select:focus-visible, input:focus-visible, .tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.back { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); flex: none; }
.back svg { width: 24px; height: 24px; }

/* ── ข้อความแจ้ง */
.note { border-radius: 12px; padding: 12px 16px; margin: 0 0 var(--gap); border: 1px solid transparent; }
.note.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.note.err { background: var(--err-soft); color: var(--err); border-color: var(--err); }
.note.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }

/* ── แผ่นงานหน้าแรก (กริด 1/2/3/4 · ความสูงคงที่) */
.tiles { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-content: start; min-height: 132px;
  padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.tile:hover { border-color: var(--accent); }
.tile .ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.tile .ic svg { width: 26px; height: 26px; }
.tile .t { font-weight: 700; font-size: calc((17px + var(--fsadd)) * var(--fs)); line-height: 1.35; }
.tile .s { color: var(--mut); font-size: calc((14px + var(--fsadd)) * var(--fs)); }
.tile .chip { grid-column: 2; justify-self: start; margin-top: 8px; }
.tile.off { background: transparent; border-style: dashed; color: var(--mut); }
.tile.off .ic { background: transparent; color: var(--off); border: 1px solid var(--line); }
.chip { display: inline-block; padding: 2px 12px; border-radius: 12px; font-size: calc((13px + var(--fsadd)) * var(--fs)); font-weight: 700; }
.chip.todo { background: var(--warn-soft); color: var(--warn); }
.chip.done { background: var(--ok-soft); color: var(--ok); }
.chip.off { background: transparent; color: var(--mut); border: 1px solid var(--line); font-weight: 400; }
.chip.sample { background: var(--err-soft); color: var(--err); }   /* ป้ายข้อมูลสมมติ (หน่วยงานทดลอง) แยกสีจากสถานะ */

/* ── การ์ด · ฟอร์ม */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: var(--pad); margin-bottom: var(--gap); }
.field { display: grid; gap: 4px; margin-bottom: 16px; }
.field > span:first-child, legend { font-weight: 700; font-size: calc((15px + var(--fsadd)) * var(--fs)); }
.hint { color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
input[type=text], select { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 4px 0 0; flex: none; accent-color: var(--accent); }
.choice b { display: block; }
.dl { display: grid; grid-template-columns: 1fr; gap: 4px 24px; margin: 0; }
@media (min-width: 768px) { .dl { grid-template-columns: minmax(160px, 1fr) 2fr; } }
.dl dt { color: var(--mut); }
.dl dd { margin: 0 0 8px; font-weight: 700; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.row > .field { flex: 1 1 220px; margin-bottom: 0; }
.list { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* ── ขั้นตอน (stepper) */
.pagehead { display: flex; align-items: center; gap: 16px; margin: 8px 0 var(--gap); }
.pagehead h1 { margin: 0; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--gap); counter-reset: s; }
.steps a, .steps span { display: grid; gap: 4px; justify-items: center; text-align: center; color: var(--mut); text-decoration: none;
  font-size: calc((12px + var(--fsadd)) * var(--fs)); line-height: 1.3; }
.steps i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--card); font-style: normal; font-weight: 700; color: var(--mut); }
.steps .on i { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.steps .on { color: var(--ink); font-weight: 700; }
.steps .lbl { display: none; }
@media (min-width: 640px) { .steps .lbl { display: block; } }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.check svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.check.y svg { color: var(--ok); }
.check.n svg { color: var(--warn); }
.nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 8px; }
.nav .right { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }

/* ── หน้าข้อความ (เข้าไม่ได้/ผิดพลาด) */
.center { min-height: 70vh; display: grid; place-items: center; }
.center .card { max-width: 560px; width: 100%; text-align: center; }
.brand.solo { justify-content: center; margin: 0 0 8px; }
.tile-btn { grid-column: 2; justify-self: start; margin-top: 8px; }
/* มือถือ: แถบบนบรรทัดเดียว (ซ่อนชื่อบัญชี · ปุ่มออกเล็กลง) — เจอจากภาพจริง 390 */
@media (max-width: 639px) { .who { display: none; } .top .btn.ghost { min-height: 40px; padding: 4px 12px; } }
.nw { white-space: nowrap; }   /* ช่วงคำที่ห้ามตัดกลาง (ตัวตัดคำไทยของเบราว์เซอร์แยก ผู้|บริโภค) */
/* ── แถบทดลองระบบ (ผู้เช่า sandbox) · สีเหลืองชัด อ่านออกทั้งธีมสว่าง/มืด */
.sandbox { background: #FFD84D; color: #2B2200; border-bottom: 2px solid #8A6A00; }
.sandbox-in { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--side); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.sandbox b { font-size: calc((16px + var(--fsadd)) * var(--fs)); }
.sandbox span { font-size: calc((13px + var(--fsadd)) * var(--fs)); }

/* ── โมดูลมาตรฐาน: รายการ · ฟอร์ม · รายละเอียด (S7 · 3 ต.ค. 2569) ── */
.pagehead .head-act { margin-left: auto; }
.act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 var(--gap); }
.act form { margin: 0; }
.filters .row { margin-bottom: 12px; }
.filters .act { margin-bottom: 0; }
.row > .field.grow { flex: 2 1 260px; }
.btn.off { opacity: .45; pointer-events: none; }
.empty { text-align: center; padding: 32px var(--pad); }
.req { color: var(--err); font-style: normal; }
.ferr { color: var(--err); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
textarea { width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; }
input[type=date] { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; }
.formgrid { display: grid; grid-template-columns: 1fr; gap: 0 var(--gap); align-items: start; }   /* ช่องข้างที่มีคำอธิบายยาว ไม่ยืดช่องนี้ */
@media (min-width: 768px) { .formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .formgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.formgrid .wide { grid-column: 1 / -1; }
.formgrid .choice { margin: 0 0 16px; }
.danger summary { cursor: pointer; color: var(--err); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.pager { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: var(--gap) 0; }

/* ตารางแบบ Annual Report: เส้นคั่นบาง · ความสูงคงที่ · ตัวเลขชิดขวา · มือถือเรียงเป็นการ์ด ไม่เลื่อนซ้ายขวา */
.tbl { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: var(--gap); }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: calc((13px + var(--fsadd)) * var(--fs)); color: var(--mut); font-weight: 700; background: var(--bg); }
.tbl td { font-size: calc((15px + var(--fsadd)) * var(--fs)); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .chip, .tbl .code { white-space: nowrap; }
/* คอลัมน์ชื่อสินค้า/ชื่อรายการ กว้างกว่าคอลัมน์อื่นในแถว (founder 3 ต.ค.) · ตัดบรรทัดได้ ส่วนรหัส/สถานะไม่ตัด */
@media (min-width: 1100px) { .tbl .name { width: 30%; } .tbl .name ~ .name { width: 24%; } }   /* สองคอลัมน์ชื่อ: แบ่งกัน ไม่ให้คอลัมน์อื่นเหลือแคบจนคำขาดกลาง */
/* การจัดแนว (founder 3 ต.ค.): หัวคอลัมน์ทุกช่องกึ่งกลาง · รหัส/เลขที่/วันที่ กึ่งกลาง · ข้อความชิดซ้าย · เงินและจำนวนชิดขวา */
.tbl th, .tbl th.num { text-align: center; }
.tbl td.code { text-align: center; }
/* ★ break-word ไม่ใช่ anywhere: anywhere ทำให้คอลัมน์หดได้ไม่จำกัด → ชื่อยาวกินที่ คอลัมน์อื่นเหลือตัวละบรรทัด (เห็นจากภาพ 1280 · 3 ต.ค.) */
.tbl td { overflow-wrap: break-word; }
.tbl td > .chip { justify-self: start; }
@media (max-width: 1099px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .tbl td { border: 0; padding: 4px 12px; display: grid; grid-template-columns: minmax(96px, 40%) 1fr; gap: 8px; text-align: left; }
  .tbl td::before { content: attr(data-label); color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
  .tbl .num, .tbl td.code { text-align: left; white-space: normal; }
}
@media (min-width: 1100px) and (max-width: 1499px) {   /* ตารางเกิน 8 คอลัมน์: การ์ดจนถึง 1499px ไม่ล้นจอ */
  .tbl.many, .tbl.many tbody, .tbl.many tr, .tbl.many td { display: block; width: 100%; }
  .tbl.many thead { display: none; }
  .tbl.many tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .tbl.many td { border: 0; padding: 4px 12px; display: grid; grid-template-columns: minmax(96px, 40%) 1fr; gap: 8px; text-align: left; }
  .tbl.many td::before { content: attr(data-label); color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
  .tbl.many .num, .tbl.many td.code { text-align: left; white-space: normal; }
}
/* การ์ดตัวเลขสรุป (แดชบอร์ด) */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
a.stat:hover { border-color: var(--accent); }
.stat .k { color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.stat .v { font-size: calc((24px + var(--fsadd)) * var(--fs)); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .s { color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
/* เมนูหลัก (แถบใต้หัว) · มือถือเลื่อนแนวนอนในแถบตัวเอง ไม่ดันทั้งหน้า */
.mainnav { padding: 0 var(--side) 8px; display: flex; gap: 4px 8px; overflow-x: auto; scrollbar-width: none; }
.mainnav a { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 12px; color: var(--ink);
  text-decoration: none; font-size: calc((14px + var(--fsadd)) * var(--fs)); white-space: nowrap; }
.mainnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
[hidden] { display: none !important; }   /* ช่องที่ซ่อนตามเงื่อนไข · .field ตั้ง display เอง จึงต้องกันไว้ */
/* มือถือ: ปุ่มบนหัวหน้าขึ้นแถวของตัวเอง (ไม่บีบชื่อหน้า) · การ์ดตาราง: ช่องชื่อใช้เต็มความกว้าง ป้ายอยู่บน (ชื่อยาวไม่ขาดกลางคำ) · เห็นจากภาพ 4 ต.ค. */
@media (max-width: 767px) {
  .pagehead { flex-wrap: wrap; }
  .pagehead .head-act { margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 1099px) {
  .tbl td.name { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 1100px) and (max-width: 1499px) {
  .tbl.many td.name { grid-template-columns: 1fr; gap: 0; }
}
/* การ์ดสรุป 3 ใบ: 1 หรือ 3 คอลัมน์ ไม่เหลือช่องว่าง (กริดสมมาตร) */
.stats.three { grid-template-columns: 1fr; }
@media (min-width: 768px) { .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tbl td > .cv { min-width: 0; }   /* เนื้อในเซลล์ = ชิ้นเดียวในกริดการ์ด (ค่า + ป้ายเตือนไม่แยกช่อง) */
.tbl.wrapchip .chip { white-space: normal; }   /* ป้ายข้อความยาวในตารางนโยบาย ตัดบรรทัดได้ (ไม่ล้นจอ 1280) */
/* หน้าแปลงปลูกสาธารณะ: การ์ด 1 · 2 · 3 คอลัมน์ (กริดสมมาตร 12 ต่อหน้า หาร 1/2/3 ลงตัว) */
.plots { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-bottom: var(--gap); }
@media (min-width: 768px) { .plots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .plots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plot { display: grid; gap: 8px; color: var(--ink); text-decoration: none; margin: 0; align-content: start; }
.plot:hover { border-color: var(--accent); }
.plot .chips { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.plot .pt { font-size: calc((18px + var(--fsadd)) * var(--fs)); }
.mini { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: calc((14px + var(--fsadd)) * var(--fs)); }
.mini dt { color: var(--mut); } .mini dd { margin: 0; }


/* ── ปุ่มสลับโหมดสว่าง/มืด (founder 4 ต.ค. 2569) · ค่าเก็บที่บัญชีบน AgriTech · ไม่เลือก = ตามเครื่อง */
:root[data-theme="dark"] {
    --bg: #11131F; --card: #1A1D2E; --ink: #E6E8F5; --mut: #AEB3CE; --accent: #9FA8F5; --accent-ink: #11131F;
    --accent-soft: #252A47; --line: #2E3350; --warn: #F2C46B; --warn-soft: #332914; --err: #F28B9C; --err-soft: #3A1A21; --ledger: #C4A6F5; --ledger-soft: #2C2143;
    --ok: #7DD3A0; --ok-soft: #173126; --off: #7D8F84; color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
.themebtn button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; white-space: nowrap; }
.themebtn svg { width: 20px; height: 20px; }
/* แถบบนจอกลาง: ปุ่มโหมดเหลือไอคอน (มี aria-label/title) เพื่อไม่ดันปุ่มอื่นตกบรรทัด */
@media (min-width: 640px) and (max-width: 1599px) { .themelbl { display: none; } }
/* แท็บสลับรายงาน (ผลผลิต · คำสั่งซื้อ) */
.rtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap); }
.rtabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 16px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.rtabs a.on { background: var(--accent-soft); border-color: transparent; }
/* ── เมนูซ้าย (S7 · AgriPortal · founder 5 ต.ค. 2569 · ชุดเดียวกับ AgriTech) · เดสก์ท็อป ≥1100: แถบซ้ายคงที่ · ต่ำกว่า: ปุ่ม "เมนู" เปิด/ปิด */
.shell { display: block; }
.side { background: var(--card); border-bottom: 1px solid var(--line); padding: 8px var(--side); }
.sidetoggle { display: inline-flex; gap: 8px; align-items: center; }
.side-list { display: none; padding: 8px 0; }
.side.open .side-list { display: block; }
.side-g { margin: 12px 0 4px; color: var(--mut); font-size: calc((12px + var(--fsadd)) * var(--fs)); font-weight: 700; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side a, .side-off { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.side a:hover { background: var(--accent-soft); }
.side a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.side svg { width: 20px; height: 20px; flex: 0 0 20px; }
.side-off { color: var(--off); }
.side-off em { margin-left: auto; font-style: normal; font-size: calc((12px + var(--fsadd)) * var(--fs)); border: 1px solid var(--line); border-radius: 12px; padding: 0 8px; white-space: nowrap; }
.side a span, .side-off > span { min-width: 0; }
@media (min-width: 1100px) {
  .shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); align-items: start; }
  .side { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--line); padding: 16px 12px 32px; align-self: stretch; min-height: calc(100vh - 64px); }
  .sidetoggle { display: none; }
  .side-list { display: block; padding: 0; }
}
.shell > .wrap { width: 100%; min-width: 0; margin: 0; }   /* ช่องในกริด: ไม่หดตามเนื้อหา ไม่จัดกลาง (เต็มหน้าจอทุกหน้า) */
@media (min-width: 1100px) { .shell .wrap { margin: 0; max-width: min(var(--wrap), 100%); } }
/* เรื่องรออนุมัติ: แถวละเรื่อง กดทั้งแถว */
.apl { list-style: none; margin: 0; padding: 0; }
.apl a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 44px; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.apl a:hover { background: var(--accent-soft); }
.apl .num { margin-left: auto; font-weight: 700; }

/* ── แผนภาพกระบวนการบนหน้าแรก (founder 5 ต.ค. 2569) · ต้นน้ำ → กลางน้ำ → ปลายน้ำ · มือถือเรียงลงพร้อมลูกศรลง
   สถานะ: ready เต็มสี · partial จางระดับ 1 · planned จางระดับ 2 + เส้นประ (+ สัญลักษณ์ SVG ทุกกล่อง ไม่พึ่งสีอย่างเดียว) */
.sub2 { font-size: calc((18px + var(--fsadd)) * var(--fs)); margin: var(--gap) 0 12px; }
.flow { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: var(--pad); margin-bottom: var(--gap); }
.flow-head { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: flex-start; }
.flow-head h2 { margin: 0 0 4px; }
.flow-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.flow-legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st { width: 14px; height: 14px; flex: 0 0 14px; }
.st-ready { color: var(--ok); } .st-partial { color: var(--warn); } .st-planned { color: var(--off); }
.flow-lbl { display: inline-block; font-weight: 700; color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); margin: 16px 0 8px; }
.flow-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1500px) { .flow-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow-stages { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.fs { position: relative; border-radius: 16px; padding: 12px; border: 1px solid var(--line); }
.fs-up { background: var(--ok-soft); } .fs-mid { background: var(--warn-soft); } .fs-down { background: var(--accent-soft); }
.fs-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.fs-h b { font-size: calc((18px + var(--fsadd)) * var(--fs)); }
.fs-h span { color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.fs-nodes { display: grid; gap: 8px; }
/* ลูกศรระหว่างช่วง: จอแคบชี้ลง · จอกว้างชี้ขวา */
.fs:not(:last-child)::after { content: ''; position: absolute; left: 50%; bottom: -26px; width: 20px; height: 20px; margin-left: -10px;
  border-right: 3px solid var(--mut); border-bottom: 3px solid var(--mut); transform: rotate(45deg); }
.fn { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic t" "ic s" "ic f" "ic g"; column-gap: 12px; row-gap: 2px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--ink); text-decoration: none; min-height: 72px; }
a.fn:hover, a.fn:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.fn-ic { grid-area: ic; align-self: start; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.fn-ic svg { width: 22px; height: 22px; }
.fn-t { grid-area: t; font-weight: 700; min-width: 0; }
.fn-no { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; margin-right: 6px; font-variant-numeric: tabular-nums;
  font-size: calc((12px + var(--fsadd)) * var(--fs)); background: var(--ink); color: var(--card); }
.fn-s { grid-area: s; color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); min-width: 0; }
.fn-foot { grid-area: f; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px; }
.fn-st { display: inline-flex; align-items: center; gap: 4px; font-size: calc((12px + var(--fsadd)) * var(--fs)); font-weight: 700; white-space: nowrap; }
.fn-m { font-size: calc((13px + var(--fsadd)) * var(--fs)); font-weight: 700; color: var(--accent); }
.fn-m.off { color: var(--off); font-weight: 400; }
.fn-gap { grid-area: g; font-size: calc((12px + var(--fsadd)) * var(--fs)); color: var(--warn); min-width: 0; }
/* จางสองระดับ: บางส่วน = ระดับ 1 · ยังไม่มี = ระดับ 2 + เส้นประ + ไม่มีลิงก์ */
.fn-partial { opacity: .9; border-color: var(--warn-soft); }
.fn-partial .fn-ic { background: var(--warn-soft); color: var(--warn); }
.fn-planned { opacity: .62; border-style: dashed; background: transparent; }
.fn-planned .fn-ic { background: var(--line); color: var(--off); }
.fn-planned .fn-no { background: var(--off); }
@media (max-width: 767px) { .flow-row { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1500px) {   /* มีเมนูซ้าย 272px · ต่ำกว่านี้สามคอลัมน์แคบเกิน → เรียงลง */
  .flow-stages.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .flow-stages.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .flow-stages:is(.n2, .n3) .fs:not(:last-child)::after { left: auto; right: -31px; top: 50%; bottom: auto; margin: -10px 0 0; transform: rotate(-45deg); }
}
/* เมนูซ้าย AgriPortal: ป้ายไม่ตัดกลางคำ (ป้ายสั้นพอสำหรับ 272px) · ตัวอักษรเล็กกว่าเนื้อหา 1 ขั้น */
.side a span, .side-off > span { white-space: nowrap; }
.side a, .side-off { font-size: calc((14px + var(--fsadd)) * var(--fs)); }
/* ตารางเล็กของหน้า ERP (≤6 คอลัมน์ · class keep) พอดีจอแม้มีเมนูซ้าย → ไม่เปลี่ยนเป็นการ์ด */
/* มีเมนูซ้าย (≥1100) พื้นที่เนื้อหาแคบลง 272px → เลื่อนจุดเปลี่ยนตารางเป็นการ์ดตามพื้นที่จริง (ไม่ใช่ความกว้างจอ) · เจอ 5 ต.ค. ที่ 1280 */
@media (min-width: 1100px) and (max-width: 1371px) {
  .shell .tbl:not(.keep), .shell .tbl:not(.keep) tbody, .shell .tbl:not(.keep) tr, .shell .tbl:not(.keep) td { display: block; width: 100%; }
  .shell .tbl:not(.keep) thead { display: none; }
  .shell .tbl:not(.keep) tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .shell .tbl:not(.keep) td { border: 0; padding: 4px 12px; display: grid; grid-template-columns: minmax(96px, 40%) 1fr; gap: 8px; text-align: left; }
  .shell .tbl:not(.keep) td::before { content: attr(data-label); color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
  .shell .tbl:not(.keep) .num, .shell .tbl:not(.keep) td.code { text-align: left; white-space: normal; }
  .shell .tbl:not(.keep) td.name { grid-template-columns: 1fr; gap: 0; }
  .shell .tbl:not(.keep) .name { width: 100%; }
}
@media (min-width: 1500px) and (max-width: 1771px) {
  .shell .tbl.many, .shell .tbl.many tbody, .shell .tbl.many tr, .shell .tbl.many td { display: block; width: 100%; }
  .shell .tbl.many thead { display: none; }
  .shell .tbl.many tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .shell .tbl.many td { border: 0; padding: 4px 12px; display: grid; grid-template-columns: minmax(96px, 40%) 1fr; gap: 8px; text-align: left; }
  .shell .tbl.many td::before { content: attr(data-label); color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
  .shell .tbl.many .num, .shell .tbl.many td.code { text-align: left; white-space: normal; }
  .shell .tbl.many td.name { grid-template-columns: 1fr; gap: 0; }
  .shell .tbl.many .name { width: 100%; }
}
/* คอลัมน์หลัก (ชื่อรายการ · งาน · สินค้า · ผู้ซื้อ = key ตรง label ของโมดูล หรือ wide) กว้างขั้นต่ำ 12 ตัวอักษร
   ★ ร้อยละอย่างเดียวแพ้หัวคอลัมน์ยาว (เช่น "จำนวน (วัน ชั่วโมง หรือชิ้นงาน)") → คอลัมน์หลักเหลือคำละบรรทัด (founder 5 ต.ค. ภาพ work_log) */
.tbl th.name, .tbl td.name { min-width: 12em; }
.noperm { color: inherit; text-decoration: none; cursor: default; }   /* ลิงก์ที่บทบาทนี้เปิดไม่ได้ → ข้อความธรรมดา (HideForbiddenLinks) */
/* เตือนสินค้าต่ำกว่าจุดสั่งซื้อ (ชุด A) */
.warnbox { border-color: var(--warn); background: var(--warn-soft); }
.warnbox h2 { color: var(--warn); margin: 0 0 8px; }
.warnbox ul { margin: 0 0 8px; padding-left: 20px; }
/* คำอธิบายกำกับ (config/hints.php · founder 5 ต.ค. 2569) */
.side a { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
.side a svg { margin-top: 2px; }
.side a .side-t { white-space: normal; display: block; }
.side a .side-l { display: block; white-space: nowrap; }   /* ชื่อเมนูห้ามตกบรรทัดกลางคำ · ตัดบรรทัดได้เฉพาะคำอธิบาย */
.side .side-h { display: block; white-space: normal; color: var(--mut); font-weight: 400; font-size: calc((12px + var(--fsadd)) * var(--fs)); line-height: 1.45; margin-top: 2px; }
.side a[aria-current="page"] .side-h { color: var(--accent); }
.opthints { list-style: none; margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); display: grid; gap: 4px;
  font-size: calc((13px + var(--fsadd)) * var(--fs)); color: var(--mut); }
.opthints b { color: var(--ink); font-weight: 700; margin-right: 4px; }
dd .hint { display: block; color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); margin-top: 4px; }

/* ── แผนผังกระบวนการ swimlane (FlowMap · config/flows.php) ── */
.fm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.fm-tabs a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.fm-tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.fm-path { font-family: Domine, 'Noto Sans Thai', serif; font-weight: 600; font-size: calc((20px + var(--fsadd)) * var(--fs)); margin: 0 0 8px; line-height: 1.5; }
.fm-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0 0 12px; color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.fm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fm-legend .lg { display: inline-block; width: 20px; height: 12px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--card); }
.lg.step { border-color: var(--accent); } .lg.decision { border-color: var(--warn); background: var(--warn-soft); } .lg.data { border-style: dashed; border-color: var(--mut); }
.lg.end { border-color: var(--accent); background: var(--accent-soft); border-radius: 12px; } .lg.goto { border-color: var(--ink); border-width: 2px; }
.lg.optional { border-style: dotted; border-color: var(--mut); background: transparent; } .lg.backline { border: 0; border-top: 2px dashed var(--mut); height: 0; border-radius: 0; }
.lg.mine { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }

.fmap-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin: 0 0 24px; }
.fmap-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fmap { position: relative; }
.fm-lane { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line); }
.fm-lane.alt { background: color-mix(in srgb, var(--line) 22%, transparent); }
.fm-lname { position: sticky; left: 0; display: flex; align-items: center; width: 132px; height: 100%; padding: 0 12px; background: var(--card); border-right: 1px solid var(--line);
  font-weight: 700; font-size: calc((13px + var(--fsadd) * 0.25) * var(--fs)); line-height: 1.4; z-index: 2; }
.fm-lane.mine .fm-lname { color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.fm-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fm-e { fill: none; stroke: var(--mut); stroke-width: 1.5; }
.fm-e.back { stroke-dasharray: 5 4; }
.fm-edges marker path { fill: var(--mut); }
.fm-el { fill: var(--warn); font-size: calc((11px + var(--fsadd) * 0.25) * var(--fs)); font-weight: 700; paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.fm-el.back { fill: var(--mut); }
.fm-n { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--card);
  color: var(--ink); text-decoration: none; overflow: hidden; z-index: 1; line-height: 1.35; font-size: calc((13px + var(--fsadd) * 0.25) * var(--fs)); }
/* ★ กล่องสูงคงที่ (ตำแหน่งคิดเป็น px ใน FlowMap) → ตัวอักษรในแผนผังโตตามจอแค่ 1/4 ของสูตรปกติ ไม่งั้นจอใหญ่เห็นแค่บรรทัดเดียว (เห็นจากภาพ 5 ต.ค.) */
a.fm-n:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 18%, transparent); }
.fm-n .fm-id { color: var(--mut); font-size: calc((11px + var(--fsadd) * 0.25) * var(--fs)); white-space: nowrap; }
.fm-n .fm-th { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fm-decision { border-color: var(--warn); background: var(--warn-soft); }
.fm-data { border-style: dashed; border-color: var(--mut); }
.fm-end { border-color: var(--accent); background: var(--accent-soft); border-radius: 24px; }
.fm-goto { border: 2px solid var(--ink); font-weight: 700; }
.fm-optional { border-style: dotted; border-color: var(--mut); background: transparent; color: var(--mut); }
.fm-n.mine { box-shadow: 0 0 0 3px var(--accent-soft); }
.fm-c { position: absolute; top: 6px; right: 6px; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--accent); color: var(--card);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc((12px + var(--fsadd)) * var(--fs)); font-variant-numeric: tabular-nums; }
.fm-c.zero { background: var(--line); color: var(--mut); }
.fm-n:has(.fm-c) .fm-id { padding-right: 32px; }

.fm-chain { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fm-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .fm-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fm-stage { display: grid; gap: 12px; align-content: start; }
.fm-stage h2 { margin: 0; }
.fm-card { position: relative; display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; }
.fm-card:hover { border-color: var(--accent); }
.fm-card .fm-id { color: var(--accent); font-weight: 700; }
.fm-card .fm-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.fm-card .fm-c { position: static; }
.fm-section { scroll-margin-top: 16px; }
.fm-section h2 a { color: inherit; }
/* พอดีจอ: ย่อทั้งแผนผังด้วย transform (sizer กันที่ว่างตามขนาดหลังย่อ) · ปุ่มสลับขนาดจริง · ไม่เก็บอะไรในเบราว์เซอร์ */
.fm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.fmap-sizer { position: relative; }
.fmap { transform-origin: 0 0; }
/* ไอคอนที่ไม่มีขนาดกำหนด = ขนาดตัวอักษร (ความสำคัญต่ำสุด :where → กฎเดิมทุกข้อชนะ) · กันไอคอนขยายเต็มจอ (founder 5 ต.ค. เรื่องรออนุมัติว่าง = เครื่องหมายถูกเต็มจอ) */
:where(svg[aria-hidden="true"]) { width: 1.25em; height: 1.25em; }
.empty .ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); margin-bottom: 8px; }
.empty .ic svg { width: 30px; height: 30px; }
/* ขั้นที่ลงบัญชีคู่: สีม่วงเด่น เส้นหนา (founder 5 ต.ค. "ขั้นไหนลงบัญชี ให้ทำสีให้เด่น") */
.fm-n.ledger { border: 3px solid var(--ledger); background: var(--ledger-soft); color: var(--ink); }
.fm-n.ledger .fm-id { color: var(--ledger); font-weight: 700; }
.lg.ledger { border: 3px solid var(--ledger); background: var(--ledger-soft); }

/* ══ Events Resource Planning (Events Together · 6 ต.ค. 2569) ══ */
.erp-two { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--gap); }
@media (min-width: 1100px) { .erp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* คู่ตารางตัวเลข (บาท + สัดส่วน) แคบเกินเมื่อมีเมนูซ้าย → เรียงลงจนถึง 1500px (ล้นจอ 1280 ใน feasibility 6 ต.ค.) */
@media (min-width: 1100px) and (max-width: 1499px) { .erp-two.tables { grid-template-columns: minmax(0, 1fr); } }
.tbl td.nw { white-space: nowrap; }
.erp-two > .card { margin-bottom: 0; }
.neg { color: var(--err); } .pos { color: var(--ok); } .warnv { color: var(--warn); font-weight: 700; }
.stat .v.small-v { font-size: calc((16px + var(--fsadd)) * var(--fs)); overflow-wrap: anywhere; }
h3.sub { font-size: calc((15px + var(--fsadd)) * var(--fs)); margin: 16px 0 8px; }
.funnel { display: grid; gap: 8px; }
.fstep { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) minmax(0, 13em); gap: 12px; align-items: center; color: var(--ink); text-decoration: none; font-size: calc((14px + var(--fsadd)) * var(--fs)); }
.fbar, .mbar { position: relative; height: 14px; border-radius: 12px; background: var(--line); overflow: hidden; }
.fbar i, .mbar i { position: absolute; inset: 0 auto 0 0; border-radius: 12px; background: var(--accent); }
.mbar.over i { background: var(--err); }
.fv { color: var(--mut); text-align: right; font-variant-numeric: tabular-nums; }
.meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; gap: 4px 12px; align-items: center; margin: 12px 0; font-size: calc((14px + var(--fsadd)) * var(--fs)); }
/* ป้าย + ยอดอยู่บรรทัดบน แถบเต็มความกว้างบรรทัดล่าง · เดิมสามช่องในแถวเดียว ยอดยาว nowrap บีบแถบเหลือ 0 (PNG pnl 1280 6 ต.ค.) */
.meter > span:first-child { grid-area: l; } .meter > .mbar { grid-area: b; } .meter > b { grid-area: v; }
.meter b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.erp-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pcards { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard { border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 8px; background: var(--card); }
.pcard header { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.pcard header > a { min-width: 0; }
.pcard header > .chip { flex: none; white-space: nowrap; }   /* ป้ายสถานะไม่ตัดกลางคำ (เห็นใน PNG 1280 6 ต.ค.) */
.pcard p { margin: 0; }
.decision { border-width: 2px; }
.decision.go { border-color: var(--ok); background: var(--ok-soft); }
.decision.nogo { border-color: var(--warn); background: var(--warn-soft); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.checks li.ok svg { color: var(--ok); } .checks li.bad svg { color: var(--warn); }
.checks em { font-style: normal; font-weight: 700; }
.checks li.ok em { color: var(--ok); } .checks li.bad em { color: var(--warn); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.kv dt { color: var(--mut); } .kv dd { margin: 0; }
.tornado, .cashflow { display: grid; gap: 8px; }
.trow, .crow { display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr) minmax(0, 12em); gap: 12px; align-items: center; font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.tbar { position: relative; height: 16px; background: linear-gradient(to right, transparent calc(50% - 1px), var(--mut) calc(50% - 1px), var(--mut) calc(50% + 1px), transparent calc(50% + 1px)); }
.tbar i { position: absolute; top: 0; bottom: 0; }
.tbar i.lo { right: 50%; background: var(--err); border-radius: 4px 0 0 4px; }
.tbar i.hi { left: 50%; background: var(--ok); border-radius: 0 4px 4px 0; }
.tv, .cv { text-align: right; font-variant-numeric: tabular-nums; }
.cbar { position: relative; height: 16px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cbar i { position: absolute; inset: 0 auto 0 0; }
.cbar i.in { background: var(--ok); } .cbar i.out { background: var(--err); }
.gantt { display: grid; gap: 0; overflow-x: auto; }
.g-head, .g-row { display: grid; grid-template-columns: minmax(12em, 22%) minmax(480px, 1fr); align-items: center; min-height: 36px; border-bottom: 1px solid var(--line); }
.g-head { position: sticky; top: 0; background: var(--card); font-weight: 700; z-index: 1; }
.g-name { padding: 4px 8px 4px 0; color: var(--ink); text-decoration: none; font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.g-track { position: relative; height: 32px; }
.g-head .g-track em { position: absolute; top: 4px; font-style: normal; font-weight: 400; color: var(--mut); font-size: calc((11px + var(--fsadd)) * var(--fs)); white-space: nowrap; }
.g-dept { padding: 12px 0 4px; border-bottom: 1px solid var(--line); }
.g-band { position: absolute; top: 0; bottom: 0; display: block; }
.g-band.event { background: var(--accent-soft); } .g-band.load { background: var(--warn-soft); }
.g-bar { position: absolute; top: 8px; height: 16px; border-radius: 12px; background: var(--off); overflow: hidden; display: block; }
.g-bar b { display: block; height: 100%; background: rgba(0, 0, 0, 0.18); }
.g-bar.s-doing, .g-bar.s-review { background: var(--accent); }
.g-bar.s-done { background: var(--ok); }
.g-bar.s-blocked, .g-bar.late { background: var(--err); }
.g-ms { position: absolute; top: 8px; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg); background: var(--ledger); display: block; }
.g-ms.done { background: var(--ok); } .g-ms.late { background: var(--err); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--err); display: block; }
.g-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.g-legend li { display: flex; align-items: center; gap: 8px; }
.g-legend i { position: static; display: inline-block; width: 20px; height: 12px; margin: 0; transform: none; }
.g-legend i.g-ms { width: 12px; transform: rotate(45deg); }
.gantt-act { margin-bottom: 16px; }
.rcal { overflow-x: auto; display: grid; }
.rc-row { display: grid; grid-template-columns: minmax(12em, 18%) repeat(var(--days), minmax(36px, 1fr)); border-bottom: 1px solid var(--line); min-width: calc(12em + var(--days) * 36px); }
.rc-row.clash .rc-name b { color: var(--err); }
.rc-head { position: sticky; top: 0; background: var(--card); font-weight: 700; }
.rc-name { padding: 8px 8px 8px 0; font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.rc-day { text-align: center; padding: 4px 0; font-size: calc((11px + var(--fsadd)) * var(--fs)); color: var(--mut); }
.rc-day.we { background: var(--bg); } .rc-day.today { color: var(--err); }
.rc-cell { border-left: 1px solid var(--line); display: flex; align-items: center; justify-content: center; min-height: 36px; font-size: calc((11px + var(--fsadd)) * var(--fs)); }
.rc-cell { min-width: 0; overflow: hidden; }
.rc-cell a { color: inherit; text-decoration: none; font-weight: 700; white-space: nowrap; }
.rc-cell.on { background: var(--accent-soft); color: var(--accent); }
.rc-cell.req { background: var(--warn-soft); color: var(--warn); }
.rc-cell.x { background: var(--err-soft); color: var(--err); }
.g-legend i.rc-cell { min-height: 12px; border: 0; }
.booths { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.booth { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 2px solid var(--line); text-decoration: none; color: var(--ink); min-height: 88px; }
.booth b { font-size: calc((15px + var(--fsadd)) * var(--fs)); }
.booth span { font-size: calc((12px + var(--fsadd)) * var(--fs)); overflow-wrap: anywhere; }
.booth em { font-style: normal; color: var(--mut); font-size: calc((11px + var(--fsadd)) * var(--fs)); }
.booth.b-available, .booth-key.b-available { background: var(--card); border-color: var(--line); }
.booth.b-reserved, .booth-key.b-reserved { background: var(--warn-soft); border-color: var(--warn); }
.booth.b-sold, .booth-key.b-sold { background: var(--ok-soft); border-color: var(--ok); }
.booth.b-blocked, .booth-key.b-blocked { background: var(--bg); border-style: dashed; color: var(--mut); }
.booth.k-island, .booth.k-premium { border-width: 3px; }
.booth-key { border: 2px solid var(--line); border-radius: 4px; }
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.quotes li { display: grid; gap: 4px; border-left: 3px solid var(--accent); padding-left: 12px; }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); color: var(--mut); font-size: calc((13px + var(--fsadd)) * var(--fs)); }
.steps li::before { content: counter(s) ". "; }
.steps li.done { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); font-weight: 700; }
.badge-card { max-width: 420px; margin: 0 auto; text-align: center; display: grid; gap: 8px; justify-items: center; border-top: 8px solid var(--accent); }
.badge-card h1 { margin: 0; font-size: calc((28px + var(--fsadd)) * var(--fs)); overflow-wrap: anywhere; }
.badge-card .org { margin: 0; font-weight: 700; }
.badge-card .kind { margin: 0; padding: 4px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.badge-card.k-vip, .badge-card.k-speaker { border-top-color: var(--ledger); }
.badge-card.k-media { border-top-color: var(--warn); }
.badge-card.k-exhibitor_staff { border-top-color: var(--ok); }
.badge-card .qr { width: 220px; height: 220px; background: #FFFFFF; padding: 12px; border-radius: 12px; }
.badge-card .qr svg, .badge-card .qr img, .badge-card .qr canvas { width: 100%; height: 100%; }
.badge-card .code { margin: 0; font-family: monospace; font-size: calc((16px + var(--fsadd)) * var(--fs)); letter-spacing: 2px; }
.badge-card .state { margin: 0; font-weight: 700; }
.scan input[name="token"] { font-size: calc((20px + var(--fsadd)) * var(--fs)); }
fieldset.rate { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
fieldset.rate legend { padding: 0 8px; font-weight: 700; }
fieldset.rate label { display: inline-flex; }
fieldset.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.rate label span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
fieldset.rate input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
fieldset.rate input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
label.check { display: flex; gap: 8px; align-items: start; margin: 12px 0; }