/* ===== GTA Gold Theme - Grand International ===== */
:root {
  --gold: #d4af37;
  --gold-light: #f5d76e;
  --gold-dark: #b8860b;
  --gold-deep: #8b6914;
  --ink: #1a1408;
  --bg-dark: #0f0d08;
  --bg-panel: #1c1810;
  --bg-card: #241f14;
  --line: rgba(212, 175, 55, .25);
  --text: #f3ead5;
  --text-dim: #b8ab8a;
  --up: #2ecc71;
  --down: #e74c3c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Noto Sans Thai', 'Segoe UI', sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  min-height: 100vh;
}

/* ---- Nav ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 5%;
  background: rgba(15, 13, 8, .92);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px);
}
.nav .logo {
  font-size: 1.25rem; font-weight: 700;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav .links { display: flex; gap: 10px; align-items: center; }
/* ปุ่มบนแถบนำทาง: ล็อกความสูงเท่ากันทุกปุ่ม (ปุ่มข้อความ/ปุ่มไอคอน เดิมสูงไม่เท่ากัน ดูไม่เรียบร้อย) */
.nav .links .btn { display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; }
.nav .links .btn.btn-icon { width: 48px; padding: 0; }
.mobname, .mobtitle, .navshort { display: none; }   /* องค์ประกอบเฉพาะจอแคบ (หน้าแอปที่มีแฮมเบอร์เกอร์) */

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: 10px 22px; border-radius: 8px;
  border: 1px solid var(--gold); background: transparent; color: var(--gold-light);
  font-size: .95rem; cursor: pointer; text-decoration: none; transition: all .2s;
  font-family: inherit;
}
.btn:hover { background: rgba(212, 175, 55, .12); }
.btn.primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--ink); border: none; font-weight: 700;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger { border-color: var(--down); color: var(--down); }
.btn.success { border-color: var(--up); color: var(--up); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Hero ---- */
.hero {
  text-align: center; padding: 72px 5% 48px;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(212, 175, 55, .28), transparent 60%),
    linear-gradient(180deg, #171208, var(--bg-dark));
}
.hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(135deg, #fff2c4, var(--gold), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--text-dim); margin-top: 12px; font-size: 1.05rem; }

/* ---- Price board (จัดรูปแบบตามหน้าประกาศของสมาคมฯ) ----
   แถวละประเภททอง: [ป้ายชนิดทอง | รับซื้อ/ฐานภาษี | ขายออก] + การ์ดเปลี่ยนแปลงด้านขวา (สูง 2 แถว)
   ความกว้างเท่ากับ .container (1080px) ให้ตรงแนวกับกล่องเนื้อหาด้านล่าง */
.price-board { max-width: 1080px; margin: 22px auto 0; padding: 0 5%; }
.ann-line { text-align: center; color: var(--text-dim); font-size: 1rem; margin-bottom: 14px; }
.ann-line b { color: var(--gold-light); font-variant-numeric: tabular-nums; }
.pb-grid {
  display: grid; grid-template-columns: minmax(140px, .9fr) 1.4fr 1.4fr 1.15fr;
  gap: 14px; align-items: stretch;
}
.pb-label {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--ink);
  border-radius: 14px; font-weight: 800; font-size: 1.15rem; padding: 14px 10px; text-align: center;
}
.pb-label span { font-size: .95rem; font-weight: 700; opacity: .85; }
.pb-change { grid-column: 4; grid-row: 1 / span 2;
  display: flex; flex-direction: column; justify-content: center;
  /* สว่างกว่าใบอื่นเล็กน้อย ให้ "ผลการพิจารณา" เด่นสะดุดตา (โจทย์พี่หนุ่ม) */
  background: linear-gradient(160deg, #332b19, #272113);
  border-color: rgba(212, 175, 55, .5);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4), inset 0 0 24px rgba(212, 175, 55, .06); }
.pb-change .label { color: var(--text); }
.pb-change .sub { color: #cfc19d; }
.pb-change .value { font-size: 1.7rem; }
.pb-unit { text-align: center; color: var(--text-dim); font-size: .82rem; margin-top: 10px; }

/* ตารางสรุปประกาศ (การ์ดสถานะการประกาศ) — แถวหัวข้อ-ค่า เป็นระเบียบอ่านง่าย */
.ann-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ann-table th {
  text-align: left; font-weight: 600; color: var(--text-dim);
  width: 11.5em; padding: 8px 12px 8px 0; border-bottom: 1px dashed rgba(212, 175, 55, .18);
  white-space: nowrap; vertical-align: top;
}
.ann-table td {
  padding: 8px 0; color: var(--text); border-bottom: 1px dashed rgba(212, 175, 55, .18);
  font-variant-numeric: tabular-nums;
}
.ann-table tr:last-child th, .ann-table tr:last-child td { border-bottom: none; }
.ann-table b { color: var(--gold-light); }
.ann-table b.up { color: var(--up); }
.ann-table b.down { color: var(--down); }
/* ราคาในตารางประกาศ: บรรทัดละรายการ "รับซื้อ x,xxx.xx บาท" — ตัวเลขชิดขวาตรงแนวกันทุกบรรทัด */
.ann-kv { display: flex; gap: 10px; align-items: baseline; padding: 1px 0; }
.ann-kv .k { flex: none; width: 5.2em; }
.ann-kv b { min-width: 6.8em; text-align: right; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.ann-kv .u { color: var(--text-dim); font-size: .85rem; }
.price-card {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-panel));
  border: 1px solid var(--line); border-radius: 14px; padding: 22px; text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.price-card .label { color: var(--text-dim); font-size: .9rem; }
.price-card .value {
  font-size: 1.9rem; font-weight: 800; margin-top: 6px; color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.price-card .sub { font-size: .85rem; margin-top: 4px; color: var(--text-dim); }
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }

.ticker {
  display: flex; justify-content: center; align-items: baseline;   /* ทุกช่องเรียงตามเส้นฐานตัวอักษร — "อัปเดต" ตรงแนวกับราคา */
  gap: 26px; row-gap: 6px; flex-wrap: wrap;
  padding: 12px 5%; background: var(--bg-panel); border-block: 1px solid var(--line);
  font-size: .95rem; color: var(--text-dim);
}
.ticker b { color: var(--gold-light); font-variant-numeric: tabular-nums; }

/* แถบราคาหน้ากรรมการ (.ticker-board): ตารางหัวข้อซ้าย-ตัวเลขชิดขวาตรงแนวกัน
   จอกว้าง 4 คอลัมน์ · จอแคบ 2 คอลัมน์ · แถวล่างรวม [ระดับเสียง | ตลาด | เชื่อมต่อ] บรรทัดเดียว */
.ticker-board { display: block; }
.ticker-board .tk-grid { display: grid; grid-template-columns: repeat(4, auto);
  justify-content: center; column-gap: 34px; row-gap: 3px; }
.ticker-board .tk-grid > span { display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; min-width: 0; }
.ticker-board .tk-k { color: var(--text-dim); }
.ticker-board .tk-foot { display: flex; justify-content: center; align-items: center;
  gap: 22px; flex-wrap: wrap; margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed rgba(212, 175, 55, .15); }
.ticker-board .tk-foot input[type=range] { width: 110px; padding: 0; border: none;
  background: none; vertical-align: middle; }
input[type=range] { accent-color: var(--gold); }   /* แถบเลื่อนโทนทองเข้าธีมทุกหน้า */
@media (max-width: 860px) {
  /* จอแคบ: 2×2 หัวข้อ (เล็ก จาง) อยู่บน ตัวเลขอยู่ล่าง — ไม่เบียด ไม่ทับกัน */
  .ticker-board .tk-grid { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 8px; }
  .ticker-board .tk-grid > span { flex-direction: column; align-items: flex-start; gap: 0; }
  .ticker-board .tk-k { font-size: .78rem; }
  /* แถวล่างต้องจบบรรทัดเดียว: [เสียง | ตลาด | เชื่อมต่อ] */
  .ticker-board .tk-foot { gap: 8px; font-size: .78rem; justify-content: space-between; flex-wrap: nowrap; }
  .ticker-board .tk-foot > span { white-space: nowrap; }
  .ticker-board .tk-foot input[type=range] { width: 74px; }
}

/* ---- Panels / tables / forms ---- */
.container { max-width: 1080px; margin: 0 auto; padding: 32px 5%; }
.panel {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px; margin-bottom: 22px;
}
.panel h2 { color: var(--gold-light); font-size: 1.15rem; margin-bottom: 16px; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
/* ตารางที่ตัวเลข/สถานะห้ามแตกบรรทัด (เช่น ประวัติการพิจารณา) — จอแคบใช้เลื่อนแนวนอนแทน */
.nowrap-table th, .nowrap-table td { white-space: nowrap; }

/* ปุ่มสิทธิ PDPA: ตาราง 2×2 ทุกปุ่มขนาดเท่ากัน หัวข้อ + คำอธิบายสั้นตัวเล็ก */
.pdpa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; }
.pdpa-act { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 14px; text-align: left; line-height: 1.35; }
.pdpa-act b { font-weight: 700; }
.pdpa-act small { color: var(--text-dim); font-size: .78rem; font-weight: 400; }
@media (max-width: 640px) { .pdpa-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pdpa-act b { font-size: .88rem; } .pdpa-act small { font-size: .72rem; } }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--gold); font-weight: 600; }
td { color: var(--text); }

