/* =====================================================================
   Amulet Ping v2 — โครงแบบ YouTube  กริดแบบแคตตาล็อก
   มือถือมาก่อน  เต็มจอบนคอม  คอลัมน์ปรับตามความกว้างเอง
   ===================================================================== */

:root{
  --bg:#faf8f2; --paper:#fff; --line:#e7e2d4;
  --ink:#241f18; --ink2:#6b6353; --ink3:#978d78;
  --green:#2f5d3a; --green-d:#234730;
  --brass:#8a6a2f; --brass-bg:#f6efdd;
  --r:12px; --hd:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hd) + 54px)}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Sarabun",sans-serif;
  font-size:16.5px; line-height:1.75; padding-bottom:64px}
a{color:var(--green)}
img{max-width:100%; height:auto}
@media(min-width:860px){ body{padding-bottom:0} }

/* ------------------------------------------------------------ หัวเว็บ */
.hd{position:sticky; top:0; z-index:50; height:var(--hd);
    background:var(--green); display:flex; align-items:center; gap:10px;
    padding:0 12px; box-shadow:0 1px 4px rgba(0,0,0,.2)}
.hd-burger{display:block; background:none; border:0; color:#fff; font-size:24px;
           min-width:44px; min-height:44px; cursor:pointer}
/* คอมและแท็บเล็ตไม่ต้องมีปุ่มนี้  เมนูซ้ายค้างตลอด
   พื้นที่จอกว้างพออยู่แล้ว ย่อเมนูได้คืนแค่ 166px ซึ่งไม่พอเพิ่มคอลัมน์
   แถมทำให้คนกดโดยไม่ตั้งใจแล้วงงว่าเมนูหายไปไหน */
