/* SIRI47  ปรับสำหรับมือถือ  โหลดหลัง site.css auth.css (และ admin.css ในหลังบ้าน) */

/* ---------- ตาราง: จอแคบแปลงแต่ละแถวเป็นการ์ด ----------
   ป้ายคอลัมน์มาจาก data-label ซึ่ง auth.js เติมจากหัวตาราง  ตารางที่ไม่ต้องการให้ใส่ data-no-rsp */
@media (max-width:640px){
  .tbl-rsp{min-width:0}
  .tbl-wrap:has(.tbl-rsp){overflow:visible;border:0;border-radius:0}
  .tbl-rsp thead{display:none}
  .tbl-rsp,.tbl-rsp tbody,.tbl-rsp tr{display:block;width:100%}
  .tbl-rsp tr{border:1px solid var(--line);border-radius:12px;padding:4px 14px;margin-bottom:10px;background:var(--surface)}
  .tbl-rsp td,.tbl-rsp tbody th{display:flex;justify-content:space-between;align-items:baseline;gap:14px;width:100%;padding:9px 0;border-bottom:1px solid var(--line);text-align:right!important;white-space:normal}
  .tbl-rsp tr>:last-child{border-bottom:0!important}
  .tbl-rsp td::before,.tbl-rsp tbody th::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;font:500 13px var(--sans);color:var(--muted);white-space:pre-line}
  .tbl-rsp td[data-label=""]::before{display:none}
  .tbl-rsp td[data-label=""]{justify-content:flex-start;text-align:left!important}
  .tbl-rsp tr>:first-child{font-weight:600}
  .tbl-rsp .act{justify-content:flex-end}
  .card:has(> .tbl-wrap .tbl-rsp){background:none;border:0;padding:0!important}
}

/* ---------- หน้าสมาชิก: เมนูเป็นลิ้นชัก + แถบเมนูล่าง ---------- */
.mtab{display:none}
@media (max-width:980px){
  .mem .mw-tg{display:none}
  .mem .mw-nav{display:block;position:fixed;left:0;top:0;bottom:0;width:min(86vw,320px);max-height:none;border-radius:0 18px 18px 0;z-index:60;transform:translateX(-105%);transition:transform .22s ease}
  .mem .mw-nav.on{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .mem main{padding-bottom:96px}
  .mem .au-ft{padding-bottom:76px}
  .mtab{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.06)}
  .mtab a,.mtab button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px;font:500 11.5px var(--sans);color:var(--muted);background:none;border:0;border-radius:10px;cursor:pointer}
  .mtab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mtab .on{color:var(--red)}
  .mtab .on svg{stroke-width:2.2}
}

/* ---------- หลังบ้าน: เมนูเป็นลิ้นชัก  แถบบนแถวเดียว ---------- */
@media (max-width:980px){
  .adm .ad-nav{display:block;position:fixed;left:0;top:0;bottom:0;width:min(86vw,300px);height:100vh;z-index:60;transform:translateX(-105%);transition:transform .22s ease}
  .adm .ad-nav.on{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
  .ad-top{flex-wrap:nowrap;gap:8px;padding:10px 12px}
  .ad-top .mw-tg{display:inline-flex;margin-right:auto}
  .ad-who{display:none}
  .ad-top .btn{min-height:36px;padding:0 12px;font-size:13px}
  .ad-c .pg-h{align-items:flex-start}
  .split[style]{grid-template-columns:1fr!important}
}

/* ---------- จอเล็ก ---------- */
@media (max-width:560px){
  .au-hd .hd-sp .btn{min-height:36px;padding:0 12px;font-size:13.5px}
  .ac-top{gap:14px}
  .dr dd{font-size:20px}
  .flt .ip,.flt select.ip{flex:1 1 100%;min-width:0;width:100%}
  .flt .btn{flex:1 1 auto}
  .stat{grid-template-columns:1fr 1fr;gap:10px}
  .stat a,.stat div{padding:12px 14px}
  .stat b{font-size:22px}
  .act{justify-content:stretch}
  .act form,.act .flt{width:100%}
  .act .btn{flex:1}
  .ad-c .tabs{width:100%}
  .ad-c .tabs .btn{flex:1}
  .slip{max-height:360px}
  .wh-cn{font-size:15px}
  .btn-row .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.mem .mw-nav,.adm .ad-nav{transition:none}}