label { display: block; margin: 12px 0 4px; color: var(--text-dim); font-size: .9rem; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; font-family: inherit;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--text); font-size: 1rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-dark); }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600;
}
.badge.pending  { background: rgba(212,175,55,.18); color: var(--gold-light); }
.badge.approved { background: rgba(46,204,113,.15); color: var(--up); }
.badge.rejected { background: rgba(231,76,60,.15); color: var(--down); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
/* .grid2-keep: คง 2 คอลัมน์แม้จอแคบ (ฟอร์มเสนอราคา — ประหยัดพื้นที่ เห็นครบในจอเดียว) */
@media (max-width: 640px) {
  .grid2.grid2-keep { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid2.grid2-keep label { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ช่อง "อัตโนมัติ" (readonly ระบบคำนวณให้) — หน้าตาต่างจากช่องที่แก้ไขได้ชัดเจน */
/* แถวปุ่มหัวการ์ดพิจารณาการปรับราคา (.pp-actions): ปุ่มสูงเท่ากันทุกปุ่มทุกขนาดจอ
   (ปุ่มไอคอน ℹ️ เดิมเตี้ยกว่าปุ่มข้อความ — ล็อกความสูงด้วย flex) */
.pp-actions .btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; }

/* จอแคบบีบให้จบบรรทัดเดียว (เดิมปุ่มตกเป็น 2 บรรทัด — ย่อชิป/ปุ่มลงเล็กน้อย + ห้ามห่อบรรทัด) */
@media (max-width: 640px) {
  .pp-actions { gap: 6px !important; flex-wrap: nowrap !important; }
  .pp-actions .badge { font-size: .72rem; padding: 4px 8px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 34vw; flex: none; }
  .pp-actions .btn { padding: 6px 9px !important; font-size: .85rem !important;
    white-space: nowrap; flex: none; }
}

/* ---- ฟอร์มพิจารณาการปรับราคา (.pp-grid) — มาตรฐานกลาง ใช้ทั้งหน้ากรรมการและแอดมิน ----
   (เดิมอยู่ใน board.html หน้าเดียว ทำให้ฟอร์มแอดมินหน้าตาไม่เหมือนบนมือถือ — ย้ายมาที่นี่) */
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pp-grid label { display: flex; flex-direction: column; font-size: .82rem; color: var(--text-dim); gap: 4px; }
.pp-grid input { font-size: 1.1rem; padding: 9px 11px; }
.pp-grid input[readonly] { opacity: .7; }
/* คง 2 คอลัมน์บนมือถือ — ประหยัดพื้นที่ เห็นครบจอเดียว */
@media (max-width: 520px) { .pp-grid { gap: 8px 8px; } }

.auto-field { background: rgba(255, 255, 255, .035); color: var(--text-dim); border-style: dashed; }
.auto-field:focus { outline: none; }
.autotag { font-size: .68rem; background: rgba(212, 175, 55, .16); color: var(--gold-light);
  border-radius: 20px; padding: 1px 8px; vertical-align: middle; }

.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: var(--bg-card); border: 1px solid var(--gold);
  color: var(--text); padding: 14px 20px; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); display: none; max-width: 340px;
}

footer {
  text-align: center; padding: 26px; color: var(--text-dim);
  font-size: .85rem; border-top: 1px solid var(--line); margin-top: 40px;
}

/* กันหน้าเลื่อนแนวนอน (ทำให้ด้านล่างดูไม่เต็ม/ไม่ตรง) */
html, body { max-width: 100%; overflow-x: hidden; }
.layout, .main { min-width: 0; }

/* ปุ่มไอคอน (เช่น ออกจากระบบ = ประตู) — สี่เหลี่ยมกะทัดรัด ไม่กินพื้นที่แถบบน */
.btn.btn-icon { padding: 10px 12px; font-size: 1.15rem; line-height: 1; }

/* ===== ปุ่มจัดการในตารางรายชื่อ (.act-grid) — ใช้ทุกตารางที่มีปุ่มชุดในคอลัมน์ "จัดการ" =====
   เดิมปุ่มเรียงต่อกันแล้วห่อแถวไม่เท่ากัน ดูรก — จัดเป็นตาราง 2 คอลัมน์ ปุ่มกว้างเท่ากันทุกปุ่ม */
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 206px; }
/* เขียนสองแบบให้ชนะกฎ .btn.small ประจำหน้า (specificity สูงกว่า) — ปุ่มถึงจะกว้างเท่ากันจริง */
.act-grid .btn, .act-grid .btn.small { width: 100%; margin: 0; display: inline-flex;
  align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  padding: 6px 4px; font-size: .8rem; }
/* จำนวนปุ่มคี่ (เช่น สมาชิกมี 3 ปุ่ม): ปุ่มสุดท้าย (ลบ) ขยายเต็มแถว ให้บล็อกสมดุลเสมอ */
.act-grid .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* เบอร์โทรในตาราง: ห้ามหักบรรทัดกลางเลข (มาตรฐานเดียวกับตัวเลขราคาในตารางประวัติ) */
td[data-th="เบอร์โทร"] { white-space: nowrap; }

/* ===== เมนูแฮมเบอร์เกอร์ + หัวเตี้ยบนมือถือ (ใช้ร่วมทุกหน้า) ===== */
.hamburger {
  display: none; background: transparent; border: 1px solid var(--gold);
  color: var(--gold-light); font-size: 1.5rem; line-height: 1;
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer; flex: none;
}
.hamburger:hover { background: rgba(212,175,55,.12); }
.nav-scrim {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 390;
}
.nav-scrim.show { display: block; }

@media (max-width: 860px) {
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .nav { padding: 8px 4%; gap: 10px; }
  .nav .logo { font-size: 1.08rem; display: flex; align-items: center; min-width: 0; }
  .nav .logo img { flex: none; height: 28px !important; width: 28px !important; margin-right: 7px !important; }
  .nav .links { gap: 6px; }
  /* จอแคบ: คงความสูง 44px เท่ากันทุกปุ่ม (เท่าปุ่มแฮมเบอร์เกอร์) แต่บีบความกว้างให้ประหยัดพื้นที่ */
  .nav .links .btn { padding: 0 12px; font-size: .88rem; }
  .nav .links .btn.btn-icon { width: 44px; padding: 0; font-size: 1.1rem; }

  /* หน้าแอป (มีแฮมเบอร์เกอร์): [☰] [หน้าแอดมิน/หน้ากรรมการ + ชื่อผู้ใช้ตัวเล็กบรรทัดสอง] … [🔄 บทบาท] [🔔] [🚪]
     ซ่อนโลโก้ + ชื่อหน้ายาว (.logotxt) · ปุ่มไอคอนขนาดเท่ากัน ยกเว้นปุ่มสลับบทบาทมีคำสั้นกำกับ */
  .nav:has(.hamburger) { flex-wrap: nowrap; }
  .nav:has(.hamburger) .logo { flex: 1; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.25; }
  .nav:has(.hamburger) .logo img { display: none; }        /* เอาตราออก — ใช้ชื่อหน้าแทน */
  .nav:has(.hamburger) .logotxt { display: none; }
  .nav:has(.hamburger) .mobtitle { display: block; font-size: 1.08rem; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav:has(.hamburger) .mobname { display: block; font-size: .78rem; font-weight: 600;
    color: var(--text-dim); -webkit-text-fill-color: var(--text-dim);   /* หลุดจาก gradient ของ .logo */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav:has(.hamburger) .links { flex: none; gap: 8px; }
  .nav:has(.hamburger) #who { display: none; }
  .navtxt { display: none; }   /* ข้อความยาวในปุ่มแถบบน — จอแคบซ่อน */
  /* ปุ่มบนแถบทุกปุ่ม (รวมแฮมเบอร์เกอร์) สูง 44 เท่ากัน — ไอคอนล้วน 44×44 */
  .nav:has(.hamburger) .hamburger,
  .nav:has(.hamburger) .links .btn {
    width: 44px; height: 44px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; line-height: 1; border-radius: 10px;
  }
  /* ปุ่มสลับบทบาท: มีคำกำกับ "แอดมิน/กรรมการ" — กว้างตามข้อความ สูงเท่าปุ่มอื่น */
  .nav:has(.hamburger) .navshort { display: inline; }
  .nav:has(.hamburger) .links .btn.btn-role { width: auto; padding: 0 12px; font-size: .95rem; }

  /* หน้าสาธารณะ (ไม่มีแฮมเบอร์เกอร์ เช่น หน้าแรก/เข้าสู่ระบบ): โลโก้อยู่บรรทัดบนกึ่งกลาง
     ปุ่มอยู่บรรทัดเดียวกันด้านล่าง (แบ่งครึ่ง) ย่อข้อความด้วย … ไม่ล้น ไม่บีบโลโก้ */
  .nav:not(:has(.hamburger)) { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .nav:not(:has(.hamburger)) .logo { flex: 1 1 100%; justify-content: center; }
  .nav:not(:has(.hamburger)) .links { flex: 1 1 100%; justify-content: center; flex-wrap: nowrap; gap: 8px; }
  /* ⚠️ ปุ่มไอคอน (เช่น ☀️ สลับธีม) ต้องไม่ยืด — ไม่งั้นกินพื้นที่ 1 ใน 3 ของแถว
     แล้วข้อความปุ่มข้าง ๆ ถูกตัดหาย ("เจ้าหน้าที่ / กรรมกา…") — พี่หนุ่มเจอบนมือถือ 2.30.1 */
  .nav:not(:has(.hamburger)) .links .btn.btn-icon { flex: 0 0 auto; width: 44px; }
  .nav:not(:has(.hamburger)) .links .btn:not(.btn-icon) { flex: 1 1 0; min-width: 0; text-align: center;
    font-size: .82rem; padding: 9px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ราคา (ticker) ตัวใหญ่อ่านง่ายขึ้น */
  .ticker { font-size: .95rem; }
  .ticker b { font-size: 1.05rem; }
  /* หัวหน้าแรก (hero) กระชับลงบนมือถือ */
  .hero { padding: 34px 5% 28px; }
  .hero p { font-size: .98rem; margin-top: 8px; }
}

/* ===== มือถือจอแคบ: บีบโซนบนหน้าแรกให้ "จอแรกเห็นครบถึงสถานะการประกาศ" ===== */
@media (max-width: 640px) {
  .hero { padding: 14px 5% 10px; }
  .hero h1 { font-size: 1.3rem; line-height: 1.35; }
  .hero p { font-size: .86rem; margin-top: 5px; }
  .ticker { padding: 7px 4%; gap: 12px; row-gap: 2px; font-size: .88rem; }
  .container { padding: 14px 4% 24px; }
  /* ป้ายสถานะ "เพิ่ม/ลด/คงที่" ย่อลงพอดีการ์ด แต่ยังเด่นชัดสำหรับผู้สูงอายุ */
  #chgBadge { font-size: 1.25rem !important; padding: 7px 16px !important; }
}

/* ===== จัดฟอร์ม/การ์ดบนมือถือให้กระชับ พอดีจอ (ยกเว้นตัวเลขราคาที่ต้องเด่น) ===== */
@media (max-width: 640px) {
  .panel { padding: 15px 13px; border-radius: 12px; margin-bottom: 16px; }
  .panel h2 { font-size: 1.05rem; margin-bottom: 12px; }
  label { font-size: .85rem; margin: 9px 0 3px; }
  input, select, textarea { font-size: .95rem; padding: 9px 11px; border-radius: 8px; }
  .btn { padding: 9px 15px; font-size: .9rem; }
  table { font-size: .82rem; }
  th, td { padding: 7px 8px; }
  h1 { font-size: 1.3rem; }
  h3 { font-size: 1rem; }
  /* คงความเด่นของ "ตัวเลข/ข้อความราคาทอง" ไว้ ไม่ย่อ */
  .ticker b, .kpi .v { font-size: 1.15rem; }
  .big-price { font-size: 1.6rem; }
  /* กระดานราคาบนมือถือ: [ป้าย | รับซื้อ | ขายออก] ต่อแถว · การ์ดเปลี่ยนแปลงเต็มแถวล่าง */
  .price-board { padding: 0 3%; margin-top: 10px; }
  .ann-line { font-size: .88rem; margin-bottom: 10px; }
  .pb-grid { grid-template-columns: 88px 1fr 1fr; gap: 7px; }
  .pb-label { font-size: .92rem; padding: 8px 4px; border-radius: 10px; }
  .pb-label span { font-size: .8rem; }
  .pb-change { grid-column: 1 / -1; grid-row: auto; order: 10;   /* order ดันไปท้ายสุด ไม่แทรกกลางแถวทอง */
    flex-direction: row; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: center; padding: 10px; }
  .pb-change .value { font-size: 1.3rem; }
  .pb-change .sub { flex-basis: 100%; text-align: center; }   /* คำอธิบายอยู่บรรทัดของตัวเอง กึ่งกลาง */
  .pb-unit { font-size: .74rem; margin-top: 7px; }
  .price-card { padding: 12px 6px; }
  /* ตัวเลขมีทศนิยมยาวขึ้น — ย่อตามจอเพื่อไม่ให้ล้น แต่คงใหญ่อ่านง่าย */
  .price-card .value { font-size: clamp(1rem, 4.9vw, 1.5rem); }
  .price-card .label, .price-card .sub { font-size: .82rem; }
  /* ตารางสรุปประกาศบนจอแคบ: หัวข้อสั้นลง */
  .ann-table { font-size: .88rem; }
  .ann-table th { width: 8.5em; white-space: normal; }

  /* ===== ตารางแบบ .rtable : แต่ละแถวเป็น "การ์ด" บนมือถือ (ไม่ต้องสไลด์ซ้าย-ขวา) ===== */
  table.rtable thead { display: none; }
  table.rtable, table.rtable tbody, table.rtable tr, table.rtable td { display: block; width: 100%; }
  table.rtable tr { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
    margin-bottom: 10px; background: var(--bg-card); }
  table.rtable td { border: none; padding: 5px 0; display: flex; justify-content: space-between;
    align-items: center; gap: 12px; text-align: right; }
  table.rtable td::before { content: attr(data-th); color: var(--text-dim); font-size: .8rem;
    font-weight: 600; flex: none; text-align: left; }
  table.rtable td.actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px;
    padding-top: 9px; margin-top: 6px; border-top: 1px dashed var(--line); }
  table.rtable td.actions::before { content: none; }
  /* ปุ่มในตาราง: แสดงเฉพาะไอคอนบนมือถือ (ซ่อนข้อความ) ให้กะทัดรัดเป็นมาตรฐาน */
  .btxt { display: none; }
  .btn.small { padding: 8px 11px; font-size: 1.05rem; }
  /* ยกเว้นปุ่มชุด .act-grid: กว้างเต็มการ์ดอยู่แล้ว จึงแสดงข้อความกำกับได้ (ผู้สูงวัยอ่านง่าย
     ไม่ต้องเดาไอคอน) และขยาย padding ให้กดถนัดนิ้ว */
  table.rtable td.actions .act-grid { width: 100%; }
  .act-grid .btxt { display: inline; }
  .act-grid .btn, .act-grid .btn.small { font-size: .88rem; padding: 10px 6px; }
}
/* บนจอใหญ่ ปุ่มในตารางแสดงไอคอน + ข้อความตามปกติ */
@media (min-width: 641px) { .btxt { display: inline; } }

/* =====================================================================
   มาตรฐานสัดส่วน "ปุ่ม / ช่องกรอก / แถวรายการ" — ใช้ร่วมทุกหน้า (2.23.0)
   โจทย์พี่หนุ่ม: หลายหน้าปุ่มขนาดไม่เท่ากัน ขอบขวาไม่ตรงแนว ดูไม่สมดุล
   หลักการ: ปุ่มที่อยู่ "แถวเดียวกัน" ต้องสูงเท่ากันและกว้างเท่ากันเสมอ ·
            จอแคบให้ยืดเต็มความกว้าง ขอบขวาจะได้ตรงแนวกับช่องกรอกในการ์ดเดียวกัน
   ===================================================================== */

/* ---- แถวปุ่มท้ายการ์ด (.btn-row) ---- */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-top: 14px; }
.btn-row .btn {
  flex: 1 1 0; min-width: 190px; max-width: 340px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 10px 16px; line-height: 1.25; text-align: center;
}
/* .btn-row.compact = ปุ่มลัดสั้น ๆ (เช่น +50/+100/−50) ไม่ต้องกว้างเท่าปุ่มบันทึก */
.btn-row.compact .btn { flex: 1 1 0; min-width: 0; max-width: none; }

/* ---- กล่องช่องกรอกในการ์ดตั้งค่า (.fld ใน .fld-row) ----
   เดิมตั้ง width ตายตัว (200/230/250px) ทำให้บนมือถือขอบขวาไม่ตรงกับแถว/ปุ่มอื่นในการ์ดเดียวกัน */
.fld-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.fld { flex: 1 1 230px; min-width: 0; max-width: 320px; }
.fld > label { margin-top: 0; }
.fld > input, .fld > select { min-height: 46px; }

/* ---- แถวรายการที่มีหลายช่องในบรรทัดเดียว (.row-grid) — จุดแจ้งเตือน / สเต็ปราคา ----
   ทุกช่องในแถวสูงเท่ากันเป๊ะ และไม่ห่อบรรทัดแม้จอ 360px */
.row-grid { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.row-grid input, .row-grid select { height: 44px; padding: 0 8px; margin: 0; min-width: 0; }
/* คอลัมน์ปุ่มลบ — หัวตารางกับแถวข้อมูลต้องกว้างเท่ากันเป๊ะ ไม่งั้นหัวคอลัมน์เหลื่อม */
.row-grid .col-del { flex: none; width: 40px; }

/* ---- ปุ่มลบท้ายแถว (.row-del) ----
   ทำให้พื้นที่กดใหญ่พอบนมือถือ + เห็นขอบเมื่อโฟกัส · ฝั่ง JS บังคับให้ยืนยันก่อนลบเสมอ */
.row-del {
  flex: none; width: 40px; height: 44px; padding: 0; line-height: 1;
  background: none; border: 1px solid transparent; border-radius: 9px;
  color: var(--down); cursor: pointer; font-size: 1.05rem;
}
.row-del:hover, .row-del:focus-visible { background: rgba(231, 76, 60, .14); border-color: var(--down); }

/* ---- ปุ่มในกล่อง modal: กว้างเท่ากันเสมอ (เดิม "ยืนยัน" กับ "ยกเลิก" กว้างไม่เท่ากัน) ---- */
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1 1 0; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 640px) {
  /* จอแคบ: ปุ่มในแถวยืดเต็มความกว้าง ขอบขวาตรงแนวกับช่องกรอกทุกอัน */
  .btn-row .btn { flex: 1 1 100%; min-width: 0; max-width: none; }
  .btn-row.compact .btn { flex: 1 1 0; min-width: 0; }
  .fld { flex-basis: 100%; max-width: none; }
  .row-grid { gap: 5px; }
  .row-grid input, .row-grid select { padding: 0 5px; font-size: .92rem; }
  .row-del, .row-grid .col-del { width: 34px; }
}


/* ==================== กล่อง "รูปแบบการแจ้งเตือน" ท้ายการ์ดเงื่อนไข (2.29.0) ====================
   โจทย์พี่หนุ่ม: แต่ละเงื่อนไขมีรูปแบบการแจ้งเตือนของตัวเอง ให้อยู่ท้ายการ์ดเดียวกัน
   + "ขีดเส้นคั่นให้สวยงาม" — ใช้เส้นไล่เฉดจางหัวท้าย (ไม่ใช่เส้นทึบตัดขวางแข็ง ๆ)
   พร้อมป้ายหัวข้อคร่อมกลางเส้น เพื่อให้เห็นชัดว่าเป็น "คนละเรื่อง" กับส่วนบนของการ์ด */
.card-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px; color: var(--gold-light);
  font-size: .95rem; font-weight: 700; white-space: nowrap;
}
.card-sep::before, .card-sep::after {
  content: ''; flex: 1 1 0; height: 1px; border: 0;
}
/* ไล่เฉดให้จางหายไปทางขอบการ์ด — ดูนุ่มกว่าเส้นทึบเต็มความกว้าง */
.card-sep::before { background: linear-gradient(to right, transparent, var(--gold) 90%); }
.card-sep::after  { background: linear-gradient(to left,  transparent, var(--gold) 90%); }
@media (max-width: 640px) { .card-sep { font-size: .88rem; gap: 8px; margin: 18px 0 12px; } }

/* กล่องเนื้อหาของรูปแบบการแจ้งเตือน */
.nrule { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: rgba(212, 175, 55, .04); }
/* ติ๊กช่องทาง: การ์ดเล็กขนาดเท่ากันทุกใบ กดได้ทั้งใบ (นิ้วใหญ่ก็กดถูก) */
.nrule-ch { display: flex; flex-wrap: wrap; gap: 8px; }
.nrule-ch label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px;
  cursor: pointer; font-size: .9rem; color: var(--text); min-height: 44px;
  transition: border-color .15s, background .15s;
}
.nrule-ch label:hover { border-color: var(--gold); }
.nrule-ch input { width: auto; margin: 0; accent-color: var(--gold); }
/* ช่องที่มีค่าใช้จ่าย (LINE/SMS) — ทำให้เห็นต่างชัดเจนก่อนกดเปิด */
.nrule-ch label.paid { border-style: dashed; }
.nrule-ch label.paid::after { content: '฿'; color: var(--down); font-weight: 700; }
.nrule-ch input:checked + span { color: var(--gold-light); font-weight: 600; }

/* ============================================================================
 * ☀️ ธีมสว่าง (พื้นขาว) — สลับได้รายบุคคล (2.30.0 · โจทย์พี่หนุ่ม)
 *
 * ทำไมทำแบบสลับตัวแปร: ทั้งระบบใช้ var(--...) อยู่แล้ว จึงเปลี่ยนแค่ชุดตัวแปรที่ราก
 * ไม่ต้องไล่เขียน CSS ซ้ำอีกชุด · จุดที่เขียนสีติดไว้ (เงา/ฉากหลังโปร่ง) ค่อยตามมาแก้ท้ายบล็อกนี้
 *
 * เรื่องที่ต้องระวังเป็นพิเศษ (ผู้ใช้เป็นกรรมการสูงวัย อ่านตัวเลขราคาเป็นหลัก):
 *   1) สีทองบนพื้นขาวจะจางจนอ่านไม่ออก -> ธีมสว่างใช้ทองเข้มขึ้น (#8a6d1b) เป็นสีตัวอักษร
 *      ส่วนทองอ่อนเดิมเก็บไว้ใช้เป็นพื้น/ขอบเท่านั้น
 *   2) สีเขียว/แดง (ขึ้น/ลง) ต้องเข้มขึ้นด้วย ไม่งั้นตัวเลขบนพื้นขาวอ่านยาก
 *   3) ปุ่มทองพื้นเต็ม (.btn.primary) ตัวหนังสือยังต้องเป็นสีเข้มเหมือนเดิม (ทองยังสว่างอยู่)
 * ========================================================================== */
