/* Thai decorative layer for the public portal (loaded after public-portal.css, public pages only).
   Keeps the approved grid, Sarabun, flat surfaces (no shadows), 4–6px radii and the tool/social docks.
   All artwork is original SVG in images/theme/, used as CSS backgrounds (decorative, no text).
   Palette: primary blue from the site plus green, gold, sky and roof-red taken from the agency logo/banner. */
:root{
  /* accent families: --a-* borders/ornaments, --s-* strong shades that keep white text >= 4.5:1, --t-* tints */
  --a-blue:#0069D9;  --s-blue:#0069D9;  --t-blue:#E8F3FF;
  --a-green:#1F9D55; --s-green:#157F45; --t-green:#E6F7EE;
  --a-gold:#F2B01E;  --s-gold:#9A6700;  --t-gold:#FFF5D6;
  --a-sky:#16B9E5;   --s-sky:#0B7EA3;   --t-sky:#E2F7FD;
  --a-red:#E4572E;   --s-red:#C2410C;   --t-red:#FDEDE7;
  --decor-gold:#FFD15A;          /* ornaments only, never text on light backgrounds */
  --decor-page:#F4FAFF;          /* inner-page content background (matches wave-soft.svg fill) */
  --decor-tile:url("images/theme/prajam-tile.svg");            /* ประจำยาม tile, light surfaces */
  --decor-tile-light:url("images/theme/prajam-tile-light.svg"); /* ประจำยาม tile, blue/navy surfaces */
  --decor-border:url("images/theme/thai-border.svg");          /* ร้อยดอกประจำยาม strip, 14px */
  --decor-kanok:url("images/theme/kanok-divider.svg");         /* gold กนก divider */
  --decor-bunting:url("images/theme/bunting.svg");             /* ธงราว, 42px */
  --decor-scene:url("images/theme/rice-scene.svg");            /* ทุ่งนา ลำคลอง ต้นตาล (navy surfaces) */
  --decor-head-scene:url("images/theme/page-head-scene.svg");  /* colourful landscape for blue page heads */
  --decor-wave:url("images/theme/wave-soft.svg");              /* wave from page head into content */
  --decor-stripe:linear-gradient(90deg,var(--a-blue) 0 20%,var(--a-green) 20% 40%,var(--a-gold) 40% 60%,var(--a-sky) 60% 80%,var(--a-red) 80% 100%);
}

