/* GUI template 2 (BKK) สำหรับ thamdee — ปรับสีและฟอนต์ของเนื้อหา (app.css) ให้เข้ากับ BKK design system
   ใช้เฉพาะเมื่อ <body class="tpl-bkk"> ; โหมดมืดไม่รองรับใน template 2 (บังคับโทนสว่างเหมือน BKK) */
body.tpl-bkk{
  --bg:#F4F9F7; --card:#FFFFFF; --ink:#121313; --mute:#626664; --line:#D0D8D4;
  --g:#00744B; --g-ink:#FFFFFF; --g2:#005235; --mint:#E6F1ED; --sun:#F2A93B; --sun-ink:#121313;
  --font-d:Anuphan,'IBM Plex Sans Thai',system-ui,sans-serif; --font-b:Anuphan,'IBM Plex Sans Thai',system-ui,sans-serif;
  --shadow:0 6px 16px 0 rgba(0,0,0,.06),0 3px 6px -4px rgba(0,0,0,.1);
  color-scheme:light;
  background:var(--bg) linear-gradient(180deg,#F4F9F7 0,#EEF1F0 720px) no-repeat;
  font-size:16px;-webkit-font-smoothing:antialiased;
}
body.tpl-bkk .shell{grid-template-columns:minmax(0,1fr)!important;max-width:1240px;gap:0}
body.tpl-bkk main{padding-top:22px}
body.tpl-bkk .card,body.tpl-bkk .pc,body.tpl-bkk .stat,body.tpl-bkk .dv-card{border-radius:12px;border-color:#E3E8E5}
body.tpl-bkk .btn{border-radius:8px}
body.tpl-bkk .page-h h1{font-weight:700;color:var(--g2)}
body.tpl-bkk .demo{background:#123325}
body.tpl-bkk .seg2{border-radius:10px}
body.tpl-bkk .seg2 button,body.tpl-bkk .seg2 a{border-radius:8px}
body.tpl-bkk .chipb,body.tpl-bkk .pill{border-radius:8px}

/* header: ไอคอน + เมนูแบบ pill, เมนูมือถือ */
body.tpl-bkk .app-header .brand{color:var(--p500)}
body.tpl-bkk .app-header .brand img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none}
body.tpl-bkk .app-footer .brand-mini img{width:40px;height:40px;border-radius:10px;object-fit:cover;filter:none}
body.tpl-bkk .app-header .brand-text{display:flex;flex-direction:column;line-height:1.1;margin-left:2px}
body.tpl-bkk .app-header .pill-nav a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;padding:8px 14px;border-radius:999px;color:var(--n700);font-weight:600;font-size:14.5px}
body.tpl-bkk .app-header .pill-nav a .badge{background:var(--red);color:#fff;border-radius:99px;font-size:11px;padding:0 6px}
body.tpl-bkk .app-header .nav-burger{display:none;border:0;background:transparent;font-size:24px;cursor:pointer;border-radius:8px;width:40px;height:40px;color:var(--n700)}
body.tpl-bkk .app-header .header-tools form{margin:0}
body.tpl-bkk .scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--scroll-p,0)*100%);background:var(--p500)}
@media (max-width:767px){
  body.tpl-bkk .app-header .nav-burger{display:inline-flex;align-items:center;justify-content:center}
  body.tpl-bkk .app-header .pill-nav{display:none}
  body.tpl-bkk .app-header .pill-nav.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:var(--header-h);background:#fff;padding:10px 12px 14px;border-bottom:1px solid var(--n100);box-shadow:0 12px 24px rgba(0,0,0,.08);margin:0;max-height:calc(100vh - var(--header-h));overflow:auto}
  body.tpl-bkk .app-header .pill-nav.open a{padding:12px;border-radius:10px}
  body.tpl-bkk .app-header .pill-nav.open a span{display:inline}
  body.tpl-bkk main{padding-bottom:40px}
}

/* footer */
.app-footer .home-wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.app-footer .footer-meta a{color:#fff}
.tpl-switch{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;margin-top:10px}
.tpl-switch span{opacity:.75;margin-right:2px}
.tpl-switch a{border:1px solid currentColor;border-radius:999px;padding:2px 12px;text-decoration:none;color:inherit;opacity:.8}
.tpl-switch a.on{background:var(--g);border-color:var(--g);color:var(--g-ink);opacity:1;font-weight:700}
body.tpl-bkk .app-footer .tpl-switch a.on{background:#fff;border-color:#fff;color:var(--dg900)}
body:not(.tpl-bkk) footer .tpl-switch{margin-top:12px}