/* plans4 — GUI template 2 (BKK) ปรับให้เข้ากับ plan.css และตัวสลับ template */
/* plan.css กำหนด nav{} แบบแถบเขียว — ใน header BKK ให้เป็น pill-nav ปกติ */
.app-header nav.pill-nav { position: static; height: auto; background: transparent; box-shadow: none; padding: 0; color: inherit; z-index: auto; }
.app-header .header-row { padding: 0 20px; }
.app-header .brand { text-decoration: none; }
.app-header .pill-nav a { text-decoration: none; }
.app-header .cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--p500); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.app-header a.cta:hover { background: var(--p700); color: #fff; }
.app-header .cta span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.app-header .icon-btn { background: transparent; border: 0; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--n700); cursor: pointer; }
@media (max-width: 767px) {
  .app-header .pill-nav.open { display: flex; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; background: #fff; padding: 8px 12px; box-shadow: var(--shadow); }
  .app-header .nav-burger { display: inline-flex; }
}
@media (min-width: 768px) { .app-header .nav-burger { display: none; } }

/* เมนูย่อย "แผนปฏิบัติราชการ" */
.pp-drop { position: relative; display: inline-flex; }
.pp-drop > a .caret { font-size: 12px; margin-left: -2px; color: var(--n500); transition: transform .2s; }
.pp-drop.show > a { background: var(--n100); color: var(--n900); }
.pp-drop.show .caret { transform: rotate(180deg); }
.pp-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 8px; z-index: 300; }
.pp-drop.show .pp-menu { display: block; animation: subIn .16s ease-out; }
.app-header .pp-menu a { display: block; padding: 8px 12px; border-radius: var(--r); color: var(--n700); font-size: 14px; white-space: nowrap; }
.app-header .pp-menu a:hover { background: var(--n100); color: var(--n900); }

/* แถบแท็บภาพรวม/ด้านที่เปิด (SPA) */
.pp-tabbar { background: #fff; border-bottom: 1px solid var(--n100); }
.pp-tabbar .nav-tabs { display: flex; gap: 6px; padding: 8px 20px; max-width: 1280px; margin: 0 auto; overflow-x: auto; }
.pp-tabbar .nav-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--n200); background: #fff; color: var(--n700); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pp-tabbar .nav-tab:hover { background: var(--n100); color: var(--n900); }
.pp-tabbar .nav-tab.active { background: var(--p500); border-color: var(--p500); color: #fff; }
.pp-tabbar .nav-tab .tab-ic { width: 20px; height: 20px; }
.pp-tabbar .close-tab { margin-left: 4px; opacity: .7; }

/* ตัวสลับ template (ใช้ร่วมกับ footer ของทั้งสองแบบ) */
.gs-tplfoot { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gs-tplfoot-lbl { font-size: 12.5px; }
.gs-tplsw { display: inline-flex; border: 1px solid #1a7e3f; flex-shrink: 0; }
.gs-tplsw a { display: inline-flex; align-items: center; gap: 4px; background: #fff; color: #145c2e !important; font: 600 12px/1 monospace; padding: 6px 9px; text-decoration: none !important; border-bottom: 0 !important; }
.gs-tplsw a + a { border-left: 1px solid #1a7e3f; }
.gs-tplsw a[aria-pressed="true"] { background: #145c2e; color: #fff !important; }
.gs-tplsw .tpl-ic { font-size: 13px; }
.tpl-bkk .app-footer .gs-tplfoot-lbl { color: rgba(255, 255, 255, .7); }
.tpl-bkk .app-footer .gs-tplsw { border-color: rgba(255, 255, 255, .45); border-radius: 999px; overflow: hidden; }
.tpl-bkk .app-footer .gs-tplsw a { background: transparent; color: rgba(255, 255, 255, .85) !important; font-family: inherit; padding: 6px 12px; }
.tpl-bkk .app-footer .gs-tplsw a + a { border-left-color: rgba(255, 255, 255, .45); }
.tpl-bkk .app-footer .gs-tplsw a[aria-pressed="true"] { background: #fff; color: #0E281D !important; }
.tpl-bkk .app-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.tpl-bkk .app-footer .footer-links { display: inline-flex; gap: 16px; }

/* footer ของ template 1 */
.pl1-foot { background: #1a4731; color: rgba(255,255,255,.85); margin-top: 40px; padding: 16px 24px; }
.pl1-foot .in { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; font-size: .85rem; }
.pl1-foot .gs-tplfoot-lbl { color: rgba(255,255,255,.7); }
.pl1-foot .gs-tplsw { border-color: rgba(255,255,255,.45); }
.pl1-foot .gs-tplsw a { background: transparent; color: rgba(255,255,255,.85) !important; }
.pl1-foot .gs-tplsw a[aria-pressed="true"] { background: #fff; color: #145c2e !important; }