/* ---------- Header, navigation, footer (every page) ---------- */
.public-body .site-header{border-top:0;background-image:var(--decor-stripe);background-size:100% 5px;background-repeat:no-repeat;padding-top:5px}
.public-body .nav-wrap{border-bottom:0;padding-bottom:14px;background-image:var(--decor-border);background-repeat:repeat-x;background-position:left bottom}
.public-body #main-nav>a[aria-current]{box-shadow:inset 0 -3px 0 var(--decor-gold)}
.public-body .hero-purple-strip,
.public-body .home-search{background-image:var(--decor-tile-light)}
.public-body .footer-top-rule{height:14px;background:#0069D9 var(--decor-border) repeat-x left center;box-shadow:none}
.public-body .site-footer{background-image:var(--decor-scene);background-repeat:repeat-x;background-position:center bottom;background-size:1440px 220px}
.public-body .site-footer .footer-body{background-image:var(--decor-tile-light)}

/* Gold กนก divider under headings */
.public-body .section-heading h2::after,
.public-body .page-head h1::after{content:"";display:block;width:150px;height:15px;margin-top:6px;background:var(--decor-kanok) left center/contain no-repeat;pointer-events:none}
.public-body .page-head h1::after{width:190px;height:19px}
.public-body .partners-section .section-heading h2::after{width:120px;height:12px}

/* ---------- Inner pages: vivid illustrated page head + soft patterned page ---------- */
.public-body main:has(> .page-head){background:var(--decor-page) var(--decor-tile)}
.public-body .page-head{position:relative;overflow:hidden;border-bottom:0;padding-block:36px 64px;
  background-color:#0069D9;background-image:var(--decor-head-scene),var(--decor-tile-light);
  background-repeat:no-repeat,repeat;background-position:right bottom,left top;background-size:auto 210px,auto}
.public-body .page-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px;background:var(--decor-wave) center bottom/100% 100% no-repeat;pointer-events:none}
.public-body .page-head h1{color:#fff}
.public-body .page-head p{color:#E8F5FF}
.public-body .page-head .breadcrumbs,.public-body .page-head .breadcrumbs a{color:#E6F4FF}
.public-body .page-head .breadcrumbs a:hover{color:#fff}
@media (min-width:901px){.public-body .page-head .shell>*{max-width:min(62%,760px)}}
@media (max-width:900px){.public-body .page-head{padding-bottom:124px;background-size:auto 118px,auto;background-position:right bottom,left top}}

/* Error page: same illustrated blue card */
.public-body .error-page{margin-block:40px;padding:36px 36px 150px;border-radius:6px;color:#fff;background:#0069D9 var(--decor-head-scene) right bottom/auto 150px no-repeat}
.public-body .error-page h1{color:#fff;font-size:clamp(48px,8vw,88px);line-height:1.1;margin:0}
.public-body .error-page p{color:#E8F5FF}
.public-body .error-page .button{background:var(--decor-gold);color:#063B74;border-color:var(--decor-gold)}

/* ---------- Rotating accent colours (blue, green, gold, sky, red) ---------- */
.public-body :is(.grid,.home-activity-grid,.home-news-list,.home-document-list,.service-directory,.services-grid,.partner-directory,.transparency-links,.topic-links,.album-tabs,.organization-directory,.calendar-agenda)>:nth-child(5n+1){--accent:var(--a-blue);--strong:var(--s-blue);--tint:var(--t-blue)}
.public-body :is(.grid,.home-activity-grid,.home-news-list,.home-document-list,.service-directory,.services-grid,.partner-directory,.transparency-links,.topic-links,.album-tabs,.organization-directory,.calendar-agenda)>:nth-child(5n+2){--accent:var(--a-green);--strong:var(--s-green);--tint:var(--t-green)}
.public-body :is(.grid,.home-activity-grid,.home-news-list,.home-document-list,.service-directory,.services-grid,.partner-directory,.transparency-links,.topic-links,.album-tabs,.organization-directory,.calendar-agenda)>:nth-child(5n+3){--accent:var(--a-gold);--strong:var(--s-gold);--tint:var(--t-gold)}
.public-body :is(.grid,.home-activity-grid,.home-news-list,.home-document-list,.service-directory,.services-grid,.partner-directory,.transparency-links,.topic-links,.album-tabs,.organization-directory,.calendar-agenda)>:nth-child(5n+4){--accent:var(--a-sky);--strong:var(--s-sky);--tint:var(--t-sky)}
.public-body :is(.grid,.home-activity-grid,.home-news-list,.home-document-list,.service-directory,.services-grid,.partner-directory,.transparency-links,.topic-links,.album-tabs,.organization-directory,.calendar-agenda)>:nth-child(5n+5){--accent:var(--a-red);--strong:var(--s-red);--tint:var(--t-red)}

.public-body .card{border-top-color:var(--accent,#16B9E5)}
.public-body .card .tag,.public-body .home-entry .tag{background:var(--tint,#E8F5FF);color:#123F6B}
.public-body .card-media-empty{background:var(--tint,#E8F5FF) var(--decor-tile)}
.public-body .quick-card{border-left:5px solid var(--accent,#0069D9);background:#fff}
.public-body .quick-card .icon:first-child{flex:0 0 40px;width:40px;height:40px;padding:9px;border-radius:5px;background:var(--strong,#0069D9);color:#fff}
.public-body .quick-card:hover{background:var(--tint,#E8F5FF);text-decoration:none}
.public-body .citizen-service{background:var(--tint,#E8F5FF);border-top-color:var(--accent,#0069D9)}
.public-body .citizen-service .citizen-icon{background:var(--strong,#0069D9)}
.public-body .service-card{background-color:var(--strong,#0069D9);border-bottom-color:var(--decor-gold);background-image:var(--decor-tile-light);background-repeat:no-repeat;background-position:right -44px top -44px}
.public-body .service-card .service-icon{color:var(--strong,#0060BD)}
.public-body .service-card:hover{background-color:#073C73}
.public-body .partner-link{border-top:4px solid var(--accent,#16B9E5)}
.public-body .transparency-links>*{border-left:5px solid var(--accent,#0069D9)}
.public-body .home-document-list .home-date-block{background:var(--tint,#E8F5FF);border-top:4px solid var(--accent,#16B9E5);color:#123F6B}
.public-body .home-news-list .home-entry-link{border-left-color:var(--accent,#16B9E5)}
.public-body .topic-links a{background:var(--tint,#E8F5FF);border:1px solid var(--accent,#9BC5E5);color:#123F6B}
.public-body .topic-links a[aria-current],.public-body .topic-links a:hover{background:var(--strong,#0069D9);border-color:var(--strong,#0069D9);color:#fff;text-decoration:none}
.public-body .album-tabs>*{border-top:3px solid var(--accent,#0069D9)}

/* Year/indicator (ITA/OIT) and date (calendar) labels sit as a coloured tab on top of their card */
.public-body .grid>div>.tag:first-child{display:inline-block;margin:0;max-width:100%;padding:5px 12px;border-radius:5px 5px 0 0;background:var(--strong,#0069D9);color:#fff;font-size:13px;line-height:1.5}
.public-body .grid>div>.tag:first-child+.card{border-top-left-radius:0}

/* ---------- Home: alternating section colours and icon chips ---------- */
.public-body .home-content-news{background:#EAF4FF var(--decor-tile)}
.public-body .home-content-list:nth-child(odd){background:#EFFAF4 var(--decor-tile)}
.public-body .home-content-list:nth-child(even){background:#FFF9E8 var(--decor-tile)}
.public-body .home-content-list+.home-content-list{border-top:0}
.public-body .soft-section{background:#E6F7FD var(--decor-tile)}
.public-body .public-hub{background:#F3F9FE var(--decor-tile)}
.public-body .home-key-news .home-section-icon{background:var(--s-blue);color:#fff}
.public-body .home-key-procurement .home-section-icon{background:var(--s-gold);color:#fff}
.public-body .home-key-announcement .home-section-icon{background:var(--s-red);color:#fff}
.public-body .home-key-document .home-section-icon{background:var(--s-green);color:#fff}
.public-body .home-key-event .home-section-icon{background:var(--s-sky);color:#fff}
.public-body .home-activity-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.public-body .home-activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.public-body .home-activity-grid{grid-template-columns:1fr}} /* phones: one card per row, photo beside the text (public-portal.css) */
.public-body .home-content-gallery{background-image:var(--decor-scene);background-repeat:repeat-x;background-position:center bottom;background-size:1440px 220px;padding-bottom:128px}
.public-body .contact-ribbon{background-image:var(--decor-bunting),var(--decor-tile-light);background-repeat:repeat-x,repeat;background-position:left top,left top;padding-top:62px}

/* ---------- Content, forms, organisation, calendar ---------- */
.public-body .article-main{background:#fff;border:1px solid #CFE3F3;border-top:5px solid var(--a-blue);border-radius:6px;padding:28px}
.public-body .detail-aside .panel{border-top:5px solid var(--a-gold)}
.public-body .narrow>.panel{border-top:6px solid var(--a-green);background:#fff}
.public-body .filters{background:#fff;border:1px solid #CFE3F3;border-left:5px solid var(--a-sky)}
.public-body .empty{background:#fff var(--decor-tile);border-color:#9BC5E5}
.public-body .organization-directory>.panel{border-top:5px solid var(--accent,#0069D9)}
.public-body .person-card img{border:3px solid var(--a-sky)}
.public-body .calendar-panel{border-top:5px solid var(--a-blue)}
.public-body .calendar-day.has-events{background:var(--t-green)}
.public-body .calendar-day.is-today time{background:var(--s-red)}
.public-body .results-meta{display:inline-block;padding:4px 12px;border-radius:5px;background:var(--t-gold);color:#5B3C00}

/* Structured article bodies (prose(): headings, lists, tables) */
.public-body .prose h2{margin:28px 0 10px;padding-left:12px;border-left:5px solid var(--a-gold);color:#063B74;font-size:clamp(20px,2vw,24px)}
.public-body .prose h3{margin:20px 0 8px;color:#0B5AA8;font-size:19px}
.public-body .prose ul{padding-left:22px}
.public-body .prose li{margin:4px 0}
.public-body .table-scroll{overflow-x:auto;margin:14px 0 20px;border:1px solid #CFE3F3;border-radius:6px;background:#fff}
.public-body .table-scroll:focus-visible{outline:3px solid var(--a-blue);outline-offset:2px}
.public-body .prose table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px}
.public-body .prose th{background:var(--s-blue);color:#fff;font-weight:600;text-align:left;padding:10px 12px;white-space:nowrap}
.public-body .prose td{padding:9px 12px;border-top:1px solid #E1EDF7;vertical-align:top}
.public-body .prose tbody tr:nth-child(even){background:#F4FAFF}

/* ---------- Gentle motion (pointer devices, motion allowed) ---------- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .public-body :is(.home-entry-link,.card,.service-card,.citizen-service,.quick-card,.partner-link,.person-card){transition:translate .2s ease,background-color .2s ease}
  .public-body :is(.home-entry-link,.card,.service-card,.citizen-service,.quick-card,.partner-link,.person-card):hover{translate:0 -3px}
}
/* Reveal on scroll: JS adds .reveal only to items below the first screen; visible without JS */
@media (prefers-reduced-motion:no-preference){
  .js .public-body .reveal{opacity:0;translate:0 16px;transition:opacity .6s ease,translate .6s ease}
  .js .public-body .reveal.is-in{opacity:1;translate:none}
}

@media (max-width:600px){
  .public-body .section-heading h2::after{width:120px;height:12px}
  .public-body .page-head h1::after{width:150px;height:15px}
  .public-body .home-content-gallery{background-size:960px 147px;padding-bottom:92px}
  .public-body .contact-ribbon{padding-top:56px}
  .public-body .site-footer{background-size:960px 147px}
  .public-body .article-main{padding:20px 16px}
  .public-body .error-page{padding:28px 20px 130px;background-size:auto 110px}
}
@media print{
  .public-body .reveal{opacity:1!important;translate:none!important;transition:none!important}
  .public-body .section-heading h2::after,.public-body .page-head h1::after,.public-body .page-head::after{display:none}
  .public-body .page-head,.public-body .error-page{background:none;color:#000}
  .public-body .page-head h1,.public-body .page-head p,.public-body .error-page h1{color:#000}
}

/* =====================================================================
   Background ornaments (second pass): clouds, lotus corners, kites, sun rays,
   scattered flowers, pastel light and gold corner flourishes. All decorative
   pseudo-elements/backgrounds sit behind content (isolation + z-index:-1),
   never receive pointer events, and their SVG animations stop under reduced motion.
   ===================================================================== */
:root{
  --decor-clouds:url("images/theme/sky-clouds.svg");
  --decor-lotus:url("images/theme/lotus-corner.svg");
  --decor-kite:url("images/theme/kite.svg");
  --decor-sunburst:url("images/theme/sun-burst.svg");
  --decor-flowers:url("images/theme/flower-scatter.svg");
  --decor-blobs:url("images/theme/pastel-blobs.svg");
  --decor-corner:url("images/theme/kanok-corner.svg");
  --decor-corner-br:url("images/theme/kanok-corner-br.svg");
}
.public-body :is(.home-content-section,.home-module-services,.soft-section,.public-hub,.mayor-intro-section,.hero-purple-strip,.contact-ribbon,.home-search){position:relative;isolation:isolate}
.public-body :is(.home-content-section,.home-module-services,.soft-section,.public-hub,.mayor-intro-section)::before,
.public-body :is(.home-content-section,.home-module-services,.soft-section,.public-hub,.mayor-intro-section)::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}

/* Clouds drifting along the top of light sections */
.public-body :is(.home-content-news,.home-module-services,.home-content-list:nth-child(even))::before{left:0;right:0;top:0;height:140px;background-image:var(--decor-clouds);background-size:1440px 140px;background-position:center top;background-repeat:repeat-x;opacity:.95}
/* Lotus in the lower corners (the Pak Phanang wetland flower) */
.public-body .home-content-news::after,.public-body .soft-section::after{right:0;bottom:0;width:260px;height:170px;background-image:var(--decor-lotus);background-size:contain}
.public-body .home-content-list:nth-child(odd)::after,.public-body .public-hub::after{left:0;bottom:0;width:260px;height:170px;background-image:var(--decor-lotus);background-size:contain;transform:scaleX(-1)}
.public-body .soft-section::before{left:0;bottom:0;width:200px;height:130px;background-image:var(--decor-lotus);background-size:contain;transform:scaleX(-1)}
/* Scattered colourful flowers on the mint/cream bands, pastel light behind the leadership block and hub */
.public-body .home-content-list:nth-child(odd){background:#EFFAF4 var(--decor-flowers)}
.public-body .home-content-list:nth-child(even){background:#FFF9E8 var(--decor-flowers)}
.public-body .mayor-intro-section::before,.public-body .public-hub::before{inset:0;background-image:var(--decor-blobs);background-size:1440px auto;background-position:center top;background-repeat:repeat-y;opacity:.9}
.public-body .home-module-services::after{inset:0;background-image:var(--decor-flowers);opacity:.6}
/* Sun rays on the blue bands, kites in the sky */
.public-body .hero-purple-strip{background-image:var(--decor-sunburst),var(--decor-tile-light);background-repeat:no-repeat,repeat;background-position:left -250px center,left top;background-size:640px,auto} /* rays behind the emblem, clear of the welcome board */
.public-body .home-search{background-image:var(--decor-sunburst),var(--decor-tile-light);background-repeat:no-repeat,repeat;background-position:left -220px center,left top;background-size:560px,auto}
.public-body .contact-ribbon{background-image:var(--decor-bunting),var(--decor-kite),var(--decor-sunburst),var(--decor-tile-light);background-repeat:repeat-x,no-repeat,no-repeat,repeat;background-position:left top,right 8% top 52px,right -200px center,left top;background-size:auto,64px auto,560px,auto}
.public-body .home-content-gallery{background-image:var(--decor-kite),var(--decor-kite),var(--decor-scene);background-repeat:no-repeat,no-repeat,repeat-x;background-position:right 34% top 22px,right 44% top 60px,center bottom;background-size:64px auto,42px auto,1440px 220px}
.public-body .page-head{background-image:var(--decor-kite),var(--decor-head-scene),var(--decor-tile-light);background-repeat:no-repeat,no-repeat,repeat;background-position:right 42% top 24px,right bottom,left top;background-size:54px auto,auto 210px,auto}
.public-body .site-footer{background-image:var(--decor-kite),var(--decor-scene);background-repeat:no-repeat,repeat-x;background-position:right 5% top 40px,center bottom;background-size:56px auto,1440px 220px}
/* Inner pages: pastel light + ประจำยาม behind the content */
.public-body main:has(> .page-head){background-color:var(--decor-page);background-image:var(--decor-blobs),var(--decor-tile);background-size:1440px auto,auto;background-position:center 380px,left top;background-repeat:repeat-y,repeat}
/* Gold กนก flourishes on the main reading surfaces */
.public-body :is(.article-main,.detail-aside .panel,.narrow>.panel,.organization-directory>.panel,.calendar-panel){background-image:var(--decor-corner),var(--decor-corner-br);background-repeat:no-repeat,no-repeat;background-position:left 6px top 10px,right 6px bottom 6px;background-size:40px,40px}
.public-body .article-main{background-color:#fff}
@media (max-width:900px){
  .public-body .page-head{background-position:right 36% top 16px,right bottom,left top;background-size:40px auto,auto 118px,auto}
  .public-body .hero-purple-strip{background-position:left -260px center,left top;background-size:520px,auto}
}
@media (max-width:600px){
  .public-body :is(.home-content-news,.home-content-list,.soft-section,.public-hub)::after,.public-body .soft-section::before{width:150px;height:98px;opacity:.8}
  .public-body .home-content-gallery{background-position:right 40% top 10px,right 56% top 40px,center bottom;background-size:48px auto,32px auto,960px 147px}
  .public-body .contact-ribbon{background-position:left top,right 6% top 46px,right -260px center,left top;background-size:auto,44px auto,480px,auto}
}
@media print{.public-body :is(.home-content-section,.home-module-services,.soft-section,.public-hub,.mayor-intro-section)::before,.public-body :is(.home-content-section,.home-module-services,.soft-section,.public-hub,.mayor-intro-section)::after{display:none}}

/* =====================================================================
   e-GP page (/egp) and e-GP rows on the homepage
   ===================================================================== */
.public-body{--egp-win:#1F9D55;--egp-invite:#0069D9;--egp-draft:#0B7EA3;--egp-price:#7C3AED;--egp-plan:#6B7280;--egp-change:#B45309;--egp-cancel:#C2410C}
.public-body .egp-page{display:grid;gap:16px}
.public-body .egp-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.public-body .egp-stat{display:flex;gap:12px;align-items:flex-start;padding:16px;background:#fff;border:1px solid #CFE3F3;border-top:5px solid var(--accent,#0069D9);border-radius:6px}
.public-body .egp-stat:nth-child(2){--accent:var(--a-gold)}.public-body .egp-stat:nth-child(3){--accent:var(--a-green)}
.public-body .egp-stat>.icon{flex:0 0 40px;width:40px;height:40px;padding:9px;border-radius:5px;background:var(--t-blue);color:#0069D9}
.public-body .egp-stat span,.public-body .egp-stat small{display:block;color:#50677C;font-size:13px}
.public-body .egp-stat strong{display:block;color:#063B74;font-size:17px;line-height:1.5}
.public-body .egp-dot{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;background:var(--egp-win)}.public-body .egp-dot.warn{background:var(--egp-change)}.public-body .egp-dot.bad{background:var(--egp-cancel)}
.public-body .egp-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.public-body .egp-tab{flex:1 0 108px;display:block;padding:10px 12px;background:#fff;border:1px solid #CFE3F3;border-top:4px solid #9BC5E5;border-radius:6px;color:#123F6B;text-decoration:none}
.public-body .egp-tab span{display:block;font-size:12px;color:#50677C}
.public-body .egp-tab strong{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.public-body .egp-tab em{font-style:normal;font-weight:600;color:#0069D9}.public-body .egp-tab em.zero{color:#9AA9B7}
.public-body .egp-tab:hover{background:var(--t-blue)}
.public-body .egp-tab[aria-current]{background:#0069D9;border-color:#0069D9;border-top-color:var(--decor-gold);color:#fff}
.public-body .egp-tab[aria-current] span,.public-body .egp-tab[aria-current] em{color:#fff}
.public-body .egp-tab-archive{border-top-color:var(--a-gold)}
.public-body .egp-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:16px;background:#fff;border:1px solid #CFE3F3;border-left:5px solid var(--a-sky);border-radius:6px}
.public-body .egp-field{flex:1 1 280px;display:grid;gap:6px;font-size:13px;color:#50677C}
.public-body .egp-field-type{flex:0 1 300px}
.public-body .egp-actions{display:flex;gap:8px}
.public-body .egp-chips{display:flex;flex-wrap:wrap;gap:8px}
.public-body .egp-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;background:#fff;border:1px solid #CFE3F3;border-radius:5px;color:#123F6B;text-decoration:none;font-size:14px}
.public-body .egp-chip em{font-style:normal;font-weight:600;color:#50677C}
.public-body .egp-chip[aria-current]{background:#063B74;border-color:#063B74;color:#fff}.public-body .egp-chip[aria-current] em{color:#CFEAFF}
.public-body .egp-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--egp-plan)}
.public-body .egp-win .egp-swatch,.public-body .egp-swatch.egp-win{background:var(--egp-win)}
.public-body .egp-invite .egp-swatch,.public-body .egp-swatch.egp-invite{background:var(--egp-invite)}
.public-body .egp-draft .egp-swatch,.public-body .egp-swatch.egp-draft{background:var(--egp-draft)}
.public-body .egp-price .egp-swatch,.public-body .egp-swatch.egp-price{background:var(--egp-price)}
.public-body .egp-change .egp-swatch,.public-body .egp-swatch.egp-change{background:var(--egp-change)}
.public-body .egp-cancel .egp-swatch,.public-body .egp-swatch.egp-cancel{background:var(--egp-cancel)}
.public-body .egp-result-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--t-gold);border-radius:5px;color:#5B3C00;font-size:14px}
.public-body .egp-result-head a{color:#063B74;font-weight:600}
.public-body .egp-day{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 0;padding:10px 14px;background:#063B74;border-left:5px solid var(--decor-gold);border-radius:5px;color:#fff;font-size:16px}
.public-body .egp-day .icon{width:18px;height:18px;vertical-align:-3px}
.public-body .egp-day-n{font-size:13px;font-weight:400;color:#CFEAFF}
.public-body .egp-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #CFE3F3;border-radius:0 0 6px 6px}
.public-body .egp-item{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:14px 16px;border-bottom:1px solid #E1EDF7}
.public-body .egp-item:last-child{border-bottom:0}
.public-body .egp-item:hover{background:#F4FAFF}
.public-body .egp-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1px solid #CFE3F3;border-radius:5px;background:#F4FAFF;color:#123F6B;font-size:13px}
.public-body .egp-title{display:block;margin:6px 0 4px;color:#063B74;font-size:16px;font-weight:600;line-height:1.6;text-decoration:none;word-break:break-word}
.public-body a.egp-title:hover{text-decoration:underline}
.public-body .egp-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:#50677C}.public-body .egp-meta b{font-weight:600}
.public-body .egp-mono{font-family:ui-monospace,Consolas,monospace}
.public-body .egp-open{white-space:nowrap}
.public-body .egp-note{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;background:#fff;border:1px solid #CFE3F3;border-left:5px solid #0069D9;border-radius:5px;color:#50677C;font-size:14px}
.public-body .home-entry-egp .egp-tag{margin-bottom:4px}
.public-body .home-egp-link{margin:16px 0 0;text-align:center}
@media (max-width:900px){.public-body .egp-status{grid-template-columns:1fr}.public-body .egp-item{grid-template-columns:1fr}.public-body .egp-open{justify-self:start}}

/* =====================================================================
   Tool dock (left): gold double frame, ช่อกนก caps, ITA badge, 3-step ก sizes, TH/EN, อื่นๆ flyout, ผู้ดูแล.
   Keeps #toolbar-toggle / .language-switch / collapse behaviour; on compact screens it opens upward
   from a round gold "ก ▲" button in the lower-left corner.
   ===================================================================== */
body.font-small{--font-scale:.92}
@media (min-width:1101px){.public-body .thai-dock{left:8px;top:auto;bottom:14px;transform:none;gap:34px;align-items:center}} /* anchored low so the ornament never covers the header or menu */
.public-body .thai-dock .quick-dock-items{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:96px;padding:0 8px 4px;
  background:linear-gradient(180deg,#0B5CB8 0%,#063B74 55%,#0B5CB8 100%);background-image:var(--decor-tile-light),linear-gradient(180deg,#0B5CB8 0%,#063B74 55%,#0B5CB8 100%);
  border:5px double #F2B01E;border-radius:6px;outline:2px solid #FFE9A3;outline-offset:-9px}
.public-body .thai-dock-cap{display:block;flex:0 0 auto;width:112px;height:64px;margin:-40px -20px -6px;background:url("images/theme/dock-cap.svg") center/contain no-repeat;pointer-events:none}
.public-body .thai-dock-cap-bottom{margin:-6px -20px -40px;background-image:url("images/theme/dock-cap-bottom.svg")}
.public-body .thai-dock-ita{display:grid;place-items:center;width:64px;padding:4px 0 2px;border:2px solid #FFD15A;border-radius:5px;background:#fff;color:#063B74;text-decoration:none;line-height:1.1}
.public-body .thai-dock-ita span{font-size:20px;font-weight:800;letter-spacing:.5px;color:#0069D9}
.public-body .thai-dock-ita small{font-size:11px;color:#9A6700}
.public-body .thai-dock-group{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.public-body .thai-dock-label{margin-top:4px;color:#fff;font-size:14px;line-height:1.3}
.public-body .thai-dock-btn{display:grid;place-items:center;width:56px;min-height:40px;padding:0;border:2px solid #9FE0FF;border-radius:6px;background:#E8F5FF;color:#063B74;font:inherit;font-weight:700;font-size:16px;line-height:1;cursor:pointer;text-decoration:none;list-style:none}
.public-body .thai-dock-btn::-webkit-details-marker{display:none}
.public-body .thai-dock-btn:hover{background:#fff;border-color:#FFD15A}
.public-body .thai-dock-btn:focus-visible,.public-body .thai-dock a:focus-visible{outline:3px solid #FFD15A;outline-offset:2px}
.public-body .fs-small{font-size:15px}.public-body .fs-normal{font-size:20px}.public-body .fs-large{font-size:27px;min-height:46px}
.public-body .thai-dock-btn[aria-pressed="true"],.public-body .thai-dock-btn.is-current,.public-body .thai-dock-more[open]>summary{background:#FFD15A;border-color:#fff;color:#063B74;outline:3px solid rgba(255,209,90,.55);outline-offset:1px}
.public-body .thai-dock .language-switch{margin:0}
.public-body .thai-dock-more{position:relative;width:100%;display:flex;justify-content:center;margin-top:4px}
.public-body .thai-dock-more>summary{width:64px;font-size:14px;font-weight:600}
.public-body .thai-dock-links{position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);z-index:2;display:grid;gap:4px;width:200px;padding:10px;background:#fff;border:3px double #F2B01E;border-radius:6px}
.public-body .thai-dock-links a{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 8px;border-radius:5px;color:#063B74;text-decoration:none;font-size:15px}
.public-body .thai-dock-links a:hover{background:var(--t-blue)}
.public-body .thai-dock-links .icon{width:20px;height:20px;color:#0069D9}
.public-body .thai-dock-abbr{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 4px;border-radius:4px;background:#0069D9;color:#fff;font-size:11px;font-weight:700}
.public-body .thai-dock-admin{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px;color:#fff;text-decoration:none;font-size:14px}
.public-body .thai-dock-admin .icon{width:20px;height:20px;color:#FFD15A}
.public-body .thai-dock-admin:hover{color:#FFD15A}
.public-body .thai-dock .toolbar-toggle{background:#063B74;border:2px solid #F2B01E;color:#fff}
.public-body .thai-dock .toolbar-glyph{display:none}
@media (min-width:1101px) and (max-height:820px){ /* short screens: compact dock that stays under the header, scrolls inside if needed */
  .public-body .thai-dock{gap:10px;bottom:8px}
  .public-body .thai-dock .quick-dock-items{gap:3px;max-height:calc(100vh - 262px);overflow-y:auto;padding-top:6px;padding-bottom:6px;scrollbar-width:thin}
  .public-body .thai-dock-cap,.public-body .thai-dock-cap-bottom{width:70px;height:36px;margin:0;flex:0 0 36px}
  .public-body .thai-dock-btn{min-height:30px;width:52px}.public-body .fs-large{min-height:34px;font-size:22px}.public-body .fs-normal{font-size:18px}
  .public-body .thai-dock-label{font-size:12px;margin-top:0}.public-body .thai-dock-ita{padding:2px 0}.public-body .thai-dock-ita span{font-size:16px}.public-body .thai-dock-ita small{display:none}
  .public-body .thai-dock-admin{margin-top:2px}.public-body .thai-dock .toolbar-toggle{min-height:36px;padding:4px 8px}
  .public-body .thai-dock-links{position:fixed;left:124px;top:auto;bottom:14px;transform:none;max-height:calc(100vh - 28px);overflow-y:auto} /* the item list scrolls here, so the flyout is anchored to the viewport instead */
}
@media (max-width:1100px){
  .public-body .thai-dock .quick-dock-items{display:flex;flex-direction:column;grid-template-columns:none;align-items:center;width:104px;padding:10px 8px;max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain}
  .public-body .thai-dock.collapsed .quick-dock-items{display:none}
  .public-body .thai-dock-cap{width:84px;height:46px;margin:0 0 -2px}.public-body .thai-dock-cap-bottom{margin:-2px 0 0}
  .public-body .thai-dock-links{position:static;transform:none;width:100%;padding:6px;margin-top:6px}
  .public-body .thai-dock-links a span:not(.thai-dock-abbr){font-size:12px}
  .public-body .thai-dock-links a{flex-direction:column;gap:2px;min-height:44px;text-align:center}
  .public-body .thai-dock .toolbar-toggle{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:58px;height:58px;min-width:0;padding:0;border-radius:50%;background:#F2B01E;border:3px solid #fff;outline:2px solid #B7791F;color:#063B74;font-size:22px;font-weight:800}
  .public-body .thai-dock .toolbar-glyph{display:inline}
  .public-body .thai-dock .toolbar-glyph::after{content:"▲";font-size:11px;margin-left:2px;vertical-align:middle}
  .public-body .thai-dock:not(.collapsed) .toolbar-glyph::after{content:"✕"}
  .public-body .thai-dock .toolbar-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
html:not(.js) .public-body .thai-dock .quick-dock-items{flex-direction:row;flex-wrap:wrap;width:auto;justify-content:center}
html:not(.js) .public-body .thai-dock-cap{display:none}

/* =====================================================================
   Characters and flowers: "น้องบ้านเนิน" helper, "พี่สายด่วน" in the contact ribbon,
   flower corners and falling petals in page heads.
   ===================================================================== */
.public-body .mascot{position:fixed;right:142px;bottom:10px;z-index:1500;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none}
.public-body .mascot>*{pointer-events:auto}
html:not(.js) .public-body .mascot,.public-body:has(.cookie-banner) .mascot{display:none}
.public-body .mascot-button{display:block;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.public-body .mascot-button img{width:96px;height:auto;display:block}
.public-body .mascot-button:focus-visible{outline:3px solid #FFD15A;outline-offset:3px;border-radius:8px}
.public-body .mascot-bubble{position:relative;max-width:210px;padding:10px 30px 10px 14px;background:#fff;border:3px solid #0069D9;border-radius:6px;color:#123F6B;font-size:14px;line-height:1.45;text-align:center}
.public-body .mascot-bubble::after{content:"";position:absolute;right:30px;bottom:-12px;border:10px solid transparent;border-top-color:#0069D9;border-bottom:0}
.public-body .mascot-text{margin:0;font-weight:600}
.public-body .mascot-ask{color:#C2410C;font-size:18px;font-weight:800}
.public-body .mascot-answer{color:#0069D9;font-size:18px;font-weight:800}
.public-body .mascot-bubble-close{position:absolute;top:2px;right:4px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#50677C;font-size:18px;line-height:1;cursor:pointer}
.public-body .mascot-bubble-close:hover{background:var(--t-blue)}
.public-body .mascot-panel{width:250px;padding:12px;background:#fff;border:4px double #F2B01E;border-radius:6px;color:#123F6B}
.public-body .mascot-panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.public-body .mascot-panel-head button{width:30px;height:30px;border:0;border-radius:50%;background:var(--t-blue);color:#063B74;font-size:18px;cursor:pointer}
.public-body .mascot-links{display:grid;gap:2px}
.public-body .mascot-links a{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 8px;border-radius:6px;color:#063B74;text-decoration:none}
.public-body .mascot-links a:hover,.public-body .mascot-links a:focus-visible{background:var(--t-blue)}
.public-body .mascot-links .icon{width:20px;height:20px;color:#0069D9}
@media (prefers-reduced-motion:no-preference){
  .public-body .mascot-bubble.is-bouncing{animation:mascot-pop .45s ease}
  @keyframes mascot-pop{0%{scale:.9}60%{scale:1.05}100%{scale:1}}
}
@media (max-width:1100px){
  .public-body .mascot{right:10px;bottom:66px}
  .public-body .mascot-button img{width:72px}
  .public-body .mascot-bubble{max-width:170px;font-size:13px}
  .public-body .mascot-panel{width:min(250px,calc(100vw - 24px))}
  .public-body:has(#quick-dock-left:not(.collapsed),#quick-dock-right:not(.collapsed)) .mascot{display:none} /* one floating panel at a time */
}
/* "พี่สายด่วน" stands at the left of the contact ribbon */
.public-body .contact-ribbon{min-height:190px}
.public-body .contact-ribbon::after{content:"";position:absolute;left:max(10px,calc(50% - 700px));bottom:0;width:126px;height:189px;background:url("images/theme/hotline-officer.svg") center bottom/contain no-repeat;pointer-events:none}
@media (min-width:901px){.public-body .contact-ribbon>.shell{padding-left:128px}}
@media (min-width:1101px){ /* keep clear of the tall tool dock on the left */
  .public-body .contact-ribbon::after{left:max(112px,calc(50% - 600px))}
  .public-body .contact-ribbon>.shell{padding-left:max(128px,calc(244px - max(32px,(100vw - 1200px) / 2)))}
}
@media (max-width:900px){.public-body .contact-ribbon::after{left:auto;right:8px;width:92px;height:138px}.public-body .contact-ribbon>.shell{padding-right:96px}}
/* Flower corners and falling petals in page heads and the identity strip */
.public-body .page-head::before{content:"";position:absolute;inset:0;background:url("images/theme/petals.svg") left top/400px 300px repeat;pointer-events:none;z-index:0}
.public-body .page-head>.shell{position:relative;z-index:1}
.public-body .hero-purple-strip::after{content:"";position:absolute;inset:0;background:url("images/theme/petals.svg") left top/400px 300px repeat;pointer-events:none;z-index:-1}
.public-body .mayor-intro-section::after{right:0;bottom:0;width:220px;height:190px;transform:scaleX(-1);background-image:url("images/theme/flower-corner.svg");background-size:contain}
@media (max-width:600px){.public-body .mayor-intro-section::after{width:130px;height:112px}}
@media print{.public-body .mascot,.public-body .contact-ribbon::after,.public-body .page-head::before,.public-body .hero-purple-strip::after{display:none}}

/* Visitor counter: numbers never wrap. The panel sizes its own layout: four across when wide, 2 × 2 when narrow
   (the homepage side column is ~370px, too narrow for "172,012" in a quarter). */
.public-body .visitor-panel{container-type:inline-size}
.public-body .visitor-grid dd{white-space:nowrap;word-break:keep-all;overflow-wrap:normal;font-size:clamp(22px,6.2cqi,32px);line-height:1.2;letter-spacing:-.01em}
.public-body .visitor-grid dt{line-height:1.35}
@container (max-width:560px){
  .public-body .visitor-grid{grid-template-columns:1fr 1fr;row-gap:0;padding:6px 14px 10px}
  .public-body .visitor-grid>div{padding:14px 6px;border-right:1px solid #dbe8f2;border-bottom:1px solid #dbe8f2}
  .public-body .visitor-grid>div:nth-child(2n){border-right:0}
  .public-body .visitor-grid>div:nth-child(n+3){border-bottom:0}
  .public-body .visitor-grid dd{font-size:clamp(24px,10cqi,32px)}
  .public-body .visitor-grid dt{font-size:12px}
}
/* Phones: the activity heading and "ดูทั้งหมด" fill the width, so the kites would cross the title; keep only the landscape. */
@media (max-width:600px){.public-body .home-content-gallery{background-image:var(--decor-scene);background-repeat:repeat-x;background-position:center bottom;background-size:960px 147px}}