:root[data-theme="light"] {
  /* จับโทนจากเว็บจริงของสมาคมฯ (พี่หนุ่มส่งภาพเทียบ): **พื้นขาว · เหลือง · เทา**
     เหลืองเป็น "สีพื้นของป้าย/ปุ่ม" ไม่ใช่สีตัวอักษร (เหลืองบนขาวอ่านไม่ออก)
     ตัวอักษรใช้ดำเทา · เส้นขอบใช้เทาอ่อน · สีเน้นข้อความใช้เหลืองเข้ม (อำพัน) */
  /* ⚠️ --gold ถูกใช้เป็น **สีตัวอักษร** ด้วย (หัวตาราง th, ลิงก์ท้ายหน้า, ป้ายหน่วย)
     #b8860b ได้คอนทราสต์แค่ 3.25 บนพื้นขาว — ต่ำกว่าเกณฑ์อ่านง่าย (4.5) จึงต้องเข้มกว่านี้
     ส่วนที่ต้องการอำพันสดใช้ --gold-dark (พื้นป้าย/ปุ่ม) แทน */
  --gold: #8a6a10;          /* อำพันเข้ม — อ่านออกบนพื้นขาว (คอนทราสต์ ~5.4) */
  --gold-light: #8a6a10;    /* ⚠️ ธีมมืดคือ "อ่อนกว่า" · ธีมสว่างต้อง "เข้มกว่า" เพราะใช้เป็นสีตัวอักษร */
  --gold-dark: #f5b400;     /* เหลืองสดของสมาคมฯ — ใช้เป็น "พื้น" ของป้าย/ปุ่มเท่านั้น */
  --gold-deep: #d4af37;
  --ink: #241f14;           /* ตัวอักษรบนพื้นเหลือง */
  --bg-dark: #f5f6f7;       /* พื้นหลังหน้า — เทาอ่อนมาก ให้การ์ดขาวลอยขึ้นมา */
  --bg-panel: #ffffff;      /* การ์ด/แผง = ขาวสะอาด */
  --bg-card: #fafbfc;       /* ช่องกรอก/การ์ดซ้อน */
  --line: #e3e5e8;          /* เส้นขอบเทา (ไม่ใช่ทองโปร่ง) ตามเว็บจริงของสมาคมฯ */
  --text: #1f2328;          /* ดำเทา อ่านสบายกว่าดำสนิท */
  --text-dim: #5b636c;      /* เทากลาง — เข้มกว่าเทามาตรฐานเล็กน้อยให้ผ่านเกณฑ์อ่านง่าย */
  --up: #157347;            /* เขียวเข้ม อ่านชัดบนพื้นขาว */
  --down: #c0392b;
}

/* ---- จุดที่เขียนสีติดไว้ในธีมมืด ต้องตามมาแก้ให้เข้ากับพื้นขาว ---- */
:root[data-theme="light"] .nav { background: rgba(255, 255, 255, .93); }
:root[data-theme="light"] .panel,
:root[data-theme="light"] .price-card {
  box-shadow: 0 2px 10px rgba(31, 35, 40, .07), inset 0 0 0 rgba(0, 0, 0, 0);
}
:root[data-theme="light"] .toast { box-shadow: 0 8px 24px rgba(90, 74, 20, .22); }
:root[data-theme="light"] .modal-scrim,
:root[data-theme="light"] .nav-scrim { background: rgba(36, 31, 20, .38); }
/* ช่อง readonly "อัตโนมัติ/จากแหล่งราคา" — ธีมมืดใช้ขาวโปร่ง บนพื้นขาวจะหายไป ต้องใช้เทาโปร่งแทน */
:root[data-theme="light"] .auto-field { background: rgba(36, 31, 20, .05); }
/* โลโก้ไล่เฉด: ธีมมืดไล่จากครีมไปทอง · ธีมสว่างต้องไล่ในโทนเข้มถึงจะอ่านออก */
/* หัวเรื่องหน้าแรก: เว็บจริงเป็นดำ + เน้นคำท้ายด้วยเหลืองอำพัน (ไม่ใช่ไล่เฉดทองทั้งบรรทัด) */
:root[data-theme="light"] .hero h1 {
  background: linear-gradient(135deg, #1f2328 62%, #d99e00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ปุ่มธรรมดาบนพื้นขาว: เติมพื้นอ่อน ๆ ให้เห็นขอบเขตปุ่มชัด (ธีมมืดใช้โปร่งได้เพราะพื้นเข้ม)
   ⚠️ ต้อง :not(.primary) — ไม่งั้นกฎนี้จะไปทับพื้นไล่เฉดทองของปุ่มบันทึก
   ทำให้ปุ่มสำคัญที่สุดของทุกการ์ดกลายเป็นปุ่มธรรมดา ไม่เด่นอีกต่อไป */
:root[data-theme="light"] .btn:not(.primary) { background: #fff; border-color: #dcdfe3; }
:root[data-theme="light"] .btn:not(.primary):hover { background: #fdf6e3; border-color: var(--gold); }
/* ปุ่มบันทึก: ธีมมืดไล่จากทองอ่อน -> ทองเข้ม · ธีมสว่างต้องกำหนดเองเพราะ --gold-light
   ถูกสลับเป็นโทนเข้มไปแล้ว (ใช้เป็นสีตัวอักษร) ถ้าปล่อยตามตัวแปรจะได้ปุ่มน้ำตาลทึบ ตัวหนังสือจม */
:root[data-theme="light"] .btn.primary {
  background: linear-gradient(135deg, #f7c02b, #eda600);
  color: #241f14; border: none;
}
:root[data-theme="light"] .btn.primary:hover {
  background: linear-gradient(135deg, #ffd04d, #e09b00);
}
/* แถบเลื่อนระดับเสียง + ติ๊กถูก ใช้สีทองเข้มให้เห็นบนพื้นขาว */
:root[data-theme="light"] input[type="range"] { accent-color: var(--gold-dark); }

/* ไล่เฉดที่เขียนสีเข้มติดไว้ตรง ๆ — ธีมสว่างต้องเปลี่ยนทั้งชุด ไม่งั้นเหลือแถบดำคาดกลางหน้า */
:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(245, 180, 0, .18), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--bg-dark));
}
/* การ์ด "ผลการพิจารณา" บนกระดานราคา (ธีมมืดไล่เฉดน้ำตาลเข้ม #332b19 -> #272113)
   ธีมสว่างต้องเป็นครีมอ่อน แต่ยัง "สว่างกว่าใบอื่นเล็กน้อย" ตามโจทย์เดิมของพี่หนุ่ม */
:root[data-theme="light"] .pb-change {
  background: linear-gradient(160deg, #fffaf0, #fff5e0);
  border-color: #f0d9a0;
  box-shadow: 0 2px 10px rgba(31, 35, 40, .07), inset 0 0 24px rgba(245, 180, 0, .07);
}

/* ป้าย "ทองคำแท่ง 96.5% / ทองรูปพรรณ 96.5%" — เว็บจริงของสมาคมฯ เป็นบล็อกเหลืองสดตัวหนังสือเข้ม
   ธีมมืดไล่เฉดจาก --gold-light ซึ่งธีมสว่างถูกสลับเป็นโทนเข้มไปแล้ว จึงต้องกำหนดเอง */
:root[data-theme="light"] .pb-label {
  background: linear-gradient(135deg, #f7c02b, #f0a800);
  color: #241f14; border: none;
}
/* หัวข้อ/ตัวเน้นที่เดิมใช้ทองอ่อน — บนพื้นขาวใช้อำพันเข้มแทน (คุมด้วยตัวแปรอยู่แล้ว)
   ส่วนแถบเลื่อน/ติ๊กถูก ใช้เหลืองสดได้เพราะเป็นพื้นไม่ใช่ตัวอักษร */
:root[data-theme="light"] input[type="checkbox"],
:root[data-theme="light"] .nrule-ch input { accent-color: #d99e00; }

/* ปุ่มสลับธีมบนแถบบน — ขนาดเท่าปุ่มไอคอนอื่นในแถวเดียวกัน (กติกา §3.10)
   หมายเหตุ: หน้าที่มีเมนูแฮมเบอร์เกอร์ (กรรมการ/แอดมิน/สมาชิก/รายงาน) ย้ายปุ่มนี้ไปไว้ในเมนูข้าง
   เพราะแถบบนแน่นจนชื่อหน้าถูกบีบจนอ่านไม่ออก */
.btn-theme { font-size: 1rem; }

/* ไอคอนนำหน้าข้อความในปุ่มแถบบนหน้าสาธารณะ (👤 สมาชิก · 🔑 กรรมการ/ผู้ดูแล)
   เว้นช่องไฟด้วย margin ไม่ใช่เว้นวรรค — อิโมจิแต่ละตัวมีช่องไฟข้างไม่เท่ากัน
   (🔑 ชิดตัวหนังสือกว่า 👤 อย่างเห็นได้ชัด) ใช้ margin แล้วทุกปุ่มห่างเท่ากันเสมอ
   จอแคบมากจะถูกซ่อนทั้งก้อน เพื่อสงวนที่ให้คำเต็ม (ดู media query ท้ายไฟล์) */
.navicon { margin-right: 3px; }

/* จอแคบมาก: ชื่อหน้า ("หน้ากรรมการ") สำคัญกว่าคำกำกับปุ่มสลับบทบาท
   ต้องการ ~101px แต่เหลือให้แค่ ~74px -> ย่อปุ่มสลับบทบาทเหลือไอคอน (คำอธิบายอยู่ใน title/aria-label) */
@media (max-width: 420px) {
  .nav:has(.hamburger) .navshort { display: none; }
  .nav:has(.hamburger) .btn-role { width: 44px; padding: 0; }
  .nav:has(.hamburger) .links { gap: 5px; }

  /* หน้าสาธารณะจอแคบมาก: บีบช่องไฟ/ระยะขอบ เพื่อให้ทั้ง **ไอคอน + คำเต็ม** อยู่ในปุ่มได้
     (พี่หนุ่มสั่ง 2.30.4: ไอคอนต้องมีทุกจอ ไม่ใช่มีเฉพาะ desktop) */
  .nav:not(:has(.hamburger)) .links { gap: 6px; }
  .nav:not(:has(.hamburger)) .links .btn:not(.btn-icon) { padding: 9px 6px; font-size: .8rem; }
  .nav:not(:has(.hamburger)) .navicon { font-size: .92em; margin-right: 2px; }
}

/* จอเล็กสุดที่ยังต้องรองรับ (iPhone SE / จอพับด้านนอก ~320px)
   ปุ่มยาวสุดคือ "🔑 กรรมการ/ผู้ดูแล" — ต้องย่อทั้งตัวอักษรและไอคอนอีกขั้น
   ไม่งั้นคำจะถูกตัดเป็น "กรรมการ/ผู้ดูแ…" ซึ่งอ่านแล้วไม่รู้ว่าปุ่มอะไร */
@media (max-width: 380px) {
  .nav:not(:has(.hamburger)) .links { gap: 5px; }
  .nav:not(:has(.hamburger)) .links .btn:not(.btn-icon) { font-size: .72rem; padding: 9px 4px; }
  .nav:not(:has(.hamburger)) .links .btn.btn-icon { width: 40px; }
  .nav:not(:has(.hamburger)) .navicon { font-size: .85em; margin-right: 1px; }
}
/* จอ ~320px (iPhone SE รุ่นแรก / จอพับด้านนอก) — ขั้นสุดท้ายของการย่อ
   ยังต้องได้ทั้งไอคอนและคำเต็มบนบรรทัดเดียว จึงบีบขอบซ้ายขวาของแถบด้วย */
@media (max-width: 340px) {
  .nav { padding: 8px 2%; }
  .nav:not(:has(.hamburger)) .links { gap: 4px; }
  .nav:not(:has(.hamburger)) .links .btn:not(.btn-icon) { font-size: .68rem; padding: 9px 3px; }
  .nav:not(:has(.hamburger)) .links .btn.btn-icon { width: 38px; }
}


/* ==================== การ์ดพิจารณาการปรับราคา — แถบราคาอ้างอิงแบบย่อ (2.32.0) ====================
   โจทย์พี่หนุ่ม (มาร์กบนภาพ): "ย่อให้เหลือพื้นที่แค่แสดงไว้อ้างอิง"
   เดิม 4 ช่องราคา + อัตราแลกเปลี่ยน เป็นช่องกรอกเต็มขนาดทั้งที่ readonly ทุกช่อง
   กินความสูงเกือบครึ่งการ์ด แย่งความสนใจไปจาก ★ ราคาไทย ซึ่งเป็นตัวเลขเดียวที่กรรมการต้องตัดสิน
   ตอนนี้ยุบเป็น "แถบตัวเลขอ้างอิง" อ่านอย่างเดียว — เห็นครบเหมือนเดิมแต่ใช้ที่น้อยกว่ามาก
   (ค่าเดิมยังอยู่ใน <input type=hidden> ชุดเดิมทุกตัว สคริปต์ที่อ่าน .value จึงไม่ต้องแก้เลย) */
.ref-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--bg-card); margin-bottom: 12px; }
.ref-strip > div { padding: 7px 10px; min-width: 0; }
.ref-strip .rk { display: block; color: var(--text-dim); font-size: .74rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ref-strip .rv { display: block; font-weight: 700; font-size: .98rem; color: var(--gold-light);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ref-strip .rsrc { font-size: .68rem; color: var(--text-dim); font-weight: 400; }
@media (max-width: 640px) {
  .ref-strip { grid-template-columns: 1fr 1fr; }
  .ref-strip .rv { font-size: .92rem; }
}

/* ช่องตัวเลขที่ไม่ต้องการลูกศรขึ้น-ลงของเบราว์เซอร์ (โจทย์พี่หนุ่ม: "ไม่ต้องแสดง")
   ★ ราคาไทย มีปุ่ม −/＋ ครั้งละ 50 อยู่แล้ว ลูกศรจิ๋วของเบราว์เซอร์ขยับทีละ 50 เหมือนกัน
   แต่เล็กจนกดพลาดง่าย และทำให้ช่องดูรก — ตัดออกทั้งสองฝั่ง (WebKit + Firefox) */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin { -moz-appearance: textfield; appearance: textfield; }

/* บรรทัดสมการของสูตรที่เลือก — ใต้ช่องเลือกสูตร */
.formula-expr { margin: 6px 0 0; font-size: .8rem; color: var(--text-dim); line-height: 1.5; }
.formula-expr b { color: var(--gold-light); font-weight: 700; }

/* ---- ช่องเลือกสูตรในฟอร์มเสนอราคา (2.32.3 — พี่หนุ่มทักว่าถูกบีบแคบ) ----
   เดิมใช้ .fld-row/.fld ซึ่งจำกัด max-width 320px -> ชื่อสูตรถูกตัดคำกลางคัน
   และสมการ/คำอธิบายห่อเป็นคอลัมน์แคบ ๆ กลางการ์ดที่กว้างเป็นพันพิกเซล ดูไม่เข้าพวก
   บล็อกนี้จึงกว้างเต็มการ์ดเสมอ ให้อ่านชื่อสูตรและสมการได้จบในบรรทัดเดียวบนจอกว้าง */
/* ==================== แถบสรุป "วันนี้ปรับไปแล้วรวมกี่บาท" (2.32.7) ====================
   โจทย์พี่หนุ่ม: "แสดงเป็นแถบพื้นหลังค่อนข้างโปร่งใส ให้เห็นตัวเลขเคลื่อนไหวชัดเจน"
   -> พื้นหลังโปร่ง (alpha ต่ำ) ให้กลืนไปกับการ์ด · ตัวเลขตัวใหญ่ หนา และใช้ตัวเลขความกว้างเท่ากัน
      (tabular-nums) เพื่อให้หลักไม่ขยับตอนค่าเปลี่ยน — สายตาจับ "การเคลื่อนไหว" ได้ทันที
   ⚠️ ห้ามใส่พื้นทึบ: แถบนี้อยู่บนการ์ดหลายแบบ (พื้นเข้ม/พื้นอ่อน/ในกล่องประกาศ)
      พื้นทึบจะกลายเป็นแผ่นแปะที่ตัดกับพื้นหลังจนดูเป็นคนละชิ้น */
.day-sum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin: 10px 0 0;
  background: rgba(212, 175, 55, .07); backdrop-filter: blur(2px); font-size: .9rem; }
.day-sum .ds-k { color: var(--text-dim); }
.day-sum .ds-v { font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: .3px;
  /* ค่าเปลี่ยน = สีเปลี่ยนแบบไล่ ไม่กระพริบ (กรรมการสูงวัยจับการเปลี่ยนแปลงได้ง่ายกว่า) */
  transition: color .35s ease; }
.day-sum .ds-n { color: var(--text-dim); font-size: .82rem; }
.day-sum.up   { background: rgba(46, 204, 113, .10); border-color: rgba(46, 204, 113, .35); }
.day-sum.down { background: rgba(231, 76, 60, .10);  border-color: rgba(231, 76, 60, .35); }
.day-sum.up .ds-v   { color: var(--up); }
.day-sum.down .ds-v { color: var(--down); }
.day-sum.flat .ds-v { color: var(--gold-light); }
@media (max-width: 640px) {
  .day-sum { padding: 7px 12px; font-size: .86rem; }
  .day-sum .ds-v { font-size: 1.12rem; }
}

.formula-pick { margin-bottom: 12px; }
.formula-pick > label { display: block; margin-top: 0; }
.formula-pick > select { width: 100%; max-width: 100%; min-height: 46px; }

/* ---- ช่อง Premium / Discount ต่อคำขอ (2.32.9) ----
   วางบนบรรทัดเดียวกับหัวข้อ "สูตรที่ใช้คำนวณราคาอ้างอิง" ตามที่พี่หนุ่มชี้ไว้
   จอแคบ: หัวข้อขึ้นบรรทัดเดียว ช่องกรอกไหลลงมาเป็นแถวของตัวเอง (ไม่บีบจนพิมพ์ไม่ได้)
   ⚠️ ห้ามใช้ .fld ที่นี่ — .fld จำกัด 320px ซึ่งกว้างเกินไปสำหรับตัวเลขไม่กี่หลัก
   และจะดันปุ่ม "คืนค่าเริ่มต้น" ตกบรรทัดบนจอ 13 นิ้ว */
/* 2.32.11 (โจทย์พี่หนุ่ม "เพิ่มช่องว่างระหว่างบรรทัด"): หัวข้อ+ช่องกรอก+ตัวเลือกสูตร
   เดิมอัดติดกันจนอ่านยาก — เว้นระยะให้แต่ละบรรทัดหายใจได้ */
.fp-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.fp-head > label { margin: 0; }
.fp-ov { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-ov .fp-item { display: inline-flex; align-items: center; gap: 6px; }
.fp-ov .fp-item > label { margin: 0; font-size: .86rem; color: var(--text-dim); white-space: nowrap; }
.fp-ov .fp-item > input { width: 104px; min-height: 38px; padding: 6px 8px; margin: 0;
  text-align: right; font-variant-numeric: tabular-nums; }
/* ช่องที่ผู้เสนอพิมพ์ทับค่ากลาง — ต้องเห็นได้ทันทีว่านี่ไม่ใช่ค่าที่แอดมินตั้งไว้ */
.fp-ov .fp-item > input.fp-changed { border-color: var(--gold); background: rgba(212,175,55,.12); font-weight: 700; }
.fp-ov > .btn { margin: 0; min-height: 38px; padding: 6px 12px; }
.fp-msg { margin: 10px 0 0; font-size: .82rem; color: var(--text-dim); line-height: 1.75; }
/* แต่ละบรรทัดเป็นคนละเรื่อง (ผลการคำนวณ / ขอบเขตของค่าที่กรอก) จึงต้องแยกให้ตาจับได้ */
.fp-msg > span { display: block; }
.fp-msg > span + span { margin-top: 5px; }
.fp-msg.fp-warn { color: var(--down); }
/* บรรทัดสมการใต้ตัวเลือกสูตร — เว้นจากข้อความสถานะด้านบนให้ชัด */
.formula-pick > .formula-expr { margin-top: 10px; }
@media (max-width: 640px) {
  .fp-head { align-items: stretch; }
  .fp-ov { width: 100%; }
  .fp-ov .fp-item { flex: 1 1 130px; }
  .fp-ov .fp-item > input { width: 100%; flex: 1; }
  /* ปุ่มคืนค่าไม่ต้องกินเต็มบรรทัด — เป็นทางออกสำรอง ไม่ใช่ปุ่มหลักของฟอร์ม
     ถ้าปล่อยเต็มความกว้างจะเด่นกว่าช่องที่กรรมการต้องกรอกจริง */
  .fp-ov > .btn { width: auto; margin-left: auto; font-size: .9rem; }
}

/* ---- แถว ★ ราคาไทย ----
   ⚠️ อย่าปล่อยให้ยืดเต็มการ์ด: ตัวเลขที่กรอกมีไม่กี่หลัก (0 / +50 / −100)
   แต่ปุ่ม − กับ ＋ จะถูกดันไปคนละมุมจอ กรรมการต้องกวาดสายตาข้ามการ์ดทั้งใบเพื่อกดทีละ 50
   จำกัดความกว้างให้สามชิ้นอยู่ติดกันเป็นกลุ่มเดียว (จอแคบยังยืดเต็มความกว้างตามปกติ) */
/* 2.32.11 (โจทย์พี่หนุ่ม "ย่อให้สั้น"): เดิมกว้าง 420px ช่องกรอกยืดถึง 308px
   ทั้งที่ตัวเลขที่กรอกจริงมีไม่กี่หลัก (0 / +50 / −100) ปุ่ม ＋ จึงลอยห่างจากช่องไปมาก
   ย่อเหลือ 320px = ปุ่ม −/＋ อยู่ติดช่องเป็นกลุ่มเดียว กดสลับไปมาได้โดยไม่ต้องกวาดสายตา
   ⚠️ ปุ่มสองข้างต้องสูงเท่ากันเป๊ะ (กติกา §3.12) — เดิม ＋ (อักษรเต็มความกว้าง) สูงกว่า − อยู่ 4px
   จึงบังคับ height + จัดกึ่งกลางด้วย flex แทนการพึ่ง padding */
.star-row { display: flex; gap: 8px; align-items: center; max-width: 320px; }
.star-row > .btn { flex: none; width: 48px; height: 46px; padding: 0; font-size: 1.2rem;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.star-row > input { flex: 1; min-width: 0; height: 46px; text-align: center; padding: 4px;
  border-color: var(--gold); font-weight: 800; font-size: 1.15rem; }

/* ==================== ปุ่มแสดง/ซ่อนรหัสผ่าน (มาตรฐานกลาง — 2.31.1) ====================
   ย้ายมาจาก style ภายใน admin.html/board.html ที่เขียนซ้ำกันคนละชุด
   เหตุผล: หน้า login ไม่มีปุ่มนี้เลยเพราะ CSS อยู่แค่ในสองหน้านั้น (พี่หนุ่มเจอเอง)
   อยู่ใน gold.css แล้ว = ทุกหน้าที่มีช่องรหัสผ่านใช้ได้ทันที ไม่ต้องก๊อป CSS ตามไปด้วย
   ไอคอนใช้ SVG เส้น ไม่ใช้อิโมจิ 👁/🙈 — อิโมจิถูกวาดคนละแบบทุกระบบปฏิบัติการ
   บางเครื่องสีเต็ม บางเครื่องขาวดำ ไม่เข้าชุดกับปุ่มอื่น · SVG คุมสี/ขนาดเองได้ */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; line-height: 0; }
.pw-eye:hover { color: var(--gold-light); }
.pw-eye svg { display: block; }

/* ==================== แถวตัวกรอง (.filter-row) — ประหยัดความสูงบนมือถือ ====================
   โจทย์พี่หนุ่ม: "เงื่อนไขกินพื้นที่เต็มหน้าจอ" — เดิมช่องกรองเรียงลงมาช่องละแถว
   5 ช่อง × ~72px = เกือบเต็มจอ กว่าจะเห็นตารางผลลัพธ์ต้องเลื่อนยาว
   แก้: จอแคบจัดเป็น 2 คอลัมน์ + ย่อป้าย/ความสูงช่อง (ยังกดถนัด ไม่ต่ำกว่า 40px) */
.filter-row .fld { flex: 1 1 180px; max-width: 250px; }
.filter-row .fld.date { flex: 0 1 165px; }
@media (max-width: 640px) {
  .filter-row { gap: 8px; }
  .filter-row .fld,
  .filter-row .fld.date { flex: 1 1 calc(50% - 4px); max-width: none; }
  .filter-row > label,
  .filter-row .fld > label { font-size: .76rem; margin: 0 0 2px; }
  .filter-row .fld > select,
  .filter-row .fld > input { min-height: 40px; height: 40px; padding: 6px 8px; font-size: .88rem; }
}