@media(min-width:860px){ .hd-burger{display:none} }
.logo{font-size:19px; font-weight:700; color:#fff; text-decoration:none; white-space:nowrap}
.logo span{color:#e8d9a8}
.hd-search{flex:1; display:flex; max-width:560px; margin:0 auto}
.hd-search input{flex:1; min-width:0; font:inherit; font-size:16px; min-height:40px;
  border:0; border-radius:99px 0 0 99px; padding:7px 16px; background:#fff}
.hd-search input:focus{outline:2px solid #e8d9a8}
.hd-search button{border:0; background:#234730; color:#fff; font-size:19px;
  min-width:52px; border-radius:0 99px 99px 0; cursor:pointer}
.staging{background:#8a6410; color:#fff; text-align:center; font-size:13px; padding:5px 12px}

/* ------------------------------------------------------------ ชิปกรอง */
.chipsbar{position:sticky; top:var(--hd); z-index:45;
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:9px 12px; background:var(--bg); border-bottom:1px solid var(--line);
  scrollbar-width:none}
.chipsbar::-webkit-scrollbar{display:none}
.chipx{flex:0 0 auto; font-size:14px; padding:7px 15px; min-height:38px;
  display:inline-flex; align-items:center; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--ink2);
  text-decoration:none; white-space:nowrap}
.chipx.on{background:var(--green); border-color:var(--green); color:#fff}
.chipx:hover{border-color:var(--green)}

/* ------------------------------------------------------------ โครงสองคอลัมน์ */
.shell{display:flex; align-items:flex-start}
.side{display:none}
@media(min-width:860px){
  /* ยึดใต้แถบหัวเว็บพอดี  ไม่มีค่าเผื่อ 57px อีก
     ค่านั้นเป็นของเก่าตอนแถบชิปยังกินความกว้างเต็มหน้า
     พอย้ายชิปเข้าไปในคอลัมน์เนื้อหาแล้ว มันกลายเป็นช่องว่างเปล่า
     และทำให้เมนูดีดขึ้นตอนเลื่อนหน้า */
  /* เมนูซ้ายตรึงค้างใต้แถบหัวเว็บ  เลื่อนหน้าลงไปเมนูก็ยังอยู่
     ต้องจำกัดความสูงไม่ให้เกินจอ ไม่งั้นรายการล่างจะถูกตัดหายและกดไม่ถึง
     จึงต้องเลื่อนในตัวเองได้  แต่ซ่อนแถบเลื่อนไว้ตามปกติ
     ให้โผล่มาแบบบางเฉียบเฉพาะตอนเอาเมาส์ชี้ในเมนูเท่านั้น
     จอที่สูงพอจะไม่เห็นแถบเลื่อนเลย เพราะเมนูไม่ล้น */
  .side{display:block; position:sticky; top:var(--hd);
    width:230px; flex:0 0 230px; align-self:flex-start;
    max-height:calc(100vh - var(--hd)); overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    padding:12px 8px 28px 12px}
  .side::-webkit-scrollbar{width:0}
  .side:hover{scrollbar-width:thin; scrollbar-color:#cfc9b6 transparent}
  .side:hover::-webkit-scrollbar{width:7px}
  .side:hover::-webkit-scrollbar-track{background:transparent}
  .side:hover::-webkit-scrollbar-thumb{background:#cfc9b6; border-radius:99px}
  body.side-open .side{display:block}
}
.s-link{display:flex; justify-content:space-between; align-items:center; gap:8px;
  color:var(--ink); text-decoration:none; font-size:14.5px;
  padding:9px 12px; border-radius:9px; min-height:40px}
.s-link:hover{background:#f0ecdf}
.s-n{font-size:12px; color:var(--ink3)}
.s-sec{font-size:12.5px; color:var(--ink3); padding:16px 12px 5px;
  text-transform:none; letter-spacing:.2px}

.main{flex:1; min-width:0; padding:16px 14px 60px}
@media(min-width:860px){ .main{padding:20px 22px 70px} }

/* ------------------------------------------------------------ การ์ดเด่นหน้าแรก */
.featured{display:grid; grid-template-columns:1fr; gap:0; text-decoration:none;
  color:inherit; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:18px}
.featured img{width:100%; aspect-ratio:16/10; object-fit:cover; background:#efeadd}
.featured-body{padding:14px 16px}
.featured-tag{display:inline-block; font-size:12px; background:var(--brass-bg);
  color:var(--brass); border-radius:99px; padding:2px 10px; margin-bottom:6px}
.featured-title{display:block; font-size:18px; font-weight:700; line-height:1.5}
.featured-meta{display:block; font-size:13.5px; color:var(--ink2); margin-top:4px}
@media(min-width:700px){
  .featured{grid-template-columns:380px 1fr}
  .featured img{aspect-ratio:1; height:100%}
  .featured-body{align-self:center; padding:20px 26px}
  .featured-title{font-size:21px}
}

/* ------------------------------------------------------------ กริดพระ ยืดหยุ่น
   มือถือ 2 คอลัมน์เสมอ  จอกว้างขึ้นคอลัมน์เพิ่มเองแบบ YouTube */
.pgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:700px){ .pgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px} }

.pcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:box-shadow .15s}
.pcard:hover{box-shadow:0 4px 16px rgba(36,31,24,.12)}
.pcard-im{position:relative; display:block}
.pcard-im img,.pcard-noimg{width:100%; aspect-ratio:1; object-fit:cover;
  background:#efeadd; display:block}
.im-b{position:absolute; inset:0; opacity:0; transition:opacity .25s}
@media(hover:hover){ .pcard.has-back:hover .im-b{opacity:1} }
.flip-hint{position:absolute; right:7px; bottom:7px; font-size:11px;
  background:rgba(36,31,24,.72); color:#fff; border-radius:99px; padding:2px 9px;
  opacity:0; transition:opacity .2s; pointer-events:none}
@media(hover:hover){ .pcard.has-back:hover .flip-hint{opacity:1} }
.pcard-body{padding:9px 11px 11px}
.pcard-title{display:block; font-size:14px; font-weight:600; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard-meta{display:block; font-size:12.5px; color:var(--ink2); margin-top:3px}

/* ------------------------------------------------------------ บทความ */
.agrid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:700px){ .agrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} }
.acard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; text-decoration:none; color:inherit}
.acard:hover{box-shadow:0 4px 14px rgba(36,31,24,.1)}
.acard-title{display:block; font-weight:600; margin-bottom:5px; line-height:1.55}
.acard-ex{display:block; font-size:14px; color:var(--ink2)}
.sec{font-size:19px; margin:30px 0 12px; font-weight:700}
.pagett{font-size:21px; margin:2px 0 16px; font-weight:700}
.pagett .count{font-size:14px; font-weight:400; color:var(--ink3); margin-left:6px}

/* ------------------------------------------------------------ หน้าพระ + แถบขวา */
.detail{display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:1050px){ .detail{grid-template-columns:minmax(0,1fr) 300px} }
.d-main h1{font-size:20px; line-height:1.55; margin:2px 0 10px}
@media(min-width:860px){ .d-main h1{font-size:25px} }

.factline{display:flex; flex-direction:column; gap:3px; margin:0 0 14px;
  font-size:14.5px; color:var(--ink2)}
.factline .f b{color:var(--brass); font-weight:600}
@media(min-width:700px){
  .factline{flex-direction:row; flex-wrap:wrap; gap:4px 18px}
}

.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0}
@media(min-width:700px){ .gallery{grid-template-columns:repeat(3,1fr)} }
.gallery img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px;
  border:1px solid var(--line); background:#efeadd; display:block}

details.macro{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  margin:12px 0; overflow:hidden}
details.macro summary{padding:13px 16px; font-weight:600; cursor:pointer;
  list-style:none; min-height:48px; display:flex; align-items:center}
details.macro summary::before{content:'▸'; margin-right:9px; color:var(--brass); transition:transform .15s}
details.macro[open] summary::before{transform:rotate(90deg)}
details.macro .gallery{padding:0 14px 14px; margin:0}

.video{position:relative; aspect-ratio:16/9; margin:14px 0}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:var(--r)}

.sharebar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0}
.sh{font-size:13.5px; text-decoration:none; border-radius:99px; padding:7px 15px;
  min-height:38px; display:inline-flex; align-items:center; color:#fff; border:0;
  cursor:pointer; font-family:inherit}
.sh.fb{background:#1877f2}
.sh.ln{background:#06c755}
.sh.tw{background:#111}
.sh.cp{background:#fff; color:var(--ink); border:1px solid var(--line-2,#cfcabb)}

.content{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:17px 17px; margin:14px 0; overflow-wrap:break-word}
@media(min-width:860px){ .content{padding:24px 28px} }
.content img{border-radius:8px}
.content span[style]{color:inherit !important; font-size:inherit !important}

.tagrow{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.tag{background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; min-height:38px; display:inline-flex; align-items:center;
  font-size:13.5px; text-decoration:none; color:var(--ink2)}
.tag:hover{border-color:var(--green); color:var(--green)}

/* แถบขวา */
.d-rail{min-width:0}
.rail-sec{font-size:14px; font-weight:700; margin:16px 0 8px; color:var(--ink2)}
.rcard{display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:start;
  text-decoration:none; color:inherit; padding:7px; border-radius:10px}
.rcard:hover{background:#f0ecdf}
.rcard img,.rimg{width:72px; height:72px; object-fit:cover; border-radius:8px;
  background:#efeadd; border:1px solid var(--line); display:block}
.rcard .rt{display:block; font-size:13.5px; font-weight:600; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rcard .rm{display:block; font-size:12px; color:var(--ink3); margin-top:2px}

.ad-slot{background:var(--brass-bg); border:1px solid #e8dcbc; border-radius:var(--r);
  padding:14px 16px; font-size:14px}
.ad-tag{display:block; font-size:11px; color:var(--ink3); margin-bottom:4px}
.ad-slot b{font-size:15.5px}
.ad-slot p{margin:5px 0 10px; color:var(--ink2); font-size:13.5px; line-height:1.6}
.ad-btn{display:inline-flex; align-items:center; min-height:38px; padding:6px 16px;
  background:var(--brass); color:#fff; text-decoration:none; border-radius:99px; font-size:13.5px}

/* ------------------------------------------------------------ อื่น ๆ */
.pager{display:flex; gap:10px; justify-content:center; align-items:center; margin:26px 0 8px}
.pager a,.pager span{min-height:44px; min-width:44px; display:inline-flex; align-items:center;
  justify-content:center; padding:0 16px; border-radius:9px; text-decoration:none}
.pager a{background:var(--paper); border:1px solid var(--line); color:var(--ink)}
.pager span{background:var(--green); color:#fff}
.cta{display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:10px 22px; background:var(--green); color:#fff;
  text-decoration:none; border-radius:999px; font-weight:600}
.empty{text-align:center; padding:52px 18px; color:var(--ink3)}
.muted{color:var(--ink3)}
.article h1{font-size:22px; line-height:1.55; margin:2px 0 12px}

.ft{background:#221e17; color:#cfc8b8; margin-top:36px}
.ft-in{max-width:1120px; margin:0 auto; padding:26px 16px; text-align:center; font-size:14px}
.ft b{color:#fff}
.ft-nav a{color:#e0d8c4; text-decoration:none; padding:6px 4px; display:inline-block}
.ft .muted{color:#8b8574; margin-top:6px}

/* แถบล่างมือถือ */
.bnav{position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.bnav a{flex:1; text-align:center; font-size:11.5px; color:var(--ink2);
  text-decoration:none; padding:7px 0 6px; min-height:52px}
.bnav .bi{display:block; font-size:20px; line-height:1.15}
@media(min-width:860px){ .bnav{display:none} }

/* ---------------------------------------------------------- ชุดที่ 6 */
.ic{width:20px; height:20px; flex:0 0 20px; display:inline-block; vertical-align:-4px}

.s-item{position:relative}
.s-item .s-toggle{position:absolute; right:4px; top:4px; width:32px; height:32px;
  border:0; background:none; cursor:pointer; color:var(--ink3); padding:0;
  display:flex; align-items:center; justify-content:center}
.s-item .s-toggle .ic{width:16px; height:16px; transition:transform .18s}
.s-item.open .s-toggle .ic{transform:rotate(90deg)}
.s-item.has-kids > .s-link{padding-right:38px}
.s-kids{display:none; margin:0 0 4px 14px; border-left:1px solid var(--line); padding-left:6px}
.s-item.open .s-kids{display:block}
.s-link{gap:10px}
.s-link.on{background:#e7efe4; color:var(--green); font-weight:600}
.s-kid{font-size:13.5px; min-height:36px; padding:6px 10px}
.s-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}


/* เส้นทางบนหน้าพระ */
.crumbs{display:flex; flex-direction:column; gap:5px; margin:0 0 12px; font-size:13.5px}
.crumb-line{display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--ink2)}
.crumb-line .ic{width:16px; height:16px; flex:0 0 16px; color:var(--brass)}
.crumb-line a{color:var(--ink2); text-decoration:none}
.crumb-line a:hover{color:var(--green); text-decoration:underline}
.crumb-line .sep{color:var(--ink3); margin:0 2px}

/* หน้าเกจิรายภาค */
.monkgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.monkcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; text-decoration:none; color:inherit; display:block; min-height:64px}
.monkcard:hover{border-color:var(--green); box-shadow:0 3px 12px rgba(36,31,24,.09)}
.mk-n{display:block; font-weight:600; font-size:14.5px; line-height:1.5}
.mk-c{display:block; font-size:12.5px; color:var(--ink3); margin-top:2px}

/* แถบล่างมือถือ ใช้ไอคอน svg */
.bnav a{display:flex; flex-direction:column; align-items:center; gap:2px}
.bnav a .ic{width:21px; height:21px}
.bnav a span{font-size:10.5px; line-height:1.2}

/* ---------------------------------------------------------- ชุด 6 รอบสอง */
/* แถบชิปย้ายมาอยู่เหนือเนื้อหา  ไม่กินความกว้างเมนูซ้าย */
.chipsbar{margin:0 0 14px; padding:9px 0; background:var(--bg);
  border-bottom:1px solid var(--line); top:var(--hd)}

/* การ์ดเด่น 3 ใบ  รูปบน ตัวหนังสือล่าง */
.feat3{display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:20px}
@media(min-width:700px){ .feat3{grid-template-columns:repeat(3,1fr)} }
.fcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:block}
.fcard:hover{box-shadow:0 5px 18px rgba(36,31,24,.13)}
.fcard img,.fcard-noimg{width:100%; aspect-ratio:4/3; object-fit:cover;
  background:#efeadd; display:block}
.fcard-body{display:block; padding:12px 14px 14px}
.fcard-tag{display:inline-block; font-size:11.5px; background:var(--brass-bg);
  color:var(--brass); border-radius:99px; padding:2px 10px; margin-bottom:6px}
.fcard-title{display:block; font-size:15.5px; font-weight:700; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.fcard-meta{display:block; font-size:13px; color:var(--ink2); margin-top:4px}
.fcard.only-wide{display:none}
@media(min-width:700px){ .fcard.only-wide{display:block} }

/* ---------------------------------------------------------- ตัวกรองเหนือกริด */
.filterbar{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin:0 0 16px}
.fb-label{font-size:13px; color:var(--ink3); margin-right:2px}
.fchip{font-size:13.5px; padding:5px 13px; min-height:34px;
  display:inline-flex; align-items:center; border-radius:999px;
  background:var(--paper); border:1px solid var(--line); color:var(--ink2);
  text-decoration:none; white-space:nowrap}
.fchip.on{background:var(--brass); border-color:var(--brass); color:#fff}
.fchip:hover{border-color:var(--brass)}
/* แถบชิปบนสุดเป็นเมนูหลักแล้ว  ทำให้เด่นขึ้นเล็กน้อย */
.chipsbar .chipx{font-weight:500}

/* ---------------------------------------------------------- ลิ้นชักเมนูมือถือ
   จอเล็กกดปุ่ม ☰ แล้วเมนูซ้ายเลื่อนออกมาทับหน้าจอ
   เดิมจอเล็กเปิดเมนูไม่ได้เลย เพราะซ่อนทั้งเมนูและซ่อนทั้งปุ่ม */
.side-backdrop{position:fixed; inset:0; z-index:69; background:rgba(36,31,24,.45)}
@media(min-width:860px){ .side-backdrop{display:none !important} }

@media(max-width:859px){
  .side{
    display:block;
    position:fixed; top:0; left:0; bottom:0; z-index:70;
    width:280px; max-width:84vw;
    background:var(--paper); border-right:1px solid var(--line);
    padding:14px 10px 90px; overflow-y:auto;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:2px 0 16px rgba(0,0,0,.18);
  }
  .side.open{transform:translateX(0)}
  body.side-open{overflow:hidden}
}


/* ---------------------------------------------------------- โลโก้แบรนด์ */
.logo{display:flex; align-items:center; gap:9px; text-decoration:none}
.logo-mark{height:26px; width:auto; color:#fff; flex:0 0 auto}
.logo-txt{font-size:18px; font-weight:700; color:#fff; letter-spacing:.2px; white-space:nowrap}
.logo-txt b{color:#e8d9a8; font-weight:700}
@media(max-width:520px){
  /* จอแคบมาก เหลือแต่ตราสัญลักษณ์ ให้ช่องค้นหาได้ที่มากขึ้น */
  .logo-txt{display:none}
  .logo-mark{height:28px}
}
.ft-brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:2px}

/* ตราในกรอบเขียวมน  เอกลักษณ์เดียวกันทุกที่ที่พื้นหลังไม่ใช่สีเขียวแบรนด์ */
.brand-tile{display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; background:var(--green); flex:0 0 34px}
.brand-tile .bt-mark{width:26px; height:auto; color:#fff}
.ft-brand{gap:11px}

/* ปุ่มแผนที่ในหน้าติดต่อเรา */
.content .mapbtn{display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:9px 18px; margin:4px 6px 4px 0; border-radius:999px;
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  text-decoration:none; font-size:14.5px}
.content .mapbtn:hover{border-color:var(--green); color:var(--green)}
.content .mapbtn.nav{background:var(--green); border-color:var(--green); color:#fff}
.content .mapbtn.nav:hover{background:var(--green-d); color:#fff}
.content .mapbtn::before{content:'\1F4CD'; font-size:15px}
.content .mapbtn.nav::before{content:'\27A4'}

/* ส่วนผู้ดูแลเว็บในหน้าเกี่ยวกับเรา */
.content .owner{display:grid; grid-template-columns:1fr; gap:16px; margin:16px 0 0;
  padding:16px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r)}
.content .owner img{width:100%; max-width:170px; height:auto; border-radius:12px;
  display:block; margin:0 auto; background:#efeadd}
.content .owner figcaption b{display:block; font-size:17px; line-height:1.5}
.content .owner figcaption span{display:block; font-size:13.5px; color:var(--ink3); margin-bottom:8px}
.content .owner figcaption p{margin:0 0 8px}
@media(min-width:640px){
  .content .owner{grid-template-columns:170px 1fr; align-items:start; gap:22px}
  .content .owner img{max-width:none}
}

/* QR พร้อมเพย์ในหน้าการเช่าบูชา */
.content .payqr{margin:16px 0; text-align:center}
.content .payqr img{width:100%; max-width:280px; height:auto; border-radius:12px;
  border:1px solid var(--line); display:block; margin:0 auto}
.content .payqr figcaption{font-size:14px; color:var(--ink2); margin-top:10px; line-height:1.7}

/* ป้ายบัญชีทางการ LINE */
.content .oa{display:inline-block; font-size:11.5px; background:#e6f7ec; color:#06843c;
  border-radius:999px; padding:1px 9px; margin-left:5px; vertical-align:1px}

/* ---------------------------------------------------------- ชุดเบญจภาคี */
.setintro{font-size:15px; color:var(--ink2); margin:0 0 18px; max-width:720px; line-height:1.75}

/* หน้าชุด  5 องค์ยอดนิยม */
.setgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:700px){ .setgrid{grid-template-columns:repeat(5,1fr); gap:14px} }
.setcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:block}
.setcard:hover{box-shadow:0 4px 16px rgba(36,31,24,.12)}
.setcard img,.setnoimg{width:100%; aspect-ratio:1; object-fit:cover; background:#efeadd; display:block}
.setbody{display:block; padding:10px 11px 12px}
.settitle{display:block; font-size:14px; font-weight:600; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.setmeta{display:block; font-size:12.5px; color:var(--ink2); margin-top:3px}
.setmore{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:20px 0 8px}

/* หน้ารวม 9 ชุด */
.benjaidx{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:8px}
@media(min-width:640px){ .benjaidx{grid-template-columns:1fr 1fr; gap:12px} }
@media(min-width:1100px){ .benjaidx{grid-template-columns:repeat(3,1fr)} }
.bicard{display:grid; grid-template-columns:62px 1fr; gap:14px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; text-decoration:none; color:inherit}
.bicard:hover{border-color:var(--green); box-shadow:0 3px 12px rgba(36,31,24,.1)}
.bicard.empty{opacity:.62}
.bin{display:flex; align-items:center; justify-content:center; width:62px; height:62px;
  border-radius:12px; background:var(--brass-bg); color:var(--brass);
  font-size:19px; font-weight:700; white-space:nowrap}
.bicard.empty .bin{background:#f0eee7; color:var(--ink3); font-size:18px}
.bit{display:block; font-size:15.5px; font-weight:600; line-height:1.45}
.bid{display:block; font-size:13px; color:var(--ink2); margin-top:3px}

/* ---------------------------------------------------------- พระเกจิ */
/* กริดรูปเกจิในหน้าภาค */
.monkgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:640px){ .monkgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px} }
.monkcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:block; padding:0}
.monkcard:hover{border-color:var(--green); box-shadow:0 4px 14px rgba(36,31,24,.11)}
.monkcard img,.mk-noimg{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:#efeadd}
.mk-noimg{background:linear-gradient(0deg,#efeadd,#efeadd)}
.mk-b{display:block; padding:10px 12px 12px}
.mk-n{display:block; font-weight:600; font-size:15px; line-height:1.45}
.mk-t{display:block; font-size:12.5px; color:var(--ink2); margin-top:2px}
.mk-c{display:block; font-size:12.5px; color:var(--ink3); margin-top:3px}

/* แถบประวัติเกจิเหนือรายการพระ */
.monkhero{display:grid; grid-template-columns:1fr; gap:16px; margin:0 0 22px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.monkhero img{width:100%; max-width:220px; height:auto; border-radius:10px;
  display:block; margin:0 auto; background:#efeadd}
@media(min-width:640px){
  .monkhero{grid-template-columns:220px 1fr; gap:22px; align-items:start; padding:20px}
  .monkhero img{max-width:none}
}
.mh-name{font-size:22px; font-weight:700; margin:0 0 10px; line-height:1.4}
.mh-facts{display:flex; flex-direction:column; gap:3px; margin-bottom:12px; font-size:14.5px; color:var(--ink2)}
.mh-facts .f b{color:var(--brass); font-weight:600}
@media(min-width:700px){ .mh-facts{flex-direction:row; flex-wrap:wrap; gap:4px 18px} }
.mh-bio{margin:0; font-size:15px; line-height:1.8; color:var(--ink)}

/* ---------------------------------------------------------- แผนที่ประเทศไทย */
.thmap{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; margin:0 0 22px; display:flex; justify-content:center}
.thmap svg{width:100%; max-width:430px; height:auto}
.thmap .rg{cursor:pointer}
.thmap .rg path,.thmap .rg rect{fill:#e6eee2; stroke:var(--paper); stroke-width:2.5;
  transition:fill .15s}
.thmap .rg.lv1 path{fill:#d7e6d0}
.thmap .rg.lv2 path{fill:#bcd8b3}
.thmap .rg.lv3 path{fill:#93c188}
.thmap .rg.lv4 path{fill:#66a55e}
.thmap .rg.lv0 path{fill:#efece3}
.thmap .rg:hover path,.thmap .rg:hover rect{fill:var(--green)}
.thmap .rg.on path,.thmap .rg.on rect{fill:var(--green)}
.thmap .rgl{font-size:15px; font-weight:600; fill:var(--ink); text-anchor:middle;
  pointer-events:none}
.thmap .rgn{font-size:12.5px; fill:var(--ink2); text-anchor:middle; pointer-events:none}
.thmap .rgt{stroke:var(--ink3); stroke-width:1.4; stroke-dasharray:3 3}
/* ภาคแคบที่ป้ายอยู่นอกรูป  ตัวหนังสือคงสีเดิมเสมอ ไม่งั้นจะกลืนพื้นหลัง */
.thmap .rg.out .rgl{fill:var(--ink)}
.thmap .rg.out .rgn{fill:var(--ink2)}
.thmap .rg.out:hover .rgl,.thmap .rg.out.on .rgl{fill:var(--green)}
.thmap .rg:not(.out):hover .rgl,.thmap .rg:not(.out).on .rgl,
.thmap .rg:not(.out):hover .rgn,.thmap .rg:not(.out).on .rgn{fill:#fff}
.thmap .rg.lv4:not(.out) .rgl{fill:#fff}
.thmap .rg.lv4:not(.out) .rgn{fill:#e8f2e6}
.thmap .abroad rect{fill:#efece3; stroke:var(--line)}

/* ---------------------------------------------------------- แผนที่ประเทศไทย */
.thmap{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:12px; margin:0 0 22px; display:flex; justify-content:center}
.thmap svg{width:100%; max-width:640px; height:auto}
.thmap .rg{cursor:pointer}
.thmap .rg path,.thmap .rg rect{fill:#e6eee2; stroke:var(--paper); stroke-width:16; transition:fill .15s}
.thmap .rg rect{stroke-width:2; stroke:var(--line)}
.thmap .rg.lv1 path{fill:#d5e5cd}
.thmap .rg.lv2 path{fill:#b3d3a9}
.thmap .rg.lv3 path{fill:#86b87b}
.thmap .rg.lv4 path{fill:#4f8f47}
.thmap .rg.lv0 path{fill:#efece3}
.thmap .rg:hover path,.thmap .rg.on path,
.thmap .rg:hover rect,.thmap .rg.on rect{fill:var(--green)}
.thmap .rgl{cursor:pointer}

/* ตัวหนังสือบนแผนที่
   ใช้ขอบรอบตัวอักษรช่วยให้อ่านออกทุกพื้นหลัง ไม่ว่าภาคนั้นจะอ่อนหรือเข้ม
   paint-order stroke ทำให้ขอบวาดก่อนแล้วตัวอักษรทับทีหลัง ตัวอักษรจึงคมไม่บวม */
.thmap .rgt{font-size:34px; font-weight:700; text-anchor:middle; pointer-events:none;
  paint-order:stroke fill; stroke-width:7px; stroke-linejoin:round}
.thmap .rgc{font-size:27px; font-weight:600; text-anchor:middle; pointer-events:none;
  paint-order:stroke fill; stroke-width:6px; stroke-linejoin:round}

/* ภาคสีอ่อน  ตัวอักษรเข้มขอบขาว */
.thmap .rgl.lv0 .rgt,.thmap .rgl.lv1 .rgt,.thmap .rgl.lv2 .rgt{fill:#1f2d22; stroke:#fff}
.thmap .rgl.lv0 .rgc,.thmap .rgl.lv1 .rgc,.thmap .rgl.lv2 .rgc{fill:#43514a; stroke:#fff}

/* ภาคสีเข้ม  ตัวอักษรขาวขอบเข้ม  ไม่งั้นจะจมหายไปกับพื้น */
.thmap .rgl.lv3 .rgt,.thmap .rgl.lv4 .rgt{fill:#fff; stroke:#1d3a26}
.thmap .rgl.lv3 .rgc,.thmap .rgl.lv4 .rgc{fill:#eaf3e6; stroke:#1d3a26}

/* ป้ายที่อยู่นอกรูป  พื้นหลังเป็นสีขาวเสมอ จึงใช้ตัวอักษรเข้มตลอด */
.thmap .rgl.out .rgt{fill:#1f2d22; stroke:#fff}
.thmap .rgl.out .rgc{fill:#43514a; stroke:#fff}

/* ภาคที่กำลังเปิดอยู่หรือกำลังชี้  พื้นกลายเป็นเขียวเข้ม ตัวอักษรต้องเป็นสีขาว */
.thmap .rgl.on .rgt,.thmap .rgl:hover .rgt{fill:#fff; stroke:#1d3a26}
.thmap .rgl.on .rgc,.thmap .rgl:hover .rgc{fill:#eaf3e6; stroke:#1d3a26}
.thmap .rgl.out.on .rgt,.thmap .rgl.out:hover .rgt{fill:var(--green); stroke:#fff}
.thmap .rgl.out.on .rgc,.thmap .rgl.out:hover .rgc{fill:var(--green-d); stroke:#fff}

.thmap .abroad .rgt{fill:#1f2d22; stroke:#fff}
.thmap .abroad .rgc{fill:#43514a; stroke:#fff}
.thmap .abroad:hover .rgt,.thmap .abroad.on .rgt{fill:#fff; stroke:#1d3a26}
.thmap .abroad:hover .rgc,.thmap .abroad.on .rgc{fill:#eaf3e6; stroke:#1d3a26}
@media(max-width:560px){
  .thmap .rgt{font-size:36px}
  .thmap .rgc{font-size:30px}
}

/* ส่วนของแต่ละภาคในหน้ารวมเกจิ */
.rgsec{margin:0 0 26px}
.rgh{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:2px solid var(--line); padding-bottom:8px; margin-bottom:14px}
.rgh h2{font-size:19px; margin:0; font-weight:700}
.rgh h2 a{color:inherit; text-decoration:none}
.rgh h2 a:hover{color:var(--green)}
.rgrow{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:640px){ .rgrow{grid-template-columns:repeat(4,1fr)} }
.rgm{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:block}
.rgm:hover{border-color:var(--green); box-shadow:0 3px 12px rgba(36,31,24,.1)}
.rgm img,.rgm-no{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:#efeadd}
.rgm-n{display:block; font-size:14px; font-weight:600; line-height:1.45; padding:9px 11px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rgm-c{display:block; font-size:12.5px; color:var(--ink3); padding:2px 11px 11px}
.rgmore{display:inline-flex; align-items:center; min-height:42px; padding:8px 18px;
  border:1px solid var(--line); border-radius:999px; text-decoration:none;
  color:var(--green); background:var(--paper); font-size:14.5px; margin-top:12px}
.rgmore:hover{border-color:var(--green)}

/* ---------------------------------------------------------- แยกเมนูซ้ายจากเนื้อหา
   เดิมเมนูซ้ายกับเนื้อหาใช้พื้นหลังสีเดียวกัน จึงกลืนกันบนจอกว้าง */
@media(min-width:860px){
  /* พื้นหลังแถบซ้ายวาดไว้ที่กล่องนอกแทนที่จะวาดบนตัวเมนู
     จึงยาวเท่ากับเนื้อหาด้านขวาเสมอ และหยุดตรงส่วนท้ายเว็บพอดี
     ไม่ล้นเลยแถบสีดำ และไม่สั้นกว่าเนื้อหา ไม่ว่าเมนูจะสั้นหรือยาว
     เส้นคั่นก็วาดจากกล่องนอกด้วย จึงยาวเต็มเช่นกัน */
  .shell{
    background:linear-gradient(to right,
      #f2efe4 0 230px,
      var(--line) 230px 231px,
      var(--bg) 231px);
  }
  .side{background:transparent}
}

/* ---------------------------------------------------------- แถบขวาในหน้ารายการ
   แสดงเฉพาะจอ 1100px ขึ้นไป
   มือถือและแท็บเล็ตแนวตั้งไม่แสดง เพราะจะดันกริดพระลงไปไกลเกิน */
.l-wrap{display:block}
.l-main{min-width:0}
.l-rail{display:none}
@media(min-width:1100px){
  .l-wrap{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:start}
  .l-rail{display:block}
  /* หน้าที่ไม่มีแถบขวา  กริดพระกว้างเต็มจอ เห็นพระได้มากที่สุด */
  .l-wrap.full{display:block}
}
.rlink{display:block; padding:9px 12px; border-radius:9px; text-decoration:none;
  color:var(--ink); font-size:14px; background:var(--paper);
  border:1px solid var(--line); margin-bottom:7px}
.rlink:hover{border-color:var(--green); color:var(--green)}

/* ---------------------------------------------------------- ชุดเบญจภาคี 5 ตำแหน่ง */
.slotgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0 0 8px}
@media(min-width:700px){ .slotgrid{grid-template-columns:repeat(5,1fr); gap:12px} }
.slotcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit;
  display:flex; flex-direction:column}
.slotcard:hover{border-color:var(--green); box-shadow:0 4px 14px rgba(36,31,24,.12)}
.slotcard.empty{opacity:.62; border-style:dashed}
.slot-im{position:relative; display:block}
/* รูปเต็มกรอบทุกใบ ไม่มีขอบว่าง
   ภาพพระสมเด็จเป็นจัตุรัสพอดี วางในกรอบจัตุรัสจึงเต็มพอดีอยู่แล้ว
   แต่ภาพเหรียญไม่เป็นจัตุรัส ถ้าแสดงองค์เต็มจะเหลือขอบครีมล้อมรอบ
   จึงให้ขยายเต็มกรอบแล้วตัดส่วนเกินทิ้ง ทุกใบจะได้หน้าตาเดียวกัน
   ตัดค่อนไปทางบนเล็กน้อยที่ 42% แทนที่จะตัดกึ่งกลางพอดี
   เพราะเหรียญมีหูห้อยอยู่ด้านบน ถ้าตัดกึ่งกลางอาจเฉือนหูหายไป
   ส่วนภาพจัตุรัสอย่างพระสมเด็จไม่ถูกตัดอยู่แล้ว ค่านี้จึงไม่มีผล */
.slot-im img,.slot-no{width:100%; aspect-ratio:1; object-fit:cover;
  object-position:center 42%; background:#efeadd; display:block}
.slot-pos{position:absolute; top:7px; left:7px; width:26px; height:26px; border-radius:99px;
  background:var(--paper); color:var(--green); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(36,31,24,.18)}
/* ส่วนข้อความใต้รูป
   จัดให้ทุกใบสูงเท่ากันเสมอ ไม่ว่าชื่อจะสั้นหรือยาว

   สาเหตุเดิม  ชื่อตำแหน่งยาวไม่เท่ากันมาก
     ชุดหลัก      ยาวสุด 18 ตัวอักษร  พอดี 1 บรรทัดทุกใบ
     ชุดอื่น       ยาวสุด 36 ตัวอักษร  บางใบตกเป็น 2 บรรทัด
   ตารางจึงยืดความสูงตามใบที่สูงที่สุด
   ใบที่ชื่อสั้นกว่าเลยเหลือช่องว่างด้านล่าง

   แก้โดยจองพื้นที่ชื่อไว้ 2 บรรทัดเสมอ และดันจำนวนองค์ไปชิดล่าง
   ทุกใบจึงสูงเท่ากันและข้อความเรียงตรงกันทุกบรรทัด */
.slot-b{display:flex; flex-direction:column; flex:1; padding:9px 10px 11px}
.slot-n{display:-webkit-box; font-size:13.5px; font-weight:600; line-height:1.45;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(13.5px * 1.45 * 2)}
.slot-p{display:block; font-size:12px; color:var(--ink3); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slot-c{display:block; font-size:12.5px; color:var(--green); font-weight:600;
  margin-top:auto; padding-top:4px}
.slot-c.zero{color:var(--ink3); font-weight:400}

.slotsec{margin:26px 0 0}
.slotsec .rgh h2{font-size:17px}
.morecard{display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--paper); border:1px dashed var(--line-2,#cfcabb); border-radius:var(--r);
  aspect-ratio:1; text-decoration:none; color:var(--ink2); font-size:13.5px; line-height:1.6}
.morecard:hover{border-color:var(--green); color:var(--green)}
.morecard b{font-size:16px}

/* แถวของแต่ละตำแหน่งในชุดเบญจภาคี  3 องค์ + ปุ่มดูอีก = 4 ช่องพอดี */
@media(min-width:700px){ .pgrid.slot4{grid-template-columns:repeat(4,1fr)} }

/* เดิมจำกัดความกว้างเนื้อหาไว้ 760px ทำให้เหลือช่องว่างด้านขวามาก
   ตอนนี้ให้เต็มความกว้างของคอลัมน์เหมือนหน้าบทความ
   ความกว้างที่พออ่านสบายมาจากแถบขวาที่กินพื้นที่ไปแล้วส่วนหนึ่ง */
.l-main .article .content{max-width:none}

/* ---------------------------------------------------------- อุปกรณ์ถ่ายภาพ */
.content .gearcard{display:grid; grid-template-columns:1fr; gap:16px; margin:20px 0;
  padding:18px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r)}
.content .gearcard > img{width:100%; max-width:230px; height:auto; border-radius:10px;
  display:block; margin:0 auto; background:#fff; border:1px solid var(--line)}
.content .gearcard h3{margin:0 0 8px; font-size:17.5px}
.content .gearcard p{margin:0 0 10px}
.content .gearcard p:last-child{margin-bottom:0}
@media(min-width:640px){
  .content .gearcard{grid-template-columns:230px minmax(0,1fr); gap:22px; align-items:start; padding:20px}
  .content .gearcard > img{max-width:none}
}
.content .geargrid{display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:12px 0 8px}
@media(min-width:520px){ .content .geargrid{grid-template-columns:repeat(4,1fr)} }
.content .geargrid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); display:block; margin:0; background:#efeadd}
.content .gearcap{font-size:13px; color:var(--ink3); margin:0 0 4px}

/* คำอธิบายใต้ QR พร้อมเพย์  จัดให้อ่านง่ายเป็นบรรทัด */
.content .payqr figcaption{display:flex; flex-direction:column; gap:3px;
  font-size:14px; color:var(--ink2); margin-top:12px; line-height:1.7}
.content .payqr figcaption b{font-size:17px; color:var(--ink); letter-spacing:.3px}
.content .payqr figcaption span:last-child{font-size:13px; color:var(--ink3)}

/* แถบขวายึดใต้แถบหัวเว็บตอนเลื่อน  เนื้อหายาวแค่ไหนโฆษณาก็ยังเห็น */
@media(min-width:1100px){
  .l-rail{position:sticky; top:calc(var(--hd) + 14px)}
}

/* ---------------------------------------------------------- บทความ */
/* การ์ดบทความ  มีรูปปก */
.acard{display:block; padding:0; overflow:hidden}
.acard-im{width:100%; aspect-ratio:1200/630; object-fit:cover; display:block; background:#efeadd}
.acard-im.none{display:block}
.acard-b{display:block; padding:12px 14px 14px}
.acard-title{display:block; font-size:15.5px; font-weight:600; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.acard-ex{display:block; font-size:13.5px; color:var(--ink2); margin-top:5px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* หน้าบทความ */
.a-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:13.5px; color:var(--ink3); margin:0 0 14px}
.a-cat{display:inline-block; padding:2px 11px; border-radius:999px;
  background:var(--green-soft,#e8f1e4); color:var(--green); text-decoration:none; font-size:13px}
.a-cat:hover{background:var(--green); color:#fff}
.a-cover{width:100%; height:auto; border-radius:var(--r); display:block;
  margin:0 0 18px; background:#efeadd}
.content img{max-width:100%; height:auto; border-radius:10px; display:block; margin:16px auto}
.content .a-gal{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0}
@media(min-width:640px){ .content .a-gal{grid-template-columns:repeat(3,1fr)} }
.content .a-gal img{margin:0; width:100%; aspect-ratio:1; object-fit:cover}

/* บทความที่เกี่ยวข้อง  แก้ปัญหาหน้ากำพร้า */
.relsec{margin:30px 0 0; padding-top:22px; border-top:2px solid var(--line)}
.relgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:700px){ .relgrid{grid-template-columns:repeat(4,1fr)} }
.relcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:block}
.relcard:hover{border-color:var(--green); box-shadow:0 3px 12px rgba(36,31,24,.1)}
.relcard img,.relno{width:100%; aspect-ratio:1200/630; object-fit:cover; display:block; background:#efeadd}
.relb{display:block; padding:9px 11px 12px}
.relcat{display:block; font-size:11.5px; color:var(--green); font-weight:600; margin-bottom:3px}
.relt{display:block; font-size:13.5px; font-weight:600; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.acard-cat{display:block; font-size:11.5px; color:var(--green); font-weight:600; margin-bottom:3px}

/* ชิปเลือกหมวดบทความ */
.chipsrow{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px}
.chipsrow .chipx span{opacity:.6; margin-left:3px; font-size:12.5px}

/* ---------------------------------------------------------- หน้าเทียบเคียง */
.crumbs{display:flex; gap:7px; align-items:center; flex-wrap:wrap;
  font-size:13px; color:var(--ink3); margin:0 0 10px}
.crumbs a{color:var(--ink2); text-decoration:none}
.crumbs a:hover{color:var(--green)}
.crumbs b{font-weight:600; color:var(--ink)}

/* ภาพคู่ */
.cpair{display:grid; grid-template-columns:1fr; gap:14px; margin:6px 0 6px}
@media(min-width:640px){ .cpair{grid-template-columns:1fr 1fr} }
.cside{margin:0}
.cside figcaption{display:flex; align-items:center; gap:8px; font-size:14.5px;
  font-weight:600; margin-bottom:7px}
.cside figcaption::before{content:''; width:11px; height:11px; border-radius:99px; background:var(--green)}
.cside.cmp figcaption::before{background:#c8862a}
.cpic{position:relative; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:#efeadd}
.cpic img{width:100%; height:auto; display:block}
.cpin{position:absolute; transform:translate(-50%,-50%);
  width:30px; height:30px; min-width:30px; border-radius:99px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; padding:0;
  background:#fff; border:2.5px solid var(--green); color:var(--green);
  box-shadow:0 1px 6px rgba(0,0,0,.35); transition:transform .12s}
.cpin.cmp{border-color:#c8862a; color:#c8862a}
.cpin:hover,.cpin.on{transform:translate(-50%,-50%) scale(1.22)}
.cpin.on{background:var(--green); color:#fff}
.cpin.cmp.on{background:#c8862a; color:#fff}
.cgo{display:inline-block; margin-top:9px; font-size:13.5px; color:var(--green);
  text-decoration:none; border-bottom:1px solid currentColor}
.chint{font-size:13px; color:var(--ink3); margin:4px 0 20px}

/* รายการจุดสังเกต */
.cplist{list-style:none; padding:0; margin:0 0 22px; counter-reset:none}
.cpitem{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; margin-bottom:11px; transition:border-color .15s, box-shadow .15s}
.cpitem.on{border-color:var(--green); box-shadow:0 3px 14px rgba(47,93,58,.16)}
.cpt{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.cpn{flex:0 0 28px; height:28px; border-radius:99px; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700}
.cpt h2{font-size:16.5px; margin:0; font-weight:600}
.cpb{display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:640px){ .cpb{grid-template-columns:1fr 1fr} }
.cpn-std,.cpn-cmp{border-left:3px solid var(--green); padding-left:11px}
.cpn-cmp{border-left-color:#c8862a}
.cpn-std b,.cpn-cmp b{display:block; font-size:12.5px; color:var(--green); margin-bottom:3px}
.cpn-cmp b{color:#c8862a}
.cpn-std p,.cpn-cmp p{margin:0; font-size:14.5px; line-height:1.75; color:var(--ink)}
.csum{background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; margin-bottom:16px}
.csum h2{font-size:17px; margin:0 0 8px}
.csum p{margin:0; line-height:1.8}
.cnote{font-size:13px; color:var(--ink3); line-height:1.75; margin:0}

/* ---------------------------------------------------------- ปุ่มติดต่อในเมนูซ้าย
   วางท้ายเมนู เพราะเป็นสิ่งที่คนหาเมื่ออ่านจนพอใจแล้ว ไม่ใช่สิ่งแรกที่ต้องเห็น
   ใช้สีประจำแบรนด์ของแต่ละช่องทาง คนจำได้ทันทีโดยไม่ต้องอ่านป้าย */
.sociallinks{margin:18px 4px 8px; padding-top:14px; border-top:1px solid var(--line)}
.sl-h{display:block; font-size:12.5px; color:var(--ink3); margin-bottom:9px; padding-left:2px}
.sl-row{display:flex; gap:7px; flex-wrap:wrap}
.sl{width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; color:#fff; text-decoration:none; transition:transform .12s, filter .12s}
.sl svg{width:20px; height:20px; display:block}
.sl:hover{transform:translateY(-2px); filter:brightness(1.1)}
.sl.fb{background:#1877F2}
.sl.yt{background:#FF0000}
.sl.li{background:#06C755}
.sl.ml{background:#4a5568}
.sl.ph{background:var(--green)}
.sl-tel{display:inline-block; margin-top:10px; font-size:14.5px; font-weight:600;
  color:var(--green); text-decoration:none; letter-spacing:.3px}
.sl-tel:hover{text-decoration:underline}

/* บนมือถือปุ่มใหญ่ขึ้นให้กดง่าย  ตามมาตรฐานพื้นที่แตะ 44 พิกเซล */
@media(max-width:859px){
  .sl{width:44px; height:44px}
  .sl svg{width:23px; height:23px}
}

/* หัวข้อใหญ่ของหน้าแรก  วางเป็นแถบแนะนำสั้น ๆ ไม่ให้เกะกะ */
.homehead{margin:0 0 16px}
.homehead h1{font-size:21px; font-weight:700; margin:0 0 5px; line-height:1.4}
@media(min-width:700px){ .homehead h1{font-size:25px} }
.homehead p{margin:0; font-size:14px; color:var(--ink2); line-height:1.7}
.homehead p span{display:block; font-size:13px; color:var(--ink3); margin-top:2px}

/* ---------------------------------------------------------- ป๊อบอัปดูรูป
   เดิมกดรูปแล้วเปิดหน้าใหม่ ต้องปิดหน้าแล้วกลับมาเอง ใช้งานยาก
   ตอนนี้เปิดทับหน้าเดิม ปิดแล้วอยู่ที่เดิมทันที */
body.lbx-lock{overflow:hidden}
.lbx{position:fixed; inset:0; z-index:9999; display:none;
  background:rgba(18,15,11,.94); align-items:center; justify-content:center;
  padding:20px; -webkit-tap-highlight-color:transparent}
.lbx.on{display:flex}
.lbx-stage{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  overflow:auto}
.lbx img{max-width:100%; max-height:88vh; width:auto; height:auto; display:block;
  border-radius:8px; cursor:zoom-in; transition:transform .2s}
.lbx img.zoom{max-width:none; max-height:none; width:190%; cursor:zoom-out; border-radius:0}
@media(min-width:900px){ .lbx img.zoom{width:150%} }
.lbx-x,.lbx-p,.lbx-n{position:absolute; background:rgba(255,255,255,.14); color:#fff;
  border:0; border-radius:999px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; line-height:1; transition:background .15s}
.lbx-x:hover,.lbx-p:hover,.lbx-n:hover{background:rgba(255,255,255,.3)}
.lbx-x{top:14px; right:14px; width:46px; height:46px; font-size:30px}
.lbx-p,.lbx-n{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:34px}
.lbx-p{left:12px} .lbx-n{right:12px}
.lbx-cap{position:absolute; bottom:16px; left:0; right:0; text-align:center;
  color:#fff; font-size:14px; opacity:.85; pointer-events:none}
@media(max-width:600px){
  .lbx{padding:8px}
  .lbx-p,.lbx-n{width:44px; height:44px; font-size:28px}
  .lbx-x{width:44px; height:44px; font-size:27px; top:10px; right:10px}
}

/* รูปในแกลเลอรีบอกให้รู้ว่ากดได้ */
.gallery a{cursor:zoom-in; display:block}