/* ===========================================================================
 * myshop.css — ทางเข้า "ร้านของฉัน" สำหรับเจ้าของร้าน (ShopOwnerSelfServe v1.1)
 * ---------------------------------------------------------------------------
 * ไฟล์แยกของหน้านี้เท่านั้น · **ห้ามเพิ่มของใหม่ลง survey.css** (เครื่องมือทีมงานใช้อยู่จริง)
 * โทเคนสีชุดเดียวกับคอนโซล (style.css) เพื่อให้หน้าตาเป็นตระกูลเดียวกัน
 *
 * กลุ่มผู้ใช้ = เจ้าของร้านอายุ 50+ บนมือถือ ⇒ เป้ากดใหญ่ (≥ 44px) · ตัวอักษร 15px ขึ้นไป ·
 * ช่องกรอก font-size 16px ขึ้นไปเสมอ (ต่ำกว่านี้ iOS Safari จะซูมหน้าเองตอนโฟกัส)
 * =========================================================================== */
:root {
  --ms-bg: #e9e7e0; --ms-section: #f4f3ee; --ms-surface: #fff;
  --ms-border: rgba(0, 0, 0, .10); --ms-border-strong: rgba(0, 0, 0, .18);
  --ms-text: #201f1c; --ms-muted: #6c6a62; --ms-faint: #9b9890;
  --ms-info-bg: #E6F1FB; --ms-info: #185FA5;
  --ms-gold: #BA7517; --ms-gold-bg: #FAEEDA; --ms-gold-text: #854F0B; --ms-gold-bd: #EF9F27;
  --ms-ok: #2e7d32; --ms-ok-bg: #E8F5E9;
  --ms-danger: #A32D2D; --ms-danger-bg: #FBECEC;
  --ms-primary: #185FA5; --ms-primary-d: #134e87;
  --ms-radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ms-body {
  font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--ms-bg); color: var(--ms-text);
  font-size: 15px; line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
/* จอใหญ่: จำกัดความกว้างให้อ่านง่าย (หน้านี้ออกแบบมาเพื่อมือถือ) */
.ms-app { max-width: 460px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  background: var(--ms-bg); display: flex; flex-direction: column; }
.ms-screen { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ms-screen.is-on { display: flex; }
.ms-body-pad { flex: 1 1 auto; padding: 16px 14px calc(26px + env(safe-area-inset-bottom)); }

/* ── แถบหัว ──────────────────────────────────────────────────────────────── */
.ms-topbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--ms-surface); border-bottom: .5px solid var(--ms-border);
  position: sticky; top: 0; z-index: 20; flex: 0 0 auto;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.ms-topbar .t { font-weight: 600; font-size: 16px; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.ms-topbar .s { font-size: 12px; color: var(--ms-muted); font-weight: 400; display: block; }
.ms-back {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  border: .5px solid var(--ms-border-strong); background: var(--ms-surface);
  font-size: 19px; line-height: 1; cursor: pointer; color: var(--ms-text);
}
.ms-textbtn {
  flex: 0 0 auto; border: .5px solid var(--ms-border-strong); background: var(--ms-surface);
  border-radius: 12px; min-height: 40px; padding: 0 12px; font-family: inherit;
  font-size: 13.5px; color: var(--ms-text); cursor: pointer;
}
.ms-steps { display: flex; gap: 6px; padding: 0 14px 12px; background: var(--ms-surface); flex: 0 0 auto; }
.ms-steps > i { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--ms-section); }
.ms-steps > i.on { background: var(--ms-primary); }

/* ── บล็อกพื้นฐาน ───────────────────────────────────────────────────────── */
.ms-card { background: var(--ms-surface); border-radius: 16px; padding: 16px;
  margin-bottom: 12px; border: .5px solid var(--ms-border); }
.ms-card.soft { background: var(--ms-section); }
.ms-app h1 { font-size: 21px; margin: 0 0 6px; line-height: 1.4; }
.ms-app h2 { font-size: 17px; margin: 0 0 8px; }
.ms-app h3 { font-size: 15px; margin: 0 0 8px; font-weight: 600; }
.ms-app p { margin: 0 0 10px; }
.ms-sub { color: var(--ms-muted); font-size: 14px; }
.ms-hint { font-size: 12.5px; color: var(--ms-faint); line-height: 1.55; margin-top: 5px; }
.ms-center { text-align: center; }
.ms-err { color: var(--ms-danger); font-size: 13.5px; margin-top: 8px; }

.ms-btn {
  width: 100%; min-height: 52px; border-radius: 999px; border: 0;
  background: var(--ms-primary); color: #fff; font-family: inherit; font-size: 16px;
  font-weight: 600; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 9px; padding: 0 18px; line-height: 1.3; text-decoration: none;
}
.ms-btn:active { background: var(--ms-primary-d); }
.ms-btn.ghost { background: var(--ms-surface); color: var(--ms-text); border: 1px solid var(--ms-border-strong); }
.ms-btn.gold { background: var(--ms-gold); color: #fff; }
.ms-btn.sm { min-height: 44px; font-size: 14.5px; }
.ms-btn:disabled { opacity: .4; cursor: not-allowed; }
.ms-btn + .ms-btn { margin-top: 10px; }
/* ปุ่มทักแชทเพจ — สีน้ำเงินเฟซบุ๊กให้รู้ทันทีว่ากดแล้วไปไหน */
.ms-msgr { background: #1877F2; color: #fff; text-decoration: none; }
.ms-msgr:active { background: #1260c4; }
.ms-msgr .mi {
  width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%; background: #fff; color: #1877F2;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
  font-family: Georgia, serif; line-height: 1;
}

.ms-field { margin-bottom: 14px; }
.ms-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ms-field input, .ms-field textarea, .ms-field select {
  width: 100%; border: 1px solid var(--ms-border-strong); border-radius: 12px;
  background: var(--ms-surface); padding: 12px; min-height: 50px;
  font-family: inherit; font-size: 16px; color: var(--ms-text);
}
.ms-field textarea { min-height: 110px; line-height: 1.6; }
.ms-field input:disabled, .ms-field textarea:disabled { background: var(--ms-section); color: var(--ms-faint); }

.ms-kv { display: flex; gap: 9px; align-items: flex-start; font-size: 14px;
  color: var(--ms-muted); margin-bottom: 6px; line-height: 1.55; }
.ms-kv .k { flex: 0 0 auto; width: 20px; text-align: center; }
.ms-kv b { color: var(--ms-text); }

.ms-note-info {
  background: var(--ms-info-bg); border: 1px solid rgba(24, 95, 165, .25); color: #13456f;
  border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.6; margin-bottom: 14px;
}
.ms-note-ok { background: var(--ms-ok-bg); border: 1px solid rgba(46, 125, 50, .3); color: #1f5c23;
  border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.ms-note-warn {
  background: var(--ms-gold-bg); border: 1px solid var(--ms-gold-bd); color: var(--ms-gold-text);
  border-radius: 12px; padding: 13px 14px; font-size: 13.5px; line-height: 1.7; margin-bottom: 12px;
}
.ms-note-err { background: var(--ms-danger-bg); border: 1px solid rgba(163, 45, 45, .3);
  color: var(--ms-danger); border-radius: 12px; padding: 13px 14px; font-size: 13.5px;
  line-height: 1.7; margin-bottom: 12px; }

/* ── หน้าแรก ─────────────────────────────────────────────────────────────── */
.ms-hero { display: block; width: calc(100% + 28px); margin: -16px -14px 0; height: auto; }
.ms-benefit { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ms-benefit .ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  background: var(--ms-gold-bg); display: flex; align-items: center; justify-content: center; font-size: 21px; }
.ms-benefit b { display: block; font-size: 15px; margin-bottom: 1px; }
.ms-benefit span { font-size: 13.5px; color: var(--ms-muted); line-height: 1.5; }
.ms-punch {
  background: var(--ms-gold-text); color: #fff; border-radius: 14px; padding: 16px 16px 17px;
  font-size: 16px; line-height: 1.75; text-align: center; border-left: 5px solid var(--ms-gold-bd);
}
.ms-punch b { font-size: 19px; font-weight: 700; line-height: 1.6; display: inline-block; margin-top: 5px; }

/* ── การ์ดร้าน / รายการค้นหา ─────────────────────────────────────────────── */
.ms-shop {
  display: flex; gap: 11px; align-items: center; background: var(--ms-surface);
  border: 1px solid var(--ms-border); border-radius: 14px; padding: 12px; margin-bottom: 10px;
  cursor: pointer; text-align: left; width: 100%; font-family: inherit; font-size: 15px; color: var(--ms-text);
}
.ms-shop:active { border-color: var(--ms-primary); }
.ms-th {
  width: 54px; height: 54px; flex: 0 0 auto; border-radius: 11px; background: var(--ms-section);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  overflow: hidden; background-size: cover; background-position: center;
}
.ms-nm { font-weight: 600; line-height: 1.35; }
.ms-ad { font-size: 12.5px; color: var(--ms-muted); margin-top: 2px; line-height: 1.45; }
.ms-go { flex: 0 0 auto; color: var(--ms-faint); font-size: 19px; }
.ms-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 600; background: var(--ms-ok-bg); color: var(--ms-ok); }
.ms-badge.gold { background: var(--ms-gold-bg); color: var(--ms-gold-text); }
.ms-badge.info { background: var(--ms-info-bg); color: var(--ms-info); }
.ms-badge.err { background: var(--ms-danger-bg); color: var(--ms-danger); }
.ms-pill { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--ms-gold-bg); color: var(--ms-gold-text); }
.ms-pill.taken { background: var(--ms-danger-bg); color: var(--ms-danger); }

/* ── แถบความสมบูรณ์ + เช็กลิสต์ ──────────────────────────────────────────── */
.ms-meter { background: var(--ms-surface); border: 1px solid var(--ms-border);
  border-radius: 14px; padding: 13px 14px; margin-bottom: 12px; }
.ms-meter .row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.ms-meter .big { font-size: 19px; font-weight: 700; }
.ms-meter .lb { font-size: 13px; color: var(--ms-muted); flex: 1 1 auto; }
.ms-bar { height: 9px; border-radius: 999px; background: var(--ms-section); overflow: hidden; }
.ms-bar > i { display: block; height: 100%; background: var(--ms-gold); border-radius: 999px; transition: width .4s; }
.ms-todo { display: flex; align-items: center; gap: 10px; padding: 13px 0;
  border-top: .5px solid var(--ms-border); cursor: pointer; }
.ms-todo:first-child { border-top: 0; }
.ms-todo .ic { width: 30px; flex: 0 0 auto; font-size: 19px; text-align: center; }
.ms-todo .tx { flex: 1 1 auto; min-width: 0; }
.ms-todo .tx b { display: block; font-size: 14.5px; font-weight: 600; }
.ms-todo .tx span { font-size: 12.5px; color: var(--ms-muted); }
.ms-todo.done .tx b { color: var(--ms-muted); font-weight: 500; }
.ms-todo.done .go { opacity: .45; }

/* ── ว่างเปล่า ───────────────────────────────────────────────────────────── */
.ms-empty { text-align: center; padding: 42px 6px 0; }
.ms-empty .em { font-size: 58px; line-height: 1; margin-bottom: 10px; }
.ms-empty .ms-sub { margin: 0 auto 26px; max-width: 300px; }
.ms-ok-ring { width: 84px; height: 84px; border-radius: 50%; background: var(--ms-ok-bg);
  color: var(--ms-ok); font-size: 42px; display: flex; align-items: center;
  justify-content: center; margin: 8px auto 14px; }

/* ── การ์ดเลือกประเภท / ชิปหมวด ──────────────────────────────────────────── */
.ms-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ms-tcard {
  border: 1.5px solid var(--ms-border-strong); background: var(--ms-surface); border-radius: 14px;
  padding: 13px 8px; text-align: center; font-family: inherit; font-size: 14px; color: var(--ms-text);
  cursor: pointer; line-height: 1.35; min-height: 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.ms-tcard .em { font-size: 27px; line-height: 1; }
.ms-tcard.on { border-color: var(--ms-primary); background: var(--ms-info-bg); color: var(--ms-info); font-weight: 600; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-chip {
  border: 1.5px solid var(--ms-border-strong); background: var(--ms-surface); border-radius: 999px;
  padding: 10px 14px; font-family: inherit; font-size: 14.5px; color: var(--ms-text);
  cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; line-height: 1.2;
}
.ms-chip.on { border-color: var(--ms-primary); background: var(--ms-info-bg); color: var(--ms-info); font-weight: 600; }
.ms-chip.sm { min-height: 38px; padding: 7px 12px; font-size: 13px; }
.ms-chip.static { cursor: default; }
/* ตัวเลือกที่ปิดรับแล้วแต่ร้านนี้ถืออยู่ — ต้องเห็นและส่งกลับไปด้วย ห้ามทิ้งเงียบ */
.ms-chip.legacy { border-style: dashed; color: var(--ms-muted); }

/* ── แผนที่ ──────────────────────────────────────────────────────────────── */
.ms-mapbox { position: relative; height: 240px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--ms-border-strong); }
.ms-map { position: absolute; inset: 0; }
.ms-mappin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  font-size: 34px; pointer-events: none; z-index: 500; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.ms-readout { margin-top: 11px; padding: 9px 12px; border-radius: 10px;
  background: var(--ms-section); font-size: 13.5px; color: var(--ms-muted); line-height: 1.6; }

/* ── เวลาเปิด-ปิด ───────────────────────────────────────────────────────── */
.ms-days { display: flex; gap: 5px; }
.ms-day {
  flex: 1 1 0; min-width: 0; min-height: 54px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--ms-border-strong); background: var(--ms-surface);
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ms-faint);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0;
}
.ms-day small { font-size: 10px; font-weight: 500; opacity: .85; }
.ms-day.on { border-color: var(--ms-primary); background: var(--ms-info-bg); color: var(--ms-info); }
.ms-day.off { background: #f0eee9; text-decoration: line-through; }
.ms-trow { display: flex; align-items: flex-end; gap: 10px; }
.ms-tcell { flex: 1 1 0; min-width: 0; }
.ms-tcell label { display: block; font-size: 13px; font-weight: 500; color: var(--ms-muted); margin-bottom: 5px; }
.ms-tcell input {
  width: 100%; border: 1px solid var(--ms-border-strong); border-radius: 12px;
  background: var(--ms-surface); padding: 11px; min-height: 50px;
  font-family: inherit; font-size: 18px; color: var(--ms-text); text-align: center;
}
.ms-dash { padding-bottom: 14px; color: var(--ms-faint); font-size: 17px; }
.ms-preview { font-size: 14.5px; line-height: 1.85; }
.ms-preview .pv { display: flex; gap: 8px; }
.ms-preview .pv b { flex: 0 0 80px; font-weight: 600; }
.ms-preview .nt { margin-top: 9px; color: var(--ms-muted); font-size: 13.5px; line-height: 1.6; }

/* ── เรื่องเล่า: หัวข้อ + อัดเสียง ───────────────────────────────────────── */
.ms-qrow { display: flex; align-items: center; gap: 11px; padding: 12px 0; cursor: pointer;
  border-top: .5px solid var(--ms-border); }
.ms-qrow:first-child { border-top: 0; }
.ms-qn { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; background: var(--ms-section);
  color: var(--ms-muted); font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; }
.ms-qt { flex: 1 1 auto; font-size: 15px; line-height: 1.4; }
.ms-qrow.on .ms-qn { background: var(--ms-ok-bg); color: var(--ms-ok); }
.ms-qrow.on .ms-qt { color: var(--ms-muted); text-decoration: line-through; }
.ms-split { display: flex; gap: 9px; margin-top: 14px; }
.ms-split .ms-btn { flex: 1 1 0; min-width: 0; margin-top: 0; }
.ms-flash { animation: ms-flash .9s ease-out; }
@keyframes ms-flash { 0% { box-shadow: 0 0 0 3px var(--ms-gold-bd); } 100% { box-shadow: 0 0 0 3px rgba(239,159,39,0); } }
.ms-mic {
  width: 104px; height: 104px; border-radius: 50%; background: var(--ms-danger); color: #fff;
  border: 0; font-size: 40px; margin: 6px auto 12px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; box-shadow: 0 0 0 9px rgba(163, 45, 45, .14);
}
.ms-mic.rec { animation: ms-pulse 1.1s ease-in-out infinite; }
@keyframes ms-pulse {
  0%, 100% { box-shadow: 0 0 0 9px rgba(163, 45, 45, .14); }
  50% { box-shadow: 0 0 0 17px rgba(163, 45, 45, .08); }
}
.ms-recbar { height: 7px; border-radius: 999px; background: var(--ms-section); overflow: hidden;
  margin: 0 auto 9px; max-width: 210px; }
.ms-recbar > i { display: block; height: 100%; background: var(--ms-danger); border-radius: 999px; transition: width .25s linear; }
.ms-clip { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: .5px solid var(--ms-border); }
.ms-clip:first-child { border-top: 0; padding-top: 2px; }
.ms-clip audio { display: none; }
.ms-pl { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ms-info-bg); color: var(--ms-info); font-size: 15px; padding: 0; line-height: 1; }
.ms-pl.on { background: var(--ms-info); color: #fff; }
.ms-ci { flex: 1 1 auto; min-width: 0; }
.ms-ci b { display: block; font-size: 14.5px; }
.ms-ci span { font-size: 12.5px; color: var(--ms-muted); }
.ms-cx { flex: 0 0 auto; border: 0; background: none; color: var(--ms-danger);
  font-family: inherit; font-size: 13px; cursor: pointer; padding: 8px; }

/* ── รูป ─────────────────────────────────────────────────────────────────── */
.ms-shot {
  height: 150px; border-radius: 14px; border: 2px dashed var(--ms-border-strong);
  background: var(--ms-section); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; color: var(--ms-muted); font-size: 14px; cursor: pointer;
}
.ms-heroview { height: 176px; border-radius: 14px; margin-bottom: 7px; border: 1px solid var(--ms-border);
  background: var(--ms-section) center/cover no-repeat; }
.ms-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ms-pcell { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid transparent; }
.ms-pcell.on { border-color: var(--ms-gold); }
.ms-pcell .img { height: 84px; cursor: pointer; background: var(--ms-section) center/cover no-repeat; }
.ms-pcell .star { position: absolute; left: 5px; top: 5px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; }
.ms-pcell.on .star { background: var(--ms-gold); }
.ms-pcell .del { position: absolute; right: 5px; top: 5px; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .45); color: #fff; font-size: 14px; cursor: pointer; line-height: 1; padding: 0; }
.ms-pcell .tag { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 10.5px; text-align: center; padding: 3px 2px; }
.ms-photo-big { height: 170px; border-radius: 14px 14px 0 0; background: var(--ms-section) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--ms-faint); }

/* ── เมนู ────────────────────────────────────────────────────────────────── */
.ms-mrow { border-top: .5px solid var(--ms-border); padding: 13px 0; }
.ms-mrow:first-child { border-top: 0; padding-top: 4px; }
.ms-mtop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ms-mtop input.nm {
  flex: 1 1 150px; min-width: 140px; border: 1px solid var(--ms-border-strong); border-radius: 11px;
  padding: 11px; min-height: 46px; font-family: inherit; font-size: 16px;
  color: var(--ms-text); background: var(--ms-surface);
}
.ms-mside { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.ms-mtop input.pr {
  flex: 0 0 92px; width: 92px; border: 1px solid var(--ms-border-strong); border-radius: 11px;
  padding: 11px 8px; min-height: 46px; font-family: inherit; font-size: 16px; text-align: center;
  color: var(--ms-text); background: var(--ms-surface);
}
.ms-mtop input.pr:disabled { background: var(--ms-section); color: var(--ms-faint); }
.ms-rm { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; border: 0; background: none;
  color: var(--ms-danger); font-size: 19px; cursor: pointer; padding: 0; line-height: 1; }
.ms-tick { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px;
  font-size: 13px; color: var(--ms-muted); cursor: pointer; }
.ms-tick input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; }
.ms-tick.big { font-size: 14.5px; color: var(--ms-text); }
.ms-mprev { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: .5px solid var(--ms-border); font-size: 14.5px; }
.ms-mprev:first-child { border-top: 0; }
.ms-mprev .pz { flex: 0 0 auto; color: var(--ms-muted); font-weight: 600; }
.ms-mprev .pz.ask { font-weight: 400; font-size: 13px; }
.ms-mprev small { display: block; font-size: 12.5px; color: var(--ms-muted); line-height: 1.5; margin-top: 1px; }
.ms-mini { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.ms-miniadd { border: 1px dashed var(--ms-border-strong); background: none; border-radius: 9px;
  padding: 7px 11px; font-family: inherit; font-size: 12.5px; color: var(--ms-muted); cursor: pointer; }

/* ── โหลด / ซ้อน ────────────────────────────────────────────────────────── */
.ms-busy { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 90;
  display: flex; align-items: center; justify-content: center; }
.ms-busy .box { background: #fff; border-radius: 14px; padding: 18px 24px; font-size: 15px;
  display: flex; align-items: center; gap: 12px; }
.ms-spin { width: 20px; height: 20px; border: 3px solid var(--ms-border); border-top-color: var(--ms-primary);
  border-radius: 50%; animation: ms-spin 1s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms-skel { height: 76px; border-radius: 14px; background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%);
  background-size: 400% 100%; animation: ms-skel 1.3s ease infinite; margin-bottom: 10px; }
@keyframes ms-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }