/* =========================================================
   mobile.css : หน้าตาแบบมือถือ (ใช้ร่วมทุกหน้าฝั่งกำลังพล)
   ---------------------------------------------------------
   ทุกกฎในไฟล์นี้ทำงานเฉพาะเมื่อ <html> มีคลาส is-m (ใส่โดย mobile.js)
   → iPad / คอม ไม่ได้รับผลใด ๆ
   .m-only = แสดงเฉพาะมือถือ · .d-only = ซ่อนบนมือถือ
   ========================================================= */
html:not(.is-m) .m-only{display:none!important}
.is-m .d-only{display:none!important}
html.msheet-lock,html.msheet-lock body{overflow:hidden}

/* ---------- แถบด้านบน ---------- */
.is-m .site-nav>.container{padding-top:.4rem!important;padding-bottom:.4rem!important;gap:.5rem!important;flex-wrap:nowrap!important}
.is-m .site-nav .brand-logo{height:34px}
.is-m .site-nav .brand-title{font-size:.9rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-m .site-nav .brand-sub{display:none!important}
.is-m .site-nav a:has(>.brand-logo){min-width:0;flex:1 1 auto}
.is-m .site-nav a:has(>.brand-logo)>div{min-width:0}
.m-menu-btn{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:12px;background:var(--olive-100);color:var(--olive-900);display:grid;place-items:center;font-size:1.4rem;padding:0}
.m-menu-btn:active{background:var(--olive-900);color:#fff}
.is-m .m-icon-btn{flex:0 0 40px;width:40px;height:40px;padding:0!important;display:grid!important;place-items:center;border-radius:12px!important}

/* ---------- เนื้อหา ---------- */
.is-m main.container{padding-top:.85rem!important;padding-bottom:1rem!important;padding-left:.85rem;padding-right:.85rem}
.is-m input.form-control,.is-m select.form-select,.is-m textarea.form-control{font-size:16px!important}   /* กัน iPhone ซูมเมื่อแตะช่องกรอก */

/* หัวข้อหน้า + แท็บ (หน้าค้นหา) */
.is-m .page-title{margin:0 0 .75rem!important;gap:.6rem!important}
.is-m .page-title .eyebrow{display:none}
.is-m .page-title h1{font-size:1.06rem!important;line-height:1.45}
.is-m .page-title h1::after{width:36px!important;height:3px!important;margin-top:.35rem!important}
.is-m .tabs{width:100%;min-width:0!important;gap:.4rem!important}
.is-m .tab-tile{padding:.4rem .55rem!important;font-size:.84rem!important;gap:.45rem!important;border-radius:12px;line-height:1.3}
.is-m .tab-tile .ic{flex-basis:28px!important;height:28px!important;border-radius:8px}
.is-m .tab-tile .ic .px-icon{width:20px;height:20px}
.is-m .tab-tile:hover{transform:none;box-shadow:none}

/* แผงข้อมูล */
.is-m .bp{border-radius:14px;margin-bottom:.85rem}
.is-m .bp-head{padding:.6rem .85rem!important;gap:.6rem!important}
.is-m .bp-head>div{flex:1;min-width:0}
.is-m .bp-ic{flex-basis:34px!important;height:34px!important;border-radius:10px}
.is-m .bp-ic .px-icon{width:24px;height:24px}
.is-m .bp-title{font-size:.94rem!important}
.is-m .bp-sub{display:none}
.is-m .bp-count{padding:.25rem .55rem!important;font-size:.72rem!important;flex-direction:column;align-items:center;gap:0!important}
.is-m .bp-count b{font-size:1.05rem!important}
.is-m .bp-body{padding:.7rem .8rem!important}
.is-m .bp-note{padding:.55rem .85rem;font-size:.74rem;line-height:1.5}
.is-m .empty{padding:1.5rem 1rem}
.is-m .empty i{font-size:1.6rem}

/* กล่องค้นหา: เหลือแค่ช่องพิมพ์ + ปุ่ม */
.is-m .search-box .bp-head{display:none}
.is-m .search-box .bp-body>.small.text-muted-x{display:none}
.is-m .search-box .form-control{padding:.6rem .75rem!important}
.is-m .search-box .input-group-text{padding:0 .7rem!important}
.is-m .search-box .btn{padding-left:.9rem!important;padding-right:.9rem!important}
.is-m #resultInfo:empty{display:none}

/* ---------- ส่วนท้ายแบบย่อ ---------- */
.is-m .pf-footer{margin-top:1.25rem!important}
.is-m .pf-footer>.container{padding:.9rem .85rem 1rem!important}
.is-m .pf-brand{gap:.6rem;padding-bottom:.6rem}
.is-m .pf-logo{width:32px;height:32px}
.is-m .pf-org{display:none}
.is-m .pf-org-sub{font-size:.9rem;color:#fff;margin:0;font-weight:600}
.is-m .pf-footer .row{--bs-gutter-y:.4rem;margin-top:.5rem!important}
.is-m .pf-addr{padding:.45rem .6rem;font-size:.76rem;gap:.55rem;border-radius:10px;line-height:1.45}
.is-m .pf-ic{flex-basis:26px;height:26px;border-radius:8px;font-size:.8rem}
.is-m .pf-k{font-size:.68rem;margin:0}
.is-m .pf-copy{margin-top:.6rem!important;font-size:.7rem}

/* ---------- Bottom sheet ---------- */
.msheet{position:fixed;inset:0;z-index:1080;visibility:hidden;pointer-events:none}
.msheet.show{visibility:visible;pointer-events:auto}
.msheet-bg{position:absolute;inset:0;background:rgba(17,21,14,.5);opacity:0;transition:opacity .25s}
.msheet.show .msheet-bg{opacity:1}
.msheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(17,21,14,.25);transform:translateY(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom)}
.msheet.show .msheet-panel{transform:none}
.msheet-grip{flex:0 0 auto;display:grid;place-items:center;padding:.5rem 0 .15rem;touch-action:none}
.msheet-grip span{width:42px;height:5px;border-radius:99px;background:#d5dbcd}
.msheet-head{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;padding:.15rem .75rem .6rem 1rem;border-bottom:1px solid var(--border);touch-action:none}
.msheet-t{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:1rem;line-height:1.35;color:var(--olive-900)}
.msheet-ic{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--olive-50);border:1px solid var(--border);font-size:1.15rem}
.msheet-acts{display:flex;gap:.35rem;flex:0 0 auto}
.msheet-x{flex:0 0 38px;width:38px;height:38px;border:0;border-radius:50%;background:var(--olive-100);color:var(--olive-900);display:grid;place-items:center;font-size:1rem;padding:0}
.msheet-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.msheet-tel{display:inline-flex;align-items:center;gap:.35rem;height:38px;padding:0 .8rem;border-radius:99px;background:var(--gold);color:var(--olive-950);font-weight:600;font-size:.84rem;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.msheet-tel:active{background:#c2920f;color:var(--olive-950)}
@media (orientation:landscape){.msheet-panel{left:50%;right:auto;width:min(720px,100%);transform:translate(-50%,105%);max-height:94vh;max-height:94dvh}.msheet.show .msheet-panel{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.msheet-panel,.msheet-bg{transition:none}}

/* ---------- เมนู ☰ ---------- */
.m-menu-panel{padding:.4rem .6rem .8rem}
.m-mi{display:flex;align-items:center;gap:.75rem;width:100%;padding:.6rem .55rem;border:0;border-radius:12px;background:none;color:var(--text);text-decoration:none;text-align:left;font-weight:500;font-size:.95rem;line-height:1.35}
.m-mi:active{background:var(--olive-100)}
.m-mi.on{background:var(--gold-soft)}
.m-mi.danger{color:var(--red)}
.m-mi-ic{flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--olive-50);border:1px solid var(--border);color:var(--olive-800);font-size:1.15rem}
.m-mi.danger .m-mi-ic{background:#fdf0f0;border-color:#f3d4d4;color:var(--red)}
.m-mi-duo{display:flex;gap:1px}
.m-mi-t{flex:1;min-width:0}
.m-mi-t small{display:block;font-weight:400;font-size:.76rem;color:var(--muted)}
.m-mi-go{color:#b9c0b0;font-size:.85rem}
.m-mi-now{font-size:.7rem;font-weight:600;color:#6b4e00;background:#fff;border:1px solid #efd9a0;border-radius:99px;padding:.05rem .5rem}
.m-mi-sep{height:1px;background:var(--border);margin:.35rem .5rem}
.m-mi .px-icon{image-rendering:pixelated;display:block}

/* ---------- หน้าค้นหาเหรียญ: ตัวกรองเหรียญเลื่อนซ้าย-ขวา ---------- */
.is-m .mfilter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:.4rem;margin:.6rem -.8rem 0;padding:0 .8rem .15rem}
.is-m .mfilter::-webkit-scrollbar{display:none}
.is-m .mfilter button{flex:0 0 auto;font-size:.82rem;padding:.25rem .7rem .25rem .35rem}
.is-m #bookFilter{margin:0 -.8rem .1rem}
/* หน้า พ.ส.ร.: ปุ่มกลับ/พิมพ์ของแผ่นสรุป */
.is-m .sum-actions{gap:.5rem}
.is-m .m-icon-btn>span{display:none!important}
/* มือถือแนวนอน: หัวข้อกับแท็บอยู่แถวเดียวกัน เหลือที่ให้ผลการค้นหามากขึ้น */
@media (orientation:landscape){
  .is-m .page-title{flex-wrap:nowrap!important;align-items:center!important}
  .is-m .page-title h1::after{display:none}
  .is-m .page-title .tabs{width:auto;flex:0 0 auto;min-width:min(52%,400px)!important}
}